/* package fonts (woff2, copied into dist/assets/fonts) */
@font-face { font-family: 'Schibsted Grotesk'; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/schibsted-grotesk-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/schibsted-grotesk-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: 'Schibsted Grotesk'; font-style: italic; font-weight: 500; font-display: swap; src: url("/assets/fonts/schibsted-grotesk-latin-500-italic.woff2") format("woff2"); }
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/schibsted-grotesk-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: 'Schibsted Grotesk'; font-style: italic; font-weight: 600; font-display: swap; src: url("/assets/fonts/schibsted-grotesk-latin-600-italic.woff2") format("woff2"); }
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/schibsted-grotesk-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: 'Schibsted Grotesk'; font-style: italic; font-weight: 700; font-display: swap; src: url("/assets/fonts/schibsted-grotesk-latin-700-italic.woff2") format("woff2"); }
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/schibsted-grotesk-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: 'Schibsted Grotesk'; font-style: italic; font-weight: 800; font-display: swap; src: url("/assets/fonts/schibsted-grotesk-latin-800-italic.woff2") format("woff2"); }
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 800; font-display: swap; src: url("/assets/fonts/schibsted-grotesk-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: 'Schibsted Grotesk'; font-style: italic; font-weight: 900; font-display: swap; src: url("/assets/fonts/schibsted-grotesk-latin-900-italic.woff2") format("woff2"); }
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 900; font-display: swap; src: url("/assets/fonts/schibsted-grotesk-latin-900-normal.woff2") format("woff2"); }
/* generated block: satellite design tokens (light) */
:root {
  --bg-light-base: #fff3a6;
  --fg-light-base-body: #000000;
  --fg-light-base-heading: #000000;
  --fg-light-base-muted: #4f4800;
  --fg-light-base-link: #000000;
  --fg-light-base-inverse: #000000;
  --bg-light-card: #fffbdc;
  --fg-light-card-body: #000000;
  --fg-light-card-heading: #000000;
  --fg-light-card-muted: #4f4800;
  --fg-light-card-link: #000000;
  --fg-light-card-inverse: #000000;
  --bg-light-elevated: #ffe14d;
  --fg-light-elevated-body: #000000;
  --fg-light-elevated-heading: #000000;
  --fg-light-elevated-muted: #4f4800;
  --fg-light-elevated-link: #000000;
  --fg-light-elevated-inverse: #000000;
  --brand-light-accent: #000000;
  --brand-light-accent-hover: #4f4800;
  --brand-light-on-accent: #fff3a6;
  --focus-light-ring: #000000;
  --border-light-default: #000000;
  --border-light-subtle: #c9b94a;
}
.bg-surface-base { background: var(--bg-light-base); --fg-body: var(--fg-light-base-body); --fg-heading: var(--fg-light-base-heading); --fg-muted: var(--fg-light-base-muted); --fg-link: var(--fg-light-base-link); --fg-inverse: var(--fg-light-base-inverse); }
.bg-surface-card { background: var(--bg-light-card); --fg-body: var(--fg-light-card-body); --fg-heading: var(--fg-light-card-heading); --fg-muted: var(--fg-light-card-muted); --fg-link: var(--fg-light-card-link); --fg-inverse: var(--fg-light-card-inverse); }
.bg-surface-elevated { background: var(--bg-light-elevated); --fg-body: var(--fg-light-elevated-body); --fg-heading: var(--fg-light-elevated-heading); --fg-muted: var(--fg-light-elevated-muted); --fg-link: var(--fg-light-elevated-link); --fg-inverse: var(--fg-light-elevated-inverse); }
/* component rules: semantic carriers and renderer-owned behaviours */
.text-role-body { color: var(--fg-body); overflow-wrap: anywhere; }
.text-role-heading { color: var(--fg-heading); overflow-wrap: anywhere; }
.text-role-muted { color: var(--fg-muted); }
.text-role-link { color: var(--fg-link); }
.text-role-inverse { color: var(--fg-inverse); }
.text-role-link { text-decoration: underline; }
.text-role-link:hover { color: var(--brand-light-accent-hover); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--focus-light-ring); outline-offset: 2px; }
img { max-width: 100%; height: auto; }
.site-logo { max-width: 100%; height: auto; }
.site-menu > summary { list-style: none; cursor: pointer; }
.site-menu > summary::-webkit-details-marker { display: none; }
:where(section[data-section][style]) { background-size: cover; background-position: center; padding: clamp(1.5rem, 4vw, 3rem); }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { position: static; padding: 0.25rem 0.5rem; outline: 2px solid var(--focus-light-ring); }

/* package stylesheet (verbatim; model-owned rules win by source order) */
/* Garfield Pain Questions: plain-language FAQ reference, black on pale yellow */

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

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

body {
  margin: 0;
  font-family: 'Schibsted Grotesk', Arial, Helvetica, sans-serif;
  font-size: 1.1875rem;
  line-height: 1.55;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: 'Schibsted Grotesk', Arial, Helvetica, sans-serif;
  line-height: 1.08;
  color: var(--fg-heading);
}

h1 { font-size: clamp(2.25rem, 6vw, 3.75rem); font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.4rem, 3vw, 1.85rem); font-weight: 800; letter-spacing: -0.01em; }
h3 { font-size: 1.25rem; font-weight: 700; }

p { margin: 0 0 1.1rem; }
ul, ol { margin: 0 0 1.1rem; padding-left: 1.4rem; }
li { margin-bottom: 0.4rem; }

a { text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 4px; }

a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, textarea:focus-visible {
  outline: 4px solid currentColor;
  outline-offset: 3px;
}

img { display: block; max-width: 100%; height: auto; }
figure { margin: 0 0 1.75rem; }
.photo-hero, .photo-inline { border: 4px solid var(--border-light-default); }
.photo-hero img, .photo-inline img { width: 100%; }

.skip-link:focus {
  position: absolute;
  left: 1rem;
  top: 0.75rem;
  z-index: 10;
  padding: 0.6rem 1rem;
  background: var(--bg-light-base);
  font-weight: 700;
}

/* ---------- Header ---------- */

.deskhead {
  border-bottom: 6px solid var(--border-light-default);
  padding: 0 1rem;
}

.deskhead-bar {
  max-width: 80rem;
  margin: 0 auto;
  min-height: 5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 44px;
  text-decoration: none;
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.brand .site-logo { width: 2.75rem; height: 2.75rem; flex: none; }
.brand:hover .brand-name { text-decoration: underline; text-decoration-thickness: 3px; }

.deskhead-nav { display: flex; align-items: center; }

.deskhead-links {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 0 1.1rem;
  white-space: nowrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
.deskhead-links li { margin: 0; }
.deskhead-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
  font-size: 1.02rem;
  text-decoration: none;
  border-bottom: 4px solid transparent;
}
.deskhead-links a:hover { color: var(--fg-link); border-bottom-color: var(--fg-link); }

.site-menu { position: relative; display: none; }
.site-menu > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0 1rem;
  border: 3px solid var(--border-light-default);
  font-weight: 800;
  color: var(--fg-body);
  background: var(--bg-light-card);
  white-space: nowrap;
}
.site-menu[open] > summary { background: var(--brand-light-accent); color: var(--brand-light-on-accent); }
.site-menu ul {
  position: absolute;
  right: 0;
  top: calc(100% + 0.4rem);
  z-index: 5;
  min-width: 16rem;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--bg-light-card);
  border: 3px solid var(--border-light-default);
}
.site-menu li { margin: 0; border-top: 2px solid var(--border-light-default); }
.site-menu li:first-child { border-top: 0; }
.site-menu li a {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 0 1rem;
  font-weight: 700;
  text-decoration: none;
}
.site-menu li a:hover { text-decoration: underline; }

@media (max-width: 1299px) {
  .deskhead-links { display: none; }
  .site-menu { display: block; }
}

/* ---------- Page frame ---------- */

.desk {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1rem 5rem;
}

.breadcrumbs { padding: 1.25rem 0 0; font-size: 1rem; font-weight: 600; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.breadcrumbs li { margin: 0; display: inline-flex; align-items: center; }
.breadcrumbs li + li::before { content: "/"; margin: 0 0.55rem; font-weight: 800; }
.breadcrumbs a { display: inline-flex; align-items: center; min-height: 44px; }

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

.prose { max-width: 42rem; }
.prose h2 { margin: 2.75rem 0 0.85rem; }
.prose h3 { margin: 2rem 0 0.6rem; }
.prose a { font-weight: 600; }
.prose ol { list-style: none; padding-left: 0; counter-reset: step; }
.prose ol > li {
  counter-increment: step;
  position: relative;
  padding-left: 3rem;
  margin-bottom: 0.9rem;
}
.prose ol > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.05rem;
  width: 2.1rem;
  height: 2.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-light-accent);
  color: var(--brand-light-on-accent);
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1;
}

