/* Fonts load from a <link> in base.html's site_head, not an @import here --
   an @import serializes the font fetch behind this whole stylesheet, and
   LOGIN_BRANDING reuses the same href for the SSO login card. */

/* ===========================================================================
   MIDNIGHT BALLERINA — "the dress"
   A single stylesheet that themes both the custom content pages and the
   peep service pages (join, account, login, etc.).
   Brand: artistic, fluid, graceful, feminine.
   Palette: midnight violet / indigo + black, with one garnet accent.
   Type: Cormorant (display, editorial), Hanken Grotesk (interface).
   ===========================================================================*/

/* ---- 1. Tokens --------------------------------------------------------- */
:root {
  /* Surfaces — deep violet-indigo, kept soft & luminous (never flat black) */
  --mb-black:      #0a0711;
  --mb-midnight:   #110b1e;   /* page base                 */
  --mb-violet:     #1a1330;   /* raised surface            */
  --mb-violet-2:   #251a45;   /* hover / nested surface    */
  --mb-indigo:     #3a2c66;   /* decorative, dividers      */
  --mb-haze:       rgba(150,120,210,0.14); /* lavender glow */

  /* The single accent */
  --mb-garnet:     #bd2040;
  --mb-garnet-d:   #8c142d;
  --mb-garnet-l:   #e6485f;
  --mb-rose:       #e7b0b8;

  /* Ink on dark */
  --mb-bone:       #f6f0f2;
  --mb-silver:     #cabfda;
  --mb-muted:      #8f86a6;
  --mb-line:       rgba(202,191,218,0.13);
  --mb-line-2:     rgba(202,191,218,0.26);

  /* Type */
  --mb-display: 'Cormorant', Georgia, 'Times New Roman', serif;
  --mb-text:    'Cormorant Garamond', Georgia, serif;
  --mb-ui:      'Hanken Grotesk', system-ui, -apple-system, Segoe UI, sans-serif;

  /* Form / shape */
  --mb-radius:    3px;
  --mb-radius-lg: 5px;
  --mb-ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --mb-slow:      0.7s var(--mb-ease);
  --mb-med:       0.42s var(--mb-ease);
  --mb-fast:      0.22s var(--mb-ease);

  /* Layout */
  --mb-gutter: clamp(1.25rem, 5vw, 5rem);
  --mb-max: 1280px;
  --mb-max-narrow: 760px;

  --mb-shadow: 0 30px 80px -40px rgba(0,0,0,0.85);
  --mb-glow:   0 0 0 1px rgba(189,32,64,0.35), 0 12px 40px -12px rgba(189,32,64,0.45);
}

/* ---- 2. Reset & base --------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--mb-ui);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--mb-silver);
  background-color: var(--mb-midnight);
  font-weight: 400;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Ambient depth — a soft moonlit glow + the faintest grain, for luminance */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(120% 80% at 78% -8%, rgba(94,60,150,0.40), transparent 60%),
    radial-gradient(90% 70% at 6% 102%, rgba(120,30,60,0.20), transparent 55%),
    linear-gradient(180deg, var(--mb-black), var(--mb-midnight) 30%, var(--mb-midnight));
}
body::after {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection { background: var(--mb-garnet); color: var(--mb-bone); }

:focus-visible {
  outline: 2px solid var(--mb-garnet-l);
  outline-offset: 3px;
  border-radius: 1px;
}

img, video { display: block; max-width: 100%; height: auto; }

/* Slim, themed scrollbar */
* { scrollbar-width: thin; scrollbar-color: var(--mb-indigo) transparent; }
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-thumb { background: var(--mb-indigo); border-radius: 20px; border: 3px solid var(--mb-midnight); }
*::-webkit-scrollbar-thumb:hover { background: var(--mb-garnet-d); }

/* ---- 3. Typography ----------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--mb-display);
  color: var(--mb-bone);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: 0.005em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 6vw, 5rem); font-weight: 400; }
h2 { font-size: clamp(2rem, 4vw, 3.3rem); font-weight: 400; }
h3 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); }
h4 { font-size: 1.3rem; }

p { margin: 0 0 1.1em; }
a { color: var(--mb-rose); text-decoration: none; transition: color var(--mb-fast); }
a:hover { color: var(--mb-garnet-l); }

strong { color: var(--mb-bone); font-weight: 600; }
em { font-style: italic; }
hr { border: 0; height: 1px; background: var(--mb-line); margin: 2.5rem 0; }

blockquote {
  font-family: var(--mb-display);
  font-style: italic;
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  line-height: 1.3;
  color: var(--mb-bone);
  margin: 2rem 0;
  padding-left: 1.4rem;
  border-left: 2px solid var(--mb-garnet);
}

/* Display helpers */
.mb-display {
  font-family: var(--mb-display);
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: 0.01em;
  color: var(--mb-bone);
}
.mb-script { font-style: italic; font-weight: 400; }
.mb-garnet { color: var(--mb-garnet-l); }

.mb-eyebrow {
  font-family: var(--mb-ui);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--mb-garnet-l);
  margin: 0 0 1.3rem;
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  white-space: nowrap;
}
.mb-eyebrow--bone { color: var(--mb-silver); }
.mb-eyebrow::before {
  content: ""; width: 2.2rem; height: 1px; background: currentColor; opacity: 0.6;
}
.mb-eyebrow--center { justify-content: center; }
.mb-eyebrow--center::after {
  content: ""; width: 2.2rem; height: 1px; background: currentColor; opacity: 0.6;
}

.mb-lede {
  font-family: var(--mb-text);
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  line-height: 1.5;
  color: var(--mb-silver);
  font-weight: 400;
}
.mb-meta {
  font-family: var(--mb-ui);
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mb-muted);
}

/* ---- 4. Layout --------------------------------------------------------- */
.mb-container { width: 100%; max-width: var(--mb-max); margin-inline: auto; padding-inline: var(--mb-gutter); }
.mb-narrow { max-width: var(--mb-max-narrow); }
.mb-section { padding-block: clamp(4.5rem, 10vw, 9rem); position: relative; }
.mb-section--tight { padding-block: clamp(3rem, 6vw, 5rem); }

.mb-rule { height: 1px; background: var(--mb-line); border: 0; }
.mb-center { text-align: center; }

.mb-grid { display: grid; gap: clamp(1.25rem, 2.4vw, 2.2rem); }
.mb-cols-2 { grid-template-columns: repeat(2, 1fr); }
.mb-cols-3 { grid-template-columns: repeat(3, 1fr); }
.mb-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* Section heading cluster */
.mb-head { max-width: 620px; }
.mb-head--center { margin-inline: auto; text-align: center; }
.mb-head p { color: var(--mb-silver); font-family: var(--mb-text); font-size: 1.2rem; }

/* ---- 5. Header / navigation ------------------------------------------- */
.mb-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem;
  padding: 1.4rem var(--mb-gutter);
  transition: background var(--mb-med), padding var(--mb-med), border-color var(--mb-med);
  border-bottom: 1px solid transparent;
}
.mb-header.is-scrolled {
  background: rgba(13,9,24,0.82);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  border-bottom-color: var(--mb-line);
  padding-block: 1rem;
}

.mb-wordmark {
  font-family: var(--mb-display);
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--mb-bone);
  line-height: 1;
  display: inline-flex; align-items: baseline; gap: 0.45rem;
  white-space: nowrap;
}
.mb-wordmark b { font-weight: 500; }
.mb-wordmark .mb-wordmark__sub {
  font-family: var(--mb-ui); font-size: 0.58rem; letter-spacing: 0.34em;
  text-transform: uppercase; color: var(--mb-garnet-l); font-weight: 600;
  align-self: center;
}
.mb-wordmark:hover { color: var(--mb-bone); }

.mb-nav { display: flex; align-items: center; gap: clamp(1.2rem, 2.5vw, 2.6rem); }
.mb-nav a {
  font-family: var(--mb-ui); font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--mb-silver);
  position: relative; padding: 0.3rem 0;
}
.mb-nav a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 1px; width: 0;
  background: var(--mb-garnet); transition: width var(--mb-med);
}
.mb-nav a:hover, .mb-nav a[aria-current] { color: var(--mb-bone); }
.mb-nav a:hover::after, .mb-nav a[aria-current]::after { width: 100%; }

.mb-header__actions { display: flex; align-items: center; gap: 1rem; }

.mb-burger { display: none; background: none; border: 0; color: var(--mb-bone); cursor: pointer; padding: 0.4rem; }

/* ---- 6. Buttons -------------------------------------------------------- */
.mb-btn, button.mb-btn, a.mb-btn {
  --b: var(--mb-line-2);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  font-family: var(--mb-ui); font-size: 0.76rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--mb-bone); background: transparent;
  padding: 1.05em 2.1em; border: 1px solid var(--b); border-radius: var(--mb-radius);
  cursor: pointer; transition: all var(--mb-med); position: relative; overflow: hidden;
  text-decoration: none; line-height: 1; white-space: nowrap;
}
.mb-btn:hover { color: var(--mb-bone); }
.mb-btn--primary {
  --b: var(--mb-garnet);
  background: var(--mb-garnet); color: var(--mb-bone);
}
.mb-btn--primary:hover {
  background: var(--mb-garnet-l); --b: var(--mb-garnet-l);
  box-shadow: var(--mb-glow); transform: translateY(-1px);
}
.mb-btn--ghost:hover { --b: var(--mb-bone); background: rgba(246,240,242,0.05); transform: translateY(-1px); }
.mb-btn--small { padding: 0.75em 1.4em; font-size: 0.68rem; }
.mb-btn--block { display: flex; width: 100%; }
.mb-btn:disabled, .mb-btn[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }

/* Text / inline link button */
.mb-link {
  font-family: var(--mb-ui); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--mb-bone);
  display: inline-flex; align-items: center; gap: 0.6rem; position: relative;
}
.mb-link::after { content: "\2192"; transition: transform var(--mb-med); color: var(--mb-garnet-l); }
.mb-link:hover { color: var(--mb-bone); }
.mb-link:hover::after { transform: translateX(5px); }

/* ---- 7. Forms (the full standard set) ---------------------------------- */
.mb-form { display: grid; gap: 1.5rem; }
.mb-field { display: grid; gap: 0.5rem; }
.mb-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }

label, .mb-label {
  font-family: var(--mb-ui); font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--mb-silver);
}
.mb-label .req { color: var(--mb-garnet-l); margin-left: 0.2rem; }
.mb-help { font-size: 0.85rem; color: var(--mb-muted); letter-spacing: 0; text-transform: none; font-weight: 400; }

input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="search"], input[type="tel"], input[type="url"], input[type="date"],
input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"],
textarea, select {
  font-family: var(--mb-ui); font-size: 1rem; color: var(--mb-bone);
  background: rgba(10,7,17,0.55); border: 1px solid var(--mb-line-2);
  border-radius: var(--mb-radius); padding: 0.85em 1em; width: 100%;
  transition: border-color var(--mb-fast), box-shadow var(--mb-fast), background var(--mb-fast);
  appearance: none; -webkit-appearance: none;
}
textarea { min-height: 8rem; resize: vertical; line-height: 1.6; }
input::placeholder, textarea::placeholder { color: var(--mb-muted); }
input:hover, textarea:hover, select:hover { border-color: var(--mb-line-2); background: rgba(10,7,17,0.75); }
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--mb-garnet);
  box-shadow: 0 0 0 3px rgba(189,32,64,0.22);
  background: rgba(10,7,17,0.85);
}
input:disabled, textarea:disabled, select:disabled { opacity: 0.45; cursor: not-allowed; }
input[aria-invalid="true"], .mb-field--error input, .mb-field--error textarea, .mb-field--error select {
  border-color: var(--mb-garnet-l); box-shadow: 0 0 0 3px rgba(230,72,95,0.18);
}

/* Select with custom caret */
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3 5l4 4 4-4' fill='none' stroke='%23e6485f' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1em center; padding-right: 2.6em; cursor: pointer;
}
select option { background: var(--mb-violet); color: var(--mb-bone); }

/* Custom checkbox & radio */
.mb-check { display: inline-flex; align-items: flex-start; gap: 0.7rem; cursor: pointer;
  font-family: var(--mb-ui); font-size: 0.95rem; letter-spacing: 0; text-transform: none;
  font-weight: 400; color: var(--mb-silver); line-height: 1.4; }
.mb-check input[type="checkbox"], .mb-check input[type="radio"] {
  appearance: none; -webkit-appearance: none; flex: none;
  width: 1.2rem; height: 1.2rem; margin: 0.08rem 0 0; background: rgba(10,7,17,0.6);
  border: 1px solid var(--mb-line-2); cursor: pointer;
  transition: all var(--mb-fast); display: grid; place-content: center;
}
.mb-check input[type="checkbox"] { border-radius: 3px; }
.mb-check input[type="radio"] { border-radius: 50%; }
.mb-check input:hover { border-color: var(--mb-garnet); }
.mb-check input[type="checkbox"]::after {
  content: ""; width: 0.65rem; height: 0.4rem; margin-top: -0.1rem;
  border-left: 2px solid var(--mb-bone); border-bottom: 2px solid var(--mb-bone);
  transform: rotate(-45deg) scale(0); transition: transform var(--mb-fast);
}
.mb-check input[type="radio"]::after {
  content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%;
  background: var(--mb-bone); transform: scale(0); transition: transform var(--mb-fast);
}
.mb-check input:checked { background: var(--mb-garnet); border-color: var(--mb-garnet); }
.mb-check input:checked::after { transform: rotate(-45deg) scale(1); }
.mb-check input[type="radio"]:checked::after { transform: scale(1); }
.mb-check input:focus-visible { outline: 2px solid var(--mb-garnet-l); outline-offset: 2px; }

/* Toggle switch */
.mb-switch { display: inline-flex; align-items: center; gap: 0.75rem; cursor: pointer;
  font-family: var(--mb-ui); font-size: 0.9rem; color: var(--mb-silver); }
.mb-switch input { appearance: none; -webkit-appearance: none; width: 2.7rem; height: 1.4rem;
  background: rgba(10,7,17,0.7); border: 1px solid var(--mb-line-2); border-radius: 20px;
  position: relative; cursor: pointer; transition: background var(--mb-med), border-color var(--mb-med); }
.mb-switch input::after { content: ""; position: absolute; top: 50%; left: 0.18rem; transform: translateY(-50%);
  width: 0.95rem; height: 0.95rem; border-radius: 50%; background: var(--mb-silver); transition: all var(--mb-med); }
.mb-switch input:checked { background: var(--mb-garnet); border-color: var(--mb-garnet); }
.mb-switch input:checked::after { left: calc(100% - 1.13rem); background: var(--mb-bone); }

/* Range */
input[type="range"] { appearance: none; -webkit-appearance: none; width: 100%; height: 2px;
  background: var(--mb-line-2); border-radius: 2px; cursor: pointer; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 1.1rem; height: 1.1rem;
  border-radius: 50%; background: var(--mb-garnet); border: 2px solid var(--mb-bone); margin-top: -1px;
  transition: transform var(--mb-fast); box-shadow: 0 2px 8px rgba(0,0,0,0.5); }
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }
input[type="range"]::-moz-range-thumb { width: 1.1rem; height: 1.1rem; border-radius: 50%;
  background: var(--mb-garnet); border: 2px solid var(--mb-bone); cursor: pointer; }

/* File input */
input[type="file"] { font-family: var(--mb-ui); font-size: 0.9rem; color: var(--mb-silver); }
input[type="file"]::file-selector-button {
  font-family: var(--mb-ui); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--mb-bone); background: var(--mb-violet-2);
  border: 1px solid var(--mb-line-2); border-radius: var(--mb-radius); padding: 0.7em 1.2em;
  margin-right: 1rem; cursor: pointer; transition: all var(--mb-fast); }
input[type="file"]::file-selector-button:hover { background: var(--mb-garnet); border-color: var(--mb-garnet); }

fieldset { border: 1px solid var(--mb-line); border-radius: var(--mb-radius-lg); padding: 1.5rem; margin: 0; }
legend { font-family: var(--mb-ui); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--mb-garnet-l); padding-inline: 0.6rem; }

/* Inline newsletter / search group */
.mb-inline-form { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.mb-inline-form input { flex: 1; min-width: 12rem; }

/* ---- 8. Cards & media -------------------------------------------------- */
.mb-figure {
  position: relative; overflow: hidden; border-radius: var(--mb-radius-lg);
  background: var(--mb-violet); display: block; isolation: isolate;
}
.mb-figure img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.1s var(--mb-ease), filter var(--mb-slow);
  filter: saturate(0.94) brightness(0.96);
}
.mb-figure::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, transparent 38%, rgba(10,7,17,0.78));
  opacity: 0.85; transition: opacity var(--mb-slow);
}
a.mb-figure:hover img, .mb-card:hover .mb-figure img { transform: scale(1.045); filter: saturate(1.05) brightness(1.02); }

.mb-ratio-portrait { aspect-ratio: 3 / 4; }
.mb-ratio-square   { aspect-ratio: 1 / 1; }
.mb-ratio-wide     { aspect-ratio: 16 / 9; }
.mb-ratio-tall     { aspect-ratio: 2 / 3; }

.mb-card { display: flex; flex-direction: column; gap: 1rem; }
.mb-card__cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 1.5rem; }
.mb-card__title { font-family: var(--mb-display); color: var(--mb-bone); font-size: 1.7rem; line-height: 1.05; margin: 0; }
.mb-card__sub { font-family: var(--mb-ui); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mb-silver); margin: 0 0 0.5rem; }
.mb-card__line { font-family: var(--mb-ui); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mb-garnet-l);
  display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.7rem; opacity: 0; transform: translateY(8px); transition: all var(--mb-med); }
.mb-card:hover .mb-card__line, a.mb-figure:hover .mb-card__line { opacity: 1; transform: translateY(0); }

/* tag / pill */
.mb-tag {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--mb-ui); font-size: 0.64rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--mb-bone); background: rgba(10,7,17,0.6); border: 1px solid var(--mb-line-2);
  padding: 0.45em 0.85em; border-radius: 40px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.mb-tag--garnet { background: var(--mb-garnet); border-color: var(--mb-garnet); }
.mb-tag--count { color: var(--mb-silver); }

