@font-face{font-family:"Poltawski Nowy Variable";font-style:normal;font-display:swap;font-weight:400 700;src:url(/assets/poltawski-nowy-latin-ext-wght-normal.1fbcfe2ba0.woff2) format("woff2-variations"),url(/assets/poltawski-nowy-latin-ext-wght-normal.1fbcfe2ba0.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Poltawski Nowy Variable";font-style:normal;font-display:swap;font-weight:400 700;src:url(/assets/poltawski-nowy-latin-wght-normal.c471dfede9.woff2) format("woff2-variations"),url(/assets/poltawski-nowy-latin-wght-normal.c471dfede9.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:"Poltawski Nowy Variable";font-style:italic;font-display:swap;font-weight:400 700;src:url(/assets/poltawski-nowy-latin-ext-wght-italic.bf8d7963cd.woff2) format("woff2-variations"),url(/assets/poltawski-nowy-latin-ext-wght-italic.bf8d7963cd.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Poltawski Nowy Variable";font-style:italic;font-display:swap;font-weight:400 700;src:url(/assets/poltawski-nowy-latin-wght-italic.348048f918.woff2) format("woff2-variations"),url(/assets/poltawski-nowy-latin-wght-italic.348048f918.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:"Sofia Sans Extra Condensed Variable";font-style:normal;font-display:swap;font-weight:1 1000;src:url(/assets/sofia-sans-extra-condensed-latin-ext-wght-normal.214427a97a.woff2) format("woff2-variations"),url(/assets/sofia-sans-extra-condensed-latin-ext-wght-normal.214427a97a.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Sofia Sans Extra Condensed Variable";font-style:normal;font-display:swap;font-weight:1 1000;src:url(/assets/sofia-sans-extra-condensed-latin-wght-normal.4c0443d7e9.woff2) format("woff2-variations"),url(/assets/sofia-sans-extra-condensed-latin-wght-normal.4c0443d7e9.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;}
/*
  OutPath website stylesheet.

  The site is laid out as a stamp booklet: paper pages lying on a cloth cover.
  Colour is committed at page scale (the cover green owns the frame of every
  page, the paper owns the reading surface) and ink colours are used the way a
  rubber stamp uses them: violet, red and near-black, never as tints or
  gradients. Corners are square and nothing casts a shadow, because paper on a
  table does not.

  Textures are SVG noise (src/textures), referenced by an "asset:" URL and
  rewritten to hashed /assets paths by build.mjs. Stamp artwork masks
  (.art-<slot>) are appended to this file by the build.
*/

:root {
  color-scheme: light dark;

  --paper: #f6f5f0;
  --paper-fill: #fbfaf6;
  --paper-shade: #ecebe3;
  --rule: #d4d0c3;
  --rule-strong: #8a8e80;
  --ink: #1e1e1e;
  --ink-soft: #54594f;
  --ink-violet: #5b3f8c;
  --ink-red: #b3261e;
  --ink-red-deep: #8f1d17;
  --ink-black: #1e1e1e;
  --on-ink: #f6f5f0;
  --cover: #2f4a3a;
  --cover-deep: #253c2f;
  --on-cover: #f1efe6;
  --on-cover-soft: #c9d2c6;
  --field-border: #6b6f63;
  --focus: #5b3f8c;
  --paper-texture: url("/assets/paper-light.af4d7a43bc.svg");

  --font-print: "Poltawski Nowy Variable", "Palatino Linotype", Georgia, serif;
  --font-stamp: "Sofia Sans Extra Condensed Variable", "Arial Narrow", sans-serif;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --header-h: 64px;
  --edge: clamp(8px, 1.8vw, 28px);
  --pad: clamp(1.25rem, 3.6vw, 3.5rem);
  --sheet-max: 1360px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1b1d1a;
    --paper-fill: #222521;
    --paper-shade: #171916;
    --rule: #383d37;
    --rule-strong: #7d8378;
    --ink: #ece9e0;
    --ink-soft: #b9bdb2;
    --ink-violet: #b6a0e8;
    --ink-red: #f2877b;
    --ink-red-deep: #f6a89e;
    --ink-black: #ece9e0;
    --on-ink: #1b1d1a;
    --cover: #1d3226;
    --cover-deep: #16271d;
    --on-cover: #e7e9e1;
    --on-cover-soft: #aeb9ac;
    --field-border: #8d9387;
    --focus: #b6a0e8;
    --paper-texture: url("/assets/paper-dark.93ecd6f42a.svg");
  }
}

/* ── Base ─────────────────────────────────────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 1.5rem;
  scrollbar-color: var(--rule-strong) var(--cover);
  accent-color: var(--ink-red);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--cover) url("/assets/cloth.b370c7ceae.svg") 0 0 / 240px 240px;
  color: var(--on-cover);
  font-family: var(--font-print);
  font-size: 1.125rem;
  line-height: 1.55;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--ink-violet);
  color: var(--paper);
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-print);
  font-weight: 600;
  line-height: 1.08;
  text-wrap: balance;
}

p,
ul,
ol,
dl,
figure {
  margin: 0;
}

p,
li,
dd {
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 2px;
}

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

/* The violet ring all but disappears on the cloth cover (about 1.2:1 on the
   light-scheme green), so everything printed on the cover rings in the
   cover's paper colour instead. The skip link's ring also lands on the cover. */
.site-header,
.back-cover,
.skip-link {
  --focus: var(--on-cover);
}

input,
button,
select,
textarea {
  font: inherit;
  caret-color: var(--ink-violet);
}

/* Components below set display on their own class; a step or panel the
   scripts hide with the hidden attribute must still disappear. */
[hidden] {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -120px;
  z-index: 60;
  padding: 0.7rem 1rem;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-stamp);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.skip-link:focus {
  top: 0.75rem;
}

.icon {
  width: 1.2em;
  height: 1.2em;
  flex: none;
}

/* Condensed capitals: the lettering of stamps, cell numbers and labels. */
.stamp-type,
.label {
  font-family: var(--font-stamp);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Header: the edge of the cover ─────────────────────────────────────── */

.site-header {
  position: relative;
  z-index: 40;
  color: var(--on-cover);
}

.header-row {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  width: min(100% - 2 * var(--edge), var(--sheet-max));
  min-height: var(--header-h);
  margin-inline: auto;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-right: auto;
  font-size: 1.4rem;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.005em;
}

.brand img {
  width: 34px;
  height: 34px;
}

.site-nav {
  order: 2;
}

.menu-links {
  display: flex;
  gap: 1.6rem;
  padding: 0;
  list-style: none;
}

.menu-links a {
  display: inline-block;
  padding: 0.45rem 0;
  font-family: var(--font-stamp);
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--on-cover);
}

.menu-links a:hover,
.menu-links a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35em;
}

.menu-toggle,
.menu-actions {
  display: none;
}

.lang-switch {
  order: 3;
}

.lang-switch ul {
  display: flex;
  padding: 0;
  list-style: none;
  border: 1px solid var(--on-cover-soft);
}

.lang-switch li + li {
  border-left: 1px solid var(--on-cover-soft);
}

.lang-switch a {
  display: grid;
  place-items: center;
  min-width: 2.6rem;
  min-height: 2.25rem;
  padding: 0 0.4rem;
  font-family: var(--font-stamp);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none;
  color: var(--on-cover);
}

.lang-switch a:hover {
  background: var(--cover-deep);
}

.lang-switch a[aria-current="page"],
.lang-switch a[aria-current="true"] {
  background: var(--on-cover);
  color: var(--cover);
}

.header-cta {
  order: 4;
}

@media (max-width: 959px) {
  .header-row {
    gap: 0.6rem;
  }

  .site-nav {
    order: 4;
  }

  .header-cta {
    text-decoration: none;
  }

  /* The open menu still says which page you are on, as the desktop bar does. */
  .menu-links a[aria-current="page"] {
    text-underline-offset: 0.22em;
  }

  .site-header .header-cta {
    display: none;
  }

  .menu-toggle {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid var(--on-cover-soft);
    background: transparent;
    color: var(--on-cover);
    cursor: pointer;
  }

  .menu-toggle .icon {
    width: 1.5rem;
    height: 1.5rem;
  }

  .menu-toggle [data-icon-close],
  .menu-toggle[aria-expanded="true"] [data-icon-open] {
    display: none;
  }

  .menu-toggle[aria-expanded="true"] [data-icon-close] {
    display: block;
  }

  /* The open menu covers everything under the header, so no page edge shows through. */
  .menu {
    position: fixed;
    inset: var(--header-h) 0 0;
    z-index: 39;
    display: none;
    flex-direction: column;
    gap: 2rem;
    padding: 1.5rem var(--edge) 2.5rem;
    overflow-y: auto;
    background: var(--cover) url("/assets/cloth.b370c7ceae.svg") 0 0 / 240px 240px;
  }

  .menu[data-open="true"] {
    display: flex;
  }

  .menu-links {
    flex-direction: column;
    gap: 0;
    border-top: 1px solid var(--on-cover-soft);
  }

  .menu-links li {
    border-bottom: 1px solid var(--on-cover-soft);
  }

  .menu-links a {
    display: block;
    padding: 0.9rem 0;
    font-family: var(--font-print);
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
  }

  .menu-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.1rem;
  }

  .menu-download {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    color: var(--on-cover);
  }

  body.menu-open {
    overflow: hidden;
  }

  body.menu-open .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: var(--cover) url("/assets/cloth.b370c7ceae.svg") 0 0 / 240px 240px;
  }
}

@media (max-width: 380px) {
  .brand span {
    font-size: 1.2rem;
  }

  .lang-switch a {
    min-width: 2.2rem;
  }
}

/* ── Plaques: buttons as ink-stamped plates ─────────────────────────────── */

.plaque {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 54px;
  padding: 0 1.6rem;
  border: 0;
  background: none;
  color: var(--on-ink);
  font-family: var(--font-stamp);
  font-size: 1.22rem;
  font-weight: 750;
  line-height: 1.1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 160ms var(--ease-out);
}

/*
  The ink itself: a plate pressed by hand. Three mask layers, top first: the
  plate's outline with its edge slightly displaced (stretched to the button,
  corners still square), intersected with the ink, which is the union of a
  band over the lettering and patches where the plate did not quite touch the
  paper. The voids gather in patches and stay partly inked, and the band keeps
  most of them away from the letters, so the label stays crisp in both schemes.
*/
.plaque::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ink-red);
  -webkit-mask:
    url("/assets/plaque-edge.725df74e4e.svg") 0 0 / 100% 100% no-repeat,
    linear-gradient(transparent 22%, rgb(0 0 0 / 0.6) 40% 60%, transparent 78%),
    url("/assets/plaque-ink.ce7080e0cc.svg") 0 0 / 240px 240px;
  -webkit-mask-composite: source-in, source-over;
  mask:
    url("/assets/plaque-edge.725df74e4e.svg") 0 0 / 100% 100% no-repeat,
    linear-gradient(transparent 22%, rgb(0 0 0 / 0.6) 40% 60%, transparent 78%),
    url("/assets/plaque-ink.ce7080e0cc.svg") 0 0 / 240px 240px;
  mask-composite: intersect, add;
  transition: background-color 160ms ease;
}

/* The second, inner rule every stamp plate carries, printed with the same grain as a stamp's rim. */
.plaque::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid currentColor;
  opacity: 0.8;
  pointer-events: none;
  -webkit-mask: url("/assets/ink.1012f53750.svg") 60px 20px / 260px 260px;
  mask: url("/assets/ink.1012f53750.svg") 60px 20px / 260px 260px;
}

.plaque:hover {
  text-decoration: none;
}

.plaque:hover::before {
  background-color: var(--ink-red-deep);
}

.plaque:active:not(:disabled) {
  transform: scale(0.97);
}

.plaque .icon {
  width: 1.25em;
  height: 1.25em;
}

.plaque--outline {
  color: var(--ink);
}

/* Outline plates are only a rim, so they take the stamps' fine grain rather than the plate's patches. */
.plaque--outline::before,
.plaque--cover::before {
  -webkit-mask: url("/assets/ink.1012f53750.svg") 0 0 / 260px 260px;
  mask: url("/assets/ink.1012f53750.svg") 0 0 / 260px 260px;
}

.plaque--outline::before {
  background: transparent;
  border: 2px solid currentColor;
}

.plaque--outline:hover::before {
  background-color: var(--paper-shade);
}

/* On the cover: paper-coloured lines instead of ink. */
.plaque--cover {
  color: var(--on-cover);
}

.plaque--cover::before {
  background: transparent;
  border: 1.5px solid currentColor;
}

.plaque--cover:hover::before {
  background-color: var(--cover-deep);
}

.plaque--danger::before {
  background: var(--ink-red);
}

.plaque--sm {
  min-height: 44px;
  padding: 0 1.1rem;
  font-size: 1.05rem;
}

.plaque--block {
  display: flex;
  width: 100%;
}

.plaque:disabled,
.plaque[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.5;
}

.plaque.is-busy {
  cursor: progress;
  opacity: 0.75;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.4rem;
}

.actions--spaced {
  margin-top: 2rem;
}

/*
  An inline link, so a label that wraps flows like text. The last word and the
  arrow sit in one unbreakable span (arrowLabel in build.mjs), so the arrow
  always follows the text instead of drifting to the edge of the box.
*/
.text-link {
  color: var(--ink-violet);
  font-weight: 600;
}

.text-link .arrow-tail {
  white-space: nowrap;
}

.text-link .icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-left: 0.3em;
  vertical-align: -0.14em;
}

/* ── Sheets: pages of the booklet ───────────────────────────────────────── */

main {
  display: block;
  padding-bottom: var(--edge);
}

.sheet,
.spread {
  width: min(100% - 2 * var(--edge), var(--sheet-max));
  margin: 0 auto var(--edge);
}

.sheet,
.page {
  position: relative;
  background: var(--paper) var(--paper-texture) 0 0 / 300px 300px;
  color: var(--ink);
}

.sheet {
  padding: var(--pad);
}

.sheet--doc {
  width: min(100% - 2 * var(--edge), 980px);
}

.sheet--narrow {
  width: min(100% - 2 * var(--edge), 1120px);
}

/* A torn-off edge: perforation holes showing the cover through the paper. */
.perforated::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: -7px;
  width: 14px;
  background: var(--cover);
  -webkit-mask: url("/assets/perf.b500e40625.svg") 0 0 / 14px 14px repeat-y;
  mask: url("/assets/perf.b500e40625.svg") 0 0 / 14px 14px repeat-y;
  pointer-events: none;
}

.folio {
  position: absolute;
  bottom: 1rem;
  font-family: var(--font-stamp);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}

.folio--left {
  left: var(--pad);
}

.folio--right {
  right: var(--pad);
}

.sheet-head {
  display: grid;
  gap: 1.1rem;
  max-width: 62rem;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.sheet-title {
  font-size: clamp(2.3rem, 1.5rem + 2.8vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
}

.lead {
  max-width: 60ch;
  font-size: clamp(1.15rem, 1.05rem + 0.35vw, 1.35rem);
  line-height: 1.5;
}

.section {
  padding-top: clamp(2.5rem, 6vw, 4.5rem);
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  border-top: 1px solid var(--rule);
}

.section-title {
  font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.8rem);
  line-height: 1.08;
  margin-bottom: 1rem;
}

.prose {
  max-width: 66ch;
}

.prose p + p,
.prose p + ul,
.prose p + ol,
.prose ul + p,
.prose ol + p {
  margin-top: 0.9rem;
}

.prose a,
.note a,
.faq-answer a,
.legal a,
.credit a {
  color: var(--ink-violet);
}

.note {
  color: var(--ink-soft);
  font-size: 1rem;
}

/* ── Home, first screen: the open booklet ───────────────────────────────── */

.spread {
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
}

.spread--hero {
  min-height: calc(100svh - var(--header-h) - var(--edge));
}

/* The spine: a fold in the paper with its thread stitching. */
.spread::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 2;
  width: 0;
  border-left: 2px dashed var(--rule-strong);
  transform: translateX(-1px);
  pointer-events: none;
}

.page {
  display: flex;
  flex-direction: column;
  padding: var(--pad) var(--pad) calc(var(--pad) + 1.5rem);
}

.page--left {
  border-right: 1px solid var(--rule);
}

/* The headline is sized against this page, not the window (see .hero-title). */
.page--left {
  container-type: inline-size;
}

/* The copy keeps its 34rem measure; only the headline may use the whole page. */
.hero-copy {
  display: grid;
  gap: 1.5rem;
  margin-block: auto;
}

.hero-copy .actions {
  max-width: 34rem;
}

/* The slogan, the same English words on every page, is set as two block
   lines, "Show your" over "nature" (see twoLines in build.mjs), so it keeps
   two lines even where the page is wide enough for one (a tablet in
   portrait). The cap keeps the longer line, about 4.9em, inside its page
   with room for a wider fallback font; it was 13.5cqi while the Polish
   promise needed 7.1em, which shrank this headline below its own 2.7rem
   minimum on a 320px phone. */
.hero-title {
  font-size: clamp(2.7rem, 1.2rem + 4.1vw, 5.2rem);
  font-size: min(clamp(2.7rem, 1.2rem + 4.1vw, 5.2rem), 17.5cqi);
  line-height: 1;
  letter-spacing: -0.012em;
}

.hero-title .line {
  display: block;
}

.hero-sub {
  max-width: 30rem;
  font-size: clamp(1.18rem, 1.05rem + 0.45vw, 1.42rem);
  line-height: 1.45;
}

.hero-note {
  color: var(--ink-soft);
  font-size: 1rem;
  max-width: 30rem;
}

