@font-face{font-family:Geist;src:url('/fonts/geist-latin.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:Geist Mono;src:url('/fonts/geist-mono-latin.woff2') format('woff2');font-weight:100 900;font-display:swap}
:root{--cream:#f8f2e8;--sand:#eadcc8;--ink:#30271f;--muted:#65574a;--rust:#a8472f;--line:#d9ccba;--coral:#a8472f;color:var(--ink);background:var(--cream);font-family:Geist,Arial,sans-serif;font-synthesis:none;scroll-behavior:smooth;scroll-padding-top:95px}
*{box-sizing:border-box}body{margin:0}button,input{font:inherit}a{color:inherit;text-decoration:none}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--rust);outline-offset:5px}img,video{display:block;max-width:100%}button{color:inherit}h1,h2,p,figure{margin:0}h2{font-size:clamp(38px,4.7vw,70px);line-height:1.04;letter-spacing:-.055em;font-weight:560}h2 em{font-family:Georgia,serif;font-weight:400;letter-spacing:-.055em}p{line-height:1.6}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;top:10px;left:20px;transform:translateY(-160%);z-index:20;background:var(--ink);color:var(--cream);padding:14px}.skip-link:focus{transform:none}.site-header{height:86px;display:flex;align-items:center;justify-content:space-between;padding:0 4.5%;border-bottom:1px solid var(--line);gap:20px}.brand{display:inline-flex;align-items:center;gap:8px;font-size:27px;font-weight:760;letter-spacing:-1.3px}.brand img{border-radius:7px}.site-header nav{display:flex;align-items:center;gap:36px;font-size:14px}.nav-join{border:1px solid var(--ink);border-radius:40px;padding:12px 19px}.nav-join span{margin-left:14px}.eyebrow{font-family:Geist Mono,monospace;font-size:14px;letter-spacing:.04em;line-height:1.5}.hero{position:relative;padding-top:28px}.hero-heading{text-align:center;position:absolute;z-index:2;top:4.4vw;left:0;right:0;pointer-events:none}.hero-heading .eyebrow{margin-bottom:6px}.hero h1{font-size:clamp(84px,14.5vw,240px);letter-spacing:-.085em;font-weight:850;line-height:1;display:inline-block;position:relative;color:#382b21}.world-stage{position:relative;overflow:hidden;margin:0 20px;border-radius:8px;background:#b6d4ed;isolation:isolate}.world-film{width:100%;aspect-ratio:16/9;object-fit:cover}.world-stage:after{content:'';position:absolute;pointer-events:none;inset:75% 0 0;background:linear-gradient(transparent,rgba(47,37,24,.45));z-index:0}.world-bottom{position:absolute;bottom:24px;left:28px;right:28px;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px;color:white}.world-caption{display:flex;gap:10px;align-items:center;font-size:14px;text-shadow:0 1px 5px #30271f}.live-dot{width:7px;height:7px;border-radius:50%;background:#d8e9a4}.film-controls{display:flex;gap:8px}.film-controls button{border:1px solid #fff9;background:#30271fba;color:#fff;border-radius:30px;font-size:14px;padding:10px 15px;min-height:44px}.hero-invitation{padding:28px 4.5% 36px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px}.hero-invitation p{font-size:16px;line-height:1.5}.pill{display:inline-flex;justify-content:center;align-items:center;gap:42px;padding:18px 27px;border:1px solid var(--ink);background:var(--ink);color:var(--cream);border-radius:50px;font-size:16px;font-weight:550;transition:background .2s,transform .2s}.pill:hover{background:var(--rust);border-color:var(--rust);transform:translateY(-2px)}.hero-footnote{font-family:Geist Mono,monospace;font-size:14px;text-align:right;color:var(--muted)}.section-wrap{max-width:1360px;margin:0 auto;padding-left:6%;padding-right:6%}.arrival{text-align:center;padding-top:125px;padding-bottom:90px}.arrival:focus{outline:none}.arrival .eyebrow{color:var(--rust);margin-bottom:25px}.section-intro{font-size:19px;color:var(--muted);margin:26px auto 0}.chapter-links{display:flex;justify-content:center;gap:38px;margin-top:64px;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-family:Geist Mono,monospace;font-size:14px}.chapter-links a:hover,.text-link:hover{text-decoration:underline;text-underline-offset:5px}.chapter{display:grid;grid-template-columns:1fr 1.12fr;gap:7%;align-items:center;padding-top:55px;padding-bottom:95px}.chapter-copy .eyebrow{color:var(--rust);margin-bottom:28px}.chapter-copy h2{font-size:clamp(38px,4.5vw,66px)}.chapter-copy>p:not(.eyebrow){font-size:18px;max-width:370px;color:var(--muted);margin-top:26px}.text-link{display:inline-flex;gap:25px;align-items:center;margin-top:28px;padding-bottom:9px;border-bottom:1px solid var(--ink);font-size:16px}.margin-note{margin-top:60px;font-family:Georgia,serif;font-style:italic;font-size:20px;color:var(--muted);max-width:230px;transform:rotate(-4deg)}.product-scene{position:relative;min-width:0;height:660px;border-radius:160px 160px 12px 12px;overflow:hidden}.plans-scene{background:#e9be99}.scene-label{position:absolute;top:52px;left:14%;right:14%;font-family:Geist Mono,monospace;font-size:14px;letter-spacing:.03em;display:flex;justify-content:space-between}.phone{border-radius:26px;border:6px solid #332c26;box-shadow:0 23px 36px #50342230;width:235px;height:auto;position:absolute}.phone-main{left:10%;top:123px;transform:rotate(-7deg);z-index:2}.phone-detail{left:48%;top:188px;transform:rotate(9deg);width:211px}.scene-stamp{position:absolute;bottom:25px;right:24px;border:1px solid var(--rust);border-radius:50%;padding:18px;font-family:Georgia,serif;font-size:23px;line-height:1;transform:rotate(12deg);z-index:3;background:#f8f2e8;color:var(--rust)}.chapter-study{grid-template-columns:1.12fr 1fr;padding-top:65px}.study-scene{background:#d4c5a6;border-radius:12px 12px 160px 12px}.courtyard-art{position:absolute;width:100%;height:100%;object-fit:cover;object-position:center 60%}.study-phone{top:65px;left:50%;transform:translateX(-50%) rotate(5deg);width:245px}.scene-tag{position:absolute;bottom:35px;left:25px;right:25px;margin:auto;max-width:max-content;border-radius:50px;padding:13px 20px;background:var(--cream);font-family:Geist Mono,monospace;font-size:14px}.identity{padding-top:105px;padding-bottom:100px;text-align:center}.identity-heading .eyebrow{color:var(--rust);margin-bottom:24px}.identity-heading>p:last-child{font-size:18px;color:var(--muted);margin-top:22px}.loopling-lineup{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:65px}.loopling-lineup figure{min-width:0}.loopling-lineup figure:nth-child(1){transform:rotate(-5deg) translateY(14px)}.loopling-lineup figure:nth-child(3){transform:rotate(5deg) translateY(14px)}.loopling-lineup img{width:100%;border-radius:50% 50% 8px 8px}.loopling-lineup figcaption{font-family:Geist Mono,monospace;font-size:14px;margin-top:18px}.identity-footer{font-family:Georgia,serif;font-style:italic;font-size:32px;margin-top:62px}.belonging{padding-top:100px;padding-bottom:100px;border-top:1px solid var(--line);display:grid;grid-template-columns:1.4fr 1fr;gap:24px 70px}.belonging>.eyebrow{grid-column:1/-1;color:var(--rust)}.belonging h2{font-size:clamp(38px,4vw,60px)}.trust-notes{align-self:center}.trust-notes p{border-bottom:1px solid var(--line);padding:20px 0;font-size:16px}.trust-notes span{font:14px Geist Mono,monospace;margin-right:17px;color:var(--rust)}.campus-reveal{display:grid;grid-template-columns:1fr 1fr;gap:7%;padding-top:60px;padding-bottom:120px}.invitation-art{position:relative;min-height:550px;border-radius:180px 180px 8px 8px;overflow:hidden;background:var(--sand)}.invitation-art img{width:100%;height:100%;position:absolute;object-fit:cover;object-position:18% center}.invitation-art span{position:absolute;left:20px;right:20px;bottom:22px;background:var(--cream);text-align:center;border-radius:50px;padding:16px;font-size:16px}.reveal-stage{align-self:center;position:relative}.reveal-eyebrow{color:var(--rust);margin-bottom:22px}.reveal-title{font-size:clamp(36px,4vw,58px)}.reveal-lede{font-size:18px;color:var(--muted);margin-top:20px;line-height:1.5}.reveal-form{margin-top:28px}.reveal-field{display:block;margin:18px 0}.reveal-field>span{display:block;font-size:14px;margin-bottom:10px}.reveal-field input{width:100%;border:1px solid #b5a28e;border-radius:9px;background:#fffaf3;padding:17px;color:var(--ink);font-size:16px}.reveal-field input::placeholder{color:#70604f}.reveal-action{width:100%;margin-top:4px}.reveal-back{border:0;background:none;text-decoration:underline;padding:14px 0;font-size:14px}.reveal-note{font-size:14px;color:var(--muted);margin-top:17px}.reveal-error{font-size:14px;color:#a12e23;margin-top:14px}.reveal-error:empty{display:none}.reveal-seal{width:70px;height:70px;display:flex;align-items:center;justify-content:center;margin-bottom:20px;border-radius:18px;background:var(--reveal-soft);padding:10px}.reveal-seal img{max-height:100%;object-fit:contain}.reveal-seal span{font-size:14px}.campus-reveal [hidden] { display: none !important; }
.site-footer{background:var(--ink);color:var(--cream);padding:46px 6% 28px}.footer-top{display:flex;align-items:center;justify-content:space-between;gap:25px;padding-bottom:45px}.footer-top p{font-size:18px}.footer-top>a:last-child{font-size:14px}.footer-bottom{border-top:1px solid #67584a;padding-top:25px;display:flex;justify-content:space-between;gap:24px;font-size:14px}.footer-bottom nav{display:flex;gap:25px;flex-wrap:wrap}.site-footer a:hover{text-decoration:underline;text-underline-offset:4px}[hidden]{display:none!important}
@media(min-width:1700px){.hero{max-width:1800px;margin:auto}.hero-heading{top:70px}.hero h1{font-size:240px}}
@media(max-width:1000px){.product-scene{height:560px}.phone-main{width:200px;left:6%}.phone-detail{width:180px;left:46%}.study-phone{width:210px}.chapter{gap:5%}.chapter-links{gap:20px;font-size:14px}.world-caption{display:none}.world-bottom{justify-content:flex-end}.hero-footnote{display:none}.hero-invitation{grid-template-columns:1fr auto}.hero-heading .eyebrow{font-size:12px}.invitation-art{min-height:490px}.footer-top p{font-size:16px}}
@media(max-width:700px){:root{scroll-padding-top:24px}.site-header{height:74px;padding:0 6%}.brand{font-size:24px}.site-header nav>a:first-child{display:none}.site-header nav{gap:0}.nav-join{font-size:14px;padding:10px 14px}.nav-join span{margin-left:6px}.hero{padding-top:0}.hero-heading{position:relative;top:auto;padding:35px 20px 20px}.hero-heading .eyebrow{font-size:12px;margin-bottom:12px}.hero h1{font-size:25vw;letter-spacing:-.08em}.world-stage{margin:0 10px;border-radius:8px}.world-film{aspect-ratio:4/3;object-fit:cover;object-position:40% center}.world-bottom{left:10px;right:10px;bottom:10px}.film-controls button{padding:8px 11px;font-size:14px}.hero-invitation{padding:25px 7% 35px;display:flex;flex-direction:column;text-align:center;gap:22px}.hero-invitation p{font-size:16px}.hero-invitation .pill{width:100%;max-width:360px}.arrival{padding-top:65px;padding-bottom:40px}.arrival h2 br{display:none}.section-intro{font-size:17px}.chapter-links{flex-direction:column;gap:0;text-align:left;margin-top:35px;padding:8px 0}.chapter-links a{padding:14px 5px}.chapter{grid-template-columns:1fr;gap:34px;padding-top:40px;padding-bottom:45px}.chapter-copy .eyebrow{margin-bottom:20px}.chapter-copy>p:not(.eyebrow){font-size:17px;max-width:100%;margin-top:20px}.chapter-copy h2{font-size:45px}.margin-note{display:none}.product-scene{height:570px;max-width:470px;width:100%;margin:auto}.phone-main{width:220px;left:10%}.phone-detail{width:190px;left:47%}.chapter-study .chapter-copy{grid-row:1}.study-phone{width:235px;top:32px}.identity{padding-top:70px;padding-bottom:65px}.identity h2{font-size:43px}.loopling-lineup{gap:12px;margin-top:35px}.loopling-lineup figcaption{font-size:14px;line-height:1.4}.identity-footer{margin-top:38px;font-size:28px}.belonging{display:block;padding-top:55px;padding-bottom:40px}.belonging h2{margin-top:22px}.trust-notes{margin-top:25px}.campus-reveal{grid-template-columns:1fr;gap:35px;padding-top:35px;padding-bottom:65px}.invitation-art{min-height:280px;border-radius:120px 120px 8px 8px}.invitation-art img{object-position:25% 62%;height:140%;bottom:0}.reveal-title{font-size:43px}.footer-top{flex-wrap:wrap;padding-bottom:28px}.footer-top p{order:3;width:100%}.footer-bottom{flex-direction:column;gap:20px}.footer-bottom nav{gap:18px}.site-footer{padding:35px 7%}.section-wrap{padding-left:7%;padding-right:7%}}
@media(max-width:380px){.product-scene{height:490px}.phone-main{width:190px;left:6%}.phone-detail{width:168px;top:180px}.study-phone{width:210px}.scene-label{font-size:12px;left:12%;right:12%}.scene-stamp{font-size:19px}.brand img{display:none}.loopling-lineup{gap:8px}.hero h1{font-size:25vw}}
@media (prefers-reduced-motion: reduce) { :root{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.reveal-burst { display: none; } }
/* The film keeps its full landscape framing, even on a narrow phone. */
.journey-open{overflow:hidden}.journey-dialog{position:fixed;inset:0;border:0;padding:0;margin:0;width:100vw;max-width:none;height:100dvh;max-height:none;background:var(--cream);color:var(--ink);overflow:hidden}.journey-dialog::backdrop{background:var(--cream)}.journey-film{width:100%;height:100%;object-fit:contain}.journey-top,.journey-bottom{position:absolute;left:4%;right:4%;display:flex;justify-content:space-between;align-items:center;gap:18px;z-index:2}.journey-top{top:max(22px,env(safe-area-inset-top))}.journey-top>.eyebrow{background:var(--cream);border-radius:30px;padding:12px 18px}.journey-bottom{bottom:max(22px,env(safe-area-inset-bottom))}.journey-bottom>div{display:flex;gap:8px}.journey-bottom p{font-size:14px;background:var(--cream);padding:10px 16px;border-radius:24px}.journey-dialog button{background:var(--ink);color:var(--cream);border:1px solid var(--cream);border-radius:30px;padding:12px 18px;min-height:44px;font-size:14px}.journey-dialog:after{content:'';position:absolute;inset:0;pointer-events:none;background:var(--cream);opacity:0;transition:opacity .6s;z-index:3}.journey-dialog.is-arriving:after{opacity:1}.has-arrived{animation:chapter-arrive .8s cubic-bezier(.2,.7,.2,1) both}@keyframes chapter-arrive{from{opacity:.25;translate:0 22px}to{opacity:1;translate:0 0}}
@media(min-width:701px){.hero-heading{text-align:left;left:6%;right:auto;top:4vw}.hero h1{font-size:clamp(96px,11vw,180px)}.hero-heading .eyebrow{font-size:14px;max-width:280px}}
@media(max-width:700px){.journey-top{align-items:flex-start}.journey-top>.eyebrow{font-size:14px;max-width:180px;padding:8px 0;background:none}.journey-bottom{flex-direction:column;align-items:stretch}.journey-bottom p{padding:0;background:none}.journey-bottom>div{justify-content:space-between}.hero-heading .eyebrow{font-size:14px}.scene-label{font-size:14px}}
@media(prefers-reduced-motion:reduce){.has-arrived{animation:none}.journey-dialog:after{transition:none}}
/* Original website artwork: scenes lead; real app previews are optional. */
.website-scene{height:auto;aspect-ratio:4/5;border-radius:12px;background:var(--cream);overflow:hidden}
.website-scene .website-art{position:static;width:100%;height:100%;object-fit:contain}
.product-peek{margin-top:24px;max-width:290px}
.product-peek summary{cursor:pointer;font-size:14px;text-decoration:underline;text-underline-offset:5px;padding:10px 0;color:var(--muted)}
.product-peek summary:focus-visible{outline:3px solid var(--rust);outline-offset:5px}
.product-peek img{width:220px;height:auto;border:5px solid var(--ink);border-radius:25px;margin-top:18px;box-shadow:0 14px 30px #30271f15}
.website-friends{margin:40px auto 0;max-width:1120px}
.website-friends img{width:100%;height:auto;border-radius:12px}
.website-friends figcaption{font:16px Geist Mono,monospace;color:var(--muted);margin-top:18px}
@media(max-width:700px){.website-scene{height:auto;max-width:470px}.website-friends{margin-top:28px}.website-friends figcaption{font-size:14px}}
/* A quiet entrance, then a full page with no navigation bar. */
.entry-screen{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 24px;background:var(--cream);gap:24px}
.entry-wordmark{font-size:clamp(90px,17vw,250px);font-weight:850;line-height:1;letter-spacing:-.085em;position:relative;margin:5px 0 15px}
.entry-screen>p:not(.eyebrow){font-size:18px;color:var(--muted);max-width:330px}
.entry-explore{min-width:180px;margin-top:15px;border-radius:24px 24px 24px 6px}
.entry-skip{font-size:14px;border:0;background:none;color:var(--muted);text-decoration:underline;text-underline-offset:5px;padding:10px}
.entry-pending{overflow:hidden}.entry-pending .entry-screen{position:fixed;inset:0;z-index:8;overflow:auto}.entry-pending main,.entry-pending .site-footer{visibility:hidden}
#top:focus{outline:none}.hero{padding-top:12px}.world-stage{border-radius:12px 12px 60px 12px}.website-scene:first-child{border-radius:100px 12px 100px 12px}.chapter-plans .website-scene{border-radius:12px 130px 12px 12px}.website-friends img{border-radius:18px 18px 90px 18px}.chapter-links a{font-family:Geist,Arial,sans-serif}.text-link{border-bottom:1px solid var(--line);gap:0}
@media(max-width:700px){.entry-wordmark{font-size:25vw}.entry-screen .eyebrow{font-size:14px}.world-stage{border-radius:10px 10px 34px 10px}.chapter-plans .website-scene{border-radius:12px 75px 12px 12px}.website-scene:first-child{border-radius:65px 12px 65px 12px}.website-friends img{border-radius:12px 12px 45px 12px}}
/* Tap targets, Apple's 44pt minimum -- the same rule .film-controls button and
   .journey-dialog button already carry. These text links sit at their line box
   (18-35px tall), which is comfortable with a cursor and a miss with a thumb.
   min-height plus centring grows the hit area without moving the text, changing
   the type or touching the layout; scripts/verify-site-responsive.mjs measures
   it at six widths. */
.chapter-links a,.text-link,.site-footer .brand,.footer-top>a:last-child,.footer-bottom nav a,.entry-skip{display:inline-flex;align-items:center;justify-content:center;min-height:44px}
/* ---------------------------------------------------------------------------
   Motion polish. Everything below is animation only -- no box changes, no
   layout, no colour -- so the page it decorates is the same page. The global
   prefers-reduced-motion block above already answers all of it with
   animation:none, which is why none of this needs its own guard.

   One curve throughout, the one chapter-arrive already uses. Consistency is
   most of what reads as "smooth": four easings on one page is what makes
   motion feel assembled rather than designed.
   --------------------------------------------------------------------------- */
:root{--arrive:cubic-bezier(.2,.7,.2,1)}

/* The hero arrives. .has-entered is set the moment the entry screen goes, so
   the page rises into place instead of cutting to it; the three parts land in
   sequence, which is what gives the cut its sense of depth. Not in world.js's
   IntersectionObserver set because the hero is above the fold and would have
   finished before anyone saw it. */
.has-entered .hero-heading{animation:arrive-up .85s var(--arrive) both}
.has-entered .world-stage{animation:arrive-scale 1s var(--arrive) both;animation-delay:.06s}
.has-entered .hero-invitation{animation:arrive-up .85s var(--arrive) both;animation-delay:.16s}
@keyframes arrive-up{from{opacity:0;translate:0 26px}to{opacity:1;translate:0 0}}
@keyframes arrive-scale{from{opacity:0;scale:.985;translate:0 18px}to{opacity:1;scale:1;translate:0 0}}

/* Rows cascade instead of landing as a block. The parents are already observed
   by world.js; these are their children, delayed off the parent's own arrival
   so one observer still drives the whole thing. */
.arrival.has-arrived .chapter-links a{animation:arrive-up .7s var(--arrive) both}
.arrival.has-arrived .chapter-links a:nth-child(2){animation-delay:.08s}
.arrival.has-arrived .chapter-links a:nth-child(3){animation-delay:.16s}
.belonging.has-arrived .trust-notes p{animation:arrive-up .7s var(--arrive) both}
.belonging.has-arrived .trust-notes p:nth-child(2){animation-delay:.09s}
.belonging.has-arrived .trust-notes p:nth-child(3){animation-delay:.18s}

/* Hover and focus settle rather than snap. The pill already moved on hover;
   this gives it the page's curve and lets the underlines catch up. */
.pill{transition:background .28s var(--arrive),border-color .28s var(--arrive),transform .28s var(--arrive)}
.text-link,.chapter-links a,.site-footer a,.product-peek summary{transition:opacity .24s var(--arrive),text-underline-offset .24s var(--arrive)}
.text-link:hover,.chapter-links a:hover{text-underline-offset:7px}
.film-controls button,.journey-dialog button,.reveal-action,.entry-skip{transition:background .24s var(--arrive),opacity .24s var(--arrive)}
/* The film's controls rest out of sight on a pointer device.
   They cannot simply be deleted. The hero film autoplays, loops, runs well
   past five seconds and sits alongside the rest of the page, which is exactly
   the case WCAG 2.2.2 (Pause, Stop, Hide, Level A) is written for: moving
   content that starts on its own needs a way to stop it. Honouring
   prefers-reduced-motion, which world.js already does, is a different promise
   and does not substitute for the control.
   So they stay, focusable and announced, and only stop shouting: invisible at
   rest, full on hover or keyboard focus. Touch devices have no hover to
   reveal them with, so they stay visible there -- which is the whole reason
   this is scoped to (hover: hover) rather than applied to everything. */
@media (hover: hover) and (pointer: fine){
  .film-controls{opacity:0;transition:opacity .3s var(--arrive)}
  .world-stage:hover .film-controls,.film-controls:focus-within{opacity:1}
}

/* ---------------------------------------------------------------------------
   The wordmark arrives a letter at a time.

   The DOM is split by world.js and only when motion is welcome, so everything
   below decorates markup that may not exist. The source HTML stays one clean
   text node: a crawler, a translator and a browser with no JS all read the
   finished word.

   Three properties matter more than they look:

   - opacity:0 lives ONLY inside the keyframe, never on .wordmark-letter. A
     letter whose resting state is invisible is invisible for good if the
     animation never runs -- a paint the browser skipped, a stylesheet that
     arrived after the class. `backwards` is what holds the letter hidden
     before its delay, and it costs nothing when the animation is off.
   - font-kerning:none, because a span boundary breaks every kerning pair
     anyway. Left on, the word re-spaces itself the instant it is split, so
     the reveal starts by nudging the mark sideways.
   - The letters are aria-hidden and a real hidden text node carries the name.
     Not aria-label: it is prohibited on a generic element, JAWS ignores it
     even on a heading, and no browser translates it, so a Spanish reader
     would hear an English string. Name-from-content is the one naming
     mechanism every screen reader implements.
   --------------------------------------------------------------------------- */
.wordmark-letters{font-kerning:none;white-space:pre}
.wordmark-letter{display:inline-block;animation:letter-arrive 1.3s var(--arrive) backwards;animation-delay:calc(var(--i) * 150ms)}
/* No will-change: it is never removed once the reveal is over, so it would
   pin six composited layers for the life of the page to buy 620ms. The
   blur promotes each letter for the duration anyway. */
@keyframes letter-arrive{
  from{opacity:0;translate:0 .28em;filter:blur(8px)}
  to{opacity:1;translate:0 0;filter:blur(0)}
}
/* A split mark is decoration. Under reduced motion world.js never splits at
   all, so this only catches a preference changed mid-visit. */
@media (prefers-reduced-motion: reduce){
  .wordmark-letter{animation:none}
}

/* ---------------------------------------------------------------------------
   The chapter index.

   The row itself is the original: centred, ruled top and bottom, 14px. Only
   the three phrases change face.

   Optima is the point of the stack. Zapf drew it from the inscriptional
   lettering cut into grave slabs in Santa Croce -- flared stems, no true
   serifs, classical proportions -- so it carries the Greek/Roman inscription
   feeling without being a costume. Windows has no Optima, so Palatino
   Linotype (Zapf again, Renaissance humanist) stands in, and Georgia is the
   floor everywhere else. All three share the cap-height proportion that
   makes letterspaced caps sit right, so no size adjustment is needed.

   Uppercase and .13em of tracking are what make it read as inscription
   rather than as a serif label. Caps inherit no case information, so the
   markup stays sentence case and text-transform does the work -- copy and
   paste, and a screen reader, still get "Go do something".
   --------------------------------------------------------------------------- */
.chapter-links a{gap:9px}
.chapter-index{font-family:Geist Mono,monospace;font-variant-numeric:tabular-nums;letter-spacing:.04em;color:var(--rust)}
.chapter-index:after{content:'/';margin-left:.5em;color:var(--muted)}
.chapter-name{font-family:Optima,'Optima Nova','Palatino Linotype',Palatino,'URW Palladio L',Georgia,serif;font-size:15px;text-transform:uppercase;letter-spacing:.13em;transition:color .28s var(--arrive)}
.chapter-go{color:var(--muted);transition:translate .28s var(--arrive),color .28s var(--arrive)}
/* Hover is guarded, because on a phone :hover latches after a tap and stays
   latched on whichever row was touched last. Nothing else in this file is
   guarded, which is its own small bug; this is the row where it shows. */
@media (hover: hover) and (pointer: fine){
  .chapter-links a:hover .chapter-go{translate:5px -5px;color:var(--ink)}
  .chapter-links a:hover .chapter-name{color:var(--rust)}
}
/* The shared text-link hover underlines the row. A ruled index does not need
   a third rule through the middle of it. */
.chapter-links a:hover{text-decoration:none}
@media(max-width:700px){
  /* The phone rule already asks for text-align:left. The 44pt tap-target rule
     makes each link an inline-flex with justify-content:center, which quietly
     overrode it, so the three stacked rows each had a different left edge. */
  .chapter-links a{justify-content:flex-start}
}

/* ---------------------------------------------------------------------------
   The journey rests without its chrome.

   is-immersed is set by world.js only while the film is genuinely playing and
   dropped the instant it is not -- paused, buffering, autoplay refused -- and
   a tap anywhere on the dialog drops it too. So the controls are always one
   touch from coming back, which is what makes hiding them honest: Enter
   campus is the only pointer route out of a modal, and Play motion is the
   only way to start a film the browser refused to autoplay.

   visibility is deliberately NOT used, and neither is display. Both would
   take the buttons out of the focus order, and a keyboard visitor reaching
   them is exactly how the dialog surfaces again.
   --------------------------------------------------------------------------- */
.journey-top,.journey-bottom{transition:opacity .45s var(--arrive)}
.journey-dialog.is-immersed .journey-top,.journey-dialog.is-immersed .journey-bottom{opacity:0}
.journey-dialog.is-immersed .journey-top:focus-within,.journey-dialog.is-immersed .journey-bottom:focus-within{opacity:1}
@media (prefers-reduced-motion: reduce){
  .journey-top,.journey-bottom{transition:none}
}

/* ---------------------------------------------------------------------------
   The hero invitation, with its paragraph gone.

   The row is a three-column grid -- text, pill, footnote -- and the pill is
   centred by sitting in the middle column, not by any centring rule. Deleting
   the paragraph therefore did not leave a gap: it slid the pill into the
   first column and the footnote into the second, which is what pulled the
   whole row left. Naming the columns keeps the original geometry with the
   first one simply empty.

   Both states are stated, because the 1000px rule drops to two columns and an
   unqualified grid-column:3 would invent an implicit third there.
   --------------------------------------------------------------------------- */
.hero-invitation>.pill{grid-column:2}
.hero-invitation>.hero-footnote{grid-column:3}
@media(max-width:1000px){
  /* The footnote is display:none from here down, so with the paragraph gone
     the row holds exactly one thing. One column, and the pill centred in it
     rather than stretched: a grid item fills its track by default, and in the
     two-column state it was measured 795px wide on a 900px screen. */
  .hero-invitation{grid-template-columns:1fr}
  .hero-invitation>.pill{grid-column:1;justify-self:center}
}
@media(max-width:700px){
  /* A centred flex column -- no columns to place anything in. */
  .hero-invitation>.pill,.hero-invitation>.hero-footnote{grid-column:auto}
}

/* ---------------------------------------------------------------------------
   Room for the platform's own controls.

   On a touch device a paused inline video gets a native overlay -- play, a
   scrubber, a ten-second skip pair -- drawn by the OS, not by this page. It
   cannot be turned off from here, and in an in-app browser it is common:
   those webviews refuse autoplay, and iOS Low Power Mode refuses it outright.
   Our own bar sits 10px from the bottom on a phone, which is exactly where
   that scrubber lands, so the two collided.

   So while the film is resting our bar steps up above the overlay. It steps
   back down the moment the film plays, which is when the native controls fade
   and the caption belongs on the bottom edge again. Only on coarse pointers:
   a desktop cursor never sees the overlay, and the controls there are already
   hidden until hover.
   --------------------------------------------------------------------------- */
@media (pointer: coarse){
  .world-bottom{transition:bottom .3s var(--arrive)}
  .world-stage.is-resting .world-bottom{bottom:64px}
}
@media (pointer: coarse) and (prefers-reduced-motion: reduce){
  .world-bottom{transition:none}
}