/* ==========================================================================
   Psykolog Jeanette Ostenfeldt
   Warm Editorial. Kinfolk as the art-direction lock (reference-board.md).

   Type: Newsreader Light carries every heading and nothing else.
         Hasköy carries body, interface and metadata.
   Layout: full bleed. The furniture runs edge to edge; text sits on a spine.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/newsreader-latin.woff2') format('woff2-variations');
  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: 'Newsreader';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/newsreader-latin-italic.woff2') format('woff2-variations');
  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: 'Haskoy';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/haskoy-variable.woff2') format('woff2-variations');
  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;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Colour. Ratios measured against --paper unless noted.
     --accent is a graphic colour only: 2.38:1. It never carries text. */
  --paper:       #F9F6F0;
  --paper-warm:  #F2EDE5;
  --sand:        #CCD8DE;
  --ink:         #2C2A27;  /* 13.27:1 */
  --ink-soft:    #6B645D;  /*  5.40:1 */
  /* Accent: isblå, valgt af Jeanette. Den lyse tone er grafisk og bærer aldrig
     et ord. Den dybe klarer al tekst og alle knapper: 7.43:1 på papir,
     5.51:1 på sand. */
  --accent:        #9DC0D3;
  --accent-deep:   #2F5568;
  --accent-darker: #244352;

  /* Filled buttons. Most accents are dark enough to carry paper-coloured text.
     A light accent like gold cannot, so it flips to dark text instead. */
  --btn-bg:        var(--accent-deep);
  --btn-bg-hover:  var(--accent-darker);
  --btn-fg:        var(--paper);
  --rule:        #E3DCD2;
  --rule-strong: #CFC6B8;
  --white:       #FFFFFF;

  /* Families. Newsreader is display only. Hasköy does everything else. */
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans:  'Haskoy', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
           'Helvetica Neue', Arial, sans-serif;

  /* Display scale — Newsreader Light throughout */
  --fs-display: clamp(2.75rem, 1.1rem + 5.2vw, 5rem);
  --fs-h1:      clamp(2.25rem, 1.3rem + 3vw, 3.5rem);
  --fs-h2:      clamp(1.625rem, 1.15rem + 1.35vw, 2.25rem);
  --fs-h3:      clamp(1.3125rem, 1.05rem + 0.75vw, 1.625rem);
  --fs-role:    clamp(1.1875rem, 1rem + 0.85vw, 1.75rem);
  --fs-quote:   clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem);

  /* Reading scale — Hasköy */
  --fs-lead:    clamp(1.0625rem, 1rem + 0.42vw, 1.3125rem);
  --fs-body:    clamp(1rem, 0.96rem + 0.22vw, 1.0625rem);
  --fs-small:   clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
  --fs-meta:    0.8125rem;
  --fs-tag:     0.6875rem;
  --fs-nav:     0.75rem;
  --fs-price:   clamp(1.1875rem, 1rem + 0.6vw, 1.5rem);

  --lh-display: 1.0;
  --lh-h2:      1.1;
  --lh-body:    1.65;

  --measure:      68ch;
  --measure-lead: 46ch;

  /* Space, 8px baseline */
  --s1: 0.5rem;  --s2: 1rem;   --s3: 1.5rem;  --s4: 2rem;
  --s5: 2.5rem;  --s6: 3rem;   --s7: 4rem;    --s8: 5rem;
  --s9: 6rem;    --s10: 8rem;

  --band-y:       clamp(4rem, 8vw, 8.5rem);
  --band-y-loose: clamp(5.5rem, 11vw, 12rem);
  --band-y-tight: clamp(2.5rem, 5vw, 5rem);

  /* Full-bleed page. No max-width: the furniture runs edge to edge. */
  --gutter: clamp(1.25rem, 5vw, 5.5rem);

  /* The spine: the narrow left column every section aligns its label to. */
  --spine: clamp(11rem, 24vw, 22rem);
  --spine-gap: clamp(1.5rem, 3.5vw, 4rem);

  --radius: 2px;

  /* Motion */
  --ease:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.33, 0, 0.15, 1);
  --dur-fast:  150ms;
  --dur-mid:   280ms;
  --dur-slow:  650ms;

  /* Depth */
  --z-bar: 60;
  --z-header: 80;
  --z-overlay: 100;
  --z-skip: 120;
}

