/* ── Article page ──────────────────────────────────────
     Loaded AFTER css/style.css, which supplies the brand
     tokens (--red, --sun, --paper, --gloria), the reset,
     .glyph and .visually-hidden. Nothing here is used by
     the homepage; nothing here depends on GSAP, so the
     article reads fine with JavaScript switched off.
     ───────────────────────────────────────────────────── */

  /* ── fixed chrome: logo home, IG out ─────────────────── */
  .art-chrome{
    position:fixed; top:0; left:0; right:0; z-index:60;
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 30px;
    pointer-events:none;
  }
  .art-chrome > *{ pointer-events:auto; }
  .art-chrome__home img{
    width:74px; border-radius:16px;
    box-shadow:0 8px 22px rgba(0,0,0,0.22);
    transform:rotate(-3deg);
    transition:transform .35s ease;
  }
  .art-chrome__home:hover img{ transform:rotate(0deg) scale(1.05); }
  .art-chrome__ig{
    background:var(--sun); color:var(--red);
    padding:10px 20px; border-radius:999px;
    font-weight:700; font-size:11px; letter-spacing:0.18em;
    box-shadow:0 8px 22px rgba(0,0,0,0.2);
    transition:background .3s ease, color .3s ease;
  }
  .art-chrome__ig:hover{ background:var(--paper); }

  /* ── masthead (red ground) ───────────────────────────── */
  .art-head{
    background:var(--red); color:var(--paper);
    padding:150px 24px 70px;
    text-align:center;
  }
  .art-head__inner{ max-width:820px; margin:0 auto; }
  .art-head__eyebrow{
    color:var(--sun);
    font-size:clamp(17px, 2vw, 23px);
    margin-bottom:16px;
  }
  .art-head__title{
    font-weight:900; letter-spacing:-0.025em; line-height:0.95;
    font-size:clamp(40px, 8vw, 92px);
    margin-bottom:26px;
  }
  .art-head__standfirst{
    font-size:clamp(16px, 1.8vw, 20px); line-height:1.6;
    font-weight:300; opacity:0.92;
    max-width:54ch; margin:0 auto 32px;
  }
  .art-head__meta{
    display:flex; flex-wrap:wrap; gap:6px 18px; justify-content:center;
    font-size:11px; letter-spacing:0.2em; text-transform:uppercase;
    font-weight:500; opacity:0.72;
  }
  .art-head__meta span:not(:last-child)::after{ content:' ·'; }

  /* ── marquee band between masthead and body ──────────── */
  .art-band{
    background:var(--sun); color:var(--red);
    overflow:hidden; white-space:nowrap;
    padding:11px 0;
    font-family:var(--gloria);
    font-size:clamp(15px, 1.7vw, 21px);
  }
  .art-band__track{
    display:inline-block;
    animation:art-band-slide 26s linear infinite;
  }
  .art-band__track span{ padding-right:8px; }
  @keyframes art-band-slide{
    from{ transform:translateX(0); }
    to{ transform:translateX(-33.333%); }
  }

  /* ── body (cream ground) ─────────────────────────────── */
  .art{ background:var(--paper); color:var(--ink); }
  .art-body{
    max-width:680px; margin:0 auto;
    padding:64px 24px 40px;
  }
  .art-body > p{
    font-size:clamp(16px, 1.6vw, 18px); line-height:1.72;
    font-weight:300;
    margin-bottom:22px;
  }
  /* the opening line carries the whole piece — give it weight */
  .art-body > p.art-lede{
    font-size:clamp(19px, 2.2vw, 24px); line-height:1.5;
    font-weight:500; letter-spacing:-0.01em;
    margin-bottom:28px;
  }
  /* single-line beats used for rhythm */
  .art-body > p.art-beat{
    font-weight:500;
    color:var(--red);
    font-size:clamp(17px, 1.9vw, 21px); line-height:1.45;
    margin:30px 0;
  }
  .art-body h2{
    font-family:var(--gloria); font-weight:400;
    color:var(--red);
    font-size:clamp(26px, 3.6vw, 40px); line-height:1.1;
    letter-spacing:0;
    margin:52px 0 20px;
  }
  .art-body h2:first-child{ margin-top:0; }
  .art-body a{
    color:var(--red);
    text-decoration:underline; text-underline-offset:3px;
  }
  .art-body strong{ font-weight:600; }

  /* ── pull quote ──────────────────────────────────────── */
  .art-quote{
    margin:46px 0;
    padding:30px 0 30px 26px;
    border-left:4px solid var(--sun);
  }
  .art-quote p{
    font-family:var(--gloria);
    color:var(--red);
    font-size:clamp(22px, 3vw, 32px); line-height:1.28;
  }

  /* ── figures ─────────────────────────────────────────── */
  .art-figure{ margin:0; }
  .art-figure img,
  .art-figure video{ width:100%; height:auto; display:block; }
  .art-figure figcaption{
    font-family:var(--gloria);
    color:var(--blue);
    font-size:clamp(14px, 1.5vw, 17px); line-height:1.4;
    padding:12px 24px 0;
    max-width:680px; margin:0 auto;
  }
  /* hero sits full-bleed under the masthead */
  .art-figure--hero{ background:var(--paper); }
  .art-figure--hero figcaption{ padding-bottom:8px; }
  /* in-body figures stay inside the reading column */
  .art-figure--inline{
    max-width:680px; margin:38px auto;
    padding:0 24px;
  }
  .art-figure--inline figcaption{ padding-left:0; padding-right:0; }
  /* portrait shots are tall — cap them so they don't dominate */
  .art-figure--portrait img{
    max-height:78vh; width:auto; margin:0 auto;
  }

  /* ── Journey timeline, now on its own page ─────────────
     The .journey rules themselves stay in style.css, which
     both pages load. These only bite on journey.html, where
     the eyebrow and title have moved up into .art-head — so
     the section needs less headroom than it did inline on
     the homepage. */
  .journey__inner{ padding-top:52px; }
  .journey__recap{
    grid-column:2;
    justify-self:start;
    margin-top:12px;
    font-family:var(--gloria);
    color:var(--red);
    font-size:clamp(15px, 1.6vw, 18px);
    border-bottom:2px solid var(--sun);
    padding-bottom:2px;
    transition:border-color .3s ease;
  }
  .journey__recap:hover{ border-color:var(--red); }
  @media(max-width:760px){
    .journey__inner{ padding-top:40px; }
    .journey__recap{ grid-column:1; }
  }

  /* ── sign-off + CTA (red ground) ─────────────────────── */
  .art-sign{
    max-width:680px; margin:0 auto;
    padding:8px 24px 70px;
    font-family:var(--gloria);
    color:var(--red);
    font-size:clamp(16px, 1.8vw, 20px); line-height:1.5;
  }
  .art-foot{
    background:var(--red); color:var(--paper);
    text-align:center;
    padding:70px 24px 90px;
  }
  .art-foot__inner{ max-width:620px; margin:0 auto; }
  .art-foot p{
    font-size:clamp(16px, 1.8vw, 19px); line-height:1.6;
    font-weight:300; opacity:0.92;
    margin-bottom:28px;
  }
  .art-foot__cta{
    display:inline-block;
    padding:14px 30px;
    border:1px solid var(--paper);
    font-weight:700; font-size:12px; letter-spacing:0.2em;
    text-transform:uppercase;
    transition:background .3s ease, color .3s ease;
  }
  .art-foot__cta:hover{ background:var(--paper); color:var(--red); }
  .art-foot__back{
    display:block; margin-top:30px;
    font-family:var(--gloria);
    font-size:clamp(15px, 1.6vw, 18px);
    color:var(--sun);
    text-decoration:underline; text-underline-offset:3px;
  }

  @media(max-width:640px){
    .art-chrome{ padding:14px 18px; }
    .art-chrome__home img{ width:58px; }
    .art-head{ padding:110px 20px 54px; }
    .art-body{ padding:46px 20px 32px; }
    .art-quote{ margin:36px 0; padding-left:20px; }
    .art-figure--portrait img{ max-height:none; width:100%; }
  }

  @media (prefers-reduced-motion: reduce){
    .art-band__track{ animation:none; }
    .art-chrome__home img, .art-chrome__ig,
    .art-foot__cta{ transition:none; }
  }