/* ------------------------------------------------------------------
   清川 · 生日快乐 — qingchuan.icu
   ------------------------------------------------------------------ */

:root{
  --ink:#07060b;
  --ink-2:#0b0912;
  --ink-3:#12101a;
  --cream:#f2ece1;
  --cream-70:rgba(242,236,225,.7);
  --cream-55:rgba(242,236,225,.55);
  --cream-40:rgba(242,236,225,.4);
  --cream-12:rgba(242,236,225,.12);
  --paper:#f1ebdf;
  --paper-hi:#f8f3e9;
  --indigo:#1b1642;
  --indigo-75:rgba(27,22,66,.75);
  --indigo-50:rgba(27,22,66,.5);
  --indigo-14:rgba(27,22,66,.14);
  --gold:#c8a46a;
  --gold-hi:#efdcb4;
  --gold-deep:#8a6a30;
  --serif:"Noto Serif SC","Source Han Serif SC","Songti SC","SimSun",serif;
  --display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --pad:clamp(22px,4.2vw,56px);
  --maxw:1420px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--ink); color:var(--cream);
  font-family:var(--serif); font-weight:400;
  font-size:clamp(15.5px,.55vw + 13.4px,17.5px);
  line-height:1.9; letter-spacing:.02em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{display:block; max-width:100%}
img{height:auto}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer}
::selection{background:var(--gold); color:#100d18}
:focus-visible{outline:1px solid var(--gold); outline-offset:5px}

/* thin scrollbar */
@supports selector(::-webkit-scrollbar){
  ::-webkit-scrollbar{width:9px}
  ::-webkit-scrollbar-track{background:#07060b}
  ::-webkit-scrollbar-thumb{background:#2a2434; border:3px solid #07060b; border-radius:9px}
  ::-webkit-scrollbar-thumb:hover{background:var(--gold-deep)}
}

.wrap{width:min(var(--maxw),100% - var(--pad)*2); margin-inline:auto}

/* ------------------------------------------------------------- overlays */
.grain{
  position:fixed; inset:0; z-index:90; pointer-events:none;
  background-image:url(/assets/img/grain.png); background-size:180px 180px;
  opacity:.05; mix-blend-mode:overlay;
}
.vignette{
  position:fixed; inset:0; z-index:80; pointer-events:none;
  background:
    radial-gradient(130% 100% at 50% 45%,transparent 52%,rgba(0,0,0,.55) 100%),
    linear-gradient(180deg,rgba(0,0,0,.35),transparent 18%);
}

/* -------------------------------------------------------------- cursor */
.cursor{position:fixed; left:0; top:0; z-index:200; pointer-events:none; mix-blend-mode:difference; opacity:0; transition:opacity .4s}
.cursor.is-on{opacity:1}
.cursor__dot,.cursor__ring{position:absolute; left:0; top:0; border-radius:50%; will-change:transform}
.cursor__dot{width:5px; height:5px; margin:-2.5px 0 0 -2.5px; background:var(--cream)}
.cursor__ring{width:30px; height:30px; margin:-15px 0 0 -15px; border:1px solid rgba(242,236,225,.55); transition:width .4s var(--ease),height .4s var(--ease),margin .4s var(--ease),border-color .4s,opacity .4s}
.cursor.is-hover .cursor__ring{width:58px; height:58px; margin:-29px 0 0 -29px; border-color:rgba(239,220,180,.8)}
.cursor.is-hover .cursor__dot{opacity:0}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

/* -------------------------------------------------------------- loader */
.loader{
  position:fixed; inset:0; z-index:300; display:grid; place-items:center;
  background:#07060b; transition:opacity .9s var(--ease),visibility .9s;
}
.loader.is-done{opacity:0; visibility:hidden}
.loader__inner{display:grid; justify-items:center; gap:26px}
.loader__word{width:clamp(128px,14vw,172px); height:auto; opacity:0; animation:loadIn 1.4s .1s var(--ease) forwards}
@keyframes loadIn{from{opacity:0; transform:translateY(6px)}to{opacity:.94; transform:none}}
.loader__bar{width:clamp(120px,13vw,160px); height:1px; background:rgba(242,236,225,.14); overflow:hidden}
.loader__bar i{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--gold-deep),var(--gold-hi))}
.loader__meta{
  display:flex; width:clamp(120px,13vw,160px); justify-content:space-between;
  font-family:var(--mono); font-size:8.5px; letter-spacing:.18em; color:var(--cream-40);
}

/* -------------------------------------------------------------- topbar */
.topbar{
  position:fixed; inset:0 0 auto; z-index:70;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px var(--pad);
  color:var(--cream); transition:color .5s,background .5s,backdrop-filter .5s,padding .5s;
}
.topbar.is-stuck{padding-block:14px; background:rgba(7,6,11,.55); backdrop-filter:blur(14px) saturate(120%); border-bottom:1px solid rgba(242,236,225,.06)}
.topbar.is-ink{color:var(--indigo)}
.topbar.is-ink.is-stuck{background:rgba(241,235,223,.72); border-bottom-color:rgba(27,22,66,.09)}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:10px; letter-spacing:.32em}
.brand svg{width:17px; height:17px; opacity:.85}
.topbar__meta{display:flex; align-items:center; gap:9px; font-family:var(--mono); font-size:9.5px; letter-spacing:.26em; opacity:.55}
.topbar__meta i{width:5px; height:5px; border-radius:50%; background:var(--gold); box-shadow:0 0 12px var(--gold)}

