@font-face{font-family:'Fraunces';font-style:normal;font-weight:100 900;font-display:block;src:url(../assets/fonts/fraunces.woff2) format('woff2')}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:100 900;font-display:block;src:url(../assets/fonts/fraunces-italic.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:block;src:url(../assets/fonts/inter.woff2) format('woff2')}
:root{--bg:#141016;--ink:#f6efe6;--ember:#f0b27a}
*{box-sizing:border-box}
html{font-size:min(calc(100vw / 120), calc(100vh / 67.5));background:var(--bg)}
html.v{font-size:min(calc(100vw / 67.5), calc(100vh / 120))}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--ink)}
body{font:400 1.2rem/1.4 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
body.idle,body.idle *{cursor:none!important}
::-webkit-scrollbar{display:none}
button{font:inherit;color:inherit}

/* the 16:9 (or 9:16) design frame, centred; the sky runs full-bleed behind it */
#frame{position:absolute;left:50%;top:50%;width:120rem;height:67.5rem;transform:translate(-50%,-50%)}
html.v #frame{width:67.5rem;height:120rem}
#scene{position:fixed;left:0;top:0;width:100vw;display:block}
#scene-fade{position:absolute;left:-50vw;right:-50vw;top:0;height:30rem;pointer-events:none;
  background:linear-gradient(to bottom,rgba(20,16,22,0) 0,rgba(20,16,22,0) 78%,var(--bg) 100%)}
html.v #scene-fade{height:41rem}

#content{position:absolute;left:9rem;right:9rem;top:28rem;bottom:3.2rem;display:grid;grid-template-columns:17rem 1fr;column-gap:5.5rem}
#side{display:flex;flex-direction:column;align-items:flex-start}
#cover{width:16.5rem;height:auto;display:block;border-radius:.25rem;box-shadow:0 2rem 4rem -1rem rgba(0,0,0,.85)}
#byline{margin:1.5rem 0 0;font:italic 300 1.5rem/1.2 Fraunces,Georgia,serif;color:rgba(246,239,230,.78);letter-spacing:.01em}
#main{min-width:0;display:flex;flex-direction:column}
#label{margin:0 0 1.1rem;font:600 1.05rem/1 Inter;letter-spacing:.27em;text-transform:uppercase;color:var(--ember)}
#heading{margin:0 0 1.2rem;font:400 5.4rem/1 Fraunces,Georgia,serif;letter-spacing:-.02em;font-variation-settings:'opsz' 48}
#heading .w{color:rgba(246,239,230,.38)}
#win{position:relative;flex:1;min-height:0;overflow:hidden;
  -webkit-mask:linear-gradient(transparent 0,#000 11%,#000 80%,transparent 100%);mask:linear-gradient(transparent 0,#000 11%,#000 80%,transparent 100%)}
#text{position:absolute;left:0;top:0;width:100%;max-width:70rem;will-change:transform;
  --fs:2.8rem;font:400 var(--fs)/1.42 Fraunces,Georgia,serif}
#text p,#text h3{margin:0 0 .85em}
#text p{color:rgba(246,239,230,.28)}
#text p.lead{font-style:italic;font-weight:300}
#text p.verse{font-style:italic;font-weight:300;padding-left:1.4em}
#text h3{font:italic 300 .8em/1.25 Fraunces,Georgia,serif;color:rgba(240,178,122,.5);margin:1.2em 0 .7em}
#text h3.label{font:600 .36em/1.2 Inter;letter-spacing:.32em;text-transform:uppercase;margin:1.8em 0 1em}
.w{border-radius:.2rem}
.w{transition:color .5s,text-shadow .6s,background .4s,filter .4s}
.w.said{color:rgba(246,239,230,.92)}
#text h3 .w.said{color:var(--ember)}
.w.now{color:#fffef6;background:radial-gradient(closest-side,rgba(255,214,160,.32),transparent);
  text-shadow:0 0 .3rem rgba(255,236,200,.95),0 0 .85rem rgba(255,196,120,.85),0 0 1.7rem rgba(240,178,122,.5);filter:brightness(1.12);transition:none}
#text h3 .w.now{color:#fff1da}
#heading .w.said{color:var(--ink)}
#heading .w.now{color:#fffef6}