/* Question link lists become large stacked rows with thick rules. */
.prose ul:has(> li > a:only-child) {
  list-style: none;
  padding: 0;
  border-top: 4px solid var(--border-light-default);
}
.prose ul:has(> li > a:only-child) > li {
  margin: 0;
  border-bottom: 2px solid var(--border-light-default);
}
.prose ul:has(> li > a:only-child) > li > a {
  display: flex;
  align-items: center;
  min-height: 3.5rem;
  padding: 0.6rem 0;
  font-size: 1.2rem;
  font-weight: 700;
  text-decoration: none;
}
.prose ul:has(> li > a:only-child) > li > a:hover { text-decoration: underline; text-decoration-thickness: 3px; }

/* ---------- Home ---------- */

.front { padding: 3rem 0 2.5rem; border-bottom: 6px solid var(--border-light-default); }

.front-name { font-size: 1.1rem; font-weight: 700; }
.front-name h1 { font-size: inherit; font-weight: inherit; letter-spacing: 0; line-height: 1.3; }

.front-headline {
  margin: 0.75rem 0 1.75rem;
  max-width: 15ch;
  font-size: clamp(2.6rem, 8.4vw, 6rem);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.035em;
}

.front-lines { max-width: 40rem; font-size: 1.3rem; line-height: 1.45; }
.front-lines p:last-child { margin-bottom: 0; }

.asked { padding: 2.5rem 0 1rem; }
.asked-title { margin-bottom: 1.25rem; }

.asked-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: asked;
  border-top: 4px solid var(--border-light-default);
}
.asked-list li {
  counter-increment: asked;
  margin: 0;
  border-bottom: 2px solid var(--border-light-default);
}
.asked-list a {
  display: grid;
  grid-template-columns: 3.75rem 1fr;
  align-items: center;
  gap: 1rem;
  min-height: 4.25rem;
  padding: 0.75rem 0;
  font-size: clamp(1.2rem, 2.6vw, 1.6rem);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}
.asked-list a::before {
  content: counter(asked);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.asked-list a:hover span, .asked-list a:hover { text-decoration: underline; text-decoration-thickness: 3px; }

.home-prose { padding-top: 1rem; }

/* ---------- Page heads (shared) ---------- */

.answer-head, .topic-head, .area-head, .statement-head, .ask-head, .done-head {
  padding: 2rem 0 1.25rem;
}
.answer-head h1, .topic-head h1, .area-head h1, .ask-head h1 { max-width: 22ch; }

/* ---------- Question detail ---------- */

.answer-head { border-bottom: 6px solid var(--border-light-default); margin-bottom: 2rem; }

.answer-prose > p:first-of-type {
  font-size: clamp(1.35rem, 2.6vw, 1.6rem);
  font-weight: 700;
  line-height: 1.35;
  padding: 1.25rem 1.4rem;
  border: 4px solid var(--border-light-default);
  background: var(--bg-light-card);
  margin-bottom: 2rem;
}

.answer-prose h2 {
  margin: 0;
  padding: 1rem 0 0.75rem;
  border-top: 4px solid var(--border-light-default);
}
.answer-prose h2 ~ h2 { margin-top: 2rem; }

/* ---------- Topic cluster ---------- */

.topic-head { border-bottom: 6px solid var(--border-light-default); }

.stack {
  max-width: 42rem;
  margin-top: 3rem;
  border: 4px solid var(--border-light-default);
}
.stack-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4rem;
  padding: 0.75rem 1.25rem;
  font-size: 1.3rem;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}
.stack-summary::-webkit-details-marker { display: none; }
.stack-summary::after {
  content: "+";
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-light-accent);
  color: var(--brand-light-on-accent);
  font-size: 1.6rem;
  line-height: 1;
}
.stack[open] > .stack-summary::after { content: "\2212"; }
.stack[open] > .stack-summary { border-bottom: 4px solid var(--border-light-default); }

.stack-items ul { list-style: none; margin: 0; padding: 0; }
.stack-items li { margin: 0; border-top: 2px solid var(--border-light-default); }
.stack-items li:first-child { border-top: 0; }
.stack-items a {
  display: flex;
  align-items: center;
  min-height: 3.5rem;
  padding: 0.6rem 1.25rem;
  font-size: 1.15rem;
  font-weight: 700;
  text-decoration: none;
}
.stack-items a:hover { text-decoration: underline; text-decoration-thickness: 3px; }