/* ------------------------------------------------------------- chapters */
.chapters{
  position:fixed; right:clamp(6px,.7vw,13px); top:50%; transform:translateY(-50%);
  z-index:60; display:flex; flex-direction:column; gap:17px; align-items:flex-end;
  transition:color .5s;
}
.chapters a{display:flex; align-items:center; gap:9px; font-family:var(--mono); font-size:9px; letter-spacing:.2em; color:rgba(242,236,225,.3); transition:color .45s}
.chapters a em{font-family:var(--serif); font-style:normal; font-size:11px; letter-spacing:.1em; opacity:0; transform:translateX(5px); transition:opacity .45s,transform .45s}
.chapters a::after{content:""; width:0; height:1px; background:currentColor; opacity:.5; transition:width .45s var(--ease)}
.chapters a:hover,.chapters a.is-active{color:var(--gold-hi)}
.chapters a:hover em,.chapters a.is-active em{opacity:1; transform:none}
.chapters a.is-active::after{width:26px}
.chapters.is-ink a{color:rgba(27,22,66,.4)}
.chapters.is-ink a:hover,.chapters.is-ink a.is-active{color:var(--indigo)}
.chapters.is-ink a.is-active::after{background:var(--gold-deep)}
@media (max-width:1180px){.chapters{display:none}}

/* ---------------------------------------------------------------- type */
.eyebrow{
  display:flex; align-items:center; gap:13px; margin:0 0 26px;
  font-family:var(--mono); font-size:9.5px; font-weight:400; letter-spacing:.3em;
  color:var(--gold); text-transform:uppercase;
}
.eyebrow .rule{width:46px; height:1px; background:linear-gradient(90deg,rgba(200,164,106,.15),var(--gold))}
.sec-label{
  display:flex; align-items:center; gap:12px; margin:0 0 24px;
  font-family:var(--mono); font-size:9.5px; font-weight:400; letter-spacing:.3em;
  color:var(--gold);
}
.sec-label::before{content:""; width:30px; height:1px; background:currentColor; opacity:.55}
.sec-title{
  margin:0; font-weight:600; font-size:clamp(28px,4.3vw,58px); line-height:1.44;
  letter-spacing:.03em; text-wrap:balance;
}
.sec-sub{margin:24px 0 0; max-width:46ch; font-size:clamp(14px,1.1vw,15.5px); line-height:2.05; color:var(--cream-55); letter-spacing:.03em}
.sec-head{position:relative}
.sec-head--center{text-align:center; display:grid; justify-items:center}
.sec-head--center .sec-sub{max-width:52ch}
.sec-head--center .sec-label::before{display:none}

