/* Wonder Assembly — an illustrated story. No external dependencies. */
/* The paper story slides over a black directory, without resizing chapters. */
:root{--paper:#f5f1e7;--ink:#2d352b;--muted:#737569;--accent:#426b91;--line:#dad7cd;--serif:Georgia,'Times New Roman',serif;--sans:'Helvetica Neue',Helvetica,Arial,sans-serif}
*{box-sizing:border-box}html{height:100%;overflow:hidden}body{height:100%;overflow:hidden;margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.035;z-index:8;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' filter='url(%23n)' opacity='.8' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}::selection{background:#cbdce9}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}button{border:0;background:none}a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:7px}.skip-link{position:fixed;left:20px;top:-80px;background:var(--ink);color:var(--paper);padding:15px;z-index:30}.skip-link:focus{top:15px}
.site-header{position:fixed;top:0;left:0;right:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:30px 44px;pointer-events:none}.site-header>*{pointer-events:auto}.brand{display:flex;align-items:center;gap:12px;font-size:18px;font-weight:600;letter-spacing:-.7px}.brand-mark{font-size:36px;line-height:1;font-weight:400;color:var(--accent)}.contents-toggle{display:flex;align-items:center;gap:18px;font-size:11px;text-transform:uppercase;letter-spacing:1.6px;padding:10px 0 10px 12px}.menu-icon{display:grid;gap:5px;width:20px}.menu-icon span{height:1px;background:var(--ink);width:100%}.menu-icon span:last-child{width:13px;justify-self:end}.contents-toggle:hover .menu-icon span:last-child{width:100%;transition:width .2s}
.feed{position:relative;height:100dvh;overflow-y:scroll;scroll-snap-type:y mandatory;scroll-behavior:smooth;overscroll-behavior-y:none}
.chapter{height:100dvh;min-height:100dvh;scroll-snap-align:start;scroll-snap-stop:always;overflow-y:auto;display:grid;place-items:safe center;padding:100px 100px 110px;position:relative}.scene{width:100%;max-width:900px;text-align:center}.illustration{width:min(460px,100%);margin:0 auto 22px;aspect-ratio:4/3;position:relative;isolation:isolate}.illustration img{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;filter:saturate(.88)}.illustration:after{content:"";position:absolute;inset:-1px;pointer-events:none;background:linear-gradient(to right,var(--paper),transparent 8%,transparent 92%,var(--paper)),linear-gradient(var(--paper),transparent 9%,transparent 88%,var(--paper))}.eyebrow{text-transform:uppercase;font-size:10px;letter-spacing:2.1px;font-weight:500;margin:0 0 23px;color:var(--muted)}.eyebrow span{padding:0 9px;color:#b7b7a9}h1,h2{font-family:var(--serif);font-weight:400;font-size:clamp(25px,2.7vw,37px);line-height:1.17;letter-spacing:-1.8px;margin:0 auto 22px;max-width:850px;text-wrap:balance}em{font-weight:400;color:var(--accent)}.description{font-size:15px;line-height:1.8;max-width:510px;margin:0 auto;color:#6b6e62;text-wrap:pretty}.contact-link{display:inline-flex;align-items:center;gap:25px;border-bottom:1px solid #999d8c;margin-top:6px;padding:0 0 7px;font-size:13px}.contact-link:hover{color:var(--accent)}
.chapter-rail{position:fixed;right:38px;top:50%;transform:translateY(-50%);z-index:9;display:grid;gap:3px}.chapter-rail a{position:relative;display:flex;justify-content:end;align-items:center;width:25px;height:25px}.rail-dot{height:5px;width:5px;border:1px solid #a4a69a;border-radius:100%;transition:all .25s}.chapter-rail a[aria-current] .rail-dot{width:8px;height:8px;background:var(--accent);border-color:var(--accent)}.rail-label{position:absolute;right:30px;white-space:nowrap;background:var(--paper);font-size:11px;color:var(--muted);opacity:0;transform:translateX(4px);transition:all .2s;pointer-events:none}.chapter-rail a:not([aria-current]):not(.is-navigating):hover .rail-label,.chapter-rail a:not([aria-current]):not(.is-navigating):focus-visible .rail-label{opacity:1;transform:translateX(0)}
.story-footer{position:fixed;bottom:0;left:0;right:0;padding:26px 44px;z-index:9;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(transparent,var(--paper) 35%)}.footer-note{font-family:var(--serif);font-size:12px;font-style:italic;color:var(--muted)}.scroll-hint{position:absolute;left:50%;transform:translateX(-50%);font-size:10px;letter-spacing:.2px;color:var(--muted);display:flex;align-items:center;gap:16px}.scroll-hint span:last-child{font-size:17px}.page-controls{display:flex;gap:17px;align-items:center}.page-controls button{font-size:19px;width:30px;height:30px;transition:transform .2s}.page-controls button:hover:enabled{transform:translateX(3px);color:var(--accent)}.page-controls .previous:hover:enabled{transform:translateX(-3px)}button:disabled{opacity:.25;cursor:default}.page-number{font-size:10px;font-variant-numeric:tabular-nums;letter-spacing:1px}.page-total{color:#949789}.progress-track{position:absolute;bottom:0;left:0;right:0;height:2px;background:#e8e3d8}.progress-fill{display:block;width:12.5%;height:100%;background:var(--accent);transition:width .45s ease}
/* Progressive enhancement: the full story remains readable without JavaScript. */
.js .scene{opacity:1;transform:none}dialog{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;border:0;padding:70px 24px;background:var(--paper);color:var(--ink);z-index:20;overflow-y:auto}dialog::backdrop{background:var(--paper)}.contents-inner{max-width:610px;margin:auto;position:relative}.contents-inner h2{font-size:40px;margin:0 0 35px;letter-spacing:-1.3px}.contents-inner nav{display:grid}.contents-inner nav a{padding:15px 0;border-top:1px solid var(--line);display:flex;align-items:center;gap:25px;font-family:var(--serif);font-size:23px}.contents-inner nav a span:first-child{font:10px var(--sans);color:var(--accent);letter-spacing:1px}.contents-inner nav a span:last-child{margin-left:auto;font-size:17px;color:var(--muted)}.contents-inner nav a:hover{color:var(--accent)}.contents-note{font-size:11px;color:var(--muted);margin-top:28px}.contents-close{position:fixed;right:44px;top:32px;display:flex;gap:16px;align-items:center;font-size:11px;text-transform:uppercase;letter-spacing:1.4px}.contents-close span{font-size:24px}
@media(min-width:1500px){.illustration{width:520px}h1,h2{font-size:40px}.description{font-size:16px}}@media(max-height:800px) and (min-width:701px){.chapter{padding-top:85px;padding-bottom:88px}.illustration{width:365px;margin-bottom:15px}.eyebrow{margin-bottom:16px}h1,h2{font-size:30px;margin-bottom:17px}.description{font-size:14px;max-width:485px}}
@media(max-width:700px){.site-header{padding:22px 23px}.brand{font-size:16px;gap:8px}.brand-mark{font-size:31px}.toggle-label{display:none}.chapter{padding:95px 28px 105px}.illustration{width:370px;max-width:100%;margin-bottom:25px}h1,h2{font-size:26px;letter-spacing:-1.2px;line-height:1.16;margin-bottom:20px}.eyebrow{font-size:9px;letter-spacing:1.8px;margin-bottom:18px}.description{font-size:14px;line-height:1.75;max-width:360px}.chapter-rail{right:9px;gap:1px}.chapter-rail a{width:18px;height:20px}.rail-dot{width:3px;height:3px}.chapter-rail a[aria-current] .rail-dot{width:5px;height:5px}.rail-label{display:none}.story-footer{padding:18px 23px}.footer-note{display:none}.scroll-hint{position:static;transform:none;gap:9px;font-size:9px}.page-controls{gap:7px}.contents-close{right:24px;top:23px}.contents-inner h2{font-size:34px}.contents-inner nav a{font-size:21px;padding:14px 0}dialog{padding-top:90px}}
@media(max-width:380px),(max-height:650px) and (max-width:700px){.illustration{width:260px;margin-bottom:12px}.chapter{padding-top:80px;padding-bottom:90px}h1,h2{font-size:23px}.description{font-size:13px}.eyebrow{margin-bottom:12px}}
@media(prefers-reduced-motion:reduce){.feed{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}.js .scene{transform:none}}
/* Keep intrinsic image sizes from widening the chapter's grid on phones. */
.chapter{grid-template-columns:minmax(0,1fr)}.scene{min-width:0}


.product-links{display:flex;flex-wrap:wrap;justify-content:center;column-gap:24px;row-gap:14px;max-width:410px;margin:26px auto 0}
.product-links a{display:inline-flex;align-items:center;gap:7px;padding:0 0 4px;border-bottom:1px solid #c2c1b2;font-size:12px;line-height:1.4;transition:color .2s,border-color .2s}
.product-links a>span[aria-hidden]{font-size:11px;color:var(--muted)}
.product-links a:hover{color:var(--accent);border-color:var(--accent)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(max-height:800px) and (min-width:701px){#apps .illustration{width:310px}#apps .product-links{margin-top:20px}}
@media(max-width:700px){.product-links{max-width:300px;column-gap:20px;row-gap:13px;margin-top:24px}.product-links a{font-size:12px}#apps .illustration{width:300px}}

/* Intro elements belong to the first chapter and travel with its scroll. */
.site-header{position:absolute;justify-content:center}
.story-footer{position:absolute;justify-content:center;background:none;pointer-events:none}
.scroll-hint{position:static;transform:none;pointer-events:auto}

/* Align the cue by its icon box rather than a font glyph's baseline. */
.scroll-hint{display:inline-flex;align-items:center;justify-content:center;gap:12px;font-size:11px;line-height:20px;letter-spacing:.25px;padding:8px 12px}
.scroll-hint .scroll-arrow{display:block;flex:0 0 16px;width:16px;height:20px}

/* Sans-serif typography trial. */
h1,h2{font-family:var(--sans);font-weight:500;letter-spacing:-1.5px}
@media(max-width:700px){h1,h2{letter-spacing:-1px}}

h1 em,h2 em{font-weight:inherit}

h1 em{font-style:normal}
/* Give every narrative sentence the same typographic weight. */
.description{font-family:var(--sans);font-size:clamp(25px,2.7vw,37px);font-weight:500;line-height:1.17;letter-spacing:-1.5px;color:var(--ink);max-width:850px;text-wrap:balance}
@media(min-width:1500px){.description{font-size:40px}}
@media(max-height:800px) and (min-width:701px){.description{font-size:30px;max-width:850px}}
@media(max-width:700px){.description{font-size:26px;letter-spacing:-1px;line-height:1.17;max-width:850px}}
@media(max-width:380px),(max-height:650px) and (max-width:700px){.description{font-size:23px}}
/* Keep all chapter text upright, including emphasis and film titles. */
.chapter em,.chapter i{font-style:normal}

/* Short, irregular zigzags color in scattered patches at changing angles. */
.crayon-art{display:block;width:100%;height:100%;mix-blend-mode:multiply;filter:saturate(.88)}
.crayon-stroke{stroke-dasharray:1;stroke-dashoffset:0}
.js .crayon-stroke{stroke-dashoffset:1}
.js .chapter.is-visible .crayon-stroke{animation:crayon-draw var(--draw-duration) linear var(--draw-delay) both}
@keyframes crayon-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.js .crayon-stroke{stroke-dashoffset:0}}

.crayon-finish{opacity:1}
.js .crayon-finish{opacity:0}
.js .chapter.is-visible .crayon-finish{animation:crayon-fill .12s ease-out 1s both}
@keyframes crayon-fill{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.js .crayon-finish{opacity:1}}
/* Fade the illustration in while the crayon strokes uncover it. */
.js .crayon-art{opacity:0}
.js .chapter.is-visible .crayon-art{animation:crayon-fade .65s ease-out both}
@keyframes crayon-fade{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.js .crayon-art{opacity:1}}

/* Watercolor trial: feathered, irregular blooms spread into overlapping washes. */
.watercolor-bloom{transform-box:fill-box;transform-origin:center;opacity:1}
.js .watercolor-bloom{opacity:0;transform:scale(.15)}
.js .chapter.is-visible .watercolor-bloom{animation:watercolor-spread .7s cubic-bezier(.2,.6,.3,1) var(--wash-delay) both}
@keyframes watercolor-spread{0%{opacity:0;transform:scale(.15)}45%{opacity:.65}100%{opacity:1;transform:scale(1.2)}}
.js .chapter.is-visible .crayon-art{animation:watercolor-color .75s ease-out both}
@keyframes watercolor-color{from{opacity:0;filter:saturate(.25)}to{opacity:1;filter:saturate(.88)}}
@media(prefers-reduced-motion:reduce){.js .watercolor-bloom{opacity:1;transform:none}}
/* Let the illustration begin before the story text follows. */
.js .chapter-copy{opacity:0}
.js .chapter.is-visible .chapter-copy{animation:chapter-text-in .4s ease-out .55s both}
@keyframes chapter-text-in{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.js .chapter-copy{opacity:1}}
/* Text washes in as round paint blobs, centre first then outward, like the illustrations. */
@property --text-blob{syntax:'<number>';inherits:false;initial-value:0}
@property --text-wash-fill{syntax:'<number>';inherits:false;initial-value:0}
.js .chapter-copy{
  --text-blob:0;--text-wash-fill:0;
  -webkit-mask-image:radial-gradient(circle max(0px,calc((var(--text-blob) - 0) * 520.0px)) at 40% 48%,#000 max(0px,calc(max(0px,calc((var(--text-blob) - 0) * 520.0px)) - 90px)),transparent max(0px,calc((var(--text-blob) - 0) * 520.0px))),
    radial-gradient(circle max(0px,calc((var(--text-blob) - 0.25) * 613.3px)) at 78% 40%,#000 max(0px,calc(max(0px,calc((var(--text-blob) - 0.25) * 613.3px)) - 90px)),transparent max(0px,calc((var(--text-blob) - 0.25) * 613.3px))),
    linear-gradient(rgb(0 0 0 / var(--text-wash-fill)),rgb(0 0 0 / var(--text-wash-fill)));
  mask-image:radial-gradient(circle max(0px,calc((var(--text-blob) - 0) * 520.0px)) at 40% 48%,#000 max(0px,calc(max(0px,calc((var(--text-blob) - 0) * 520.0px)) - 90px)),transparent max(0px,calc((var(--text-blob) - 0) * 520.0px))),
    radial-gradient(circle max(0px,calc((var(--text-blob) - 0.25) * 613.3px)) at 78% 40%,#000 max(0px,calc(max(0px,calc((var(--text-blob) - 0.25) * 613.3px)) - 90px)),transparent max(0px,calc((var(--text-blob) - 0.25) * 613.3px))),
    linear-gradient(rgb(0 0 0 / var(--text-wash-fill)),rgb(0 0 0 / var(--text-wash-fill)));
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
}
.js .chapter.is-visible .chapter-copy{animation:text-watercolor .75s cubic-bezier(.2,.6,.3,1) both}
@keyframes text-watercolor{
  0%{opacity:1;--text-blob:0;--text-wash-fill:0}
  70%{--text-wash-fill:0}
  100%{opacity:1;--text-blob:1;--text-wash-fill:1}
}
.js .chapter.is-visible .chapter-copy.is-resolved{opacity:1;animation:none;-webkit-mask-image:none;mask-image:none}
@media(prefers-reduced-motion:reduce){.js .chapter-copy{opacity:1;-webkit-mask-image:none;mask-image:none}}
/* Smaller story type in a narrower reading column. */
.chapter-copy{width:100%;max-width:660px;margin-inline:auto}
.chapter h1,.chapter h2{font-size:clamp(23px,2.25vw,31px);letter-spacing:-1px;line-height:1.25}
@media(min-width:1500px){.chapter h1,.chapter h2{font-size:34px}}
@media(max-height:800px) and (min-width:701px){.chapter h1,.chapter h2{font-size:26px}}
@media(max-width:700px){.chapter-copy{max-width:540px}.chapter h1,.chapter h2{font-size:23px;letter-spacing:-.7px}}
@media(max-width:380px),(max-height:650px) and (max-width:700px){.chapter h1,.chapter h2{font-size:21px}}

/* Pause on chapter entry before image and text begin together. */
.js .chapter.is-visible .crayon-art,
.js .chapter.is-visible .chapter-copy{animation-delay:.1s}
.js .chapter.is-visible .watercolor-bloom{animation-delay:calc(.1s + var(--wash-delay))}
.js .chapter.is-visible .crayon-finish{animation-delay:1.1s}
/* Chapter markers: quiet solid dots and a black active pill. */
.chapter-rail{gap:2px;right:28px}
.chapter-rail a{width:28px;height:22px;justify-content:center}
.rail-dot{width:6px;height:6px;border:0;border-radius:99px;background:#aaa99f;transition:height .25s ease,background-color .25s ease}
.chapter-rail a[aria-current] .rail-dot{width:7px;height:23px;background:#000;border:0}
.chapter-rail a[aria-current]{height:30px}
@media(max-width:700px){.chapter-rail{right:10px;gap:2px}.chapter-rail a{width:20px;height:20px}.rail-dot{width:5px;height:5px}.chapter-rail a[aria-current] .rail-dot{width:6px;height:21px}.chapter-rail a[aria-current]{height:28px}}
/* Keep text and image entrances on the same clock. */
:root{--reveal-duration:1.12s}
.js .chapter.is-visible .crayon-art,
.js .chapter.is-visible .chapter-copy{animation-duration:var(--reveal-duration);animation-timing-function:ease-out}

/* Intro header: identity on the left, contact on the right. */
.site-header{justify-content:space-between;gap:20px}
.reach-out{display:inline-flex;align-items:center;gap:14px;padding:10px 17px;border:1px solid #b9bcb0;border-radius:999px;font-size:12px;font-weight:500;line-height:1.2;transition:color .2s,border-color .2s}
.reach-out:hover{color:var(--accent);border-color:var(--accent)}
@media(max-width:700px){.site-header{gap:12px}.reach-out{gap:9px;padding:9px 12px;font-size:11px}}

/* Header belongs to the hero and scrolls away with it. */
.site-header{position:absolute}
/* Keep all story text in the same ink color. */
.chapter em{color:inherit}

/* Contact link shares the wordmark's type and lighter visual treatment. */
.reach-out{font-family:var(--sans);font-size:18px;font-weight:600;letter-spacing:-.7px;line-height:1.2;border:0;border-radius:0;padding:8px 0;gap:10px}
.mail-icon{display:block;flex:none}
@media(max-width:700px){.reach-out{font-size:16px;gap:8px;padding:8px 0}.mail-icon{width:18px;height:18px}}

.reach-out{font-weight:400}

.site-header{justify-content:flex-end}

/* Equal edge-to-edge gaps, with a liquid trail behind the moving pill. */
.effect-defs{position:absolute;pointer-events:none}
.chapter-rail{--rail-step:24px;--rail-dot:6px;--pill-height:23px;--pill-width:7px;--pill-extra:calc(var(--pill-height) - var(--rail-dot));gap:0}
.chapter-rail a{height:var(--rail-step)}
.chapter-rail a[aria-current]{height:calc(var(--rail-step) + var(--pill-extra))}
.chapter-rail .rail-dot{visibility:hidden}
.rail-goo{position:absolute;inset:0;pointer-events:none}
.rail-node{position:absolute;left:50%;top:calc(var(--dot-index) * var(--rail-step) + (var(--rail-step) - var(--rail-dot)) / 2 + var(--dot-shift,0) * var(--pill-extra));width:var(--rail-dot);height:var(--rail-dot);margin-left:calc(var(--rail-dot) / -2);border-radius:50%;background:#aaa99f;transition:top .55s ease}
.rail-fluid{position:absolute;inset:0;filter:url(#chapter-goo)}
.rail-pill{position:absolute;left:50%;background:#000;border-radius:99px;transform:translateY(calc(var(--active-chapter,0) * var(--rail-step)))}
.rail-pill{top:calc((var(--rail-step) - var(--rail-dot)) / 2);width:var(--pill-width);height:var(--pill-height);margin-left:calc(var(--pill-width) / -2);transition:transform .48s cubic-bezier(.2,.65,.3,1)}
@media(max-width:700px){.chapter-rail{--rail-step:22px;--rail-dot:5px;--pill-height:21px;--pill-width:6px}}

.site-header{justify-content:space-between}

/* The rail follows fractional scroll progress without a snapping transition. */
.chapter-rail a,.chapter-rail a[aria-current]{height:calc(var(--rail-step) + var(--slot-extra,0) * var(--pill-extra))}
.rail-pill,.rail-node{transition:none}
/* Keep wheel, touch and keyboard scrolling while hiding native scrollbar chrome. */
html,body,.feed,.chapter{scrollbar-width:none}
html::-webkit-scrollbar,body::-webkit-scrollbar,.feed::-webkit-scrollbar,.chapter::-webkit-scrollbar{display:none;width:0;height:0}

/* Only the real dots and pill participate in the shared liquid surface. */
.rail-goo{filter:url(#chapter-goo)}
.rail-fluid{filter:none}
.rail-node{transform:translateY(var(--liquid-pull,0px)) scale(var(--liquid-width,1),var(--liquid-height,1));transform-origin:center}

/* Dot centers stay anchored. Only their silhouette changes near the pill. */
.chapter-rail{padding-block:calc(var(--pill-extra) / 2)}
.chapter-rail a,.chapter-rail a[aria-current]{height:var(--rail-step)}
.rail-node{top:calc(var(--dot-index) * var(--rail-step) + (var(--rail-step) - var(--rail-dot)) / 2 + var(--pill-extra) / 2);transform:scale(var(--liquid-width,1),var(--liquid-height,1));transform-origin:center;transition:none}
.rail-pill{top:calc((var(--rail-step) - var(--pill-height)) / 2 + var(--pill-extra) / 2);transform:translateY(var(--pill-offset,0px))}

/* Shorter active marker, centered on each anchored dot. */
.chapter-rail{--pill-height:15px}
@media(max-width:700px){.chapter-rail{--pill-height:13px}}

/* Crisp capsule at rest; liquid blending only while travelling. */
.rail-pill{border-radius:calc(var(--pill-width) / 2)}
.chapter-rail:not(.is-between) .rail-goo{filter:none}

/* Fixed silhouettes; only the connective meniscus changes with proximity. */
.rail-goo,.rail-fluid{filter:none}
.rail-node{transform:none}
.rail-bridges{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}

.reach-out{padding:8px}.reach-out .mail-icon{width:24px;height:24px}
/* Slightly fuller active chapter pill. */
.chapter-rail{--pill-width:9px;--pill-height:21px}
@media(max-width:700px){.chapter-rail{--pill-width:8px;--pill-height:19px}}
@media(max-width:700px){}
/* Keep the hero at the preferred two-line desktop size at every desktop width. */
@media(min-width:701px){
  #welcome{padding-inline:24px}
  #break-the-mold .chapter-copy{max-width:660px}
  #break-the-mold h1{font-size:26px;line-height:1.25;letter-spacing:-1px}
}

.site-header{justify-content:flex-end}

/* Persistent header, with the scroll invitation belonging to the hero. */
.site-header{position:fixed}
.story-footer{right:auto;left:0;bottom:27px;padding:0 36px;justify-content:flex-start}
.scroll-hint{padding:8px 0;gap:10px;font-size:12px;font-weight:500;color:var(--ink)}
.scroll-hint .scroll-arrow{animation:scroll-bob 2.2s ease-in-out infinite}
@keyframes scroll-bob{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}
@media(max-width:700px){.story-footer{bottom:22px;padding-inline:22px}}
@media(prefers-reduced-motion:reduce){.scroll-hint .scroll-arrow{animation:none}}

/* All right-edge elements share one vertical centerline. */
:root{--right-axis:44px}
.site-header{padding-right:calc(var(--right-axis) - 17px)}
.chapter-rail{right:var(--right-axis);transform:translate(50%,-50%)}
@media(max-width:700px){
  :root{--right-axis:26px}
  .site-header{padding-right:calc(var(--right-axis) - 15px)}
}
/* Center the hero scroll cue along the left edge. */
.story-footer{top:50%;bottom:auto;transform:translateY(-50%)}
.scroll-hint{flex-direction:column;gap:6px;text-align:center}
/* Preserve alignment with the other right-edge elements at the restored size. */
.site-header{padding-right:calc(var(--right-axis) - 28px)}
@media(max-width:700px){.site-header{padding-right:calc(var(--right-axis) - 24px)}}

/* Static black star mark, aligned with the right-edge column. */
.star-mark{display:flex;align-items:center;justify-content:center;width:28px;height:28px;font-size:36px;line-height:1;color:#000}
.site-header{padding-right:calc(var(--right-axis) - 14px)}
@media(max-width:700px){.star-mark{width:28px;height:28px;font-size:32px}.site-header{padding-right:calc(var(--right-axis) - 14px)}}

/* Rays fold into the center as the core grows into a ball. */
.star-rays,.star-core{transform-box:view-box;transform-origin:16px 16px;transition:transform .4s cubic-bezier(.4,0,.2,1)}
.brand:hover .star-rays,.brand:focus-visible .star-rays{transform:scale(0)}
.brand:hover .star-core,.brand:focus-visible .star-core{transform:scale(5)}
/* Match every chapter to the hero's typography and reading bounds. */
@media(min-width:701px){
  .chapter{padding-inline:24px}
  .chapter .chapter-copy{max-width:660px}
  .chapter h1,.chapter h2{font-size:26px;line-height:1.25;letter-spacing:-1px}
}

/* Left directory drawer. Keep the chapter viewport stable during the reveal. */
:root{--drawer-width:310px;--drawer-duration:.5s}
body{background:#000}
.story-surface{position:fixed;inset:0 auto 0 0;width:100%;height:100dvh;background:var(--paper);border-radius:0;overflow:hidden;transform:translateX(0);transition:transform var(--drawer-duration) cubic-bezier(.22,.75,.2,1);isolation:isolate}
.drawer-open .story-surface{transform:translateX(var(--drawer-width));border-radius:20px 0 0 20px}
.work-drawer{position:fixed;inset:0 auto 0 0;width:var(--drawer-width);background:#000;color:#f5f1e7;overflow-y:auto;scrollbar-width:none;padding:90px 58px 44px calc(var(--right-axis) - 8px)}
.work-drawer::-webkit-scrollbar{display:none}
.work-drawer::before{content:"";position:fixed;top:0;left:0;width:var(--drawer-width);height:96px;z-index:20;pointer-events:none;background:linear-gradient(to bottom,#000 0%,#000 55%,transparent 100%);opacity:0;transition:opacity .2s}
.drawer-open .work-drawer::before{opacity:1}
.work-links{opacity:0;visibility:hidden;transform:translateX(-14px);transition:opacity .25s,transform var(--drawer-duration) cubic-bezier(.22,.75,.2,1),visibility var(--drawer-duration)}
.drawer-open .work-links{opacity:1;visibility:visible;transform:none}
.work-group+ .work-group{margin-top:64px}
.work-group h2{font:400 13px/1.4 var(--sans);letter-spacing:-.2px;color:#7f7f7f;text-align:left;margin:0 0 15px;max-width:none;text-wrap:initial}
.work-links a{display:block;width:fit-content;font:400 24px/1.4 var(--sans);letter-spacing:-.7px;color:#f5f1e7;transition:color .18s;white-space:nowrap}
.work-links:has(a:hover) a,.work-links:has(a:focus-visible) a{color:#3b3b3b}
.work-links:has(a:hover) a:hover,.work-links:has(a:focus-visible) a:focus-visible{color:#f5f1e7}
.drawer-toggle{position:fixed;left:calc(var(--right-axis) - 22px);top:22px;width:44px;height:44px;display:grid;place-items:center;z-index:25;color:#000;transition:color .2s}
.hamburger-icon{position:relative;display:block;width:22px;height:16px;pointer-events:none}
.hamburger-icon span{position:absolute;left:0;width:22px;height:1.4px;background:currentColor;border-radius:2px;transition:transform .3s cubic-bezier(.22,.75,.2,1)}
.hamburger-icon span:first-child{top:4px}
.hamburger-icon span:last-child{top:11px}
.drawer-open .drawer-toggle{color:var(--paper)}
.drawer-open .hamburger-icon span:first-child{transform:translateY(3.5px) rotate(45deg)}
.drawer-open .hamburger-icon span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.drawer-toggle:focus-visible{outline-color:currentColor;outline-offset:-4px}
@media(max-width:700px){
  :root{--drawer-width:min(calc(82vw - 10px),290px)}
  .drawer-open .story-surface{border-radius:15px 0 0 15px}
  .drawer-toggle{top:14px}
  .work-drawer{padding:76px 42px 32px calc(var(--right-axis) - 8px)}
  .work-drawer::before{height:80px}
  .work-links a{font-size:21px;line-height:1.38}
  .work-group+ .work-group{margin-top:36px}
  .work-group h2{font-size:12px;margin-bottom:12px}
}
@media(max-height:780px) and (min-width:701px){
  .work-drawer{padding-top:80px;padding-bottom:26px}
  .work-links a{font-size:21px;line-height:1.3}
  .work-group+ .work-group{margin-top:34px}
}
@media(prefers-reduced-motion:reduce){.story-surface,.drawer-toggle,.work-links,.work-links a{transition:none}}

.story-cta{border:1px solid #000;border-radius:999px;padding:12px 22px;color:#000;background:transparent;font-size:16px;font-weight:600;line-height:1.3;transition:background-color .2s,color .2s}
.story-cta:hover,.story-cta:focus-visible{background:#000;color:#fff}


/* Analog LA clock in the top-right corner, sized to match the old star mark. */
.la-clock{position:relative;display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:0;background:none;color:#000;font:inherit;cursor:pointer}
.clock-face{display:block;width:28px;height:28px;overflow:visible}
/* Easter egg: clicking the clock cycles through tiny face designs. */
.face{opacity:0;transform:scale(.6) rotate(-40deg);transform-box:view-box;transform-origin:16px 16px;transition:opacity .22s,transform .35s cubic-bezier(.3,1.4,.5,1)}
.face.is-active{opacity:1;transform:none}
.la-clock:not(.is-ready) .face{transition:none}
.clock-ball,.face-dot{fill:#ff2d20}
.face-hole{fill:var(--paper)}
.face-hour{fill:#fff;font-family:var(--sans);font-weight:500}
.face-minute{stroke:#ffd60a}
.clock-second{stroke:#ff2d20}
.clock-label{position:absolute;right:38px;top:50%;white-space:nowrap;font-size:11px;color:var(--muted);background:var(--paper);opacity:0;transform:translate(4px,-50%);transition:opacity .2s,transform .2s;pointer-events:none}
.la-clock:hover .clock-label{opacity:1;transform:translate(0,-50%)}
@media(prefers-reduced-motion:reduce){.hamburger-icon span{transition:none}}

/* A quiet invitation on the opening chapter, fading with its scroll progress. */
.hero-scroll-cue{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:9;display:grid;place-items:center;width:44px;height:44px;color:#000;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s,visibility .2s}
.hero-scroll-cue.is-showing{opacity:var(--cue-opacity,1);visibility:visible;pointer-events:auto}
.hero-scroll-cue.is-showing svg{animation:hero-arrow-float 1.8s ease-in-out infinite}
@keyframes hero-arrow-float{0%,100%{transform:translateY(-3px)}50%{transform:translateY(4px)}}
@media(max-width:700px){.hero-scroll-cue{bottom:20px}}
@media(prefers-reduced-motion:reduce){.hero-scroll-cue.is-showing svg{animation:none}}

/* Section subtitles dim with the other menu items on link hover or focus. */
.work-group h2{transition:color .18s}
.work-links:has(a:hover) .work-group h2,.work-links:has(a:focus-visible) .work-group h2{color:#3b3b3b}
/* Phones and touch devices: the watercolor masks and text wash are too heavy there (story.js drops
   the illustration masks), so chapters simply fade in. */
@media (max-width:700px),(hover:none) and (pointer:coarse){
  .js .chapter-copy{-webkit-mask-image:none;mask-image:none}
  .js .chapter.is-visible .crayon-art{animation:mobile-fade .7s ease-out .05s both}
  .js .chapter.is-visible .chapter-copy{animation:mobile-fade var(--reveal-duration) ease-out .1s both}
  .crayon-art,.chapter-copy{will-change:opacity}
  /* If a chapter ever overflows and scrolls, Safari gives it its own layer; a cream backdrop keeps the
     illustration's multiply blend matching the page instead of showing its paper as a box. */
  .chapter{background:var(--paper)}
}
/* Landscape phones: the screen is short but wide, so put the illustration beside the text
   (filling most of the height) instead of stacking them, keeping chapters from overflowing. */
@media (max-height:500px) and (orientation:landscape) and (hover:none) and (pointer:coarse){
  .chapter{padding:40px 76px}
  .scene{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:1fr auto 1fr;column-gap:32px;max-width:860px;text-align:left}
  /* Text sits in the middle row so it is vertically centred beside the illustration; anything after it (the contact link) goes just below. */
  .scene>:not(.illustration){grid-column:2;grid-row:3;align-self:start}
  .scene>.chapter-copy{grid-row:2}
  .illustration,#apps .illustration{grid-row:1 / 4;align-self:center;width:min(calc((100dvh - 80px) * 4 / 3),48vw);margin:0}
  .chapter .chapter-copy,#break-the-mold .chapter-copy{max-width:none;margin:0}
  .chapter h1,.chapter h2,#break-the-mold h1{font-size:22px;line-height:1.25;letter-spacing:-.6px;margin:0;text-align:left}
}
@keyframes mobile-fade{from{opacity:0}to{opacity:1}}
/* Phones and touch devices: larger invisible tap targets for the clock and menu, with no visual change. */
@media (max-width:700px),(hover:none) and (pointer:coarse){
  .la-clock::after{content:"";position:absolute;inset:-14px}
  .drawer-toggle::after{content:"";position:absolute;inset:-8px}
}