/* ════════════════════════════════════════════════════════════ BY MAHMOUD — VISUAL BASELINE v3.0 May 2026 — "Alluring · Unapologetic · Elite" THE INVERSION ───────────────────────────────────────────────────────────── R3 Montserrat 200 uppercase = DISPLAY voice (the dare) Wordmarks, page heroes, section openers. Front-and-centre, large, structural. R1 Editorial Old italic = WHISPER voice (the seduction) One italic moment per section. Always smaller than the R3 it sits beside. The jewel, not the architecture. R2 Editorial Old upright = MANIFESTO voice (the verdict) Once per page maximum. The line of record. THE LOCKUP — "on X_" pattern ───────────────────────────────────────────────────────────── on MAHMOUD_ ← italic prefix · gap · R3 caps · underscore on RETURN_ on STANCE_ Use for every section opener AND the page hero. Three underscore states: _ static (default) ▎ blinking caret .lockup-caret.is-typing █ solid block — the dare .lockup-caret.is-block COLOUR — three layers ───────────────────────────────────────────────────────────── 1. Permanent core: Midnight · Linen · Spotlight Red 2. World moods: one per page area (--aq-* aquatic for Show, --gold-* for The Book, etc.) 3. Content moods: optional per episode/story (Netflix logic) ════════════════════════════════════════════════════════════ */ :root { /* Fonts ───────────────────────────────────────────────────────────── PP Neue Montreal — display + system sans. Same foundry as Editorial Old (Pangram Pangram). Designed-to-coexist pair. R3 wordmark uses --sans at weight 200 → renders Light. R1 italic always uses --serif (never sans-italic). --sans-text uses the optical body variant for paragraphs <18px. */ --serif: 'EditorialOld', Georgia, serif; --sans: 'PPNeueMontreal', 'Helvetica Neue', sans-serif; --sans-text: 'PPNeueMontrealText', 'PPNeueMontreal', 'Helvetica Neue', sans-serif; /* ── PERMANENT CORE ── */ --ink: #0E0E10; /* Midnight Leather */ --ink-soft: #161618; --ink-card: #1c1c1e; --red: #C41E3A; /* Spotlight Carpet */ --red-deep: #8C1428; /* Stained Rouge */ --linen: #F5EFE6; /* Sunwashed Linen */ --linen-d: #EDE5D8; --linen-dd: #D8CFC0; --jasmine: #FBF7F0; /* Jasmine Veil — long-form bg */ /* ── AQUATIC WORLD (Season Two: On Return) ── */ --aq-wash: #E8F6FA; --aq-pale: #D0EDF4; --aq-mid: #4CA8C2; --aq-deep: #1B5F72; --aq-deeper: #103D4A; --aq-ink: #0D3240; --aq-ink-mid: #2A7A92; } /* ════════════════════════════════════════════════════════════ SEASON 1 — "O for OMG" world override ───────────────────────────────────────────────────────────── When is present, the --aq-* tokens are shadowed by a rouge/wine palette. The aquatic VALUES at :root above are preserved (archived, not deleted) — flipping back to Season 2 is one line: remove the body class. In this season the brand's permanent accent (Spotlight Red) and the season world-color merge into one tonal family. The verdict said "no second accent ever" — Season 1 honors that by letting the accent BECOME the season atmosphere. Wherever Show used .mode-aq-deep / .mode-aq-pale / .mode-aq- mid / .ep-aq-chip, the markup stays unchanged. Only the resolved colour values shift. ════════════════════════════════════════════════════════════ */ body.season-1 { --aq-wash: #FBF0F1; /* Rose Linen — palest world ground */ --aq-pale: #F0D8DC; /* Pale Rose Mist */ --aq-mid: #C41E3A; /* Spotlight Red — season identity = brand accent */ --aq-deep: #6B0F20; /* Deep Wine — episode panels */ --aq-deeper: #2C060C; /* Bordeaux — darkest, footer only */ --aq-ink: #1A0506; /* Near-black for text on light grounds */ --aq-ink-mid: #5C1422; /* Mid border / muted text on red */ } :root { /* ── WARM WORLD (The Book — placeholder for next world) ── */ --gold-pale: #F2E8D6; --gold-mid: #B8924C; --tobacco: #4A2E1C; /* ── TYPE SCALE — INVERTED ── */ --t-display: clamp(64px, 10vw, 168px); /* Hero lockup — one per page */ --t-section: clamp(48px, 7.5vw, 120px); /* "on X_" section opener */ --t-headline: clamp(40px, 6vw, 84px); /* Sub-section R3 headline */ --t-italic-sub: clamp(22px, 2.6vw, 40px); /* R1 italic whisper — the jewel */ --t-sub: clamp(20px, 2.4vw, 30px); /* Subhead reading scale */ --t-quote: clamp(22px, 2.2vw, 32px); /* R1 italic quote, reading scale */ --t-body: clamp(15px, 1.4vw, 17px); /* MIN 15px body */ --t-meta: 14px; --t-eyebrow: 11px; --t-btn: 11px; --t-nav: 11px; /* ── TRACKING ── */ --track-display: -0.025em; /* Tight at display scale */ --track-section: -0.015em; --track-eyebrow: 0.18em; --track-nav: 0.14em; --track-body: 0.01em; --track-meta: 0.05em; --track-btn: 0.18em; --track-fn: 0.04em; /* R3 structural caps */ --track-block: 0.04em; /* Bracket-numbering small caps */ /* ── LINE HEIGHTS ── */ --lh-display: 0.86; --lh-headline: 0.88; --lh-italic: 1.08; --lh-sub: 1.18; --lh-body: 1.72; --lh-quote: 1.42; --lh-meta: 1.58; /* ── RHYTHM ── */ --pad-page: clamp(28px, 4vw, 64px); --pad-section: clamp(80px, 12vh, 160px); } /* ──────────────────────────────────────────────────────────── */ /* BASE */ /* ──────────────────────────────────────────────────────────── */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; /* `overflow-x: clip` blocks horizontal overflow without creating a scroll container — critical because `overflow-x: hidden` silently breaks position: sticky on descendants. */ overflow-x: clip; } body { background: var(--ink); color: var(--linen); font-family: var(--sans-text); /* optical body cut — drawn for <18px */ font-size: var(--t-body); font-weight: 400; /* Text-Book is one weight; 400 picks it */ letter-spacing: var(--track-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "kern" 1, "calt" 1, "ss01" 1; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } /* Page modes — set on or section */ .mode-ink { background: var(--ink); color: var(--linen); } .mode-linen { background: var(--linen); color: var(--ink); } .mode-jasmine { background: var(--jasmine); color: var(--ink); } .mode-aq-pale { background: var(--aq-wash); color: var(--aq-ink); } .mode-aq-mid { background: var(--aq-mid); color: #fff; } .mode-aq-deep { background: var(--aq-deep); color: var(--aq-wash); } .mode-aq-deeper { background: var(--aq-deeper); color: var(--aq-wash); } .mode-red { background: var(--red); color: var(--linen); } /* ──────────────────────────────────────────────────────────── */ /* REGISTERS */ /* ──────────────────────────────────────────────────────────── */ .r1 { font-family: var(--serif); font-style: italic; font-weight: 200; letter-spacing: -0.01em; } .r2 { font-family: var(--serif); font-style: normal; font-weight: 400; letter-spacing: -0.02em; } .r3 { font-family: var(--sans); font-style: normal; font-weight: 200; letter-spacing: var(--track-fn); text-transform: uppercase; } /* ──────────────────────────────────────────────────────────── */ /* EYEBROW · META · BUTTON · BLOCK NUM */ /* ──────────────────────────────────────────────────────────── */ .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-weight: 500; font-size: var(--t-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--red); } .eyebrow.is-mute { color: rgba(245,239,230, 0.62); } .mode-linen .eyebrow.is-mute, .mode-jasmine .eyebrow.is-mute, .mode-aq-pale .eyebrow.is-mute { color: rgba(14,14,16, 0.65); } .eyebrow-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--red); flex-shrink: 0; } .meta { font-family: var(--sans); font-weight: 300; font-size: var(--t-meta); letter-spacing: var(--track-meta); line-height: var(--lh-meta); } .btn { display: inline-block; font-family: var(--sans); font-weight: 500; font-size: var(--t-btn); letter-spacing: var(--track-btn); text-transform: uppercase; text-decoration: none; padding: 14px 30px; cursor: pointer; transition: transform .25s ease, background-color .25s, color .25s, border-color .25s; border: 0; } .btn:hover { transform: translateY(-1px); } .btn-linen { color: var(--ink); background: var(--linen); } .btn-ink { color: var(--linen); background: var(--ink); } .btn-red { color: #fff; background: var(--red); } .btn-aqua { color: #fff; background: var(--aq-mid); } .btn-ghost { color: rgba(245,239,230, 0.92); background: transparent; border: 0.5px solid rgba(245,239,230, 0.42); } .btn-ghost:hover { color: var(--linen); border-color: rgba(245,239,230, 0.7); } .btn-ghost-dk { color: rgba(14,14,16, 0.85); background: transparent; border: 0.5px solid rgba(14,14,16, 0.42); } /* Bracket numbering — [01] block style */ .block-num { font-family: var(--sans); font-weight: 400; font-size: var(--t-eyebrow); letter-spacing: var(--track-block); font-variant-numeric: tabular-nums; color: currentColor; opacity: 0.5; } .block-num::before { content: '['; margin-right: 1px; } .block-num::after { content: ']'; margin-left: 1px; } /* ──────────────────────────────────────────────────────────── */ /* THE LOCKUP — "on X_" signature */ /* ──────────────────────────────────────────────────────────── */ /* ──────────────────────────────────────────────────────────────── */ /* THE LOCKUP — two variants */ /* */ /* .lockup = standalone wordmark for sections/properties */ /* e.g. THE SHOW_ · THE EDITORIAL_ · THE WORK_ */ /* */ /* .lockup-on = preposition + word for seasons/episodes */ /* e.g. on RETURN_ · on SEASON ONE_ · on FRAGRANCE_ */ /* */ /* "on" is a preposition (about/in this) — not a section label. */ /* ──────────────────────────────────────────────────────────────── */ .lockup { display: inline-flex; align-items: baseline; line-height: var(--lh-display); color: currentColor; } .lockup .lockup-word { font-family: var(--sans); font-weight: 200; font-size: var(--t-display); line-height: var(--lh-display); letter-spacing: var(--track-display); text-transform: uppercase; } .lockup.is-section .lockup-word { font-size: var(--t-section); } .lockup.is-marquee .lockup-word { font-size: clamp(72px, 12vw, 200px); } .lockup.is-over-media .lockup-word { font-weight: 300; text-shadow: 0 2px 32px rgba(0,0,0,0.45), 0 0 60px rgba(0,0,0,0.25); } .lockup-on { display: inline-flex; align-items: baseline; column-gap: clamp(20px, 4.5vw, 92px); line-height: var(--lh-display); color: currentColor; } .lockup-prefix { font-family: var(--serif); font-style: italic; font-weight: 200; font-size: var(--t-italic-sub); letter-spacing: -0.005em; opacity: 0.78; } .lockup-word { font-family: var(--sans); font-weight: 200; font-size: var(--t-display); line-height: var(--lh-display); letter-spacing: var(--track-display); text-transform: uppercase; } .lockup-caret { display: inline-block; margin-left: 0.04em; color: currentColor; /* Default: inherits text colour — quiet */ } /* Red "signature" caret — reserved for page-hero mastheads ONLY. Anywhere else (section H2s, card titles, body), the caret stays in text colour. */ .lockup-caret.is-mark { color: var(--red); } .lockup-caret.is-typing { color: var(--red); animation: lockup-blink 1.05s steps(2) infinite; } .lockup-caret.is-block::before { content: '\2588'; } /* █ */ @keyframes lockup-blink { 50% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .lockup-caret.is-typing { animation: none; } } /* Section opener size */ .lockup-on.is-section .lockup-word { font-size: var(--t-section); } /* Marquee — main-event section opener, bigger than section, smaller than hero */ .lockup-on.is-marquee .lockup-word { font-size: clamp(72px, 12vw, 200px); } /* Over-media variant — bump weight to Light (300) so the stroke survives moving footage / busy backgrounds without lighting up the hairlines. */ .lockup-on.is-over-media .lockup-word { font-weight: 300; text-shadow: 0 2px 32px rgba(0,0,0,0.45), 0 0 60px rgba(0,0,0,0.25); } .lockup-on.is-over-media .lockup-prefix { opacity: 0.92; } /* ──────────────────────────────────────────────────────────── */ /* NAV */ /* ──────────────────────────────────────────────────────────── */ nav.site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; justify-content: space-between; align-items: center; padding: 22px var(--pad-page); background: rgba(14, 14, 16, 0.86); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 0.5px solid rgba(245, 239, 230, 0.06); transition: background-color .25s, border-color .25s, color .25s; } .mode-linen nav.site-nav, .mode-jasmine nav.site-nav, .mode-aq-pale nav.site-nav { background: rgba(245, 239, 230, 0.86); border-bottom-color: rgba(14, 14, 16, 0.08); } .nav-logo { font-family: var(--sans); font-weight: 500; font-size: var(--t-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--linen); display: inline-flex; align-items: center; font-feature-settings: "kern" 1, "calt" 1; } .mode-linen .nav-logo, .mode-jasmine .nav-logo, .mode-aq-pale .nav-logo { color: var(--ink); } /* ─── EM-DASH TUNING ───────────────────────────────────────── The em-dash (U+2014) is drawn by type designers to sit at x-height (mid-lowercase). At all-caps display use it floats ~6% below the optical cap-midline and reads as a hairline relative to the substantial caps. Three corrections: 1. translateY — raise dash to cap-midline 2. scaleX — shorten from 1em (running-text width) to ~0.78em so it reads as a gesture, not a rule 3. font-weight — thicken stroke so it matches cap stroke at the surrounding weight (200/300) This is the CSS-tuned version of a drawn wordmark. ────────── */ .nav-logo-dash { display: inline-block; font-weight: 400; transform: translateY(-0.06em) scaleX(0.78); transform-origin: center center; margin-right: -0.02em; } /* Larger em-dash sibling — for masthead-scale uses (Bio byline, article author block). Stroke contrast at large size needs less aggressive thickening. */ .em-dash-tuned { display: inline-block; transform: translateY(-0.08em) scaleX(0.72); transform-origin: center center; margin-right: -0.02em; } .nav-links { display: flex; align-items: center; gap: clamp(20px, 3vw, 40px); list-style: none; } .nav-links a { font-family: var(--sans); font-weight: 300; font-size: var(--t-nav); letter-spacing: var(--track-nav); text-transform: uppercase; color: rgba(245, 239, 230, 0.5); transition: color .2s; } .mode-linen .nav-links a, .mode-jasmine .nav-links a, .mode-aq-pale .nav-links a { color: rgba(14, 14, 16, 0.55); } .nav-links a:hover { color: var(--linen); } .mode-linen .nav-links a:hover, .mode-jasmine .nav-links a:hover, .mode-aq-pale .nav-links a:hover { color: var(--ink); } .nav-links a.is-active { color: var(--linen); font-weight: 500; } .mode-linen .nav-links a.is-active, .mode-jasmine .nav-links a.is-active, .mode-aq-pale .nav-links a.is-active { color: var(--ink); } .nav-cta { background: var(--red) !important; color: #fff !important; font-weight: 500 !important; padding: 8px 18px !important; } /* ──────────────────────────────────────────────────────────── */ /* GRAIN OVERLAY */ /* ──────────────────────────────────────────────────────────── */ .grain { position: absolute; inset: 0; opacity: 0.045; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 512px; mix-blend-mode: overlay; z-index: 2; } /* ──────────────────────────────────────────────────────────── */ /* REVEAL */ /* ──────────────────────────────────────────────────────────── */ .reveal { opacity: 0; transform: translateY(14px); transition: opacity .9s ease, transform .9s ease; } .reveal.is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }