@font-face{ font-family:"Allura"; src:url("/fonts/allura-400.woff2") format("woff2");
font-weight:400; font-style:normal; font-display:swap; }
/* ============================================================
SOPHIE ABIGAIL STUDIOS — DESIGN TOKENS
Single source of truth. Never hard-code values; use these.
Pair: Cormorant Garamond (display) + Brown (body/UI).
============================================================ */
/* ---------- FONTS ----------
Body/UI: Brown (self-hosted). Convert the supplied .otf files to
.woff2 and drop them in /fonts. (fonttools, or any otf->woff2 tool.)
Display: Cormorant Garamond via Google Fonts — add to :
-------------------------------------------------------------- */
@font-face{ font-family:"Brown"; src:url("/fonts/Brown-Light.woff2") format("woff2"); font-weight:300; font-style:normal; font-display:swap; }
@font-face{ font-family:"Brown"; src:url("/fonts/Brown-Regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"Brown"; src:url("/fonts/Brown-Italic.woff2") format("woff2"); font-weight:400; font-style:italic; font-display:swap; }
@font-face{ font-family:"Brown"; src:url("/fonts/Brown-Bold.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
:root{
/* ---------- COLOUR · base & ink (used widely) ---------- */
--c-white:#FFFFFF; /* primary background */
--c-sand:#DCD0C4; /* warm alternate background */
--c-ink:#1D1D1B; /* text + primary buttons */
--c-ink-muted:#57514A; /* secondary text — SOLID warm grey (was rgba .62; translucent let the plaster texture bleed through the glyphs and dropped contrast). Solid + darker = legible on white AND texture. */
--c-line:rgba(29,29,27,.14); /* hairline borders */
/* ---------- COLOUR · accents (used sparingly) ---------- */
--c-sage:#B2B8AA; /* soft section tint */
--c-clay:#BB9F89; /* soft section tint */
--c-gold:#D6B588; /* fine details, underlines, stars */
/* ---------- SEMANTIC ROLES (reference these) ---------- */
--bg:var(--c-white);
--bg-warm:var(--c-sand);
--text:var(--c-ink);
--text-soft:var(--c-ink-muted);
--border:var(--c-line);
--cta-bg:var(--c-ink);
--cta-text:var(--c-white);
/* ---------- TYPE families ---------- */
--font-display:"Cormorant Garamond", Georgia, serif; /* big headings only */
--font-body:"Brown", system-ui, -apple-system, sans-serif; /* everything else */
/* ---------- TYPE scale (fluid) ---------- */
--fs-display:clamp(2.5rem, 5.5vw, 4.25rem); /* hero H1 */
--fs-h2:clamp(1.9rem, 3.5vw, 2.85rem); /* section headings */
--fs-h3:clamp(1.25rem, 2vw, 1.6rem); /* sub-headings */
--fs-body:clamp(1.125rem, 1.2vw, 1.1875rem); /* paragraphs — 18px floor (was 16px, too small), up to 19px on wide screens */
--fs-small:0.8125rem; /* captions */
--fs-eyebrow:0.72rem; /* tracked labels */
--lh-tight:1.12; /* headings */
--lh-body:1.6; /* paragraphs */
--measure:68ch; /* max reading width */
/* ---------- SPACING scale (linear: sp-N = N × 0.25rem) ---------- */
--sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.25rem;
--sp-6:1.5rem; --sp-8:2rem; --sp-10:2.5rem; --sp-12:3rem; --sp-16:4rem;
--sp-24:6rem; --sp-32:8rem;
--section-y:clamp(4rem, 9vw, 8.5rem); /* section top/bottom */
--container-max:1340px; /* tightened from 1600 — content sits in a more centred column, not edge-to-edge */
--gutter:clamp(1.5rem, 5.5vw, 6.5rem); /* single site-wide side margin — wider than before for calmer, less edge-heavy layout */
/* ---------- RADIUS ---------- */
--r-sm:6px; --r-md:12px; --r-lg:20px;
/* ---------- MOTION ---------- */
--ease:cubic-bezier(.22,.61,.36,1);
--dur:.4s;
}
/* ==================== BASE ==================== */
html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body{
font-family:var(--font-body); font-weight:400;
font-size:var(--fs-body); line-height:var(--lh-body);
color:var(--text); background:var(--bg);
}
h1,h2,.display{
font-family:var(--font-display); font-weight:500;
line-height:var(--lh-tight); letter-spacing:.005em;
}
h1,.display{ font-size:var(--fs-display); }
h2{ font-size:var(--fs-h2); }
h3{ font-family:var(--font-display); font-weight:600; font-size:var(--fs-h3); line-height:1.2; }
p{ max-width:var(--measure); }
/* eyebrow / label — tracked Brown caps (nav, section labels) */
.eyebrow{
font-family:var(--font-body); font-weight:700; font-size:var(--fs-eyebrow);
text-transform:uppercase; letter-spacing:.16em; color:var(--text-soft);
}
/* ==================== LAYOUT ==================== */
/* Full-width to a single side gutter so edge-aligned content lines up site-wide, with an ultra-wide
safety cap: past --container-max the content centres instead of spreading to the screen edges
(which left a big empty gap between the hero's left text and right-hand image on large monitors).
Per-element max-width still controls line length within this. */
.container{ width:100%; max-width:var(--container-max); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--section-y); }
.section--sand{ background:var(--bg-warm); } /* alternate white / sand down the page */
/* Text over the plaster TEXTURE goes full ink — the muted grey loses legibility on the busy ground.
Redefining the token cascades to every element using var(--text-soft) inside these sections;
plain white sections keep the soft grey for hierarchy. (Dark cards use their own light colours, unaffected.) */
.hero, .phero, .section--plaster, .statement{ --text-soft:var(--c-ink); }
/* ==================== BUTTONS ==================== */
.btn{
display:inline-flex; align-items:center; justify-content:center;
font-family:var(--font-body); font-weight:400; font-size:1rem; letter-spacing:.02em;
padding:.85rem 1.6rem; border-radius:var(--r-sm); text-decoration:none;
cursor:pointer; transition:all var(--dur) var(--ease);
}
.btn--primary{ background:var(--cta-bg); color:var(--cta-text); border:1px solid var(--cta-bg); }
.btn--primary:hover{ background:transparent; color:var(--cta-bg); }
.btn--ghost{ background:transparent; color:var(--text); border:1px solid var(--text); }
.btn--on-photo{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.85); } /* secondary over images */
/* text link — gold underline on hover */
.link{ color:var(--text); text-decoration:none; border-bottom:1px solid var(--text); padding-bottom:1px; transition:border-color var(--dur) var(--ease); }
.link:hover{ border-color:var(--c-gold); }
/* ==================== BRAND DEVICE · ARCH IMAGE MASK ==================== */
/* Mask the key photos (hero, Sophie, studio) into the arch motif.
Raise/lower the second radius value to make the arch taller/shorter. */
.arch{ border-radius:50% 50% 0 0 / 35% 35% 0 0; overflow:hidden; }
/* ==================== BRAND DEVICE · PLASTER TEXTURE ==================== */
/* Use sparingly — see STYLE.md placement rules. Files live in /textures. */
.texture-soft{ background:url("/textures/texture-plaster.webp") center/cover no-repeat; } /* under text */
.texture-full{ background:url("/textures/texture-plaster.webp") center/cover no-repeat; } /* image backdrops */