/* Audience looks. A look is a family (career, students, military) plus a
   color scheme, named <family>-<scheme> and listed in LOOKS in
   site_catalog.py. Everything is scoped to html[data-look] and screen only,
   so printed pages stay plain and classic pages are unchanged.
   The audience landing pages (/career/, /students/, /military/) use the
   .aud-* classes below; published checklists and finish pages pick the look
   up from ?look= and entry.js carries it through. */

@font-face{font-family:"Bangers";src:url("/assets/fonts/bangers.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Saira Stencil One";src:url("/assets/fonts/saira-stencil-one.woff2") format("woff2");font-display:swap}

@media screen{

/* =====================================================================
   Color schemes. --blue is the main color, --amber the second; --on-blue
   is the text color on a --blue fill.
   ===================================================================== */

/* career: clean, all sans, follows light/dark */
html[data-look="career-teal"]{
  --ink:#0F1D2B; --paper:#F3F7F8; --surface:#FFFFFF; --slate:#4A5A68;
  --blue:#0B6E6E; --blue-soft:#E2F1EF; --blue-deep:#08504F; --on-blue:#FFFFFF;
  --amber:#B93C0A; --amber-soft:#FFF0E6; --rule:#D6E1E5; --rule-strong:#A9BCC4;
}
html[data-look="career-navy"]{
  --ink:#111827; --paper:#F5F6F9; --surface:#FFFFFF; --slate:#4B5563;
  --blue:#1E3A8A; --blue-soft:#E6ECFA; --blue-deep:#172C6B; --on-blue:#FFFFFF;
  --amber:#A34A06; --amber-soft:#FEF3E2; --rule:#DCE1EA; --rule-strong:#AEB7C6;
}
html[data-look="career-plum"]{
  --ink:#1C1424; --paper:#F8F5F8; --surface:#FFFFFF; --slate:#57505E;
  --blue:#6B2D63; --blue-soft:#F3E8F1; --blue-deep:#52214C; --on-blue:#FFFFFF;
  --amber:#26704B; --amber-soft:#E5F3EB; --rule:#E4DCE3; --rule-strong:#BBAFBA;
}
html[data-look="career-green"]{
  --ink:#111418; --paper:#F4F5F6; --surface:#FFFFFF; --slate:#4B525C;
  --blue:#15703B; --blue-soft:#E3F2E8; --blue-deep:#0F552C; --on-blue:#FFFFFF;
  --amber:#2F3A46; --amber-soft:#E8EBEF; --rule:#DDE0E4; --rule-strong:#AEB4BC;
}
@media (prefers-color-scheme:dark){
  html[data-look^="career-"]{
    --ink:#E6EEF1; --paper:#0D161B; --surface:#14212A; --slate:#9DB0BA;
    --rule:#22343D; --rule-strong:#3A5260; --on-blue:#0D161B;
  }
  html[data-look="career-teal"]{--blue:#4FC2BB; --blue-soft:#12302F; --blue-deep:#7AD6D0; --amber:#FF9A62; --amber-soft:#2E1D13}
  html[data-look="career-navy"]{--blue:#8EA8F0; --blue-soft:#18233F; --blue-deep:#B3C4F5; --amber:#F2B45B; --amber-soft:#2D2312}
  html[data-look="career-green"]{--blue:#5FD08E; --blue-soft:#12301F; --blue-deep:#8EE0AE; --amber:#C3CCD6; --amber-soft:#1E252C}
  html[data-look="career-plum"]{--blue:#D99BCF; --blue-soft:#311C2E; --blue-deep:#E8BEE1; --amber:#7BD1A4; --amber-soft:#16291F}
}

/* students: comic panel, light only */
html[data-look^="students-"]{
  color-scheme:light; --serif:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ink:#14110F; --paper:#F4EFE1; --surface:#FFFFFF; --slate:#4A443B;
  --rule:#14110F; --rule-strong:#14110F; --on-blue:#FFFFFF;
}
html[data-look="students-blue"]{--blue:#1B47A0; --blue-soft:#E6ECF8; --blue-deep:#143679; --amber:#A33A00; --amber-soft:#FFF3C2; --tape:#FFD23F}
html[data-look="students-red"]{--blue:#C3231A; --blue-soft:#FBE3E1; --blue-deep:#9A1B14; --amber:#1B47A0; --amber-soft:#FFF3C2; --tape:#FFD23F}
html[data-look="students-green"]{--blue:#1A6B3A; --blue-soft:#E5F1E9; --blue-deep:#13522C; --amber:#7A3F12; --amber-soft:#FBECC4; --tape:#F2B632}
html[data-look="students-orange"]{
  --ink:#12233F; --paper:#F1EEE6; --slate:#3D4A60; --rule:#12233F; --rule-strong:#12233F;
  --blue:#B23C04; --blue-soft:#FBE7DB; --blue-deep:#8F3003; --amber:#1D5A85; --amber-soft:#E2F1FA; --tape:#8FD3F4;
}

/* military: mission board, light only */
html[data-look^="military-"]{color-scheme:light; --serif:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif}
html[data-look="military-scarlet"]{
  --ink:#1E1416; --paper:#EFE9E1; --surface:#FAF7F2; --slate:#52464A;
  --rule:#AC9C93; --rule-strong:#8C0B1F; --dark:#8C0B1F; --on-dark:#FFF7E3;
  --blue:#FFC72C; --blue-soft:#F5EDE2; --blue-deep:#E8AE12; --on-blue:#2A0A0F;
  --amber:#A50F25; --amber-soft:#F7E3E3; --tape:#FFD866;
}
html[data-look="military-black"]{
  --ink:#141414; --paper:#ECEAE3; --surface:#F8F7F3; --slate:#4A4A44;
  --rule:#9A968A; --rule-strong:#111111; --dark:#111111; --on-dark:#F8F7F3;
  --blue:#FFCC01; --blue-soft:#F2EFE4; --blue-deep:#E0B400; --on-blue:#111111;
  --amber:#111111; --amber-soft:#F7EFCF; --tape:#FFE07A;
}
html[data-look="military-blue"]{
  --ink:#0D1B33; --paper:#E6EBF3; --surface:#F7F9FD; --slate:#43506A;
  --rule:#93A2BD; --rule-strong:#00308F; --dark:#00308F; --on-dark:#F7F9FD;
  --blue:#FFD100; --blue-soft:#EBF0F9; --blue-deep:#E6BC00; --on-blue:#0D1B33;
  --amber:#00308F; --amber-soft:#E1E8F7; --tape:#FFE680;
}
html[data-look="military-navy"]{
  --ink:#0F1E33; --paper:#E4E9F1; --surface:#F6F8FC; --slate:#44536B;
  --rule:#8FA0BA; --rule-strong:#10294A; --dark:#10294A; --on-dark:#F6F8FC;
  --blue:#F0AE1A; --blue-soft:#E9EDF5; --blue-deep:#D69A10; --on-blue:#10294A;
  --amber:#10294A; --amber-soft:#F9EFD2; --tape:#F4D98A;
}
html[data-look="military-silver"]{
  --ink:#121419; --paper:#E4E6EA; --surface:#F5F6F8; --slate:#4A4F59;
  --rule:#9AA0AA; --rule-strong:#1C1F26; --dark:#1C1F26; --on-dark:#F5F6F8;
  --blue:#B4BAC3; --blue-soft:#ECEEF1; --blue-deep:#9AA1AC; --on-blue:#121419;
  --amber:#1C1F26; --amber-soft:#E3E8F2; --tape:#CDD2DA;
}

/* =====================================================================
   Shared by every look: fills use --on-blue, hovers use --blue-deep.
   ===================================================================== */
html[data-look] .step-head::before,
html[data-look] body.doing .step-head::before,
html[data-look] .fork-btns .go-do,
html[data-look] .done .complete,
html[data-look] .decided-btns .cal-ics,
html[data-look] .resume-start{background:var(--blue);border-color:var(--blue);color:var(--on-blue)}
html[data-look] .fork-btns .go-do:hover,
html[data-look] .done .complete:hover{background:var(--blue-deep);border-color:var(--blue-deep)}
html[data-look] body.doing .nav .next{background:var(--blue);border-color:var(--blue);color:var(--on-blue)}
html[data-look] .stepper-pip.complete{background:var(--amber)}
html[data-look] .why{border-left-color:var(--amber)}

/* =====================================================================
   career family
   ===================================================================== */
html[data-look^="career-"]{--serif:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif}
html[data-look^="career-"] header.top{padding-bottom:1.6rem;background:var(--blue-soft);
  box-shadow:0 0 0 100vmax var(--blue-soft);clip-path:inset(0 -100vmax)}
html[data-look^="career-"] body.doing header.top{box-shadow:none;clip-path:none;background:transparent;border-bottom-color:var(--blue)}
html[data-look^="career-"] .eyebrow,
html[data-look^="career-"] .kicker{display:inline-block;background:var(--blue);color:var(--on-blue);
  padding:.3rem .65rem;border-radius:99px;letter-spacing:.1em}
html[data-look^="career-"] .frame{border-color:transparent;border-left:4px solid var(--amber);box-shadow:var(--shadow-sm)}
html[data-look^="career-"] .fork{border-color:transparent;border-top:4px solid var(--blue);box-shadow:0 8px 24px rgba(15,29,43,.10)}
html[data-look^="career-"] .step-head::before{border-radius:10px}
html[data-look^="career-"] .mins{border-color:var(--blue);color:var(--blue)}
html[data-look^="career-"] .fork-btns button,
html[data-look^="career-"] .done .complete,
html[data-look^="career-"] body.doing .nav .back,
html[data-look^="career-"] body.doing .nav .next{border-radius:10px}
html[data-look^="career-"] .fork-btns .go-later{background:var(--blue-soft);color:var(--blue-deep);border-color:var(--blue-soft)}
html[data-look^="career-"] .bar{background:var(--blue-soft);border-bottom-color:transparent}
html[data-look^="career-"] .signup{border-top-color:var(--amber);border-radius:10px}

/* =====================================================================
   students family: comic panel
   ===================================================================== */
html[data-look^="students-"] body{background-color:var(--paper);
  background-image:radial-gradient(rgba(20,17,15,.12) 1.2px,transparent 1.6px);background-size:11px 11px}
html[data-look^="students-"] body:not(.aud){background-image:radial-gradient(rgba(20,17,15,.06) 1.2px,transparent 1.6px)}
html[data-look^="students-"] h1,
html[data-look^="students-"] h2,
html[data-look^="students-"] .eyebrow,
html[data-look^="students-"] .kicker,
html[data-look^="students-"] .brand,
html[data-look^="students-"] .step-head::before{font-family:"Bangers","Comic Sans MS",Impact,sans-serif;
  font-weight:400;letter-spacing:1px;text-transform:uppercase}
html[data-look^="students-"] h1{text-shadow:3px 3px 0 var(--tape);line-height:1}
html[data-look^="students-"] .step-head h2{font-size:1.5rem;line-height:1.05}
/* Sentences stay in plain bold sans; the display font is for short labels. */
html[data-look^="students-"] .later h2,
html[data-look^="military-"] .later h2{font-family:var(--sans);font-weight:800;text-transform:none;letter-spacing:-.01em}
html[data-look^="students-"] .eyebrow,
html[data-look^="students-"] .kicker{display:inline-block;background:var(--tape);color:var(--ink);
  border:2px solid var(--ink);padding:.12rem .55rem;font-size:.95rem}
html[data-look^="students-"] .frame,
html[data-look^="students-"] .fork,
html[data-look^="students-"] .later,
html[data-look^="students-"] .resume,
html[data-look^="students-"] .signup{border:3px solid var(--ink);border-radius:0;box-shadow:5px 5px 0 var(--ink)}
html[data-look^="students-"] .frame{background:var(--amber-soft)}
html[data-look^="students-"] .step-head::before{border-radius:0;font-size:1.6rem;box-shadow:3px 3px 0 var(--tape)}
html[data-look^="students-"] .fork-btns button,
html[data-look^="students-"] .done .complete,
html[data-look^="students-"] .done button,
html[data-look^="students-"] body.doing .nav .back,
html[data-look^="students-"] body.doing .nav .next{border:3px solid var(--ink);border-radius:0;box-shadow:4px 4px 0 var(--ink);
  font-family:"Bangers","Comic Sans MS",Impact,sans-serif;font-weight:400;letter-spacing:1.2px;text-transform:uppercase;font-size:1.15rem}
html[data-look^="students-"] .fork-btns .go-later{background:var(--surface);color:var(--ink)}
html[data-look^="students-"] .mins{border:2px solid var(--ink);color:var(--ink);background:var(--tape)}
html[data-look^="students-"] .why{border-left:4px solid var(--ink)}
html[data-look^="students-"] .bar{background:var(--surface);border-bottom:4px solid var(--ink)}
html[data-look^="students-"] .stepper-pip{background:var(--surface);border:1px solid var(--ink)}
html[data-look^="students-"] .stepper-pip.complete{background:var(--blue)}

/* =====================================================================
   military family: mission board
   ===================================================================== */
html[data-look^="military-"] h1,
html[data-look^="military-"] h2,
html[data-look^="military-"] .eyebrow,
html[data-look^="military-"] .kicker,
html[data-look^="military-"] .brand,
html[data-look^="military-"] .step-head::before{font-family:"Saira Stencil One","Arial Black",Impact,sans-serif;
  font-weight:400;letter-spacing:.6px;text-transform:uppercase}
html[data-look^="military-"] .eyebrow,
html[data-look^="military-"] .kicker{display:inline-block;background:var(--tape);color:var(--ink);
  padding:.25rem .7rem;transform:rotate(-1.5deg);box-shadow:0 1px 0 #00000033}
html[data-look^="military-"] header.top{border-bottom:6px solid var(--blue);padding-bottom:1.2rem}
html[data-look^="military-"] body.doing header.top{border-bottom-width:4px}
html[data-look^="military-"] .frame,
html[data-look^="military-"] .fork,
html[data-look^="military-"] .later,
html[data-look^="military-"] .resume,
html[data-look^="military-"] .signup{background:var(--surface);border:2px solid var(--dark);border-radius:3px;
  outline:2px dashed var(--rule);outline-offset:-8px;box-shadow:none}
html[data-look^="military-"] .frame{border-left:10px solid var(--blue)}
html[data-look^="military-"] .step-head::before{background:var(--dark);color:var(--on-dark);border-radius:2px}
html[data-look^="military-"] .fork-btns button,
html[data-look^="military-"] .done .complete,
html[data-look^="military-"] body.doing .nav .back,
html[data-look^="military-"] body.doing .nav .next{border:2px solid var(--dark);border-radius:2px;
  font-family:"Saira Stencil One","Arial Black",Impact,sans-serif;font-weight:400;letter-spacing:.9px;text-transform:uppercase}
html[data-look^="military-"] .fork-btns .go-do,
html[data-look^="military-"] .done .complete{box-shadow:4px 5px 0 var(--dark)}
html[data-look^="military-"] .fork-btns .go-later{background:transparent;color:var(--ink)}
html[data-look^="military-"] .mins{border-color:var(--dark);color:var(--ink);border-radius:2px}
html[data-look^="military-"] .bar{background:var(--dark);border-bottom:6px solid var(--blue)}
/* Military fills (--blue) are light golds and silvers; text uses the dark accent. */
html[data-look^="military-"] .whybtn,
html[data-look^="military-"] .when-use,
html[data-look^="military-"] body.doing .nav .bail,
html[data-look^="military-"] .callout-label,
html[data-look^="military-"] .ml-fallback a,
html[data-look^="military-"] .fine a,
html[data-look^="military-"] footer a{color:var(--amber)}
html[data-look^="military-"] .bar a,
html[data-look^="military-"] .bar .brand,
html[data-look^="military-"] .bar .brand span{color:var(--on-dark)}

/* =====================================================================
   Audience landing pages (.aud-*). Same markup for every audience.
   Goal: two doors visible on a 390x844 phone without scrolling. Doors use
   one action color (--blue); --amber is for the single note.
   ===================================================================== */
.aud .wrap{max-width:46rem}
.aud-bar .wrap{display:flex;flex-wrap:wrap;gap:.5rem .8rem;justify-content:space-between;align-items:center;padding-top:.6rem;padding-bottom:.6rem}
@media (max-width:30rem){.aud-bar .wrap{padding-left:1rem;padding-right:1rem}}
.aud-schemes{display:flex;align-items:center;gap:.3rem;margin:0}
.aud-schemes button{width:2.1rem;height:2.1rem;border-radius:50%;border:2px solid var(--rule-strong);padding:4px;
  background:var(--surface);cursor:pointer;display:inline-flex}
.aud-schemes button i{flex:1;display:block;height:100%}
.aud-schemes button i:first-child{border-radius:99px 0 0 99px}
.aud-schemes button i:last-child{border-radius:0 99px 99px 0}
.aud-schemes button[aria-pressed="true"]{border-color:var(--ink);box-shadow:0 0 0 2px var(--ink)}
.aud-schemes button:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.aud-hero{background:var(--blue-soft);padding:1.2rem 0 1.3rem}
.aud-hero .kicker{margin:0 0 .8rem}
.aud-hero h1{font-size:clamp(1.9rem,7vw,3.2rem);font-weight:800;line-height:1.05;letter-spacing:-.03em;margin:0;max-width:18ch;text-wrap:balance}
.aud-hero h1 em{font-style:normal;color:var(--blue)}
.aud-lede{font-size:clamp(.98rem,2.6vw,1.2rem);line-height:1.4;color:var(--slate);margin:.7rem 0 0;max-width:42ch}
.aud-lede b{color:var(--ink)}
.aud-doors{padding:1rem 0 1rem}
.aud-doors h2{font-size:1.2rem;letter-spacing:-.02em;margin:0 0 .8rem}
.aud-picker{display:grid;gap:.8rem}
a.door{display:grid;grid-template-columns:1fr auto;gap:.3rem 1rem;align-items:start;background:var(--surface);
  border-radius:12px;padding:.85rem 1rem;text-decoration:none;color:inherit;box-shadow:var(--shadow-sm);
  border-left:6px solid var(--blue);transition:transform .15s ease,box-shadow .15s ease}
a.door:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
a.door:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.door h3{font-family:var(--sans);font-size:1.1rem;font-weight:800;line-height:1.25;letter-spacing:-.015em;margin:0;text-transform:none}
.door p{grid-column:1/-1;margin:0;color:var(--slate);font-size:.92rem;line-height:1.4}
.door .time{font-size:.78rem;font-weight:700;white-space:nowrap;border-radius:99px;padding:.22rem .6rem;background:var(--blue-soft);color:var(--blue-deep)}
.door .go{grid-column:1/-1;font-weight:700;font-size:.92rem;color:var(--blue-deep);margin-top:.2rem}
.aud-note{margin:1.4rem 0 0;padding:1rem 1.15rem;border-radius:12px;background:var(--amber-soft);font-size:.97rem}
.aud-note b{color:var(--amber)}
.aud footer{margin-top:2.5rem}
.aud footer a{color:var(--blue-deep)}

/* students landing: hard shadows only on things you can tap */
html[data-look^="students-"] .aud-hero{background:transparent;border-bottom:4px solid var(--ink)}
html[data-look^="students-"] .aud-hero h1{font-size:clamp(2rem,8.2vw,3.6rem)}
html[data-look^="students-"] a.door{border:3px solid var(--ink);border-left:12px solid var(--blue);border-radius:0;box-shadow:5px 5px 0 var(--ink)}
html[data-look^="students-"] a.door:hover{box-shadow:7px 7px 0 var(--ink)}
html[data-look^="students-"] .door .time{border:2px solid var(--ink);border-radius:0;background:var(--tape);color:var(--ink)}
html[data-look^="students-"] .door .go{font-family:"Bangers","Comic Sans MS",Impact,sans-serif;font-weight:400;letter-spacing:1px;font-size:1.15rem;color:var(--blue)}
html[data-look^="students-"] .aud-note{border:2px solid var(--ink);border-radius:0}
html[data-look^="students-"] .aud-schemes button{border-radius:0;border-color:var(--ink)}
html[data-look^="students-"] .aud-schemes button i{border-radius:0!important}
html[data-look^="students-"] .aud-schemes button[aria-pressed="true"]{box-shadow:3px 3px 0 var(--ink)}

/* military landing: gold stays a fill; the headline accent is ink on a highlighter bar */
html[data-look^="military-"] .aud-hero{background:var(--paper);border-bottom:2px dashed var(--rule)}
html[data-look^="military-"] .aud-hero h1{font-weight:400;letter-spacing:.5px;line-height:1.08;font-size:clamp(1.8rem,6.6vw,3rem)}
html[data-look^="military-"] .aud-hero h1 em{color:var(--ink);background:linear-gradient(transparent 58%,var(--blue) 58%,var(--blue) 92%,transparent 92%);
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
html[data-look^="military-"] a.door{border:2px solid var(--dark);border-left:10px solid var(--blue);border-radius:3px;
  outline:2px dashed var(--rule);outline-offset:-8px;box-shadow:none}
html[data-look^="military-"] a.door:hover{box-shadow:4px 5px 0 var(--dark)}
html[data-look^="military-"] .door .time{border-radius:2px;background:var(--dark);color:var(--on-dark)}
html[data-look^="military-"] .door .go{color:var(--ink);text-transform:uppercase;letter-spacing:.06em;font-size:.82rem}
html[data-look^="military-"] .aud-note{border-radius:3px;border-left:10px solid var(--blue);background:var(--surface)}
html[data-look^="military-"] .aud-note b{color:var(--ink)}
html[data-look^="military-"] .aud-schemes button{border-radius:2px;border-color:var(--on-dark)}
html[data-look^="military-"] .aud-schemes button i{border-radius:0!important}
html[data-look^="military-"] .aud-schemes button[aria-pressed="true"]{box-shadow:0 0 0 2px var(--tape)}
}