/* ═══════════════════════════════════════════════════════════════
   Naina — Thirty-one
   Light. Warm paper, ink, bronze. Nothing to build.
   ═══════════════════════════════════════════════════════════ */

:root{
  --paper:    #f7f3ec;   /* washi */
  --paper-2:  #fffdf9;   /* raised card */
  --ink:      #23211c;   /* sumi */
  --dim:      rgba(35,33,28,.66);
  --dimmer:   rgba(35,33,28,.44);
  --faint:    rgba(35,33,28,.30);
  --hair:     rgba(35,33,28,.13);
  --hair-2:   rgba(35,33,28,.07);
  --gold:     #96733a;   /* bronze — passes on paper */
  --gold-lit: #b08b45;
  --glow:     #d8ab4e;   /* warm light, for blooms only */
  --pine:     #2f4034;

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --jp:    "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --ease: cubic-bezier(.16,1,.3,1);
  --pad:  clamp(1.5rem, 6vw, 5rem);
  --maxw: 1180px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  background:var(--paper);
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-weight:400;
  line-height:1.55;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ display:block; max-width:100%; height:auto; }
p{ margin:0; }

em{ font-style:normal; color:var(--gold); }

::selection{ background:rgba(216,171,78,.3); color:var(--ink); }

/* ── paper tooth ────────────────────────────────────────────── */
.grain{
  position:fixed; inset:-50%;
  pointer-events:none; z-index:90;
  opacity:.028;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── section shell ──────────────────────────────────────────── */
.s{
  position:relative;
  padding:clamp(6rem,16vh,11rem) var(--pad);
  max-width:var(--maxw);
  margin-inline:auto;
}

/* ── reveal-on-scroll ───────────────────────────────────────── */
.js .rv{
  opacity:0;
  transform:translateY(18px);
  transition:opacity 1.1s var(--ease) var(--d,0s),
             transform 1.1s var(--ease) var(--d,0s);
  will-change:opacity, transform;
}
.js .rv.in{ opacity:1; transform:none; }

/* ── shared type ────────────────────────────────────────────── */
.eyebrow{
  font-family:var(--sans);
  font-size:.66rem;
  font-weight:500;
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--gold);
}

.jp{
  font-family:var(--jp);
  font-weight:400;
  letter-spacing:.24em;
  color:var(--gold);
}

.rule{
  width:1px; height:clamp(2.4rem,7vh,4.5rem);
  margin:1.6rem auto;
  background:linear-gradient(180deg,transparent,var(--hair) 30%,var(--hair) 70%,transparent);
}

.mono{
  font-family:ui-monospace,"SF Mono",Menlo,monospace;
  font-size:.94em;
  letter-spacing:.06em;
}


/* ═══════════════════════════════════════════════════════════════
   01 · THE OPEN
   ═══════════════════════════════════════════════════════════ */
.open{
  min-height:100svh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center;
  padding-block:clamp(5rem,14vh,8rem);
  max-width:none;
  overflow:hidden;
}

/* sun through shoji */
.open__lamp{
  position:absolute; top:50%; left:50%;
  width:min(160vw,1200px); aspect-ratio:1;
  transform:translate(-50%,-58%);
  background:radial-gradient(circle,
    rgba(216,171,78,.20) 0%,
    rgba(216,171,78,.09) 34%,
    rgba(216,171,78,0)  67%);
  animation:breathe 7s var(--ease) infinite;
  pointer-events:none;
}
@keyframes breathe{
  0%,100%{ opacity:.85; transform:translate(-50%,-58%) scale(1); }
  50%    { opacity:1;   transform:translate(-50%,-58%) scale(1.06); }
}

.open__inner{ position:relative; z-index:2; }

.open__greet{
  font-family:var(--serif);
  font-size:clamp(1.6rem,5.6vw,3rem);
  font-weight:300;
  font-style:italic;
  line-height:1.1;
  letter-spacing:.005em;
  color:var(--gold);
}

