/* Muninn: brand tokens from _data/brand. */

:root, :root[data-theme="light"] {
  --accent: #b0432a;
  --accent-wash: #f3ece2;
  --hero-image: image-set(url("/assets/hero.webp") type("image/webp"), url("/assets/hero.jpg") type("image/jpeg"));
}

:root[data-theme="dark"] {
  --accent: #e8714a;
  --accent-wash: #241e1a;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent: #e8714a;
    --accent-wash: #241e1a;
  }
}

/* The AppWeb sites. Mix of Literal.club and macOS/iOS app aesthetic.
   Libre Baskerville / Georgia for centered headings, Inter / system fonts for text.
   Softly rounded iOS cards, Bento blocks, top menu bar, and dark/light support.

   The neutrals below adapt smoothly between light and dark modes.
   A site's own colours come from its _data/brand:
     --accent       links, indicators
     --accent-wash  the stage behind code, the why section, hovers
     --hero-image   the photograph behind the front page's hero card
   --section-wash is the faint grey a {% section %} fades to or from.
*/

:root, :root[data-theme="light"] {
  --ink: #000000;
  --muted: #5e5e66;
  --faint: #888892;
  --line: #e5e5ea;
  --paper: #ffffff;
  --stage: var(--accent-wash);
  --code: var(--accent-wash);
  --link: var(--accent);

  --card-bg: #f8f8f8;
  --card-shadow: none;
  --card-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.04);

  --hero-bg: #ffffff;
  --section-wash: #f5f5f7;
  --shot-frame: #ffffff;
  --shot-glow: 0 2px 6px rgb(0 0 0 / 0.05), 0 10px 36px rgb(0 0 0 / 0.10);
  --hero-ring: rgb(0 0 0 / 0.04);
  --hero-glow: 0 4px 12px -2px rgb(0 0 0 / 0.08), 0 12px 56px 4px rgb(0 0 0 / 0.14);

  --menubar-bg: rgba(255, 255, 255, 0.85);
  --menubar-line: #e5e5ea;
  --pill-bg: #f2f2f7;
  --pill-ink: #1a1a1e;

  --serif: "Libre Baskerville", Georgia, Cambria, "Times New Roman", Times, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;

  --gutter: 20px;
  --text: 42rem;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --ink: #f4f4f6;
  --muted: #9c9ca3;
  --faint: #6e6e76;
  --line: #26262a;
  --paper: #121214;
  --stage: var(--accent-wash);
  --code: var(--accent-wash);
  --link: var(--accent);

  --card-bg: #1c1c20;
  --card-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
  --card-shadow-hover: 0 8px 36px rgba(0, 0, 0, 0.45);

  --hero-bg: #18181c;
  --section-wash: #1a1a1e;
  --shot-frame: #000000;
  --shot-glow: 0 0 2px rgb(255 255 255 / 0.10), 0 8px 40px rgb(255 255 255 / 0.07);
  --hero-ring: rgb(168 110 255 / 0.22);
  --hero-glow: 0 0 18px rgb(150 90 255 / 0.18), 0 8px 64px 6px rgb(140 80 255 / 0.22);

  --menubar-bg: rgba(18, 18, 20, 0.85);
  --menubar-line: #26262a;
  --pill-bg: #26262c;
  --pill-ink: #e0e0e6;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #f4f4f6;
    --muted: #9c9ca3;
    --faint: #6e6e76;
    --line: #26262a;
    --paper: #121214;
    --stage: var(--accent-wash);
    --code: var(--accent-wash);
    --link: var(--accent);

    --card-bg: #1c1c20;
    --card-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
    --card-shadow-hover: 0 8px 36px rgba(0, 0, 0, 0.45);

    --hero-bg: #18181c;
    --section-wash: #1a1a1e;
    --shot-frame: #000000;
    --shot-glow: 0 0 2px rgb(255 255 255 / 0.10), 0 8px 40px rgb(255 255 255 / 0.07);
  --hero-ring: rgb(168 110 255 / 0.22);
  --hero-glow: 0 0 18px rgb(150 90 255 / 0.18), 0 8px 64px 6px rgb(140 80 255 / 0.22);

    --menubar-bg: rgba(18, 18, 20, 0.85);
    --menubar-line: #26262a;
    --pill-bg: #26262c;
    --pill-ink: #e0e0e6;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

