/* =====================================================================
   QEDC brand layer — loads after styles.css and overrides it.

   Matches queensny.org: Cooper Hewitt headlines, Satoshi interface type,
   Source Serif 4 body copy, cream canvas, QEDC yellow call to action.
   No navy, no dot pattern, and nothing layered over the cover photo.
   ===================================================================== */

/* ---------- brand typefaces (served from the main QEDC site) ---------- */
@font-face{font-family:Cooperhewitt;font-weight:400;font-style:normal;font-display:swap;
  src:url("https://cdn.prod.website-files.com/677857cf345052c64843e4d6/682382dcc245a8b69355da24_CooperHewitt-Book.otf") format("opentype")}
@font-face{font-family:Cooperhewitt;font-weight:500;font-style:normal;font-display:swap;
  src:url("https://cdn.prod.website-files.com/677857cf345052c64843e4d6/682382dca2181687b46921f3_CooperHewitt-Medium.otf") format("opentype")}
@font-face{font-family:Cooperhewitt;font-weight:600;font-style:normal;font-display:swap;
  src:url("https://cdn.prod.website-files.com/677857cf345052c64843e4d6/682382dc9cd41aa8f472e5c6_CooperHewitt-Semibold.otf") format("opentype")}
@font-face{font-family:Cooperhewitt;font-weight:700;font-style:normal;font-display:swap;
  src:url("https://cdn.prod.website-files.com/677857cf345052c64843e4d6/682382dcdf44f5992e47990d_CooperHewitt-Bold.otf") format("opentype")}
@font-face{font-family:Cooperhewitt;font-weight:900;font-style:normal;font-display:swap;
  src:url("https://cdn.prod.website-files.com/677857cf345052c64843e4d6/682382dc997d626af6d77fb2_CooperHewitt-Heavy.otf") format("opentype")}

@font-face{font-family:Satoshi;font-weight:400;font-style:normal;font-display:swap;
  src:url("https://cdn.prod.website-files.com/677857cf345052c64843e4d6/6823828aea07e5e1d24d412b_Satoshi-Regular.otf") format("opentype")}
@font-face{font-family:Satoshi;font-weight:500;font-style:normal;font-display:swap;
  src:url("https://cdn.prod.website-files.com/677857cf345052c64843e4d6/6823828a3fb2aca697dd9f1b_Satoshi-Medium.otf") format("opentype")}
@font-face{font-family:Satoshi;font-weight:700;font-style:normal;font-display:swap;
  src:url("https://cdn.prod.website-files.com/677857cf345052c64843e4d6/6823828a5d015250f83222f7_Satoshi-Bold.otf") format("opentype")}
@font-face{font-family:Satoshi;font-weight:900;font-style:normal;font-display:swap;
  src:url("https://cdn.prod.website-files.com/677857cf345052c64843e4d6/6823828a49154bdcd4e95c7c_Satoshi-Black.otf") format("opentype")}

/* ---------- tokens ---------- */
:root{
  --sans:Satoshi,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --display:Cooperhewitt,Satoshi,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;

  --cream:#FBFAF6; --cream-2:#F1EDE4; --beige:#DDD8D0;
  --ink:#323231; --ink-soft:#6B6B6B;
  --qedc-yellow:#FEC718; --qedc-yellow-600:#EDB300;
  --qedc-sky:#01B1FF; --qedc-orange:#FAA00C;

  /* remap the base sheet so the form steps inherit the same palette */
  --navy:#323231; --navy-2:#4A4A48;
  --blue:#0077A8; --blue-600:#005D84; --blue-50:#E8F5FB;
  --bg:#FBFAF6; --card:#FFFFFF;
  --border:#E4DFD5; --border-strong:#C9C2B5;
  --text:#323231; --muted:#6B6B6B; --muted-2:#8A857D;
  --shadow:0 1px 2px rgba(50,50,49,.05), 0 10px 30px rgba(50,50,49,.06);
}
body{background:var(--cream);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.55}

