/* postrally.dk. The Postrally design system: paper and ink, the course overprint
   in magenta as the one brand colour, the control flag's orange for marks only.
   Archivo for display, Schibsted Grotesk for reading, IBM Plex Mono for numbers. */

@font-face { font-family: "Archivo"; src: url("/assets/fonts/archivo-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("/assets/fonts/archivo-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url("/assets/fonts/schibsted-grotesk-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url("/assets/fonts/schibsted-grotesk-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url("/assets/fonts/schibsted-grotesk-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --paper: #f8faf7; --surface: #ffffff; --sunken: #edf1ec; --ink: #17201c; --ink-muted: #536059;
  --line: #d5dbd5; --border: #7f8a83; --course: #b0136c; --course-strong: #8c0f56; --course-tint: #fbe8f2;
  --on-course: #ffffff; --flag: #f2650f; --forest: #21754a; --forest-tint: #e2f2e8; --danger: #c0322b;
  --danger-tint: #fbe9e7; --signal: #f5b83d; --on-signal: #17201c; --focus: #1f6fd1;
  --map: #e6ebe4; --map-road: #ffffff; --map-water: #d3e3e6; --band: #17201c; --on-band: #f8faf7; --on-band-muted: #c4ccc6;
  --shadow: 0 1px 2px rgba(23,32,28,0.08), 0 4px 16px rgba(23,32,28,0.08);
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --radius-sm: 4px; --radius-md: 10px; --radius-lg: 18px; --wrap: 1120px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0f1513; --surface: #18201d; --sunken: #0a0f0d; --ink: #edf2ee; --ink-muted: #a3aea7;
    --line: #2a3430; --border: #6f7a73; --course: #f272b4; --course-strong: #ff9bcb; --course-tint: #3a1529;
    --on-course: #1d0812; --flag: #ff7a2e; --forest: #6fcf97; --forest-tint: #123222; --danger: #ff8a80;
    --danger-tint: #3b1512; --focus: #7fb4ff; --map: #1a2320; --map-road: #26302c; --map-water: #16292e;
    --band: #0a0f0d; --on-band: #edf2ee; --on-band-muted: #a3aea7;
    --shadow: 0 1px 2px rgba(0,0,0,0.5), 0 4px 16px rgba(0,0,0,0.4);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.55 var(--body); }
img, svg { max-width: 100%; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; letter-spacing: -0.02em; text-wrap: balance; margin: 0; color: var(--ink); }
p, ul, ol { margin: 0; }
a { color: var(--course); text-underline-offset: 3px; }
a:hover { color: var(--course-strong); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -60px; background: var(--surface); padding: 10px 14px; border-radius: var(--radius-md); z-index: 30; }
.skip:focus { top: 8px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.prose { max-width: 680px; }
.label { font: 600 12px/16px var(--body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }
.lead { font-size: 19px; line-height: 1.5; }
.muted { color: var(--ink-muted); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* Header */
.site-head { position: sticky; top: 0; z-index: 20; background: var(--surface); border-bottom: 1px solid var(--line); }
.site-head .wrap { display: flex; align-items: center; gap: 20px; min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 0.28em; font: 800 26px/1 var(--display); letter-spacing: -0.035em; color: var(--ink); text-decoration: none; flex: none; }
.brand:hover { color: var(--ink); }
.brand svg { width: 1.15em; height: 1.15em; }
.mk-ring { fill: none; stroke: var(--course); stroke-width: 7; }
.mk-w { fill: #ffffff; } .mk-o { fill: var(--flag); } .mk-e { fill: none; stroke: #17201c; stroke-width: 2; }
.nav { display: flex; gap: 22px; margin-left: auto; }
.nav a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px; padding-block: 8px; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--course); }
.nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; }
.head-actions { display: flex; align-items: center; gap: 12px; }
.menu-toggle { display: none; }
@media (max-width: 900px) {
  .nav { display: none; }
  .head-actions { margin-left: auto; }
  .head-actions .btn { display: none; }
  .menu-toggle { display: inline-flex; }
  .site-head.is-open .nav { display: flex; flex-direction: column; gap: 0; position: absolute; left: 0; right: 0; top: 100%; background: var(--surface); border-bottom: 1px solid var(--line); padding: 8px max(16px, env(safe-area-inset-left, 0px)) 16px; }
  .site-head.is-open .nav a { padding: 12px 0; border-bottom: 1px solid var(--line); }
}
.menu-toggle { min-height: 44px; padding: 8px 14px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface); color: var(--ink); font: 600 15px var(--body); cursor: pointer; }

.lang-menu { position: relative; }
.lang-menu summary { list-style: none; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; padding: 8px 12px; border-radius: var(--radius-md); font: 600 14px var(--body); color: var(--ink-muted); }
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary::after { content: ""; width: 7px; height: 7px; margin-left: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.lang-menu ul { position: absolute; right: 0; top: calc(100% + 4px); list-style: none; padding: 6px; margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow); min-width: 150px; z-index: 25; }
.lang-menu a { display: block; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; }
.lang-menu a:hover { background: var(--sunken); }
.lang-menu a[aria-current="true"] { font-weight: 700; color: var(--course); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 20px; border-radius: var(--radius-md); font: 600 16px/20px var(--body); text-decoration: none; border: 1px solid transparent; cursor: pointer; }
.btn-primary { background: var(--course); color: var(--on-course); }
.btn-primary:hover { background: var(--course-strong); color: var(--on-course); }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--border); }
.btn-secondary:hover { color: var(--course); border-color: var(--course); }
.btn-quiet { color: var(--course); padding-inline: 4px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* Sections */
main { display: block; }
.section { padding-block: 64px; }
.section.tight { padding-top: 0; }
.section-head { display: grid; gap: 10px; max-width: 700px; margin-bottom: 32px; }
.section-head h2 { font-size: clamp(28px, 4vw, 40px); line-height: 1.1; }
.section-head p { color: var(--ink-muted); font-size: 18px; }
.page-head { padding-block: 56px 32px; display: grid; gap: 14px; }
.page-head h1 { font-size: clamp(36px, 5vw, 56px); line-height: 1.04; max-width: 20ch; }
.page-head .lead { max-width: 36em; color: var(--ink); }

/* Course symbols, the only decoration */
.sym { display: inline-block; flex: none; }
.sym-circle { width: 16px; height: 16px; border: 2.5px solid var(--course); border-radius: 50%; }
.sym-triangle { width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 15px solid var(--course); }
.tag { display: inline-flex; align-items: center; gap: 8px; font: 600 12px/16px var(--body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--course-strong); }
.soon { display: inline-block; font: 600 12px/1 var(--body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); background: var(--signal); border-radius: 999px; padding: 6px 10px; }

/* Home: two doors */
.doors-intro { padding-block: 40px 0; }
.doors-intro p { font: 700 clamp(20px, 2.4vw, 26px)/1.3 var(--display); letter-spacing: -0.01em; max-width: 32em; }
.doors { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); margin-top: 28px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.door { padding: 48px max(16px, env(safe-area-inset-right, 0px)) 48px max(16px, env(safe-area-inset-left, 0px)); display: grid; min-width: 0; }
.door .inner { display: grid; gap: 18px; align-content: start; width: 100%; max-width: 560px; }
.door-work { background: var(--surface); border-right: 1px solid var(--line); }
.door-work .inner { justify-self: end; }
.door-city { background: var(--map); }
.door h1, .door h2 { font-size: clamp(32px, 4.4vw, 52px); line-height: 1.03; }
.door-city h2 { font-size: clamp(26px, 3.2vw, 36px); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; }
.chips li { font: 600 14px/1.2 var(--body); padding: 7px 12px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); }
.door-city .chips li { background: var(--surface); }
@media (max-width: 860px) {
  .doors { grid-template-columns: 1fr; }
  .door { padding-block: 28px; }
  .door-work { border-right: 0; border-bottom: 1px solid var(--line); }
  .door-work .inner { justify-self: start; }
  .door .lead { font-size: 17px; }
}

/* Steps as a course: start, posts, finish */
.course { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: relative; list-style: none; padding: 0; }
.course::before { content: ""; position: absolute; left: 28px; right: 28px; top: 27px; height: 3px; background: var(--course); }
.course li { position: relative; display: grid; gap: 10px; padding-right: 20px; align-content: start; }
.course .mark { width: 56px; height: 56px; background: var(--paper); }
.course .mark svg { width: 56px; height: 56px; display: block; }
.course .mark path, .course .mark circle { stroke: var(--course); stroke-width: 3; fill: var(--paper); }
.course h3 { font-size: 20px; line-height: 1.2; }
.course p { color: var(--ink-muted); }
@media (max-width: 760px) {
  .course { grid-template-columns: 1fr; gap: 22px; }
  .course::before { left: 27px; right: auto; top: 28px; bottom: 28px; width: 3px; height: auto; }
  .course li { grid-template-columns: 56px 1fr; column-gap: 16px; padding-right: 0; }
  .course .mark { grid-row: span 2; }
}

/* Facts strip */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.facts div { padding: 16px 16px 16px 0; display: grid; gap: 4px; min-width: 0; }
.facts b { font: 700 18px/24px var(--display); }
.facts small { color: var(--ink-muted); font-size: 14px; }

/* Cards and lists */
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 860px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.card h3 { font-size: 21px; line-height: 1.2; }
.card p { color: var(--ink-muted); }
.ticks { list-style: none; padding: 0; display: grid; gap: 10px; }
.ticks li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; }
.ticks li::before { content: ""; width: 12px; height: 12px; margin-top: 7px; border: 2.5px solid var(--course); border-radius: 50%; }
.moment { font: 700 15px var(--display); display: inline-flex; gap: 8px; align-items: center; padding: 8px 14px; border-radius: 999px; width: fit-content; }
.m-found { background: var(--course-tint); color: var(--course-strong); }
.m-ok { background: var(--forest-tint); color: var(--forest); }
.m-help { background: var(--signal); color: var(--on-signal); }