/* vertical 1080 x 1920 */
html.v #content{left:5rem;right:5rem;top:41rem;bottom:4rem;grid-template-columns:11.5rem 1fr;grid-template-rows:auto 1fr;column-gap:3.2rem}
html.v #side,html.v #main{display:contents}
html.v #cover{grid-column:1;grid-row:1;width:11.5rem}
html.v #byline{display:none}
html.v #hd{grid-column:2;grid-row:1;align-self:end}
html.v #label{margin:0 0 .5rem;font-size:.95rem;letter-spacing:.2em;line-height:1.5}
html.v #heading{margin:0;font-size:5.4rem}
html.v #win{grid-column:1 / -1;grid-row:2;margin-top:3rem}
html.v #text{max-width:100%;--fs:3.1rem}

/* progress hairline (?progress=1) */
#prog{position:fixed;left:0;right:0;bottom:0;height:.25rem;background:rgba(246,239,230,.08);display:none}
#prog i{display:block;height:100%;width:100%;background:var(--ember);transform:scaleX(0);transform-origin:left}
body.showprog #prog{display:block}

/* fades */
#veil{position:fixed;inset:0;background:#000;opacity:1;pointer-events:none;z-index:8}
#veil.fade2{transition:opacity 2s ease-in-out}
#veil.fast{transition:opacity .5s ease}

