/* Bootstrap Grammar: lined three-hole paper, matching the PDF theme
   (Comic Neue Bold titles, Andika body, same paper/rule/margin colours). */

@font-face{font-family:Andika;font-display:swap;src:url('../fonts/Andika-Regular.woff2') format('woff2')}
@font-face{font-family:Andika;font-display:swap;font-weight:700;src:url('../fonts/Andika-Bold.woff2') format('woff2')}
@font-face{font-family:Andika;font-display:swap;font-style:italic;src:url('../fonts/Andika-Italic.woff2') format('woff2')}
@font-face{font-family:Andika;font-display:swap;font-weight:700;font-style:italic;src:url('../fonts/Andika-BoldItalic.woff2') format('woff2')}
@font-face{font-family:Chalk;font-display:swap;font-weight:700;src:url('../fonts/ComicNeue-Bold.woff2') format('woff2')}
@font-face{font-family:Chalk;font-display:swap;font-weight:400;src:url('../fonts/ComicNeue-Regular.woff2') format('woff2')}

:root{
  --paper:#fffefa;
  --rule:#ccdef0;
  --margin:#f0bbc0;
  --title:#14304f;
  --ink:#1d2b3a;
  --muted:#4c5b6b;
  --desk:#e9e4d8;
  --P:28px;              /* rule pitch: every vertical size is a multiple of this */
  --rule-w:1.2px;
  --baseline:22px;        /* lifts the rules so text baselines sit on them */
  --top:112px;           /* height of the unruled header band (4 pitches) */
  --margin-x:96px;       /* red margin line from the sheet's left edge */
  --text-x:120px;        /* text column start */
  --text-r:56px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--desk);
  color:var(--ink);
  font:17px/var(--P) Andika,"Trebuchet MS",sans-serif;
}

