:root{color-scheme:only light}
/* ==========================================================================
   Henry & Jolie — the invitation as a bound book
   Pages are single sheets bound at the left. Turning a sheet rotates it
   about the spine; its reverse is blank stock with the crest showing
   faintly through, as letterpress does.
   ========================================================================== */
:root{
  --paper:#F8F2E7;
  --paper-2:#F0E8D9;
  --paper-3:#E4D9C5;
  --ground:#DCCDB6;
  --ink:#3A3128;
  --ink-soft:#6E6053;
  --ink-faint:#9A8C7B;
  --gold:#A9855A;
  --gold-soft:#C4A87E;
  --rule:rgba(169,133,90,.34);
  --turn:1.9s;
  --turn-ease:cubic-bezier(.42,.03,.2,1);
  --font-script:'Pinyon Script',cursive;
  --font-display:'Cormorant Garamond',Georgia,serif;
  --font-body:'EB Garamond',Georgia,serif;
  --font-ui:'Be Vietnam Pro','PingFang SC','Noto Sans SC',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; overflow:hidden;
  background:
    radial-gradient(128% 84% at 50% 26%, #F0E6D6 0%, #E2D3BC 52%, #C9B79C 100%);
  color:var(--ink); font-family:var(--font-body);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{display:block; max-width:100%; height:auto}
button{font-family:inherit; color:inherit}

/* ---------- the book ---------- */
.book{position:fixed; inset:0; display:grid; place-items:center; overflow:hidden}
.book__stage{
  position:relative;
  width:100vw;
  height:100svh;
  perspective:1900px; perspective-origin:0% 50%;
  transform:scale(.965); opacity:0;
  transition:transform 1.5s cubic-bezier(.19,.66,.3,1), opacity 1.1s ease;
}
.book.is-ready .book__stage{transform:none; opacity:1}

/* the block of sheets still to come, seen at the outer edge */
.book__block{position:absolute; inset:0; pointer-events:none}
.book__block i{
  position:absolute; top:6px; bottom:6px; right:0;
  width:14px; border-radius:0 3px 3px 0;
  background:linear-gradient(90deg, var(--paper-2), var(--paper-3));
  box-shadow:1px 0 0 rgba(120,98,72,.16);
  transition:opacity .5s ease;
}
.book__block i:nth-child(1){transform:translate(5px,3px)}
.book__block i:nth-child(2){transform:translate(3px,2px)}
.book__block i:nth-child(3){transform:translate(1.5px,1px)}
.book.is-last .book__block{opacity:0}

/* ---------- a sheet ---------- */
.leaf{
  position:absolute; inset:0;
  transform-origin:0% 50%; transform-style:preserve-3d;
  transform:rotateY(0deg);
  transition:transform var(--turn);
}
.leaf.is-turned{transform:rotateY(-178deg)}
.leaf.is-turning{animation:leaf-turn var(--turn) both}
.leaf.is-turning-back{animation:leaf-turn-back var(--turn) both}
@keyframes leaf-turn{
  0%  {transform:rotateY(0) translateZ(0) rotateZ(0) skewY(0);
       animation-timing-function:cubic-bezier(.36,0,.68,.14)}
  12% {transform:rotateY(-6deg) translateZ(14px) rotateZ(.5deg) skewY(-.55deg);
       animation-timing-function:cubic-bezier(.18,.4,.42,.94)}
  34% {transform:rotateY(-34deg) translateZ(34px) rotateZ(1.05deg) skewY(-1.1deg);
       animation-timing-function:cubic-bezier(.42,.06,.5,.94)}
  54% {transform:rotateY(-62deg) translateZ(46px) rotateZ(1.4deg) skewY(-1.35deg);
       animation-timing-function:cubic-bezier(.4,.04,.56,.9)}
  72% {transform:rotateY(-93deg) translateZ(48px) rotateZ(1.3deg) skewY(-1.2deg);
       animation-timing-function:cubic-bezier(.5,0,.66,.4)}
  86% {transform:rotateY(-136deg) translateZ(30px) rotateZ(.8deg) skewY(-.7deg);
       animation-timing-function:cubic-bezier(.26,.54,.3,1)}
  96% {transform:rotateY(-181deg) translateZ(4px) rotateZ(0) skewY(0);
       animation-timing-function:cubic-bezier(.4,0,.3,1)}
  100%{transform:rotateY(-178deg) translateZ(0) rotateZ(0) skewY(0)}
}
@keyframes leaf-turn-back{
  0%  {transform:rotateY(-178deg) translateZ(0) rotateZ(0) skewY(0);
       animation-timing-function:cubic-bezier(.34,0,.66,.16)}
  10% {transform:rotateY(-172deg) translateZ(12px) rotateZ(-.45deg) skewY(.5deg);
       animation-timing-function:cubic-bezier(.2,.36,.4,.96)}
  32% {transform:rotateY(-132deg) translateZ(38px) rotateZ(-1.15deg) skewY(1.15deg);
       animation-timing-function:cubic-bezier(.52,0,.66,.36)}
  52% {transform:rotateY(-88deg) translateZ(46px) rotateZ(-1.35deg) skewY(1.3deg);
       animation-timing-function:cubic-bezier(.38,0,.52,.46)}
  74% {transform:rotateY(-40deg) translateZ(32px) rotateZ(-.85deg) skewY(.8deg);
       animation-timing-function:cubic-bezier(.26,.52,.3,1)}
  91% {transform:rotateY(-5deg) translateZ(9px) rotateZ(-.22deg) skewY(.2deg);
       animation-timing-function:cubic-bezier(.3,.62,.4,1)}
  96% {transform:rotateY(2.4deg) translateZ(2px) rotateZ(0) skewY(0);
       animation-timing-function:cubic-bezier(.4,0,.3,1)}
  100%{transform:rotateY(0) translateZ(0) rotateZ(0) skewY(0)}
}
/* the sheet underneath springs flat as the one above leaves it */
.leaf.is-arriving{animation:leaf-arrive var(--turn) both}
@keyframes leaf-arrive{
  0%  {transform:rotateY(4.2deg) translateZ(-11px)}
  40% {transform:rotateY(3.1deg) translateZ(-8px);
       animation-timing-function:cubic-bezier(.24,.6,.3,1)}
  78% {transform:rotateY(.7deg) translateZ(-1px)}
  100%{transform:rotateY(0) translateZ(0)}
}
/* the page underneath is uncovered by light, so its type comes up with it */
.leaf.is-arriving .page{animation:page-wake var(--turn) both}
@keyframes page-wake{
  0%,52%{opacity:.6; transform:translateY(8px) scale(.993)}
  100%  {opacity:1; transform:none}
}
.leaf[hidden]{display:none}

.leaf__face{
  position:absolute; inset:0; overflow:hidden;
  backface-visibility:hidden;
  border-radius:0;
  background:var(--paper) url("/assets/book/paper.webp") repeat;
  background-blend-mode:multiply; background-size:220px;
  box-shadow:
    0 26px 54px rgba(74,55,38,.30),
    inset 22px 0 34px -30px rgba(90,70,48,.9),
    inset 0 -34px 28px -32px rgba(90,70,48,.55);   /* foot shading; doubles as a scroll fade */
}
.leaf__face--back{
  transform:rotateY(180deg);
  border-radius:0;
  box-shadow:
    0 26px 54px rgba(74,55,38,.22),
    inset -22px 0 34px -30px rgba(90,70,48,.75);
}
/* the crest, showing through the reverse of the sheet */
.leaf__ghost{
  position:absolute; left:50%; top:46%; width:56%;
  transform:translate(-50%,-50%) scaleX(-1);
  opacity:.085; filter:grayscale(1)
}

/* light on the turning sheet — a band that travels across the paper rather
   than a flat wash fading in, which is what reads as a curved surface */
.leaf__gloss{
  position:absolute; top:0; bottom:0; left:-62%; width:224%;
  pointer-events:none; opacity:0; will-change:transform,opacity;
}
.leaf__face--front .leaf__gloss{
  background:linear-gradient(268deg,
    rgba(38,27,16,.52) 0%, rgba(44,32,19,.30) 14%, rgba(52,38,23,.10) 30%,
    rgba(255,250,238,.16) 44%, rgba(255,250,238,.30) 50%,
    rgba(255,250,238,.06) 58%, transparent 74%);
}
.leaf__face--back .leaf__gloss{
  background:linear-gradient(92deg,
    rgba(255,252,242,.78) 0%, rgba(255,252,242,.40) 15%, rgba(255,250,236,.10) 30%,
    rgba(60,44,28,.10) 48%, rgba(60,44,28,.26) 62%, rgba(60,44,28,.42) 86%, rgba(60,44,28,.46) 100%);
}
.leaf.is-turning .leaf__face--front .leaf__gloss{animation:gloss-front var(--turn) both}
.leaf.is-turning .leaf__face--back  .leaf__gloss{animation:gloss-back  var(--turn) both}
.leaf.is-turning-back .leaf__face--front .leaf__gloss{animation:gloss-front var(--turn) reverse both}
.leaf.is-turning-back .leaf__face--back  .leaf__gloss{animation:gloss-back  var(--turn) reverse both}
@keyframes gloss-front{
  0%  {opacity:0;   transform:translateX(-36%)}
  14% {opacity:.42; transform:translateX(-27%)}
  40% {opacity:.86; transform:translateX(-12%)}
  72% {opacity:1;   transform:translateX(12%)}
  100%{opacity:1;   transform:translateX(32%)}
}
@keyframes gloss-back{
  0%  {opacity:1;   transform:translateX(30%)}
  46% {opacity:1;   transform:translateX(6%)}
  76% {opacity:.72; transform:translateX(-14%)}
  100%{opacity:0;   transform:translateX(-30%)}
}

/* the shadow a turning sheet throws across the sheet beneath it: narrow while
   the sheet is still flat, widest as it stands up, gone as it lies down */
.book__cast{
  position:absolute; inset:0; z-index:60; pointer-events:none; opacity:0;
  border-radius:0; transform-origin:0% 50%;
  background:linear-gradient(90deg,
    rgba(48,34,20,.56) 0%, rgba(52,38,23,.30) 20%, rgba(58,42,26,.12) 42%, transparent 70%);
}
.book.is-turning .book__cast{animation:cast var(--turn) both}
@keyframes cast{
  0%  {opacity:.70; transform:scaleX(.40)}
  26% {opacity:.94; transform:scaleX(.72)}
  56% {opacity:.90; transform:scaleX(1.02)}
  74% {opacity:.66; transform:scaleX(1.26)}
  100%{opacity:0;   transform:scaleX(1.66)}
}

/* the gutter */
.book__spine{
  position:absolute; left:0; top:0; bottom:0; width:34px; z-index:70;
  pointer-events:none; border-radius:0;
  background:linear-gradient(90deg,
    rgba(74,55,36,.30) 0%, rgba(74,55,36,.13) 34%, rgba(74,55,36,.03) 72%, transparent 100%);
}

/* ---------- page furniture ---------- */
.page{
  position:absolute; inset:0;
  padding:clamp(58px,10svh,104px) clamp(30px,7.5vw,64px) clamp(66px,11svh,116px) clamp(44px,12vw,86px);
  display:flex; flex-direction:column; overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch; text-align:center;
}
.page::-webkit-scrollbar{width:0}
.page__frame{
  position:absolute; inset:clamp(22px,3.4svh,40px) clamp(18px,4.4vw,34px)
                     clamp(26px,3.8svh,44px) clamp(32px,8.5vw,58px); pointer-events:none;
  border:1px solid var(--rule); border-radius:2px;
}
.page__corner{position:absolute; width:26px; height:26px; color:var(--gold); opacity:.6}
.page__corner--tl{left:-1px; top:-1px}
.page__corner--tr{right:-1px; top:-1px; transform:scaleX(-1)}
.page__corner--bl{left:-1px; bottom:-1px; transform:scaleY(-1)}
.page__corner--br{right:-1px; bottom:-1px; transform:scale(-1)}
.page__num{
  position:absolute; left:0; right:0; bottom:22px; margin:0;
  font-family:var(--font-ui); font-weight:300; font-size:9px; letter-spacing:.34em;
  color:var(--ink-faint); text-transform:uppercase;
}
.page__body{margin:auto 0; width:100%}

.eyebrow{
  font-family:var(--font-ui); font-weight:300; font-size:10px; letter-spacing:.36em;
  text-transform:uppercase; color:var(--gold); margin:0 0 16px; padding-left:.36em;
}
.script{font-family:var(--font-script); font-weight:400; line-height:1.02; margin:0; color:var(--ink)}
.script .amp{color:var(--gold); font-size:.62em}
.serif{font-family:var(--font-display); margin:0; color:var(--ink-soft); line-height:1.5}
.rule{display:flex; align-items:center; gap:10px; margin:22px auto; width:62%}
.rule::before,.rule::after{content:""; flex:1; height:1px; background:var(--rule)}
.rule i{width:5px; height:5px; rotate:45deg; background:var(--gold-soft)}
.crest{width:min(62%,220px); margin:0 auto; opacity:.92}

/* ---------- cover ---------- */
.page--cover{padding:0}
.page--cover .page__body{position:relative; z-index:1; padding:0 30px}
.cover__crest{width:min(68%,250px); margin:0 auto 6px; opacity:.95}
.cover__names{font-size:clamp(48px,15vw,74px); margin:2px 0 0}
.cover__date{
  font-family:var(--font-ui); font-weight:300; font-size:11px; letter-spacing:.42em;
  color:var(--gold); margin:24px 0 0; padding-left:.42em;
}
.cover__seal{
  position:absolute; left:50%; bottom:64px; width:96px; transform:translateX(-50%);
  border:0; background:none; padding:0; cursor:pointer; border-radius:50%;
  animation:seal-breathe 4.4s ease-in-out 1.4s infinite;
}
.cover__seal:focus-visible{outline:2px solid var(--gold); outline-offset:12px}
@keyframes seal-breathe{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.035)}}