b, strong { font-weight: 600; }

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 0.15em; }

h1, h2, h3, h4 {
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0;
}

/* Centered serif headings (Literal.club style) */
.hero h1,
.feature h2,
.why h2,
.page h1 {
  font-family: var(--serif);
  text-align: center;
  font-weight: 400;
  letter-spacing: -0.02em;
}

code, kbd, pre { font-family: var(--mono); font-size: 0.88em; }
code { background: var(--code); color: var(--ink); border-radius: 5px; padding: 0.1em 0.35em; }
kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 0.05em 0.45em;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: var(--paper);
  font-size: 0.82em;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
}
pre {
  background: var(--code);
  border-radius: 10px;
  padding: 16px 18px;
  overflow-x: auto;
  line-height: 1.5;
}
pre code { background: none; padding: 0; font-size: 1em; }

/* --- Top Menu Bar (macOS app family switcher & controls) ------------------ */

.menubar {
  background: var(--menubar-bg);
  border-bottom: 1px solid var(--menubar-line);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  position: sticky;
  top: 0;
  z-index: 100;
  font-size: 13px;
  font-weight: 500;
}
.menubar__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.menubar__apps {
  display: flex;
  align-items: center;
  gap: 4px;
}
.menubar__home {
  margin-right: 8px;
}
.menubar__short { display: none; }
.menubar__label {
  color: var(--faint);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-right: 4px;
}
.menubar__list,
.menubar__links {
  display: flex;
  align-items: center;
}
.menubar__list { gap: 4px; }
.menubar__links { gap: 14px; }
.menubar__toggle {
  display: none;
  align-items: center;
  gap: 5px;
  padding: 3px 6px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--faint);
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.menubar__toggle:hover { background: var(--stage); color: var(--ink); }
.menubar__toggle svg { transition: transform 0.25s ease; }
.menubar__app {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 6px;
  color: var(--muted);
  text-decoration: none !important;
  font-size: 13px;
  transition: background 0.15s ease, color 0.15s ease;
}
.menubar__app:hover {
  background: var(--stage);
  color: var(--ink);
}
.menubar__app--active {
  background: var(--stage);
  color: var(--ink);
  font-weight: 500;
}
.menubar__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--faint);
  display: inline-block;
}
.menubar__app--active .menubar__dot {
  background: var(--accent);
}
.menubar__tools {
  display: flex;
  align-items: center;
  gap: 14px;
}
.menubar__item {
  color: var(--muted);
  text-decoration: none !important;
  font-size: 13px;
  transition: color 0.15s ease;
}
.menubar__item:hover, .menubar__item[aria-current] {
  color: var(--ink);
}
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card-bg);
  color: var(--ink);
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.theme-toggle:hover {
  border-color: var(--muted);
}
.theme-toggle:active {
  transform: scale(0.96);
}
.theme-toggle__icon {
  display: none;
}
:root[data-theme="light"] .theme-toggle__icon--moon { display: block; }
:root[data-theme="light"] .theme-toggle__icon--sun { display: none; }
:root[data-theme="dark"] .theme-toggle__icon--moon { display: none; }
:root[data-theme="dark"] .theme-toggle__icon--sun { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle__icon--moon { display: none; }
  :root:not([data-theme="light"]) .theme-toggle__icon--sun { display: block; }
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .theme-toggle__icon--moon { display: block; }
  :root:not([data-theme="dark"]) .theme-toggle__icon--sun { display: none; }
}

/* --- App Navigation Bar -------------------------------------------------- */

