/* ============================================================
   THE OBJECT INSIDE THE TYPE (editorial/heroword.js)          P, 19 October 2026
   One word across the page; the thing inside it; the lower half of the letters in front of it.
   --sp the scroll through the hero (0..1), --mx/--my the pointer (-1..1), damped.
   ============================================================ */
.hw{
  position:relative; height:92vh; height:92svh; min-height:520px; overflow:hidden; background:#FFFFFF;
  display:grid; place-items:center; --sp:0; --mx:0; --my:0;
}
.hw-word{
  position:absolute; left:0; right:0; top:50%; margin:0; text-align:center; white-space:nowrap;
  font-size:clamp(84px, 17.5vw, 330px) !important; line-height:.86; letter-spacing:-.035em !important;
  transform:translate3d(0, calc(-50% + var(--sp) * -6vh), 0);
  pointer-events:none;
}
/* the front copy: only the lower half of the letters, which pass in front of the object */
.hw-front{
  z-index:3;
  -webkit-mask-image:linear-gradient(180deg, transparent 0 56%, #000 56%);
          mask-image:linear-gradient(180deg, transparent 0 56%, #000 56%);
}
.hw-hold{
  position:relative; z-index:2; perspective:1400px;
  transform:translate3d(0, calc(var(--sp) * -22vh), 0);
}
.hw-obj{
  position:relative; transform-style:preserve-3d;
  transform:rotateY(calc(-16deg + var(--mx) * 8deg)) rotateX(calc(7deg + var(--my) * -5deg)) rotateZ(-2deg);
  opacity:0; filter:blur(10px);
  transition:opacity 1.4s var(--settle, ease) .25s, filter 1.4s var(--settle, ease) .25s, translate 1.6s var(--settle, ease) .25s;
  translate:0 8vh;
}
.hw.is-in .hw-obj{ opacity:1; filter:none; translate:0 0; }

/* ---- the magazine: a cream cover, the house's masthead, the issue's numeral in silver ink ---- */
.hw-mag{ width:clamp(170px, 20vw, 330px); aspect-ratio:3 / 4; }
.hw-mag-cover, .hw-mag-pages{ position:absolute; inset:0; }
.hw-mag-pages{
  transform:translateZ(-8px) translate(5px, 4px); background:#ECE7DC;
  box-shadow:1px 1px 0 #DCD5C6, 2px 2px 0 #E9E3D6, 3px 3px 0 #D7CFBF,
    calc(var(--mx) * -18px + 18px) calc(30px + var(--my) * -10px) 50px -6px rgba(20,18,15,.34);
}
.hw-mag-cover{
  background:linear-gradient(160deg, #F5F2EA 0%, #EDE8DD 100%); padding:7% 8%; box-sizing:border-box; overflow:hidden;
  box-shadow:inset 3px 0 6px -3px rgba(0,0,0,.25), inset 0 0 0 1px rgba(0,0,0,.04);
}
.hw-mag-mast{ margin:0; font-family:var(--display); font-size:clamp(20px, 2.4vw, 40px); line-height:1; color:#1a1814; }
.hw-mag-sub{ margin:.4em 0 0; font-family:var(--mono); font-size:clamp(6px, .55vw, 9px); letter-spacing:.2em; color:#5a544a; }
.hw-mag-no{ position:absolute; right:8%; top:8%; margin:0; font-family:var(--mono); font-size:clamp(7px, .6vw, 10px); letter-spacing:.12em; color:#5a544a; }
.hw-mag-num{
  position:absolute; left:0; right:0; bottom:9%; margin:0; text-align:center; font-family:var(--display);
  font-size:clamp(110px, 13vw, 220px); line-height:.8; letter-spacing:-.04em;
  background:linear-gradient(175deg, #D9DCE0 0%, #868A92 28%, #2E3035 50%, #A9ADB3 66%, #5E6269 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.7)) drop-shadow(0 -1px 0 rgba(0,0,0,.18));
}
.hw-sheen{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, rgba(255,255,255,0) calc(35% + var(--mx) * 12%), rgba(255,255,255,.34) calc(45% + var(--mx) * 12%), rgba(255,255,255,0) calc(56% + var(--mx) * 12%));
  mix-blend-mode:soft-light;
}

/* ---- the volume: cloth over boards, the numeral blocked in silver, its thickness at the fore-edge ---- */
.hw-vol{ width:clamp(180px, 21vw, 340px); aspect-ratio:4 / 5; }
.hw-vol-cover, .hw-vol-edge, .hw-vol-spine{ position:absolute; }
.hw-vol-cover{
  inset:0; box-sizing:border-box; padding:9% 10%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6em;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.035) 0 1px, rgba(255,255,255,0) 1px 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.03) 0 1px, rgba(255,255,255,0) 1px 3px),
    linear-gradient(160deg, #EAE5DA, #DCD5C7);
  border-radius:2px 4px 4px 2px;
  box-shadow:inset 6px 0 10px -6px rgba(0,0,0,.35), inset 0 0 0 1px rgba(0,0,0,.05),
    calc(var(--mx) * -20px + 20px) calc(34px + var(--my) * -10px) 60px -8px rgba(20,18,15,.36);
}
.hw-vol-edge{ top:1.5%; bottom:1.5%; right:-14px; width:14px; transform:rotateY(90deg); transform-origin:left center;
  background:repeating-linear-gradient(90deg, #F2EEE6 0 1px, #E2DCCF 1px 2px); }
.hw-vol-spine{ top:0; bottom:0; left:0; width:7%; background:linear-gradient(90deg, rgba(0,0,0,.18), rgba(0,0,0,0)); }
.hw-vol-house{ margin:0; font-family:var(--mono); font-size:clamp(7px, .62vw, 10px); letter-spacing:.3em; color:#6b665c; }
.hw-vol-num{
  margin:0; font-family:var(--display); font-size:clamp(96px, 11vw, 190px); line-height:.86;
  background:linear-gradient(175deg, #DDE0E3 0%, #8E9298 30%, #34363B 52%, #B2B6BB 68%, #666A71 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.6)) drop-shadow(0 -1px 0 rgba(0,0,0,.2));
}
.hw-vol-sub{ margin:0; font-family:var(--mono); font-size:clamp(7px, .6vw, 10px); letter-spacing:.34em; color:#6b665c; }

@media (max-width:759px){
  .hw{ height:78svh; }
  .hw-word{ font-size:clamp(64px, 19vw, 120px) !important; }
}
@media (prefers-reduced-motion:reduce){
  .hw-obj{ transition:none; opacity:1; filter:none; translate:none; }
  .hw-word, .hw-hold{ transform:translate3d(0, -50%, 0); }
  .hw-hold{ transform:none; }
}

/* the title card over a place's own room: fixed, white, under the letterhead; the water opens holes in it as it leaves */
.hw-over{ position:fixed; inset:0; z-index:40; height:auto; min-height:0; }
.hw-over.is-leaving{
  -webkit-mask-image:
    radial-gradient(circle at var(--h1, 50% 50%), transparent calc(var(--hr1, 0px) - 2px), #000 calc(var(--hr1, 0px) + 7vmax)),
    radial-gradient(circle at var(--h2, 50% 50%), transparent calc(var(--hr2, 0px) - 2px), #000 calc(var(--hr2, 0px) + 6vmax)),
    radial-gradient(circle at var(--h3, 50% 50%), transparent calc(var(--hr3, 0px) - 2px), #000 calc(var(--hr3, 0px) + 6vmax));
  -webkit-mask-composite:source-in, source-in;
          mask-image:
    radial-gradient(circle at var(--h1, 50% 50%), transparent calc(var(--hr1, 0px) - 2px), #000 calc(var(--hr1, 0px) + 7vmax)),
    radial-gradient(circle at var(--h2, 50% 50%), transparent calc(var(--hr2, 0px) - 2px), #000 calc(var(--hr2, 0px) + 6vmax)),
    radial-gradient(circle at var(--h3, 50% 50%), transparent calc(var(--hr3, 0px) - 2px), #000 calc(var(--hr3, 0px) + 6vmax));
          mask-composite:intersect;
  filter:url(#cp-wet);
}
#nav{ z-index:60; }

/* inline: the hero at the head of a room that scrolls (the Ledger), not a card over it */
.hw-inline{ height:74vh; height:74svh; min-height:460px; }

.hw-inline{ width:100vw; margin-left:calc(50% - 50vw); }
.hw .hw-word.t-hero{ font-size:clamp(96px, 19vw, 360px) !important; line-height:.86 !important; letter-spacing:-.035em !important; }
@media (max-width:759px){ .hw .hw-word.t-hero{ font-size:clamp(64px, 21vw, 130px) !important; } }