/* Locked overlay for member-only previews */
.mb-locked::before {
  content: ""; position: absolute; inset: 0; z-index: 3;
  -webkit-backdrop-filter: blur(13px) saturate(0.8); backdrop-filter: blur(13px) saturate(0.8);
  background: rgba(13,9,24,0.4);
}
.mb-locked__badge {
  position: absolute; z-index: 4; top: 50%; left: 50%; transform: translate(-50%,-50%);
  display: inline-flex; flex-direction: column; align-items: center; gap: 0.6rem; text-align: center;
  font-family: var(--mb-ui); font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--mb-bone);
}
.mb-locked__badge svg { opacity: 0.9; }

/* ---- 9. Hero ----------------------------------------------------------- */
.mb-hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; }
.mb-hero__media { position: absolute; inset: 0; z-index: 0;
  /* Production hero media (poster + video) is a bring-up step (home.html's
     own comment) -- until it lands, both the <video> source and its poster
     404 and paint nothing. This gradient (the design's own scrim colours)
     reads as a deliberate dark panel either way, so a missing asset never
     shows as a blank band on the site's most important page -- ygh's own
     home hero is the same placeholder-first pattern. */
  background: linear-gradient(160deg, var(--mb-violet) 0%, var(--mb-midnight) 55%, var(--mb-black) 100%);
}
.mb-hero__media video, .mb-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.mb-hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(13,9,24,0.5) 0%, transparent 26%, transparent 50%, rgba(11,7,18,0.9) 100%),
    radial-gradient(120% 100% at 50% 120%, rgba(120,30,60,0.3), transparent 55%);
}
.mb-hero__inner { position: relative; z-index: 2; width: 100%; padding-bottom: clamp(3.5rem, 8vh, 7rem); }

/* ---- 10. Footer -------------------------------------------------------- */
.mb-footer { border-top: 1px solid var(--mb-line); background: linear-gradient(180deg, transparent, rgba(10,7,17,0.6)); position: relative; }
.mb-footer::before { content: ""; position: absolute; top: -1px; left: 0; width: 38%; height: 2px;
  background: linear-gradient(90deg, var(--mb-garnet), transparent); }
.mb-footer__top { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 2.5rem;
  padding-block: clamp(3.5rem, 7vw, 6rem); }
.mb-footer__brand .mb-wordmark { font-size: 2rem; }
.mb-footer__brand p { color: var(--mb-muted); font-family: var(--mb-text); font-size: 1.05rem; max-width: 30ch; margin-top: 1rem; }
.mb-footer h5 { font-family: var(--mb-ui); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--mb-garnet-l); margin: 0 0 1.2rem; }
.mb-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.mb-footer ul a { color: var(--mb-silver); font-size: 0.92rem; }
.mb-footer ul a:hover { color: var(--mb-bone); }
.mb-footer__bar { border-top: 1px solid var(--mb-line); padding-block: 1.6rem; display: flex; flex-wrap: wrap;
  gap: 1rem 2rem; align-items: center; justify-content: space-between; }
.mb-footer__bar small { color: var(--mb-muted); font-size: 0.78rem; letter-spacing: 0.04em; }
.mb-footer__legal { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.mb-footer__legal a { color: var(--mb-muted); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; }

/* ---- 11. Reveal-on-scroll & motion ------------------------------------- */
/* Inverted from the handoff on purpose (Task 7 Step 5). The handoff wrote
   `.mb-reveal { opacity: 0 }` unconditionally and relied on mba.js to add
   .is-visible -- so a blocked, failed or disabled script left every
   .mb-reveal element (15 on the home page, 12 on galleries, 10 on videos,
   9 on a gallery, 7 on a story) permanently invisible, and no template test
   could catch it (assertContains reads HTML, not computed opacity).
   mba.js's first action is stamping `.mb-js` on <html>, and the hidden-then-
   revealed treatment is scoped behind that marker: content is visible by
   default, and only a page whose JS actually ran opts in to fading it in. */
.mb-js .mb-reveal { opacity: 0; transform: translateY(26px); transition: opacity 1.1s var(--mb-ease), transform 1.1s var(--mb-ease); }
.mb-js .mb-reveal.is-visible { opacity: 1; transform: none; }
.mb-js .mb-reveal[data-delay="1"] { transition-delay: 0.12s; }
.mb-js .mb-reveal[data-delay="2"] { transition-delay: 0.24s; }
.mb-js .mb-reveal[data-delay="3"] { transition-delay: 0.36s; }
.mb-js .mb-reveal[data-delay="4"] { transition-delay: 0.48s; }

@keyframes mb-fade-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes mb-drift { from { transform: scale(1.08); } to { transform: scale(1); } }
.mb-drift { animation: mb-drift 14s var(--mb-ease) forwards; }

@media (prefers-reduced-motion: reduce) {
  .mb-reveal { opacity: 1 !important; transform: none !important; }
  .mb-figure img, .mb-drift { transition: none !important; animation: none !important; }
}

/* ---- 12. Misc utility -------------------------------------------------- */
.mb-stack { display: grid; gap: 1.5rem; }
.mb-flex { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.mb-mt-0 { margin-top: 0; } .mb-mt-1 { margin-top: 1rem; } .mb-mt-2 { margin-top: 2rem; } .mb-mt-3 { margin-top: 3rem; }
.mb-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---- 13. Responsive ---------------------------------------------------- */
@media (max-width: 900px) {
  .mb-cols-4 { grid-template-columns: repeat(2, 1fr); }
  .mb-cols-3 { grid-template-columns: repeat(2, 1fr); }
  .mb-footer__top { grid-template-columns: 1fr 1fr; }
  .mb-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .mb-nav { display: none; }
  .mb-burger { display: inline-flex; }
  .mb-row { grid-template-columns: 1fr; }
  .mb-cols-2 { grid-template-columns: 1fr; }
  .mb-header__actions .mb-btn--ghost { display: none; }
}
@media (max-width: 520px) {
  .mb-cols-4, .mb-cols-3 { grid-template-columns: 1fr; }
  .mb-footer__top { grid-template-columns: 1fr; }
}

/* ===========================================================================
   14. Interior pages — heads, toolbars, masonry, pagers, member gate
   ===========================================================================*/
.mb-header--solid {
  background: rgba(13,9,24,0.85);
  -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
  border-bottom-color: var(--mb-line);
}

.mb-pagehead { padding-top: clamp(7rem, 12vh, 9.5rem); padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.mb-pagehead h1 { margin: 0 0 0.5rem; }
.mb-pagehead .mb-lede { max-width: 46rem; }

.mb-crumb { display: flex; gap: 0.55rem; align-items: center; flex-wrap: wrap;
  font-family: var(--mb-ui); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--mb-muted); margin-bottom: 1.6rem; }
.mb-crumb a { color: var(--mb-silver); }
.mb-crumb a:hover { color: var(--mb-bone); }
.mb-crumb .sep { color: var(--mb-garnet-l); opacity: 0.85; }

.mb-toolbar { display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; align-items: center; justify-content: space-between;
  padding-block: 1.1rem; border-top: 1px solid var(--mb-line); border-bottom: 1px solid var(--mb-line); margin-bottom: clamp(2rem,4vw,2.8rem); }
.mb-chips { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.mb-chip { font-family: var(--mb-ui); font-size: 0.71rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--mb-silver); background: transparent; border: 1px solid var(--mb-line-2); border-radius: 30px; padding: 0.5em 1.05em;
  cursor: pointer; transition: all var(--mb-fast); }
.mb-chip:hover { color: var(--mb-bone); background: rgba(246,240,242,0.05); }
.mb-chip.is-active, .mb-chip[aria-pressed="true"] { background: var(--mb-garnet); border-color: var(--mb-garnet); color: var(--mb-bone); }
.mb-toolbar__right { display: flex; gap: 1rem; align-items: center; }
.mb-toolbar select { width: auto; padding-block: 0.6em; }
.mb-count { font-family: var(--mb-ui); font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mb-muted); white-space: nowrap; }

.mb-masonry { columns: 3 300px; column-gap: 1.15rem; }
.mb-masonry > * { break-inside: avoid; margin-bottom: 1.15rem; display: block; }

.mb-pager { display: flex; gap: 0.4rem; align-items: center; justify-content: center; margin-top: clamp(2.5rem,5vw,4rem); }
.mb-pager a, .mb-pager span { font-family: var(--mb-ui); font-size: 0.8rem; letter-spacing: 0.06em; color: var(--mb-silver);
  min-width: 2.7rem; height: 2.7rem; padding: 0 0.5rem; display: grid; place-content: center;
  border: 1px solid var(--mb-line); border-radius: var(--mb-radius); transition: all var(--mb-fast); }
.mb-pager a:hover { border-color: var(--mb-line-2); color: var(--mb-bone); }
.mb-pager [aria-current] { background: var(--mb-garnet); border-color: var(--mb-garnet); color: var(--mb-bone); }
.mb-pager .is-disabled { opacity: 0.35; pointer-events: none; }

/* Member gate band — the tasteful paywall */
.mb-gate-band { text-align: center; border: 1px solid var(--mb-line-2); border-radius: var(--mb-radius-lg);
  padding: clamp(2.2rem,5vw,3.6rem); margin: 1rem 0;
  background: radial-gradient(120% 150% at 50% 0%, rgba(120,30,60,0.20), transparent 62%), rgba(10,7,17,0.42); }
.mb-gate-band h3 { margin: 0 0 0.6rem; }
.mb-gate-band p { color: var(--mb-silver); max-width: 38rem; margin-inline: auto; }
/* galleries.html, videos.html and stories.html each repeated the identical
   inline style="justify-content:center;margin-top:1.6rem" on the gate band's
   CTA row -- one class instead of three verbatim copies. */
.mb-gate-band__cta { justify-content: center; margin-top: 1.6rem; }

/* Prev / next navigation between items */
.mb-pmnav { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; margin-top: clamp(2.5rem,5vw,3.5rem); }
.mb-pmnav a { display: flex; flex-direction: column; gap: 0.45rem; padding: 1.4rem 1.6rem;
  border: 1px solid var(--mb-line); border-radius: var(--mb-radius-lg); transition: all var(--mb-fast); }
.mb-pmnav a:hover { border-color: var(--mb-line-2); background: rgba(246,240,242,0.03); }
.mb-pmnav .l { font-family: var(--mb-ui); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mb-muted); }
.mb-pmnav .t { font-family: var(--mb-display); font-size: 1.4rem; color: var(--mb-bone); line-height: 1.05; }
.mb-pmnav .next { text-align: right; align-items: flex-end; }
@media (max-width: 600px) { .mb-pmnav { grid-template-columns: 1fr; } }

