/* The Accidental Teacher: a colonial print-shop broadside on cream stock. Generated by
   Jumpdrive/NCHO/store/constitution-day/landing/build-landing.mjs. Do not hand-edit here. */
:root{
  --stock:#f6efe0; --stock-deep:#e6dcc2; --paper:#fffaf0; --ink:#1c1917; --ink-soft:#3f3a36; --mute:#6b645c;
  --red:#9d2235; --red-deep:#7c1a2a; --olive:#5b6b3a; --teal:#2f6f73;
  --display:"Alfa Slab One",Georgia,"Times New Roman",serif;
  --text:Literata,Georgia,"Times New Roman",serif;
  --fell:"IM Fell English",Georgia,"Times New Roman",serif;
}
*{box-sizing:border-box}
html,body{overflow-x:hidden}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--stock);color:var(--ink);font-family:var(--text);font-size:1.2rem;line-height:1.62}
img{max-width:100%;height:auto;display:block}
a{color:var(--red);text-decoration-thickness:2px;text-underline-offset:3px}
.frame{width:min(1180px,100% - 2*clamp(16px,4vw,56px));margin-inline:auto}

.top{display:flex;justify-content:space-between;align-items:center;gap:16px 28px;flex-wrap:wrap;padding:18px 0;border-bottom:2px solid var(--ink);font-family:var(--fell);font-size:1.15rem}
.top a{color:var(--ink);text-decoration:none}
.top a:hover,.top a[aria-current]{color:var(--red)}
.top .brand{font-family:var(--display);font-size:1.3rem}
.top nav{display:flex;gap:6px 24px;flex-wrap:wrap}

.masthead{display:grid;grid-template-columns:1.2fr .9fr;gap:clamp(24px,5vw,72px);align-items:center;padding:clamp(36px,6vw,72px) 0 clamp(32px,5vw,56px);border-bottom:8px double var(--ink)}
.kicker{font-family:var(--fell);font-style:italic;color:var(--red);font-size:clamp(1.25rem,2vw,1.6rem);margin:0 0 10px}
h1{font-family:var(--display);font-weight:400;line-height:1;font-size:clamp(2.7rem,6.6vw,5.6rem);margin:0 0 24px;text-wrap:balance}
.deck{font-size:clamp(1.3rem,2.1vw,1.7rem);line-height:1.45;margin:0 0 16px;text-wrap:pretty}
.sub{font-size:1.15rem;color:var(--ink-soft);margin:0 0 30px}
.masthead .art img{width:100%;max-width:560px;margin-inline:auto}

