:root{
  --paper:#FDFBF4;
  --grid:rgba(11,31,69,0.10);
  --navy:#0B1F45;
  --navy-soft:#5C6B8C;
  --gold:#E0A32F;
  --gold-deep:#B87F1C;
  --gold-wash:#FAF0DA;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; color:var(--navy); font-family:'Karla', sans-serif;
  background-color:var(--paper);
  background-image:linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:30px 30px;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:''; position:fixed; top:0; bottom:0; left:56px; width:2px;
  background:var(--gold); z-index:5; pointer-events:none;
}
a{color:inherit;}
.wrap{max-width:1080px; margin:0 auto; padding:0 32px 0 96px;}
.hand{font-family:'Caveat', cursive; font-weight:600;}

/* ---------- header ---------- */
header.site{background:rgba(253,251,244,0.94); border-bottom:3px solid var(--navy); position:relative; z-index:10;}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0;}
.wordmark{display:flex; align-items:center; gap:12px; text-decoration:none;}
.wordmark img{height:46px; width:auto;}
.wordmark span{font-family:'Bricolage Grotesque', sans-serif; font-weight:800; font-size:21px; letter-spacing:-0.01em;}
nav.links{display:flex; gap:24px; align-items:center;}
nav.links a{font-size:15px; font-weight:500; text-decoration:none; color:var(--navy);}
nav.links a:hover{text-decoration:underline; text-decoration-color:var(--gold); text-decoration-thickness:3px;}
nav.links a.current{text-decoration:underline; text-decoration-color:var(--gold); text-decoration-thickness:3px; text-underline-offset:5px;}

.btn{
  display:inline-block; background:var(--navy); color:var(--paper);
  font-family:'Karla', sans-serif; font-weight:700; font-size:15px;
  text-decoration:none; padding:12px 22px; border:2px solid var(--navy);
  border-radius:8px; box-shadow:3px 3px 0 var(--gold); cursor:pointer;
}
.btn:hover{background:var(--gold-deep); border-color:var(--gold-deep);}
.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{outline:3px solid var(--gold); outline-offset:3px;}
nav .btn{padding:10px 18px; box-shadow:2px 2px 0 var(--gold);}

.nav-toggle{display:none; background:none; border:none; cursor:pointer; padding:8px;}
.nav-toggle span{display:block; width:22px; height:3px; background:var(--navy); margin:4px 0; border-radius:2px;}

/* ---------- hero ---------- */
.hero{padding:70px 0 64px; position:relative;}
h1{
  font-family:'Bricolage Grotesque', sans-serif; font-weight:800;
  font-size:clamp(34px,5.2vw,58px); line-height:1.07; letter-spacing:-0.02em;
  margin:0 0 20px; max-width:16ch;
}
.mark{position:relative; white-space:nowrap;}
.mark svg{position:absolute; left:-4%; bottom:-10px; width:108%; height:20px; overflow:visible;}
.hi{background:linear-gradient(transparent 52%, rgba(224,163,47,0.5) 52%, rgba(224,163,47,0.5) 92%, transparent 92%);}
.lede{font-size:18.5px; line-height:1.6; color:var(--navy-soft); max-width:530px; margin:0 0 32px;}
.annot{color:var(--gold-deep); font-size:25px; transform:rotate(-3deg); display:inline-block; margin:12px 0 0 8px;}
.hero-emblem{position:absolute; right:3vw; top:56px; width:min(280px,24vw);}
.hero-emblem img{width:100%; height:auto;}
.hero-emblem .cap{display:block; text-align:center; font-family:'Caveat',cursive; font-size:22px; color:var(--navy-soft); transform:rotate(-2deg); margin-top:4px;}

/* ---------- sections ---------- */
section{padding:54px 0; position:relative;}
h2{font-family:'Bricolage Grotesque', sans-serif; font-weight:700; font-size:clamp(27px,3.2vw,36px); letter-spacing:-0.01em; margin:0 0 16px;}
h3{font-family:'Bricolage Grotesque', sans-serif; font-weight:700; font-size:20px; margin:0 0 10px;}
p{line-height:1.65;}
.muted{color:var(--navy-soft);}
.measure{max-width:620px;}
.cols{display:grid; grid-template-columns:1fr 1fr; gap:36px;}
.cols3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:26px;}

/* exercise-book cards */
.book{
  display:block; text-decoration:none; background:#fff;
  border:2px solid var(--navy); border-radius:10px; padding:30px; position:relative;
  box-shadow:5px 5px 0 rgba(11,31,69,0.15);
}
a.book:hover{box-shadow:5px 5px 0 var(--gold); transform:translate(-1px,-1px);}
.book .subject{display:inline-block; font-family:'Caveat', cursive; font-weight:600; font-size:22px; color:var(--gold-deep); border-bottom:2px solid var(--gold); margin-bottom:12px;}
.book h3{font-size:23px;}
.book p{color:var(--navy-soft); font-size:15.5px; line-height:1.6; margin:0 0 14px;}
.book .go{font-weight:700; color:var(--gold-deep);}
.star{position:absolute; top:-16px; right:22px; font-size:30px; transform:rotate(12deg);}