/* ===========================================================================
   15. THE PEEP DRESS — styling for service pages whose HTML peep provides.
   These selectors target peep's real markup (base.html shell + the
   join / login / register / password-reset / account templates) so the
   Midnight Ballerina dress applies with no template changes.
   Reference: peep/movies/templates/base.html, orders/join.html,
   movies/login.html, customers/password_reset_request.html, orders/account.html

   Specificity note (Task 7 Step 4 asked for EVERY section-15 selector to be
   raised to tag+class or id -- this section only raises .button and the
   shell selectors, and that's deliberate, not an oversight). orders.css does
   load after this sheet (common_base.html), so the load-order premise is
   real. But orders.css is 280 lines and owns exactly eleven classes: .address,
   .age-ccpa, .age-legal, .billing, .cart-badge, .cart-link, .error,
   .pill-button, .pill-button-filled, .point-out, .ui-menu. It defines none of
   the .login-register-*, .password-* or .offer-* families below, and no bare
   .button either (peep's per-site sheets each supply their own -- ygh.css
   raises it the same way this file does; dfx.css never defines it at all,
   styling `form button[type="submit"]` instead). mba.css touches exactly one
   of those eleven -- .error, as `ul.messages li.error` -- which already
   out-specifies orders.css's bare `.error` on tag+class alone. The other ten
   are unstyled here and unstyled in the handoff, and none of mba's rendered
   pages emit them. So raising the seventeen .login-register-, .password- and
   .offer- selectors below would guard against nothing that actually
   collides -- only .button and the shell selectors do. (Never write a class
   family as `.name-*` followed by a slash in a comment here: that pair closes
   the comment, and the prose left over is read as part of the next selector,
   which the browser then drops -- #logo a below was lost that way until #1600.)
   ===========================================================================*/

/* ---- 15.1 Page shell (base.html) -------------------------------------- */
/* The handoff assumed movies/templates/base.html's shell -- a lone <p id=
   "logo"> above a bare <header>/<footer> pair. mba/templates/base.html
   supplies its own shell instead (Task 3): <header class="mb-header"> and
   <footer class="mb-footer"> are already the real elements, and sections 5
   and 10 above already style their layout (.mb-wordmark, .mb-nav, the
   footer grid). What's missing is the handful of sub-elements base.html's
   markup actually uses that neither section anticipated: the wordmark's
   two-span split, the nav's per-link classes (plain vs. account vs. join),
   and the footer's actual (single-row, not four-column) nav + copyright.

   #logo is unused on mba's own pages -- no template mba renders has an
   id="logo" element (mba's own chrome is .mb-header/.mb-wordmark). The auth
   server's login does render one, p#logo.auth-wordmark, styled in section
   23; the #logo a rule below never reaches it (that <p> holds no link). It is
   retained because section 15 targets peep's shared service shell in
   general, and the forced priority on font-weight below documents a real
   conflict -- peep sets font-weight:900 inline on that anchor -- that would
   apply again if a future shared template reaches mba with that markup. */
#logo a { color: var(--mb-bone); font-weight: 400 !important; }
#logo a:hover { color: var(--mb-bone); }
.logo_transparency { display: inline-block; }

/* Wordmark: <a class="mb-wordmark"><span class="mb-wordmark-1">Midnight</span>
   <span class="mb-wordmark-2">Ballerina</span></a> -- section 5's .mb-wordmark
   b rule assumed a single <b>; these style the second word instead. */
.mb-wordmark-1 { font-weight: 500; }
.mb-wordmark-2 { font-weight: 500; font-style: italic; color: var(--mb-garnet-l); }

/* Nav link states: plain links already read through section 5's `.mb-nav a`;
   these add the two that carry extra meaning. */
.mb-nav-link.is-active { color: var(--mb-bone); }
.mb-nav-link.is-active::after { width: 100%; }
.mb-nav-account { display: inline-flex; align-items: center; gap: 0.4rem; }
.mb-nav-user { color: var(--mb-muted); font-weight: 400; text-transform: none; letter-spacing: 0; }
.mb-nav-join {
  color: var(--mb-bone); background: var(--mb-garnet); border: 1px solid var(--mb-garnet);
  padding: 0.55em 1.1em; border-radius: var(--mb-radius);
}
.mb-nav-join::after { display: none; }
.mb-nav-join:hover { background: var(--mb-garnet-l); border-color: var(--mb-garnet-l); color: var(--mb-bone); }

/* Footer: <footer class="mb-footer"><nav class="mb-footer-nav"><a>...</a>
   ...</nav><p class="mb-footer-copy">...</p></footer> -- a single centered
   row + one line of copy, not section 10's four-column layout (that section
   is unused dead weight for mba's actual footer, kept only because a future
   page could still opt into the fuller grid). */
.mb-footer { padding: clamp(2rem,5vw,3.5rem) var(--mb-gutter); text-align: center; }
.mb-footer-nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; justify-content: center; margin-bottom: 1rem; }
.mb-footer-nav a { font-family: var(--mb-ui); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mb-muted); }
.mb-footer-nav a:hover { color: var(--mb-silver); }
.mb-footer-copy { font-family: var(--mb-text); font-size: 0.92rem; color: var(--mb-muted); max-width: 60ch; margin: 0 auto; }

/* Generic service-page content wrapper (#page_content) */
#page_content { max-width: var(--mb-max-narrow); margin-inline: auto; padding-inline: var(--mb-gutter); }
#page_content h2 { font-family: var(--mb-display); font-size: clamp(1.6rem,3vw,2.3rem); color: var(--mb-bone);
  margin: 2.4rem 0 1rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--mb-line); }
#page_content h2:first-child { margin-top: 0; }
#page_content ul { padding-left: 0; list-style: none; display: grid; gap: 0.7rem; }
#page_content > ul > li, #page_content ul li { font-family: var(--mb-text); font-size: 1.12rem; color: var(--mb-silver);
  padding-left: 1.2rem; position: relative; }
#page_content ul li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 5px; height: 5px;
  border-radius: 50%; background: var(--mb-garnet); }
#page_content ul ul { margin-top: 0.6rem; }

/* ---- 15.2 Buttons: peep's base class is .button ----------------------- */
/* Tag+class beats orders.css's bare .button regardless of load order --
   orders.css loads AFTER this sheet, so an equal-specificity .button there
   would otherwise win on source order alone (mirrors ygh.css/dfx.css). */
button.button, a.button, input.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  font-family: var(--mb-ui); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--mb-bone); background: var(--mb-garnet); border: 1px solid var(--mb-garnet);
  padding: 1.05em 2.1em; border-radius: var(--mb-radius); cursor: pointer; line-height: 1;
  transition: all var(--mb-med); text-decoration: none; white-space: nowrap;
}
button.button:hover, a.button:hover, input.button:hover {
  background: var(--mb-garnet-l); border-color: var(--mb-garnet-l); color: var(--mb-bone);
  box-shadow: var(--mb-glow); transform: translateY(-1px); }
button.button:disabled, input.button:disabled, button.button[disabled], input.button[disabled] { opacity: 0.45; pointer-events: none; }

/* ---- 15.3 Error / message states -------------------------------------- */
/* peep marks invalid fields and messages with class="nope" */
input.nope, textarea.nope, select.nope { border-color: var(--mb-garnet-l) !important;
  box-shadow: 0 0 0 3px rgba(230,72,95,0.18); }
p.nope { color: var(--mb-garnet-l); font-family: var(--mb-ui); font-size: 0.9rem; }

/* Django messages framework: <ul class="messages"><li class="success|error|..."> */
ul.messages { list-style: none; max-width: var(--mb-max-narrow); margin: 0 auto 1.5rem; padding: 0 var(--mb-gutter);
  display: grid; gap: 0.6rem; }
ul.messages li { font-family: var(--mb-ui); font-size: 0.92rem; letter-spacing: 0.01em; padding: 0.9rem 1.1rem;
  border-radius: var(--mb-radius); border: 1px solid var(--mb-line-2); background: var(--mb-violet); color: var(--mb-silver);
  padding-left: 1.1rem; }
