/* ============================================================
O'LELESHWA — production design system
Direction B: "Evening on the Escarpment"
Dark ground, fire and lamplight; long reading on cream plates.
This file is the single shared stylesheet for every page.
Pages link it with:
Component usage rules: see docs/components.md
============================================================ */
/* ------------------------------------------------------------
1. FONTS (exactly two faces — Source Serif 4 + Inter)
------------------------------------------------------------ */
@font-face {
font-family: 'Source Serif 4';
src: url('fonts/SourceSerif4-sub.ttf') format('truetype-variations');
font-weight: 200 900; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'Source Serif 4';
src: url('fonts/SourceSerif4-Italic-sub.ttf') format('truetype-variations');
font-weight: 200 900; font-style: italic; font-display: swap;
}
@font-face {
font-family: 'Inter';
src: url('fonts/Inter-sub.ttf') format('truetype-variations');
font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'Inter';
src: url('fonts/Inter-Italic-sub.ttf') format('truetype-variations');
font-weight: 100 900; font-style: italic; font-display: swap;
}
/* ------------------------------------------------------------
2. TOKENS
------------------------------------------------------------ */
:root {
/* -- color -- */
--night: #131A0E; /* dominant dark ground */
--night-deep: #0C1108; /* footer / deepest band */
--cream: #EFE8D5; /* reading plates */
--ink: #232014; /* ink on cream (warm near-black) */
--ink-soft: rgba(35, 32, 20, 0.72); /* captions/secondary on cream */
--dust: #C8B48A; /* rift-dust: micro-labels on dark */
--cream-ink: #EFE8D5; /* ink on dark */
--cream-dim: rgba(239, 232, 213, 0.74); /* secondary text on dark */
--cream-faint: rgba(239, 232, 213, 0.5); /* captions on dark */
--hairline-dark: rgba(200, 180, 138, 0.22); /* rules on dark */
--hairline-cream: rgba(35, 32, 20, 0.16); /* rules on cream */
--label-cream: #6E6444; /* micro-labels on cream */
/* -- type -- */
--serif: 'Source Serif 4', Georgia, serif;
--sans: 'Inter', system-ui, sans-serif;
--fz-micro: 11px; /* micro-label */
--fz-caption: 12px; /* caption */
--fz-body: 17.5px; /* body (root) */
--fz-body-sm: 1.03rem; /* short dark-ground prose */
--fz-head: clamp(1.7rem, 2.7vw, 2.35rem); /* section head on cream */
--fz-duet-head: clamp(1.9rem, 3.4vw, 2.8rem); /* head in a duet band */
--fz-dark-head: clamp(2.1rem, 4vw, 3.4rem); /* big head on dark */
--fz-display: clamp(2.9rem, 6vw, 5rem); /* h1 in the hero */
--fz-line: clamp(1.6rem, 3.1vw, 2.5rem); /* inscription line */
--fz-line-close: clamp(1.5rem, 2.8vw, 2.2rem); /* closing doorway line */
--fz-line-quiet: clamp(1.35rem, 2.4vw, 1.9rem); /* quieter closing line */
/* -- layout -- */
--axis: clamp(1.25rem, 7vw, 8.5rem); /* the one left axis */
--axis-r: clamp(1.25rem, 5vw, 5rem); /* right margin */
--marg-w: 10.5rem; /* margin column (labels/captions) */
--marg-gap: 4rem; /* gap between margin + content */
--content-w: 37rem; /* reading column (~65ch) */
--fig-w: 47rem; /* in-plate figure column */
--wide-w: 76rem; /* widest content (cards, footer) */
/* -- space -- */
--sp-band: clamp(4.5rem, 10vh, 7.5rem); /* dark band vertical padding */
--sp-plate-t: clamp(4rem, 9vh, 7rem); /* cream plate top padding */
--sp-plate-b: clamp(4.5rem, 9vh, 7rem); /* cream plate bottom padding */
--sp-row: clamp(3rem, 6vh, 4.5rem); /* between blocks in a plate */
--sp-fig: clamp(2.5rem, 6vh, 4rem); /* above in-plate figures */
--sp-close: clamp(5.5rem, 12vh, 8.5rem); /* closing doorway padding */
}
/* ------------------------------------------------------------
3. BASE
------------------------------------------------------------ */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
background: var(--night);
color: var(--cream-ink);
font-family: var(--serif);
font-size: var(--fz-body);
line-height: 1.7;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
a:hover { opacity: 0.75; }
::selection { background: var(--dust); color: var(--night); }
/* ------------------------------------------------------------
4. TYPE ROLES (five only: display / head / body / caption / micro)
------------------------------------------------------------ */
.micro {
font-family: var(--sans);
font-size: var(--fz-micro); font-weight: 500;
letter-spacing: 0.2em; text-transform: uppercase;
color: var(--dust);
}
.plate .micro { color: var(--label-cream); }
.caption {
font-family: var(--sans);
font-size: var(--fz-caption); font-weight: 400;
letter-spacing: 0.015em; line-height: 1.6;
color: var(--cream-faint);
}
.plate .caption { color: var(--ink-soft); }
.textlink {
font-family: var(--sans); font-size: var(--fz-micro); font-weight: 500;
letter-spacing: 0.15em; text-transform: uppercase;
color: var(--dust); border-bottom: 1px solid var(--hairline-dark);
padding-bottom: 3px;
}
.plate .textlink { color: var(--ink); border-bottom-color: var(--hairline-cream); }
.textlink-row { margin-top: 2.2rem; }
/* ------------------------------------------------------------
5. SKIP LINK
Skip to main content
------------------------------------------------------------ */
.skip-link {
position: fixed; top: -4rem; left: 0; z-index: 100;
background: var(--cream); color: var(--ink);
font-family: var(--sans); font-size: 0.8125rem; letter-spacing: 0.06em;
padding: 0.7rem 1.2rem; transition: top 0.15s ease;
}
.skip-link:focus { top: 0; }
/* ------------------------------------------------------------
6. HEADER + NAV (chrome). Sits over the hero.
Active page: aria-current="page" on the nav link.
Mobile menu: