/* =============================================================================
   section5-media.com — the company site
   =============================================================================
   Two grounds, taken from the marks rather than chosen for them. The Section 5
   Media badge was designed on near-black (#0E0F12, Design Bible v1.4 p.11);
   every product lockup was measured as light-background artwork and no
   dark-ground lockup exists. So the masthead and footer are night, everything
   between is daylight, and each mark sits on the ground it was made for.

   Every colour here is already in platformVisualIdentity.js or the brand
   registry. Deep gold (#B8860B) is the platform's own rule for gold on a light
   surface. Ivory (#F7F6F2) is My Memories' canonical ivory.

   Type is the brand's: Bebas Neue for display, Inter for reading. Body text is
   19px on a desktop and 17px on a phone, because the draft this replaces was
   too small to read.

   No JavaScript. No animation, so reduced motion has nothing to reduce; the one
   colour transition on links is guarded anyway. Keyboard focus is a gold ring.
   ============================================================================= */

:root {
  --night: #0E0F12;
  --ivory: #F7F6F2;
  --gold: #D4AF37;
  --gold-deep: #B8860B;
  --navy: #0F172A;
  --charcoal: #1E293B;
  --slate: #64748B;
  --silver: #D4D4D4;
  --white: #FFFFFF;
  --line: rgba(15, 23, 42, 0.14);
  --line-night: rgba(255, 255, 255, 0.12);
  --display: 'Bebas Neue', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --body: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --measure: 64ch;
  --wrap: 1080px;
}

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ivory);
  color: var(--navy);
  font-family: var(--body);
  font-size: 19px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
@media (max-width: 720px) { body { font-size: 17px; } }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) { a { transition: color 120ms ease; } }
:focus-visible { outline: 3px solid var(--gold-deep); outline-offset: 3px; }
.night :focus-visible { outline-color: var(--gold); }

.skip {
  position: absolute; left: 16px; top: -100px;
  background: var(--gold); color: var(--night); padding: 8px 12px; font-weight: 600;
  z-index: 10;
}
.skip:focus { top: 16px; }

h1, h2, h3 {
  font-family: var(--display); font-weight: 400; letter-spacing: 0.02em;
  line-height: 0.95; margin: 0; text-wrap: balance; color: inherit;
}
h1 { font-size: clamp(48px, 8vw, 88px); }
h2 { font-size: clamp(36px, 5.5vw, 56px); }
h3 { font-size: clamp(26px, 3.6vw, 34px); }
p { margin: 0; max-width: var(--measure); }
p + p { margin-top: 1em; }
strong { font-weight: 600; }
.label {
  font-size: 13px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gold-deep);
}
.night .label { color: var(--gold); }
.wrap { width: min(var(--wrap), 100% - 48px); margin: 0 auto; }
.stack { display: grid; gap: 24px; }
.rule { height: 2px; width: 96px; background: var(--gold-deep); }
.night .rule { background: var(--gold); }
.quiet { color: var(--slate); font-size: 0.85em; }

/* ── Night grounds ─────────────────────────────────────────────────────── */
.night { background: var(--night); color: var(--white); }
.night p { color: var(--silver); }
.night p strong { color: var(--white); }

/* ── Masthead ───────────────────────────────────────────────────────────── */
.mast { padding: 32px 0 56px; }
.mast .bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.mast .home { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; }
.mast .home img { width: 56px; height: 56px; }
.mast .home span { font-family: var(--display); font-size: 26px; letter-spacing: 0.04em; }
.mast nav { display: flex; gap: 22px; flex-wrap: wrap; font-size: 15px; font-weight: 500; }
.mast nav a { text-decoration: none; color: var(--silver); }
.mast nav a:hover { color: var(--white); }
.mast nav a.signin { color: var(--gold); }
.mast .lead { display: grid; grid-template-columns: 200px 1fr; gap: 40px; align-items: center; margin-top: 48px; }
.mast .lead img { width: 200px; height: 200px; }
.mast .lead p { font-size: 1.1em; }
@media (max-width: 720px) {
  .mast .lead { grid-template-columns: 1fr; gap: 24px; margin-top: 32px; }
  .mast .lead img { width: 140px; height: 140px; }
}
.mast.small { padding: 24px 0; }