/* --------------------------------------------------------------------------
   3. Reset
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  min-height: 100svh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  font-optical-sizing: auto;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
ul, ol { list-style: none; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { border: 0; background: none; cursor: pointer; }

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

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

/* Grid and flex children must be free to shrink below their content width. */
.editorial > *, .duo > *, .contact > *, .footer__grid > *,
.opening__grid > *, .facts__row > *, .steps li > *, .index__row > * { min-width: 0; }

/* --------------------------------------------------------------------------
   4. Typography

   Every heading is Newsreader Light. Newsreader appears nowhere else except
   the italic standfirst and pull quotes, which are display voice, not reading
   text. Hasköy carries all reading and all interface.
   -------------------------------------------------------------------------- */

.display, .h1, .h2, .h3 {
  font-family: var(--serif);
  font-weight: 300;
  text-wrap: balance;
  hanging-punctuation: first last;
}

.display {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: -0.028em;
}

.h1 {
  font-size: var(--fs-h1);
  line-height: 1.04;
  letter-spacing: -0.024em;
}

.h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: -0.018em;
}

.h3 {
  font-size: var(--fs-h3);
  line-height: 1.2;
  letter-spacing: -0.012em;
}

.role {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: var(--fs-role);
  line-height: 1.24;
  letter-spacing: -0.01em;
  color: var(--accent-deep);
  text-wrap: balance;
}

.quote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: var(--fs-quote);
  line-height: 1.24;
  letter-spacing: -0.018em;
  max-width: 20ch;
  text-wrap: balance;
}

/* Reading text — Hasköy */

.lead {
  font-size: var(--fs-lead);
  font-weight: 400;
  line-height: 1.5;
  max-width: var(--measure-lead);
  text-wrap: pretty;
}

.prose {
  max-width: var(--measure);
  text-wrap: pretty;
}

.prose > * + * { margin-top: 1.15em; }
.prose > * + .h3 { margin-top: 2em; }
.prose .h3 + * { margin-top: 0.7em; }
.prose strong { font-weight: 600; }
.prose em { font-style: italic; }

.small { font-size: var(--fs-small); line-height: 1.55; }

.meta {
  font-size: var(--fs-meta);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 68ch;
}

/* The one repeating uppercase role: taxonomy labels inside an index or a
   definition list. Never a decorative kicker above a section heading. */
.tag {
  font-size: var(--fs-tag);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--ink-soft);
}

.num { font-feature-settings: 'lnum' 1, 'tnum' 1; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Prose links */

.prose a, .facts__val a, .meta a {
  color: var(--accent-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, var(--accent-deep) 40%, transparent);
  transition: color var(--dur-fast) var(--ease-soft),
              text-decoration-color var(--dur-fast) var(--ease-soft);
}

.prose a:hover, .facts__val a:hover, .meta a:hover {
  color: var(--accent-darker);
  text-decoration-color: currentColor;
}

/* Lists */

.list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.7em; max-width: var(--measure); }

.list li {
  position: relative;
  padding-left: 1.4em;
  text-wrap: pretty;
}

.list li::before {
  content: '';
  position: absolute;
  left: 0.1em; top: 0.82em;
  width: 0.5em; height: 1px;
  background: var(--accent);
}

/* --------------------------------------------------------------------------
   5. Layout — full bleed
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  padding-inline: var(--gutter);
}

.band { padding-block: var(--band-y); }
.band--tight { padding-block: var(--band-y-tight); }
.band--loose { padding-block: var(--band-y-loose); }
.band--warm { background: var(--paper-warm); }
.band--sand { background: var(--sand); }
.band--line { border-top: 1px solid var(--rule); }

/* The spine. A section's heading sits in the narrow left column, its content
   in the wide one. This is what makes an edge-to-edge page hold together. */
