* { box-sizing: border-box; } html { scroll-behavior: smooth; } html, body { margin:0; padding:0; } :root { color-scheme: light; --bg:#F3EDE3; --surface:#FBF7EE; --tint:#F5D9BF; --border:#E4D8C6; --ink:#2F2428; --body:#544C43; --faint:#95897B; --pom:#93263C; --pom-link:#93263C; --pom-deep:#6B1B2E; --pers:#CE5322; --pers-deep:#BC4A1E; --saff:#C89440; --petal:#E2AE9C; --on-accent:#F6EDE4; --rings:rgba(200,148,64,.36); --rings-strong:rgba(200,148,64,.48); --orbit-line:rgba(147,38,60,.32); --wash:rgba(226,164,120,.5); --wash2:rgba(200,148,64,.14); --band-bg:#54142A; --band-wash:rgba(226,164,120,.2); --foot:#292125; --foot-text:#D9CFC6; --foot-head:#F3EDE3; --foot-line:rgba(243,237,227,.15); --shadow-card:0 1px 2px rgba(60,45,40,.03), 0 20px 44px -30px rgba(94,35,49,.25); --grain-op:.05; --input-bg:#FFFFFF; --chip-bg:rgba(250,246,237,.85); } html[data-theme="dark"] { color-scheme: dark; --bg:#241D20; --surface:#2F2629; --tint:#43291E; --border:#4A3C3E; --ink:#F1E8DB; --body:#CFC3B6; --faint:#9C8F82; --pom:#C2455E; --pom-link:#EBA9B8; --pom-deep:#EBA9B8; --pers:#E1682F; --pers-deep:#E88C52; --saff:#DBA84A; --petal:#96604F; --rings:rgba(219,168,74,.24); --rings-strong:rgba(219,168,74,.32); --orbit-line:rgba(235,169,184,.32); --wash:rgba(225,104,47,.16); --wash2:rgba(219,168,74,.1); --band-bg:#41101F; --band-wash:rgba(226,164,120,.12); --foot:#1C1518; --foot-text:#CDC0B6; --foot-head:#F1E8DB; --foot-line:rgba(243,237,227,.1); --shadow-card:0 1px 2px rgba(0,0,0,.25), 0 20px 44px -30px rgba(0,0,0,.55); --grain-op:.08; --input-bg:#241D20; --chip-bg:rgba(36,29,32,.7); } body { background:var(--bg); transition:background .3s ease; } a { color:var(--pom-link); } a:hover { color:var(--pers); } .cta:focus-visible, a:focus-visible, input:focus-visible, button:focus-visible, summary:focus-visible { outline:3px solid rgba(188,86,55,.5); outline-offset:3px; border-radius:4px; } @keyframes orbit { from { transform:rotate(0deg); } to { transform:rotate(360deg); } } @keyframes slideIn { from { transform:translateX(105%); } to { transform:translateX(0); } } @keyframes fadeIn { from { opacity:0; } to { opacity:1; } } #nav-mobile { display:none; } #nav-mobile summary::-webkit-details-marker { display:none; } @media (max-width:920px) { #hdr-row { display:block !important; } #hdr-row > div:first-child { display:none !important; } #hdr-brand { display:block !important; text-align:center !important; width:100% !important; } #hdr-sub { white-space:normal !important; line-height:1.6 !important; max-width:36ch; margin-left:auto !important; margin-right:auto !important; } #top { padding:18px 56px !important; position:relative !important; } #hdr-row > div:last-child { position:absolute !important; top:0 !important; bottom:0 !important; right:16px !important; display:flex !important; align-items:center !important; } } /* The theme-toggle icons are inline SVGs (2026-07-14 — the old Unicode moon/sun glyphs rendered off-centre and inconsistent). flex-centre the visible span so the SVG sits dead-centre in the button. */ [data-tt-moon], [data-tt-sun] { display:flex; align-items:center; justify-content:center; } [data-tt-sun] { display:none; } html[data-theme="dark"] [data-tt-sun] { display:flex; } html[data-theme="dark"] [data-tt-moon] { display:none; } @media (max-width:920px) { #nav-desktop { display:none !important; } #nav-mobile { display:block !important; } } @media (max-width:760px) { #hero-deco { opacity:.16 !important; } } @media (prefers-reduced-motion: reduce) { * { animation:none !important; transition:none !important; } html { scroll-behavior:auto; } } /* --------------------------------------------------------------------------- OVERRIDES (ours, not the handoff's) --------------------------------------------------------------------------- */ /* Home hero decoration on phones -- make it match the SESSIONS hero, which is the look Jim wants (rings + orbiting planet, at full strength). Why they differ at all: Sessions drops its rings/orbit straight into the section, so they are never dimmed. Home wraps its in #hero-deco, which the handoff fades to opacity .16 on mobile -- a grey smudge behind the headline. Home's shapes are also much bigger (560px rings / 290px orbit vs Sessions' 340 / 160) and it adds two scattered dots that Sessions doesn't have. At phone width that oversized ring set lands right on top of the H1. So on phones: restore full opacity, and give Home's two shapes exactly the Sessions geometry, and drop the extra dots. !important is required -- these are inline styles on the elements themselves. Desktop is untouched: Home keeps its own larger composition. */ @media (max-width: 760px) { #hero-deco { opacity: 1 !important; display: block !important; } /* 1: concentric rings -> Sessions' 340px, bleeding off the top-right */ #hero-deco > div:nth-child(1) { top: -90px !important; right: -120px !important; width: 340px !important; height: 340px !important; } /* 2: the orbiting planet -> Sessions' 160px */ #hero-deco > div:nth-child(2) { top: 90px !important; right: 140px !important; width: 160px !important; height: 160px !important; } /* 3 & 4: scattered petal/saffron dots -- Sessions has none. */ #hero-deco > div:nth-child(3), #hero-deco > div:nth-child(4) { display: none !important; } } /* --------------------------------------------------------------------------- EYEBROWS — contrast pass (light theme only) Measured against the handoff's own surfaces (WCAG AA for small text = 4.5:1): --pers-deep #BC4A1E page 4.36 card 4.75 tint 3.76 <- FAILS on page --saff #C89440 page 2.32 card 2.53 tint 2.00 <- FAILS badly ...but on the DARK footer: 5.80 <- PASSES So the eyebrows weren't "too thin" -- they were under-contrasted. Bolding would have masked that with weight (and Space Mono only ships 400/700, so the only step up is a shout). The fix is tone, not weight. VARIETY IS PRESERVED -- deliberately three eyebrow colours, each chosen for the surface it actually sits on: 1. deep persimmon -> section eyebrows on light surfaces (the workhorse) 2. --pom-deep wine -> the testimonial label (see rewrite()) 3. --saff saffron -> "A quiet thread", on the dark footer, where it sings 1. Darken --pers-deep from #BC4A1E to #A33C15. Still unmistakably persimmon -- a burnt orange, not a red -- but now: page 5.61 card 6.11 tint 4.84 -> all clear AA. Done at the TOKEN so all persimmon eyebrows are fixed at once. >>> POMEGRANATE EYEBROWS (Jim, 2026-07-14): "too much orange at the top." --pers-deep now carries pomegranate #93263C, so every eyebrow, section label, and card label goes burgundy in one move. Contrast is actually BETTER than the burnt orange it replaces — measured on the handoff surfaces: page 6.98 card ~7.4 tint 6.02 -> all well past AA 4.5. The single deliberate warm accent is preserved: the italic "feel" / bold emphasis words use color:var(--pers) (persimmon), a different token, so they stay orange as the one pop. The eyebrow DASHES (--pers) are shifted to pomegranate too, below, so the eyebrow reads as one burgundy unit. Dark mode gets a light rose (#EBA9B8) for the same labels — wine on the dark field would fail contrast. --------------------------------------------------- */ :root { --pers-deep: #93263C; /* pomegranate — was #A33C15 burnt orange */ } html[data-theme="dark"] { --pers-deep: #EBA9B8; /* light rose — legible on the dark field, and off-orange */ } /* EYEBROW VARIETY (Jim, 2026-07-14): the default eyebrow is pomegranate (above), but a plain-wine site reads flat -- "decent orange where it would be helpful." So selected deeper section eyebrows and ALL card kicker labels go burnt orange. These tokens are MODE-AWARE so the orange stays legible in dark mode (a hardcoded #A33C15 measured only 2.5:1 on the dark field -- fixed here): --eb-orange text light #A33C15 (page 5.6, card 6.1, tint 4.8) dark #E8945A (light burnt orange on the near-black) --eb-dash dash the brighter persimmon tick that leads each orange eyebrow; also mode-aware. */ :root { --eb-orange:#A33C15; --eb-dash:#CE5322; } html[data-theme="dark"] { --eb-orange:#E8945A; --eb-dash:#E1682F; } /* (A dusty-tan-rose photo frame was tried here 2026-07-14 and reverted — Jim preferred the cream. The photos use border:8px solid var(--surface).) */ /* Header drop-shadow: a soft ROSE instead of the flat black the markup set, which read as a dingy grey line under the bar (Jim, 2026-07-14). Overrides the inline box-shadow on
; same on mobile and desktop. */ header { box-shadow: 0 6px 24px -18px rgba(158,58,90,.5) !important; } /* Card kicker labels (the small 13px labels inside cards — "Free · 15 minutes", "75 minutes · $75", "Rhythm", etc.) go orange, which warms up the card clusters where it helps most. Section eyebrows are handled per-label inline. */ [style*="font-size:13px"][style*="color:var(--pers-deep)"] { color: var(--eb-orange) !important; } /* The eyebrow dashes (the 36px hairline before each label) go pomegranate too, so the dash+label reads as one unit. Persimmon accent WORDS use color:, not background, so they're untouched. */ [style*="width:36px"][style*="background:var(--pers)"] { background: var(--pom) !important; } /* 2. Tracking. (Written for Space Mono; kept for Fraunces.) Wide tracking at .24em scatters the label enough that the eye reads it as faint even once the colour is right -- it thins perceived stroke density. Pull the widest ones in to .18em: same whisper, more presence, no extra weight. NOTE 2026-07-14: eyebrows/labels are now Fraunces 500 letterspaced caps (Jim's pick from a four-way comparison) -- Space Mono left the site and the font payload entirely. This tracking override still applies and still looks right on the serif. The :not([style*="clamp"]) guard protects the header subhead, which sets .22em and then overrides itself to .14em -- it is already tight because it is tiny, and must not be widened. */ [style*="letter-spacing:.24em"]:not([style*="clamp"]), [style*="letter-spacing:.22em"]:not([style*="clamp"]) { letter-spacing: .18em !important; } /* The hamburger (Jim, 2026-07-14 — final). We tried making it a mini drawer preview (dark plum). It kept looking wrong: a heavy dark button fights the light, airy header no matter the treatment. Designer's call: keep it a LIGHT control that belongs in the header — the header's own surface, a hairline border — and let the BARS carry the brand. Three uniform pomegranate bars: reads unmistakably as a hamburger, ties to the new pomegranate eyebrows, and still nods to the drawer's wine without being a dark blob. No gradient, no shadow — a plain UI element. Inline styles → !important. NOT inside the 760px block: shows up to 920px. */ #nav-mobile > summary { background: var(--surface) !important; border-color: var(--border) !important; } #nav-mobile > summary > span { background: var(--pom) !important; } /* all three bars: pomegranate */ /* --------------------------------------------------------------------------- The planet on the faint arc (ALL widths now — Jim, 2026-07-14) The "Seeing the pattern, instead of retelling it" diagram used a full 90s orbit with a persimmon planet on desktop, and the arc-sweep only on mobile. Jim asked for the mobile treatment everywhere: the pomegranate planet crawls up the light-pink arc (#ring-orbit's own faint circle, var(--orbit-line)) rather than doing a full loop. So these two rules moved OUT of the 760px block and now apply at every width. We do NOT add a new orbit -- we reuse the ring graphic's OWN circle (#ring-orbit), the one that draws the faint arc, so the planet is guaranteed to sit exactly on that line. Geometry: @keyframes arc-sweep's transform overwrites the element's inline translate(-50%,-50%), so while animating the circle is displaced down-right by half its size and clipped -- only its upper-left edge is on screen. In the element's own frame (0deg = 12 o'clock, clockwise), that visible edge spans roughly 270deg -> 360deg. So we sweep 268deg -> 362deg and loop, and the planet crawls up the visible arc, lower-left to upper-right, then begins again. Deliberately slow: 30s. --------------------------------------------- */ #ring-orbit { animation: arc-sweep 30s linear infinite !important; } /* The dot itself: the mobile drawer's dusty-mauve top-gradient colour #6E3143 (Jim, 2026-07-14 — was pomegranate). Muted, so it sits quietly; the arc-fade already softens it as it sweeps, so it's kept solid. Halo matched to mauve. Inline styles on the element, so !important is required. */ #ring-orbit > div:nth-child(2) { top: -6px !important; margin-left: -6px !important; width: 12px !important; height: 12px !important; background: #6E3143 !important; box-shadow: 0 0 0 5px rgba(110, 49, 67, .10); animation: arc-fade 30s linear infinite; } /* --- Still mobile-only: the HERO deco planet + its phase shift ------------- */ @media (max-width: 760px) { /* The hero planet: pomegranate (Jim, 2026-07-14 — was persimmon). Darker and more muted than the orange it replaced, so it matches the night drawer and sits quietly on the sand instead of drawing the eye. It reads fine at this weight now that it no longer crosses the headline -- see the phase shift below, which is what actually fixed the distraction. */ #hero-deco > div:nth-child(2) > div:nth-child(2) { background: var(--pom) !important; opacity: .8; } /* Start the hero orbit at 6 o'clock instead of 12. The dot is pinned to the top of its container, so at time 0 it sits at 12 o'clock -- right where the eyebrow and headline are, which is the busy corner. A NEGATIVE animation-delay of half the duration (80s / 2 = 40s) starts the animation already half a turn in, putting the planet at the BOTTOM and sending it up through the empty side of the hero. No keyframe changes, no re-timing -- just a phase shift. */ #hero-deco > div:nth-child(2) { animation-delay: -40s !important; } } /* --------------------------------------------------------------------------- HEADER COLLAPSE ON SCROLL (desktop only) — Jim, 2026-07-14 The full header is a three-deck stack (wordmark / subhead / nav row) ~145px tall and position:fixed, so it eats vertical space the whole way down the page. Past 120px scrolled, site.js adds html.cf-scrolled and the top deck (#hdr-row: the wordmark + subhead) folds away — max-height to 0 + fade — leaving the nav row, with the Book CTA, as a slim ~52px sticky bar. Deliberately NO horizontal reshuffle: an earlier version slid the wordmark to the left into a single row and it read as a jump. Here only the deck ABOVE the nav collapses; the centred nav row stays put and simply rises. The wordmark's home link is lost while collapsed, but the nav's own "Home" link remains, and it all returns in full at the top of the page. Desktop only (min-width:921px): the mobile header is already compact and has its own layout, which this must not touch. html.cf-no-trans is the fit() measurement helper (see site.js) — it disables the transitions for one frame so
's padding can be measured against the full header height. --------- */ @media (min-width:921px) { #hdr-row { overflow: hidden; max-height: 120px; /* generous — the deck is ~70px; this just enables the collapse */ transition: max-height .34s cubic-bezier(.4,0,.2,1), opacity .26s ease; } #top { transition: padding-top .34s cubic-bezier(.4,0,.2,1); } #nav-desktop{ transition: margin-top .34s cubic-bezier(.4,0,.2,1), padding .3s ease; } html.cf-scrolled #hdr-row { max-height: 0; opacity: 0; } html.cf-scrolled #top { padding-top: 11px !important; } html.cf-scrolled #nav-desktop { margin-top: 0 !important; padding: 13px 0 !important; border-top-color: transparent !important; } html.cf-no-trans #hdr-row, html.cf-no-trans #top, html.cf-no-trans #nav-desktop { transition: none !important; } } /* --------------------------------------------------------------------------- THE MOBILE DRAWER — "the field arrives" (2026-07-14, revised) The handoff drawer slid in from the right on a generic curve: competent, and completely off-brand. This brand's motif is a FIELD — concentric rings, an orbiting point, things that SETTLE rather than snap. A first pass revealed the panel with a clip-path ripple from the touch point. Jim's call (and he's right): that made the panel APPEAR in place rather than ARRIVE. The drawer should travel in from the right edge first; the field then assembles inside it. So the motion is now, in order: 1. THE PANEL ARRIVES. Slides in from the right edge (translateX 100% -> 0) over 560ms on the settle curve, with a soft fade so the leading edge doesn't read as a hard slab. 2. SETTLE. cubic-bezier(.16,1,.3,1) — a long, decelerating ease-out with no overshoot. Bounce reads playful; this practice is not playful. 3. THE RINGS FORM, then 4. THE ITEMS SETTLE — both DELAYED until the panel is most of the way home (~.26s), so the field assembles INSIDE a drawer that has arrived, instead of racing it. Items stagger 65ms apart, like a constellation coming into order. 5. WARM SCRIM. The backdrop is a warm radial (luminous centre, dark edges) instead of a flat grey wash — the page recedes into a field rather than being greyed out. These override INLINE styles on the per-page markup, hence !important. The full sequence lands in ~900ms; the panel itself (and its links) are in place and tappable well before that. @media (prefers-reduced-motion: reduce) at the top of this file kills every animation globally, so reduced-motion users get the drawer instantly and statically. --------------------------------------------------------------- */ #nav-mobile[open] > div:nth-child(3) { animation: cf-drawer-in .46s cubic-bezier(.16,1,.3,1) both !important; } @keyframes cf-drawer-in { from { transform: translateX(100%); opacity: .6; } to { transform: translateX(0); opacity: 1; } } /* --------------------------------------------------------------------------- THE DRAWER AS A NIGHT FIELD (Jim, 2026-07-14) The drawer used to be sand with gold rings — the same surface as the page, so it read as "a panel", not as somewhere else. It is now an ATMOSPHERE: a deep plum field with a pomegranate glow in the top-right corner and rings in soft rose. Celestial without leaving the palette — the plum is simply pomegranate (#93263C) taken down toward the CTA band's wine (#54142A) and past it; the rings are petal (#E2AE9C), the same rose already used for accents. Everything inside the panel is driven by CSS variables. The drawer is a NIGHT FIELD: a deep plum surface (pomegranate #93263C taken down toward the CTA band's wine #54142A and past it — celestial, but still in the palette), a pomegranate glow in the top-right, and rings in soft rose petal (#E2AE9C). Because the panel is dark, everything inside flips: links to linen, the "Menu" label to saffron, the divider to a linen hairline, and the CTA to the band's cream-on-wine treatment (pomegranate-on-plum would be nearly invisible). The current-page link goes petal rose, not persimmon. Identical in light and dark mode — the drawer is the same night either way. HISTORY (2026-07-14): this briefly shipped as a five-way per-page demo (night / petal / linen / tint / wine, chosen via data-drawer on ) so Jim could compare on his phone. He picked NIGHT for every page. The variable structure is kept — it makes the drawer palette a one-block change — but the other four themes were removed. Every page carries data-drawer="night"; book/ has no drawer. The values below are the single source of truth. ---- */ /* ---- The night field's colour variables. To restyle the whole drawer, edit only this block. --------------------------------------------------------- */ html { /* The pink now RADIATES from the upper-right corner and the edges deepen sooner (Jim, 2026-07-14 — "pull the transition back toward the upper right"). Two moves: the linear base is a deeper pink-wine #6E3143 that darkens sooner (hint 40%) into the deep plum #3B1829, and the radial pink glow is pulled to the corner (86% 0%), tightened, and strengthened so the rich pink concentrates upper-right rather than banding across the whole top. Linen menu text stays >7:1 on the deeper base. */ --dw-bg: radial-gradient(115% 82% at 86% 0%, rgba(203,120,145,.55), transparent 60%), linear-gradient(180deg, #6E3143, 40%, #3B1829); /* Rings now match the gold "Menu" label (--dw-label #DBA84A / saffron 219,168,74), a little less opaque than the old rose (Jim, 2026-07-14). */ --dw-rings: rgba(219,168,74,.26); --dw-link: #F3EDE3; --dw-current: #E2AE9C; --dw-label: #DBA84A; --dw-close-bg: rgba(243,237,227,.08); --dw-close-border: rgba(243,237,227,.22); --dw-close-color: #F3EDE3; --dw-divider: rgba(243,237,227,.16); --dw-cta-bg: #F3EDE3; --dw-cta-color: #6B1B2E; } /* ---- The drawer consumes the variables ----------------------------------- */ #nav-mobile[open] > div:nth-child(3) { background: var(--dw-bg) !important; box-shadow: -24px 0 60px rgba(0,0,0,.42) !important; /* The panel's inline `overflow:auto` made BOTH axes user-scrollable, and the ring deco bleeds off the corner (right:-120px), so you could touch-drag the whole drawer left/right — and it shifted the gradient's reference box (Jim, 2026-07-14). Clip the horizontal axis (the ring is meant to bleed off, so clipping is the intended look and disables horizontal touch-panning); keep the vertical axis scrollable for tall menus. overscroll contain stops the drag from chaining to the page behind. (`overflow-x: clip` can't be used here — spec forces it to `hidden` when the other axis is `auto` — so `hidden` is the right value.) */ overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain; touch-action: pan-y; /* only vertical drags scroll — horizontal panning is disabled at the gesture level, belt-and-braces so the drawer can never be dragged sideways on touch. */ } #nav-mobile[open] > div:nth-child(3) > div:first-child { background: repeating-radial-gradient(circle at center, transparent 0 17px, var(--dw-rings) 17px 19px) !important; } #nav-mobile[open] > div:nth-child(3) > nav > a { color: var(--dw-link) !important; } #nav-mobile[open] > div:nth-child(3) > nav > a[style*="var(--pers)"] { color: var(--dw-current) !important; /* current page */ } #nav-mobile[open] > div:nth-child(3) > div:nth-child(2) > span:first-child { color: var(--dw-label) !important; /* the "Menu" label */ } #nav-mobile[open] > div:nth-child(3) > div:nth-child(2) > [data-nav-close] { background: var(--dw-close-bg) !important; border-color: var(--dw-close-border) !important; color: var(--dw-close-color) !important; } #nav-mobile[open] > div:nth-child(3) > div:nth-child(4) { border-top-color: var(--dw-divider) !important; /* divider */ } #nav-mobile[open] > div:nth-child(3) > a.cta { background: var(--dw-cta-bg) !important; color: var(--dw-cta-color) !important; } /* The warm scrim. */ #nav-mobile[open] > div[data-nav-backdrop] { background: radial-gradient(120% 90% at 50% 40%, rgba(84,20,42,.42), rgba(28,18,22,.66) 70%) !important; animation: fadeIn .5s ease both !important; } html[data-theme="dark"] #nav-mobile[open] > div[data-nav-backdrop] { background: radial-gradient(120% 90% at 50% 40%, rgba(65,16,31,.55), rgba(12,8,10,.78) 70%) !important; } /* The rings form behind the menu, once the panel has nearly landed. First child of the panel is the ring deco. Bigger and slower (Jim, 2026-07-14): the deco is enlarged from the markup's 240px to 340px and re-anchored so it still bleeds off the top-right corner, and it now expands from .62 over a slow 2s — the field spreading open rather than popping in. Long, unhurried, and it finishes well after the menu items have settled, so it reads as the room breathing behind them, not as a thing competing for attention. Sizes/offsets are inline on the element, hence !important. */ #nav-mobile[open] > div:nth-child(3) > div:first-child { width: 340px !important; height: 340px !important; top: -110px !important; right: -120px !important; animation: cf-rings-form 2.62s cubic-bezier(.16,1,.3,1) .14s both; } @keyframes cf-rings-form { from { transform: scale(.62); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* The stagger, also held back until the panel is home (.30s+). Panel children: [1] rings deco, [2] Menu/close row, [3] nav, [4] divider, [5] CTA. The nav's own links stagger inside it, 65ms apart. */ #nav-mobile[open] > div:nth-child(3) > div:nth-child(2), #nav-mobile[open] > div:nth-child(3) > nav > a, #nav-mobile[open] > div:nth-child(3) > div:nth-child(4), #nav-mobile[open] > div:nth-child(3) > a { animation: cf-rise .39s cubic-bezier(.16,1,.3,1) both; } @keyframes cf-rise { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } } /* The menu items rise/fade in top-to-bottom. Both the per-item duration (.39s) and every stagger delay below were scaled ×1.15 from the previous values (Jim, 2026-07-14 — "15% longer"), so the whole top-to-bottom fill slows uniformly, ~52ms between items instead of 45ms. FUTURE-PROOF: the link delays run to nth-child(10), so new items added to the mobile nav join the stagger automatically — no CSS edit needed. The divider and CTA sit AFTER the links in the DOM but keep fixed delays; if the nav ever grows past ~6 items, nudge those two to follow (or they'll land mid-list). */ #nav-mobile[open] > div:nth-child(3) > div:nth-child(2) { animation-delay: .14s; } #nav-mobile[open] > div:nth-child(3) > nav > a:nth-child(1) { animation-delay: .21s; } #nav-mobile[open] > div:nth-child(3) > nav > a:nth-child(2) { animation-delay: .26s; } #nav-mobile[open] > div:nth-child(3) > nav > a:nth-child(3) { animation-delay: .31s; } #nav-mobile[open] > div:nth-child(3) > nav > a:nth-child(4) { animation-delay: .36s; } #nav-mobile[open] > div:nth-child(3) > nav > a:nth-child(5) { animation-delay: .41s; } #nav-mobile[open] > div:nth-child(3) > nav > a:nth-child(6) { animation-delay: .47s; } #nav-mobile[open] > div:nth-child(3) > nav > a:nth-child(7) { animation-delay: .52s; } #nav-mobile[open] > div:nth-child(3) > nav > a:nth-child(8) { animation-delay: .57s; } #nav-mobile[open] > div:nth-child(3) > nav > a:nth-child(9) { animation-delay: .62s; } #nav-mobile[open] > div:nth-child(3) > nav > a:nth-child(10) { animation-delay: .67s; } #nav-mobile[open] > div:nth-child(3) > div:nth-child(4) { animation-delay: .46s; } #nav-mobile[open] > div:nth-child(3) > a { animation-delay: .51s; } /* --------------------------------------------------------------------------- CLOSING — the field withdraws (2026-07-14) Removing [open] from a
deletes the panel instantly; there is no native closing state, which is why the old close felt like a snap. site.js therefore marks the element [data-closing], waits for these animations to finish, and only THEN removes [open]. The close: the contents settle away first, then the panel sweeps out to the right and the scrim fades with it, while the ring deco shrinks and fades so the field WITHDRAWS rather than vanishing. Lengthened ~20% (Jim, 2026-07-14): 550ms, not 460 — the exit still read as abrupt. The curve is a gentle ease-in-out rather than a hard accelerate, so the panel eases away instead of being yanked. CLOSE_MS in site.js must stay in step with this duration. These must OUT-SPECIFY the [open] rules above (which carry !important), so every one of them repeats !important with the [data-closing] attribute raising specificity. --------------------------------------------------- */ #nav-mobile[open][data-closing] > div:nth-child(3) { animation: cf-drawer-out .55s cubic-bezier(.4,.02,.5,1) both !important; } /* Tapping a LINK is a committed exit — the visitor is already leaving, so the drawer clears faster than a manual close (300ms vs 550ms) and site.js navigates the moment it finishes. Any slower and the tap feels laggy. */ #nav-mobile[open][data-closing][data-closing-fast] > div:nth-child(3) { animation-duration: .3s !important; } #nav-mobile[open][data-closing][data-closing-fast] > div[data-nav-backdrop] { animation-duration: .3s !important; } #nav-mobile[open][data-closing][data-closing-fast] > div:nth-child(3) > div:first-child { animation-duration: .28s !important; } #nav-mobile[open][data-closing][data-closing-fast] > div:nth-child(3) > div:nth-child(2), #nav-mobile[open][data-closing][data-closing-fast] > div:nth-child(3) > nav > a, #nav-mobile[open][data-closing][data-closing-fast] > div:nth-child(3) > div:nth-child(4), #nav-mobile[open][data-closing][data-closing-fast] > div:nth-child(3) > a { animation-duration: .2s !important; } @keyframes cf-drawer-out { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: .5; } } #nav-mobile[open][data-closing] > div[data-nav-backdrop] { animation: cf-fade-out .55s ease both !important; } @keyframes cf-fade-out { from { opacity: 1; } to { opacity: 0; } } /* The rings withdraw. */ #nav-mobile[open][data-closing] > div:nth-child(3) > div:first-child { animation: cf-rings-withdraw .5s cubic-bezier(.4,.02,.5,1) both !important; } @keyframes cf-rings-withdraw { from { transform: scale(1); opacity: 1; } to { transform: scale(.88); opacity: 0; } } /* The contents settle away first — a short, uniform fade with no stagger: leaving should feel like one motion, not a reverse roll-call. */ #nav-mobile[open][data-closing] > div:nth-child(3) > div:nth-child(2), #nav-mobile[open][data-closing] > div:nth-child(3) > nav > a, #nav-mobile[open][data-closing] > div:nth-child(3) > div:nth-child(4), #nav-mobile[open][data-closing] > div:nth-child(3) > a { animation: cf-settle-away .3s ease both !important; animation-delay: 0s !important; /* cancel the opening stagger delays */ } @keyframes cf-settle-away { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(4px); } } /* Reduced motion: the global rule at the top disables every animation, which leaves these elements at their natural (visible) state. Belt and braces — make sure nothing is left translated or transparent. site.js also skips the closing sequence entirely when reduced motion is on. */ @media (prefers-reduced-motion: reduce) { #nav-mobile[open] > div:nth-child(3), #nav-mobile[open] > div:nth-child(3) * { transform: none !important; opacity: 1 !important; } } /* /about/ hero: the photo is FIRST in the DOM so phones lead with her face; on desktop, order:2 restores text-left / photo-right. Grid items honor `order`, so this is the whole swap. */ @media (min-width:921px) { #about-photo { order:2; } } /* --------------------------------------------------------------------------- ULTRA-WIDE HERO (home only — #hero-deco) At 1920px+ the hero text hugs the far left of the 1140px container while the rings hug the far right screen edge, splitting the composition around a dead centre. Anchor the decoration as if the viewport were 1440px wide, so the rings stay in conversation with the headline. The inline styles pin with right:-150/160/100/480px; these overrides re-derive those offsets from a 1440px frame centred in the real viewport. !important — inline styles. --------------------------------------------------------------------------- */ @media (min-width:1600px) { #hero-deco > div:nth-child(1) { right:calc((100vw - 1440px)/2 - 150px) !important; } #hero-deco > div:nth-child(2) { right:calc((100vw - 1440px)/2 + 160px) !important; } #hero-deco > div:nth-child(3) { right:calc((100vw - 1440px)/2 + 100px) !important; } #hero-deco > div:nth-child(4) { right:calc((100vw - 1440px)/2 + 480px) !important; } } /* --------------------------------------------------------------------------- THE RING FIELD IS THINNER ON PHONES (Jim, 2026-07-14) The rings are drawn as repeating-radial-gradients with 2px-wide bands. At desktop size that reads as a fine field; on a phone the same 2px lines are proportionally much heavier and the field gets loud — it competes with the headline instead of sitting behind it. So below 920px (the site's mobile breakpoint — the same width where the nav collapses) the bands drop to 1px and the tokens' alpha comes down. Both matter: thinner alone still reads dark, softer alone still reads thick. Targeting: the attribute selectors catch every ring set whose inline style uses the tokens, on every page, without touching the markup. Deliberately NOT affected — - the wine CTA band's rings: they use a literal rgba(243,237,227,.13), not a token, so they don't match these selectors; - the mobile drawer's rings: its own rule (rose, further down/up in this file) has far higher specificity and !important, so it still wins. Desktop is untouched. --------------------------------------------------------------------------- */ @media (max-width:920px) { :root { --rings: rgba(200,148,64,.26); --rings-strong: rgba(200,148,64,.30); } html[data-theme="dark"] { --rings: rgba(219,168,74,.17); --rings-strong: rgba(219,168,74,.22); } /* 2px bands -> 1px, keyed on each set's OWN ring spacing so only the line weight changes, never the spacing. The 19/21 sets are the visible hero and section fields; the 26/28 is home's larger --rings-strong set. (The 15/17 sets are all drawer decos, already overridden by the rose drawer rule.) */ [style*="var(--rings) 19px 21px"] { background: repeating-radial-gradient(circle at center, transparent 0 20px, var(--rings) 20px 21px) !important; } [style*="var(--rings-strong) 26px 28px"] { background: repeating-radial-gradient(circle at center, transparent 0 27px, var(--rings-strong) 27px 28px) !important; } } /* Sweep only the visible span of the arc. No translate here, on purpose: it must match @keyframes orbit, which also drops it -- otherwise the circle jumps to a different place the moment the animation starts. */ @keyframes arc-sweep { from { transform: rotate(268deg); } to { transform: rotate(362deg); } } /* Fade in at the lower-left, out at the upper-right, so the restart reads as a new orbit rather than a snap. */ @keyframes arc-fade { 0% { opacity: 0; } 8% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; } }