/*
 * Retroprose: the marketing pages (the front page, what's in the box, the
 * editions, the key template, the guides and the landing pages).
 *
 * The retro look belongs to the editor, so these pages do not imitate it:
 * a calm, modern page on warm charcoal, with the real editor in
 * screenshots and green for every action: the green of the green screen.
 * The one retro touch is the VGA screen font of the headings and the logo. Text is in Literata, a serif made for long
 * reading on screens. One idea a row: on a wide screen a section's heading
 * sits in the left margin and its text to the right (.w-row), so the page
 * uses the width without columns of text. See
 * directives/frontend-design-system.md. No inline styles anywhere: the
 * Content Security Policy blocks them.
 *
 * Text pairs (WCAG 2.2 AA):
 *   ink #EFE8DA on the page #14120E 15.6:1, on #1D1A15 14.4:1
 *   muted #ADA392 on the page 7.6:1. Links are ink with a 2px green
 *   underline (13.9:1 on the page), and turn green on hover
 *   dark #14120E on green #33FF66 13.9:1, green on dark the same,
 *   green on #26221B 11.8:1
 * On hover and focus a button keeps its fill and casts a solid shadow to
 * the right and below, as the guide cards do: ink under green, green under
 * the dark tile, dark on the green panel. The focus ring is the pale ink,
 * never the green, so it stands apart from every green fill.
 * The key template stays a light card to print: #1E1A14 on #FBF7EF 16.4:1.
 * Rules #2F2A22 are decoration only. The edge #6B6252 of the pills and
 * keys is 3.1:1 on the page.
 */

@font-face {
  font-family: "Literata";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/literata-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Literata";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/literata-latin-ext-400.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Literata";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/literata-latin-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Literata";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/literata-latin-ext-700.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Keys and code only. */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+2000-206F;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+2000-206F;
}
@font-face {
  font-family: "IBM VGA 8x16";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-vga-8x16-plus.woff") format("woff");
}

/* ---------- Tokens ---------- */
:root {
  --page: #14120E;
  --deep: #0E0C09;
  --surface: #1D1A15;
  --surface-2: #26221B;
  --ink: #EFE8DA;
  --muted: #ADA392;
  --line: #2F2A22;
  --line-strong: #6B6252;
  --accent: #33FF66;
  --dark: #14120E;
  /* The key template is a light card, to print. */
  --card: #FBF7EF;
  --card-ink: #1E1A14;
  --card-line: #E3D9C7;

  --serif: "Literata", Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, "Courier New", monospace;
  --display: "IBM VGA 8x16", var(--mono);

  --wrap: 72rem;
  --gutter: 20px;
  --measure: 40rem;
}

/* ---------- Page ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--page); scroll-behavior: smooth; scroll-padding-top: 5rem; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--page);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.1875rem;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}
main { flex: 1; display: block; }
main:focus { outline: none; }
img, svg { display: block; max-width: 100%; }
a { color: var(--ink); text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: .2em; }
a:hover { color: var(--accent); text-decoration-thickness: 3px; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
strong, b { font-weight: 700; }
p { margin: 0 0 1.1rem; }
kbd {
  display: inline-block;
  padding: .05em .45em;
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 0;
  font-family: var(--mono);
  font-size: .78em;
  font-weight: 700;
  line-height: 1.45;
  white-space: nowrap;
  vertical-align: .08em;
}
.w-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.w-wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }

.w-skip {
  position: absolute; left: 16px; top: -10rem; z-index: 50;
  padding: .5rem 1rem; background: var(--accent); color: var(--dark); font-weight: 700; text-decoration: none;
}
.w-skip:focus { top: .5rem; }

/* Headings in the VGA screen font. It is drawn on a grid of 16 pixels,
 * so the sizes keep to multiples of 16 where they can. */
h1, h2 { font-family: var(--display); font-weight: 400; color: var(--ink); margin: 0 0 1rem; letter-spacing: 0; }
h1 { font-size: clamp(2.5rem, 1.6rem + 3vw, 4rem); line-height: 1.05; }
h2 { font-size: clamp(1.5rem, 1.25rem + .9vw, 2rem); line-height: 1.15; }
h3 { font-family: var(--serif); font-weight: 700; font-size: 1.1875rem; line-height: 1.35; margin: 0 0 .35rem; }

