/* ==========================================================================
   Open Circuit - shared design system  "Warm Analog / Print Shop"
   One stylesheet for every public page. Tokens + components live here so
   per-page CSS never drifts again.
   ========================================================================== */

/* ---- Fonts (self-hosted, latin subset, swap) ---------------------------- */
@font-face{
  font-family:'Hepta Slab';font-style:normal;font-weight:600;font-display:swap;
  src:url('/assets/fonts/hepta-slab-600.woff2') format('woff2');
}
@font-face{
  font-family:'Hepta Slab';font-style:normal;font-weight:800;font-display:swap;
  src:url('/assets/fonts/hepta-slab-800.woff2') format('woff2');
}
@font-face{
  font-family:'Hanken Grotesk';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/hanken-grotesk-400.woff2') format('woff2');
}
@font-face{
  font-family:'Hanken Grotesk';font-style:normal;font-weight:600;font-display:swap;
  src:url('/assets/fonts/hanken-grotesk-600.woff2') format('woff2');
}
@font-face{
  font-family:'Hanken Grotesk';font-style:normal;font-weight:700;font-display:swap;
  src:url('/assets/fonts/hanken-grotesk-700.woff2') format('woff2');
}

/* ---- Tokens ------------------------------------------------------------- */
:root{
  --paper:#faf7f2; --card:#ffffff;
  --ink:#1f2735; --muted:#49545f; --line:#1f2735;
  --press:#3255a4;                       /* dominant ink accent */
  --navy:#16243F; --bone:#eef1f6; --bone-dim:#b9c4d6;
  /* brand accents - accent bar + stamp badges + card shadows only */
  --cyan:#1BA8C4; --blue:#2E8BD0; --green:#1FAE73; --gold:#F6B41E; --orange:#F26C21;
  --hairline:#e4ddd1;                     /* soft rule on paper */
  --maxw:1080px;
  --display:'Hepta Slab',Georgia,'Times New Roman',serif;
  --body:'Hanken Grotesk',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}

/* ---- Base --------------------------------------------------------------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--body);font-weight:400;color:var(--ink);
  background:var(--paper);font-size:1.05rem;line-height:1.65;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-family:var(--display);color:var(--ink);line-height:1.14;margin:0 0 .45em;
  letter-spacing:-.01em}
h1{font-size:clamp(2.2rem,5vw,3.6rem);font-weight:800}
h2{font-size:clamp(1.6rem,3.5vw,2.4rem);font-weight:800}
h3{font-size:1.2rem;font-weight:600}
p{margin:0 0 1.1rem}
a{color:var(--press);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.narrow{max-width:760px;margin:0 auto}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:#fff;color:var(--ink);padding:10px 16px;border:2px solid var(--ink);
  box-shadow:3px 3px 0 var(--orange);z-index:200;border-radius:2px}
:focus-visible{outline:3px solid var(--press);outline-offset:2px}

/* ---- Accent bar (promoted) --------------------------------------------- */
.accent-bar{height:10px;background:linear-gradient(90deg,
  var(--cyan) 0 20%,var(--blue) 20% 40%,var(--green) 40% 60%,var(--gold) 60% 80%,var(--orange) 80% 100%)}
.accent-divider{height:6px;background:linear-gradient(90deg,
  var(--cyan) 0 20%,var(--blue) 20% 40%,var(--green) 40% 60%,var(--gold) 60% 80%,var(--orange) 80% 100%)}

/* ---- Header / nav ------------------------------------------------------- */
header{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:2px solid var(--ink)}
.nav{display:flex;align-items:center;gap:16px;padding:12px 20px;max-width:var(--maxw);margin:0 auto}
.brand{display:flex;align-items:center;gap:10px}
.brand img{height:34px;width:auto;display:block}
.nav-toggle{display:none;margin-left:auto;background:var(--card);border:2px solid var(--ink);border-radius:2px;
  width:44px;height:40px;cursor:pointer;box-shadow:3px 3px 0 var(--orange);padding:0;
  align-items:center;justify-content:center}
.nav-toggle .bars{display:block;position:relative;width:20px;height:2px;background:var(--ink)}
.nav-toggle .bars::before,.nav-toggle .bars::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--ink)}
.nav-toggle .bars::before{top:-6px}
.nav-toggle .bars::after{top:6px}
.nav-links{display:flex;align-items:center;gap:24px;margin-left:auto}
.nav-links a{font-family:var(--body);font-weight:600;font-size:.98rem}
.nav-links a:not(.btn){color:var(--ink)}
.nav-links a:not(.btn):hover{text-decoration:none;color:var(--press)}
.nav-links a:not(.btn){position:relative}
.nav-links a:not(.btn)::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:2px;
  background:var(--press);transition:right .18s ease}