ul.messages li::before { content: none; }
ul.messages li.success { border-color: rgba(95,200,140,0.5); background: rgba(40,120,80,0.18); color: #cdeed8; }
ul.messages li.error, ul.messages li.danger { border-color: var(--mb-garnet); background: rgba(140,20,45,0.22); color: var(--mb-rose); }
ul.messages li.warning { border-color: rgba(220,180,90,0.5); background: rgba(150,110,30,0.18); color: #f0dcae; }
ul.messages li.info, ul.messages li.debug { border-color: var(--mb-indigo); background: var(--mb-violet); color: var(--mb-silver); }

/* ---- 15.4 Login / register / password-reset forms --------------------- */
.login-register-form-container {
  max-width: 30rem; margin: 0 auto clamp(2rem,4vw,3rem); padding: clamp(1.8rem,3.5vw,2.6rem);
  border: 1px solid var(--mb-line-2); border-radius: var(--mb-radius-lg); background: rgba(10,7,17,0.42);
}
.login-register-form-container h2 { font-family: var(--mb-display); font-size: 1.9rem; color: var(--mb-bone);
  margin: 0 0 1.4rem; font-weight: 400; }
.login-register-form-container > a { font-family: var(--mb-ui); font-size: 0.8rem; letter-spacing: 0.04em; color: var(--mb-rose); }
.login-register-form { display: grid; gap: 1rem; }
.login-register-form > div { display: grid; gap: 0.4rem; }
/* the remember-me row: checkbox + label inline */
.login-register-form > div:has(> input[type="checkbox"]) { grid-auto-flow: column; justify-content: start;
  align-items: center; gap: 0.6rem; }
.login-register-form label { font-family: var(--mb-ui); font-size: 0.85rem; letter-spacing: 0.02em;
  text-transform: none; font-weight: 400; color: var(--mb-silver); }
.login-register-button-container { margin-top: 0.6rem; }
.login-register-button { width: 100%; }
.login-register-form-container p { font-family: var(--mb-text); font-size: 1.05rem; color: var(--mb-silver); }

/* Password field with show/hide toggle (_password_field.html) */
.password-field { position: relative; display: flex; align-items: stretch; }
.password-field input { flex: 1; padding-right: 3rem; }
.password-toggle { position: absolute; right: 0; top: 0; bottom: 0; width: 3rem; display: grid; place-content: center;
  background: none; border: 0; color: var(--mb-muted); cursor: pointer; transition: color var(--mb-fast); }
.password-toggle:hover { color: var(--mb-silver); }
.password-toggle .eye-slash { display: none; }
.password-toggle[aria-pressed="true"] .eye { display: none; }
.password-toggle[aria-pressed="true"] .eye-slash { display: block; }

/* ---- 15.5 Join / offer cards (orders/join.html) ----------------------- */
.offer-page { max-width: var(--mb-max); margin-inline: auto; padding-inline: var(--mb-gutter); }
.offer-page-title { font-family: var(--mb-display); font-weight: 400; text-align: center;
  font-size: clamp(2rem,4.5vw,3.4rem); color: var(--mb-bone); margin: 0 auto clamp(2rem,4vw,3rem); max-width: 24ch; }
.offer-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.3rem; align-items: stretch; }

/* Each offer is a <label> wrapping a hidden radio */
label.offer-card { position: relative; display: flex; flex-direction: column; gap: 0.35rem; cursor: pointer;
  border: 1px solid var(--mb-line-2); border-radius: var(--mb-radius-lg); padding: 1.8rem 1.6rem 1.6rem;
  background: rgba(10,7,17,0.42); transition: all var(--mb-med); text-transform: none; letter-spacing: 0; }
label.offer-card:hover { border-color: var(--mb-line-2); background: var(--mb-violet); transform: translateY(-2px); }
.offer-card input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.offer-card.offer-card-selected, .offer-card:has(input:checked) {
  border-color: var(--mb-garnet); background: var(--mb-violet);
  box-shadow: var(--mb-glow); }
.offer-card.offer-card-selected::after, .offer-card:has(input:checked)::after {
  content: "\2713"; position: absolute; top: 1rem; right: 1rem; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--mb-garnet); color: var(--mb-bone); display: grid; place-content: center; font-size: 0.8rem; }
.offer-badge { position: absolute; top: -0.7rem; left: 1.4rem; font-family: var(--mb-ui); font-size: 0.62rem;
  font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mb-bone);
  background: var(--mb-garnet); padding: 0.4em 0.8em; border-radius: 30px; }
.offer-card-name { font-family: var(--mb-display); font-size: 1.6rem; color: var(--mb-bone); margin: 0; font-weight: 500; }
.offer-card-price { font-family: var(--mb-display); font-size: 2.6rem; color: var(--mb-bone); line-height: 1.1; }
.offer-card-price strong { color: var(--mb-garnet-l); }
.offer-card-regular { font-family: var(--mb-ui); font-size: 0.8rem; color: var(--mb-muted); text-decoration: line-through; }
.offer-card-sale-end { font-family: var(--mb-ui); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mb-garnet-l); }
.offer-card-description { font-family: var(--mb-text); font-size: 1.02rem; line-height: 1.5; color: var(--mb-silver); margin-top: 0.6rem; }
.offer-card-description p { margin: 0 0 0.5rem; }
.offer-submit { text-align: center; margin-top: clamp(2rem,4vw,2.8rem); }
.offer-login { text-align: center; font-family: var(--mb-text); font-size: 1.05rem; color: var(--mb-silver); margin-top: 1.4rem; }

/* ===========================================================================
   16. Service fragments -- age gate, coming-soon, 404.
   index.html is the age gate's design source (its copy-panel column, not
   the full two-column full-bleed-portrait layout: info/templates/
   age_page.html wraps service/age_splash.html in a bare #age_page div with
   no sibling art markup, so #age_page is a single centred card over an
   atmospheric gradient, not a photo -- the same placeholder-first treatment
   as .mb-hero above). Coming-soon and 404 have no design-page source at all
   (both were invented in Task 6, filling a gap the handoff's fourteen pages
   never covered); their layout below extends the same tokens rather than
   inventing a different look.
   ===========================================================================*/

/* ---- 16.1 Age gate ------------------------------------------------------ */
#age_page {
  min-height: 100svh; display: flex; align-items: center; justify-content: center;
  padding: clamp(2rem,6vw,5rem) var(--mb-gutter);
  background:
    radial-gradient(120% 80% at 82% -10%, rgba(94,60,150,0.42), transparent 60%),
    radial-gradient(90% 70% at 4% 108%, rgba(120,30,60,0.22), transparent 55%),
    var(--mb-midnight);
}
.mb-age-card { max-width: 33rem; display: grid; gap: 1.2rem; }
.mb-age-mark { font-size: 1.7rem; margin-bottom: 0.3rem; }
.mb-age-title { font-size: clamp(2.4rem, 5vw, 4rem); margin: 0; }
.mb-age-warn {
  font-family: var(--mb-ui); font-size: 0.82rem; letter-spacing: 0.02em; color: var(--mb-silver);
  border-left: 2px solid var(--mb-garnet); padding-left: 1rem; margin: 0.2rem 0;
}
.mb-age-actions { display: flex; gap: 0.9rem; flex-wrap: wrap; margin-top: 0.2rem; }
.mb-age-legal {
  font-family: var(--mb-ui); font-size: 0.72rem; line-height: 1.7; color: var(--mb-muted);
  letter-spacing: 0.02em; margin: 0.6rem 0 0;
}
.mb-age-legal a { color: var(--mb-silver); }

/* ---- 16.2 Coming soon (pre-launch splash) ------------------------------ */
/* Unlike #age_page (which blanks header and footer, per info's own coming_soon
   template, and so needs no clearance), #coming_soon keeps the site's real
   fixed .mb-header. align-items:center hides the overlap in the common case,
   but on a short/landscape viewport -- or once the copy grows -- the card's
   top would render under the nav (~4.4rem unscrolled). padding-top is kept
   independent of the vertical-centering padding, at the same clearance every
   other header-bearing section in this sheet already uses (.mb-pagehead,
   .m-hello, .read__head), so the two concerns don't fight each other. */
#coming_soon {
  min-height: 100svh; display: flex; align-items: center; justify-content: center;
  padding: clamp(2rem,6vw,5rem) var(--mb-gutter);
  padding-top: clamp(7rem, 12vh, 9.5rem);
  background:
    radial-gradient(120% 80% at 18% -10%, rgba(94,60,150,0.42), transparent 60%),
    radial-gradient(90% 70% at 96% 108%, rgba(120,30,60,0.22), transparent 55%),
    var(--mb-midnight);
}
.mb-coming-card { max-width: 30rem; text-align: center; display: grid; gap: 1.1rem; justify-items: center; }
.mb-coming-mark { font-size: 1.7rem; }
.mb-coming-title { font-size: clamp(2.2rem, 4.6vw, 3.6rem); margin: 0; }
.mb-coming-form { display: flex; gap: 0.6rem; flex-wrap: wrap; justify-content: center; width: 100%; margin-top: 0.4rem; }
.mb-coming-input { flex: 1; min-width: 14rem; }
.mb-coming-note { font-size: 0.8rem; color: var(--mb-muted); margin: 0; }

