/* Fermi Foundation site. Plain CSS, no build step. */

/* Fonts: PT Sans and PT Serif, self-hosted (SIL Open Font License). The Latin files are our own copies without the
   fonts' kerning around spaces, which made the gap after a period narrower than a word space ("so far.Alice").
   As modified versions they go by their own names, as the license asks; the latin-ext files are unchanged. */
@font-face {
  font-family: 'Fermi Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/fermi-sans-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fermi Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/pt-sans-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fermi Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/fermi-sans-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fermi Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/pt-sans-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fermi Serif';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/fermi-serif-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fermi Serif';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/pt-serif-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Local fallbacks sized like the web fonts, so text doesn't jump when they load */
@font-face {
  font-family: 'Fermi Sans Fallback';
  src: local('Arial');
  ascent-override: 105.3%;
  descent-override: 28.55%;
  line-gap-override: 0%;
  size-adjust: 96.68%;
}
@font-face {
  font-family: 'Fermi Serif Fallback';
  src: local('Times New Roman');
  ascent-override: 94.22%;
  descent-override: 25.93%;
  line-gap-override: 0%;
  size-adjust: 110.28%;
}

:root {
  --sans: 'Fermi Sans', 'Fermi Sans Fallback', system-ui, sans-serif;
  --serif: 'Fermi Serif', 'Fermi Serif Fallback', Georgia, serif;
  --ink: #151d23;
  --ink-soft: #32424e;
  --rule: rgba(21, 29, 35, 0.5);
  --paper: #f7f7ea;
  --page-bg: #eeebdf;
  --cream: #fffef2;
  --blue: #009dff;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  /* Cards and boxes: soft grey with round corners and no frame, like the Get updates card in the phone menu */
  --card-bg: rgba(21, 29, 35, 0.065);
  --card-bg-hover: rgba(21, 29, 35, 0.1);
  --card-radius: 14px;
  /* The thin arrows on cards that lead somewhere (right) or fold open (down) */
  --arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2332424e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E");
  --arrow-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2332424e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 9 7 7 7-7'/%3E%3C/svg%3E");
  --envelope: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23151d23' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3.5 6.5 8.5 6.5 8.5-6.5'/%3E%3C/svg%3E");
  /* Design units: 1u is 1px on a 1728px-wide canvas and shrinks on narrower screens (--w keeps scaling up) */
  --u: min(1px, calc(100vw / 1728));
  --w: calc(100vw / 1728);
}

/* Reset */
*,
::before,
::after {
  box-sizing: border-box;
  border: 0 solid;
}
html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
/* The page's own background never shows inside the pages, but Safari paints it in the strip above the page
   (under the notch on iPhones) and when you scroll past the top, so it matches the top of the etching */
html { background: var(--page-bg); }
/* With the mobile menu open, it matches the menu instead */
html.menu-open { --page-bg: var(--cream); }
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: clip;
  background: var(--page-bg);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.406;
}
h1, h2, h3, p, ul, ol { margin: 0; }
h1, h2, h3 { font-size: inherit; font-weight: inherit; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; text-decoration: inherit; }
img, svg { display: block; vertical-align: middle; }
img { max-width: 100%; height: auto; }
strong { font-weight: bolder; }
sup { position: relative; top: -0.5em; font-size: 75%; line-height: 0; vertical-align: baseline; }
table { border-collapse: collapse; text-indent: 0; }
button {
  margin: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-transform: none;
  cursor: pointer;
  -webkit-appearance: button;
}