/* The owner's line every booklet prints on its first page. */
.owner-line {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  margin-top: 2.5rem;
  max-width: 26rem;
  font-family: var(--font-stamp);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.owner-line::after {
  content: "";
  flex: 1;
  border-bottom: 2px dotted var(--rule-strong);
  transform: translateY(-0.3em);
}

.page--right {
  gap: 1.25rem;
}

.page-heading {
  font-family: var(--font-stamp);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ── Stamp cells ──────────────────────────────────────────────────────── */

.cells {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-block: auto;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule-strong);
  border-left: 1px solid var(--rule-strong);
  counter-reset: cell;
}

.cell {
  position: relative;
  aspect-ratio: 1 / 1.06;
  border-right: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
  container-type: inline-size;
}

.cell-link {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: inherit;
  text-decoration: none;
}

.cell-link:focus-visible {
  outline-offset: -4px;
}

.cell-no {
  position: absolute;
  top: 0.4rem;
  left: 0.55rem;
  font-family: var(--font-stamp);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

/* Lift and press are separate wrappers so their transforms never fight. */
.lift {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  transition: transform 220ms var(--ease-out);
}

.press {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

@media (hover: hover) and (pointer: fine) {
  .cell-link:hover .lift {
    transform: translateY(-4px);
  }
}

.cell-link:focus-visible .lift {
  transform: translateY(-4px);
}

/* The visitor's cell: printed empty, waiting. */
.cell--empty .cell-link {
  padding: 12%;
}

/* Square box, so the dashed ring stays a circle in a cell that is slightly taller than wide. */
.empty-slot {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.35rem;
  width: 100%;
  aspect-ratio: 1;
  border: 2px dashed var(--rule-strong);
  border-radius: 50%;
  padding: 10%;
  text-align: center;
  font-family: var(--font-stamp);
  font-size: clamp(0.9rem, 7.4cqi, 1.25rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: border-color 200ms ease, color 200ms ease;
}

.empty-slot .icon {
  width: 1.4em;
  height: 1.4em;
}

@media (hover: hover) and (pointer: fine) {
  .cell--empty .cell-link:hover .empty-slot {
    border-color: var(--ink-red);
    color: var(--ink-red);
  }
}

.cell--empty .cell-link:focus-visible .empty-slot {
  border-color: var(--ink-red);
  color: var(--ink-red);
}

/* ── Stamps ───────────────────────────────────────────────────────────── */

.stamp {
  --ink-colour: var(--ink-violet);
  position: relative;
  display: grid;
  place-items: center;
  width: 80%;
  aspect-ratio: 1;
  color: var(--ink-colour);
  container-type: inline-size;
  -webkit-mask: url("/assets/ink.1012f53750.svg") 0 0 / 260px 260px;
  mask: url("/assets/ink.1012f53750.svg") 0 0 / 260px 260px;
}

.ink-violet {
  --ink-colour: var(--ink-violet);
}

.ink-red {
  --ink-colour: var(--ink-red);
}

.ink-black {
  --ink-colour: var(--ink-black);
}

/* No stamp lands straight; each has its own angle and ink offset. */
.tilt-a {
  transform: rotate(-5deg);
  -webkit-mask-position: 40px 10px;
  mask-position: 40px 10px;
}

.tilt-b {
  transform: rotate(3deg);
  -webkit-mask-position: 120px 60px;
  mask-position: 120px 60px;
}

.tilt-c {
  transform: rotate(-2deg);
  -webkit-mask-position: 200px 140px;
  mask-position: 200px 140px;
}

.tilt-d {
  transform: rotate(6deg);
  -webkit-mask-position: 70px 200px;
  mask-position: 70px 200px;
}

.tilt-e {
  transform: rotate(-4deg);
  -webkit-mask-position: 160px 30px;
  mask-position: 160px 30px;
}

.tilt-f {
  transform: rotate(2deg);
  -webkit-mask-position: 10px 110px;
  mask-position: 10px 110px;
}

.stamp-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.stamp-ring circle,
.stamp-ring path.rule {
  fill: none;
  stroke: currentColor;
}

.stamp-ring text {
  fill: currentColor;
  font-family: var(--font-stamp);
  font-weight: 750;
  letter-spacing: 1.6px;
}

/* The drawing: a mask over the ink colour, so one PNG prints in any ink. */
.stamp-art {
  display: block;
  background: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.stamp--round .stamp-art {
  width: 50%;
  height: 50%;
}

.stamp--rect {
  aspect-ratio: 1 / 1.08;
  grid-template-rows: auto 1fr auto;
  gap: 3cqi;
  padding: 8cqi 7cqi 7cqi;
  border: max(2px, 2.6cqi) solid currentColor;
}

.stamp--rect::after {
  content: "";
  position: absolute;
  inset: 3.2cqi;
  border: max(1px, 0.9cqi) solid currentColor;
  pointer-events: none;
}

/*
  In a numbered cell a rectangular stamp, which fills more of its square than a
  round one, is pressed smaller and a little down and right, so its frame stays
  clear of the printed cell number at every width.
*/
.cells .stamp--rect {
  width: 68%;
  translate: 0.3rem 0.35rem;
}

.stamp--rect .stamp-name {
  font-family: var(--font-stamp);
  font-size: 12cqi;
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
}

.stamp--long .stamp-name {
  font-size: 10cqi;
  letter-spacing: 0.01em;
}

.stamp--rect .stamp-art {
  width: 70%;
  height: 100%;
  min-height: 0;
}

.stamp--rect .stamp-meta {
  font-family: var(--font-stamp);
  font-size: 9.5cqi;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

/* A stamp with no drawing carries its altitude as the picture. */
.stamp--text .stamp-figure {
  display: flex;
  align-items: baseline;
  justify-content: center;
  align-self: center;
  font-family: var(--font-stamp);
  font-size: 22cqi;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.stamp--text .stamp-figure small {
  margin-left: 0.12em;
  font-size: 0.55em;
  letter-spacing: 0.08em;
}

/*
  The one authored motion: the fresh stamp presses into its cell once, when
  the cell first comes into view (site.js adds .is-pressed). Without scripting
  the stamp simply sits there. With scripting it waits hidden, and a delayed
  fallback shows it anyway in case site.js never arrives.
*/
@media (scripting: enabled) {
  [data-press]:not(.is-pressed) {
    opacity: 0;
    animation: press-fallback 0s linear 3s forwards;
  }

  /* site.js has taken over: it waits for the cell to come into view. */
  [data-press].is-armed:not(.is-pressed) {
    animation: none;
  }
}

[data-press].is-pressed {
  animation: stamp-press 560ms var(--ease-out) both;
}

@keyframes stamp-press {
  0% {
    opacity: 0;
    transform: translateY(-16%) scale(1.2);
  }
  55% {
    opacity: 1;
    transform: translateY(0) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes press-fallback {
  to {
    opacity: 1;
  }
}

@keyframes stamp-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-press].is-pressed {
    animation: stamp-fade 320ms ease both;
  }

  .lift,
  .plaque {
    transition: none;
  }

  .cell-link:hover .lift,
  .cell-link:focus-visible .lift,
  .plaque:active:not(:disabled) {
    transform: none;
  }
}

/* ── Photographs with their stamps ─────────────────────────────────────── */

/*
  The print is a size container so the stamps, and the room the caption
  keeps free for them, scale with the print rather than the window.
*/
.print {
  --stamps-w: clamp(104px, 34cqi, 156px);
  position: relative;
  container-type: inline-size;
}

/* A mounted print: paper border and four album corners. */
.mount {
  position: relative;
  padding: clamp(6px, 1.2vw, 12px);
  background: var(--paper-fill);
  border: 1px solid var(--rule);
}

.mount img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--paper-shade);
}

.mount::before,
.mount::after,
.mount > .corner-b::before,
.mount > .corner-b::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  background: var(--ink);
  pointer-events: none;
}

.mount::before {
  top: -4px;
  left: -4px;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.mount::after {
  top: -4px;
  right: -4px;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.mount > .corner-b::before {
  bottom: -4px;
  left: -4px;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.mount > .corner-b::after {
  bottom: -4px;
  right: -4px;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.print-frame {
  position: relative;
}

/*
  The stamps are pressed on the page right under the print's corner, catching
  only its paper border: ink on a photograph is unreadable, and it would hide
  what the photo shows.
*/
.print-stamps {
  position: absolute;
  right: -2%;
  bottom: 0;
  z-index: 2;
  transform: translateY(calc(100% - 14px));
  display: grid;
  justify-items: end;
  gap: 0.2rem;
  width: var(--stamps-w);
  pointer-events: none;
  /* A stamp sizes its frame and lettering from its container, as it does in a cell. */
  container-type: inline-size;
}

.print-stamps .stamp {
  width: 100%;
}

/*
  The caption keeps the stamps' column free and is at least as tall as the
  stamp below the print (a rectangular stamp is 1.08 times its width, and it
  starts 14px above the print's lower edge), with a little air under it.
*/
.caption {
  display: grid;
  align-content: start;
  gap: 0.2rem;
  min-height: calc(var(--stamps-w) * 1.08 - 0.5rem);
  margin-top: 0.8rem;
  padding-right: calc(var(--stamps-w) + 0.75rem);
}

.caption-place {
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.3;
}

.credit {
  color: var(--ink-soft);
  font-size: 0.9rem;
  font-style: italic;
  line-height: 1.4;
}

/* Upright and in full ink, so it is read in the same glance as the stamp. */
.caption-note {
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.4;
}

/* A licence name split over two lines ("CC / BY-SA 4.0") no longer reads as one. */
.credit a[rel~="license"] {
  white-space: nowrap;
}

/* ── Home: "only on the spot" ─────────────────────────────────────────── */

.spot {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.spot .print {
  --stamps-w: clamp(112px, 26cqi, 176px);
}

.rules {
  display: grid;
  gap: 0;
  margin-top: 1.75rem;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}

/* The conditions are not a sequence, so they are ruled lines, not numbered steps. */
.rules li {
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--rule);
}

/* ── Home: the stamp book of places ───────────────────────────────────── */

.book-head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 1rem clamp(2rem, 5vw, 5rem);
  align-items: end;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.book {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule-strong);
  border-left: 1px solid var(--rule-strong);
}

.book > li {
  position: relative;
  padding: 2.4rem clamp(1rem, 2vw, 1.75rem) 1.75rem;
  border-right: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
  scroll-margin-top: 1rem;
}

.book > li:target {
  outline: 2px solid var(--ink-violet);
  outline-offset: -2px;
}

.book .cell-no {
  top: 0.6rem;
  left: 0.8rem;
}

/* ── Home: the rest of the trip, and Premium ──────────────────────────── */

.legend-premium {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.legend {
  margin-top: 1.5rem;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}

.legend li {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: 0.2rem 1rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--rule);
}

.legend .icon {
  grid-row: span 2;
  width: 2rem;
  height: 2rem;
  color: var(--ink-violet);
}

.legend h3 {
  font-size: 1.3rem;
}

.legend p {
  color: var(--ink-soft);
}

/* A coupon: a perforated slip that tears off the page. */
.coupon {
  position: relative;
  display: grid;
  gap: 1.1rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--paper-fill);
  border: 2px solid var(--ink-violet);
}

.coupon::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid var(--ink-violet);
  pointer-events: none;
}

.coupon h2 {
  font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem);
}

.price-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1rem;
  font-family: var(--font-stamp);
  font-size: 1.5rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  color: var(--ink-violet);
  font-variant-numeric: tabular-nums;
}

.price-line .or {
  font-family: var(--font-print);
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-soft);
}

.ticks {
  display: grid;
  gap: 0.45rem;
  padding: 0;
  list-style: none;
}

.ticks li {
  display: grid;
  grid-template-columns: 1.4rem 1fr;
  gap: 0.6rem;
  align-items: start;
}

.ticks .icon {
  width: 1.3rem;
  height: 1.3rem;
  margin-top: 0.2rem;
  color: var(--ink-violet);
}

/* ── Home: the close ──────────────────────────────────────────────────── */

.close {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}

.close .cell {
  border: 1px solid var(--rule-strong);
  max-width: 320px;
  width: 100%;
  justify-self: center;
}

.close-copy {
  display: grid;
  gap: 1.25rem;
}

.store {
  display: grid;
  gap: 0.35rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
}

.store-soon {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-stamp);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-violet);
}

