/* derekvogl.com — shared styles for both hero treatments.
   Version-specific hero rules live inline in each HTML file. */

/* ------------------------------------------------------------------ fonts */

@font-face {
  font-family: "Newsreader";
  src: url("fonts/newsreader-latin-500-opsz.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Libre Franklin";
  src: url("fonts/libre-franklin-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
}

/* ----------------------------------------------------------------- tokens */

:root {
  --paper: #faf7f2;
  --ink: #1a1a18;
  --accent: #365143;
  --deep: #20382c;
  --on-deep: #f2efe9;
  --accent-on-deep: #b9cdbd;
  /* Sampled from the photograph's own backdrop so the two can meet. */
  --studio: #bab4ae;
  --rule-light: rgba(26, 26, 24, 0.16);
  --rule-dark: rgba(242, 239, 233, 0.18);

  --display: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Libre Franklin", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --wrap: min(1180px, calc(100vw - 48px));
  --measure: 58ch;
}

/* ------------------------------------------------------------------ reset */

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--paper); }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 20px/1.65 var(--sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(54, 81, 67, 0.18);
  overflow-x: hidden;
}

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

::selection { background: var(--accent); color: var(--paper); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.band--deep :focus-visible { outline-color: var(--accent-on-deep); }

/* ------------------------------------------------------------------ shell */

.band { position: relative; padding-block: 120px; }
.band--deep { background: var(--deep); color: var(--on-deep); }

.wrap { width: var(--wrap); margin-inline: auto; }

.prose { max-width: var(--measure); margin-top: 40px; }
.prose p { margin: 0 0 24px; }
.prose p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------- typography */

.eyebrow {
  margin: 0 0 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule-light);
  color: var(--accent);
  font: 600 12px/1 var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.band--deep .eyebrow {
  border-bottom-color: var(--rule-dark);
  color: var(--accent-on-deep);
}

h1, h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  text-wrap: balance;
}

h1 {
  margin-left: -0.03em;   /* optical inset: aligns the stem, not the box */
  font-size: clamp(64px, 10vw, 116px);
  letter-spacing: -0.038em;
  line-height: 0.88;
}

h2 {
  font-size: clamp(34px, 4.5vw, 52px);
  letter-spacing: -0.03em;
  line-height: 1.02;
}

p { text-wrap: pretty; }