/* Menu */
.nav {
  position: relative;
  z-index: 100;
}
.nav.is-open {
  background: var(--cream);
  box-shadow: 0 1px 0 rgba(21, 29, 35, 0.12);
}
.nav__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 1200px;
  min-height: 64px;
  margin: 0 auto;
  padding: 14px 24px;
}
.nav__logo { display: block; }
/* The home page has Fermi on the left of the sky strip, so the logo only shows with the menu open */
.nav--home:not(.is-open) .nav__logo { visibility: hidden; }
.nav__links {
  display: none;
  align-items: center;
  gap: 26px;
  font-size: 17px;
}
.nav__links a {
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  transition: border-color 150ms var(--ease);
}
.nav__links a:hover,
.nav__links a[aria-current='page'] { border-color: var(--ink); }
.nav__toggle {
  display: inline-flex;
  padding: 6px;
}
.nav__toggle svg { width: 24px; height: 24px; }
.nav.is-open .nav__icon-open,
.nav:not(.is-open) .nav__icon-close { display: none; }
.nav__sheet {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: 8px 24px 18px;
  background: var(--cream);
  box-shadow: 0 1px 0 rgba(21, 29, 35, 0.12);
}
.nav__sheet ul { display: grid; gap: 4px; }
.nav__sheet a {
  display: block;
  padding: 10px 0;
  border-bottom: 1px solid rgba(21, 29, 35, 0.12);
  font-size: 18px;
}
.nav__sheet a[aria-current='page'] { font-weight: 700; }
@media (min-width: 900px) {
  .nav__links { display: flex; }
  .nav__toggle,
  .nav__sheet { display: none; }
}

/* Logo: a small photo of Fermi next to the name, set like the headings */
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 700;
  line-height: 1;
}
.logo img { width: 34px; height: 34px; }
.logo--footer { gap: 12px; font-size: 30px; }
.logo--footer img { width: 46px; height: 46px; }

/* Home page strip with the Enrico Fermi cutout. He is sized by --fermi-h; the strip is 11px taller,
   so the 10px gap above him doesn't cost any of his jacket at the bottom. */
.home {
  position: relative;
  --fermi-h: max(242px, calc(498 * var(--u)));
  --hero-h: calc(var(--fermi-h) + 11px);
}
.hero {
  position: relative;
  height: var(--hero-h);
  overflow: hidden;
}
.hero__fermi {
  position: absolute;
  /* The paper behind him starts 0.1237 of --fermi-h into the image; keep its top edge 10px below the strip */
  top: calc(10px - var(--fermi-h) * 0.1237);
  left: calc(var(--fermi-h) * -0.45);
  width: auto;
  max-width: none;
  height: calc(var(--fermi-h) * 1.7);
  user-select: none;
}
/* Menu floats over the sky; outside the hero so the mobile sheet isn't clipped */
.home__nav { position: absolute; top: 0; left: 0; right: 0; z-index: 100; }

/* Inner pages: a band with the menu */
.sky { position: relative; }
.sky__space { height: 190px; }

/* Behind both: Rome, Fermi's birthplace, in Piranesi's etching of the Forum (c. 1775), re-inked in soft
   graphite. A light fade under the menu keeps the links readable. */
.hero,
.sky {
  background-color: #ebe6da;
  background-image:
    linear-gradient(to bottom, rgba(247, 247, 234, 0.55), rgba(247, 247, 234, 0) 30%),
    url(/assets/img/forum-piranesi.webp);
  background-position: center 45%;
  background-size: cover;
}

/* Sheet of paper, torn at both ends */
.paper {
  position: relative;
  z-index: 1;
  background: var(--paper);
}
.paper--home { margin-top: calc(120 * var(--w)); }
.paper--page { margin-top: calc(60 * var(--w)); min-height: 60vh; }
.paper__edge {
  position: absolute;
  left: 0;
  display: block;
  width: 100%;
  max-width: none;
  pointer-events: none;
  user-select: none;
}
/* Each edge overlaps the sheet by 1px, so no hairline shows between them at fractional zoom levels */
.paper__edge--top { bottom: calc(100% - 1px); height: calc(190.6 * var(--w)); }
.paper__edge--bottom { top: calc(100% - 1px); height: calc(212.16 * var(--w)); }

