/* moosemindworks.com, 2026.10.17: Forest.
   Matt's own brief from April and May 2026: calm and thoughtful, sleek and minimal, sharp geometric
   type, deep forest greens, a light/dark toggle, the moose as the mark.
   Palette: Forest #2D4A1E, Canopy #4E7A35, Bark #7C5C3A, Fawn #C4A882, Fog #F2EDE4.
   Dark is the default; [data-theme="light"] on <html> switches. The accent is Fawn lifted to #CEB38D
   so small text passes AA. Contrast on dark: fog 8.5:1, --ink-2 6.5:1, accent 5.0:1.
   On light: ink 12.5:1, --ink-2 6.1:1, bark 5.6:1, --ink-3 4.6:1. */
:root{
  --forest:#2D4A1E;--canopy:#4E7A35;--bark:#7C5C3A;--fawn:#C4A882;--fog:#F2EDE4;
  --font:Urbanist,"Futura","Century Gothic","Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --side:clamp(18px,5vw,72px);

  --bg:#2D4A1E;--bg-2:#253f18;--bg-3:#1f3614;--ink:#F2EDE4;--ink-2:#cfd3c2;--ink-3:#a3ab95;
  --line:rgba(196,168,130,.32);--line-2:rgba(196,168,130,.55);--accent:#CEB38D;--on-accent:#2D4A1E;--mark:#CEB38D;
  --night:#16240f;--night-2:#1d3014;

  /* names the tool pages' own styles use */
  --paper:var(--bg);--wash:var(--bg-2);--wash-2:var(--bg-3);--rule:var(--line);--rule-2:var(--line-2);
  --grey:var(--ink-2);--grey-2:var(--ink-3);--night-rule:#33492a;--night-ink:#F2EDE4;--night-ink-2:#bfc4b2;
  --t-micro:12px;--t-small:14px;--t-body:17px;--t-lead:20px;--t-h3:22px;
}
[data-theme="light"]{
  --bg:#f7f5f0;--bg-2:#ecebe3;--bg-3:#e2e1d6;--ink:#1f3315;--ink-2:#55604c;--ink-3:#6a7262;
  --line:rgba(45,74,30,.2);--line-2:rgba(45,74,30,.4);--accent:#7C5C3A;--on-accent:#f7f5f0;--mark:#7C5C3A;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-underline-offset:4px;text-decoration-thickness:1px}
a:hover{color:var(--accent)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
::selection{background:var(--accent);color:var(--on-accent)}
[id]{scroll-margin-top:24px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:var(--side);top:-60px;z-index:50;background:var(--accent);color:var(--on-accent);padding:8px 12px}
.skip:focus{top:8px}
.small{font-size:14px}
.muted,.grey{color:var(--ink-2)}

/* header */
.top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px var(--side);font-size:15px;letter-spacing:.04em}
.top a{text-decoration:none}
.top nav{display:flex;gap:26px;align-items:center}
.top nav a[aria-current]{color:var(--accent)}
.brand{display:flex;gap:10px;align-items:center;font-weight:600}
.brand svg{width:26px;height:26px;fill:var(--mark);flex:none}
.toggle{width:44px;height:24px;border-radius:12px;border:1px solid var(--accent);background:none;position:relative;cursor:pointer;flex:none}
.toggle::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--accent);transition:transform .25s}
[data-theme="light"] .toggle::after{transform:translateX(20px)}
@media(max-width:560px){.top{padding:16px var(--side)}.brand span,.top .hide-s{display:none}.top nav{gap:16px}}

/* buttons and controls */
.cta{display:flex;gap:12px;flex-wrap:wrap}
.cta a,.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;text-decoration:none;font-weight:600;
  letter-spacing:.04em;background:var(--accent);color:var(--on-accent);border:0;cursor:pointer}