/* ---------- typographic pages ---------- */
.dear{font-family:var(--font-display); font-style:italic; font-size:23px; color:var(--gold); margin:0 0 4px}
.dear:empty{display:none}
.quote{font-family:var(--font-display); font-style:italic; font-size:clamp(19px,5.4vw,25px); line-height:1.5; color:var(--ink); margin:0}
.names{font-size:clamp(40px,12vw,60px)}
.parents{display:flex; gap:18px; justify-content:center; margin:26px 0 0}
.parents div{flex:1}
.parents .lbl{font-family:var(--font-ui); font-weight:300; font-size:9px; letter-spacing:.3em;
  text-transform:uppercase; color:var(--ink-faint); margin:0 0 6px}
.parents .who{font-family:var(--font-display); font-size:21px; margin:0}

/* countdown */
.count{display:flex; justify-content:center; gap:6px; margin:26px 0 0}
.count div{flex:1; max-width:76px}
.count b{display:block; font-family:var(--font-display); font-weight:400;
  font-size:clamp(28px,8vw,38px); line-height:1; color:var(--ink)}
.count span{display:block; margin-top:7px; font-family:var(--font-ui); font-weight:300;
  font-size:8px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-faint)}

/* moments */
.frames{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:20px 0 0}
.frames figure{margin:0; overflow:hidden; border-radius:2px; background:var(--paper-3)}
.frames figure:first-child{grid-column:1 / -1}
.frames img{width:100%; height:100%; object-fit:cover; aspect-ratio:4/3}
.frames figure:first-child img{aspect-ratio:3/2}

