/* Minimal section numbering: a single quiet line, number inline with the
     label instead of an oversized display figure. */
  .section-num{
    display:flex; align-items:baseline; gap:10px;
    font-family:'Outfit',system-ui,sans-serif;
    font-size: 12px; letter-spacing:0.2em;
    text-transform:uppercase; color:var(--ink-soft); font-weight:400;
  }
  /* The index number was var(--ink-faint) - 14% opacity, measured 1.14:1
     against the page, effectively invisible at every breakpoint. It now takes
     the page's own accent (fabrika #EE403D, denim #3B5BDB, barbie #FF1493...)
     and a heavier weight. --ink-soft is the fallback for the handful of pages
     that declare no accent. */
  .section-num .num{
    display:inline;
    font-family:'Outfit',system-ui,sans-serif;
    font-size: 12px; font-weight:400;
    letter-spacing:0.2em; line-height:1;
    color:var(--accent, var(--ink-soft)); opacity:1; margin:0; font-weight:600;
    -webkit-text-fill-color:currentColor;
  }
  /* Visual band between sections, edge to edge. */
  .vband{ padding:0 0 clamp(90px,11vw,170px); }
  .vband .vb-frame{ position:relative; width:100%; height:clamp(420px,74vh,900px); overflow:hidden; background:color-mix(in srgb, var(--ink) 6%, transparent); }
  .vband .vb-cap{
    display:flex; justify-content:space-between; gap:10px 30px;
    max-width:var(--maxw); margin:14px auto 0; padding:0 var(--gutter);
    font-family:'Outfit',system-ui,sans-serif;
    font-size: 12px; letter-spacing:0.2em; text-transform:uppercase; color:var(--ink-soft);
  }
  @media (max-width:760px){ .vband .vb-frame{ height:clamp(340px,56vh,620px); } }
  /* The hero was pinned by aspect-ratio:21/9, so its height derived from its
     WIDTH and content could never grow it — that is what pushed the footer and
     scroll cue down onto the cover band. Drop the ratio, let content set the
     height, and use justify-content (the real axis on a column flexbox). */
  section.hero[data-tone]{
    aspect-ratio:auto;
    height:auto;
    min-height:100svh;
    justify-content:flex-start;
    padding-block:clamp(48px,6vh,96px) clamp(40px,5vh,80px);
  }
  section.hero[data-tone] .hero-inner{ flex:0 0 auto; }
  /* Push the footer to the bottom only when there is genuine room to spare. */
  section.hero[data-tone] .hero-foot{ margin-top:auto; }
  /* On short viewports the 120px tag gutter is the first thing to give. */
  @media (max-height:820px){
    .proj-tags{ padding-top:clamp(40px,7vh,120px); }
  }

  /* Carousel frames fill their slide. */
  .hc-slide .ph{position:absolute;inset:0;}
  /* figure carries a UA default margin: 1em 40px, which breaks the track maths */
  .hc-slide{ margin:0; }
  /* slide gutter (was supplied by the figure default margin before the margin:0 fix) */
  .hc-track{ gap:12px; }