.editorial {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s3);
}

@media (min-width: 900px) {
  .editorial {
    grid-template-columns: var(--spine) minmax(0, 1fr);
    gap: var(--spine-gap);
    align-items: start;
  }
}

.stack-2 > * + * { margin-top: var(--s2); }
.stack-3 > * + * { margin-top: var(--s3); }
.stack-4 > * + * { margin-top: var(--s4); }
.stack-6 > * + * { margin-top: var(--s6); }

.mt-1 { margin-top: var(--s1); }
.mt-2 { margin-top: var(--s2); }
.mt-3 { margin-top: var(--s3); }
.mt-4 { margin-top: var(--s4); }
.mt-5 { margin-top: var(--s5); }
.mt-6 { margin-top: var(--s6); }
.mb-4 { margin-bottom: var(--s4); }
.my-5 { margin-block: var(--s5); }

.rule-mark { width: 44px; height: 1px; background: var(--accent); border: 0; }

/* Text + photograph. The photograph is a full partner, not a decoration. */
.duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

@media (min-width: 860px) {
  .duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
  .duo--flip { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   6. Figures
   -------------------------------------------------------------------------- */

.figure { margin: 0; }

.figure img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--paper-warm);
}

.figure figcaption {
  font-size: var(--fs-meta);
  line-height: 1.5;
  color: var(--ink-soft);
  margin-top: 0.9rem;
  max-width: 36ch;
}

/* --------------------------------------------------------------------------
   7. Skip link
   -------------------------------------------------------------------------- */

.skip {
  position: fixed;
  top: 0.75rem; left: 0.75rem;
  z-index: var(--z-skip);
  transform: translateY(-160%);
  background: var(--accent-deep);
  color: var(--paper);
  font-size: var(--fs-small);
  font-weight: 500;
  padding: 0.7rem 1.1rem;
  border-radius: var(--radius);
  transition: transform var(--dur-mid) var(--ease);
}

.skip:focus-visible { transform: translateY(0); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   8. Masthead
   -------------------------------------------------------------------------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  transition: background-color var(--dur-mid) var(--ease-soft);
}

.masthead.is-stuck {
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
}

.masthead__inner {
  padding-inline: var(--gutter);
  min-height: 4.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
}

/* Mærket plus navnet. Navnet står i brødskriften, spærret som i logoet. */

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: clamp(0.5rem, 1vw, 0.7rem);
  min-height: 46px;
  text-decoration: none;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(0.75rem, 0.62rem + 0.42vw, 0.9375rem);
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.wordmark__mark { display: flex; flex: none; }

.wordmark__mark img {
  display: block;
  height: clamp(1.75rem, 0.95rem + 1.5vw, 2.375rem);
  width: auto;
}

.wordmark__name { padding-top: 0.1em; }

.nav { display: none; }

@media (min-width: 1120px) {
  .nav { display: flex; align-items: center; gap: clamp(0.85rem, 1.7vw, 2.25rem); }
}

.nav a {
  position: relative;
  display: inline-block;
  font-size: var(--fs-nav);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  padding-block: 1.6rem;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-soft);
}

.nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 1.25rem;
  height: 1px;
  background: var(--accent-deep);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-mid) var(--ease);
}

.nav a:hover { color: var(--accent-deep); }
.nav a:hover::after { transform: scaleX(1); }
.nav a[aria-current='page'] { color: var(--accent-deep); }
.nav a[aria-current='page']::after { transform: scaleX(1); }

/* Dropdown. Panelet åbner på hover og på tastaturfokus, så det virker uden
   JavaScript. Knappen findes for touch og for skærmlæsere. */

.nav__group { position: relative; display: flex; align-items: center; gap: 0.15rem; }

.nav__group > .nav__top.is-section { color: var(--accent-deep); }
.nav__group > .nav__top.is-section::after { transform: scaleX(1); }

.nav__toggle {
  display: grid;
  place-items: center;
  width: 1.75rem;
  align-self: stretch;
  color: var(--ink);
  transition: color var(--dur-fast) var(--ease-soft);
}

.nav__chev {
  width: 10px; height: 6px;
  transition: transform var(--dur-mid) var(--ease);
}

.nav__group:hover .nav__toggle,
.nav__group:focus-within .nav__toggle { color: var(--accent-deep); }

.nav__group:hover .nav__chev,
.nav__group:focus-within .nav__chev,
.nav__group.is-open .nav__chev { transform: rotate(180deg); }

.nav__panel {
  position: absolute;
  top: 100%;
  left: -1.1rem;
  min-width: 15rem;
  display: grid;
  padding-block: 0.35rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  box-shadow: 0 18px 38px -26px rgba(44, 42, 39, 0.5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-5px);
  transition: opacity var(--dur-mid) var(--ease-soft),
              transform var(--dur-mid) var(--ease-soft),
              visibility 0s linear var(--dur-mid);
}

.nav__group:hover .nav__panel,
.nav__group:focus-within .nav__panel,
.nav__group.is-open .nav__panel {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity var(--dur-mid) var(--ease-soft),
              transform var(--dur-mid) var(--ease-soft),
              visibility 0s;
}

.nav__panel a {
  padding: 0.75rem 1.15rem;
  letter-spacing: 0.09em;
  white-space: nowrap;
}

.nav__panel a::after { display: none; }
.nav__panel a:hover { background: var(--paper-warm); }
.nav__panel a[aria-current='page'] { background: var(--paper-warm); }

/* Burger */

.burger {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  margin-right: -10px;
  border-radius: var(--radius);
}

@media (min-width: 1120px) { .burger { display: none; } }

.burger span {
  display: block;
  width: 24px; height: 1px;
  background: var(--ink);
  transition: transform var(--dur-mid) var(--ease), opacity var(--dur-fast) linear;
}

.burger span + span { margin-top: 6px; }
.burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Overlay menu */

.menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: var(--paper);
  display: grid;
  grid-template-rows: auto 1fr auto;
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--dur-mid) var(--ease-soft), visibility 0s linear var(--dur-mid);
}

.menu.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity var(--dur-mid) var(--ease-soft), visibility 0s;
}

.menu__head {
  min-height: 4.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding-inline: var(--gutter);
}

.menu__close {
  width: 44px; height: 44px;
  margin-right: -10px;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--ink);
  border-radius: var(--radius);
}

.menu__links {
  align-self: center;
  display: grid;
  padding-inline: var(--gutter);
  border-top: 1px solid var(--rule);
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.menu__links a {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.625rem, 1.1rem + 2.4vw, 2.25rem);
  letter-spacing: -0.022em;
  text-decoration: none;
  padding-block: clamp(0.7rem, 2.2vw, 1.05rem);
  border-bottom: 1px solid var(--rule);
}

.menu__links a[aria-current='page'] { color: var(--accent-deep); }

/* Undersider i overlay-menuen. Ingen dropdown på mobil: de står altid fremme. */

.menu__group {
  padding-block: clamp(0.7rem, 2.2vw, 1.05rem);
  border-bottom: 1px solid var(--rule);
}

.menu__links .menu__group > a {
  display: block;
  padding-block: 0;
  border-bottom: 0;
}

.menu__sub {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.35rem;
  margin-top: 0.15rem;
}

.menu__links .menu__sub a {
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--fs-small);
  letter-spacing: 0.02em;
  line-height: 1.4;
  color: var(--ink-soft);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding-block: 0;
  border-bottom: 0;
}

.menu__links .menu__sub a[aria-current='page'] { color: var(--accent-deep); }

.menu__foot {
  padding: var(--gutter);
  padding-bottom: max(var(--gutter), env(safe-area-inset-bottom));
  display: grid;
  gap: 0;
  font-size: var(--fs-small);
  color: var(--ink-soft);
}

.menu__foot a {
  color: var(--accent-deep);
  text-decoration: none;
  min-height: 44px;
  display: flex;
  align-items: center;
}

/* --------------------------------------------------------------------------
   9. Buttons and links
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.75rem 1.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.2;
  text-decoration: none;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: background-color var(--dur-fast) var(--ease-soft),
              border-color var(--dur-fast) var(--ease-soft),
              color var(--dur-fast) var(--ease-soft);
}

.btn--fill { background: var(--btn-bg); color: var(--btn-fg); }
.btn--fill:hover { background: var(--btn-bg-hover); }

.btn--line { border-color: var(--accent-deep); color: var(--accent-deep); }
.btn--line:hover { background: var(--accent-deep); color: var(--paper); }

.btn:focus-visible { outline-offset: 3px; }

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

.more {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  min-height: 44px;
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--accent-deep);
  text-decoration: none;
}

.more::after {
  content: '→';
  transition: transform var(--dur-mid) var(--ease);
}

.more:hover { color: var(--accent-darker); }
.more:hover::after { transform: translateX(5px); }

.more > span {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: color-mix(in srgb, var(--accent-deep) 35%, transparent);
  transition: text-decoration-color var(--dur-fast) var(--ease-soft);
}

.more:hover > span { text-decoration-color: currentColor; }

.linkrow {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem clamp(1.5rem, 4vw, 3rem);
}

/* --------------------------------------------------------------------------
   10. Opening spread
   -------------------------------------------------------------------------- */

.opening { padding-block: clamp(2.5rem, 6vw, 5.5rem) 0; }

.opening__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 4rem);
  padding-inline: var(--gutter);
}

@media (min-width: 900px) {
  .opening__grid {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 42vw);
    align-items: center;
    gap: clamp(2.5rem, 5vw, 5.5rem);
  }
}

.opening__text { max-width: 40rem; }

.opening__figure img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--paper-warm);
}

@media (min-width: 900px) {
  .opening__figure img {
    aspect-ratio: 4 / 4.6;
  }
}

.opening__name { margin-top: var(--s3); }
.opening__role { margin-top: 0.85rem; }
.opening__lead { margin-top: var(--s3); color: var(--ink); }
.opening__actions { margin-top: var(--s4); }
.opening__note { margin-top: var(--s2); }

/* --------------------------------------------------------------------------
   11. Page opening
   -------------------------------------------------------------------------- */

.pagehead {
  padding-block: clamp(3rem, 7vw, 7rem) clamp(2.5rem, 5vw, 4.5rem);
  border-bottom: 1px solid var(--rule);
}

/* Har siden en spring-til-menu, sidder den i sidehovedet. Linkene er 46px
   høje og bærer selv deres luft, så bunden kan skæres ind. */
.pagehead--nav { padding-bottom: clamp(0.75rem, 1.5vw, 1.25rem); }
.pagehead--nav .onpage { margin-top: clamp(1.5rem, 3vw, 2.5rem); }

/* Første afsnit efter et sidehoved behøver ikke fuld sektionsluft. */
.pagehead + .band { padding-top: clamp(2.75rem, 5.5vw, 5.5rem); }

.pagehead__title { margin-top: var(--s3); max-width: 16ch; }
.pagehead__lead { margin-top: var(--s3); color: var(--ink); }

/* --------------------------------------------------------------------------
   12. Index — the category-tagged content index (Kinfolk transfer)
   -------------------------------------------------------------------------- */

.index { border-top: 1px solid var(--rule-strong); }

.index__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--s3);
  row-gap: 0.4rem;
  align-items: baseline;
  padding-block: clamp(1.4rem, 2.8vw, 2.25rem);
  border-bottom: 1px solid var(--rule);
}

.index__name {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.375rem, 1.05rem + 1.1vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.018em;
}

.index__price {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--fs-price);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--accent-deep);
  white-space: nowrap;
  font-feature-settings: 'lnum' 1, 'tnum' 1;
  justify-self: end;
}

.index__desc {
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 64ch;
}

.index__meta {
  font-size: var(--fs-meta);
  color: var(--ink-soft);
  white-space: nowrap;
  justify-self: end;
  font-feature-settings: 'lnum' 1;
}

@media (max-width: 899px) {
  .index__tag   { grid-column: 1 / -1; }
  .index__name  { grid-column: 1; }
  .index__price { grid-column: 2; grid-row: 2; }
  .index__desc  { grid-column: 1 / -1; }
  .index__meta  { grid-column: 1 / -1; justify-self: start; }
}

@media (min-width: 900px) {
  .index__row {
    grid-template-columns: var(--spine) minmax(0, 1fr) auto;
    column-gap: var(--spine-gap);
    row-gap: 0.5rem;
  }
  .index__tag   { grid-column: 1; grid-row: 1; }
  .index__name  { grid-column: 2; grid-row: 1; }
  .index__price { grid-column: 3; grid-row: 1; }
  .index__desc  { grid-column: 2; grid-row: 2; }
  .index__meta  { grid-column: 3; grid-row: 2; }
}

@media (max-width: 520px) {
  .index__row { grid-template-columns: minmax(0, 1fr); }
  .index__price { grid-column: 1; grid-row: auto; justify-self: start; }
  .index__name { grid-column: 1; }
}

/* --------------------------------------------------------------------------
   12b. Topic list — the subjects she works with
   -------------------------------------------------------------------------- */

.topics {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 clamp(2rem, 5vw, 5rem);
  border-top: 1px solid var(--rule-strong);
}

@media (min-width: 760px)  { .topics { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1400px) { .topics { grid-template-columns: 1fr 1fr 1fr; } }

.topics li {
  display: grid;
  align-content: start;
  gap: 0.45rem;
  padding-block: clamp(1.15rem, 2.2vw, 1.65rem);
  border-bottom: 1px solid var(--rule);
}

.topics__name {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 1.375rem;
  line-height: 1.2;
  letter-spacing: -0.014em;
}

.topics__note {
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--ink-soft);
  text-wrap: pretty;
}

.topics__note a { color: var(--accent-deep); }

/* --------------------------------------------------------------------------
   12c. On-page index — a long page needs a way in
   -------------------------------------------------------------------------- */

.onpage {
  display: flex;
  flex-wrap: wrap;
  gap: 0 clamp(1.25rem, 3vw, 2.5rem);
  border-top: 1px solid var(--rule);
  margin-top: var(--s4);
}

.onpage a {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  font-size: var(--fs-small);
  font-weight: 450;
  color: var(--accent-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: color-mix(in srgb, var(--accent-deep) 30%, transparent);
  transition: text-decoration-color var(--dur-fast) var(--ease-soft),
              color var(--dur-fast) var(--ease-soft);
}

.onpage a:hover { color: var(--accent-darker); text-decoration-color: currentColor; }

/* --------------------------------------------------------------------------
   13. Fact rows — same spine as everything else
   -------------------------------------------------------------------------- */

.facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: 1px solid var(--rule-strong);
}

.facts__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem var(--spine-gap);
  padding-block: clamp(1.25rem, 2.6vw, 2rem);
  border-bottom: 1px solid var(--rule);
}

@media (min-width: 900px) {
  .facts__row { grid-template-columns: var(--spine) minmax(0, 1fr); align-items: baseline; }
}

.facts__key {
  font-size: var(--fs-tag);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.facts__val {
  font-size: var(--fs-body);
  line-height: 1.6;
  max-width: 62ch;
  text-wrap: pretty;
}

/* Credentials */

.creds {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 clamp(2rem, 5vw, 6rem);
  border-top: 1px solid var(--rule-strong);
}

@media (min-width: 760px) { .creds { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1400px) { .creds { grid-template-columns: 1fr 1fr 1fr; } }

.creds li {
  display: grid;
  gap: 0.25rem;
  padding-block: 1.15rem;
  border-bottom: 1px solid var(--rule);
}

.creds__name {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 1.3125rem;
  line-height: 1.25;
  letter-spacing: -0.014em;
}

.creds__note { font-size: var(--fs-meta); color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   14. Steps
   -------------------------------------------------------------------------- */

.steps { counter-reset: step; display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--rule-strong); }

.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: 0 var(--s2);
  align-items: baseline;
  padding-block: clamp(1.15rem, 2.4vw, 1.75rem);
  border-bottom: 1px solid var(--rule);
}

/* The step list lives inside an editorial body column, so its number rail is
   its own narrow one. Reusing the page spine here would open a gap wide
   enough to read as a mistake. */
@media (min-width: 900px) {
  .steps li { grid-template-columns: 4.5rem minmax(0, 1fr); gap: 0 var(--s2); }
}

.steps li::before {
  content: counter(step, decimal-leading-zero);
  font-size: var(--fs-tag);
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--accent-deep);
  font-feature-settings: 'lnum' 1;
}

.steps__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 1.375rem;
  line-height: 1.25;
  letter-spacing: -0.014em;
}

.steps__body {
  grid-column: 2;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--ink-soft);
  margin-top: 0.35rem;
  max-width: 54ch;
}

/* --------------------------------------------------------------------------
   15. Booking routes
   -------------------------------------------------------------------------- */

/* Stregerne mellem kortene er gitterets baggrund, der lyser gennem en
   millimeters mellemrum. Derfor må søjletallet altid gå op i antallet af
   kort: en tom celle ville stå som en beige flade. */
.routes {
  display: grid;
  gap: 1px;
  grid-template-columns: minmax(0, 1fr);
  background: var(--rule-strong);
  border-block: 1px solid var(--rule-strong);
}

@media (min-width: 56rem) {
  .routes--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 34rem) {
  .routes--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 60rem) {
  .routes--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.route {
  display: grid;
  align-content: start;
  gap: 0.7rem;
  padding: clamp(1.5rem, 3vw, 2.75rem) clamp(1.25rem, 2.5vw, 2.5rem);
  background: var(--paper);
  transition: background-color var(--dur-mid) var(--ease-soft);
}

.band--warm .route { background: var(--paper-warm); }
.band--warm .route:hover { background: var(--paper); }
.route:hover { background: var(--paper-warm); }

.route__name {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: -0.016em;
}

.route__meta {
  margin-top: -0.35rem;
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-feature-settings: 'lnum' 1, 'tnum' 1;
}

.route__desc { font-size: var(--fs-small); line-height: 1.55; color: var(--ink-soft); }

.route__link {
  margin-top: 0.35rem;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: 0.4em;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--accent-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: color-mix(in srgb, var(--accent-deep) 35%, transparent);
}

.route__link:hover { text-decoration-color: currentColor; }

/* --------------------------------------------------------------------------
   16. Contact
   -------------------------------------------------------------------------- */

.contact { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); }

@media (min-width: 760px) { .contact { grid-template-columns: repeat(3, 1fr); gap: var(--spine-gap); } }

.contact__item { display: grid; gap: 0.35rem; align-content: start; }

.contact__key {
  font-size: var(--fs-tag);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.contact__val {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.25rem, 1rem + 0.9vw, 1.75rem);
  line-height: 1.25;
  letter-spacing: -0.016em;
  color: var(--accent-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, var(--accent-deep) 28%, transparent);
  word-break: break-word;
  padding-block: 0.75rem;
  transition: text-decoration-color var(--dur-fast) var(--ease-soft),
              color var(--dur-fast) var(--ease-soft);
}

a.contact__val:hover { color: var(--accent-darker); text-decoration-color: currentColor; }
.contact__val--plain { color: var(--ink); text-decoration: none; }

/* --------------------------------------------------------------------------
   17. Price panel
   -------------------------------------------------------------------------- */

.pricebox {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.6rem;
  padding-block: clamp(1.75rem, 3.5vw, 2.5rem);
  border-block: 1px solid var(--rule-strong);
  max-width: 34rem;
}

.pricebox__amount {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.5rem, 1.6rem + 3vw, 4rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--accent-deep);
  font-feature-settings: 'lnum' 1, 'tnum' 1;
}

.pricebox__note { font-size: var(--fs-small); color: var(--ink-soft); max-width: 42ch; }

/* --------------------------------------------------------------------------
   18. Closing
   -------------------------------------------------------------------------- */

