/* ==========================================================================
   undecided.media
   Built to Matt's design handoff. Tokens mirror UndecidedMediaHandoff/design-tokens/.
   Black-and-white base, blue #4593D3 as the single accent. No gradients.
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------- */
@font-face{font-family:"Titillium Web";src:url("../fonts/titillium-300.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Titillium Web";src:url("../fonts/titillium-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Titillium Web";src:url("../fonts/titillium-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Roboto";src:url("../fonts/roboto-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Roboto";src:url("../fonts/roboto-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}

/* --- Tokens --------------------------------------------------------------- */
:root{
  --blue:#4593D3;
  --blue-hover:#3A82C2;
  --blue-press:#2E6FA8;
  --blue-bright:#5BA9EA;   /* on-dark accent text */
  --blue-100:#E3F0FA;
  --blue-200:#B6D5EE;

  --black:#000;
  --near-black:#111;
  --surface-dark:#1D1D1D;
  --gray-700:#333;
  --gray-600:#666;
  --gray-400:#999;
  --silver:#CCC;
  --gray-200:#E2E2E2;
  --gray-100:#F2F2F2;
  --white:#FFF;

  --hairline-on-dark:rgba(255,255,255,.18);
  --border-on-dark:rgba(255,255,255,.35);

  --font-display:"Titillium Web",system-ui,"Segoe UI",sans-serif;
  --font-body:"Roboto",system-ui,-apple-system,"Segoe UI",sans-serif;

  --radius:8px;
  --radius-lg:12px;
  --radius-pill:999px;

  --shadow-md:0 4px 12px rgba(0,0,0,.08);
  --shadow-lg:0 10px 30px rgba(0,0,0,.10);

  --fast:120ms;
  --base:180ms;
  --ease:cubic-bezier(.2,0,0,1);

  --gutter:80px;
  --wrap:1440px;
}

/* --- Reset / base --------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.5;
  color:var(--black);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue);text-decoration:none;transition:color var(--fast) var(--ease)}
a:hover{color:var(--blue-press)}
h1,h2,h3{font-family:var(--font-display);margin:0}
p{margin:0}
:focus-visible{outline:none;box-shadow:0 0 0 3px var(--blue-200);border-radius:4px}
.dark :focus-visible{box-shadow:0 0 0 3px var(--blue-bright)}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--blue);color:#fff;padding:12px 20px;border-radius:0 0 var(--radius) 0}
.skip-link:focus{left:0;color:#fff}

/* --- Layout --------------------------------------------------------------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.section{padding-top:96px;padding-bottom:96px}
.section--tight{padding-top:88px;padding-bottom:88px}
.band-dark{background:var(--near-black);color:var(--white)}
.band-muted{background:var(--gray-100)}

/* --- Type ----------------------------------------------------------------- */
.eyebrow{
  font-family:var(--font-display);font-weight:600;font-size:13px;
  letter-spacing:.12em;color:var(--blue);text-transform:uppercase;
}
.dark .eyebrow,.eyebrow--on-dark{color:var(--blue-bright)}
.h1{font-size:54px;line-height:1.1;letter-spacing:-.02em}
.h2{font-size:40px;line-height:1.15}
.h2--sm{font-size:36px}
.h3{font-family:var(--font-display);font-weight:600;font-size:22px}
.bold{font-weight:700}
.light{font-weight:300}
.lede{font-size:19px;line-height:1.6;color:var(--silver);max-width:560px}
.body-lg{font-size:17px;line-height:1.65;color:var(--gray-600)}
.body{font-size:15px;line-height:1.65;color:var(--gray-600)}
.body-16{font-size:16px;line-height:1.65;color:var(--gray-600)}

/* --- Buttons -------------------------------------------------------------- */
.btn{
  display:inline-block;font-family:var(--font-body);font-size:16px;font-weight:500;
  border-radius:var(--radius);padding:15px 32px;border:1px solid transparent;cursor:pointer;
  transition:background var(--base) var(--ease),color var(--base) var(--ease),
             border-color var(--base) var(--ease),transform var(--fast) var(--ease);
}
.btn--primary{background:var(--blue);color:var(--white)}
.btn--primary:hover{background:var(--blue-hover);color:var(--white)}
.btn--primary:active{background:var(--blue-press);transform:scale(.98)}
.btn--ghost{color:var(--white);border-color:var(--border-on-dark);padding:14px 32px}
.btn--ghost:hover{color:var(--white);border-color:var(--white);background:rgba(255,255,255,.06)}
.btn--wide{padding-left:36px;padding-right:36px}

/* --- Brand lockup (launch version: mark + wordmark) ----------------------- */
/* Matt is making a new header logo. When it lands, this is the only block and
   the only markup partial that changes. Ask for an SVG. */
.brand{display:inline-flex;align-items:center;gap:12px;color:var(--white)}
.brand:hover{color:var(--white)}
.brand__mark{width:34px;height:34px;border-radius:50%;flex:0 0 auto}
.brand__name{font-family:var(--font-display);font-weight:700;font-size:19px;letter-spacing:-.01em;line-height:1}
.brand--sm .brand__mark{width:28px;height:28px}
.brand--sm .brand__name{font-size:16px}

/* --- Header --------------------------------------------------------------- */
.site-header{background:var(--near-black);color:var(--white)}
.site-header__inner{display:flex;justify-content:space-between;align-items:center;padding-top:28px;padding-bottom:24px}
.nav{display:flex;align-items:center;gap:40px}
.nav a{color:var(--white);font-size:15px;font-weight:500}
.nav a:hover{color:var(--blue-bright)}
.nav__cta{border:1px solid var(--border-on-dark);border-radius:var(--radius-pill);padding:10px 22px;transition:border-color var(--base) var(--ease),background var(--base) var(--ease)}
.nav__cta:hover{border-color:var(--white);background:rgba(255,255,255,.06);color:var(--white)}
.nav-toggle{display:none;background:none;border:0;padding:6px;cursor:pointer;flex-direction:column;gap:5px}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--white);transition:transform var(--base) var(--ease),opacity var(--fast) var(--ease)}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* --- Hero ----------------------------------------------------------------- */
.hero{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:center;padding-top:88px;padding-bottom:80px}
.hero__copy{display:flex;flex-direction:column;align-items:flex-start;gap:28px}
.hero__actions{display:flex;gap:16px;align-items:center;flex-wrap:wrap}

/* --- Latest video card ---------------------------------------------------- */
.video-card{display:flex;flex-direction:column;border:1px solid var(--hairline-on-dark);border-radius:var(--radius-lg);overflow:hidden;background:var(--surface-dark)}
.video-card__head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 20px}
.video-card__label{font-family:var(--font-display);font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-bright)}
.video-card__date{font-size:12px;color:var(--gray-400)}
.video-card__thumb{display:block;position:relative;aspect-ratio:16/9;background:#000}
.video-card__thumb img{width:100%;height:100%;object-fit:cover}
.video-card__play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  display:flex;align-items:center;justify-content:center;
  width:64px;height:64px;border-radius:var(--radius-pill);background:var(--blue);
  transition:background var(--base) var(--ease),transform var(--base) var(--ease);
}
.video-card__thumb:hover .video-card__play{background:var(--blue-hover);transform:translate(-50%,-50%) scale(1.06)}
.video-card__body{display:flex;flex-direction:column;gap:10px;padding:20px}
.video-card__title{font-family:var(--font-display);font-weight:600;font-size:20px;line-height:1.3;color:var(--white)}
.video-card__links{display:flex;gap:20px;flex-wrap:wrap}
.video-card__links a{font-size:14px}
.video-card__links a:first-child{color:var(--blue-bright);font-weight:500}
.video-card__links a:last-child{color:var(--silver)}
.video-card__links a:hover{color:var(--white)}

/* --- Stats ---------------------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;border-top:1px solid var(--hairline-on-dark);padding:44px 0 56px}
.stat{display:flex;flex-direction:column;gap:6px}
.stat__num{font-family:var(--font-display);font-weight:700;font-size:40px;color:var(--white);line-height:1}
.stat__label{font-size:14px;color:var(--gray-400)}
.stat__label .stat__short{display:none}

/* --- Cards ---------------------------------------------------------------- */
.card{
  display:flex;flex-direction:column;background:var(--white);
  border:1px solid var(--gray-200);border-radius:var(--radius-lg);overflow:hidden;
  transition:transform var(--base) var(--ease),box-shadow var(--base) var(--ease);
}
.card--pad{padding:36px;gap:14px}
.card--pad-lg{padding:40px;gap:16px}
/* The cover art is a second, larger tap target for the same destination as
   the text link below it. Kept out of the tab order and the a11y tree
   (tabindex/aria-hidden + empty alt) so screen readers and keyboard users get
   ONE link per card, not two to the same place. The show name sits in the
   heading directly below, so nothing is lost by the empty alt. */
.card__media-link{display:block}
.card__media{width:100%;display:block;aspect-ratio:1/1;object-fit:cover}
.card__body{display:flex;flex-direction:column;gap:12px;padding:28px}
.card__link{font-size:15px;font-weight:500}
.card-lift:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}

.tag{align-self:flex-start;background:var(--gray-100);color:var(--gray-600);font-size:12px;font-weight:500;border-radius:var(--radius-pill);padding:5px 12px}

.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.stack-48{display:flex;flex-direction:column;gap:48px}
.stack-40{display:flex;flex-direction:column;gap:40px}
.stack-24{display:flex;flex-direction:column;gap:24px}
.stack-16{display:flex;flex-direction:column;gap:16px}

/* --- Sponsorships --------------------------------------------------------- */
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:64px;align-items:center}
.split__copy{display:flex;flex-direction:column;gap:20px}