.bar {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.bar__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.bar__home {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font: 500 18px/1 var(--sans);
  letter-spacing: -0.01em;
}
.bar__home img { border-radius: 6px; }
.bar__home:hover { text-decoration: none; }
.bar__nav { display: flex; align-items: center; gap: 20px; font-size: 15px; }
.bar__nav a { color: var(--muted); }
.bar__nav a:hover, .bar__nav a[aria-current] { color: var(--ink); text-decoration: none; }
.bar__nav .bar__download {
  color: var(--paper);
  background: var(--ink);
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 500;
  text-decoration: none !important;
  transition: opacity 0.15s ease;
}
.bar__nav .bar__download:hover { opacity: 0.85; }

/* --- Hero: Softly Rounded iOS Card Header ------------------------------- */

.hero-stage {
  max-width: 1080px;
  margin: 28px auto 56px;
  padding: 0 var(--gutter);
}
/* Without a photograph the hero is open page: no card around it. */
.hero {
  border-radius: 30px;
  overflow: hidden;
  position: relative;
  text-align: center;
  color: var(--ink);
}
/* With a photograph the hero is 95% of the window wide, with the same
   2.5% gap above it as on each side, and keeps the card's rounded corners. */
.hero-stage:has(.hero--has-image) {
  max-width: none;
  width: 95%;
  margin-top: 2.5vw;
  padding: 0;
}
.hero-stage:has(.hero--has-image) .hero {
  background-color: var(--hero-bg);
  box-shadow:
    0 0 0 1px var(--hero-ring),
    var(--hero-glow);
}
.hero--has-image .hero__inner {
  padding-top: clamp(72px, 11vw, 128px);
  padding-bottom: clamp(72px, 11vw, 128px);
}
/* With a photograph: the photo stays in front, under a thin dark veil that
   is a little denser behind the words, and the hero's text, buttons and tags
   turn light. The same in light and dark mode, since the photo is too. */
.hero--has-image {
  background-image:
    radial-gradient(ellipse 58% 62% at 50% 55%, rgb(12 12 16 / 0.5) 30%, rgb(12 12 16 / 0.15)),
    var(--hero-image, none);
  background-size: cover;
  background-position: center 35%;
  color: #ffffff;
  text-shadow: 0 1px 14px rgb(0 0 0 / 0.35);
}
.hero.hero--has-image h1 { color: #ffffff; }
.hero.hero--has-image .hero__pitch { color: rgb(255 255 255 / 0.88); }
.hero.hero--has-image .hero__fine { color: rgb(255 255 255 / 0.7); }
.hero.hero--has-image .hero__fine a { color: rgb(255 255 255 / 0.88); }
.hero.hero--has-image .button { text-shadow: none; }
.hero.hero--has-image .button--primary {
  background: #ffffff;
  color: #1a1a1e;
  border-color: #ffffff;
}
.hero.hero--has-image .button--secondary,
.hero.hero--has-image .pill-tag {
  background: rgb(255 255 255 / 0.14);
  color: #ffffff;
  border-color: rgb(255 255 255 / 0.3);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.hero.hero--has-image .button--secondary {
  border-color: transparent;
}
.hero.hero--has-image .button--secondary:hover {
  border-color: transparent;
  background: rgb(255 255 255 / 0.22);
}
.hero__inner {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(56px, 9vw, 92px) clamp(20px, 4vw, 40px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero__icon {
  width: clamp(96px, 14vw, 120px);
  height: clamp(96px, 14vw, 120px);
  display: block;
  margin: 0 auto 24px;
  border-radius: 26px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
}
.hero h1 {
  font-size: clamp(48px, 9vw, 84px);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--ink);
}
.hero__pitch {
  font-family: var(--sans);
  font-size: clamp(19px, 2.5vw, 23px);
  line-height: 1.5;
  color: var(--muted);
  margin: 20px auto 0;
  max-width: 38ch;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 34px;
}
.hero__fine {
  margin: 28px 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 12px;
  font-size: 13px;
  color: var(--faint);
}
.hero__fine a {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: 999px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 15px;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  text-decoration: none !important;
}
.button:hover { transform: translateY(-1px); }
.button--primary {
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  font-weight: 500;
}
.button--primary:hover {
  background: var(--link);
  border-color: var(--link);
  color: #ffffff;
}
.button--secondary, .button:not(.button--primary) {
  background: var(--stage);
  color: var(--ink);
  border: 1px solid var(--line);
}
.button--secondary:hover, .button:not(.button--primary):hover {
  border-color: var(--muted);
}

.pill-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--pill-bg);
  color: var(--pill-ink);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  border: 1px solid var(--line);
}

/* --- Bento Design Block -------------------------------------------------- */

/* --- Sections: {% section "none|across|down|hero" %} ------------------------- */

.section--none { border-bottom: 1px solid var(--line); }
.section--across { background: linear-gradient(to right, var(--section-wash), var(--paper)); }
.section--down { background: linear-gradient(to bottom, var(--paper), var(--section-wash)); }

.bento {
  padding: 64px 0;
  border-bottom: 1px solid var(--line);
}
.bento__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.bento__header {
  text-align: center;
  margin-bottom: 48px;
}
.bento__title {
  font-family: var(--serif);
  font-size: clamp(26px, 3.6vw, 34px);
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1.2;
  margin: 0;
  color: var(--ink);
  text-align: center;
}
.bento__subtitle {
  font-family: var(--sans);
  font-size: 14.5px;
  color: var(--muted);
  max-width: 34rem;
  margin: 10px auto 0;
  line-height: 1.5;
  text-align: center;
}

/* 3-column system: above/below is 1-wide (3 fit in a row), next-to-each-other eats 2 */
.bento__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.bento-card {
  background: var(--card-bg);
  border-radius: 20px;
  --pad: clamp(22px, 3.2vw, 30px);
  padding: var(--pad);
  box-shadow: var(--card-shadow);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.15s ease;
}

/* Spans in a 3-column grid */
.bento-card--span-1,
.bento-card--stack {
  grid-column: span 1; /* 3 wide if above/below */
}

.bento-card--span-2,
.bento-card--side {
  grid-column: span 2; /* next to each other eats 2 */
}

.bento-card--span-3,
.bento-card--full {
  grid-column: span 3;
}

/* Option 1: Next to each other (eats 2 columns) */
.bento-card--side .bento-card__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  height: 100%;
}
.bento-card--side.bento-card--text-only .bento-card__inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.bento-card--side.bento-card--text-only .bento-card__text {
  max-width: 32rem;
}
.bento-card--side .bento-card__text {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-right: var(--pad);
}
.bento-card--side .bento-card__media {
  margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) calc(-1 * var(--pad)) 0;
  -webkit-mask-image: var(--fade-left), var(--fade-down);
  mask-image: var(--fade-left), var(--fade-down);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* Option 2: Above / below (stacked, 1 column wide, 3 in a row) */
.bento-card--stack .bento-card__inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
.bento-card--stack .bento-card__text {
  margin-bottom: auto;
}
.bento-card--stack .bento-card__media {
  margin: var(--pad) calc(-1 * var(--pad)) calc(-1 * var(--pad));
  -webkit-mask-image: var(--fade-up);
  mask-image: var(--fade-up);
}

/* Media first (the shot comes before the text in the source): above the
   text in a stack card, left of it in a side card, everything mirrored. */
.bento-card--stack.bento-card--media-first .bento-card__media {
  margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) var(--pad);
  -webkit-mask-image: var(--fade-down);
  mask-image: var(--fade-down);
}
.bento-card--side.bento-card--media-first .bento-card__text {
  padding-right: 0;
  padding-left: var(--pad);
}
.bento-card--side.bento-card--media-first .bento-card__media {
  margin: calc(-1 * var(--pad)) 0 calc(-1 * var(--pad)) calc(-1 * var(--pad));
  -webkit-mask-image: var(--fade-right), var(--fade-down);
  mask-image: var(--fade-right), var(--fade-down);
}

