/* Fonts are requested from each page's , not from here. An @import inside the stylesheet forces the browser to download and parse this whole file before it even discovers the font request, so the two happen one after the other instead of side by side. */ :root{ --paper:#F1ECE1; /* one cream ground for the whole site: a warm light, a deeper warm low down, a vignette carrying most of the depth, and a base that travels about 42% in luminance from its lightest stop to its darkest. */ --cream-grade: radial-gradient(60% 48% at 88% 2%, rgba(210,168,104,.34), transparent 64%), radial-gradient(56% 46% at 4% 98%, rgba(150,116,66,.22), transparent 66%), radial-gradient(110% 82% at 50% 42%, transparent 26%, rgba(88,64,32,.30) 100%), linear-gradient(164deg, #FBF9F4 0%, #F2EBDD 28%, #E4D8C2 62%, #CFBF9F 100%); /* gold falls to 1.6:1 on the darkest cream, so text gold on cream is deeper. Rules, ticks and arrows keep --gold: they are not text. */ --gold-deep:#8A6A32; /* ---- gold as TEXT ---- --gold at #B4915A measures 2.5:1 on flat paper and as low as 1.36:1 at the foot of a long cream section, where the vignette in --cream-grade is at its darkest. That is unreadable for the small sizes this colour is used at. The same gold on a dark band measures 6.3:1 and is fine, so the colour cannot simply be darkened everywhere. --gold-text is therefore contextual. Custom properties inherit, so declaring it again inside .on-dark hands every descendant the right value without any selector having to know which ground it is sitting on. #6E5527 clears 4.5:1 on every cream lighter than about #D9CDBA. */ --gold-text:#6E5527; --paper-dim:#E8E1D2; --ink:#1B1A17; --ink-soft:#3d3a34; --gold:#B4915A; --gold-soft:#C9AC7C; --black:#141311; --rule: rgba(27,26,23,0.14); /* ---- fixed header ---- One number, set in one place. The masthead and the nav bar are both fixed, so every hero on the site has to clear them. Previously each page guessed at that clearance with its own hard number. */ --mast-h:33px; --nav-h:64px; --head-h:97px; /* mast + nav */ /* ---- vertical rhythm ---- One gap between sections, everywhere, at every width. */ --sec-y:84px; --hero-y:181px; /* head-h + sec-y */ } @media (max-width:1024px){ :root{ --sec-y:66px; --hero-y:163px; } } @media (max-width:640px){ :root{ --sec-y:52px; --hero-y:149px; } } *{box-sizing:border-box; margin:0; padding:0;} html{scroll-behavior:smooth; scroll-padding-top:112px;} body{ background:var(--paper); color:var(--ink); font-family:'Crimson Pro', serif; font-weight:400; line-height:1.5; overflow-x:hidden; } .wordmark{ font-family:'Archivo', sans-serif; letter-spacing:0.14em; text-transform:uppercase; text-decoration:none; color:inherit; } .eyebrow{ font-family:'Archivo', sans-serif; font-size:0.72rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--gold-text); font-weight:600; } /* On any dark ground the deeper gold would be near-invisible, so the token is redeclared there and inherits down to everything inside. --gold-soft is the value these eyebrows already used on dark bands. This list is deliberately short and was checked by sampling the rendered ground of each one. .closing is NOT here: it reads as a dark section by name, but on the homepage it is cream, and redeclaring it there dropped "Where do you begin?" to 1.84:1. */ .on-dark, .hero, .post-cta, .bkx-dark, .crs-band.dark, .circle-closing, .quiz-band.dark, .book-strip, .crs-art, .episodes-band, .expression-band, .notify, .origin-band, .paper-hero, .pp-mid, .pp-step, .questions-band, .quiz-box, .quiz-panel.solid-bg, .rev-flip, .unmet-band, .versus{ --gold-text:var(--gold-soft); } a{color:inherit;} img{max-width:100%; height:auto; display:block;} /* ---------- masthead ---------- */ /* The masthead measured 32px while the nav sat at 33px, which left a 1px line of the page showing through between them on every page. Its height is now fixed, so the nav sits flush against it at any font size. */ .masthead{ position:fixed; top:0; left:0; right:0; z-index:1001; height:var(--mast-h); background:var(--black); color:var(--paper); display:flex; align-items:center; justify-content:center; padding:0 4vw; font-family:'Archivo',sans-serif; font-size:0.64rem; letter-spacing:0.16em; text-transform:uppercase; border-bottom:1px solid rgba(180,145,90,0.35); overflow:hidden; } .masthead span{ opacity:0.85; white-space:nowrap; } @media (max-width:420px){ .masthead{ font-size:0.58rem; letter-spacing:0.12em; } } /* ---------- nav ---------- */ nav{ position:fixed; top:var(--mast-h); left:0; right:0; height:var(--nav-h); display:flex; align-items:center; justify-content:space-between; gap:24px; padding:0 6vw; z-index:1000; background:rgba(241,236,225,0.94); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-bottom:1px solid var(--rule); } nav.on-dark{ background:rgba(20,19,17,0.55); border-bottom:1px solid rgba(241,236,225,0.12); color:var(--paper); } nav .wordmark{font-size:0.8rem; white-space:nowrap;} .nav-links{ display:flex; align-items:center; gap:clamp(16px,1.9vw,30px); font-family:'Archivo',sans-serif; font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; } /* Nav labels are two words often enough ("The Book", "The Circle") that a mid-word break was possible on narrower desktops. They never break now. */ .nav-links a{ text-decoration:none; opacity:0.75; transition:opacity .2s; white-space:nowrap; } .nav-links a:hover, .nav-links a.active{ opacity:1; } .buy-nav{ font-family:'Archivo', sans-serif; font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; border:1px solid currentColor; padding:8px 16px; text-decoration:none; white-space:nowrap; } .nav-toggle{ display:none; } .nav-scrim{ display:none; } /* The full nav ran until 1000px, but by about 1030px the links were already touching the wordmark. It hands over to the menu button earlier now. */ @media (max-width: 1080px){ .nav-links{ display:none; } .nav-toggle{ display:block; font-family:'Archivo',sans-serif; font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; border:1px solid currentColor; padding:8px 14px; background:none; color:inherit; cursor:pointer; } /* While the menu is open the bar is opaque paper on every page, including the ones with a dark hero. Before this, the home page showed a black bar above a cream panel. */ nav:has(.nav-links.open), nav.on-dark:has(.nav-links.open){ -webkit-backdrop-filter:none; backdrop-filter:none; background:var(--paper); color:var(--ink); border-bottom-color:var(--rule); } nav:has(.nav-links.open) .wordmark, nav:has(.nav-links.open) .nav-toggle{ color:var(--ink); } .nav-links.open{ display:flex; flex-direction:column; position:fixed; top:var(--head-h); left:0; right:0; z-index:1002; background:var(--paper); color:var(--ink); padding:24px 6vw 30px; border-bottom:1px solid var(--rule); gap:20px; align-items:flex-start; max-height:calc(100dvh - var(--head-h)); overflow-y:auto; overscroll-behavior:contain; } .nav-links.open a{ color:var(--ink); opacity:0.8; } .nav-links.open a:hover, .nav-links.open a.active{ opacity:1; } .nav-links.open .buy-nav{ margin-top:6px; } /* Tapping the page behind the menu closes it, so it is never a trap. */ /* The scrim MUST sit below