/* 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:0;
    justify-content:flex-start;
    padding-block:clamp(96px,11vh,132px) clamp(34px,4.4vh,58px);
  }
  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; }
  /* Compact hero band, matched to the Hind Al Oud proportions. */
  section.hero[data-tone] .proj-tags{ padding-top:clamp(26px,3vh,42px); }
  section.hero[data-tone] .hero-title{ margin-bottom:clamp(16px,1.8vw,26px); }
  section.hero[data-tone] .hero-foot{ padding-top:clamp(20px,2.6vh,36px); }
  /* On short viewports the tag gutter is the first thing to give. */
  @media (max-height:820px){
    .proj-tags{ padding-top:clamp(22px,3vh,36px); }
  }