/* details */
.where{font-family:var(--font-script); font-size:clamp(38px,11vw,54px); margin:0; color:var(--ink)}
.sched{display:flex; justify-content:center; gap:26px; margin:24px 0 0}
.sched div{min-width:88px}
.sched .lbl{font-family:var(--font-ui); font-weight:300; font-size:9px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--ink-faint); margin:0 0 6px}
.sched .t{font-family:var(--font-display); font-size:24px; margin:0}
.acts{display:flex; gap:9px; justify-content:center; margin:26px 0 0; flex-wrap:wrap}
.act{
  border:1px solid var(--rule); background:none; border-radius:999px; padding:11px 18px;
  cursor:pointer; font-family:var(--font-ui); font-weight:300; font-size:10px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--gold); transition:.28s;
}
.act:hover{background:var(--gold); border-color:var(--gold); color:var(--paper)}

/* dress code */
.swatches{display:flex; justify-content:center; gap:12px; margin:24px 0 18px}
.swatches div{text-align:center}
.swatches i{display:block; width:38px; height:38px; border-radius:50%; margin:0 auto 8px;
  box-shadow:inset 0 0 0 1px rgba(90,70,48,.18)}
.swatches span{font-family:var(--font-ui); font-weight:300; font-size:8px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-faint)}

