:root{
  --green:#434723; --green-deep:#2b2e16; --wall:#dcdcc9; --paper:#fbfaf3;
  --manila:#ead9a2; --bean:#d2ad62; --red:#c4261d; --ink:#16170f; --rule:#c0c1a8;
  --sign:"Barlow Condensed","Arial Narrow",sans-serif;
  --body:"Barlow","Helvetica Neue",Arial,sans-serif;
  --typed:"Courier Prime","Courier New",monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--wall);color:var(--ink);font:400 1.0625rem/1.6 var(--body)}
img{max-width:100%;height:auto;display:block}
a{color:var(--green-deep);text-underline-offset:.18em}
a:hover{color:var(--red)}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.wrap{max-width:66rem;margin:0 auto;padding:0 1rem}
.skip{position:absolute;left:-999px}
.skip:focus{left:1rem;top:1rem;background:var(--paper);padding:.5rem 1rem;z-index:50}
h1,h2,h3{font-family:var(--sign);font-weight:700;line-height:1.05;margin:0}
h1{font-size:clamp(2.4rem,7vw,4.2rem);letter-spacing:-.005em}
h2{font-size:clamp(1.7rem,4vw,2.3rem);margin-top:2.6rem}
h3{font-size:1.35rem;font-weight:600;margin-top:1.8rem}
p{margin:.9rem 0}
del{color:var(--red);text-decoration-thickness:.12em}
ins{text-decoration:none;font-family:var(--typed);font-weight:700;color:var(--green);font-size:.94em}