.standfirst {
  max-width: 21ch;
  margin: 28px 0 0;
  font: 500 clamp(24px, 3vw, 34px)/1.22 var(--display);
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.role {
  margin: 28px 0 0;
  color: rgba(26, 26, 24, 0.72);
  font: 400 19px/1.5 var(--sans);
}

.lede { max-width: var(--measure); margin: 24px 0 0; }

/* ------------------------------------------------------------------ video */

.video {
  position: relative;
  width: 100%;
  margin-top: 40px;
  border: 1px solid var(--rule-dark);
  background: #16241c;
  aspect-ratio: 16 / 9;
}

.band:not(.band--deep) .video { border-color: var(--rule-light); background: #10201a; }

.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.play {
  position: absolute;
  inset: 0;
  display: grid;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  place-items: center;
}

.play__disc {
  display: grid;
  width: 88px;
  height: 88px;
  border: 2px solid var(--on-deep);
  border-radius: 50%;
  background: rgba(32, 56, 44, 0.7);
  place-items: center;
  transition: background 160ms ease;
}

.play__disc::after {
  content: "";
  margin-left: 6px;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 24px solid var(--on-deep);
}

.play:hover .play__disc { background: var(--accent); }
.play[aria-disabled="true"] { cursor: default; }
.play[aria-disabled="true"] .play__disc { opacity: 0.4; background: none; }

/* ----------------------------------------------------------------- footer */

.site-footer {
  padding-block: 64px;
  border-top: 1px solid var(--rule-dark);
  background: var(--deep);
  color: var(--on-deep);
}

.site-footer ul { margin: 0; padding: 0; list-style: none; }

.site-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  color: var(--on-deep);
  font-size: 18px;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

.site-footer a:hover { color: var(--accent-on-deep); }

/* ------------------------------------------------------------- responsive */

@media (max-width: 900px) {
  :root { --wrap: calc(100vw - 40px); }
  .band { padding-block: 76px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ---------------------------------------------------- approved flat page */

/* These refinements are deliberately scoped to index.html. The rejected
   liquid-glass reference shares this stylesheet and must remain unchanged.
   The navy is sampled from the supplied digital lockups; the supporting blues
   and neutrals follow the current UnitedHealthcare web palette. */
.site--flat {
  --paper: #faf8f2;
  --ink: #333333;
  --accent: #002677;
  --deep: #002677;
  --on-deep: #ffffff;
  --accent-on-deep: #e7f8fa;
  --rule-light: rgba(51, 51, 51, 0.2);
  --rule-dark: rgba(231, 248, 250, 0.4);
  --video-surface: #00184d;
  --control-blue: #196ecf;
  --control-blue-hover: #004ba0;
  --muted-ink: #4b4d4f;

  -webkit-tap-highlight-color: rgba(0, 38, 119, 0.18);
}

.site--flat .band { padding-block: 96px; }

.site--flat .eyebrow {
  font: 600 18px/1.2 var(--sans);
  letter-spacing: 0.1em;
}

.site--flat h1 {
  font-size: clamp(52px, 7vw, 92px);
  line-height: 0.95;
}

.site--flat .hero h1,
.site--flat .band:not(.band--deep) h2 {
  color: var(--accent);
}

.site--flat h2 {
  font-size: clamp(34px, 4vw, 48px);
  line-height: 1.08;
}

.site--flat .role {
  max-width: 32ch;
  color: var(--muted-ink);
  font-size: 20px;
}

.site--flat .band--deep .wrap {
  width: min(1000px, calc(100vw - 48px));
}

.site--flat .video {
  overflow: hidden;
  border-radius: 16px;
  background: var(--video-surface);
}

.site--flat .video-step + .video-step {
  margin-top: 88px;
  padding-top: 88px;
  border-top: 1px solid var(--rule-dark);
}

.site--flat .play__disc {
  border-width: 3px;
  background: var(--control-blue);
  transition: none;
}

.site--flat .play:hover .play__disc {
  background: var(--control-blue-hover);
}

.site--flat .play:focus-visible { outline: none; }

.site--flat .play:focus-visible .play__disc {
  outline: 3px solid var(--on-deep);
  outline-offset: 6px;
}

.site--flat .site-footer a {
  padding: 8px 20px;
  border: 2px solid var(--on-deep);
  border-radius: 999px;
  color: var(--on-deep);
  font-size: 20px;
  font-weight: 600;
  text-decoration: none;
}

.site--flat .site-footer a:hover {
  border-color: var(--accent-on-deep);
  background: var(--accent-on-deep);
  color: var(--deep);
}

.site--flat .site-footer :focus-visible {
  outline: 3px solid var(--accent-on-deep);
  outline-offset: 4px;
}

@media (max-width: 900px) {
  .site--flat .band { padding-block: 64px; }

  .site--flat .band--deep {
    padding-top: 48px;
  }

  .site--flat .band--deep .wrap {
    width: calc(100vw - 40px);
  }

  .site--flat .video-step + .video-step {
    margin-top: 64px;
    padding-top: 64px;
  }
}

@media (max-width: 560px) {
  .site--flat .eyebrow {
    margin-bottom: 14px;
    padding-bottom: 10px;
  }

  .site--flat .standfirst {
    margin-top: 18px;
    font-size: clamp(23px, 6vw, 27px);
    line-height: 1.25;
  }

  .site--flat .role { margin-top: 16px; }
  .site--flat .video { margin-top: 32px; }
}


/* ------------------------------------------------- television, video two */

/* The second video IS a vintage television until it is played. The poster
   state has no card at all: the container takes the set's own aspect ratio
   (1200x825, the shipped asset), the set fills it edge to edge, and a soft
   shadow grounds it on the deep navy band. The SMPTE bars are kept
   deliberately: a test pattern is the universal signal for "transmission
   about to begin", and the avatar video will open on the same bars.

   On click, player.js adds .video--playing: the container becomes the
   standard 16:9 video card, identical to video one, and the iframe fills
   it at full width. The set is a poster, never a frame around a playing
   video, so nothing about the viewing experience shrinks. */

.site--flat .video--tv {
  aspect-ratio: 1200 / 761;
  overflow: visible;               /* the drop shadow must not be clipped */
  border: 0;
  border-radius: 0;
  background: transparent;
}

.site--flat .video--tv .play__tv {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  filter: drop-shadow(0 24px 44px rgba(0, 12, 40, 0.45));
}

/* Playing state: the ordinary rounded video card, same as video one. */
.site--flat .video--tv.video--playing {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--rule-dark);
  border-radius: 16px;
  background: var(--video-surface);
}

/* Measured against the shipped asset, not guessed: the screen's centre sits
   at 49% across and 48.4% down the cabinet, and in the poster state the
   cabinet fills the container exactly, so the same figures hold here. */
.site--flat .play--tv .play__disc {
  position: absolute;
  top: 48.4%;
  left: 49%;
  transform: translate(-50%, -50%);
}

@media (max-width: 560px) {
  /* On a ~230px-tall poster the full-size disc crowds the glass. */
  .site--flat .play--tv .play__disc { width: 64px; height: 64px; }
  .site--flat .play--tv .play__disc::after {
    margin-left: 5px;
    border-top-width: 11px;
    border-bottom-width: 11px;
    border-left-width: 18px;
  }
}

/* ------------------------------------------------------- branding figure */

/* Supplied by Derek and added at his request. Sits directly beside the
   paragraph naming his employer, framed exactly like the other cards on
   the page so it reads as content rather than as an advertisement. */

.site--flat .brand-figure {
  max-width: var(--measure);
  margin: 48px 0 0;
  overflow: hidden;
  border: 1px solid var(--rule-light);
  border-radius: 16px;
  background: #fff;
}

.site--flat .brand-figure img {
  display: block;
  width: 100%;
  height: auto;
}