/* ---------- form ---------- */
.field{text-align:left; margin:0 0 15px}
.field > label{display:block; font-family:var(--font-ui); font-weight:300; font-size:10px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 7px}
.field input[type=text],.field input[type=tel],.field input[type=number],.field textarea{
  width:100%; border:0; border-bottom:1px solid var(--rule); background:transparent;
  padding:8px 2px; font-family:var(--font-display); font-size:17px; color:var(--ink);
}
.field input:focus,.field textarea:focus{outline:0; border-bottom-color:var(--gold)}
.field textarea{resize:none; min-height:62px}
.choice{display:flex; gap:7px}
.choice label{
  flex:1; text-align:center; border:1px solid var(--rule); border-radius:999px; padding:10px 4px;
  cursor:pointer; font-family:var(--font-ui); font-weight:300; font-size:10px; letter-spacing:.1em;
  color:var(--ink-soft); transition:.24s;
}
.choice input{position:absolute; opacity:0; width:0; height:0}
.choice input:checked + span,.choice label:has(input:checked){background:var(--gold); border-color:var(--gold); color:var(--paper)}
.check{display:flex; gap:9px; align-items:flex-start; text-align:left; font-family:var(--font-ui);
  font-weight:300; font-size:11px; color:var(--ink-soft); margin:4px 0 18px}
