/* team.html's own CSS, extracted from its inline <style> (Task 11). Entirely
 * bespoke to this page: the Tailwind-utility repaint system that takes the
 * v1 dark theme's classes (bg-neutral-900, text-neutral-400, border-brand,
 * and so on) and repaints them onto the v2 paper-and-ink token values,
 * plus the founder-dispatch "ifd" byline block. Nothing here is shared with
 * any other page, including index.html, which keeps its own separate
 * Tailwind-repaint system and is out of scope for this task by the
 * 2026-08-31 decision (test/chrome.test.js: "the Tailwind CDN survives only
 * where the decision left it").
 *
 * The @media(max-width:360px) rule at the end is the one to check first if
 * this page ever looks wrong on a narrow phone: the harness this task relies
 * on for its "steady" verdict only renders at 1280px.
 */

  body { font-family: 'Plus Jakarta Sans', sans-serif; }

  .card-hover {
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  }
  .card-hover:hover {
    transform: translateY(-4px); border-color: rgba(223, 89, 17, 0.33);
    box-shadow: 0 8px 24px rgba(223, 89, 17, 0.15);
  }

  /* ===== Founder dispatch (at top of team page) ===== */
  .ifd {
    position: relative;
    padding: 6rem 1.5rem 5rem;
    background: #0d0d0d;
    border-bottom: 1px solid #1a1a1a;
  }
  .ifd-inner { max-width: 720px; margin: 0 auto; position: relative; }
  .ifd-rule-top { width: 40px; height: 2px; background: #DF5911; margin-bottom: 2.5rem; }
  .ifd-masthead {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 2.5rem;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
    color: #8a8a8a; font-weight: 600;
    border-bottom: 1px solid #1a1a1a; padding-bottom: 1rem;
  }
  .ifd-masthead span:first-child { color: #DF5911; }
  .ifd-title {
    font-family: 'Instrument Serif', serif; font-weight: 400;
    font-size: clamp(2rem, 4vw, 3rem); line-height: 1.15; letter-spacing: -0.01em;
    color: #fff; margin-bottom: 2rem;
  }
  .ifd-title em { font-style: italic; color: #DF5911; }
  .ifd-body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.0625rem; line-height: 1.75; color: #c6c6c6;
  }
  .ifd-body p { margin-bottom: 1.25rem; }
  .ifd-body p strong { color: #fff; font-weight: 600; }
  .ifd-body p em { font-style: italic; color: #DF5911; font-weight: 500; }
  .ifd-signature { margin-top: 2.25rem; display: flex; align-items: center; gap: 1rem; }
  .ifd-sig-name {
    font-family: 'Instrument Serif', serif; font-style: italic; font-size: 1.5rem;
    color: #fff;
  }
  .ifd-sig-title {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
    color: #6a6a6a; font-weight: 600;
  }
  .ifd-drop::first-letter {
    font-family: 'Instrument Serif', serif; font-weight: 400;
    float: left; font-size: 4.5rem; line-height: 0.85;
    padding: 0.35rem 0.7rem 0 0; color: #DF5911;
  }
  .ifd-jump {
    margin-top: 2.5rem;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
    color: #8a8a8a; font-weight: 600;
    display: inline-flex; align-items: center; gap: 0.5rem;
  }

  /* ======================================================================
   * v2 PAPER-AND-INK FOUNDATION OVERRIDE (Team page, Phase A, 2026-05-19)
   * ----------------------------------------------------------------------
   * Layered cascade overrides on top of the v1 dark CSS above. Mirrors the
   * unified-cream homepage override block so both surfaces share one
   * register. Reversible in one delete-block move.
   * ====================================================================== */
  :root {
    --font-display: "Newsreader", "Tiempos Headline", Georgia, serif;
    --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  }

  /* Body + page surface ------------------------------------------------- */
  html, body { background: var(--paper); }
  html { overflow-x: hidden; }
  body.bg-dark, body { background: var(--paper); color: var(--ink); }

  /* Prototype banner removed on live promotion (2026-05-19). */

  /* Typography retarget ------------------------------------------------- */
  body { font-family: var(--font-sans); }
  h1, h2, h3, .font-heading {
    font-family: var(--font-display) !important;
    font-weight: 400 !important;
    letter-spacing: -0.02em;
    color: var(--ink);
  }

  /* Tailwind utility overrides ----------------------------------------- */
  .text-white { color: var(--ink) !important; }
  .text-neutral-200, .text-neutral-300 { color: var(--ink) !important; }
  .text-neutral-400, .text-neutral-500 { color: var(--ink-muted) !important; }
  /* AA contrast, matching the same change index.html already carries: was
     ink-faded at 3.15:1 on paper, now ink-muted at 6.30:1. Five elements on
     this page, the three footer links plus the company registration line. */
  .text-neutral-600, .text-neutral-700 { color: var(--ink-muted) !important; }
  .border-neutral-700, .border-neutral-800, .border-neutral-900 { border-color: var(--rule) !important; }
  .bg-neutral-900, .bg-neutral-950, .bg-black { background: var(--paper-card) !important; }

  /* Nav ----------------------------------------------------------------- */
  nav.flex.justify-between { background: rgba(240, 233, 220, 0.92) !important; backdrop-filter: blur(8px); border-bottom: 1px solid var(--rule); }
  nav .text-brand { color: var(--orange) !important; }
  .nav-wordmark { height: 32px; width: auto; display: block; transform: translateY(3px); }
  .nav-wordmark-link, .footer-wordmark-link { display: inline-flex; align-items: center; }
  .footer-wordmark { height: 22px; width: auto; display: block; }

  /* CTAs - same consistent treatment as the homepage --------------------- */
  /* CTAs are drawn controls (.btn-drawn, /assets/drawn-controls.css) since 2026-08-20. */

  /* Founder Dispatch (.ifd) - the editorial centerpiece ----------------- */
  /* v1 was dark with white headings and gray body; v2 flips to paper with
     ink headings, ink-muted body. Newsreader carries the serif emphasis the
     v1 Instrument Serif used to. */
  .ifd {
    background: var(--paper) !important;
    border-bottom: 1px solid var(--rule) !important;
  }
  .ifd-rule-top { background: var(--orange) !important; }
  .ifd-masthead {
    color: var(--ink-muted) !important;
    border-bottom-color: var(--rule) !important;
    font-family: var(--font-mono) !important;
  }
  .ifd-masthead span:first-child { color: var(--orange) !important; }
  .ifd-title {
    font-family: var(--font-display) !important;
    color: var(--ink) !important;
  }
  .ifd-title em { color: var(--orange) !important; font-style: italic; }
  .ifd-body { color: var(--ink-muted) !important; font-family: var(--font-sans) !important; }
  .ifd-body p strong { color: var(--ink) !important; }
  .ifd-body p em { color: var(--orange) !important; }
  .ifd-sig-name { font-family: var(--font-display) !important; color: var(--ink) !important; }
  .ifd-sig-title { color: var(--ink-muted) !important; font-family: var(--font-mono) !important; }
  .ifd-drop::first-letter {
    font-family: var(--font-display) !important;
    color: var(--orange) !important;
  }
  .ifd-jump { color: var(--ink-muted) !important; font-family: var(--font-mono) !important; }
  .ifd-jump:hover { color: var(--orange) !important; }

  /* Founder card (Shaun) ------------------------------------------------ */
  /* Drop the dark-card bg + heavy border, replace with paper-card + hairline.
     Round corners drop to 0 (v2 default). */
  #team .bg-dark-card {
    background: var(--paper-card) !important;
    border-color: var(--rule) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  #team .bg-dark-card h2 { color: var(--orange) !important; }
  /* Founder photo ring: drop the dark borders */
  #team .border-neutral-800 { border-color: var(--rule-soft) !important; }
  #team .bg-neutral-900 { background: var(--paper-2) !important; }

  /* Experience cards (Sweat, Sweatcoin, VICI) --------------------------- */
  /* The 6 cards had inline orange-gradient style attributes. CSS can't
     override inline style, so the markup edits ALSO strip the inline gradient
     attribute. These rules style the resulting plain cards.
     2026-05-19 update: restored the v1 "card lift" hover effect Shaun called
     out by name. translateY(-4px) + an orange-tinted box-shadow reads as the
     card lifting off the desk towards the reader; the orange tone keeps the
     depth cue on-brand instead of using a generic ink shadow. */
  #team .card-hover {
    background: var(--paper-card) !important;
    border: 1px solid var(--rule) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: transform 0.22s var(--ease-ink), border-color 0.22s var(--ease-ink), box-shadow 0.22s var(--ease-ink) !important;
  }
  #team .card-hover:hover {
    transform: translateY(-4px) !important;
    border-color: var(--orange) !important;
    box-shadow: 0 8px 24px rgba(223, 89, 17, 0.15) !important;
  }
  #team .card-hover p { color: var(--ink-muted) !important; }

  /* v2 HighlightText (marker wash) - same implementation as homepage ---- */
  .highlight {
    position: relative;
    display: inline-block;
    background: transparent;
    padding: 0 0.12em;
    white-space: nowrap;
    z-index: 0;
    color: var(--ink) !important;
  }
  .highlight::before,
  .highlight::after {
    content: "";
    position: absolute;
    background: var(--orange-soft);
    z-index: -1;
    pointer-events: none;
    opacity: 0.7;
  }
  .highlight::before {
    left: -0.08em; right: 0.06em; top: -0.12em; bottom: 0.2em;
    filter: url(#marker-rough);
  }
  .highlight::after {
    left: 0.06em; right: -0.08em; top: 0.15em; bottom: -0.08em;
    filter: url(#marker-rough-2);
  }

  /* Footer -------------------------------------------------------------- */
  footer { color: var(--ink-muted) !important; border-top: 1px solid var(--rule); }
  footer a { color: var(--ink) !important; }
  /* --orange-deep so hover does not drop below the rest state it replaces:
     rest is --ink-muted at 6.30:1 and --orange would hover at 3.12:1. */
  footer a:hover { color: var(--orange-deep) !important; }

  /* Brand-orange utility globally --------------------------------------- */
  .text-brand { color: var(--orange) !important; }
  .bg-brand { background: var(--orange) !important; }
  .bg-brand\/10, .bg-brand\/15 { background: var(--orange-wash) !important; }
  .border-brand, .border-brand\/15, .border-brand\/20 { border-color: var(--orange) !important; }


/* Snag 34. At 320 the nav's right-hand group runs 37px past the edge, because
   the drawn Get started button cannot wrap and the tagline holds the left group
   open. This is the treatment index.html already carries at the same breakpoint,
   and 361px upward is untouched. */
@media (max-width: 360px) {
  body > nav { padding-left: 1rem; padding-right: 1rem; }
  body > nav span[data-drawn] { display: none; }
}