/* ---- 16.3 404 ------------------------------------------------------------ */
/* service/404.html keeps the site's real header/footer too (see its own
   comment: "a 404 is an ordinary navigation mistake ... the site's own nav
   is the fastest way back in") -- same fixed-header clearance as #coming_soon
   above, independent of the vertical-centering padding, for the same reason. */
#error_page {
  min-height: 60vh; display: flex; align-items: center; justify-content: center; text-align: center;
  padding: clamp(2rem,6vw,5rem) var(--mb-gutter);
  padding-top: clamp(7rem, 12vh, 9.5rem);
}
.mb-404 { max-width: 34rem; display: grid; gap: 1.2rem; justify-items: center; }
.mb-404-title { font-size: clamp(2.2rem, 5vw, 3.6rem); margin: 0; }

/* ===========================================================================
   17. Home (design: home.html, Direction A -- home-spotlight.html is the
   discarded Direction B and is not hoisted).
   ===========================================================================*/
.home-hero__title { font-size: clamp(3.2rem, 11vw, 9rem); font-weight: 300; line-height: 0.92; letter-spacing: 0.01em; margin: 0; }
.home-hero__title span { display: block; }
.home-hero__title .b { font-style: italic; font-weight: 400; }
.home-hero__sub { font-family: var(--mb-text); font-size: clamp(1.15rem, 1.7vw, 1.5rem); color: var(--mb-silver); max-width: 34rem; margin: 1.6rem 0 2.2rem; }
.home-hero__cta { display: flex; gap: 0.9rem; flex-wrap: wrap; align-items: center; }
.home-hero__scroll { position: absolute; right: var(--mb-gutter); bottom: clamp(2rem,5vh,3.5rem); z-index: 3;
  writing-mode: vertical-rl; font-family: var(--mb-ui); font-size: 0.66rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--mb-silver); display: inline-flex; align-items: center; gap: 1rem; }
.home-hero__scroll::after { content: ""; width: 1px; height: 3.5rem; background: linear-gradient(var(--mb-garnet-l), transparent); }

/* Manifesto */
.manifesto { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: end; }
.manifesto h2 { font-size: clamp(2rem, 3.6vw, 3.4rem); }
.manifesto__body p { font-family: var(--mb-text); font-size: 1.28rem; line-height: 1.6; color: var(--mb-silver); }

/* Pillars */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.pillar { position: relative; }
.pillar .mb-figure { aspect-ratio: 3 / 4.2; }
.pillar__no { font-family: var(--mb-display); font-size: 0.95rem; color: var(--mb-garnet-l); position: absolute; top: 1.2rem; left: 1.4rem; z-index: 3; letter-spacing: 0.1em; }

/* Featured galleries */
.covers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.cover .mb-figure { aspect-ratio: 3 / 4; }

/* Featured story */
.feature { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.feature__art { aspect-ratio: 4 / 3.2; }
.feature__body p { font-family: var(--mb-text); font-size: 1.2rem; line-height: 1.62; color: var(--mb-silver); }
.feature__drop::first-letter { font-family: var(--mb-display); font-size: 3.6rem; float: left; line-height: 0.8; padding: 0.35rem 0.6rem 0 0; color: var(--mb-garnet-l); }

/* Join band */
.join { position: relative; border-top: 1px solid var(--mb-line); border-bottom: 1px solid var(--mb-line);
  background: radial-gradient(120% 140% at 100% 0%, rgba(120,30,60,0.22), transparent 55%), var(--mb-violet); }
.join__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem,5vw,5rem); align-items: center; }
.join__benefits { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.9rem; }
.join__benefits li { display: flex; gap: 0.8rem; align-items: baseline; font-family: var(--mb-ui); color: var(--mb-silver); }
.join__benefits li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mb-garnet); flex: none; transform: translateY(-2px); }
.join__card { background: rgba(10,7,17,0.5); border: 1px solid var(--mb-line-2); border-radius: var(--mb-radius-lg); padding: clamp(1.8rem, 3vw, 2.6rem); text-align: center; }
.join__price { font-family: var(--mb-display); font-size: 3.6rem; color: var(--mb-bone); line-height: 1; }
.join__price small { font-family: var(--mb-ui); font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mb-muted); display: block; margin-top: 0.6rem; }

@media (max-width: 860px) {
  .manifesto, .feature, .join__grid { grid-template-columns: 1fr; }
  .pillars { grid-template-columns: 1fr; }
  .covers { grid-template-columns: 1fr 1fr; }
  .home-hero__scroll { display: none; }
}

/* ===========================================================================
   18. Member home (design: member.html). home.html renders this state
   inline (one template, keyed on `member`), rather than a separate page.
   ===========================================================================*/
.m-hello { padding-top: clamp(7rem,12vh,9rem); }
.m-hello__row { display: flex; flex-wrap: wrap; gap: 1.5rem 2rem; align-items: flex-end; justify-content: space-between; }
.m-hello h1 { font-size: clamp(2.4rem,5vw,4rem); margin: 0.4rem 0 0; }
.m-hello h1 em { font-style: italic; color: var(--mb-garnet-l); }
.m-stats { display: flex; gap: 2rem; }
.m-stat { text-align: right; }
.m-stat b { font-family: var(--mb-display); font-size: 1.9rem; color: var(--mb-bone); display: block; line-height: 1; }
.m-stat span { font-family: var(--mb-ui); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mb-muted); }

/* Resume ("Continue watching") -- no context key supplies a resume position
   yet (home.html's own comment), so this ships unused pending that view work. */
.resume { position: relative; border-radius: var(--mb-radius-lg); overflow: hidden; border: 1px solid var(--mb-line-2);
  display: grid; grid-template-columns: 1.3fr 1fr; min-height: 320px; }
.resume__art { position: relative; }
.resume__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.resume__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--mb-violet) 96%); }
.resume__body { background: var(--mb-violet); padding: clamp(1.8rem,3.5vw,3rem); display: flex; flex-direction: column; justify-content: center; }
.resume__body h2 { font-size: clamp(1.8rem,3vw,2.6rem); margin: 0.4rem 0 0.6rem; }
.resume__prog { height: 4px; background: rgba(202,191,218,0.18); border-radius: 4px; margin: 1.4rem 0 0.7rem; overflow: hidden; }
.resume__prog i { display: block; height: 100%; width: 38%; background: var(--mb-garnet); }
.resume__time { font-family: var(--mb-ui); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mb-muted); }
@media (max-width: 760px) { .resume { grid-template-columns: 1fr; } .resume__art { min-height: 200px; } .resume__art::after { background: linear-gradient(0deg, var(--mb-violet), transparent 70%); } }

.row-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.6rem; }
.row-head h2 { margin: 0; font-size: clamp(1.6rem,2.8vw,2.2rem); }
.new-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.new-grid .mb-figure { aspect-ratio: 3/4; }
.kind { position: absolute; top: 0.8rem; left: 0.8rem; z-index: 3; }
/* Your favourites -- no favourites queryset yet (home.html's own comment);
   ships unused for the same reason .resume above does. */
.fav-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
.fav-grid .mb-figure { aspect-ratio: 1; }

/* Account strip */
.acct { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--mb-line); border: 1px solid var(--mb-line); border-radius: var(--mb-radius-lg); overflow: hidden; }
.acct a { background: var(--mb-violet); padding: 1.5rem 1.6rem; display: flex; flex-direction: column; gap: 0.4rem; transition: background var(--mb-fast); }
.acct a:hover { background: var(--mb-violet-2); }
.acct .k { font-family: var(--mb-ui); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mb-garnet-l); }
.acct .v { font-family: var(--mb-display); font-size: 1.3rem; color: var(--mb-bone); }
.acct .s { font-family: var(--mb-ui); font-size: 0.8rem; color: var(--mb-muted); }

@media (max-width: 900px) { .new-grid { grid-template-columns: 1fr 1fr; } .fav-grid { grid-template-columns: repeat(3,1fr); } .acct { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .new-grid { grid-template-columns: 1fr 1fr; } .fav-grid { grid-template-columns: 1fr 1fr; } .acct { grid-template-columns: 1fr; } }

/* ===========================================================================
   19. Galleries index + single gallery (design: galleries.html, gallery.html)
   ===========================================================================*/
.gcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem 1.2rem; }
.gcards .mb-figure { aspect-ratio: 3 / 4; }
.gtag { position: absolute; top: 1rem; left: 1rem; z-index: 3; }
/* Category-chip filtering is dropped from every index page (no context key
   backs it -- see galleries.html's own comment); .is-hidden ships anyway so
   a future server- or HTMX-driven filter can reuse it without a CSS change.
   Unused on mba today -- nothing in peep/mba/ applies this class, so there
   is nothing here a forced priority flag would need to out-rank; plain
   display:none. */
.is-hidden { display: none; }
@media (max-width: 860px) { .gcards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .gcards { grid-template-columns: 1fr; } }