/* Home page content */
.home__content {
  width: min(850px, 100% - 40px);
  margin: 0 auto;
  padding-bottom: 114px;
}
.kicker {
  margin-bottom: 8px;
  color: var(--ink-soft);
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.406;
}
.home__title {
  font-family: var(--serif);
  font-size: 38px;
  font-weight: 700;
  line-height: 1.1;
}
.lead {
  margin: 40px 0 28px;
  font-size: 24px;
  line-height: 1.406;
}
.lead > * + * { margin-top: 1.406em; }
.closing {
  margin-top: 28px;
  font-size: 18px;
  line-height: 1.5;
}
.home-section { margin-top: 68px; scroll-margin-top: 32px; }
.home-section > h2 {
  font-family: var(--serif);
  font-size: 38px;
  font-weight: 700;
  line-height: 1.2;
}
.home-section__body { margin-top: 28px; }

/* Two-column card grid, wider than the text column */
.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
  width: min(909px, 100%);
}
.card {
  padding: 21px 25px;
  border-radius: var(--card-radius);
  background: var(--card-bg);
}
.card h3,
.box h3 {
  color: #000;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
}
.card__body {
  margin-top: 10px;
  font-size: 18px;
  line-height: 1.5;
}
.card__body > * + * { margin-top: 0.7em; }
.card__body,
.box__body { text-wrap: pretty; }
/* A card that leads to a page, like those under Start here: an icon, the text, and an arrow. Its heading's link
   covers the whole card, so the card is what you click, while the link's name stays the heading. */
.card--link {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 20px 22px 22px;
  transition: background-color 150ms var(--ease);
}
.card--link:hover { background: var(--card-bg-hover); }
.card--link h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card--link h3 a:focus-visible { outline: none; }
.card--link:has(h3 a:focus-visible) { outline: 3px solid var(--blue); outline-offset: 3px; }
.card__icon { flex: none; width: 26px; height: 26px; }
.card__main { flex: 1 1 auto; min-width: 0; }
.card__arrow { flex: none; align-self: center; width: 20px; height: 20px; margin-left: 12px; background: var(--arrow-right) center / contain no-repeat; }
@media (max-width: 600px) {
  .card--link { gap: 14px; padding: 20px 16px 20px 18px; }
  .card__arrow { margin-left: 8px; }
}
@media (min-width: 721px) {
  .cards { margin-left: 50%; transform: translateX(-50%); }
  /* An odd card out at the end spans both columns */
  .cards > .card:last-child:nth-child(odd) { grid-column: span 2 / span 2; }
}
@media (max-width: 720px) {
  .cards { grid-template-columns: repeat(1, minmax(0, 1fr)); }
}
/* Cards that fold open, like the skills under Educational value and the FAQ: each shows its name and opens to its text.
   Two lists side by side where there's room, so opening a card only moves the cards under it; on phones, one list. */
.folds { display: grid; gap: 15px; width: min(909px, 100%); }
.folds__col { display: grid; align-content: start; gap: 15px; }
.card--fold { padding: 0; overflow: hidden; }
.card--fold > summary { padding: 19px 25px; transition: background-color 150ms var(--ease); }
/* A tint under the pointer, only where there is one (on phones it would stay on after a tap), and only while the card is
   closed: open, the line you clicked would stay a different shade from the text under it */
@media (hover: hover) {
  .card--fold:not([open]) > summary:hover { background: rgba(21, 29, 35, 0.035); }
}
.card--fold > .card__body { margin-top: -8px; padding: 0 25px 21px; }
@media (min-width: 721px) {
  .folds {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    margin-left: 50%;
    transform: translateX(-50%);
  }
}
/* Folding cards in two columns that read row by row, like the FAQ: the odd ones on the left, the even ones on the right.
   On phones it's one list, and each card's order (set on it) puts it back in turn. */
@media (max-width: 720px) {
  .folds--rows > .folds__col { display: contents; }
}