.closing { background: var(--sand); padding-block: var(--band-y-loose); }
.closing__inner { padding-inline: var(--gutter); }

.closing__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.25rem, 1.3rem + 3.4vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.028em;
  max-width: 16ch;
  text-wrap: balance;
}

.closing__body { margin-top: var(--s3); max-width: 42ch; color: var(--ink); text-wrap: pretty; }
.closing__actions { margin-top: var(--s5); }

/* --------------------------------------------------------------------------
   19. Footer
   -------------------------------------------------------------------------- */

.footer {
  background: var(--paper-warm);
  border-top: 1px solid var(--rule);
  padding-block: clamp(3.5rem, 7vw, 6rem) clamp(2rem, 4vw, 3rem);
}

.footer__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6); }

@media (min-width: 760px) {
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--spine-gap); }
}

.footer__name {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 1.625rem;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.footer__detail { margin-top: 0.8rem; font-size: var(--fs-small); line-height: 1.65; color: var(--ink-soft); }

.footer__heading {
  font-size: var(--fs-tag);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.5rem;
}

.footer__links { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; font-size: var(--fs-small); }

.footer__links a {
  text-decoration: none;
  color: var(--ink);
  justify-self: start;
  min-height: 44px;
  display: flex;
  align-items: center;
  transition: color var(--dur-fast) var(--ease-soft);
}

.footer__links a:hover { color: var(--accent-deep); }

.footer__legal {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: var(--s3);
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 2rem;
  font-size: var(--fs-meta);
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   20. Mobile contact bar
   -------------------------------------------------------------------------- */

.callbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-bar);
  display: none;
  gap: 0.5rem;
  padding: 0.6rem var(--gutter);
  padding-bottom: calc(0.6rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--paper) 93%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--rule);
  transform: translateY(110%);
  transition: transform var(--dur-mid) var(--ease);
}

@media (max-width: 767px) {
  .callbar { display: grid; grid-template-columns: 1fr 1fr; }
  .callbar.is-shown { transform: translateY(0); }
}

.callbar .btn { min-height: 46px; padding-inline: 0.5rem; font-size: 0.6875rem; letter-spacing: 0.06em; }

/* --------------------------------------------------------------------------
   21. EMDR diagram
   -------------------------------------------------------------------------- */

.diagram { max-width: 46rem; padding-block: clamp(1.5rem, 3vw, 2.5rem); border-block: 1px solid var(--rule); }
.diagram__line { stroke: var(--accent); }
.diagram__dot  { fill: var(--accent); }
.diagram__end  { fill: var(--accent-deep); }
.diagram svg { width: 100%; height: auto; }
.diagram figcaption { font-size: var(--fs-meta); color: var(--ink-soft); margin-top: 1.1rem; max-width: 48ch; }

/* --------------------------------------------------------------------------
   22. Motion
   -------------------------------------------------------------------------- */

/* Reveals are pure CSS, driven by scroll position rather than by an observer
   or a timer. Nothing can get stuck: where `animation-timeline` is
   unsupported, or where motion is reduced, the content is simply visible.
   Anything already on screen at load is past the range and fully revealed. */

@keyframes reveal {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    [data-reveal] {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry 4% entry 42%;
    }

    /* Rows cascade on their own: each one enters at its own scroll offset. */
    [data-stagger] > * {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry 4% entry 34%;
    }
  }
}

/* The opening runs once on load. Time-based, self-completing, never gated. */
.js .opening [data-rise] { opacity: 0; animation: rise 850ms var(--ease) var(--d, 0ms) forwards; }

@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }

  [data-reveal],
  [data-stagger] > *,
  .js .opening [data-rise] {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

/* --------------------------------------------------------------------------
   23. Print
   -------------------------------------------------------------------------- */

@media print {
  .masthead, .menu, .callbar, .skip, .closing__actions, .actions { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .band, .closing { padding-block: 1rem; background: #fff !important; }
  a::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #444; }
  a[href^='#']::after, a[href^='mailto']::after { content: ''; }
  .figure, .diagram { break-inside: avoid; }
}