/* ==========================================================================
   SudoNews — document pages (contact, legal, 404)
   The legal body markup is lifted verbatim from the existing pages, so these
   rules style the classes that markup already uses. Nothing here changes a
   single word of what is written there.
   ========================================================================== */

.doc{ padding-top:calc(var(--mast) + clamp(2.6rem,8vh,5.5rem));padding-bottom:clamp(3rem,9vh,6rem) }
.doc__head{ max-width:34ch;margin-bottom:clamp(1.8rem,4.5vh,3rem) }
.doc__head .display{ font-size:clamp(2.6rem,7vw,5.2rem);margin:.5rem 0 1rem }
.doc__head .dek{ max-width:44ch }
.doc__rule{ margin-bottom:clamp(2rem,5vh,3.2rem) }

/* two-column document: a sticky contents rail and the text itself */
.doc__grid{
  display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);
  gap:clamp(1.8rem,4.5vw,4.5rem);align-items:start;
}
.doc__rail{ position:sticky;top:calc(var(--mast) + 1.6rem) }
.doc__rail ul{ list-style:none;padding:0;margin:.8rem 0 0;display:grid;gap:.42rem }
.doc__rail a{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;
  color:var(--ink-45);text-decoration:none;line-height:1.45;display:block;
}
.doc__rail a:hover,.doc__rail a:focus-visible{ color:var(--ink) }
.doc__note{
  margin-top:1.6rem;padding:.85rem 0 .1rem 1rem;border-left:2px solid var(--signal);
}

/* ── the lifted legal body ─────────────────────────────────────────────── */
.doc__body{ max-width:70ch }
.doc__body h1{
  font-family:var(--serif);font-weight:600;font-variation-settings:'opsz' 30;
  font-size:clamp(2rem,4vw,3rem);line-height:1.05;letter-spacing:-.022em;
  margin:0 0 1rem;
}
.doc__body h2{
  font-family:var(--serif);font-weight:600;font-variation-settings:'opsz' 22;
  font-size:clamp(1.28rem,2vw,1.62rem);line-height:1.16;letter-spacing:-.015em;
  margin:2.6rem 0 .7rem;padding-top:1.5rem;border-top:1px solid var(--ink-22);
}
.doc__body h3{
  font-family:var(--sans);font-weight:600;font-size:1.02rem;
  margin:1.6rem 0 .45rem;
}
.doc__body p,.doc__body li{ color:var(--ink-70);line-height:1.68 }
.doc__body p{ margin:0 0 1rem }
/* NOT display:grid. A grid parent blockifies its children, which silently
   drops every bullet and every number from the legal text — and the numbered
   deletion steps are load-bearing. Normal flow, with the gap on the item. */
.doc__body ul,.doc__body ol{ margin:0 0 1.15rem 1.5rem;padding:0 }
/* the reset strips markers from any classed list; the legal markup classes its
   numbered steps, and those numbers are part of the instruction */
.doc__body ul,.doc__body ul[class]{ list-style:disc }
.doc__body ol,.doc__body ol[class]{ list-style:decimal }
.doc__body ul ul,.doc__body ul[class] ul{ list-style:circle }
.doc__body li + li{ margin-top:.42rem }
.doc__body li > ul,.doc__body li > ol{ margin-top:.42rem;margin-bottom:.2rem }
/* the lists above are grids for their gap; a grid item is blockified, which
   silently drops every bullet and every number from the legal text. Putting
   list-item back is what keeps "1., 2., 3." on the deletion steps. */
.doc__body li{ padding-left:.2rem }
.doc__body li::marker{ color:var(--signal) }
.doc__body strong,.doc__body b{ color:var(--ink);font-weight:600 }
.doc__body a{ color:var(--ink);text-decoration:underline;text-underline-offset:.18em;
  text-decoration-color:var(--signal);text-decoration-thickness:1.5px }
.doc__body a:hover{ color:var(--signal) }
.doc__body section{ scroll-margin-top:calc(var(--mast) + 20px) }
.doc__body section:first-of-type h2{ border-top:0;padding-top:0;margin-top:0 }
.doc__body table{ width:100%;border-collapse:collapse;margin:0 0 1.3rem;font-size:.92rem }
.doc__body th,.doc__body td{
  text-align:left;padding:.62rem .8rem .62rem 0;border-bottom:1px solid var(--ink-10);
  vertical-align:top;color:var(--ink-70);
}
.doc__body th{ color:var(--ink);font-weight:600 }
.doc__body hr{ border:0;height:1px;background:var(--ink-22);margin:2rem 0 }
.doc__body blockquote{
  margin:0 0 1.2rem;padding-left:1.1rem;border-left:2px solid var(--ink-22);
  color:var(--ink-70);
}
.doc__body code{ font-family:var(--mono);font-size:.9em;background:var(--paper-2);padding:.1em .3em }

/* classes carried over from the original legal markup */
.doc__body .updated,
.doc__body .legal-meta{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;color:var(--ink-45);
  margin-bottom:1.6rem;
}
.doc__body .legal-badge{
  display:inline-block;font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink);background:var(--paper-2);
  border:1px solid var(--ink-22);padding:.34rem .6rem;margin:0 .4rem .4rem 0;
}
/* the lifted <h1> is the page's real heading; the chrome above repeats it
   visually, so this one is available to assistive tech and invisible here. */
.doc__body > .legal-shell > h1:first-child,
.doc__body > .legal-shell > .legal-head h1{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}
.doc__body .legal-badge-row{ margin:0 0 1.8rem;display:block }
/* the lede paragraph of a policy: set larger, so the agreement opens like a
   piece of writing rather than a wall */
.doc__body .legal-note{
  font-family:var(--serif);font-size:clamp(1.02rem,1.3vw,1.14rem);line-height:1.6;
  color:var(--ink);border-left:2px solid var(--signal);padding-left:1.1rem;
  margin:0 0 1.4rem;
}
.doc__body .legal-head{ display:block;margin:0 }
.doc__body .legal-numbered-steps{ counter-reset:none }
.doc__body .legal-shell,
.doc__body .legal-page{ all:unset;display:block }

@media (max-width:900px){
  .doc__grid{ grid-template-columns:1fr;gap:1.8rem }
  .doc__rail{ position:static;border-bottom:1px solid var(--ink-22);padding-bottom:1.4rem }
  .doc__rail ul{ display:flex;flex-wrap:wrap;gap:.35rem .95rem }
}

/* ── contact ───────────────────────────────────────────────────────────── */
.channels{ display:grid;gap:0;margin:0 }
.channels__row{
  display:grid;grid-template-columns:9.5rem minmax(0,1fr);gap:1.4rem;
  padding:1.35rem 0;border-top:1px solid var(--ink-22);align-items:baseline;
}
.channels__row:last-child{ border-bottom:1px solid var(--ink-22) }
.channels dt{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);
}
.channels dd{ margin:0 }
.channels__v{
  font-family:var(--serif);font-weight:600;font-variation-settings:'opsz' 20;
  font-size:clamp(1.15rem,1.9vw,1.5rem);letter-spacing:-.015em;
  text-decoration:none;display:inline-block;position:relative;line-height:1.2;
  word-break:break-word;
}
.channels__v::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1.5px;
  background:var(--signal);transform:scaleX(0);transform-origin:left;
  transition:transform .38s var(--ease);
}
.channels__v:hover::after,.channels__v:focus-visible::after{ transform:scaleX(1) }
.channels__m{ display:block;margin-top:.35rem;font-family:var(--mono);font-size:.72rem;
  color:var(--ink-45);line-height:1.55 }
.channels address{ font-style:normal;color:var(--ink-70);line-height:1.7;max-width:38ch }

@media (max-width:620px){
  .channels__row{ grid-template-columns:1fr;gap:.4rem }
}

/* ── 404 ───────────────────────────────────────────────────────────────── */
.oops{ min-height:72svh;display:grid;align-content:center;gap:1.4rem }
.oops__marks{ display:flex;gap:1.4rem;color:var(--signal);margin-bottom:.4rem }
.oops__marks svg{ width:46px;height:46px }
.oops__acts{ display:flex;gap:1rem;flex-wrap:wrap;margin-top:.6rem }