/* marked exercises */
.exercise{background:#fff; border:2px solid var(--navy); border-radius:10px; padding:24px; position:relative;}
.exercise p{color:var(--navy-soft); font-size:15px; line-height:1.6; margin:0;}
.exercise .note{font-family:'Caveat', cursive; font-weight:600; font-size:21px; color:var(--gold-deep); margin-top:12px; display:block; transform:rotate(-1.5deg);}

/* ticked lists */
.ticks{list-style:none; margin:0; padding:0; max-width:620px;}
.ticks li{padding:12px 2px 12px 40px; position:relative; font-size:16px; border-bottom:2px dashed rgba(11,31,69,0.25);}
.ticks li::before{content:'\2713'; position:absolute; left:4px; top:8px; font-family:'Caveat', cursive; font-weight:600; font-size:26px; color:var(--gold-deep);}
.ticks li span{color:var(--navy-soft); font-size:14px; float:right;}

/* links in prose */
.plink{font-weight:700; color:var(--gold-deep); text-decoration:none; border-bottom:2px solid var(--gold);}
.plink:hover{color:var(--navy);}

/* ---------- forms ---------- */
.form-block{max-width:560px; background:#fff; border:2px solid var(--navy); border-radius:12px; padding:34px; box-shadow:6px 6px 0 rgba(11,31,69,0.15);}
label{display:block; font-size:14px; font-weight:700; margin:18px 0 6px;}
input[type="text"], input[type="email"], select, textarea{
  width:100%; font-family:'Karla', sans-serif; font-size:16px; color:var(--navy);
  background:var(--paper); border:2px solid rgba(11,31,69,0.35); border-radius:6px; padding:12px;
}
input:hover, select:hover, textarea:hover{border-color:var(--navy);}
textarea{min-height:110px; resize:vertical;}
form .btn{margin-top:24px;}
.fine{font-size:13px; color:var(--navy-soft); margin-top:12px;}
.form-note{display:none; font-size:16px; margin-top:16px;}
.form-note.show{display:block;}

/* photo cards */
.photo-card{background:#fff; border:2px solid var(--navy); border-radius:10px; padding:12px 12px 6px; box-shadow:5px 5px 0 rgba(11,31,69,0.15); transform:rotate(-1.5deg); max-width:330px; position:relative;}
.photo-card img{width:100%; display:block; border-radius:6px;}
.photo-card .cap{display:block; text-align:center; font-family:'Caveat',cursive; font-weight:600; font-size:23px; color:var(--gold-deep); padding:8px 0 6px;}
.photo-card.sm{max-width:250px; transform:rotate(1.6deg);}

/* ---------- CTA ---------- */
.cta{background:var(--navy); border-radius:14px; color:var(--paper); padding:48px 46px; margin:14px 0 64px; position:relative; overflow:hidden;}
.cta::after{content:''; position:absolute; right:-40px; bottom:-60px; width:250px; height:250px; background:url('emblem.png') no-repeat center/contain; opacity:0.10;}
.cta > *{position:relative; z-index:1;}
.cta h2{color:var(--paper);}
.cta p{color:#B9C2D6; max-width:540px; line-height:1.6;}
.cta .btn{background:var(--gold); color:var(--navy); border-color:var(--gold); box-shadow:3px 3px 0 #fff;}
.cta .btn:hover{background:#fff; border-color:#fff;}
.cta .hand{color:var(--gold); font-size:24px;}

/* ---------- footer ---------- */
footer.site{border-top:3px solid var(--navy); padding:36px 0 48px; background:rgba(253,251,244,0.92);}
.foot-grid{display:flex; gap:44px; flex-wrap:wrap; justify-content:space-between;}
footer.site p{font-size:14px; color:var(--navy-soft); margin:4px 0;}
footer.site a{text-decoration:underline; text-decoration-color:rgba(224,163,47,0.6);}
footer.site a:hover{color:var(--gold-deep);}
.foot-brand{display:flex; align-items:center; gap:10px; margin-bottom:8px;}
.foot-brand img{height:36px; width:auto;}
.foot-brand span{font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:18px; color:var(--navy);}
.foot-head{font-weight:700; color:var(--navy);}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .cols,.cols3{grid-template-columns:1fr;}
  .hero-emblem{display:none;}
}
@media (max-width:780px){
  .nav-toggle{display:block;}
  nav.links{
    display:none; position:absolute; left:0; right:0; top:100%;
    background:var(--paper); border-bottom:3px solid var(--navy);
    flex-direction:column; align-items:flex-start; padding:20px 32px 26px; gap:16px;
  }
  nav.links.open{display:flex;}
}
@media (max-width:640px){
  body::before{left:20px;}
  .wrap{padding:0 22px 0 44px;}
  .hero{padding:46px 0 50px;}
  .cta{padding:36px 26px;}
  .form-block{padding:24px 20px;}
  nav.links{padding:20px 22px 26px;}
}