/* The page's typefaces, served from this site (both SIL Open Font License, the Latin set from Google Fonts, which
   covers English and Danish). Figtree is a variable font: one file carries every weight from 300 to 900. */
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap; src: url('./fonts/figtree-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Reenie Beanie"; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/reenie-beanie-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  color-scheme: light;
  --ink: #152621;
  --quiet: #425c55;
  --coral: #ff7477;
  --sky: #cde6ee;
  --paper: #fffefa;
  /* The page's two typefaces, the only place they are named (the red pen is --rd-hand in road.css). Figtree, picked by
     Valdemar on 2026-09-24, in place of Aptos, which browsers never loaded (the page he approved showed Segoe UI, whose
     widths Figtree matches within about 1.5 %). Segoe UI and the system sans stand in while Figtree loads. */
  --font-text: "Figtree", "Segoe UI", system-ui, sans-serif;
  --font-display: "Figtree", "Segoe UI", system-ui, sans-serif;
  font-family: var(--font-text);
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; }
button:focus-visible, a:focus-visible { outline: 3px solid #b84246; outline-offset: 6px; }
.hero { position: relative; isolation: isolate; height: clamp(680px, 56.25vw, 1040px); overflow: hidden; background: var(--sky); --scene-focus: 58%; }
.hero-art { position: absolute; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.site-header { position: absolute; inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 30px 5%; }
.wordmark { text-decoration: none; font-weight: 700; font-size: 28px; letter-spacing: -1.4px; }
.wordmark span { color: #b03a3e; }
nav { display: flex; align-items: center; gap: 32px; }
.nav-link { text-decoration: none; font-size: 16px; }      /* 16 px, and the hero's actions 17 px (his call, 2026-09-25; were 14 and 15) */
.nav-link:hover { text-decoration: underline; text-underline-offset: 5px; }
.nav-cta { background: transparent; color: var(--ink); border: 1px solid #15262180; border-radius: 28px; padding: 12px 22px; font-size: 16px; }
.nav-cta:hover { background: #ffffff55; }
.hero-copy { position: relative; text-align: center; padding: clamp(150px, 12vw, 210px) 24px 0; }
h1 { font-family: var(--font-display); font-size: clamp(58px, 6.1vw, 102px); line-height: .99; letter-spacing: -.055em; font-weight: 600; margin: 0; }
.hero-copy p { font-size: clamp(16px, 1.4vw, 21px); line-height: 1.55; margin: 26px auto 0; max-width: 660px; color: #344e46; }
.hero-actions { display: flex; align-items: center; justify-content: center; gap: 27px; margin-top: 28px; }
.primary-cta { display: inline-block; min-height: 50px; border: 1px solid var(--ink); background: var(--ink); color: white; border-radius: 30px; padding: 14px 25px; font-size: 15px; font-weight: 500; }
.primary-cta:hover { background: #2b4339; }
.secondary-cta { text-decoration: none; padding: 14px 0; font-size: 15px; }
.secondary-cta span { display: inline-block; margin-left: 5px; }
.secondary-cta:hover { text-decoration: underline; text-underline-offset: 5px; }
.hero-actions .primary-cta { font-size: 17px; padding: 15px 28px; min-height: 54px; }
.hero-actions .secondary-cta { font-size: 17px; }
.study { padding: 60px 5% 28px; max-width: 1440px; margin-inline: auto; scroll-margin-top: 24px; }
.study-intro { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 30px; }
.study-label { color: var(--quiet); font-size: 13px; margin: 0 0 12px; }
h2 { font-size: clamp(29px, 3vw, 42px); line-height: 1.12; letter-spacing: -.035em; font-weight: 550; margin: 0; }
.study-intro > p { color: var(--quiet); font-size: 15px; line-height: 1.65; max-width: 380px; margin: 0; }
.frame-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.frame-option { display: block; width: 100%; text-align: left; padding: 0 0 10px; border: 0; border-bottom: 2px solid #d5ded7; background: transparent; color: var(--ink); }
.frame-option > img { display: block; width: 100%; height: auto; border-radius: 5px; }
.frame-option > span { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 15px; margin-top: 15px; padding: 5px 0; }
.frame-option[aria-pressed="true"] { border-bottom-color: #b44349; }
.frame-option:hover > span { color: #a5373e; }
.selection-status { font-size: 13px; color: var(--quiet); margin: 20px 0 28px; }
.study-footer { display: flex; justify-content: space-between; align-items: baseline; gap: 25px; padding-top: 22px; border-top: 1px solid #dce3dd; font-size: 12px; color: var(--quiet); }
.study-footer p { margin: 0; line-height: 1.6; }
.study-footer a { text-underline-offset: 4px; }
dialog { width: min(480px, calc(100% - 36px)); border: 0; padding: 46px 36px 36px; background: var(--paper); color: var(--ink); border-radius: 16px; }
dialog::backdrop { background: #17291ecc; }
dialog form { margin: 0; }
.dialog-close { position: absolute; top: 9px; right: 11px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; font-size: 28px; color: var(--ink); }
dialog p { font-size: 16px; line-height: 1.6; color: var(--quiet); }
dialog .prototype-note { font-size: 12px; margin-block: 26px; }
@media (max-width: 700px) {
  .hero { height: 100svh; min-height: 740px; max-height: 980px; }
  .hero-art { object-position: var(--scene-focus) bottom; }
  .site-header { padding: 23px 22px; gap: 16px; }
  .wordmark { font-size: 24px; }
  .nav-link { display: none; }
  .nav-cta { padding: 10px 17px; font-size: 15px; min-height: 44px; }
  .hero-copy { padding: 178px 21px 0; }
  h1 { font-size: clamp(43px, 11.7vw, 68px); }
  .hero-copy p { max-width: 320px; font-size: 16px; margin-top: 23px; }
  .desktop-break { display: none; }
  .hero-actions { gap: 20px; margin-top: 27px; }
  .primary-cta { font-size: 13px; padding: 13px 18px; min-height: 48px; }
  .secondary-cta { font-size: 13px; }
  .hero-actions .primary-cta { font-size: 16px; padding: 14px 22px; min-height: 50px; }
  .hero-actions .secondary-cta { font-size: 16px; }
  .study { padding: 37px 22px 25px; }
  .study-intro { display: block; margin-bottom: 26px; }
  .study-intro > p { margin-top: 17px; }
  .frame-options { gap: 14px; grid-template-columns: 1fr; }
  .frame-option { display: grid; grid-template-columns: 130px 1fr; align-items: center; gap: 18px; padding-block: 10px; }
  .frame-option > span { margin: 0; font-size: 14px; }
  .study-footer { display: block; }
  .study-footer a { display: inline-block; margin-top: 14px; padding-block: 8px; }
}
@media (max-width: 360px) {
  .hero-copy { padding-inline: 15px; }
  .hero-actions { gap: 14px; }
  .primary-cta, .hero-actions .primary-cta { padding-inline: 14px; }
}