/* Tag / Eyebrow */
/* Thinner headlines (500 weight, sans-serif) */
.bento-card__title {
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.22;
  margin: 0 0 1rem;
  color: var(--ink);
}

/* Smaller text */
.bento-card__body {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
}
.bento-card__body p {
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.5;
}
.bento-card__body p:last-child {
  margin-bottom: 0;
}
.bento-card__body ul {
  margin: 10px 0 0;
  padding-left: 1.25em;
}
.bento-card__body li {
  margin: 5px 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
}
.bento-card__body a {
  font-size: 15px;
  color: var(--link);
  text-decoration: none;
  font-weight: 400;
}
.bento-card__body a:hover {
  text-decoration: underline;
}
.bento-card__body code {
  font-size: 13.5px;
  padding: 1.5px 5px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.05);
}
:root[data-theme="dark"] .bento-card__body code {
  background: rgba(255, 255, 255, 0.08);
}

/* The media half of a card: it runs to the card's edges (the negative
   margins above undo the card's padding) and fades out, very slightly, toward
   the text, and down as well beside it. */
.bento-card {
  --fade: 14%;
  --fade-end: rgb(0 0 0 / 0.55);
  --fade-left: linear-gradient(to left, #000 calc(100% - var(--fade)), var(--fade-end));
  --fade-right: linear-gradient(to right, #000 calc(100% - var(--fade)), var(--fade-end));
  --fade-down: linear-gradient(to bottom, #000 calc(100% - var(--fade)), var(--fade-end));
  --fade-up: linear-gradient(to top, #000 calc(100% - var(--fade)), var(--fade-end));
}
/* The screenshot is never wider than its area and never cropped at the
   sides. Taller than the area, it is cut at the bottom; shorter, it sits in
   the middle (auto margins in a flex column centre it, and fall back to the
   top once it overflows). Every card is an inline-size container, so the
   area can be sized from the card's width: 100cqw is the content box, plus
   the padding the media bleeds into. */
.bento-card {
  container-type: inline-size;
}
.bento-card__media {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  max-height: calc((100cqw + 2 * var(--pad)) * 3 / 4);
}
/* Beside the text: square (its half of the card), taller when a neighbour
   in the row stretches the card. Size containment keeps a tall screenshot
   from stretching the card itself. */
.bento-card--side .bento-card__media {
  max-height: none;
  min-height: calc(50cqw + var(--pad));
  contain: size;
}
.bento-card__media > .shot,
.bento-card__media > .shots {
  flex-shrink: 0;
  margin: auto 0;
  width: 100%;
}
.bento-card .shots {
  display: flex;
  gap: 0;
}
.bento-card .shots .shot {
  flex: 1 1 0;
  max-width: none;
  margin: 0;
}
.bento-card .shot picture,
.bento-card .shots .shot picture,
.bento-card .shot > div {
  display: block;
  background: none;
  padding: 0;
  border-radius: 0;
}
.bento-card .shot img { display: block; }
.bento-card .shot img,
.bento-card .shot video {
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 0;
}

/* Responsive adjustments */
@media (max-width: 980px) {
  .bento__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .bento-card--span-1 { grid-column: span 1; }
  .bento-card--span-2,
  .bento-card--span-3 { grid-column: span 2; }
}

@media (max-width: 680px) {
  .bento__grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .bento-card--span-1,
  .bento-card--span-2,
  .bento-card--span-3 {
    grid-column: span 1;
    width: 100%;
  }
  .bento-card--side .bento-card__inner {
    grid-template-columns: 1fr;
  }
  .bento-card--side .bento-card__text,
  .bento-card--side.bento-card--media-first .bento-card__text { padding: 0; }
  .bento-card--side .bento-card__media {
    min-height: 0;
    contain: none;
    max-height: calc((100cqw + 2 * var(--pad)) * 3 / 4);
    margin: var(--pad) calc(-1 * var(--pad)) calc(-1 * var(--pad));
    -webkit-mask-image: var(--fade-up);
    mask-image: var(--fade-up);
  }
  .bento-card--side.bento-card--media-first .bento-card__media {
    margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) var(--pad);
    -webkit-mask-image: var(--fade-down);
    mask-image: var(--fade-down);
  }
}

/* --- Features (Existing section support) -------------------------------- */

.feature { border-bottom: 1px solid var(--line); }
.feature__inner, .why__inner { max-width: 960px; margin: 0 auto; padding: 88px var(--gutter); text-align: center; }
.feature h2 { font-size: clamp(32px, 5vw, 48px); }
.feature p { max-width: 36rem; margin: 16px auto 0; color: var(--muted); font-size: 18px; }

/* A hero section opens with a big screenshot, as wide as a card. */
.section--hero > .shot:first-child,
.section--hero > .shots:first-child {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.section--hero > .shots:first-child .shot { max-width: none; }
@media (min-width: 800px) {
  .section--hero > .shot:first-child,
  .section--hero > .shots:first-child { max-width: none; width: 95%; }
}
@media (min-width: 1024px) {
  .section--hero > .shot:first-child,
  .section--hero > .shots:first-child { width: 80%; }
}

/* --- Cards: {% card "Title", "left|right" %} ---------------------------- */

.card { max-width: 960px; margin: 0 auto; padding: 88px var(--gutter); text-align: center; }
.card + .card { padding-top: 0; }
.card__title { font-family: var(--serif); font-weight: 400; letter-spacing: -0.02em; font-size: clamp(32px, 5vw, 48px); }
.card p { max-width: 36rem; margin: 16px auto 0; color: var(--muted); font-size: 18px; }
.card--left, .card--right {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 72px);
  align-items: center;
  text-align: left;
}
.card--left .card__title, .card--right .card__title { font-size: clamp(28px, 4vw, 40px); }
.card--left p, .card--right p { margin-left: 0; }
.card__media .shot { margin: 0 auto; }
/* Wider than the rest of the page: 95% of the window from 800px, 80% from
   1024px. Below 800px it keeps the 960px measure for now. */
@media (min-width: 800px) { .card { max-width: none; width: 95%; } }
@media (min-width: 1024px) { .card { width: 80%; } }
@media (max-width: 760px) {
  .card--left, .card--right { grid-template-columns: 1fr; }
}

.shot { margin: 48px auto 0; }
/* Screenshots stand on the page itself, no tinted stage behind them. */
.shot picture, .shot > div { display: block; }
.shot img { display: block; width: 100%; max-width: var(--shot-w, 100%); height: auto; margin: 0 auto; }
/* {% shot "…", "…", "framed" %}: rounded, in a 4px white (dark: black) border,
   with a soft shadow (dark: a faint light glow) around it. */
.shot--framed img { border: 4px solid var(--shot-frame); border-radius: 20px; box-shadow: var(--shot-glow); }

.shot--missing > div {
  border-radius: 20px;
  padding: clamp(20px, 5vw, 56px);
  min-height: 260px;
  display: grid;
  place-items: center;
  border: 1.5px dashed var(--line);
  color: var(--faint);
  font: 14px var(--mono);
}

.shots { display: flex; gap: clamp(16px, 4vw, 40px); justify-content: center; }
.shots .shot { flex: 1 1 0; max-width: 340px; margin-left: 0; margin-right: 0; }

.why { background: var(--stage); }
.why__inner { max-width: var(--text); text-align: left; }
.why h2 { font-size: 28px; text-align: left; }
.why p { color: var(--muted); margin: 14px 0 0; }

/* --- Pages: Changelog, Guide, AI Statement ------------------------------ */

.page { max-width: var(--text); margin: 0 auto; padding: 56px var(--gutter) 96px; }
.page h1, .guide__body h1 {
  font-size: clamp(34px, 5vw, 44px);
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.02em;
}
/* The lede is context the page needs, so it is in ink, on the wash. */
.page__lede { font-size: 19px; color: var(--ink); background: var(--stage); border-radius: 16px; padding: 16px 24px; margin: 20px 0 0; font-family: var(--serif); text-align: left; }

.release { border-top: 1px solid var(--line); margin-top: 48px; padding-top: 32px; }
.release h2 { font-size: 26px; font-weight: 400; font-family: var(--serif); text-align: left; }
.release h2 a { color: inherit; }
.release__date { margin: 4px 0 0; color: var(--faint); font-size: 15px; }
.release h3 { font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 28px 0 0; }

.release ul, .release p,
.guide__body > p, .guide__body > ul, .guide__body > ol, .guide__body > table, .guide__body > pre { margin: 14px 0 0; }
.release ul, .guide__body ul { padding-left: 1.2em; }
.release li, .guide__body li { margin: 6px 0; }
.release li::marker, .guide__body li::marker { color: var(--faint); }

.guide {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 56px;
}
.guide__side { padding: 48px 0 64px; }
.guide__side nav { position: sticky; top: 56px; }
.guide__menu { display: none; }
.guide nav ul { list-style: none; margin: 0; padding: 0; }
.guide nav li a {
  display: block;
  padding: 5px 10px;
  margin: 1px 0;
  border-radius: 8px;
  color: var(--muted);
  font-size: 15px;
}
.guide nav li a:hover { color: var(--ink); background: var(--stage); text-decoration: none; }
.guide nav li a[aria-current] { color: var(--ink); background: var(--stage); font-weight: 500; }
.guide__group {
  margin: 22px 0 6px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--faint);
}

.guide__body { max-width: var(--text); padding: 48px 0 96px; min-width: 0; }
.guide__body h1 { text-align: left; }
.guide__body h2 { font-size: 24px; font-weight: 400; margin-top: 44px; scroll-margin-top: 56px; font-family: var(--serif); text-align: left; }
.guide__body h2 + * { margin-top: 12px; }
.guide__body .shot { margin: 28px 0 0; }
.guide__body .shot picture, .guide__body .shot > div { padding: 24px; border-radius: 16px; }

.guide__body table { width: 100%; border-collapse: collapse; font-size: 16px; }
.guide__body th, .guide__body td { text-align: left; vertical-align: top; padding: 10px 16px 10px 0; border-bottom: 1px solid var(--line); }
.guide__body th { font-size: 13px; font-weight: 500; color: var(--faint); text-transform: uppercase; letter-spacing: 0.06em; }
.guide__body thead tr:has(th:empty) { display: none; }
.guide__body td:first-child { white-space: nowrap; }

.guide__next { display: flex; justify-content: space-between; gap: 16px; margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--line); }
.guide__next a { display: flex; flex-direction: column; font-weight: 500; }
.guide__next a:hover { text-decoration: none; }
.guide__next span { font-size: 13px; font-weight: 400; color: var(--faint); }
.guide__following { margin-left: auto; text-align: right; }

/* --- Prose ------------------------------------------------------------- */

.page > p, .page > ul, .page > ol, .page > dl, .page > table, .page > pre, .page > .table-wrap,
.guide__body > ol, .guide__body > dl, .guide__body > .table-wrap { margin: 14px 0 0; }
.page > h2 { font-size: 24px; font-weight: 400; margin-top: 44px; scroll-margin-top: 56px; font-family: var(--serif); text-align: left; }
.page > h2 + *, .guide__body > h3 + * { margin-top: 10px; }
.guide__body > h3, .page > h3 { font-size: 19px; font-weight: 500; margin-top: 32px; font-family: var(--sans); }
.page ul, .page ol, .guide__body ol { padding-left: 1.4em; }
.page li, .guide__body ol li { margin: 6px 0; }
.page li::marker, .guide__body ol li::marker { color: var(--faint); }

.entries { margin: 14px 0 0; padding: 0; }
.entries > div { padding: 12px 0; border-bottom: 1px solid var(--line); }
.entries > div:first-child { border-top: 1px solid var(--line); }
.entries dt { font-weight: 500; }
.entries dd { margin: 2px 0 0; color: var(--muted); }
.entries dd p { margin: 0; }
.entries dd p + p { margin-top: 8px; }

.table-wrap { overflow-x: auto; }
.page table { width: 100%; border-collapse: collapse; font-size: 16px; }
.page th, .page td { text-align: left; vertical-align: top; padding: 10px 16px 10px 0; border-bottom: 1px solid var(--line); }
.page th { font-size: 13px; font-weight: 500; color: var(--faint); text-transform: uppercase; letter-spacing: 0.06em; }
.table-wrap td:first-child { white-space: normal; }

/* {% summary %}: a fieldset, so its title sits in the top border. */
.summary { border: 1px solid var(--accent); border-radius: 16px; padding: 6px 24px 18px; margin: 32px 0 0; min-width: 0; }
.summary > legend + * { margin-top: 0; }
.summary ul { margin: 0; padding-left: 1.2em; }
.summary li { margin: 6px 0; }
.summary__title { font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); padding: 0 8px; margin-left: -8px; }

