/*
  hypermedia.lol

  Readability first, decoration second. Prose is a real reading face at a real
  size; the display face is reserved for headlines, and the retro-game energy
  lives entirely in the pixel sprites and colour blocking so it never touches
  running text. No webfonts, no images, no JavaScript.
*/

:root {
  --ink:    #14130f;
  --paper:  #f5f2e8;
  --panel:  #fffdf6;
  --muted:  #57534a;
  --rule:   #14130f;
  --accent: #d7f205;

  --display: "Haettenschweiler", "Arial Narrow Bold", "Impact", "Franklin Gothic Bold", sans-serif;
  --prose: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --ui: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink:   #f2efe4;
    --paper: #100f0d;
    --panel: #1a1815;
    --muted: #a49e90;
    --rule:  #f2efe4;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 0 4rem;
  font-family: var(--ui);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-text-size-adjust: 100%;
}


/* -------------------------------------------------------------- the mark */

/*
  The site's name in a small box. On article pages it sits at the top right
  of the page in normal flow and scrolls away; the home page has the masthead
  instead. Drawn in the page's own ink and paper so it adapts everywhere.
*/
.mark {
  display: inline-block;
  padding: 0.5rem 0.8rem;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.78rem;
  line-height: 1;
  letter-spacing: 0.03em;
  text-decoration: none;
  box-shadow: 3px 3px 0 var(--ink);
}

.mark:hover { background: var(--ink); color: var(--paper); box-shadow: 3px 3px 0 var(--paper); }
.mark:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.topmark { display: flex; justify-content: flex-start; max-width: 76rem; margin: 0 auto; padding: 1rem 1.25rem 0; }

main { padding: 2rem 1.25rem 0; }

/* --------------------------------------------------------- the why pitch */

.pitch {
  display: block;
  max-width: 76rem;
  margin: 0 auto 1.75rem;
  padding: clamp(1.25rem, 4vw, 2.25rem);
  border: 3px solid var(--rule);
  border-left: 14px solid var(--accent);
  background: var(--panel);
  color: var(--ink);
  text-decoration: none;
  transition: transform 120ms steps(2), box-shadow 120ms steps(2);
}

.pitch:hover, .pitch:focus-visible {
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 var(--accent), 6px 6px 0 3px var(--rule);
}

.pitch__q {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.9rem, 6vw, 3.4rem);
  line-height: 0.95;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}

.pitch__a {
  display: block;
  max-width: 44rem;
  font-family: var(--prose);
  font-size: 1.1rem;
  line-height: 1.6;
}

.pitch__go {
  display: inline-block;
  margin-top: 1rem;
  font-family: var(--mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-bottom: 3px solid var(--accent);
}

/* ---------------------------------------------------------------- wall */

.wall__lede {
  max-width: 76rem;
  margin: 0 auto 1.5rem;
  font-family: var(--display);
  font-size: clamp(1.6rem, 4.5vw, 2.6rem);
  line-height: 1;
  text-transform: uppercase;
  font-weight: normal;
}

.wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  grid-auto-rows: minmax(13rem, auto);
  grid-auto-flow: dense;
  gap: 0.9rem;
  max-width: 76rem;
  margin: 0 auto;
}

/*
  A card is a miniature of the page it opens — same palette, same chrome, drawn
  small — under a body block whose type never changes, so titles stay readable
  no matter how loud the preview above them is.
*/
.tile {
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 3px solid var(--rule);
  background: var(--panel);
  color: var(--ink);
  text-decoration: none;
  overflow: hidden;
  transition: transform 120ms steps(2), box-shadow 120ms steps(2);
}

a.tile:hover, a.tile:focus-visible {
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 var(--accent), 6px 6px 0 3px var(--rule);
}

a.tile:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

.tile__body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1;
  padding: 0.95rem 1rem 1.05rem;
  border-top: 5px solid var(--accent);
}

.tile__kind {
  font-family: var(--mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
}

.tile__title {
  font-family: var(--display);
  font-size: clamp(1.4rem, 2.6vw, 1.95rem);
  line-height: 0.98;
  text-transform: uppercase;
}

.tile__desc { font-family: var(--ui); font-size: 0.9rem; line-height: 1.5; color: var(--ink); }

.tile__date {
  margin-top: auto;
  padding-top: 0.6rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--muted);
}

/* --- previews ---------------------------------------------------------- */

.pv {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #fff;
}

.pv__line {
  position: absolute;
  left: 8%;
  right: 12%;
  height: 5%;
  background: currentColor;
  opacity: 0.28;
}

/* FORM — six boxes struck out, and the one field that replaces them. */
.pv--form {
  background-color: #fdfcf7;
  background-image:
    linear-gradient(to right, rgba(0, 0, 0, 0.09) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.09) 1px, transparent 1px);
  background-size: 9px 9px;
}

.pv--form .pv__boxes {
  position: absolute;
  top: 16%;
  left: 8%;
  right: 8%;
  display: flex;
  gap: 3.2%;
}

.pv--form .pv__boxes i {
  flex: 1;
  aspect-ratio: 3 / 4;
  border: 2px solid #2a2a2a;
  background: #fff;
}

.pv--form .pv__strike {
  position: absolute;
  top: 50%;
  left: -2%;
  right: -2%;
  height: 3px;
  background: #c0392b;
  transform: rotate(-4deg);
}

.pv--form .pv__field {
  position: absolute;
  bottom: 14%;
  left: 8%;
  right: 8%;
  height: 26%;
  border: 2px solid #2a2a2a;
  border-bottom-width: 4px;
  background: #fff;
}

.pv--form .pv__caret {
  position: absolute;
  top: 18%;
  left: 5%;
  width: 2px;
  height: 64%;
  background: #c0392b;
}

/* SPEC — a standards document with a dialog floating over it. */
.pv--spec { background: #fff; color: #1a2340; }
.pv--spec .pv__masthead { position: absolute; top: 13%; left: 8%; width: 42%; height: 7%; background: #1a4ed8; }
.pv--spec .pv__line:nth-of-type(2) { top: 32%; }
.pv--spec .pv__line:nth-of-type(3) { top: 45%; }
.pv--spec .pv__line:nth-of-type(4) { top: 58%; }

.pv--spec .pv__dialog {
  position: absolute;
  right: 9%;
  bottom: 12%;
  width: 44%;
  height: 42%;
  border: 2px solid #1a4ed8;
  background: #fff;
  box-shadow: 5px 5px 0 rgba(26, 78, 216, 0.22);
}

.pv--spec .pv__dialog i { position: absolute; left: 10%; height: 8%; background: #1a4ed8; opacity: 0.35; }
.pv--spec .pv__dialog i:first-child { top: 22%; width: 60%; }
.pv--spec .pv__dialog i:last-child { top: 44%; width: 40%; }

/* TERMINAL — a window mid-deploy. */
.pv--terminal { background: #080b08; font-family: var(--mono); }

.pv--terminal .pv__chrome {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 17%;
  background: #101510;
  border-bottom: 1px solid #2b382a;
}

.pv--terminal .pv__chrome::before {
  content: "";
  position: absolute;
  top: 32%;
  left: 5%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff5f56;
  box-shadow: 10px 0 0 #ffbd2e, 20px 0 0 #27c93f;
}

.pv--terminal .pv__cmd { position: absolute; top: 30%; left: 6%; color: #ffb000; font-size: 0.72rem; white-space: nowrap; }
.pv--terminal .pv__out { position: absolute; top: 55%; left: 6%; color: #7d8a7b; font-size: 0.68rem; }
.pv--terminal .pv__caret { display: inline-block; width: 0.5em; height: 1em; margin-left: 0.2em; vertical-align: -0.14em; background: #ffb000; }
.pv--terminal .pv__scan { position: absolute; inset: 0; background: repeating-linear-gradient(rgba(0,0,0,0.4) 0 1px, transparent 1px 3px); }

/* ZINE — a photocopied flyer, knocked askew. */
.pv--zine {
  background-color: #e9e6da;
  background-image: radial-gradient(circle, rgba(0,0,0,0.32) 0.9px, transparent 1.1px);
  background-size: 5px 5px;
  color: #111;
}

.pv--zine .pv__slab { position: absolute; top: 18%; left: 6%; width: 74%; height: 26%; background: #111; transform: rotate(-2.4deg); }
.pv--zine .pv__slab::after { content: ""; position: absolute; top: 26%; left: 6%; width: 62%; height: 24%; background: #e9e6da; }
.pv--zine .pv__line:nth-of-type(2) { top: 60%; }
.pv--zine .pv__line:nth-of-type(3) { top: 74%; }

/* PLAIN */
.pv--plain { background: var(--panel); color: var(--ink); }
.pv--plain .pv__block { position: absolute; top: 18%; left: 8%; width: 46%; height: 24%; background: var(--accent); }
.pv--plain .pv__line:nth-of-type(2) { top: 58%; }
.pv--plain .pv__line:nth-of-type(3) { top: 72%; }
.pv__line--short { right: 42%; }

/* --- sizes ------------------------------------------------------------
   Spans are only applied once the grid is known to have enough columns for
   them, so the wall stays correct at every width instead of spawning implicit
   columns on narrow screens. */

@media (min-width: 46rem) {
  .tile--wide, .tile--big { grid-column: span 2; }
  .tile--tall { grid-row: span 2; }
}

@media (min-width: 70rem) {
  .tile--big { grid-column: span 2; grid-row: span 2; }
}

.tile--cta { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tile--cta .tile__body { border-top-color: var(--accent); }
.tile--cta .tile__desc { color: var(--paper); }
.tile--cta .tile__kind { color: var(--accent); }
.pv--cta { background: var(--ink); aspect-ratio: 21 / 9; }

.pv--cta .pv__plus {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.4rem;
  height: 0.42rem;
  margin: -0.21rem 0 0 -1.2rem;
  background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent);
}

.pv--cta .pv__plus::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.42rem;
  height: 2.4rem;
  margin: -1.2rem 0 0 -0.21rem;
  background: var(--accent);
}

/* ------------------------------------------------------------- articles */

.prose { max-width: 40rem; margin: 0 auto; }

.banner {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.1rem 0 1.25rem;
  border-top: 12px solid var(--accent);
  border-bottom: 3px solid var(--rule);
  margin-bottom: 2.5rem;
}

.banner__art { color: var(--accent); line-height: 0; flex: none; }

.article-title {
  font-family: var(--display);
  font-size: clamp(2rem, 6.5vw, 3.1rem);
  line-height: 0.94;
  text-transform: uppercase;
  margin: 0 0 0.3rem;
}

.banner time {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--muted);
}

/* Long-form copy gets a reading face, a comfortable size and a short measure. */
.prose p, .prose li {
  font-family: var(--prose);
  font-size: 1.15rem;
  line-height: 1.68;
}

.prose > p { margin: 1.85rem 0; }

.prose h2 {
  font-family: var(--display);
  font-size: clamp(1.8rem, 5vw, 2.4rem);
  line-height: 1;
  text-transform: uppercase;
  margin: 5.5rem 0 1rem;
  padding-bottom: 0.35rem;
  border-bottom: 3px solid var(--accent);
}

.prose a { color: var(--ink); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.prose a:hover { background: var(--accent); color: #14130f; }

.prose img { max-width: 100%; height: auto; display: block; border: 3px solid var(--rule); margin: 1.75rem 0; }

.prose ul { padding-left: 1.15rem; }
.prose li { margin: 0.5rem 0; }

code {
  font-family: var(--mono);
  font-size: 0.86em;
  background: var(--accent);
  color: #14130f;
  padding: 0.08em 0.3em;
}

pre {
  border: 3px solid var(--rule);
  background: #14130f;
  color: #f5f2e8;
  padding: 1rem;
  overflow-x: auto;
  line-height: 1.5;
}

/* Outranks every treatment's `code` rule, so inline-code chrome never leaks
   into code blocks. */
pre code, .prose pre code { background: none; color: inherit; padding: 0; font-size: 0.82rem; }

kbd { font-family: var(--mono); font-size: 0.8em; border: 2px solid var(--rule); padding: 0.05em 0.35em; }

table { border-collapse: collapse; width: 100%; margin: 1.5rem 0; font-size: 0.95rem; }
table th, table td { text-align: left; padding: 0.45rem 0.6rem; border: 2px solid var(--rule); }
table th { background: var(--accent); color: #14130f; }

/* ------------------------------------------------------------ demo, foot */

.demo {
  border: 3px solid var(--rule);
  border-top: 12px solid var(--accent);
  padding: 1.5rem;
  margin: 2rem 0;
  text-align: center;
  background: var(--panel);
}

.demo label {
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-bottom: 0.85rem;
}

/*
  Sized by the size="6" attribute, not by arithmetic. No letter-spacing and no
  centering: monospace already lines the placeholder up with the digits, and
  both share a left origin so nothing drifts.
*/
.demo input {
  font-family: var(--mono);
  font-size: 1.9rem;
  text-align: left;
  max-width: 100%;
  padding: 0.45rem 0.65rem;
  color: var(--ink);
  background: var(--paper);
  border: 3px solid var(--rule);
}

.demo input:user-invalid { color: #c81e00; border-color: #c81e00; }

.demo button {
  display: block;
  margin: 1rem auto 0;
  padding: 0.5rem 1.2rem;
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--paper);
  background: var(--ink);
  border: 3px solid var(--rule);
  cursor: pointer;
}

.demo button:hover { background: var(--accent); color: #14130f; }

.foot {
  max-width: 76rem;
  margin: 6rem auto 0;
  padding: 2.5rem 1.25rem 1.5rem;
  border-top: 3px solid var(--rule);
  font-family: var(--ui);
  color: var(--ink);
}

.foot .mark--masthead { margin-bottom: 1rem; }

.foot__about { max-width: 40rem; font-size: 1.05rem; line-height: 1.5; margin: 0 0 1.75rem; }
.foot__about a { color: var(--ink); white-space: nowrap; }

.foot__actions { display: grid; grid-template-columns: 7rem 1fr; gap: 0.7rem 1rem; max-width: 40rem; margin: 0 0 2rem; }
.foot__actions dt { font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); padding-top: 0.35rem; }
.foot__actions dd { margin: 0; font-size: 0.95rem; line-height: 1.5; }
.foot__actions dd a { color: var(--ink); font-weight: 700; }

/* Share is a link like the others; the script upgrades it to the share sheet. */
.foot .share { color: var(--ink); font-weight: 700; }

@media (max-width: 30rem) { .foot__actions { grid-template-columns: 1fr; gap: 0.2rem 0; } .foot__actions dd { margin-bottom: 0.8rem; } }

.foot__meta { max-width: 40rem; font-family: var(--mono); font-size: 0.72rem; line-height: 1.5; color: var(--muted); margin: 0; padding-top: 1rem; border-top: 1px solid var(--rule); }

:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .mark:hover, .mark:focus-visible, a.tile:hover, a.tile:focus-visible { transform: none; }
}

/* The sting line on /why. */
.prose p.sting {
  display: inline-block;
  margin: 2rem 0;
  padding: 0.6rem 0.8rem;
  background: var(--accent);
  color: #14130f;
  font-family: var(--display);
  font-size: clamp(1.4rem, 5vw, 2.4rem);
  line-height: 1;
  text-transform: uppercase;
}

/* Live popover demo. */
.demo__btn {
  padding: 0.5rem 1.1rem;
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--paper);
  background: var(--ink);
  border: 3px solid var(--rule);
  cursor: pointer;
}

.demo__btn:hover { background: var(--accent); color: #14130f; }

.demo__pop {
  padding: 1.25rem;
  border: 3px solid var(--rule);
  background: var(--panel);
  color: var(--ink);
  font-family: var(--prose);
}

.demo__pop::backdrop { background: rgba(10, 10, 8, 0.5); }
.demo__pop p { margin: 0 0 1rem; }


/* --------------------------------------------------------- onward links */

.onward {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 0.9rem;
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 3px solid var(--rule);
}

.onward__link {
  display: block;
  padding: 0.9rem 1rem;
  border: 3px solid var(--rule);
  border-top: 10px solid var(--accent);
  background: var(--panel);
  color: var(--ink);
  text-decoration: none;
  transition: transform 120ms steps(2), box-shadow 120ms steps(2);
}

.onward__link:hover, .onward__link:focus-visible {
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 var(--accent), 6px 6px 0 3px var(--rule);
}

.onward__link--next { text-align: right; }

.onward__dir {
  display: block;
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-bottom: 0.3rem;
}

.onward__title {
  display: block;
  font-family: var(--display);
  font-size: 1.25rem;
  line-height: 1.02;
  text-transform: uppercase;
}

/* ==========================================================================
   TREATMENTS

   Each article picks one in front matter and gets a genuinely different page
   architecture: its own background field, banner chrome, heading system and
   body container. What a treatment may NOT change is the prose face, the prose
   size, or the measure. Variety is the point; a harder-to-read article is not.

   Every treatment defines its full palette for BOTH colour schemes. A
   treatment that sets --paper must also guarantee --ink contrasts with it.
   ========================================================================== */

/* --- SPEC ------------------------------------------ a standards document
   A numbered, institutional document with a masthead and a section rail. */

.t-spec {
  --accent: #1a4ed8;
  --paper: #fbfbfd;
  --panel: #ffffff;
  --rule: #c8ccd8;
}

@media (prefers-color-scheme: dark) {
  .t-spec { --accent: #7fa4ff; --paper: #0d0e12; --panel: #15171d; --rule: #2c3040; }
}

.t-spec .prose { max-width: 44rem; }

.t-spec .banner {
  display: block;
  border: 0;
  border-top: 3px solid var(--accent);
  border-bottom: 1px solid var(--rule);
  padding: 1.4rem 0 1.2rem;
}

.t-spec .banner::before {
  content: "Working Draft — Hypermedia Working Group";
  display: block;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.9rem;
}

.t-spec .banner__art { display: none; }

.t-spec .article-title {
  font-family: var(--prose);
  font-weight: 700;
  font-size: clamp(1.9rem, 5vw, 2.7rem);
  line-height: 1.12;
  text-transform: none;
  letter-spacing: -0.015em;
}

.t-spec .prose { counter-reset: section; }

.t-spec .prose h2 {
  position: relative;
  font-family: var(--prose);
  font-weight: 700;
  font-size: clamp(1.6rem, 4.5vw, 2rem);
  text-transform: none;
  border-bottom: 1px solid var(--rule);
  padding: 0 0 0.3rem;
  margin-top: 5.5rem;
}

.t-spec .prose h2::before {
  counter-increment: section;
  content: counter(section) ".";
  position: absolute;
  left: -2.6rem;
  font-family: var(--mono);
  font-size: 0.95rem;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 46rem) {
  .t-spec .prose h2::before { position: static; margin-right: 0.5rem; }
}

.t-spec .prose > .banner + p {
  border: 1px solid var(--accent);
  border-left: 6px solid var(--accent);
  padding: 1rem 1.1rem;
  background: var(--panel);
}

.t-spec .prose > .banner + p::before {
  content: "Status of this document";
  display: block;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

.t-spec code { background: color-mix(in srgb, var(--accent) 16%, transparent); color: inherit; }
.t-spec pre { border: 1px solid var(--rule); background: var(--panel); color: var(--ink); }
.t-spec .prose a { color: var(--accent); }
.t-spec .prose a:hover { background: var(--accent); color: var(--panel); }

/* --- TERMINAL --------------------------------------------- a CRT session
   Always dark, in both schemes, on purpose. Full-bleed black with window
   chrome and phosphor amber. Scanlines never touch running text. */

.t-terminal {
  --accent: #ffb000;
  --ink: #d9e0d5;
  --paper: #080b08;
  --panel: #101510;
  --muted: #7d8a7b;
  --rule: #2b382a;
}

.t-terminal .prose { max-width: 42rem; }

.t-terminal .banner {
  position: relative;
  display: block;
  padding: 2.1rem 1.1rem 1.2rem;
  border: 1px solid var(--rule);
  border-top: 0;
  background: var(--panel);
  overflow: hidden;
}

/* Window chrome: three dots and a title bar. */
.t-terminal .banner::before {
  content: "";
  position: absolute;
  top: 0.72rem;
  left: 0.8rem;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: #ff5f56;
  box-shadow: 1rem 0 0 #ffbd2e, 2rem 0 0 #27c93f, 0 -0.72rem 0 0 transparent;
}

.t-terminal .banner::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(rgba(0, 0, 0, 0.38) 0 1px, transparent 1px 3px);
}

.t-terminal .banner__art { display: none; }

.t-terminal .article-title {
  font-family: var(--mono);
  font-size: clamp(1.25rem, 3.6vw, 1.85rem);
  line-height: 1.25;
  text-transform: none;
  color: var(--accent);
}

.t-terminal .article-title::before { content: "$ "; opacity: 0.5; }

.t-terminal .article-title::after {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 1em;
  margin-left: 0.15em;
  vertical-align: -0.14em;
  background: var(--accent);
  animation: blink 1.1s steps(1) infinite;
}

@keyframes blink { 50% { opacity: 0; } }

.t-terminal .prose h2 {
  font-family: var(--mono);
  font-size: clamp(1.4rem, 4vw, 1.75rem);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
  border-bottom: 1px dashed var(--rule);
}

.t-terminal .prose h2::before { content: "// "; opacity: 0.45; }
.t-terminal code { background: #1c2a1b; color: var(--accent); }
.t-terminal pre { background: #000; border-color: var(--rule); color: #d9e0d5; }
.t-terminal .prose a { color: var(--accent); }
.t-terminal .prose a:hover { background: var(--accent); color: #080b08; }

/* --- ZINE ------------------------------------------------ photocopied punk
   Halftone across the whole page, body pasted down as a hard-shadowed panel,
   headline knocked askew. Rotation is on slabs only, never on running text
   blocks. */

.t-zine {
  --accent: #d61f1f;
  --paper: #e9e6da;
  --panel: #fbfaf4;
  --ink: #111111;
  --rule: #111111;
}

@media (prefers-color-scheme: dark) {
  .t-zine { --accent: #ff5b4a; --paper: #131310; --panel: #1d1d18; --ink: #ece9dc; --rule: #ece9dc; }
}

.t-zine {
  background-image: radial-gradient(circle, rgba(128, 128, 128, 0.28) 0.9px, transparent 1.1px);
  background-size: 6px 6px;
}

.t-zine .prose {
  max-width: 42rem;
  padding: 1.75rem;
  background: var(--panel);
  border: 4px solid var(--rule);
  box-shadow: 9px 9px 0 var(--rule);
}

.t-zine .banner {
  border: 0;
  border-bottom: 4px solid var(--rule);
  padding-bottom: 1.1rem;
  margin-bottom: 2rem;
}

.t-zine .article-title {
  display: inline-block;
  transform: rotate(-1.8deg);
  background: var(--ink);
  color: var(--panel);
  padding: 0.3rem 0.65rem;
  font-size: clamp(1.8rem, 5.5vw, 2.9rem);
}

.t-zine .banner__art { color: var(--accent); }

.t-zine .prose h2 {
  display: inline-block;
  background: var(--ink);
  color: var(--panel);
  padding: 0.18rem 0.55rem;
  border: 0;
  transform: rotate(-0.8deg);
}

.t-zine .prose a { text-decoration-style: wavy; text-decoration-color: var(--accent); }
.t-zine .prose a:hover { background: var(--accent); color: #fff; }
.t-zine code { background: var(--ink); color: var(--panel); }
.t-zine pre { background: var(--ink); color: var(--panel); border-width: 4px; }
.t-zine .onward__link { border-width: 4px; }

/* --- FORM ----------------------------------------------- the paper form
   Ruled grid paper end to end, body copy on stamped cards, headings as
   numbered form fields. */

.t-form {
  --accent: #c0392b;
  --paper: #fdfcf7;
  --panel: #ffffff;
  --rule: #2a2a2a;
}

@media (prefers-color-scheme: dark) {
  .t-form { --accent: #ff7a68; --paper: #0f1011; --panel: #17191b; --rule: #3a3d40; }
}

.t-form {
  background-image:
    linear-gradient(to right, rgba(128, 128, 128, 0.09) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(128, 128, 128, 0.09) 1px, transparent 1px);
  background-size: 1.5rem 1.5rem;
}

.t-form .prose { max-width: 43rem; }

.t-form .banner {
  position: relative;
  display: block;
  background: var(--panel);
  border: 2px solid var(--rule);
  border-top: 12px solid var(--accent);
  padding: 1.5rem 1.1rem 1.1rem;
}

.t-form .banner::before {
  content: "Form 6 · one value per field";
  position: absolute;
  top: 0.4rem;
  left: 1.1rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.t-form .banner__art { color: var(--accent); }

.t-form .article-title {
  font-family: var(--mono);
  font-size: clamp(1.2rem, 3.4vw, 1.75rem);
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

.t-form .prose h2 {
  counter-increment: field;
  font-family: var(--mono);
  font-size: clamp(1.3rem, 3.8vw, 1.6rem);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  border: 2px solid var(--rule);
  border-left: 10px solid var(--accent);
  padding: 0.45rem 0.6rem;
  background: var(--panel);
}

.t-form .prose h2::before {
  content: counter(field, decimal-leading-zero) " ";
  color: var(--accent);
}

.t-form .prose { counter-reset: field; }

.t-form .prose ul { padding-left: 1.3rem; }
.t-form code { background: color-mix(in srgb, var(--accent) 15%, transparent); color: inherit; }
.t-form .prose a { color: var(--accent); }
.t-form .prose a:hover { background: var(--accent); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .t-terminal .article-title::after { animation: none; }
}


/* --------------------------------------------------------------- the dek
   The line under a heading. Together with the headings it has to carry the
   whole argument for someone who never reads a paragraph. */

.prose p.dek {
  font-family: var(--ui);
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--muted);
  margin: -0.2rem 0 2.25rem;
  max-width: 34rem;
}

/*
  One tap selects the whole code, so the next tap is Copy. That's as close as
  the platform gets without a script — the Clipboard API is JavaScript-only,
  and this site doesn't ship any. Safari needs the -webkit- prefix or the
  tap-to-select does nothing at all.
*/
.copyable {
  display: inline-block;
  padding: 0.2em 0.55em;
  font-size: 1.05em;
  -webkit-user-select: all;
  user-select: all;
  cursor: copy;
  border: 2px dashed currentColor;
}

.copyable::selection { background: #14130f; color: #d7f205; }



/* --- LAUNCH ------------------------------------------ the launch console
   For the six-box login code. The joke is the seriousness: hazard stripes,
   indicator lamps, a big red ARM button. The de-escalation to one input is
   the argument. Dark in both schemes by design. Body copy #e6e3d6 on
   #0c0e12 is 15:1. */

.t-launch {
  --accent: #ffb300;
  --alert: #ff2a2a;
  --go: #2ee66b;
  --ink: #e6e3d6;
  --paper: #0c0e12;
  --panel: #14171d;
  --steel: #1d2129;
  --muted: #9a978c;
  --rule: #343946;
}

.t-launch .prose { max-width: 44rem; }

.t-launch .banner {
  display: block;
  padding: 1.1rem 1.1rem 1rem;
  border: 2px solid var(--rule);
  border-top: 0;
  background: var(--panel);
  position: relative;
}

.t-launch .banner::before {
  content: "";
  display: block;
  height: 12px;
  margin: 0 -1.1rem 1rem;
  background: repeating-linear-gradient(-45deg, var(--accent) 0 12px, #14130f 12px 24px);
}

.t-launch .banner__art { display: none; }

.t-launch .article-title {
  font-family: var(--mono);
  font-size: clamp(1.3rem, 3.8vw, 2rem);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--accent);
}

.t-launch .prose h2 {
  font-family: var(--mono);
  font-size: clamp(1.4rem, 4vw, 1.8rem);
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.45rem;
  margin-top: 5.5rem;
}

.t-launch code { background: var(--steel); color: var(--accent); }
.t-launch pre { background: #06070a; border-color: var(--rule); color: var(--ink); }
.t-launch .prose a { color: var(--accent); }
.t-launch .prose a:hover { background: var(--accent); color: #0c0e12; }
.t-launch table th { background: var(--steel); color: var(--accent); }
.t-launch table th, .t-launch table td { border-color: var(--rule); }
.t-launch .prose p.dek { color: var(--muted); }
.t-launch .onward__link { background: var(--panel); }

/* The console ----------------------------------------------------------- */

.console {
  margin: 0;
  border: 2px solid var(--rule);
  background: var(--steel);
  box-shadow: 0 0 0 6px #0c0e12, 0 0 0 8px var(--rule);
}

.console__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 1rem;
  background: repeating-linear-gradient(-45deg, var(--accent) 0 12px, #14130f 12px 24px);
}

.console__title {
  padding: 0.25rem 0.6rem;
  background: #0c0e12;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.console__lights { display: flex; gap: 0.4rem; }

.console__lights i {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--alert);
  box-shadow: 0 0 6px var(--alert), inset 0 0 2px #000;
  animation: lamp 1.6s steps(1) infinite;
}

.console__lights i:nth-child(2) { animation-delay: 0.5s; }
.console__lights i:nth-child(3) { animation-delay: 1s; }

@keyframes lamp { 50% { opacity: 0.25; box-shadow: none; } }

.console__sys {
  padding: 0.45rem 1rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--rule);
}

.console__body {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1.25rem 1rem 1.1rem;
}

.console__label {
  font-family: var(--mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink);
}

.console__keys { display: flex; gap: 0.45rem; }

.console input {
  font-family: var(--mono);
  color: var(--accent);
  background: #06070a;
  border: 2px solid var(--rule);
  border-bottom: 4px solid #000;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.05);
  caret-color: var(--accent);
}

.console__keys input {
  width: 100%;
  min-width: 0;
  padding: 0.7rem 0;
  font-size: clamp(1.4rem, 4.5vw, 2rem);
  text-align: center;
}

/*
  The spaced-out look, done right: content-box so `width` means content, and
  a width that is exactly six characters plus six half-em gaps. Left-aligned
  so the placeholder and the digits share an origin.
*/
.console--one input {
  box-sizing: content-box;
  font-size: clamp(1.7rem, 6vw, 2.6rem);
  letter-spacing: 0.5em;
  text-align: left;
  width: calc(6ch + 3em);
  max-width: calc(100% - 1.5rem);
  padding: 0.45rem 0.75rem;
}

.console--one input::placeholder { color: var(--muted); opacity: 1; }

.console input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.console__status {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.console__lamp {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  background: #4a4f5c;
  box-shadow: inset 0 0 3px #000;
}

/*
  The lamps and status are driven entirely by :has() reading the form's own
  validity. Paste into the six boxes and one becomes valid while five stay
  :invalid, so the console never arms. The single field goes green.
*/
.console__state { display: none; color: var(--muted); }
.console__state--wait { display: inline; }

/* Any touched-and-invalid field: INCOMPLETE. (Untouched empties don't count
   until a submit attempt marks them, so pasting into box one leaves the
   console on Standby until you press Arm — and then it goes red.) */
.console:has(input:user-invalid) .console__state--wait { display: none; }
.console:has(input:user-invalid) .console__state--bad { display: inline; color: var(--alert); }
.console:has(input:user-invalid) .console__lamp { background: var(--alert); box-shadow: 0 0 8px var(--alert); }

/* Nothing invalid at all: ARMED. Must come last so it wins over the above. */
.console:not(:has(input:invalid)) .console__state--wait { display: none; }
.console:not(:has(input:invalid)) .console__state--bad { display: none; }
.console:not(:has(input:invalid)) .console__state--ok { display: inline; color: var(--go); }
.console:not(:has(input:invalid)) .console__lamp { background: var(--go); box-shadow: 0 0 10px var(--go); }

.console__arm {
  align-self: flex-start;
  padding: 0.7rem 1.6rem;
  font-family: var(--mono);
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #fff;
  background: var(--alert);
  border: 0;
  border-bottom: 5px solid #8f0000;
  cursor: pointer;
}

.console__arm:hover { filter: brightness(1.12); }
.console__arm:active { transform: translateY(3px); border-bottom-width: 2px; }

.console__foot {
  padding: 0.6rem 1rem;
  border-top: 1px solid var(--rule);
  font-family: var(--ui);
  font-size: 0.82rem;
  color: var(--muted);
}

/* What breaks — a comparison grid that reads as a checklist. */
.breaks { display: grid; gap: 0.65rem; margin: 5.5rem 0 7rem; }

.break {
  display: grid;
  grid-template-columns: 7.5rem 1fr 1fr;
  grid-template-areas: "what six one" "fix fix fix";
  gap: 0.4rem 0.9rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--rule);
  background: var(--panel);
}

@media (max-width: 40rem) {
  .break { grid-template-columns: 1fr 1fr; grid-template-areas: "what what" "six one" "fix fix"; }
}

.break__what { grid-area: what; font-family: var(--mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent); }
.break__six { grid-area: six; font-family: var(--ui); font-size: 0.92rem; color: var(--ink); }
.break__one { grid-area: one; font-family: var(--ui); font-size: 0.92rem; color: var(--ink); }
.break__six::before { content: "Six boxes"; display: block; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--alert); margin-bottom: 0.15rem; }
.break__one::before { content: "One field"; display: block; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--go); margin-bottom: 0.15rem; }
.break__fix { grid-area: fix; font-family: var(--ui); font-size: 0.85rem; line-height: 1.45; color: var(--muted); }

.break .console__sr { font-family: var(--mono); font-size: 0.8rem; font-style: italic; }

/* Card preview */
.pv--launch { background: #0c0e12; }
.pv--launch .pv__hazard { position: absolute; top: 0; left: 0; right: 0; height: 13%; background: repeating-linear-gradient(-45deg, #ffb300 0 8px, #14130f 8px 16px); }
.pv--launch .pv__keys { position: absolute; top: 34%; left: 8%; right: 8%; display: flex; gap: 3%; }
.pv--launch .pv__keys i { flex: 1; aspect-ratio: 3 / 4; background: #06070a; border: 2px solid #343946; border-bottom: 3px solid #000; }
.pv--launch .pv__lamp { position: absolute; bottom: 12%; left: 8%; width: 9%; aspect-ratio: 1; border-radius: 50%; background: #ff2a2a; box-shadow: 0 0 6px #ff2a2a; }

@media (prefers-reduced-motion: reduce) {
  .console__lights i { animation: none; }
}


/* The text message that delivers the code. Presented, not described. */
.message {
  display: grid;
  gap: 0.35rem;
  width: 100%;
  margin: 0;
  padding: 1rem 1.1rem 1.1rem;
  border: 2px solid var(--rule);
  border-radius: 18px 18px 18px 4px;
  background: var(--panel);
  font-family: var(--ui);
}

.message__from {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
}

.message__time { text-transform: none; letter-spacing: 0; }
.message__body { font-size: 0.95rem; color: var(--ink); }

.message__code {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 0.35rem 0 0.15rem;
}

.message__code .copyable {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-family: var(--mono);
  font-size: clamp(2rem, 8vw, 3.2rem);
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1;
  padding: 0.2em 0.2em 0.2em 0.38em;
  color: var(--accent);
  border: 2px dashed var(--accent);
  border-right: 0;
  background: #06070a;
}

.message__hint { font-size: 0.82rem; color: var(--muted); }

/* Six puppets and a shadow field. */
.shadow {
  display: grid;
  gap: 0.5rem;
  margin: 5.5rem 0 6.5rem;
  padding: 1rem;
  border: 1px solid var(--rule);
  background: var(--panel);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}

.shadow__row { display: grid; grid-template-columns: 7rem 1fr; gap: 0.75rem; align-items: center; }
.shadow__tag { text-transform: uppercase; color: var(--muted); font-size: 0.66rem; letter-spacing: 0.14em; }
.shadow__boxes { display: flex; gap: 0.3rem; }
.shadow__boxes i { width: 1.6rem; height: 2rem; border: 2px solid var(--rule); background: #06070a; display: grid; place-items: center; color: var(--accent); font-style: normal; }
.shadow__glue { color: var(--alert); text-transform: uppercase; font-size: 0.66rem; letter-spacing: 0.14em; }
.shadow__glue span { display: inline-block; margin-right: 0.8rem; }
.shadow__hidden { display: inline-block; padding: 0.35rem 0.6rem; border: 2px dashed var(--muted); color: var(--muted); }
.shadow__hidden b { color: var(--accent); font-weight: normal; }

@media (max-width: 40rem) {
  .shadow__row { grid-template-columns: 1fr; gap: 0.3rem; }
}


/* The Copy button. Inserted by the page's one script; see the article. */
.copy {
  margin-left: 0.4rem;
  padding: 0.3em 0.7em;
  border: 2px solid currentColor;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  vertical-align: middle;
}

.copy:hover { background: currentColor; color: var(--paper); }

.message .copy {
  margin: 0;
  padding: 0 1.1em;
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 700;
  color: #0c0e12;
  background: var(--accent);
  border: 2px solid var(--accent);
  align-self: stretch;
}

.message .copy:hover { background: #fff; border-color: #fff; }


/* The wire: what actually leaves the console when you press Arm. */
.console__wire {
  display: grid;
  gap: 0.3rem;
  padding: 0.7rem 0.85rem;
  border: 1px dashed var(--rule);
  background: #06070a;
}

.console__wire-label {
  font-family: var(--mono);
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
}

.console__wire > code {
  font-size: 1rem;
  background: none;
  padding: 0;
  color: var(--accent);
}

.console--six .console__wire > code { color: var(--alert); }

.console__wire-note {
  font-family: var(--ui);
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--muted);
}

.console__wire-note code { font-size: 0.85em; }


/* Email variant of the message: square, with a subject line. */
.message--email { border-radius: 6px; }

.message__subject {
  font-family: var(--ui);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--rule);
}

/* == rouge theme start == */
/* Generated by Rouge (Monokai). Regenerate rather than edit. */
.highlight table td { padding: 5px; }
.highlight table pre { margin: 0; }
.highlight .c, .highlight .ch, .highlight .cd, .highlight .cpf {
  color: #75715e;
  font-style: italic;
}
.highlight .cm {
  color: #75715e;
  font-style: italic;
}
.highlight .c1 {
  color: #75715e;
  font-style: italic;
}
.highlight .cp {
  color: #75715e;
  font-weight: bold;
}
.highlight .cs {
  color: #75715e;
  font-weight: bold;
  font-style: italic;
}
.highlight .err {
  color: #960050;
  background-color: #1e0010;
}
.highlight .gi {
  color: #ffffff;
  background-color: #324932;
}
.highlight .gd {
  color: #ffffff;
  background-color: #493131;
}
.highlight .ge {
  font-style: italic;
}
.highlight .ges {
  font-weight: bold;
  font-style: italic;
}
.highlight .gr {
  color: #aa0000;
}
.highlight .gt {
  color: #aa0000;
}
.highlight .gh {
  color: #999999;
}
.highlight .go {
  color: #888888;
}
.highlight .gp {
  color: #555555;
}
.highlight .gs {
  font-weight: bold;
}
.highlight .gu {
  color: #aaaaaa;
}
.highlight .k, .highlight .kv {
  color: #66d9ef;
  font-weight: bold;
}
.highlight .kc {
  color: #66d9ef;
  font-weight: bold;
}
.highlight .kd {
  color: #66d9ef;
  font-weight: bold;
}
.highlight .kp {
  color: #66d9ef;
  font-weight: bold;
}
.highlight .kr {
  color: #66d9ef;
  font-weight: bold;
}
.highlight .kt {
  color: #66d9ef;
  font-weight: bold;
}
.highlight .kn {
  color: #f92672;
  font-weight: bold;
}
.highlight .ow {
  color: #f92672;
  font-weight: bold;
}
.highlight .o {
  color: #f92672;
  font-weight: bold;
}
.highlight .mf {
  color: #ae81ff;
}
.highlight .mh {
  color: #ae81ff;
}
.highlight .il {
  color: #ae81ff;
}
.highlight .mi {
  color: #ae81ff;
}
.highlight .mo {
  color: #ae81ff;
}
.highlight .m, .highlight .mb, .highlight .mx {
  color: #ae81ff;
}
.highlight .se {
  color: #ae81ff;
}
.highlight .sa {
  color: #66d9ef;
  font-weight: bold;
}
.highlight .sb {
  color: #e6db74;
}
.highlight .sc {
  color: #e6db74;
}
.highlight .sd {
  color: #e6db74;
}
.highlight .s2 {
  color: #e6db74;
}
.highlight .sh {
  color: #e6db74;
}
.highlight .si {
  color: #e6db74;
}
.highlight .sx {
  color: #e6db74;
}
.highlight .sr {
  color: #e6db74;
}
.highlight .s1 {
  color: #e6db74;
}
.highlight .ss {
  color: #e6db74;
}
.highlight .s, .highlight .dl {
  color: #e6db74;
}
.highlight .na {
  color: #a6e22e;
}
.highlight .nc {
  color: #a6e22e;
  font-weight: bold;
}
.highlight .nd {
  color: #a6e22e;
  font-weight: bold;
}
.highlight .ne {
  color: #a6e22e;
  font-weight: bold;
}
.highlight .nf, .highlight .fm {
  color: #a6e22e;
  font-weight: bold;
}
.highlight .no {
  color: #66d9ef;
}
.highlight .bp {
  color: #f8f8f2;
}
.highlight .nb {
  color: #f8f8f2;
}
.highlight .ni {
  color: #f8f8f2;
}
.highlight .nn {
  color: #f8f8f2;
}
.highlight .vc {
  color: #f8f8f2;
}
.highlight .vg {
  color: #f8f8f2;
}
.highlight .vi {
  color: #f8f8f2;
}
.highlight .nv, .highlight .vm {
  color: #f8f8f2;
}
.highlight .w {
  color: #f8f8f2;
}
.highlight .nl {
  color: #f8f8f2;
  font-weight: bold;
}
.highlight .nt {
  color: #f92672;
}
  color: #f8f8f2;
  background-color: #49483e;/* == rouge theme end == */


/* ------------------------------------------------------------- figures
   Every shown thing sits in a figure with a caption that carries the step,
   so the story reads from captions alone. */
/* Shown things get real air on both sides, so the prose around them reads
   as its own beat instead of a gap between exhibits. */
.step { margin: 6.5rem 0 8rem; padding: 0; }
.step figcaption { margin-top: 1.4rem; padding-top: 0.8rem; border-top: 1px solid var(--rule); font-family: var(--ui); font-size: 0.88rem; line-height: 1.5; color: var(--muted); }
.step figcaption b { font-family: var(--mono); font-weight: 700; color: var(--accent); margin-right: 0.35rem; }
.step--code pre { margin: 0; }

.prose p.lede { font-size: 1.28rem; line-height: 1.55; margin: 0 0 3rem; padding-left: 1rem; border-left: 6px solid var(--accent); }

.verdict { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 0.75rem; margin: 6rem 0 8rem; }
.verdict__col { padding: 0.9rem 1rem; border: 1px solid var(--rule); background: var(--panel); }
.verdict__col--pro { border-top: 6px solid var(--go, #2ee66b); }
.verdict__col--con { border-top: 6px solid var(--alert, #ff2a2a); }
.verdict__head { display: block; font-family: var(--mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); margin-bottom: 0.4rem; }
.verdict ul { margin: 0; padding-left: 1.1rem; }
.prose .verdict li { font-family: var(--ui); font-size: 0.92rem; line-height: 1.45; margin: 0.3rem 0; }

pre.highlight { background: var(--code-bg, #14130f); }
.t-launch pre.highlight { background: #06070a; }


/* ---------------------------------------------------------- footnotes */
.prose sup { font-size: 0.7em; line-height: 0; vertical-align: 0.5em; }
.prose sup a { text-decoration: none; padding: 0 0.15em; }
.footnotes { margin-top: 4rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.footnotes hr { display: none; }
.footnotes ol { padding-left: 1.4rem; }
.prose .footnotes li { font-family: var(--ui); font-size: 0.9rem; line-height: 1.5; color: var(--muted); margin: 0.6rem 0; }
.prose .footnotes li p { font-family: inherit; font-size: inherit; line-height: inherit; margin: 0; display: inline; }


/* ---------------------------------------------------------------- byline */
.banner .byline, .prose p.byline {
  margin: 0.5rem 0 0;
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--muted);
}

.byline a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.byline a:hover { background: var(--accent); color: #14130f; }
.byline__sep { margin: 0 0.4rem; }
.banner time { font-size: inherit; }


/* ------------------------------------------------------ heading anchors */
.prose h2 { scroll-margin-top: 1.5rem; }
.prose h2 .anchor { color: inherit; text-decoration: none; }
/* Outranks every treatment's link hover: a heading must keep its own colour. */
.prose h2 > a.anchor:hover, .prose h2 > a.anchor:focus-visible { color: inherit; background: none; text-decoration: none; }
.prose h2 .anchor::after {
  content: " #";
  opacity: 0;
  font-weight: 400;
  transition: opacity 120ms;
}
.prose h2:hover .anchor::after, .prose h2 .anchor:focus-visible::after { opacity: 0.45; }
.console, .step { scroll-margin-top: 1.5rem; }






/* ---------------------------------------------------------- masthead
   The home page names the site in the same box the mark uses everywhere
   else, just bigger and in flow, with the two links that matter. */
.masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  max-width: 76rem;
  margin: 0 auto 2rem;
}

.mark--masthead {
  position: static;
  font-size: clamp(1.3rem, 3.5vw, 2rem);
  padding: 0.6rem 1rem;
  box-shadow: 5px 5px 0 var(--ink);
}

.masthead__nav { display: flex; gap: 1.5rem; font-family: var(--mono); font-size: 0.85rem; }
.masthead__nav a { color: var(--ink); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.masthead__nav a:hover { background: var(--accent); color: #14130f; }

/* The floating mark is redundant where the masthead is. */
.is-home main { padding-top: 2.5rem; }


/* --- DEFAULT -------------------------------------- the browser's stylesheet
   For the canon. Times New Roman, #0000EE links, white paper: the look of an
   HTML document nobody styled, which is what the pages under discussion are.
   Then a marker taken to it. This is the one treatment allowed to change the
   prose face, because the face IS the argument. */

.t-default {
  --accent: #ff2b2b;
  --paper: #ffffff;
  --panel: #f6f6f6;
  --ink: #000000;
  --rule: #000000;
  --muted: #444444;
  --scrawl: "Marker Felt", "Chalkboard SE", "Comic Sans MS", "Segoe Print", cursive;
}

@media (prefers-color-scheme: dark) {
  .t-default { --paper: #121212; --panel: #1e1e1e; --ink: #e8e8e8; --rule: #e8e8e8; --muted: #b0b0b0; }
}

.t-default .prose { max-width: 42rem; }
.t-default .prose p, .t-default .prose li, .t-default .prose td, .t-default .prose th { font-family: "Times New Roman", Times, serif; }
.t-default .prose p, .t-default .prose li { font-size: 1.15rem; line-height: 1.55; }

.t-default .prose a { color: #0000ee; text-decoration: underline; }
.t-default .prose a:visited { color: #551a8b; }
.t-default .prose a:hover { background: none; color: #0000ee; }
@media (prefers-color-scheme: dark) {
  .t-default .prose a { color: #8ab4f8; }
  .t-default .prose a:visited { color: #c58af9; }
  .t-default .prose a:hover { color: #8ab4f8; }
}

.t-default .banner { display: block; border: 0; padding: 0 0 0.5rem; border-bottom: 1px solid var(--rule); }
.t-default .banner__art { display: none; }

.t-default .article-title {
  position: relative;
  display: inline-block;
  font-family: "Times New Roman", Times, serif;
  font-weight: 700;
  font-size: clamp(2rem, 6vw, 3rem);
  line-height: 1.1;
  text-transform: none;
  letter-spacing: 0;
}

/* The red scribble under the title. */
.t-default .article-title::after {
  content: "";
  position: absolute;
  left: -0.2em;
  right: -0.4em;
  bottom: -0.18em;
  height: 0.28em;
  background:
    radial-gradient(ellipse 60% 100% at 30% 50%, var(--accent) 45%, transparent 46%) 0 0 / 1.2em 100% repeat-x,
    linear-gradient(var(--accent), var(--accent)) 0 60% / 100% 0.12em no-repeat;
  opacity: 0.9;
  transform: rotate(-0.6deg);
}

.t-default .prose h2 {
  font-family: var(--scrawl);
  font-size: clamp(1.7rem, 4.5vw, 2.3rem);
  font-weight: 400;
  line-height: 1.05;
  text-transform: none;
  letter-spacing: 0;
  color: var(--accent);
  border: 0;
  padding: 0;
  transform: rotate(-1.2deg);
  transform-origin: 0 100%;
}

/* Highlighter over the deks. */
.t-default .prose p.dek {
  display: inline;
  font-family: var(--scrawl);
  font-size: 1.05rem;
  color: #000;
  background: linear-gradient(transparent 12%, #fff45c 12%, #fff45c 88%, transparent 88%);
  padding: 0.1em 0.3em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.t-default .prose h2 + p.dek { margin: 0; }

.t-default code { font-family: monospace; font-size: 0.95em; background: var(--panel); color: inherit; padding: 0 0.2em; }
.t-default pre { background: var(--panel); color: var(--ink); border: 1px solid var(--muted); }
.t-default table { border: 1px solid var(--muted); font-family: "Times New Roman", Times, serif; font-size: 0.95rem; }
.t-default table th, .t-default table td { border: 1px solid var(--muted); padding: 0.3rem 0.5rem; }
.t-default table th { background: var(--panel); color: inherit; }
.t-default .step figcaption { font-family: "Times New Roman", Times, serif; font-style: italic; }
.t-default .prose p.lede { font-family: "Times New Roman", Times, serif; border-left-color: var(--accent); }
.t-default .banner .byline { font-family: "Times New Roman", Times, serif; font-style: italic; }
.t-default .byline a { color: #0000ee; }
.t-default .onward__link { border-radius: 0; }

/* Card preview */
.pv--default { background: #fff; color: #000; font-family: "Times New Roman", Times, serif; }
.pv--default .pv__h { position: absolute; top: 14%; left: 8%; font-weight: 700; font-size: 0.95rem; line-height: 1; white-space: nowrap; }
.pv--default .pv__p { position: absolute; left: 8%; right: 10%; height: 4%; background: #000; opacity: 0.22; }
.pv--default .pv__p:nth-of-type(2) { top: 42%; }
.pv--default .pv__p--short { top: 54%; right: 38%; }
.pv--default .pv__link { position: absolute; top: 68%; left: 8%; width: 34%; height: 4%; background: #0000ee; }
.pv--default .pv__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: #0000ee; }
.pv--default .pv__scrawl { position: absolute; top: 28%; left: 6%; width: 62%; height: 6%; background: radial-gradient(ellipse 60% 100% at 30% 50%, #ff2b2b 45%, transparent 46%) 0 0 / 14px 100% repeat-x; transform: rotate(-2deg); opacity: 0.9; }


/* == rouge light theme (GitHub) for light code backgrounds == */
@media (prefers-color-scheme: light) {
.light-code .highlight table td { padding: 5px; }
.light-code .highlight table pre { margin: 0; }
.light-code .highlight, .light-code .highlight .w {
  color: #24292f;
}
.light-code .highlight .k, .light-code .highlight .kd, .light-code .highlight .kn, .light-code .highlight .kp, .light-code .highlight .kr, .light-code .highlight .kt, .light-code .highlight .kv {
  color: #cf222e;
}
.light-code .highlight .gr {
  color: #f6f8fa;
}
.light-code .highlight .gd {
  color: #82071e;
}
.light-code .highlight .nb {
  color: #953800;
}
.light-code .highlight .nc {
  color: #953800;
}
.light-code .highlight .no {
  color: #953800;
}
.light-code .highlight .nn {
  color: #953800;
}
.light-code .highlight .sr {
  color: #116329;
}
.light-code .highlight .na {
  color: #116329;
}
.light-code .highlight .nt {
  color: #116329;
}
.light-code .highlight .gi {
  color: #116329;
  background-color: #dafbe1;
}
.light-code .highlight .ges {
  font-weight: bold;
  font-style: italic;
}
.light-code .highlight .kc {
  color: #0550ae;
}
.light-code .highlight .l, .light-code .highlight .ld, .light-code .highlight .m, .light-code .highlight .mb, .light-code .highlight .mf, .light-code .highlight .mh, .light-code .highlight .mi, .light-code .highlight .il, .light-code .highlight .mo, .light-code .highlight .mx {
  color: #0550ae;
}
.light-code .highlight .sb {
  color: #0550ae;
}
.light-code .highlight .bp {
  color: #0550ae;
}
.light-code .highlight .ne {
  color: #0550ae;
}
.light-code .highlight .nl {
  color: #0550ae;
}
.light-code .highlight .py {
  color: #0550ae;
}
.light-code .highlight .nv, .light-code .highlight .vc, .light-code .highlight .vg, .light-code .highlight .vi, .light-code .highlight .vm {
  color: #0550ae;
}
.light-code .highlight .o, .light-code .highlight .ow {
  color: #0550ae;
}
.light-code .highlight .gh {
  color: #0550ae;
  font-weight: bold;
}
.light-code .highlight .gu {
  color: #0550ae;
  font-weight: bold;
}
.light-code .highlight .s, .light-code .highlight .sa, .light-code .highlight .sc, .light-code .highlight .dl, .light-code .highlight .sd, .light-code .highlight .s2, .light-code .highlight .se, .light-code .highlight .sh, .light-code .highlight .sx, .light-code .highlight .s1, .light-code .highlight .ss {
  color: #0a3069;
}
.light-code .highlight .nd {
  color: #8250df;
}
.light-code .highlight .nf, .light-code .highlight .fm {
  color: #8250df;
}
.light-code .highlight .err {
  color: #f6f8fa;
  background-color: #82071e;
}
.light-code .highlight .c, .light-code .highlight .ch, .light-code .highlight .cd, .light-code .highlight .cm, .light-code .highlight .cp, .light-code .highlight .cpf, .light-code .highlight .c1, .light-code .highlight .cs {
  color: #6e7781;
}
.light-code .highlight .gl {
  color: #6e7781;
}
.light-code .highlight .gt {
  color: #6e7781;
}
.light-code .highlight .ni {
  color: #24292f;
}
.light-code .highlight .si {
  color: #24292f;
}
.light-code .highlight .ge {
  color: #24292f;
  font-style: italic;
}
.light-code .highlight .gs {
  color: #24292f;
  font-weight: bold;
}
}

/* Modal bodies are always light, so their code is always light-themed. */
.t-modalz .highlight table td { padding: 5px; }
.t-modalz .highlight table pre { margin: 0; }
.t-modalz .highlight, .t-modalz .highlight .w {
  color: #24292f;
}
.t-modalz .highlight .k, .t-modalz .highlight .kd, .t-modalz .highlight .kn, .t-modalz .highlight .kp, .t-modalz .highlight .kr, .t-modalz .highlight .kt, .t-modalz .highlight .kv {
  color: #cf222e;
}
.t-modalz .highlight .gr {
  color: #f6f8fa;
}
.t-modalz .highlight .gd {
  color: #82071e;
}
.t-modalz .highlight .nb {
  color: #953800;
}
.t-modalz .highlight .nc {
  color: #953800;
}
.t-modalz .highlight .no {
  color: #953800;
}
.t-modalz .highlight .nn {
  color: #953800;
}
.t-modalz .highlight .sr {
  color: #116329;
}
.t-modalz .highlight .na {
  color: #116329;
}
.t-modalz .highlight .nt {
  color: #116329;
}
.t-modalz .highlight .gi {
  color: #116329;
  background-color: #dafbe1;
}
.t-modalz .highlight .ges {
  font-weight: bold;
  font-style: italic;
}
.t-modalz .highlight .kc {
  color: #0550ae;
}
.t-modalz .highlight .l, .t-modalz .highlight .ld, .t-modalz .highlight .m, .t-modalz .highlight .mb, .t-modalz .highlight .mf, .t-modalz .highlight .mh, .t-modalz .highlight .mi, .t-modalz .highlight .il, .t-modalz .highlight .mo, .t-modalz .highlight .mx {
  color: #0550ae;
}
.t-modalz .highlight .sb {
  color: #0550ae;
}
.t-modalz .highlight .bp {
  color: #0550ae;
}
.t-modalz .highlight .ne {
  color: #0550ae;
}
.t-modalz .highlight .nl {
  color: #0550ae;
}
.t-modalz .highlight .py {
  color: #0550ae;
}
.t-modalz .highlight .nv, .t-modalz .highlight .vc, .t-modalz .highlight .vg, .t-modalz .highlight .vi, .t-modalz .highlight .vm {
  color: #0550ae;
}
.t-modalz .highlight .o, .t-modalz .highlight .ow {
  color: #0550ae;
}
.t-modalz .highlight .gh {
  color: #0550ae;
  font-weight: bold;
}
.t-modalz .highlight .gu {
  color: #0550ae;
  font-weight: bold;
}
.t-modalz .highlight .s, .t-modalz .highlight .sa, .t-modalz .highlight .sc, .t-modalz .highlight .dl, .t-modalz .highlight .sd, .t-modalz .highlight .s2, .t-modalz .highlight .se, .t-modalz .highlight .sh, .t-modalz .highlight .sx, .t-modalz .highlight .s1, .t-modalz .highlight .ss {
  color: #0a3069;
}
.t-modalz .highlight .nd {
  color: #8250df;
}
.t-modalz .highlight .nf, .t-modalz .highlight .fm {
  color: #8250df;
}
.t-modalz .highlight .err {
  color: #f6f8fa;
  background-color: #82071e;
}
.t-modalz .highlight .c, .t-modalz .highlight .ch, .t-modalz .highlight .cd, .t-modalz .highlight .cm, .t-modalz .highlight .cp, .t-modalz .highlight .cpf, .t-modalz .highlight .c1, .t-modalz .highlight .cs {
  color: #6e7781;
}
.t-modalz .highlight .gl {
  color: #6e7781;
}
.t-modalz .highlight .gt {
  color: #6e7781;
}
.t-modalz .highlight .ni {
  color: #24292f;
}
.t-modalz .highlight .si {
  color: #24292f;
}
.t-modalz .highlight .ge {
  color: #24292f;
  font-style: italic;
}
.t-modalz .highlight .gs {
  color: #24292f;
  font-weight: bold;
}


/* --- MODALZ ------------------------------------------- modals all the way down
   For the modals article. Every section is its own dialog in a different
   vintage, stacked and progressively inset, on a dimmed desktop. Body copy
   inside the modals keeps the prose face; only the chrome changes. */

.t-modalz {
  --paper: #4a4a4a;
  --ink: #111111;
  --muted: #555555;
  --rule: #999999;
  --accent: #000080;
  background-image: radial-gradient(circle at 50% 0, #6a6a6a, #3a3a3a 70%);
}

.t-modalz .prose { max-width: 46rem; }
.t-modalz .banner { background: #fff; border: 2px solid #111; padding: 1rem 1.25rem; }
.t-modalz .banner__art { display: none; }
.t-modalz .article-title { font-family: var(--display); color: #111; }
.t-modalz .banner .byline { color: #444; }
.t-modalz .onward__link { background: #fff; }
.t-modalz .foot { color: #eee; --ink: #eee; --paper: #2a2a2a; --muted: #bbb; }
.t-modalz .footnotes { background: #fff; padding: 1.25rem; border: 2px solid #111; margin-top: 2.5rem; }
.t-modalz .prose .footnotes li { color: #333; }

.modal {
  margin: 2.25rem 0 2.25rem calc(min(var(--n, 0), 6) * 0.6rem);
  color: #111;
  overflow: hidden;
  scroll-margin-top: 1rem;
}

.modal__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.modal__bar h2 { margin: 0; font-size: 1.05rem; line-height: 1.25; text-transform: none; letter-spacing: 0; border: 0; padding: 0; transform: none; }
/* Outranks the modal body's link colour: the title is the bar's colour. */
.t-modalz .modal .modal__bar h2 > a.anchor, .t-modalz .modal .modal__bar h2 > a.anchor:hover { color: inherit; text-decoration: none; background: none; }
.modal__controls { display: flex; gap: 0.35rem; flex: none; }
.modal__controls i { display: block; width: 0.9rem; height: 0.9rem; }
.modal__body { padding: 1.25rem 1.4rem 0.5rem; }
.modal__body > :first-child { margin-top: 0; }
.modal__buttons { display: flex; justify-content: flex-end; gap: 0.6rem; padding: 0.9rem 1.4rem 1.1rem; }
.modal__btn { display: inline-block; padding: 0.4rem 1.2rem; font-family: var(--ui); font-size: 0.85rem; text-decoration: none; color: #111; }
.t-modalz .modal .prose p, .t-modalz .modal p, .t-modalz .modal li { color: #111; }
.t-modalz .modal a { color: #0645ad; }
.t-modalz .modal code { background: #eee; color: #111; }
.t-modalz .modal pre { background: #f6f8fa; color: #111; border: 1px solid #ccc; }
.t-modalz .modal p.dek { color: #444; }

/* Windows 95 */
.modal--win95 { background: #c0c0c0; border: 2px solid; border-color: #fff #404040 #404040 #fff; box-shadow: 1px 1px 0 #000; font-family: Tahoma, "MS Sans Serif", Arial, sans-serif; }
.modal--win95 .modal__bar { background: linear-gradient(90deg, #000080, #1084d0); color: #fff; padding: 0.3rem 0.4rem 0.3rem 0.6rem; }
.modal--win95 .modal__bar h2 { font-family: Tahoma, "MS Sans Serif", Arial, sans-serif; font-weight: 700; font-size: 0.95rem; color: #fff; }
.modal--win95 .modal__controls i { background: #c0c0c0; border: 2px solid; border-color: #fff #404040 #404040 #fff; }
.modal--win95 .modal__btn { background: #c0c0c0; border: 2px solid; border-color: #fff #404040 #404040 #fff; box-shadow: 1px 1px 0 #000; font-family: Tahoma, "MS Sans Serif", Arial, sans-serif; font-size: 0.8rem; min-width: 5.5rem; text-align: center; }
.modal--win95 .modal__btn--ok { outline: 1px solid #000; outline-offset: -4px; }

/* Mac OS 9 (Platinum) */
.modal--macos9 { background: #dddddd; border: 1px solid #000; box-shadow: 2px 2px 0 rgba(0,0,0,0.5); }
.modal--macos9 .modal__bar { padding: 0.35rem 0.5rem; background: repeating-linear-gradient(#e6e6e6 0 2px, #bfbfbf 2px 4px); flex-direction: row-reverse; justify-content: flex-end; }
.modal--macos9 .modal__bar h2 { font-family: Charcoal, Geneva, "Lucida Grande", sans-serif; font-size: 0.95rem; background: #dddddd; padding: 0 0.6rem; margin: 0 auto; }
.modal--macos9 .modal__controls i { width: 0.75rem; height: 0.75rem; border: 1px solid #333; background: #eee; box-shadow: inset 1px 1px 0 #fff; }
.modal--macos9 .modal__controls i + i { display: none; }
.modal--macos9 .modal__btn { border: 1px solid #333; border-radius: 6px; background: #eee; box-shadow: inset 1px 1px 0 #fff; font-family: Charcoal, Geneva, sans-serif; font-size: 0.85rem; }
.modal--macos9 .modal__btn--ok { box-shadow: 0 0 0 2px #333, 0 0 0 3px #eee; }

/* Windows XP */
.modal--winxp { background: #ece9d8; border: 3px solid #0a5fd8; border-top: 0; border-radius: 8px 8px 0 0; }
.modal--winxp .modal__bar { padding: 0.45rem 0.5rem 0.45rem 0.75rem; background: linear-gradient(#3b8ef5, #0a5fd8 40%, #1d78e6); color: #fff; border-radius: 6px 6px 0 0; }
.modal--winxp .modal__bar h2 { font-family: "Trebuchet MS", Tahoma, sans-serif; font-weight: 700; font-size: 1rem; color: #fff; text-shadow: 1px 1px 0 #003c9e; }
.modal--winxp .modal__controls i { border-radius: 3px; border: 1px solid #fff; background: #2f7be6; }
.modal--winxp .modal__controls i:last-child { background: #d64c37; }
.modal--winxp .modal__btn { border: 1px solid #003c74; border-radius: 3px; background: linear-gradient(#fff, #ece9d8); font-family: Tahoma, sans-serif; font-size: 0.8rem; min-width: 5rem; text-align: center; }
.modal--winxp .modal__btn--ok { box-shadow: inset 0 0 0 2px #f7c56e; }

/* Mac OS X Aqua */
.modal--aqua { background: #fff; border: 1px solid #999; border-radius: 6px; box-shadow: 0 12px 30px rgba(0,0,0,0.45); }
.modal--aqua .modal__bar { padding: 0.45rem 0.7rem; background: repeating-linear-gradient(#e9e9e9 0 1px, #dcdcdc 1px 2px); flex-direction: row-reverse; justify-content: flex-end; border-bottom: 1px solid #b5b5b5; }
.modal--aqua .modal__bar h2 { font-family: "Lucida Grande", "Helvetica Neue", sans-serif; font-size: 0.95rem; color: #222; margin: 0 auto; }
.modal--aqua .modal__controls { gap: 0.5rem; }
.modal--aqua .modal__controls i { border-radius: 50%; width: 0.8rem; height: 0.8rem; border: 1px solid rgba(0,0,0,0.25); }
.modal--aqua .modal__controls i:nth-child(1) { background: #ff5f57; }
.modal--aqua .modal__controls i:nth-child(2) { background: #febc2e; }
.modal--aqua .modal__controls i:nth-child(3) { background: #28c840; }
.modal--aqua .modal__btn { border-radius: 999px; border: 1px solid #7a7a7a; background: linear-gradient(#fdfdfd, #d9d9d9); font-family: "Lucida Grande", "Helvetica Neue", sans-serif; }
.modal--aqua .modal__btn--ok { background: linear-gradient(#8ec1ff, #2f7cf6 55%, #4d9bff); color: #fff; border-color: #1d5fc4; }

/* Bootstrap 3 */
.modal--bootstrap { background: #fff; border: 1px solid rgba(0,0,0,0.2); border-radius: 6px; box-shadow: 0 5px 15px rgba(0,0,0,0.5); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.modal--bootstrap .modal__bar { padding: 0.9rem 1.25rem; border-bottom: 1px solid #e5e5e5; }
.modal--bootstrap .modal__bar h2 { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 1.15rem; font-weight: 500; color: #333; }
.modal--bootstrap .modal__controls i { display: none; }
.modal--bootstrap .modal__controls::after { content: "\00d7"; font-size: 1.4rem; line-height: 1; color: #000; opacity: 0.3; font-weight: 700; }
.modal--bootstrap .modal__buttons { border-top: 1px solid #e5e5e5; }
.modal--bootstrap .modal__btn { border: 1px solid #ccc; border-radius: 4px; background: #fff; font-size: 0.9rem; padding: 0.4rem 0.9rem; }
.modal--bootstrap .modal__btn--ok { background: #337ab7; border-color: #2e6da4; color: #fff; }

/* Material */
.modal--material { background: #fff; border-radius: 4px; box-shadow: 0 11px 15px -7px rgba(0,0,0,0.2), 0 24px 38px 3px rgba(0,0,0,0.14), 0 9px 46px 8px rgba(0,0,0,0.12); font-family: Roboto, "Helvetica Neue", Arial, sans-serif; }
.modal--material .modal__bar { padding: 1.25rem 1.5rem 0.25rem; }
.modal--material .modal__bar h2 { font-family: Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 1.25rem; font-weight: 500; color: rgba(0,0,0,0.87); }
.modal--material .modal__controls { display: none; }
.modal--material .modal__buttons { padding: 0.5rem 0.75rem 0.75rem; }
.modal--material .modal__btn { text-transform: uppercase; letter-spacing: 0.09em; font-weight: 500; color: #6200ee; border-radius: 4px; }
.modal--material .modal__btn:hover { background: rgba(98,0,238,0.08); }

/* iOS alert */
.modal--ios { background: rgba(249,249,249,0.96); border-radius: 14px; box-shadow: 0 10px 40px rgba(0,0,0,0.4); font-family: -apple-system, "SF Pro Text", "Helvetica Neue", sans-serif; }
.modal--ios .modal__bar { justify-content: center; padding: 1.1rem 1.25rem 0; }
.modal--ios .modal__bar h2 { font-family: -apple-system, "SF Pro Text", "Helvetica Neue", sans-serif; font-weight: 600; font-size: 1.05rem; text-align: center; color: #000; }
.modal--ios .modal__controls { display: none; }
.modal--ios .modal__buttons { padding: 0; gap: 0; border-top: 1px solid rgba(0,0,0,0.2); }
.modal--ios .modal__btn { flex: 1; text-align: center; padding: 0.85rem; color: #007aff; font-size: 1rem; }
.modal--ios .modal__btn + .modal__btn { border-left: 1px solid rgba(0,0,0,0.2); font-weight: 600; }

/* Cookie banner */
.modal--cookie { background: #1f1f1f; color: #eee; border: 1px solid #444; }
.modal--cookie .modal__bar { padding: 1rem 1.25rem 0; }
.modal--cookie .modal__bar h2 { font-family: var(--ui); font-size: 1.05rem; color: #fff; }
.modal--cookie .modal__bar h2::before { content: "\1F36A  "; }
.modal--cookie .modal__controls { display: none; }
.t-modalz .modal--cookie .modal__body p, .t-modalz .modal--cookie .modal__body li, .t-modalz .modal--cookie .modal p.dek { color: #ddd; }
.t-modalz .modal--cookie a { color: #8ab4f8; }
.t-modalz .modal--cookie code { background: #333; color: #eee; }
.modal--cookie .modal__btn { border: 1px solid #888; border-radius: 4px; color: #eee; }
.modal--cookie .modal__btn--ok { background: #2ea043; border-color: #2ea043; color: #fff; }
.modal--cookie .modal__btn--ok::before { content: "Accept all"; }
.modal--cookie .modal__btn--ok { font-size: 0; }
.modal--cookie .modal__btn--ok::before { font-size: 0.85rem; }

/* Card preview */
.pv--modalz { background: #4a4a4a; }
.pv--modalz .pv__win { position: absolute; border: 2px solid #111; background: #fff; }
.pv--modalz .pv__win i { display: block; height: 14%; }
.pv--modalz .pv__win--1 { top: 10%; left: 8%; width: 60%; height: 55%; background: #c0c0c0; }
.pv--modalz .pv__win--1 i { background: linear-gradient(90deg, #000080, #1084d0); }
.pv--modalz .pv__win--2 { top: 26%; left: 22%; width: 60%; height: 55%; background: #ece9d8; border-color: #0a5fd8; }
.pv--modalz .pv__win--2 i { background: linear-gradient(#3b8ef5, #0a5fd8); }
.pv--modalz .pv__win--3 { top: 42%; left: 36%; width: 56%; height: 50%; border-radius: 6px; border-color: #999; }
.pv--modalz .pv__win--3 i { background: #e6e6e6; }
.pv--modalz .pv__win--3 b { position: absolute; right: 8%; bottom: 10%; width: 28%; height: 16%; background: #337ab7; border-radius: 3px; }


/* ------------------------------------------------ modals article demos */
.embed { display: block; width: 100%; height: 30rem; border: 2px solid var(--rule); background: #fff; }

.confirm { border: 2px solid var(--rule); background: var(--panel); padding: 1.25rem 1.4rem; max-width: 30rem; }
.confirm__head { font-family: var(--ui); font-weight: 700; font-size: 1.1rem; margin: 0 0 0.5rem; }
.confirm p, .confirm li { font-family: var(--ui); font-size: 0.95rem; }
.confirm ul { margin: 0 0 1rem; padding-left: 1.2rem; }
.confirm label { display: block; font-family: var(--ui); font-size: 0.9rem; margin-bottom: 0.35rem; }
.confirm input { width: 100%; font: inherit; font-family: var(--mono); padding: 0.5rem 0.6rem; border: 2px solid var(--rule); background: var(--paper); color: var(--ink); }
.confirm input:user-invalid { border-color: #c81e00; }
.confirm__actions { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; margin-top: 1rem; }
.confirm button { font: inherit; font-family: var(--ui); font-weight: 700; padding: 0.5rem 1rem; border: 2px solid #c81e00; background: #c81e00; color: #fff; cursor: pointer; }

.demo__dialog { position: static; margin: 0; padding: 1.25rem; border: 2px solid var(--rule); background: var(--panel); color: var(--ink); font-family: var(--prose); max-width: 22rem; }
.demo__dialog p { margin: 0 0 1rem; }
.demo__dialog form { display: flex; gap: 0.5rem; justify-content: flex-end; }
.demo__dialog:not([open]) { display: none; }
.t-modalz .confirm, .t-modalz .demo__dialog { background: #fff; color: #111; }


/* On the dimmed desktop, the mark keeps a white card so it stays readable. */
.t-modalz .mark { background: #fff; color: #111; border-color: #111; box-shadow: 3px 3px 0 #111; }
.t-modalz .mark:hover { background: #111; color: #fff; box-shadow: 3px 3px 0 #fff; }


/* Wide tables scroll inside their own box instead of widening the page. */
.prose table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.prose table th, .prose table td { white-space: nowrap; }
.prose table th:first-child, .prose table td:first-child { white-space: normal; min-width: 11rem; }


/* --- SLOPE ---------------------------------------------- a ski hill
   For the SPA article. A SkiFree-shaped world: white snow, pixel trees, a
   Windows 3.1 title bar on the banner, and the four acts rated like trails,
   green circle to double black diamond. A game screen, so it's light in both
   colour schemes. */

.t-slope {
  --accent: #1f5fd0;
  --ink: #101820;
  --paper: #e3ebf5;
  --veil: rgba(227,235,245,0.55);
  --panel: #ffffff;
  --muted: #444d56;
  --rule: #101820;
  --green: #2e9e4f;
  --blue: #2266d1;
  --black: #111111;
  --tree: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2016%2016%22%20shape-rendering=%22crispEdges%22%3E%3Crect%20x=%227%22%20y=%220%22%20width=%221%22%20height=%221%22%20fill=%22%232e7d32%22/%3E%3Crect%20x=%226%22%20y=%221%22%20width=%223%22%20height=%221%22%20fill=%22%232e7d32%22/%3E%3Crect%20x=%225%22%20y=%222%22%20width=%225%22%20height=%221%22%20fill=%22%232e7d32%22/%3E%3Crect%20x=%226%22%20y=%223%22%20width=%223%22%20height=%221%22%20fill=%22%232e7d32%22/%3E%3Crect%20x=%225%22%20y=%224%22%20width=%225%22%20height=%221%22%20fill=%22%232e7d32%22/%3E%3Crect%20x=%224%22%20y=%225%22%20width=%227%22%20height=%221%22%20fill=%22%232e7d32%22/%3E%3Crect%20x=%225%22%20y=%226%22%20width=%225%22%20height=%221%22%20fill=%22%232e7d32%22/%3E%3Crect%20x=%224%22%20y=%227%22%20width=%227%22%20height=%221%22%20fill=%22%232e7d32%22/%3E%3Crect%20x=%223%22%20y=%228%22%20width=%229%22%20height=%221%22%20fill=%22%232e7d32%22/%3E%3Crect%20x=%222%22%20y=%229%22%20width=%2211%22%20height=%221%22%20fill=%22%232e7d32%22/%3E%3Crect%20x=%227%22%20y=%2210%22%20width=%221%22%20height=%221%22%20fill=%22%235d3a1a%22/%3E%3Crect%20x=%227%22%20y=%2211%22%20width=%221%22%20height=%221%22%20fill=%22%235d3a1a%22/%3E%3Crect%20x=%226%22%20y=%2212%22%20width=%223%22%20height=%221%22%20fill=%22%235d3a1a%22/%3E%3C/svg%3E");
  --skier: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2016%2016%22%20shape-rendering=%22crispEdges%22%3E%3Crect%20x=%226%22%20y=%221%22%20width=%222%22%20height=%221%22%20fill=%22%23d33%22/%3E%3Crect%20x=%226%22%20y=%222%22%20width=%222%22%20height=%221%22%20fill=%22%23d33%22/%3E%3Crect%20x=%225%22%20y=%223%22%20width=%224%22%20height=%221%22%20fill=%22%231a237e%22/%3E%3Crect%20x=%224%22%20y=%224%22%20width=%221%22%20height=%221%22%20fill=%22%231a237e%22/%3E%3Crect%20x=%226%22%20y=%224%22%20width=%222%22%20height=%221%22%20fill=%22%231a237e%22/%3E%3Crect%20x=%229%22%20y=%224%22%20width=%221%22%20height=%221%22%20fill=%22%231a237e%22/%3E%3Crect%20x=%226%22%20y=%225%22%20width=%222%22%20height=%221%22%20fill=%22%231a237e%22/%3E%3Crect%20x=%225%22%20y=%226%22%20width=%221%22%20height=%221%22%20fill=%22%231a237e%22/%3E%3Crect%20x=%228%22%20y=%226%22%20width=%221%22%20height=%221%22%20fill=%22%231a237e%22/%3E%3Crect%20x=%225%22%20y=%227%22%20width=%221%22%20height=%221%22%20fill=%22%231a237e%22/%3E%3Crect%20x=%228%22%20y=%227%22%20width=%221%22%20height=%221%22%20fill=%22%231a237e%22/%3E%3Crect%20x=%224%22%20y=%228%22%20width=%221%22%20height=%221%22%20fill=%22%231a237e%22/%3E%3Crect%20x=%229%22%20y=%228%22%20width=%221%22%20height=%221%22%20fill=%22%231a237e%22/%3E%3Crect%20x=%223%22%20y=%229%22%20width=%222%22%20height=%221%22%20fill=%22%23111%22/%3E%3Crect%20x=%229%22%20y=%229%22%20width=%222%22%20height=%221%22%20fill=%22%23111%22/%3E%3Crect%20x=%222%22%20y=%2210%22%20width=%2211%22%20height=%221%22%20fill=%22%23111%22/%3E%3C/svg%3E");
  --yeti: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2016%2016%22%20shape-rendering=%22crispEdges%22%3E%3Crect%20x=%225%22%20y=%220%22%20width=%226%22%20height=%221%22%20fill=%22%23b8c4cf%22/%3E%3Crect%20x=%224%22%20y=%221%22%20width=%228%22%20height=%221%22%20fill=%22%23b8c4cf%22/%3E%3Crect%20x=%223%22%20y=%222%22%20width=%222%22%20height=%221%22%20fill=%22%23b8c4cf%22/%3E%3Crect%20x=%225%22%20y=%222%22%20width=%221%22%20height=%221%22%20fill=%22%23111%22/%3E%3Crect%20x=%226%22%20y=%222%22%20width=%224%22%20height=%221%22%20fill=%22%23b8c4cf%22/%3E%3Crect%20x=%2210%22%20y=%222%22%20width=%221%22%20height=%221%22%20fill=%22%23111%22/%3E%3Crect%20x=%2211%22%20y=%222%22%20width=%222%22%20height=%221%22%20fill=%22%23b8c4cf%22/%3E%3Crect%20x=%223%22%20y=%223%22%20width=%2210%22%20height=%221%22%20fill=%22%23b8c4cf%22/%3E%3Crect%20x=%223%22%20y=%224%22%20width=%223%22%20height=%221%22%20fill=%22%23b8c4cf%22/%3E%3Crect%20x=%226%22%20y=%224%22%20width=%224%22%20height=%221%22%20fill=%22%23111%22/%3E%3Crect%20x=%2210%22%20y=%224%22%20width=%223%22%20height=%221%22%20fill=%22%23b8c4cf%22/%3E%3Crect%20x=%223%22%20y=%225%22%20width=%2210%22%20height=%221%22%20fill=%22%23b8c4cf%22/%3E%3Crect%20x=%222%22%20y=%226%22%20width=%2212%22%20height=%221%22%20fill=%22%23b8c4cf%22/%3E%3Crect%20x=%221%22%20y=%227%22%20width=%2214%22%20height=%221%22%20fill=%22%23b8c4cf%22/%3E%3Crect%20x=%221%22%20y=%228%22%20width=%2214%22%20height=%221%22%20fill=%22%23b8c4cf%22/%3E%3Crect%20x=%221%22%20y=%229%22%20width=%222%22%20height=%221%22%20fill=%22%23b8c4cf%22/%3E%3Crect%20x=%224%22%20y=%229%22%20width=%228%22%20height=%221%22%20fill=%22%23b8c4cf%22/%3E%3Crect%20x=%2213%22%20y=%229%22%20width=%222%22%20height=%221%22%20fill=%22%23b8c4cf%22/%3E%3Crect%20x=%221%22%20y=%2210%22%20width=%222%22%20height=%221%22%20fill=%22%23b8c4cf%22/%3E%3Crect%20x=%224%22%20y=%2210%22%20width=%228%22%20height=%221%22%20fill=%22%23b8c4cf%22/%3E%3Crect%20x=%2213%22%20y=%2210%22%20width=%222%22%20height=%221%22%20fill=%22%23b8c4cf%22/%3E%3Crect%20x=%224%22%20y=%2211%22%20width=%228%22%20height=%221%22%20fill=%22%23b8c4cf%22/%3E%3Crect%20x=%224%22%20y=%2212%22%20width=%223%22%20height=%221%22%20fill=%22%23b8c4cf%22/%3E%3Crect%20x=%229%22%20y=%2212%22%20width=%223%22%20height=%221%22%20fill=%22%23b8c4cf%22/%3E%3Crect%20x=%224%22%20y=%2213%22%20width=%223%22%20height=%221%22%20fill=%22%23b8c4cf%22/%3E%3Crect%20x=%229%22%20y=%2213%22%20width=%223%22%20height=%221%22%20fill=%22%23b8c4cf%22/%3E%3Crect%20x=%223%22%20y=%2214%22%20width=%224%22%20height=%221%22%20fill=%22%23b8c4cf%22/%3E%3Crect%20x=%229%22%20y=%2214%22%20width=%224%22%20height=%221%22%20fill=%22%23b8c4cf%22/%3E%3C/svg%3E");
  background-image: radial-gradient(circle, rgba(16,24,32,0.10) 0.8px, transparent 1px);
  background-size: 22px 22px;
  position: relative;
}

/* It snows on this page. Three layers of six-armed flakes at different sizes,
   drifting down and sideways at different speeds, fixed behind everything so
   they pass behind the words, never over them. */
.t-slope::before {
  content: "";
  position: fixed;
  inset: -20% 0 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20140%20140%22%20width=%22140%22%20height=%22140%22%3E%3Cg%20transform=%22translate%2810,20%29%20scale%280.3333333333333333%29%22%3E%3Cg%20fill=%22none%22%20stroke-linecap=%22round%22%3E%3Cg%20stroke=%22rgba%28150,175,205,0.765%29%22%20stroke-width=%223.4%22%3E%3Cpath%20d=%22M12%202v20M2%2012h20M4.9%204.9l14.2%2014.2M19.1%204.9L4.9%2019.1%22/%3E%3C/g%3E%3Cg%20stroke=%22rgba%28255,255,255,0.9%29%22%20stroke-width=%221.7%22%3E%3Cpath%20d=%22M12%202v20M2%2012h20M4.9%204.9l14.2%2014.2M19.1%204.9L4.9%2019.1M12%205l-2%202M12%205l2%202M12%2019l-2-2M12%2019l2-2M5%2012l2-2M5%2012l2%202M19%2012l-2-2M19%2012l-2%202%22/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3Cg%20transform=%22translate%2870,50%29%20scale%280.3333333333333333%29%22%3E%3Cg%20fill=%22none%22%20stroke-linecap=%22round%22%3E%3Cg%20stroke=%22rgba%28150,175,205,0.765%29%22%20stroke-width=%223.4%22%3E%3Cpath%20d=%22M12%202v20M2%2012h20M4.9%204.9l14.2%2014.2M19.1%204.9L4.9%2019.1%22/%3E%3C/g%3E%3Cg%20stroke=%22rgba%28255,255,255,0.9%29%22%20stroke-width=%221.7%22%3E%3Cpath%20d=%22M12%202v20M2%2012h20M4.9%204.9l14.2%2014.2M19.1%204.9L4.9%2019.1M12%205l-2%202M12%205l2%202M12%2019l-2-2M12%2019l2-2M5%2012l2-2M5%2012l2%202M19%2012l-2-2M19%2012l-2%202%22/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3Cg%20transform=%22translate%2840,100%29%20scale%280.3333333333333333%29%22%3E%3Cg%20fill=%22none%22%20stroke-linecap=%22round%22%3E%3Cg%20stroke=%22rgba%28150,175,205,0.765%29%22%20stroke-width=%223.4%22%3E%3Cpath%20d=%22M12%202v20M2%2012h20M4.9%204.9l14.2%2014.2M19.1%204.9L4.9%2019.1%22/%3E%3C/g%3E%3Cg%20stroke=%22rgba%28255,255,255,0.9%29%22%20stroke-width=%221.7%22%3E%3Cpath%20d=%22M12%202v20M2%2012h20M4.9%204.9l14.2%2014.2M19.1%204.9L4.9%2019.1M12%205l-2%202M12%205l2%202M12%2019l-2-2M12%2019l2-2M5%2012l2-2M5%2012l2%202M19%2012l-2-2M19%2012l-2%202%22/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3Cg%20transform=%22translate%28110,90%29%20scale%280.3333333333333333%29%22%3E%3Cg%20fill=%22none%22%20stroke-linecap=%22round%22%3E%3Cg%20stroke=%22rgba%28150,175,205,0.765%29%22%20stroke-width=%223.4%22%3E%3Cpath%20d=%22M12%202v20M2%2012h20M4.9%204.9l14.2%2014.2M19.1%204.9L4.9%2019.1%22/%3E%3C/g%3E%3Cg%20stroke=%22rgba%28255,255,255,0.9%29%22%20stroke-width=%221.7%22%3E%3Cpath%20d=%22M12%202v20M2%2012h20M4.9%204.9l14.2%2014.2M19.1%204.9L4.9%2019.1M12%205l-2%202M12%205l2%202M12%2019l-2-2M12%2019l2-2M5%2012l2-2M5%2012l2%202M19%2012l-2-2M19%2012l-2%202%22/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3Cg%20transform=%22translate%2890,130%29%20scale%280.3333333333333333%29%22%3E%3Cg%20fill=%22none%22%20stroke-linecap=%22round%22%3E%3Cg%20stroke=%22rgba%28150,175,205,0.765%29%22%20stroke-width=%223.4%22%3E%3Cpath%20d=%22M12%202v20M2%2012h20M4.9%204.9l14.2%2014.2M19.1%204.9L4.9%2019.1%22/%3E%3C/g%3E%3Cg%20stroke=%22rgba%28255,255,255,0.9%29%22%20stroke-width=%221.7%22%3E%3Cpath%20d=%22M12%202v20M2%2012h20M4.9%204.9l14.2%2014.2M19.1%204.9L4.9%2019.1M12%205l-2%202M12%205l2%202M12%2019l-2-2M12%2019l2-2M5%2012l2-2M5%2012l2%202M19%2012l-2-2M19%2012l-2%202%22/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3Cg%20transform=%22translate%28125,15%29%20scale%280.3333333333333333%29%22%3E%3Cg%20fill=%22none%22%20stroke-linecap=%22round%22%3E%3Cg%20stroke=%22rgba%28150,175,205,0.765%29%22%20stroke-width=%223.4%22%3E%3Cpath%20d=%22M12%202v20M2%2012h20M4.9%204.9l14.2%2014.2M19.1%204.9L4.9%2019.1%22/%3E%3C/g%3E%3Cg%20stroke=%22rgba%28255,255,255,0.9%29%22%20stroke-width=%221.7%22%3E%3Cpath%20d=%22M12%202v20M2%2012h20M4.9%204.9l14.2%2014.2M19.1%204.9L4.9%2019.1M12%205l-2%202M12%205l2%202M12%2019l-2-2M12%2019l2-2M5%2012l2-2M5%2012l2%202M19%2012l-2-2M19%2012l-2%202%22/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20190%20190%22%20width=%22190%22%20height=%22190%22%3E%3Cg%20transform=%22translate%2820,30%29%20scale%280.4583333333333333%29%22%3E%3Cg%20fill=%22none%22%20stroke-linecap=%22round%22%3E%3Cg%20stroke=%22rgba%28150,175,205,0.8075%29%22%20stroke-width=%223.4%22%3E%3Cpath%20d=%22M12%202v20M2%2012h20M4.9%204.9l14.2%2014.2M19.1%204.9L4.9%2019.1%22/%3E%3C/g%3E%3Cg%20stroke=%22rgba%28255,255,255,0.95%29%22%20stroke-width=%221.7%22%3E%3Cpath%20d=%22M12%202v20M2%2012h20M4.9%204.9l14.2%2014.2M19.1%204.9L4.9%2019.1M12%205l-2%202M12%205l2%202M12%2019l-2-2M12%2019l2-2M5%2012l2-2M5%2012l2%202M19%2012l-2-2M19%2012l-2%202%22/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3Cg%20transform=%22translate%28110,80%29%20scale%280.4583333333333333%29%22%3E%3Cg%20fill=%22none%22%20stroke-linecap=%22round%22%3E%3Cg%20stroke=%22rgba%28150,175,205,0.8075%29%22%20stroke-width=%223.4%22%3E%3Cpath%20d=%22M12%202v20M2%2012h20M4.9%204.9l14.2%2014.2M19.1%204.9L4.9%2019.1%22/%3E%3C/g%3E%3Cg%20stroke=%22rgba%28255,255,255,0.95%29%22%20stroke-width=%221.7%22%3E%3Cpath%20d=%22M12%202v20M2%2012h20M4.9%204.9l14.2%2014.2M19.1%204.9L4.9%2019.1M12%205l-2%202M12%205l2%202M12%2019l-2-2M12%2019l2-2M5%2012l2-2M5%2012l2%202M19%2012l-2-2M19%2012l-2%202%22/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3Cg%20transform=%22translate%2860,150%29%20scale%280.4583333333333333%29%22%3E%3Cg%20fill=%22none%22%20stroke-linecap=%22round%22%3E%3Cg%20stroke=%22rgba%28150,175,205,0.8075%29%22%20stroke-width=%223.4%22%3E%3Cpath%20d=%22M12%202v20M2%2012h20M4.9%204.9l14.2%2014.2M19.1%204.9L4.9%2019.1%22/%3E%3C/g%3E%3Cg%20stroke=%22rgba%28255,255,255,0.95%29%22%20stroke-width=%221.7%22%3E%3Cpath%20d=%22M12%202v20M2%2012h20M4.9%204.9l14.2%2014.2M19.1%204.9L4.9%2019.1M12%205l-2%202M12%205l2%202M12%2019l-2-2M12%2019l2-2M5%2012l2-2M5%2012l2%202M19%2012l-2-2M19%2012l-2%202%22/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3Cg%20transform=%22translate%28160,120%29%20scale%280.4583333333333333%29%22%3E%3Cg%20fill=%22none%22%20stroke-linecap=%22round%22%3E%3Cg%20stroke=%22rgba%28150,175,205,0.8075%29%22%20stroke-width=%223.4%22%3E%3Cpath%20d=%22M12%202v20M2%2012h20M4.9%204.9l14.2%2014.2M19.1%204.9L4.9%2019.1%22/%3E%3C/g%3E%3Cg%20stroke=%22rgba%28255,255,255,0.95%29%22%20stroke-width=%221.7%22%3E%3Cpath%20d=%22M12%202v20M2%2012h20M4.9%204.9l14.2%2014.2M19.1%204.9L4.9%2019.1M12%205l-2%202M12%205l2%202M12%2019l-2-2M12%2019l2-2M5%2012l2-2M5%2012l2%202M19%2012l-2-2M19%2012l-2%202%22/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3Cg%20transform=%22translate%28140,20%29%20scale%280.4583333333333333%29%22%3E%3Cg%20fill=%22none%22%20stroke-linecap=%22round%22%3E%3Cg%20stroke=%22rgba%28150,175,205,0.8075%29%22%20stroke-width=%223.4%22%3E%3Cpath%20d=%22M12%202v20M2%2012h20M4.9%204.9l14.2%2014.2M19.1%204.9L4.9%2019.1%22/%3E%3C/g%3E%3Cg%20stroke=%22rgba%28255,255,255,0.95%29%22%20stroke-width=%221.7%22%3E%3Cpath%20d=%22M12%202v20M2%2012h20M4.9%204.9l14.2%2014.2M19.1%204.9L4.9%2019.1M12%205l-2%202M12%205l2%202M12%2019l-2-2M12%2019l2-2M5%2012l2-2M5%2012l2%202M19%2012l-2-2M19%2012l-2%202%22/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20310%20310%22%20width=%22310%22%20height=%22310%22%3E%3Cg%20transform=%22translate%2840,50%29%20scale%280.75%29%22%3E%3Cg%20fill=%22none%22%20stroke-linecap=%22round%22%3E%3Cg%20stroke=%22rgba%28150,175,205,0.765%29%22%20stroke-width=%223.4%22%3E%3Cpath%20d=%22M12%202v20M2%2012h20M4.9%204.9l14.2%2014.2M19.1%204.9L4.9%2019.1%22/%3E%3C/g%3E%3Cg%20stroke=%22rgba%28255,255,255,0.9%29%22%20stroke-width=%221.7%22%3E%3Cpath%20d=%22M12%202v20M2%2012h20M4.9%204.9l14.2%2014.2M19.1%204.9L4.9%2019.1M12%205l-2%202M12%205l2%202M12%2019l-2-2M12%2019l2-2M5%2012l2-2M5%2012l2%202M19%2012l-2-2M19%2012l-2%202%22/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3Cg%20transform=%22translate%28230,140%29%20scale%280.75%29%22%3E%3Cg%20fill=%22none%22%20stroke-linecap=%22round%22%3E%3Cg%20stroke=%22rgba%28150,175,205,0.765%29%22%20stroke-width=%223.4%22%3E%3Cpath%20d=%22M12%202v20M2%2012h20M4.9%204.9l14.2%2014.2M19.1%204.9L4.9%2019.1%22/%3E%3C/g%3E%3Cg%20stroke=%22rgba%28255,255,255,0.9%29%22%20stroke-width=%221.7%22%3E%3Cpath%20d=%22M12%202v20M2%2012h20M4.9%204.9l14.2%2014.2M19.1%204.9L4.9%2019.1M12%205l-2%202M12%205l2%202M12%2019l-2-2M12%2019l2-2M5%2012l2-2M5%2012l2%202M19%2012l-2-2M19%2012l-2%202%22/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3Cg%20transform=%22translate%28120,260%29%20scale%280.75%29%22%3E%3Cg%20fill=%22none%22%20stroke-linecap=%22round%22%3E%3Cg%20stroke=%22rgba%28150,175,205,0.765%29%22%20stroke-width=%223.4%22%3E%3Cpath%20d=%22M12%202v20M2%2012h20M4.9%204.9l14.2%2014.2M19.1%204.9L4.9%2019.1%22/%3E%3C/g%3E%3Cg%20stroke=%22rgba%28255,255,255,0.9%29%22%20stroke-width=%221.7%22%3E%3Cpath%20d=%22M12%202v20M2%2012h20M4.9%204.9l14.2%2014.2M19.1%204.9L4.9%2019.1M12%205l-2%202M12%205l2%202M12%2019l-2-2M12%2019l2-2M5%2012l2-2M5%2012l2%202M19%2012l-2-2M19%2012l-2%202%22/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3Cg%20transform=%22translate%28270,40%29%20scale%280.75%29%22%3E%3Cg%20fill=%22none%22%20stroke-linecap=%22round%22%3E%3Cg%20stroke=%22rgba%28150,175,205,0.765%29%22%20stroke-width=%223.4%22%3E%3Cpath%20d=%22M12%202v20M2%2012h20M4.9%204.9l14.2%2014.2M19.1%204.9L4.9%2019.1%22/%3E%3C/g%3E%3Cg%20stroke=%22rgba%28255,255,255,0.9%29%22%20stroke-width=%221.7%22%3E%3Cpath%20d=%22M12%202v20M2%2012h20M4.9%204.9l14.2%2014.2M19.1%204.9L4.9%2019.1M12%205l-2%202M12%205l2%202M12%2019l-2-2M12%2019l2-2M5%2012l2-2M5%2012l2%202M19%2012l-2-2M19%2012l-2%202%22/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20520%20520%22%20width=%22520%22%20height=%22520%22%3E%3Cg%20transform=%22translate%2890,90%29%20scale%281.1666666666666667%29%22%3E%3Cg%20fill=%22none%22%20stroke-linecap=%22round%22%3E%3Cg%20stroke=%22rgba%28150,175,205,0.7224999999999999%29%22%20stroke-width=%223.4%22%3E%3Cpath%20d=%22M12%202v20M2%2012h20M4.9%204.9l14.2%2014.2M19.1%204.9L4.9%2019.1%22/%3E%3C/g%3E%3Cg%20stroke=%22rgba%28255,255,255,0.85%29%22%20stroke-width=%221.7%22%3E%3Cpath%20d=%22M12%202v20M2%2012h20M4.9%204.9l14.2%2014.2M19.1%204.9L4.9%2019.1M12%205l-2%202M12%205l2%202M12%2019l-2-2M12%2019l2-2M5%2012l2-2M5%2012l2%202M19%2012l-2-2M19%2012l-2%202%22/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3Cg%20transform=%22translate%28380,300%29%20scale%281.1666666666666667%29%22%3E%3Cg%20fill=%22none%22%20stroke-linecap=%22round%22%3E%3Cg%20stroke=%22rgba%28150,175,205,0.7224999999999999%29%22%20stroke-width=%223.4%22%3E%3Cpath%20d=%22M12%202v20M2%2012h20M4.9%204.9l14.2%2014.2M19.1%204.9L4.9%2019.1%22/%3E%3C/g%3E%3Cg%20stroke=%22rgba%28255,255,255,0.85%29%22%20stroke-width=%221.7%22%3E%3Cpath%20d=%22M12%202v20M2%2012h20M4.9%204.9l14.2%2014.2M19.1%204.9L4.9%2019.1M12%205l-2%202M12%205l2%202M12%2019l-2-2M12%2019l2-2M5%2012l2-2M5%2012l2%202M19%2012l-2-2M19%2012l-2%202%22/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3Cg%20transform=%22translate%28240,460%29%20scale%281.1666666666666667%29%22%3E%3Cg%20fill=%22none%22%20stroke-linecap=%22round%22%3E%3Cg%20stroke=%22rgba%28150,175,205,0.7224999999999999%29%22%20stroke-width=%223.4%22%3E%3Cpath%20d=%22M12%202v20M2%2012h20M4.9%204.9l14.2%2014.2M19.1%204.9L4.9%2019.1%22/%3E%3C/g%3E%3Cg%20stroke=%22rgba%28255,255,255,0.85%29%22%20stroke-width=%221.7%22%3E%3Cpath%20d=%22M12%202v20M2%2012h20M4.9%204.9l14.2%2014.2M19.1%204.9L4.9%2019.1M12%205l-2%202M12%205l2%202M12%2019l-2-2M12%2019l2-2M5%2012l2-2M5%2012l2%202M19%2012l-2-2M19%2012l-2%202%22/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 140px 140px, 190px 190px, 310px 310px, 520px 520px;
  background-position: 20px 0, 0 0, 90px 60px, 160px 140px;
  animation: snowfall 26s linear infinite;
}

.t-slope { overflow-x: clip; }

.t-slope .topmark, .t-slope main, .t-slope .foot { position: relative; z-index: 1; }

@keyframes snowfall {
  to { background-position: -30px 140px, 70px 190px, 40px 310px, -60px 520px; }
}

.t-slope .prose { max-width: 42rem; }

/* The banner is the resort's entrance sign: a big wood board with a mountain
   crest, snow piled along its top edge, on two posts in the snow. */
.t-slope .banner {
  position: relative;
  display: block;
  margin: 2.5rem 0 5.5rem;
  padding: 2.4rem 1.6rem 1.6rem;
  border: 4px solid #2b180a;
  border-radius: 10px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 3px, transparent 3px 10px),
    linear-gradient(#7a4a22, #4a2a12);
  box-shadow: 0 8px 0 #2b180a, 0 14px 30px rgba(16,24,32,0.25);
  text-align: center;
}
.t-slope .banner::before {
  content: "";
  position: absolute;
  left: -0.5rem;
  right: -0.5rem;
  top: -0.7rem;
  height: 1.6rem;
  background: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20200%2020%22%20preserveAspectRatio=%22none%22%3E%3Cpath%20d=%22M0%200h200v6c-8%200-10%209-18%209s-10-9-18-9-10%2011-18%2011-10-8-18-8-10%2010-18%2010-10-9-18-9-10%208-18%208-10-10-18-10-10%209-18%209-10-7-18-7-10%208-18%208V0z%22%20fill=%22%23fff%22/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  filter: drop-shadow(0 2px 0 rgba(16,24,32,0.15));
}
/* Two posts and their mounds. */
.t-slope .banner::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 100%;
  height: 3.6rem;
  background:
    linear-gradient(90deg, #5a3416, #7a4a22 45%, #4a2a12) 0 0 / 1.1rem 100% no-repeat,
    linear-gradient(90deg, #5a3416, #7a4a22 45%, #4a2a12) 100% 0 / 1.1rem 100% no-repeat,
    radial-gradient(ellipse at 50% 100%, #fff 0, #e6edf5 55%, transparent 56%) -1.6rem 100% / 4.5rem 1.8rem no-repeat,
    radial-gradient(ellipse at 50% 100%, #fff 0, #e6edf5 55%, transparent 56%) calc(100% + 1.6rem) 100% / 4.5rem 1.8rem no-repeat;
  z-index: -1;
}
.t-slope .banner__art {
  display: block;
  width: 5.5rem;
  height: 3.4rem;
  margin: 0 auto 0.8rem;
  background: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2064%2040%22%3E%3Cpolygon%20points=%222,38%2018,10%2026,22%2034,6%2046,24%2052,16%2062,38%22%20fill=%22%23dfe7f1%22/%3E%3Cpolygon%20points=%2218,10%2022,16%2014,16%22%20fill=%22%23fff%22/%3E%3Cpolygon%20points=%2234,6%2039,14%2029,14%22%20fill=%22%23fff%22/%3E%3Cpolygon%20points=%2252,16%2055,21%2049,21%22%20fill=%22%23fff%22/%3E%3Cpolygon%20points=%222,38%2062,38%2062,40%202,40%22%20fill=%22%232e7d32%22/%3E%3Cpolygon%20points=%228,38%2012,26%2016,38%22%20fill=%22%232e7d32%22/%3E%3Cpolygon%20points=%2254,38%2058,28%2062,38%22%20fill=%22%232e7d32%22/%3E%3C/svg%3E") center / contain no-repeat;
}
.t-slope .banner__art svg { display: none; }
.t-slope .banner__meta { padding: 0; }
.t-slope .article-title {
  font-family: "Haettenschweiler", "Arial Narrow Bold", "Impact", "Franklin Gothic Bold", sans-serif;
  font-weight: 400;
  font-size: clamp(2.2rem, 7vw, 3.8rem);
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #fff4dc;
  text-shadow: 0 3px 0 #2b180a, 0 0 1px #2b180a;
  margin: 0 0 0.9rem;
}
.t-slope .banner .byline {
  display: inline-block;
  padding: 0.35rem 0.9rem;
  border: 2px solid #fff4dc;
  color: #fff4dc;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.t-slope .byline a { color: #ffe28a; }
.t-slope .banner .byline time { color: #fff4dc; }

/* Section headers are trail signs: a board with the marker painted on it and
   an arrow end, on a wooden post, planted in a mound of snow. */
.t-slope .prose h2 {
  position: relative;
  display: block;
  margin: 6.5rem 0 5rem;
  padding: 0;
  border: 0;
  font-family: Tahoma, "Trebuchet MS", Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(1.25rem, 3.6vw, 1.7rem);
  line-height: 1.15;
  text-transform: none;
  letter-spacing: -0.01em;
}

/* The board is the anchor, so the post and the mound can sit outside its clip. */
.t-slope .prose h2 > a.anchor {
  display: inline-block;
  max-width: calc(100% - 1rem);
  padding: 0.85rem 2.9rem 0.85rem 1.1rem;
  color: #fff !important;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 3px, transparent 3px 9px),
    linear-gradient(#6b3f1f, #4a2a12);
  border: 3px solid #2b180a;
  clip-path: polygon(0 0, calc(100% - 1.5rem) 0, 100% 50%, calc(100% - 1.5rem) 100%, 0 100%);
  text-shadow: 0 2px 0 rgba(0,0,0,0.5);
  padding-left: 3.6rem;
}
.t-slope .prose h2 > a.anchor::after { content: none; }
.t-slope .prose h2 > a.anchor::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 50%;
  width: 1.8rem;
  height: 1.8rem;
  margin-top: -0.9rem;
  background: var(--marker) center / contain no-repeat;
}
.t-slope .prose h2 > a.anchor { position: relative; }

/* The post. */
.t-slope .prose h2::before {
  content: "";
  position: absolute;
  left: 2.2rem;
  top: 100%;
  width: 0.9rem;
  height: 3.2rem;
  background: linear-gradient(90deg, #5a3416, #7a4a22 45%, #4a2a12);
  border: 2px solid #2b180a;
  border-top: 0;
  z-index: -1;
}
/* The mound. */
.t-slope .prose h2::after {
  content: "";
  position: absolute;
  left: 0.4rem;
  top: calc(100% + 2.4rem);
  width: 4.8rem;
  height: 1.7rem;
  border-radius: 50%;
  background: radial-gradient(ellipse at 40% 35%, #fff, #e6edf5 70%, #cfd9e6);
  box-shadow: 0 3px 0 rgba(16,24,32,0.15);
}

.t-slope .prose > h2:nth-of-type(1) { --marker: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2016%2016%22%3E%3Ccircle%20cx=%228%22%20cy=%228%22%20r=%227%22%20fill=%22%232e9e4f%22%20stroke=%22%23fff%22%20stroke-width=%221.5%22/%3E%3C/svg%3E"); }
.t-slope .prose > h2:nth-of-type(2) { --marker: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2016%2016%22%3E%3Crect%20x=%221.5%22%20y=%221.5%22%20width=%2213%22%20height=%2213%22%20fill=%22%232266d1%22%20stroke=%22%23fff%22%20stroke-width=%221.5%22/%3E%3C/svg%3E"); }
.t-slope .prose > h2:nth-of-type(3) { --marker: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2016%2016%22%3E%3Cpolygon%20points=%228,1%2015,8%208,15%201,8%22%20fill=%22%23111%22%20stroke=%22%23fff%22%20stroke-width=%221.5%22/%3E%3C/svg%3E"); }
.t-slope .prose > h2:nth-of-type(4) { --marker: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2032%2016%22%3E%3Cpolygon%20points=%228,1%2015,8%208,15%201,8%22%20fill=%22%23111%22%20stroke=%22%23fff%22%20stroke-width=%221.5%22/%3E%3Cpolygon%20points=%2224,1%2031,8%2024,15%2017,8%22%20fill=%22%23111%22%20stroke=%22%23fff%22%20stroke-width=%221.5%22/%3E%3C/svg%3E"); }
.t-slope .prose > h2:nth-of-type(4) > a.anchor::before { width: 3.4rem; }
.t-slope .prose > h2:nth-of-type(4) > a.anchor { padding-left: 5.2rem; }
.t-slope .prose > h2:nth-of-type(5) { --marker: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2016%2016%22%3E%3Cpolygon%20points=%228,1%2015,7%2013,7%2013,15%203,15%203,7%201,7%22%20fill=%22%238a5a2b%22%20stroke=%22%23fff%22%20stroke-width=%221.2%22/%3E%3Crect%20x=%226.5%22%20y=%2210%22%20width=%223%22%20height=%225%22%20fill=%22%23fff%22/%3E%3C/svg%3E"); }
.t-slope .prose > h2:nth-of-type(6) { --marker: var(--yeti); }
.t-slope .prose > h2:nth-of-type(6) > a.anchor { background: repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 3px, transparent 3px 9px), linear-gradient(#5a1a1a, #3a0e0e); border-color: #220606; }

.t-slope .prose p.dek { color: var(--muted); }
.t-slope .prose p.lede { border-left-color: var(--accent); }
.t-slope .prose a { color: var(--accent); }
.t-slope .prose a:hover { background: var(--accent); color: #fff; }
.t-slope code { background: #e3e9f2; color: var(--ink); }
.t-slope pre { background: #101820; border-color: var(--rule); color: #f3f6fa; }
.t-slope table th { background: #e3e9f2; color: var(--ink); }
.t-slope table th, .t-slope table td { border-color: #b8c4cf; }
.t-slope .step:not(.snow) figcaption { color: var(--muted); }
.t-slope .foot { color: var(--ink); }

/* Card preview: a slope with trees and the ball. */
.pv--slope { background: #f3f6fa; background-image: radial-gradient(circle, rgba(16,24,32,0.12) 0.8px, transparent 1px); background-size: 10px 10px; }
.pv--slope .pv__tree { position: absolute; width: 16%; aspect-ratio: 1; background: var(--tree, url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2016%2016%22%20shape-rendering=%22crispEdges%22%3E%3Crect%20x=%227%22%20y=%220%22%20width=%221%22%20height=%221%22%20fill=%22%232e7d32%22/%3E%3Crect%20x=%226%22%20y=%221%22%20width=%223%22%20height=%221%22%20fill=%22%232e7d32%22/%3E%3Crect%20x=%225%22%20y=%222%22%20width=%225%22%20height=%221%22%20fill=%22%232e7d32%22/%3E%3Crect%20x=%226%22%20y=%223%22%20width=%223%22%20height=%221%22%20fill=%22%232e7d32%22/%3E%3Crect%20x=%225%22%20y=%224%22%20width=%225%22%20height=%221%22%20fill=%22%232e7d32%22/%3E%3Crect%20x=%224%22%20y=%225%22%20width=%227%22%20height=%221%22%20fill=%22%232e7d32%22/%3E%3Crect%20x=%225%22%20y=%226%22%20width=%225%22%20height=%221%22%20fill=%22%232e7d32%22/%3E%3Crect%20x=%224%22%20y=%227%22%20width=%227%22%20height=%221%22%20fill=%22%232e7d32%22/%3E%3Crect%20x=%223%22%20y=%228%22%20width=%229%22%20height=%221%22%20fill=%22%232e7d32%22/%3E%3Crect%20x=%222%22%20y=%229%22%20width=%2211%22%20height=%221%22%20fill=%22%232e7d32%22/%3E%3Crect%20x=%227%22%20y=%2210%22%20width=%221%22%20height=%221%22%20fill=%22%235d3a1a%22/%3E%3Crect%20x=%227%22%20y=%2211%22%20width=%221%22%20height=%221%22%20fill=%22%235d3a1a%22/%3E%3Crect%20x=%226%22%20y=%2212%22%20width=%223%22%20height=%221%22%20fill=%22%235d3a1a%22/%3E%3C/svg%3E")) center / contain no-repeat; }
.pv--slope .pv__tree--1 { left: 8%; top: 12%; }
.pv--slope .pv__tree--2 { left: 70%; top: 30%; }
.pv--slope .pv__tree--3 { left: 22%; top: 60%; }
.pv--slope .pv__ball { position: absolute; left: 48%; top: 40%; width: 26%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #cfcfcf 60%, #8e8e8e); box-shadow: 0 5px 10px rgba(0,0,0,0.35); }
.pv--slope .pv__yeti { position: absolute; right: 6%; bottom: 6%; width: 18%; aspect-ratio: 1; background: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2016%2016%22%20shape-rendering=%22crispEdges%22%3E%3Crect%20x=%225%22%20y=%220%22%20width=%226%22%20height=%221%22%20fill=%22%23b8c4cf%22/%3E%3Crect%20x=%224%22%20y=%221%22%20width=%228%22%20height=%221%22%20fill=%22%23b8c4cf%22/%3E%3Crect%20x=%223%22%20y=%222%22%20width=%222%22%20height=%221%22%20fill=%22%23b8c4cf%22/%3E%3Crect%20x=%225%22%20y=%222%22%20width=%221%22%20height=%221%22%20fill=%22%23111%22/%3E%3Crect%20x=%226%22%20y=%222%22%20width=%224%22%20height=%221%22%20fill=%22%23b8c4cf%22/%3E%3Crect%20x=%2210%22%20y=%222%22%20width=%221%22%20height=%221%22%20fill=%22%23111%22/%3E%3Crect%20x=%2211%22%20y=%222%22%20width=%222%22%20height=%221%22%20fill=%22%23b8c4cf%22/%3E%3Crect%20x=%223%22%20y=%223%22%20width=%2210%22%20height=%221%22%20fill=%22%23b8c4cf%22/%3E%3Crect%20x=%223%22%20y=%224%22%20width=%223%22%20height=%221%22%20fill=%22%23b8c4cf%22/%3E%3Crect%20x=%226%22%20y=%224%22%20width=%224%22%20height=%221%22%20fill=%22%23111%22/%3E%3Crect%20x=%2210%22%20y=%224%22%20width=%223%22%20height=%221%22%20fill=%22%23b8c4cf%22/%3E%3Crect%20x=%223%22%20y=%225%22%20width=%2210%22%20height=%221%22%20fill=%22%23b8c4cf%22/%3E%3Crect%20x=%222%22%20y=%226%22%20width=%2212%22%20height=%221%22%20fill=%22%23b8c4cf%22/%3E%3Crect%20x=%221%22%20y=%227%22%20width=%2214%22%20height=%221%22%20fill=%22%23b8c4cf%22/%3E%3Crect%20x=%221%22%20y=%228%22%20width=%2214%22%20height=%221%22%20fill=%22%23b8c4cf%22/%3E%3Crect%20x=%221%22%20y=%229%22%20width=%222%22%20height=%221%22%20fill=%22%23b8c4cf%22/%3E%3Crect%20x=%224%22%20y=%229%22%20width=%228%22%20height=%221%22%20fill=%22%23b8c4cf%22/%3E%3Crect%20x=%2213%22%20y=%229%22%20width=%222%22%20height=%221%22%20fill=%22%23b8c4cf%22/%3E%3Crect%20x=%221%22%20y=%2210%22%20width=%222%22%20height=%221%22%20fill=%22%23b8c4cf%22/%3E%3Crect%20x=%224%22%20y=%2210%22%20width=%228%22%20height=%221%22%20fill=%22%23b8c4cf%22/%3E%3Crect%20x=%2213%22%20y=%2210%22%20width=%222%22%20height=%221%22%20fill=%22%23b8c4cf%22/%3E%3Crect%20x=%224%22%20y=%2211%22%20width=%228%22%20height=%221%22%20fill=%22%23b8c4cf%22/%3E%3Crect%20x=%224%22%20y=%2212%22%20width=%223%22%20height=%221%22%20fill=%22%23b8c4cf%22/%3E%3Crect%20x=%229%22%20y=%2212%22%20width=%223%22%20height=%221%22%20fill=%22%23b8c4cf%22/%3E%3Crect%20x=%224%22%20y=%2213%22%20width=%223%22%20height=%221%22%20fill=%22%23b8c4cf%22/%3E%3Crect%20x=%229%22%20y=%2213%22%20width=%223%22%20height=%221%22%20fill=%22%23b8c4cf%22/%3E%3Crect%20x=%223%22%20y=%2214%22%20width=%224%22%20height=%221%22%20fill=%22%23b8c4cf%22/%3E%3Crect%20x=%229%22%20y=%2214%22%20width=%224%22%20height=%221%22%20fill=%22%23b8c4cf%22/%3E%3C/svg%3E") center / contain no-repeat; }
.pv--slope .pv__bar { position: absolute; top: 0; left: 0; right: 0; height: 14%; background: #000080; }

/* ---------------------------------------------- SPA article: the props */

.cast { margin: 0 0 4rem; padding: 1.25rem 1.4rem; border: 1px solid var(--rule); background: var(--panel); }
.t-slope .cast { display: block; padding: 0; border: 0; box-shadow: none; background: none; overflow: visible; }
.t-slope .cast__head { margin: 0 0 0.6rem; }
.t-slope .cast dl { grid-template-columns: 1fr 1fr; gap: 0.2rem 1.5rem; }
.t-slope .cast dd { margin-bottom: 0.7rem; }
@media (max-width: 34rem) { .t-slope .cast dl { grid-template-columns: 1fr; } }
.tmap { display: block; width: min(56rem, 100vw - 2.5rem); height: auto; margin: 0.5rem 0 1rem 50%; translate: -50% 0; overflow: visible; }
.tmap text { font-family: var(--ui); fill: var(--ink); paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; }
.tmap .tmap__run { font-size: 17px; font-weight: 700; letter-spacing: 0.02em; }
.tmap .tmap__lbl { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; }
.tmap .tmap__lbl--red { fill: #b3111a; }
@media (max-width: 44rem) { .tmap text { display: none; } }
.cast__head { margin: 0 0 0.75rem; font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted); }
.cast dl { display: grid; grid-template-columns: 8rem 1fr; gap: 0.5rem 1rem; margin: 0; }
.cast dt { font-family: var(--ui); font-weight: 700; color: var(--ink); }
.cast dd { margin: 0; font-family: var(--prose); font-size: 1rem; line-height: 1.5; color: var(--muted); }
@media (max-width: 34rem) { .cast dl { grid-template-columns: 1fr; gap: 0.15rem 0; } .cast dd { margin-bottom: 0.6rem; } }

/* The snowball: stationary on the hill, spinning and bouncing, with the junk
   orbiting it. Grows act by act. Sized in container units so it scales down
   to a phone; the flat list stays under it there for reading. */
.snow { display: block; container-type: inline-size; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.snow--1 { --size: clamp(4rem, 9cqw, 8rem);  --orbit: clamp(4.5rem, 10cqw, 9rem); }
.snow--2 { --size: clamp(5rem, 12cqw, 11rem); --orbit: clamp(5.5rem, 13cqw, 12rem); }
.snow--3 { --size: clamp(6rem, 15cqw, 14rem); --orbit: clamp(6.5rem, 16cqw, 15rem); }
.snow--4 { --size: clamp(7rem, 18cqw, 17rem); --orbit: clamp(7.5rem, 19cqw, 18rem); }

.snow__scene {
  position: relative;
  display: block;
  height: calc(var(--orbit) * 2 + clamp(6rem, 12cqw, 10rem));
  margin: 0 0 1rem;
  overflow: hidden;
  border: 3px solid var(--rule);
  border-left: 0;
  border-right: 0;
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20400%20120%22%20preserveAspectRatio=%22none%22%3E%3Cpolygon%20points=%220,120%200,80%2045,40%2090,85%20130,30%20175,75%20215,45%20260,95%20305,25%20350,70%20400,50%20400,120%22%20fill=%22%23c9d6e6%22/%3E%3Cpolygon%20points=%220,120%200,95%2060,60%20110,100%20160,55%20210,90%20250,65%20300,105%20345,60%20400,85%20400,120%22%20fill=%22%23dfe7f1%22/%3E%3Cpolygon%20points=%22122,42%20130,30%20138,42%22%20fill=%22%23fff%22/%3E%3Cpolygon%20points=%22297,37%20305,25%20313,37%22%20fill=%22%23fff%22/%3E%3Cpolygon%20points=%2237,52%2045,40%2053,52%22%20fill=%22%23fff%22/%3E%3C/svg%3E") 0 8% / 100% 34% no-repeat,
    linear-gradient(#bcd4f0 0, #e6eef8 30%, #fbfcfe 42%, #fbfcfe 100%);
}
/* The slope itself: drifts and a faint sparkle. */
.snow__hill {
  position: absolute;
  inset: 40% 0 0;
  background:
    radial-gradient(ellipse 60% 30% at 20% 30%, rgba(210,222,238,0.55), transparent 70%),
    radial-gradient(ellipse 50% 28% at 75% 65%, rgba(210,222,238,0.55), transparent 70%),
    radial-gradient(circle, rgba(255,255,255,0.9) 0.8px, transparent 1.2px) 0 0 / 14px 14px,
    linear-gradient(#fbfcfe, #eef3f9);
}
/* Sun. */
.snow__scene::before {
  content: "";
  position: absolute;
  right: 10%;
  top: 7%;
  width: clamp(2.5rem, 5cqw, 5rem);
  height: clamp(2.5rem, 5cqw, 5rem);
  border-radius: 50%;
  background: radial-gradient(circle, #fff6c8, #ffe28a 60%, rgba(255,226,138,0) 62%);
  box-shadow: 0 0 4rem rgba(255,226,138,0.7);
}
/* Speed trail behind the ball. */
.snow__roll::before {
  content: "";
  position: absolute;
  right: 60%;
  top: 55%;
  width: 60vw;
  height: 22%;
  background: repeating-linear-gradient(90deg, rgba(120,140,165,0.28) 0 1.2rem, transparent 1.2rem 2.4rem);
  mask: linear-gradient(90deg, transparent, #000 85%);
  -webkit-mask: linear-gradient(90deg, transparent, #000 85%);
  animation: snow-trail 0.7s linear infinite;
  transform: skewY(-6deg);
}
.snow__hill::before, .snow__hill::after, .snow__tree {
  content: "";
  position: absolute;
  width: clamp(2rem, 5cqw, 5rem);
  height: clamp(2rem, 5cqw, 5rem);
  background: var(--tree) center / contain no-repeat;
}
.snow__hill::before { left: 6%; top: 4%; opacity: 0.85; }
.snow__hill::after { right: 8%; bottom: 10%; width: clamp(2.5rem, 7cqw, 7rem); height: clamp(2.5rem, 7cqw, 7rem); }
.snow__tree--a { left: 18%; bottom: 6%; width: clamp(2.5rem, 7cqw, 7rem); height: clamp(2.5rem, 7cqw, 7rem); }
.snow__tree--b { right: 24%; top: 42%; width: clamp(1.2rem, 3cqw, 3rem); height: clamp(1.2rem, 3cqw, 3rem); opacity: 0.8; }
.snow__tree--c { left: 36%; top: 41%; width: clamp(1rem, 2.5cqw, 2.5rem); height: clamp(1rem, 2.5cqw, 2.5rem); opacity: 0.75; }
.snow__tree--d { left: 4%; bottom: 30%; width: clamp(2rem, 5cqw, 5rem); height: clamp(2rem, 5cqw, 5rem); }
.snow__skier {
  position: absolute;
  left: 12%;
  bottom: 22%;
  width: clamp(2rem, 4.5cqw, 4.5rem);
  height: clamp(2rem, 4.5cqw, 4.5rem);
  background: var(--skier) center / contain no-repeat;
  animation: snow-skier 1.15s ease-in-out infinite;
}
.snow__yeti {
  position: absolute;
  right: 5%;
  bottom: 4%;
  width: clamp(4rem, 11cqw, 11rem);
  height: clamp(4rem, 11cqw, 11rem);
  filter: drop-shadow(0 4px 0 rgba(16,24,32,0.2));
  background: var(--yeti) center / contain no-repeat;
  animation: snow-yeti 0.9s steps(2) infinite;
}
.snow__roll {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--size);
  height: var(--size);
  margin: calc(var(--size) / -2) 0 0 calc(var(--size) / -2);
  animation: snow-bounce 1.15s ease-in-out infinite;
}
.snow__ball {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,0.95), rgba(255,255,255,0) 45%),
    radial-gradient(circle at 62% 70%, rgba(0,0,0,0.14) 0 7%, transparent 8%),
    radial-gradient(circle at 25% 65%, rgba(0,0,0,0.16) 0 5%, transparent 6%),
    radial-gradient(circle at 70% 30%, rgba(0,0,0,0.12) 0 6%, transparent 7%),
    radial-gradient(circle at 50% 18%, rgba(0,0,0,0.10) 0 4%, transparent 5%),
    radial-gradient(circle at 45% 45%, #f4f4f4, #cfcfcf 60%, #8e8e8e);
  box-shadow: 0 12px 26px rgba(0,0,0,0.45), inset -10px -12px 22px rgba(0,0,0,0.18);
  animation: snow-spin 2.6s linear infinite;
}
.snow__ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: snow-spin 9s linear infinite;
}
.snow__ring li {
  position: absolute;
  left: 0;
  top: 0;
  transform: rotate(calc(var(--i) / var(--n) * 360deg)) translateY(calc(-1 * var(--orbit)));
}
.snow__ring li:nth-child(even) { transform: rotate(calc(var(--i) / var(--n) * 360deg)) translateY(calc(-1 * var(--orbit) - clamp(1rem, 2.5cqw, 2.4rem))); }
.snow__ring li span {
  display: block;
  /* Undo the placement angle, then the ring's spin, so labels stay upright. */
  rotate: calc(-1 * var(--i) / var(--n) * 360deg);
  transform: translate(-50%, -50%);
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--rule);
  background: var(--panel);
  color: var(--ink);
  font-family: var(--mono);
  font-size: clamp(0.42rem, 1.1cqw, 0.74rem);
  white-space: nowrap;
  box-shadow: 1px 2px 0 rgba(0,0,0,0.35);
  animation: snow-unspin 9s linear infinite;
}
.snow__ring li:nth-child(5n) span { border-color: var(--accent); }

@keyframes snow-spin { to { transform: rotate(360deg); } }
@keyframes snow-unspin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(-360deg); } }
@keyframes snow-bounce { 0%, 100% { translate: 0 0; } 50% { translate: 0 -0.7rem; } }
@keyframes snow-skier { 0%, 100% { translate: 0 0; } 50% { translate: 0.4rem -0.2rem; } }
@keyframes snow-yeti { 0%, 100% { translate: 0 0; } 50% { translate: -0.6rem -0.2rem; } }
@keyframes snow-trail { to { background-position: -2.4rem 0; } }

.snow__junk { display: flex; flex-wrap: wrap; gap: 0.35rem; list-style: none; margin: 0 auto 1rem; padding: 0 1.25rem; max-width: 42rem; }
.snow__junk li { font-family: var(--mono); font-size: 0.72rem; padding: 0.25rem 0.5rem; border: 1px solid var(--rule); background: var(--panel); color: var(--ink); }
@media (min-width: 48rem) { .snow__junk { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .t-slope::before, .snow__roll, .snow__roll::before, .snow__ball, .snow__ring, .snow__ring li span, .snow__skier, .snow__yeti { animation: none; }
}

/* The split-brain ledger. */
.ledger { font-size: 0.92rem; }
.prose table.ledger th, .prose table.ledger td { white-space: normal; min-width: 0; }
.prose table.ledger th:first-child, .prose table.ledger td:first-child { min-width: 9rem; }
@media (min-width: 48rem) { .prose table.ledger { display: table; width: 100%; } }
.ledger__diff { color: var(--accent); font-weight: 700; }

/* The split brain, chalked up on the conditions board outside the lodge. */
.t-slope .ledger-board {
  position: relative;
  box-sizing: border-box;
  width: min(58rem, 100vw - 2rem);
  margin: 2.5rem 0 3rem 50%;
  translate: -50% 0;
  padding: 2.4rem 1.4rem 1.2rem;
  border: 10px solid #7a4a22;
  border-image: linear-gradient(#8d5a2e, #5a3416) 1;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(255,255,255,0.06), transparent 50%),
    radial-gradient(ellipse at 80% 90%, rgba(255,255,255,0.05), transparent 50%),
    #24352b;
  box-shadow: 0 10px 0 #3a2110, 0 18px 30px rgba(16,24,32,0.3);
  color: #f4f1e6;
}
.t-slope .ledger-board::before {
  content: "Conditions report";
  position: absolute;
  top: 0.7rem;
  left: 1.4rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #cfe3d3;
}
.t-slope .ledger-board table.ledger { font-size: 0.95rem; border: 0; background: none; color: inherit; }
.t-slope .ledger-board table.ledger th, .t-slope .ledger-board table.ledger td { border: 0; border-bottom: 1px solid rgba(244,241,230,0.22); padding: 0.6rem 0.8rem; background: none; color: inherit; vertical-align: top; }
.t-slope .ledger-board table.ledger th { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: #cfe3d3; border-bottom: 2px dashed rgba(244,241,230,0.55); }
.t-slope .ledger-board table.ledger tr:last-child td { border-bottom: 0; }
.t-slope .ledger-board .ledger__diff { color: #ffe28a; }
.t-slope .ledger-board figcaption { margin-top: 1rem; padding-top: 0.8rem; border-top: 1px dashed rgba(244,241,230,0.45); color: #dfe9e0; }
@media (max-width: 40rem) {
  .t-slope .ledger-board { padding: 2.2rem 0.9rem 1rem; border-width: 7px; }
  .t-slope .ledger-board table.ledger, .t-slope .ledger-board table.ledger tbody { display: block; width: 100%; overflow: visible; }
  .t-slope .ledger-board table.ledger thead { display: none; }
  .t-slope .ledger-board table.ledger tr { display: grid; grid-template-columns: 1fr 1fr; gap: 0 0.8rem; padding: 0.7rem 0; border-bottom: 1px solid rgba(244,241,230,0.22); }
  .t-slope .ledger-board table.ledger tr:last-child { border-bottom: 0; }
  .t-slope .ledger-board table.ledger td { display: block; border: 0; padding: 0; min-width: 0; }
  .t-slope .ledger-board table.ledger td:first-child { grid-column: 1 / -1; margin-bottom: 0.4rem; font-weight: 700; }
  .t-slope .ledger-board table.ledger td:nth-child(2)::before, .t-slope .ledger-board table.ledger td:nth-child(3)::before { display: block; font-family: var(--mono); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #cfe3d3; margin-bottom: 0.15rem; }
  .t-slope .ledger-board table.ledger td:nth-child(2)::before { content: "Client believes"; }
  .t-slope .ledger-board table.ledger td:nth-child(3)::before { content: "Server knows"; }
}

/* What a typo costs, to scale. */
.bars { display: grid; gap: 0.7rem; }
.bars__row { display: grid; grid-template-columns: minmax(9rem, 16rem) 1fr; gap: 0.75rem; align-items: center; }
.bars__label { font-family: var(--ui); font-size: 0.85rem; line-height: 1.35; }
.bars__bar { position: relative; display: block; height: 1.6rem; width: max(var(--w), 3px); background: var(--muted); }
.bars__bar--hot { background: var(--accent); }
.bars__bar--zero { background: transparent; border-left: 3px solid var(--muted); }
.bars__bar b { position: absolute; left: calc(100% + 0.5rem); top: 50%; transform: translateY(-50%); font-family: var(--mono); font-size: 0.75rem; white-space: nowrap; color: var(--ink); }
@media (max-width: 34rem) { .bars__row { grid-template-columns: 1fr; gap: 0.25rem; } }


/* Subtitle under a title, when a page sets one. */
.banner .subtitle { margin: 0.4rem 0 0.9rem; font-family: var(--prose); font-style: italic; font-size: 1.05rem; line-height: 1.4; color: var(--muted); }
.t-slope .banner .subtitle { color: #ffe28a; font-family: var(--prose); font-style: italic; font-size: clamp(1rem, 2.6vw, 1.25rem); margin: 0 auto 1.2rem; max-width: 34rem; text-shadow: 0 1px 0 rgba(0,0,0,0.5); }

/* Paper sits under each block of words, not under the whole column, so the
   snow falls in every gap and margin and never crosses a line of text. */
.t-slope .topmark { z-index: 2; }
.t-slope .prose > :is(p:not(.lodge__caption, .crash__caption, .thaw__caption, .bubble), ul, ol, dl, blockquote, .bars, .footnotes),
.t-slope .prose figure.step:not(.snow, .ledger-board, .arch) > :is(table, .bars, figcaption),
.t-slope .cast > :is(p, .crew),
.t-slope .foot > :is(p, dl, .foot__meta), .t-slope .foot .mark--masthead {
  background: var(--veil);
  box-shadow: 0 0 0 0.6rem var(--veil);
}
.t-slope .prose > .lede { box-shadow: 0.6rem 0 0 var(--veil), 0 0 0 0.6rem var(--veil); }


/* The lodge: warm windows, smoke, skis by the door. Full bleed. */
.lodge {
  margin: 2.5rem calc(50% - 50vw) 1rem;
  height: clamp(12rem, 28vw, 22rem);
  border-top: 3px solid var(--rule);
  border-bottom: 3px solid var(--rule);
  background: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20400%20160%22%20preserveAspectRatio=%22xMidYMax%20meet%22%3E%0A%3Cpolygon%20points=%220,160%200,110%2060,60%20120,100%20180,40%20240,90%20300,55%20400,120%20400,160%22%20fill=%22%23dfe7f1%22/%3E%0A%3Crect%20x=%220%22%20y=%22118%22%20width=%22400%22%20height=%2242%22%20fill=%22%23f7f9fc%22/%3E%0A%3Cg%20fill=%22%232e7d32%22%3E%3Cpolygon%20points=%2240,130%2055,95%2070,130%22/%3E%3Cpolygon%20points=%22330,132%20348,88%20366,132%22/%3E%3Cpolygon%20points=%22352,132%20366,100%20380,132%22/%3E%3C/g%3E%0A%3Cg%20fill=%22%235d3a1a%22%3E%3Crect%20x=%2253%22%20y=%22130%22%20width=%224%22%20height=%228%22/%3E%3Crect%20x=%22346%22%20y=%22132%22%20width=%224%22%20height=%228%22/%3E%3Crect%20x=%22364%22%20y=%22132%22%20width=%224%22%20height=%228%22/%3E%3C/g%3E%0A%3Cpolygon%20points=%22140,132%20200,50%20260,132%22%20fill=%22%236b3f1f%22/%3E%3Cpolygon%20points=%22150,132%20200,64%20250,132%22%20fill=%22%238a5a2b%22/%3E%0A%3Cpolygon%20points=%22136,132%20200,44%20264,132%20264,126%20200,52%20136,126%22%20fill=%22%23fff%22/%3E%0A%3Crect%20x=%22188%22%20y=%22100%22%20width=%2224%22%20height=%2232%22%20fill=%22%233a2010%22/%3E%3Crect%20x=%22190%22%20y=%22102%22%20width=%2220%22%20height=%2228%22%20fill=%22%23ffd166%22/%3E%0A%3Crect%20x=%22160%22%20y=%22108%22%20width=%2216%22%20height=%2214%22%20fill=%22%23ffd166%22/%3E%3Crect%20x=%22224%22%20y=%22108%22%20width=%2216%22%20height=%2214%22%20fill=%22%23ffd166%22/%3E%0A%3Crect%20x=%22236%22%20y=%2270%22%20width=%2210%22%20height=%2226%22%20fill=%22%234a2a12%22/%3E%0A%3Crect%20x=%22118%22%20y=%22112%22%20width=%224%22%20height=%2222%22%20fill=%22%23c0392b%22%20transform=%22rotate%28-8%20120%20123%29%22/%3E%3Crect%20x=%22126%22%20y=%22112%22%20width=%224%22%20height=%2222%22%20fill=%22%232266d1%22%20transform=%22rotate%28-8%20128%20123%29%22/%3E%0A%3Ccircle%20cx=%22360%22%20cy=%2230%22%20r=%2214%22%20fill=%22%23ffe28a%22/%3E%0A%3C/svg%3E") center bottom / auto 100% no-repeat, linear-gradient(#bcd4f0, #e6eef8 55%, #f7f9fc 56%);
  position: relative;
  overflow: hidden;
}
.lodge::before, .lodge::after {
  content: "";
  position: absolute;
  left: calc(50% + 4.6%);
  bottom: 62%;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background: rgba(255,255,255,0.85);
  animation: smoke 3.2s ease-out infinite;
}
.lodge::after { animation-delay: 1.6s; width: 0.7rem; height: 0.7rem; }
@keyframes smoke { 0% { translate: 0 0; opacity: 0.9; scale: 0.6; } 100% { translate: 1.2rem -4rem; opacity: 0; scale: 1.8; } }
.t-slope .snow figcaption, .t-slope .lodge__caption, .t-slope .crash__caption, .t-slope .thaw__caption {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  width: min(36rem, 100% - 2.5rem);
  margin: -1.15rem auto 3rem;
  padding: 0.75rem 1.2rem 0.8rem;
  border: 3px solid #2b180a;
  border-top: 0;
  border-radius: 0 0 6px 6px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 3px, transparent 3px 9px),
    linear-gradient(#6b3f1f, #4a2a12);
  box-shadow: 0 5px 0 #2b180a, 0 10px 18px rgba(16,24,32,0.25);
  font-family: var(--ui);
  font-size: 0.88rem;
  line-height: 1.5;
  color: #fff3d6;
  text-shadow: 0 1px 0 rgba(0,0,0,0.45);
}
.t-slope .snow figcaption::before, .t-slope .lodge__caption::before, .t-slope .crash__caption::before, .t-slope .thaw__caption::before,
.t-slope .snow figcaption::after, .t-slope .lodge__caption::after, .t-slope .crash__caption::after, .t-slope .thaw__caption::after {
  content: "";
  position: absolute;
  top: 0.55rem;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: #d9d2c5;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.5);
}
.t-slope .snow figcaption::before, .t-slope .lodge__caption::before, .t-slope .crash__caption::before, .t-slope .thaw__caption::before { left: 0.5rem; }
.t-slope .snow figcaption::after, .t-slope .lodge__caption::after, .t-slope .crash__caption::after, .t-slope .thaw__caption::after { right: 0.5rem; }
.t-slope .snow figcaption b { color: #ffe28a; }

/* The bottom of the hill: grey, gross, and occupied. Full bleed. */
.crash {
  position: relative;
  margin: 2.5rem calc(50% - 50vw) 1rem;
  height: clamp(14rem, 34vw, 26rem);
  overflow: hidden;
  border-top: 3px solid var(--rule);
  border-bottom: 3px solid var(--rule);
  background:
    radial-gradient(ellipse 40% 30% at 30% 80%, rgba(90,80,70,0.35), transparent 70%),
    radial-gradient(ellipse 30% 25% at 70% 70%, rgba(70,60,50,0.3), transparent 70%),
    linear-gradient(#8a93a0 0, #a8adb3 35%, #b7b3ac 60%, #9c9489 100%);
}
.crash__tree { position: absolute; width: clamp(2rem, 6vw, 5rem); aspect-ratio: 1; background: var(--tree) center / contain no-repeat; filter: grayscale(1) brightness(0.45); }
.crash__tree--a { left: 6%; bottom: 12%; }
.crash__tree--b { left: 20%; bottom: 40%; width: clamp(1.5rem, 4vw, 3.5rem); }
.crash__tree--c { right: 30%; bottom: 20%; width: clamp(1.5rem, 4.5vw, 4rem); }
.crash__yeti { position: absolute; right: 5%; bottom: 4%; width: clamp(6rem, 22vw, 18rem); aspect-ratio: 1; background: var(--yeti) center / contain no-repeat; filter: drop-shadow(0 6px 0 rgba(0,0,0,0.3)) brightness(0.9); animation: snow-yeti 0.9s steps(2) infinite; }
.crash__ball { position: absolute; left: 34%; bottom: 10%; width: clamp(5rem, 16vw, 13rem); aspect-ratio: 1; border-radius: 50% 50% 45% 55% / 60% 60% 40% 40%; background: radial-gradient(circle at 40% 35%, #ddd, #a9a9a9 60%, #6e6e6e); box-shadow: inset -10px -12px 20px rgba(0,0,0,0.25); }
.crash__ball::before { content: ""; position: absolute; left: 30%; top: 20%; width: 45%; height: 8%; background: #4a4a4a; transform: rotate(-28deg); box-shadow: 0.6rem 1.4rem 0 -0.1rem #4a4a4a, -0.4rem 2.6rem 0 -0.15rem #4a4a4a; }
.crash__post { position: absolute; left: 12%; bottom: 6%; width: 0.7rem; height: clamp(4rem, 12vw, 9rem); background: linear-gradient(90deg, #5a3416, #7a4a22 45%, #4a2a12); border: 2px solid #2b180a; }
.crash__post::before { content: "2,000 m"; position: absolute; left: -0.6rem; top: -1.9rem; padding: 0.3rem 0.6rem; background: #4a2a12; color: #fff4dc; border: 2px solid #2b180a; font-family: var(--mono); font-size: 0.72rem; white-space: nowrap; transform: rotate(-4deg); }
.crash__junk { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.crash__junk li { position: absolute; left: var(--x); top: var(--y); transform: rotate(var(--r)); padding: 0.15rem 0.45rem; border: 1px solid #333; background: #d9d6d0; color: #222; font-family: var(--mono); font-size: clamp(0.4rem, 1.1vw, 0.68rem); white-space: nowrap; opacity: 0.9; }
@media (prefers-reduced-motion: reduce) { .lodge::before, .lodge::after, .crash__yeti { animation: none; } }


/* Spring: the thaw. Full bleed meadow with wildflowers that sway. */
.thaw {
  position: relative;
  margin: 2.5rem calc(50% - 50vw) 1rem;
  height: clamp(13rem, 30vw, 24rem);
  overflow: hidden;
  border-top: 3px solid var(--rule);
  border-bottom: 3px solid var(--rule);
  background: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20400%20160%22%20preserveAspectRatio=%22xMidYMax%20slice%22%3E%0A%3Crect%20width=%22400%22%20height=%22160%22%20fill=%22%23cfe8ff%22/%3E%0A%3Ccircle%20cx=%22340%22%20cy=%2234%22%20r=%2216%22%20fill=%22%23ffe28a%22/%3E%0A%3Cpolygon%20points=%220,100%200,70%2050,40%20100,75%20150,45%20210,80%20260,50%20320,85%20400,60%20400,100%22%20fill=%22%23dfe7f1%22/%3E%0A%3Cpolygon%20points=%2244,47%2050,40%2056,47%22%20fill=%22%23fff%22/%3E%3Cpolygon%20points=%22144,52%20150,45%20156,52%22%20fill=%22%23fff%22/%3E%3Cpolygon%20points=%22254,57%20260,50%20266,57%22%20fill=%22%23fff%22/%3E%0A%3Cpath%20d=%22M0%20160%20L0%20105%20C%2080%2085,%20160%20120,%20240%20100%20C%20300%2085,%20350%2095,%20400%2088%20L400%20160%20Z%22%20fill=%22%237cc46b%22/%3E%0A%3Cpath%20d=%22M0%20160%20L0%20125%20C%2090%20110,%20170%20140,%20260%20122%20C%20320%20110,%20360%20120,%20400%20112%20L400%20160%20Z%22%20fill=%22%235fae52%22/%3E%0A%3Cg%20fill=%22%232e7d32%22%3E%3Cpolygon%20points=%2220,112%2030,84%2040,112%22/%3E%3Cpolygon%20points=%22372,104%20380,80%20388,104%22/%3E%3C/g%3E%0A%3Cg%20fill=%22%235d3a1a%22%3E%3Crect%20x=%2228%22%20y=%22112%22%20width=%224%22%20height=%227%22/%3E%3Crect%20x=%22378%22%20y=%22104%22%20width=%224%22%20height=%227%22/%3E%3C/g%3E%0A%3Crect%20x=%22150%22%20y=%22122%22%20width=%228%22%20height=%2218%22%20fill=%22%23a86b35%22/%3E%3Cpolygon%20points=%22140,124%20154,108%20168,124%22%20fill=%22%23c0392b%22/%3E%0A%3C/svg%3E") center / cover no-repeat;
}
.thaw::before, .thaw::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: clamp(2.5rem, 7vw, 5rem);
  background: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20120%2040%22%20width=%22120%22%20height=%2240%22%3E%0A%3Cg%20stroke=%22%233d8b37%22%20stroke-width=%221.5%22%3E%3Cline%20x1=%2212%22%20y1=%2240%22%20x2=%2212%22%20y2=%2224%22/%3E%3Cline%20x1=%2240%22%20y1=%2240%22%20x2=%2240%22%20y2=%2220%22/%3E%3Cline%20x1=%2270%22%20y1=%2240%22%20x2=%2270%22%20y2=%2226%22/%3E%3Cline%20x1=%2298%22%20y1=%2240%22%20x2=%2298%22%20y2=%2222%22/%3E%3C/g%3E%0A%3Cg%3E%3Ccircle%20cx=%2212%22%20cy=%2222%22%20r=%224%22%20fill=%22%23ff6b8a%22/%3E%3Ccircle%20cx=%2212%22%20cy=%2222%22%20r=%221.5%22%20fill=%22%23ffe28a%22/%3E%3C/g%3E%0A%3Cg%3E%3Ccircle%20cx=%2240%22%20cy=%2218%22%20r=%224.5%22%20fill=%22%23ffe28a%22/%3E%3Ccircle%20cx=%2240%22%20cy=%2218%22%20r=%221.6%22%20fill=%22%238a5a2b%22/%3E%3C/g%3E%0A%3Cg%3E%3Ccircle%20cx=%2270%22%20cy=%2224%22%20r=%223.6%22%20fill=%22%238ab4f8%22/%3E%3Ccircle%20cx=%2270%22%20cy=%2224%22%20r=%221.3%22%20fill=%22%23fff%22/%3E%3C/g%3E%0A%3Cg%3E%3Ccircle%20cx=%2298%22%20cy=%2220%22%20r=%224.2%22%20fill=%22%23fff%22/%3E%3Ccircle%20cx=%2298%22%20cy=%2220%22%20r=%221.6%22%20fill=%22%23ffe28a%22/%3E%3C/g%3E%0A%3C/svg%3E") 0 100% / auto 100% repeat-x;
  transform-origin: 50% 100%;
  animation: sway 4s ease-in-out infinite;
}
.thaw::after { background-position: 60px 100%; height: clamp(1.8rem, 5vw, 3.6rem); animation-delay: -2s; opacity: 0.9; }
@keyframes sway { 0%, 100% { transform: skewX(-3deg); } 50% { transform: skewX(3deg); } }
.t-slope .prose > h2:nth-of-type(7) { --marker: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2016%2016%22%3E%3Ccircle%20cx=%228%22%20cy=%224%22%20r=%223%22%20fill=%22%23ff6b8a%22/%3E%3Ccircle%20cx=%2212%22%20cy=%228%22%20r=%223%22%20fill=%22%23ff6b8a%22/%3E%3Ccircle%20cx=%228%22%20cy=%2212%22%20r=%223%22%20fill=%22%23ff6b8a%22/%3E%3Ccircle%20cx=%224%22%20cy=%228%22%20r=%223%22%20fill=%22%23ff6b8a%22/%3E%3Ccircle%20cx=%228%22%20cy=%228%22%20r=%222.4%22%20fill=%22%23ffe28a%22%20stroke=%22%23fff%22%20stroke-width=%221%22/%3E%3C/svg%3E"); }
.t-slope .prose > h2:nth-of-type(7) > a.anchor { background: repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 3px, transparent 3px 9px), linear-gradient(#2e7d32, #1f5a24); border-color: #133a17; }

/* The byline link on the resort sign must read against the wood. */
.t-slope .banner .byline a, .t-slope .banner .byline a:visited { color: #ffe28a; text-decoration-color: #ffe28a; }
.t-slope .banner .byline a:hover { background: #ffe28a; color: #2b180a; }
@media (prefers-reduced-motion: reduce) { .thaw::before, .thaw::after { animation: none; } }


/* Code comments on the slope's dark blocks: Monokai's grey is too dim there. */
.t-slope pre.highlight .c, .t-slope pre.highlight .c1, .t-slope pre.highlight .cm, .t-slope pre.highlight .cp { color: #b3bcc8; }


/* Onward tiles carry the neighbour's accent for their rule only. The text is
   always ink, whatever the treatment's link colour or the neighbour's accent. */
.prose nav.onward a.onward__link, .prose nav.onward a.onward__link .onward__title { color: var(--ink); }
.prose nav.onward a.onward__link:hover { background: var(--panel); }


/* ---- Trail map key: a fingerpost, one plank per run ---- */
.tmap__key { position: relative; list-style: none; margin: 0 0 2.2rem 0.6rem; padding: 0.4rem 0 0.9rem 1.6rem; display: flex; flex-direction: column; gap: 0.45rem; align-items: flex-start; }
.tmap__key::before { content: ""; position: absolute; left: 0.45rem; top: 0; bottom: 0; width: 0.9rem; background: linear-gradient(90deg, #5a3416, #8a5a2b 55%, #5a3416); border: 2px solid #2b180a; border-top: 0; border-bottom: 0; }
.tmap__key::after { content: ""; position: absolute; left: -0.6rem; bottom: -0.4rem; width: 3.2rem; height: 0.9rem; border-radius: 50%; background: #fff; box-shadow: 0 2px 0 #c3d0de; }
.tmap__key li { position: relative; display: inline-flex; align-items: center; gap: 0.55rem; max-width: 100%; padding: 0.45rem 2rem 0.45rem 0.9rem; font-family: var(--mono); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #fff3d6; text-shadow: 0 1px 0 rgba(0,0,0,0.5);
  background: repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 3px, transparent 3px 9px), linear-gradient(#6b3f1f, #4a2a12);
  border: 3px solid #2b180a; clip-path: polygon(0 0, calc(100% - 1rem) 0, 100% 50%, calc(100% - 1rem) 100%, 0 100%); }
.tmap__key li:nth-child(even) { margin-left: 0.5rem; }
.tmap__key .tmap__key--closed { background: repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 3px, transparent 3px 9px), linear-gradient(#7a1c1c, #4d0f0f); }
.tmap__sym { display: inline-block; flex: none; width: 0.8rem; height: 0.8rem; border: 2px solid #fff; box-shadow: 0 0 0 1px #2b180a; }
.tmap__sym--g { background: #2e9e4f; border-radius: 50%; }
.tmap__sym--b { background: #2266d1; }
.tmap__sym--k { background: #111; rotate: 45deg; width: 0.62rem; height: 0.62rem; margin: 0 0.15rem; }
.tmap__sym--k + .tmap__sym--k { margin-left: -0.2rem; }
.tmap__sym--lift { width: 1.3rem; height: 0; border: 0; box-shadow: none; border-top: 3px solid #f2d4a6; position: relative; }
.tmap__sym--lift::after { content: ""; position: absolute; left: 0.4rem; top: 0; width: 0.5rem; height: 0.4rem; background: #ffe28a; }
.tmap__sym--yeti { width: 1rem; height: 1rem; border: 0; box-shadow: none; background: var(--yeti) center / contain no-repeat; }

/* ---- Who's on the hill: the crew, drawn ---- */
.crew { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; list-style: none; margin: 0 0 3rem; padding: 0; }
.crew li { display: grid; grid-template-rows: 4rem auto 1fr; gap: 0.45rem; align-content: start; }
.crew li b { font-family: var(--ui); font-weight: 700; color: var(--ink); }
.crew li span:last-child { font-family: var(--prose); font-size: 0.95rem; line-height: 1.45; color: var(--muted); }
.crew__icon { display: block; height: 4rem; }
.crew__icon--team { background: var(--skier) left center / 1.6rem 1.6rem repeat-x; width: 8rem; max-width: 100%; image-rendering: pixelated; }
.crew__icon--browser { position: relative; box-sizing: border-box; width: 5.6rem; height: 4rem; border: 3px solid var(--ink); background: #fff; border-radius: 4px; padding: 0.95rem 0.3rem 0; }
.crew__icon--browser::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 0.7rem; background: var(--ink); }
.crew__icon--browser i { position: absolute; top: 0.18rem; width: 0.3rem; height: 0.3rem; border-radius: 50%; background: #fff; }
.crew__icon--browser i:nth-child(1) { left: 0.3rem; } .crew__icon--browser i:nth-child(2) { left: 0.75rem; } .crew__icon--browser i:nth-child(3) { left: 1.2rem; }
.crew__icon--browser::after { content: ""; position: absolute; left: 0.35rem; right: 0.35rem; top: 1rem; height: 0.45rem; border: 2px solid var(--ink); border-radius: 3px; }
.crew__icon--api { display: grid; place-items: center; width: 4rem; height: 4rem; border: 3px solid var(--ink); background: #fff; font-family: var(--mono); font-weight: 700; font-size: 1.5rem; color: var(--ink); }
.crew__icon--bundle { width: 1.4rem; height: 1.4rem; margin-top: 2.5rem; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #d7dee6 70%, #b6c1cc); box-shadow: 0 2px 0 rgba(16,24,32,0.15); }
@media (max-width: 40rem) { .crew { grid-template-columns: 1fr 1fr; } }

/* ---- Architecture, sketched on lodge napkins ---- */
.arch { margin: 2.5rem 0 3rem; }
.arch__head { margin: 0 0 0.6rem; font-family: var(--mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); background: var(--veil); box-shadow: 0 0 0 0.6rem var(--veil); }
.arch__board { display: grid; grid-template-columns: minmax(0, 1.6fr) auto minmax(0, 1fr); gap: 0.9rem; align-items: start;
  padding: 1rem; background: #fffdf5; border: 3px solid var(--ink); border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  box-shadow: 4px 4px 0 var(--ink);
  background-image: linear-gradient(rgba(16,24,32,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(16,24,32,0.06) 1px, transparent 1px); background-size: 1.2rem 1.2rem; }
.arch--3 .arch__board, .arch--4 .arch__board { grid-template-columns: minmax(0, 2.4fr) auto minmax(0, 1fr); }
.arch__side { min-width: 0; }
.arch__title { margin: 0 0 0.5rem; font-family: var(--ui); font-weight: 700; font-size: 0.85rem; color: var(--ink); }
.arch__nodes { display: flex; flex-wrap: wrap; gap: 0.35rem; list-style: none; margin: 0; padding: 0; }
.node { display: inline-block; padding: 0.3rem 0.5rem; font-family: var(--mono); font-size: 0.72rem; line-height: 1.3; color: var(--ink); background: #fff; border: 2px solid var(--ink); border-radius: 12px 4px 10px 4px / 4px 10px 4px 12px; }
.node small { display: block; font-size: 0.62rem; color: var(--muted); }
.node--repair { border-color: #b3111a; color: #7a0c12; background: #fff4f3; }
.node--bundle { border-color: #b3111a; border-style: dashed; background: #fff4f3; }
.node--srv { border-color: #1b6e3a; background: #f0faf3; }
.node--db { border-color: #1b6e3a; background: #f0faf3; border-radius: 50% / 22%; padding: 0.5rem 0.8rem; }
.node--hot { box-shadow: 0 0 0 3px #ffe28a; }
.node--spring { border-color: #1b6e3a; background: #dff5e4; font-weight: 700; }
.arch__label { margin: 0.8rem 0 0.3rem; font-family: var(--ui); font-size: 0.72rem; color: var(--muted); }
.arch__native { display: flex; flex-wrap: wrap; gap: 0.3rem; list-style: none; margin: 0; padding: 0; }
.arch__native li { padding: 0.2rem 0.45rem; font-family: var(--mono); font-size: 0.68rem; color: #8a939c; border: 2px dashed #b9c2cb; background: transparent; border-radius: 6px; }
.arch__board--lit .arch__native li { color: #0f4d27; border: 2px solid #1b6e3a; background: #dff5e4; }
.arch__board--lit .arch__label { color: #0f4d27; font-weight: 700; }
.arch__wires { display: grid; gap: 1rem; align-self: center; min-width: 9rem; }
.arch__wire { position: relative; display: grid; gap: 1.6rem; text-align: center; font-family: var(--mono); font-size: 0.66rem; color: var(--ink); }
.arch__line { position: absolute; left: 0.3rem; right: 0.3rem; top: 50%; border-top: 2px solid var(--ink); }
.arch__line::before, .arch__line::after { content: ""; position: absolute; top: -0.3rem; width: 0.5rem; height: 0.5rem; border-top: 2px solid var(--ink); border-right: 2px solid var(--ink); }
.arch__line::before { left: -1px; rotate: -135deg; }
.arch__line::after { right: -1px; rotate: 45deg; }
.arch__wire--ws .arch__line { border-top-style: dashed; border-top-color: #b3111a; }
.arch__wire--ws .arch__line::before, .arch__wire--ws .arch__line::after { border-color: #b3111a; }
.arch__req, .arch__res { position: relative; padding: 0 0.2rem; background: #fffdf5; }
.arch__res { color: var(--muted); }
.arch figcaption { margin-top: 1rem; padding-top: 0.7rem; border-top: 1px solid var(--rule); background: var(--veil); box-shadow: 0 0 0 0.6rem var(--veil); }
.arch--4 .arch__board { background-color: #f6f2ea; }
@media (max-width: 44rem) {
  .arch__board, .arch--3 .arch__board, .arch--4 .arch__board { grid-template-columns: 1fr; }
  .arch__wires { min-width: 0; justify-items: center; }
  .arch__wire { display: flex; justify-content: center; align-items: center; gap: 0.8rem; padding: 0.4rem 0; }
  .arch__line { left: 50%; right: auto; top: 0.2rem; bottom: 0.2rem; border-top: 0; border-left: 2px solid var(--ink); }
  .arch__wire--ws .arch__line { border-left-style: dashed; border-left-color: #b3111a; }
  .arch__line::before, .arch__line::after { left: -0.3rem; right: auto; }
  .arch__line::before { top: -1px; rotate: -45deg; }
  .arch__line::after { top: auto; bottom: -1px; rotate: 135deg; }
  .arch__req, .arch__res { max-width: 45%; }
}

/* ---- The lodge: what gets said at the bar ---- */
.bubble { position: relative; max-width: 34rem; margin: 2.4rem 0 1.1rem 3.4rem; padding: 0.9rem 1.2rem 1rem; background: #fff; border: 3px solid var(--ink); border-radius: 1.2rem; box-shadow: 4px 4px 0 var(--ink); font-family: var(--prose); font-size: 1.25rem; line-height: 1.35; font-style: italic; color: var(--ink); }
.bubble q { quotes: "“" "”"; }
.bubble::before { content: ""; position: absolute; left: -3.4rem; bottom: -0.6rem; width: 2.6rem; height: 2.6rem; background: var(--skier) center / contain no-repeat; image-rendering: pixelated; }
.bubble::after { content: ""; position: absolute; left: -0.9rem; bottom: 0.8rem; width: 1rem; height: 1rem; background: #fff; border-left: 3px solid var(--ink); border-bottom: 3px solid var(--ink); rotate: 45deg; }
.bubble + p { margin-left: 3.4rem; }
@media (max-width: 40rem) { .prose .bubble { margin-left: 2.8rem; font-size: 1.15rem; } .prose .bubble::before { left: -3rem; bottom: -0.5rem; width: 2.4rem; height: 2.4rem; } .prose .bubble + p { margin-left: 0; } }

/* Diagrams and crew are drawings, not running text: undo the prose list rules. */
.prose .arch ul, .prose .crew { margin: 0; padding: 0; list-style: none; }
.prose .arch__nodes { margin: 0; gap: 0.35rem; }
.prose .arch li, .prose .crew li { margin: 0; padding: 0; }
.prose .arch .node { padding: 0.3rem 0.5rem; font-family: var(--mono); font-size: 0.72rem; line-height: 1.3; }
.prose .arch .node--db { padding: 0.5rem 0.8rem; }
.prose .arch .node small { font-family: var(--ui); font-size: 0.62rem; line-height: 1.25; }
.prose .arch__native li { padding: 0.2rem 0.45rem; font-family: var(--mono); font-size: 0.68rem; line-height: 1.3; }
.prose .arch__title { margin: 0 0 0.5rem; font-family: var(--ui); font-size: 0.85rem; line-height: 1.3; }
.prose .arch__label { margin: 0.8rem 0 0.3rem; font-family: var(--ui); font-size: 0.72rem; line-height: 1.3; }
.prose .arch__head { font-family: var(--mono); font-size: 0.72rem; line-height: 1.4; letter-spacing: 0.16em; }
.prose .crew li b { font-family: var(--ui); font-size: 1rem; }
.prose .crew li span:last-child { font-size: 0.95rem; line-height: 1.45; }
.prose .bubble::before { width: 3rem; height: 3rem; left: -3.6rem; bottom: -0.7rem; }

/* Spring fingerpost: links on planks, lowercase, green wood */
.prose .tmap__key--spring { margin: 1.2rem 0 2.2rem 0.6rem; }
.prose .tmap__key--spring li { text-transform: none; letter-spacing: 0.02em; font-size: 0.8rem; background: repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 3px, transparent 3px 9px), linear-gradient(#2f6b3a, #1f4a28); border-color: #12301a; }
.prose .tmap__key--spring::before { background: linear-gradient(90deg, #5a3416, #8a5a2b 55%, #5a3416); }
.prose .tmap__key--spring::after { background: #6cc46f; box-shadow: 0 2px 0 #3f8f45; }
.prose .tmap__key--spring a { color: #fff3d6; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.prose .tmap__key--spring a:hover, .prose .tmap__key--spring a:focus-visible { color: #ffe28a; }
/* Bubble avatar sits on the bubble's baseline, tail points at its head */
.prose .bubble::before { bottom: -0.15rem; }
.prose .bubble::after { bottom: 0.9rem; }