/* Inner page content */
.page {
  width: min(758px, 100% - 40px);
  margin: 0 auto;
  padding: 24px 0 96px;
}
.page__title {
  font-family: var(--serif);
  font-size: 44px;
  font-weight: 700;
  line-height: 1.2;
}
/* Same distance from the title as the home page's intro: 40px there, but this title is smaller and set looser */
.page__intro {
  margin-top: 38.5px;
  font-size: 24px;
  line-height: 1.406;
  text-wrap: pretty;
}
.page__intro > * + * { margin-top: 1.406em; }
/* Small download link under a page title, e.g. the rule sheet on How to play */
.download {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  margin-top: 12px;
  color: var(--ink-soft);
  font-size: 21px;
  transition: color 150ms var(--ease);
}
.download svg { width: 24px; height: 24px; flex: none; }
.download:hover { color: var(--blue); }
.section { margin-top: 56px; scroll-margin-top: 32px; }
.section > h2 {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
}
.section__intro,
.text {
  font-size: 18px;
  line-height: 1.5;
}
.section__intro,
.section > .text { margin-top: 16px; }
.texts { margin-top: 24px; }
.texts > * + * { margin-top: 16px; }
.list {
  margin-top: 16px;
  padding-left: 1.2em;
  list-style: disc;
  font-size: 18px;
  line-height: 1.5;
}
.list > * + * { margin-top: 6px; }
.list li::marker { color: var(--ink-soft); }
.list--steps { list-style: decimal; }
.nowrap { white-space: nowrap; }
.box__body > .list { margin-top: 0.7em; }

/* Boxes: grey cards like those on the home page */
.boxes { margin-top: 16px; }
.boxes > * + * { margin-top: 15px; }
.box {
  position: relative;
  display: block;
  padding: 22px 26px;
  border-radius: var(--card-radius);
  background: var(--card-bg);
}
.box__body {
  margin-top: 8px;
  font-size: 18px;
  line-height: 1.5;
}
.box__body > * + * { margin-top: 0.7em; }
/* Optional extras, like the game variants on How to play: the same box's outline, dashed, without the grey */
.box--optional { padding: 20px 24px; border: 2px dashed rgba(21, 29, 35, 0.32); background: none; }
/* The example question that runs through the steps on How to play, folded under each step's rule: a panel, with the
   question, hints and answer as small cards like the printed ones players turn over */
.box__example > summary {
  width: fit-content;
  /* A taller tap target that takes up no extra space */
  margin: -6px 0;
  padding: 6px 0;
  color: var(--ink-soft);
  font-size: 16px;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
  transition: color 150ms var(--ease);
}
.box__example > summary:hover { color: var(--ink); }
.box__example > summary::-webkit-details-marker { display: none; }
.box__example > summary::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 6px;
  background: var(--arrow-down) center / contain no-repeat;
  vertical-align: -3px;
  transition: transform 200ms var(--ease);
}
.box__example[open] > summary { margin-bottom: calc(0.6em - 6px); }
.box__example[open] > summary::after { transform: rotate(180deg); }
/* On the grey box, a panel the colour of the page */
.example {
  padding: 16px 20px 18px;
  border-radius: 10px;
  background: var(--paper);
}
.example > * + * { margin-top: 0.75em; }
/* The cards in the examples: white, across the panel, the card's name over a dashed line as on the Play page's cards */
.game-card {
  padding: 14px 18px 16px;
  border-radius: 12px;
  background: #fffef8;
  box-shadow: 0 1px 2px rgba(21, 29, 35, 0.1), 0 6px 16px -10px rgba(21, 29, 35, 0.35);
}
.game-card__label {
  display: block;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1.5px dashed rgba(21, 29, 35, 0.35);
  color: var(--ink-soft);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}
.game-card__text {
  display: block;
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.35;
}
/* A box or card that folds open, like the worked example on How to play and the skills on the home page */
.box--fold > summary,
.card--fold > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  list-style: none;
  cursor: pointer;
}
.box--fold > summary::-webkit-details-marker,
.card--fold > summary::-webkit-details-marker { display: none; }
.box--fold > summary::after,
.card--fold > summary::after {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  background: var(--arrow-down) center / contain no-repeat;
  transition: transform 200ms var(--ease);
}
.box--fold[open] > summary::after,
.card--fold[open] > summary::after { transform: rotate(180deg); }
/* A label on a box's top right corner, like "Recommended" */
.badge {
  position: absolute;
  top: -15px;
  right: 22px;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}
