/* ──────────────────────────────────────────────────────────────
Kizuna seed page — Brand styles
──────────────────────────────────────────────────────────────
Phase 3 scope (per brief §17.3): typography, colors, basic
hierarchy. NOT layout polish, NOT imagery (those are Phase 4
and Phase 8).
────────────────────────────────────────────────────────────── */
/* ── 1. Fonts ─────────────────────────────────────────────────
Google Fonts (Libre Baskerville, Merriweather, Playfair Display)
are loaded via in .
Bethany Elingston is self-hosted from /fonts (proprietary,
purchased by client, used per Brand Reference §4 for the
"bonds are power" typographic asset).
Lonely Study is purchased but NOT loaded — brief says it is
out of scope for Round 1.
────────────────────────────────────────────────────────────── */
@font-face {
font-family: 'Bethany Elingston';
src: url('fonts/BethanyElingston-Regular.otf') format('opentype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Bethany Elingston';
src: url('fonts/BethanyElingston-Italic.otf') format('opentype');
font-weight: 400;
font-style: italic;
font-display: swap;
}
/* ── 2. Design tokens ─────────────────────────────────────────
Five-color palette from Brand Reference §1, exact hex values.
No approximations.
────────────────────────────────────────────────────────────── */
:root {
/* Palette */
--red: #CC0007; /* Brand red — primary surface + accents */
--coral: #F7AA9F; /* Coral — small accents on dark surfaces */
--cream: #EFE6DD; /* Cream — relief surface + text on red */
--burgundy: #9A0104; /* Deep burgundy — deeper accents */
--wine: #520201; /* Wine — deepest accent + text on cream */
/* Type families */
--font-display: 'Libre Baskerville', 'Times New Roman', serif;
--font-body: 'Merriweather', Georgia, serif;
--font-asset: 'Bethany Elingston', 'Playfair Display', Georgia, serif;
--font-flourish:'Playfair Display', Georgia, serif;
/* Reading rhythm */
--measure-narrow: 36rem; /* ~580px — §3 reading column */
--measure-prose: 42rem; /* ~672px — most body copy */
--measure-wide: 64rem; /* large grids */
/* Section vertical rhythm */
--section-y: clamp(5rem, 10vw, 8.5rem);
--section-y-tight: clamp(3.5rem, 7vw, 5.5rem);
}
/* ── 3. Base ──────────────────────────────────────────────────
Reset Tailwind preflight body color/font so we own these.
────────────────────────────────────────────────────────────── */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; scroll-padding-top: clamp(4.5rem, 9vh, 6rem); }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
body { font-family: var(--font-body); color: var(--wine); background: var(--cream); }
::selection { background: var(--wine); color: var(--cream); }
/* ── 4. Section surfaces ──────────────────────────────────────
Per user-locked rhythm: alternate brand red and cream.
§1, §3, §5, footer = red. §2, §4, §6 = cream.
────────────────────────────────────────────────────────────── */
.surface-red {
background: var(--red);
color: var(--cream);
}
.surface-red ::selection { background: var(--cream); color: var(--red); }
.surface-cream {
background: var(--cream);
color: var(--wine);
}
/* ── 5. Typography hierarchy ──────────────────────────────────
Sizes are basic. Phase 4 will tune per-section for editorial
feel; Phase 10 will polish.
────────────────────────────────────────────────────────────── */
/* Eyebrows — Merriweather Bold, uppercase, small.
Brief §2.2 (Section 2) says small caps OR uppercase block titles.
Decision: uppercase (the source copy is already uppercase, so
small caps would double-style it). Calling this out — easy to
flip via this single rule. */
.eyebrow {
font-family: var(--font-body);
font-weight: 700;
font-size: 0.78rem;
letter-spacing: 0.14em;
text-transform: uppercase;
}
/* H1 — Libre Baskerville, very large display serif.
Final tuned size lands in Phase 4 with the Hero layout. */
.h-display {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(2.5rem, 6vw, 4.5rem);
line-height: 1.02;
letter-spacing: -0.01em;
text-wrap: balance;
}
/* H2 — Libre Baskerville, large */
.h-section {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(1.875rem, 3.6vw, 3rem);
line-height: 1.1;
letter-spacing: -0.005em;
text-wrap: balance;
}
/* H3 (block titles in §2) — Merriweather Bold uppercase, dense */
.h-block {
font-family: var(--font-body);
font-weight: 700;
font-size: 0.9rem;
letter-spacing: 0.08em;
text-transform: uppercase;
line-height: 1.25;
}
/* Body — Merriweather Regular, comfortable reading size */
.body-prose {
font-family: var(--font-body);
font-weight: 400;
font-size: 1.0625rem; /* ~17px */
line-height: 1.7;
text-wrap: pretty;
}
.body-prose em { font-style: italic; }
.body-prose a {
color: inherit;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
.body-prose a:hover { color: var(--red); }
.surface-red .body-prose a:hover { color: var(--coral); }
/* Kicker (Hero) — Merriweather Regular, small, muted */
.kicker {
font-family: var(--font-body);
font-weight: 400;
font-size: 0.9375rem;
line-height: 1.5;
opacity: 0.78;
}
/* Pull-line (§3) — Libre Baskerville Italic, brand red on cream */
.pull-line {
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-size: clamp(1.5rem, 2.8vw, 2.25rem);
line-height: 1.25;
color: var(--red);
text-wrap: balance;
}
/* All contents render italic (inner stays italic, no flip) */
.pull-line em,
.pull-line .italic { font-style: italic; }
/* §4 typographic asset "bonds are power" — Bethany Elingston */
.asset-bonds {
font-family: var(--font-asset);
font-weight: 400;
font-size: clamp(3rem, 9vw, 7rem);
line-height: 1;
color: var(--red);
}
.asset-bonds .ital { font-style: italic; }
/* §4 etymology line — Libre Baskerville Italic */
.etymology {
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-size: 1.0625rem;
opacity: 0.75;
}
/* Scroll cue — small, brand-red emphasis on red bed becomes coral */
.scroll-cue {
font-family: var(--font-body);
font-size: 0.9375rem;
letter-spacing: 0.02em;
text-decoration: underline;
text-underline-offset: 6px;
text-decoration-thickness: 1px;
}
.scroll-cue::after {
content: '';
display: inline-block;
width: 0;
}
/* Gentle bounce on the arrow in scroll-cue text (the ↓ is part of
the string, so we animate the whole anchor). Reduced-motion safe. */
@media (prefers-reduced-motion: no-preference) {
.scroll-cue { animation: scroll-cue-bounce 2.6s ease-in-out infinite; }
@keyframes scroll-cue-bounce {
0%, 70%, 100% { transform: translateY(0); }
85% { transform: translateY(4px); }
}
}
/* Closing brand line (§6) — Libre Baskerville Regular */
.closing-line {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(1.25rem, 2vw, 1.75rem);
line-height: 1.3;
letter-spacing: -0.005em;
}
/* ── 6. Links & focus ─────────────────────────────────────────
Brief §4.4 — focus indicator: 2px solid brand red, 2px offset.
On red surfaces, focus uses cream so it stays visible.
────────────────────────────────────────────────────────────── */
a, button, input, select, textarea {
outline: none;
}
:where(a, button, input, select, textarea):focus-visible {
outline: 2px solid var(--red);
outline-offset: 2px;
}
.surface-red :where(a, button, input, select, textarea):focus-visible {
outline-color: var(--cream);
}
/* ── 7. Header ────────────────────────────────────────────────
Header floats over §1 Hero (red), so its default colorway is
cream-on-red. Switching across sections is a Phase 7 concern.
────────────────────────────────────────────────────────────── */
/* Header link — base + active (scroll-spy) state */
.header-link {
font-family: var(--font-body);
font-size: 0.9375rem;
color: inherit;
position: relative;
}
.header-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.header-link[aria-current="location"] {
text-decoration: underline;
text-underline-offset: 4px;
text-decoration-thickness: 2px;
font-weight: 700;
}
/* Language toggle */
.lang-btn {
font-family: var(--font-body);
font-size: 0.9375rem;
padding: 0.25rem 0.5rem;
color: inherit;
opacity: 0.65;
background: transparent;
border: 0;
cursor: pointer;
}
.lang-btn[aria-pressed='true'] {
opacity: 1;
font-weight: 700;
text-decoration: underline;
text-underline-offset: 4px;
}
/* ── 8. Logo color theming ────────────────────────────────────
The Kizuna SVG paths use class .st0 (no inline fill), so we
theme via fill on .kizuna-logo svg path.
────────────────────────────────────────────────────────────── */
.kizuna-logo { display: inline-block; line-height: 0; }
.kizuna-logo svg { display: block; height: 100%; width: auto; }
.kizuna-logo svg path,
.kizuna-logo svg rect { fill: currentColor; }
/* Header logo sizing */
.kizuna-logo--header { height: 1.5rem; color: var(--cream); }
/* §4 display logo — now lives on red bed (white/cream wordmark) */
.kizuna-logo--display { height: clamp(3.5rem, 10vw, 8rem); color: var(--cream); }
/* Footer logo */
.kizuna-logo--footer { height: 1.75rem; color: var(--cream); }
/* ── 9. Form controls (Phase 3 baseline; Phase 4 will refine) ─ */
.kz-input,
.kz-select {
font-family: var(--font-body);
font-size: 1rem;
background: var(--cream);
color: var(--wine);
border: 1px solid var(--wine);
border-radius: 0;
padding: 0.55rem 0.75rem;
width: 100%;
}
.kz-label {
font-family: var(--font-body);
font-weight: 700;
font-size: 0.85rem;
letter-spacing: 0.04em;
text-transform: uppercase;
display: block;
margin-bottom: 0.4rem;
}
.kz-button {
font-family: var(--font-body);
font-weight: 700;
font-size: 0.95rem;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 0.85rem 1.5rem;
background: var(--red);
color: var(--cream);
border: 1px solid var(--red);
cursor: pointer;
}
.kz-button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Surface-red form override (in case form ever appears on red) */
.surface-red .kz-input,
.surface-red .kz-select { background: transparent; color: var(--cream); border-color: var(--cream); }
.surface-red .kz-button { background: var(--cream); color: var(--red); border-color: var(--cream); }
/* ──────────────────────────────────────────────────────────────
PHASE 4 — Section layouts
────────────────────────────────────────────────────────────── */
/* Section vertical rhythm — applied to every wrapper */
.section-y { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.section-y-tight { padding-top: var(--section-y-tight); padding-bottom: var(--section-y-tight); }
/* Page-wide horizontal padding system */
.page-x { padding-left: clamp(1.25rem, 4vw, 3rem); padding-right: clamp(1.25rem, 4vw, 3rem); }
/* ── HERO — two-box layout (text left | image right), equal height ──
Desktop: CSS Grid 2 columns. Image box has the fixed width
(clamp 280–820px); text box takes the rest.
align-items: stretch → both boxes equal height.
Headline sub-box extends past text-box's right edge
into the image area via negative margin (overlap).
Body sub-box stays inside text box with generous safe
right padding keeping it well clear of the image.
Mobile: single column. Image stacks below text. No overlap. */
.hero-section {
display: grid;
grid-template-columns: minmax(0, 1fr) clamp(280px, 58vw, 820px);
align-items: stretch;
min-height: 88vh;
position: relative;
overflow: hidden;
}
.hero-text-box {
padding-top: clamp(2.5rem, 5vw, 4rem);
padding-bottom: clamp(2.5rem, 5vw, 4rem);
padding-left: clamp(1.25rem, 4vw, 3rem);
padding-right: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
z-index: 2;
gap: clamp(2rem, 4vw, 3.5rem);
}
.hero-image-box {
position: relative;
z-index: 1;
background: var(--wine);
overflow: hidden;
}
.hero-image-box img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
display: block;
}
/* Headline sub-box — extends past text box into image area */
.hero-headline-box {
margin-right: calc(clamp(80px, 16vw, 260px) * -1);
position: relative;
z-index: 3;
}
.hero-headline-box .hero-h1 { max-width: 100%; }
/* Body sub-box — stays inside text box, generous safe padding from image */
.hero-body-box {
padding-right: clamp(2.5rem, 5vw, 5rem);
max-width: 32rem;
display: flex;
flex-direction: column;
gap: clamp(1.5rem, 3vw, 2.5rem);
}
/* Mobile: stack into a single column. Text shows first, image after. */
@media (max-width: 1023px) {
.hero-section {
grid-template-columns: 1fr;
min-height: 0;
}
.hero-text-box {
order: 1;
padding-right: clamp(1.25rem, 4vw, 3rem);
padding-bottom: 1.5rem;
}
.hero-image-box { order: 2; height: 56vh; max-height: 480px; }
.hero-headline-box { margin-right: 0; }
.hero-body-box { padding-right: 0; max-width: 100%; }
}
/* Legacy hero classes — no-op */
.hero-grid,
.hero-portrait-block,
.hero-content,
.hero-kicker { display: revert; }
/* ── §2 SHIFTS — image-left + content-right, closing aligned to col 2 ──
Desktop: Grid with TWO ROWS:
row 1: image (col 1) + content (col 2)
row 2: empty (col 1) + closing paragraph (col 2)
Closing paragraph aligns with column 2's left+right edges,
matching the H2/intro/grid above it.
Tablet/Mobile: single column, everything stacks naturally.
──────────────────────────────────────────────────────────────── */
.shifts-top {
display: grid;
grid-template-columns: 1fr;
gap: clamp(2rem, 5vw, 4rem);
align-items: stretch;
}
@media (min-width: 1024px) {
.shifts-top {
grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr);
}
}
.shifts-image {
width: 100%;
height: 100%;
min-height: 0;
object-fit: cover;
object-position: center top;
display: block;
}
@media (max-width: 1023px) {
.shifts-image {
max-height: 480px;
object-position: center;
order: 2;
}
.shifts-content { order: 1; }
}
@media (max-width: 767px) {
.shifts-image { max-height: 360px; }
}
.shifts-closing {
margin-top: clamp(4rem, 8vw, 6rem);
}
/* 2×2 grid stays mostly the same — gap tuned to 56px (3.5rem) per spec */
.shifts-grid {
display: grid;
grid-template-columns: 1fr;
gap: 3.5rem 3.5rem;
}
@media (min-width: 640px) {
.shifts-grid {
grid-template-columns: 1fr 1fr;
align-items: start;
}
}
.shifts-block { display: flex; flex-direction: column; gap: 0.75rem; }
/* CRITICAL FIX — was: opacity: 0.18 on the whole block (washed out
the body text). New rule: solid wine divider at 25% color tint,
block contents remain at full opacity. */
.shifts-rule {
border-top: 1px solid rgba(82, 2, 1, 0.25);
padding-top: 1rem;
}
/* ── Footer — two columns (40/60), same horizontal padding as page ──
Left col: logo + tagline at top; affiliation + © at bottom.
Right col: quick-links nav at top; contact/legal + back-to-top at bottom.
Both columns use flex space-between vertically.
Mobile: stacks logo → nav → legal → back-to-top. */
.footer-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2.5rem;
padding-top: clamp(3rem, 6vw, 5rem);
padding-bottom: clamp(3rem, 6vw, 5rem);
padding-left: clamp(1.25rem, 4vw, 3rem);
padding-right: clamp(1.25rem, 4vw, 3rem);
}
@media (min-width: 1024px) {
.footer-grid {
grid-template-columns: minmax(0, 40%) minmax(0, 60%);
gap: clamp(2rem, 4vw, 4rem);
}
}
.footer-left,
.footer-right {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 2rem;
min-height: 100%;
}
.footer-tagline {
font-family: var(--font-display);
font-style: italic;
font-size: 0.95rem;
color: var(--cream);
opacity: 0.7;
margin-top: 1rem;
}
.footer-meta { color: var(--cream); opacity: 0.6; font-size: 0.85rem; }
.footer-meta > * + * { margin-top: 0.25rem; }
.footer-nav { color: var(--cream); font-family: var(--font-body); font-size: 0.95rem; }
.footer-nav ul { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.75rem; row-gap: 0.4rem; }
.footer-nav li { display: flex; align-items: center; gap: 0.75rem; }
.footer-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-legal {
color: var(--cream);
opacity: 0.7;
font-size: 0.9rem;
font-family: var(--font-body);
}
.footer-legal a,
.footer-legal button {
text-decoration: underline;
text-underline-offset: 3px;
color: inherit;
background: transparent;
border: 0;
font: inherit;
cursor: pointer;
}
.footer-bottom-row {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-end;
gap: 1.5rem;
}
.footer-backtop {
color: var(--cream);
font-family: var(--font-body);
font-size: 0.95rem;
white-space: nowrap;
}
.footer-backtop:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 1023px) {
.footer-bottom-row { justify-content: flex-start; }
}
/* Closing statement — Bethany Elingston italic, brand red, large
editorial scale. Sized to break into 2 balanced lines on desktop. */
.shifts-closing {
font-family: var(--font-asset);
font-style: italic;
font-weight: 400;
font-size: clamp(1.375rem, 2.4vw, 2rem);
line-height: 1.25;
color: var(--red);
text-align: center;
max-width: 100%;
padding-left: clamp(1rem, 3vw, 3rem);
padding-right: clamp(1rem, 3vw, 3rem);
margin-top: clamp(3rem, 6vw, 6rem);
text-wrap: balance;
}
.shifts-closing em,
.shifts-closing .italic {
font-style: italic;
font-weight: 400;
color: inherit;
}
/* ── §5 MISSION — text-left, full-height image-right (45/55) ──
Same pattern as §3, slightly wider image column. */
.mission-section {
display: grid;
grid-template-columns: 1fr;
align-items: stretch;
position: relative;
}
@media (min-width: 1024px) {
.mission-section {
grid-template-columns: minmax(0, 45%) minmax(0, 55%);
}
}
.mission-content {
padding-top: var(--section-y);
padding-bottom: var(--section-y);
padding-left: clamp(1.25rem, 4vw, 3rem);
padding-right: clamp(1.25rem, 4vw, 3rem);
display: flex;
flex-direction: column;
justify-content: space-between;
gap: clamp(3rem, 5vw, 5rem);
}
@media (min-width: 1024px) {
.mission-content {
padding-right: clamp(2rem, 5vw, 5rem);
}
}
.mission-image-box {
position: relative;
background: var(--wine);
overflow: hidden;
min-height: 320px;
}
.mission-image-box img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
@media (max-width: 1023px) {
.mission-image-box {
height: 56vh;
max-height: 480px;
}
}
/* Mission closing — Bethany Elingston italic, cream on red, same
font size as §3 pull-line. Now lives at the bottom of the left
column (flush-left), pushed there by flex space-between. */
.mission-closing {
font-family: var(--font-asset);
font-style: italic;
font-weight: 400;
font-size: clamp(1.5rem, 2.8vw, 2.25rem);
line-height: 1.25;
color: var(--cream);
text-align: left;
text-wrap: balance;
max-width: 32rem;
}
.mission-closing em,
.mission-closing .italic { font-style: italic; }
/* ── §3 CONSTANT — text-left, full-height image-right ──
Desktop: Two columns. Left = all text (eyebrow, H2, body,
pull-line, trigger), left-aligned with page-x left
margin matching the rest of the site. Right = image
box, full section height, max 40% of page width.
Mobile: Stack. Image below text. */
.constant-section {
display: grid;
grid-template-columns: 1fr;
align-items: stretch;
position: relative;
}
@media (min-width: 1024px) {
.constant-section {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
}
.constant-content {
padding-top: var(--section-y);
padding-bottom: var(--section-y);
padding-left: clamp(1.25rem, 4vw, 3rem); /* matches page-x */
padding-right: clamp(1.25rem, 4vw, 3rem);
}
@media (min-width: 1024px) {
.constant-content {
padding-right: clamp(2rem, 5vw, 5rem); /* breathing room from image */
}
}
.constant-image-box {
position: relative;
background: var(--wine);
overflow: hidden;
min-height: 320px;
}
.constant-image-box img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
display: block;
}
@media (max-width: 1023px) {
.constant-image-box {
height: 56vh;
max-height: 480px;
}
}
/* ── §4 WHO — display, video, asset ── */
.who-display { max-width: 56rem; margin: 0 auto; }
.who-video-frame {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
background: var(--wine);
color: var(--cream);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.who-video-frame img,
.who-video-frame video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.who-play-btn {
position: relative;
z-index: 2;
width: clamp(72px, 8vw, 104px);
height: clamp(72px, 8vw, 104px);
border-radius: 50%;
border: 0;
background: var(--red);
color: var(--cream);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: transform .25s ease;
}
.who-play-btn:hover { transform: scale(1.04); }
.who-play-btn svg { width: 38%; height: auto; fill: currentColor; margin-left: 6%; }
/* ── §6 FIRST BOND — image-left + text/form-right (45/55) ──
Pixel-aligned with §5 Mission above (same 45/55 split, same
breakpoint). Image on the LEFT, form column on the RIGHT.
Mobile: stacks, image on top. */
.firstbond-section {
display: grid;
grid-template-columns: 1fr;
align-items: stretch;
position: relative;
}
@media (min-width: 1024px) {
.firstbond-section {
grid-template-columns: minmax(0, 45%) minmax(0, 55%);
}
}
.firstbond-image-box {
position: relative;
background: var(--wine);
overflow: hidden;
min-height: 320px;
}
.firstbond-image-box img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
@media (max-width: 1023px) {
.firstbond-image-box {
height: 56vh;
max-height: 400px;
order: 2;
}
.firstbond-content { order: 1; }
}
.firstbond-content {
padding-top: var(--section-y);
padding-bottom: var(--section-y);
padding-left: clamp(1.25rem, 4vw, 3rem);
padding-right: clamp(1.25rem, 4vw, 3rem);
}
@media (min-width: 1024px) {
.firstbond-content {
padding-left: clamp(2.5rem, 5vw, 4rem);
padding-right: clamp(3rem, 6vw, 5rem);
}
}
.form-row { display: flex; flex-direction: column; gap: 0.45rem; }
.form-row-inline { display: flex; align-items: flex-start; gap: 0.75rem; }
.form-button-row { display: flex; flex-direction: column; gap: 0.75rem; align-items: flex-start; }
/* ── Editorial portrait placeholder (Phase 8 will swap in real imagery) ── */
.portrait-slot {
position: absolute;
inset: 0;
background:
repeating-linear-gradient(
135deg,
rgba(239,230,221,.07) 0 12px,
rgba(239,230,221,.02) 12px 24px
),
var(--wine);
display: flex;
align-items: flex-end;
justify-content: flex-start;
padding: 1.25rem;
}
.portrait-slot-label {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 11px;
letter-spacing: .04em;
color: var(--cream);
opacity: 0.7;
text-transform: uppercase;
}
/* ── Header — sticky on all viewports ── */
.site-header {
position: sticky;
top: 0;
z-index: 30;
background: var(--red);
box-shadow: 0 6px 20px rgba(82, 2, 1, 0.18);
}
.site-header-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
padding-top: clamp(1rem, 2vw, 1.5rem);
padding-bottom: clamp(0.75rem, 1.5vw, 1.25rem);
}
.nav-desktop { display: none; }
@media (min-width: 768px) {
.nav-desktop { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
.nav-mobile-trigger { display: none; }
}
.nav-mobile-trigger {
background: transparent;
border: 0;
color: inherit;
padding: 0.5rem;
cursor: pointer;
min-height: 44px;
min-width: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.nav-icon {
width: 26px;
height: 26px;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
fill: none;
}
/* Mobile nav overlay */
.nav-overlay {
position: fixed;
inset: 0;
z-index: 50;
background: var(--red);
color: var(--cream);
display: flex;
flex-direction: column;
padding: clamp(1.5rem, 4vw, 2.5rem);
}
.nav-overlay-list {
margin-top: auto;
margin-bottom: auto;
display: flex;
flex-direction: column;
gap: 1.25rem;
font-family: var(--font-display);
font-size: clamp(2rem, 8vw, 3rem);
line-height: 1.1;
}
.nav-overlay-list a { color: inherit; text-decoration: none; }
.nav-overlay-list a:hover { text-decoration: underline; text-underline-offset: 6px; }
.nav-overlay-lang {
display: flex;
align-items: center;
gap: 0.25rem;
font-family: var(--font-body);
font-size: 1rem;
}
/* Trigger link (§3) */
.trigger-link {
font-family: var(--font-body);
font-size: 1rem;
letter-spacing: 0.02em;
text-decoration: underline;
text-underline-offset: 6px;
text-decoration-thickness: 1px;
}
.trigger-link:hover { text-decoration-thickness: 2px; }
/* ── Scroll-triggered fade-in (brief §4.6: fade-in only) ─────
Sections fade in from a slight downward offset as they enter
the viewport. Skipped entirely under prefers-reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
.fade-in {
opacity: 0;
transform: translateY(12px);
transition: opacity 0.6s ease, transform 0.6s ease;
will-change: opacity, transform;
}
.fade-in.is-visible {
opacity: 1;
transform: none;
}
}
/* ── Toast — small inline notification (e.g. §4 play button) ── */
.kz-toast {
position: fixed;
left: 50%;
bottom: 2rem;
transform: translateX(-50%);
z-index: 70;
background: var(--wine);
color: var(--cream);
font-family: var(--font-body);
font-size: 0.95rem;
padding: 0.85rem 1.5rem;
border: 1px solid rgba(239,230,221,.25);
box-shadow: 0 8px 30px rgba(82, 2, 1, 0.35);
animation: kz-toast-in 0.25s ease both;
max-width: calc(100vw - 2rem);
text-align: center;
}
@keyframes kz-toast-in {
from { opacity: 0; transform: translate(-50%, 8px); }
to { opacity: 1; transform: translate(-50%, 0); }
}
/* ── Hover refinements ─────────────────────────────────────── */
.who-play-btn { transition: transform .25s ease, box-shadow .25s ease; }
.who-play-btn:hover { box-shadow: 0 8px 24px rgba(82, 2, 1, 0.35); }
.kz-button { transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease; }
.kz-button:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(82, 2, 1, 0.25); }
.kz-button:not(:disabled):active { transform: translateY(0); }
.kz-input.is-invalid,
.kz-select.is-invalid {
border-color: var(--red);
border-width: 2px;
padding: calc(0.55rem - 1px) calc(0.75rem - 1px);
}
.kz-error {
font-family: var(--font-body);
font-size: 0.85rem;
color: var(--red);
margin-top: 0.35rem;
}
.kz-success {
font-family: var(--font-display);
font-style: italic;
font-size: clamp(1.25rem, 2.2vw, 1.75rem);
line-height: 1.3;
color: var(--wine);
padding: 1.5rem 0;
}
/* ──────────────────────────────────────────────────────────────
MailerLite embedded form — scoped to #mlb2-42090155
Generated by MailerLite, kept verbatim so any future replacement
of the embed remains a copy-paste.
────────────────────────────────────────────────────────────── */
@import url("https://assets.mlcdn.com/fonts.css?version=1780387");
.ml-form-embedSubmitLoad { display: inline-block; width: 20px; height: 20px; }
.g-recaptcha { transform: scale(1); -webkit-transform: scale(1); transform-origin: 0 0; -webkit-transform-origin: 0 0; }
.ml-form-embedSubmitLoad:after {
content: " "; display: block; width: 11px; height: 11px; margin: 1px;
border-radius: 50%; border: 4px solid #fff;
border-color: #ffffff #ffffff #ffffff transparent;
animation: ml-form-embedSubmitLoad 1.2s linear infinite;
}
@keyframes ml-form-embedSubmitLoad { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
#mlb2-42090155.ml-form-embedContainer { box-sizing: border-box; display: table; margin: 0 auto; position: static; width: 100% !important; }
#mlb2-42090155.ml-form-embedContainer h4,
#mlb2-42090155.ml-form-embedContainer p,
#mlb2-42090155.ml-form-embedContainer span,
#mlb2-42090155.ml-form-embedContainer button { text-transform: none !important; letter-spacing: normal !important; }
#mlb2-42090155.ml-form-embedContainer .ml-form-embedWrapper { background-color: #EFE6DD; border-width: 0px; border-color: transparent; border-radius: 4px; border-style: solid; box-sizing: border-box; display: inline-block !important; margin: 0; padding: 0; position: relative; }
#mlb2-42090155.ml-form-embedContainer .ml-form-embedWrapper.embedForm { max-width: 100%; width: 100%; }
#mlb2-42090155.ml-form-embedContainer .ml-form-align-center { text-align: center; }
#mlb2-42090155.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody,
#mlb2-42090155.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody { padding: 20px 20px 0 20px; }
#mlb2-42090155.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent,
#mlb2-42090155.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent { text-align: left; margin: 0 0 20px 0; }
#mlb2-42090155.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent h4,
#mlb2-42090155.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent h4 { color: #520201; font-family: 'Merriweather', serif; font-size: 32px; font-weight: 400; margin: 0 0 10px 0; text-align: left; word-break: break-word; }
#mlb2-42090155.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent p,
#mlb2-42090155.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent p { color: #520201; font-family: 'Merriweather', serif; font-size: 17px; font-weight: 400; line-height: 23px; margin: 0 0 10px 0; text-align: left; }
#mlb2-42090155.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent p a,
#mlb2-42090155.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent p a { color: #000000; text-decoration: underline; }
#mlb2-42090155.ml-form-embedContainer .ml-form-embedWrapper .ml-block-form .ml-field-group { text-align: left !important; }
#mlb2-42090155.ml-form-embedContainer .ml-form-embedWrapper .ml-block-form .ml-field-group label { margin-bottom: 5px; color: #520201; font-size: 14px; font-family: 'Merriweather', serif; font-weight: bold; font-style: normal; text-decoration: none; display: inline-block; line-height: 20px; }
#mlb2-42090155.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody form { margin: 0; width: 100%; }
#mlb2-42090155.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-formContent,
#mlb2-42090155.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow { margin: 0 0 20px 0; width: 100%; }
#mlb2-42090155.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow { float: left; }
#mlb2-42090155.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow { margin: 0 0 10px 0; width: 100%; }
#mlb2-42090155.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow.ml-last-item { margin: 0; }
#mlb2-42090155.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input { background-color: #efe6dd !important; color: #520201 !important; border-color: #520201; border-radius: 0px !important; border-style: solid !important; border-width: 1px !important; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-size: 14px !important; height: auto; line-height: 21px !important; margin: 0; padding: 10px !important; width: 100% !important; box-sizing: border-box !important; max-width: 100% !important; }
#mlb2-42090155.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input::placeholder { color: #520201; }
#mlb2-42090155.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit { margin: 0 0 20px 0; float: left; width: 100%; }
#mlb2-42090155.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button { background-color: #cc0007 !important; border: none !important; border-radius: 0px !important; box-shadow: none !important; color: #ffffff !important; cursor: pointer; font-family: 'Merriweather', serif !important; font-size: 16px !important; font-weight: 700 !important; line-height: 21px !important; height: auto; padding: 10px !important; width: 100% !important; box-sizing: border-box !important; }
#mlb2-42090155.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button.loading { display: none; }
#mlb2-42090155.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button:hover { background-color: #520201 !important; }
#mlb2-42090155.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description { color: #520201; display: block; font-family: 'Merriweather', serif; font-size: 14px; text-align: left; margin-bottom: 0; position: relative; vertical-align: top; }
#mlb2-42090155.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow label { font-weight: normal; margin: 0; padding: 0; position: relative; display: block; min-height: 24px; padding-left: 24px; }
#mlb2-42090155.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow label a { color: #520201; text-decoration: underline; }
#mlb2-42090155.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow label p { color: #520201 !important; font-family: 'Merriweather', serif !important; font-size: 14px !important; font-weight: normal !important; line-height: 20px !important; padding: 0 !important; margin: 0 5px 0 0 !important; }
#mlb2-42090155.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow input[type="checkbox"] { box-sizing: border-box; padding: 0; position: absolute; z-index: -1; opacity: 0; margin-top: 5px; margin-left: -1.5rem; overflow: visible; }
#mlb2-42090155.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description::before { position: absolute; top: 4px; left: -1.5rem; display: block; width: 16px; height: 16px; pointer-events: none; content: ""; background-color: #ffffff; border: #adb5bd solid 1px; border-radius: 4px; }
#mlb2-42090155.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description::after { position: absolute; top: 2px !important; left: -1.5rem; display: block; width: 1rem; height: 1rem; content: ""; background: no-repeat 50%/50% 50%; }
#mlb2-42090155.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow input[type=checkbox]:checked ~ .label-description::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e"); }
#mlb2-42090155.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow input[type=checkbox]:checked ~ .label-description::before { border-color: #000000 !important; background-color: #000000 !important; }
.ml-form-recaptcha { margin-bottom: 20px; }
.ml-form-recaptcha.ml-error iframe { border: solid 1px #ff0000; }
.ml-error input, .ml-error textarea, .ml-error select { border-color: red !important; }
.ml-error .label-description, .ml-error .label-description p, .ml-error .label-description p a, .ml-error label:first-child { color: #ff0000 !important; }
@media only screen and (max-width: 480px) {
.ml-form-recaptcha { width: 220px !important; }
.g-recaptcha { transform: scale(0.78); -webkit-transform: scale(0.78); transform-origin: 0 0; -webkit-transform-origin: 0 0; }
}
@media only screen and (max-width: 400px) {
#mlb2-42090155.ml-form-embedContainer .ml-form-embedWrapper.embedForm { width: 100% !important; }
}