/*
Theme Name: Mosquito Almanac Field Guide
Description: The custom field-guide design for the Mosquito Almanac reference site. A standalone theme: warm paper, botanical pine, amber and teal accents, editorial serif display, specimen-label detailing, and a two-track article layout. See STYLE-GUIDE.md.
Author: Mosquito Almanac
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: mosquito-field-guide
*/

:root{
  --paper:#F4EFE1; --paper-2:#EAE3D0; --ink:#1C1E1A; --ink-soft:#4A4E45;
  --pine:#1F4A3D; --pine-deep:#122B22; --amber:#C8862B; --teal:#2C6E71; --teal-link:#245C5F;
  --risk-high:#B23A2E; --rule:#D8CFB6; --on-pine:#EFEADC; --on-pine-soft:#B9C7BC;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"SFMono-Regular","Cascadia Code",Menlo,Consolas,"Liberation Mono",monospace;
  --maxw:1180px;
}
@media (prefers-color-scheme: dark){:root{
  --paper:#16180F; --paper-2:#1E2117; --ink:#ECE7D8; --ink-soft:#A9AC9C;
  --pine:#234E40; --pine-deep:#0E1F18; --amber:#E0A548; --teal:#5AA6A8; --teal-link:#7CC0C2;
  --rule:#33372A; --on-pine:#ECE7D8; --on-pine-soft:#A9BBAE;
}}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:1.06rem;line-height:1.72;-webkit-font-smoothing:antialiased;}
img{max-width:100%;height:auto;}
a{color:var(--teal-link);text-underline-offset:3px;}
h1,h2,h3,h4{font-family:var(--serif);text-wrap:balance;margin:0 0 .4em;line-height:1.15;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.label{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--amber);outline-offset:2px;}
.skip{position:absolute;left:-9999px;top:0;background:var(--amber);color:#14100a;padding:10px 16px;z-index:100;font-weight:650;border-radius:0 0 4px 0;}
.skip:focus{left:0;}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:40;background:var(--pine-deep);border-bottom:1px solid rgba(255,255,255,.09);}
.site-header .bar{display:flex;align-items:center;gap:20px;height:62px;}
.brand{display:flex;align-items:center;gap:10px;color:var(--on-pine);text-decoration:none;font-family:var(--serif);font-size:1.28rem;font-weight:700;letter-spacing:.01em;white-space:nowrap;}
.brand svg{width:26px;height:26px;display:block;flex:0 0 auto;}
.site-header nav{margin-left:auto;display:flex;gap:20px;flex-wrap:wrap;}
.site-header nav a{color:var(--on-pine-soft);text-decoration:none;font-size:.92rem;font-weight:500;}
.site-header nav a:hover{color:var(--amber);}
.pill{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--on-pine-soft);border:1px solid rgba(255,255,255,.2);padding:5px 9px;border-radius:3px;}
.menu-toggle{display:none;background:none;border:1px solid rgba(255,255,255,.25);color:var(--on-pine);border-radius:3px;padding:6px 10px;font-size:.85rem;cursor:pointer;margin-left:auto;}

/* ---------- Hero (front page) ---------- */
.hero{background:radial-gradient(120% 90% at 85% -10%,rgba(44,110,113,.35),transparent 60%),var(--pine-deep);color:var(--on-pine);border-bottom:1px solid rgba(255,255,255,.08);position:relative;overflow:hidden;}
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:34px 34px;mask-image:radial-gradient(120% 100% at 50% 0%,#000 55%,transparent 100%);pointer-events:none;}
.hero-inner{position:relative;padding:72px 0 78px;max-width:60ch;}
.hero .eyebrow{color:var(--amber);font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:20px;display:flex;align-items:center;gap:10px;}
.hero .eyebrow::before{content:"";width:26px;height:1px;background:var(--amber);}
.hero h1{font-size:clamp(2.4rem,5.4vw,3.9rem);line-height:1.05;letter-spacing:-.01em;margin-bottom:20px;}
.hero h1 em{font-style:italic;color:var(--amber);}
.hero .lede{color:var(--on-pine-soft);font-size:1.15rem;margin-bottom:26px;}
.hero .trust{display:flex;flex-wrap:wrap;gap:8px 20px;color:var(--on-pine-soft);font-size:.86rem;}
.hero .trust span{display:inline-flex;align-items:center;gap:7px;}
.hero .trust .dot{width:6px;height:6px;border-radius:50%;background:var(--teal);}

/* ---------- Cluster grid ---------- */
.section{padding:70px 0;}
.section-head{max-width:60ch;margin-bottom:38px;}
.section-head .label{display:block;margin-bottom:12px;color:var(--teal);}
.section-head h2{font-size:clamp(1.7rem,3.2vw,2.3rem);}
.section-head p{color:var(--ink-soft);margin:.3em 0 0;}
.cluster-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.cluster-card{display:block;text-decoration:none;color:inherit;background:var(--paper-2);border:1px solid var(--rule);border-radius:5px;padding:22px 20px;transition:transform .15s,border-color .15s,box-shadow .15s;}
.cluster-card:hover{transform:translateY(-3px);border-color:var(--pine);box-shadow:0 8px 24px rgba(20,43,34,.10);}
.cluster-card .idx{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;color:var(--ink-soft);text-transform:uppercase;}
.cluster-card h3{font-size:1.25rem;margin:10px 0 8px;color:var(--pine);}
.cluster-card p{color:var(--ink-soft);font-size:.92rem;margin:0;}
.band{background:var(--paper-2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);}
.band .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;}
.band .cell .k{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--amber);display:block;margin-bottom:10px;}
.band .cell h3{font-size:1.1rem;font-family:var(--sans);font-weight:650;margin-bottom:6px;}
.band .cell p{color:var(--ink-soft);font-size:.95rem;margin:0;}

