/* Night sky behind, one washi sheet in front. Shared by nightchorusgames.com and thewishingfrog.com; each site sets its colors on :root in its own theme block below.
   Home pages fit one screen on desktop; inner pages and phones scroll. */
@font-face{font-family:"Zen Maru Gothic";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/zen-maru-gothic-500-latin.woff2) format("woff2")}
@font-face{font-family:"Zen Maru Gothic";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/zen-maru-gothic-700-latin.woff2) format("woff2")}
@font-face{font-family:"Zen Maru Gothic";font-style:normal;font-weight:900;font-display:swap;src:url(fonts/zen-maru-gothic-900-latin.woff2) format("woff2")}
@font-face{font-family:"Yusei Magic";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/yusei-magic-400-latin.woff2) format("woff2")}
@font-face{font-family:"Kiwi Maru";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/kiwi-maru-500-latin.woff2) format("woff2")}
.ncg{--display:"Yusei Magic","Zen Maru Gothic",system-ui,sans-serif;--display-weight:400}
.twf{--display:"Kiwi Maru","Zen Maru Gothic",Georgia,serif;--display-weight:500}
.cut h2,.prose h1,.prose h2,.prose dt,.slip h2{font-family:var(--display);font-weight:var(--display-weight);font-synthesis:none;letter-spacing:.01em}