/* ---------- Buttons ---------- */
.w-go { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; margin: 2rem 0 0; }
/* Buttons in the Metro style: flat colour, square corners and no border.
 * The second button is a flat neutral, never an outline. */
.w-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem;
  padding: .75rem 1.5rem;
  background: var(--accent);
  color: var(--dark);
  border: 0;
  border-radius: 0;
  font-family: var(--serif);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .12s, box-shadow .12s;
}
/* Hover and focus: the solid shadow of the guide cards. Pressed, it goes. */
.w-btn:hover, .w-btn:focus-visible { color: var(--dark); box-shadow: 5px 5px 0 var(--ink); }
.w-btn:active { box-shadow: none; }
.w-btn--ghost { background: var(--surface-2); color: var(--ink); }
.w-btn--ghost:hover, .w-btn--ghost:focus-visible { background: #352F26; color: var(--ink); box-shadow: 5px 5px 0 var(--accent); }
.w-btn--small { min-height: 2.5rem; padding: .5rem 1.1rem; font-size: 1rem; }

.w-ticks { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.75rem; color: var(--muted); font-size: 1rem; }
.w-ticks li { position: relative; padding-left: 1.5rem; }
.w-ticks li::before {
  content: ""; position: absolute; left: .2rem; top: .35em;
  width: .45rem; height: .8rem;
  border: solid var(--accent); border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

/* ---------- Header ---------- */
.w-bar {
  position: sticky; top: 0; z-index: 20;
  background: rgba(20, 18, 14, .92);
  border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.w-bar__in {
  width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 2rem;
  min-height: 4.25rem; padding: .5rem 0;
}
.w-mark { color: var(--ink); text-decoration: none; font-family: var(--display); font-size: 1.5rem; line-height: 1; }
.w-mark:hover { color: var(--ink); }
.w-nav { flex: 1 1 auto; }
.w-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0 .25rem; margin: 0; padding: 0; }
.w-nav a {
  display: block; padding: .5rem .7rem;
  color: var(--muted); text-decoration: none; font-size: 1rem;
}
.w-nav a:hover { color: var(--ink); text-decoration: underline; }
.w-nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.w-bar__go { display: flex; align-items: center; gap: 1.25rem; margin-left: auto; }
.w-bar__link { color: var(--ink); font-size: 1rem; }

/* ---------- Page tops ---------- */
/* Centred, with the window of the editor below. */
.page-top { padding: clamp(4rem, 9vw, 7rem) 0 clamp(3.5rem, 7vw, 5.5rem); text-align: center; }
.page-top h1 { max-width: 24ch; margin: 0 auto 2.25rem; }
.page-top__lead { max-width: var(--measure); margin: 0 auto; font-size: clamp(1.25rem, 1.1rem + .4vw, 1.4375rem); line-height: 1.6; }
.page-top .w-go { margin-top: 2.5rem; }
.page-top .w-go, .page-top .w-ticks { justify-content: center; }

/* ---------- Screenshots of the real editor, in a window ---------- */
/* A plain application window: a title bar, a firm edge and a shadow, so
 * the dark screen of the editor never runs into the dark page. */
.w-shot-sec { padding: 0 0 clamp(2.5rem, 5vw, 4rem); }
.shot { margin: 0; }
.window {
  background: var(--surface-2);
  border: 1px solid #3A342A;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .4), 0 40px 80px -30px rgba(0, 0, 0, .95);
}
.window__bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1.5rem;
  min-height: 2.75rem; padding: .35rem .5rem .35rem 1rem;
  border-bottom: 1px solid #3A342A;
}
.window__title { color: var(--muted); font-family: var(--display); font-size: 1rem; line-height: 1; }
.window__shot { display: block; width: 100%; height: auto; background: #000000; }
.shot figcaption { margin-top: 1.1rem; color: var(--muted); font-size: 1rem; text-align: center; }

/* The four screens on the front page, chosen in the window's title bar
 * with radio buttons and no script. Green shows by default, for browsers
 * without :has(). */
.screens__pick { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; margin: 0; padding: 0; border: 0; }
.screens__pick legend { float: left; margin-right: .5rem; color: var(--muted); font-size: .9375rem; }
.screens__pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.screens__pick label {
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 2rem; padding: .25rem .75rem;
  background: transparent; color: var(--ink);
  font-size: .9375rem; cursor: pointer;
}
.screens__pick label:hover { background: #352F26; }
.screens__pick input:checked + label:hover { background: var(--accent); }
.screens__pick input:checked + label { background: var(--accent); color: var(--dark); }
.screens__pick input:focus-visible + label { outline: 3px solid var(--ink); outline-offset: 2px; }
.chip { width: .8rem; height: .8rem; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35); }
.screens__pick input:checked + label .chip { box-shadow: 0 0 0 1.5px var(--dark); }
.chip--blue { background: #0000AA; }
.chip--green { background: #33FF66; }
.chip--amber { background: #FFB000; }
.chip--paper { background: #FFFFFF; }
.screens__shot { display: none; }
.screens__shot--green { display: block; }
.screens:has(input:checked:not(#screen-green)) .screens__shot--green { display: none; }
.screens:has(#screen-blue:checked) .screens__shot--blue,
.screens:has(#screen-amber:checked) .screens__shot--amber,
.screens:has(#screen-paper:checked) .screens__shot--paper { display: block; }

/* ---------- Rows: the heading in the margin, the text beside it ---------- */
.w-sec { padding: 0; }
.w-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  column-gap: clamp(2rem, 5vw, 5rem);
  padding: clamp(2.5rem, 5vw, 3.75rem) 0;
  border-top: 1px solid var(--line);
}
/* Section headings in the body font: easier to scan than the screen font,
 * which stays for page titles, the call to sign up and the wordmark. */
.w-row > h2 { margin: 0; font-family: var(--serif); font-weight: 700; font-size: clamp(1.375rem, 1.2rem + .5vw, 1.625rem); line-height: 1.3; }
.w-row__body { min-width: 0; }
.w-row__body > :last-child { margin-bottom: 0; }
.w-row__body > ul:not([class]) { padding-left: 1.25rem; }
.w-row__body > ul:not([class]) li { margin-bottom: .4rem; }
.w-row__body > ul:not([class]) li::marker { color: var(--accent); }

/* Points on the front page, each with a small green block, two abreast. */
.points { list-style: none; margin: 0 0 1.75rem; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2.5rem; }
.points li { position: relative; padding-left: 1.5rem; }
.points li::before { content: ""; position: absolute; left: 0; top: .45em; width: .55rem; height: .8rem; background: var(--accent); }
.points p { margin: 0; }

/* Questions and answers. */
.faq__item + .faq__item { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.faq__item p { margin: 0; }

/* Read next, after the call to sign up. */
.w-sec--next { padding-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.related { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 2rem; }
.related a { font-weight: 700; }

/* Which edition has a feature, where it is not free. */
.w-ed {
  display: inline-block; margin-left: .35em; padding: .05em .6em;
  background: var(--surface-2); color: var(--ink);
  border: 0;
  font-size: .75rem; font-weight: 700; line-height: 1.5;
  white-space: nowrap; vertical-align: .15em;
}

/* ---------- The call to sign up: a block of green ---------- */
.cta {
  position: relative;
  overflow: hidden;
  margin: 3rem 0 clamp(2.5rem, 5vw, 3.5rem);
  padding: clamp(1.75rem, 4vw, 2.5rem) 1.75rem;
  background: var(--accent);
  color: var(--dark);
}
/* Faint scan lines, as on the screen. */
.cta::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(20, 18, 14, .05) 0 1px, transparent 1px 4px);
}
.cta > * { position: relative; z-index: 1; }
.cta h2 { margin: 0 0 .75rem; color: var(--dark); font-size: clamp(2rem, 1.5rem + 2vw, 3rem); }
.cta p { margin: 0; font-size: 1.125rem; }
.cta .w-go { margin-top: 1.5rem; }
.cta :focus-visible { outline-color: var(--dark); }
.cta .w-btn { background: var(--dark); color: var(--accent); }
.cta .w-btn--ghost { background: rgba(20, 18, 14, .14); color: var(--dark); }
/* On the green panel the shadow is dark. */
.cta .w-btn:hover, .cta .w-btn:focus-visible { color: var(--accent); box-shadow: 5px 5px 0 var(--dark); }
.cta .w-btn--ghost:hover, .cta .w-btn--ghost:focus-visible { background: rgba(20, 18, 14, .14); color: var(--dark); }

/* ---------- What's in the box: groups that open ---------- */
/* Flat Metro tiles with room between them. The name of a group sits over
 * its hint, with the toggle square on the right; open, a rule parts the
 * header from the list. Native <details>, so keys and screen readers
 * work with no script. */
.acc-list { display: grid; gap: .75rem; }
.acc { background: var(--surface); }
.acc summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1rem 1.25rem 1rem 1.75rem;
  cursor: pointer;
  list-style: none;
  transition: background-color .12s;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary:hover { background: var(--surface-2); }
.acc summary:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }
.acc__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1.5rem; min-width: 0; }
.acc__title { font-family: var(--display); font-size: 1.5rem; line-height: 1.2; }
.acc__hint { color: var(--muted); font-size: 1rem; line-height: 1.4; }
.acc summary::after {
  content: "+";
  flex: none;
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem;
  background: var(--surface-2); color: var(--accent);
  font-family: var(--serif); font-size: 1.75rem; font-weight: 400; line-height: 1;
  transition: background-color .12s, box-shadow .12s;
}
.acc summary:hover::after, .acc summary:focus-visible::after { background: #352F26; box-shadow: 4px 4px 0 var(--accent); }
.acc[open] summary::after { content: "\2212"; background: var(--accent); color: var(--dark); }
.acc[open] summary:hover::after, .acc[open] summary:focus-visible::after { background: var(--accent); box-shadow: 4px 4px 0 var(--ink); }
.acc__body { margin: 0 1.75rem; padding: 1.25rem 0 1.5rem; border-top: 1px solid var(--line); font-size: 1.0625rem; }
.acc__body ul { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: .75rem; }
.acc__body li { position: relative; padding-left: 1.5rem; }
.acc__body li::before { content: ""; position: absolute; left: 0; top: .5em; width: .45rem; height: .65rem; background: var(--accent); }
.acc__body > :last-child { margin-bottom: 0; }
/* What is left out: plain text under the groups, inset to line up with
 * the text of the tiles and the call to sign up, with equal space above
 * and below. */
.acc-note { margin: 3rem 0; padding: 0 1.75rem; font-size: 1.1875rem; }
.acc-note b { color: var(--accent); }

/* ---------- Editions: the price table ---------- */
/* Three editions side by side. Their parts share rows (subgrid), so the
 * names, prices, buttons and lists line up across the table. The Zip disk
 * edition stands out: a green band above it, a lighter tile, the price
 * in green and the green button, and it starts a row higher. */
.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto auto auto auto 1fr;
  column-gap: 1rem;
  align-items: start;
}
.plan {
  display: grid;
  grid-row: 2 / span 5;
  grid-template-rows: subgrid;
  row-gap: 0;
  padding: 0 1.75rem 2rem;
  background: var(--surface);
}
.plan--main { grid-row: 1 / span 6; background: var(--surface-2); box-shadow: inset 0 0 0 2px var(--accent); }
.plan__band {
  margin: 0 -1.75rem;
  padding: .6rem 1.75rem;
  background: var(--accent); color: var(--dark);
  font-size: .9375rem; font-weight: 700; text-align: center;
}
.plan__name { margin: 2rem 0 .5rem; font-family: var(--display); font-weight: 400; font-size: 2rem; line-height: 1.1; }
.plan__for { margin: 0 0 1.5rem; color: var(--muted); font-size: 1rem; }
.plan__price { margin: 0 0 1.5rem; color: var(--muted); font-size: 1rem; }
.plan__price b { display: inline-block; margin-right: .35rem; color: var(--ink); font-family: var(--display); font-weight: 400; font-size: 3.5rem; line-height: 1; vertical-align: -.1em; }
.plan__price span { display: block; margin-top: .15rem; }
.plan--main .plan__price b { color: var(--accent); }
.plan__go { margin: 0 0 1.75rem; }
.plan__go .w-btn { width: 100%; }
.plan__list { padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: 1rem; }
.plan--main .plan__list { border-top-color: #3A342A; }
.plan__list p { margin: 0 0 .9rem; font-weight: 700; }
.plan__list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.plan__list li { position: relative; padding-left: 1.6rem; line-height: 1.45; }
.plan__list li::before {
  content: ""; position: absolute; left: .2rem; top: .2em;
  width: .4rem; height: .75rem;
  border: solid var(--accent); border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
.plans__note { margin: 1.75rem 0 3rem; color: var(--muted); font-size: 1rem; text-align: center; }

/* ---------- Guides ---------- */
/* The guides page: a topic, then its guides as flat square cards. The
 * whole card opens the guide (the link in its heading covers it). On hover
 * and focus it casts a solid shadow to the right and below, like the
 * windows of DOS programs. */
.topic { padding-bottom: clamp(2rem, 4vw, 3rem); }
.topic h2 { padding-top: 2.5rem; border-top: 1px solid var(--line); margin-bottom: 1.5rem; }
.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: 1rem; }
.card {
  position: relative;
  display: flex; flex-direction: column;
  padding: 1.5rem 1.5rem 1.75rem;
  background: var(--surface);
  transition: background-color .12s, box-shadow .12s;
}
.card:hover, .card:focus-within { background: var(--surface-2); box-shadow: 8px 8px 0 var(--accent); }
.card h3 { margin: 0 0 .6rem; font-size: 1.25rem; }
.card h3 a { color: var(--ink); text-decoration: none; }
.card h3 a::after { content: ""; position: absolute; inset: 0; }
.card:hover h3 a { color: var(--accent); }
.card h3 a:focus-visible { outline: none; }
.card:focus-within { outline: 3px solid var(--ink); outline-offset: 3px; }
.card p { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.55; }
/* More guides, under a guide: the heading above, the cards across the page. */
.more .w-wrap { padding-top: clamp(2.5rem, 5vw, 3.75rem); border-top: 1px solid var(--line); }
.more__title { margin: 0 0 1.75rem; font-family: var(--serif); font-weight: 700; font-size: clamp(1.375rem, 1.2rem + .5vw, 1.625rem); line-height: 1.3; }
.cards--more { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.cards__all { margin: 1.5rem 0 0; font-weight: 700; }

.w-eyebrow { margin: 0 0 1.75rem; color: var(--muted); font-size: 1rem; }
.w-eyebrow a { color: inherit; }
.w-eyebrow a:hover { color: var(--ink); }
.w-dateline { margin: 2rem 0 0; color: var(--muted); font-size: 1rem; }

/* A guide's text, from its Markdown (App\Libraries\Guide): one centred
 * column under the page title, about 80 characters a line, with each
 * heading above its text in the body font. No italics anywhere, so
 * emphasis is underlined, as the retro screens show it. */
.w-article { max-width: 56rem; margin: 0 auto; padding: 0 0 clamp(3.5rem, 7vw, 5rem); line-height: 1.75; }
.w-article > :first-child { margin-top: 0; }
.w-article h2 {
  margin: 4.5rem 0 1.5rem;
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(1.5rem, 1.3rem + .6vw, 1.875rem); line-height: 1.25;
}
.w-article h3 { margin: 2.75rem 0 .75rem; }
.w-article p, .w-article ul, .w-article ol, .w-article blockquote { margin: 0 0 1.6rem; }
.w-article pre, .w-article .w-scroll { margin: 2rem 0; }
.w-article em { font-style: normal; text-decoration: underline; text-underline-offset: .2em; }
.w-article ul { padding-left: 1.25rem; }
.w-article ol { padding-left: 1.5rem; }
.w-article li { margin-bottom: .6rem; }
.w-article li::marker { color: var(--accent); }
.w-article li > p { margin: 0; }
.w-article code {
  padding: .05em .35em;
  background: var(--surface-2);
  border-radius: 0;
  font-family: var(--mono); font-size: .85em;
  overflow-wrap: anywhere;
}
.w-article pre {
  padding: 1.5rem 1.75rem;
  background: var(--surface);
  overflow-x: auto;
  line-height: 1.5;
}
.w-article pre code { padding: 0; background: none; font-size: .9375rem; overflow-wrap: normal; }
.w-article blockquote { padding: .25rem 0 .25rem 1.25rem; border-left: 4px solid var(--accent); }
.w-article blockquote p:last-child { margin-bottom: 0; }
.w-article hr { height: 0; margin: 2.5rem 0; border: 0; border-top: 1px solid var(--line); }
.w-article table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.w-article th, .w-article td { padding: .75rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.w-article thead th { border-bottom: 2px solid var(--ink); }
.w-article td code { white-space: nowrap; overflow-wrap: normal; }
.w-article .w-ed { margin-left: 0; }
.w-scroll { overflow-x: auto; }
.w-scroll:focus-visible { outline-offset: 2px; }

/* ---------- The key template: a card to print and cut out ---------- */
.tpl-sec { padding: 0 0 clamp(2.5rem, 5vw, 4rem); }
.tpl {
  padding: 1.25rem;
  background: var(--card);
  color: var(--card-ink);
  outline: 2px dashed var(--line-strong);
  outline-offset: .6rem;
  font-size: 1rem;
}
.tpl__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 2rem; margin-bottom: 1rem; }
.tpl__head h2 { margin: 0; color: var(--card-ink); font-size: 1.5rem; }
.tpl__head h2 span { color: #AA0000; }
.tpl__legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; font-size: .8125rem; }
.tpl__cut { margin: 1rem 0 0; text-align: right; color: var(--muted); font-size: .8125rem; }
.tpl :focus-visible { outline-color: var(--card-ink); }
.tpl__cut::before { content: "\2702  "; }
.tpl__groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.tpl__group { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem; }
/* Each key box sizes its text to its own width (container units), so the
 * longest label, Properties, fits on one line. */
.fk { display: flex; flex-direction: column; background: #FFFFFF; border: 1px solid var(--card-ink); min-width: 0; container-type: inline-size; }
.fk__key { margin: 0; padding: .2rem 0; background: var(--card-ink); color: #FFFFFF; text-align: center; font-family: var(--display); font-weight: 400; font-size: 1.25rem; }
.fk dl { margin: 0; flex: 1; display: grid; grid-template-rows: repeat(4, minmax(3.1rem, auto)); }
.fk .m { padding: .3rem .35rem; border-top: 1px solid var(--card-line); min-width: 0; }
.fk .m--ctrl { grid-row: 1; } .fk .m--shift { grid-row: 2; } .fk .m--alt { grid-row: 3; }
.fk .m--key { grid-row: 4; background: var(--card); }
.fk dt { margin: 0 0 .1rem; }
.fk dd { margin: 0; font-family: var(--mono); font-weight: 700; font-size: clamp(.75rem, calc((100cqw - .75rem) / 6.2), .875rem); letter-spacing: -.03em; line-height: 1.15; overflow-wrap: break-word; }
.fk__none { margin: auto 0; padding: .5rem; text-align: center; font-size: .75rem; color: #5C5346; }
.tag { display: inline-block; padding: 0 .35em; font-size: .6875rem; font-weight: 700; line-height: 1.5; letter-spacing: .04em; }
.m--ctrl .tag { background: #AA0000; color: #FFFFFF; }
.m--shift .tag { background: #0000AA; color: #FFFFFF; }
.m--alt .tag { background: var(--card-ink); color: var(--accent); }
.m--key .tag { background: #FFFFFF; color: var(--card-ink); box-shadow: inset 0 0 0 1px var(--card-ink); }

.keylists { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 1.5rem; margin-top: 3rem; }
.keylist { padding: 1.5rem; background: var(--surface); }
.keylist dl { margin: 0; display: grid; gap: 0 2rem; }
.keylist__two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.keylist dl > div { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0; border-bottom: 1px solid var(--line); }
.keylist dd { margin: 0; text-align: right; }
.keynote { margin-top: 1.5rem; padding: 1.5rem; background: var(--surface); }
.keynote p:last-child { margin: 0; }
/* Card headings in the body font, like the section headings. */
.keylist h2, .keynote h2 { font-family: var(--serif); font-weight: 700; font-size: 1.375rem; line-height: 1.3; margin-bottom: 1rem; }

/* ---------- Footer: the wordmark and the way in, then the links ---------- */
.w-foot { background: var(--deep); border-top: 1px solid var(--line); font-size: 1rem; }
.w-foot__in {
  display: grid;
  gap: clamp(2.5rem, 5vw, 3.5rem);
  padding: clamp(3rem, 7vw, 5rem) 0 3rem;
}
.w-foot__brand { display: flex; flex-wrap: wrap; align-items: baseline; gap: .75rem 2rem; padding-bottom: clamp(2rem, 4vw, 3rem); border-bottom: 1px solid var(--line); }
.w-foot__mark { margin: 0; font-family: var(--display); font-size: clamp(2.5rem, 1.75rem + 2.5vw, 4rem); line-height: 1; }
.w-foot__line { margin: 0; font-size: 1.25rem; line-height: 1.4; }
.w-foot__line span { color: var(--muted); }
.w-foot__groups { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); gap: 2rem clamp(2rem, 5vw, 4rem); align-content: start; }
.w-foot__head { margin: 0 0 .75rem; color: var(--muted); font-family: var(--serif); font-weight: 400; font-size: .875rem; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; }
.w-foot__links { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem 1.5rem; }
.w-foot__links--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.w-foot__links a { display: inline-block; padding: .3rem 0; color: var(--ink); text-decoration: none; }
.w-foot__links a:hover { color: var(--accent); text-decoration: underline; }
.w-foot__links a[aria-current="page"] { color: var(--accent); }
.w-foot__base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem;
  padding: 1.25rem 0 1.5rem;
  border-top: 1px solid var(--line);
  color: var(--muted); font-size: .9375rem;
}
.w-foot__base p { margin: 0; }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (forced-colors: active) {
  .w-btn, .screens__pick label, .cta, .plan, .tpl, .keylist, .w-ed, .card, .window, .acc { border: 2px solid CanvasText; }
  .points li::before { forced-color-adjust: none; }
}

/* ---------- Smaller screens ---------- */
@media (max-width: 75rem) {
  .tpl__groups { grid-template-columns: 1fr; }
}
@media (max-width: 52rem) {
  .w-row { grid-template-columns: 1fr; padding: 2rem 0; }
  .points { grid-template-columns: 1fr; }
  .w-foot__groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .w-foot__groups > :nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .w-row > h2 { margin-bottom: 1rem; }
  .acc summary { padding: 1.25rem; }
  .acc-note { padding: 0 1.25rem; }
  .plans { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 1rem; }
  .plan, .plan--main { grid-row: auto; grid-template-rows: none; display: block; padding: 0 1.25rem 1.75rem; }
  .plan__band { margin: 0 -1.25rem; }
  .cta { padding-inline: 1.25rem; }
  .acc__body { margin: 0 1.25rem; }
  .keylists { grid-template-columns: 1fr; }
}
@media (max-width: 40rem) {
  body { font-size: 1.125rem; }
  .w-bar { position: static; }
  .w-bar__in { gap: 0 1rem; }
  .w-nav { order: 3; flex-basis: 100%; min-width: 0; margin: 0 -.7rem; }
  .w-nav ul { flex-wrap: nowrap; overflow-x: auto; }
  .w-nav a { white-space: nowrap; }
  .w-bar__go { gap: .75rem; }
  .tpl__group { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .keylist__two { grid-template-columns: 1fr; }
}

/* ---------- Print: the key template on one sheet of A4 ---------- */
@media print {
  @page { size: A4 landscape; margin: 10mm; }
  html, body { background: #FFFFFF; color: #000000; }
  body { display: block; font-size: 10pt; }
  .w-bar, .w-foot, .w-skip, .page-top, .keynote { display: none !important; }
  * { box-shadow: none !important; text-shadow: none !important; }
  .w-wrap { width: 100%; }
  .tpl-sec { padding: 0; }
  .tpl { -webkit-print-color-adjust: exact; print-color-adjust: exact; border-radius: 0; outline: 1px dashed #000000; outline-offset: 3mm; border: 0; margin: 3mm; }
  .tpl__groups { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4mm; }
  .tpl__group { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fk dl { grid-template-rows: repeat(4, minmax(10mm, auto)); }
  .fk dd { font-size: 8.5pt; }
  .fk__key, .tag { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .tpl__cut { margin-top: 5mm; }
  .keylists { break-before: page; margin-top: 0; grid-template-columns: 1fr 2fr; }
  .keylist { border: 1px solid #000000; }
  kbd { border: 1px solid #000000; }
}