.fine { color: var(--faint); font-size: 15px; }

.posts { list-style: none; padding: 0 !important; margin: 32px 0 0; }
.posts li { padding: 18px 0; border-top: 1px solid var(--line); margin: 0 !important; }
.posts a { font-weight: 500; font-size: 19px; }
.posts time, .post__date { display: block; color: var(--faint); font-size: 14px; margin-top: 2px; }
.posts p { margin: 4px 0 0; color: var(--muted); }

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

.foot { border-top: 1px solid var(--line); }
.foot__inner { max-width: 1100px; margin: 0 auto; padding: 36px var(--gutter) 48px; font-size: 14px; color: var(--muted); }
.foot__inner p { margin: 0; }
.foot__small { margin-top: 8px !important; font-size: 13px; color: var(--faint); max-width: 44rem; }
.foot__family { margin-top: 20px !important; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--faint); }
.foot__family a, .foot__family [aria-current] { font-weight: 500; }
.foot__family [aria-current] { color: var(--ink); }
.foot__what { color: var(--faint); }

/* --- Responsive --------------------------------------------------------- */

/* Below the width the whole menu bar needs, the app list folds away behind an
   "Apps" button. Opening it slides the apps out and Journal, AI Statement and
   App Timeline away (base.njk toggles .menubar--apps-open). Without
   JavaScript, nothing folds. */
