/* Articles.
   Only typography and the index grid. Everything structural - the header, the
   menu, the footer, the fonts, the colours - comes from style.css, because an
   article should read as part of the site and not as a thing bolted on. */

/* One measure for the whole article. The headline and the body were on
   different widths, so their left edges did not line up. */
.art-head,.art-body,.art-foot,.art-cover-wrap{max-width:760px}
.art-head{padding:70px 0 0}
/* padding out, margin back in: the tap area grows to a thumb's width
   without moving the text or changing the spacing. These were 19px and
   29px tall, well under the ~44px a thumb needs. */
.art-head .eyebrow a{text-decoration:none;border-bottom:1px solid #c9c9c9;
  display:inline-block;padding:13px 0 2px;margin:-13px 0 0}
.art-head h1{font-size:clamp(2.3rem,4.2vw,3.6rem);letter-spacing:-.05em;
  line-height:1.1;margin:0 0 24px}
.art-head .lead{color:var(--muted);margin-bottom:22px}
.art-meta{font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;
  font-weight:700;color:#8a7466;margin:0}

.art-cover-wrap{margin:40px auto 0;padding:0}
.art-cover{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}

/* The reading column. Anything wider than about 70 characters is hard work,
   which is the whole reason a long article loses people halfway down. */
.art-body{padding:46px 0 10px;font-size:1.0625rem;line-height:1.78}
.art-body>*:first-child{margin-top:0}
.art-body h2{font-size:1.75rem;letter-spacing:-.025em;line-height:1.3;
  margin:48px 0 16px}
.art-body h3{font-size:1.2rem;margin:36px 0 12px}
.art-body p{margin:0 0 22px}
.art-body a{color:#8a4a16;text-underline-offset:3px}
.art-body ul,.art-body ol{margin:0 0 22px;padding-left:22px}
.art-body li{margin-bottom:9px}
.art-body blockquote{margin:34px 0;padding:4px 0 4px 26px;
  border-left:3px solid var(--accent);font-family:Manrope,Arial,sans-serif;
  font-size:1.3rem;line-height:1.55;letter-spacing:-.02em}
.art-body blockquote p:last-child{margin-bottom:0}
.art-body blockquote cite{display:block;margin-top:14px;font-family:'DM Sans',sans-serif;
  font-size:.875rem;font-style:normal;color:var(--muted)}
.art-body figure{margin:36px 0}
.art-body img{width:100%;border-radius:2px}
.art-body figcaption{font-size:.8125rem;color:var(--muted);margin-top:10px}
.art-body hr{border:0;border-top:1px solid var(--line);margin:40px 0}
.art-foot{padding:26px 0 80px}

/* Sharing, at the foot of the article. */
.art-share{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:0 0 26px;margin-bottom:26px;border-bottom:1px solid var(--line)}
.art-share span{font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;
  font-weight:700;color:#8a7466}
.art-share a{font-size:.9375rem;font-weight:600;text-decoration:none;
  border-bottom:1px solid #c9c9c9;display:inline-block;
  padding:11px 0 3px;margin:-11px 0 0}
.art-share a:hover{border-color:var(--ink)}

/* Where to go next, instead of a dead end. */
.art-more{max-width:1240px;padding:16px 0 80px;border-top:1px solid var(--line);
  margin-top:10px}
.art-more h2{font-size:1.25rem;letter-spacing:-.02em;margin:44px 0 28px}

/* ---- the index ----------------------------------------------------------
   The newest article runs across the page with its picture beside it; the
   rest sit in a grid underneath. With a single article the old three-across
   grid left two thirds of the page empty and a hole where the picture would
   have gone, which is what made a working site look unfinished. */
.art-card{text-decoration:none;display:block;color:inherit}
.art-card-pic{display:block;overflow:hidden;background:var(--pale);margin-bottom:20px}
.art-card-pic img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;
  display:block;transition:transform .4s ease}
.art-card:hover .art-card-pic img{transform:scale(1.03)}
/* no picture: a plain panel in the brand's own colours, never an empty hole */
.art-card-blank{display:block;width:100%;aspect-ratio:16/10;
  background:linear-gradient(135deg,var(--pale) 0%,#f3e7db 100%);
  position:relative}
.art-card-blank:after{content:'';position:absolute;left:28px;top:50%;
  width:54px;height:2px;background:var(--accent);transform:translateY(-50%)}
.art-card-t{display:block}
.art-card .art-meta{display:block;margin-bottom:10px}
.art-card-h{display:block;font-family:Manrope,Arial,sans-serif;font-weight:700;
  font-size:1.3rem;letter-spacing:-.02em;line-height:1.35;margin:0 0 10px}
.art-card-p{display:block;color:var(--muted);font-size:.9375rem;margin:0 0 14px}
.art-card-go{display:inline-block;font-size:.875rem;font-weight:600;
  border-bottom:1px solid #c9c9c9;padding:12px 0 3px;margin:-12px 0 0}
.art-card:hover .art-card-h{text-decoration:underline;text-underline-offset:4px}
.art-card:hover .art-card-go{border-color:var(--ink)}

/* Two across, not three. Three made each article a narrow column and left
   an obvious hole whenever the number of articles was not a multiple of
   three - which, on a site that publishes now and then, is most of the
   time. Two gives each one a picture worth looking at and fills the row. */
.art-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:52px 44px}
.art-grid .art-card-h{font-size:1.5rem}
.art-grid .art-card-p{font-size:1rem;line-height:1.65}

@media(max-width:1000px){
  .art-grid{gap:40px 28px}
  .art-grid .art-card-h{font-size:1.3rem}
}
@media(max-width:760px){
  .art-head{padding-top:44px}
  .art-cover{aspect-ratio:16/10;margin-top:30px}
  .art-body{padding:30px 0 6px;font-size:1rem}
  .art-body h2{font-size:1.45rem;margin-top:36px}
  .art-body blockquote{font-size:1.1rem;padding-left:18px}
  .art-grid{grid-template-columns:1fr;gap:34px}
  .art-more{padding-bottom:54px}
  .art-more h2{margin-top:34px}
  .art-share{gap:14px}
  .art-foot{padding-bottom:54px}
}


/* The shared page spacing puts 75px under the heading and another 92px above
   the first article - a blank strip the height of half a screen. The articles
   page sets its own. */
body .art-index-intro{padding:70px 0 0}
body .art-index-list{padding:46px 0 92px}
@media(max-width:760px){
  body .art-index-intro{padding-top:44px}
  body .art-index-list{padding:30px 0 58px}
}


/* ---- the row of newest articles on the home page -----------------------
   Three across here, unlike the Articles page, because the home page is
   showing exactly three and the row always fills. */
.home-articles{padding-top:10px;padding-bottom:92px}
.home-articles-head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;margin-bottom:40px}
.home-articles-head h2{margin:0}
.home-articles-head .text-link{flex:none;white-space:nowrap}
.art-grid-3{grid-template-columns:repeat(3,1fr);gap:40px 32px}
.art-grid-3 .art-card-h{font-size:1.25rem}
.art-grid-3 .art-card-p{font-size:.9375rem;line-height:1.6}
@media(max-width:1000px){
  .art-grid-3{grid-template-columns:repeat(2,1fr)}
  .art-grid-3 .art-card:nth-child(3){display:none}
}
@media(max-width:760px){
  .home-articles{padding-bottom:58px}
  .home-articles-head{display:block}
  .home-articles-head .text-link{margin-top:14px}
  .art-grid-3{grid-template-columns:1fr;gap:34px}
  .art-grid-3 .art-card:nth-child(3){display:block}
}