/* ── Sections ───────────────────────────────────────────────────────────── */
section { padding: 56px 0; }
section + section { border-top: 1px solid var(--line); }

/* ── The dated entries ──────────────────────────────────────────────────── */
.entry { padding: 56px 0; border-top: 1px solid var(--line); display: grid; gap: 20px; }
.entry time, .entry .when {
  display: block; font-family: var(--display); font-size: clamp(56px, 9vw, 96px);
  line-height: 0.9; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; color: var(--navy);
}
.entry .accent { height: 3px; width: 96px; background: var(--accent, var(--gold-deep)); }
.entry .row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 32px; align-items: start; }
.entry .slot {
  margin: 0; aspect-ratio: 3 / 2; border-radius: 20px; overflow: hidden;
  background: var(--slot, var(--navy)); display: grid; place-items: center;
}
.entry .slot img { width: 56%; height: auto; }
.entry .slot img.photo { width: 100%; height: 100%; object-fit: cover; }
.entry .side { display: grid; gap: 14px; }
.entry .side .lockup { width: min(260px, 100%); }
.entry .side .tag { font-size: 14px; color: var(--slate); letter-spacing: 0.02em; }
.entry .side h2 { font-size: clamp(30px, 4vw, 40px); }
.entry .k { font-weight: 600; }
.entry .open { display: inline-block; margin-top: 4px; font-weight: 600; color: var(--gold-deep); text-decoration: none; border-bottom: 2px solid var(--gold-deep); padding-bottom: 2px; }
.entry .open:hover { color: var(--navy); border-color: var(--navy); }
@media (max-width: 720px) {
  .entry { padding: 40px 0; }
  .entry .row { grid-template-columns: 1fr; gap: 20px; }
  .entry .slot { border-radius: 14px; }
}

/* ── Documents: privacy, terms, support, delete ─────────────────────────── */
.doc { padding: 40px 0 72px; }
.doc .stack { gap: 28px; }
.doc h2 { font-size: clamp(30px, 4vw, 40px); margin-top: 20px; }
.doc ol, .doc ul { margin: 0; padding-left: 24px; max-width: var(--measure); }
.doc li { margin: 8px 0; }
.doc blockquote { margin: 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--gold-deep); max-width: var(--measure); }
.doc .meta { color: var(--slate); font-size: 0.85em; }
.doc a { color: var(--navy); }
.panel {
  border: 2px solid var(--gold-deep); padding: 20px 24px; display: grid; gap: 8px;
  max-width: var(--measure); background: var(--white);
}
.panel p { max-width: none; }
.undecided {
  border-left: 3px solid var(--gold-deep); background: rgba(184, 134, 11, 0.08);
  padding: 10px 16px; max-width: var(--measure); font-size: 0.92em;
}
.undecided .label { display: block; margin-bottom: 2px; }
.steps li { margin: 12px 0; }
.mail { font-family: var(--display); font-size: clamp(30px, 5vw, 48px); letter-spacing: 0.03em; word-break: break-all; }
.mail a { text-decoration: none; color: var(--navy); border-bottom: 3px solid var(--gold-deep); }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.foot { padding: 48px 0 40px; }
.foot .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.foot h3 { font-size: 22px; letter-spacing: 0.04em; color: var(--gold); margin-bottom: 12px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 16px; }
.foot a { text-decoration: none; color: var(--silver); }
.foot a:hover { color: var(--white); }
.foot .legal { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line-night); font-size: 14px; color: var(--silver); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
@media (max-width: 720px) { .foot .cols { grid-template-columns: 1fr; } }