.submit{
  width:100%; border:1px solid var(--gold); background:var(--gold); color:var(--paper);
  border-radius:999px; padding:14px; cursor:pointer; font-family:var(--font-ui); font-weight:300;
  font-size:11px; letter-spacing:.24em; text-transform:uppercase; transition:.28s;
}
.submit:disabled{opacity:.5; cursor:default}
.err{display:block; font-family:var(--font-ui); font-size:10px; color:#A3502F; margin-top:5px; min-height:12px}

/* guestbook */
.wishes{text-align:left; margin:18px 0 0}
.wish{border-bottom:1px solid var(--rule); padding:13px 0}
.wish:last-child{border-bottom:0}
.wish b{display:block; font-family:var(--font-display); font-size:17px; font-weight:400; color:var(--ink)}
.wish p{margin:5px 0 0; font-family:var(--font-display); font-style:italic; font-size:15px; color:var(--ink-soft); line-height:1.45}
.wish time{font-family:var(--font-ui); font-weight:300; font-size:9px; letter-spacing:.14em; color:var(--ink-faint)}

/* ---------- chrome ---------- */
.book__lang{position:fixed; top:max(14px,env(safe-area-inset-top)); left:50%; z-index:90; transform:translateX(-50%)}
.lang{display:inline-flex; gap:2px; padding:3px; border:1px solid rgba(90,70,48,.24);
  border-radius:999px; background:rgba(255,252,246,.6); backdrop-filter:blur(6px)}
.lang__btn{border:0; background:none; cursor:pointer; width:34px; height:26px; border-radius:999px;
  font-family:var(--font-ui); font-weight:500; font-size:12px; color:var(--ink-soft); transition:.25s}
.lang__btn.is-active{background:var(--ink); color:var(--paper)}

.book__nav{
  position:fixed; left:0; right:0; bottom:max(16px,env(safe-area-inset-bottom)); z-index:90;
  display:flex; align-items:center; justify-content:center; gap:9px; pointer-events:none;
}
.book__dots{display:flex; gap:6px; pointer-events:auto}
.book__dots button{
  width:6px; height:6px; padding:0; border:0; border-radius:50%; cursor:pointer;
  background:rgba(90,70,48,.26); transition:.3s;
}
.book__dots button.is-on{background:var(--gold); transform:scale(1.5)}
.book__arrow{
  position:fixed; top:50%; z-index:90; width:44px; height:44px; margin-top:-22px;
  border:0; background:none; cursor:pointer; color:var(--ink-faint); opacity:.5; transition:opacity .3s;
}
.book__arrow:hover{opacity:1}
.book__arrow--prev{left:max(2px,env(safe-area-inset-left))}
.book__arrow--next{right:max(2px,env(safe-area-inset-right))}
.book__arrow[disabled]{opacity:0; pointer-events:none}
.book__hint{
  position:fixed; left:0; right:0; bottom:calc(max(16px,env(safe-area-inset-bottom)) + 26px);
  z-index:90; margin:0; text-align:center; font-family:var(--font-ui); font-weight:300;
  font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-faint);
  animation:hint 3.6s ease-in-out 1.6s infinite; transition:opacity .5s ease;
}
.book:not(.is-cover) .book__hint{opacity:0; animation:none}
@keyframes hint{0%,100%{opacity:.45}50%{opacity:1}}