.open__name{
  margin:.7rem 0 0;
  font-size:clamp(4rem,19vw,11rem);
  font-weight:300;
  line-height:.98;
  letter-spacing:-.015em;
}
/* each letter settles in on its own, like ink touching paper */
.open__name span{
  display:inline-block;
  opacity:0;
  transform:translateY(26px) rotate(2.5deg);
  filter:blur(6px);
}
.js .open__name span{
  animation:settle 1.15s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay:calc(.55s + var(--i) * .075s);
}
@keyframes settle{
  to{ opacity:1; transform:none; filter:blur(0); }
}

.open__age{
  font-family:var(--sans);
  font-size:.6rem;
  font-weight:400;
  letter-spacing:.4em;
  text-transform:uppercase;
  color:var(--dimmer);
  padding-left:.4em;
}

.cue{
  position:absolute; bottom:clamp(2rem,6vh,3.5rem); left:50%;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.85rem;
}
.js .cue{ transform:translate(-50%,18px); }
.js .cue.in{ transform:translateX(-50%); }
.cue span{
  font-family:var(--sans);
  font-size:.58rem; letter-spacing:.4em; text-transform:uppercase;
  color:var(--faint);
}
.cue i{
  width:1px; height:3rem;
  background:linear-gradient(180deg,var(--hair),transparent);
  position:relative; overflow:hidden;
}
.cue i::after{
  content:""; position:absolute; inset-inline:0; height:35%;
  background:linear-gradient(180deg,transparent,var(--gold));
  animation:drop 2.6s var(--ease) infinite;
}
@keyframes drop{
  0%   { transform:translateY(-100%); opacity:0; }
  35%  { opacity:1; }
  100% { transform:translateY(300%); opacity:0; }
}


/* ═══════════════════════════════════════════════════════════════
   02 · HIS WORDS
   ═══════════════════════════════════════════════════════════ */
.words{ max-width:960px; }

.word{
  position:relative;
  padding:clamp(3.5rem,11vh,7rem) 0 clamp(3.5rem,11vh,7rem) clamp(2.6rem,7vw,5.5rem);
}
.word + .word{ border-top:1px solid var(--hair-2); }

.word__no{
  position:absolute; left:0; top:clamp(3.9rem,11.6vh,7.5rem);
  font-family:var(--sans);
  font-size:.6rem; letter-spacing:.3em; font-weight:500;
  color:var(--gold); opacity:.7;
}

.word p{
  font-size:clamp(1.5rem,4.4vw,2.6rem);
  line-height:1.42;
  font-weight:300;
  letter-spacing:-.005em;
  text-wrap:balance;
}


/* ═══════════════════════════════════════════════════════════════
   03 · THE MEMORY — what the gift actually is
   ═══════════════════════════════════════════════════════════ */
.memo{
  min-height:82svh;
  display:grid; place-items:center;
  text-align:center;
}
.memo__inner{
  max-width:42rem;
  display:grid; gap:1.5rem;
}
.memo__big{
  font-size:clamp(1.55rem,4.8vw,2.9rem);
  line-height:1.4;
  font-weight:300;
  letter-spacing:-.008em;
  text-wrap:balance;
}
.memo__big em{ font-style:italic; }


/* ═══════════════════════════════════════════════════════════════
   04 · THE TURN
   ═══════════════════════════════════════════════════════════ */
.plate{
  margin:0; position:relative;
  border-radius:2px;
}
.plate img{
  width:100%; height:100%; object-fit:cover;
  border-radius:2px;
  box-shadow:0 24px 60px -34px rgba(35,33,28,.5);
}
.plate--full{ aspect-ratio:3/2; }
.plate--full img{ height:100%; }
.plate figcaption{
  margin-top:.9rem;
  font-family:var(--sans);
  font-size:.62rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--faint);
}

.turn__cap{
  margin-top:clamp(2.5rem,7vh,4.5rem);
  text-align:center;
}
.turn__cap p{
  font-size:clamp(1.35rem,3.6vw,2.1rem);
  font-style:italic;
  color:var(--dim);
  font-weight:300;
}

.duo{
  display:grid; gap:clamp(.6rem,2vw,1.2rem);
  grid-template-columns:1fr 1fr;
  margin-top:clamp(2rem,6vh,3.5rem);
}
.duo .plate{ aspect-ratio:4/5; }
.duo .plate img{ height:100%; }


