/* escapist.club — a game table: an app is a card in the spirit of Magic: The Gathering, a link is a card
   in the spirit of Dominion.
   Values come from the design spec (docs/superpowers/specs/2026-10-12-escapist-showcase-design.md, §4). */

/* ---------- Tokens (§4.1) ---------- */

:root {
  --felt: #24593d;
  --cream: #f3ead6;
  --cream-muted: #d8cdb3;

  --serif: 'Crimson Pro', Georgia, 'Times New Roman', serif;
  --sans: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Cinzel', 'Crimson Pro', Georgia, serif;

  /* Card parts: the cream of title bars and ribbons, the paper of text boxes, the ink */
  --bar: #f5ecd8;
  --bar-shade: #dccdac;
  --paper: #f4ecda;
  --ink: #1a1a1a;

  /* The character sheet (§4.9): paper, the grey strips under the name, the abilities and the traits,
     the lines of the frames, quiet labels and the rules under the values */
  --sheet-paper: #fbf7ee;
  --sheet-strip: #e8e2d4;
  --sheet-line: #2b2b2b;
  --sheet-muted: #5b554b;
  --sheet-rule: #8d877b;
}

/* ---------- Fonts (§4.2): all local, no requests elsewhere ---------- */

@font-face {
  font-family: 'Crimson Pro';
  src: url('/fonts/CrimsonPro-Variable.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Crimson Pro';
  src: url('/fonts/CrimsonPro-Italic-Variable.woff2') format('woff2');
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Cinzel';
  src: url('/fonts/cinzel-latin-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Open Sans';
  src: url('/fonts/open-sans-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Open Sans';
  src: url('/fonts/open-sans-latin-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- The felt: on <html>, so it fills the whole canvas however short the page is ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background:
    radial-gradient(ellipse at 50% 35%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .45) 100%),
    url('/img/felt.webp'),
    var(--felt);
  color: var(--cream);
  font-family: var(--serif);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
}

/* ---------- Page frame (§4.7): the cards in a column of at most 1100 px, the header and the character sheet
   up to 1060 px, felt margins at least 16 px ---------- */

.page {
  max-width: calc(1100px + 2 * 16px);
  margin: 0 auto;
  padding: clamp(32px, 6vw, 56px) 16px 40px;
}

/* ---------- Masthead (§4.10): a page of the character sheet — the name's frame and the welcome's;
   as wide as the sheet ---------- */

.masthead {
  max-width: 1060px;
  margin: 0 auto;
}

.masthead__paper {
  display: grid;
  gap: 12px;
  padding: clamp(14px, 2vw, 22px);
  border-radius: 4px;
  background: var(--sheet-paper);
  box-shadow: 0 18px 30px rgba(0, 0, 0, .45), 0 2px 4px rgba(0, 0, 0, .4);
  color: var(--ink);
}

/* The header's frames: the sheet's dark rule and scooped corners, deeper here — their padding is larger */
.masthead__name,
.masthead__welcome {
  border: 2px solid var(--sheet-line);
  border-radius: 12px;
  corner-shape: scoop;
}

/* The name's frame, as on the sheet: the grey strip, the name over its rule; no label */
.masthead__name {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0;
  padding: 16px 18px;
  background: var(--sheet-strip);
  font-weight: 600;
  font-size: clamp(1.75rem, 1.25rem + 1.8vw, 2.5rem);
  line-height: 1.1;
}

.masthead__name::after {
  content: '';
  margin-top: 6px;
  border-bottom: 1px solid var(--sheet-line);
}

.masthead__welcome {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 12px 16px;
  font-size: clamp(1.0625rem, .95rem + .5vw, 1.25rem);
  line-height: 1.4;
}

/* From 700 px the name stands beside the welcome, its frame as wide as the name on one line */
@media (min-width: 700px) {
  .masthead__paper {
    grid-template-columns: auto minmax(0, 1fr);
  }
}

/* On the other pages the paper holds the name alone and is as wide as it */
.masthead__paper--name {
  grid-template-columns: minmax(0, auto);
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
}

/* ---------- App cards (§4.3): in the spirit of Magic: The Gathering ----------
   Black border → frame in the app's colour → title bar, art window, type line, text box, the address and ↗.
   The card keeps a real MTG card's 63 : 88; everything inside is drawn in units of the card's width (--u is
   one pixel of a 320 px card), so the drawing scales as one piece and the proportion holds at any width. */

.apps {
  max-width: 1100px;
  list-style: none;
  margin: clamp(32px, 5vw, 48px) auto 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 320px));
  justify-content: center;
  gap: 30px;
}

.app--western {
  --frame: #6e2415;
  --art: repeating-linear-gradient(90deg, #5a3a22 0 10.6%, #3f2716 10.6% 11.6%, #6a452a 11.6% 21.8%, #3f2716 21.8% 22.8%);
}

.app--flying {
  --frame: #1f3350;
  --art: linear-gradient(180deg, #4d6683, #2a3a50);
}

.app--whoami {
  --frame: #5b3a8c;
  --art: linear-gradient(135deg, #667eea, #764ba2);
}

.app__link {
  display: block;
  color: inherit;
  text-decoration: none;
  border-radius: 4.4%/3.15%;
}

.mcard {
  container-type: inline-size;
  /* A preferred ratio, not a fixed height: with enlarged text the card grows instead of clipping */
  aspect-ratio: 63 / 88;
  display: flex;
  flex-direction: column;
  padding: 3.4375%;
  border-radius: 4.4%/3.15%;
  background: #111;
  box-shadow: 0 14px 24px rgba(0, 0, 0, .5), 0 2px 3px rgba(0, 0, 0, .45);
}

.mcard__frame {
  /* cqi is the card's inner width — 298 px on a 320 px card, inside the 3.4375% black border */
  --u: calc(100cqi / 298);
  flex: 1;
  display: flex;
  flex-direction: column;
  border-radius: calc(6 * var(--u)) calc(6 * var(--u)) calc(18 * var(--u)) calc(18 * var(--u));
  background: linear-gradient(160deg, color-mix(in srgb, var(--frame) 80%, white), var(--frame));
}

/* One line as a rule; a bar wraps only when its text does not fit (a minimum font size set in the browser),
   and the card grows instead of letting the text spill */
.mcard__title,
.mcard__type {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(6 * var(--u));
  margin: calc(6 * var(--u)) calc(6 * var(--u)) 0;
  padding: calc(5 * var(--u)) calc(9 * var(--u));
  border-radius: calc(7 * var(--u));
  background: linear-gradient(var(--bar), var(--bar-shade));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .4), 0 1px 2px rgba(0, 0, 0, .35);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.1;
}

.mcard__name {
  margin: 0;
  font: inherit;
  font-size: calc(15 * var(--u));
}

.mcard__cost {
  flex: none;
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--frame);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5);
  color: var(--bar);
  font-family: var(--serif);
  font-size: calc(12 * var(--u));
}

.mcard__art {
  aspect-ratio: 2 / 1;
  margin: calc(5 * var(--u)) calc(12 * var(--u)) 0;
  padding: calc(10 * var(--u)) calc(14 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--art);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .55);
}

.app__plate {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* The shadow follows the plate's outline: Western Setup's arched top included */
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .5));
}

.mcard__type {
  margin-top: calc(5 * var(--u));
  font-size: calc(12.5 * var(--u));
}

.mcard__text {
  flex: 1;
  margin: calc(5 * var(--u)) calc(12 * var(--u)) 0;
  padding: calc(12 * var(--u)) calc(14 * var(--u)) calc(16 * var(--u));
  background: var(--paper);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35);
  color: var(--ink);
  font-family: var(--serif);
}

.mcard__desc {
  margin: 0;
  /* Large on purpose (21 px on a full-size card), and never under 17 px on the narrowest three-column card */
  font-size: clamp(17px, calc(21 * var(--u)), 24px);
  line-height: 1.3;
}

.mcard__flavor {
  margin: .6em 0 0;
  font-style: italic;
  font-size: clamp(15px, calc(19 * var(--u)), 22px);
  line-height: 1.3;
  color: #4a443d;
}

.mcard__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: calc(4 * var(--u)) calc(6 * var(--u)) calc(6 * var(--u)) calc(14 * var(--u));
}

.mcard__credit {
  font-family: var(--sans);
  font-weight: 700;
  font-size: max(10px, calc(11 * var(--u)));
  letter-spacing: .02em;
  color: var(--cream);
}

.mcard__pt {
  padding: calc(1 * var(--u)) calc(10 * var(--u));
  border-radius: calc(6 * var(--u));
  background: linear-gradient(var(--bar), var(--bar-shade));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .4), 0 1px 2px rgba(0, 0, 0, .35);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 700;
  font-size: calc(14 * var(--u));
  line-height: 1.3;
}

/* ---------- Link cards (§4.5): in the spirit of Dominion ----------
   Name ribbon, art, "+1 …" text box, type ribbon; the card's colour is its Dominion type. A real Dominion card's
   59 : 91; drawn in units of the card's width like the app cards (--u is one pixel of a 150 px card). */

.links {
  max-width: 1100px;
  list-style: none;
  margin: clamp(44px, 6vw, 60px) auto 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
}

.links li {
  width: 150px;
}

.dcard {
  container-type: inline-size;
  aspect-ratio: 59 / 91;
  display: flex;
  flex-direction: column;
  border-radius: 6%/3.9%;
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 8px 14px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .35);
}

.dcard > * {
  --u: calc(100cqi / 150);
}

.dcard--action { background: #e9dfc7; }
.dcard--reaction { background: #a9c6e4; }
.dcard--duration { background: #e6a86b; }
.dcard--treasure { background: #e3c45a; }

.dcard__name,
.dcard__type {
  margin: calc(7 * var(--u)) calc(7 * var(--u)) 0;
  padding: calc(3 * var(--u)) calc(2 * var(--u));
  border-radius: calc(3 * var(--u));
  background: #f7f0dc;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25);
  text-align: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: calc(11.5 * var(--u));
  line-height: 1.2;
  white-space: nowrap;
}

.dcard__art {
  height: calc(70 * var(--u));
  margin: calc(4 * var(--u)) calc(7 * var(--u)) 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fbf8ef;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .3);
}

.dcard__art svg {
  width: calc(36 * var(--u));
  height: calc(36 * var(--u));
}

/* Logo colours: each passes WCAG 1.4.11 (3 : 1) on the art's paper; the gold one is darker than the card */
.dcard--github .dcard__art { color: #1f1f1f; }
.dcard--linkedin .dcard__art { color: #0a66c2; }
.dcard--envelope .dcard__art { color: #8a2a1a; }
.dcard--bmc .dcard__art { color: #9a7209; }

.dcard__text {
  flex: 1;
  margin: calc(4 * var(--u)) calc(7 * var(--u)) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(4 * var(--u));
  background: #fbf8ef;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25);
  text-align: center;
}

.dcard__plus {
  font-family: var(--display);
  font-weight: 700;
  font-size: calc(15 * var(--u));
  line-height: 1.05;
  white-space: nowrap;
}

.dcard__addr {
  font-family: var(--sans);
  font-weight: 700;
  font-size: max(10px, calc(10 * var(--u)));
  color: #333;
}

/* Two lines tall on every card, so all four ribbons end on one line: a two-part type breaks at its dash */
.dcard__type {
  margin-bottom: calc(7 * var(--u));
  /* Two lines high whatever the type, so the ribbons end on one line. lh, not em: with a minimum font size set
     in the browser, em still counts from the size before the minimum and the box would be too small for its text */
  height: calc(2 * 1.25em + 6 * var(--u));
  height: calc(2lh + 6 * var(--u));
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: calc(10.5 * var(--u));
  line-height: 1.25;
  text-transform: uppercase;
}

/* ---------- Focus and hover (§4.8) ---------- */

.app__link:focus-visible,
.dcard:focus-visible {
  outline: 3px solid var(--cream);
  outline-offset: 6px;
}

/* The lift is for a mouse: on a touch screen a tapped card would stay lifted */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .app__link,
  .dcard {
    transition: transform .18s ease, box-shadow .18s ease;
  }

  .mcard {
    transition: box-shadow .18s ease;
  }

  .app__link:hover,
  .dcard:hover {
    transform: translateY(-4px);
  }
}

/* With reduced motion the shadows still grow: the card is picked up without moving */
@media (hover: hover) {
  .app__link:hover .mcard {
    box-shadow: 0 20px 30px rgba(0, 0, 0, .55), 0 3px 4px rgba(0, 0, 0, .45);
  }

  .dcard:hover {
    box-shadow: 0 13px 20px rgba(0, 0, 0, .5), 0 2px 3px rgba(0, 0, 0, .4);
  }
}

/* ---------- Character sheet (§4.9): in the spirit of a D&D 5e character sheet ----------
   A printed sheet of paper on the table: the name and the fields, the abilities down the left edge, skills,
   equipment, traits. The sheet lays itself out by its own width (container queries), like the cards: one
   column on a phone, two from 620 px of sheet, the 5e layout from 960 px. On a phone the lower part folds
   into a <details>; from 620 px of sheet that part is always open and the button is gone.
   Text is sized in rem, so the sheet follows the text size chosen in the browser. Boxes take their height
   from their text: with a minimum font size set in the browser, em in a length still counts from the size
   before the minimum, and an em-sized box would be too small for its text. */

/* Words for screen readers only: "modifier", "score", "Expertise:" */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* At most 1060 px: there the 5e layout fills a portrait A4 page (§4.9) */
.sheet {
  container-type: inline-size;
  max-width: 1060px;
  margin: clamp(44px, 6vw, 60px) auto 0;
}

/* A portrait A4 page at least: where the text needs more, the page grows instead of clipping it.
   The frames are as tall as their text; the height the text leaves stays at the foot of the page (§4.9) */
.sheet__paper {
  aspect-ratio: 210 / 297;
  padding: 16px 14px 20px;
  border-radius: 4px;
  background: var(--sheet-paper);
  box-shadow: 0 18px 30px rgba(0, 0, 0, .45), 0 2px 4px rgba(0, 0, 0, .4);
  color: var(--ink);
  font-family: var(--serif);
  /* A word longer than its column (enlarged text, a narrow sheet) breaks instead of spilling out of the frame */
  overflow-wrap: anywhere;
}

.sheet dl,
.sheet dd,
.sheet p {
  margin: 0;
}

.sheet__title {
  margin: 0 0 8px 4px;
  color: var(--sheet-muted);
  font-family: var(--display);
  font-weight: 700;
  font-size: .8125rem;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* The small print of the form: field labels, box titles, the headings of the skill groups, the button */
.field dt,
.box__title,
.skill-group__title,
.sheet__prof-label,
.sheet__profs dt,
.sheet__toggle {
  font-family: var(--sans);
  font-weight: 700;
  font-size: .65625rem;
  line-height: 1.2;
  letter-spacing: .09em;
  text-transform: uppercase;
  hyphens: auto;
  overflow-wrap: anywhere;
}

/* 5e frames: a dark rule and scooped corners (plain rounded ones where corner-shape is unknown). The scoops are
   shallow, 8 px: the frames' padding is small, and a deeper scoop would cut into the text in a corner (§4.9) */
.box,
.ability,
.sheet__name,
.sheet__abilities,
.sheet__persona,
.sheet__combat,
.sheet__stat {
  border: 2px solid var(--sheet-line);
  border-radius: 8px;
  corner-shape: scoop;
}

/* A box's title comes first for screen readers and sits at the bottom of the frame, as on a 5e sheet.
   One small padding in every frame of the sheet (§4.9) */
.box {
  display: flex;
  flex-direction: column;
  padding: 6px;
  background: var(--sheet-paper);
}

.box__title {
  order: 1;
  margin: auto 0 0;
  padding-top: 10px;
  text-align: center;
}

/* Header: the name on its own strip, the fields with the value above its label */
.sheet__head {
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
}

.sheet__name {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6px;
  background: var(--sheet-strip);
}

.field {
  display: flex;
  flex-direction: column-reverse;
}

.field dd {
  padding-bottom: 3px;
  border-bottom: 1px solid var(--sheet-rule);
  font-size: 1.3125rem;
  line-height: 1.2;
}

/* The field labels are regular, not bold (the owner's call); box titles stay bold */
.field dt {
  margin-top: 4px;
  color: var(--sheet-muted);
  font-weight: 400;
  font-size: .625rem;
}

.sheet__name dd {
  padding-bottom: 6px;
  border-bottom-color: var(--sheet-line);
  font-size: 1.625rem;
  font-weight: 600;
  line-height: 1.1;
}

.sheet__name dt {
  color: var(--ink);
  font-size: .65625rem;
}

.sheet__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
  padding: 6px;
}

.field--wide {
  grid-column: 1 / -1;
}

/* Abilities: the name, the modifier, the score in an oval on the bottom edge */
.sheet__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.sheet__abilities {
  list-style: none;
  margin: 0;
  padding: 6px 6px 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 8px;
  align-content: start;
  background: var(--sheet-strip);
}

.ability {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 1.4rem;
  padding: 6px 6px 1rem;
  background: var(--sheet-paper);
  text-align: center;
}

/* A word too long for its box (large text, a narrow sheet) breaks rather than spills — the small print above too */
.ability__name {
  max-width: 100%;
  hyphens: auto;
  overflow-wrap: anywhere;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.15;
}

/* Down at the bottom of its box: a name on two lines does not push it below its neighbours' in a row */
.ability__mod {
  margin-top: auto;
  font-size: 2.125rem;
  font-weight: 600;
  line-height: 1.05;
}

.ability__score {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
  min-width: 2.9em;
  padding: 0 .4em;
  border: 2px solid var(--sheet-line);
  border-radius: 50%;
  background: var(--sheet-paper);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
}

/* The fold: a bar in the style of the sheet's labels; the arrow turns when the sheet is open */
.sheet__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 6px 16px;
  border: 2px solid var(--sheet-line);
  border-radius: 999px;
  background: var(--sheet-strip);
  color: var(--ink);
  list-style: none;
  cursor: pointer;
}

.sheet__toggle::-webkit-details-marker {
  display: none;
}

.sheet__toggle::after {
  content: '';
  width: 7px;
  height: 7px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: translateY(-2px) rotate(45deg);
}

.sheet__more[open] .sheet__toggle::after {
  transform: translateY(2px) rotate(-135deg);
}

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

.sheet__hide,
.sheet__more[open] .sheet__show {
  display: none;
}

.sheet__more[open] .sheet__hide {
  display: inline;
}

/* What folds: skills, the gear, the traits */
.sheet__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin-top: 14px;
}

.sheet__skills,
.sheet__gear,
.sheet__soul {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

/* The pills' circles stand out of them: a little more room between the pills */
.sheet__skills {
  gap: 16px;
}

/* The pills as on a 5e sheet: the circle (or inspiration's square) is taller than its pill and stands out of it,
   the label sits in the middle of the rest */
.sheet__prof {
  display: flex;
  align-items: center;
  border: 2px solid var(--sheet-line);
  border-radius: 999px;
  background: var(--sheet-paper);
}

.sheet__prof-label {
  flex-grow: 1;
  padding-inline: 12px;
  text-align: center;
}

.sheet__prof-n {
  display: grid;
  place-items: center;
  min-width: 2.2em;
  min-height: 2.2em;
  margin: -6px 0 -6px -2px;
  border: 2px solid var(--sheet-line);
  border-radius: 50%;
  background: var(--sheet-paper);
  font-size: 1.3125rem;
  font-weight: 600;
}

/* Inspiration: a square at the pill's end, as on a 5e sheet, and in it a mark — there is inspiration */
.sheet__prof--inspiration .sheet__prof-n {
  border-radius: 8px;
  corner-shape: scoop;
}

/* A dot drawn with its border, not a background: forced colors keep it */
.sheet__prof-mark {
  width: .875rem;
  height: .875rem;
  border: .4375rem solid currentColor;
  border-radius: 50%;
}

/* The combat block, as on a 5e sheet: initiative and speed side by side on a strip, each value large
   with its label under it */
.sheet__combat {
  display: flex;
  justify-content: center;
  gap: 14px;
  padding: 6px;
  background: var(--sheet-strip);
}

.sheet__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 6.5rem;
  padding: 6px;
  background: var(--sheet-paper);
}

.sheet__stat .box__title {
  padding-top: 4px;
}

.sheet__stat-n {
  font-size: 2.125rem;
  font-weight: 600;
  line-height: 1.05;
}

.skill-group__list,
.sheet__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Skills stand in groups under their abilities' names, in the abilities' order */
.skill-group + .skill-group {
  margin-top: 10px;
}

.skill-group__title {
  margin: 0 0 2px;
  color: var(--sheet-muted);
}

.skill {
  display: grid;
  grid-template-columns: .6875rem 2.125rem minmax(0, 1fr);
  column-gap: 6px;
  align-items: baseline;
  padding: 4px 0;
}

/* A dot drawn with its border, not a background: forced colors keep it */
.skill__mark {
  width: .6875rem;
  height: .6875rem;
  align-self: center;
  border: .34375rem solid currentColor;
  border-radius: 50%;
}

.skill--expert .skill__mark {
  outline: 1.5px solid currentColor;
  outline-offset: 2px;
}

.skill__bonus {
  border-bottom: 1px solid var(--sheet-rule);
  text-align: center;
  font-size: 1.0625rem;
  font-weight: 600;
}

.skill__name {
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.2;
}

.skill__means {
  grid-column: 3;
  font-size: 1.1875rem;
  line-height: 1.2;
}

.sheet__list li,
.sheet__profs div,
.sheet__persona p {
  font-size: 1.3125rem;
  line-height: 1.3;
}

.sheet__list li + li,
.sheet__profs div + div {
  margin-top: 9px;
}

.sheet__profs dt,
.sheet__profs dd {
  display: inline;
}

.sheet__profs dt {
  margin-right: 6px;
  color: var(--sheet-muted);
  font-weight: 400;
  font-size: .625rem;
}

.sheet__persona {
  display: grid;
  gap: 10px;
  padding: 6px;
  background: var(--sheet-strip);
}

/* From 620 px of sheet: the name beside the fields, two columns below the abilities */
@container (min-width: 620px) {
  .sheet__paper {
    padding: 22px 22px 26px;
  }

  .sheet__head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr);
  }

  .sheet__name dd {
    font-size: 1.875rem;
  }

  .sheet__fields {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .field--wide {
    grid-column: span 2;
  }

  /* The frames as tall as their text: a column ends where its last frame does */
  .sheet__body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "skills gear"
      "skills profs"
      "soul   soul";
    grid-template-rows: auto 1fr auto;
    align-items: start;
    margin-top: 0;
  }

  .sheet__skills {
    grid-area: skills;
  }

  .sheet__gear {
    grid-area: gear;
  }

  .box--profs {
    grid-area: profs;
  }

  .sheet__soul {
    grid-area: soul;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

/* Three abilities in a row where "Communication" fits a box whole: hyphenation is not available everywhere,
   and a word broken in the middle reads badly. On a narrower sheet, two in a row */
@container (min-width: 440px) {
  .sheet__abilities {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Six abilities in a row only where six fit */
@container (min-width: 820px) {
  .sheet__abilities {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/* From 960 px of sheet: the 5e layout — the abilities down the left edge, as wide as their longest word */
@container (min-width: 960px) {
  .sheet__paper {
    padding: 26px 26px 30px;
  }

  .sheet__main {
    grid-template-columns: minmax(116px, max-content) minmax(0, 1fr);
  }

  /* The strip as tall as the left third, as on a 5e sheet: six tall tiles, the modifier in the middle of each */
  .sheet__abilities {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(6, minmax(0, 1fr));
    align-content: stretch;
    gap: 0;
  }

  .ability__mod {
    margin-block: auto;
  }

  /* The name's frame as wide as the name: on the A4 page the fields need the width to stay on one line */
  .sheet__head {
    grid-template-columns: auto minmax(0, 1fr);
  }

  /* Skills down the left third; the combat block and equipment, the traits and features; the proficiencies and
     languages across under these two */
  .sheet__body {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "skills gear  soul"
      "skills profs profs";
    grid-template-rows: auto 1fr;
  }

  .sheet__soul {
    display: flex;
  }
}

/* Browsers without ::details-content (before 2025) keep the button at every width: nothing is lost */
@supports selector(::details-content) {
  @container (min-width: 620px) {
    .sheet__more::details-content {
      content-visibility: visible;
    }

    .sheet__toggle {
      display: none;
    }
  }
}

/* ---------- One column (§4.7): two columns would leave the third card alone ---------- */

@media (max-width: 860px) {
  .apps {
    grid-template-columns: minmax(0, 360px);
  }

  /* The link cards two by two */
  .links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 150px));
    gap: 16px;
  }

  .links li {
    width: auto;
  }
}

/* ---------- Text pages: Privacy (§3.2) and 404 (§3.3) ---------- */

/* On the other pages the name is a way home */
.masthead__name a {
  color: inherit;
  text-decoration: none;
}

.footer a:focus-visible,
.back:focus-visible {
  outline: 3px solid var(--cream);
  outline-offset: 4px;
}

/* On the paper the ring is ink: a cream one would vanish */
.masthead__name a:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 4px;
}

/* A sheet of cream paper on the felt: long text reads better dark on light */
.prose {
  max-width: 680px;
  margin: clamp(28px, 5vw, 44px) auto 0;
  padding: clamp(20px, 5vw, 44px);
  background: var(--cream);
  color: var(--ink);
  font-size: 1.125rem;
  line-height: 1.55;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .08), 0 14px 22px -10px rgba(0, 0, 0, .55);
}

.prose h1 {
  margin: 0;
  font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.25rem);
  line-height: 1.15;
}

.prose h2 {
  margin: 1.5em 0 .3em;
  font-size: 1.25rem;
  line-height: 1.25;
}

.prose p,
.prose address {
  margin: .75em 0 0;
}

.prose address {
  font-style: normal;
}

.prose a {
  color: #7a2216;
  text-underline-offset: .15em;
}

.prose a:focus-visible {
  outline: 3px solid #7a2216;
  outline-offset: 3px;
}

.prose__sub {
  font-style: italic;
  color: #5d564e;
}

.prose .prose__sub {
  margin-top: .2em;
}

.prose__meta {
  font-size: .9375rem;
  color: #5d564e;
}

.lost {
  margin: clamp(48px, 10vw, 96px) 0 clamp(48px, 10vw, 96px);
  text-align: center;
}

.lost__title {
  margin: 0;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
  color: var(--cream);
}

.back {
  color: var(--cream);
  text-underline-offset: .15em;
}

.lost .back {
  display: inline-block;
  margin-top: 1em;
  font-size: 1.125rem;
}

/* ---------- Footer ---------- */

.footer {
  padding: 0 16px 32px;
  text-align: center;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--cream-muted);
}

.footer p {
  margin: 0;
}

.footer a {
  color: inherit;
  text-underline-offset: .15em;
}