/* ====================================================================
   ARTICLES — the magazine layer on the Unbroken Line system
   Shared by /articles (index) and /articles/<slug> (reader).
   Loads AFTER home2.css and leans on its :root tokens:
   --paper --paper-deep --ink --ink-70 --ink-50 --hair --hair-soft
   --flash --disp --serif --sans --mono --shell --gut --r --snap
   ==================================================================== */

/* ----- index · page head --------------------------------------------- */
.art-head{ padding:clamp(52px, 8.5vh, 104px) 0 clamp(32px, 5vh, 56px); }
.art-head .label{ display:block; margin-bottom:18px; }
.art-index-h1{
  font-family:var(--disp); font-weight:510;
  font-size:clamp(40px, 5.6vw, 84px);
  line-height:1.0; letter-spacing:-0.032em;
  text-wrap:balance; max-width:18ch;
}
.art-index-dek{
  margin-top:20px;
  font-family:var(--disp); font-weight:460;
  font-size:clamp(16px, 1.5vw, 20px); line-height:1.5;
  color:var(--ink-70); max-width:52ch;
}

/* ----- shared · meta line (mono, quiet) ------------------------------ */
.art-meta{
  display:inline-flex; align-items:baseline; flex-wrap:wrap; gap:8px 12px;
  font-family:var(--mono); font-size:11.5px; font-weight:500;
  letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink-50);
}
.art-meta .cat{ color:var(--ink); }
.art-meta .dot{ color:var(--ink-35, #A9A296); }

/* ----- index · featured story ---------------------------------------- */
.feat{ display:block; text-decoration:none; color:inherit; }
.feat-media{
  aspect-ratio:21/10;
  border-radius:14px; overflow:hidden;
  background:var(--paper-deep);
  outline:1px solid var(--hair-soft); outline-offset:-1px;
}
.feat-media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--snap);
}
.feat:hover .feat-media img{ transform:scale(1.015); }
.feat-body{
  display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(20px, 3.5vw, 64px);
  padding-top:clamp(20px, 3vh, 34px);
  align-items:start;
}
.feat-t{
  font-family:var(--disp); font-weight:510;
  font-size:clamp(30px, 3.8vw, 58px);
  line-height:1.02; letter-spacing:-0.028em;
  text-wrap:balance;
  transition:color .2s var(--snap);
}
.feat:hover .feat-t{ color:var(--flash); }
.feat-side .art-meta{ margin-bottom:14px; }
.feat-dek{
  font-size:15.5px; line-height:1.68; color:var(--ink-70); max-width:44ch;
}
.feat-more{
  margin-top:16px;
  display:inline-flex; align-items:baseline; gap:7px;
  font-family:var(--disp); font-size:13.5px; font-weight:500;
  color:var(--ink-50); transition:color .2s var(--snap);
}
.feat:hover .feat-more{ color:var(--flash); }

/* ----- index · the rest of the issue --------------------------------- */
.art-latest{ padding:clamp(48px, 7vh, 88px) 0 clamp(72px, 10vh, 116px); }
.art-latest-rule{
  border:0; border-top:1px solid var(--hair);
  margin:0 0 clamp(28px, 4vh, 44px);
}
.art-latest .label{ display:block; margin-bottom:clamp(24px, 3.5vh, 36px); }
.art-grid{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(40px, 5vh, 56px) 22px;
}
.art-card{
  display:flex; flex-direction:column; align-items:flex-start;
  text-decoration:none; color:inherit;
}
.art-card-media{
  width:100%; aspect-ratio:3/2;
  border-radius:12px; overflow:hidden;
  background:var(--paper-deep);
  outline:1px solid var(--hair-soft); outline-offset:-1px;
  transition:outline-color .25s var(--snap);
}
.art-card-media img{ width:100%; height:100%; object-fit:cover; }
.art-card:hover .art-card-media{ outline-color:rgba(146,27,22,.55); }
.art-card .art-meta{ margin-top:16px; }
.art-card-t{
  margin-top:10px;
  font-family:var(--disp); font-weight:530;
  font-size:19px; line-height:1.22; letter-spacing:-0.012em;
  text-wrap:balance;
  transition:color .2s var(--snap);
}
.art-card:hover .art-card-t{ color:var(--flash); }
.art-card-p{
  margin-top:9px;
  font-size:14px; line-height:1.62; color:var(--ink-70);
}
.art-card-more{
  margin-top:auto; padding-top:14px;
  display:inline-flex; align-items:baseline; gap:7px;
  font-family:var(--disp); font-size:13.5px; font-weight:500;
  color:var(--ink-50); transition:color .2s var(--snap);
}
.art-card:hover .art-card-more{ color:var(--flash); }