.btns{display:flex;gap:16px;flex-wrap:wrap}
.btn{display:inline-block;font-family:var(--display);font-size:1.15rem;line-height:1.2;padding:16px 26px;color:#fff;background:var(--red);border:3px solid var(--ink);box-shadow:6px 6px 0 var(--ink);text-decoration:none;cursor:pointer;transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink);color:#fff}
.btn:active{transform:translate(3px,3px);box-shadow:3px 3px 0 var(--ink)}
.btn.ghost{background:var(--paper);color:var(--ink)}
.btn.ghost:hover{color:var(--ink)}
.btn.olive{background:var(--olive)}
.btn.small{font-size:1rem;padding:13px 20px;box-shadow:4px 4px 0 var(--ink)}
.btn.small:hover{box-shadow:6px 6px 0 var(--ink)}
.btn:disabled{opacity:.6;transform:none;cursor:default}

.scanned{margin:32px 0 0;padding:20px 24px;border:2px solid var(--ink);background:var(--paper);font-family:var(--fell);font-size:1.2rem;line-height:1.5}
.scanned b{font-family:var(--display);font-weight:400;color:var(--red);margin-right:6px}

.sec{margin:clamp(56px,8vw,96px) 0 0}
.sec-head{text-align:center;border-top:3px solid var(--ink);border-bottom:1px solid var(--ink);padding:22px 0 20px;margin:0 0 22px}
.sec-head.left{text-align:left}
.sec-head h2,.listbox h2{font-family:var(--display);font-weight:400;line-height:1.08;font-size:clamp(2rem,4.6vw,3.6rem);margin:0;text-wrap:balance}
.sec-intro{max-width:900px;margin:0 auto 44px;text-align:center;font-size:clamp(1.15rem,1.6vw,1.35rem);color:var(--ink-soft);text-wrap:pretty}

.notices{display:grid;grid-template-columns:repeat(2,1fr);gap:36px 32px}
.notice{position:relative;display:grid;grid-template-columns:250px 1fr;background:var(--paper);border:3px solid var(--ink);box-shadow:8px 8px 0 var(--stock-deep)}
.notice .plate{border-right:3px solid var(--ink);background:#e9e2d0}
.notice .plate img{width:100%;height:100%;object-fit:cover}
.notice .num{position:absolute;top:-18px;left:-18px;width:72px;height:72px;border-radius:50%;background:var(--red);color:#fff;border:3px solid var(--ink);display:grid;place-items:center;font-family:var(--display);font-size:1.75rem;line-height:1;z-index:1}
.notice .body{padding:24px 24px 22px}
.notice .am,.thing .am{font-family:var(--fell);font-style:italic;color:var(--red);font-size:1.1rem;margin:0 0 4px}
.notice h3,.thing h3{font-family:var(--display);font-weight:400;font-size:clamp(1.5rem,2.2vw,1.9rem);line-height:1.12;margin:0 0 10px}
.notice p,.thing p{margin:0;font-size:1.1rem;line-height:1.55}

.editions{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.ed{display:flex;flex-direction:column;gap:16px;background:var(--paper);border:3px solid var(--ink);padding:26px 24px 24px}
.ed .band{align-self:flex-start;border:2.5px solid var(--red);color:var(--red);border-radius:999px;padding:7px 16px;font-family:var(--display);font-size:1rem;line-height:1.2}
.ed p{margin:0;font-size:1.08rem;line-height:1.55;flex:1}
.ed .btn{align-self:flex-start}
.soon{text-align:center;font-family:var(--fell);font-style:italic;font-size:1.2rem;color:var(--ink-soft);margin:30px auto 0;max-width:720px}

.shelf{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.book{display:grid;grid-template-columns:110px 1fr;gap:18px;align-items:start;background:var(--paper);border:2px solid var(--ink);padding:16px;color:var(--ink);text-decoration:none;transition:transform .12s,box-shadow .12s}
.book:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.book img{border:2px solid var(--ink);box-shadow:4px 4px 0 var(--stock-deep)}
.book .t{font-family:var(--display);font-weight:400;font-size:1.12rem;line-height:1.15}
.book .a{font-family:var(--fell);font-style:italic;color:var(--mute);font-size:1rem;margin-top:2px}
.book .w{font-size:1rem;line-height:1.45;margin:8px 0 6px}
.book .p{font-family:var(--display);color:var(--red);font-size:1.15rem}
.plank{margin-top:36px;text-align:center}

.listbox{background:var(--paper);border:3px solid var(--ink);box-shadow:12px 12px 0 var(--red);padding:clamp(24px,4vw,48px)}
.listbox h2{margin-bottom:14px}
.listbox>p{margin:0;font-size:1.15rem;max-width:900px}
.form{position:relative;display:grid;grid-template-columns:1fr 1.5fr auto;gap:14px;margin-top:26px}
.form input{font:inherit;font-size:1.15rem;padding:14px 16px;border:3px solid var(--ink);background:#fff;min-width:0;color:var(--ink)}
.form input:focus{outline:3px solid var(--red);outline-offset:2px}
.form .hp{position:absolute;left:-9999px;top:0;width:1px;height:1px;overflow:hidden}
.msg{margin:16px 0 0;font-family:var(--fell);font-size:1.25rem;min-height:1.6em;color:var(--red-deep)}

.about{display:grid;grid-template-columns:1.4fr 1fr;gap:40px 56px;align-items:start}
.about p{font-size:1.15rem;margin:0}
.links{list-style:none;padding:0;margin:0;border-top:3px solid var(--ink)}
.links li{border-bottom:1px solid var(--ink)}
.links a{display:block;padding:14px 4px;font-family:var(--display);font-size:1.15rem;color:var(--ink);text-decoration:none}
.links a:hover{color:var(--red);padding-left:12px}

.things{display:grid;grid-template-columns:repeat(2,1fr);gap:32px}
.thing{display:flex;flex-direction:column;gap:12px;background:var(--paper);border:3px solid var(--ink);box-shadow:8px 8px 0 var(--stock-deep);padding:28px 28px 26px}
.thing p{flex:1}
.thing .btns{margin-top:10px}

footer{margin-top:clamp(56px,8vw,96px);border-top:8px double var(--ink);padding:28px 0 56px;display:flex;justify-content:space-between;align-items:baseline;gap:16px 28px;flex-wrap:wrap;font-family:var(--fell);font-size:1.05rem}
footer nav{display:flex;gap:8px 22px;flex-wrap:wrap}
footer a{color:var(--ink)}
footer a:hover{color:var(--red)}

@media (max-width:980px){
  .masthead{grid-template-columns:1fr}
  .notices,.things{grid-template-columns:1fr}
  .editions,.shelf{grid-template-columns:repeat(2,1fr)}
  .about{grid-template-columns:1fr}
}
@media (max-width:640px){
  body{font-size:1.12rem}
  .notice{grid-template-columns:1fr}
  .notice .plate{border-right:0;border-bottom:3px solid var(--ink)}
  .notice .plate img{aspect-ratio:1;height:auto}
  .notice .num{left:-8px}
  .editions,.shelf,.form{grid-template-columns:1fr}
  .book{grid-template-columns:90px 1fr}
  .btn{width:100%;text-align:center}
  .btns .btn{width:auto}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
  .btn:hover,.book:hover{transform:none}
}