/* A tab in a box's top right corner, in a darker grey (the old frames' colour over the paper), like "Currently paused"
   on About. On narrow phones the heading would run under it, so the box makes room above the heading. */
.box__tab {
  position: absolute;
  top: 0;
  right: 0;
  padding: 3px 13px 4px 14px;
  border-radius: 0 var(--card-radius) 0 12px;
  background: linear-gradient(var(--rule), var(--rule)) var(--paper);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}
@media (max-width: 420px) {
  .box:has(> .box__tab) { padding-top: 36px; }
}

/* Quick math table on the organizer page */
.table-box {
  margin-top: 16px;
  padding: 18px 26px;
  border-radius: var(--card-radius);
  background: var(--card-bg);
}
.table-box table {
  width: 100%;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  text-align: left;
}
.table-box thead tr { border-bottom: 2px solid var(--rule); }
.table-box th { font-family: var(--serif); font-weight: 700; }
.table-box th,
.table-box td { padding-top: 8px; padding-bottom: 8px; }
.table-box th:not(:last-child),
.table-box td:not(:last-child) { padding-right: 12px; }
.table-box tbody tr { border-bottom: 1px solid rgba(21, 29, 35, 0.12); }
.table-box tbody tr:last-child { border-bottom-width: 0; }
.table-note {
  margin-top: 12px;
  color: var(--ink-soft);
  font-size: 16px;
}

