/* Noir — the patient campaign look ("What's your skin era?").
   Black and white everywhere except skin, which is always shown in full color.
   One red accent per screen, used for the call to action and nothing else.
   Fonts are self-hosted (SIL OFL 1.1, see /fonts/OFL.txt), so this page loads
   nothing from another origin. */

@font-face { font-family: 'Bodoni Moda'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/bodoni-moda-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Bodoni Moda'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('/fonts/bodoni-moda-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Pinyon Script'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/pinyon-script-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/dm-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/fonts/dm-sans-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/fonts/dm-sans-latin-700-normal.woff2') format('woff2'); }

:root {
  --noir-bg: #0E0E0E;
  --noir-deep: #050505;
  --noir-raised: #161616;
  --noir-line: #2E2E2E;
  --noir-line-strong: #5C5C5C;
  --noir-text: #F5F3EF;
  --noir-text-2: #D6D3CE;
  --noir-text-3: #A8A49E;
  --noir-red: #B3122A;
  --noir-red-hover: #9A0F24;
  --noir-serif: 'Bodoni Moda', 'Didot', Georgia, serif;
  --noir-script: 'Pinyon Script', 'Snell Roundhand', cursive;
  --noir-sans: 'DM Sans', system-ui, -apple-system, sans-serif;
}

/* ---------- shared pieces ---------- */
.noir { background: var(--noir-bg); color: var(--noir-text); font-family: var(--noir-sans); }
.noir-spot { background: radial-gradient(ellipse 120% 70% at 50% 0%, #2B2B2B 0%, var(--noir-bg) 62%); }

.noir-script { font-family: var(--noir-script); color: var(--noir-text-2); line-height: 1; font-weight: 400; }
.noir-cap {
  font-family: var(--noir-serif); font-size: 15px; letter-spacing: .32em;
  text-transform: uppercase; color: var(--noir-text-2); line-height: 1.6;
}
.noir-display {
  margin: 0; font-family: var(--noir-serif); font-style: italic; font-weight: 400;
  line-height: .95; letter-spacing: -.02em; color: var(--noir-text);
}
.noir-label {
  font-size: 11px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--noir-text-3);
}

.noir-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 54px; padding: 0 28px; box-sizing: border-box; border-radius: 2px;
  background: var(--noir-red); color: #FFFFFF; text-decoration: none;
  font: 700 13px/1 var(--noir-sans); letter-spacing: .3em; text-transform: uppercase;
  transition: background 160ms cubic-bezier(.23,1,.32,1), transform 160ms cubic-bezier(.23,1,.32,1);
}
.noir-btn:hover { background: var(--noir-red-hover); }
.noir-btn:active { transform: scale(.98); }
.noir-btn-ghost {
  display: inline-flex; align-items: center; min-height: 44px; color: var(--noir-text-2);
  font: 600 13px/1 var(--noir-sans); letter-spacing: .08em; text-decoration: underline;
  text-underline-offset: 4px;
}
.noir-btn-ghost:hover { color: var(--noir-text); }
.noir a:focus-visible, .noir-btn:focus-visible, .noir-btn-ghost:focus-visible {
  outline: 2px solid var(--noir-text); outline-offset: 3px;
}

/* The shade band: the only full-color element on a noir screen besides real skin. */
.shade-band { display: flex; height: 20px; }
.shade-band span { flex: 1; }
.shade-band span:nth-child(1)  { background: #3B2219; }
.shade-band span:nth-child(2)  { background: #4E2E1F; }
.shade-band span:nth-child(3)  { background: #6B3E26; }
.shade-band span:nth-child(4)  { background: #8A5434; }
.shade-band span:nth-child(5)  { background: #A56B45; }
.shade-band span:nth-child(6)  { background: #BC8560; }
.shade-band span:nth-child(7)  { background: #CF9E7A; }
.shade-band span:nth-child(8)  { background: #DDB394; }
.shade-band span:nth-child(9)  { background: #E8C7AC; }
.shade-band span:nth-child(10) { background: #F1D9C4; }

/* Film strip with sprocket holes; the center frame is the only one in color. */
.film { background: var(--noir-deep); padding: 8px 0; display: grid; gap: 8px; }
.film-holes {
  height: 7px; margin: 0 10px;
  background-image: radial-gradient(circle at 5px 3.5px, #2E2E2E 3.5px, transparent 4px);
  background-size: 24px 7px; background-repeat: repeat-x;
}
.film-frames { display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 8px; padding: 0 8px; align-items: stretch; }
.film-frame {
  position: relative; display: flex; align-items: flex-end;
  padding: 10px; box-sizing: border-box; overflow: hidden;
  font-family: var(--noir-serif); font-style: italic; font-size: 15px; color: var(--noir-text);
}
.film-frame.g1 { background: linear-gradient(180deg, #6A6A6A, #3A3A3A); }
.film-frame.g2 { background: linear-gradient(180deg, #8C8C8C, #4A4A4A); }
.film-frame.skin {
  aspect-ratio: 3 / 4;
  background: radial-gradient(ellipse 70% 60% at 50% 40%, #B47A52 0%, #8A5434 55%, #5E3420 100%);
  outline: 1px solid var(--noir-text); outline-offset: -1px;
  font-family: var(--noir-sans); font-style: normal; font-size: 11px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; justify-content: center;
}

@media (max-width: 600px) {
  .noir-btn { letter-spacing: .16em; padding: 0 20px; font-size: 12px; }
}

@media (prefers-reduced-motion: no-preference) {
  .noir-rise { animation: noirRise 700ms cubic-bezier(.23,1,.32,1) both; }
  .noir-rise.d1 { animation-delay: 120ms; }
  .noir-rise.d2 { animation-delay: 240ms; }
  .noir-rise.d3 { animation-delay: 360ms; }
  @keyframes noirRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}