.sheet{
  position:relative;
  max-width:880px;
  min-height:calc(100vh - 2 * var(--P));
  margin:var(--P) auto;
  background-color:var(--paper);
  background-image:linear-gradient(to bottom,
    transparent calc(var(--P) - var(--rule-w)), var(--rule) calc(var(--P) - var(--rule-w)), var(--rule) var(--P));
  background-size:100% var(--P);
  background-position:0 calc(var(--top) + var(--baseline));
  box-shadow:0 1px 2px rgba(40,30,10,.12),0 6px 24px rgba(40,30,10,.10);
  padding:0 var(--text-r) 0 var(--text-x);
  display:flex;flex-direction:column;
  isolation:isolate;
}
/* unruled band at the top, like the PDF pages */
.sheet::before{
  content:"";position:absolute;left:0;right:0;top:0;height:calc(var(--top) + var(--baseline) - 2px);
  background:var(--paper);z-index:-1;
}
.sheet::after{
  content:"";position:absolute;top:0;bottom:0;left:var(--margin-x);
  border-left:1.6px solid var(--margin);z-index:-1;
}
.hole{
  position:absolute;left:30px;width:26px;height:26px;border-radius:50%;z-index:2;
  background:radial-gradient(circle at 45% 40%,#e9e9e6 0%,#dcdcd8 60%,#cfcfca 100%);
  box-shadow:inset 1.5px 2px 3px rgba(0,0,0,.28);
}
.hole.h1{top:120px}
.hole.h2{top:calc(50% - 13px)}
.hole.h3{bottom:120px}


/* ---------- header band ---------- */
.masthead{
  height:var(--top);
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.brand{
  font-family:Chalk,"Comic Sans MS",cursive;font-weight:700;font-size:24px;line-height:var(--P);
  color:var(--title);text-decoration:none;display:flex;align-items:center;gap:10px;
}
.brand img{width:auto;height:44px}
.nav{display:flex;flex-wrap:wrap;gap:4px 22px;margin:0;padding:0;list-style:none;
  font-family:Chalk,"Comic Sans MS",cursive;font-weight:700;font-size:17px}
.nav a{color:var(--title);text-decoration:none;padding:4px 0;border-bottom:2px solid transparent}
.nav a:hover{border-bottom-color:var(--margin)}
.nav a[aria-current="page"]{border-bottom-color:var(--title)}

/* ---------- ruled content ---------- */
main{flex:1 0 auto;padding-top:var(--P)}
p,ul,ol,blockquote,figure{margin:0 0 var(--P)}
p,li,h1,h2,figcaption,footer{text-wrap:pretty}  /* no one-word runts */
h1,h2,h3{font-family:Chalk,"Comic Sans MS",cursive;font-weight:700;color:var(--title);margin:0}
h1{font-size:36px;line-height:calc(2 * var(--P));margin-bottom:var(--P);position:relative;top:11px}
h2{font-size:24px;line-height:var(--P);margin:var(--P) 0}
h3{font-size:19px;line-height:var(--P);margin:0}
a{color:#1f5a92;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--title)}
.lede{font-size:19px}
.byline{font-family:Chalk,"Comic Sans MS",cursive;font-weight:700;font-size:19px;color:var(--title)}
ul,ol{padding-left:1.6em}
.plain{list-style:none;padding-left:0}
.spaced li{margin-bottom:var(--P)}
.spaced li:last-child{margin-bottom:0}
.sig{margin-bottom:0}

/* boot drawing on the home page */
.boot{float:right;margin:0 0 var(--P) var(--P);height:calc(9 * var(--P));width:auto}

/* download card */
.card{
  border:2px dashed var(--title);border-radius:8px;
  padding:calc(var(--P) - 2px) var(--P);
  margin:0 0 var(--P);
  background:rgba(255,254,250,.55);
  display:flex;gap:var(--P);align-items:flex-start;
}
.card img{height:calc(5 * var(--P));width:auto;flex:none}
.card h2{margin-top:0}
.meta{color:var(--muted);font-style:italic}
.btn{
  display:inline-block;height:calc(2 * var(--P));line-height:calc(2 * var(--P) - 4px);
  padding:0 22px;border:2px solid var(--title);border-radius:10px;
  background:var(--title);color:#fff;text-decoration:none;
  font-family:Chalk,"Comic Sans MS",cursive;font-weight:700;font-size:19px;
}
.btn:hover{background:#1f4670;color:#fff}

/* testimonial: a taped sticky note */
.sticky{
  position:relative;max-width:420px;margin:calc(2 * var(--P)) auto calc(2 * var(--P));
  padding:calc(var(--P) + 6px) var(--P) var(--P);
  background:linear-gradient(180deg,#fff7a8 0%,#fff28a 100%);
  color:#2b2a1f;
  box-shadow:0 1px 1px rgba(0,0,0,.08),0 8px 14px -6px rgba(60,50,0,.35);
  transform:rotate(-2deg);
  border-bottom-right-radius:28px 6px;
}
.sticky::before{ /* strip of tape */
  content:"";position:absolute;top:-13px;left:50%;width:120px;height:30px;
  transform:translateX(-50%) rotate(3deg);
  background:rgba(236,232,214,.72);
  border-left:1px dashed rgba(0,0,0,.06);border-right:1px dashed rgba(0,0,0,.06);
  box-shadow:0 1px 2px rgba(0,0,0,.12);
}
.sticky p{font-family:Chalk,"Comic Sans MS",cursive;font-weight:700;font-size:21px;line-height:var(--P);margin:0 0 var(--P);color:var(--title)}
.sticky h2{font-size:17px;margin:0 0 var(--P);color:#6b5a14;letter-spacing:.02em}
.sticky.sitemap{max-width:620px;transform:rotate(1.5deg)}
.sticky.sitemap h2{font-size:26px;line-height:var(--P);color:var(--title)}
.sticky.sitemap li{margin-bottom:12px}
.sticky.sitemap li:last-child{margin-bottom:0}
.sticky.sitemap::before{transform:translateX(-50%) rotate(-2deg)}
.sticky ul{margin:0;padding-left:1.3em}
.sticky li a{color:#1f4f80}
.sticky.download{max-width:600px;display:flex;gap:var(--P);align-items:flex-start;transform:rotate(-1deg);margin-top:calc(2 * var(--P))}
.sticky.download img{height:calc(5 * var(--P));width:auto;flex:none}
.sticky.download h2{font-size:22px;color:var(--title)}
.sticky .meta{font-family:Andika,sans-serif;font-weight:400;font-size:16px;font-style:italic;color:#5a5130}
.sticky .btn{color:#fff}
.sticky.download p:last-child{margin-bottom:0}
.sticky footer{font-size:15px;line-height:22px}
.sticky footer a{color:#1f5a92}

/* about page: photo beside text */
.about{display:flex;gap:calc(1.5 * var(--P));align-items:flex-start}
.about figure{flex:none;width:280px;margin:calc(var(--P) / 2) 0 var(--P)}
.about figure img{display:block;width:280px;height:calc(10 * var(--P));object-fit:cover;border-radius:6px;
  box-shadow:0 1px 3px rgba(0,0,0,.2);transform:rotate(-1.5deg)}
.about figure img.fallback{object-fit:contain;box-shadow:none;transform:none}
.about figcaption{font-size:16px;color:var(--muted);font-style:italic;margin-top:calc(2 * var(--P))}
.about .text{flex:1}

/* ---------- footer ---------- */
.site-foot{
  padding:var(--P) 0 calc(2 * var(--P));
  color:var(--muted);font-size:15px;
}
.site-foot p{margin:0}
.site-foot a{color:var(--muted)}

.clear{clear:both}
.nw{white-space:nowrap}

/* ---------- small screens ---------- */
@media (max-width:640px){
  :root{--P:26px;--top:104px;--margin-x:40px;--text-x:56px;--text-r:16px;--baseline:21px}
  body{font-size:16px}
  .sheet{margin:0;min-height:100vh;box-shadow:none}
  .masthead{flex-direction:column;flex-wrap:nowrap;align-items:flex-start;justify-content:center;gap:8px}
  .brand{font-size:21px}
  .brand img{height:34px}
  .nav{font-size:15px;gap:4px 14px}
  .hole{left:10px;width:18px;height:18px}
  .hole.h1{top:140px}
  .hole.h3{bottom:140px}
  h1{font-size:30px}
  .boot{height:calc(6 * var(--P));margin-left:12px}
  .card{flex-direction:column;padding:calc(var(--P) - 2px) 16px}
  .card img{display:none}
  .about{flex-direction:column;gap:0}
  .sticky{max-width:none;margin-left:4px;margin-right:4px}
  .sticky.download img{display:none}
}

@media print{
  body{background:#fff}
  .sheet{box-shadow:none;margin:0;max-width:none}
  .nav{display:none}
}