/* ---------- header ---------- */
header.site{background:#fff;color:var(--ink);padding:15px 0;border-bottom:1px solid var(--border)}
header.site .wrap{max-width:1200px}
.brandlink{color:var(--ink)}
.brandmark .sq{width:32px;height:32px;border-radius:8px;background:var(--qedc-yellow);
  color:var(--ink);font-family:var(--display);font-weight:700;font-size:15px}
.brandmark .txt{font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:0}
.brandmark .txt span{opacity:.62;font-weight:500}
.langwrap svg{stroke:var(--ink-soft)}
select.lang{background-color:#fff;border:1.5px solid var(--border-strong);color:var(--ink);border-radius:8px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath fill='%23323231' d='M5 7 0 0h10z'/%3E%3C/svg%3E")}
select.lang:hover{background-color:var(--cream-2)}
.savechip{background:var(--cream-2);color:var(--ink-soft);border:1px solid var(--border)}
.savechip .dot{background:#1E9E6A}

/* ---------- page rhythm ----------
   main keeps a gap under the header on every screen, including the
   interior form steps. The cover adds a little more on top of that. */
main{padding:32px 0 90px}

/* ---------- cover ----------
   Two columns: copy on the left, a square photo on the right. Both
   columns start at the same top edge. Nothing sits over the photo. */
.cover{padding:20px 0 0;background:none}
.cover-wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.cover-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(36px,5.5vw,76px);align-items:start}

img.cover-photo{order:2;display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;
  border-radius:12px;background:var(--cream-2)}

.cover-text{order:1;max-width:580px}
.cover .eyebrow{margin:0 0 14px;font-family:var(--sans);font-size:12.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.cover h1{margin:0;font-family:var(--display);font-weight:700;color:var(--ink);
  font-size:clamp(32px,3.7vw,48px);line-height:1.08;letter-spacing:-.018em;text-wrap:balance}
#coverBody p{margin:20px 0 0;font-family:var(--serif);font-weight:300;font-size:19px;
  line-height:1.7;color:var(--ink)}
#coverBody p:first-child{margin-top:22px}

.cover-facts{margin:30px 0 0;padding:24px 0 0;border-top:1px solid var(--beige);list-style:none}
.cover-facts li{display:flex;gap:12px;align-items:flex-start;padding:6px 0;
  font-family:var(--sans);font-size:15.5px;line-height:1.5;color:var(--ink)}
.cover-facts li::before{content:"";flex:none;width:20px;height:20px;margin-top:2px;border-radius:50%;
  border:0;background-color:var(--qedc-yellow);background-repeat:no-repeat;background-position:center;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='8'%3E%3Cpath fill='none' stroke='%23323231' stroke-width='2.2' d='M1 4l3 3 6-6'/%3E%3C/svg%3E")}

.cover-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:32px 0 0}
.cover-actions .btn.primary.big{min-height:56px;padding:16px 34px;font-size:17px}
.cover-note{margin:30px 0 0;padding-top:18px;border-top:1px solid var(--beige);
  font-family:var(--sans);font-size:13.5px;color:var(--ink-soft)}

/* ---------- buttons ---------- */
.btn{font-family:var(--sans);font-weight:700;border-radius:8px}
.btn.primary{background:var(--qedc-yellow);border-color:var(--qedc-yellow);color:var(--ink)}
.btn.primary:hover{background:var(--qedc-yellow-600);border-color:var(--qedc-yellow-600)}
.btn.ghost{background:#fff;border-color:var(--border-strong);color:var(--ink)}
.btn.ghost:hover{background:var(--cream-2)}
.btn.link{color:var(--ink-soft);font-weight:500}
.btn.link:hover{color:var(--ink)}
.btn:focus-visible{outline:3px solid var(--qedc-sky);outline-offset:2px}

/* ---------- form chrome, so the steps match the cover ---------- */
.step-h,.block>h3,.done h2,.modal h3,.rev h3{font-family:var(--display);font-weight:600;color:var(--ink)}
.step-h{font-weight:700;letter-spacing:-.012em}
label.q,legend.q{font-family:var(--sans);font-weight:700}
.side h2{font-family:var(--sans);letter-spacing:.1em}
.side li.current button{background:var(--cream-2);color:var(--ink)}
.rev h3{background:var(--cream-2)}
.refbox{background:var(--cream-2);border-color:var(--beige)}
.modal{background:rgba(50,50,49,.55)}
.done .tick{background:var(--qedc-yellow);color:var(--ink)}

/* ---------- responsive ---------- */
@media (max-width:980px){
  /* Stack, photo first, capped so it doesn't swallow a narrow screen. */
  .cover{padding-top:6px}
  .cover-grid{grid-template-columns:1fr;gap:34px;justify-items:start}
  img.cover-photo{order:1;max-width:460px}
  .cover-text{order:2;max-width:640px}
}
@media (max-width:860px){
  .cover-wrap{padding:0 18px}
  #coverBody p{font-size:18.5px}
}
@media (max-width:560px){
  header.site{padding:12px 0}
  main{padding-top:22px}
  .cover{padding-top:0}
  .cover-wrap{padding:0 14px}
  .cover-grid{gap:26px}
  img.cover-photo{max-width:none;border-radius:9px}
  .cover h1{font-size:clamp(28px,8vw,36px);line-height:1.1}
  #coverBody p{font-size:17.5px;line-height:1.64;margin-top:18px}
  .cover-facts{margin-top:26px;padding-top:22px}
  .cover-actions{margin-top:28px;gap:14px}
  .cover-actions .btn.primary.big{width:100%}
  .cover-actions .btn.link{width:100%}
}