:root { --cream:#eee1c5; --paper:#e7d6b5; --navy:#102d4a; --ink:#11120e; --orange:#c95c32; --red:#981f24; --green:#154c40; --line-light:rgba(255,248,231,.45); --mono:"Archivo",sans-serif; --serif:"Archivo",sans-serif; }
* { box-sizing:border-box; } html { overflow-x:clip; scroll-behavior:smooth; scroll-snap-type:y proximity; } body { margin:0; min-width:320px; overflow-x:clip; background:var(--cream); color:var(--ink); font-family:var(--mono); } body::after { content:""; position:fixed; inset:0; z-index:20; pointer-events:none; opacity:.2; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.24'/%3E%3C/svg%3E"); mix-blend-mode:multiply; } a { color:inherit; }
.skip-link { position:fixed; top:12px; left:12px; z-index:50; padding:10px 12px; color:var(--cream); background:var(--navy); transform:translateY(-160%); transition:transform .2s; } .skip-link:focus { transform:translateY(0); }
.masthead { position:fixed; inset:0 0 auto; z-index:10; display:flex; justify-content:space-between; align-items:flex-start; padding:1.25rem 1.45rem; color:#fff7e6; mix-blend-mode:difference; pointer-events:none; } .wordmark { font-size:13px; font-weight:500; letter-spacing:.08em; text-decoration:none; pointer-events:auto; } .masthead-note { margin:0; font-size:10px; letter-spacing:.08em; }
.chapter-nav { position:fixed; top:68%; right:clamp(1.45rem,5.7vw,6rem); z-index:12; display:grid; gap:5px; color:#fff8e9; transform:translateY(-50%); } .chapter-link { display:grid; grid-template-columns:2.4ch auto; gap:.75rem; padding:4px 0; font-size:10px; letter-spacing:.06em; text-decoration:none; text-transform:uppercase; opacity:.48; transition:opacity .35s ease,transform .35s ease; } .chapter-link:hover,.chapter-link:focus-visible,.chapter-link.is-active { opacity:1; } .chapter-link.is-active { transform:translateX(-8px); } .chapter-link:focus-visible,.wordmark:focus-visible,.contact-link:focus-visible { outline:1px solid currentColor; outline-offset:5px; }
.chapter { position:relative; isolation:isolate; min-height:100svh; min-height:100vh; overflow:clip; scroll-snap-align:start; scroll-snap-stop:always; } .chapter-landing { color:#fff8e9; background:var(--green); } .horsemen-stage { position:absolute; z-index:0; inset:-12%; overflow:hidden; } .horsemen-image { position:absolute; display:block; width:max(150vw,160vh); height:max(150vw,160vh); max-width:none; object-fit:cover; will-change:transform; } .horsemen-primary { top:50%; left:50%; transform:translate3d(-50%,-50%,0) scale(1.07); } .horsemen-echo { display:none; } .stage-wash { position:absolute; inset:0; background:linear-gradient(105deg,rgba(7,26,28,.43),transparent 53%,rgba(18,17,11,.15)); }
.landing-content { position:absolute; z-index:1; left:clamp(1.45rem,5.7vw,6rem); bottom:clamp(3.9rem,8.2vh,6.5rem); } .chapter-number,.eyebrow,.chapter-footer,.coming-soon { margin:0; font-size:10px; letter-spacing:.1em; text-transform:uppercase; } h1,h2,p { margin-top:0; } h1,h2 { font-family:var(--serif); font-weight:700; letter-spacing:-.065em; line-height:.8; } h1 { margin:.68rem 0 1.2rem; font-size:clamp(5.6rem,14.4vw,15rem); } .landing-caption { margin:0; font-size:11px; letter-spacing:.06em; } .scroll-cue { position:absolute; z-index:1; right:1.45rem; bottom:1.35rem; display:flex; align-items:center; gap:9px; margin:0; font-size:10px; letter-spacing:.07em; text-transform:uppercase; } .scroll-cue span { display:block; width:37px; height:1px; background:currentColor; animation:cue 2.1s ease-in-out infinite; transform-origin:left; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .index-logo { display:block; width:clamp(18.7rem,53.5vw,64.6rem); aspect-ratio:6749 / 816; background:#fff8e9; -webkit-mask-image:url("./assets/Ninety Four Wordmark.png"); -webkit-mask-position:center; -webkit-mask-repeat:no-repeat; -webkit-mask-size:contain; mask-image:url("./assets/Ninety Four Wordmark.png"); mask-position:center; mask-repeat:no-repeat; mask-size:contain; }
.chapter-about .section-logo { width:clamp(18.7rem,49.3vw,57.8rem); }
.chapter-corner { position:absolute; z-index:1; top:1.25rem; right:1.45rem; font-size:10px; letter-spacing:.08em; } .chapter-content { position:relative; z-index:1; min-height:100svh; min-height:100vh; padding:clamp(6rem,12vh,9rem) clamp(1.45rem,8vw,10rem) 2.2rem; } .chapter-about { color:var(--cream); background-color:var(--navy); background-image:linear-gradient(90deg,rgba(11,30,66,.28) 0%,rgba(11,30,66,.16) 52%,rgba(11,30,66,.1) 100%),url("./assets/RUG PATTERN SIGNAGE.png"); background-position:center; background-repeat:no-repeat; background-size:contain; } .chapter-about .about-art { display:none; } .about-art { position:absolute; z-index:0; width:min(63vw,830px); aspect-ratio:1; right:-10vw; bottom:-17vw; border-radius:49% 51% 42% 58% / 47% 42% 58% 53%; border:1px solid rgba(238,225,197,.3); box-shadow:inset 0 0 0 16px var(--navy),inset 0 0 0 17px rgba(238,225,197,.28); opacity:.7; transform:rotate(-19deg); } .about-art::before,.about-art::after { content:""; position:absolute; border-radius:inherit; border:1px solid rgba(238,225,197,.22); } .about-art::before { inset:10%; } .about-art::after { inset:23%; } .eyebrow { margin-bottom:1.4rem; opacity:.75; } h2 { margin-bottom:clamp(2.5rem,8vh,6rem); font-size:clamp(4.08rem,11.05vw,11.73rem); } .about-content { display:flex; flex-direction:column; justify-content:center; max-width:1200px; } .about-copy { display:grid; grid-template-columns:minmax(260px,1.1fr) minmax(190px,.55fr); gap:clamp(2rem,8vw,9rem); max-width:970px; margin-left:clamp(0rem,14vw,13rem); } .about-copy p { margin:0; font-size:12px; line-height:1.65; } .about-copy .statement { font-family:var(--serif); font-size:clamp(1.65rem,2.6vw,2.65rem); line-height:.98; letter-spacing:-.035em; } .chapter-footer { position:absolute; z-index:1; left:1.45rem; bottom:1.35rem; opacity:.7; }
.chapter-shop { color:var(--ink); background-color:var(--paper); background-image:url("./assets/Shop Bag.png"); background-position:center 61%; background-repeat:no-repeat; background-size:cover; } .chapter-shop::before { position:absolute; z-index:0; inset:0; content:""; background:rgba(231,214,181,.38); } .shop-content { display:flex; flex-direction:column; justify-content:center; } .shop-content h2 { position:relative; z-index:1; margin-bottom:clamp(1.3rem,4vh,3rem); } .shop-intro { max-width:300px; margin:0 0 2.3rem; font-size:12px; line-height:1.6; } .shop-list { display:flex; flex-wrap:wrap; max-width:580px; margin:0 0 2rem; padding:0; list-style:none; } .shop-list li { padding:8px 12px 8px 0; margin-right:12px; border-bottom:1px solid rgba(17,18,14,.46); font-size:10px; text-transform:uppercase; letter-spacing:.06em; }
.chapter-collaborations { color:var(--cream); background:var(--red); } .collab-image-wrap { position:absolute; z-index:0; inset:0 0 0 48%; overflow:hidden; } .collab-image-wrap::after { position:absolute; inset:0; content:""; background:linear-gradient(90deg,var(--red),transparent 46%,rgba(28,10,10,.14)); } .collab-image-wrap img { width:100%; height:100%; object-fit:cover; object-position:68% 50%; filter:saturate(.83) contrast(.95); transform:scale(1.12); } .collaborations-content { display:flex; flex-direction:column; justify-content:center; max-width:min(76rem,79vw); } .collaborations-content h2 { max-width:7ch; } .collaborations-content > p:not(.eyebrow) { max-width:360px; margin:0 0 2rem; font-size:12px; line-height:1.65; } .contact-link { display:inline-flex; width:fit-content; gap:1.2rem; padding-bottom:7px; border-bottom:1px solid var(--line-light); font-size:10px; letter-spacing:.08em; text-decoration:none; text-transform:uppercase; }
@keyframes cue { 50% { transform:scaleX(.35); opacity:.5; } }
@media (max-width:720px) { .masthead,.chapter-nav { mix-blend-mode:normal; } .masthead { color:#fff8e9; padding:1rem; } .masthead-note { display:none; } .chapter-nav { top:auto; right:1rem; bottom:1rem; color:#fff8e9; transform:none; } .chapter-link { grid-template-columns:2ch auto; font-size:8px; gap:.45rem; } .chapter-link.is-active { transform:none; } .landing-content { left:1rem; bottom:4.8rem; } h1 { font-size:clamp(5.2rem,26vw,9.5rem); } h2 { font-size:clamp(3.57rem,17.85vw,5.95rem); line-height:.78; } .scroll-cue { right:1rem; bottom:1.1rem; } .chapter-corner { right:1rem; top:1rem; } .chapter-content { padding:5.6rem 1rem 1.4rem; } .about-content { justify-content:flex-start; padding-top:13.5vh; } .about-copy { grid-template-columns:1fr; gap:1.55rem; margin-left:0; } .about-art { width:115vw; right:-45vw; bottom:-18vw; } .shop-orb { top:auto; right:-32vw; bottom:-13vw; width:96vw; transform:none; } .shop-content { justify-content:flex-start; padding-top:18vh; } .collab-image-wrap { inset:44% 0 0; } .collab-image-wrap::after { background:linear-gradient(180deg,var(--red),transparent 58%); } .collaborations-content { justify-content:flex-start; max-width:100%; padding-top:17vh; } .chapter-footer { left:1rem; bottom:1rem; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .scroll-cue span { animation:none; } .horsemen-image { transform:translate3d(-50%,-50%,0) scale(1.11) !important; } }

.chapter-founders { color:var(--cream); background:var(--green); } .founders-content { display:flex; flex-direction:column; justify-content:center; } .founders-content h2 { margin-bottom:clamp(1.5rem,4vh,3rem); font-size:clamp(3.8rem,7.7vw,8rem); } .founders-profiles { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1rem,3vw,3rem); max-width:1000px; } .founder-card { display:grid; grid-template-columns:minmax(120px,.7fr) 1fr; gap:1rem; align-items:start; } .chapter-portrait { display:grid; aspect-ratio:1; place-items:end start; padding:.75rem; color:var(--cream); background:var(--navy); background-image:linear-gradient(135deg,rgba(255,255,255,.06) 25%,transparent 25%),linear-gradient(45deg,rgba(255,255,255,.05) 25%,transparent 25%); background-size:20px 20px; } .chapter-portrait span,.chapter-portrait figcaption { font-size:8px; letter-spacing:.08em; text-transform:uppercase; } .chapter-portrait-photo { position:relative; margin:0; overflow:hidden; padding:0; background:none; } .chapter-portrait-photo img { width:100%; height:100%; object-fit:cover; object-position:center top; } .chapter-portrait-photo figcaption { position:absolute; left:.75rem; bottom:.75rem; margin:0; } .founder-card .eyebrow { margin-bottom:.7rem; font-size:8px; } .founder-card h3 { margin:0 0 .7rem; font-family:var(--serif); font-size:clamp(1.8rem,2.5vw,2.7rem); font-weight:400; line-height:.85; letter-spacing:-.04em; } .founder-card p:last-child { margin:0; font-size:10px; line-height:1.55; } .chapter-contact { color:var(--cream); background:var(--ink); } .contact-content { display:flex; flex-direction:column; justify-content:center; } .contact-content h2 { margin-bottom:2rem; } .contact-content > p:not(.eyebrow) { max-width:360px; margin:0 0 1.35rem; font-size:12px; line-height:1.65; } .newsletter-form { width:min(100%,430px); margin:0 0 1.7rem; } .newsletter-fields { display:flex; border-bottom:1px solid rgba(238,225,197,.75); } .newsletter-fields input { min-width:0; flex:1; padding:.75rem 0; border:0; outline:0; color:var(--cream); background:transparent; font:inherit; font-size:11px; letter-spacing:.04em; } .newsletter-fields input::placeholder { color:rgba(238,225,197,.62); } .newsletter-fields button { padding:.75rem 0 .75rem 1rem; border:0; color:var(--cream); background:transparent; font:inherit; font-size:10px; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; } .newsletter-fields button:hover,.newsletter-fields button:focus-visible { text-decoration:underline; text-underline-offset:4px; } .newsletter-fields button:focus-visible,.newsletter-fields input:focus-visible { outline:1px solid var(--cream); outline-offset:4px; } .newsletter-fields button:disabled { cursor:wait; opacity:.6; } .newsletter-status { min-height:1.3em; margin:.65rem 0 0; font-size:10px; letter-spacing:.03em; } .newsletter-status[data-state="error"] { color:#f29a80; } .newsletter-status[data-state="success"] { color:#b9ddc5; } .instagram-link { display:inline-flex; align-items:center; width:fit-content; gap:.7rem; color:var(--cream); font-size:10px; letter-spacing:.08em; text-decoration:none; text-transform:uppercase; } .instagram-link svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.5; } .instagram-link:hover { opacity:.7; } .instagram-link:focus-visible { outline:1px solid currentColor; outline-offset:5px; } @media (max-width:720px) { .founders-content { justify-content:flex-start; padding-top:12vh; } .founders-content h2 { font-size:clamp(3.7rem,17vw,6.5rem); } .founders-profiles { grid-template-columns:1fr; gap:1rem; } .founder-card { grid-template-columns:105px 1fr; gap:.85rem; } .chapter-portrait { min-height:105px; } .contact-content { justify-content:flex-start; padding-top:22vh; } .newsletter-form { width:100%; } }

.about-story { display:block; max-width:680px; margin-left:clamp(0rem,14vw,13rem); } .about-story p { max-width:62ch; margin:0 0 .9rem; font-size:11px; line-height:1.55; } .about-story .statement { max-width:25ch; margin-bottom:1.25rem; font-size:clamp(1.45rem,2.1vw,2.2rem); } @media (max-width:720px) { .about-story { margin-left:0; } .about-story .statement { font-size:1.55rem; } }

/* Chapter 03 uses the court as a layout field, not a foreground illustration. */
.chapter-about { background-image:url("./assets/RUG PATTERN SIGNAGE.png"); } .chapter-about::before { position:absolute; z-index:0; inset:0; content:""; background:rgba(11,30,66,.16); } .chapter-about .about-content { justify-content:flex-start; padding-top:clamp(6rem,11vh,8.5rem); padding-bottom:clamp(3rem,6vh,5rem); } .chapter-about h2 { margin-bottom:clamp(1.2rem,2.8vh,2.25rem); font-size:clamp(4.2rem,10.4vw,11.2rem); } .chapter-about .about-story { max-width:760px; margin-left:0; } .chapter-about .about-story p { max-width:66ch; margin-bottom:1rem; font-size:13.5px; line-height:1.67; } .chapter-about .about-story .statement { max-width:28ch; margin-bottom:1.35rem; font-size:clamp(1.55rem,2.35vw,2.45rem); line-height:1.01; text-align:left; } .chapter-nav { right:clamp(2rem,7.5vw,8rem); } @media (max-width:720px) { .chapter-about .about-content { padding-top:5.8rem; } .chapter-about h2 { font-size:clamp(4rem,18vw,6.4rem); } .chapter-about .about-story p { font-size:12px; line-height:1.62; } .chapter-about .about-story .statement { font-size:1.62rem; } .chapter-nav { right:1rem; } }
.chapter-about { background-color:#071f4f; } .chapter-about::before { display:none; } .chapter-about h2 { margin-bottom:clamp(3.2rem,6.2vh,4rem); font-size:clamp(4rem,9.6vw,10.4rem); } .chapter-about .about-story { max-width:540px; } .chapter-about .about-story p { max-width:470px; color:rgba(238,225,197,.9); font-size:13.5px; font-weight:400; line-height:1.72; } .chapter-about .about-story .statement { max-width:30ch; color:var(--cream); } @media (max-width:720px) { .chapter-about h2 { margin-bottom:2.75rem; font-size:clamp(3.8rem,17vw,6rem); } .chapter-about .about-story { max-width:100%; } .chapter-about .about-story p { max-width:100%; line-height:1.68; } }