.store-note {
  color: var(--ink-soft);
  font-size: 1rem;
}

/* ── Features: the register ───────────────────────────────────────────── */

.register {
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule-strong);
}

.register > li {
  display: grid;
  grid-template-columns: 3rem minmax(0, 16rem) minmax(0, 1fr) 7rem;
  gap: 0.4rem clamp(1rem, 2.5vw, 2rem);
  align-items: baseline;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--rule);
}

.register .icon {
  align-self: start;
  width: 2.1rem;
  height: 2.1rem;
  color: var(--ink-violet);
}

.register h2,
.register h3 {
  font-size: 1.35rem;
  line-height: 1.2;
}

.register p {
  max-width: 60ch;
}

.tag {
  justify-self: end;
  display: inline-block;
  padding: 0.15em 0.5em 0.1em;
  border: 1.5px solid var(--ink-violet);
  color: var(--ink-violet);
  font-family: var(--font-stamp);
  font-size: 0.95rem;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transform: rotate(-2deg);
}

a.tag:hover {
  background: var(--paper-shade);
}

.register > li.register-figure {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  padding: clamp(2rem, 4vw, 3rem) 0;
  border-bottom: 1px solid var(--rule);
}

/* ── Premium ──────────────────────────────────────────────────────────── */

.price-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 14rem));
  gap: 1rem;
}

.price-stamp {
  position: relative;
  display: grid;
  gap: 0.15rem;
  padding: 1rem 1.2rem 0.9rem;
  border: 2.5px solid var(--ink-violet);
  color: var(--ink-violet);
  -webkit-mask: url("/assets/ink.1012f53750.svg") 30px 70px / 260px 260px;
  mask: url("/assets/ink.1012f53750.svg") 30px 70px / 260px 260px;
}

.price-stamp::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid currentColor;
  pointer-events: none;
}

.price-stamp:nth-child(2) {
  transform: rotate(1.5deg);
}

.price-stamp:first-child {
  transform: rotate(-1.5deg);
}