@media (max-height:620px){
  .page{padding:38px 24px 46px 40px}
  .book__stage{height:min(90svh,760px)}
}

@media (prefers-reduced-motion:reduce){
  .leaf,.leaf.is-turning,.leaf.is-turning-back,.leaf.is-arriving{
    transition:opacity .3s ease !important; transform:none !important; animation:none !important}
  .leaf.is-turned{opacity:0; pointer-events:none}
  .leaf__gloss,.book__cast{animation:none !important; opacity:0 !important}
  .book__stage{transition:opacity .4s ease !important; transform:none !important}
  .cover__seal{animation:none}
  .book__hint{animation:none; opacity:.7}
}

.sr{position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0}
/* ---------- type ---------- */
@font-face{font-family:'Pinyon Script';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/pinyon-script-vietnamese-400-normal.woff2') format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;}
@font-face{font-family:'Pinyon Script';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/pinyon-script-latin-ext-400-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Pinyon Script';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/pinyon-script-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/cormorant-garamond-vietnamese-400-normal.woff2') format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/cormorant-garamond-latin-ext-400-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/cormorant-garamond-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url('/assets/fonts/cormorant-garamond-vietnamese-400-italic.woff2') format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url('/assets/fonts/cormorant-garamond-latin-ext-400-italic.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url('/assets/fonts/cormorant-garamond-latin-400-italic.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/cormorant-garamond-vietnamese-500-normal.woff2') format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/cormorant-garamond-latin-ext-500-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/cormorant-garamond-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/cormorant-garamond-vietnamese-600-normal.woff2') format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/cormorant-garamond-latin-ext-600-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/cormorant-garamond-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/eb-garamond-vietnamese-400-normal.woff2') format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/eb-garamond-latin-ext-400-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/eb-garamond-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400;font-display:swap;src:url('/assets/fonts/eb-garamond-vietnamese-400-italic.woff2') format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400;font-display:swap;src:url('/assets/fonts/eb-garamond-latin-ext-400-italic.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400;font-display:swap;src:url('/assets/fonts/eb-garamond-latin-400-italic.woff2') format('woff2');}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/eb-garamond-vietnamese-500-normal.woff2') format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/eb-garamond-latin-ext-500-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/eb-garamond-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:200;font-display:swap;src:url('/assets/fonts/be-vietnam-pro-vietnamese-200-normal.woff2') format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:200;font-display:swap;src:url('/assets/fonts/be-vietnam-pro-latin-ext-200-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:200;font-display:swap;src:url('/assets/fonts/be-vietnam-pro-latin-200-normal.woff2') format('woff2');}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:300;font-display:swap;src:url('/assets/fonts/be-vietnam-pro-vietnamese-300-normal.woff2') format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:300;font-display:swap;src:url('/assets/fonts/be-vietnam-pro-latin-ext-300-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:300;font-display:swap;src:url('/assets/fonts/be-vietnam-pro-latin-300-normal.woff2') format('woff2');}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/be-vietnam-pro-vietnamese-400-normal.woff2') format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/be-vietnam-pro-latin-ext-400-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/be-vietnam-pro-latin-400-normal.woff2') format('woff2');}