/* Comparison table */
.table-scroll { overflow-x: auto; }
.compare { width: 100%; border-collapse: collapse; min-width: 560px; }
.compare th, .compare td { text-align: left; padding: 14px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare thead th { font: 700 18px var(--display); }
.compare tbody th { font-weight: 600; color: var(--ink-muted); width: 26%; }

/* Dark band (privacy) */
.band { background: var(--band); color: var(--on-band); }
.band .wrap { padding-block: 56px; }
.band h2, .band h3 { color: var(--on-band); }
.band p { color: var(--on-band-muted); }
.band .grid-3 { gap: 32px; }
.band .big { font: 800 40px/1 var(--display); color: var(--on-band); }
.band a { color: var(--on-band); }

/* FAQ */
.faq { display: grid; gap: 8px; max-width: 760px; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); }
.faq summary { cursor: pointer; padding: 16px 18px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 700 20px/1 var(--display); color: var(--course); }
.faq details[open] summary::after { content: "\2212"; }
.faq details > div { padding: 0 18px 18px; color: var(--ink-muted); display: grid; gap: 10px; }

/* Closing call to action */
.cta { background: var(--course-tint); }
.cta .wrap { padding-block: 48px; display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; justify-content: space-between; }
.cta h2 { font-size: clamp(26px, 3.4vw, 36px); max-width: 22ch; }

