/* VAIY - article page styles. Foundations live in brand.css */

/* page container - overrides the wide default in brand.css */
.wrap{ max-width:1000px; margin:0 auto; padding:0 32px; }

a{ color:inherit; }
.col{ max-width:680px; }
@media (max-width:640px){ .wrap{ padding:0 22px; } }
header{
    position:sticky; top:0; z-index:40;
    background:color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter:blur(12px); border-bottom:1px solid var(--line);
  }
.bar{ display:flex; align-items:center; justify-content:space-between; gap:20px; height:64px; }
/* nav styling, including the mobile panel, lives in brand.css */
.btn{
    font-size:14px; font-weight:500; text-decoration:none; padding:9px 17px;
    border-radius:99px; background:var(--accent); color:#fff; white-space:nowrap;
  }
.btn:hover{ opacity:.82; }
.back{ display:inline-block; margin:44px 0 0; font-size:13.5px; color:var(--mute); text-decoration:none; }
.back:hover{ color:var(--ink); }
article{ padding:26px 0 0; }
h1{ font-family:'Sora',system-ui,sans-serif;
    margin:0; font-weight:600; letter-spacing:-0.038em; line-height:1.04;
    font-size:clamp(32px, 5.4vw, 56px); max-width:20ch; text-wrap:balance;
  }
.meta{ margin:26px 0 0; display:flex; gap:14px; align-items:center; flex-wrap:wrap; font-size:13.5px; color:var(--mute); }
.tags{ display:flex; gap:7px; flex-wrap:wrap; }
.tag{
    font-size:11.5px; font-weight:500; letter-spacing:0.05em; text-decoration:none;
    padding:4px 10px; border-radius:99px; border:1px solid var(--line); color:var(--mute);
  }
.tag:hover{ color:var(--ink); border-color:var(--mute); }
.standfirst{
    margin:34px 0 0; font-size:clamp(18px,2.1vw,22px); line-height:1.5;
    letter-spacing:-0.015em; color:var(--ink); max-width:34ch;
  }
.body{ margin-top:44px; padding-top:40px; border-top:1px solid var(--line); }
.body p{ margin:0 0 22px; font-size:17px; line-height:1.72; color:var(--mute); }
.body p strong{ color:var(--ink); font-weight:600; }
.lead{
    margin:34px 0 0; width:100%; aspect-ratio:16/9; overflow:hidden;
    background:var(--panel); border:1.5px dashed var(--line);
    display:flex; align-items:center; justify-content:center; position:relative;
  }
.lead img{ width:100%; height:100%; object-fit:contain; display:none; }
.lead.filled{ border:none; background:none; aspect-ratio:auto; }
.lead.filled img{ display:block; height:auto; }
.lead.filled .lead-tag{ display:none; }
.lead-tag{
    text-align:center; color:var(--mute); font-size:13px; line-height:1.6;
    display:flex; flex-direction:column; align-items:center; gap:9px; padding:22px;
  }
.lead-tag b{ color:var(--ink); font-weight:700; font-size:13.5px; }
.lead-tag span{ max-width:38ch; }
.body h2{ font-family:'Sora',system-ui,sans-serif;
    margin:52px 0 18px; font-size:clamp(22px,2.6vw,28px); font-weight:600;
    letter-spacing:-0.025em; line-height:1.2; color:var(--ink); max-width:26ch;
  }
.body ul{ margin:0 0 22px; padding:0; list-style:none; }
.body ul li{
    font-size:17px; line-height:1.65; color:var(--mute);
    padding:11px 0; border-top:1px solid var(--line);
    display:grid; grid-template-columns:16px 1fr; gap:12px;
  }
.body ul li:last-child{ border-bottom:1px solid var(--line); }
.body ul li em{ font-style:normal; color:var(--accent); }
.body ul li b{ color:var(--ink); font-weight:600; }
.stat{
    margin:40px 0; padding:32px 34px; background:var(--panel);
    border-left:3px solid var(--accent);
  }
.stat b{
    display:block; font-size:clamp(38px,5vw,58px); font-weight:600;
    letter-spacing:-0.045em; line-height:1; color:var(--ink); font-variant-numeric:tabular-nums;
  }
.stat span{ display:block; margin-top:14px; font-size:16px; color:var(--mute); line-height:1.55; max-width:44ch; }
.pull{
    margin:44px 0; font-size:clamp(21px,2.6vw,28px); line-height:1.38;
    letter-spacing:-0.025em; font-weight:600; color:var(--ink); max-width:24ch;
  }
.src{ margin:44px 0 0; padding-top:24px; border-top:1px solid var(--line); font-size:13px; color:var(--mute); line-height:1.7; }
.end{
    margin:56px 0 0; padding:32px 34px; border:1px solid var(--line);
    display:grid; gap:14px;
  }
.end h3{ font-family:'Sora',system-ui,sans-serif; margin:0; font-size:20px; font-weight:600; letter-spacing:-0.02em; }
.end p{ margin:0; font-size:15.5px; color:var(--mute); line-height:1.6; max-width:52ch; }
.end a{ font-size:15.5px; font-weight:600; text-decoration:none; color:var(--ink);
          border-bottom:1.5px solid var(--accent); padding-bottom:3px; justify-self:start; }
.end a:hover{ opacity:.65; }
footer{
    padding:30px 0 60px; margin-top:64px; border-top:1px solid var(--line);
    display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
    font-size:13px; color:var(--mute);
  }
footer a{ text-decoration:none; }
footer a:hover{ color:var(--ink); }
a:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; border-radius:3px; }
.skip{ position:absolute; left:-9999px; top:0; z-index:100; background:var(--ink);
         color:var(--bg); padding:12px 20px; font-size:14px; font-weight:600; text-decoration:none; }
.skip:focus{ left:0; }
@media print{
    header, .btn, .back, .end{ display:none !important; }
    body{ background:#fff; color:#000; }
    .body p, .body ul li{ color:#222; }
  }