/* ============================================================
MELA CINEMATIC-PARCHMENT v1
Parchment register, Westworld motion grammar.
Mechanical eases, long holds, scene-based composition.
============================================================ */
/* Fonts are loaded via parallel tags (with preconnect) in each page's
— NOT @import'd here. An @import inside this render-blocking file
serializes the chain HTML -> this CSS -> font CSS -> font files; the
form lets the font CSS download alongside this file. Every page that links
design-system.css must carry the font block. */
:root {
/* Type families */
--font-display: 'Fraunces', 'GT Sectra', 'Iowan Old Style', Georgia, serif;
--font-body: 'Inter', -apple-system, system-ui, sans-serif;
--font-mono: 'JetBrains Mono', Consolas, monospace;
/* Parchment palette (from constitution) */
--parchment: #F5EFE6;
--parchment-deep: #EBE2D4;
--parchment-light: #FAF6EF;
--parchment-dark: #DDD3C2;
--parchment-ink: #D4C6AC; /* For deeper inset shadows */
--deep-bark: #2A211C;
--bark: #3D3329;
--bark-soft: #5A4D40;
--bark-quiet: #8B7E6F;
--bark-whisper: #B8AC9B;
--sage: #6B7B5E;
--sage-light: #8B9A7E;
--gold: #B8923D;
--gold-soft: #C9A659;
--gold-glow: #E0BF7E;
--gold-pure: #D9B569; /* The pure illumination color */
--gold-ink: #7E6223; /* AA-dark gold — body text + links (WCAG AA on parchment) */
--label-ink: #6F6456; /* AA-quiet ink — mono labels (text twin of bark-quiet) */
--coral: #C45D43;
--coral-soft: #D17B65;
/* Facelift (Oura craft spec) — softer warm-gray prose inks + the site's
two shadows + one hairline. Display ink stays --deep-bark; prose wears
--ink-body so the page never hammers. */
--ink-body: #4A4035; /* all prose · ~8.9:1 on parchment */
--ink-soft: #5A5046; /* deks, captions · ~6.9:1 */
--hairline: rgba(33, 21, 15, 0.10);
--ease-micro: cubic-bezier(0.4, 0, 0.2, 1);
--shadow-rest: 0 1px 2px rgba(33,21,15,.05), 0 8px 24px -12px rgba(33,21,15,.10);
--shadow-float: 0 4px 16px rgba(74,53,38,.06), 0 24px 64px -8px rgba(74,53,38,.14);
/* Facelift v2 — luminance-movement: canvas tiers + a dark folio dip, plus the
closed radius scale. Light moves down the page even with no photography. */
--canvas-hi: var(--parchment-light);
--canvas: var(--parchment);
--canvas-deep: var(--parchment-deep);
--folio: #1A130D;
--ink-on-dark: #EFE6DA;
--r-tick: 2px; --r-chip: 12px; --r-card: 20px; --r-surface: 28px; --r-pill: 999px;
/* Spacing: 8pt grid */
--space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px;
--space-5: 40px; --space-6: 48px; --space-7: 56px; --space-8: 64px;
--space-10: 80px; --space-12: 96px; --space-16: 128px; --space-20: 160px;
--space-24: 192px; --space-32: 256px;
/* Type scale */
--text-xxs: 0.625rem; --text-xs: 0.75rem; --text-sm: 0.875rem;
--text-base: 1.0625rem; --text-lg: 1.1875rem; --text-xl: 1.375rem;
--text-2xl: 1.75rem; --text-3xl: 2.25rem; --text-4xl: 3rem;
--text-5xl: 4rem; --text-6xl: 5.5rem; --text-7xl: 7rem;
--text-8xl: 9rem; --text-9xl: 11rem;
/* Westworld-style mechanical ease curves */
--ease-mechanical: cubic-bezier(0.83, 0, 0.17, 1); /* hard start, hard end */
--ease-carve: cubic-bezier(0.16, 1, 0.3, 1); /* slow settle */
--ease-deliberate: cubic-bezier(0.65, 0, 0.35, 1); /* even, weighted */
--ease-reveal: cubic-bezier(0.22, 1, 0.36, 1); /* slow late settle */
/* Long timing */
--duration-quick: 600ms;
--duration-base: 1200ms;
--duration-slow: 2400ms;
--duration-cinematic: 4000ms;
--duration-hold: 6000ms;
}
/* ----- Reset ----- */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
scroll-behavior: smooth;
}
body {
margin: 0;
font-family: var(--font-body);
font-size: var(--text-base);
line-height: 1.6;
letter-spacing: -0.011em;
color: var(--ink-body);
background: var(--parchment);
font-feature-settings: 'kern', 'liga', 'calt';
overflow-x: hidden;
}
/* Visible keyboard-focus ring (a11y) — keyboard nav only; does not affect mouse clicks */
:focus-visible {
outline: 2px solid var(--gold-ink);
outline-offset: 2px;
border-radius: 2px;
}
/* ----- Atmospheric layers ----- */
/* Base parchment gradient — slightly darker at edges for vignette feel */
body::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 1;
background:
radial-gradient(ellipse 70% 50% at 50% 50%, transparent 0%, rgba(221, 211, 194, 0.4) 100%);
}
/* Paper grain */
body::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 2;
opacity: 0.045;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' /%3E%3C/svg%3E");
mix-blend-mode: multiply;
}
main, header, footer, nav, section { position: relative; z-index: 3; }
/* ----- Typography utilities ----- */
.display { font-family: var(--font-display); }
.body { font-family: var(--font-body); }
.mono { font-family: var(--font-mono); font-feature-settings: 'tnum'; }
h1, h2, h3, h4 {
font-family: var(--font-display);
font-weight: 320;
letter-spacing: -0.04em;
color: var(--deep-bark);
margin: 0;
line-height: 1.05;
font-variation-settings: 'opsz' 144;
}
.label-mono {
font-family: var(--font-mono);
font-size: var(--text-xxs);
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--label-ink);
font-weight: 400;
}
/* ----- Facelift v2 — light movement + the one floating object ----- */
/* Hero overhead wash — the studio-sky substitute (no photography needed). */
.hero-light::before {
content: ''; position: absolute; inset: -80px 0 35% 0; pointer-events: none; z-index: 0;
background: radial-gradient(120% 72% at 50% -8%, rgba(255, 253, 248, 0.92), transparent 60%);
}
.hero-light > * { position: relative; z-index: 1; }
/* Canvas tiers — alternate light gently down the page. */
.section--hi { background: var(--canvas-hi); }
.section--deep { background: var(--canvas-deep); }
/* Folio — the luminance dip: one dark section per long page. Emitted light
(inset top edge), never a drop shadow. Text flips to the on-dark register. */
.section--folio {
background: var(--folio);
color: var(--ink-on-dark);
box-shadow: inset 0 1px 0 rgba(239, 230, 218, 0.07);
}
.section--folio h1, .section--folio h2, .section--folio h3, .section--folio h4 { color: var(--ink-on-dark); }
.section--folio p { color: #B7A78F; }
.section--folio .label-mono { color: #9C8A6F; }
/* The one floating object per page (depth without a border). */
.float { box-shadow: var(--shadow-float); }
/* ----- Site header — fixed, minimal ----- */
.site-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
padding: var(--space-3) var(--space-6);
display: flex;
justify-content: space-between;
align-items: center;
background: rgba(245, 239, 230, 0.72);
backdrop-filter: saturate(160%) blur(12px);
-webkit-backdrop-filter: saturate(160%) blur(12px);
border-bottom: 1px solid var(--hairline);
}
.brand {
font-family: var(--font-display);
font-size: var(--text-2xl);
letter-spacing: -0.04em;
color: var(--deep-bark);
text-decoration: none;
font-weight: 400;
font-variation-settings: 'opsz' 144;
}
.brand:hover { color: var(--deep-bark); }
.brand-wordmark { height: 2.6rem; width: auto; display: block; }
.cinematic-footer .brand-wordmark { height: 3rem; }
@media (max-width: 640px) { .brand-wordmark { height: 2.2rem; } }
nav.primary {
display: flex;
gap: var(--space-4);
min-width: 0;
font-family: var(--font-mono);
font-size: var(--text-xxs);
letter-spacing: 0.18em;
text-transform: uppercase;
}
nav.primary a {
color: var(--label-ink);
text-decoration: none;
white-space: nowrap;
transition: color 150ms var(--ease-micro);
}
nav.primary a:hover { color: var(--gold-ink); }
@media (max-width: 640px) {
.site-header { padding: var(--space-2) var(--space-3); }
/* the homepage nav carries 5 items — let the row scroll horizontally rather
than wrap onto a second header line or crowd the wordmark. */
nav.primary {
gap: var(--space-2);
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
nav.primary::-webkit-scrollbar { display: none; }
}
@media (max-width: 420px) {
nav.primary { gap: var(--space-1); letter-spacing: 0.12em; }
}
/* ----- Reduced motion ----- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-delay: 0ms !important;
transition-duration: 0.01ms !important;
}
}