/* Yoretales — test build 1.1
   Rebuilt in the grammar the big sleep and audio apps use on a phone (Sleepiest,
   Calm, Slumber): a compact bar that always offers the trial, a bold headline
   with one highlighted phrase, one feature per block with the app in a phone,
   a wall of covers to show the size of the library, and the call to action
   repeated where the reader has just been convinced. In Yoretales's own colours:
   night navy, gold, and the app's heavy Newsreader for headlines.

   Phone first: every rule above "wider screens" is the phone. Run ./build.sh
   after editing; the pages link a hashed copy. */

/* ============================================================== tokens */
/* The two families, served from our own assets instead of Google's CDN,
   byte-identical to what Google was sending browsers (OFL-licensed, latin
   subset, variable weight). Visitors' addresses no longer touch Google. */
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(assets/fonts/newsreader-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 800;font-display:swap;
  src:url(assets/fonts/jakarta-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Georgia scaled to Newsreader's width (measured on "Yoretales" at 700 and a
   headline at 400), for the moment before Newsreader arrives: at full size the
   bold Georgia brand ran 14% wider and touched "Try for free" on a 375 px phone.
   Same range as Newsreader, so a character it lacks still falls to plain Georgia. */
@font-face{font-family:'Newsreader Fallback';font-style:normal;font-weight:400;src:local('Georgia');size-adjust:93.7%;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Newsreader Fallback';font-style:normal;font-weight:700;src:local('Georgia Bold'),local('Georgia-Bold');size-adjust:85.7%;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  --ink:#080C18;
  --ink-2:#0E1427;
  --panel:rgba(255,255,255,.04);
  --panel-2:rgba(255,255,255,.065);
  --hair:rgba(244,237,224,.10);
  --line:rgba(232,187,98,.24);
  --gold:#E8BB62;
  --gold-2:#F4D493;
  --ivory:#F4EDE0;
  --text:#C9BFAE;
  --dim:#9C9185;
  --serif:"Newsreader","Newsreader Fallback",Georgia,"Times New Roman",serif;
  --sans:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --out:cubic-bezier(.16,1,.3,1);
  --pad:20px;
  --bar:64px;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);
  color-scheme:dark;
}

/* ============================================================== base */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--ink);-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;
  scroll-padding-top:calc(var(--bar) + var(--safe-t) + 12px);-webkit-tap-highlight-color:rgba(232,187,98,.14)}
body{margin:0;font-variation-settings:"opsz" 36;color:var(--text);font:400 16px/1.65 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;overflow-x:clip}
html.lock{overflow:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer}
p{margin:0}
h1,h2,h3,h4{margin:0;font-weight:400}
mark{background:none;color:var(--gold)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:8px}
.skip{position:absolute;left:-9999px;top:12px;z-index:100;padding:12px 16px;border-radius:12px;background:var(--ivory);color:var(--ink);font-weight:700}
.skip:focus{left:12px}
.wrap{width:100%;max-width:1160px;margin:0 auto;padding-left:max(var(--pad),var(--safe-l));padding-right:max(var(--pad),var(--safe-r))}

/* ============================================================== type */
.h1{font:700 clamp(38px,10.6vw,74px)/1.06 var(--serif);letter-spacing:-.025em;color:var(--ivory);text-wrap:balance}
.h2{font:700 clamp(31px,8.4vw,52px)/1.1 var(--serif);letter-spacing:-.02em;color:var(--ivory);text-wrap:balance}
.kicker{margin-bottom:12px;font:700 12px/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.lede{margin-top:14px;max-width:33em;font-size:16.5px;line-height:1.65;color:var(--text);text-wrap:pretty}
.fineline{margin-top:12px;font:500 13px/1.5 var(--sans);color:var(--dim)}
.center{text-align:center}
.link{color:var(--gold-2);border-bottom:1px solid rgba(244,212,147,.4)}

/* ============================================================== buttons */
.pill{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 30px;margin-top:26px;border-radius:999px;
  background:linear-gradient(180deg,#F6D898,#E3AF55);color:#1A1307;font:700 16px/1.2 var(--sans);letter-spacing:.005em;
  box-shadow:0 10px 28px rgba(232,187,98,.26),inset 0 1px 0 rgba(255,255,255,.45);
  transition:transform .15s var(--ease),box-shadow .3s var(--ease)}
.pill:active{transform:scale(.97)}
.pill-wide{display:flex;width:100%}
.appstore{display:inline-flex;align-items:center;gap:10px;height:56px;padding:0 22px 0 17px;border-radius:15px;background:#03050B;
  border:1px solid rgba(255,255,255,.28);color:#fff;transition:transform .15s var(--ease)}
.appstore svg{width:25px;height:25px;fill:#fff;flex:none}
.appstore span{display:flex;flex-direction:column;line-height:1.05;text-align:left}
.appstore small{font:500 10.5px var(--sans)}
.appstore b{font:600 20.5px var(--sans);letter-spacing:-.012em}
.appstore:active{transform:scale(.97)}
.ico{width:22px;height:22px;flex:none}

/* ============================================================== the sky
   Kept from the owner's brief: a night that turns from dusk to dawn behind the
   page. Three still gradients cross-faded by opacity, so scrolling repaints
   nothing; stars drawn once. */
.sky{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:var(--ink)}
.sky-l{position:absolute;inset:0}
.sky-night{background:radial-gradient(120% 60% at 50% 118%,rgba(64,78,140,.20),transparent 62%),linear-gradient(180deg,#060912 0%,#0A0F22 55%,#0D1329 100%)}
.sky-dusk{background:radial-gradient(140% 62% at 50% 116%,rgba(198,128,96,.28),transparent 62%),linear-gradient(180deg,#151229 0%,#13132B 48%,#0C0F21 100%)}
.sky-dawn{opacity:0;background:radial-gradient(140% 62% at 50% 118%,rgba(214,150,140,.24),transparent 60%),linear-gradient(180deg,#0B1023 0%,#17183A 60%,#272246 100%)}
.sky-stars{position:absolute;inset:0;width:100%;height:100%}
.tw{position:absolute;left:var(--x);top:var(--y);width:2px;height:2px;border-radius:50%;background:#FFF2D8;
  box-shadow:0 0 6px 1px rgba(255,236,200,.55);opacity:.2;animation:tw 5s ease-in-out var(--d) infinite}
@keyframes tw{50%{opacity:.95}}
/* No moon on a phone: in a column this dense it can only ever sit on top of
   something, and at that size it reads as a smudge rather than a moon. The sky,
   its stars and its colours carry the night instead. */
.moon{display:none;position:absolute;left:0;top:0;width:34px;height:34px;border-radius:50%;opacity:.24;
  background:radial-gradient(circle at 36% 34%,#FFF6DE,#E6CD97 55%,#A6884A);
  box-shadow:0 0 26px rgba(255,236,190,.26),0 0 70px rgba(232,187,98,.12);
  transform:translate3d(92vw,10vh,0) translate(-50%,-50%);will-change:transform;transition:opacity .45s var(--ease)}
.moon.hid{opacity:0}

/* ============================================================== top bar
   Always solid, always offering the trial: on a phone that small gold button
   is the one thing every big app keeps in reach. */
.bar{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;gap:10px;
  height:calc(var(--bar) + var(--safe-t));padding:var(--safe-t) max(8px,var(--safe-r)) 0 max(16px,var(--safe-l));
  background:rgba(8,12,24,.94);box-shadow:0 1px 0 var(--hair)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .bar{background:rgba(8,12,24,.8);-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%)}
}
.brand{display:inline-flex;align-items:center;gap:12px;min-height:44px;margin-right:auto;font:700 26px/1 var(--serif);letter-spacing:-.01em;color:var(--ivory)}
.tm{font:500 .42em/0 var(--sans);letter-spacing:0;vertical-align:.95em;margin-left:2px}
.brand img{width:40px;height:40px;border-radius:10.5px;box-shadow:0 0 0 1px rgba(232,187,98,.35)}
.nav{display:none}
.bar-cta{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;border:1.5px solid var(--gold);
  font:700 13.5px/1 var(--sans);color:var(--gold-2);white-space:nowrap;transition:background-color .2s,color .2s,transform .15s var(--ease)}
.bar-cta:active{transform:scale(.96);background:var(--gold);color:#1A1307}
.menu-btn{display:grid;align-content:center;justify-items:center;gap:5px;width:46px;height:46px;border-radius:50%}
.menu-btn i{display:block;width:20px;height:1.8px;border-radius:2px;background:var(--ivory)}
.menu-btn:active{background:rgba(255,255,255,.07)}

/* ============================================================== menu */
.menu{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;
  padding:var(--safe-t) max(var(--pad),var(--safe-r)) calc(24px + var(--safe-b)) max(var(--pad),var(--safe-l));
  background:radial-gradient(120% 50% at 50% 0%,rgba(232,187,98,.08),transparent 60%),#070A14;
  opacity:0;visibility:hidden;transition:opacity .28s var(--ease),visibility 0s linear .28s}
.menu.open{opacity:1;visibility:visible;transition:opacity .28s var(--ease)}
.menu-top{display:flex;align-items:center;justify-content:space-between;height:var(--bar);flex:none}
.menu-close{position:relative;width:46px;height:46px;margin-right:-8px;border-radius:50%}
.menu-close i{position:absolute;left:13px;top:22px;width:20px;height:1.8px;border-radius:2px;background:var(--ivory)}
.menu-close i:first-child{transform:rotate(45deg)}.menu-close i:last-child{transform:rotate(-45deg)}
.menu nav{display:flex;flex-direction:column;margin-top:20px}
.menu nav a{display:flex;align-items:center;justify-content:space-between;min-height:66px;border-bottom:1px solid var(--hair);
  font:700 30px/1.1 var(--serif);color:var(--ivory);opacity:0;transform:translateY(10px);
  transition:opacity .3s var(--ease),transform .35s var(--out)}
.menu nav a span{font:500 20px var(--sans);color:var(--gold)}
.menu.open nav a{opacity:1;transform:none;transition-delay:calc(.04s + var(--n) * .04s)}
.menu-foot{margin-top:auto;padding-top:30px}
.menu-foot .pill{margin-top:0}

/* ============================================================== hero */
.hero{padding-top:calc(var(--bar) + var(--safe-t) + 30px);overflow:hidden}
.badge{display:inline-flex;align-items:center;gap:9px;min-height:32px;padding:0 14px;border-radius:999px;margin-bottom:18px;
  border:1px solid var(--line);background:rgba(232,187,98,.07);font:600 12.5px/1 var(--sans);color:var(--gold-2)}
.badge .dot{width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold)}
.hero .lede{font-size:17px}
.hero-cta{margin-top:26px}
/* Apple's badge file, unaltered; Apple asks for clear space of a quarter of its height */
.store-badge{display:block;width:fit-content}
.store-badge img{display:block;width:auto;height:64px}
.store-badge:hover{opacity:.85}
.store-badge:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:10px}
.store-badge + .fineline{margin-top:16px}
/* until launch day (COMING_SOON in gen.py): the pre-order link */
.soon{display:block;width:fit-content;margin-top:28px;font:700 clamp(36px,9.4vw,50px)/1.05 var(--serif);letter-spacing:-.02em;color:var(--gold)}
.soon span{display:block;margin-top:6px;font:400 clamp(19px,5vw,24px)/1.3 var(--serif);letter-spacing:0;color:var(--ivory)}
.soon:hover span{color:var(--gold-2)}
.soon + .hero-cta{margin-top:24px}
/* the app in a phone, standing in the mosaic like a lit window */
.hero-stage{position:relative;height:470px;margin-top:40px;overflow-x:clip}
.scene{position:absolute;left:0;right:0;bottom:0;height:300px;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 34%,#000 70%,transparent);mask-image:linear-gradient(180deg,transparent,#000 34%,#000 70%,transparent)}
.scene img{width:100%;height:100%;object-fit:cover;object-position:50% 38%;opacity:.55}
.hero-stage .phone{position:absolute;left:50%;top:0;width:212px;margin-left:-106px}
.up{opacity:0;transform:translateY(12px);animation:up .45s var(--out) var(--d,0s) forwards}
@keyframes up{to{opacity:1;transform:none}}

/* ============================================================== phone frame */
.phone{position:relative;aspect-ratio:804/1748;border-radius:36px;overflow:hidden;background:#000;
  box-shadow:0 0 0 7px #10131C,0 0 0 8px rgba(232,187,98,.32),0 34px 70px rgba(0,0,0,.65)}
.phone img{position:absolute;left:0;width:100%}
.phone .base{top:0}
.phone .shade{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.phone .over{bottom:0}

/* ============================================================== sections */
.sec{padding-top:92px}
.rv{opacity:0;transform:translateY(12px);transition:opacity .4s var(--ease) var(--d,0s),transform .45s var(--out) var(--d,0s)}
.rv.in,.no-js .rv{opacity:1;transform:none}
.no-js .up{opacity:1;transform:none;animation:none}

/* ============================================================== library wall */
/* the wall is wider than the screen so its tilted ends never show; the
   section keeps that width to itself, or a phone would pan sideways */
.library{overflow:hidden}
.wall{position:relative;width:124%;margin:38px 0 0 -12%;transform:rotate(-4deg);display:grid;gap:12px;padding:10px 0}
.marq{overflow:hidden}
/* The two rows drift sideways only as the page is scrolled, in opposite
   directions (learned from Sleepiest): it reads as a living library without
   anything moving on its own while you read. The script writes a transform
   while the wall is on screen; these are the resting positions. */
.marq-in{display:flex;gap:12px;width:max-content;transform:translate3d(var(--x,-560px),0,0);will-change:transform}
.m2 .marq-in{--x:-880px}
.tile{width:118px;height:118px;border-radius:14px;object-fit:cover;flex:none;box-shadow:0 10px 24px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.06)}
.library .wrap:last-child{margin-top:6px}

/* ============================================================== features */
.feat-copy .pill{margin-top:28px}
.ticks{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:12px}
.ticks li{display:flex;align-items:center;gap:12px;font:500 15.5px/1.4 var(--sans);color:#E1D7C7}
.ticks .ico{width:24px;height:24px;padding:4px;border-radius:50%;background:rgba(232,187,98,.15);color:var(--gold);stroke-width:2.6}
.feat-art{position:relative;height:500px;margin-top:44px;overflow-x:clip}
.feat-art .phone{position:absolute;left:50%;top:10px;width:214px;margin-left:-107px}
.glow{position:absolute;left:50%;top:46%;width:360px;height:360px;margin:-180px 0 0 -180px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(232,187,98,.20),rgba(232,187,98,.06) 55%,transparent)}

/* The stories block carries no phone: the player is already the picture in
   the hero just above it, and showing the same screen twice in a row reads as
   filler. On a wide screen the words take the one column, centred on the page's
   left edge like every other heading. */

/* ============================================================== collections */
[data-rail]{position:relative}
.rail{display:flex;gap:14px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;padding:30px max(var(--pad),var(--safe-r)) 8px max(var(--pad),var(--safe-l));
  scroll-padding-inline:max(var(--pad),var(--safe-l))}
.rail::-webkit-scrollbar{display:none}
.rail>*{flex:0 0 auto;scroll-snap-align:start}
.rail::after{content:"";flex:0 0 1px}
.rail:focus-visible{outline-offset:-2px;border-radius:0}
.shelf{width:min(78vw,320px);border-radius:24px;overflow:hidden;background:var(--ink-2);border:1px solid var(--hair);
  box-shadow:0 20px 44px rgba(0,0,0,.35);transition:border-color .35s var(--ease)}
.shelf.on{border-color:var(--line)}
.collage{display:grid;grid-template-columns:1fr 1fr;gap:3px;background:#000}
.collage img{width:100%;aspect-ratio:1;object-fit:cover}
.shelf-body{padding:18px 20px 22px}
.shelf h3{font:700 24px/1.15 var(--serif);color:var(--ivory)}
.shelf-body p{margin-top:6px;font-size:14.5px;line-height:1.55;color:var(--dim)}
.rail-foot{display:flex;justify-content:center;margin-top:6px;min-height:44px}
.dots{display:flex}
.dots button{display:grid;place-items:center;width:24px;height:44px}
.dots button::before{content:"";width:7px;height:7px;border-radius:4px;background:rgba(232,187,98,.3);transition:width .3s var(--out),background-color .3s}
.dots button[aria-current="true"]::before{width:22px;background:var(--gold)}
.rail-foot.hidden{display:none}

/* ============================================================== eras: five cards
   One wide picture per age with its dates, name and a single line, set low on
   a dark fade so the art stays clear above it. A column on a phone; two by two
   with the last centred on a tablet; three over two on a wide screen. */
.era-grid{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:12px}
.era{position:relative;aspect-ratio:2/1;border-radius:20px;overflow:hidden;background:var(--ink-2);border:1px solid var(--hair);
  box-shadow:0 18px 40px rgba(0,0,0,.35)}
.era img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.era-txt{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:16px 18px;
  background:linear-gradient(180deg,rgba(8,12,24,0) 28%,rgba(8,12,24,.55) 58%,rgba(8,12,24,.9))}
.era-years{font:700 11px/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.era h3{margin-top:5px;font:400 clamp(24px,6.6vw,28px)/1.1 var(--serif);letter-spacing:-.01em;color:var(--ivory);text-shadow:0 1px 12px rgba(0,0,0,.45)}
.era-line{margin-top:4px;font:400 13.5px/1.4 var(--sans);color:rgba(244,237,224,.78);text-shadow:0 1px 8px rgba(0,0,0,.5)}


/* ============================================================== premium */
.prem-card{position:relative;max-width:560px;margin:0 auto;overflow:hidden;border-radius:28px;
  background:radial-gradient(120% 55% at 50% 0%,rgba(232,187,98,.14),transparent 62%),linear-gradient(180deg,#111830,#0A0E1D);
  border:1px solid rgba(232,187,98,.32);box-shadow:0 30px 80px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,236,190,.1)}
.prem-card .ticks{margin-top:22px}
/* The library behind the offer. The app's own Premium screen opens on this same
   tilted wall of covers; here it is a band across the top of the card that
   fades into the words, and on a wide screen the right half of the card. It
   holds still: the plans are the thing to read. */
.prem-art{position:relative;height:190px;overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000 22%,transparent 80%);mask-image:linear-gradient(180deg,#000 22%,transparent 80%)}
.mosaic{position:absolute;left:50%;top:50%;display:grid;grid-template-columns:repeat(6,96px);gap:10px;opacity:.8;
  transform:translate(-50%,-50%) rotate(-8deg)}
.mosaic img{width:96px;height:96px;border-radius:14px;object-fit:cover;box-shadow:0 8px 20px rgba(0,0,0,.4)}
.prem-body{position:relative;margin-top:-58px;padding:0 20px 24px}
.plans{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:28px 0 16px}
.plan{position:relative;display:flex;flex-direction:column;align-items:flex-start;min-height:112px;padding:18px 15px 14px;border-radius:18px;text-align:left;
  border:1.5px solid rgba(244,237,224,.15);background:rgba(255,255,255,.03);transition:border-color .2s var(--ease),background-color .2s var(--ease),transform .15s var(--ease)}
.plan[aria-checked="true"]{border-color:var(--gold);background:linear-gradient(180deg,rgba(232,187,98,.18),rgba(232,187,98,.04))}
.plan:active{transform:scale(.98)}
.plan b{font:600 13px var(--sans);color:#D8CEBE}
.plan strong{margin-top:8px;font:800 26px/1 var(--sans);letter-spacing:-.02em;color:#fff}
.plan small{margin-top:7px;font-size:12px;color:var(--dim)}
.plan .tag{position:absolute;top:-10px;left:12px;padding:4px 9px;border-radius:999px;background:var(--gold);color:#1A1307;font:800 9.5px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase}
.prem-card .pill{margin-top:8px}
.prem-card .fineline{text-wrap:balance}


/* ============================================================== faq */
.qa{margin-top:26px;border-top:1px solid var(--hair)}
.qa details{border-bottom:1px solid var(--hair)}
.qa summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:16px 0;
  font:600 16px/1.4 var(--sans);color:var(--ivory);cursor:pointer}
.qa summary::-webkit-details-marker{display:none}
.qa summary i{position:relative;flex:none;width:28px;height:28px;border-radius:50%;background:var(--panel-2)}
.qa summary i::before,.qa summary i::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:2px;margin:-1px 0 0 -5.5px;border-radius:2px;background:var(--gold)}
.qa summary i::after{transform:rotate(90deg);transition:transform .3s var(--out)}
.qa details[open] summary i::after{transform:rotate(0)}
.ans{padding:0 40px 20px 0;font-size:15px;line-height:1.7}
.ans p+p{margin-top:10px}
.qa details[open] .ans{animation:ans .35s var(--out)}
@keyframes ans{from{opacity:0;transform:translateY(-6px)}}
.more{margin-top:22px;font-size:15px;line-height:1.7}

/* ============================================================== download band */
.end{padding:92px max(var(--pad),var(--safe-r)) 84px max(var(--pad),var(--safe-l))}
.end-card{max-width:760px;margin:0 auto;padding:40px 22px 36px;border-radius:30px;text-align:center;
  background:radial-gradient(90% 70% at 50% 0%,rgba(232,187,98,.16),transparent 65%),linear-gradient(180deg,#121A33,#0A0E1D);
  border:1px solid rgba(232,187,98,.3)}
.end-icon{width:76px;height:76px;margin:0 auto 22px;border-radius:19px;box-shadow:0 14px 34px rgba(0,0,0,.5),0 0 0 1px rgba(232,187,98,.4)}
.vow{font:700 clamp(40px,11.4vw,76px)/1.04 var(--serif);letter-spacing:-.025em;color:var(--ivory)}
.vow mark{display:block}
.end-card>p{max-width:26em;margin:16px auto 0;font-size:16px;line-height:1.65}
.end-cta{display:flex;flex-direction:column;align-items:center;margin-top:26px}

/* ============================================================== footer */
.foot{border-top:1px solid var(--hair);background:rgba(4,6,12,.55);
  padding:44px max(var(--pad),var(--safe-r)) calc(40px + var(--safe-b)) max(var(--pad),var(--safe-l))}
.foot-in{max-width:1160px;margin:0 auto;display:grid;gap:30px}
.foot-brand .brand{gap:14px;font-size:32px}
.foot-brand .brand img{width:52px;height:52px;border-radius:14px}
.foot-brand p{margin:12px 0 18px;font-size:14.5px;color:var(--dim)}
.socials{display:flex;gap:10px;margin-top:14px}
.socials a{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;border:1px solid var(--hair);color:#D9CFBF;
  transition:color .2s,border-color .2s,transform .15s var(--ease)}
.socials a:hover{color:var(--gold-2);border-color:var(--line)}
.socials a:active{transform:scale(.94)}
.socials svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.socials .dot{fill:currentColor;stroke:none}
.foot-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px 18px}
.foot-cols h4{margin-bottom:6px;font:700 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.foot-cols a{display:flex;align-items:center;min-height:40px;font-size:15px;color:#D9CFBF}
/* the copyright line, with Privacy and Terms beside it: small, on the last line, as the big sites do */
.foot-base{display:flex;flex-direction:column;gap:4px;padding-top:12px;border-top:1px solid var(--hair)}
.legal{font-size:12px;line-height:1.6;color:var(--dim)}
.foot-legal{order:-1;display:flex;gap:26px}
.foot-legal a{display:flex;align-items:center;min-height:44px;font-size:13px;color:var(--dim);transition:color .2s}
.foot-legal a:hover{color:#D9CFBF}

/* ============================================================== very small phones */
@media (max-width:359px){
  :root{--pad:16px}
  .brand span{display:none}
}
/* ============================================================== text pages */
.page{min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
.page .bar{background-color:rgba(7,10,20,.94);box-shadow:0 1px 0 var(--hair)}
.page .bar::before{opacity:0}
.article,.faq-page,.studio-page{flex:1;width:100%;max-width:760px;margin:0 auto;
  padding:calc(var(--bar) + var(--safe-t) + 44px) max(var(--pad),var(--safe-r)) 80px max(var(--pad),var(--safe-l))}
.article h1{font:300 clamp(36px,9.4vw,60px)/1.06 var(--serif);letter-spacing:-.02em;color:var(--ivory)}
.article .intro{margin-top:16px;font-size:16.5px;line-height:1.7;color:#D3C8B6}
.article .meta{margin-top:12px;font-size:13px;color:var(--dim)}
.article h2{margin:48px 0 14px;font:400 24px/1.25 var(--serif);color:var(--ivory)}
.article h3{margin:28px 0 8px;font:600 15px/1.4 var(--sans);color:#E6DCCB}
.article p,.article li{font-size:15.5px;line-height:1.75}
.article p+p{margin-top:12px}
.article ul{padding-left:20px;margin:12px 0}
.article li+li{margin-top:6px}
.article a:not(.btn){color:var(--gold-2);border-bottom:1px solid rgba(240,203,130,.35)}
.article b,.article strong{color:#E6DCCB;font-weight:600}
.article .contact{margin-top:24px}
.article .faq{border-top:1px solid var(--hair)}
.article .faq details{border-bottom:1px solid var(--hair)}
.article .faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;padding:14px 0;
  font:500 15.5px/1.45 var(--sans);color:var(--ivory);cursor:pointer}
.article .faq summary::-webkit-details-marker{display:none}
.article .faq summary::after{content:"+";flex:none;font:300 22px/1 var(--sans);color:var(--gold);transition:transform .3s var(--out)}
.article .faq details[open] summary::after{transform:rotate(45deg)}
.article .faq details p{padding:0 0 18px}
.article .tblwrap{overflow-x:auto;margin:16px 0;border:1px solid var(--hair);border-radius:14px}
.article table{border-collapse:collapse;width:100%;min-width:520px;font-size:14px}
.article th,.article td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--hair)}
.article th{font-weight:600;color:#E6DCCB}
.article .box{margin:22px 0;padding:18px 18px;border-radius:16px;border:1px solid var(--line);background:rgba(227,180,94,.05)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 22px;border-radius:14px;font:600 15px var(--sans);
  transition:transform .15s var(--ease)}
.btn:active{transform:scale(.97)}
.btn-gold.btn,.btn.btn-gold{width:auto;background:linear-gradient(180deg,#F2CF8A,#DCA84E);color:#1C1408}
.btn-glass{border:1px solid var(--line);color:var(--ivory);background:rgba(255,255,255,.04)}
/* the contact page: three steps before the form, the big-app way */
.cflow{margin-top:26px;max-width:560px}
.cstep h3{font:400 24px/1.25 var(--serif);color:var(--ivory)}
.cstep h3:focus{outline:none}
.csub{margin-top:6px;font-size:15px;color:var(--text)}
.copts{margin-top:16px;display:grid;gap:10px}
.copt{display:grid;gap:3px;text-align:left;padding:14px 16px;min-height:64px;border-radius:16px;
  border:1px solid var(--hair);background:rgba(255,255,255,.03);transition:border-color .2s,background-color .2s,transform .15s var(--ease)}
.copt:active{transform:scale(.985)}
.copt[aria-checked="true"]{border-color:var(--gold);background:rgba(232,187,98,.08)}
.copt b{font:600 15.5px/1.3 var(--sans);color:var(--ivory)}
.copt span{font-size:13.5px;color:var(--dim)}
.cnext{margin-top:16px;width:100%}
.cnext:disabled{opacity:.45}
.cback{display:inline-flex;align-items:center;min-height:44px;margin-bottom:2px;font:600 14px var(--sans);color:var(--gold-2)}
#cf-articles{margin-top:14px;border-top:1px solid var(--hair)}
.cask{margin-top:22px;font:600 15.5px/1.4 var(--sans);color:var(--ivory)}
.cduo{margin-top:12px;display:grid;gap:10px}
@media (min-width:520px){.cduo{grid-template-columns:1fr 1fr}}
/* the form itself */
.cform{margin-top:18px;display:grid;gap:6px;max-width:520px}
.cform label{margin-top:10px;font:700 12px/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.cform select,.cform input,.cform textarea{width:100%;min-height:50px;padding:13px 14px;border-radius:14px;
  border:1px solid var(--hair);background:rgba(255,255,255,.04);color:var(--ivory);
  font:400 16px/1.45 var(--sans);-webkit-appearance:none;appearance:none}
.cform textarea{resize:vertical;min-height:140px}
.cform select{background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 21px) 50%,calc(100% - 15px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px}
.cform :is(select,input,textarea):focus-visible{outline:2px solid var(--line);outline-offset:1px;border-color:var(--line)}
.cform ::placeholder{color:rgba(201,191,174,.45)}
.cform .cf-extra{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.cf-err{margin-top:6px;font-size:14px;color:#E8A08C}
.cform .btn{margin-top:14px;width:100%}
.cform .btn:disabled{opacity:.55}
.cform-done{margin-top:18px;max-width:520px;padding:22px 20px;border-radius:18px;border:1px solid var(--line);background:rgba(227,180,94,.07)}
.cform-done h3{font:700 19px/1.2 var(--serif);color:var(--ivory)}
.cform-done p{margin-top:6px;font-size:15px}
.cform-done b{color:var(--gold-2);font-weight:600}
.page .foot{margin-top:auto}
/* the FAQ page: the same questions and look as the home page once had */
.faq-page .qa{margin-top:30px}
.page .nav a[aria-current="page"],.foot-cols a[aria-current="page"]{color:var(--gold)}
.article-404{display:flex;flex-direction:column;justify-content:center;text-align:center;align-items:center}
.article-404 .eyebrow::before{display:none}
/* the studio pages. /studio: one card per channel, Learn more to the channel's
   own page. /studio/<slug>: the logo and name, what it makes, the facts at a
   glance, a few films, then the studio's other channels as the same cards */
.studio-page .lede{max-width:30em}
.studio-page>h2{margin:52px 0 16px;font:400 24px/1.25 var(--serif);color:var(--ivory)}
.studio-page>p{font-size:15.5px;line-height:1.75;max-width:36em}
.studio-page>p+p{margin-top:12px}
.chans{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:12px}
h2+.chans{margin-top:0}
.chan{position:relative;display:grid;grid-template-columns:64px 1fr;gap:16px;align-items:start;padding:18px;border-radius:20px;
  border:1px solid var(--hair);background:rgba(255,255,255,.03);transition:border-color .2s,background-color .2s,transform .15s var(--ease)}
.chan:hover{border-color:var(--line);background:rgba(232,187,98,.05)}
.chan:active{transform:scale(.985)}
.chan:focus-within{border-color:var(--line)}
.chan img{width:64px;height:64px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px rgba(232,187,98,.3)}
.chan img.sq{border-radius:16px}
.chan-kind{margin-right:40px;font:700 11px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.chan :is(h2,h3){margin-top:5px;font:400 22px/1.2 var(--serif);color:var(--ivory)}
.chan :is(h2,h3) a{color:inherit}
.chan :is(h2,h3) a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.chan :is(h2,h3) a:focus-visible{outline:none}
.chan:has(a:focus-visible){outline:2px solid var(--gold);outline-offset:3px}
.chan-say{margin-top:4px;font-size:14.5px;line-height:1.55;color:var(--text)}
.chan-arrow{position:absolute;top:14px;right:14px;width:30px;height:30px;padding:7px;border-radius:50%;border:1px solid var(--hair);pointer-events:none;
  fill:none;stroke:var(--gold-2);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--ease),border-color .2s}
.chan:hover .chan-arrow{transform:translateX(3px);border-color:var(--line)}
.show-go svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.show-go .dot{fill:currentColor;stroke:none}
.show-go .yt-logo{width:24px;height:17px;stroke:none}
.show-back{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:-10px 0 18px;font:600 14px var(--sans);color:var(--gold-2)}
.show-head{display:grid;gap:22px}
.show-logo{width:104px;height:104px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px rgba(232,187,98,.35),0 14px 34px rgba(0,0,0,.5)}
.show-logo[src$=".png"]{border-radius:26px}
.show-go{gap:9px;margin-top:24px}
.facts{margin:0;border-top:1px solid var(--hair)}
.facts div{display:grid;grid-template-columns:7.5em 1fr;gap:14px;padding:13px 0;border-bottom:1px solid var(--hair)}
.facts dt{padding-top:2px;font:700 11.5px/1.6 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.facts dd{margin:0;font-size:15px;line-height:1.55;color:#E6DCCB}
.films{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:18px 12px}
.films a{display:block;transition:transform .15s var(--ease)}
.films a:active{transform:scale(.97)}
.films img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:12px;box-shadow:0 0 0 1px var(--hair)}
.films span{display:block;margin-top:8px;font-size:13.5px;line-height:1.4;color:#D9CFBF}
.films a:hover span{color:var(--gold-2)}
@media (min-width:760px){
  .chans{margin-top:40px;gap:14px}
  .chan{grid-template-columns:76px 1fr;gap:22px;padding:22px 24px;align-items:center}
  .chan img{width:76px;height:76px}
  .chan img.sq{border-radius:19px}
  .chan :is(h2,h3){font-size:25px}
  .chan-arrow{top:50%;right:22px;width:34px;height:34px;margin-top:-17px}
  .chan:hover .chan-arrow{transform:translateX(3px)}
  .chan>div{padding-right:56px}
  .show-head{grid-template-columns:auto 1fr;align-items:center;gap:32px}
  .show-logo{width:148px;height:148px}
  .show-logo[src$=".png"]{border-radius:36px}
  .facts div{grid-template-columns:10em 1fr}
  .films{grid-template-columns:repeat(3,1fr);gap:24px 18px}
  .films span{font-size:14px}
}

/* ============================================================== story pages
   /s/<id>: where a story shared from the app opens when the app is not
   installed (the Worker in _worker/ fills in s/index.html). The app's story
   page in the site's type: the cover, the title, one line of facts, the way
   in (Apple's own badge, at its height and with its clear space), then the
   hook and the description. One column on a phone; from 960 the cover
   stays beside the words. */
.story{flex:1;width:100%;max-width:640px;margin:0 auto;
  padding:calc(var(--bar) + var(--safe-t) + 28px) max(var(--pad),var(--safe-r)) 76px max(var(--pad),var(--safe-l))}
.story-cover{width:min(100%,340px);margin:0 auto;aspect-ratio:1;border-radius:22px;overflow:hidden;background:var(--ink-2);
  box-shadow:0 26px 60px rgba(0,0,0,.55),0 0 0 1px rgba(232,187,98,.26)}
.story-cover img{width:100%;height:100%;object-fit:cover}
.story-head{margin-top:30px;text-align:center}
.story-head .kicker{margin-bottom:10px}
.story-title{font:700 clamp(32px,8.6vw,50px)/1.08 var(--serif);letter-spacing:-.02em;color:var(--ivory);text-wrap:balance}
.story-meta{margin-top:12px;font:500 14px/1.6 var(--sans);color:var(--dim)}
.story-meta span{white-space:nowrap}
.story-meta i{font-style:normal;margin:0 .55em;color:rgba(201,191,174,.5)}
.story-meta b{font-weight:600;color:var(--gold)}
.story-count{margin-top:4px;font:600 13.5px/1.5 var(--sans);color:var(--gold)}
.story-get{display:flex;justify-content:center;margin-top:26px}
.story-get a{display:block;border-radius:9px}
/* Apple's badge is never animated, so no press effect (its guidelines); the
   site's focus ring goes round it outside its clear space, a quarter of its
   52px height, and the 404 page's button keeps clear of that ring */
.story-get a:focus-visible{outline-offset:13px}
.story-get img{width:auto;height:52px}
.story-hook{position:relative;margin:40px 0 0;padding:0 0 22px 34px;font:400 23px/1.36 var(--serif);letter-spacing:-.005em;color:var(--ivory);text-wrap:pretty}
.story-hook::before{content:"\201C";position:absolute;left:-2px;top:-.06em;font:400 54px/1 var(--serif);color:var(--gold)}
.story-hook::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,rgba(196,148,66,.85),transparent 70%)}
.story-desc{margin-top:22px}
.story-head + .story-desc{margin-top:40px}
.story-desc p{font:400 17.5px/1.72 var(--serif);color:#D3C8B6;text-wrap:pretty}
.story-desc p+p{margin-top:14px}
.article-404 .story-get{margin-top:28px}
.article-404 .story-get + .contact{margin-top:20px}
@media (min-width:960px){
  .story{display:grid;grid-template-columns:400px minmax(0,620px);column-gap:64px;align-items:start;justify-content:center;
    max-width:1160px;padding-top:calc(var(--bar) + 64px);padding-bottom:110px}
  .story-cover{width:400px;margin:0;position:sticky;top:calc(var(--bar) + 40px)}
  .story-head{margin-top:0;text-align:left}
  .story-get{justify-content:flex-start}
  .article-404 .story-get{justify-content:center}
  .story-bare{grid-template-columns:minmax(0,680px)}
}


/* ============================================================== short screens
   A phone on its side is about 390px tall. */
@media (max-height:520px) and (orientation:landscape){
  .menu nav a{min-height:52px;font-size:24px}
  .hero-stage{height:420px}
}

/* ============================================================== wider screens */
@media (min-width:760px){
  :root{--pad:36px;--bar:70px}
  .sec{padding-top:120px}
  .moon{display:block;width:56px;height:56px;opacity:.5}
      .prem-card{max-width:720px}
  .prem-art{height:230px}
  .mosaic{grid-template-columns:repeat(6,120px);gap:12px}
  .mosaic img{width:120px;height:120px;border-radius:16px}
  .prem-body{margin-top:-50px;padding:0 40px 34px}
  .end-card{padding:56px 40px 48px}
  .foot-in{grid-template-columns:1.2fr 2fr;align-items:start}
  .foot-cols{grid-template-columns:repeat(3,auto);justify-content:end;column-gap:clamp(40px,6vw,96px)}
  .foot-base{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between;gap:24px;padding-top:8px}
  .foot-legal{order:0;flex:none}
  .ans{padding-right:60px}
  .era-grid{grid-template-columns:repeat(4,1fr);gap:16px;margin-top:36px}
  .era{grid-column:span 2}
  .era:nth-child(5){grid-column:2/4}
}
@media (min-width:960px){
  .bar{padding-left:max(36px,calc((100vw - 1160px)/2 + 36px));padding-right:max(36px,calc((100vw - 1160px)/2 + 36px));gap:26px}
  .brand{margin-right:0}
  .nav{display:flex;gap:26px;margin-left:auto}
  .nav a{display:inline-flex;align-items:center;min-height:44px;font:600 14.5px var(--sans);color:#DDD3C3;transition:color .2s}
  .nav a:hover{color:var(--gold-2)}
  .bar-cta{min-height:44px;padding:0 22px;font-size:14.5px}
  .bar-cta:hover{background:var(--gold);color:#1A1307}
  .menu-btn{display:none}
  /* lit, not grey: at half strength the disc read as a smudge */
  .moon{width:52px;height:52px;opacity:.85}
  /* the hero: words on the left, the app on the right */
  .hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;column-gap:20px;
    max-width:1160px;margin:0 auto;padding-left:36px;padding-right:36px;padding-top:calc(var(--bar) + 60px)}
  .hero-copy{padding:0}
  .hero-cta{max-width:420px}
  .hero-stage{margin-top:0;height:560px}
  .hero-stage .phone{width:250px;margin-left:-125px}
  /* on a wide screen the scene has side edges too; let them dissolve */
  .scene{height:400px;-webkit-mask-image:radial-gradient(closest-side,#000 55%,transparent);mask-image:radial-gradient(closest-side,#000 55%,transparent)}
    .feat-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:40px}
  .feat-flip .feat-copy{order:2}
  .feat-art{margin-top:0;height:560px}
  .feat-art .phone{width:240px;margin-left:-120px;top:20px}
  .wall{width:110%;margin-left:-5%}
  .tile{width:150px;height:150px}
  /* the collections are few enough to show at once */
  #coll-rail{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;overflow:visible;max-width:1160px;margin:0 auto;padding:40px 36px 0}
  #coll-rail::after{display:none}
  #coll-rail .shelf{width:auto}
  [data-foot="coll-rail"]{display:none}
  /* three over two, the second row centred, and the cards arrive one after another */
  .prem-card{max-width:1080px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr)}
  .prem-art{grid-area:1/2;height:auto;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 50%);mask-image:linear-gradient(90deg,transparent,#000 50%)}
  .mosaic{grid-template-columns:repeat(5,128px);gap:14px;opacity:.6}
  .mosaic img{width:128px;height:128px;border-radius:18px}
  .prem-body{grid-area:1/1;margin-top:0;padding:44px 40px 34px}
  .era-grid{grid-template-columns:repeat(6,1fr);gap:20px;margin-top:40px}
  .era,.era:nth-child(5){grid-column:span 2}
  .era:nth-child(4){grid-column:2/4}
  .era.rv{--d:calc(var(--i) * .06s)}
  .era-txt{padding:20px 22px}
  .shelf:hover{border-color:var(--line)}
  .pill:hover{box-shadow:0 14px 38px rgba(232,187,98,.36),inset 0 1px 0 rgba(255,255,255,.45)}
}

/* ============================================================== less motion */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .up{animation:none;opacity:1;transform:none}
  .rv{opacity:1;transform:none;transition:none}
  .tw{animation:none}
  .menu,.menu nav a{transition:none}
  .qa details[open] .ans{animation:none}
}