/* ---------------------------------------------------------------- hero */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  padding:118px 0 86px; overflow:clip; isolation:isolate;
}
.hero__canvas{position:absolute; inset:0; width:100%; height:100%; z-index:-2; opacity:.95}
.hero__beam{
  position:absolute; inset:-10% -10% auto; height:80%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(50% 55% at 62% 34%,rgba(200,164,106,.16),transparent 70%),
    radial-gradient(60% 60% at 18% 78%,rgba(74,52,120,.22),transparent 72%);
  filter:blur(6px);
}
.no-webgl .hero{background:
  radial-gradient(60% 70% at 70% 20%,#1a1426,#07060b 65%),
  radial-gradient(50% 60% at 10% 80%,#141027,transparent 70%)}
.hero__inner{
  width:min(var(--maxw),100% - var(--pad)*2); margin-inline:auto;
  display:grid; grid-template-columns:1.04fr .96fr; align-items:center;
  gap:clamp(24px,4vw,64px);
}
.hero__col{position:relative; z-index:2}
.hero__name{
  margin:0 0 34px; font-size:clamp(90px,14.6vw,224px); line-height:.92; font-weight:600;
  letter-spacing:.045em; display:flex;
  background:linear-gradient(172deg,#fffaf0 4%,#f0e4cd 42%,#c8a46a 92%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 24px 70px rgba(200,164,106,.16));
}
.hero__name .ch{display:block; overflow:hidden; padding-bottom:.06em}
.hero__name .ch span{display:block; transform:translateY(115%) rotate(2.5deg); transition:transform 1.5s var(--ease)}
.hero__name .ch:nth-child(2) span{transition-delay:.13s}
.is-ready .hero__name .ch span{transform:none}
.hero__sub{
  margin:0; width:100%; max-width:26em; font-size:clamp(15.5px,1.28vw,18.5px); line-height:2.05;
  color:var(--cream-70); letter-spacing:.035em;
  opacity:0; transform:translateY(14px); transition:opacity 1.2s .55s var(--ease),transform 1.2s .55s var(--ease);
}
.is-ready .hero__sub{opacity:1; transform:none}
.hero__meta{
  display:flex; align-items:center; gap:14px; margin-top:44px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.26em; color:var(--cream-40);
  opacity:0; transform:translateY(12px); transition:opacity 1.2s .7s var(--ease),transform 1.2s .7s var(--ease);
}
.is-ready .hero__meta{opacity:1; transform:none}
.hero__meta .sep{width:22px; height:1px; background:var(--cream-12)}
.eyebrow{opacity:0; transform:translateY(10px); transition:opacity 1.2s .25s var(--ease),transform 1.2s .25s var(--ease)}
.is-ready .eyebrow{opacity:1; transform:none}

/* signed print in the hero */
.hero__print{
  position:relative; justify-self:end; width:clamp(268px,36vw,520px); margin:0 clamp(0px,1.2vw,20px) 0 0;
  transform:translateY(26px) rotate(-2.4deg); opacity:0;
  transition:opacity 1.4s .5s var(--ease),transform 1.4s .5s var(--ease);
}
.is-ready .hero__print{opacity:1; transform:rotate(-2.4deg)}
.hero__print-inner{
  position:relative; background:linear-gradient(160deg,#f8f3e9,#eee6d7);
  padding:13px 13px 58px; box-shadow:
    0 60px 110px -40px rgba(0,0,0,.9),
    0 0 0 1px rgba(200,164,106,.25),
    0 0 80px rgba(200,164,106,.08);
}
.hero__art{width:100%; mix-blend-mode:multiply}
.hero__sign{position:absolute; right:18px; bottom:12px; width:52%; mix-blend-mode:multiply; opacity:.92}
.hero__print figcaption{
  display:flex; justify-content:space-between; gap:12px; margin-top:14px;
  font-family:var(--display); font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--cream-40);
}
.hero__print figcaption span:first-child{color:var(--gold)}

.hero__scroll{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  display:grid; justify-items:center; gap:10px; z-index:3;
  font-family:var(--mono); font-size:8.5px; letter-spacing:.3em; color:var(--cream-40);
}
.hero__scroll i{display:block; width:1px; height:44px; background:linear-gradient(180deg,var(--gold),transparent); animation:drop 2.6s var(--ease) infinite}
@keyframes drop{0%{transform:scaleY(.15); transform-origin:top; opacity:0}35%{opacity:1}100%{transform:scaleY(1); opacity:0}}

/* -------------------------------------------------------------- letter */
.letter{
  position:relative; background:var(--paper); color:var(--indigo);
  padding:clamp(86px,13vw,172px) 0 clamp(96px,15vw,190px);
  box-shadow:inset 0 32px 46px -34px rgba(30,24,50,.28);
}
.letter::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.34;
  background:
    url(/assets/img/paper.png) repeat,
    radial-gradient(120% 70% at 12% 0%,#fbf6ec,transparent 62%),
    radial-gradient(90% 60% at 100% 100%,#e9e0cf,transparent 70%);
  background-size:256px 256px,auto,auto;
  background-blend-mode:multiply,normal,normal;
}
.letter::after,.board::after{
  content:""; position:absolute; left:0; right:0; top:0; height:1px; pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(200,164,106,.5) 22%,rgba(200,164,106,.5) 78%,transparent);
}
.letter__wrap{position:relative; width:min(1160px,100% - var(--pad)*2)}
.letter .sec-title{max-width:19.5em}
.letter__grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,296px);
  gap:clamp(40px,7vw,116px); margin-top:clamp(44px,6vw,76px); align-items:start;
}
.letter__body{max-width:36.5em}
.letter__body p{
  margin:0 0 1.42em; font-size:clamp(16.5px,1.26vw,18.6px); line-height:2.18;
  color:rgba(27,22,66,.82); letter-spacing:.018em;
}
.letter__dear{margin-bottom:.9em !important; font-weight:600; color:var(--indigo) !important; letter-spacing:.08em !important}
.letter__lead{margin-bottom:1.5em !important; font-size:clamp(21px,1.9vw,26px) !important; font-weight:600; color:var(--indigo) !important; letter-spacing:.06em !important}
.letter__sign{display:flex; align-items:flex-end; gap:22px; margin-top:54px}
.letter__sign img{width:clamp(140px,15vw,196px); opacity:.94; mix-blend-mode:multiply}
.letter__sign p{margin:0 0 6px; font-size:12.5px; line-height:1.9; color:var(--indigo-50); letter-spacing:.06em}
.letter__sign p span{font-family:var(--mono); font-size:9px; letter-spacing:.18em; opacity:.75}

.letter__aside{padding-top:clamp(10px,4vw,110px)}
.letter__doodle{margin:0 18px 0 0; transform:rotate(-2.6deg)}
.letter__doodle img{
  width:100%; background:#fbf7ee; padding:9px 9px 0;
  box-shadow:0 26px 46px -26px rgba(27,22,66,.55),0 0 0 1px rgba(27,22,66,.08);
}
.letter__doodle figcaption{
  margin-top:12px; font-size:12px; line-height:1.85; color:var(--indigo-50); letter-spacing:.04em;
}
.letter__aside-note{
  margin:34px 0 0; padding-left:16px; border-left:1px solid rgba(138,106,48,.45);
  font-size:12.5px; line-height:2; color:var(--indigo-50); letter-spacing:.03em;
}

/* --------------------------------------------------------------- night */
.night{
  position:relative; padding:clamp(96px,14vw,180px) 0 clamp(100px,14vw,180px);
  background:radial-gradient(90% 55% at 50% 0%,#151021 0%,#08070d 58%);
}
.night .sec-title{max-width:12em}
.gallery{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(18px,2vw,30px); row-gap:clamp(42px,5.5vw,84px);
  margin-top:clamp(48px,7vw,96px); align-items:start;
}
.shot{margin:0; min-width:0}
.shot__frame{position:relative; overflow:hidden; background:#0d0b13; aspect-ratio:16/10;
  box-shadow:0 40px 80px -40px rgba(0,0,0,.95),0 0 0 1px rgba(242,236,225,.06);
  cursor:zoom-in;
}
.shot__frame img{width:100%; height:100%; object-fit:cover; object-position:50% 42%; transform:scale(1.012); transition:transform 1.6s var(--ease),filter .8s}
.shot__frame:hover img{transform:scale(1.05); filter:brightness(1.07) saturate(1.04)}
.shot__frame::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(7,6,11,.18),transparent 30%,transparent 72%,rgba(7,6,11,.5));
}
.shot figcaption{display:flex; gap:13px; margin-top:14px; padding-top:11px; border-top:1px solid rgba(242,236,225,.1); font-size:12.5px; letter-spacing:.04em; color:var(--cream-55)}
.shot .tc{font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; color:var(--gold); padding-top:2px; white-space:nowrap}
.shot--a{grid-column:1; grid-row:1}
.shot--b{grid-column:2; grid-row:1; margin-top:clamp(48px,7vw,104px)}
.shot--c{grid-column:1; grid-row:2}
.shot--d{grid-column:2; grid-row:2; margin-top:clamp(48px,7vw,104px)}
.shot--e{grid-column:1; grid-row:3}
.shot--f{grid-column:2; grid-row:3; margin-top:clamp(48px,7vw,104px)}

/* -------------------------------------------------------------- prints */
.prints{
  position:relative; overflow:clip; padding:clamp(90px,13vw,180px) 0 clamp(110px,15vw,200px);
  background:linear-gradient(180deg,#08070d,#0a0811 45%,#08070d);
}
.prints__glow{
  position:absolute; left:50%; top:16%; width:min(1100px,120vw); height:58%;
  transform:translateX(-50%); pointer-events:none;
  background:radial-gradient(closest-side,rgba(200,164,106,.14),rgba(120,90,60,.05) 55%,transparent 72%);
  filter:blur(10px);
}
.prints .wrap{position:relative}
.plates{
  display:flex; justify-content:center; align-items:flex-start;
  gap:clamp(28px,5.5vw,104px); margin-top:clamp(52px,7vw,100px);
}
.plate{margin:0; width:min(40vw,462px)}
.plate--down{width:min(26vw,306px); margin-top:clamp(30px,4vw,58px)}
.plate__frame{
  background:linear-gradient(155deg,#f8f3e9,#e9e1d1); padding:clamp(9px,1.1vw,15px);
  transform:perspective(1200px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) rotate(var(--r,-1.3deg));
  transition:transform .9s var(--ease),box-shadow .9s var(--ease);
  box-shadow:0 70px 130px -50px rgba(0,0,0,.95),0 0 0 1px rgba(200,164,106,.24),0 0 90px rgba(200,164,106,.05);
}
.plate--down .plate__frame{--r:1.7deg}
.plate__frame--tall{padding-bottom:clamp(9px,1.1vw,15px)}
.plate__frame img{width:100%; mix-blend-mode:multiply}
.plate:hover .plate__frame{--r:0deg; box-shadow:0 90px 150px -50px rgba(0,0,0,1),0 0 0 1px rgba(239,220,180,.4),0 0 110px rgba(200,164,106,.12)}
.plate figcaption{
  display:flex; gap:14px; align-items:baseline; margin-top:20px;
  font-family:var(--display); font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--cream-40);
}
.plate figcaption span{color:var(--gold)}
.pull{
  position:relative; margin:clamp(74px,10vw,132px) auto 0; max-width:24em; text-align:center;
  font-size:clamp(21px,2.5vw,32px); line-height:1.95; letter-spacing:.06em; color:rgba(242,236,225,.82);
}
.pull::before{content:""; display:block; width:1px; height:44px; margin:0 auto 34px; background:linear-gradient(180deg,transparent,var(--gold))}

/* --------------------------------------------------------------- board */
.board{
  position:relative; background:var(--paper); color:var(--indigo);
  padding:clamp(86px,12.5vw,164px) 0 clamp(96px,14vw,180px);
  box-shadow:inset 0 32px 46px -34px rgba(30,24,50,.26);
}
.board::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.34;
  background:
    url(/assets/img/paper.png) repeat,
    radial-gradient(110% 60% at 88% 0%,#fbf6ec,transparent 58%),
    radial-gradient(80% 60% at 0% 100%,#e9e0cf,transparent 68%);
  background-size:256px 256px,auto,auto;
  background-blend-mode:multiply,normal,normal;
}
.board .wrap{position:relative}
.board .sec-title{max-width:14em}
.board .sec-sub{color:rgba(27,22,66,.62)}
.board .sec-label{color:rgba(27,22,66,.45)}
.board .sec-label::before{background:rgba(27,22,66,.35)}
.board__grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(38px,6vw,92px); margin-top:clamp(44px,6vw,84px); align-items:start;
}
.board__stage{position:relative}
.board__stack{
  position:relative; background:#0a0810; padding:clamp(16px,2.4vw,30px); max-width:460px;
  box-shadow:0 40px 80px -34px rgba(27,22,66,.55),0 0 0 1px rgba(200,164,106,.14);
}
.board__stack .layer{position:absolute; inset:clamp(16px,2.4vw,30px); width:calc(100% - clamp(16px,2.4vw,30px)*2); height:auto; transition:opacity .7s var(--ease),filter .7s}
.board__stack .layer:first-child{position:relative; inset:auto; width:100%}
.layer.is-off{opacity:0}
.board__ctrl{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px}
.board__ctrl button{
  display:flex; align-items:center; gap:8px; padding:9px 14px;
  border:1px solid rgba(27,22,66,.22); color:rgba(27,22,66,.55);
  font-family:var(--mono); font-size:9.5px; letter-spacing:.18em; transition:.35s var(--ease);
}
.board__ctrl button i{width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.5; transition:.35s}
.board__ctrl button:hover{color:var(--indigo); border-color:rgba(27,22,66,.45)}
.board__ctrl button[aria-pressed="true"]{background:var(--indigo); border-color:var(--indigo); color:var(--paper)}
.board__ctrl button[aria-pressed="true"] i{background:var(--gold-hi); opacity:1}
.board__ctrl button[aria-pressed="false"]{color:rgba(27,22,66,.34)}
.board__hint{margin:14px 0 0; font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; color:rgba(27,22,66,.42)}

.board__info{display:grid; align-content:start; gap:clamp(30px,3.6vw,48px)}
.board__name{width:min(262px,64%); mix-blend-mode:multiply}
.specs{margin:0; border-top:1px solid var(--indigo-14)}
.specs > div{display:grid; grid-template-columns:minmax(96px,132px) 1fr; gap:18px; padding:15px 0; border-bottom:1px solid rgba(27,22,66,.1)}
.specs dt{font-family:var(--mono); font-size:9px; letter-spacing:.14em; color:var(--indigo-50); padding-top:4px}
.specs dd{margin:0; font-size:15px; color:var(--indigo); letter-spacing:.04em}
.qr{
  display:inline-flex; align-items:center; gap:18px; padding:14px 18px; width:fit-content;
  background:rgba(251,247,238,.55); border:1px solid rgba(27,22,66,.14);
}
.qr img{width:88px; height:88px; flex:none; image-rendering:pixelated; mix-blend-mode:multiply}
.board__note{
  margin:0; max-width:32em; font-size:14.5px; line-height:2.1; letter-spacing:.04em;
  color:rgba(27,22,66,.6); padding-top:26px; border-top:1px solid rgba(27,22,66,.1);
}
.qr__title{margin:0; font-family:var(--mono); font-size:9.5px; letter-spacing:.22em; color:var(--gold-deep)}
.qr__url{margin:6px 0 0; font-size:16px; letter-spacing:.04em}
.qr__note{margin:6px 0 0; font-size:11.5px; color:var(--indigo-50); letter-spacing:.02em}

/* --------------------------------------------------------------- bits */
.shot__frame{transition:transform .9s var(--ease),box-shadow .9s var(--ease)}
.shot:hover .shot__frame{transform:translateY(-4px); box-shadow:0 40px 70px -40px rgba(0,0,0,.9)}
.shot__frame img{transition:transform 1.2s var(--ease),opacity 1.2s var(--ease)}
.shot:hover .shot__frame img{transform:scale(1.025)}
.shot:hover figcaption{border-top-color:rgba(200,164,106,.45)}

.layer{transition:opacity .75s var(--ease)}

@keyframes floaty{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-9px) rotate(1.4deg)}}