.gintro { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.gintro__note { font-family: var(--mb-text); font-size: 1.32rem; line-height: 1.62; color: var(--mb-silver); }
.gintro__note::first-letter { font-family: var(--mb-display); font-size: 3.4rem; float: left; line-height: 0.8; padding: 0.3rem 0.55rem 0 0; color: var(--mb-garnet-l); }
.gspecs { display: grid; gap: 0; border: 1px solid var(--mb-line); border-radius: var(--mb-radius-lg); overflow: hidden; }
.gspecs div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.95rem 1.2rem; border-bottom: 1px solid var(--mb-line); }
.gspecs div:last-child { border-bottom: 0; }
.gspecs dt, .gspecs .k { font-family: var(--mb-ui); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mb-muted); }
.gspecs .v { font-family: var(--mb-text); font-size: 1.05rem; color: var(--mb-bone); }
/* Tag pills -- Gallery has no tags field (gallery.html's own comment); ships
   unused for the same forward-compatibility reason as .spot below. */
.gtags { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 1.4rem; }
.gtags .mb-tag { position: static; }
.plate { position: relative; display: block; }
.plate .plate__no { position: absolute; top: 0.8rem; left: 0.9rem; z-index: 3; font-family: var(--mb-display); font-size: 0.95rem; color: var(--mb-bone); letter-spacing: 0.08em; text-shadow: 0 2px 8px rgba(0,0,0,0.6); }
@media (max-width: 760px) { .gintro { grid-template-columns: 1fr; } }

/* ===========================================================================
   20. Photo viewer (design: photo.html)
   ===========================================================================*/
html:has(.ph) { height: 100%; }
body:has(.ph) { background: var(--mb-black); overflow: hidden; }
.ph { height: 100svh; display: flex; flex-direction: column; }

.ph-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.9rem clamp(1rem, 3vw, 2rem); border-bottom: 1px solid var(--mb-line); flex: none; }
.ph-back { font-family: var(--mb-ui); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mb-silver); display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap; }
.ph-back:hover { color: var(--mb-bone); }
.ph-counter { font-family: var(--mb-ui); font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mb-muted); white-space: nowrap; }
.ph-counter b { color: var(--mb-bone); font-weight: 600; }
/* Heart/favourite/share tools are dropped (no context key backs them -- see
   still.html's own comment); .ph-tool* ships unused for the same reason. */
.ph-tools { display: flex; gap: 0.3rem; align-items: center; }
.ph-tool { font-family: var(--mb-ui); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em; color: var(--mb-silver);
  background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.5rem 0.7rem; border-radius: var(--mb-radius); transition: all var(--mb-fast); }
.ph-tool:hover { color: var(--mb-bone); background: rgba(246,240,242,0.05); }
.ph-tool svg { stroke: currentColor; fill: none; transition: all var(--mb-fast); }
.ph-tool[aria-pressed="true"] { color: var(--mb-garnet-l); }
.ph-tool[aria-pressed="true"] svg { fill: var(--mb-garnet); stroke: var(--mb-garnet); }

.ph-stage { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; padding: clamp(1rem, 3vw, 2.4rem); min-height: 0; }
.ph-frame { margin: 0; height: 100%; display: flex; align-items: center; justify-content: center; }
.ph-frame img { max-height: 100%; max-width: 100%; width: auto; object-fit: contain; border: 1px solid var(--mb-line-2);
  box-shadow: 0 40px 100px -40px rgba(0,0,0,0.9); border-radius: 3px; }
/* .ph-plate is the decoy-backed still (spec Sec7b): the visible plate is a
   CSS background-image behind a fully transparent <img> (the anti-save
   decoy), so nothing above this rule sizes the thing anyone actually sees --
   .ph-frame img's box model applies to the (invisible) decoy element, but
   without an explicit background-size the background paints at its natural
   size inside that box, i.e. usually cropped or not shown at all. */
.ph-plate { max-width: 100%; max-height: 100%; width: auto; height: auto;
  background-size: contain; background-repeat: no-repeat; background-position: center; }
.ph-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 3.4rem; height: 3.4rem; border-radius: 50%;
  border: 1px solid var(--mb-line-2); display: grid; place-content: center; color: var(--mb-bone); font-size: 1.5rem; line-height: 1;
  background: rgba(10,7,17,0.45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: all var(--mb-med); }
.ph-arrow:hover { background: var(--mb-garnet); border-color: var(--mb-garnet); color: var(--mb-bone); }
.ph-prev { left: clamp(0.6rem, 2vw, 1.6rem); }
.ph-next { right: clamp(0.6rem, 2vw, 1.6rem); }

.ph-cap { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
  padding: 0 clamp(1rem, 3vw, 2rem) 1rem; flex: none; }
.ph-title { font-family: var(--mb-display); font-size: clamp(1.4rem, 2.4vw, 1.9rem); color: var(--mb-bone); margin: 0 0 0.15rem; }
.ph-note { font-family: var(--mb-text); font-style: italic; font-size: 1.05rem; color: var(--mb-silver); margin: 0; }
/* .ph-cap__l has no design-page source -- the handoff's .ph-cap laid out a
   title block plus .ph-cap__r directly; still.html splits the note into its
   own .ph-cap__l wrapper so it can share the row with .ph-cap__r without the
   two competing for the same space. */
.ph-cap__l { flex: 1; min-width: 0; padding-right: 1.5rem; }
.ph-cap__r { display: flex; flex-direction: column; align-items: flex-end; gap: 0.7rem; }

.ph-strip { display: flex; gap: 0.55rem; overflow-x: auto; padding: 0.9rem clamp(1rem, 3vw, 2rem) 1.2rem;
  border-top: 1px solid var(--mb-line); flex: none; scrollbar-width: thin; }
.ph-strip a { flex: none; width: 60px; height: 80px; border-radius: 3px; overflow: hidden; border: 1px solid transparent;
  opacity: 0.5; transition: all var(--mb-fast); }
.ph-strip a img { width: 100%; height: 100%; object-fit: cover; }
.ph-strip a:hover { opacity: 0.85; }
.ph-strip a.is-current { border-color: var(--mb-garnet); opacity: 1; }

@media (max-width: 640px) { .ph-tool span.lbl { display: none; } .ph-cap__r { align-items: flex-start; } }

/* ===========================================================================
   21. Films index + single film (design: videos.html, video.html)
   ===========================================================================*/
/* Featured-film banner -- no context key names a single featured film
   (videos.html's own comment); ships unused for the same forward-
   compatibility reason as .spot below. */
.feature-film { position: relative; border-radius: var(--mb-radius-lg); overflow: hidden; margin-bottom: clamp(2.5rem,5vw,3.5rem); }
.feature-film .mb-figure { aspect-ratio: 21 / 9; border-radius: 0; }
.feature-film .mb-figure img { filter: saturate(0.96) brightness(0.78); }
.feature-film__body { position: absolute; z-index: 3; left: 0; bottom: 0; padding: clamp(1.5rem,4vw,3rem); max-width: 38rem; }
.feature-film__body h2 { font-size: clamp(2rem,4.5vw,3.6rem); margin: 0.4rem 0 0.6rem; }
.feature-film__body p { color: var(--mb-silver); font-family: var(--mb-text); font-size: 1.15rem; margin-bottom: 1.3rem; }

.films-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem 1.3rem; }
.film-card .mb-figure { aspect-ratio: 16 / 10; }
.film-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.85rem; }
.film-card__meta h3 { margin: 0; font-size: 1.45rem; }
.film-card__cat { font-family: var(--mb-ui); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mb-muted); margin: 0.15rem 0 0; }
.dur { position: absolute; bottom: 0.8rem; right: 0.8rem; z-index: 3; font-family: var(--mb-ui); font-size: 0.66rem; letter-spacing: 0.1em; font-weight: 600;
  color: var(--mb-bone); background: rgba(10,7,17,0.7); border: 1px solid var(--mb-line-2); padding: 0.3em 0.6em; border-radius: 4px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.play { position: absolute; z-index: 3; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 4rem; height: 4rem; border-radius: 50%; border: 1px solid var(--mb-line-2); background: rgba(10,7,17,0.4);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); display: grid; place-content: center; transition: all var(--mb-med); }
.play--lg { width: 5.2rem; height: 5.2rem; }
a:hover > .mb-figure .play, .film-card:hover .play, .feature-film:hover .play { background: var(--mb-garnet); border-color: var(--mb-garnet); transform: translate(-50%,-50%) scale(1.06); }
@media (max-width: 860px) { .films-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .films-grid { grid-template-columns: 1fr; } }

.player { position: relative; border-radius: var(--mb-radius-lg); overflow: hidden; border: 1px solid var(--mb-line-2);
  background: #000; box-shadow: 0 50px 120px -50px rgba(0,0,0,0.9); aspect-ratio: 16 / 9; }
.player video, .player iframe { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; border: 0; }
/* Preview overlay + 30s cap are both dropped for the signed-embed player
   (artifact_video_stream.html's own comment: peep serves the whole gated
   asset via a signed Bunny Stream iframe with no seek hook a client-side cap
   could enforce -- a non-member never reaches this template at all, see
   artifact.html's split); .player__preview ships unused for parity with the
   design's own class list. */
.player__preview { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2rem;
  text-align: center; padding: 2rem; background: linear-gradient(0deg, rgba(11,7,18,0.85), rgba(11,7,18,0.35)); }
.player__preview.is-hidden { display: none; }
.player__play { width: 5.4rem; height: 5.4rem; border-radius: 50%; border: 1px solid var(--mb-line-2); background: rgba(10,7,17,0.45);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); display: grid; place-content: center; cursor: pointer; transition: all var(--mb-med); }
.player__play:hover { background: var(--mb-garnet); border-color: var(--mb-garnet); transform: scale(1.06); }
.player__hint { font-family: var(--mb-ui); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--mb-silver); }

