/* ============================================================ ARCHICOB — Institutional Identity System v4.0 · "Mass and Aperture" Dark ground. Monumental inscription type. Images cut into the mass like openings. Built to Book VI, in the register of the architecture. Typefaces: Cormorant Garamond (inscription) · Montserrat (record) ============================================================ */ /* ---------- 1. TOKENS ---------- The ladder is measured in perceptual lightness, not in hex intuition: each dark step is 2.6–6.1 L* apart, where ~3 is the threshold at which the eye registers a change of plane. The old ladder stepped 1.4–3.1 and read as one flat black. Every tone carries a warm cast — this is ink and bronze, never digital black, never grey. */ :root{ /* Ground — four masses, now genuinely distinguishable */ --void: #050404; /* L* 1.2 — the foot of the hero, the footer */ --ink: #100D09; /* L* 3.8 — the page */ --mass: #1C1811; /* L* 8.5 — the alternating band */ --charcoal: #2A241A; /* L* 14.6 — insets: plaques, cards, dialogues */ --stone: #2A241A; /* retained alias */ /* Champagne — the family that does the quiet work */ --paper: #F8F2E7; --paper2: #EFE6D4; --champagne: #E4D7BC; --sand: #C4B594; /* Metal — rationed */ --gold: #D4A853; --gold-2: #A87F32; --gold-ink: #7C5B22; /* the same bronze at ink weight, AA on champagne */ --seal: #C1170D; /* Text, warmed toward champagne rather than cooled toward grey */ --t-strong: #F7F2E7; --t-body: rgba(238,229,211,.78); --t-mute: rgba(238,229,211,.56); --t-invert: #F7F2E7; --t-invert-2:rgba(238,229,211,.68); /* Rules carry a trace of gold, so every edge belongs to the same family */ --line: rgba(212,168,83,.20); --line-soft: rgba(212,168,83,.10); --line-inv: rgba(212,168,83,.20); --line-inv-s:rgba(212,168,83,.10); --serif: 'Cormorant Garamond', 'Times New Roman', serif; --sans: 'Montserrat', system-ui, -apple-system, sans-serif; /* The lower bounds are set so the longest word in any headline still fits a 360px column. Raise them and long words start overflowing on small phones. */ --d1: clamp(2.7rem, 8.2vw, 9rem); --d2: clamp(2.05rem, 5.4vw, 5.6rem); --d3: clamp(1.5rem, 2.4vw, 2.5rem); --d4: clamp(1.15rem, 1.5vw, 1.5rem); --lede: clamp(1.15rem, 1.6vw, 1.7rem); --body: clamp(.85rem, .95vw, .93rem); --label: .615rem; --gutter: clamp(1.35rem, 5vw, 6.5rem); --max: 1760px; --band: clamp(6rem, 13vh, 12rem); --ease: cubic-bezier(.22,.61,.36,1); } /* A light band re-scopes the theme, so every component inside inverts */ .band--light{ --t-strong:#17140F; --t-body:rgba(23,20,15,.78); --t-mute:rgba(23,20,15,.68); --t-invert:#17140F; --t-invert-2:rgba(23,20,15,.68); --line:rgba(23,20,15,.16); --line-soft:rgba(23,20,15,.08); --line-inv:rgba(23,20,15,.16); --line-inv-s:rgba(23,20,15,.08); --gold:var(--gold-ink); --champagne:#6E5B39; --sand:#6E5B39; --charcoal:#EFE6D4; background:var(--paper); color:var(--t-body); } /* ---------- 2. RESET ---------- */ *,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; } html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; background:var(--ink); overflow-x:clip; } body{ background:var(--ink); color:var(--t-body); font-family:var(--sans); font-weight:300; font-size:var(--body); line-height:1.95; /* clip, not hidden: `overflow:hidden` makes the body a scroll container, which silently disables position:sticky for every descendant. `clip` gives the same protection against sideways scroll and keeps sticky. */ overflow-x:clip; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; } img,video{ display:block; max-width:100%; } a{ color:inherit; text-decoration:none; } button,input,select,textarea{ font:inherit; color:inherit; } button{ background:none; border:none; cursor:pointer; } ::selection{ background:var(--gold); color:var(--void); } ::-webkit-scrollbar{ width:3px; } ::-webkit-scrollbar-track{ background:var(--void); } ::-webkit-scrollbar-thumb{ background:var(--gold-2); } :focus-visible{ outline:1px solid var(--gold); outline-offset:4px; } section[id],[data-level]{ scroll-margin-top:5.5rem; } /* ---------- 3. TYPE ---------- Titles are inscription: capitals in a light serif, with italic lowercase left in its own register so every headline carries two voices. */ .d1,.d2,.d3,.d4{ font-family:var(--serif); font-weight:300; color:var(--t-strong); overflow-wrap:break-word; /* a long word yields before it overruns its column */ /* …but never mid-letter. `min-width:min-content` is the width of the longest unbreakable word, and min-width always beats max-width, so a heading's box can never be narrower than its own longest word — which means the rule above can never actually fire on a real headline. This matters because the measures on these headings are set in `ch`, the width of the "0" glyph. `ch` is font-dependent, and word width is font-dependent in a different proportion, so a cap that reads safely in a fallback serif can be narrower than the word in Cormorant Garamond. That is how THE ARCHITECTURE came to be set as ARCHITECTUR / E OF. This line makes the whole class of fault impossible instead of tuning each cap by hand. */ min-width:min-content; } .d1{ font-size:var(--d1); line-height:.94; letter-spacing:.012em; text-transform:uppercase; } .d2{ font-size:var(--d2); line-height:.97; letter-spacing:.015em; text-transform:uppercase; } .d3{ font-size:var(--d3); line-height:1.16; } .d4{ font-size:var(--d4); line-height:1.3; } .d1 em,.d2 em{ text-transform:none; font-style:italic; letter-spacing:0; color:var(--sand); } .d3 em,.d4 em{ font-style:italic; color:var(--sand); } .lede{ font-family:var(--serif); font-weight:300; font-size:var(--lede); line-height:1.58; color:var(--t-strong); } .lede em{ font-style:italic; color:var(--gold); } .label{ font-family:var(--sans); font-size:var(--label); font-weight:400; letter-spacing:.4em; text-transform:uppercase; color:var(--sand); } .label--gold,.label--seal{ color:var(--gold); } .meta{ font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--t-mute); } .p{ max-width:64ch; color:var(--t-body); } .p + .p{ margin-top:1.3rem; } .mute{ color:var(--t-mute); } .rule{ height:1px; background:var(--line); border:0; } .seal-rule{ width:44px; height:2px; background:var(--gold); margin-bottom:1.8rem; } /* ---------- 4. LAYOUT ---------- */ .wrap{ max-width:var(--max); margin:0 auto; padding-inline:var(--gutter); } .band{ padding-block:var(--band); position:relative; } .band--stone,.band--mass{ background:var(--mass); } .band--ink,.band--void{ background:var(--void); } .band--tight{ padding-block:clamp(3.5rem,7vh,6rem); } /* Elevation ghost — the level of the band, cast into the mass */ .band[data-level]::before{ content:attr(data-level); position:absolute; top:clamp(1rem,3vh,3rem); right:var(--gutter); font-family:var(--serif); font-size:clamp(3.5rem,8vw,9rem); line-height:1; color:var(--t-strong); opacity:.05; pointer-events:none; letter-spacing:.02em; } .band--light[data-level]::before{ opacity:.08; } .grid{ display:grid; gap:clamp(2rem,4vw,5.5rem); } .g-2{ grid-template-columns:repeat(2,1fr); } .g-3{ grid-template-columns:repeat(3,1fr); } .g-4{ grid-template-columns:repeat(4,1fr); } .g-editorial{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); } .g-aside{ grid-template-columns:minmax(0,3fr) minmax(0,8fr); } .stack-sm > * + *{ margin-top:1rem; } .stack > * + *{ margin-top:1.8rem; } .stack-lg > * + *{ margin-top:3.2rem; } .sec-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; padding-bottom:1.8rem; border-bottom:1px solid var(--line); margin-bottom:clamp(2.5rem,5vw,5rem); } .sec-head .label{ padding-bottom:.5rem; } /* ---------- 5. NAV ---------- */ .nav{ position:fixed; top:0; left:0; right:0; z-index:800; display:flex; align-items:center; justify-content:space-between; gap:2rem; padding:1.35rem var(--gutter); background:linear-gradient(to bottom, rgba(5,5,4,.85), rgba(5,5,4,0)); border-bottom:1px solid transparent; transition:background .5s var(--ease), padding .5s var(--ease), border-color .5s; } .nav.is-scrolled{ padding-block:.9rem; background:rgba(5,5,4,.95); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom-color:var(--line-soft); } .nav-mark{ display:flex; align-items:center; gap:.7rem; } /* The mark is never redrawn or reproportioned — scaled by height only. */ .nav-mark img{ height:2.1rem; width:auto; display:block; filter:drop-shadow(0 0 6px rgba(212,168,83,.28)); } .nav-word{ font-family:var(--sans); font-size:.95rem; font-weight:300; letter-spacing:.34em; color:var(--t-strong); } .nav-word .b{ color:var(--gold); } .nav-links{ display:flex; gap:clamp(1.1rem,2.1vw,2.3rem); list-style:none; } .nav-links a{ font-size:var(--label); font-weight:300; letter-spacing:.28em; text-transform:uppercase; color:var(--t-body); position:relative; padding-block:.4rem; transition:color .35s; } .nav-links a::after{ content:''; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--gold); transition:right .45s var(--ease); } .nav-links a:hover{ color:var(--t-strong); } .nav-links a:hover::after,.nav-links a[aria-current="page"]::after{ right:0; } .nav-links a[aria-current="page"]{ color:var(--t-strong); } .nav-tools{ display:flex; align-items:center; gap:1.2rem; } .btn-quiet{ font-size:var(--label); letter-spacing:.28em; text-transform:uppercase; font-weight:300; border:1px solid rgba(212,168,83,.45); padding:.75rem 1.5rem; color:var(--gold); transition:background .35s, color .35s, border-color .35s; } .btn-quiet:hover{ background:var(--gold); color:var(--void); border-color:var(--gold); } .nav-index-btn{ display:flex; align-items:center; gap:.6rem; font-size:var(--label); letter-spacing:.28em; text-transform:uppercase; color:var(--t-body); } .nav-index-btn .bars{ display:block; width:22px; } .nav-index-btn .bars i{ display:block; height:1px; background:var(--sand); margin:5px 0; transition:transform .4s var(--ease), opacity .3s; } .nav-index-btn.is-open .bars i:nth-child(1){ transform:translateY(6px) rotate(45deg); background:var(--gold); } .nav-index-btn.is-open .bars i:nth-child(2){ opacity:0; } .nav-index-btn.is-open .bars i:nth-child(3){ transform:translateY(-6px) rotate(-45deg); background:var(--gold); } /* ---------- 6. INDEX OVERLAY ---------- */ .index-ov{ position:fixed; inset:0; z-index:790; background:var(--void); padding:7.5rem var(--gutter) 3rem; overflow-y:auto; opacity:0; visibility:hidden; transform:translateY(-10px); transition:opacity .5s var(--ease), visibility .5s, transform .6s var(--ease); } .index-ov.is-open{ opacity:1; visibility:visible; transform:none; } .index-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1.5rem,3vw,3.5rem); max-width:var(--max); margin:0 auto; } .index-col > .label{ display:block; padding-bottom:1rem; border-bottom:1px solid var(--line); margin-bottom:1.2rem; } .index-col ul{ list-style:none; } .index-col a{ font-family:var(--serif); font-size:1.5rem; font-weight:300; line-height:1.8; color:var(--t-strong); display:inline-block; position:relative; transition:color .3s, padding-left .4s var(--ease); } .index-col a::before{ content:''; position:absolute; left:0; top:50%; width:0; height:1px; background:var(--gold); transition:width .4s var(--ease); } .index-col a:hover{ color:var(--gold); padding-left:1.6rem; } .index-col a:hover::before{ width:1.1rem; } .index-foot{ max-width:var(--max); margin:clamp(3rem,7vw,6rem) auto 0; padding-top:1.6rem; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:2rem; flex-wrap:wrap; } /* ---------- 7. DATUM RAIL ---------- */ .datum{ position:fixed; left:clamp(.9rem,2.1vw,2.8rem); top:50%; transform:translateY(-50%); z-index:700; display:none; } .datum::before{ content:''; position:absolute; left:0; top:6px; bottom:6px; width:1px; background:var(--line); } .datum-item{ display:flex; align-items:center; gap:.6rem; height:36px; cursor:pointer; } .datum-tick{ display:block; width:12px; height:1px; background:var(--sand); opacity:.45; transition:width .55s var(--ease), background .4s, opacity .4s; flex-shrink:0; } .datum-txt{ display:flex; align-items:baseline; gap:.55rem; white-space:nowrap; background:#0B0906; border:1px solid rgba(212,168,83,.28); padding:.32rem .65rem; opacity:0; transform:translateX(-6px); pointer-events:none; transition:opacity .4s var(--ease), transform .4s var(--ease); } .datum-lvl{ font-size:.54rem; letter-spacing:.1em; color:rgba(238,229,211,.6); font-variant-numeric:tabular-nums; } .datum-name{ font-size:.56rem; font-weight:400; letter-spacing:.26em; text-transform:uppercase; color:#F7F2E7; } .datum-item.is-on .datum-tick{ width:28px; background:var(--gold); opacity:1; } .datum-item:hover .datum-tick{ width:22px; opacity:1; } .datum:hover .datum-txt{ opacity:1; transform:none; } /* The tag never changes with the ground it passes: one chip, everywhere. Only the rail and ticks adapt, so the marker stays legible on paper. */ .datum.on-light::before{ background:rgba(23,20,15,.2); } .datum.on-light .datum-tick{ background:rgba(23,20,15,.5); } .datum.on-light .datum-item.is-on .datum-tick{ background:var(--seal); } @media (min-width:768px){ .datum{ display:block; } } /* Between tablet and desktop the rail keeps its ticks and drops the tags — there is no hover on a touch screen, and the margin is narrower */ @media (max-width:1279px){ .datum-txt{ display:none; } .datum-tick{ width:9px; } .datum-item.is-on .datum-tick{ width:20px; } .datum-item{ height:30px; } } /* ---------- 8. HERO ---------- */ .hero{ position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; } .hero-media{ position:absolute; inset:0; } .hero-media video,.hero-media img{ width:100%; height:100%; object-fit:cover; } .hero-media::after{ content:''; position:absolute; inset:0; background:linear-gradient(178deg, rgba(5,5,4,.74) 0%, rgba(5,5,4,.16) 30%, rgba(5,5,4,.7) 72%, rgba(5,5,4,.97) 100%); } .hero-inner{ position:relative; z-index:2; padding-bottom:clamp(3.5rem,9vh,7rem); } .hero-eyebrow{ display:flex; align-items:center; gap:1.1rem; margin-bottom:clamp(1.6rem,4vh,2.8rem); } .hero-eyebrow .bar{ width:clamp(30px,5vw,72px); height:1px; background:var(--gold); } .hero-title{ font-family:var(--serif); font-weight:300; text-transform:uppercase; font-size:clamp(2.5rem,7.2vw,8.2rem); line-height:.96; letter-spacing:.015em; color:var(--t-strong); max-width:16ch; } .hero-title em{ text-transform:none; font-style:italic; letter-spacing:-.01em; color:var(--sand); } .hero-line{ font-family:var(--sans); font-weight:200; font-size:clamp(.92rem,1.25vw,1.15rem); line-height:1.8; color:var(--t-body); max-width:46ch; margin-top:clamp(1.4rem,3vh,2.2rem); } .hero-actions{ display:flex; align-items:center; gap:1.6rem; flex-wrap:wrap; margin-top:clamp(1.8rem,4vh,2.6rem); } .hero-actions .link{ font-size:var(--label); letter-spacing:.28em; text-transform:uppercase; color:var(--t-strong); border-bottom:1px solid var(--line); padding-bottom:.45rem; transition:border-color .35s, color .35s; } .hero-actions .link:hover{ color:var(--gold); border-color:var(--gold); } .hero-sub{ display:flex; flex-wrap:wrap; gap:.5rem clamp(1.4rem,3.4vw,3.4rem); margin-top:clamp(2rem,4.5vh,3.2rem); padding-top:1.7rem; border-top:1px solid var(--line); } .hero-sub span{ font-size:var(--label); font-weight:300; letter-spacing:.34em; text-transform:uppercase; color:var(--t-body); } .hero-sub span::before{ content:'— '; color:var(--gold); } .hero-scroll{ position:absolute; right:var(--gutter); bottom:clamp(3.5rem,9vh,8rem); z-index:2; display:flex; align-items:center; gap:.9rem; } .hero-scroll span{ font-size:.53rem; letter-spacing:.34em; text-transform:uppercase; color:var(--t-mute); } .hero-scroll i{ display:block; width:56px; height:1px; background:var(--line); position:relative; overflow:hidden; } .hero-scroll i::after{ content:''; position:absolute; inset:0; background:var(--gold); transform:translateX(-100%); animation:scrollLine 2.8s var(--ease) infinite; } @keyframes scrollLine{ 0%{transform:translateX(-100%)} 55%{transform:translateX(0)} 100%{transform:translateX(100%)} } .phero{ padding-top:clamp(9rem,20vh,15rem); padding-bottom:clamp(3rem,8vh,6rem); } .phero .d1{ max-width:18ch; } .phero-meta{ margin-top:2.4rem; padding-top:1.5rem; border-top:1px solid var(--line); display:flex; gap:clamp(1.5rem,4vw,4rem); flex-wrap:wrap; } /* ---------- 9. STATEMENT ---------- */ .statement{ min-width:min-content; max-width:22ch; font-family:var(--serif); font-weight:300; font-size:clamp(1.9rem,4.2vw,4.2rem); line-height:1.08; text-transform:uppercase; letter-spacing:.012em; color:var(--t-strong); } .statement em{ text-transform:none; font-style:italic; color:var(--gold); } .manifesto-line{ font-family:var(--serif); font-weight:300; font-size:clamp(1.45rem,3vw,3rem); line-height:1.32; color:var(--t-strong); max-width:28ch; } .manifesto-line + .manifesto-line{ margin-top:.6rem; } .manifesto-line.is-key{ color:var(--gold); font-style:italic; } .pull{ border-left:1px solid var(--gold); padding-left:clamp(1.2rem,2.5vw,2.6rem); } .plaque{ border:1px solid var(--line); padding:clamp(2rem,4vw,4rem); background:rgba(200,184,154,.035); } .band--light .plaque{ background:rgba(23,20,15,.03); } .plaque .lede{ max-width:44ch; } /* ---------- 9b. PROOF ---------- */ .proof{ display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); } .proof-cell{ padding:clamp(1.6rem,3vw,2.6rem) clamp(1rem,2vw,2rem); border-right:1px solid var(--line); display:flex; flex-direction:column; } .proof-cell:last-child{ border-right:none; } /* a cell carrying only a line of text drops it to sit on the same baseline as the labels in the cells beside it, instead of floating at the top */ .proof-cell > .proof-k:only-child{ /* sits exactly where the other labels sit: the height of a numeral, plus its gap */ margin-top:calc(clamp(2.4rem,4.6vw,4.4rem) + .9rem); text-transform:none; letter-spacing:.06em; font-size:.78rem; line-height:1.5; color:var(--t-body); } .proof-n{ font-family:var(--serif); font-weight:300; font-size:clamp(2.4rem,4.6vw,4.4rem); line-height:1; color:var(--t-strong); } .proof-n em{ font-style:normal; color:var(--gold); } .proof-k{ font-size:.58rem; letter-spacing:.3em; text-transform:uppercase; color:var(--t-mute); margin-top:.9rem; } /* Register: an invitation, not a form */ .invite{ border:1px solid var(--gold); padding:clamp(2rem,4vw,3.4rem); background:rgba(212,168,83,.04); } .band--light .invite{ background:rgba(138,104,40,.05); } /* ---------- 10. ROWS ---------- */ .rows{ border-top:1px solid var(--line); } .row{ display:grid; grid-template-columns:minmax(0,4fr) minmax(0,6fr) auto; gap:clamp(1rem,3vw,3rem); align-items:baseline; padding:clamp(1.7rem,3vw,2.7rem) 0; border-bottom:1px solid var(--line); transition:padding-left .5s var(--ease), background .5s var(--ease); } a.row:hover{ padding-left:1.2rem; background:linear-gradient(to right, rgba(212,168,83,.08), transparent 60%); } .row-title{ font-family:var(--serif); font-size:clamp(1.4rem,2.2vw,2.1rem); font-weight:300; color:var(--t-strong); line-height:1.2; } a.row:hover .row-title{ color:var(--gold); } .row-desc{ max-width:58ch; color:var(--t-body); } .row-mark{ font-size:var(--label); letter-spacing:.28em; text-transform:uppercase; color:var(--t-mute); white-space:nowrap; } a.row:hover .row-mark{ color:var(--gold); } .row-kicker{ display:block; font-size:var(--label); letter-spacing:.3em; text-transform:uppercase; color:var(--gold); margin-bottom:.55rem; } /* Tier heading — the hierarchy above the rows */ .tier{ display:flex; align-items:baseline; gap:1.2rem; padding-bottom:.9rem; margin-top:clamp(2.5rem,5vw,4rem); border-bottom:1px solid var(--gold); } .tier:first-of-type{ margin-top:0; } .tier h3{ font-family:var(--serif); font-weight:300; font-size:clamp(1.15rem,1.6vw,1.5rem); text-transform:uppercase; letter-spacing:.14em; color:var(--gold); } .tier span{ font-size:.58rem; letter-spacing:.3em; text-transform:uppercase; color:var(--t-mute); } /* ---------- 11. CELLS ---------- */ .cells{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); } .cell{ padding:clamp(1.8rem,2.8vw,2.8rem); border-right:1px solid var(--line); border-bottom:1px solid var(--line); transition:background .5s; position:relative; } .cell::after{ content:''; position:absolute; left:0; bottom:-1px; width:0; height:1px; background:var(--gold); transition:width .6s var(--ease); } .cell:hover{ background:rgba(212,168,83,.05); } .cell:hover::after{ width:100%; } .cell h3{ font-family:var(--serif); font-size:1.55rem; font-weight:300; color:var(--t-strong); margin-bottom:.6rem; } .cell p{ font-size:.82rem; line-height:1.9; color:var(--t-body); } .band--light .cell:hover{ background:rgba(23,20,15,.04); } /* ---------- 12. LADDER ---------- */ .ladder{ border-left:1px solid var(--line); } .rung{ position:relative; padding:clamp(1.4rem,2.5vw,2.2rem) 0 clamp(1.4rem,2.5vw,2.2rem) clamp(1.8rem,4vw,4.5rem); } .rung::before{ content:''; position:absolute; left:0; top:50%; width:clamp(1rem,2.6vw,2.8rem); height:1px; background:var(--line); } .rung::after{ content:''; position:absolute; left:-3.5px; top:calc(50% - 3px); width:6px; height:6px; background:var(--ink); border:1px solid var(--sand); border-radius:50%; transition:background .4s, border-color .4s, transform .4s; } .band--light .rung::after{ background:var(--paper); } .rung:hover::after{ background:var(--gold); border-color:var(--gold); transform:scale(1.35); } .rung-lbl{ font-size:var(--label); letter-spacing:.34em; text-transform:uppercase; color:var(--gold); margin-bottom:.5rem; } .rung-txt{ font-family:var(--serif); font-size:clamp(1.3rem,2.1vw,1.95rem); font-weight:300; line-height:1.32; color:var(--t-strong); max-width:36ch; } /* ---------- 13. FIGURES ---------- */ .fig{ position:relative; display:block; overflow:hidden; background:var(--stone); } .fig img{ width:100%; height:100%; object-fit:cover; filter:brightness(.86); } .fig::after{ content:''; position:absolute; inset:0; box-shadow:inset 0 0 0 1px var(--line-soft); pointer-events:none; } .figure-block{ cursor:pointer; } .figure-block:hover .fig img{ transform:scale(1.04); filter:brightness(1); } .fig-cap{ display:flex; justify-content:space-between; gap:1.5rem; align-items:baseline; padding-top:1.1rem; margin-top:1.1rem; border-top:1px solid var(--line); transition:border-color .5s; } .figure-block:hover .fig-cap{ border-color:var(--gold); } .fig-name{ min-width:min-content; font-family:var(--serif); font-size:clamp(1.25rem,1.8vw,1.8rem); font-weight:300; color:var(--t-strong); line-height:1.2; text-transform:uppercase; letter-spacing:.015em; } .fig-sub{ font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--t-mute); margin-top:.45rem; } .fig-idx{ font-size:.6rem; letter-spacing:.24em; color:var(--t-mute); font-variant-numeric:tabular-nums; white-space:nowrap; } .h-lg{ height:clamp(380px,74vh,860px); } .h-md{ height:clamp(300px,48vh,560px); } .h-sm{ height:clamp(240px,34vh,400px); } .h-portrait{ height:clamp(420px,82vh,900px); } /* Full-bleed plate — an opening the width of the building */ .plate{ position:relative; height:clamp(420px,88vh,1000px); overflow:hidden; background:var(--void); } .plate img,.plate video{ width:100%; height:100%; object-fit:cover; filter:brightness(.8); transition:transform 2.2s var(--ease), filter 1.2s; } .plate:hover img{ transform:scale(1.03); filter:brightness(.92); } .plate::after{ content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(5,5,4,.92) 0%, rgba(5,5,4,.12) 55%, rgba(5,5,4,.4) 100%); pointer-events:none; } .plate-cap{ position:absolute; z-index:2; left:var(--gutter); right:var(--gutter); bottom:clamp(2rem,5vh,4rem); display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; flex-wrap:wrap; } .plate-statement{ position:absolute; z-index:2; left:var(--gutter); right:var(--gutter); top:50%; transform:translateY(-50%); } .plate-statement p{ font-family:var(--serif); font-weight:300; font-size:clamp(1.6rem,4vw,4rem); line-height:1.14; color:#F7F2E7; max-width:24ch; text-transform:uppercase; letter-spacing:.012em; } .plate-statement em{ text-transform:none; font-style:italic; color:var(--gold); } /* Cantilever — a block that oversails the mass below it */ .cantilever{ position:relative; z-index:3; margin-top:clamp(-7rem,-7vw,-2.5rem); background:var(--ink); padding:clamp(2rem,4vw,4rem); border:1px solid var(--line); } .band--light .cantilever{ background:var(--paper); } .bleed-r{ margin-right:calc(var(--gutter) * -1); } .bleed-l{ margin-left:calc(var(--gutter) * -1); } /* ---------- 14. FORMS ---------- */ .field{ margin-bottom:1.8rem; } .field label{ display:block; font-size:var(--label); letter-spacing:.3em; text-transform:uppercase; color:var(--t-mute); margin-bottom:.65rem; } .field input,.field select,.field textarea{ width:100%; background:transparent; border:none; border-bottom:1px solid var(--line); padding:.7rem 0; font-family:var(--sans); font-size:.92rem; font-weight:300; color:var(--t-strong); outline:none; transition:border-color .35s; appearance:none; -webkit-appearance:none; border-radius:0; } .field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--gold); } .field textarea{ resize:vertical; min-height:100px; } .field select option{ background:var(--stone); color:#F7F2E7; } .band--light .field select option{ background:var(--paper); color:#17140F; } .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1rem,2.5vw,2rem); } .btn{ display:inline-flex; align-items:center; gap:.95rem; border:1px solid var(--gold); background:var(--gold); color:var(--void); font-size:var(--label); letter-spacing:.3em; text-transform:uppercase; font-weight:400; padding:1.1rem 2.3rem; transition:background .35s, color .35s; cursor:pointer; } .btn:hover{ background:transparent; color:var(--gold); } .btn svg{ width:13px; height:13px; transition:transform .35s var(--ease); } .btn:hover svg{ transform:translateX(5px); } .btn--ghost{ background:transparent; color:var(--t-strong); border-color:var(--line); } .btn--ghost:hover{ background:var(--t-strong); color:var(--void); border-color:var(--t-strong); } .check{ display:flex; gap:.9rem; align-items:flex-start; margin-bottom:.8rem; cursor:pointer; } .check input{ width:13px; height:13px; margin-top:5px; accent-color:var(--gold); flex-shrink:0; } .check span{ font-size:.78rem; line-height:1.75; color:var(--t-body); } .notice{ border:1px solid var(--line); padding:1.4rem 1.6rem; font-size:.82rem; line-height:1.85; } /* ---------- 15. FOOTER ---------- */ .foot{ background:var(--void); color:var(--t-body); padding:clamp(4rem,8vh,7rem) 0 2rem; border-top:1px solid var(--line-soft); } .foot a:hover{ color:var(--gold); } .foot-top{ display:grid; grid-template-columns:minmax(0,4fr) repeat(3,minmax(0,2fr)); gap:clamp(2rem,4vw,4rem); padding-bottom:clamp(2.5rem,5vw,4rem); border-bottom:1px solid var(--line); } .foot-mark{ display:flex; align-items:center; gap:.7rem; margin-bottom:1.6rem; } .foot-mark img{ height:2.4rem; width:auto; display:block; } .foot-mark span{ font-size:1rem; letter-spacing:.34em; color:var(--t-strong); } .foot-mark .b{ color:var(--gold); } .foot h4{ font-size:var(--label); font-weight:400; letter-spacing:.32em; text-transform:uppercase; color:var(--gold); margin-bottom:1.2rem; } .foot ul{ list-style:none; } .foot li{ font-size:.8rem; line-height:2.1; } .titleblock{ display:grid; grid-template-columns:repeat(5,1fr); border:1px solid var(--line); border-bottom:none; margin-top:clamp(2.5rem,5vw,4rem); } .tb-cell{ padding:.9rem 1.2rem; border-right:1px solid var(--line); border-bottom:1px solid var(--line); } .tb-k{ font-size:.53rem; letter-spacing:.28em; text-transform:uppercase; color:var(--t-mute); } .tb-v{ font-size:.72rem; letter-spacing:.1em; color:var(--t-strong); margin-top:.25rem; } .foot-base{ display:flex; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; padding-top:1.6rem; font-size:.62rem; letter-spacing:.14em; color:var(--t-mute); } /* ---------- 16. MODAL ---------- */ .modal{ position:fixed; inset:0; z-index:900; display:flex; align-items:flex-start; justify-content:center; overflow-y:auto; padding:clamp(1rem,6vh,5rem) clamp(1rem,4vw,3rem); opacity:0; visibility:hidden; transition:opacity .45s var(--ease), visibility .45s; } .modal.is-open{ opacity:1; visibility:visible; } .modal-bg{ position:fixed; inset:0; background:rgba(5,5,4,.9); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); } .modal-close{ position:fixed; top:1.2rem; right:1.4rem; z-index:920; width:44px; height:44px; border:1px solid var(--line); background:var(--stone); color:var(--sand); display:flex; align-items:center; justify-content:center; font-size:1.2rem; transition:background .3s,color .3s; } .modal-close:hover{ background:var(--gold); color:var(--void); } .modal-card{ position:relative; z-index:910; background:var(--mass); border:1px solid var(--line); width:min(1140px,100%); } .modal-card--narrow{ width:min(780px,100%); padding:clamp(1.8rem,4vw,3.6rem); } /* The record opens the photograph whole — its own ratio, never cropped */ .pm{ display:block; } .pm-img{ background:var(--stone); line-height:0; } .pm-img img{ width:100%; height:auto; display:block; object-fit:contain; } .pm-body{ padding:clamp(1.8rem,3vw,3.2rem); } .pm-specs{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem 1.6rem; padding:1.6rem 0; border-block:1px solid var(--line); margin-block:1.7rem; } .sp-k{ font-size:.55rem; letter-spacing:.28em; text-transform:uppercase; color:var(--gold); margin-bottom:.3rem; } .sp-v{ font-size:.8rem; color:var(--t-body); } .terms{ border:1px solid var(--line); background:rgba(0,0,0,.25); padding:1.4rem 1.6rem; max-height:200px; overflow-y:auto; font-size:.76rem; line-height:1.95; margin-bottom:1.5rem; color:var(--t-body); } .terms strong{ color:var(--t-strong); font-weight:400; } .pm-body .pm-cols{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(1.5rem,3vw,3rem); align-items:start; } @media (max-width:860px){ .pm-body .pm-cols{ grid-template-columns:1fr; } } /* ---------- 17. MOTION ---------- */ html:not(.js) .rise{ opacity:1 !important; transform:none !important; } .rise{ opacity:0; transform:translateY(22px); transition:opacity 1.15s var(--ease), transform 1.15s var(--ease); } .rise.is-in{ opacity:1; transform:none; } .rise-d1{ transition-delay:.1s; } .rise-d2{ transition-delay:.2s; } .rise-d3{ transition-delay:.3s; } .rise-d4{ transition-delay:.4s; } /* Apertures open rather than fade */ .fig img{ clip-path:inset(0 0 100% 0); transition:clip-path 1.5s var(--ease), transform 1.6s var(--ease), filter 1.2s var(--ease); } .rise.is-in .fig img, html:not(.js) .fig img, .no-wipe .fig img{ clip-path:inset(0 0 0 0); } .veil{ position:fixed; inset:0; z-index:2000; background:var(--void); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2.4rem; transition:opacity 1s var(--ease), visibility 1s; animation:veilClear .8s 1.8s forwards; pointer-events:none; } .veil.is-out{ opacity:0; visibility:hidden; pointer-events:none; } @keyframes veilClear{ to{ opacity:0; visibility:hidden; pointer-events:none; } } .veil-mark{ display:flex; align-items:center; gap:.8rem; opacity:0; animation:veilIn 1.4s var(--ease) .15s forwards; } .veil-mark img{ height:3.2rem; width:auto; display:block; } .veil-mark span{ font-size:1.1rem; letter-spacing:.46em; color:var(--t-strong); } .veil-mark .b{ color:var(--gold); } .veil-bar{ width:190px; height:1px; background:var(--line); overflow:hidden; } .veil-bar i{ display:block; height:100%; width:0; background:var(--gold); animation:veilFill 1.3s var(--ease) forwards; } @keyframes veilIn{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} } @keyframes veilFill{ to{ width:100%; } } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } .rise{ opacity:1; transform:none; } .fig img{ clip-path:none; } .veil{ display:none; } } /* ---------- 18. RESPONSIVE ---------- */ @media (max-width:1180px){ .index-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:960px){ :root{ --band:clamp(4rem,9vh,6.5rem); } .nav-links,.nav .btn-quiet{ display:none; } /* !important because the page fragments carry inline grid declarations, and an inline style outranks a media query however specific it is */ .grid,.g-2,.g-3,.g-4,.g-editorial,.g-aside{ grid-template-columns:1fr !important; } .cells{ grid-template-columns:repeat(2,1fr) !important; } .row{ grid-template-columns:1fr !important; gap:.7rem; } .row-mark{ order:-1; } .sec-head{ flex-direction:column; align-items:flex-start; gap:1rem; } .foot-top{ grid-template-columns:1fr 1fr; } .titleblock{ grid-template-columns:1fr 1fr; } .tb-cell:nth-child(2n){ border-right:none; } .field input,.field select,.field textarea{ font-size:16px; padding-block:.85rem; } .cantilever{ margin-top:-2rem; } .bleed-r,.bleed-l{ margin-inline:0; } .hero-scroll{ display:none; } /* flex-end overflows upward when the content is taller than the viewport, which put the eyebrow behind the fixed masthead on a phone */ .hero{ justify-content:flex-start; padding-top:clamp(6rem,15vh,8rem); } .hero-inner{ flex:0 0 auto; padding-bottom:clamp(2.5rem,6vh,4rem); } .hero-eyebrow{ align-items:flex-start; } .hero-eyebrow .bar{ margin-top:.55rem; } /* the apparatus is for large screens; small screens get the argument */ .band[data-level]::before,.sec-head .meta,.fig-idx,.plate-cap .fig-idx{ display:none; } .proof{ grid-template-columns:repeat(2,1fr) !important; } .proof-cell:nth-child(2n){ border-right:none; } .proof-cell:last-child{ border-right:none; } .proof-cell{ border-bottom:1px solid var(--line); } .proof-cell:nth-last-child(-n+2){ border-bottom:none; } .plate{ height:clamp(340px,62vh,560px); } .index-ov{ padding-top:6.5rem; } .band[data-level]::before{ font-size:3.2rem; opacity:.05; } } @media (max-width:560px){ .cells,.index-grid,.field-row,.foot-top,.titleblock{ grid-template-columns:1fr !important; } /* stacked, the run still descends in order — nth-child carries it */ .proof{ grid-template-columns:1fr !important; } /* One column: there is no neighbouring numeral to align to, so the baseline-matching margin becomes 50px of dead space. Drop it. */ .proof-cell > .proof-k:only-child{ margin-top:0; } .pm-specs{ grid-template-columns:1fr !important; } .proof-cell{ border-right:none; border-bottom:1px solid var(--line); padding-block:1.3rem; } .proof-cell:last-child{ border-bottom:none; } .proof-n{ font-size:2.2rem; } .tb-cell{ border-right:none; } .hero-sub{ flex-direction:column; gap:.5rem; } } /* ---------- 19. LIGHT-BAND CORRECTIONS ---------- */ .band--light .btn{ background:var(--t-strong); border-color:var(--t-strong); color:var(--paper); } .band--light .btn:hover{ background:transparent; color:var(--t-strong); } .band--light .manifesto-line.is-key{ color:var(--gold); } .band--light .hero-sub span::before,.band--light .row-kicker,.band--light .rung-lbl{ color:var(--gold); } /* An aperture never stays shut: if the observer never fires, the image still opens */ .no-js .fig img{ clip-path:none; } /* ============================================================ 20. LIGHT GROUND — the landing page only Scoped to body.theme-light so the other seven pages are untouched. Same palette inverted: paper, travertine, ink, and the gold at its ink-weight so it still reads as bronze rather than as decoration. ============================================================ */ body.theme-light{ --void: #E2D6BD; /* L* 86.0 — the doctrine band */ --ink: #F8F2E7; /* L* 95.7 — the page */ --mass: #EFE6D4; /* L* 91.6 — the alternating band */ --charcoal:#EFE6D4; /* insets, one step above the page */ --stone: #E2D6BD; --t-strong: #17140F; --t-body: rgba(23,20,15,.78); --t-mute: rgba(23,20,15,.68); --t-invert: #17140F; --t-invert-2:rgba(23,20,15,.68); --line: rgba(23,20,15,.16); --line-soft: rgba(23,20,15,.08); --line-inv: rgba(23,20,15,.16); --line-inv-s:rgba(23,20,15,.08); --gold: var(--gold-ink); --champagne:#6E5B39; --sand: #6E5B39; background:var(--ink); color:var(--t-body); } body.theme-light::after{ opacity:.02; mix-blend-mode:multiply; } /* on paper the one dark band returns to the dark family's tokens */ /* The hero keeps its cinema: light type over the film, as before */ body.theme-light .hero{ --t-strong:#F7F2E7; --t-body:rgba(238,229,211,.88); --t-mute:rgba(238,229,211,.6); --gold:#D4A853; --sand:#C4B594; --line:rgba(212,168,83,.3); } body.theme-light .hero-media::after{ background:linear-gradient(178deg, rgba(5,5,4,.6) 0%, rgba(5,5,4,.1) 30%, rgba(5,5,4,.58) 72%, rgba(5,5,4,.86) 100%); } body.theme-light .hero .btn{ background:#D4A853; border-color:#D4A853; color:var(--void); } body.theme-light .hero .btn:hover{ background:transparent; color:#D4A853; } /* Masthead: transparent over the film, paper once you scroll */ body.theme-light .nav{ background:linear-gradient(to bottom, rgba(5,5,4,.5), rgba(5,5,4,0)); } body.theme-light .nav .nav-word{ color:#F7F2E7; } body.theme-light .nav .nav-links a{ color:rgba(238,229,211,.82); } body.theme-light .nav .nav-links a:hover,body.theme-light .nav .nav-links a[aria-current="page"]{ color:#F7F2E7; } body.theme-light .nav .nav-links a::after{ background:#D4A853; } body.theme-light .nav .nav-index-btn{ color:rgba(238,229,211,.82); } body.theme-light .nav .bars i{ background:#C4B594; } body.theme-light .nav .btn-quiet{ color:#D4A853; border-color:rgba(212,168,83,.45); } body.theme-light .nav .btn-quiet:hover{ background:#D4A853; color:var(--void); } body.theme-light .nav.is-scrolled{ background:rgba(250,248,243,.97); border-bottom-color:var(--line); } body.theme-light .nav.is-scrolled .nav-word{ color:#17140F; } body.theme-light .nav.is-scrolled .nav-links a{ color:rgba(23,20,15,.72); } body.theme-light .nav.is-scrolled .nav-links a:hover, body.theme-light .nav.is-scrolled .nav-links a[aria-current="page"]{ color:#17140F; } body.theme-light .nav.is-scrolled .nav-links a::after{ background:#7C5B22; } body.theme-light .nav.is-scrolled .nav-index-btn{ color:rgba(23,20,15,.72); } body.theme-light .nav.is-scrolled .bars i{ background:#17140F; } body.theme-light .nav.is-scrolled .btn-quiet{ color:#7C5B22; border-color:rgba(138,104,40,.45); } body.theme-light .nav.is-scrolled .btn-quiet:hover{ background:#17140F; color:#F8F2E7; border-color:#17140F; } /* One dark band remains, so the site's own world is never out of sight */ /* On paper, the one dark band returns to the dark family entirely */ body.theme-light .band--light{ --t-strong:#F7F2E7; --t-body:rgba(238,229,211,.78); --t-mute:rgba(238,229,211,.56); --t-invert:#F7F2E7; --t-invert-2:rgba(238,229,211,.68); --line:rgba(212,168,83,.2); --line-soft:rgba(212,168,83,.1); --gold:#D4A853; --champagne:#E4D7BC; --sand:#C4B594; --charcoal:#2A241A; background:#100D09; box-shadow:inset 0 1px 0 rgba(212,168,83,.14); } body.theme-light .band--light .btn{ background:#D4A853; border-color:#D4A853; color:var(--void); } body.theme-light .band--light .btn:hover{ background:transparent; color:#D4A853; } /* Components that assumed a dark ground */ body.theme-light .btn{ background:#17140F; border-color:#17140F; color:#F8F2E7; } body.theme-light .btn:hover{ background:transparent; color:#17140F; } body.theme-light .plaque{ background:rgba(23,20,15,.03); } body.theme-light .cell:hover{ background:rgba(23,20,15,.04); } body.theme-light a.row:hover{ background:linear-gradient(to right, rgba(23,20,15,.05), transparent 60%); } body.theme-light .rung::after{ background:var(--ink); } body.theme-light .fig img{ filter:brightness(.94); } body.theme-light .figure-block:hover .fig img{ filter:brightness(1); } body.theme-light .band[data-level]::before{ opacity:.07; } body.theme-light .terms{ background:rgba(23,20,15,.04); } body.theme-light .field select option{ background:#F8F2E7; color:#17140F; } body.theme-light .modal-close{ background:var(--stone); color:#17140F; } body.theme-light .modal-close:hover{ background:#17140F; color:#F8F2E7; } body.theme-light ::selection{ background:#17140F; color:#F8F2E7; } body.theme-light::-webkit-scrollbar-track{ background:var(--stone); } /* The footer stays dark: it is the threshold to the rest of the site */ body.theme-light .foot{ --t-strong:#F7F2E7; --t-body:rgba(238,229,211,.78); --t-mute:rgba(238,229,211,.56); --line:rgba(212,168,83,.2); --gold:#D4A853; --sand:#C4B594; background:#050404; color:var(--t-body); } /* The settle veil, on paper */ body.theme-light .veil{ background:#F8F2E7; } body.theme-light .veil-mark span{ color:#17140F; } body.theme-light .veil-bar{ background:rgba(23,20,15,.16); } body.theme-light .veil-bar i{ background:#7C5B22; } /* The datum rail, and its inversion over the one dark band */ body.theme-light .datum::before{ background:rgba(23,20,15,.18); } body.theme-light .datum-tick{ background:rgba(23,20,15,.5); } body.theme-light .datum-item.is-on .datum-tick{ background:var(--seal); } /* the tag stays dark on paper too — one object, one appearance */ body.theme-light .datum.on-light::before{ background:rgba(212,168,83,.2); } body.theme-light .datum.on-light .datum-tick{ background:#C4B594; } body.theme-light .datum.on-light .datum-item.is-on .datum-tick{ background:#D4A853; } /* The index overlay opens on paper, with the mark still legible */ body.theme-light .index-ov{ background:#F8F2E7; } /* ---------- 21. OPENABLE CELLS ---------- */ .cells:has(.cell--open){ border-top:none; border-left:none; gap:1px; } .cell--open{ display:block; width:100%; text-align:left; font:inherit; cursor:pointer; padding:clamp(1.8rem,2.8vw,2.8rem); color:var(--t-body); border:1px solid var(--line); transition:background .55s var(--ease); } .cell--open h3{ color:var(--t-strong); } /* The four read as one graded run rather than four identical tiles: even steps of ~3 L*, deepening left to right, so the eye is carried across them in order. On a dark page the run climbs; on paper it descends. */ .cell--open:nth-child(1){ background:#171309; } .cell--open:nth-child(2){ background:#1C1811; } .cell--open:nth-child(3){ background:#231E16; } .cell--open:nth-child(4){ background:#2A241A; } .cell--open:nth-child(1):hover,.cell--open:nth-child(1):focus-visible{ background:#1F1A11; } .cell--open:nth-child(2):hover,.cell--open:nth-child(2):focus-visible{ background:#252019; } .cell--open:nth-child(3):hover,.cell--open:nth-child(3):focus-visible{ background:#2C261D; } .cell--open:nth-child(4):hover,.cell--open:nth-child(4):focus-visible{ background:#332C21; } body.theme-light .cell--open{ color:rgba(23,20,15,.8); border-color:rgba(23,20,15,.13); } body.theme-light .cell--open h3{ color:#17140F; } body.theme-light .cell--open .cell-more{ color:#6B4E1D; } body.theme-light .cell--open:nth-child(1){ background:#E7DBC0; } /* L* 87.7 */ body.theme-light .cell--open:nth-child(2){ background:#DFD2B2; } /* L* 84.5 */ body.theme-light .cell--open:nth-child(3){ background:#D7C9A4; } /* L* 81.2 */ body.theme-light .cell--open:nth-child(4){ background:#CFC096; } /* L* 78.0 */ body.theme-light .cell--open:nth-child(1):hover,body.theme-light .cell--open:nth-child(1):focus-visible{ background:#DFD2B2; } body.theme-light .cell--open:nth-child(2):hover,body.theme-light .cell--open:nth-child(2):focus-visible{ background:#D7C9A4; } body.theme-light .cell--open:nth-child(3):hover,body.theme-light .cell--open:nth-child(3):focus-visible{ background:#CFC096; } body.theme-light .cell--open:nth-child(4):hover,body.theme-light .cell--open:nth-child(4):focus-visible{ background:#C6B688; } .cell--open .cell-more{ color:#6B4E1D; } body.theme-light .cell--open:hover, body.theme-light .cell--open:focus-visible{ background:#CDBC96; } .cell--open .cell-more{ color:#D4A853; } body.theme-light .cell--open:hover,body.theme-light .cell--open:focus-visible{ background:#2E2820; } .cell--open .cell-more{ display:block; margin-top:1.1rem; font-size:var(--label); letter-spacing:.28em; text-transform:uppercase; color:var(--gold); opacity:0; transform:translateX(-6px); transition:opacity .4s var(--ease), transform .4s var(--ease); } .cell--open:hover .cell-more,.cell--open:focus-visible .cell-more{ opacity:1; transform:none; } @media (hover:none){ .cell--open .cell-more{ opacity:1; transform:none; } } #qaBody .p + .p{ margin-top:1.1rem; } #founderPortrait{ cursor:pointer; } /* ============================================================ 22. BALANCE — champagne, gold, charcoal, black Three rules, applied without exception: · GOLD is rationed. It marks only what can be acted on or is active: the primary button, a live state, the seal rule, a tier. Nowhere else. · CHAMPAGNE carries the voice: labels, kickers, spec keys, metadata. It is what used to be gold, and what used to be near-white. · Every band declares its edge with a hairline, so a change of plane never depends on the viewer's screen being well calibrated. ============================================================ */ /* --- gold, withdrawn to where it means something --- */ .row-kicker,.rung-lbl,.sp-k,.tb-k{ color:var(--champagne); } .label{ color:var(--champagne); } .label--gold,.label--seal{ color:var(--gold); } .foot h4{ color:var(--champagne); } .cell:hover{ background:rgba(228,215,188,.045); } a.row:hover{ background:linear-gradient(to right, rgba(228,215,188,.06), transparent 62%); } .cell::after{ background:var(--gold); } /* the live edge stays gold */ /* --- every band carries its own edge --- */ .band + .band,.band--mass,.band--void,.band--light{ box-shadow:inset 0 1px 0 var(--line-soft); } .band--light{ box-shadow:inset 0 1px 0 rgba(23,20,15,.10); } /* --- insets sit on charcoal, one full step above the page --- */ .plaque{ background:var(--charcoal); border-color:var(--line); } .band--light .plaque{ background:var(--charcoal); } .modal-card{ background:var(--charcoal); } .terms{ background:rgba(5,4,4,.35); } .band--light .terms{ background:rgba(23,20,15,.05); } .pm-img,.fig{ background:var(--mass); } /* --- black as material: a grain too fine to see, impossible to miss --- */ body::after{ content:''; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.035; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:160px 160px; } @media (prefers-reduced-motion:reduce){ body::after{ opacity:.02; } } /* --- depth on the plates: a vignette the eye reads as distance --- */ .plate::before{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background:radial-gradient(120% 80% at 50% 42%, transparent 40%, rgba(5,4,4,.42) 100%); } .fig::before{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0; background:radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(5,4,4,.3) 100%); transition:opacity 1.1s var(--ease); } .figure-block:hover .fig::before{ opacity:1; } /* --- the gold hairline under a statement, at consistent weight --- */ .seal-rule{ background:linear-gradient(to right, var(--gold), rgba(212,168,83,.15)); height:2px; width:56px; } /* --- champagne, not white, for the quiet metadata --- */ .fig-sub,.fig-idx,.meta{ color:var(--t-mute); } /* ============================================================ 23. THE PAPER — document typography A published document is not a page about a document. It has a measure, a hierarchy that survives being printed, and a clear division between argument and apparatus: ARGUMENT Cormorant Garamond, set at reading size on paper. APPARATUS Montserrat — labels, notes, tables, captions, figures. Scoped to .paper and .pdoc so nothing here reaches the other eight pages. Ends with a print sheet, because a paper that cannot be printed is not a paper. ============================================================ */ .paper{ --pmeasure: 34em; /* ~66 characters at the serif's width */ --pcolumn: 52rem; /* tables and figures may run wider than prose */ padding-block: clamp(2.5rem,5vh,4rem) 0; } /* ---- the section: numeral and title held in the margin ---- */ .pdoc{ border-top:1px solid var(--line-soft); } .pdoc:first-child{ border-top:none; } .pdoc-grid{ display:grid; grid-template-columns:minmax(0,3fr) minmax(0,7fr); gap:clamp(1.6rem,4vw,5rem); padding-block:clamp(2.8rem,6.5vh,5.5rem); } /* The rail is sticky on an inner box, not on the grid item itself: a grid item sized to its own content has no travel, so `position:sticky` on the