/* --------------------------------------------------------------- outro */
.outro{position:relative; overflow:clip; padding:clamp(110px,15vw,210px) 0 54px; background:#07060b; text-align:center}
.outro__halo{
  position:absolute; left:50%; top:0; width:120vw; height:78%; transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(200,164,106,.15),rgba(80,58,110,.07) 55%,transparent 72%);
  pointer-events:none;
}
.outro__wrap{position:relative}
.outro .sec-label{justify-content:center}
.outro .sec-label::before{display:none}
.outro__title{
  margin:0; font-size:clamp(46px,8.4vw,124px); line-height:1.06; font-weight:600; letter-spacing:.045em;
  background:linear-gradient(176deg,#fffaf1 8%,#f1e5cf 44%,#c19c62 96%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 20px 60px rgba(200,164,106,.18));
}
.br-sm{display:none}
.outro__sub{margin:34px auto 0; font-size:clamp(14.5px,1.2vw,16.5px); line-height:2.1; color:var(--cream-55); letter-spacing:.05em}
.outro__sign{width:min(64vw,720px); margin:clamp(50px,7vw,90px) auto 0; opacity:.95}
.outro__foot{
  display:flex; justify-content:center; align-items:center; gap:clamp(18px,4vw,48px); flex-wrap:wrap;
  width:min(880px,100%); margin:clamp(60px,8vw,96px) auto 0; padding-top:24px;
  border-top:1px solid rgba(242,236,225,.1);
  font-family:var(--mono); font-size:9px; letter-spacing:.24em; color:var(--cream-40);
}
.outro__foot a{position:relative; color:var(--cream-70); transition:color .4s}
.outro__foot a::after{content:""; position:absolute; left:0; bottom:-4px; width:100%; height:1px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .5s var(--ease)}
.outro__foot a:hover{color:var(--gold-hi)}
.outro__foot a:hover::after{transform:scaleX(1); transform-origin:left}
.outro__chibi{position:relative; width:clamp(96px,10vw,132px); margin:clamp(46px,6vw,72px) auto 0}
.outro__chibi img{width:100%; animation:float 7s ease-in-out infinite; filter:drop-shadow(0 18px 30px rgba(0,0,0,.55))}
.outro__chibi figcaption{
  margin-top:12px; font-size:12px; letter-spacing:.08em; color:var(--cream-40);
  opacity:.75; transform:none; transition:.6s var(--ease);
}
.outro__chibi:hover figcaption{opacity:1; color:var(--gold-hi)}
@keyframes float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-9px) rotate(1.2deg)}}