@media (max-width: 860px) {
  .js .menubar__label { display: none; }
  .js .menubar__toggle { display: inline-flex; }
  .js .menubar__list,
  .js .menubar__links {
    overflow: hidden;
    white-space: nowrap;
    transition: max-width 0.3s ease, opacity 0.2s ease, visibility 0s linear 0.3s;
  }
  .js .menubar__list { max-width: 0; opacity: 0; visibility: hidden; }
  .js .menubar__links { max-width: 400px; }
  .js .menubar--apps-open .menubar__list { max-width: 400px; opacity: 1; visibility: visible; transition-delay: 0s; }
  .js .menubar--apps-open .menubar__links { max-width: 0; opacity: 0; visibility: hidden; }
  .js .menubar--apps-open .menubar__toggle { color: var(--ink); }
  .js .menubar--apps-open .menubar__toggle svg { transform: rotate(180deg); }
}

@media (max-width: 760px) {
  .bar__nav { gap: 14px; }
  .guide { display: block; }
  .guide__side { display: none; }
  .guide__menu { display: block; border-bottom: 1px solid var(--line); margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); }
  .guide__menu summary { padding: 14px 0; font-weight: 500; cursor: pointer; }
  .guide__menu nav { padding-bottom: 16px; }
  .guide__body { padding-top: 32px; }
  .guide__body td:first-child { white-space: normal; }
  .feature__inner, .why__inner { padding: 64px var(--gutter); }
}