/* Buttons and links */
.buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 22px;
  border: 2px solid;
  border-radius: 9999px;
  font-size: 16px;
  font-weight: 700;
  transition: background-color 150ms var(--ease), transform 150ms var(--ease);
}
.btn:active { transform: scale(0.97); }
.btn--primary {
  border-color: transparent;
  background: var(--blue);
  box-shadow: 0 0 6.3px rgba(129, 207, 255, 0.25);
  color: #fff;
}
.btn--primary:hover { background: #0089de; }
.btn--ghost { border-color: var(--rule); color: var(--ink); }
.btn--ghost:hover { background: rgba(21, 29, 35, 0.06); }
.link {
  color: var(--ink);
  text-decoration: underline 2px var(--blue);
  text-underline-offset: 3px;
  transition: color 150ms var(--ease);
}
.link:hover { color: var(--blue); }

/* Sign-up form on the Host page: round fields like the cards, the blue pill to send */
.form { display: grid; gap: 22px; margin-top: 24px; }
.form[hidden] { display: none; }
.field {
  display: grid;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 0;
}
.field > legend { margin-bottom: 6px; padding: 0; }
.field__label { font-size: 17px; font-weight: 700; line-height: 1.4; }
.field__optional { color: var(--ink-soft); font-weight: 400; }
.field__hint { margin-top: -3px; color: var(--ink-soft); font-size: 15px; line-height: 1.45; }
.field input:not([type='radio']),
.field textarea {
  width: 100%;
  padding: 10px 13px;
  border: 2px solid var(--rule);
  border-radius: 10px;
  background: var(--cream);
  color: var(--ink);
  font: inherit;
  font-size: 18px;
  line-height: 1.4;
  transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease);
}
.field input:focus-visible,
.field textarea:focus-visible {
  border-color: var(--ink);
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 157, 255, 0.35);
}
.field textarea { min-height: 120px; resize: vertical; }
.field--short input { max-width: 240px; }
.choices { display: flex; gap: 28px; margin-top: 2px; font-size: 18px; }
.choice { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; }
.choice input { width: 20px; height: 20px; margin: 0; accent-color: var(--ink); }
.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 4px; }
.form__actions .btn { min-width: 120px; font-size: 17px; }
.btn:disabled { opacity: 0.6; cursor: default; }
.form__alt,
.form__error { font-size: 16px; line-height: 1.5; }
.form__alt { color: var(--ink-soft); }
.form__error { color: #a4231c; }
/* Off-screen rather than display: none, which some bots skip */
.form__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-done { margin-top: 24px; padding: 22px 26px; border-radius: var(--card-radius); background: var(--card-bg); outline: none; }
.form-done h3 { color: #000; font-family: var(--serif); font-size: 22px; font-weight: 700; line-height: 1.3; }
.form-done p { margin-top: 8px; font-size: 18px; line-height: 1.5; }

/* Updates: the sign-up forms on the home page and /updates/, and a short one in the pop-up (assets/site.js). Round
   fields like the Host form's, and the blue button to send: a pill like the site's other buttons, or, when it sits on
   one line with the fields, with their corners (site.js marks it). */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.su[hidden],
.su-done[hidden] { display: none; }
.su__row { display: flex; flex-wrap: wrap; gap: 10px; }
.su input[type='email'],
.su select {
  height: 50px;
  border: 2px solid var(--rule);
  border-radius: 10px;
  background-color: var(--cream);
  color: var(--ink);
  font: inherit;
  font-size: 18px;
  transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease);
}
.su input[type='email'] { flex: 1 1 220px; min-width: 0; padding: 0 14px; }
.su input[type='email']::placeholder { color: #737d85; }
/* "I'm a…", a dropdown with its own arrow, grey until something's picked */
.su select {
  flex: 0 1 230px;
  min-width: 0;
  padding: 0 40px 0 13px;
  background: var(--cream) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23151d23' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") right 15px center / 12px 8px no-repeat;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.su select:has(option[value='']:checked) { color: #6b757d; }
.su input[type='email']:focus-visible,
.su select:focus-visible {
  border-color: var(--ink);
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 157, 255, 0.35);
}
.su__row .btn { flex: none; height: 50px; padding: 0 26px; font-size: 17px; }
.su__row .btn--beside { border-radius: 10px; }
.su__note { margin-top: 10px; color: var(--ink-soft); font-size: 15px; line-height: 1.45; }
/* Phones, and the pop-up: one field under the other */
@media (max-width: 600px) {
  .su__row input[type='email'],
  .su__row select { flex: 1 1 100%; }
}
.su__error { margin-top: 12px; color: #a4231c; font-size: 16px; line-height: 1.5; }
/* After signing up: the message with a blue check beside it (above it, where the form is centred). The Get updates
   page's own good news (.status--done, below) has the check too. */
.su-done { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: start; outline: none; }
.su-done::before,
.status--done::before {
  content: "";
  grid-row: span 2;
  width: 34px;
  height: 34px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='16' fill='%23009dff'/%3E%3Cpath d='M9.5 16.5l4.5 4.5 8.5-9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.su-done > *,
.status--done > * { grid-column: 2; }
.su-done h3 { color: #000; font-family: var(--serif); font-size: 22px; font-weight: 700; line-height: 1.3; }
.su-done p { margin-top: 6px; font-size: 18px; line-height: 1.5; }

/* Under the introduction on the home page: a grey card like those below it, set like the box at the end of the page
   (centred, the same title and sentence). The email and the button in one row; on phones, the button under it. */
.updates-intro {
  display: grid;
  gap: 22px;
  justify-items: center;
  margin-top: 48px;
  padding: 46px 32px 40px;
  border-radius: var(--card-radius);
  background: var(--card-bg);
  text-align: center;
}
.updates-intro h2 {
  color: #000;
  font-family: var(--serif);
  font-size: 38px;
  font-weight: 700;
  line-height: 1.2;
  text-wrap: balance;
}
.updates-intro__text { width: min(100%, 640px); }
.updates-intro__text p { margin-top: 12px; font-size: 18px; line-height: 1.5; text-wrap: pretty; }
.updates-intro .su { width: min(100%, 480px); }
.updates-intro .su__row { justify-content: center; }
@media (max-width: 600px) {
  .updates-intro { margin-top: 40px; padding: 34px 20px 30px; }
}
/* Signed up: the message takes the whole box, a bigger check above it */
.updates-intro:has(> .su-done:not([hidden])) > .updates-intro__text { display: none; }
.updates-intro .su-done { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.updates-intro .su-done::before { grid-row: auto; width: 46px; height: 46px; margin-bottom: 10px; }
.updates-intro .su-done > * { grid-column: auto; }
.updates-intro .su-done h3 { font-size: 26px; line-height: 1.2; }

/* At the end of the home page, with the contact line under it: a grey card the width of the page, its content centred */
.updates-end { margin: 76px 0 24px; padding: 46px 32px 40px; border-radius: 18px; background: var(--card-bg); text-align: center; }
.updates-end > * { max-width: 640px; margin-left: auto; margin-right: auto; }
.updates-end h2 { font-family: var(--serif); font-size: 38px; font-weight: 700; line-height: 1.2; text-wrap: balance; }
.updates-end > p { margin-top: 12px; font-size: 18px; line-height: 1.5; text-wrap: pretty; }
.updates-end .su { max-width: 480px; margin-top: 22px; }
.updates-end .su__row { justify-content: center; }
.updates-end .su-done { grid-template-columns: minmax(0, 1fr); justify-items: center; margin-top: 22px; }
.updates-end .su-done::before { grid-row: auto; margin-bottom: 10px; }
.updates-end .su-done > * { grid-column: auto; }
.updates-end > .updates-end__contact { margin-top: 34px; }
@media (max-width: 780px) {
  .updates-intro h2,
  .updates-end h2 { font-size: 28px; }
}
@media (max-width: 600px) {
  .updates-end { padding: 34px 20px 30px; }
}

/* The pop-up */
.updates {
  width: min(460px, 100% - 32px);
  max-height: calc(100% - 32px);
  padding: 0;
  overflow: auto;
  border: 0;
  border-radius: var(--card-radius);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 2px 6px rgba(21, 29, 35, 0.15), 0 30px 70px -20px rgba(21, 29, 35, 0.6);
}
.updates::backdrop { background: rgba(21, 29, 35, 0.45); }
.updates[open] { animation: updates-in 220ms var(--ease); }
@keyframes updates-in { from { opacity: 0; transform: translateY(10px); } }
:root:has(.updates[open]) { overflow: hidden; }
.updates__box { padding: 22px 26px 24px; }
.updates__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.updates__title { font-family: var(--serif); font-size: 26px; font-weight: 700; line-height: 1.2; text-wrap: balance; outline: none; }
.updates__close {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  margin: -4px -8px 0 0;
  border-radius: 999px;
  transition: background-color 150ms var(--ease);
}
.updates__close:hover { background: rgba(21, 29, 35, 0.07); }
.updates__close svg { width: 22px; height: 22px; }
.updates__text { margin-top: 8px; font-size: 17px; line-height: 1.5; }
.updates .su,
.updates .su-done { margin-top: 18px; }
/* Its fields one under the other, each with a small heading */
.updates .su__row { flex-direction: column; align-items: stretch; gap: 0; }
.updates .su__row input[type='email'],
.updates .su__row select { flex: none; width: 100%; }
.updates .su__label { margin-bottom: 6px; font-size: 16px; font-weight: 700; line-height: 1.3; }
.updates .su__label span { color: var(--ink-soft); font-weight: 400; }
.updates input + .su__label { margin-top: 14px; }
.updates .su__row .btn { align-self: flex-start; margin-top: 18px; }
@media (prefers-reduced-motion: reduce) {
  .updates[open] { animation: none; }
}

/* "Get updates" in the menu: a white button like those on the Play page (.ph-btn in assets/play.css); in the phone
   menu, a small grey card at the end of the list, with an envelope and an arrow */
.nav__links .nav__updates {
  padding: 6px 17px;
  border: 0;
  border-radius: 999px;
  background: #fffef8;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(21, 29, 35, 0.12), 0 8px 20px -10px rgba(21, 29, 35, 0.4);
  transition: background-color 150ms var(--ease);
}
.nav__links .nav__updates:hover { background: #fff; }
.nav__sheet .nav__updates {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 16px;
  padding: 13px 14px 13px 16px;
  border: 0;
  border-radius: 12px;
  background: rgba(21, 29, 35, 0.07);
  font-weight: 700;
}
.nav__sheet .nav__updates::before,
.nav__sheet .nav__updates::after { content: ""; flex: none; }
.nav__sheet .nav__updates::before {
  width: 24px;
  height: 24px;
  background: var(--envelope) center / contain no-repeat;
}
.nav__sheet .nav__updates::after {
  width: 18px;
  height: 18px;
  margin-left: auto;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2332424e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* The Get updates page: what happened, after following the link in the email or sending the form without JavaScript
   (#sent, #confirmed, #invalid, #failed); once signed up or confirmed, the form gives way to it */
.status {
  display: none;
  margin-top: 28px;
  padding: 22px 26px;
  border-radius: var(--card-radius);
  background: var(--card-bg);
  outline: none;
  scroll-margin-top: 24px;
}
.status:target { display: block; }
.status--done:target { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: start; }
.status h2 { color: #000; font-family: var(--serif); font-size: 22px; font-weight: 700; line-height: 1.3; }
.status p { margin-top: 8px; font-size: 18px; line-height: 1.5; }
.status--done:target ~ .updates-page { display: none; }
.updates-page { margin-top: 28px; }
.updates-page .su { max-width: 480px; }

/* Dark footer; the paper above it ends in a torn edge that hangs over the top padding */
.footer {
  position: relative;
  padding: calc(212.16 * var(--w) + 72px) 24px 56px;
  background: var(--ink);
  color: var(--cream);
}
.footer__grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 40px;
  max-width: 1100px;
  margin: 0 auto;
}
.footer__blurb {
  max-width: 34ch;
  margin-top: 12px;
  color: rgba(255, 254, 242, 0.75);
  font-size: 16px;
}
.footer h2 {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 700;
}
.footer ul { display: grid; gap: 6px; margin-top: 12px; }
.footer ul a {
  color: rgba(255, 254, 242, 0.8);
  font-size: 16px;
}
.footer ul a:hover {
  color: var(--cream);
  text-decoration: underline var(--blue);
  text-underline-offset: 3px;
}
.footer__legal {
  max-width: 1100px;
  margin: 40px auto 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 254, 242, 0.18);
  color: rgba(255, 254, 242, 0.6);
  font-size: 14px;
}
.footer__credit {
  max-width: 1100px;
  margin: 6px auto 0;
  color: rgba(255, 254, 242, 0.6);
  font-size: 14px;
}
.footer__credit a { text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.footer__credit a:hover { color: var(--cream); }
@media (min-width: 721px) {
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
}

@media (min-width: 781px) {
  .kicker { margin-bottom: 12px; font-size: 26px; }
  .home__title { font-size: 54px; }
  .sky__space { height: 270px; }
}
@media (max-width: 780px) {
  :root { --page-bg: #e7e5d8; }
  .lead,
  .page__intro { font-size: 19px; }
  .lead { margin-top: 30px; }
  .page__intro { margin-top: 27px; }
  .download { gap: 8px; margin-top: 10px; font-size: 18px; }
  .download svg { width: 20px; height: 20px; }
  .home-section > h2 { font-size: 28px; }
  .closing,
  .section__intro,
  .text,
  .list,
  .card__body,
  .box__body,
  .table-box table { font-size: 17px; }
  .card h3,
  .box h3 { font-size: 20px; }
  .example { margin: 0 -8px; padding: 14px 16px 16px; }
}
@media (max-width: 720px) {
  .page__title { font-size: 32px; }
  .page__intro { margin-top: 30.5px; }
}