/* ------------------------------------------------------------ lightbox */
.lightbox{position:fixed; inset:0; z-index:250; display:grid; place-items:center; background:rgba(4,3,7,.985); backdrop-filter:blur(14px) saturate(.85); padding:clamp(20px,5vw,60px)}
.lightbox[hidden]{display:none}
.lightbox figure{margin:0; display:grid; justify-items:center; gap:16px; max-width:min(1200px,92vw)}
.lightbox img{max-height:78vh; width:auto; box-shadow:0 40px 100px -30px #000}
.lightbox figcaption{display:flex; gap:14px; font-size:12.5px; color:var(--cream-55)}
.lightbox figcaption .tc{font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; color:var(--gold)}
.lightbox__close,.lightbox__nav{
  position:absolute; display:grid; place-items:center; width:46px; height:46px; border-radius:50%;
  border:1px solid rgba(242,236,225,.18); color:var(--cream-70); font-size:15px; transition:.35s
}
.lightbox__close{top:clamp(14px,3vw,30px); right:clamp(14px,3vw,30px)}
.lightbox__nav--prev{left:clamp(10px,2vw,30px); top:50%; transform:translateY(-50%)}
.lightbox__nav--next{right:clamp(10px,2vw,30px); top:50%; transform:translateY(-50%)}
.lightbox__close:hover,.lightbox__nav:hover{background:var(--gold-hi); color:#0a0810; border-color:var(--gold-hi)}

/* -------------------------------------------------------------- reveals */
[data-reveal]{opacity:0; transform:translateY(26px); transition:opacity 1.15s var(--ease),transform 1.15s var(--ease)}
[data-reveal].is-in{opacity:1; transform:none}
html:not(.js) [data-reveal]{opacity:1; transform:none}

/* ------------------------------------------------------------ responsive */
@media (max-width:1080px){
  .hero__inner{grid-template-columns:1fr; gap:clamp(30px,7vw,52px); justify-items:stretch}
  .hero{min-height:auto; padding:120px 0 96px}
  .hero__name{font-size:clamp(84px,20vw,150px); margin-bottom:26px}
  .hero__print{justify-self:center; width:min(66vw,340px); margin-top:6px}
  .hero__scroll{display:none}
  .letter__grid{grid-template-columns:1fr; gap:clamp(44px,8vw,64px)}
  .letter__aside{padding-top:0; max-width:340px}
  .letter__body p{max-width:34em}
  .gallery{grid-template-columns:repeat(6,1fr); row-gap:44px}
  .shot--a{grid-column:1 / span 6; grid-row:auto; margin-top:0}
  .shot--b{grid-column:1 / span 3; grid-row:auto; margin-top:0}
  .shot--c{grid-column:4 / span 3; grid-row:auto; margin-top:34px}
  .shot--d{grid-column:1 / span 6; grid-row:auto; margin-top:0}
  .shot--e{grid-column:1 / span 3; grid-row:auto; margin-top:0}
  .shot--f{grid-column:4 / span 3; grid-row:auto; margin-top:26px}
  .shot--b .shot__frame,.shot--c .shot__frame,.shot--e .shot__frame{aspect-ratio:3/4}
  .plates{flex-direction:column; align-items:center; gap:clamp(46px,9vw,70px)}
  .plate,.plate--down{width:min(74vw,380px); margin-top:0}
  .board__grid{grid-template-columns:1fr; gap:clamp(44px,8vw,64px)}
  .board__info{max-width:560px}
}
@media (max-width:720px){
  :root{--pad:20px}
  .topbar__meta{display:none}
  .hero{padding:104px 0 80px}
  .hero__name{letter-spacing:.02em}
  .hero__sub{max-width:none}
  .hero__meta{flex-wrap:wrap; gap:10px; margin-top:32px}
  .sec-title{line-height:1.5}
  .letter__sign{flex-direction:column; align-items:flex-start; gap:14px}
  .gallery{grid-template-columns:1fr; row-gap:38px}
  .shot--a,.shot--b,.shot--c,.shot--d,.shot--e,.shot--f{grid-column:1 / -1; grid-row:auto; margin-top:0}
  .shot--b .shot__frame,.shot--c .shot__frame,.shot--e .shot__frame{aspect-ratio:16/10}
  .shot figcaption{flex-direction:column; gap:4px}
  .board__stack{padding:14px}
  .board__stack .layer{inset:14px; width:calc(100% - 28px)}
  .qr{flex-direction:column; align-items:flex-start; gap:14px}
  .outro__chibi{width:128px}
  .outro__title{line-height:1.18}
  .br-sm{display:block}
  .outro__foot{flex-direction:column; gap:14px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  [data-reveal]{opacity:1; transform:none}
  .hero__name .ch span{transform:none}
  .hero__sub,.hero__meta,.eyebrow,.hero__print{opacity:1; transform:none}
}

/* ------------------------------------------------ personal homepage pieces */
.hero__card{
  display:grid; place-items:center; gap:clamp(20px,2.6vw,32px);
  padding:clamp(38px,5vw,60px) clamp(22px,3vw,36px);
  aspect-ratio:4 / 5;
}
.hero__print-inner.hero__card{padding-bottom:clamp(32px,4vw,44px)}
.hero__card-sign{width:86%; mix-blend-mode:multiply; opacity:.95}
.hero__card-meta{
  margin:0; font-family:var(--mono); font-size:9px; letter-spacing:.3em;
  line-height:2.3; text-align:center; color:rgba(27,22,66,.4);
}

.outro__qr{
  display:inline-flex; align-items:center; gap:20px; margin-top:clamp(38px,5vw,58px);
  padding:16px 20px; border:1px solid rgba(242,236,225,.14);
  background:rgba(242,236,225,.025); text-align:left;
}
.outro__qr img{width:92px; height:92px; flex:none; image-rendering:pixelated}
.outro__qr .qr__url{margin:0; font-size:18px; letter-spacing:.02em; color:var(--cream-70)}
.outro__qr .qr__note{margin:8px 0 0; font-size:11.5px; letter-spacing:.04em; color:var(--cream-40)}

.outro__gift{
  max-width:640px; margin:clamp(64px,9vw,108px) auto 0;
  padding-top:clamp(34px,4.4vw,52px); border-top:1px solid rgba(242,236,225,.12);
}
.outro__date{margin:0; font-family:var(--mono); font-size:11px; letter-spacing:.5em; color:var(--gold); text-indent:.5em}
.outro__wish{margin:18px 0 0; font-size:clamp(23px,3.2vw,38px); font-weight:600; letter-spacing:.06em; color:var(--cream)}
.outro__from{
  margin:16px 0 0; font-size:clamp(12.5px,1.05vw,13.5px); line-height:2.1;
  letter-spacing:.05em; color:var(--cream-40);
}

@media (max-width:720px){
  .outro__qr{flex-direction:column; align-items:flex-start; gap:14px}
  .hero__card{aspect-ratio:1 / 1.15}
}

.letter__aside-note--in{margin:26px 0 0; max-width:34em; padding-left:16px}

.outro__contact{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:clamp(26px,4vw,54px); margin-top:clamp(38px,5vw,58px);
}
.outro__links{display:grid; width:min(452px,100%)}
.clink{
  display:grid; grid-template-columns:74px 1fr 52px; align-items:center; gap:14px;
  padding:16px 2px; border-top:1px solid rgba(242,236,225,.12);
  text-align:left; color:var(--cream-70); transition:.35s var(--ease);
}
.clink:last-child{border-bottom:1px solid rgba(242,236,225,.12)}
.clink__k{font-family:var(--mono); font-size:9px; letter-spacing:.24em; color:var(--cream-40); transition:.35s}
.clink__v{font-size:14px; letter-spacing:.03em; overflow-wrap:anywhere}
.clink__a{
  font-family:var(--mono); font-size:9px; letter-spacing:.16em; text-align:right;
  color:var(--gold); opacity:.75; transition:.35s;
}
.clink:hover{color:var(--gold-hi)}
.clink:hover .clink__a{opacity:1}
.clink:hover .clink__k{color:var(--gold)}
.clink.is-copied .clink__a{color:var(--gold-hi); opacity:1}

@media (max-width:720px){
  .clink{grid-template-columns:62px 1fr 44px; gap:10px}
  .clink__v{font-size:13px}
}

.outro__side{display:grid; gap:16px; justify-items:start}
.outro__vrmeta{
  margin:0; font-family:var(--mono); font-size:9px; letter-spacing:.16em;
  color:var(--cream-40); opacity:.8;
}

/* keep the fixed chapter rail clear of the content column */
@media (min-width:1181px){
  .wrap{width:min(var(--maxw), 100% - var(--pad)*2 - 30px)}
}

/* closer to a card than a page */
.hero__card{aspect-ratio:5 / 6; gap:clamp(16px,2vw,24px)}
.hero__card-sign{width:92%}

/* the QR stays a scan target: park it on a paper chip */
.outro__qr{background:rgba(248,243,233,.06); border-color:rgba(242,236,225,.18)}
.outro__qr img{
  width:88px; height:88px; background:#ffffff; image-rendering:pixelated;
}

.outro__from{color:var(--cream-55); font-size:clamp(13px,1.15vw,15px)}

.hero__card{grid-template-rows:1fr auto; align-items:center}
.hero__card::after{
  content:""; position:absolute; inset:16px; border:1px solid rgba(27,22,66,.1);
  pointer-events:none;
}

@media (max-width:720px){
  .outro__qr{flex-direction:row; align-items:center; gap:16px; padding:14px 16px; margin-top:34px}
  .outro__qr img{width:84px; height:84px}
  .outro__qr .qr__url{font-size:16px}
  .outro__qr .qr__note{margin-top:6px}
}

/* the hero print is now a landscape illustration, not a letterpress card */
.hero__card{
  display:block; padding:clamp(10px,1.1vw,15px);
  aspect-ratio:auto; grid-template-rows:none;
}
.hero__card img{width:100%; height:auto; display:block}
.hero__card::after{display:none}
.hero__card-sign,.hero__card-meta{display:none}

/* no sub-line any more: let the name breathe and the meta sit closer */
.hero__meta{margin-top:clamp(28px,3.4vw,44px)}
@media (max-width:1080px){
  .hero__print{width:min(84vw,460px)}
}