/* ============================================================
   The reveal band.
   This is the first thing a stranger sees and it has one job:
   show the unlock happening, without a paragraph of setup.
   A stone, flat and unreadable. The light swings low. The
   inscription surfaces — and then lifts off the stone as type,
   so you can see that what came back is a readable sentence and
   not just a prettier texture.
   ============================================================ */

.hero{
  position:relative;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(90% 120% at 12% -10%, var(--rake-soft) 0%, transparent 58%),
    radial-gradient(80% 110% at 100% 100%, var(--lichen-soft) 0%, transparent 62%),
    var(--paper-2);
  padding:clamp(20px,4.5vw,36px) 20px clamp(24px,5vw,40px);
  overflow:hidden;
}
.hero-grid{
  display:grid;grid-template-columns:1fr;gap:clamp(18px,4vw,34px);
  align-items:center;
}
@media(min-width:760px){
  .hero-grid{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr)}
}

/* ---------- the stone ---------- */
.hero-stone{
  position:relative;margin:0;
  border-radius:var(--r-lg);overflow:hidden;
  background:#0B0E11;
  box-shadow:var(--sh-3), inset 0 0 0 1px rgba(255,255,255,.07);
  aspect-ratio:3/4;
  max-height:min(56vh,440px);
  width:100%;
  display:flex;align-items:center;justify-content:center;
  /* pan-y, NOT none. The stone is the first thing on a phone screen
     and it is tall; swallowing every touch meant a vertical swipe on
     it did nothing and the page appeared frozen. Horizontal drags
     still steer the light, vertical ones scroll past. */
  touch-action:pan-y;cursor:grab;
  isolation:isolate;
}
/* A phone held sideways has almost no height to spare. The stone has
   to shrink, and the row has to top-align: the prose column is more
   than twice its height, so centring the row pushed the stone four
   hundred pixels down and the reveal never appeared on the only
   screen that matters. */
@media(orientation:landscape) and (max-height:560px){
  .hero{padding:14px 20px 18px}
  .hero-grid{align-items:start;gap:20px}
  .hero-stone{max-height:min(80vh,268px)}
  .hero-h{font-size:clamp(19px,3.4vw,25px);margin:0 0 12px}
  .hero-p{font-size:13px;line-height:1.5;margin-bottom:14px}
  .hero-read{min-height:0;margin-bottom:14px}
  .hero-kicker{margin-bottom:6px}
  .hero-fine{margin-top:10px}
}
.hero-stone:active{cursor:grabbing}
.hero-stone:focus-visible{outline:none;box-shadow:0 0 0 3px var(--lichen),var(--sh-3)}
#heroCv{display:block;width:100%;height:100%;object-fit:contain}

.hero-skel{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:#0B0E11;color:#6B747E;
  font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  transition:opacity .5s var(--ease);
}
.hero-skel.gone{opacity:0;pointer-events:none}
.hero-skel span{position:relative}
.hero-skel span::after{
  content:"";position:absolute;left:-40%;right:-40%;top:50%;height:1px;
  background:linear-gradient(90deg,transparent,var(--rake),transparent);
  animation:skelsweep 1.6s var(--ease) infinite;
}
@keyframes skelsweep{0%{transform:translateX(-60%)}100%{transform:translateX(60%)}}

