:root{color-scheme:dark;--black:#050505;--paper:#e4e4e2;--gutter:clamp(24px,6vw,110px)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--black);color:var(--paper);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;background:none;border:0}button,a{-webkit-tap-highlight-color:transparent}button:not(:disabled){cursor:pointer}a,button{touch-action:manipulation}[hidden]{display:none!important}
:focus-visible{outline:2px solid #d5d5d5;outline-offset:6px}::selection{background:#999;color:#050505}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip-link{position:fixed;left:24px;top:-100px;z-index:30;background:#eee;color:#111;padding:14px}.skip-link:focus{top:20px}
/* The only clipping boundary is the full viewport, never an inner artwork box. */
.hero{position:relative;width:100%;height:100svh;min-height:360px;background:#050505;isolation:isolate;overflow:hidden}
.art-stage{position:absolute;inset:0;width:100%;height:100%;padding:0;overflow:visible;touch-action:pan-y;cursor:default!important}
.art-stage:focus-visible{outline-offset:-8px}
.art-position{position:absolute;left:4%;top:50%;width:92%;transform:translateY(-50%);display:block;pointer-events:none}
.art-zoom{display:block;transform-origin:54.8% 49%;will-change:transform}
#brand-art{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}
.fluid-surface{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.fluid-ready #brand-art{opacity:0}
.hero-controls{position:absolute;bottom:max(24px,env(safe-area-inset-bottom));left:var(--gutter);right:var(--gutter);display:flex;justify-content:space-between;align-items:center;z-index:2;gap:24px}
.scroll-link{min-height:44px;display:inline-flex;align-items:center;font-size:.875rem;letter-spacing:.02em;color:#a5a5a5;padding:10px 0}
.scroll-link{margin-left:auto;gap:22px}.scroll-link span{font-size:1.3rem}.scroll-link:hover{color:#eee}
.intro-active .hero-controls{opacity:.25;transition:opacity .5s}.hero-controls{transition:opacity .6s}
/* A full-width warning tape between the introduction and the manifesto. */
.countdown-tape{position:relative;overflow:hidden;padding:clamp(28px,3.5vw,72px) 0;background:#090909;color:#111;isolation:isolate}
.countdown-tape:focus-visible{outline:2px solid #f5cf27;outline-offset:-6px}
.tape-band{position:relative;width:calc(100% + 80px);margin-left:-40px;padding:19px 0;background:#f5cf27;transform:rotate(-1.6deg);box-shadow:0 8px 28px #0009}
.tape-band:before,.tape-band:after{content:"";position:absolute;left:0;right:0;height:6px;background:repeating-linear-gradient(125deg,#111 0 10px,transparent 10px 20px);pointer-events:none}
.tape-band:before{top:0}.tape-band:after{bottom:0}
.tape-track{display:flex;width:max-content;will-change:transform}
.tape-group{display:flex;align-items:center;justify-content:flex-start;flex-shrink:0;min-width:0}
.tape-item{display:flex;align-items:baseline;gap:.28em;flex-shrink:0;white-space:nowrap;padding:0 clamp(24px,3.5vw,64px);font-family:Impact,'Arial Narrow',Arial,sans-serif;font-size:clamp(1rem,1.6vw,1.5rem);font-weight:900;line-height:1.35;letter-spacing:.055em;text-transform:uppercase}
.tape-count{min-width:2ch;text-align:right;font-variant-numeric:tabular-nums}
.tape-divider{width:26px;height:20px;flex-shrink:0;background:repeating-linear-gradient(115deg,#111 0 5px,transparent 5px 10px)}
@media(max-width:700px){.tape-band{padding:17px 0}.tape-item{letter-spacing:.035em}.tape-divider{width:20px;height:16px}}
@media(prefers-reduced-motion:reduce){.countdown-tape{padding:24px 0}.tape-band{width:100%;margin:0;transform:none}.tape-track{width:100%;will-change:auto;animation:none}.tape-group{min-width:0;width:100%;flex-wrap:wrap;justify-content:center;gap:14px}.tape-group+.tape-group,.tape-divider{display:none}.tape-item{white-space:normal;flex-wrap:wrap;justify-content:center;padding:0 20px;text-align:center}}
.belief-section,.light-section,.gray-section{padding:clamp(80px,11vw,170px) var(--gutter)}
.statement{font-size:clamp(2.2rem,5.6vw,6.2rem);line-height:1.14;font-weight:400;letter-spacing:-.045em;margin:0;max-width:1200px;text-wrap:balance}
.belief-section{background:#090909}.meanings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:clamp(32px,6vw,96px);width:100%;max-width:1200px;margin-top:clamp(48px,6vw,88px)}
.meanings>div{min-width:0;border-top:1px solid #ffffff24;padding-top:24px}
.meanings h3{font-weight:400;font-family:Georgia,'Times New Roman',serif;font-size:2rem;line-height:1.2;letter-spacing:-.03em;margin:0 0 16px}.meanings p{max-width:34ch;font-size:1.125rem;line-height:1.65;color:#b5b5b5;margin:0;text-wrap:pretty}
.light-section{background:#d8d8d5;color:#1a1a1a;min-height:65svh;display:flex;align-items:center}.light-section .statement{font-family:Georgia,'Times New Roman',serif;font-style:italic}
.gray-section{background:#29292b;min-height:60svh;display:flex;align-items:center;color:#ddd}
.site-footer{background:#090909;padding:0 var(--gutter)}
.footer-meta{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap;padding:30px 0;color:#999;font-size:.875rem}.footer-meta a{padding:12px 0}.footer-meta a:hover{color:#eee}
.footer-social{display:flex;flex-direction:column;align-items:flex-end;gap:12px;padding-top:12px}
.social-links{display:flex;align-items:center;gap:8px}
.footer-meta .social-links a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:11px;color:#b9b9bd;border-radius:50%;transition:color .25s,background .25s,filter .25s,transform .25s}
.social-links svg{display:block;width:22px;height:22px}
.footer-meta .social-links a:hover,.footer-meta .social-links a:focus-visible{color:#ed867f;background:#af27271f;filter:drop-shadow(0 0 8px #c7373759)}
@media(max-width:700px){.footer-meta{flex-direction:column}.footer-social{align-items:flex-start;padding-top:0}}
.closing-line{margin:0;padding:clamp(60px,10vw,140px) 0;font:italic clamp(2rem,5.2vw,5.5rem)/1.2 Georgia,'Times New Roman',serif;letter-spacing:-.035em;text-align:center;color:#c2c2c0;text-wrap:balance}
.reveal{opacity:1;transform:none;transition:opacity .9s ease,transform .9s ease}.will-reveal{opacity:0;transform:translateY(24px)}
@media(max-width:700px){.art-position{left:3%;width:94%}.hero-controls{bottom:max(20px,env(safe-area-inset-bottom))}.belief-section,.light-section,.gray-section{padding:76px var(--gutter)}.statement{font-size:clamp(2.15rem,8.7vw,3.8rem);line-height:1.18}.meanings{grid-template-columns:1fr;gap:36px;margin-top:48px}.meanings>div{padding-top:20px}.meanings p{font-size:1.0625rem}.meanings h3{font-size:1.75rem;margin-bottom:12px}.light-section,.gray-section{min-height:55svh}.footer-meta{font-size:.8125rem;gap:12px}.closing-line{padding:60px 0 80px}}
@media(orientation:landscape) and (max-height:550px){.hero{min-height:280px}.art-position{left:12%;width:76%}.hero-controls{bottom:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.will-reveal{opacity:1;transform:none}}

/* A stronger red-and-gray response throughout the experience. */
.reading-progress{position:fixed;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#c32923,#d2d2d2);transform:scaleX(var(--page-progress,0));transform-origin:left;z-index:9;pointer-events:none}
.belief-section,.light-section,.gray-section,.site-footer{position:relative;isolation:isolate;--pointer-x:50%;--pointer-y:50%}
.belief-section:before,.gray-section:before,.site-footer:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 380px 260px at var(--pointer-x) var(--pointer-y),#a921202c,transparent 75%);opacity:0;transition:opacity .55s}
.belief-section:hover:before,.gray-section:hover:before,.site-footer:hover:before,.touch-active:before{opacity:1}
.light-section:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle 190px at var(--pointer-x) var(--pointer-y),#121213 0%,#38383a 58%,transparent 100%);opacity:0;transition:opacity .6s}
.light-section:hover:before,.light-section.touch-active:before{opacity:1}
.light-section .statement{color:#fff;mix-blend-mode:difference}
.statement .word{display:inline-block;opacity:var(--lit,1);transition:color .3s,transform .35s,opacity .35s}
.belief-section .word:hover,.gray-section .word:hover,.word.word-touched{color:#e15a50;transform:translateY(-3px)}
.light-section .word:hover,.light-section .word.word-touched{color:#fff;transform:translateY(-3px)}
.meanings h3{transition:color .4s,letter-spacing .4s}.meanings>div:hover h3{color:#d45147;letter-spacing:.03em}
.scroll-link,.footer-meta a{transition:transform .25s ease,color .25s ease}.scroll-link:hover,.footer-meta a:hover{color:#e1766d}
@media(max-width:700px){.light-section:before{background:radial-gradient(circle 130px at var(--pointer-x) var(--pointer-y),#121213 0%,#38383a 55%,transparent 100%)}}
@media(prefers-reduced-motion:reduce){.statement .word{opacity:1!important;transform:none!important}.scroll-link,.footer-meta a{transform:none!important}}

/* A luminous closing signature, revealed by scrolling on desktop and touch screens. */
.closing-line{--arrival:1;position:relative;isolation:isolate;padding-top:clamp(80px,11vw,160px);padding-bottom:clamp(90px,12vw,170px)}
.closing-line:before{content:"";position:absolute;inset:12% 0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 38% 48%,#dc292b42,transparent 60%),radial-gradient(ellipse at 67% 52%,#d4d8e41c,transparent 58%);filter:blur(24px);opacity:var(--arrival);transform:scale(calc(.8 + var(--arrival)*.2));transition:opacity .3s,transform .3s}
.closing-title{display:block;font-size:clamp(3.3rem,10.5vw,9rem);line-height:1.15;letter-spacing:-.055em;color:#ed867f;background:linear-gradient(110deg,#be252c 3%,#f36d64 25%,#ffe6df 45%,#e5e8ed 56%,#a9adb5 71%,#d43b3b 92%);background-size:240% 100%;background-position:0 50%;opacity:calc(.35 + var(--arrival)*.65);transform:translateY(calc((1 - var(--arrival))*24px)) scale(calc(.96 + var(--arrival)*.04));filter:drop-shadow(0 0 7px rgb(255 81 71 / calc(.12 + var(--arrival)*.3))) drop-shadow(0 0 28px rgb(222 39 38 / calc(var(--arrival)*.4)));transition:opacity .25s,transform .25s,filter .3s}
@supports (background-clip:text) or (-webkit-background-clip:text){.closing-title{-webkit-background-clip:text;background-clip:text;color:transparent}}
.closing-rest{display:block;margin-top:20px;font-size:clamp(1.5rem,3vw,3rem);line-height:1.35;letter-spacing:-.025em;color:#d7d8dd;opacity:calc(.3 + var(--arrival)*.7);text-shadow:0 0 14px rgb(225 230 245 / calc(var(--arrival)*.35)),0 0 35px rgb(191 201 225 / calc(var(--arrival)*.2));transform:translateY(calc((1 - var(--arrival))*16px));transition:opacity .3s,transform .3s,text-shadow .3s}
.closing-in-view .closing-title{animation:closing-shimmer 7s ease-in-out infinite}
@keyframes closing-shimmer{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}
@media(max-width:700px){.closing-line{padding:80px 0 100px}.closing-title{font-size:clamp(3.2rem,13vw,5.5rem)}.closing-rest{margin-top:16px}.closing-line:before{filter:blur(18px)}}
@media(prefers-reduced-motion:reduce){.closing-title,.closing-rest{opacity:1;transform:none}.closing-title{animation:none!important}.closing-line:before{opacity:1;transform:none}}

/* Gray split-flap cards with room for all three pairs of digits. */
.hero{min-height:760px}
.hero .art-position{top:32%;left:0;right:0;width:min(88%,1440px,120svh);margin-inline:auto}
.time-display{position:absolute;z-index:2;left:24px;right:24px;bottom:max(90px,12svh);width:auto;max-width:480px;margin-inline:auto;text-align:center;transition:opacity .6s}
.intro-active .time-display{opacity:0;pointer-events:none}
.flip-clock{--card-height:132px;--half-height:66px;--digit-size:96px;position:relative;display:grid;grid-template-columns:minmax(0,1fr) 12px minmax(0,1fr) 12px minmax(0,1fr);gap:6px;width:100%;margin:0;padding:20px 0 0;background:transparent;box-shadow:none;color:#f4f1e9}
.flip-card{position:relative;min-width:0;width:100%;height:var(--card-height);perspective:700px;font-family:Arial,Helvetica,sans-serif;font-size:min(var(--digit-size),19vw);font-weight:700;letter-spacing:-.035em;font-variant-numeric:tabular-nums;line-height:var(--card-height);background:transparent;box-shadow:none}
.flip-card:after{content:"";position:absolute;z-index:3;left:8%;right:8%;top:var(--half-height);height:1px;background:#e4e4e21f;pointer-events:none}
.flip-half{position:absolute;left:0;right:0;height:var(--half-height);overflow:hidden;background:transparent;backface-visibility:hidden}
.flip-half>span{position:absolute;top:0;left:0;right:0;height:var(--card-height);text-align:center;white-space:nowrap}
.flip-half.top,.flip-half.fold-top{top:0;background:linear-gradient(#47494e,#3d3f44);border-radius:7px 7px 0 0}
.flip-half.bottom,.flip-half.fold-bottom{bottom:0;background:linear-gradient(#37393e,#3d3f44);border-radius:0 0 7px 7px}
.flip-half.bottom>span,.flip-half.fold-bottom>span{top:calc(-1*var(--half-height))}
.fold-top,.fold-bottom{display:none;z-index:2}.fold-top{transform-origin:bottom}.fold-bottom{transform-origin:top;transform:rotateX(90deg)}
.flipping .fold-top{display:block;animation:flip-away .34s ease-in forwards}
.flipping .fold-bottom{display:block;animation:flip-arrive .34s .34s ease-out forwards}
@keyframes flip-away{to{transform:rotateX(-90deg);filter:brightness(.65)}}
@keyframes flip-arrive{from{transform:rotateX(90deg);filter:brightness(.65)}to{transform:rotateX(0);filter:brightness(1)}}
.clock-colon{display:flex;align-items:center;justify-content:center;height:var(--card-height);font:600 44px/1 Arial,Helvetica,sans-serif;color:#dedee0}
.clock-period{position:absolute;left:12px;top:0;font-size:14px;font-weight:700;line-height:20px;letter-spacing:.04em;color:#e9e7e3}
.clock-countdowns{margin-top:16px;color:#f4f4f2;font-family:Arial,Helvetica,sans-serif;font-size:20px;font-weight:600;line-height:1.5;letter-spacing:0;text-shadow:none;filter:none;transform:none;opacity:1}
.clock-countdowns p{margin:2px 0;text-wrap:balance}
.countdown-tape .tape-item{gap:.5em;text-transform:none;letter-spacing:.015em;align-items:center}
.tape-item a{color:#b01818;display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.tape-item a:hover{color:#7c1010}.tape-item a:focus-visible{outline-color:#111;outline-offset:3px}
@media(max-width:700px){.hero{min-height:640px}.hero .art-position{top:40%;left:0;right:0;width:94%}.time-display{left:16px;right:16px;bottom:max(88px,12svh);max-width:360px}.flip-clock{--card-height:96px;--half-height:48px;--digit-size:68px;gap:4px;grid-template-columns:minmax(0,1fr) 8px minmax(0,1fr) 8px minmax(0,1fr)}.clock-countdowns{font-size:18px;line-height:1.5;margin-top:12px}.clock-period{left:8px}.countdown-tape .tape-item{padding:0 24px}}
@media(max-width:360px){.flip-clock{--card-height:88px;--half-height:44px;--digit-size:60px}.clock-countdowns{font-size:16px}}
@media(orientation:landscape) and (max-height:550px){.hero{min-height:680px}.hero .art-position{top:26%;width:min(64%,780px)}.time-display{bottom:88px}}
@media(prefers-reduced-motion:reduce){.countdown-tape .tape-item{display:block;white-space:normal}.tape-item a{color:#b01818;display:inline;line-height:1.8}.flipping .fold-top,.flipping .fold-bottom{display:none}.flipping .top,.flipping .bottom{visibility:visible}}

/* Tighter, larger announcement with no punctuation markers between repeats. */
.countdown-tape .tape-band{padding:10px 0}
.countdown-tape .tape-item{padding:0 16px;font-size:clamp(28px,3vw,44px);line-height:1.12;gap:.3em;letter-spacing:0}
.countdown-tape .tape-group{justify-content:flex-start}
@media(max-width:700px){.clock-colon{font-size:32px}}
@media(prefers-reduced-motion:reduce){.countdown-tape .tape-group{justify-content:center}.countdown-tape .tape-item{padding:8px 20px}}

.tape-band{touch-action:pan-y pinch-zoom;cursor:grab;user-select:none;-webkit-user-select:none}
.tape-band.is-dragging,.tape-band.is-dragging a{cursor:grabbing}
@media(prefers-reduced-motion:reduce){.tape-band{cursor:default;user-select:auto;-webkit-user-select:auto}}

/* An unobtrusive silver ring unfolds into the corner's feature orbit. */
.corner-menu{--orbit-size:min(268px,calc(100vw - 12px),calc(100svh - 12px));position:fixed;top:env(safe-area-inset-top,0px);left:env(safe-area-inset-left,0px);width:64px;height:64px;z-index:12;isolation:isolate;pointer-events:none}
.corner-trigger{position:absolute;left:8px;top:8px;z-index:2;width:48px;height:48px;display:grid;place-items:center;padding:0;border-radius:50%;pointer-events:auto;cursor:pointer}
.corner-ring{width:22px;height:22px;border:1px solid #bfc1c8;border-radius:50%;background:radial-gradient(circle,#b7bac50c 45%,#dce0ec18 70%,transparent 74%);box-shadow:0 0 7px #e3e5f343,0 0 20px #b5b9c729,inset 0 0 6px #ced1dc30;opacity:.64;transition:opacity .3s,box-shadow .4s,transform .45s cubic-bezier(.2,.8,.2,1)}
.corner-trigger:hover .corner-ring,.corner-trigger:focus-visible .corner-ring,.is-open .corner-ring{opacity:1;transform:scale(1.12);box-shadow:0 0 10px #f0f2ff7a,0 0 30px #cdd2e540,inset 0 0 9px #dce0ef50}
.corner-trigger:focus-visible{outline:1px solid #c1c5d1;outline-offset:0}
.corner-orbit{position:absolute;left:0;top:0;width:var(--orbit-size);height:var(--orbit-size);border-bottom-right-radius:100%;overflow:hidden;pointer-events:none;opacity:0;transform:scale(.78);transform-origin:32px 32px;background:radial-gradient(circle at 32px 32px,#36373bea 0,#15161ae8 50%,#090a0de8 100%);border-right:1px solid #c8ccd128;border-bottom:1px solid #c8ccd128;box-shadow:12px 12px 36px #0005;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:opacity .24s ease,transform .36s cubic-bezier(.16,1,.3,1)}
.is-open .corner-orbit{opacity:1;transform:scale(1);pointer-events:auto}
.orbit-guide{position:absolute;left:-114px;top:-114px;width:292px;height:292px;border:1px solid #c8ccd126;border-radius:50%;pointer-events:none}
.orbit-guide:before,.orbit-guide:after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.orbit-guide:before{inset:38px;border:1px solid #c8ccd117}.orbit-guide:after{inset:-49px;border:1px dashed #c8ccd114}
.orbit-options{position:absolute;inset:0}
.orbit-item{position:absolute;width:clamp(52px,24vw,72px);height:clamp(52px,24vw,72px);padding:8px;transform:translate(-50%,-50%);border:1px solid #d2d4dc30;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:linear-gradient(145deg,#42444b80,#1a1b2140);color:#d8dae0;font:400 14px/1.15 Arial,Helvetica,sans-serif;box-shadow:inset 0 1px 0 #ffffff0c,0 4px 16px #0003;transition:left .32s cubic-bezier(.2,.8,.2,1),top .32s cubic-bezier(.2,.8,.2,1),background .2s,border-color .2s,box-shadow .2s}
.orbit-item svg{width:23px;height:23px;flex-shrink:0}
.orbit-item:hover,.orbit-item:focus-visible{color:#fff;border-color:#e3e5ed85;background:linear-gradient(145deg,#666974a6,#292b335c);box-shadow:0 0 22px #d3d8ef28,inset 0 1px 0 #ffffff24;outline:none}
.orbit-item[aria-checked=true]{border-color:#e3e5eda0;color:#fff;box-shadow:0 0 18px #d3d8ef29,inset 0 0 10px #d9deee16}
.hero .art-position{transition:top .65s cubic-bezier(.2,.8,.2,1),width .65s cubic-bezier(.2,.8,.2,1)}
.hero:not(.time-visible){min-height:360px}
.hero:not(.time-visible) .art-position{top:50%;left:0;right:0;width:92%;margin-inline:auto}
.time-display:not([hidden]){animation:time-arrive .55s ease both}
@keyframes time-arrive{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
@media(max-width:700px){.hero:not(.time-visible) .art-position{width:94%}}
@media(orientation:landscape) and (max-height:550px){.hero:not(.time-visible){min-height:280px}.hero:not(.time-visible) .art-position{width:76%}}
@media(prefers-reduced-motion:reduce){.corner-orbit{transform:none}.time-display:not([hidden]){translate:none}}
