/* ============================================================ CRAFT LAYER — lifted from rework/layout-system 20 Aug 2026 Loads AFTER comp.css. Adds NO colour decisions and NO type sizes; the brand book locks both. Everything here is depth, optical typography, texture and touch. Deliberately NOT carried across from the layout-system version: · the focus block — comp.css:16 already ships one, and two competing focus systems is worse than either alone · the safe-area and .bezel rules — they target .L1/.L3/.L8/.L10, which do not exist on these pages · the .rv scroll entry — these pages have their own .reveal Every rule below is additive. Removing the stylesheet link returns the pages exactly to their 14 Aug state. ============================================================ */ :root{ /* ---- 1. SHADOW SCALE ------------------------------------- The single biggest cheap-looking tell in the old layouts was `0 30px 70px rgba(0,0,0,.22)` — one harsh black shadow doing all the work. Real light produces a contact shadow, a mid falloff and a wide ambient bloom, and it is never neutral black. These are tinted toward the brand's deep teal so the shadow belongs to the palette. Ink-teal: rgb(2,26,38). At these alphas it is not perceptible as blue, it just stops the grey reading as dirt. */ --sh-ink:2,26,38; --sh-1: 0 1px 1px rgba(var(--sh-ink),.035), 0 2px 4px rgba(var(--sh-ink),.035); --sh-2: 0 1px 1px rgba(var(--sh-ink),.030), 0 4px 8px rgba(var(--sh-ink),.038), 0 12px 24px rgba(var(--sh-ink),.045); --sh-3: 0 1px 1px rgba(var(--sh-ink),.028), 0 6px 12px rgba(var(--sh-ink),.035), 0 18px 34px rgba(var(--sh-ink),.048), 0 40px 72px rgba(var(--sh-ink),.070); /* the top highlight that makes a light panel read as lit, not printed */ --sh-lip:inset 0 1px 0 rgba(255,255,255,.9); /* ---- 2. HAIRLINES ---------------------------------------- `1px solid rgba(0,0,0,.12)` is the other cheap tell: too dark, too even, and it hard-stops. Rings render crisper than borders at sub-pixel densities and never add to the box model. */ --hair:rgba(var(--sh-ink),.10); --hair-soft:rgba(var(--sh-ink),.065); --hair-dark:rgba(255,255,255,.13); --ring:0 0 0 1px var(--hair); --ring-soft:0 0 0 1px var(--hair-soft); /* ---- 3. CONCENTRIC RADII --------------------------------- A 12px radius on a 56px-padded panel reads as a rounded rectangle, not as a machined object. Nested containers need their radii to be concentric: inner = outer − inset. */ --r-xl:20px; --r-2xl:28px; --r-inset:6px; /* shell padding */ --r-core:calc(var(--r-2xl) - var(--r-inset)); /* 22px */ /* ---- 4. SPATIAL RHYTHM ----------------------------------- Every existing section on the site pads 96–99px, which is why the pages read as equal slabs. Three named steps instead, so "tight" and "expansive" are deliberate rather than accidental. */ /* Four steps, not three. The old scale had a 224px floor (112 top + 112 bottom) on EVERY section regardless of content, so a section holding 84px of copy floated in a box 3-5x its own size. Measured before the fix: Advisory 32% dead space, the homepage 26%. A section now takes the step that matches how much it actually holds. */ --pad-tight:clamp(26px,3vw,40px); /* a single line, e.g. the L8 band */ --pad-snug:clamp(40px,4.4vw,64px); /* a heading plus a line or two */ --pad-base:clamp(56px,6.2vw,88px); /* a normal section */ --pad-open:clamp(80px,9vw,128px); /* heroes and deliberate emptiness */ /* ---- 5. MOTION ------------------------------------------- --ease already exists in tokens (.16,1,.3,1). Two more: a spring-ish curve with mass for interactive elements, and a long settle for scroll entries. Nothing uses `ease` or `linear`, and nothing animates a layout property. */ --ease-out:cubic-bezier(.16,1,.3,1); --ease-mass:cubic-bezier(.32,.72,0,1); --dur-fast:.24s; --dur-mid:.55s; --dur-slow:.9s; } /* ============================================================ 6. OPTICAL TYPOGRAPHY The cheapest polish available and the most consistently skipped. Orphans and ragged rags are what make otherwise correct type look unconsidered. ============================================================ */ html{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; /* pulls quotes and hyphens into the margin so the left edge reads optically straight rather than mathematically straight */ hanging-punctuation:first last; } body{font-feature-settings:"kern" 1,"liga" 1,"calt" 1} /* Headings never leave a single word on the last line. */ h1,h2,h3,.balance{text-wrap:balance} /* Body copy avoids short last lines without going ragged. */ p,li,.pretty{text-wrap:pretty} /* Figures line up in columns and match in width. */ .tnum,[data-num]{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1} /* ============================================================ 7. PAPER GRAIN Porcelain #FFFEFA over a whole page is flat in a way printed cream never is. A fixed noise plate at 3.5% gives the ground a tooth. Fixed + pointer-events-none so it never repaints on scroll and never eats a click. ============================================================ */ body::after{ content:"";position:fixed;inset:0;z-index:9;pointer-events:none; opacity:.038;mix-blend-mode:multiply; background-image:url("data:image/svg+xml;utf8,\ \ \ \ "); background-size:180px 180px; } /* ============================================================ 8. RULES THAT DO NOT HARD-STOP A 2px gold line running the full width and ending abruptly is a border. A line that fades out is a drawn mark. Gold stays a RULE and never becomes type — the brand book is explicit. ============================================================ */ .rule-gold{ height:2px;border:0; background:linear-gradient(90deg,var(--gold) 0%,var(--gold) 58%, rgba(217,164,4,.35) 82%,rgba(217,164,4,0) 100%); } .rule-hair{height:1px;border:0;background:linear-gradient(90deg, var(--hair) 0%,var(--hair) 70%,rgba(var(--sh-ink),0) 100%)} /* ============================================================ 9. PHOTOGRAPHY Stock straight off the shelf has mismatched white balance and contrast. One shared grade makes five different sources look like one shoot, which is most of what "art directed" means. Re-measure contrast over every real photo when they land — this filter changes the pixels the text sits on. ============================================================ */ .graded{ filter:saturate(.86) contrast(1.04) brightness(1.01); } .framed{box-shadow:var(--ring-soft),var(--sh-2)} /* ============================================================ 13. TOUCH + THEME ============================================================ */ html{color-scheme:light} /* correct native scrollbars and form controls */ body{ touch-action:manipulation; /* removes the 300ms double-tap zoom delay */ -webkit-tap-highlight-color:rgba(0,113,165,.14); overflow-x:hidden; /* full-bleed sections must never open a scrollbar */ } /* ============================================================ 11. THE DOUBLE BEZEL A panel sitting flat on a ground is a div. A core sitting in a shell, with concentric radii and its own lip highlight, is an object. Used on the two layouts that carry a card. ============================================================ */ .ls-bezel{ background:rgba(var(--sh-ink),.045); border-radius:var(--r-2xl); padding:var(--r-inset); box-shadow:var(--ring-soft),var(--sh-3); } .ls-bezel > .ls-core{ background:var(--porcelain); border-radius:var(--r-core); box-shadow:var(--sh-lip); }