/* masthead */
.mast{background:var(--green);color:#fff}
.mast-in{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.5rem;padding-top:.85rem;padding-bottom:.85rem}
.brand{display:flex;align-items:center;gap:.7rem;color:#fff;text-decoration:none;font:700 1.3rem/1.05 var(--sign);margin-right:auto}
.brand:hover{color:#fff}
.brand img{width:48px;height:48px}
.brand small{display:block;font:400 .78rem/1.3 var(--typed);opacity:.85}
.mast nav{display:flex;flex-wrap:wrap;gap:.2rem 1.2rem}
.mast nav a{color:#fff;font:600 1.15rem var(--sign);text-decoration:none;padding:.35rem 0;border-bottom:3px solid transparent}
.mast nav a:hover,.mast nav a[aria-current]{border-bottom-color:var(--manila)}

/* desk bar: tally + search */
.desk{background:var(--green-deep);color:#fff}
.desk-in{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1.5rem;padding-top:.7rem;padding-bottom:.7rem}
.tally{display:flex;align-items:center;gap:.6rem;margin:0;font:600 1.05rem var(--sign)}
.search{position:relative;flex:1 1 17rem}
.search label{position:absolute;left:-999em}
.search input,.field input,.field select{width:100%;font:400 1.05rem var(--typed);color:var(--ink);background:var(--paper);
  border:2px solid var(--ink);border-radius:3px;padding:.6rem .75rem}
.results{position:absolute;z-index:20;left:0;right:0;top:calc(100% + 4px);background:var(--paper);color:var(--ink);
  border:2px solid var(--ink);border-radius:3px;box-shadow:5px 5px 0 var(--ink)}
.results a{display:flex;justify-content:space-between;gap:1rem;padding:.6rem .75rem;text-decoration:none;border-bottom:1px solid var(--rule);font-weight:500}
.results a:last-child{border-bottom:0}
.results a:hover,.results a:focus{background:var(--manila);color:var(--ink)}
.results span{font:400 .88rem var(--typed);white-space:nowrap}
.results p{margin:0;padding:.7rem .75rem;font-family:var(--typed);font-size:.95rem}

/* flip tiles */
.tiles{display:inline-flex;gap:.12em;font:700 1em var(--sign)}
.tiles span{display:inline-block;min-width:.72em;padding:.02em .14em;text-align:center;background:var(--ink);color:#fff;border-radius:.08em;
  background-image:linear-gradient(#0000 49%,#ffffff3d 49% 51%,#0000 51%);font-variant-numeric:tabular-nums}
.tally .tiles{font-size:1.5rem}
.alarm .tiles span{background-color:var(--red)}

/* home hero */
.hero{padding:2.4rem 0 1rem}
.hero .lede{font-size:1.2rem;max-width:38rem}
.hero-grid{display:grid;gap:2rem;align-items:start;margin-top:1.8rem}
@media(min-width:54rem){.hero-grid{grid-template-columns:1.15fr 1fr}}
.sign{position:relative;background:#fff;border:10px solid var(--green);border-radius:18px;padding:1.6rem 1.2rem 1.3rem;text-align:center;
  font-family:var(--sign);font-weight:700;text-transform:uppercase;line-height:1;box-shadow:8px 8px 0 var(--green-deep)}
.sign::before,.sign::after{content:"";position:absolute;top:10px;width:13px;height:13px;border-radius:50%;background:var(--wall);box-shadow:inset 1px 2px 0 #0005}
.sign::before{left:12px}.sign::after{right:12px}
.sign p{margin:0}
.sign .a{font-size:clamp(1.5rem,5vw,2.3rem);color:var(--green)}
.sign .tiles{font-size:clamp(5rem,21vw,9rem);margin:.12em 0 .1em}
.sign .b{font-size:clamp(1.3rem,4.4vw,2rem)}
.sign .c{margin-top:1rem;padding-top:.8rem;border-top:3px solid var(--green);font:400 .92rem/1.4 var(--typed);text-transform:none}
.alarm .sign{border-color:var(--red);box-shadow:8px 8px 0 #6e130e;animation:rattle .5s 2}
.alarm .sign .a{color:var(--red)}
.alarm .sign .c{border-top-color:var(--red)}
@keyframes rattle{0%,100%{transform:none}20%{transform:translate(-5px,2px) rotate(-.8deg)}50%{transform:translate(5px,-2px) rotate(.8deg)}80%{transform:translate(-3px,1px) rotate(-.4deg)}}
@media(prefers-reduced-motion:reduce){.alarm .sign{animation:none}}
.counter h2{margin-top:0}
.counter .search{margin-top:1rem}
.notice{margin-top:.9rem;padding:.7rem .85rem;background:var(--manila);border-left:8px solid var(--ink);font:400 .95rem/1.45 var(--typed)}

/* incident banner */
.incident{position:fixed;z-index:60;left:0;right:0;top:0;background:var(--red);color:#fff;padding:.9rem 1rem;text-align:center;
  font:700 clamp(1.15rem,3.6vw,1.6rem)/1.2 var(--sign);transform:translateY(-110%);visibility:hidden;transition:transform .25s,visibility 0s .25s}
.incident.on{transform:none;visibility:visible;transition:transform .25s}
.incident small{display:block;font:400 .92rem/1.4 var(--typed);margin-top:.2rem}
@media(prefers-reduced-motion:reduce){.incident{transition:none}}

/* documents */
.doc{background:var(--paper);border:1px solid #c9c9b2;box-shadow:6px 6px 0 #bbbca2;padding:clamp(1.2rem,4vw,2.8rem);margin:2rem 0}
.doc.narrow{max-width:46rem;margin-left:auto;margin-right:auto}
.doc>:first-child{margin-top:0}
.caseno{font:400 .92rem/1.4 var(--typed);margin:0 0 .9rem;display:flex;flex-wrap:wrap;gap:.2rem 1.4rem;border-bottom:2px solid var(--ink);padding-bottom:.6rem}
.sub{font-size:1.18rem;max-width:40rem}
.prose{max-width:41rem}
.prose li{margin:.35rem 0}
.stamp{display:inline-block;margin:1.4rem 0 0;padding:.3rem .8rem;border:4px double var(--red);color:var(--red);font:700 1.5rem var(--sign);text-transform:uppercase;transform:rotate(-3deg)}
.ruling{margin:1.6rem 0;padding:1rem 1.2rem;border:3px solid var(--ink);background:#fff;font:700 clamp(1.3rem,3.6vw,1.75rem)/1.2 var(--sign)}
dl.faq dt{font:600 1.3rem/1.2 var(--sign);margin-top:1.4rem}
dl.faq dd{margin:.35rem 0 0}

/* records index */
.index{width:100%;border-collapse:collapse;margin-top:1.2rem}
.index th{font:400 .86rem var(--typed);text-align:left;border-bottom:2px solid var(--ink);padding:.4rem .6rem .4rem 0}
.index td{border-bottom:1px solid var(--rule);padding:.75rem .6rem .75rem 0;vertical-align:baseline}
.index td:first-child,.index td:nth-child(n+3){font:400 .92rem var(--typed);white-space:nowrap}
.index td a{font:600 1.4rem/1.15 var(--sign)}
.index td small{display:block;font-size:.95rem;margin-top:.15rem}
@media(max-width:40rem){.files th:nth-child(1),.files td:nth-child(1),.files th:nth-child(3),.files td:nth-child(3){display:none}}
.pair{display:grid;gap:1.5rem;margin:2rem 0}
@media(min-width:48rem){.pair{grid-template-columns:1fr 1fr}}
.pair .doc{margin:0}
.btn{display:inline-block;font:700 1.2rem var(--sign);color:#fff;background:var(--green);border:2px solid var(--ink);border-radius:3px;
  padding:.5rem 1.1rem;text-decoration:none;cursor:pointer;box-shadow:3px 3px 0 var(--ink)}
.btn:hover{background:var(--green-deep);color:#fff}
.btn.plain{background:var(--paper);color:var(--ink)}
.btn.plain:hover{background:var(--manila);color:var(--ink)}

/* recipe */
.exhibit{margin:1.4rem 0;border:1px solid var(--ink);background:#fff;padding:.5rem}
.exhibit figcaption{font:400 .86rem var(--typed);padding:.5rem .2rem 0}
.facts{display:flex;flex-wrap:wrap;gap:0;margin:1.2rem 0;padding:0;list-style:none;border:2px solid var(--ink)}
.facts li{flex:1 1 7rem;padding:.55rem .8rem;border-right:1px solid var(--ink);margin:-1px -1px 0 0;border-top:1px solid var(--ink)}
.facts b{display:block;font:400 .82rem var(--typed)}
.facts span{font:700 1.45rem var(--sign)}
.cols{display:grid;gap:0 2.5rem}
@media(min-width:50rem){.cols{grid-template-columns:19rem 1fr}}
.ingredients{list-style:none;padding:0;margin:.8rem 0}
.ingredients li{padding:.42rem 0;border-bottom:1px dashed var(--rule)}
.steps{padding-left:1.3rem;margin:.8rem 0}
.steps li{margin:.7rem 0;padding-left:.3rem}
.steps li::marker{font:700 1.3rem var(--sign);color:var(--green)}

/* forms */
.field{margin:1rem 0;max-width:26rem}
.field label{display:block;font:600 1.15rem var(--sign);margin-bottom:.25rem}
.row{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.2rem}
.ledger td:last-child,.ledger th:last-child{text-align:right}
.total{font:700 2rem var(--sign);margin-top:1rem}

footer{margin-top:3.5rem;background:var(--green-deep);color:#fff;padding:2rem 0}
footer a{color:#fff}
footer a:hover{color:var(--manila)}
footer p{margin:.4rem 0;max-width:44rem}
footer .typed{font:400 .9rem/1.5 var(--typed);opacity:.9}
footer button{font:400 .9rem var(--typed);color:#fff;background:none;border:1px solid #fff;border-radius:3px;padding:.3rem .6rem;cursor:pointer}
@media print{.mast,.desk,footer,.noprint,.incident{display:none}body{background:#fff}.doc{box-shadow:none;border:0}}

/* photographs */
.photo{margin:1.4rem 0}
.photo img,.photo video,.exhibit video{width:100%;height:auto;display:block;border:1px solid var(--ink);background:#111}
.photo figcaption{font:400 .86rem/1.4 var(--typed);padding-top:.45rem}
.office{margin-bottom:0}
.swap{position:relative}
.swap .after{position:absolute;inset:0;opacity:0;transition:opacity .15s}
.aftermath .swap .after{opacity:1}
.doc.split{display:grid;gap:1.5rem 2.5rem;align-items:center}
@media(min-width:54rem){.doc.split{grid-template-columns:1fr 1fr}}
.doc.split .photo{margin:0}
.trio{display:grid;gap:1.2rem;margin-top:1.2rem}
@media(min-width:44rem){.trio{grid-template-columns:1fr 1fr .62fr;align-items:end}}
.trio .photo{margin:0}
.exhibit img{width:100%}
.footseal{float:right;margin:0 0 1rem 1rem;opacity:.9}
.jarrow{display:grid;gap:1rem;align-items:center}
@media(min-width:36rem){.jarrow{grid-template-columns:1fr 11rem}}
.jar{mix-blend-mode:multiply;max-width:11rem;margin:0 auto}
/* certificate printed on the photographed blank */
.cert{position:relative;border:0;padding:0;margin-top:2rem;background:none;container-type:inline-size;color:#2a2418}
.cert>img{width:100%;border:1px solid var(--ink)}
.cert-text{position:absolute;left:19%;right:19%;top:20%;bottom:38%;display:flex;flex-direction:column;justify-content:center;text-align:center}
.cert-text p,.cert-text h2{margin:0}
.cert .org{font:400 2cqw var(--typed)}
.cert h2{font-size:6cqw;margin:.6cqw 0 1.4cqw}
.cert .oath{font:500 2.75cqw/1.35 var(--body);max-width:none;margin:0}
.cert .name{font:700 4.8cqw/1.2 var(--typed);border-bottom:.25cqw solid currentColor;display:block;margin:1.6cqw auto 0;padding:0 2cqw;max-width:100%;overflow-wrap:anywhere}
.cert-date{position:absolute;left:33%;right:35%;top:67%;margin:0;text-align:center;font:400 2.2cqw var(--typed)}
@media print{.cert{margin:0}form[data-pledge],.caseno,.sub{display:none}}
@media(max-width:40rem){.doc.narrow [data-cert] .cert{margin-left:calc(-1*clamp(1.2rem,4vw,2.8rem) + 2px);margin-right:calc(-1*clamp(1.2rem,4vw,2.8rem) + 2px)}}
.specimen{mix-blend-mode:multiply;width:100%;max-width:24rem;margin:0 auto}
.exhibit{padding:.5rem}
.hero-top{display:grid;grid-template-columns:1fr auto;gap:1rem 2.5rem;align-items:center}
.hero-bean{mix-blend-mode:multiply;width:clamp(6.5rem,24vw,17rem);margin:-1.5rem 0}
@media(min-width:54rem){.hero-top{grid-template-columns:1.15fr 1fr;gap:2rem}.hero-bean{justify-self:center;width:21rem;margin:-3rem 0 -3.5rem}.hero-grid{align-items:center;margin-top:2.2rem}}
.doc.split{overflow:hidden}
.scatter{mix-blend-mode:multiply;width:100%;max-width:none}
@media(min-width:54rem){.doc.split{grid-template-columns:1fr 1.15fr}.scatter{width:122%;margin:-3rem -8rem -3rem -1rem}}