/* The shared shell of the webwelt: one typeface, one paper, one header, one footer.
   Markup comes from tools/shell.py (TAGLINE lives there). Every page links this file before its own styles. */
@font-face{font-family:Newsreader;src:url(fonts/newsreader-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
:root{--paper:#f2efe7;--shell-ink:#231e16;--shell-muted:#675f52;--shell-cream:#fff4d6;--shell-saffron:#f4b829;
  --shell-serif:Newsreader,"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --shell-mono:ui-monospace,"SF Mono",Menlo,Consolas,"DejaVu Sans Mono",monospace}

/* header: mark + name | tagline | links (Home board always last, at the right) */
.shell{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"id tag nav";align-items:center;gap:4px 18px;width:100%;margin:0 0 14px;color:var(--shell-ink)}
.shell-id{grid-area:id;display:flex;align-items:center;gap:10px;min-width:0}
.shell-brand{display:inline-flex;align-items:center;gap:10px;margin:0;color:var(--shell-ink);text-decoration:none;
  font:400 28px/1.1 var(--shell-serif);font-variant:small-caps;letter-spacing:.04em;white-space:nowrap}
.shell-mark{width:42px;height:42px;flex:none;display:block}
.shell-tag{grid-area:tag;margin:0;font:400 16px/1.3 var(--shell-serif);color:var(--shell-muted);min-width:0}
.shell-nav{grid-area:nav;display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:2px 18px}
.shell-nav a{display:inline-block;padding:6px 0;font:700 12px/1.2 var(--shell-mono);letter-spacing:.06em;text-transform:uppercase;
  color:var(--shell-muted);text-decoration:underline dotted;text-underline-offset:4px;white-space:nowrap}
.shell-nav a:hover,.shell-nav a[aria-current=page]{color:var(--shell-ink)}
.shell a:focus-visible,.shell button:focus-visible,.shell-foot a:focus-visible{outline:2px solid var(--shell-ink);outline-offset:3px;border-radius:2px}
@media (max-width:640px){
  .shell{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"id nav" "tag tag";gap:2px 12px}
  .shell-brand{font-size:24px;gap:8px}
  .shell-mark{width:36px;height:36px}
  .shell-tag{font-size:15px}
  .shell-nav{flex-direction:column;align-items:flex-end;gap:0}
}

/* the room name pill: cream with an ink border, like the board labels */
.pill.room{display:inline-flex;align-items:center;background:var(--shell-cream);color:var(--shell-ink);border:1.6px solid var(--shell-ink);border-radius:999px;
  padding:3px 12px 2px;font:800 11.5px/1.5 var(--shell-mono);letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;text-decoration:none}
a.pill.room:hover,a.pill.room:focus-visible{background:var(--shell-saffron)}

/* footer: quiet, under a hand-drawn rule */
.shell-foot{position:relative;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 22px;
  width:100%;max-width:var(--shell-w,none);margin:32px auto 0;padding:18px 0 4px;font:400 15px/1.5 var(--shell-serif);color:var(--shell-muted)}
.shell-foot::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='6' preserveAspectRatio='none' viewBox='0 0 400 6'%3E%3Cpath d='M0 3 C40 1 80 5 130 3 S220 1 270 3 S360 5 400 3' fill='none' stroke='%23231e16' stroke-opacity='.7' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.shell-foot nav{display:flex;flex-wrap:wrap;gap:2px 18px}
.shell-foot a{display:inline-block;padding:3px 0;color:var(--shell-ink);text-underline-offset:3px}

/* visually hidden, for headings and lists that only screen readers need */
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}