.price-stamp .amount {
  font-family: var(--font-stamp);
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.price-stamp .per {
  font-family: var(--font-stamp);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.premium-top {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.premium-top .print {
  margin-top: 0.5rem;
}

/* Positioned, so the table's visually hidden labels scroll with it instead of widening the page. */
.compare-wrap {
  position: relative;
  overflow-x: auto;
}

.compare {
  width: 100%;
  min-width: 36rem;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.compare caption {
  text-align: left;
}

.compare th,
.compare td {
  padding: 0.95rem 1rem;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}

.compare thead th {
  border-bottom: 2px solid var(--ink);
  font-family: var(--font-stamp);
  font-size: 1.15rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.compare tbody th {
  width: 30%;
  font-weight: 600;
}

.compare .col-premium {
  background: color-mix(in srgb, var(--ink-violet) 7%, transparent);
  border-left: 2px solid var(--ink-violet);
  border-right: 2px solid var(--ink-violet);
}

.compare thead .col-premium {
  color: var(--ink-violet);
  border-top: 2px solid var(--ink-violet);
}

.compare tbody tr:last-child .col-premium {
  border-bottom: 2px solid var(--ink-violet);
}

.compare .none {
  color: var(--ink-soft);
}

.compare .icon {
  display: inline-block;
  vertical-align: -0.2em;
  color: var(--ink-violet);
}

.compare-note {
  margin-top: 1rem;
}

.facts-list {
  display: grid;
  gap: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}

.facts-list li {
  padding: 1rem 0;
  border-bottom: 1px solid var(--rule);
}

/*
  Paying and the questions about it sit side by side, each list ruled as wide
  as its own column. The two sections share the pair's rows (subgrid), so both
  lists start on the same line even when one heading wraps and the other does not.
*/
.terms-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 4.5rem) clamp(2rem, 5vw, 5rem);
}

.terms-pair .faq {
  max-width: none;
}

/* Both lists open with the same, stronger rule, right under their headings. */
.terms-pair .facts-list {
  border-top-color: var(--rule-strong);
}

.terms-pair .section-title {
  align-self: end;
}

@media (min-width: 900px) {
  .terms-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto;
    row-gap: 0;
  }

  .terms-pair > section {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    align-content: start;
  }
}

.founder {
  position: relative;
  display: grid;
  gap: 1rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 2px solid var(--ink-red);
}

.founder::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid var(--ink-red);
  pointer-events: none;
}

.founder h2 {
  color: var(--ink-red);
}

/* ── FAQ ──────────────────────────────────────────────────────────────── */

.faq {
  max-width: 54rem;
  border-top: 1px solid var(--rule-strong);
}

.faq details {
  border-bottom: 1px solid var(--rule);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.5rem;
  padding: 1rem 0;
  font-size: 1.22rem;
  font-weight: 600;
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary .icon {
  width: 1.4rem;
  height: 1.4rem;
  color: var(--ink-violet);
  transition: transform 200ms var(--ease-out);
}

.faq details[open] summary .icon {
  transform: rotate(45deg);
}

.faq-answer {
  max-width: 64ch;
  padding: 0 0 1.4rem;
}

/* ── App page ─────────────────────────────────────────────────────────── */

.steps-cells {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule-strong);
  border-left: 1px solid var(--rule-strong);
  counter-reset: step;
}

.steps-cells > li {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.6rem;
  padding: 3.4rem 1.5rem 1.75rem;
  border-right: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
  counter-increment: step;
}

.steps-cells > li::before {
  content: counter(step);
  position: absolute;
  top: 1rem;
  left: 1.5rem;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1.5px solid var(--ink-red);
  border-radius: 50%;
  color: var(--ink-red);
  font-family: var(--font-stamp);
  font-weight: 750;
}

.steps-cells h3 {
  font-size: 1.35rem;
}

.store-card {
  display: grid;
  gap: 1rem;
  align-content: start;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--rule-strong);
  background: var(--paper-fill);
}

.app-top {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

/* ── Forms ────────────────────────────────────────────────────────────── */

.form {
  display: grid;
  gap: 1.35rem;
}

.field {
  display: grid;
  gap: 0.4rem;
}

.field label {
  font-family: var(--font-stamp);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}

.field input,
.map-search input {
  width: 100%;
  min-height: 52px;
  padding: 0 0.95rem;
  border: 1.5px solid var(--field-border);
  border-radius: 0;
  background: var(--paper-fill);
  color: var(--ink);
  font-size: 1.08rem;
}

.field input:hover {
  border-color: var(--ink);
}

.field input:focus-visible,
.map-search input:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-color: var(--ink);
}

.field.has-error input {
  border-color: var(--ink-red);
  border-width: 2px;
}

.input-wrap {
  position: relative;
}

.input-wrap.has-toggle input {
  padding-right: 3.4rem;
}

.field-toggle {
  position: absolute;
  top: 50%;
  right: 4px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transform: translateY(-50%);
}

.field-toggle:hover {
  color: var(--ink);
}

.field-toggle [hidden] {
  display: none;
}

.field-help {
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.45;
}

.field-help a {
  color: var(--ink-violet);
}

.field-error {
  color: var(--ink-red);
  font-size: 0.97rem;
  font-weight: 600;
}

.field-status {
  color: var(--ink-violet);
  font-size: 0.97rem;
  font-weight: 600;
}

.status {
  padding: 0.8rem 1rem;
  border: 2px solid var(--ink-red);
  color: var(--ink-red);
  font-weight: 600;
}

.status.is-ok {
  border-color: var(--ink-violet);
  color: var(--ink-violet);
}

.check {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: 0.75rem;
  align-items: start;
  cursor: pointer;
}

.check input {
  width: 1.3rem;
  height: 1.3rem;
  margin: 0.2rem 0 0;
}

/*
  A checkbox with its own error line (the sign-up terms). Not a .field: that
  would set the sentence in stamp capitals and stretch the box like a text
  input. The label keeps body text, so the links in it read as links.
*/
.field-check {
  display: grid;
  gap: 0.4rem;
}

.field-check .check {
  line-height: 1.45;
}

.field-check .check a {
  color: var(--ink-violet);
}

.field-check.has-error .check input {
  outline: 2px solid var(--ink-red);
  outline-offset: 2px;
}

.success-icon {
  width: 3rem;
  height: 3rem;
  color: var(--ink-violet);
}

/* ── Sign-up ──────────────────────────────────────────────────────────── */

.signup {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}

.signup-form {
  display: grid;
  gap: 1.5rem;
  max-width: 34rem;
}

.signup-step {
  display: grid;
  gap: 1rem;
}

.signup-step h2 {
  font-size: 2rem;
}

.signup-aside {
  display: grid;
  gap: 1.75rem;
}

.signup-aside .cell {
  width: min(100%, 300px);
  border: 1px solid var(--rule-strong);
}

.signup-aside .cell-link {
  padding: 12%;
}

/* ── Documents: legal pages, deletion, subscription, credits ──────────── */

.doc-head {
  display: grid;
  gap: 1rem;
  margin-bottom: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 2px solid var(--ink);
}

/* German titles are single long compounds ("Nutzungsbedingungen") that are
   wider than a 320px phone at this size. They hyphenate where the browser has
   a German dictionary, and otherwise break anywhere rather than push the page
   sideways. */