/* ═══════════════════════════════════════════════════════════════
   04 · THE NAME  ·  signature moment
   ═══════════════════════════════════════════════════════════ */
.name{ text-align:center; max-width:900px; }

.name__head .jp{
  font-size:clamp(1.6rem,5vw,2.5rem);
  margin-bottom:.9rem;
}
.name__en{
  margin:0;
  font-size:clamp(2.8rem,9vw,5.6rem);
  font-weight:300;
  letter-spacing:.03em;
  line-height:1;
}
.name__sub{
  margin-top:1.1rem;
  font-family:var(--sans);
  font-size:.6rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--faint);
}

/* the rivers */
.rivers{
  position:relative;
  margin:clamp(2.5rem,7vh,4rem) auto clamp(1rem,3vh,2rem);
  width:min(100%,420px);
}
.rivers svg{ width:100%; height:auto; display:block; overflow:visible; }

.riv{
  stroke-dasharray:var(--len,600);
  stroke-dashoffset:var(--len,600);
}

.rivers__lab{
  position:absolute;
  font-family:var(--sans);
  font-size:.56rem;
  font-weight:400;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--dimmer);
  line-height:1.9;
  opacity:0;
  transition:opacity 1s var(--ease) .3s;
  white-space:nowrap;
}
.rivers.lit .rivers__lab{ opacity:1; }
.rivers__lab span{
  display:block;
  font-family:var(--jp);
  font-size:.86rem;
  letter-spacing:.16em;
  text-transform:none;
  color:var(--gold);
}
.rivers__lab i{
  display:block;
  font-family:var(--jp);
  font-style:normal;
  font-size:.6rem;
  letter-spacing:.08em;
  text-transform:none;
  color:var(--faint);
}
.rivers__lab--l{ top:-.4rem; left:-.5rem;  text-align:left; }
.rivers__lab--r{ top:-.4rem; right:-.5rem; text-align:right; }
.rivers__lab--b{
  bottom:-3.6rem; left:50%; transform:translateX(-50%);
  text-align:center;
}
.rivers__lab--b i{ color:var(--gold); }

.name__note{
  margin-top:clamp(4.5rem,11vh,7rem);
  display:grid; gap:1.5rem;
  max-width:34rem; margin-inline:auto;
}
.name__note p{
  font-size:clamp(1.06rem,2.6vw,1.32rem);
  line-height:1.72;
  color:var(--dim);
}
.name__note em{ font-style:italic; }


/* ═══════════════════════════════════════════════════════════════
   05 · THE HOUSE  /  07 · THE NIGHT — prose
   ═══════════════════════════════════════════════════════════ */
.prose{
  margin:clamp(2.8rem,8vh,4.5rem) 0 0;
  max-width:38rem;
  display:grid; gap:1.15rem;
}
.prose--c{ margin-inline:auto; text-align:center; }

.prose h3{
  margin:0 0 .4rem;
  font-size:clamp(1.7rem,4.6vw,2.7rem);
  font-weight:300;
  line-height:1.2;
  letter-spacing:-.01em;
}
.prose p{
  font-size:clamp(1rem,2.4vw,1.2rem);
  line-height:1.75;
  color:var(--dim);
}


/* ═══════════════════════════════════════════════════════════════
   06 · THE ROOM
   ═══════════════════════════════════════════════════════════ */
.room__head{ text-align:center; margin-bottom:clamp(2.5rem,7vh,4rem); }
.room__head .eyebrow{ display:block; margin-bottom:1.4rem; }
.jp--sm{ font-size:clamp(1.5rem,4.5vw,2.2rem); }
.room__name{
  margin:.7rem 0 0;
  font-size:clamp(2.4rem,7.5vw,4.4rem);
  font-weight:300; line-height:1; letter-spacing:.02em;
}
.room__gloss{
  margin-top:.7rem;
  font-style:italic; color:var(--dim);
  font-size:clamp(1rem,2.5vw,1.22rem);
}