:root{
  --washi:#F4EBDA; --kraft:#E3D4B6; --moon:#F2E8D5;
  --sans:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Yu Gothic",system-ui,sans-serif;
  color-scheme:dark;
}
/* studio: violet dusk, plum logo */
.ncg{--accent:#541252;--accent-hover:#6A1A68;--ink:#2E1530;--ink-soft:#6A4A66;--sky-top:#1C1533;--sky-low:#6E5682;--bank:#1C1426;
  --sky:linear-gradient(180deg,#1C1533 0%,#261C40 26%,#352850 50%,#4B3866 72%,#6E5682 90%)}
/* game: deep night blue, the wordmark's plum */
.twf{--accent:#553447;--accent-hover:#6B4459;--ink:#2B2230;--ink-soft:#64546A;--sky-top:#0B1128;--sky-low:#3E4B7E;--bank:#0E1426;
  --sky:linear-gradient(180deg,#0B1128 0%,#111A38 30%,#1B2750 58%,#2C3A68 80%,#3E4B7E 96%)}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bank)}
body{margin:0;min-height:100vh;color:var(--ink);font:500 1.0625rem/1.75 var(--sans);background:transparent}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-underline-offset:.22em;text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--moon);outline-offset:3px;border-radius:6px}
.sheet :focus-visible{outline-color:var(--accent)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:10;background:var(--washi);color:var(--accent);padding:8px 14px;border-radius:8px;font-weight:700}
.skip:focus{top:12px}

/* ---------- the night (fixed, behind everything) ---------- */
.scene{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:var(--sky-top);background:var(--sky)}
.scene img,.scene i.star,.flies{position:absolute;will-change:transform}
.layer{left:0;bottom:-11.2vh;bottom:-11.2svh;width:100%;height:58vh;height:58svh;object-fit:cover;object-position:50% 100%}
.moon{width:clamp(64px,7vw,104px);left:77%;top:15%}
/* painted art layers */
.backdrop{left:0;top:0;width:100%;height:calc(100% + 6vh);object-fit:cover;object-position:50% 100%}
.sky-art{left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.stage{position:absolute;bottom:0;pointer-events:none}
/* below the painted ground, its own dark green carries on, so a drift or lift never shows sky under the hill */
.stage::after{content:"";position:absolute;left:0;right:0;top:calc(100% - 2px);height:60vh;background:#0E3D4C}
.stage img{position:absolute;left:0;bottom:0;width:100%;height:auto;max-width:none}
/* The hill and its foreground share one 64:27 canvas (--sh tall, 2.372 x --sh wide). The well's centre sits at 54%
   of it and is placed at --wx (the middle of the screen); at 46.2vw or more the stage is wide enough to centre the well
   without showing its own ends, until the screen is wider than 64:27. */
.twf{--sh:clamp(76vh,46.2vw,100vh);--wx:50vw}
.stage{--sw:calc(var(--sh)*2.372);height:var(--sh);width:var(--sw);
  left:clamp(calc(100vw - var(--sw)),calc(var(--wx) - var(--sw)*.54),0px)}
@media (min-aspect-ratio:64/27){
  .twf .scene::before{content:"";position:absolute;left:0;right:0;bottom:0;height:38vh;background:linear-gradient(rgba(14,61,76,0),#0E3D4C 45%)}
  .stage{left:calc(50% - var(--sw)/2);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
}
@media (max-width:899px),(max-height:619px){
  /* scrolling layouts: a smaller stage, the well and post centred, lifted so they stand clear of the full footer.
     Below the painted ground, its own dark green carries on to the bottom of the screen. */
  .twf{--sh:max(58vh,43vw)}
  .stage{--wx:calc(50vw - var(--sw)*.035);bottom:var(--lift,0px)}
  .twf.home .stage{--lift:clamp(60px,10vh,110px)}
  .lan{left:var(--xp,var(--x))}
  .lan.near{display:none}
}
@media (max-width:760px){.moon{width:46px;left:auto;right:30px;top:calc(env(safe-area-inset-top,0px) + 70px)}}
.cloud{opacity:.45}
.cloud.a{width:clamp(260px,34vw,520px);left:-4%;top:22%}
.cloud.b{width:clamp(180px,22vw,340px);right:-3%;top:34%}
.cloud.c{width:clamp(140px,16vw,240px);left:58%;top:8%;opacity:.3}
.star{position:absolute;width:var(--s,3px);height:var(--s,3px);border-radius:50%;background:var(--moon);opacity:var(--o,.6)}
.flies{inset:0}
.ff{position:absolute;width:var(--z);height:var(--z);border-radius:50%;background:#FFE08A;
  box-shadow:0 0 8px 3px rgba(246,199,90,.7),0 0 22px 9px rgba(246,199,90,.3);opacity:.2;
  animation:glow var(--d) ease-in-out var(--dl) infinite,drift calc(var(--d)*2.3) ease-in-out var(--dl) infinite alternate}
@keyframes glow{0%,100%{opacity:.2}35%{opacity:.25}50%{opacity:1}70%{opacity:.45}}
@keyframes drift{to{translate:14px -18px}}
/* game: sky lanterns rising slowly */
.lan{position:absolute;width:var(--w,16px);left:var(--x);bottom:-90px;opacity:0;filter:drop-shadow(0 0 10px rgba(255,200,120,.7));
  animation:rise var(--d,60s) linear var(--dl,0s) infinite}
@keyframes rise{0%{transform:translate(0,0);opacity:0}8%{opacity:.95}70%{opacity:.8}100%{transform:translate(var(--sway,20px),-112vh);opacity:0}}
@media (min-width:1600px){.fore.r{--rdy:100px}}
@media (prefers-reduced-motion:reduce){
  .ff{animation:none;opacity:.55}
  .lan{animation:none;opacity:.85;bottom:var(--rest,30%)}
  .scene img{will-change:auto}
}

/* ---------- top bar ---------- */
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;position:relative;z-index:3;
  padding-top:max(10px,env(safe-area-inset-top,0px));padding-bottom:6px;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(10px,env(safe-area-inset-right,0px))}
.top .mark{display:inline-flex;align-items:center;min-height:48px;min-width:48px}
.home .top .mark.here{visibility:hidden}
.top .mark img{width:64px;filter:drop-shadow(-2px 3px 3px rgba(5,3,20,.45))}
.twf .top .mark img{width:50px}
.top nav ul{list-style:none;margin:0;padding:0;display:flex;gap:2px}
.top nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;color:var(--moon);font-weight:700;font-size:.95rem;text-decoration:none;border-radius:8px}
.top nav a:hover{text-decoration:underline}
.top nav a[aria-current=page]{text-decoration:underline;text-decoration-thickness:2px}

/* ---------- washi sheet ---------- */
main{overflow-x:clip;padding-left:max(14px,env(safe-area-inset-left,0px));padding-right:max(14px,env(safe-area-inset-right,0px))}
.sheet{position:relative;isolation:isolate;max-width:600px;margin:clamp(12px,4vh,56px) auto 0;
  padding:clamp(40px,7vw,64px) clamp(26px,7vw,64px) clamp(32px,6vw,56px)}
.paper{position:absolute;z-index:-1;left:-14px;top:-14px;width:calc(100% + 28px);height:calc(100% + 28px);overflow:visible;
  filter:drop-shadow(-6px 9px 9px rgba(5,3,20,.55))}
.logo{width:min(250px,64%);margin:0 auto 34px}
.twf .logo{width:min(300px,76%)}
.blurb{font-size:1.15rem;line-height:1.6;margin:0 auto;max-width:28em;text-align:center;text-wrap:balance}
.blurb b{font-weight:900;color:var(--accent)}
.ph{display:inline-block;background:#FFF1B8;border-radius:4px;padding:0 5px;font:700 .7rem/1.6 var(--sans);color:#6B4F00;vertical-align:middle}
/* game: the sheet is a tanzaku, hung on a cord */

/* ---------- signup cutout ---------- */
.cut{position:relative;isolation:isolate;margin:46px auto 0;max-width:430px;padding:30px 30px 28px;transform:rotate(-1.4deg)}
.cut .paper{filter:drop-shadow(-3px 5px 4px rgba(60,40,20,.35))}
.cut h2{text-wrap:balance;margin:0 0 4px;font-size:1.6rem;line-height:1.2;color:var(--accent)}
.cut p{margin:0 0 16px;color:#4A3A2E;font-size:.98rem;line-height:1.6}
.cut form{display:flex;gap:10px;flex-wrap:wrap}
.cut input[type=email]{flex:1 1 200px;min-width:0;min-height:48px;padding:10px 14px;border-radius:6px;
  border:2px solid color-mix(in srgb,var(--accent) 30%,transparent);background:#FBF6EE;color:var(--ink);font:500 1rem var(--sans)}
.cut input[type=email]:focus{outline:3px solid var(--accent);outline-offset:2px}
.cut button{min-height:48px;padding:0 26px;border:0;border-radius:6px;background:var(--accent);color:var(--moon);font:700 1rem var(--sans);cursor:pointer}
.cut button:hover{background:var(--accent-hover)}
@media (max-width:480px){.cut button{flex:1 1 100%}}
.cut .fine{margin:12px 0 0;font-size:.875rem;color:#5A4A52}
.cut .thanks{margin:4px 0 0;font-weight:700;color:var(--accent)}
.hp{position:absolute;left:-9999px}

/* ---------- inner pages: About, FAQ, Privacy ---------- */
.prose{max-width:34em;margin:0 auto}
.prose .small-logo{width:120px;margin:0 auto 18px}
.twf .prose .small-logo{width:150px}
.prose h1{font-size:clamp(1.7rem,1.3rem + 1.6vw,2.2rem);line-height:1.2;color:var(--accent);text-align:center;margin:0 0 6px;text-wrap:balance}
.prose .sub{text-align:center;color:var(--ink-soft);margin:0 0 28px}
.prose h2{font-size:1.25rem;line-height:1.3;color:var(--accent);margin:30px 0 6px}
.prose p,.prose li{text-wrap:pretty}
.prose p{margin:0 0 14px}
.prose ul{padding-left:1.2em;margin:0 0 14px}
.prose dl{margin:0}
.prose dt{color:var(--accent);margin:22px 0 4px;line-height:1.4}
.prose dd{margin:0;line-height:1.6}
.prose .note{font-size:.9rem;color:var(--ink-soft);border-top:1.5px dashed color-mix(in srgb,var(--ink-soft) 40%,transparent);padding-top:12px;margin-top:30px}

/* ---------- reeds over the sheet ---------- */
.fore{--sw:600px;position:absolute;z-index:2;bottom:-34px;width:var(--fw);max-width:none;pointer-events:none}
/* Reeds over the paper. Each clump crosses at a fixed share of its width, so the paper edge always falls at the same
   painted spot. Left: back at its full height, nudged right so the cattail head and the blade tips near the card
   pass decisively behind it (the card sits above the reeds). Right: through the grass fan, mound kept off. The fade
   covers the cut outer edge on very wide screens until the widescreen art (pack 45) exists. */
.fore.l,.fore.lo{--fw:clamp(340px,calc(((100vw - var(--sw))/2 + 24px)/.74),600px);left:calc(var(--fw)*-.74);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%);mask-image:linear-gradient(90deg,transparent,#000 9%)}
.cut,.sheet footer{position:relative;z-index:3}
/* the lone cattail group is its own layer: on the home page it drops a little so its blade tips end clear of the card,
   while the side clump keeps its full height (the group sits under the side clump, so its stems vanish into the bushes) */
@media (min-width:900px) and (min-height:620px){.home .fore.lo{transform:translateY(calc(var(--fw)*.15))}}
/* inner pages run text to the bottom of the sheet, so there the left clump stays low, clear of the words */
@media (min-width:900px) and (min-height:620px){.ncg:not(.home) .fore.l,.ncg:not(.home) .fore.lo{left:calc(var(--fw)*-.74 + 45px);transform:translateY(calc(32% + 50px))}}
.fore.r{--fw:clamp(340px,calc(((100vw - var(--sw))/2 + 24px)/.772),900px);transform:translateY(var(--rdy,0px));right:calc(var(--fw)*-.772);
  -webkit-mask-image:linear-gradient(270deg,transparent,#000 9%);mask-image:linear-gradient(270deg,transparent,#000 9%)}

/* ---------- footer, on the washi ---------- */
.gap{height:max(30vh,200px)}
/* studio inner pages: the reeds stand on the bottom of the page, so the paper ends just above it */
.ncg .gap{height:30px}
.ncg:not(.home) main{overflow:clip}
.ncg:not(.home) .fore{bottom:-64px}
footer{margin-top:44px;padding-bottom:6px;font-size:.92rem;color:var(--ink-soft)}
footer .in{display:grid;gap:4px;justify-items:center;text-align:center}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:0 4px}
footer a{color:var(--accent);font-weight:700;display:inline-flex;align-items:center;min-height:44px;padding:0 9px;text-decoration:none;border-radius:8px}
footer a:hover{text-decoration:underline}
footer ul a{min-width:44px;justify-content:center;padding:0 8px}
footer ul a:hover{opacity:.75}
footer ul svg{display:block}
footer .legal{margin:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0 6px;color:var(--ink-soft);font-size:.82rem}
footer .legal a{color:var(--ink-soft);font-weight:500;padding:0 6px}

@media (max-width:899px),(max-height:619px){
  /* scrolling layouts: reeds stay at the bottom of the screen and the sheet slides behind them */
  .fore{position:fixed;bottom:calc(-8px - env(safe-area-inset-bottom,0px))}
  .fore.l,.fore.lo{left:calc(50% - 330px - var(--fw)*.74)}
  .fore.r{--rdy:40px}
  .fore.r{right:calc(50% - 300px - var(--fw)*.772)}
}
@media (max-width:660px){
  main{padding-left:max(36px,env(safe-area-inset-left,0px));padding-right:max(36px,env(safe-area-inset-right,0px))}
  .sheet{padding-left:22px;padding-right:22px}
  .slip{padding-left:24px;padding-right:24px}
  .fore{--fw:140px}
  .fore.l,.fore.lo{left:-84px;z-index:-2;transform:none}
  .fore.r{right:-84px;z-index:-2}
  .sheet footer{padding-bottom:64px;font-size:.84rem}
  .sheet footer ul a{padding:0 5px}
  .sheet footer ul{gap:0 2px}
  .top nav a{padding:0 9px}
}

/* ---------- desktop home: one screen, no scroll ---------- */
@media (min-width:900px) and (min-height:620px){
  .home body,body.home{height:100vh;height:100svh;overflow:hidden}
  .home main{height:100vh;height:100svh;overflow:hidden}
  .home .top{position:absolute;top:0;left:0;right:0}
  .home .gap{display:none}
  .home .sheet{max-width:620px;margin-top:4.5vh;height:95.5vh;height:95.5svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
    padding:clamp(26px,4.4vh,50px) 56px 0}
  .twf.home .sheet{max-width:560px;margin-top:6vh;height:94vh;height:94svh}
  .home .sheet>.paper{height:calc(100% + 80px)}
  .home .logo{width:auto;height:clamp(150px,30vh,330px);margin:0 auto 2.8vh}
  .twf.home .logo{height:clamp(150px,27vh,320px)}
  .twf.home .sheet{padding-top:clamp(34px,6vh,64px)}
  .home .blurb{font-size:1.1rem}
  .home .cut{margin-top:3.4vh;padding:22px 30px 20px;max-width:440px;transform:rotate(-1deg)}
  .home .cut p{margin-bottom:12px}
  .home .cut .fine{margin-top:8px}
  .home footer{margin-top:clamp(24px,5vh,56px);padding-bottom:5vh}
  .home footer a{min-height:36px}
  .home .fore{bottom:-10px;--sw:620px}
}
@media (min-width:900px) and (max-height:760px) and (min-height:620px){
  .home .blurb{font-size:1rem;line-height:1.5}
  .home .cut h2{font-size:1.4rem}
  .home .cut .fine{font-size:.8rem}
}

/* ---------- game home: logo and a hanging paper slip, straight on the sky ---------- */
.top nav{margin-left:auto}
.sky{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:clamp(8px,3vh,40px);padding-bottom:40px}
.hero-logo{width:min(340px,58vw);filter:drop-shadow(0 3px 10px rgba(5,8,25,.5))}
@media (max-width:600px){.scene .lan:nth-of-type(2n){display:none}.twf:not(.home) .moon{display:none}.twf .gap{height:clamp(80px,14vh,140px)}}
.hero-blurb,.hero-note{text-shadow:0 1px 8px rgba(5,8,25,.9),0 0 2px rgba(5,8,25,.8)}
.hero-note .ph{text-shadow:none}
.hero-blurb{margin:clamp(18px,3vh,30px) auto 0;max-width:22em;color:var(--moon);font-size:1.2rem;line-height:1.55;text-wrap:balance}
.hero-note{margin:8px auto 0;color:#B7BED8;font-size:.95rem}
.slip{position:relative;isolation:isolate;width:min(500px,100%);margin:clamp(52px,7vh,70px) auto 0;padding:24px 30px 24px 146px;text-align:left;transform:rotate(-.8deg)}
.slip .paper{filter:drop-shadow(-4px 9px 9px rgba(3,5,18,.5))}
/* the frog leans in over the card's left edge, across from the Join button */
.slip .frog{position:absolute;z-index:1;left:-52px;bottom:14px;width:164px;height:auto;transform:rotate(.8deg);
  filter:drop-shadow(-3px 6px 6px rgba(3,5,18,.45))}
@media (max-width:560px){
  /* phones: no room beside the form, so he sits in the middle of the card's top edge */
  .slip{margin-top:124px;padding-left:24px}
  .slip .frog{left:calc(50% - 77px);bottom:calc(100% - 40px);width:154px;transform:rotate(1.5deg);filter:drop-shadow(0 4px 3px rgba(60,40,20,.3))}
}
/* the heading, words and form share one left edge beside the frog, who looks across at Join */
.slip{padding-top:30px}
.slip h2{margin:0 0 6px;font-size:1.85rem;line-height:1.15;color:#4A2340;text-wrap:balance}
.slip h2 .hot{color:#B8571A}
.slip p{text-wrap:pretty;margin:0 0 14px;color:var(--ink);font-size:.98rem;line-height:1.6}
.slip form{display:flex;gap:10px;flex-wrap:wrap}
.slip input[type=email]{flex:1 1 200px;min-width:0;min-height:48px;padding:10px 14px;border-radius:6px;
  border:2px solid color-mix(in srgb,var(--accent) 30%,transparent);background:#FBF6EE;color:var(--ink);font:500 1rem var(--sans)}
.slip input[type=email]:focus{outline:3px solid var(--accent);outline-offset:2px}
/* Join: a lantern-amber key with a darker lip under it, so it reads as something to press; it sinks onto the lip when pressed */
.slip button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 28px;border:0;border-radius:10px;cursor:pointer;
  background:linear-gradient(#F4B862,#E59B3F);color:#4A2340;font:500 1.2rem/1 var(--display);letter-spacing:.02em;
  box-shadow:inset 0 1px 0 rgba(255,244,214,.75),0 3px 0 #B8641F,0 6px 12px rgba(80,40,20,.28);transition:transform .12s ease,box-shadow .12s ease,filter .12s ease}
.slip button:hover{transform:translateY(-1px);filter:brightness(1.05);box-shadow:inset 0 1px 0 rgba(255,244,214,.8),0 4px 0 #B8641F,0 0 18px rgba(255,190,95,.55),0 8px 14px rgba(80,40,20,.28)}
.slip button:active{transform:translateY(3px);box-shadow:inset 0 1px 0 rgba(255,244,214,.6),0 0 0 #B8641F,0 2px 4px rgba(80,40,20,.25)}
.slip :focus-visible{outline-color:var(--accent)}

.slip .fine{margin:12px 0 0;font-size:.85rem;color:var(--ink-soft)}
.slip .thanks{margin:4px 0 0;font-weight:700;color:var(--accent)}
.bank{position:relative;margin:70px 0 0;padding:18px 16px max(18px,env(safe-area-inset-bottom,0px));background:#0E3D4C;color:#C9D2E4}
.bank::before{content:"";position:absolute;left:0;right:0;bottom:calc(100% - 30px);height:110px;background:url(art/grass.webp) 50% 0/auto 110px repeat-x;pointer-events:none}
.bank>*{position:relative}
.bank a{color:var(--moon)}
.bank .legal,.bank .legal a{color:#C9D2E4}
.bank{text-shadow:0 1px 6px rgba(5,10,20,.9)}
@media (min-width:900px) and (min-height:620px){
  /* centred: logo, words and the sign-up card in one column; the whole hill, well and post stand below it */
  .twf.home{--sh:min(46.2vw,72vh)}
  .twf.home .sky{--col:min(680px,90vw);width:var(--col);height:100vh;height:100svh;justify-content:flex-start;
    margin:0 auto;padding:clamp(14px,2.6vh,36px) 0 0}
  /* the well is always centred; only the dark ground under the meadow drops below the screen's edge */
  .twf.home .stage{left:calc(50vw - var(--sw)*.54);bottom:calc(var(--sh)*-.21)}
  .twf.home .scene::before{content:"";position:absolute;left:0;right:0;bottom:0;height:24vh;background:linear-gradient(rgba(14,61,76,0),#0E3D4C 55%)}
  /* the logo takes whatever height is left once the card sits ~36px above the lantern post (the rest of the column is ~330px) */
  .twf.home .hero-logo{width:auto;height:clamp(70px,calc(100vh - var(--sh)*.532 - 363px - clamp(14px,2.6vh,36px)),260px)}
  .twf.home .hero-blurb{font-size:1.05rem;margin-top:18px;margin-bottom:14px;max-width:none}
  /* the frog leans over the card's left edge, as before; the heading hangs off its top */
  .twf.home .slip{width:min(620px,100%);margin-top:30px;padding:32px 36px 20px 140px}
  .twf.home .slip .frog{left:-78px;bottom:16px;width:196px;transform:rotate(-1deg)}
  .twf.home .slip p{margin-bottom:18px}
  .twf.home main{overflow:visible}
  /* the footer splits to the two bottom corners, clear of the well */
  .twf.home .bank{position:absolute;left:0;right:0;bottom:0;margin:0;background:linear-gradient(rgba(8,24,32,0),rgba(8,24,32,.6) 60%);padding:22px 28px 1.5vh}
  .twf.home .bank .in{display:flex;justify-content:space-between;align-items:center;max-width:none}
  .twf.home .bank::before{display:none}
  .twf.home .bank a{min-height:36px}
}
@media (min-width:900px) and (min-height:620px) and (max-height:820px){
  /* laptop heights: a smaller meadow and a tighter column so the post stands clear below the card */
  .twf.home{--sh:min(46.2vw,66vh)}
  .twf.home .hero-blurb{margin-bottom:10px}
}
@media (min-width:900px) and (min-height:1000px){.twf.home{--sh:min(46.2vw,80vh)}}
/* big monitors: the column grows with the screen instead of shrinking into the sky */
@media (min-width:1700px) and (min-height:1250px){.twf.home .sky{zoom:1.25}}
@media (min-width:900px) and (min-height:620px) and (min-aspect-ratio:3/2){
  /* wider than the meadow: its ends fade into the same dark ground */
  .twf.home .stage{-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
  /* the ground carries on past the meadow's faded ends, so the hill never floats */
  .twf.home .scene::before{z-index:1;height:30vh;background:linear-gradient(rgba(14,61,76,0),rgba(14,61,76,.85) 55%,#0E3D4C)}
  .twf.home .stage{z-index:2}
}
@media (min-width:900px) and (max-width:1180px) and (min-height:620px){
  .twf.home .slip{padding-left:132px}
  .twf.home .slip .frog{left:-60px;width:170px}
}
.twf .prose h2{font-size:1.4rem}

/* ---------- game toys: coin into the well, light for a lantern ---------- */
.fx{position:absolute;inset:0;pointer-events:none}
.fx i{position:absolute;display:block}
.fx .shaft{inset:0}
.shaft .drop{width:6px;height:6px;margin:-3px;background:#EAF1EA;opacity:.9;box-shadow:0 0 4px rgba(220,236,240,.7)}
.ring{border-radius:50%;box-shadow:0 0 0 1px rgba(214,226,224,.6)}
.coin{left:0;top:0;width:48px;height:48px;transform-style:preserve-3d}
.coin b{position:absolute;inset:0;backface-visibility:hidden;background:url(art/coin-front.webp) 50%/100% no-repeat}
.coin b+b{transform:rotateX(180deg);background-image:url(art/coin-back.webp)}
.glint{border-radius:50%;background:radial-gradient(closest-side,rgba(255,226,160,.85),rgba(255,200,120,.35) 55%,rgba(255,200,120,0));mix-blend-mode:screen}
.drop{width:3px;height:3px;margin:-1.5px;border-radius:50%;background:#BFC8C4;opacity:.7}
.mote{margin:-2px;border-radius:50%;background:#FFE7A8;box-shadow:0 0 3px 1px rgba(255,205,120,.45)}
.lan{transition:filter .6s}
.lan.sent{filter:brightness(1.12) saturate(1.2) drop-shadow(0 0 16px rgba(255,210,140,.95)) drop-shadow(0 0 34px rgba(255,190,110,.5))}
html.toy,html.toy *{cursor:pointer}
/* phone game home: at the bottom of the page the whole well and the lantern post stand clear below the card */
@media (max-width:899px),(max-height:619px){.twf.home .slip{margin-bottom:calc(max(58vh,43vw) * .8 - 80px)}}
.postglow{border-radius:50%;background:radial-gradient(closest-side,rgba(255,226,165,.9),rgba(255,196,110,.38) 45%,rgba(255,196,110,0));mix-blend-mode:screen;opacity:0}
@media (max-width:560px){.slip form{justify-content:center} .slip button{min-width:60%} .slip{padding-top:50px;text-align:center} .slip h2{margin:4px -8px 10px;font-size:clamp(1.6rem,7.6vw,1.9rem)}}
/* 4:3-ish desktops crop the painted sky; slide it so the moon stays whole and clear of the nav */
@media (min-width:900px) and (max-width:1180px) and (max-aspect-ratio:3/2){.twf .sky-art{object-position:64% 0}}
/* the coin, splash and post glow play in front of the hill (the desktop stage sits on its own layer) */
.twf .fx{z-index:3}