/* ---------- petals (styles borrowed from the scroll build) ---------- */
.petals{position:fixed; inset:0; z-index:80; pointer-events:none; overflow:hidden}
.petal{position:absolute; top:-6vh; will-change:transform, opacity; opacity:.85; animation:petal linear forwards}
.petal svg{width:100%; height:100%}
@keyframes petal{0%{transform:translateY(-10vh) translateX(0) rotate(0); opacity:0}
  10%{opacity:.8}
  100%{transform:translateY(112vh) translateX(var(--drift,0)) rotate(var(--spin,180deg)); opacity:0}}
@media (prefers-reduced-motion:reduce){.petals{display:none}}

/* ==========================================================================
   Full bleed: the screen is the sheet
   With no surface around the book, the spine and the fore-edge have to carry
   the reading on their own, so both are drawn heavier than they were when the
   book sat as an object on a table.
   ========================================================================== */

/* the gutter — paper curving down into the binding */
.leaf__face--front::after,
.leaf__face--back::after{
  content:""; position:absolute; top:0; bottom:0; left:0; width:17%;
  pointer-events:none; z-index:8;
  background:
    linear-gradient(90deg, rgba(74,55,34,.30) 0%, rgba(88,68,44,.17) 22%,
      rgba(104,82,56,.07) 52%, rgba(120,98,68,.015) 78%, transparent 100%),
    linear-gradient(90deg, rgba(255,250,238,0) 62%, rgba(255,250,238,.34) 86%, rgba(255,250,238,0) 100%);
}
.leaf__face--back::after{left:auto; right:0; transform:scaleX(-1)}

/* light pooling in the middle of the sheet, falling off at the edges */
.leaf__face--front::before,
.leaf__face--back::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:7;
  background:radial-gradient(112% 78% at 56% 42%,
    rgba(255,252,244,.42) 0%, rgba(255,252,244,0) 54%,
    rgba(108,86,58,.055) 84%, rgba(96,74,48,.13) 100%);
}

/* the sheets still to come, held against the outer edge of the screen */
.book__block i{box-shadow:-1px 0 2px rgba(96,76,50,.16)}

/* display type earns more room once the page is the whole screen */
.page__title{font-size:clamp(46px,15.5vw,104px)}
.page__script{font-size:clamp(34px,11vw,72px)}
.quote{font-size:clamp(19px,5.4vw,30px); line-height:1.56}
.page__eyebrow{letter-spacing:.4em}