/* ---------- Geo cluster ---------- */

.area-head { border-bottom: 6px solid var(--border-light-default); margin-bottom: 1rem; }

.area-items ul:empty { display: none; }
.area-items ul {
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
  columns: 2 16rem;
  column-gap: 2.5rem;
}
.area-items li { break-inside: avoid; margin: 0; border-bottom: 2px solid var(--border-light-default); }
.area-items a {
  display: flex;
  align-items: center;
  min-height: 3.5rem;
  font-size: 1.5rem;
  font-weight: 800;
  text-decoration: none;
}

@media (min-width: 900px) {
  .area-prose {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    column-gap: 3rem;
  }
  .area-prose > * { grid-column: 2; margin-bottom: 1rem; }
  .area-prose > figure { grid-column: 1 / -1; margin-bottom: 1.75rem; }
  .area-prose > h2 {
    grid-column: 1;
    margin: 2.25rem 0 0;
    padding-top: 1rem;
    border-top: 4px solid var(--border-light-default);
    font-size: clamp(1.6rem, 2.8vw, 2.1rem);
  }
  .area-prose > h2 + * { margin-top: 2.25rem; padding-top: 1.1rem; border-top: 4px solid var(--border-light-default); }
}

/* ---------- About ---------- */

.statement-head h1 {
  display: inline-block;
  padding-bottom: 0.4rem;
  border-bottom: 10px solid var(--border-light-default);
  font-size: clamp(2.75rem, 8vw, 5rem);
  font-weight: 900;
}
.statement-prose { font-size: 1.35rem; line-height: 1.5; max-width: 40rem; }
.statement-prose h2 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); }

/* ---------- Contact ---------- */

.ask-head { border-bottom: 6px solid var(--border-light-default); margin-bottom: 1.75rem; }

.ask-form {
  max-width: 48rem;
  margin-top: 2.5rem;
  padding: 1.75rem;
  border: 5px solid var(--border-light-default);
}

.ask-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 1.5rem;
}
@media (min-width: 720px) {
  .ask-row { grid-template-columns: 1fr 1fr; }
}

.ask-field { display: flex; flex-direction: column; margin-bottom: 1.5rem; }
.ask-field label { font-size: 1.3rem; font-weight: 800; margin-bottom: 0.45rem; }

.ask-field input,
.ask-field textarea {
  width: 100%;
  min-height: 3.25rem;
  padding: 0.7rem 0.85rem;
  font: inherit;
  font-size: 1.15rem;
  color: var(--fg-body);
  background: var(--bg-light-base);
  border: 4px solid var(--border-light-default);
  border-radius: 0;
}
.ask-field textarea { resize: vertical; min-height: 11rem; }

.ask-submit {
  min-height: 3.5rem;
  padding: 0 1.75rem;
  font: inherit;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--brand-light-on-accent);
  background: var(--brand-light-accent);
  border: 4px solid var(--border-light-default);
  cursor: pointer;
}
.ask-submit:hover { background: var(--brand-light-accent-hover); }
.ask-submit:focus-visible { outline: 4px solid var(--border-light-default); outline-offset: 3px; }

/* ---------- Thank you ---------- */

.done { padding-top: 2.5rem; }
.done-check { display: block; width: clamp(6rem, 16vw, 9rem); height: auto; color: var(--fg-heading); }
.done-head { padding-top: 1.25rem; }
.done-prose > p:first-of-type { font-size: clamp(1.35rem, 2.6vw, 1.6rem); font-weight: 700; line-height: 1.35; }

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

.deskfoot { padding: 2.75rem 1rem 3rem; border-top: 6px solid var(--border-light-default); }
.deskfoot-inner { max-width: 72rem; margin: 0 auto; }
.deskfoot-line { max-width: 38rem; font-size: 1.1rem; font-weight: 600; }
.deskfoot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.deskfoot-links li { margin: 0; }
.deskfoot-links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Section photo cards: the renderer pads the section, the card needs its own inset */
section[data-section][style] > .bg-surface-card { padding: 1.1rem 1.4rem; }

/* Pinned header per 03-ia/chrome-plan.json; it unpins while the phone menu is open */
header.deskhead { position: sticky; top: 0; z-index: 40; }
header.deskhead:has(.site-menu[open]) { position: static; }
.deskhead .brand-name { overflow-wrap: normal; word-break: normal; hyphens: none; }
html { scroll-padding-top: 102px; }