/* Timeline (teambuilding) */
.timeline { list-style: none; padding: 0; display: grid; gap: 0; max-width: 760px; }
.timeline li { display: grid; grid-template-columns: 90px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.timeline .when { font: 600 15px var(--mono); color: var(--course); font-variant-numeric: tabular-nums; }
.timeline h3 { font-size: 18px; margin-bottom: 4px; }
.timeline p { color: var(--ink-muted); }

/* Walk cards */
.walk { padding: 0; overflow: hidden; }
.walk svg { display: block; width: 100%; height: auto; background: var(--map); }
.walk svg .road { stroke: var(--map-road); stroke-width: 10; fill: none; stroke-linecap: round; }
.walk svg .water { fill: var(--map-water); }
.walk svg .leg { stroke: var(--course); stroke-width: 3; fill: none; stroke-linecap: round; stroke-dasharray: 2 7; }
.walk svg .post { stroke: var(--course); stroke-width: 3; fill: none; }
.walk .body { padding: 20px; display: grid; gap: 8px; }

/* Forms */
.form { display: grid; gap: 18px; max-width: 640px; }
.form .row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 640px) { .form .row { grid-template-columns: 1fr; } }
.field { display: grid; gap: 6px; min-width: 0; }
.field label, .field legend { font-weight: 600; }
.field .hint { font-size: 14px; color: var(--ink-muted); }
.field input, .field textarea, .field select { width: 100%; font: 400 17px/1.4 var(--body); color: var(--ink); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; min-height: 48px; }
.field textarea { min-height: 120px; resize: vertical; }
.field fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.radio { display: flex; gap: 10px; align-items: flex-start; }
.radio input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--course); }
.field .error { color: var(--danger); font-weight: 600; font-size: 15px; }
[aria-invalid="true"] { border-color: var(--danger) !important; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: 14px; color: var(--ink-muted); }
.form-status { padding: 16px 18px; border-radius: var(--radius-md); font-weight: 600; }
.form-status.ok { background: var(--forest-tint); color: var(--forest); }
.form-status.err { background: var(--danger-tint); color: var(--danger); }
.inline-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.inline-form .field { flex: 1 1 260px; }

/* Long text (privacy, support) */
.doc { max-width: 720px; display: grid; gap: 16px; }
.doc h2 { font-size: 24px; margin-top: 24px; }
.doc h3 { font-size: 19px; margin-top: 8px; }
.doc ul { padding-left: 22px; display: grid; gap: 6px; }
.doc table { border-collapse: collapse; width: 100%; font-size: 15px; }
.doc th, .doc td { text-align: left; padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.doc .updated { color: var(--ink-muted); }

/* Footer */
.site-foot { background: var(--surface); border-top: 1px solid var(--line); margin-top: 0; }
.site-foot .wrap { display: grid; grid-template-columns: 1.4fr repeat(2, 1fr); gap: 24px 40px; padding-block: 40px; }
.site-foot p, .site-foot li { color: var(--ink-muted); font-size: 15px; }
.site-foot ul { list-style: none; padding: 0; display: grid; gap: 8px; }
.site-foot a { color: var(--ink); }
.site-foot .fine { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 16px; font-size: 14px; }
@media (max-width: 760px) { .site-foot .wrap { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }
.foot-about { margin-top: 12px; max-width: 34ch; }
.after { margin-top: 28px; }
.band .label { color: var(--on-band-muted); }
.h3 { font-size: 21px; line-height: 1.2; }
h1, h2, h3 { line-height: 1.15; }
.band .grid-3 > div { display: grid; gap: 6px; align-content: start; }
.band .big { margin-bottom: 4px; }
.field .radio { font-weight: 400; align-items: center; min-height: 44px; }
.field .radio input { margin-top: 0; }