.film-layout { display: grid; grid-template-columns: 1fr 320px; gap: clamp(2rem,4vw,3.5rem); align-items: start; margin-top: clamp(2rem,4vw,3rem); }
.film-title { font-size: clamp(2rem,4vw,3.2rem); margin: 0 0 0.4rem; }
.film-meta { display: flex; flex-wrap: wrap; gap: 0.8rem 1.4rem; align-items: center; font-family: var(--mb-ui); font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mb-muted); margin-bottom: 1.6rem; }
.film-meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--mb-garnet); }
.film-actions { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-bottom: 2rem; }
.film-note { font-family: var(--mb-text); font-size: 1.2rem; line-height: 1.62; color: var(--mb-silver); }
.film-note::first-letter { font-family: var(--mb-display); font-size: 3.2rem; float: left; line-height: 0.8; padding: 0.3rem 0.5rem 0 0; color: var(--mb-garnet-l); }

/* Scenes list + related rail: Artifact has no timestamp sub-model and no
   view supplies a related-titles query (artifact_video_stream.html's own
   comment); both ship unused for the same forward-compatibility reason. */
.scenes { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: 0.2rem; }
.scenes li { display: flex; gap: 1rem; align-items: baseline; padding: 0.7rem 0; border-bottom: 1px solid var(--mb-line); }
.scenes .t { font-family: var(--mb-ui); font-variant-numeric: tabular-nums; font-size: 0.82rem; color: var(--mb-garnet-l); min-width: 3rem; }
.scenes .n { font-family: var(--mb-text); font-size: 1.1rem; color: var(--mb-bone); }

.aside-card { border: 1px solid var(--mb-line); border-radius: var(--mb-radius-lg); padding: 1.4rem; }
.aside-card h4 { font-family: var(--mb-ui); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mb-garnet-l); margin: 0 0 1.1rem; }
.related { display: grid; gap: 1rem; }
.related a { display: grid; grid-template-columns: 96px 1fr; gap: 0.9rem; align-items: center; }
.related .mb-figure { aspect-ratio: 16/10; border-radius: var(--mb-radius); }
.related .rt { font-family: var(--mb-display); font-size: 1.15rem; color: var(--mb-bone); line-height: 1.1; }
.related .rd { font-family: var(--mb-ui); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mb-muted); margin-top: 0.2rem; }
@media (max-width: 860px) { .film-layout { grid-template-columns: 1fr; } }

/* ===========================================================================
   22. Stories index + reading page (design: stories.html, story.html)
   ===========================================================================*/
.feature-story { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem,5vw,4rem); align-items: center;
  padding-bottom: clamp(2.5rem,5vw,3.5rem); margin-bottom: clamp(2.5rem,5vw,3.5rem); border-bottom: 1px solid var(--mb-line); }
.feature-story .mb-figure { aspect-ratio: 4 / 5; }
.feature-story h2 { font-size: clamp(2.2rem,4.4vw,3.6rem); margin: 0.5rem 0 0.8rem; }
.feature-story p { font-family: var(--mb-text); font-size: 1.25rem; line-height: 1.6; color: var(--mb-silver); }

.story-list { display: grid; gap: 0; }
.story-row { display: grid; grid-template-columns: 150px 1fr auto; gap: clamp(1.2rem,3vw,2.5rem); align-items: center;
  padding: clamp(1.5rem,3vw,2.2rem) 0; border-bottom: 1px solid var(--mb-line); transition: background var(--mb-fast); }
.story-row:hover { background: rgba(246,240,242,0.02); }
.story-row .mb-figure { aspect-ratio: 1; border-radius: var(--mb-radius); }
.story-row__body h3 { font-size: clamp(1.5rem,2.6vw,2.1rem); margin: 0.35rem 0 0.5rem; }
.story-row__body p { font-family: var(--mb-text); font-size: 1.12rem; line-height: 1.55; color: var(--mb-silver); margin: 0; max-width: 52ch; }
.story-row__read { text-align: right; white-space: nowrap; }
.story-row__date { font-family: var(--mb-ui); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mb-muted); display: block; margin-bottom: 0.8rem; }
@media (max-width: 760px) {
  .feature-story { grid-template-columns: 1fr; }
  .story-row { grid-template-columns: 88px 1fr; }
  .story-row__read { grid-column: 1 / -1; text-align: left; }
}

.read { max-width: 44rem; margin-inline: auto; }
.read__head { text-align: center; padding-top: clamp(7rem,12vh,9.5rem); }
.read__head h1 { font-size: clamp(2.4rem,5.5vw,4.2rem); margin: 0.6rem 0 0.8rem; }
.read__dek { font-family: var(--mb-text); font-style: italic; font-size: clamp(1.2rem,2vw,1.55rem); color: var(--mb-silver); max-width: 34rem; margin: 0 auto; }
.read__byline { display: flex; align-items: center; justify-content: center; gap: 0.9rem; margin: 2rem 0 0; }
/* Byline avatar -- no per-artifact avatar image (artifact.html's own
   comment); .av ships unused for the same forward-compatibility reason. */
.read__byline .av { width: 2.6rem; height: 2.6rem; border-radius: 50%; overflow: hidden; border: 1px solid var(--mb-line-2); }
.read__byline .av img { width: 100%; height: 100%; object-fit: cover; }
.read__byline .who { font-family: var(--mb-ui); font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mb-silver); text-align: left; line-height: 1.5; }
.read__byline .who b { color: var(--mb-bone); font-weight: 600; display: block; }

.read__lead { margin: clamp(2.5rem,5vw,3.5rem) 0; }
.read__lead.full { max-width: var(--mb-max); margin-inline: calc((44rem - min(var(--mb-max), 92vw)) / 2); }
.read__lead .mb-figure { aspect-ratio: 16/9; }
.read figcaption { font-family: var(--mb-ui); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mb-muted); margin-top: 0.7rem; text-align: center; }

.prose { font-family: var(--mb-text); font-size: 1.32rem; line-height: 1.72; color: #d9d0e4; }
.prose > p { margin: 0 0 1.5rem; }
.prose > p:first-of-type::first-letter { font-family: var(--mb-display); font-size: 4.4rem; float: left; line-height: 0.72; padding: 0.4rem 0.7rem 0 0; color: var(--mb-garnet-l); font-weight: 500; }
.prose h3 { font-family: var(--mb-display); font-size: 1.9rem; margin: 2.6rem 0 1rem; }

/* Spot illustration -- floats into the measure. Spot illustrations are
   deferred (spec Sec9: no upload path yet), but the class ships so the
   capability can be switched on later without a redesign -- an office
   author's |md_cms body can already use it once one lands. */
.spot { float: right; width: 16rem; max-width: 45%; margin: 0.4rem 0 1.4rem 2rem; }
.spot .mb-figure { aspect-ratio: 3/4; border-radius: var(--mb-radius); }
.spot figcaption { text-align: left; }
.spot--left { float: left; margin: 0.4rem 2rem 1.4rem 0; }
@media (max-width: 640px) { .spot, .spot--left { float: none; width: 100%; max-width: 100%; margin: 1.6rem 0; } }

.pullquote { border: 0; border-top: 1px solid var(--mb-line); border-bottom: 1px solid var(--mb-line);
  padding: 2rem 0; margin: 2.4rem 0; text-align: center; font-family: var(--mb-display); font-style: italic;
  font-size: clamp(1.6rem,3vw,2.3rem); line-height: 1.3; color: var(--mb-bone); }

.read__share { display: flex; align-items: center; gap: 1rem; justify-content: center; margin: 2.5rem 0; }
.read__share span { font-family: var(--mb-ui); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mb-muted); }
.read__share a { width: 2.4rem; height: 2.4rem; border: 1px solid var(--mb-line-2); border-radius: 50%; display: grid; place-content: center; color: var(--mb-silver); transition: all var(--mb-fast); }
.read__share a:hover { background: var(--mb-garnet); border-color: var(--mb-garnet); color: var(--mb-bone); }

/* ===========================================================================
   23. Auth-server login (LOGIN_STYLESHEETS['mba'])
   On auth.daphnesfantasies.com this sheet is layered over
   authentication/auth.css, and LOGIN_BRANDING['mba'] sets own_login_skin, so
   <main class="auth-server own-skin"> turns auth.css's white neutral card off
   and section 15.4 above dresses the login | register cards as it does peep's
   service pages; auth.css keeps only the side-by-side layout. The page has no
   .mb-header, so the site name is LOGIN_BRANDING's text wordmark,
   p#logo.auth-wordmark, set here in the display face the header wordmark
   uses (section 5) -- one text node, so not the header's Midnight / italic
   Ballerina split.
   id+class matches the specificity of the template's own positioning reset
   for #logo, which loads after this sheet and only repositions it.
   ===========================================================================*/
#logo.auth-wordmark {
  font-family: var(--mb-display); font-size: 2.6rem; font-weight: 500;
  letter-spacing: 0.02em; line-height: 1; text-align: center; color: var(--mb-bone);
}