/* end card */
#endcard{position:fixed;inset:0;z-index:6;opacity:0;pointer-events:none;transition:opacity 2.6s ease-in-out;
  background:radial-gradient(120% 90% at 50% 40%,#2a1d2c 0,#171119 55%,#0e0a10 100%);display:grid;place-items:center}
#endcard.on{opacity:1}
.end-in{display:flex;align-items:center;gap:6rem}
html.v .end-in{flex-direction:column;gap:4rem;text-align:center}
.end-in img{width:20rem;height:auto;border-radius:.3rem;box-shadow:0 2.4rem 5rem -1rem rgba(0,0,0,.9)}
html.v .end-in img{width:22rem}
.end-label{margin:0 0 1.4rem;font:600 1.1rem/1 Inter;letter-spacing:.3em;text-transform:uppercase;color:var(--ember)}
.end-copy h2{margin:0 0 .5rem;font:400 6.4rem/1.02 Fraunces,Georgia,serif;letter-spacing:-.02em;font-variation-settings:'opsz' 48}
html.v .end-copy h2{font-size:5.6rem}
.end-sub{margin:0 0 2.2rem;font:italic 300 2.1rem/1.3 Fraunces,Georgia,serif;color:rgba(246,239,230,.75)}
.end-by{margin:0 0 3rem;font:400 1.5rem/1 Fraunces,Georgia,serif;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.end-avail{margin:0;padding-top:1.6rem;border-top:1px solid rgba(240,178,122,.45);display:inline-block;font:400 1.6rem/1.4 Inter;letter-spacing:.04em;color:rgba(246,239,230,.88)}

/* start screen */
#start{position:fixed;inset:0;z-index:9;border:0;margin:0;padding:0;cursor:pointer;display:grid;place-items:center;text-align:center;
  background:radial-gradient(110% 90% at 50% 38%,#2b1f2d 0,#161017 60%,#0d0a0f 100%);outline:none}
#start.gone{display:none}
.st-in{display:flex;flex-direction:column;align-items:center}
.st-in img{width:13rem;height:auto;border-radius:.25rem;box-shadow:0 2rem 4rem -1rem rgba(0,0,0,.85);margin-bottom:3rem}
.st-label{font:600 1.05rem/1 Inter;letter-spacing:.27em;text-transform:uppercase;color:var(--ember);margin-bottom:1rem}
.st-title{font:400 6.4rem/1 Fraunces,Georgia,serif;font-variation-settings:'opsz' 48;letter-spacing:-.02em;margin-bottom:3rem}
.st-ring{width:7rem;height:7rem;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#ffd9a6,#e08a4a);color:#1d0f05;box-shadow:0 1.4rem 3.2rem -.8rem rgba(224,138,74,.55)}
.st-ring svg{width:2.8rem;height:2.8rem;fill:currentColor;margin-left:.3rem}
.st-cta{margin-top:1.6rem;font:500 1.35rem/1 Inter;letter-spacing:.2em;text-transform:uppercase;color:rgba(246,239,230,.9)}
.st-keys{margin-top:2.6rem;font:400 1rem/1 Inter;letter-spacing:.08em;color:rgba(246,239,230,.4)}

/* music and effects toggle: small, quiet, and gone whenever the cursor is */
#music{position:fixed;right:1.4rem;bottom:1.4rem;z-index:11;width:2.8rem;height:2.8rem;padding:.6rem;border-radius:50%;border:1px solid rgba(246,239,230,.22);background:rgba(20,16,22,.45);color:rgba(246,239,230,.55);opacity:.42;cursor:pointer;transition:opacity .6s,color .3s,border-color .3s}
#music svg{width:100%;height:100%;display:block}
#music:hover{opacity:.9}
#music.on{color:var(--ember);border-color:rgba(240,178,122,.6)}
body.idle #music{opacity:0;pointer-events:none}

/* ---- public page: chrome, links, and phone layout ---- */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
body.idle,body.idle *{cursor:auto!important}

#home{position:fixed;top:max(12px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));z-index:12;
  display:flex;align-items:center;gap:8px;text-decoration:none;color:rgba(246,239,230,.82);
  font:500 13px/1 Inter,system-ui,sans-serif;letter-spacing:.02em;
  padding:6px 12px 6px 6px;border-radius:999px;background:rgba(20,16,22,.42);
  border:1px solid rgba(246,239,230,.14);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
#home img{height:28px;width:auto;display:block}
#home:hover,#home:focus-visible{color:#fff;border-color:rgba(246,239,230,.35);outline:none}
@media (max-width:420px){#home span{display:none}#home{padding:6px}}

#prog{display:block;height:3px;bottom:0;background:rgba(246,239,230,.1);z-index:10}
#prog i{background:var(--ember)}

#endcard.on{pointer-events:auto}
.end-links{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:.55rem;text-align:left}
.end-links li{display:grid;grid-template-columns:9rem 1fr 1fr;gap:.4rem .8rem;align-items:center;
  padding:.15rem 0;border-top:1px solid rgba(246,239,230,.08)}
.end-links li:first-child{border-top:0}
.end-links span{font:600 .85rem/1 Inter;letter-spacing:.14em;text-transform:uppercase;color:rgba(246,239,230,.5)}
.end-links a{font:500 1.15rem/1.2 Inter;color:var(--ink);text-decoration:none;border-bottom:1px solid rgba(240,178,122,.45);padding-bottom:.1rem;justify-self:start}
.end-links a:hover,.end-links a:focus-visible{color:#fff;border-color:var(--ember);outline:none}
.end-avail{margin:0;padding-top:1.6rem;border-top:1px solid rgba(240,178,122,.45);display:inline-block;font:400 1.4rem/1.4 Inter;letter-spacing:.06em;color:rgba(246,239,230,.88)}
#again{margin-top:2rem;display:inline-block;border:1px solid rgba(246,239,230,.28);background:transparent;color:rgba(246,239,230,.88);
  font:500 1.05rem/1 Inter;letter-spacing:.14em;text-transform:uppercase;padding:.7rem 1.2rem;border-radius:999px;cursor:pointer}
#again:hover,#again:focus-visible{border-color:var(--ember);color:#fff;outline:none}

#controls{position:fixed;left:50%;bottom:max(18px,calc(env(safe-area-inset-bottom) + 10px));transform:translateX(-50%);
  z-index:11;display:flex;align-items:center;gap:10px;transition:opacity .5s}
body.phase-idle #playpause{visibility:hidden;pointer-events:none;width:0;height:0;padding:0;border:0;margin:0}
body.phase-ended #controls,body.phase-ending #controls,body.phase-ended #prog,body.phase-ending #prog{opacity:0;visibility:hidden;pointer-events:none}

#playpause,#music{position:static;width:48px;height:48px;padding:12px;border-radius:50%;
  border:1px solid rgba(246,239,230,.22);background:rgba(20,16,22,.5);color:rgba(246,239,230,.8);
  opacity:1;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:opacity .3s,color .3s,border-color .3s,background .3s}
#playpause svg,#music svg{width:100%;height:100%;display:block}
#playpause .i-play,body.phase-paused #playpause .i-pause,body.phase-idle #playpause .i-pause{display:none}
body.phase-paused #playpause .i-play,body.phase-playing #playpause .i-pause,body.phase-fadein #playpause .i-pause{display:block}
#playpause .i-play,#playpause .i-pause{fill:currentColor}
#music:hover,#playpause:hover,#music:focus-visible,#playpause:focus-visible{opacity:1;color:#fff;outline:none}
#music.on{color:var(--ember);border-color:rgba(240,178,122,.6)}
body.idle #music{opacity:1;pointer-events:auto}

#paused-flag{position:fixed;left:50%;top:46%;transform:translate(-50%,-50%);z-index:7;
  margin:0;font:500 13px/1 Inter,system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(246,239,230,.88);background:rgba(20,16,22,.45);border:1px solid rgba(246,239,230,.16);
  padding:8px 14px;border-radius:999px;pointer-events:none;opacity:0;transition:opacity .3s}
body.phase-paused #paused-flag{opacity:1}

/* phone and small-landscape: readable type, tappable controls */
html.phone{font-size:16px}
html.phone,html.phone body{height:100%;height:100dvh}
html.phone #frame{position:absolute;inset:0;width:auto;height:auto;transform:none}
html.phone #content{left:1.15rem;right:1.15rem;top:32dvh;bottom:5.2rem;display:grid;
  grid-template-columns:5.6rem 1fr;grid-template-rows:auto 1fr;column-gap:1rem}
html.phone #side,html.phone #main{display:contents}
html.phone #cover{grid-column:1;grid-row:1;width:5.6rem;border-radius:.2rem;box-shadow:0 1rem 2rem -.4rem rgba(0,0,0,.8)}
html.phone #byline{display:none}
html.phone #hd{grid-column:2;grid-row:1;align-self:end}
html.phone #label{margin:0 0 .35rem;font-size:.62rem;letter-spacing:.16em;line-height:1.35}
html.phone #heading{margin:0;font-size:clamp(1.6rem,7vw,2.15rem);line-height:1.05}
html.phone #win{grid-column:1 / -1;grid-row:2;margin-top:1.1rem}
html.phone #text{max-width:100%;--fs:1.28rem}
html.phone #scene-fade{left:0;right:0;height:32dvh}

html.phone .st-in img{width:7.5rem;margin-bottom:1.3rem}
html.phone .st-label{font-size:.62rem;letter-spacing:.12em;margin-bottom:.5rem;max-width:18rem;line-height:1.5;padding:0 .5rem;white-space:normal}
html.phone .st-title{font-size:2.5rem;margin-bottom:1.5rem}
html.phone .st-ring{width:4.6rem;height:4.6rem}
html.phone .st-ring svg{width:1.85rem;height:1.85rem}
html.phone .st-cta{margin-top:1rem;font-size:.8rem}
html.phone .st-keys{display:none}

html.phone .end-in{flex-direction:column;gap:1rem;text-align:center;padding:4.6rem 1.15rem 1.4rem;max-height:100%;overflow:auto;width:100%}
html.phone .end-in img{width:7.2rem}
html.phone .end-label{font-size:.68rem;margin-bottom:.45rem}
html.phone .end-copy h2{font-size:1.85rem}
html.phone .end-sub{font-size:1.05rem;margin-bottom:.7rem}
html.phone .end-by{font-size:.75rem;letter-spacing:.12em;margin-bottom:.8rem}
html.phone .end-avail{font-size:.85rem;padding-top:.8rem}
html.phone .end-links{width:min(22rem,100%);margin:.8rem auto 0}
html.phone .end-links li{grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:.15rem .7rem;padding:.45rem 0;text-align:left}
html.phone .end-links span{grid-column:1 / -1;font-size:.68rem}
html.phone .end-links a{font-size:.95rem}
html.phone #again{margin-top:1.2rem;font-size:.8rem;padding:.65rem 1.1rem}

html.phone:not(.v) #content{top:28dvh;bottom:5rem;grid-template-columns:4.8rem 1fr}
html.phone:not(.v) #cover{width:4.8rem}
html.phone:not(.v) #heading{font-size:1.55rem}
html.phone:not(.v) #text{--fs:1.15rem}
html.phone:not(.v) #scene-fade{height:28dvh}
html.phone:not(.v) .end-in{flex-direction:row;align-items:center;gap:1.4rem;text-align:left;padding:3.5rem 1.4rem 1rem}
html.phone:not(.v) .end-in img{width:6.2rem}
html.phone:not(.v) .end-copy h2{font-size:1.6rem}
html.phone:not(.v) .end-links{margin-left:0}

@media (hover:none){.st-keys{display:none}}