/* Tokens generated from resources/design/tokens.edn by `clojure -M:tokens`. */
/* @design tokens fonts=lounge themes=attribute begin */
@font-face{font-family:"Bricolage Grotesque";font-weight:200 800;font-stretch:75% 100%;font-display:swap;src:url(https://why.n0.beer/fonts/bricolage-grotesque-var.woff2) format("woff2")}
@font-face{font-family:"Fragment Mono";font-weight:400;font-display:swap;src:url(https://why.n0.beer/fonts/fragment-mono-400.woff2) format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url(https://why.n0.beer/fonts/instrument-serif-400-italic.woff2) format("woff2")}
/* Breakpoints, literal because custom properties cannot appear in media queries: (max-width:599px) (min-width:600px) (max-width:899px) (min-width:900px) (min-width:1180px) */
:root{
  color-scheme:dark;
  --sans:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --mono:"Fragment Mono","SF Mono",Menlo,Consolas,monospace;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --cut-weight:800;
  --cut-stretch:75%;
  --cut-tracking:-.012em;
  --leading-display:.95;
  --leading-statement:1.02;
  --type-caption:12.5px;
  --type-small:15px;
  --type-read:17px;
  --type-lead:21px;
  --type-head:26px;
  --type-title:34px;
  --type-statement:clamp(30px,1.2rem + 3vw,52px);
  --type-display:clamp(48px,1.5rem + 5.5vw,88px);
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:72px;
  --margin:clamp(20px,4vw,48px);
  --layer-page:0;
  --layer-drawer:10;
  --layer-pane:20;
  --layer-veil:30;
  --layer-toast:40;
  --motion-color:120ms;
  --motion-sheet:200ms;
  --ground:#43604d;
  --deep:#2d4638;
  --plate:#2d4638;
  --well:#2d4638;
  --ink:#f2f4ee;
  --mute:#d3e0d6;
  --on-plate:#f2f4ee;
  --rule:rgba(242,244,238,.30);
  --guide:rgba(242,244,238,.14);
  --veil:rgba(45,70,56,.75);
  --lime:#dcff4f;
  --on-lime:#1f2f25;
  --lime-text:#dcff4f;
}
:root[data-theme="light"]{
  color-scheme:light;
  --ground:#f2f4ee;
  --deep:#e3e8df;
  --well:#e3e8df;
  --ink:#2d4638;
  --mute:#516a59;
  --rule:rgba(45,70,56,.30);
  --guide:rgba(45,70,56,.14);
  --veil:rgba(45,70,56,.45);
  --lime-text:#3f5a48;
}
/* @design tokens end */
/* @design dither parts=edge themes=attribute begin */
:root{
  --edge:image-set(url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAAAOAQMAAABD8IGAAAAABlBMVEUAAADy9O4kRfW3AAAAAXRSTlMAQObYZgAAAMFJREFUeNrFybFKQlEcgPHvHM/wTxzOzaUp/oXtZbgf4Qo2uziLT1BTtBwjnHyEBkFwDNfWhiYf4L6BOOl2r6LoEIJv0G/7+MhfpV3uTYHWV775BdevDzSpcfUzceOyCPLw+DnPRs7ZYZJItdRdPVeyt6JY79aL/fblO78+NIpsB6l63A3G+LC8u1eC2HAhQelYbg0KWDt7kibIJQCkSgwoCO9WgAjKB+IBcQBqvAIWHzmJgI+a4v7aWDznAnCa/+gIyvwqQEPLlqwAAAAASUVORK5CYII=") 1x,url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAYAAAAAcAQMAAABS2vpwAAAABlBMVEUAAADy9O4kRfW3AAAAAXRSTlMAQObYZgAAANBJREFUeNrtkjFqxFAQQx9RK/hXEWxr8NUHfmvIVQzbLjjFt42LEPCmC1E1M4IR0gzbPHcqxTJ5mQAgj+W1zVtfR58pzSUjOR/chWr10sgCC0UB1dRaX9f1WbUSgmuSJErtvsKUMhGNXimPYZE8a7IFMqLIYPp9hcQIIBYgJMKr+9EwECgc6FQw9xXGIhuBj6HxJ+lUNDzppO4rDBfsOZwpUcbU2e5cvXFpSmd1hA0G6eoJ7TrveLiIHf9FYZJxhuvj4Te+9af8vil/5+Effxhf3Vs73Z4izzUAAAAASUVORK5CYII=") 2x);
}
:root[data-theme="light"]{
  --edge:image-set(url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAAAOAQMAAABD8IGAAAAABlBMVEUAAAAtRjgb0zxhAAAAAXRSTlMAQObYZgAAAMFJREFUeNrFybFKQlEcgPHvHM/wTxzOzaUp/oXtZbgf4Qo2uziLT1BTtBwjnHyEBkFwDNfWhiYf4L6BOOl2r6LoEIJv0G/7+MhfpV3uTYHWV775BdevDzSpcfUzceOyCPLw+DnPRs7ZYZJItdRdPVeyt6JY79aL/fblO78+NIpsB6l63A3G+LC8u1eC2HAhQelYbg0KWDt7kibIJQCkSgwoCO9WgAjKB+IBcQBqvAIWHzmJgI+a4v7aWDznAnCa/+gIyvwqQEPLlqwAAAAASUVORK5CYII=") 1x,url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAYAAAAAcAQMAAABS2vpwAAAABlBMVEUAAAAtRjgb0zxhAAAAAXRSTlMAQObYZgAAANBJREFUeNrtkjFqxFAQQx9RK/hXEWxr8NUHfmvIVQzbLjjFt42LEPCmC1E1M4IR0gzbPHcqxTJ5mQAgj+W1zVtfR58pzSUjOR/chWr10sgCC0UB1dRaX9f1WbUSgmuSJErtvsKUMhGNXimPYZE8a7IFMqLIYPp9hcQIIBYgJMKr+9EwECgc6FQw9xXGIhuBj6HxJ+lUNDzppO4rDBfsOZwpUcbU2e5cvXFpSmd1hA0G6eoJ7TrveLiIHf9FYZJxhuvj4Te+9af8vil/5+Effxhf3Vs73Z4izzUAAAAASUVORK5CYII=") 2x);
}
/* @design dither end */
*{box-sizing:border-box}
[hidden]{display:none!important}
/* Grounds are flat; the dither only marks things (the Static edge). */
html{background:var(--ground);color:var(--ink);font:400 var(--type-read)/1.5 var(--sans);font-optical-sizing:auto;font-synthesis:none;font-variant-numeric:tabular-nums;-webkit-text-size-adjust:100%}
body{margin:0;min-width:280px}
img{display:block;max-width:100%;height:auto}
/* Navigate: a 1px underline at .18em. */
a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--mute);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{text-decoration-color:var(--ink)}
button,input,select{font:inherit;color:inherit;background:none;border:0;border-radius:0}
button{cursor:pointer}
button:disabled{color:var(--mute);cursor:not-allowed}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
::selection{background:var(--ink);color:var(--ground)}
h1,h2,h3,h4,p,figure,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
h2{font:var(--cut-weight) var(--type-head)/var(--leading-statement) var(--sans);font-stretch:var(--cut-stretch);letter-spacing:var(--cut-tracking)}
/* The wordmark is a heading, never a link-looking link. */
.mast{margin:0;font:var(--cut-weight) var(--type-title)/1 var(--sans);font-stretch:var(--cut-stretch);letter-spacing:var(--cut-tracking);text-decoration:none;color:var(--ink)}
.mast a{text-decoration:none;color:inherit}
.mast .slug{margin-left:.3em;font-weight:400;font-stretch:90%;letter-spacing:0}
.sign{font:400 var(--type-small)/1.5 var(--sans);color:var(--mute)}
.art-plate{display:block;background:var(--plate);aspect-ratio:1;overflow:hidden}
.art-plate img{display:block;width:100%;height:100%;aspect-ratio:1;object-fit:cover}
.art-recovery{position:relative}
.art-status{position:absolute;inset:0;display:grid;place-items:center;padding:var(--space-1);color:var(--on-plate);background:var(--plate);text-align:center;font:400 var(--type-caption)/1.45 var(--mono)}
.empty{margin:var(--space-4) 0;color:var(--mute)}
.vh{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Static: while a bulletin leads the news front page it tops the lounge and the
   collection as it tops the news log, on the deep band under the still edge. */
.static-band{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-1) var(--space-4);align-items:baseline;padding:calc(14px + var(--space-3)) var(--pad,var(--space-5)) var(--space-3);border-bottom:1px solid var(--rule);background:var(--edge) repeat-x left top,var(--deep)}
.static-band time{font:400 var(--type-caption)/1.5 var(--mono);color:var(--ink);white-space:nowrap}
.static-band .static-h{font:var(--cut-weight) var(--type-lead)/1.15 var(--sans);font-stretch:var(--cut-stretch);letter-spacing:var(--cut-tracking);overflow-wrap:anywhere}
.static-band .static-h a{text-decoration-color:var(--rule)}
.static-band .static-h a:hover{text-decoration-color:var(--ink)}
.static-chip{display:inline-block;margin-right:var(--space-2);padding:var(--space-1) var(--space-2);background:var(--lime);color:var(--on-lime);font:600 var(--type-small)/1 var(--sans);font-stretch:100%;letter-spacing:0;vertical-align:.18em}
.static-band .static-meta{grid-column:2;font-size:var(--type-small);color:var(--mute)}
@media (max-width:599px){.static-band{grid-template-columns:minmax(0,1fr)}.static-band .static-meta{grid-column:1}}
@media (forced-colors:active){.static-chip{forced-color-adjust:none;background:CanvasText;color:Canvas}}
@media (prefers-reduced-motion:no-preference){a,button{transition:color var(--motion-color),background-color var(--motion-color)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}