/* ----- reader · opening ----------------------------------------------- */
.artp-hero{ padding:clamp(48px, 8vh, 96px) 0 0; }
.artp-hero .ipg-crumb{ margin-bottom:30px; }
.artp-hero .art-meta{ display:flex; margin-bottom:22px; }
.artp-h1{
  font-family:var(--disp); font-weight:510;
  font-size:clamp(42px, 6.4vw, 96px);
  line-height:.99; letter-spacing:-0.034em;
  text-wrap:balance; max-width:16ch;
}
.artp-dek{
  margin-top:24px;
  font-family:var(--disp); font-weight:460;
  font-size:clamp(17px, 1.7vw, 23px); line-height:1.45;
  color:var(--ink-70); max-width:46ch;
}
.artp-byline{
  margin-top:clamp(26px, 4vh, 40px);
  padding-top:18px;
  border-top:1px solid var(--hair);
  display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
  font-family:var(--mono); font-size:12px; letter-spacing:.03em;
  color:var(--ink-50);
}
.artp-byline .who{ color:var(--ink); }

/* ----- reader · the one big image ------------------------------------ */
.artp-media{ padding:clamp(24px, 4vh, 44px) 0 0; }
.artp-media .frame{
  border-radius:14px; overflow:hidden;
  background:var(--paper-deep);
  outline:1px solid var(--hair-soft); outline-offset:-1px;
}
.artp-media img{
  width:100%; aspect-ratio:21/10; object-fit:cover; display:block;
}
.artp-media figcaption{
  margin-top:12px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.03em;
  color:var(--ink-50);
}

/* ----- reader · body -------------------------------------------------- */
.artp-body{
  max-width:70ch; margin:0 auto;
  padding:clamp(44px, 7vh, 80px) var(--gut) clamp(56px, 8vh, 96px);
}
.artp-body > * + *{ margin-top:22px; }
.artp-body p{
  font-size:17px; line-height:1.75; color:var(--ink-70);
  text-wrap:pretty;
}
.artp-body .lede{
  font-family:var(--disp); font-weight:460;
  font-size:clamp(18px, 1.7vw, 21px); line-height:1.55;
  color:var(--ink);
}
.artp-body a{
  color:inherit; text-decoration:underline;
  text-decoration-color:var(--hair); text-underline-offset:3px;
  transition:color .2s var(--snap), text-decoration-color .2s var(--snap);
}
.artp-body a:hover{ color:var(--flash); text-decoration-color:var(--flash); }
.artp-body h2{
  font-family:var(--disp); font-weight:510;
  font-size:clamp(23px, 2.3vw, 31px);
  line-height:1.12; letter-spacing:-0.02em;
  margin-top:clamp(40px, 6vh, 56px);
  text-wrap:balance;
}
.artp-body h2 + p{ margin-top:16px; }
.artp-body ul, .artp-body ol{ padding-left:22px; }
.artp-body ul{ list-style:disc; }
.artp-body ol{ list-style:decimal; }
.artp-body li{
  font-size:17px; line-height:1.7; color:var(--ink-70);
}
.artp-body li + li{ margin-top:10px; }
.artp-body li::marker{ color:var(--ink-50); }

/* drop cap — the magazine open */
.artp-body .opens::first-letter{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:4.35em; line-height:.78;
  float:left; padding:8px 12px 0 0;
  color:var(--ink);
}

/* pull quote — Fraunces speaks, hairlines hold it */
.artp-quote{
  margin:clamp(44px, 7vh, 64px) 0;
  padding:clamp(24px, 4vh, 36px) 0;
  border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);
}
.artp-quote p{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(23px, 2.6vw, 32px); line-height:1.38;
  letter-spacing:-0.005em; color:var(--ink);
}
.artp-quote cite{
  display:block; margin-top:14px; font-style:normal;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.04em;
  text-transform:uppercase; color:var(--ink-50);
}

/* inline figure inside the body (optional, publisher may emit) */
.artp-body figure{ margin-top:clamp(36px, 5vh, 48px); }
.artp-body figure img{
  width:100%; border-radius:12px; display:block;
  outline:1px solid var(--hair-soft); outline-offset:-1px;
}
.artp-body figcaption{
  margin-top:10px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.03em;
  color:var(--ink-50);
}

/* ----- reader · end matter -------------------------------------------- */
.artp-end{
  border-top:1px solid var(--hair);
  padding:clamp(40px, 6vh, 64px) 0 clamp(64px, 9vh, 104px);
}
.artp-end .label{ display:block; margin-bottom:clamp(24px, 3.5vh, 36px); }

/* ----- responsive ------------------------------------------------------ */
@media (max-width: 980px){
  .art-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width: 900px){
  .feat-body{ grid-template-columns:1fr; gap:14px; }
  .feat-side .art-meta{ margin-bottom:10px; }
}
@media (max-width: 640px){
  .art-grid{ grid-template-columns:1fr; }
  .feat-media{ aspect-ratio:16/10; }
  .artp-media img{ aspect-ratio:16/10; }
  .artp-body{ padding-left:var(--gut); padding-right:var(--gut); }
}