.hero-state{
  position:absolute;left:12px;top:12px;
  background:rgba(8,11,13,.66);backdrop-filter:blur(9px);
  border:1px solid rgba(255,255,255,.14);
  color:#EFEAE0;border-radius:100px;padding:6px 13px;
  font-size:10px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  transition:opacity .35s var(--ease), background .35s var(--ease);
}
.hero-state.lit{background:rgba(233,168,37,.92);color:#1B1A16;border-color:transparent}

.hero-grab{
  position:absolute;right:12px;bottom:12px;
  display:flex;align-items:center;gap:7px;
  background:rgba(8,11,13,.6);backdrop-filter:blur(9px);
  border:1px solid rgba(255,255,255,.14);
  color:#D7D1C6;border-radius:100px;padding:6px 12px;
  font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  opacity:.9;transition:opacity .6s var(--ease);
  pointer-events:none;
}
/* It is an invitation, not furniture. It sits over the last line of
   the inscription, so it gets out of the way on its own even if the
   reader never touches it. */
.hero-stone.touched .hero-grab,
.hero-stone.hinted  .hero-grab{opacity:0}

/* ---------- the argument ---------- */
.hero-kicker{
  font-size:10px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--lichen);margin:0 0 10px;
}
.hero-h{
  font-family:Cinzel,Georgia,serif;font-weight:700;
  font-size:clamp(24px,6.2vw,38px);line-height:1.12;letter-spacing:-.005em;
  margin:0 0 18px;
}
.hero-h em{font-style:normal;color:var(--lichen)}
.hero-p{font-size:14.5px;color:var(--ink-2);line-height:1.62;margin:0 0 20px;max-width:46ch}
.hero-p b{color:var(--ink);font-weight:600}

/* the inscription lifting off the stone */
.hero-read{
  border-left:2px solid var(--rake);
  padding:2px 0 2px 15px;margin:0 0 20px;
  min-height:96px;
}
.hero-read-lab{
  font-size:9.5px;font-weight:800;letter-spacing:.17em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:9px;
  opacity:0;transition:opacity .5s var(--ease);
}
.hero-read.on .hero-read-lab{opacity:1}
.hero-lines{list-style:none;margin:0;padding:0}
.hero-lines li{
  font-family:Cinzel,Georgia,serif;font-weight:700;
  font-size:clamp(12.5px,3.1vw,15.5px);
  letter-spacing:.13em;line-height:1.62;
  color:var(--ink);
  opacity:0;filter:blur(7px);
  transform:translate3d(-10px,6px,0);
  transition:opacity .7s var(--ease), filter .7s var(--ease), transform .7s var(--ease);
}
.hero-lines li.up{opacity:1;filter:blur(0);transform:none}
.hero-lines li.dim{color:var(--ink-3);font-weight:500}

.hero-cta{display:grid;grid-template-columns:1fr;gap:9px;max-width:400px}
@media(min-width:430px){.hero-cta{grid-template-columns:1fr 1fr}}
.hero-fine{font-size:11.5px;color:var(--ink-3);margin:13px 0 0;line-height:1.5;max-width:44ch}
/* Inline links sit inside sentences, so they cannot be 44px tall
   without wrecking the line height. Padding plus an equal negative
   margin buys a usable thumb target and costs no layout. */
.linkbtn{
  color:var(--lichen);font-weight:700;text-decoration:underline;
  text-underline-offset:2.5px;font-size:inherit;
  display:inline-block;padding:9px 2px;margin:-9px 0;
}
.linkbtn:hover{color:var(--ink)}

/* ---------- the proof drawer ---------- */
.hero-proof{
  margin-top:clamp(22px,4vw,34px);padding-top:clamp(20px,4vw,28px);
  border-top:1px solid var(--line);
  animation:panelIn .4s var(--ease);
}
.proof-grid{display:grid;grid-template-columns:1fr;gap:18px;margin-top:6px}
@media(min-width:680px){.proof-grid{grid-template-columns:1fr 1fr;gap:24px}}
.proof-lab{
  font-size:9.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:9px;
}
.proof-lab span{color:var(--verdigris);letter-spacing:.06em;text-transform:none;font-size:11px}
.proof-strip{
  display:grid;grid-template-columns:repeat(7,1fr);gap:4px;
}
.proof-strip canvas{
  width:100%;aspect-ratio:3/4;display:block;border-radius:3px;
  background:#0B0E11;box-shadow:var(--sh-1);
}
.proof-grid .stage{aspect-ratio:3/4;max-height:320px;margin:0 auto}

@media (prefers-reduced-motion:reduce){
  .hero-lines li{filter:none;transform:none}
  .hero-skel span::after{display:none}
}