/* birdaday.net — field-notebook / tear-off day calendar, species-plate palette */
:root{
  --paper:#fdfcf7; --rule:#d9e4ef; --margin:#e7a3a0;
  --ink:#1c2733; --ink-2:#44515f;
  --cardinal:#b1271f; --bluebird:#2b62a8; --goldfinch:#e7b416; --moss:#4c6b2f; --jay:#163f74;
  --card:#ffffff;
  --fh:"Bricolage Grotesque",system-ui,sans-serif;
  --fb:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.65 var(--fb)}
a{color:var(--bluebird);text-underline-offset:2px}
a:hover{color:var(--cardinal)}
.wrap{max-width:1040px;margin:0 auto;padding:0 16px}
.strip{background:var(--ink);color:#e9eef4;font-size:12.5px;text-align:center;padding:6px 16px;line-height:1.4}
.top{border-bottom:3px double var(--ink);background:#fff}
.bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;padding-top:12px;padding-bottom:12px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font:800 21px/1 var(--fh);letter-spacing:-.01em}
.brand em{font-style:normal;color:var(--cardinal)}
nav{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:15px}
nav a{color:var(--ink-2);text-decoration:none;padding:3px 0;border-bottom:2px solid transparent}
nav a:hover,nav a[aria-current=page]{color:var(--ink);border-bottom-color:var(--goldfinch)}

/* notebook sheet: ruled lines + red margin line */
.sheet{background:
  linear-gradient(90deg,transparent 0 46px,var(--margin) 46px 47.5px,transparent 47.5px) ,
  repeating-linear-gradient(180deg,transparent 0 31px,var(--rule) 31px 32px);
  background-color:#fff;margin-top:28px;margin-bottom:40px;border:1px solid #e2e6ea;box-shadow:0 1px 0 #e2e6ea,0 10px 30px -18px rgba(28,39,51,.35);
  padding:28px 22px 36px 66px;border-radius:2px;position:relative}
.sheet::before{content:"";position:absolute;left:14px;top:30px;bottom:30px;width:14px;
  background:radial-gradient(circle at 7px 7px,var(--paper) 5px,#cfd6dd 5.5px,transparent 6.5px) 0 0/14px 64px repeat-y}
.sheet-head{display:flex;gap:20px;align-items:flex-start;margin-bottom:10px}
.kicker{margin:4px 0 2px;font:700 13px/1.2 var(--fb);letter-spacing:.12em;text-transform:uppercase;color:var(--moss)}
h1{font:800 clamp(30px,5vw,46px)/1.05 var(--fh);margin:4px 0 6px;letter-spacing:-.02em}
h2{font:800 25px/1.2 var(--fh);margin:34px 0 8px;color:var(--jay)}
h3{font:700 19px/1.3 var(--fh);margin:24px 0 6px}
.prose{max-width:720px}
.prose p,.prose li{max-width:68ch}
.prose ul,.prose ol{padding-left:1.3em}
.prose li{margin:4px 0}
.prose blockquote{margin:18px 0;padding:10px 16px;border-left:4px solid var(--goldfinch);background:#fffbea}

/* the signature tear-off calendar stamp */
.stamp{flex:0 0 auto;position:relative;width:84px;height:92px;background:#fff;border:2px solid var(--ink);border-radius:6px;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:8px;
  box-shadow:4px 4px 0 var(--goldfinch);transform:rotate(-3deg)}
.stamp::before{content:"";position:absolute;left:0;right:0;top:0;height:24px;background:var(--cardinal);border-radius:3px 3px 0 0;border-bottom:2px solid var(--ink)}
.stamp .ring{position:absolute;top:-8px;left:20px;width:7px;height:15px;border:2px solid var(--ink);border-radius:4px;background:var(--paper);z-index:1}
.stamp .ring.r2{left:auto;right:20px}
.stamp .lbl{position:absolute;top:4px;left:0;right:0;text-align:center;color:#fff;font:800 12px/16px var(--fh);letter-spacing:.2em}
.stamp .num{font:800 36px/1 var(--fh);color:var(--ink);letter-spacing:-.03em}
.stamp.small{width:34px;height:36px;padding-bottom:3px;box-shadow:2px 2px 0 var(--goldfinch);border-width:2px}
.stamp.small::before{height:10px}
.stamp.small .ring{display:none}
.stamp.small .lbl{display:none}
.stamp.small .num{font-size:17px}

/* tables */
.tbl{overflow-x:auto;margin:16px 0;border:1px solid #cfd8e2;border-radius:4px;background:#fff}
table{border-collapse:collapse;width:100%;font-size:15px;line-height:1.45}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid #e3e8ee;vertical-align:top}
th{background:#eef3f8;font-family:var(--fh);font-weight:800;color:var(--jay);white-space:nowrap}
tr:last-child td{border-bottom:0}

/* cards / hub */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin:18px 0;max-width:none}
.card{display:block;background:#fff;border:2px solid var(--ink);border-radius:6px;padding:14px 14px 12px;text-decoration:none;color:var(--ink);box-shadow:3px 3px 0 var(--rule)}
.card:hover{box-shadow:3px 3px 0 var(--goldfinch);color:var(--ink)}
.card b{display:block;font:800 18px/1.2 var(--fh);margin-bottom:4px;color:var(--jay)}
.card span{font-size:14.5px;color:var(--ink-2)}
.plate{border:1px solid #cfd8e2;border-left:8px solid var(--c,var(--bluebird));background:#fff;padding:2px 16px 10px;margin:18px 0;border-radius:4px}
.plate h3{margin-top:14px}
.plate .meta{font-size:14px;color:var(--ink-2)}
.note{background:#f2f7ec;border:1px dashed var(--moss);padding:10px 14px;border-radius:4px}

/* tools */
.tool{background:#f6f9fc;border:2px solid var(--jay);border-radius:8px;padding:16px;margin:18px 0}
.tool label{display:block;font-weight:700;margin:10px 0 4px}
.tool input,.tool select,.tool button{font:inherit;font-size:16px;padding:8px 10px;border:1px solid #9fb0c2;border-radius:5px;background:#fff;color:var(--ink);max-width:100%}
.tool button{background:var(--jay);color:#fff;border-color:var(--jay);cursor:pointer;font-weight:700}
.tool button.ghost{background:#fff;color:var(--jay)}
.tool .row{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.tool .out{margin-top:14px;padding:12px 14px;background:#fff;border-left:5px solid var(--goldfinch);font-size:18px}
.tool .out strong{font-family:var(--fh);font-size:24px}
.log{list-style:none;padding:0;margin:12px 0 0;max-height:360px;overflow:auto;border:1px solid #d5dee8;border-radius:5px;background:#fff}
.log li{display:flex;gap:10px;padding:6px 10px;border-bottom:1px solid #eef2f6;margin:0}
.log li b{font-family:var(--fh);min-width:62px;color:var(--cardinal)}
.warn{color:var(--cardinal);font-weight:700}

.foot{border-top:3px double var(--ink);background:#fff;font-size:14.5px;color:var(--ink-2);padding:18px 0 28px}

@media (max-width:640px){
  body{font-size:16.5px}
  .sheet{padding:22px 16px 28px 30px;margin-top:16px;background:
    linear-gradient(90deg,transparent 0 20px,var(--margin) 20px 21px,transparent 21px),
    repeating-linear-gradient(180deg,transparent 0 31px,var(--rule) 31px 32px);background-color:#fff}
  .sheet::before{display:none}
  .sheet-head{gap:14px}
  .stamp{width:64px;height:72px}
  .stamp .num{font-size:27px}
  .stamp .ring{left:12px}.stamp .ring.r2{right:12px}
  h2{font-size:22px}
}