/* on a wide screen the book becomes an object again */
@media (min-aspect-ratio:66/100){
  .book{background:radial-gradient(128% 92% at 50% 26%, #EEE4D4 0%, #E0D1B9 54%, #C4B197 100%)}
  .book__stage{
    width:min(63svh, calc(100vw - 104px));
    height:min(93svh, calc((100vw - 104px) * 1.5));
    filter:drop-shadow(0 26px 46px rgba(74,55,34,.34));
  }
  .leaf__face{border-radius:2px 8px 8px 2px}
  .leaf__face--back{border-radius:8px 2px 2px 8px}
  .leaf__face--front::before,.leaf__face--back::before{border-radius:inherit}
}

/* ---- photographic sheets: paper lighting does not belong on a photograph -- */
.leaf[data-page="plate"] .leaf__face--front::before{display:none}
.leaf[data-page="plate"] .leaf__face--front::after{
  width:13%;
  background:linear-gradient(90deg, rgba(10,8,6,.42) 0%, rgba(12,9,7,.20) 34%,
    rgba(14,11,8,.07) 66%, transparent 100%);
}
.leaf[data-page="plate"] .page__frame,
.leaf[data-page="plate"] .page__corner{display:none}
/* a band of shade so the line can be read off the picture */
.leaf[data-page="plate"] .quote{
  position:relative; z-index:3; color:#FCF7EC;
  text-shadow:0 1px 18px rgba(12,9,6,.72), 0 1px 3px rgba(12,9,6,.5);
}
.leaf[data-page="plate"] .quote::before{
  content:""; position:absolute; left:-8vw; right:-8vw; top:-1.1em; bottom:-1.2em;
  z-index:-1; pointer-events:none;
  background:radial-gradient(78% 130% at 50% 50%, rgba(10,8,6,.62) 0%, rgba(10,8,6,.34) 52%, rgba(10,8,6,0) 100%);
}
/* keep the line off their faces: it sits in the lower third of the plate */
.leaf[data-page="plate"] .quote{margin-top:auto; margin-bottom:clamp(38px,9svh,86px)}

/* ==========================================================================
   Stacking order, declared instead of assigned
   Setting z-index from script trips "style-src 'self'", which left every
   sheet on the same plane and the book looking blank once deployed.
   ========================================================================== */
.leaf:nth-of-type(1){z-index:21}
.leaf:nth-of-type(2){z-index:20}
.leaf:nth-of-type(3){z-index:19}
.leaf:nth-of-type(4){z-index:18}
.leaf:nth-of-type(5){z-index:17}
.leaf:nth-of-type(6){z-index:16}
.leaf:nth-of-type(7){z-index:15}
.leaf:nth-of-type(8){z-index:14}
.leaf:nth-of-type(9){z-index:13}
.leaf:nth-of-type(10){z-index:12}
.leaf:nth-of-type(11){z-index:11}

.leaf.is-turned:nth-of-type(1){z-index:10}
.leaf.is-turned:nth-of-type(2){z-index:11}
.leaf.is-turned:nth-of-type(3){z-index:12}
.leaf.is-turned:nth-of-type(4){z-index:13}
.leaf.is-turned:nth-of-type(5){z-index:14}
.leaf.is-turned:nth-of-type(6){z-index:15}
.leaf.is-turned:nth-of-type(7){z-index:16}
.leaf.is-turned:nth-of-type(8){z-index:17}
.leaf.is-turned:nth-of-type(9){z-index:18}
.leaf.is-turned:nth-of-type(10){z-index:19}
.leaf.is-turned:nth-of-type(11){z-index:20}

.book[data-at="0"] .book__cast{z-index:22}
.book[data-at="1"] .book__cast{z-index:21}
.book[data-at="2"] .book__cast{z-index:20}
.book[data-at="3"] .book__cast{z-index:19}
.book[data-at="4"] .book__cast{z-index:18}
.book[data-at="5"] .book__cast{z-index:17}
.book[data-at="6"] .book__cast{z-index:16}
.book[data-at="7"] .book__cast{z-index:15}
.book[data-at="8"] .book__cast{z-index:14}
.book[data-at="9"] .book__cast{z-index:13}
.book[data-at="10"] .book__cast{z-index:12}

/* the sheet in motion sits above the whole stack (last wins on ties) */
.book .leaf.is-turning,
.book .leaf.is-turning-back{z-index:26}