/* ══ Tanzaku at dusk: the sleep-aid quiz ══
   The world documented in DESIGN.md, applied to sleep-aid-quiz.html: the page head
   sits over a photographed lake at dusk, a moon rises over it phase by phase as the reader
   answers, and every question and the result are written on one sheet of washi (the paper
   9-slice). Lantern light is the only active state. */

.tz{
  --tz-bar:#22364E; --tz-night:#090B0D;
  --tz-paper:#EAE5D8; --tz-cream:#F4EDE0; --tz-silver:#C8C2B6;
  --tz-persimmon:#C4623F; --tz-persimmon-ink:#8E452B;
  --tz-rule:#0C0A09; --tz-rule-soft:#A49E94; --tz-text:#0C0A09; --tz-line:#2A2723; --tz-meta:#5B574C;
  --tz-display:'Libertinus Serif Display',Georgia,serif;
  --tz-serif:'Libre Caslon Text',Georgia,serif;
  --tz-sans:'Noto Sans',system-ui,sans-serif;
  --tz-deckle:14px; --tz-slice:30;
  --tz-lantern:radial-gradient(ellipse 60% 120% at 18% 50%, rgba(255,196,130,.34), rgba(255,196,130,0) 70%);
  background:var(--tz-night); color:var(--tz-cream);
}

/* bar */
.tz-bar{position:relative; z-index:3; height:58px; background:var(--tz-bar); display:flex; align-items:center; gap:12px; padding:0 16px}
.tz-logo{display:block; width:34px; height:34px; flex:none}
.tz-logo img{width:100%; height:100%; display:block}
.tz-wordmark{font-family:var(--tz-serif); font-size:18px; letter-spacing:-.02em; color:var(--tz-paper); white-space:nowrap; text-decoration:none}
.tz-wordmark:hover{color:#fff}
.tz .nav-links{display:none}
.tz-menu{margin-left:auto; width:44px; height:44px; display:grid; place-items:center; border:0; background:none; cursor:pointer; color:var(--tz-paper)}
.tz-menu svg{width:26px; height:20px; fill:none; stroke:#F1F4F4; stroke-width:3.2; stroke-linecap:round}
.tz-menu:focus-visible,.tz-wordmark:focus-visible,.tz-logo:focus-visible{outline:1px solid var(--tz-silver); outline-offset:4px}

/* the scene: a photographed lake at dusk, fixed behind the page (img/tanzaku/lake-*.webp,
   Ideogram 4, 5 Nov 2026), dimmed so the moon carries the light. The photo is drawn twice: the
   whole frame behind, and a cut-out of the hills, pine and lake (lake-fg-*.webp) in front, with
   the moon between them, so it rises from behind the far ridges. The page script places the
   moon on the ridge under it and CSS steps it up to the bar: just clearing the hills at question
   one, high and lit at the result. On phones it climbs the right edge, beside the head and
   behind the slip; from 1000px it climbs the left margin, clear of the column. */
.tzq-scene{position:relative; isolation:isolate}
.tzq-backdrop{position:fixed; inset:0; z-index:-1; overflow:hidden; background:#070B12}
/* at least 860px tall, so on short phones the bright horizon sits below the head */
.tzq-lake{display:block; position:absolute; left:0; right:0; top:0; height:max(100%, 860px); z-index:0}
.tzq-lake img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 72%; display:block; filter:brightness(.62)}
.tzq-lake-fg{z-index:2}
/* the scrim darkens the sky behind the head and fades out by 56%; head text holds 7:1 or better
   at every tested size */
.tzq-lake::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom, rgba(9,11,13,.7) 0%, rgba(9,11,13,.55) 48%, rgba(9,11,13,0) 56%)}
/* the front layer takes the same scrim, cut to its own shape, so the pine and hills darken exactly
   as the sky behind them does and no lighter patch shows where the layers meet */
.tzq-lake-fg::after{-webkit-mask:url(img/tanzaku/lake-fg-1440.webp) 50% 72% / cover no-repeat; mask:url(img/tanzaku/lake-fg-1440.webp) 50% 72% / cover no-repeat}
.tzq .q-moon{position:absolute; z-index:1; top:0; right:6vw; width:clamp(64px,8vw,112px); height:auto; aspect-ratio:1;
  transform:translateY(calc(var(--y0,52vh) + var(--dy,-40vh) * var(--k,0)));
  filter:drop-shadow(0 0 var(--glow,10px) rgba(244,237,224,.45)) drop-shadow(0 0 calc(var(--glow,10px) * 3) rgba(244,237,224,.22));
  transition:transform 1.8s cubic-bezier(.16,1,.3,1), filter 1.8s ease}
