/* ============================================================ STUDIO L1 — SITE SYSTEM Type & Structure System LOCKED 4 Sept 2026. Prata h1/h2 · Cormorant Garamond h3/statements · Julius Sans One tracked caps · Antic Didone figures · Source Serif 4 body · Inter UI. Gold System: four roles, never two golds on one ground. Zero radius. Graphite, never pure black. Colour lives in light. ============================================================ */ :root{ --paper:#FCFCFB; --pearl:#F7F4EF; --ivory:#FBF9F5; --champagne:#EFE7D8; --stock:#262422; --graphite:#262422; /* Gold, verbatim from the book pages (the only final design). #8E7A45 is the READING gold — dark on purpose, clears 4.5:1 at body size. At 4rem it stops reading as gold and starts reading as olive-brown, so display type takes #A6883F: the same gold as the Journal cover title, clearing 3:1 for large text. Brand gold #B99B54 is 2.6:1 and cannot carry a headline. */ --gold-ink:#8E7A45; --gold-read:#8E7A45; --gold-display:#A6883F; --gold-disp:#A6883F; --gold:#B99B54; --gold-brand:#B99B54; --gold-hi:#C9AC68; --gold-dark:#C9AC68; --gold-on-dark:#E8D7AD; /* type roles, named as the book pages name them */ --disp:'Prata',Georgia,serif; --quiet:'Cormorant Garamond',Georgia,serif; --caps:'Julius Sans One','Inter',system-ui,sans-serif; --fig:'Antic Didone',Georgia,serif; --sans:'Inter',system-ui,sans-serif; --body:'Source Serif 4',Georgia,serif; --script:'Caveat',cursive; /* PASTELS — each locked hue at 28% over white. Ruled 3 Sept 2026: "the colourful page is too bold and takes too much attention from books — use some pastel light colour set." This departs from the BOLD field construction on purpose: bold is right when the field IS the subject. On a selling page it is a backdrop. */ --p-crystal:#DEF4FB; --p-lilac:#F9EAFD; --p-hotpink:#FCD9EC; --p-yellow:#FFF8DA; --p-violet:#EFE3FC; --p-teal:#D7F2EE; --p-coral:#FDE5E0; --p-magenta:#F9DBF6; --p-amber:#FFEDD7; --ink:#262423; --read:#4C4C53; --faint:#8B8579; --ink-dk:#F6F2EA; --read-dk:#C6C0B5; --faint-dk:#7E786E; --hair:rgba(185,155,84,.42); --lime:#C8F590; --gold-blog:#C8B999; --gold-blog-hi:#D8CBB0; /* ── the pink thread · 26 September 2026 ────────────────────────────────── One meaning across the whole site: "begin with you". The free persona test, and anything about the reader's own identity. Never decoration, never a product, never a price. Used for anything else it stops meaning anything, and the closing block stops being the place the page was heading. These are the values .close-light has carried since July, lifted out of it into tokens so the smaller pink moments cannot drift from the block they lead to. PINK IS ALWAYS A SURFACE. The reference file's palette exactly, nothing invented and nothing between: --pink-soft #F4E6DF the light ground — a section, a tinted card --pink-clay #DCB3A3 the full one — the invitation tile, the pull quote, the closing block NOT --pink. That name was already taken: journey.css has defined it as #E85A96 since the rebuild, the magenta at the pink end of the .grad headline gradient, and journey.css loads last. Two previews went out with a magenta tile before that surfaced. The clay needs its own name. GOLD KEEPS EVERY LINE. No pink borders, no pink rules, no pink hairlines: on a pink ground the hairline is #E8D7AD at .7, which is what .close-light has always used. Pink doing linework as well as surface is what turns the page muddy. Written ON the clay: --pink-cream. Written on the light ground: the page's own --ink for headings and --read for body. There is no brown: the reference set headings in #7A4236 and Lisete ruled it out, so pink grounds carry ordinary page text and nothing else. */ --pink-clay:#DCB3A3; --pink-soft:#F4E6DF; --pink-cream:#F8F8E8; --pink-gold:#E8D7AD; --pink-hair:rgba(232,215,173,.7); --s:8rem; --s-tight:5.5rem; } *{box-sizing:border-box;margin:0;padding:0} body{background:var(--paper);color:var(--ink); font-family:'Source Serif 4',Georgia,serif;font-size:16px;line-height:1.75; -webkit-font-smoothing:antialiased;overflow-x:clip} a{text-decoration:none;color:inherit} img{max-width:100%;height:auto;display:block} .wrap{max-width:1180px;margin:0 auto;padding:0 2.6rem} .wrap-narrow{max-width:760px;margin:0 auto;padding:0 2.6rem} @media(max-width:720px){.wrap,.wrap-narrow{padding:0 1.4rem}} section{padding:var(--s) 0} section.tight{padding:var(--s-tight) 0} /* ---- TYPE ---- */ .kicker{font-family:'Julius Sans One',sans-serif;font-size:11px;letter-spacing:.28em; text-transform:uppercase;color:var(--gold-read);display:block;margin-bottom:2.6rem} .kicker.center{text-align:center} h1{font-family:'Prata',Georgia,serif;font-weight:400; font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.12;letter-spacing:-.012em} h1 .over{font-family:'Julius Sans One',sans-serif;display:block;font-size:12px; letter-spacing:.3em;text-transform:uppercase;color:var(--gold-read);margin-bottom:1.4rem} /* Prata has no italic. The book pages reuse and strip the slant, colouring it display gold instead — same markup, no faux oblique. */ h1 em,h2 em,.display em{font-style:normal;color:var(--gold-display)} h1 .accent{color:var(--gold-display)} h2{font-family:'Prata',Georgia,serif;font-weight:400; font-size:clamp(1.5rem,2.8vw,2.1rem);line-height:1.2} h3{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600; font-size:1.5rem;line-height:1.24} .say{font-family:'Cormorant Garamond',Georgia,serif;font-weight:300; font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.42} .say em{font-style:italic;color:var(--gold-disp)} .lede{font-size:1.09rem;line-height:1.8;color:var(--read);max-width:56ch} .copy{font-size:1rem;line-height:1.78;color:var(--read);max-width:50ch} .price{font-family:'Antic Didone',Georgia,serif;font-size:2.6rem;line-height:1;color:var(--ink)} .price .cur{font-size:1.3rem;vertical-align:.55em;margin-right:.08em} .meta{font-family:'Inter',system-ui,sans-serif;font-size:11px;font-weight:500; letter-spacing:.16em;text-transform:uppercase;color:var(--faint)} .hair{height:1px;border:0;background:var(--hair)} .legal h2{margin:2.6rem 0 .9rem} .legal p,.legal li{color:var(--read);margin-bottom:.9rem} .legal ul{padding-left:1.2rem} /* ---- BUTTONS · zero radius, always ---- */ .btn{display:inline-block;border-radius:0;font-family:'Inter',system-ui,sans-serif; font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase; padding:16px 30px;background:var(--ink);color:var(--paper); border:0;cursor:pointer;transition:background .3s} .btn:hover{background:#3A3734} .link{font-family:'Inter',system-ui,sans-serif;font-size:11px;font-weight:600; letter-spacing:.18em;text-transform:uppercase;color:var(--ink); border-bottom:1px solid var(--gold-read);padding-bottom:5px;display:inline-block} /* ---- THE FIELD · five blurred radials, one per quadrant plus a fifth. ONE bold field per page, reserved for the price. ---- */ .field{position:relative;isolation:isolate;background:var(--paper);overflow:hidden} /* blur 60px, inset -12% — the book pages' numbers, not the bold spec's */ .field::before{content:"";position:absolute;inset:-12%;z-index:0;pointer-events:none; filter:blur(60px); background: radial-gradient(34% 40% at 16% 18%,var(--p-hotpink),transparent 72%), radial-gradient(32% 38% at 84% 16%,var(--p-coral),transparent 72%), radial-gradient(34% 40% at 14% 82%,var(--p-yellow),transparent 72%), radial-gradient(32% 38% at 86% 84%,var(--p-amber),transparent 72%), radial-gradient(30% 34% at 50% 50%,var(--p-crystal),transparent 74%)} .field>*{position:relative;z-index:1} .field-quiet::before{opacity:.42} /* ---- GLASS ON LIGHT ---- */ /* RADIUS RULED 7 Sept 2026 — "I actually like the radius glass more." Glass keeps 22px, on the portal and the public site. This supersedes the blanket zero-radius line in the visual-language spec, which predates the glass construction; set-89.html (final design) already carried 22px. The distinction: glass is an OBJECT on the page and reads as a physical pane. Structure IS the page and stays sharp — image zones, bento cells, hairlines and rules remain at 0. */ .glass>*{position:relative;z-index:1} /* the promise object — the only tilted thing on a page */ .promise{transform:rotate(-1.4deg);padding:3.2rem 3rem;max-width:640px;margin:0 auto} .promise p{font-family:'Cormorant Garamond',Georgia,serif;font-weight:300; font-size:clamp(1.35rem,2.5vw,1.85rem);line-height:1.4} .promise p+p{margin-top:.5rem} .promise .last{color:var(--gold-disp)} /* ---- GRAPHITE · matte stock. Visual Tension. ---- */ .stock{position:relative;isolation:isolate;background:var(--graphite);color:var(--ink-dk)} /* ---- THE PAPER STRUCTURE · matte stock, never a flat fill -------------- Pre-rendered monochrome PNG tile, centred on mid-grey, at 96px. DO NOT replace this with an SVG turbulence filter. The filter that was here originally emitted COLOURED noise and lifted the ground off #262422. Greyscale under mix-blend-mode:overlay shifts luminance only and cannot tint — that is the whole reason it is a baked PNG. Locked: graphite is a granulated tile, never a flat colour. OPACITY IS MEASURED, NOT TASTE. Overlay against a near-black ground is very weak: the blend result for base #262422 with this mid-grey tile spans only 3.5 of 255 levels at opacity .16 — invisible. At .50 it spans 10.9 levels, centred on #262422, which reads as matte stock without lifting the ground. Do not reduce it back toward .16; the texture disappears and the panel silently returns to a flat fill. ---------------------------------------------------------------------- */ .stock::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; opacity:.5;mix-blend-mode:overlay; background-image:url("data:image/png;base64,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"); background-size:96px 96px} .stock>*{position:relative;z-index:1} .stock h1,.stock h2,.stock h3{color:var(--ink-dk)} .stock .lede,.stock .copy{color:var(--read-dk)} .stock .kicker{color:var(--gold-brand)} .stock .hair{background:var(--gold-brand)} .stock .btn{background:var(--gold-brand);color:#221F19} .stock .btn:hover{background:var(--gold-dark)} .smoked{background:linear-gradient(150deg,rgba(58,55,52,.72),rgba(38,36,34,.52)); backdrop-filter:blur(40px) saturate(160%);-webkit-backdrop-filter:blur(40px) saturate(160%); border:1px solid rgba(185,155,84,.42);border-radius:22px} .smoked .bd{color:var(--read-dk)} .smoked .fig{color:var(--gold-dark)} /* ---- IMAGE ZONES · composed and specified, never padded with boxes ---- */ .zone{position:relative;background:var(--pearl);overflow:hidden; border:1px solid rgba(185,155,84,.22)} .zone img{width:100%;height:100%;object-fit:cover} .zone .spec{position:absolute;inset:0;display:flex;flex-direction:column; align-items:center;justify-content:center;text-align:center;padding:1.6rem;gap:.5rem} .zone .spec .n{font-family:'Julius Sans One',sans-serif;font-size:10px; letter-spacing:.26em;text-transform:uppercase;color:var(--gold-read)} .zone .spec .d{font-family:'Inter',system-ui,sans-serif;font-size:11.5px; line-height:1.6;color:var(--faint);max-width:30ch} /* ---- EDITORIAL BENTO · asymmetric, never a uniform stack ---- */ .bento{display:grid;grid-template-columns:1.35fr 1fr;gap:1px; background:var(--hair);border:1px solid var(--hair)} @media(max-width:880px){.bento{grid-template-columns:1fr}} .cell{background:var(--paper);padding:3rem 2.6rem} .cell.tall{grid-row:span 2} .singles{display:grid;grid-template-columns:repeat(3,1fr);gap:1px; background:var(--hair);border:1px solid var(--hair)} @media(max-width:880px){.singles{grid-template-columns:1fr}} /* ---- MASTHEAD · nav ruled 7 Sept 2026 ---- */ .mast{position:sticky;top:0;z-index:60;display:flex;align-items:center; justify-content:space-between;gap:1.6rem;padding:1.1rem 2.6rem; background:rgba(252,252,251,.84);backdrop-filter:blur(26px) saturate(160%); -webkit-backdrop-filter:blur(26px) saturate(160%); border-bottom:1px solid rgba(185,155,84,.20)} @media(max-width:720px){.mast{padding:1.1rem 1.4rem}} .wm{font-family:'Julius Sans One',sans-serif;font-size:17px;letter-spacing:.14em; text-transform:uppercase;color:var(--ink);flex:none} /* the practice, under the wordmark — ruled 16 Sept 2026: thin, tracked, faint */ .wm small{display:block;font-family:var(--caps);font-weight:400;font-size:8px;letter-spacing:.3em; text-transform:uppercase;color:var(--faint);opacity:.85;margin-top:4px;line-height:1} .mast nav{display:flex;gap:1.7rem} /* seven items since Portfolio joined the nav on 22 Sept: between the 920px breakpoint and about 1060px the row is wider than the masthead, so the gap closes rather than the page scrolling sideways. */ @media(max-width:1060px){.mast nav{gap:1.1rem}} @media(max-width:920px){.mast nav{display:none}} .mast nav a{font-family:'Inter',system-ui,sans-serif;font-size:11px;font-weight:600; letter-spacing:.15em;text-transform:uppercase;color:var(--read);padding-bottom:4px; border-bottom:1px solid transparent;transition:.22s;white-space:nowrap} .mast nav a:hover,.mast nav a.on{color:var(--ink);border-bottom-color:var(--gold-read)} .portal{flex:none;font-family:'Inter',system-ui,sans-serif;font-size:11px;font-weight:600; letter-spacing:.18em;text-transform:uppercase;color:var(--ink);padding:10px 18px; border:1px solid var(--gold-read);border-radius:0;transition:.28s} .portal:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)} /* ---- FORM · Inter only, zero radius ---- */ .form{display:flex;flex-direction:column;gap:1rem;max-width:420px;margin:2.4rem auto 0} .form input{font-family:'Inter',system-ui,sans-serif;font-size:14px;padding:14px 16px; border:1px solid var(--hair);border-radius:0;background:rgba(255,255,255,.7);color:var(--ink)} .form input:focus{outline:0;border-color:var(--gold-read)} .consent{display:flex;gap:.7rem;align-items:flex-start;text-align:left; font-family:'Inter',system-ui,sans-serif;font-size:12.5px;line-height:1.6;color:var(--read)} .consent input{width:16px;height:16px;flex:none;margin-top:2px;accent-color:var(--gold-read)} /* ---- FOOTER ---- */ footer{padding:5.4rem 0 2.6rem} .fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:4rem;padding-bottom:3.4rem} @media(max-width:820px){.fgrid{grid-template-columns:1fr;gap:2.6rem}} .fwm{font-family:'Julius Sans One',sans-serif;font-size:20px;letter-spacing:.14em; text-transform:uppercase;color:var(--ink-dk);display:block;margin-bottom:.5rem} .ftag{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic; font-size:1.05rem;color:var(--gold-dark);margin-bottom:1.1rem} .fbrand p{font-size:.95rem;line-height:1.75;color:var(--read-dk);max-width:38ch} .fhead{font-family:'Julius Sans One',sans-serif;font-size:10px;letter-spacing:.24em; text-transform:uppercase;color:var(--gold-brand);display:block;margin-bottom:1.4rem} .fcol a{display:block;font-size:.95rem;color:var(--read-dk);padding:.42rem 0;transition:.25s} .fcol a:hover{color:var(--ink-dk)} .fbase{display:flex;justify-content:space-between;gap:1.6rem;flex-wrap:wrap; padding-top:1.9rem;border-top:1px solid rgba(185,155,84,.30); font-family:'Inter',system-ui,sans-serif;font-size:12px;color:#999288} .flegal a{margin-left:1.8rem;color:#999288} .flegal a:hover{color:var(--ink-dk)} @media(max-width:600px){.flegal a{margin:0 1.6rem 0 0}} /* ══ STUDIO L1 SITE SCALE · CANONICAL · 8 Sept 2026 ════════════════════════ Ruled by Lisete: "keep as on home id and shop page and design all main site pages on same logic." The FACES, roles, gold, pastels and glass logic come from set-89.html. The SCALE does not — the book pages themselves carry three different h1 sizes (4.9 / 4.2 / 3.3rem), so display scale is chosen per page, not inherited. A book page earns 4.9rem because its headline is four words. A site page carries longer headlines, a nav, a bento and a footer, and is composed at the scale below. Do not raise it to the book number. */ :root{ --s-section:8rem; --s-sectionTight:5.5rem; } section{padding:var(--s-section) 0} section.tight{padding:var(--s-sectionTight) 0} .wrap{max-width:1180px;margin:0 auto;padding:0 2.6rem} @media(max-width:720px){.wrap{padding:0 1.4rem}} /* DISPLAY — Prata, one weight. Site scale. */ h1,h2,.display{font-family:var(--disp);font-weight:400; letter-spacing:-.012em;line-height:1.12;color:var(--ink)} h1{font-size:clamp(2.2rem,5vw,3.6rem)} h2{font-size:clamp(1.5rem,2.8vw,2.1rem)} h1 em,h2 em,.display em{font-style:normal;color:var(--gold-display)} /* EXPRESSIVE — Cormorant at 600. Kept from the book pages: this is what makes a statement read as a statement rather than as larger body copy. */ h3,.statement,.credo{font-family:var(--quiet);font-weight:600; letter-spacing:-.004em;color:var(--ink)} .say{font-family:var(--quiet);font-weight:300; font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.42;color:var(--ink)} .say em{font-style:italic;color:var(--gold-display)} /* TRACKED CAPS — Julius. 2.6rem of air beneath at site scale. */ .eyebrow,.kicker{font-family:var(--caps);font-size:11px;font-weight:400; letter-spacing:.28em;text-transform:uppercase;color:var(--gold-ink); display:block;margin-bottom:2.6rem} /* Prata uppercase and tracked — its own register. */ .caps{font-family:var(--disp);font-weight:400;text-transform:uppercase; letter-spacing:.16em;line-height:1.34; font-size:clamp(1.2rem,2.4vw,1.75rem);color:var(--ink)} /* BODY — site measure. */ .lede{font-size:1.09rem;line-height:1.8;max-width:56ch;color:var(--read)} .copy{font-size:1rem;line-height:1.78;max-width:50ch;color:var(--read)} /* Figures — Antic Didone. */ .price,.fig,.stat{font-family:var(--fig)} .glass > *{position:relative;z-index:1} .glass p{color:var(--read)} /* FIELD — pastel, blur 60px, inset -12% (book-page numbers, kept). */ .field{position:relative;overflow:hidden;isolation:isolate} .field > .wrap{position:relative;z-index:3} .field::before{content:"";position:absolute;inset:-12%;z-index:0;pointer-events:none; filter:blur(60px); background: radial-gradient(34% 40% at 16% 18%,var(--p-hotpink),transparent 72%), radial-gradient(32% 38% at 84% 16%,var(--p-coral),transparent 72%), radial-gradient(34% 40% at 14% 82%,var(--p-yellow),transparent 72%), radial-gradient(32% 38% at 86% 84%,var(--p-amber),transparent 72%), radial-gradient(30% 34% at 50% 50%,var(--p-crystal),transparent 74%)} .field-quiet::before{opacity:.5} /* THE CLOSE · canonical · 8 Sept 2026 — same door at the bottom of every page. LIME is a strict accent, never a fill: it is the hairline above the single primary action, one per page. It becomes wayfinding — the lime line means "this is the thing to do here." Never twice, never a background, never on the Portal. */ .close-light,.closing{background:transparent;color:var(--ink); text-align:center;padding:var(--s-section) 0} .close-light .kicker,.closing .kicker{color:var(--gold-ink);text-align:center;margin-bottom:1.9rem} .close-light .lede,.closing .lede{margin-left:auto;margin-right:auto;max-width:52ch} .close-light hr,.closing hr{height:2px;border:0;max-width:64px; margin:2.8rem auto 2.4rem;background:var(--lime);opacity:1} /* THE CLOSE BUTTON · gold · ruled 8 Sept 2026 — the single primary action on every page is gold, matching index.html. Ink buttons stay for secondary actions. The lime hairline sits above it: accent, never a fill. HERO EYEBROW, revised: "Identity-Based Lifestyle Architecture™" is the HOME PAGE ONLY. Every other page names itself. Left-aligned, no ornaments. */ .close-light .btn,.closing .btn{background:var(--gold-blog);color:#221F19} .close-light .btn:hover,.closing .btn:hover{background:var(--gold-blog-hi)} /* ══ EYEBROW · ruled 8 Sept 2026 ═══════════════════════════════════════════ The small gold line above the headline is the PAGE'S OWN NAME, and nothing else: About · Services · Intelligence · Shop · Home ID · Begin. No "Studio L1" prefix — the wordmark sits directly above it in the masthead, so repeating the brand there reads as an echo, not a signature. ONE exception: the home page carries "Identity-Based Lifestyle Architecture™", where a first-time visitor meets it once. Always left-aligned. Never flanked by ornament. */ /* ══ PAGE COMPOSITION SYSTEM · ruled 8 Sept 2026 ═══════════════════════════ Differentiate by ground TEMPERATURE, not by weight. Four light grounds exist before a dark one does; reaching for graphite to make a page feel different changes its weight when only its temperature was wanted. paper Home·Shop · pearl Services·Home ID · ivory Intelligence · champagne About · stock ONE mid-page band, never a hero. CAPS are rationed: the close headline on every page, plus at most one section opener on a long page. A hero h1 is always sentence case — caps in the hero and caps at the close makes a page shout twice. */ .hero.ground-paper{background:var(--paper)} .hero.ground-pearl{background:var(--pearl)} .hero.ground-ivory{background:var(--ivory)} .hero.ground-champagne{background:var(--champagne)} .hero[class*="ground-"].field::before{opacity:.42} .hero h1{text-transform:none;letter-spacing:-.012em} .close-light h2.caps,.closing h2.caps{font-size:clamp(1.35rem,2.6vw,1.95rem)} /* ══ RING FIX + FIELD VARIANTS · 8 Sept 2026 ══════════════════════════════ .ringsec::before is absolute with inset:0, but .ringsec had no position of its own — only .ringsec > * did. So the pearl halo escaped its section and painted across the page's containing block. A ::before is only ever as contained as its parent's position makes it. */ .ringsec{position:relative;isolation:isolate} .ringsec::before{z-index:0} .ringsec > *{position:relative;z-index:1} /* paper — coolest ground, so the field can be the warmest and boldest */ /* pearl — already warm, so the field turns cool to keep it from going peach */ /* ivory — the quiet page. Narrow band, mostly cool, almost no chroma. */ /* champagne — warmest ground, so the field goes cool and stays quiet, or the two warms stack and the whole page turns peach. */ /* ══ MUTED PASTELS · ruled 8 Sept 2026 ═════════════════════════════════════ Home ID's field was the reference — "bit more muted tones." Each hue is now the locked colour at 19% over white, down from 28%. Muting by MIX, not by opacity: dropping opacity fades the whole field toward the ground and takes the light out with the colour, while a lower mix keeps the hue true and only lowers its saturation. The field still reads as light; it just stops reading as a tint. */ /* ══ THE HERO · canonical · ruled 8 Sept 2026 ══════════════════════════════ Built from homeid.html. The eyebrow is a Julius caps line INSIDE the h1, never a block floating above it — an eyebrow in its own element carries its own margin, so the gap to the headline never matches across pages. Inside the h1 it is one type object and the spacing is fixed for everyone. padding 7rem 0 4rem · .over 12px/.3em/1.4rem beneath h1 clamp(2.2rem,5vw,3.6rem)/1.12 · em display gold, style normal .lede 2.4rem beneath, 56ch · .split 4.4rem beneath */ .hero{padding:7rem 0 4rem} .hero > .wrap > .kicker,.hero > .wrap > .eyebrow{display:none} h1 .over{font-family:var(--caps);display:block;font-size:12px;font-weight:400; letter-spacing:.3em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:1.4rem} .hero h1{font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.12;letter-spacing:-.012em} .hero h1 em{font-style:normal;color:var(--gold-display)} .hero .lede{margin-top:2.4rem;max-width:56ch} .hero .split{margin-top:4.4rem} /* ══ THE NINE FIELDS · LOCKED · from studio-l1-FIELD-VARIATIONS.html ═══════ Nine NAMED fields, each with a documented use. Not decoration — a field is chosen by what the page is doing, the way a persona palette is chosen. TWO REGISTERS, same nine fields: .f- BOLD full saturation. Use where the field IS the subject: portal, covers, the Dream Life Portal. .f-.pastel PASTEL same hues, same geometry, at 22% over white. Use where the field is a BACKDROP behind something being sold (ruled 3 Sept 2026). THE CONSTRUCTION, UNCHANGED: blobs 80–110%, full saturation at the 0% stop, fading to zero alpha at 78–88%, under a 40px blur, inset:-8%. Anything smaller or more blurred washes out. ONE layer only — a second layer with a vertical offset draws a visible seam. THE RESTRICTION THAT MAKES IT WORK: these colours appear ONLY in blurred gradient fields behind glass. Never a flat fill, never text, never a border, never a button on the main site. */ .field{position:relative;overflow:hidden;isolation:isolate} .field > .wrap,.field > .content{position:relative;z-index:3} .field::before{content:"";position:absolute;inset:-8%;z-index:0; pointer-events:none;filter:blur(40px)} /* PASTEL register — the ground shows through, so the page stays a document */ .field.pastel{background:var(--paper)!important} .field.pastel::before{opacity:.22;filter:blur(52px)} /* AURORA — Crystal · teal · violet · lilac The Mirror · reflection · anything asking a question */ .f-aurora{background:var(--crystal)} .f-aurora::before{background: radial-gradient(96% 88% at 14% 18%, var(--crystal) 0%, rgba(79,195,232,0) 84%), radial-gradient(88% 80% at 84% 10%, var(--violet) 0%, rgba(169,106,240,0) 82%), radial-gradient(100% 88% at 62% 82%, var(--teal) 0%, rgba(43,184,168,0) 84%), radial-gradient(76% 68% at 30% 92%, var(--lilac) 0%, rgba(222,143,245,0) 80%), radial-gradient(70% 64% at 96% 58%, var(--crystal) 0%, rgba(79,195,232,0) 78%)} /* EMBER — Fuchsia · coral · orange · amber Evening · warmth · the ritual corner */ .f-ember{background:var(--fuchsia)} .f-ember::before{background: radial-gradient(98% 90% at 18% 84%, var(--orange) 0%, rgba(245,106,30,0) 84%), radial-gradient(90% 82% at 78% 14%, var(--fuchsia) 0%, rgba(214,18,122,0) 82%), radial-gradient(104% 92% at 52% 46%, var(--coral) 0%, rgba(245,118,90,0) 86%), radial-gradient(80% 72% at 94% 78%, var(--amber) 0%, rgba(255,162,46,0) 80%), radial-gradient(72% 66% at 8% 20%, var(--hotpink) 0%, rgba(240,56,155,0) 78%)} /* IRIS — Violet · lilac · magenta · crystal The Dream Life Portal — in use */ .f-iris{background:var(--violet)} .f-iris::before{background: radial-gradient(90% 82% at 80% 12%, var(--violet) 0%, rgba(169,106,240,0) 80%), radial-gradient(84% 76% at 18% 26%, var(--crystal) 0%, rgba(79,195,232,0) 80%), radial-gradient(92% 82% at 54% 90%, var(--magenta) 0%, rgba(226,63,208,0) 80%), radial-gradient(70% 64% at 92% 62%, var(--lilac) 0%, rgba(222,143,245,0) 78%)} /* PRISM — Crystal · lilac · hot pink · yellow Discovery · the assessment · first contact */ .f-prism{background:var(--lilac)} .f-prism::before{background: radial-gradient(94% 86% at 12% 22%, var(--crystal) 0%, rgba(79,195,232,0) 84%), radial-gradient(88% 80% at 82% 18%, var(--lilac) 0%, rgba(222,143,245,0) 82%), radial-gradient(96% 86% at 58% 88%, var(--hotpink) 0%, rgba(240,56,155,0) 84%), radial-gradient(74% 68% at 92% 60%, var(--yellow) 0%, rgba(255,217,61,0) 78%), radial-gradient(66% 60% at 34% 54%, var(--violet) 0%, rgba(169,106,240,0) 76%)} /* NOCTURNE — Violet · fuchsia · magenta Depth · the Alchemist · anything after dark */ .f-nocturne{background:var(--fuchsia)} .f-nocturne::before{background: radial-gradient(100% 92% at 74% 16%, var(--violet) 0%, rgba(169,106,240,0) 86%), radial-gradient(92% 84% at 16% 40%, var(--fuchsia) 0%, rgba(214,18,122,0) 84%), radial-gradient(96% 86% at 56% 94%, var(--magenta) 0%, rgba(226,63,208,0) 84%), radial-gradient(68% 62% at 94% 72%, var(--violet) 0%, rgba(169,106,240,0) 76%)} /* CITRUS — Yellow · amber · orange · coral Momentum · trackers · a good week */ .f-citrus{background:var(--amber)} .f-citrus::before{background: radial-gradient(98% 90% at 20% 26%, var(--yellow) 0%, rgba(255,217,61,0) 84%), radial-gradient(92% 84% at 82% 16%, var(--amber) 0%, rgba(255,162,46,0) 82%), radial-gradient(100% 88% at 58% 88%, var(--orange) 0%, rgba(245,106,30,0) 84%), radial-gradient(76% 70% at 6% 82%, var(--coral) 0%, rgba(245,118,90,0) 80%)} /* LAGOON — Teal · crystal · lilac Calm · trackers at rest · the Naturalist */ .f-lagoon{background:var(--teal)} .f-lagoon::before{background: radial-gradient(102% 92% at 16% 20%, var(--teal) 0%, rgba(43,184,168,0) 86%), radial-gradient(90% 82% at 84% 30%, var(--crystal) 0%, rgba(79,195,232,0) 82%), radial-gradient(94% 84% at 54% 92%, var(--lilac) 0%, rgba(222,143,245,0) 84%), radial-gradient(70% 64% at 96% 84%, var(--crystal) 0%, rgba(79,195,232,0) 78%)} /* BLOOM — Hot pink · magenta · lilac · coral Joy · the Free Spirit · celebration */ .f-bloom{background:var(--hotpink)} .f-bloom::before{background: radial-gradient(96% 88% at 22% 18%, var(--hotpink) 0%, rgba(240,56,155,0) 84%), radial-gradient(90% 82% at 80% 26%, var(--magenta) 0%, rgba(226,63,208,0) 82%), radial-gradient(98% 88% at 56% 90%, var(--coral) 0%, rgba(245,118,90,0) 84%), radial-gradient(72% 66% at 8% 74%, var(--lilac) 0%, rgba(222,143,245,0) 78%)} /* DUSK — Violet · coral · amber · magenta Transition · the Dreamer · the hour before sleep */ .f-dusk{background:var(--violet)} .f-dusk::before{background: radial-gradient(100% 90% at 78% 14%, var(--violet) 0%, rgba(169,106,240,0) 86%), radial-gradient(92% 84% at 14% 34%, var(--magenta) 0%, rgba(226,63,208,0) 84%), radial-gradient(96% 86% at 62% 88%, var(--coral) 0%, rgba(245,118,90,0) 84%), radial-gradient(74% 68% at 92% 66%, var(--amber) 0%, rgba(255,162,46,0) 78%)} /* ══ THE TWO GLASS VARIANTS · LOCKED ═══════════════════════════════════════ From studio-l1-brand-system-VISUAL.html §05, "the two signature effects". Recorded 8 Sept 2026 because the site had ONE glass, and the wrong one. WHY THERE ARE TWO, and it is not a preference: `backdrop-filter` blurs only what is BEHIND an element. Over a photograph there is detail to refract and it reads as ice. Over a FLAT PALE GROUND there is nothing to refract — so the frost has to be PAINTED into the background instead. Most Studio L1 site sections are flat pale grounds, which is why glass built as Variant A reads as a faintly tinted box there. AND THE TRAP: never "fix" a flat-ground panel by raising saturate(). There is no colour behind it to multiply. Above 100% only amplifies beige into amber — the exact failure the brand prohibits. Variant A goes BELOW 100% precisely to neutralise a warm photograph. */ /* VARIANT A — over an image or a photograph. White text. */ .glass-a{border-radius:22px;position:relative; background:linear-gradient(150deg,rgba(255,255,255,.34) 0%,rgba(250,251,254,.24) 42%, rgba(250,251,254,.26) 68%,rgba(255,255,255,.34) 100%); -webkit-backdrop-filter:blur(48px) saturate(40%) brightness(1.06); backdrop-filter:blur(48px) saturate(40%) brightness(1.06); border:1px solid rgba(255,255,255,.70); box-shadow:inset 0 1px 0 rgba(255,255,255,.98), inset 0 0 70px rgba(255,255,255,.42), 0 30px 74px -30px rgba(38,36,35,.32)} .glass-a .e{font-family:var(--caps);font-size:9px;letter-spacing:.3em;text-transform:uppercase; color:rgba(255,255,255,.95);text-shadow:0 1px 6px rgba(38,36,35,.4);margin-bottom:.5rem} .glass-a .t{font-family:var(--disp);color:#fff;line-height:1.25; text-shadow:0 1px 16px rgba(38,36,35,.55)} /* VARIANT B — over a flat pale ground. THE DEFAULT ON THIS SITE. The frost is painted: two radial tints layered INTO the background — champagne top-right, crystal bottom-left — then six shadow layers that build the lit edge. This is what makes it read as a pane rather than a translucent rectangle, and it is what the site was missing. */ .glass,.card.glass,.glass-b{border-radius:22px;position:relative;overflow:hidden; background: linear-gradient(150deg,rgba(255,255,255,.62) 0%,rgba(247,244,239,.46) 38%, rgba(242,238,231,.48) 64%,rgba(255,255,255,.60) 100%), radial-gradient(120% 80% at 88% 4%,rgba(232,215,173,.34),transparent 62%), radial-gradient(100% 70% at 6% 96%,rgba(197,220,235,.28),transparent 66%); -webkit-backdrop-filter:blur(40px) saturate(160%); backdrop-filter:blur(40px) saturate(160%); border:1px solid rgba(255,255,255,.95); box-shadow: inset 0 0 0 1px rgba(255,255,255,1), inset 0 0 34px rgba(255,255,255,.95), inset 0 2px 0 rgba(255,255,255,1), 0 0 0 1px rgba(255,255,255,.55), 0 0 26px rgba(255,255,255,.75), 0 30px 70px -34px rgba(38,36,35,.30)} .glass > *,.glass-b > *{position:relative;z-index:1} .glass p,.glass-b p{color:var(--read)} /* ══ THE MATERIAL PANEL · added 8 Sept 2026 ════════════════════════════════ The taupe-to-bronze gradient from the Visual Reference §05, with Variant A glass sitting on it. Lisete: "I'd like to use this kind of golden background somewhere with this exact style glass block on it." WHY THIS IS NOT "EXCESSIVE BEIGE LUXURY", which is the standing prohibition: the prohibition is on a flat warm FILL sitting behind text — colour applied as pigment. This is the opposite construction. It is a ground standing in for MATERIAL — stone, plaster, oiled timber — and it is only ever read THROUGH glass at saturate(40%), which is below 100 and therefore actively NEUTRALISES the warmth rather than amplifying it. Warm arrives as a surface being lit, not as a colour being applied. THE THREE CONDITIONS. All three, or it becomes the failure: 1. It ALWAYS carries a glass-a caption. A bare material panel is beige. 2. saturate() stays BELOW 100. Raising it amplifies beige into amber. 3. No body text sits directly on it. Only the caption, inside the glass. WHERE IT BELONGS. This is R4 Home Rituals — ritual content, the Journal, everyday wellbeing. It is also the correct treatment for an image zone BEFORE the photograph exists: a material ground with a real caption reads as a composed panel, where an empty bordered rectangle reads as a gap. */ .material{position:relative;width:100%;aspect-ratio:16/10;overflow:hidden; background:linear-gradient(140deg,#D8CDBC 0%,#B9A98F 45%,#8E8271 100%); border:1px solid rgba(255,255,255,.42); box-shadow:0 0 0 5px rgba(252,252,251,.32), 0 16px 40px -34px rgba(120,110,95,.30); display:flex;align-items:flex-end;padding:1.4rem} .material.tall{aspect-ratio:4/5} .material.wide{aspect-ratio:21/9} /* a real photograph drops in and replaces the gradient — nothing else changes */ .material img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .material > *{position:relative;z-index:1} /* VARIANT A glass — over an image or a material ground. White text. saturate BELOW 100: that is what neutralises the warm ground. */ .glass-a{border-radius:22px;padding:1.1rem 1.3rem;max-width:280px; background:linear-gradient(150deg,rgba(255,255,255,.34) 0%,rgba(250,251,254,.24) 42%, rgba(250,251,254,.26) 68%,rgba(255,255,255,.34) 100%); -webkit-backdrop-filter:blur(48px) saturate(40%) brightness(1.06); backdrop-filter:blur(48px) saturate(40%) brightness(1.06); border:1px solid rgba(255,255,255,.70); box-shadow:inset 0 1px 0 rgba(255,255,255,.98), inset 0 0 70px rgba(255,255,255,.42), 0 30px 74px -30px rgba(38,36,35,.32)} .glass-a .e{font-family:var(--caps);font-size:9px;letter-spacing:.3em; text-transform:uppercase;color:rgba(255,255,255,.95); text-shadow:0 1px 6px rgba(38,36,35,.4);margin-bottom:.5rem;display:block} .glass-a .t{font-family:var(--disp);font-weight:400;font-size:1.1rem;color:#fff; line-height:1.25;text-shadow:0 1px 16px rgba(38,36,35,.55)} /* ══ THE MATERIAL BAND · 8 Sept 2026 ═══════════════════════════════════════ The gold from the Visual Reference §05, EXACTLY as it is there: linear-gradient(140deg, #D8CDBC, #B9A98F 45%, #8E8271). THE RULE THAT MAKES IT WORK — and it is the construction, not a detail. MEASURED: white fails as body text everywhere on this ramp — 1.57:1 at the light end, 2.30:1 at the midpoint, 3.76:1 at the deep end, against a 4.5 requirement. Earlier attempts "fixed" that by darkening the gold, which turned it taupe and lost the thing that made it good. The reference never had that problem, because NOTHING IS SET ON THE GROUND. The only text on that panel lives INSIDE the glass, white with a shadow. The gold is a surface; the glass is where language happens. So: no headline, no body copy, no eyebrow directly on the band. Everything goes in a glass block. If a section needs text on the ground, it is a graphite band, not a material one. Graphite ink #262422 IS legal directly on the ramp (4.11:1 at the deep end, 9.85:1 at the light) — use it for a short caption if glass would be wrong. NO GRAIN. Ruled 8 Sept: "only dark graphite should be structured as luxury paper." Grain makes graphite read as matte stock and is reserved to it. On gold the same tile reads as dust and takes the light out of a surface whose whole job is to be lit. Graphite is PAPER; this is a LIT SURFACE. */ .band-material{position:relative;padding:0;overflow:hidden; background:linear-gradient(140deg,#D8CDBC 0%,#B9A98F 45%,#8E8271 100%)} /* The gradient is painted on a ::before layer at z-index 0, not on the element. A child with backdrop-filter inside a parent that has isolation:isolate and overflow:hidden can lose the parent's own background in some engines — the glass block was doing exactly that. Every other ground on this site (.field, .stock) already uses the ::before pattern for the same reason. The solid #B9A98F fallback means the band can never render white even if the layer fails. */ /* NO STACKING CONTEXT BETWEEN THE GROUND AND THE GLASS. An element with backdrop-filter samples only what is painted inside its BACKDROP ROOT. Giving the wrapper position:relative + z-index makes that wrapper the backdrop root, so the glass sampled an empty box and rendered as flat pale nothing — the gold was painting correctly the whole time, one layer further out than the glass could see. .material works because its glass is a DIRECT child of the ground with no positioned wrapper in between. The band must do the same. Do not add position/z-index/transform/filter/opacity to .wrap or .band-inner. Any of them re-creates the bug. */ .band-material h2,.band-material h3,.band-material .display{color:var(--ink)} .band-material h2 em{font-style:normal;color:#4A3F1E} .band-material .kicker,.band-material .eyebrow{color:#5C4E22} .band-material .lede,.band-material .copy,.band-material p{color:#3A342B} .band-material .hair,.band-material hr{background:rgba(38,36,34,.28)} .band-material .btn{background:var(--ink);color:var(--paper)} .band-material .btn:hover{background:#3A3734} /* GLASS ON GOLD — warm golden light, not white frost. Ruled 8 Sept: "the glass block more warm golden light." The frost is lit rather than tinted: a champagne core, a warmer highlight running top-left to bottom-right, and the inner glow carried in gold instead of white. saturate STAYS at 40% — below 100 is what stops the warm ground amplifying into amber, and raising it is the exact failure. */ .band-material .glass-a,.glass-a.gold{ /* Removing the declaration is not enough — the base .glass-a rule still sets backdrop-filter, and this override has higher specificity only for the properties it declares. It must be switched OFF explicitly. */ -webkit-backdrop-filter:none!important; backdrop-filter:none!important; /* NO backdrop-filter ON THIS BLOCK — 8 Sept 2026. Four passes were spent trying to make backdrop-filter sample the gold behind it. It would not, in this nesting, and the block kept rendering as flat pale nothing. The dependency is removed rather than debugged further: the frost is PAINTED with translucent champagne, so the gold shows through by plain alpha compositing, which cannot fail in any engine or nesting. This is the Variant B principle applied on a gold ground — "over a flat ground there is nothing to refract, so the frost must be painted instead." A material ground is not a photograph; it has no detail to refract either. Keep the border, the inset highlight and the drop shadow: those are what read as glass. The blur was never doing the work here. */ background: linear-gradient(150deg,rgba(255,250,238,.30) 0%,rgba(252,244,226,.16) 40%, rgba(252,244,226,.18) 66%,rgba(255,250,238,.32) 100%); border:1px solid rgba(255,248,230,.62); box-shadow:inset 0 1px 0 rgba(255,252,244,.90), inset 0 0 60px rgba(255,248,228,.28), 0 0 24px rgba(255,246,222,.30), 0 30px 74px -30px rgba(80,66,38,.34)} .band-material .glass-a .e{color:#FFF6E0;text-shadow:0 1px 8px rgba(60,48,24,.55)} .band-material .glass-a .t{color:#FFFDF7;text-shadow:0 1px 18px rgba(60,48,24,.6)} .band-material .glass-a p{color:rgba(255,252,244,.94); text-shadow:0 1px 14px rgba(60,48,24,.55)} /* THE GOLD MUST DOMINATE. A glass block is an OBJECT sitting on a surface — at most about a third of the band's width, set to one side, with the gold running clear around it. Filling the band with glass leaves the gold showing only in the gutters, and the section reads white. That is what happened on the first attempt: two glass cells wall-to-wall, and the surface vanished. */ .band-inner{min-height:520px;display:flex;align-items:flex-end; padding:3.4rem 0 3.4rem} .band-material .glass-a{max-width:520px;padding:2.6rem 2.8rem} .band-material .glass-a .t{font-family:var(--disp);font-weight:400; font-size:clamp(1.28rem,2vw,1.62rem);line-height:1.2;display:block;margin-top:.7rem} .band-material .glass-a p{font-size:.96rem;line-height:1.7;margin-top:.9rem} .band-material .glass-a .btn{margin-top:1.8rem;background:#FFF9EC;color:#3A2F14} .band-material .glass-a .btn:hover{background:#FFFDF6} @media(max-width:820px){.band-inner{min-height:400px} .band-material .glass-a{max-width:none}} /* PANE ON THE DEEP SIDE — 8 Sept 2026. The gradient runs light at top-left to deep at bottom-right, so the pane goes bottom-RIGHT: white text needs the darkest part of the ground under it. Measured through the frost: 2.61:1 on the deep end against 1.41:1 on the light end — still short of a formal 4.5, which is why the text carries a shadow and why nothing here is body copy. Move the pane left and the text loses almost half its contrast. GOLD IS PLAIN, NOT FROSTED. The eyebrow and the button take solid brand gold: inside a translucent pane a tinted gold has nothing to sit on and reads as a stain. Ink on #C9AC68 clears 7.06:1. */ .band-inner{justify-content:flex-end} /* The eyebrow goes back to WHITE. Gold at 9px on a translucent pane measured 2.03:1 — invisible. Gold is for the BUTTON, which is a solid field with ink on it at 7.06:1. Small type on glass has no field of its own, so it takes white and a shadow, like every other word in the pane. Size decides the colour here, not brand. */ .band-material .glass-a .e{color:#FFFDF7;font-weight:400;letter-spacing:.3em; text-shadow:0 1px 8px rgba(60,48,24,.6)} .band-material .glass-a .btn{background:var(--gold-hi,#C9AC68);color:#262422; border-radius:14px;box-shadow:0 12px 30px -18px rgba(60,48,24,.55)} .band-material .glass-a .btn:hover{background:#D8BE7C} @media(max-width:820px){.band-inner{justify-content:flex-start}} /* ══ EMAIL CAPTURE · added 8 Sept 2026 ═════════════════════════════════════ THE CONSENT ARCHITECTURE IS THE POINT, not the styling. Two lists, two lawful bases, and they must never be merged: · RESULTS — transactional. Someone asked for a thing; sending it is contract performance and needs NO tick box. · NURTURE — marketing. Its own checkbox, UNTICKED by default, never pre-selected, never bundled with the first. Bundling them makes the marketing consent invalid under GDPR and the whole list legally unusable. It is also the single easiest thing to break by "simplifying" the form later. Do not. Australian buyers are covered by the SPAM Act 2003 via the Australian link test — consent, identification and a working unsubscribe in every send. Email is the identity key from day one, so signups migrate to a database later with their history intact. */ .capture{position:relative} .capture .box{max-width:560px;margin:0 auto;padding:3rem 2.8rem;text-align:center} .capture h2{margin-bottom:.9rem} .capture .lede{margin:0 auto;text-align:center} .cform{display:flex;flex-direction:column;gap:.9rem;max-width:400px;margin:2.2rem auto 0} .cform input[type=email],.cform input[type=text]{ font-family:var(--sans);font-size:14px;padding:14px 16px;border-radius:0; border:1px solid var(--hair);background:rgba(255,255,255,.72);color:var(--ink)} .cform input:focus{outline:0;border-color:var(--gold-ink); box-shadow:0 0 0 3px rgba(200,245,144,.35)} /* lime focus ring — accent use */ .cform .consent{display:flex;gap:.7rem;align-items:flex-start;text-align:left; font-family:var(--sans);font-size:12.5px;line-height:1.6;color:var(--read); margin-top:.3rem} .cform .consent input{width:16px;height:16px;flex:none;margin-top:2px; accent-color:var(--gold-ink)} .cform .fine{font-family:var(--sans);font-size:11.5px;line-height:1.6; color:var(--faint);text-align:left;margin-top:.2rem} .cform .fine a{color:var(--gold-ink);border-bottom:1px solid rgba(142,122,69,.4)} .cform button{margin-top:.4rem;cursor:pointer;border:0} /* start.html — the assessment entry */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px; background:var(--hair);border:1px solid var(--hair)} @media(max-width:820px){.steps{grid-template-columns:1fr}} .steps .s{background:var(--paper);padding:2.4rem 2rem} .steps .n{font-family:var(--fig);font-size:1.6rem;color:var(--gold-display); display:block;margin-bottom:.8rem} .steps h3{margin-bottom:.6rem} .steps p{font-size:.97rem;line-height:1.72;color:var(--read)} .begin{margin-top:3rem} .begin .btn{font-size:12px;padding:20px 44px} .begin .meta{font-family:var(--sans);font-size:12px;letter-spacing:.02em; color:var(--faint);margin-top:1.4rem} /* the six ritual corners — three across, hairline gaps */ .sixc{display:grid;grid-template-columns:repeat(3,1fr);gap:1px; background:var(--hair);border:1px solid var(--hair);margin-top:3rem} @media(max-width:880px){.sixc{grid-template-columns:repeat(2,1fr)}} @media(max-width:600px){.sixc{grid-template-columns:1fr}} .sixc .c{background:var(--paper);padding:2rem 1.8rem} .sixc h3{font-family:var(--quiet);font-weight:600;font-size:1.2rem;margin-bottom:.5rem} .sixc p{font-size:.95rem;line-height:1.7;color:var(--read);margin:0}