/* ================== GLOBAL METRICS ================== */
:root{
  /* UI font used by INFO/WORK and the numbers */
  --ui-size: clamp(13.5px, 1.0vw, 14.5px);

  /* Space from window top to INFO/WORK (mirrored at bottom for numbers) */
  --top-gap: clamp(42px, 5.6vw, 56px);

  /* Colors */
  --color-grey: #999;

  /* Max content width that header & hero align to (your landscape width) */
  --container-w: 1019px;

  /* HERO sizes per spec */
  --hero-landscape-w: 1019px;
  --hero-landscape-h: 725px;
  --hero-portrait-w: 495px;
  --hero-portrait-h: 728px;

  /* JS toggles these two between the landscape/portrait values */
  --hero-w: var(--hero-landscape-w);
  --hero-h: var(--hero-landscape-h);

  /* Caption block under hero */
  --gap-hero-cap: 14px;
  --caption-h:   20px;
  --caption-size: 11.5px;

  /* Numbers row */
  --nums-row-h: 20px;
  --index-gap: 16px;
  --index-pad-x: 12px;

  /* Fixed header row height = UI size (prevents baseline drift/jitter) */
  --header-h: var(--ui-size);

  /* Mirror the header gap at the bottom so top/bottom buffers are equal */
  --edge-pad-y: var(--top-gap);

  /* Minimum buffer above and below the hero band */
  --min-gap: 100px;
  --min-gap-top: var(--min-gap);
  --min-gap-bottom: var(--min-gap);

  /* Header width (same as content container at larger sizes) */
  --header-w: min(92vw, var(--container-w));
}

/* ================== BASE ================== */
*{ box-sizing: border-box; }
html, body{ height:100%; margin:0; }
html{
  background:#fff; color:#111;
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
  scrollbar-gutter: stable both-edges;
}
body{
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
  overflow-x:hidden;
  overflow-y:hidden;
  -webkit-user-select:none; user-select:none;
  overscroll-behavior:none;
}
@media (max-height:300px){ body{ overflow-y:auto; } }

/* ================== HEADER (fixed) ================== */
.header-shell{
  position:fixed; left:0; right:0;
  top: calc(var(--top-gap) + env(safe-area-inset-top, 0px));
  z-index:20;
}
.head{
  width:var(--header-w);
  margin:0 auto;
  display:flex; justify-content:space-between; align-items:flex-start;
  height:calc(var(--ui-size) * 1);
  line-height:0;
}
.nav{
  text-decoration:none; color:#111;
  font-size:var(--ui-size);
  line-height:1;
  letter-spacing:.06em;
  display:block;
  transform:translateZ(0);
}
#infoLink:hover,
#infoLink:active,
#infoLink.is-pressing,
#infoLink:focus-visible{ color:var(--color-grey); }
.nav.right:hover,
.nav.right:active,
.nav.right:focus-visible{ color:var(--color-grey); }

/* ================== WORK PAGE LAYOUT ================== */
.container{
  position: fixed;
  top: calc(var(--top-gap) + var(--header-h));
  bottom: calc(var(--edge-pad-y) + var(--nums-row-h));
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--min-gap) 0;
}

.stage{
  width: var(--container-px, min(92vw, var(--container-w)));
}

.hero-box{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  transition: opacity 0.005s ease; /* MODIFIED: Made fade nearly instant */
}

.hero{
  display: block;
  max-width: var(--hero-w);
  max-height: var(--hero-h);
  width: auto;
  height: auto;
  flex-shrink: 0;
}

.hero-placeholder{
  width: var(--hero-w);
  height: var(--hero-h);
  flex-shrink: 0;
  display: none;
}

.caption{
  position:static;
  transform:none;
  width:100%;
  padding-top:var(--gap-hero-cap);
  height:auto;
  min-height:var(--caption-h);
  display:flex; align-items:flex-start; justify-content:center;
  font-size:var(--caption-size);
  color:var(--color-grey); letter-spacing:.04em; text-transform:none;
  flex-shrink: 0;
}

.hero-overlay{
  position:fixed; left:0; top:0; height:0; width:100vw; z-index:6;
  background:transparent; cursor:default; touch-action:none;
}

/* ================== NUMBERS (fixed, full-window width) ================== */
.index{
  position:fixed; left:0;
  bottom: calc(var(--edge-pad-y) + env(safe-area-inset-bottom, 0px));
  width:100vw; height:var(--nums-row-h); z-index:10;
}
.scroller{
  width:100%; height:100%;
  overflow-x:auto; overflow-y:hidden;
  padding-left: var(--dyn-pad-left,  var(--index-pad-x));
  padding-right:var(--dyn-pad-right, var(--index-pad-x));
  scrollbar-width:none; scrollbar-gutter:stable both-edges;
  cursor: pointer;
  touch-action: none;
}
.scroller::-webkit-scrollbar{ display:none; }
.nums{
  list-style:none; margin:0; padding:0;
  display:inline-flex; align-items:center; gap:var(--index-gap);
  white-space:nowrap; height:100%;
}
.nums button{
  appearance:none; border:0; background:transparent;
  font-size:var(--ui-size); line-height:1; letter-spacing:.06em;
  color:#111; padding:0; margin:0; vertical-align:middle;
  transition:color .15s ease;
  cursor: pointer;
}
.nums button:hover{ color: var(--color-grey); }
.nums button[aria-current="true"]{ color:var(--color-grey); }
.nums button:focus-visible{ outline:1px dotted currentColor; outline-offset:2px; }

/* ================== RESPONSIVE TWEAKS ================== */
@media (max-width:900px){
  :root{ --index-gap:12px; --index-pad-x:10px; --nums-row-h:18px; }
}
@media (max-width:600px){
  :root{
    --index-gap:10px;
    --index-pad-x:8px;
    --nums-row-h:30px;
    --top-gap: 50px;
    --edge-pad-y: 50px;
    --gap-hero-cap: 12px;
    --caption-h: 35px;
  }
  .caption {
    height: auto;
    min-height: var(--caption-h);
    align-items: flex-start;
  }
  .stage {
    transform: translateY(calc((var(--gap-hero-cap) + var(--caption-h)) / 2));
  }
}
@media (max-width:480px){
  :root{ --min-gap: 24px; }
}
@media (max-width:380px){
  :root{ --index-gap:8px;  --index-pad-x:6px;  --nums-row-h:28px; }
}