.doc-title {
  font-size: clamp(2rem, 1.5rem + 2vw, 3.1rem);
  line-height: 1.06;
  overflow-wrap: anywhere;
}

.doc-title:lang(de) {
  hyphens: auto;
}

.legal {
  max-width: 70ch;
}

.legal section + section {
  margin-top: 2.25rem;
  padding-top: 2.25rem;
  border-top: 1px solid var(--rule);
}

/* Section headings come from the app's legal texts, and German ones can hold a
   compound ("Moderationsentscheidungen") wider than a 320px phone at this
   size; same rule as .doc-title, so a new heading never pushes the page
   sideways. */
.legal h2 {
  font-size: 1.45rem;
  line-height: 1.25;
  margin-bottom: 0.8rem;
  overflow-wrap: anywhere;
}

.legal h2:lang(de) {
  hyphens: auto;
}

.legal p + p,
.legal p + ol,
.legal p + ul,
.legal ol + p,
.legal ul + p,
.legal dl + p,
.legal p + dl,
.legal p + .actions,
.legal .actions + p {
  margin-top: 0.85rem;
}

.legal ol,
.legal ul {
  display: grid;
  gap: 0.55rem;
  padding-left: 1.3rem;
}

.legal-meta {
  font-family: var(--font-stamp);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.legal-note a {
  color: var(--ink-violet);
}

/* Legal text quotes full URLs as link text; they break rather than overflow. */
.legal a {
  overflow-wrap: anywhere;
}

.legal-facts {
  display: grid;
  border-top: 1px solid var(--rule);
}

.legal-facts > div {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  gap: 0.3rem 1.5rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--rule);
}

.legal-facts dt {
  font-family: var(--font-stamp);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.legal-facts dd {
  margin: 0;
}

.legal-facts address {
  font-style: normal;
}

/* The placeholder names an environment variable, one long unbreakable token. */
.placeholder {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border: 2px dashed var(--ink-red);
  color: var(--ink-red);
  overflow-wrap: anywhere;
}

.doc-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.panel {
  display: grid;
  gap: 1rem;
  align-content: start;
  padding: 1.5rem 0;
  border-top: 2px solid var(--ink);
}

.panel + .panel {
  margin-top: 1.5rem;
}

.panel h2 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.5rem;
  line-height: 1.2;
}

.panel h2 .icon {
  color: var(--ink-violet);
}

.panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.steps {
  display: grid;
  gap: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps li {
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  gap: 0.6rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--rule);
  counter-increment: step;
}

.steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  border: 1.5px solid var(--ink-violet);
  border-radius: 50%;
  color: var(--ink-violet);
  font-family: var(--font-stamp);
  font-weight: 750;
}

.bullets {
  display: grid;
  gap: 0.6rem;
  padding: 0;
  list-style: none;
}

.bullets li {
  display: grid;
  grid-template-columns: 1.3rem 1fr;
  gap: 0.6rem;
}

.bullets .icon {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.3rem;
  color: var(--ink-violet);
}

.account-name {
  font-family: var(--font-stamp);
  font-size: 1.1em;
  font-weight: 700;
  letter-spacing: 0.04em;
  overflow-wrap: anywhere;
}

/* ── Credits ──────────────────────────────────────────────────────────── */

.credits {
  display: grid;
  gap: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule-strong);
}

.credits > li {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: 1rem clamp(1.25rem, 3vw, 2.5rem);
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--rule);
  scroll-margin-top: 1rem;
}

.credits img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: 1px solid var(--rule);
}

.credits h2 {
  font-size: 1.3rem;
  line-height: 1.25;
  margin-bottom: 0.6rem;
}

.credits .legal-facts > div {
  grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
  padding: 0.45rem 0;
}

/* ── Map page ─────────────────────────────────────────────────────────── */

.map-page {
  padding-bottom: 0;
}

.map-stage {
  position: relative;
  width: min(100% - 2 * var(--edge), var(--sheet-max));
  height: calc(100svh - var(--header-h) - var(--edge));
  min-height: 30rem;
  margin: 0 auto;
  background: var(--paper-shade);
  border: 1px solid var(--rule-strong);
}

/* Two classes deep: maplibre-gl.css loads later and sets .maplibregl-map to position: relative. */
.map-stage .map-frame {
  position: absolute;
  inset: 0;
}

.map-status {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: 1rem;
  color: var(--ink-soft);
  text-align: center;
}

.map-panel {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: min(25rem, calc(100% - 2rem));
  max-height: calc(100% - 2rem);
  overflow-y: auto;
  padding: 1.4rem;
  background: var(--paper) var(--paper-texture) 0 0 / 300px 300px;
  color: var(--ink);
  border: 1px solid var(--rule-strong);
}

.map-title {
  font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.3rem);
  line-height: 1.05;
}

.map-lead {
  margin-top: 0.6rem;
  color: var(--ink-soft);
  font-size: 1rem;
}

.map-search {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}

.map-search input {
  flex: 1;
  min-width: 0;
  min-height: 46px;
}

.map-search .plaque {
  min-width: 46px;
  min-height: 46px;
  padding: 0 0.8rem;
}

.map-search-status {
  margin-top: 0.6rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.map-results {
  margin-top: 0.6rem;
  padding: 0;
  list-style: none;
  max-height: 14rem;
  overflow-y: auto;
  border: 1px solid var(--rule-strong);
}

.map-result {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 0.6rem 0.85rem;
  border: 0;
  border-bottom: 1px solid var(--rule);
  background: transparent;
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}

.map-results li:last-child .map-result {
  border-bottom: 0;
}

.map-result:hover,
.map-result:focus-visible {
  background: var(--paper-shade);
}

.chips-label {
  margin-top: 1.1rem;
  font-family: var(--font-stamp);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.5rem;
}

.chip {
  min-height: 44px;
  padding: 0 0.9rem;
  border: 1.5px solid var(--field-border);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-stamp);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

.chip:hover {
  border-color: var(--ink);
}

.chip[aria-pressed="true"] {
  background: var(--ink-violet);
  border-color: var(--ink-violet);
  color: var(--paper);
}

.map-panel .actions {
  margin-top: 1.2rem;
}

.map-frame .maplibregl-ctrl-attrib {
  font-size: 0.75rem;
}

.map-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.25rem;
  margin-top: 1rem;
  font-size: 0.92rem;
}

.map-legal a {
  display: inline-block;
  padding: 0.3rem 0;
  color: var(--ink-soft);
}

.map-legal a:hover {
  color: var(--ink);
}

