/* =========================================================================== type-experiment.css — HOMEPAGE ONLY · typography + spacing experiment Two modes, set on by type-experiment.js: current → no rules below match; the homepage renders exactly as before refined → the controlled changes below (working default) Independent of the canvas modes in canvas.css. Loaded by index.html only. Fonts are unchanged: serif for meaning, sans for explanation, mono for measurement. Only how they are used changes. To remove: delete this file, type-experiment.js, and the two tags marked "type experiment" in index.html. =========================================================================== */ /* ---- Experiment 5 · Reading width vs compositional width ---------------- Tokens only, for future use. Nothing on the homepage uses them yet, so no content moves. --reading-width the measured column for sentences (= --measure) --compositional-width the wider field visual compositions may occupy, matching the Studio's --wide register */ :root { --reading-width: var(--measure); /* 660px */ --compositional-width: 1240px; } /* ---- Experiment 1 · BRAND SIGNATURE (pass 2) ----------------------------- "I'N'I DESIGN" on the homepage is not an eyebrow: it is the company's full name. It gets its own role, the brand signature — more presence than section/page labels (CASE STUDY, OUR APPROACH, STUDIO…), still well below the headline. This role is homepage-only for now and is NOT the eyebrow system; do not reuse it for labels. pass 1: 12px · 500 · 0.18em (read as metadata) pass 2: 14px · 500 · 0.16em line-height: 1 removes the tall inherited line box, so every interval in the marker is explicit. padding-left matches the tracking: letter-spacing adds space after the last letter, which would otherwise pull the centred name ~2px left of its rule. */ html[data-type="refined"] .hero .eyebrow { font-size: 0.875rem; /* 14px (was 1.19rem / 19px) */ font-weight: 500; /* (was 400) */ letter-spacing: 0.16em; /* (was 0.14em) */ line-height: 1; /* (was 1.7, inherited) */ padding-left: 0.16em; } /* Signature + rule = one small brand marker; the marker then sits at a deliberate distance from the headline. The rule itself is unchanged (28 × 1px, terracotta @ 0.55). signature → rule: 12px rule → headline: 22px box (≈32px to the cap tops, once the serif's own internal space above the capitals is counted) */ html[data-type="refined"] .hero .eyebrow::after { margin: 12px auto 22px; /* (was 14px auto 28px; pass 1 12/20) */ } /* ---- Experiment 2 · Headline authority ----------------------------------- Same size, same serif, same weight and colour. Studio's display setting: tighter leading and a whisper of negative tracking. */ html[data-type="refined"] .hero h1 { line-height: 1.1; /* (was 1.15) */ letter-spacing: -0.012em; /* (was normal) */ margin-bottom: 15px; /* (was 8px; pass 1 18px) — room before the promise */ } /* ---- Experiments 3 + 4 · Promise and explanation ------------------------- Promise: unchanged colour and desktop size (terracotta, 20px), with a slightly firmer line-height so a wrapped promise on mobile reads as one thought rather than two lines of copy. Explanation: one restrained step down (18.4 → 17.6px, the site's existing lede size) and a slightly calmer line-height, so it sits clearly beneath the promise through scale and colour, not by shrinking noticeably. */ html[data-type="refined"] .hero .subline { /* Desktop size unchanged (20px). Only the floor rises, 16.8 → 17.6px: below ~880px the current promise drops smaller than the paragraph under it, which inverts the hierarchy on tablet and mobile. */ font-size: clamp(1.1rem, 2vw, 1.25rem); /* (was clamp(1.05rem, 2vw, 1.25rem)) */ line-height: 1.5; /* (was 1.7) */ margin-bottom: 16px; /* (was 12px; pass 1 20px) */ } html[data-type="refined"] .hero p.lede { font-size: 1.1rem; /* 17.6px (was 1.15rem / 18.4px) */ line-height: 1.65; /* (was 1.7) */ } /* On narrow screens the explanation steps to the site's body size so the promise (17.6px) always stays the larger of the two. */ @media (max-width: 880px) { html[data-type="refined"] .hero p.lede { font-size: 1.05rem; /* 16.8px */ } } /* Pass 2: the temporary bridge-position compensation from pass 1 has been removed. The hero text now occupies its natural height, and the existing layout (the bridge is positioned from the bottom of the lede) determines where the bridge falls. Deliberately uncorrected, to judge the natural composition before the composition/depth phase. */ /* ---- Experiment 6 · Section rules --------------------------------------- Removes only the generic 1px rule on top of every homepage
. Kept, because each line means something: · gold rules framing the triad and beliefs (brand graphic language) · rules between the numbered stages in How We Work (a sequence) · card borders, the header rule, the hero rule, footer rules Section padding is unchanged: the existing space carries the transition. */ html[data-type="refined"] section { border-top-color: transparent; } /* ---- Development switch (shown with ?compare) --------------------------- */ .type-switch { bottom: 54px; /* stacked above the canvas switch */ }