/* ═══════════════════════════════════════════════════════════════
   09 · THE UNVEIL
   ═══════════════════════════════════════════════════════════ */
.reveal{ text-align:center; }

.reveal__head .eyebrow{ display:block; margin-bottom:1.3rem; }
.reveal__date{
  margin:0;
  font-size:clamp(1.9rem,6.4vw,3.6rem);
  font-weight:300; line-height:1.12; letter-spacing:-.005em;
}
.reveal__line{
  margin-top:1.2rem;
  font-size:clamp(1.1rem,2.8vw,1.4rem);
  font-style:italic;
  color:var(--dim);
}

/* the seal */
.seal{
  -webkit-appearance:none; appearance:none;
  display:inline-flex; flex-direction:column; align-items:center; gap:1.1rem;
  margin-top:clamp(3rem,8vh,4.5rem);
  padding:0; border:0; background:none;
  color:inherit; cursor:pointer;
  font:inherit;
}
.seal__ring{
  width:5.6rem; height:5.6rem;
  display:grid; place-items:center;
  border:1px solid rgba(150,115,58,.45);
  background:var(--paper-2);
  border-radius:50%;
  position:relative;
  box-shadow:0 10px 28px -16px rgba(35,33,28,.5);
  transition:border-color .6s var(--ease), transform .6s var(--ease);
}
.seal__ring::before{
  content:""; position:absolute; inset:-.55rem;
  border:1px solid rgba(150,115,58,.24);
  border-radius:50%;
  animation:pulse 3.6s var(--ease) infinite;
}
@keyframes pulse{
  0%,100%{ transform:scale(1);    opacity:.6; }
  50%    { transform:scale(1.09); opacity:.12; }
}
.seal__ring .jp{
  font-size:1.75rem; letter-spacing:0;
  color:var(--gold);
}
.seal__label{
  font-family:var(--sans);
  font-size:.62rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--dim);
  transition:color .4s var(--ease);
}
.seal:hover .seal__ring,
.seal:focus-visible .seal__ring{ border-color:var(--gold); transform:scale(1.04); }
.seal:hover .seal__label,
.seal:focus-visible .seal__label{ color:var(--ink); }
.seal[aria-expanded="true"]{
  opacity:0; pointer-events:none;
  transition:opacity .5s var(--ease);
}

/* the ticket */
.ticket{
  margin-top:clamp(2.5rem,7vh,4rem);
  display:grid; justify-items:center; gap:1.6rem;
}
.ticket[hidden]{ display:none; }

.ticket__card{
  width:min(100%,30rem);
  text-align:left;
  background:var(--paper-2);
  border:1px solid rgba(150,115,58,.3);
  border-radius:3px;
  padding:clamp(1.6rem,5vw,2.4rem);
  box-shadow:0 34px 80px -40px rgba(35,33,28,.55),
             0 2px 6px -2px rgba(35,33,28,.08);
}
.ticket--open .ticket__card{ animation:unfold 1.1s var(--ease) both; }
@keyframes unfold{
  from{ opacity:0; transform:translateY(22px) scale(.975); }
  to  { opacity:1; transform:none; }
}

.ticket__top{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1rem; flex-wrap:wrap;
  padding-bottom:1.1rem;
  border-bottom:1px solid var(--hair);
}
.ticket__brand{
  font-size:1.3rem; letter-spacing:.02em;
}
.ticket__brand span{
  font-family:var(--jp); font-size:.78rem;
  color:var(--faint); letter-spacing:.12em;
  margin-left:.45rem;
}
.ticket__status{
  font-family:var(--sans);
  font-size:.55rem; letter-spacing:.3em; text-transform:uppercase;
  font-weight:500;
  color:var(--gold);
  border:1px solid rgba(150,115,58,.42);
  border-radius:999px;
  padding:.34em .9em .3em;
  white-space:nowrap;
}