.nav-links a:not(.btn):hover::after{right:0}
.nav-cta{margin-left:4px}

@media(max-width:820px){
  .nav-toggle{display:inline-flex}
  .nav-links{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
    margin:0;background:var(--paper);border-bottom:2px solid var(--ink);display:none;
    box-shadow:0 12px 22px rgba(31,39,53,.14)}
  header.nav-open .nav-links{display:flex}
  .nav-links a{padding:15px 22px;border-top:1px solid var(--hairline)}
  .nav-links a:not(.btn)::after{display:none}
  .nav-cta{margin:14px 22px 20px;text-align:center}
}

/* ---- Buttons (printed label) ------------------------------------------- */
.btn{display:inline-block;font-family:var(--body);font-weight:700;font-size:1rem;line-height:1.2;
  padding:12px 22px;cursor:pointer;border-radius:2px;
  background:var(--ink);color:#fff;border:2px solid var(--ink);
  box-shadow:3px 3px 0 var(--orange);transition:background .14s ease,color .14s ease}
.btn:hover{text-decoration:none;background:var(--press);border-color:var(--press);color:#fff}
.btn.ghost{background:transparent;color:var(--ink);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--gold)}
.btn.ghost:hover{background:var(--ink);color:#fff}
.btn.full{display:block;width:100%;text-align:center;padding:14px}
/* on dark (navy) sections */
.on-dark .btn{background:var(--paper);color:var(--ink);border-color:var(--paper);box-shadow:3px 3px 0 var(--orange)}
.on-dark .btn:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.on-dark .btn.ghost{background:transparent;color:#fff;border-color:var(--bone);box-shadow:3px 3px 0 var(--orange)}
.on-dark .btn.ghost:hover{background:#fff;color:var(--ink);border-color:#fff}

/* ---- Sections ----------------------------------------------------------- */
section{padding:56px 0}
.section-soft{background:#fff;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.center,.section-head{text-align:center;max-width:740px;margin:0 auto 36px}
.center p,.section-head p{color:var(--muted);font-size:1.08rem}
.kicker{display:inline-flex;align-items:center;font-family:var(--body);font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;font-size:.76rem;color:var(--press);margin-bottom:14px}
.kicker::before{content:"";display:inline-block;width:30px;height:10px;margin-right:10px;
  background:no-repeat center/contain
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='10' viewBox='0 0 30 10'%3E%3Cg stroke='%233255a4' stroke-width='2'%3E%3Cline x1='4' y1='5' x2='11' y2='5'/%3E%3Cline x1='19' y1='5' x2='26' y2='5'/%3E%3Ccircle cx='4' cy='5' r='2.5' fill='none'/%3E%3Ccircle cx='26' cy='5' r='2.5' fill='none'/%3E%3C/g%3E%3C/svg%3E")}

/* ---- Hero --------------------------------------------------------------- */
.hero{text-align:center;padding:56px 0 34px;background:var(--paper);position:relative}
.hero .logo{width:min(300px,66vw);height:auto;margin:0 auto 20px;display:block}
.hero .lead{font-size:clamp(1.08rem,2.4vw,1.32rem);color:var(--muted);max-width:680px;margin:0 auto 24px}
.hero .kicker{justify-content:center}

.photo-band{max-width:var(--maxw);margin:0 auto;padding:10px 20px 0}
.photo-band img{width:100%;height:auto;display:block;border:2px solid var(--ink);border-radius:0;
  box-shadow:8px 8px 0 var(--press)}

/* ---- Circuit trace: hero open->close ----------------------------------- */
.hero-connect{display:flex;flex-direction:column;align-items:center;gap:4px}
.circuit-hero{width:min(430px,88vw);height:auto;overflow:visible;margin-bottom:-8px}
.circuit-hero .trace,.circuit-hero .closing{fill:none;stroke:var(--press);stroke-width:2.5;stroke-linecap:round}
.circuit-hero .node{fill:var(--paper);stroke:var(--press);stroke-width:2}
.circuit-hero .closing{stroke-dasharray:62;stroke-dashoffset:62;transition:stroke-dashoffset .55s ease}
.circuit-hero .spark{fill:var(--orange);opacity:0;transition:opacity .4s ease}
.hero-connect:has(.btn:hover) .circuit-hero .closing,
.hero-connect:has(.btn:focus-visible) .circuit-hero .closing{stroke-dashoffset:0}
.hero-connect:has(.btn:hover) .circuit-hero .spark,
.hero-connect:has(.btn:focus-visible) .circuit-hero .spark{opacity:1}
.hero-connect:has(.btn:hover) .circuit-hero .node,
.hero-connect:has(.btn:focus-visible) .circuit-hero .node{fill:var(--press)}
.circuit-label{font-family:var(--body);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  font-size:.72rem;color:var(--press)}
.hero .cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:8px}

/* ---- Idea / pull callout ----------------------------------------------- */
.pull{font-family:var(--display);font-weight:800;font-size:clamp(1.4rem,3vw,2rem);color:var(--ink);
  text-align:center;max-width:840px;margin:0 auto;line-height:1.28}
.pull .hl{color:var(--press)}
.pull.quote{text-align:left;font-size:clamp(1.15rem,2.4vw,1.4rem);background:#fff;border:2px solid var(--ink);
  border-left-width:8px;border-left-color:var(--gold);padding:22px 26px;line-height:1.4;margin:1.8em 0}

/* ---- Grids + cards ------------------------------------------------------ */
.grid{display:grid;gap:22px}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
@media(max-width:860px){.g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.g3,.g2{grid-template-columns:1fr}}

.card{background:var(--card);border:2px solid var(--ink);border-radius:0;padding:24px;
  box-shadow:5px 5px 0 var(--cyan)}
.card h3{margin-bottom:6px}
.card p{color:var(--muted);font-size:1rem;margin:0}
/* unify stock imagery toward the warm print feel (founder photos excluded) */
.card-img,.photo-band img{filter:saturate(.88) contrast(1.05) sepia(.07)}
/* per-card brand-color shadow cycle */
.grid .card:nth-child(5n+1){box-shadow:5px 5px 0 var(--cyan)}
.grid .card:nth-child(5n+2){box-shadow:5px 5px 0 var(--blue)}
.grid .card:nth-child(5n+3){box-shadow:5px 5px 0 var(--green)}
.grid .card:nth-child(5n+4){box-shadow:5px 5px 0 var(--gold)}
.grid .card:nth-child(5n+5){box-shadow:5px 5px 0 var(--orange)}

/* homepage "how it works": editorial first card spans 2 cols */
/* even 3x2 tiling; a spanning first card orphaned card 6 (design critic, 2026-07-07) */

/* numbered chip (printed number): white on press-blue, 4.5:1+ */
.badge-num{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  background:var(--press);color:#fff;font-family:var(--display);font-weight:800;font-size:1.05rem;
  border:2px solid var(--ink);border-radius:2px;margin-bottom:14px}
.card-row{display:flex;gap:16px;align-items:flex-start}
.card-row .badge-num{flex:0 0 auto;margin-bottom:0}

.card-img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;margin-bottom:14px;
  border:2px solid var(--ink)}

/* ---- Ticket stamp badges (signature dashed shape) ---------------------- */
.chips{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:840px;margin:0 auto}
.stamp,.chip{display:inline-block;background:#fff;border:2px dashed var(--ink);border-radius:2px;
  padding:8px 15px;font-family:var(--body);font-weight:700;color:var(--ink);font-size:.95rem}

/* ---- Steps -------------------------------------------------------------- */
.steps{max-width:720px;margin:0 auto;display:grid;gap:18px}
.step{display:flex;gap:16px;align-items:flex-start;background:#fff;border:2px solid var(--ink);padding:20px 22px;
  box-shadow:5px 5px 0 var(--press)}
.step .badge-num{margin-bottom:0}
.step h3{margin:2px 0 4px}
.step p{margin:0;color:var(--muted);font-size:1rem}

/* ---- FAQ / details ------------------------------------------------------ */
.faq{max-width:760px;margin:0 auto}
details{border:2px solid var(--ink);padding:2px 20px;margin-bottom:14px;background:#fff}
summary{cursor:pointer;font-family:var(--display);font-weight:600;color:var(--ink);padding:15px 0;list-style:none;
  font-size:1.05rem}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";float:right;color:var(--press);font-weight:800;font-family:var(--body)}
details[open] summary::after{content:"\2013"}
details p{color:var(--muted);margin:0 0 15px}

/* ---- Fields (programs image tiles) ------------------------------------- */
.fields{display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}
@media(max-width:760px){.fields{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.fields{grid-template-columns:1fr}}
.field-card{position:relative;overflow:hidden;aspect-ratio:16/9;border:2px solid var(--ink)}
.field-card img{width:100%;height:100%;object-fit:cover;display:block}
.field-card span{position:absolute;left:10px;bottom:10px;background:var(--ink);color:#fff;font-family:var(--body);
  font-weight:700;font-size:.82rem;padding:5px 10px;border-radius:2px}

/* ---- Notes -------------------------------------------------------------- */
.note{max-width:760px;margin:24px auto 0;background:#fff;border:2px solid var(--ink);border-left-width:8px;
  border-left-color:var(--press);padding:18px 22px;color:var(--ink);font-size:.98rem}
.note ul{margin:10px 0 0;padding-left:20px;color:var(--ink)}

/* ---- Founders / family (about) ----------------------------------------- */
figure.family{margin:1.9em 0}
figure.family img{width:100%;height:auto;display:block;border:2px solid var(--ink);box-shadow:8px 8px 0 var(--gold)}
figure.family figcaption{text-align:center;color:var(--muted);font-size:.94rem;margin-top:14px}
.founders{display:flex;gap:34px;justify-content:center;flex-wrap:wrap;margin:1.6em 0 .5em}
.founder{text-align:center}
.founder img{width:120px;height:120px;object-fit:cover;border:2px solid var(--ink);border-radius:2px;
  box-shadow:5px 5px 0 var(--press)}
.founder .fname{font-family:var(--display);font-weight:800;color:var(--ink);margin-top:14px}
.founder .frole{color:var(--muted);font-size:.9rem}
.founders-label{text-align:center;color:var(--press);font-weight:700;margin:2.2em 0 0;
  text-transform:uppercase;letter-spacing:.06em;font-size:.82rem}
article{padding:26px 0 8px}
article p{font-size:1.08rem}

/* ---- Forms -------------------------------------------------------------- */
form{max-width:640px;margin:0 auto;background:#fff;border:2px solid var(--ink);padding:28px;
  box-shadow:8px 8px 0 var(--press)}
.field{margin-bottom:18px}
label{display:block;font-family:var(--body);font-weight:700;color:var(--ink);margin-bottom:7px;font-size:.95rem}
input,select,textarea{width:100%;padding:12px 14px;border:2px solid var(--ink);border-radius:2px;font-size:1rem;
  font-family:inherit;color:var(--ink);background:#fff}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--press);
  box-shadow:0 0 0 3px rgba(50,85,164,.22)}
textarea{min-height:120px;resize:vertical}
.form-note{font-size:.86rem;color:var(--muted);margin-top:6px}
.form-error{display:none;color:#b3261e;font-size:.9rem;margin-top:10px}
.form-success{display:none;text-align:center;background:#fff;border:2px solid var(--ink);padding:34px 26px;
  max-width:640px;margin:0 auto;box-shadow:8px 8px 0 var(--green)}

/* ---- Dark CTA band ------------------------------------------------------ */
.cta{background:var(--navy);color:var(--bone);text-align:center;padding:56px 0}
.cta h2{color:#fff;margin-top:0}
.cta p{color:var(--bone);max-width:560px;margin:0 auto 24px}
.cta .btn-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---- Legal pages -------------------------------------------------------- */
.legal-meta{color:var(--muted);font-size:.95rem;margin-bottom:1.6em}
.legal-box{background:#fff;border:2px solid var(--ink);border-left-width:8px;border-left-color:var(--gold);
  padding:18px 22px;margin:1.4em 0;font-size:.97rem;color:var(--ink)}
main.wrap article h2{font-size:1.35rem;margin-top:2em}

/* ---- Footer ------------------------------------------------------------- */
footer{background:var(--navy);color:var(--bone);padding:40px 0 28px;font-size:.94rem}
footer a{color:#fff}
footer .f-top{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center;margin-bottom:18px}
footer .f-brand{display:flex;align-items:center;gap:12px;color:#fff;font-family:var(--display);font-weight:800}
footer .f-brand img{height:36px;width:36px;object-fit:contain;background:#fff;padding:3px;border-radius:2px}
footer .f-links a{margin:0 2px}
footer .tagline{margin:0 0 6px}
footer small{color:var(--bone-dim)}

/* ---- Motion safety ------------------------------------------------------ */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
  .circuit-hero .closing{stroke-dashoffset:0}
}