@media (max-width: 540px) {
  .menubar__label { display: none; }
  .menubar__apps, .menubar__list { gap: 0; }
  .menubar__app { padding: 3px 5px; font-size: 12px; }
  /* Everything still fits on a phone: no dots, the theme toggle as its icon,
     "AI" for the AI Statement. */
  .menubar__dot,
  .theme-toggle__label,
  .menubar__long { display: none; }
  .menubar__short { display: inline; }
  .menubar__home { margin-right: 2px; }
  .menubar__tools, .menubar__links { gap: 10px; }
  /* Open, the apps need the room "Apps" takes; the chevron still closes it. */
  .menubar--apps-open .menubar__toggle-text { display: none; }
  .hero-stage { margin-top: 16px; margin-bottom: 40px; }
  .hero-stage:has(.hero--has-image) { margin-top: 2.5vw; }
  .hero-stage:has(.hero--has-image) .hero { border-radius: 22px; }
}


/* Muninn's additions to the shared stylesheet. Keep this short: anything a
   second site would want belongs in shared/styles/core.css. */

/* A film shows the clip that matches the appearance. */
.film video { display: block; width: 100%; max-width: var(--shot-w, 100%); height: auto; margin: 0 auto; border-radius: 10px; }
.film .film--dark { display: none; }
.film .film--light { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .film .film--light { display: none; }
  :root:not([data-theme="light"]) .film .film--dark { display: block; }
}
:root[data-theme="dark"] .film .film--light { display: none; }
:root[data-theme="dark"] .film .film--dark { display: block; }
:root[data-theme="light"] .film .film--light { display: block; }
:root[data-theme="light"] .film .film--dark { display: none; }

/* The Eddic verse that closes the front page: the one ornament Muninn keeps. */
.verse { margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 32px; }
.verse p { margin: 0 !important; font-style: italic; color: var(--muted); }
.verse cite { grid-column: 1 / -1; font-style: normal; font-size: 14px; color: var(--faint); margin-top: 8px; }
@media (max-width: 560px) { .verse { grid-template-columns: 1fr; } }