/* ---------- Article ---------- */
.article-head{background:var(--pine-deep);color:var(--on-pine);border-bottom:1px solid rgba(255,255,255,.08);padding:30px 0 34px;}
.crumb{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--on-pine-soft);margin-bottom:16px;}
.crumb a{color:var(--on-pine-soft);text-decoration:none;}
.crumb a:hover{color:var(--amber);}
.article-head h1{font-size:clamp(2rem,4.4vw,3.1rem);line-height:1.06;letter-spacing:-.01em;color:var(--on-pine);}
.specimen{display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:18px;}
.tag{font-family:var(--mono);font-size:.68rem;letter-spacing:.04em;padding:5px 10px;border-radius:3px;border:1px solid rgba(255,255,255,.2);color:var(--on-pine-soft);}
.tag.amber{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 45%,transparent);}
.layout{display:grid;grid-template-columns:1fr 250px;gap:52px;padding:44px 0 30px;align-items:start;}
.doc{min-width:0;}
.doc>*{margin:0 0 1.1em;}
.doc p,.doc li{max-width:68ch;}
.doc h2{font-size:1.65rem;margin:1.7em 0 .5em;padding-top:1.1em;border-top:1px solid var(--rule);scroll-margin-top:80px;}
.doc h3{font-size:1.2rem;font-family:var(--sans);font-weight:650;margin:1.4em 0 .3em;}
.doc a{color:var(--teal-link);}
.doc img{border:1px solid var(--rule);border-radius:3px;}
.doc figure{margin:1.4em 0;}
.doc figcaption{font-family:var(--mono);font-size:.72rem;letter-spacing:.02em;color:var(--ink-soft);padding-top:8px;}
.doc blockquote{border-left:3px solid var(--amber);background:var(--paper-2);border-radius:4px;padding:16px 20px;margin:1.2em 0;color:var(--ink-soft);font-style:normal;}
.doc ul{list-style:none;padding-left:0;}
.doc ul li{position:relative;padding-left:26px;margin-bottom:.5em;}
.doc ul li::before{content:"";position:absolute;left:4px;top:.62em;width:8px;height:2px;background:var(--amber);}
.doc ol{padding-left:1.4em;}
.doc ol li{margin-bottom:.5em;}
.doc table{width:100%;border-collapse:collapse;font-size:.95rem;overflow-x:auto;display:block;}
.doc th,.doc td{border:1px solid var(--rule);padding:.55em .8em;text-align:left;vertical-align:top;}
.doc thead th{background:var(--paper-2);font-family:var(--mono);font-size:.76rem;letter-spacing:.04em;text-transform:uppercase;}
/* sticky rail */
.rail{position:sticky;top:80px;align-self:start;}
.rail-box{border:1px solid var(--rule);border-radius:6px;background:var(--paper-2);padding:16px 18px;}
.rail-box h4{margin:0 0 12px;font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);}
.rail .toc{list-style:none;margin:0;padding:0;}
.rail .toc li{margin:0;padding:0;}
.rail .toc a{display:block;padding:5px 0 5px 12px;color:var(--ink-soft);text-decoration:none;font-size:.9rem;border-left:2px solid transparent;margin-left:-2px;}
.rail .toc a:hover,.rail .toc a.active{color:var(--ink);border-left-color:var(--amber);}
.rail::before{content:none;}

/* generic pages / archives */
.page-body{padding:40px 0;}
.archive-list{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
.archive-list a{display:block;border:1px solid var(--rule);border-radius:5px;padding:16px 18px;background:var(--paper-2);text-decoration:none;color:inherit;}
.archive-list a:hover{border-color:var(--pine);}
.archive-list h3{font-size:1.1rem;margin:0 0 .3em;color:var(--pine);}
.archive-list p{margin:0;color:var(--ink-soft);font-size:.9rem;}

/* ---------- Footer ---------- */
.site-footer{background:var(--pine-deep);color:var(--on-pine-soft);padding:48px 0 30px;margin-top:40px;}
.site-footer .fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:30px;margin-bottom:36px;}
.site-footer .brand{color:var(--on-pine);margin-bottom:12px;}
.site-footer .about{font-size:.9rem;max-width:34ch;}
.site-footer h4{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--on-pine);margin:0 0 12px;}
.site-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.site-footer a{color:var(--on-pine-soft);text-decoration:none;font-size:.9rem;}
.site-footer a:hover{color:var(--amber);}
.site-footer .fbar{border-top:1px solid rgba(255,255,255,.1);padding-top:20px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.8rem;}
.site-footer .fbar .disc{max-width:62ch;}

@media (max-width:900px){
  .site-header nav{display:none;}
  .site-header nav.open{display:flex;position:absolute;top:62px;left:0;right:0;background:var(--pine-deep);flex-direction:column;padding:14px 24px;gap:14px;border-bottom:1px solid rgba(255,255,255,.1);}
  .menu-toggle{display:inline-block;}
  .cluster-grid{grid-template-columns:1fr 1fr;}
  .band .grid3{grid-template-columns:1fr;gap:22px;}
  .layout{grid-template-columns:1fr;gap:20px;}
  .rail{position:static;order:-1;}
  .archive-list{grid-template-columns:1fr;}
  .site-footer .fgrid{grid-template-columns:1fr 1fr;}
}
@media (max-width:560px){.cluster-grid{grid-template-columns:1fr;}.site-footer .fgrid{grid-template-columns:1fr;}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}.cluster-card:hover{transform:none;}}