.ticket__rows{ margin:0; padding:1.2rem 0 0; }
.ticket__rows > div{
  display:grid;
  grid-template-columns:5.6rem 1fr;
  gap:.9rem;
  padding:.62rem 0;
}
.ticket__rows dt{
  font-family:var(--sans);
  font-size:.54rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--faint);
  padding-top:.42em;
}
.ticket__rows dd{
  margin:0;
  font-size:1rem; line-height:1.5;
  color:var(--ink);
}
.ticket__rows dd span[lang="ja"]{
  font-family:var(--jp); color:var(--gold); margin-left:.2rem;
}

.ticket__foot{
  margin-top:1rem; padding-top:1.1rem;
  border-top:1px solid var(--hair);
}
.ticket__fine{
  font-family:var(--sans);
  font-size:.6rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold);
}

.ticket__pdf{
  font-family:var(--sans);
  font-size:.8rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold);
  text-decoration:none;
  display:inline-block;
  padding:1rem 1.9rem;
  border:1px solid rgba(150,115,58,.45);
  border-radius:2px;
  background:var(--paper-2);
  transition:color .4s var(--ease), border-color .4s var(--ease),
             background .4s var(--ease);
}
.ticket__pdf:hover,
.ticket__pdf:focus-visible{
  color:var(--paper-2); border-color:var(--gold); background:var(--gold);
}
/* both documents open in their own tab — nothing is embedded on the page */
.ticket__docs{
  display:grid; justify-items:center; gap:1.1rem;
}
/* the Japanese copy is a quieter second option, not a rival button */
.ticket__pdf--alt{
  font-family:var(--jp);
  font-size:.9rem; font-weight:400;
  letter-spacing:.16em; text-transform:none;
  padding:0 0 .35rem;
  border:0; border-bottom:1px solid rgba(150,115,58,.4);
  border-radius:0; background:none;
  color:var(--dim);
}
.ticket__pdf--alt:hover,
.ticket__pdf--alt:focus-visible{
  background:none; color:var(--gold); border-bottom-color:var(--gold);
}


/* ═══════════════════════════════════════════════════════════════
   09 · THE CLOSE
   ═══════════════════════════════════════════════════════════ */
.close{
  min-height:88svh;
  display:grid; place-items:center;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.close__inner{ max-width:42rem; position:relative; z-index:2; }

.close__big{
  font-size:clamp(1.4rem,4vw,2.3rem);
  line-height:1.5;
  font-weight:300;
  text-wrap:balance;
}
.close__sig{
  font-size:clamp(1.5rem,4.4vw,2.4rem);
  font-style:italic;
  color:var(--ink);
}
.close__from{
  margin-top:1.1rem;
  font-family:var(--sans);
  font-size:.62rem; letter-spacing:.36em; text-transform:uppercase;
  color:var(--faint);
}


/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media (max-width:640px){
  .duo{ grid-template-columns:1fr; }
  .duo .plate{ aspect-ratio:3/2; }
  .plate--full{ aspect-ratio:4/5; }
  /* the arrival shot keeps its native framing on a phone — a portrait crop
     pulls a modern apartment block into the corner. */
  .turn .plate--full{ aspect-ratio:3/2; }
  .ticket__rows > div{ grid-template-columns:1fr; gap:.15rem; }
  .ticket__rows dt{ padding-top:0; }
  .rivers{ width:min(100%,300px); }
  .rivers__lab{ font-size:.5rem; letter-spacing:.14em; }
  .rivers__lab--l{ left:-1.1rem; }
  .rivers__lab--r{ right:-1.1rem; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .js .rv{ opacity:1; transform:none; transition:none; }
  .open__lamp,.cue i::after,.seal__ring::before{ animation:none; }
  .ticket--open .ticket__card{ animation:none; }
  .riv{ stroke-dashoffset:0 !important; }
  .rivers__lab{ opacity:1; }
  .js .open__name span{ animation:none; opacity:1; transform:none; filter:none; }
}

/* no-JS: show everything */
.no-js .rv{ opacity:1; transform:none; }
.no-js .riv{ stroke-dashoffset:0; }
.no-js .rivers__lab{ opacity:1; }
.no-js .seal{ display:none; }
.no-js .ticket[hidden]{ display:grid !important; }
.no-js .open__name span{ opacity:1; transform:none; filter:none; }