.tzq .q-moon[data-phase="1"]{--k:.25; --glow:12px}
.tzq .q-moon[data-phase="2"]{--k:.5; --glow:14px}
.tzq .q-moon[data-phase="3"]{--k:.75; --glow:16px}
.tzq .q-moon[data-phase="4"]{--k:1; --glow:20px}
@media (min-width:1000px){.tzq .q-moon{right:auto; left:calc((100% - 720px) / 4 - clamp(64px,8vw,112px) / 2)}}
@media (prefers-reduced-motion:reduce){.tzq .q-moon{transition:none}}
/* under 1000px the moon climbs the right edge, so the head keeps that lane clear of text:
   its right padding is however far the head column reaches into the moon's lane (about 78px
   on a phone, none once the column stops short of it) */
.tzq-head > div{padding-right:max(0px, calc(min(100vw, 50vw + 360px) - 20px - (94vw - clamp(64px,8vw,112px)) + 12px))}
@media (min-width:1000px){.tzq-head > div{padding-right:0}}

.tzq-head{max-width:720px; margin:0 auto; padding:44px 20px 0}
.tzq-head .crumbs{font-family:var(--tz-sans); font-weight:300; font-size:13px; letter-spacing:0; text-transform:none; color:#D9DDE3}
.tzq-head .crumbs a{color:#D9DDE3; text-decoration:underline; text-underline-offset:.3em; text-decoration-color:rgba(217,221,227,.4)}
.tzq-head{text-shadow:0 1px 2px rgba(9,11,13,.55), 0 0 28px rgba(9,11,13,.5)}
.tzq-head h1{margin:14px 0 0; font-family:var(--tz-display); font-weight:400; font-size:clamp(2.1rem,6.4vw,3.4rem); line-height:1.08; letter-spacing:-.01em; color:var(--tz-cream)}
.tzq-lede{margin:16px 0 0; max-width:56ch; font-family:var(--tz-serif); font-size:clamp(1rem,2.6vw,1.1rem); line-height:1.6; color:#E4E6EA}

/* the slip rests on the scene */
.tzq-hang{padding:0 12px 96px}
.tzq .quiz-shell{max-width:720px; margin:0 auto; padding:0; position:relative}
.tzq-slip{position:relative; margin-top:40px; border-style:solid; border-color:transparent;
  border-image:url(img/tanzaku/paper.webp) var(--tz-slice) fill / var(--tz-deckle) stretch;
  padding:34px 22px 26px; color:var(--tz-text)}

/* steps */
.tzq .quiz-step{display:none}
.tzq .quiz-step.on{display:block}
.tzq .q-title{margin:0 0 20px; font-family:var(--tz-display); font-weight:400; font-size:clamp(1.55rem,5vw,2.25rem); line-height:1.14; letter-spacing:-.01em; color:var(--tz-text)}
.tzq .q-title:focus,.tzq .quiz-step:focus{outline:none}
.tzq .q-opts{margin:0; padding:0; list-style:none; border-top:2px solid var(--tz-rule)}
.tzq .q-opts li{position:relative; z-index:0; border-bottom:1px solid var(--tz-rule-soft)}
.tzq .q-opt{position:relative; display:block; width:100%; min-height:52px; padding:14px 4px; border:0; background:none; text-align:left; cursor:pointer;
  font-family:var(--tz-serif); font-size:clamp(1rem,2.7vw,1.12rem); line-height:1.4; letter-spacing:-.01em; color:var(--tz-text); opacity:1; transform:none}
.tzq .q-opt::before{content:""; position:absolute; inset:0 -10px; z-index:-1; opacity:0; background:var(--tz-lantern); transition:opacity 420ms cubic-bezier(.16,1,.3,1)}
.tzq .q-opt:focus-visible{color:var(--tz-persimmon-ink); outline:none}
.tzq .q-opt:focus-visible::before{opacity:1}
/* hover only where there is a pointer that hovers; on a phone a tap left the next row lit */
@media (hover:hover){.tzq .q-opt:hover{color:var(--tz-persimmon-ink)} .tzq .q-opt:hover::before{opacity:1}}
.tzq .q-opt:focus-visible{box-shadow:inset 3px 0 0 var(--tz-persimmon-ink)}
/* the answer already given, when the reader comes back with Back: lit, as if still on it */
.tzq .q-opt[aria-current="true"]{color:var(--tz-persimmon-ink)}
.tzq .q-opt[aria-current="true"]::before{opacity:1}

/* the result, on the same paper */
.tzq .q-result-card{margin:0; padding:0 0 20px; border:0; border-bottom:2px solid var(--tz-rule); border-radius:0}
.tzq .q-result-name{margin:0 0 12px; font-family:var(--tz-display); font-weight:400; font-size:clamp(1.9rem,6vw,2.7rem); line-height:1.08; letter-spacing:-.01em}
.tzq #r-why{font-family:var(--tz-serif); font-size:1.05rem; line-height:1.6; color:var(--tz-line)}
.tzq .q-receipt{margin:-2px 0 16px; font-family:var(--tz-sans); font-weight:300; font-size:13px; line-height:1.5; color:var(--tz-meta)}
.tzq .q-safety{margin:0 0 18px; padding:14px 16px; border:1px solid var(--tz-rule-soft); border-radius:0; font-family:var(--tz-serif); font-size:1rem; line-height:1.55; color:var(--tz-line)}
.tzq .q-bridge{margin-top:26px}
.tzq .q-bridge-name{margin:0 0 8px; font-family:var(--tz-display); font-weight:400; font-size:clamp(1.3rem,4vw,1.6rem); color:var(--tz-text)}
.tzq #r-bridge-why{font-family:var(--tz-serif); font-size:1rem; line-height:1.6; color:var(--tz-line)}
.tzq .q-breakdown{margin-top:30px}
.tzq .q-bd-head{margin:0; font-family:var(--tz-display); font-weight:400; font-size:clamp(1.35rem,4vw,1.7rem); color:var(--tz-text)}
.tzq .q-bd-part{margin-top:20px; padding-top:14px; border-top:1px solid var(--tz-rule-soft)}
.tzq .q-bd-label{margin:0 0 6px; font-family:var(--tz-sans); font-weight:300; font-size:13px; letter-spacing:0; line-height:1.7; text-wrap:pretty; text-transform:none; opacity:1; color:var(--tz-meta)}
.tzq .q-bd-text{margin:0; max-width:62ch; font-family:var(--tz-serif); font-size:1rem; line-height:1.65; color:var(--tz-line)}
.tzq .q-gate{margin-top:32px; padding-top:18px; border-top:2px solid var(--tz-rule); font-family:var(--tz-serif); font-size:1rem; line-height:1.6; color:var(--tz-line)}
.tzq .q-gate p{max-width:56ch}
.tzq .q-gate .fineprint{margin-top:6px; font-family:var(--tz-sans); font-weight:300; font-size:13px; letter-spacing:0; color:var(--tz-meta)}
.tzq .q-edu{margin:28px 0 0; font-family:var(--tz-serif); font-size:.95rem; line-height:1.55; color:var(--tz-meta)}
.tzq .q-signoff{margin:18px 0 0; font-family:var(--tz-display); font-size:clamp(1.35rem,4vw,1.7rem); line-height:1.2; color:var(--tz-text)}
.tzq .q-signoff[hidden]{display:none}

/* ink links, lit on hover: the research links, the letter link, back, start again */
.tzq .quiz-shell a,.tzq .q-back{position:relative; font-family:var(--tz-serif); color:var(--tz-text); text-decoration:underline;
  text-decoration-thickness:1px; text-underline-offset:.32em; text-decoration-color:#8F8A7E}
.tzq .quiz-shell a.btn{display:inline; min-height:0; padding:0; background:none; border:0; font-size:1.05rem; letter-spacing:0; text-transform:none}
/* the result links sit in one row that wraps whole links, each a 44px target */
.tzq .q-links{display:flex; flex-wrap:wrap; column-gap:24px; margin:10px 0 0}
.tzq .q-links a.btn{display:inline-flex; align-items:center; min-height:44px}
.tzq .q-result-card p.q-why,.tzq .q-bridge p.q-why{margin:0}
.tzq .q-gate .fineprint{margin-top:10px}
.tzq .q-extra{margin:22px 0 0; padding-top:16px; border-top:1px solid var(--tz-rule-soft)}
.tzq .quiz-shell a:hover,.tzq .quiz-shell a:focus-visible,.tzq .q-back:hover,.tzq .q-back:focus-visible{color:var(--tz-persimmon-ink); text-decoration-color:var(--tz-persimmon-ink); outline:none}
.tzq .quiz-shell a:focus-visible,.tzq .q-back:focus-visible{box-shadow:0 2px 0 var(--tz-persimmon-ink)}
.tzq .q-nav{display:flex; gap:26px; margin-top:22px; align-items:center}
.tzq .q-count{margin-left:auto; font-family:var(--tz-sans); font-weight:300; font-size:13px; color:var(--tz-meta)}
.tzq .q-count[hidden]{display:none}
.tzq .q-hint{margin:-8px 0 18px; font-family:var(--tz-serif); font-size:1rem; line-height:1.5; color:var(--tz-meta)}
.tzq .q-back{display:inline-flex; align-items:center; min-height:44px; margin:0; padding:0; border:0; background:none; font-size:1rem; opacity:1; cursor:pointer}
.tzq .q-back[hidden]{display:none} /* the flex display above outranks the UA [hidden] rule */

/* footer: the shared template, set into the night */
body.tz .foot{background:var(--tz-night); border-top:1px solid #1E232B; color:#CFC9BC}
body.tz .foot h2{color:#A9A396; font-family:var(--tz-serif); font-weight:400; font-size:1rem; letter-spacing:0; text-transform:none}
body.tz .foot li a,body.tz .foot-blurb{font-family:var(--tz-serif)}
body.tz .foot a,body.tz .foot li a,body.tz .foot-blurb,body.tz .foot-base,body.tz .foot-base a{color:#CFC9BC}
body.tz .foot-base{font-family:var(--tz-sans); font-weight:300; letter-spacing:0; border-top-color:#1E232B}
body.tz .foot a:hover{color:#F0B79E}
body.tz .foot .mark b{font-family:var(--tz-serif); font-weight:400; color:var(--tz-paper)}
body.tz .foot .mark i{color:#A9A396; font-family:var(--tz-sans); font-weight:300; font-size:.8rem; letter-spacing:.02em; text-transform:none}
body.tz .foot .btn-ghost{display:inline; min-height:0; padding:0; border:0; background:none; color:var(--tz-cream); font-family:var(--tz-serif);
  font-size:1rem; letter-spacing:0; text-transform:none; text-decoration:underline; text-underline-offset:.35em; text-decoration-color:#5B574C}
body.tz .foot .btn-ghost:hover{background:none; color:#F0B79E}
body.tz .foot .nav-new{display:none}

/* motion: a new question settles onto the slip; the full moon's glow breathes */
@media (prefers-reduced-motion:no-preference){
  .tzq .quiz-step.on{animation:tzq-settle .9s cubic-bezier(.16,1,.3,1) both}
  .tzq .quiz-step.q-still{animation:none} /* the first question is already there on load; it settles only when the reader moves */
  @keyframes tzq-settle{from{opacity:0; transform:translateY(-6px)}to{opacity:1; transform:none}}
}

/* wider screens: nav in the bar, a wider sheet, a deeper deckle */
/* the seven nav links need ~1150px in the bar; below that the menu button stays */
@media (min-width:1200px){
  .tz .nav-links{display:flex; margin-left:auto; gap:24px; white-space:nowrap}
  .tz .nav-links a{font-family:var(--tz-serif); font-weight:400; font-size:16px; letter-spacing:-.01em; color:var(--tz-paper); padding:0}
  .tz .nav-links a::after{background:var(--tz-persimmon)}
  .tz .nav-links a:hover{color:#fff}
  .tz .nav-links .nav-new{display:none}
  .tz-menu{display:none}
}
@media (min-width:760px){
  .tz{--tz-deckle:18px; --tz-slice:40}
  .tz-bar{height:64px; padding:0 22px}
  .tz-wordmark{font-size:20px}
  .tzq-head{padding-top:64px}
  .tzq-slip{padding:48px 48px 36px}
}

/* the shared drawer and consent bar, set into the night (this page only; cm.css keeps them elsewhere) */
/* the drawer and footer are night in both themes, so the cream logo shows in light mode too */
body.tz .mark-ink{display:none} body.tz .mark-cream{display:block}
body.tz .drawer{background:var(--tz-night); color:var(--tz-cream)}
body.tz .drawer-top .mark b{font-family:var(--tz-serif); font-weight:400; color:var(--tz-paper)}
body.tz .drawer-top .mark i{font-family:var(--tz-sans); font-weight:300; font-size:.8rem; letter-spacing:.02em; text-transform:none; color:#A9A396}
body.tz .drawer .icon-btn{color:var(--tz-paper); border-color:#3A3F47}
body.tz .drawer a{font-family:var(--tz-display); font-size:1.9rem; color:var(--tz-cream); border-bottom-color:#1E232B}
body.tz .drawer a:hover{color:#F0B79E}
body.tz .drawer .nav-new{display:none}
body.tz .consent-bar{background:var(--tz-bar); border-top:1px solid #33475F; box-shadow:none; color:#E4E6EA}
body.tz .consent-bar p{font-family:var(--tz-serif); font-size:.95rem; color:#E4E6EA}
body.tz .consent-bar a{color:#E4E6EA; text-decoration-color:rgba(228,230,234,.5)}
body.tz .consent-bar .btn{min-height:44px; padding:0 18px; border-radius:0; font-family:var(--tz-serif); font-weight:400; font-size:.95rem;
  letter-spacing:0; text-transform:none; background:var(--tz-paper); color:var(--tz-text); border:1px solid var(--tz-paper)}
body.tz .consent-bar .btn:hover{background:#fff; color:var(--tz-text); transform:none}
body.tz .consent-bar .btn-ghost{background:transparent; color:var(--tz-cream); border-color:#8A93A0}
body.tz .consent-bar .btn-ghost:hover{background:transparent; color:#fff; border-color:#fff}
/* phones: copy and both buttons on one row */
@media (max-width:600px){body.tz .consent-bar p{font-size:.8rem; line-height:1.35} body.tz .consent-bar .btn{padding:0 12px; font-size:.9rem}}
/* the method form, written on the slip: the Reach iframe is transparent, Georgia ink on a ruled line
   with an outline button and no inset (restyled in Reach 5 Nov 2026) */
.tzq .q-embed{margin-top:16px;min-height:150px;max-width:460px}
.tzq .q-embed iframe{display:block;width:100%;border:0;background:transparent}
.tzq .q-gate .reach-fallback a{font-size:1.05rem}

/* ══ Tanzaku at night (4 Nov 2026) ══
   When the reader is in dark mode (cm.js sets html[data-theme="dark"] from their saved choice or the
   system), the same sheet hangs in a dark room: the sky plate falls to night, the washi is the same
   photograph darkened (img/tanzaku/paper-night.webp, mean #2E2A25) and the inks turn to the paper
   colors DESIGN.md already gives the night ground. Lantern light stays the only active state, now
   in ember. The embedded form's ink is inverted to paper (see the method form above). */
html[data-theme="dark"] .tz{
  --tz-text:#EAE5D8; --tz-line:#CFC9BC; --tz-meta:#A9A396;
  --tz-rule:#A9A396; --tz-rule-soft:#5B574C; --tz-persimmon-ink:#F0B79E;
  --tz-lantern:radial-gradient(ellipse 60% 120% at 18% 50%, rgba(240,183,158,.16), rgba(240,183,158,0) 70%);
}
html[data-theme="dark"] .tzq-lake img{filter:brightness(.45) saturate(.85)}
/* cm.css gives dark-mode .btn an accent fill (0,4,1); on the slip the research links stay ink links */
html[data-theme="dark"] .tzq .quiz-shell a.btn:not(.btn-ghost):not(.btn-light),html[data-theme="dark"] .tzq .quiz-shell a.btn:not(.btn-ghost):not(.btn-light):hover{background:none;color:var(--tz-text)}
html[data-theme="dark"] .tzq .quiz-shell a.btn:hover,html[data-theme="dark"] .tzq .quiz-shell a.btn:focus-visible{color:var(--tz-persimmon-ink)}
html[data-theme="dark"] .tzq-slip{border-image-source:url(img/tanzaku/paper-night.webp)}
html[data-theme="dark"] .tzq .quiz-shell a,html[data-theme="dark"] .tzq .q-back{text-decoration-color:#7A756B}
/* Reach draws one design, ink on transparent. At night the page inverts that ink to paper instead of
   hanging a bright cream tag behind it; the hue turn keeps the ink warm. */
html[data-theme="dark"] .tzq .q-embed iframe{filter:invert(.9) hue-rotate(180deg)}

/* the result's breakdown: the two-week test stays open, the rest folds (4 Nov 2026) */
.tzq .q-bd-more{margin-top:20px; padding-top:14px; border-top:1px solid var(--tz-rule-soft)}
.tzq .q-bd-more > summary{display:flex; align-items:center; gap:10px; min-height:44px; cursor:pointer; list-style:none;
  font-family:var(--tz-serif); font-size:1.02rem; color:var(--tz-text)}
.tzq .q-bd-more > summary::-webkit-details-marker{display:none}
.tzq .q-bd-more > summary::after{content:""; flex:none; width:7px; height:7px; margin-top:-3px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); transition:transform .25s ease}
.tzq .q-bd-more[open] > summary::after{transform:rotate(-135deg); margin-top:3px}
.tzq .q-bd-more > summary:hover,.tzq .q-bd-more > summary:focus-visible{color:var(--tz-persimmon-ink); outline:none}
.tzq .q-bd-more > summary:focus-visible{box-shadow:0 2px 0 var(--tz-persimmon-ink)}
.tzq .q-bd-more .q-bd-part:first-of-type{margin-top:8px; padding-top:0; border-top:0}