/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,400&family=Montserrat:wght@300;400;500;600;700&display=swap');
/* ─────────────────────────────────────────────────────────────
Maplehurst Stock Farm — Design Tokens
Heritage Kentucky thoroughbred farm. Refined, traditional,
warm. Navy + silver + gold are the signature palette.
───────────────────────────────────────────────────────────── */
/* ── Fonts ─────────────────────────────────────────────────── */
@font-face {
font-family: "Benguiat";
src: url('https://bricks.maplehurststockfarm.com/wp-content/uploads/maplehurst/fonts/ITCBenguiatStdBookCn.OTF') format("opentype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Benguiat";
src: url('https://bricks.maplehurststockfarm.com/wp-content/uploads/maplehurst/fonts/ITCBenguiatStdMediumCn.OTF') format("opentype");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Benguiat";
src: url('https://bricks.maplehurststockfarm.com/wp-content/uploads/maplehurst/fonts/ITCBenguiatStdBoldCn.OTF') format("opentype");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "American Captain";
src: url('https://bricks.maplehurststockfarm.com/wp-content/uploads/maplehurst/fonts/american_captain.ttf') format("truetype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* Body sans (loaded via Google Fonts in HTML ):
*/
:root {
/* ── Primary brand colors (canonical from brand.md) ─────── */
--maplehurst-blue: #306E8B; /* primary brand */
--deep-navy: #1F4557; /* navigation, footer */
--dark-slate: #193543; /* text, deep accents */
--accent-cyan: #13AFF0; /* interactive accent */
--steel-gray: #AAAAAA; /* borders, secondary UI */
--pure-white: #FEFEFE; /* primary background */
/* ── Extended primary palette (silks, finish line, jet) ─── */
--jockey-cobalt: #0B109F; /* electric blue, silks accent */
--silks-crimson: #AB1A2D; /* crimson, finish-line red */
--silks-lime: #94D40B; /* bright pasture lime */
--stone-gray: #A5A7A9; /* mid neutral */
--mist-gray: #BBBBBD; /* light neutral */
--jet: #080405; /* deepest black, near-warm */
/* ── Heritage gold + silver (badge / wordmark gradients) ── */
--gold-light: #F8C637;
--gold: #FB9620;
--gold-deep: #B89A56;
--silver-light: #F1F1F1;
--silver: #C9C8CC;
--silver-deep: #9D9BA0;
/* ── Warm pastoral neutrals (cards, surfaces) ───────────── */
--cream: #F6F1E7;
--parchment: #EFE7D4;
--bourbon-brown: #5B4636;
--charcoal: #2A2A2A;
/* ── Foreground tokens ──────────────────────────────────── */
--fg-1: var(--dark-slate); /* body text */
--fg-2: #4A5C68; /* secondary */
--fg-3: #7A8893; /* tertiary / meta */
--fg-inverse: var(--pure-white);
--fg-link: var(--maplehurst-blue);
--fg-link-hover: var(--deep-navy);
/* ── Background tokens ──────────────────────────────────── */
--bg-page: var(--pure-white);
--bg-surface: var(--cream);
--bg-surface-2: var(--parchment);
--bg-elevated: #FFFFFF;
--bg-dark: var(--deep-navy);
--bg-deepest: var(--dark-slate);
/* ── Border tokens ──────────────────────────────────────── */
--border-1: #E4DFD2; /* hairline on cream */
--border-2: #CFC7B4; /* stronger / dividers */
--border-gold: var(--gold-deep);
--border-dark: rgba(25, 53, 67, 0.12);
/* ── Semantic ───────────────────────────────────────────── */
--success: #4A7C4A;
--warning: var(--gold);
--error: #A8443A;
--info: var(--accent-cyan);
/* ── Signature gradients ────────────────────────────────── */
--grad-silver: linear-gradient(135deg, #9D9BA0 0%, #F1F1F1 100%);
--grad-gold: linear-gradient(135deg, #FB9620 0%, #F8C637 100%);
--grad-gold-deep: linear-gradient(135deg, #B89A56 0%, #D2B978 100%);
--grad-graphite: linear-gradient(135deg, #1D1D1D 0%, #484848 100%);
--grad-indigo: linear-gradient(135deg, #2E328A 0%, #5559B2 100%);
--grad-navy: linear-gradient(180deg, #1F4557 0%, #193543 100%);
/* ── Type families ──────────────────────────────────────── */
--font-display: "Benguiat", "Cormorant Garamond", "Trajan Pro", Georgia, serif;
--font-heritage: "American Captain", "Benguiat", Georgia, serif;
--font-body: "Montserrat", "Helvetica Neue", Arial, sans-serif;
--font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
/* ── Type scale (px-anchored, refined editorial) ────────── */
--fs-hero: clamp(48px, 7vw, 96px);
--fs-display: clamp(36px, 5vw, 64px);
--fs-h1: clamp(30px, 3.6vw, 44px);
--fs-h2: clamp(24px, 2.6vw, 32px);
--fs-h3: 20px;
--fs-h4: 17px;
--fs-body: 16px;
--fs-small: 14px;
--fs-eyebrow: 12px;
/* ── Letter-spacing ─────────────────────────────────────── */
--ls-tight: -0.01em;
--ls-normal: 0;
--ls-wide: 0.06em;
--ls-wider: 0.14em; /* eyebrows, badges */
--ls-widest: 0.22em; /* all-caps display */
/* ── Line heights ───────────────────────────────────────── */
--lh-tight: 1.05;
--lh-snug: 1.2;
--lh-normal: 1.55;
--lh-loose: 1.75;
/* ── Spacing (4px base, generous editorial rhythm) ──────── */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;
--space-9: 96px;
--space-10: 128px;
/* ── Radius — kept subtle, never SaaS-rounded ───────────── */
--radius-1: 2px;
--radius-2: 4px;
--radius-3: 6px;
--radius-4: 10px;
--radius-pill: 999px;
/* ── Elevation ──────────────────────────────────────────── */
--shadow-1: 0 1px 2px rgba(25,53,67,0.05), 0 1px 1px rgba(25,53,67,0.04);
--shadow-2: 0 4px 12px rgba(25,53,67,0.08), 0 1px 2px rgba(25,53,67,0.04);
--shadow-3: 0 10px 30px rgba(25,53,67,0.12), 0 2px 6px rgba(25,53,67,0.06);
--shadow-gold-glow: 0 0 0 1px rgba(184,154,86,0.35), 0 6px 24px rgba(184,154,86,0.18);
/* ── Motion ─────────────────────────────────────────────── */
--ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
--ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
--dur-fast: 140ms;
--dur-base: 220ms;
--dur-slow: 420ms;
}
/* ── Semantic element styles ──────────────────────────────── */
html { font-size: 16px; }
body {
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: var(--lh-normal);
color: var(--fg-1);
background: var(--bg-page);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
h1, .h1, h2, .h2, h3, .h3 {
font-family: var(--font-display);
color: var(--dark-slate);
font-weight: 700;
line-height: var(--lh-snug);
text-wrap: balance;
}
h1, .h1 { font-size: var(--fs-h1); letter-spacing: var(--ls-tight); }
h2, .h2 { font-size: var(--fs-h2); letter-spacing: var(--ls-tight); }
h3, .h3 { font-size: var(--fs-h3); letter-spacing: var(--ls-normal); font-weight: 500; }
h4, .h4 { font-family: var(--font-body); font-size: var(--fs-h4); font-weight: 600; letter-spacing: var(--ls-normal); }
p { margin: 0 0 1em; max-width: 68ch; text-wrap: pretty; }
a { color: var(--fg-link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--fg-link-hover); }
small, .small { font-size: var(--fs-small); color: var(--fg-2); }
.eyebrow {
font-family: var(--font-body);
font-size: var(--fs-eyebrow);
font-weight: 600;
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--gold-deep);
}
.display {
font-family: var(--font-display);
font-size: var(--fs-display);
letter-spacing: var(--ls-tight);
line-height: var(--lh-tight);
}
.heritage {
font-family: var(--font-heritage);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
}
code, pre, kbd { font-family: var(--font-mono); font-size: 0.94em; }
::selection { background: rgba(48,110,139,0.22); color: var(--dark-slate); }
/* Wordmark utility classes — these replicate the brand badge treatment */
.wordmark-silver {
background: var(--grad-silver);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-family: var(--font-display);
font-weight: 700;
letter-spacing: var(--ls-wide);
}
.wordmark-gold {
background: var(--grad-gold);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-family: var(--font-display);
font-weight: 700;
letter-spacing: var(--ls-widest);
text-transform: uppercase;
}
/* ─────────────────────────────────────────────────────────────
Direction B — Pastoral Cinematic
Photo-first, chapter-driven, minimal chrome.
Each section is its own scene.
───────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
background: #0c1c25;
color: #ece8dc;
font-family: var(--font-body);
overflow-x: hidden;
--chap-color: var(--gold-light);
--cine-display: "Cormorant Garamond", "Benguiat", Georgia, serif;
}
/* Imagery treatment: warm (locked) */
.tw-bg, .tw-img { filter: saturate(1.08) contrast(1.04) brightness(0.98); }
/* Headline scale: standard (locked) */
body { --pc-fs-hero: clamp(64px, 8.5vw, 132px); --pc-fs-title: clamp(48px, 6vw, 88px); }
/* ===== Top bar — minimal ===== */
.top-bar {
position: fixed; top: 0; left: 0; right: 0; z-index: 50;
padding: var(--space-4) var(--space-6);
display: flex; align-items: center; justify-content: space-between;
color: var(--pure-white);
pointer-events: none;
}
.top-bar > * { pointer-events: auto; }
.top-bar__brand { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; color: inherit; }
.top-bar__brand img {
height: 44px; width: auto;
filter: drop-shadow(0 2px 8px rgba(0,0,0,0.45));
}
.top-bar__brand .label {
font-family: var(--font-body);
font-size: 10px;
letter-spacing: 0.32em;
text-transform: uppercase;
font-weight: 600;
opacity: 0.9;
}
.top-bar__menu {
background: transparent;
border: 1px solid rgba(254,254,254,0.4);
color: inherit;
padding: 10px 18px;
font-family: var(--font-body);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
border-radius: 0;
cursor: pointer;
display: inline-flex; align-items: center; gap: 10px;
transition: all var(--dur-base) var(--ease-out);
}
.top-bar__menu:hover { background: rgba(254,254,254,0.1); border-color: rgba(254,254,254,0.7); }
.top-bar__menu .bars {
display: inline-flex; flex-direction: column; gap: 3px;
}
.top-bar__menu .bars span {
width: 14px; height: 1px; background: currentColor;
}
/* Drawer */
.drawer {
position: fixed; inset: 0;
background: rgba(8, 16, 22, 0.88);
backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
z-index: 100;
display: flex;
opacity: 0; pointer-events: none;
transition: opacity var(--dur-base) var(--ease-out);
}
.drawer.is-open { opacity: 1; pointer-events: auto; }
.drawer__panel {
margin-left: auto;
width: min(540px, 90vw); height: 100%;
background: rgba(15, 28, 38, 0.98);
border-left: 1px solid rgba(184,154,86,0.3);
padding: var(--space-7) var(--space-7);
display: flex; flex-direction: column; justify-content: space-between;
transform: translateX(40px);
transition: transform var(--dur-slow) var(--ease-out);
}
.drawer.is-open .drawer__panel { transform: translateX(0); }
.drawer__close {
align-self: flex-end;
background: transparent; border: 0; color: rgba(254,254,254,0.65);
font-size: 20px;
cursor: pointer;
padding: 4px 8px;
}
.drawer__close:hover { color: var(--gold-light); }
.drawer__nav { list-style: none; padding: 0; margin: var(--space-6) 0 0; display: flex; flex-direction: column; gap: var(--space-4); }
.drawer__nav a {
font-family: var(--cine-display);
font-size: 36px;
font-style: italic;
font-weight: 400;
color: var(--pure-white);
text-decoration: none;
display: flex; align-items: baseline; gap: var(--space-4);
transition: color var(--dur-base);
}
.drawer__nav a:hover { color: var(--gold-light); }
.drawer__nav a .ch {
font-family: var(--font-body);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--gold-deep);
font-style: normal;
min-width: 60px;
}
.drawer__foot {
border-top: 1px solid rgba(254,254,254,0.12);
padding-top: var(--space-5);
font-family: var(--font-body);
font-size: 12px;
color: rgba(254,254,254,0.6);
line-height: 1.6;
}
.drawer__foot .gold { color: var(--gold-light); font-style: italic; }
/* ===== Chapter Rail ===== */
.chapter-rail {
position: fixed;
left: var(--space-6); top: 50%;
transform: translateY(-50%);
z-index: 40;
color: var(--pure-white);
display: flex; flex-direction: column; gap: 14px;
pointer-events: none;
}
.chapter-rail__item {
display: flex; align-items: center; gap: 14px;
text-decoration: none;
pointer-events: auto;
cursor: pointer;
font-family: var(--font-body);
font-size: 10px;
letter-spacing: 0.32em;
text-transform: uppercase;
font-weight: 600;
color: rgba(254,254,254,0.55);
transition: color var(--dur-base) var(--ease-out);
background: transparent; border: 0; padding: 0;
}
.chapter-rail__item:hover { color: var(--gold-light); }
.chapter-rail__item.is-active { color: var(--pure-white); }
.chapter-rail__item .line {
display: block;
width: 28px; height: 1px;
background: rgba(254,254,254,0.4);
transition: width var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.chapter-rail__item.is-active .line { width: 48px; background: var(--gold-light); }
.chapter-rail__item .ch { min-width: 24px; }
@media (max-width: 880px) { .chapter-rail { display: none; } }
/* ===== Scene shell ===== */
.scene {
position: relative;
min-height: 100vh;
display: flex;
overflow: hidden;
}
.scene__bg {
position: absolute; inset: 0;
background-size: cover; background-position: center;
}
.scene__protection-bottom {
position: absolute; left: 0; right: 0; bottom: 0;
height: 55%;
background: linear-gradient(180deg, rgba(8,16,22,0) 0%, rgba(8,16,22,0.85) 100%);
}
.scene__protection-top {
position: absolute; left: 0; right: 0; top: 0;
height: 30%;
background: linear-gradient(180deg, rgba(8,16,22,0.65) 0%, rgba(8,16,22,0) 100%);
}
.scene__inner {
position: relative;
width: 100%;
padding: var(--space-9) var(--space-7) var(--space-9);
padding-left: calc(var(--space-7) + 260px); /* clear the chapter rail */
display: flex; flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
color: var(--pure-white);
max-width: 1600px;
margin: 0 auto;
}
.scene__chapter {
font-family: var(--font-body);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--gold-light);
display: inline-flex; align-items: center; gap: 14px;
margin-bottom: var(--space-4);
}
.scene__chapter .rule { width: 32px; height: 1px; background: var(--gold-light); }
.scene__title {
font-family: var(--cine-display);
font-style: italic;
font-weight: 400;
font-size: var(--pc-fs-title);
line-height: 0.96;
letter-spacing: -0.01em;
margin: 0;
color: var(--pure-white);
max-width: 18ch;
text-wrap: balance;
}
.scene__lede {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.6;
color: rgba(254,254,254,0.85);
max-width: 52ch;
margin: var(--space-5) 0 0;
}
/* Scene I — Arrival / Hero */
.scene--arrival { min-height: 100vh; }
.scene--arrival .scene__title {
font-size: var(--pc-fs-hero);
max-width: 16ch;
}
.scene--arrival .scene__inner { padding-bottom: var(--space-10); }
.scene--arrival .cta-row {
display: flex; gap: var(--space-4); align-items: center;
margin-top: var(--space-6); flex-wrap: wrap;
}
.cta-btn {
background: transparent;
border: 1px solid rgba(254,254,254,0.6);
color: var(--pure-white);
padding: 14px 30px;
font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
text-decoration: none;
border-radius: 0;
cursor: pointer;
transition: all var(--dur-base) var(--ease-out);
display: inline-flex; align-items: center; gap: 12px;
}
.cta-btn:hover { background: rgba(254,254,254,0.1); border-color: var(--gold-light); color: var(--gold-light); }
.cta-btn--solid { background: rgba(254,254,254,0.95); color: var(--dark-slate); border-color: rgba(254,254,254,0.95); }
.cta-btn--solid:hover { background: var(--gold-light); border-color: var(--gold-light); color: var(--dark-slate); }
/* Bottom meta strip on hero */
.scene--arrival .meta-strip {
position: absolute;
left: 0; right: 0; bottom: 0;
display: flex; justify-content: space-between; align-items: center;
padding: var(--space-4) var(--space-7);
padding-left: calc(var(--space-7) + 260px);
font-family: var(--font-body);
font-size: 10px;
letter-spacing: 0.32em;
text-transform: uppercase;
font-weight: 600;
color: rgba(254,254,254,0.65);
border-top: 1px solid rgba(254,254,254,0.12);
z-index: 3;
}
.scene--arrival .meta-strip .gold { color: var(--gold-light); }
/* Hero variants */
/* Scene II — Heritage (split) */
.scene--heritage {
display: grid;
grid-template-columns: 1fr 1fr;
background: transparent;
}
@media (max-width: 880px) { .scene--heritage { grid-template-columns: 1fr; } }
.scene--split-text {
background: linear-gradient(135deg, #122a36 0%, #0c1c25 100%);
position: relative;
padding: var(--space-10) var(--space-7);
padding-left: calc(var(--space-7) + 260px);
display: flex; flex-direction: column; justify-content: center;
color: var(--pure-white);
}
.scene--split-text::before {
content: "1905";
position: absolute;
bottom: 20px; right: 32px;
font-family: var(--cine-display);
font-size: 240px;
font-style: italic;
font-weight: 300;
color: rgba(184,154,86,0.07);
line-height: 1;
pointer-events: none;
letter-spacing: -0.02em;
}
.scene--split-photo {
position: relative;
overflow: hidden;
}
.scene--split-photo .tw-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.scene--split-photo::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(90deg, rgba(8,16,22,0.4) 0%, rgba(8,16,22,0) 30%);
}
.scene--split-photo .caption {
position: absolute;
bottom: var(--space-5); right: var(--space-5);
font-family: var(--font-body);
font-size: 10px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: rgba(254,254,254,0.75);
text-align: right;
}
.scene--heritage .scene__title { color: var(--pure-white); max-width: 16ch; }
.scene--heritage p {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.7;
color: rgba(254,254,254,0.78);
margin: var(--space-4) 0;
max-width: 52ch;
}
.pullquote--cine {
font-family: var(--cine-display);
font-style: italic;
font-size: 32px;
line-height: 1.25;
color: var(--gold-light);
margin: var(--space-6) 0 var(--space-3);
max-width: 32ch;
border-left: 2px solid var(--gold-deep);
padding-left: var(--space-4);
}
.pullquote--cine + .attrib {
font-family: var(--font-body);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(184,154,86,0.85);
margin-left: calc(var(--space-4) + 2px);
}
/* Scene III — Care (services) */
.scene--care .scene__inner {
justify-content: flex-end;
padding-bottom: var(--space-9);
}
.care__intro { max-width: 700px; }
.care__list {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-6);
margin-top: var(--space-7);
padding-top: var(--space-6);
border-top: 1px solid rgba(254,254,254,0.18);
width: 100%;
}
@media (max-width: 1100px) { .care__list { grid-template-columns: repeat(2, 1fr); } }
.care__item {
color: rgba(254,254,254,0.92);
position: relative;
padding-right: var(--space-3);
}
.care__item .ch {
font-family: var(--font-body);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--gold-light);
margin-bottom: var(--space-3);
display: block;
}
.care__item h3 {
font-family: var(--cine-display);
font-style: italic;
font-size: 32px;
line-height: 1.05;
font-weight: 400;
margin: 0 0 var(--space-3);
color: var(--pure-white);
}
.care__item p {
font-family: var(--font-body);
font-size: 14px;
line-height: 1.6;
margin: 0;
color: rgba(254,254,254,0.7);
}
.care__item .more {
display: inline-block;
margin-top: var(--space-3);
font-family: var(--font-body);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
font-weight: 600;
color: var(--gold-light);
text-decoration: none;
padding-bottom: 4px;
border-bottom: 1px solid var(--gold-deep);
}
/* Services layout variants */
/* Scene IV — Roster (Stallion focus) */
.scene--roster {
background: linear-gradient(135deg, #0c1c25 0%, #1a3441 100%);
min-height: 100vh;
}
.scene--roster .scene__inner {
padding-top: var(--space-9);
padding-bottom: var(--space-9);
justify-content: flex-start;
}
.roster__head {
display: flex; justify-content: space-between; align-items: flex-end;
width: 100%; gap: var(--space-7);
padding-bottom: var(--space-6);
border-bottom: 1px solid rgba(254,254,254,0.18);
}
.roster__head .right {
font-family: var(--font-body);
font-size: 12px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(254,254,254,0.65);
font-weight: 600;
text-align: right;
}
.roster__stage {
display: grid;
grid-template-columns: 2.4fr 1fr;
gap: var(--space-7);
margin-top: var(--space-7);
width: 100%;
align-items: stretch;
}
@media (max-width: 1100px) { .roster__stage { grid-template-columns: 1fr; } }
.roster__photo {
position: relative;
aspect-ratio: 4/5;
overflow: hidden;
background: #000;
}
.roster__photo img {
width: 100%; height: 100%; object-fit: cover;
animation: focusIn 700ms var(--ease-out);
}
@keyframes focusIn {
from { opacity: 0; transform: scale(1.03); filter: blur(8px); }
to { opacity: 1; transform: scale(1); filter: blur(0); }
}
.roster__photo::after {
content: "";
position: absolute; left: 0; right: 0; bottom: 0;
height: 40%;
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%);
}
.roster__photo .name-overlay {
position: absolute; left: var(--space-5); bottom: var(--space-5);
color: var(--pure-white);
font-family: var(--cine-display);
font-style: italic;
font-size: 56px;
line-height: 0.95;
z-index: 2;
}
.roster__photo .name-overlay .sub {
font-family: var(--font-body);
font-size: 11px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--gold-light);
font-style: normal;
display: block;
margin-bottom: 8px;
}
.roster__info {
display: flex; flex-direction: column; gap: var(--space-5);
padding: var(--space-5) 0;
}
.roster__info .meta {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-3);
}
.roster__info .meta-row {
display: flex; justify-content: space-between; align-items: baseline;
border-bottom: 1px dotted rgba(254,254,254,0.18);
padding-bottom: 10px;
}
.roster__info .meta-row .k {
font-family: var(--font-body);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--gold-light);
}
.roster__info .meta-row .v {
font-family: var(--cine-display);
font-style: italic;
font-size: 22px;
color: var(--pure-white);
}
.roster__info .fee-block {
margin-top: auto;
padding-top: var(--space-4);
border-top: 1px solid var(--gold-deep);
}
.roster__info .fee-block .lbl {
font-family: var(--font-body);
font-size: 10px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--gold-light);
font-weight: 600;
}
.roster__info .fee-block .fee {
font-family: var(--cine-display);
font-style: italic;
font-size: 56px;
font-weight: 400;
color: var(--pure-white);
line-height: 1;
margin-top: 6px;
}
.roster__thumbs {
display: flex; gap: var(--space-3);
margin-top: var(--space-6);
width: 100%;
}
.roster__thumb {
flex: 1;
aspect-ratio: 16/10;
background: #000;
position: relative;
overflow: hidden;
cursor: pointer;
border: 0;
padding: 0;
transition: all var(--dur-base) var(--ease-out);
}
.roster__thumb img {
width: 100%; height: 100%; object-fit: cover;
opacity: 0.55;
transition: opacity var(--dur-base);
}
.roster__thumb:hover img { opacity: 0.85; }
.roster__thumb.is-active img { opacity: 1; }
.roster__thumb.is-active { outline: 2px solid var(--gold-light); outline-offset: 4px; }
.roster__thumb .nm {
position: absolute;
left: var(--space-3); bottom: var(--space-3);
font-family: var(--cine-display);
font-style: italic;
font-size: 18px;
color: var(--pure-white);
text-shadow: 0 1px 6px rgba(0,0,0,0.6);
z-index: 2;
text-align: left;
}
/* Scene V — Gallery (filmstrip) */
.scene--gallery {
background: #08141c;
padding: var(--space-9) 0;
}
.scene--gallery .scene__inner { padding: 0; max-width: none; }
.gallery__head {
display: flex; justify-content: space-between; align-items: flex-end;
padding: 0 var(--space-7);
padding-left: calc(var(--space-7) + 260px);
margin-bottom: var(--space-6);
color: var(--pure-white);
}
.gallery__head h2 {
font-family: var(--cine-display);
font-style: italic;
font-size: var(--pc-fs-title);
line-height: 1;
margin: 0;
max-width: 18ch;
font-weight: 400;
}
.gallery__head .caption {
font-family: var(--font-body);
font-size: 12px;
line-height: 1.6;
letter-spacing: 0.06em;
color: rgba(254,254,254,0.7);
max-width: 36ch;
text-align: right;
}
.filmstrip {
display: flex;
gap: var(--space-3);
padding: 0 var(--space-7);
padding-left: calc(var(--space-7) + 260px);
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: thin;
scrollbar-color: var(--gold-deep) transparent;
padding-bottom: var(--space-5);
}
.filmstrip::-webkit-scrollbar { height: 6px; }
.filmstrip::-webkit-scrollbar-thumb { background: var(--gold-deep); border-radius: 3px; }
.filmstrip__frame {
flex: 0 0 auto;
width: clamp(280px, 28vw, 480px);
aspect-ratio: 3/4;
scroll-snap-align: start;
overflow: hidden;
position: relative;
}
.filmstrip__frame:nth-child(odd) { aspect-ratio: 4/3; width: clamp(360px, 36vw, 620px); }
.filmstrip__frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out); }
.filmstrip__frame:hover img { transform: scale(1.04); }
.filmstrip__frame .num {
position: absolute;
top: var(--space-4); left: var(--space-4);
font-family: var(--font-body);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--pure-white);
background: rgba(0,0,0,0.5);
padding: 4px 10px;
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
/* Scene VI — Visit */
.scene--visit { min-height: 100vh; }
.scene--visit .scene__inner {
align-items: flex-start;
justify-content: center;
padding-top: var(--space-10);
}
.scene--visit-card {
background: rgba(15, 28, 38, 0.86);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(184,154,86,0.3);
padding: var(--space-8) var(--space-8);
max-width: 640px;
display: flex; flex-direction: column; gap: var(--space-5);
color: var(--pure-white);
}
.scene--visit-card h2 {
font-family: var(--cine-display);
font-style: italic;
font-size: var(--pc-fs-title);
font-size: clamp(40px, 4.8vw, 72px);
line-height: 0.98;
margin: 0;
font-weight: 400;
color: var(--pure-white);
}
.scene--visit-card .lede {
font-family: var(--font-body);
font-size: 15px;
line-height: 1.65;
color: rgba(254,254,254,0.78);
margin: 0;
max-width: 50ch;
}
.scene--visit-card .row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-5);
padding-top: var(--space-4);
border-top: 1px solid rgba(254,254,254,0.18);
}
.scene--visit-card .k {
font-family: var(--font-body);
font-size: 10px;
letter-spacing: 0.32em;
text-transform: uppercase;
font-weight: 600;
color: var(--gold-light);
}
.scene--visit-card .v {
font-family: var(--cine-display);
font-style: italic;
font-size: 22px;
margin-top: 4px;
color: var(--pure-white);
}
.scene--visit-card form { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
.scene--visit-card label { display: block; font-family: var(--font-body); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600; color: var(--gold-light); margin-bottom: 6px; }
.scene--visit-card input, .scene--visit-card select, .scene--visit-card textarea {
background: transparent; border: 0; border-bottom: 1px solid rgba(254,254,254,0.4);
padding: 8px 0; font-family: var(--font-body); font-size: 16px;
color: var(--pure-white); width: 100%;
}
.scene--visit-card input:focus, .scene--visit-card select:focus, .scene--visit-card textarea:focus { outline: none; border-bottom-color: var(--gold-light); }
.scene--visit-card .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.scene--visit-card .send {
background: rgba(254,254,254,0.95);
color: var(--dark-slate);
border: 0;
padding: 14px 24px;
font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
cursor: pointer;
margin-top: var(--space-3);
transition: all var(--dur-base);
justify-self: start;
}
.scene--visit-card .send:hover { background: var(--gold-light); }
/* Footer line at very bottom */
.cinema-foot {
background: #08141c;
border-top: 1px solid rgba(254,254,254,0.08);
padding: var(--space-5) var(--space-7);
padding-left: calc(var(--space-7) + 260px);
display: flex; justify-content: space-between; align-items: center;
font-family: var(--font-body);
font-size: 10px;
letter-spacing: 0.32em;
text-transform: uppercase;
font-weight: 600;
color: rgba(254,254,254,0.55);
}
.cinema-foot .gold { color: var(--gold-light); }
section[id] { scroll-margin-top: 0; }