/* ── Footer: the back cover ───────────────────────────────────────────── */

.back-cover {
  width: min(100% - 2 * var(--edge), var(--sheet-max));
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4.5rem) 0 2rem;
  color: var(--on-cover);
}

.back-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
  gap: 2.5rem clamp(1.5rem, 3vw, 3rem);
}

/* The printed label on the back of the booklet. */
.cover-label {
  position: relative;
  display: grid;
  gap: 0.75rem;
  align-content: start;
  /* A printed label is as tall as what is printed on it, not as the link columns beside it. */
  align-self: start;
  padding: 1.4rem 1.5rem;
  border: 2px solid var(--on-cover-soft);
}

.cover-label::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid var(--on-cover-soft);
  pointer-events: none;
}

.cover-label .brand {
  margin: 0;
}

.cover-label p {
  color: var(--on-cover-soft);
  font-size: 1.05rem;
}

.foot-title {
  margin-bottom: 0.7rem;
  font-family: var(--font-stamp);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-cover-soft);
}

.back-cover ul {
  display: grid;
  gap: 0.1rem;
  padding: 0;
  list-style: none;
}

.back-cover li a {
  display: inline-block;
  padding: 0.3rem 0;
  color: var(--on-cover);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.back-cover li a:hover {
  text-decoration: underline;
}

.back-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-top: 3rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--on-cover-soft);
  color: var(--on-cover-soft);
  font-size: 0.97rem;
}

.back-bottom a {
  color: var(--on-cover);
}

/* ── Responsive ───────────────────────────────────────────────────────── */

@media (max-width: 1099px) {
  .book {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .cover-label {
    grid-column: 1 / -1;
    max-width: 30rem;
  }

  .register > li {
    grid-template-columns: 2.6rem minmax(0, 1fr) auto;
  }

  .register > li p {
    grid-column: 2 / -1;
  }

  .register > li .tag {
    grid-column: 3;
    grid-row: 1;
  }
}

@media (max-width: 899px) {
  .spread {
    grid-template-columns: 1fr;
  }

  .spread::before {
    display: none;
  }

  .spread--hero {
    min-height: 0;
  }

  .page--left {
    border-right: 0;
    border-bottom: 2px dashed var(--rule-strong);
  }

  .spot,
  .legend-premium,
  .close,
  .premium-top,
  .signup,
  .doc-grid,
  .app-top,
  .book-head,
  .register-figure {
    grid-template-columns: minmax(0, 1fr);
  }

  .close .cell {
    max-width: 260px;
    justify-self: start;
  }

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

  .price-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 759px) {
  :root {
    --header-h: 60px;
  }

  body {
    font-size: 1.0625rem;
  }

  .hero-copy {
    gap: 1.2rem;
  }

  .page--right {
    padding-top: 1.5rem;
  }

  .cells {
    grid-template-columns: repeat(2, 1fr);
  }

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

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

  .credits > li {
    grid-template-columns: minmax(0, 1fr);
  }

  .legal-facts > div,
  .credits .legal-facts > div {
    grid-template-columns: minmax(0, 1fr);
  }

  .register > li {
    grid-template-columns: 2.3rem minmax(0, 1fr);
  }

  .register > li .tag {
    grid-column: 2;
    grid-row: auto;
    justify-self: start;
  }

  .actions .plaque {
    width: 100%;
  }

  /* On a phone each row of the comparison stacks: the feature, then free and Premium side by side. */
  .compare-wrap {
    overflow: visible;
  }

  .compare,
  .compare tbody,
  .compare tr,
  .compare th,
  .compare td {
    display: block;
  }

  .compare {
    min-width: 0;
  }

  .compare thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .compare tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    border-bottom: 1px solid var(--rule);
  }

  .compare tbody th {
    grid-column: 1 / -1;
    width: auto;
    padding: 1rem 0 0.35rem;
    border: 0;
  }

  .compare td {
    padding: 0.35rem 0.75rem 1rem 0;
    border: 0;
  }

  .compare td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.2rem;
    font-family: var(--font-stamp);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }

  .compare .col-premium,
  .compare tbody tr:last-child .col-premium {
    padding-left: 0.75rem;
    border: 0;
    border-left: 1px solid var(--rule-strong);
    background: none;
  }

  .compare .col-premium::before {
    color: var(--ink-violet);
  }

  /* On a phone the map panel sits above the map and keeps to what is used on the go. */
  .map-stage {
    display: flex;
    flex-direction: column;
    width: 100%;
    border-inline: 0;
  }

  .map-panel {
    position: static;
    width: auto;
    max-height: none;
    overflow: visible;
    border: 0;
    border-bottom: 1px solid var(--rule-strong);
    padding: 1rem var(--edge);
  }

  .map-lead,
  .map-panel .actions,
  .chips-label {
    display: none;
  }

  .chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-top: 0.75rem;
    padding-bottom: 0.25rem;
    scrollbar-width: none;
  }

  .chip {
    flex: none;
  }

  .map-stage .map-frame {
    position: relative;
    inset: auto;
    flex: 1;
    min-height: 18rem;
  }
}

@media (max-width: 479px) {
  .back-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .price-board {
    grid-template-columns: minmax(0, 1fr);
    max-width: 16rem;
  }

}

@media (forced-colors: active) {
  .plaque::before,
  .plaque::after,
  .stamp,
  .price-stamp {
    -webkit-mask: none;
    mask: none;
  }

  .plaque::before {
    border: 2px solid ButtonText;
  }
}

.art-tatra-hut{-webkit-mask-image:url(/assets/stamp-tatra-hut.fd38282e71.svg);mask-image:url(/assets/stamp-tatra-hut.fd38282e71.svg)}
.art-alpine-peak{-webkit-mask-image:url(/assets/stamp-alpine-peak.961d652088.svg);mask-image:url(/assets/stamp-alpine-peak.961d652088.svg)}
.art-forest-lake{-webkit-mask-image:url(/assets/stamp-forest-lake.bcb0bbe359.svg);mask-image:url(/assets/stamp-forest-lake.bcb0bbe359.svg)}
.art-castle-ruin{-webkit-mask-image:url(/assets/stamp-castle-ruin.e672fa8873.svg);mask-image:url(/assets/stamp-castle-ruin.e672fa8873.svg)}
.art-waterfall{-webkit-mask-image:url(/assets/stamp-waterfall.84a94774a8.svg);mask-image:url(/assets/stamp-waterfall.84a94774a8.svg)}
.art-sea-cliff{-webkit-mask-image:url(/assets/stamp-sea-cliff.cb95140630.svg);mask-image:url(/assets/stamp-sea-cliff.cb95140630.svg)}