/* --- Firewall band -------------------------------------------------------- */
.firewall{display:flex;flex-direction:column;align-items:center;gap:28px;max-width:900px;margin:0 auto;text-align:center}
.firewall__rule{width:56px;height:3px;background:var(--blue)}
.firewall__statement{font-family:var(--font-display);font-weight:300;font-size:32px;line-height:1.35;color:var(--white)}
.firewall__support{font-size:17px;line-height:1.65;color:var(--silver);max-width:720px}
.firewall a{color:var(--blue-bright);font-size:15px;font-weight:500}
.firewall a:hover{color:var(--white)}

/* --- Centred CTA ---------------------------------------------------------- */
.cta{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.cta .body-lg{max-width:560px;line-height:1.6}

/* --- Page hero (Ethics / Privacy) ----------------------------------------- */
.page-hero{position:relative;overflow:hidden}
.page-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.page-hero__scrim{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.page-hero__inner{position:relative;padding-top:96px;padding-bottom:96px}
.page-hero__content{display:flex;flex-direction:column;gap:22px;max-width:900px}
.page-hero .h1{font-size:52px;color:var(--white)}
.page-hero .lede{max-width:680px}
.page-hero--plain{background:var(--near-black)}
/* Taller variant, used where the photograph needs vertical room to show the
   whole space rather than a slice of it. Ethics only. */
.page-hero--tall .page-hero__inner{padding-top:140px;padding-bottom:140px}

/* --- Callout -------------------------------------------------------------- */
.callout{display:flex;flex-direction:column;gap:10px;background:var(--blue-100);border:1px solid var(--blue-200);border-radius:var(--radius-lg);padding:28px 36px}
.callout p{font-size:15px;line-height:1.65;color:var(--gray-700)}

/* --- Pills ---------------------------------------------------------------- */
.pills{display:flex;flex-wrap:wrap;gap:12px}
.pill{background:var(--white);border:1px solid var(--gray-200);color:var(--gray-700);font-size:14px;font-weight:500;border-radius:var(--radius-pill);padding:8px 18px}

/* --- Policy embed (Termly) ----------------------------------------------- */
/* The privacy policy is a Termly embed shared with the three Ghost sites, so
   Termly ships its own typography. We only constrain the measure and stop it
   overflowing on small screens. */
.policy{max-width:820px}
.policy img,.policy table{max-width:100%}
.policy [name="termly-embed"]{overflow-x:auto}

/* --- Contact page --------------------------------------------------------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:80px;align-items:start;padding-top:88px;padding-bottom:96px}
.contact-details{display:flex;flex-direction:column;gap:18px;border-top:1px solid var(--gray-200);padding-top:28px}
.contact-details__group{display:flex;flex-direction:column;gap:4px}
.contact-details__label{font-family:var(--font-display);font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gray-400)}
.contact-details__value{font-size:16px;color:var(--gray-700);line-height:1.5}
.contact-details a{font-size:16px;font-weight:500}
.contact-intro .h1{font-size:48px}

/* --- Form ----------------------------------------------------------------- */
.form-card{display:flex;flex-direction:column;gap:20px;border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:40px;background:var(--white)}
.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:14px;font-weight:500;color:var(--gray-700)}
.field label .optional{color:var(--gray-400);font-weight:400}
.field input,.field textarea{
  font-family:var(--font-body);font-size:16px;color:var(--black);background:var(--white);
  border:1px solid var(--silver);border-radius:var(--radius);padding:13px 14px;width:100%;
  transition:border-color var(--fast) var(--ease),box-shadow var(--fast) var(--ease);
}
.field textarea{resize:vertical;min-height:150px}
.field input:hover,.field textarea:hover{border-color:var(--gray-400)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-200)}
.form-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.form-note{font-size:13px;color:var(--gray-400)}
.form-result{font-size:14px;line-height:1.5;min-height:0}
.form-result.is-success{color:#1f7a3d}
.form-result.is-error{color:#b3261e}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.btn[disabled]{opacity:.6;cursor:not-allowed}

/* --- Footer --------------------------------------------------------------- */
.site-footer{background:var(--near-black);color:var(--white);padding-top:56px;padding-bottom:48px}
.site-footer__top{display:flex;justify-content:space-between;align-items:flex-start;gap:40px}
.site-footer__cols{display:flex;gap:64px}
.site-footer__col{display:flex;flex-direction:column;gap:12px}
.site-footer__head{font-family:var(--font-display);font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gray-400)}
.site-footer__col a{color:var(--silver);font-size:14px}
.site-footer__col a:hover{color:var(--white)}
.site-footer__legal{border-top:1px solid var(--hairline-on-dark);margin-top:44px;padding-top:24px;font-size:13px;color:var(--gray-400)}
.site-footer__legal a{color:var(--silver)}
.site-footer__legal a:hover{color:var(--white)}
.site-footer__sep{margin:0 10px;color:var(--gray-600)}

/* ==========================================================================
   Responsive. Main.dc.html (1440) and Mobile.dc.html (390) are the two ends.
   ========================================================================== */
@media (max-width:1199px){
  :root{--gutter:48px}
  .h1{font-size:46px}
  .hero{gap:48px}
  .split{gap:48px}
}

@media (max-width:1023px){
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero{grid-template-columns:1fr;gap:40px;align-items:stretch}
  .split{grid-template-columns:1fr;gap:40px}
  .contact-grid{grid-template-columns:1fr;gap:48px}
  .page-hero .h1{font-size:44px}
  .page-hero--tall .page-hero__inner{padding-top:104px;padding-bottom:104px}
}

@media (max-width:767px){
  :root{--gutter:24px}
  .section{padding-top:56px;padding-bottom:56px}
  .section--tight{padding-top:56px;padding-bottom:56px}

  .site-header__inner{padding-top:18px;padding-bottom:18px}
  .brand__mark{width:24px;height:24px}
  .brand__name{font-size:16px}
  .nav-toggle{display:flex}
  .nav{
    /* top:100% is load-bearing. Absolutely positioned with no `top`, the panel
       falls back to its static position as a vertically-centred flex item, which
       puts it ABOVE the header and hides the logo and close button. */
    display:none;position:absolute;top:100%;left:0;right:0;z-index:20;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--near-black);border-top:1px solid var(--hairline-on-dark);
    padding:8px 24px 20px;
    box-shadow:0 10px 30px rgba(0,0,0,.4);
  }
  .nav.is-open{display:flex}
  .nav a{padding:14px 0;font-size:16px}
  .nav__cta{text-align:center;margin-top:12px;padding:14px 22px}
  .site-header{position:relative}

  .hero{padding-top:48px;padding-bottom:40px;gap:20px}
  .hero__copy{gap:20px}
  .hero__actions{flex-direction:column;align-items:stretch;width:100%;gap:12px}
  .hero__actions .btn{text-align:center;padding:15px 0}
  .h1{font-size:36px;line-height:1.12}
  .lede{font-size:16px}
  .eyebrow{font-size:12px}

  .video-card__head{padding:12px 16px}
  .video-card__label{font-size:11px}
  .video-card__play{width:52px;height:52px}
  .video-card__play svg{width:18px;height:22px}
  .video-card__body{padding:16px;gap:8px}
  .video-card__title{font-size:17px}
  .video-card__links{flex-direction:column;gap:8px}

  .stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:28px 0 36px}
  .stat__num{font-size:24px}
  .stat__label{font-size:12px}
  .stat__label .stat__full{display:none}
  .stat__label .stat__short{display:inline}

  .grid-3,.grid-2{grid-template-columns:1fr;gap:24px}
  .stack-48{gap:24px}
  .stack-40{gap:28px}
  .h2{font-size:28px}
  .h2--sm{font-size:26px}
  .h3{font-size:20px}
  .card__body{padding:22px;gap:10px}
  .card--pad,.card--pad-lg{padding:24px}
  .body,.body-16{font-size:15px;line-height:1.6}
  .body-lg{font-size:16px}

  .firewall{gap:20px}
  .firewall__statement{font-size:24px}
  .firewall__support{font-size:16px}

  .page-hero__inner{padding-top:56px;padding-bottom:56px}
  .page-hero--tall .page-hero__inner{padding-top:76px;padding-bottom:76px}
  .page-hero .h1{font-size:34px}

  .callout{padding:22px 24px}
  .contact-grid{padding-top:48px;padding-bottom:56px}
  .contact-intro .h1{font-size:34px}
  .form-card{padding:24px;gap:16px}
  .form-row{grid-template-columns:1fr;gap:16px}
  .form-foot{flex-direction:column-reverse;align-items:stretch;gap:14px}
  .form-foot .btn{width:100%}
  .form-note{text-align:center}

  .site-footer{padding-top:40px;padding-bottom:36px}
  .site-footer__top{flex-direction:column;gap:32px}
  .site-footer__cols{gap:40px;flex-wrap:wrap}
  .site-footer__legal{margin-top:32px}

}

/* --- Motion preference ---------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .card-lift:hover{transform:none}
  .video-card__thumb:hover .video-card__play{transform:translate(-50%,-50%)}
}

/* --- Policy tables (privacy policy) --------------------------------------- */
.table-scroll{overflow-x:auto;margin:0 0 24px;-webkit-overflow-scrolling:touch}
.policy-table{border-collapse:collapse;width:100%;min-width:640px;font-size:14px}
.policy-table th,.policy-table td{border:1px solid var(--gray-200);padding:12px 14px;text-align:left;vertical-align:top;line-height:1.5}
.policy-table thead th{background:var(--gray-100);font-family:var(--font-display);font-weight:600;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--gray-700)}
.policy-table tbody th{font-weight:500;color:var(--gray-700);width:26%}
.policy-table td{color:var(--gray-600)}
.policy-updated{font-size:14px;color:var(--gray-400);margin:0 0 32px}
/* Phone stays visually plain per the artboard, but remains tappable on mobile. */
.contact-details__value a[href^="tel:"]{color:var(--gray-700);font-weight:400}
.contact-details__value a[href^="tel:"]:hover{color:var(--blue)}