/* JetBrains Mono, self-hosted — no third-party requests. One variable file
   covers every weight the page uses (400 / 700 / 800). */
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:100 800;
  font-display:swap;
  src:url(fonts/jetbrains-mono-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:100 800;
  font-display:swap;
  src:url(fonts/jetbrains-mono-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,
    U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,
    U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ── tokens ───────────────────────────────────────────────────────────── */
:root{
  --paper:#f2eff7;
  --plate:#fffdff;
  --ink:#171320;
  --dim:#6b6479;
  --line:#171320;
  /* One purple and one pink for the whole site, in both themes. --shade is
     mixed from --acc so even the drop shadows stay in the same hue family. */
  --acc:#b066ff;
  --hot:#ff0066;
  /* The same two hues, dark enough to carry text. Both brand colours are
     pitched for a near-black sky, where they clear 5:1 against the page; on
     paper they fall to 3.0 and 3.4, which is under the 4.5 small text needs
     and under the 3.0 a focus ring needs. --acc and --hot stay the pixel-art
     colours — fills, rules, the packet, the sprites. Anything that is read,
     anything white sits on, and every focus ring takes the -ink pair, which
     holds the hue at 5.7 and 5.2. In dark they resolve back to the originals. */
  --acc-ink:#8325d9;
  --hot-ink:#c70050;
  --shade:color-mix(in srgb,var(--acc) 20%,var(--paper));
  --step:8px;
  /* The pixel plate: a cross of four shadows, which leaves the corners
     notched. Kept as tokens because every panel, card and button needs it —
     append to the list for a drop shadow, e.g.
     `box-shadow: var(--edge4), 8px 8px 0 0 var(--shade)`. */
  --edge4:0 -4px 0 0 var(--line), 0 4px 0 0 var(--line),
          -4px 0 0 0 var(--line), 4px 0 0 0 var(--line);
  --edge3:0 -3px 0 0 var(--line), 0 3px 0 0 var(--line),
          -3px 0 0 0 var(--line), 3px 0 0 0 var(--line);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --paper:#0b0910;
  --plate:#171320;
  --ink:#ece7f5;
  --dim:#8b839f;
  --line:#040308;
  --acc-ink:var(--acc);
  --hot-ink:var(--hot);
  --shade:color-mix(in srgb,var(--acc) 22%,var(--paper));
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0b0910;
    --plate:#171320;
    --ink:#ece7f5;
    --dim:#8b839f;
    --line:#040308;
    --acc-ink:var(--acc);
    --hot-ink:var(--hot);
    --shade:color-mix(in srgb,var(--acc) 22%,var(--paper));
    color-scheme:dark;
  }
}

*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--paper)}
body{
  font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  background:var(--paper);
  color:var(--ink);
  font-size:15px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Off-screen but still read aloud and still indexed — for the page's <h1>,
   which the design has no room to show. */
.vh{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

/* The brand purple is identical in both themes, so one rule covers both; the
   text on it is the dark paper rather than white, which the light theme's
   #fff would not clear. */
::selection{background:var(--acc);color:#0b0910}

/* First thing in the tab order, and out of sight until it has focus. Without
   it a keyboard visitor walks the whole HUD — two toggles, a language picker
   and a disclosure — before reaching a word of the page. It lands on the
   plate rather than over the sky, where the clouds move behind it. */
.skip{
  position:absolute;
  top:0;left:0;
  z-index:60;
  transform:translateY(-200%);
  padding:10px 16px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;
  background:var(--plate);
  color:var(--ink);
  box-shadow:var(--edge3), 4px 4px 0 0 var(--shade);
}
.skip:focus{transform:translateY(16px) translateX(16px)}
.skip:focus-visible{outline:3px solid var(--hot-ink);outline-offset:6px}
/* The skip target is a <main> the hero scrolls past, so leave the heading
   clear of the viewport edge once the jump lands. */
#content{scroll-margin-top:16px}


/* ── hero / sky ───────────────────────────────────────────────────────── */
.hero{
  position:relative;
  height:clamp(380px,68vh,620px);
  z-index:0;
}
.hero canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
}
/* Three animated layers, stacked around the HUD (z-index 2): clouds pass
   *behind* the "why location?" panel so its text stays readable, while rain
   and lightning still sweep across in front of it. */
#sky-back{z-index:0}
#sky-mid{z-index:1;pointer-events:none}
#sky-front{z-index:3;pointer-events:none}

/* Spans the whole hero, rather than being capped at the page measure like the
   content it sits over. The row inside is what carries the measure — which
   leaves the head's own right edge free for the language picker to pin to, in
   line with the sky panel below it. */
.hero-head{
  position:absolute;
  inset:0;
  z-index:2;
  padding:20px 24px 0;
  display:flex;
  flex-direction:column;
}

/* ── HUD ──────────────────────────────────────────────────────────────── */
.hud{
  /* 712px is the 760px measure less this padding, so the toggles line up with
     the paragraphs below them. */
  max-width:712px;
  margin-inline:auto;
  display:flex;
  flex-wrap:wrap;
  /* stretch, so every control on a row ends up the same height — the theme
     toggle is a bare glyph at the mobile breakpoint and would otherwise sit
     4px shorter than its neighbours. */
  align-items:stretch;
  gap:var(--step);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:700;
}

.pxbtn{
  font:inherit;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:7px 12px;
  background:var(--plate);
  color:var(--ink);
  border:0;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:8px;
  box-shadow:var(--edge3), 4px 4px 0 0 rgba(0,0,0,.22);
  transition:none;
}
/* Hover styling is gated on a real pointer throughout: on a touchscreen the
   state latches after a tap and leaves the control looking stuck. */
@media (hover:hover){
  .pxbtn:hover{background:var(--acc-ink);color:#fff}
}
.pxbtn:active{
  transform:translate(4px,4px);
  box-shadow:var(--edge3);
}
.pxbtn:focus-visible{outline:3px solid var(--hot-ink);outline-offset:6px}

/* ── language picker ──────────────────────────────────────────────────── */
/* margin-left:auto carries it to the right edge of the HUD row, away from the
   two toggles. The wrapper is the positioning context for the popup. */
.lang{position:relative;margin-left:auto}
/* Above the mobile breakpoint it leaves the row and pins to the hero's right
   edge instead, 16px in — the same inset the sky panel uses, so the two line
   up down the right side of the page. Absolute rather than fixed: it belongs
   to the hero and should leave with it, and a fixed copy would sit on top of
   the text at tablet widths, where the column reaches almost to the edge. */
@media (min-width:641px){
  .lang{position:absolute;top:20px;right:16px;margin:0}
}
.lang-btn{gap:6px}
.lang .caret{font-size:9px;line-height:1}
.lang-menu{
  position:absolute;
  top:calc(100% + 6px);right:0;
  z-index:5;
  min-width:100%;
  display:flex;
  flex-direction:column;
  background:var(--plate);
  box-shadow:var(--edge3), 4px 4px 0 0 rgba(0,0,0,.22);
}
.lang-menu[hidden]{display:none}
.lang-opt{
  font:inherit;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:7px 12px;
  border:0;
  cursor:pointer;
  text-align:left;
  white-space:nowrap;
  background:none;
  color:var(--ink);
}
.lang-opt[aria-pressed="true"]{color:var(--acc-ink)}
@media (hover:hover){
  .lang-opt:hover{background:var(--acc-ink);color:#fff}
}
/* Inset, because the option sits flush inside the panel's pixel border and an
   outset ring would be clipped by it. */
.lang-opt:focus-visible{outline:3px solid var(--hot-ink);outline-offset:-3px}

/* Both labels change length as they cycle ("Location: off" → "on",
   "Theme: weather" → "dark"), which would resize the button and shove its
   neighbour. Reserve the longest string in each. The font is monospace so
   `ch` is exact — but `ch` ignores letter-spacing, hence the second term. */
#loc-label,#theme-label{display:inline-block;text-align:left}
#loc-label{min-width:calc(13ch + 13 * 0.14em)}   /* "Location: off"  */
#theme-label{min-width:calc(14ch + 14 * 0.14em)} /* "Theme: weather" */

/* two-cell pixel switch */
.sw{display:inline-flex;width:22px;height:11px;box-shadow:0 0 0 2px currentColor}
.sw i{flex:1}
.pxbtn[aria-pressed="true"] .sw i:last-child{background:currentColor}
.pxbtn[aria-pressed="false"] .sw i:first-child{background:currentColor}

.hud-why{
  flex:1 1 100%;
  max-width:520px;
  margin-top:2px;
  padding:10px 12px;
  background:var(--plate);
  color:var(--dim);
  font-size:11px;
  font-weight:400;
  letter-spacing:.02em;
  text-transform:none;
  line-height:1.6;
  box-shadow:var(--edge3);
}
.hud-why b{color:var(--ink);font-weight:700}
.hud-why summary{cursor:pointer;color:var(--acc-ink);font-weight:700;list-style:none}
.hud-why summary::-webkit-details-marker{display:none}
.hud-why summary::before{content:"▸ ";font-size:9px}
.hud-why summary:focus-visible{outline:2px solid var(--hot-ink);outline-offset:3px}
.hud-why details[open] summary::before{content:"▾ "}
.hud-why p{margin-top:6px}
.hud-why.warn b{color:var(--hot-ink)}

/* ── page body ────────────────────────────────────────────────────────── */
main{
  position:relative;
  z-index:1;
  max-width:760px;
  /* content begins clear of the sky — no overlap into the hero */
  margin:0 auto;
  padding:72px 24px 0;
  display:flex;
  flex-direction:column;
  gap:88px;
}

h2{
  font-size:11px;
  font-weight:800;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--hot-ink);
  padding-bottom:10px;
  margin-bottom:26px;
  border-bottom:3px dashed color-mix(in srgb,var(--hot-ink) 45%,transparent);
}

section p{margin-bottom:18px;max-width:64ch}
section p:last-child{margin-bottom:0}
/* Intro lives in the same 760px measure as the service tiles; 64ch wraps
   a few characters short of their right edge. */
main > section:first-of-type p{max-width:none}

/* services */
.services{display:flex;flex-direction:column;gap:14px}
.svc{
  position:relative;
  padding:16px 18px;
  display:flex;
  align-items:center;
  gap:14px;
  background:var(--plate);
  box-shadow:var(--edge4), 8px 8px 0 0 var(--shade);
}
/* The card is a div, not an anchor: Matrix and Mastodon carry a second link
   for the contact handle, and an <a> can't nest inside an <a>. Instead .svc-go
   stretches an invisible ::after over the whole tile, so clicking anywhere
   still opens the service, and .svc-at a is lifted above it to stay clickable. */
.svc-go{text-decoration:none;color:inherit}
.svc-go::after{content:"";position:absolute;inset:0}
.svc:has(.svc-go:focus-visible){outline:3px solid var(--hot-ink);outline-offset:8px}
.svc-body{flex:1;min-width:0}
.svc h3{font-size:1rem;font-weight:700;letter-spacing:-.01em}
.svc p{font-size:.8rem;color:var(--dim);margin:4px 0 0}
.svc p.svc-at{margin-top:9px}
.svc-at a{
  position:relative;z-index:1;
  color:var(--acc-ink);font-weight:700;text-decoration:none;
  border-bottom:2px dotted currentColor;
}
.svc-at a:focus-visible{outline:3px solid var(--hot-ink);outline-offset:4px}
/* margin-left:auto pins the arrow to the right edge — the text column is
   capped by the inherited `section p` max-width, so the arrow would otherwise
   land wherever the longest line happened to stop. */
.svc .arw{font-weight:800;color:var(--acc-ink);margin-left:auto}
.svc .arw,.svc{transition:transform .12s steps(3,end)}
@media (hover:hover){
  .svc:hover{
    background:var(--acc-ink);
    color:#fff;
    transform:translate(4px,4px);
    box-shadow:
      var(--edge4),
      4px 4px 0 0 var(--shade);
  }
  .svc:hover p{color:rgba(255,255,255,.82)}
  .svc:hover .svc-at a{color:#fff}
  .svc:hover .arw{color:#fff;transform:translateX(6px)}
}

/* infrastructure */
.diag{
  padding:38px 22px;
  background:var(--plate);
  box-shadow:var(--edge4), 8px 8px 0 0 var(--shade);
  overflow:hidden;
}
.rail{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.wire{
  position:absolute;
  left:0;right:0;top:50%;
  height:4px;
  transform:translateY(-50%);
  background:repeating-linear-gradient(90deg,var(--dim) 0 4px,transparent 4px 12px);
  z-index:1;
}
.node{
  position:relative;
  z-index:3;
  background:var(--paper);
  padding:12px 14px;
  text-align:center;
  font-size:11px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  box-shadow:var(--edge3);
}
.node small{
  display:block;
  margin-top:4px;
  font-size:11px;
  font-weight:400;
  letter-spacing:.02em;
  text-transform:none;
  color:var(--dim);
}
.packet{
  --pkt:9px;
  position:absolute;
  z-index:2;
  width:var(--pkt);height:var(--pkt);
  background:var(--hot);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--hot) 28%,transparent);
  pointer-events:none;
}
/* --p0/--p1 are measured from the real node edges at spawn time, so the
   packet leaves the Internet node and lands on Services */
@keyframes travel-h{from{left:var(--p0)}to{left:var(--p1)}}
@keyframes travel-v{from{top:var(--p0)}to{top:var(--p1)}}
.packet-h{top:50%;margin-top:calc(var(--pkt) / -2);animation-name:travel-h;animation-timing-function:steps(24,jump-none)}
.packet-v{left:50%;margin-left:calc(var(--pkt) / -2);animation-name:travel-v;animation-timing-function:steps(24,jump-none)}

/* hidden / terminal */
.term{
  background:var(--plate);
  padding:20px;
  box-shadow:var(--edge4), 8px 8px 0 0 var(--shade);
}
.term-bar{
  display:flex;align-items:center;gap:8px;
  font-size:10px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;
  color:var(--dim);
  margin-bottom:14px;
}
.term-bar span{width:8px;height:8px;background:var(--dim)}
.term-bar span.live{background:var(--hot)}
.pwrow{display:flex;gap:10px;flex-wrap:wrap}
.pwrow input{
  flex:1 1 200px;
  font:inherit;
  font-size:14px;
  padding:11px 13px;
  background:var(--paper);
  color:var(--ink);
  border:0;
  outline:0;
  box-shadow:0 0 0 3px var(--line);
}
.pwrow input:focus{box-shadow:0 0 0 3px var(--acc-ink)}
.pwrow input::placeholder{color:var(--dim);letter-spacing:.1em}
.pwrow.err input{box-shadow:0 0 0 3px var(--hot-ink);animation:pxshake .18s steps(2,end) 3}
@keyframes pxshake{0%{transform:translateX(0)}50%{transform:translateX(-4px)}100%{transform:translateX(4px)}}
.solid{
  font:inherit;font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  padding:11px 20px;border:0;cursor:pointer;
  background:var(--acc-ink);color:#fff;
  box-shadow:0 0 0 3px var(--line),6px 6px 0 0 var(--shade);
}
@media (hover:hover){
  .solid:hover{background:var(--hot-ink)}
}
.solid:active{transform:translate(6px,6px);box-shadow:0 0 0 3px var(--line)}
.solid:focus-visible{outline:3px solid var(--hot-ink);outline-offset:6px}
.solid[disabled]{cursor:progress;background:var(--dim)}
#decrypt-error{
  display:none;
  margin-top:14px;padding:11px 13px;
  font-size:12px;font-weight:700;
  color:var(--hot-ink);
  background:color-mix(in srgb,var(--hot-ink) 12%,transparent);
  box-shadow:0 0 0 3px var(--hot-ink);
}
#hidden-content{
  display:none;
  white-space:pre-wrap;
  font-size:14px;
}
#hidden-content:focus-visible{outline:3px solid var(--hot-ink);outline-offset:6px}
/* Only ever shown inside <noscript> — the gate needs Web Crypto to open. */
.term-note{font-size:12px;color:var(--dim)}


footer{
  max-width:760px;
  margin:72px auto 0;
  padding:0 24px 88px;
  color:var(--dim);
  font-size:10px;
  font-weight:700;
  letter-spacing:.3em;
  text-transform:uppercase;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}
.foot-priv{
  color:inherit;
  text-decoration:none;
  letter-spacing:.22em;
  border-bottom:2px dotted currentColor;
}
@media (hover:hover){
  .foot-priv:hover{color:var(--acc-ink)}
}
.foot-priv:focus-visible{outline:3px solid var(--hot-ink);outline-offset:4px}

/* ── sky panel ────────────────────────────────────────────────────────── */
.dock{
  position:fixed;
  right:16px;bottom:16px;
  z-index:50;
  width:264px;
  background:var(--plate);
  padding:12px;
  font-size:10px;
  box-shadow:var(--edge4), 8px 8px 0 0 var(--shade);
}
/* The whole header is the toggle, so the hit target is the full panel width
   rather than just the indicator glyph. */
.dock-head{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  width:100%;
  margin:-4px 0 0;
  padding:4px 2px 6px;
  font:inherit;
  font-size:9px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;
  color:var(--hot-ink);
  background:none;border:0;cursor:pointer;
  text-align:left;
}
.dock-head:focus-visible{outline:3px solid var(--hot-ink);outline-offset:3px}
.dock-head .ind{
  display:flex;align-items:center;justify-content:center;
  width:20px;height:20px;
  margin:-4px -2px -4px 0;
  font-size:15px;font-weight:800;line-height:1;
  color:var(--acc-ink);
}
@media (hover:hover){
  .dock-head:hover{color:var(--acc-ink)}
  .dock-head:hover .ind{background:var(--acc-ink);color:var(--plate)}
}
.dock .grp{margin-top:10px}
.dock .grp>span{
  display:block;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-bottom:5px;
}
/* A grid, not a wrapping row: every chip gets the same width and each row
   spans the full panel, so no row is left hanging half-empty. --cols is set
   by chips() to a count that divides the chips evenly. */
.chips{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:4px}
.chip{
  font:inherit;font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:5px 2px;border:0;cursor:pointer;
  text-align:center;
  background:var(--paper);color:var(--dim);
  box-shadow:0 0 0 2px var(--line);
}
@media (hover:hover){
  .chip:hover{color:var(--ink)}
}
.chip[aria-pressed="true"]{background:var(--acc-ink);color:#fff}
.chip:focus-visible{outline:3px solid var(--hot-ink);outline-offset:3px}
.dock .now{
  display:flex;align-items:center;gap:8px;
  margin-top:11px;padding-top:10px;
  border-top:3px dashed color-mix(in srgb,var(--dim) 32%,transparent);
  font-size:9px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);
}
.dock .now canvas{width:14px;height:14px;image-rendering:pixelated;display:block;flex:0 0 auto}
.dock.min .body{display:none}
.dock.min{width:auto}

@media (max-width:640px){
  body{font-size:14px}
  main{gap:64px;padding-top:56px}
  /* The gap between stacked nodes is the only place the packet is visible,
     since the nodes sit above it on the z axis — hence far wider spacing here
     than the horizontal layout needs. */
  .rail{flex-direction:column;gap:52px}
  .wire{left:50%;top:0;bottom:0;right:auto;width:4px;height:auto;transform:translateX(-50%);
        background:repeating-linear-gradient(180deg,var(--dim) 0 4px,transparent 4px 12px)}
  .node{width:100%;padding:14px;font-size:13px}
  .node small{font-size:12px}
  .packet{--pkt:11px}
  /* 24px, not 16: the same inset as main's padding, so the panel is exactly as
     wide as the cards and paragraphs it sits in front of — and its drop shadow
     lands where theirs do. */
  .dock{left:24px;right:24px;width:auto;bottom:12px}
  /* The three controls only share a row here if the theme toggle gives up its
     word: "Theme: weather" is 154px of a 327px row, and the picker needs the
     end of it. The glyph already says which mode is on, and applyTheme() keeps
     the full wording on the button's aria-label for anyone not looking at it. */
  #theme-label{display:none}
  #theme-glyph{font-size:15px;line-height:1}
  /* Finger-sized chips: 9px text in 5px of padding is a 20px target, under
     every touch guideline going. */
  .chip{font-size:10px;padding:9px 4px}
  main.notice-main{padding-top:32px}
  .notice-en,.notice-de{gap:48px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}


/* ── privacy notice ───────────────────────────────────────────────────── */
/* Same measure and type as the home page, without the sky. The language
   picker stays in the header row on every breakpoint — there is no hero
   edge for it to pin to, and no sky panel to line up with. */
.notice-head{
  position:relative;
  max-width:760px;
  margin:0 auto;
  padding:20px 24px 0;
  display:flex;
  align-items:center;
  min-height:44px;
}
.notice-head .lang{
  position:relative;
  top:auto;right:auto;
  margin-left:auto;
  /* Same type as .hud, which the home-page picker inherits and this header
     otherwise would not — body is 15px, the control is 11px. */
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:700;
}
.notice-back{
  font-size:11px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--acc-ink);
  text-decoration:none;
  border-bottom:2px dotted currentColor;
}
@media (hover:hover){
  .notice-back:hover{color:var(--hot-ink)}
}
.notice-back:focus-visible{outline:3px solid var(--hot-ink);outline-offset:4px}

main.notice-main{padding-top:40px}
.notice-en,.notice-de{
  display:flex;
  flex-direction:column;
  gap:56px;
}
.notice-en[hidden],.notice-de[hidden]{display:none}
.notice-en > header,.notice-de > header{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.notice-main h1{
  font-size:1.7rem;
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.2;
  max-width:20ch;
}
.notice-meta{
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--dim);
}
.notice-main a{
  color:var(--acc-ink);
  font-weight:700;
  text-decoration:none;
  border-bottom:2px dotted currentColor;
}
@media (hover:hover){
  .notice-main a:hover{color:var(--hot-ink)}
}
.notice-main a:focus-visible{outline:3px solid var(--hot-ink);outline-offset:3px}
/* Same 760px measure as the home-page intro and service tiles. */
.notice-main p,.notice-main ul{max-width:none}
.notice-main ul{
  margin:0 0 18px;
  padding-left:1.15em;
}
.notice-main li{margin-bottom:8px}
.notice-main li:last-child{margin-bottom:0}