.cta a+a,.btn.ghost{background:none;color:var(--ink);box-shadow:inset 0 0 0 1px var(--accent)}
.cta a:hover,.btn:hover{filter:brightness(1.08);color:var(--on-accent)}
.cta a+a:hover,.btn.ghost:hover{color:var(--accent)}
.pbtn,.tog,.ctl{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:38px;padding:0 12px;border:1px solid var(--line-2);
  background:var(--bg);color:var(--ink);font-size:15px;line-height:1.1;cursor:pointer;border-radius:0;white-space:nowrap;text-decoration:none}
.pbtn:hover,.tog:hover,.ctl:hover{border-color:var(--accent);color:var(--ink)}
.tog[aria-pressed="true"],.ctl.on,.pbtn.on{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.pbtn.go{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}
.pbtn.go:hover{filter:brightness(1.08)}
.pbtn:disabled,.ctl:disabled{opacity:.4;cursor:default}
select.ctl,select{appearance:none;-webkit-appearance:none;padding-right:28px;border-radius:0;background-color:var(--bg);background-repeat:no-repeat;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 15px) 50%,calc(100% - 10px) 50%;background-size:5px 5px,5px 5px}
input[type=range]{accent-color:var(--accent)}
input[type=checkbox]{accent-color:var(--accent);width:16px;height:16px}
.ctl-label{font-size:14px;color:var(--ink-2);margin-right:2px}
.ctl-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px}
.ctl-group{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.actions{display:flex;flex-wrap:wrap;gap:10px}

/* home */
.hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;min-height:min(calc(100vh - 150px),780px);
  padding:0 var(--side);gap:24px}
.hero h1{font-weight:300;font-size:clamp(56px,7.6vw,128px);line-height:.95;letter-spacing:-.03em}
.hero h1 b{font-weight:600;display:block}
.hero p{margin:28px 0 30px;font-size:clamp(18px,1.6vw,22px);line-height:1.45;max-width:36ch;color:var(--ink-2)}
.moose{justify-self:end;width:min(36vw,520px)}
.moose svg{width:100%;height:auto;fill:var(--mark)}
main>.sec{padding:clamp(64px,9vw,128px) var(--side);border-top:1px solid var(--line)}
main>.sec>h2,.kicker{font-size:15px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
main>.sec>h2{margin-bottom:28px}
.proj{display:grid;gap:clamp(48px,6vw,88px)}
.p{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(24px,4vw,64px);align-items:center;text-decoration:none}
.p:nth-child(even){grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.p:nth-child(even) .pic{order:2}
.pic{aspect-ratio:16/10;overflow:hidden;background:var(--bg-2)}
.pic img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.pic.natural{aspect-ratio:auto;background:#fff}
.pic.natural img{height:auto}
.p:hover .pic img{transform:scale(1.03)}
.p:hover{color:inherit}
.p .num{font-size:15px;color:var(--accent);letter-spacing:.1em}
.p h3{font-size:clamp(32px,3.6vw,52px);font-weight:300;letter-spacing:-.02em;line-height:1.05;margin-top:6px}
.p p{margin-top:14px;color:var(--ink-2);max-width:40ch}
.p .go{margin-top:18px;display:inline-block;font-weight:600;letter-spacing:.04em;border-bottom:1px solid var(--accent);padding-bottom:2px}
.p:hover .go{color:var(--accent)}
.outro{padding:clamp(64px,9vw,120px) var(--side) clamp(48px,6vw,80px);border-top:1px solid var(--line);display:grid;
  grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:end}
.outro p{font-size:clamp(32px,4vw,60px);font-weight:300;letter-spacing:-.02em;line-height:1.05;max-width:16ch}
.outro a{font-weight:600;text-decoration:none;color:var(--accent)}
.outro svg{width:120px;fill:var(--mark)}

/* project pages */
.p-head{padding:clamp(40px,6vw,96px) var(--side) clamp(40px,5vw,72px);max-width:1100px}
.back{display:inline-block;margin-bottom:28px;font-size:15px;color:var(--ink-2);text-decoration:none}
.back:hover{color:var(--accent)}
.p-head h1{font-weight:300;font-size:clamp(48px,6.4vw,104px);line-height:.98;letter-spacing:-.03em;margin-top:10px}
.p-head .lede{margin-top:24px;font-size:clamp(19px,1.8vw,23px);line-height:1.45;max-width:46ch;color:var(--ink-2)}
.p-head .lede+.lede{margin-top:14px}
.tool{padding:clamp(40px,5vw,64px) var(--side) clamp(64px,9vw,120px);border-top:1px solid var(--line)}
.tool-top{display:grid;gap:8px 40px;margin-bottom:22px}
@media(min-width:900px){.tool-top{grid-template-columns:minmax(260px,26%) minmax(0,1fr);align-items:baseline}}
.tool-top h2{font-weight:300;font-size:clamp(28px,2.8vw,40px);line-height:1.1;letter-spacing:-.015em}
.tool-top p{color:var(--ink-2);max-width:64ch}
/* notes: a label on the left, prose on the right */
.count{display:grid;grid-template-columns:minmax(0,1fr);gap:12px 40px;padding:clamp(48px,6vw,88px) var(--side);border-top:1px solid var(--line)}
@media(min-width:900px){.count{grid-template-columns:minmax(260px,26%) minmax(0,1fr)}}
.count>*{min-width:0}
.n.lbl-n{font-size:14px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);padding-top:4px}
.prose p,.prose li{max-width:66ch}
.prose p+p,.prose p+ul,.prose ul+p{margin-top:1em}
.prose ul{padding-left:1.1em}
.prose strong{font-weight:600}
.prose code,code{font-family:var(--mono);font-size:.86em;background:var(--bg-2);padding:.05em .3em}
.note-split{display:grid;gap:28px}
@media(min-width:1200px){.note-split{grid-template-columns:minmax(0,1fr) 300px;align-items:start}}
.aside{border-left:2px solid var(--accent);padding-left:18px;max-width:60ch}
.aside .label{display:block;color:var(--accent);font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px}
.spec{max-width:820px}
.spec>div{display:grid;gap:2px 24px;padding:10px 0;border-bottom:1px solid var(--line)}
.spec>div:first-child{border-top:1px solid var(--line)}
@media(min-width:700px){.spec>div{grid-template-columns:130px minmax(0,1fr)}}
.spec dt{font-size:14px;color:var(--accent)}
.spec dd{font-size:15px;color:var(--ink-2)}
.pager{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:clamp(48px,6vw,80px) var(--side);border-top:1px solid var(--line)}
.pager a{display:flex;flex-direction:column;text-decoration:none;font-size:clamp(28px,3.4vw,48px);font-weight:300;letter-spacing:-.02em;line-height:1.1}
.pager a span{font-size:14px;color:var(--accent);letter-spacing:.1em;text-transform:uppercase;font-weight:600;margin-bottom:6px}
.pager a+a{text-align:right;align-items:flex-end}

/* footer */
.foot{padding:28px var(--side) 36px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 28px;
  font-size:14px;color:var(--ink-2)}
.foot nav{display:flex;flex-wrap:wrap;gap:6px 18px}
.foot a{text-decoration:none}
.foot a:hover{color:var(--accent)}

@media(max-width:900px){
  .hero{grid-template-columns:1fr;min-height:0;padding-top:24px;padding-bottom:56px}
  .moose{order:-1;justify-self:start;width:46vw}
  .p,.p:nth-child(even){grid-template-columns:1fr}
  .p:nth-child(even) .pic{order:0}
  .outro{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
@media print{
  :root,[data-theme]{--bg:#fff;--bg-2:#f3f3f3;--ink:#111;--ink-2:#444;--line:#ccc;--accent:#2D4A1E}
  .top,.foot,.skip,.no-print,.pager{display:none!important}
}