/* Guide page (task 543): the designer's stylesheet (Claude Design), tokens scoped to .g instead of :root;
   fonts are the site's own (@font-face in membrana-landing.css), nothing from Google. */
.g, .g [data-theme="dark"] {
  --ground: #26282c; --surface: #2e3035; --surface-raised: #373a40; --line: #3d4046; --line-strong: #7d8189;
  --ink: #f2f0e9; --ink-muted: #a9aca6; --accent: #ff7a1a; --on-accent: #26282c; --accent-ink: #ff7a1a;
  --accent-edge: #ff7a1a; --clean-fill: #ff7a1a; --clean-mark: #26282c; --focus-ring: #ff7a1a;
}
.g [data-theme="light"] {
  --ground: #f2f0e9; --surface: #fbfaf6; --surface-raised: #ffffff; --line: #d9d6cb; --line-strong: #85827a;
  --ink: #26282c; --ink-muted: #55574e; --accent: #ff7a1a; --on-accent: #26282c; --accent-ink: #a34400;
  --accent-edge: #26282c; --clean-fill: #26282c; --clean-mark: #ff7a1a; --focus-ring: #26282c;
}
.g {
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px;
  --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px; --space-32: 128px;
  --radius-sm: 6px; --radius-md: 14px; --radius-lg: 28px; --radius-pill: 999px;
  --font-sans: "Familjen Grotesk", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;
}

.g { background: var(--ground); color: var(--ink); font-family: var(--font-sans); font-size: 18px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
.g *, .g *::before, .g *::after { box-sizing: border-box; }
.g [data-theme] { color: var(--ink); }
.g p, .g h1, .g h2, .g h3, .g ol, .g ul, .g dl, .g dd, .g figure { margin: 0; padding: 0; }
.g ol, .g ul { list-style: none; }
.g a { color: var(--ink); text-underline-offset: 3px; }
.g a:focus-visible, .g button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.g__wrap { max-width: 1148px; margin: 0 auto; padding: 0 var(--space-6); }

.g-label { font-family: var(--font-mono); font-size: 12px; line-height: 1.3; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.g-h1 { font-size: 40px; line-height: 1.05; font-weight: 700; letter-spacing: -0.035em; hyphens: auto; overflow-wrap: anywhere; }
.g-h2 { font-size: 28px; line-height: 1.15; font-weight: 600; letter-spacing: -0.015em; hyphens: auto; overflow-wrap: anywhere; }
.g-h3 { font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; }
.g-lead { font-size: 20px; line-height: 1.4; letter-spacing: -0.01em; }
.g-small { font-size: 14px; line-height: 1.45; color: var(--ink-muted); }
.g-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.g-muted { color: var(--ink-muted); }

.g-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3); min-height: 56px; padding: var(--space-3) var(--space-8); border-radius: var(--radius-pill); background: var(--accent); color: var(--on-accent); border: 2px solid var(--accent-edge); box-shadow: 0 4px 0 var(--accent-edge); font-family: var(--font-sans); font-size: 18px; font-weight: 600; text-decoration: none; }
.g .g-btn { color: var(--on-accent); }
.g-btn svg { width: 20px; height: 20px; flex: none; }

.g-hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-16); align-items: start; padding: var(--space-8) 0 var(--space-12); }
.g-hero__text { display: flex; flex-direction: column; gap: var(--space-4); }
.g-sec { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-6) var(--space-16); padding: var(--space-12) 0; border-top: 1px solid var(--line); }
.g-sec__body { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.g-sec__body > p { max-width: 680px; }
.g-sec--wide { grid-template-columns: minmax(0, 1fr); }
.g-sec--wide > .g-h2 { max-width: 680px; }

.g-take { background: var(--surface); border-radius: var(--radius-lg); padding: var(--space-6) var(--space-8); display: flex; flex-direction: column; gap: var(--space-3); }
.g-take ul { display: flex; flex-direction: column; }
.g-take li { font-size: 16px; line-height: 1.4; padding: var(--space-3) 0; border-top: 1px solid var(--line); }
.g-take li:first-child { border-top: 2px solid var(--ink); }

.g-findings { display: flex; flex-direction: column; }
.g-finding { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-8); padding: var(--space-6) 0; border-top: 1px solid var(--line); }
.g-finding:first-child { border-top: 2px solid var(--ink); }
.g-finding__num { flex: 0 0 168px; display: flex; flex-direction: column; gap: var(--space-1); }
.g-finding__num b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 56px; line-height: 0.95; font-weight: 500; letter-spacing: -0.04em; color: var(--ink); }
.g-finding__text { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); max-width: 680px; }
.g-source { font-family: var(--font-mono); font-size: 12px; line-height: 1.5; color: var(--ink-muted); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); overflow-wrap: anywhere; }
.g-source cite { font-style: normal; color: var(--ink); }
.g-source a { color: var(--accent-ink); min-height: 44px; display: inline-flex; align-items: center; align-self: flex-start; }

.g-tablebox { background: var(--surface); border-radius: var(--radius-lg); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.g-table { width: 100%; min-width: 820px; border-collapse: separate; border-spacing: 0; font-size: 16px; line-height: 1.4; }
.g-table th, .g-table td { text-align: left; vertical-align: top; padding: var(--space-4) var(--space-4); border-bottom: 1px solid var(--line); font-weight: 400; }
.g-table thead th { font-size: 16px; font-weight: 600; line-height: 1.25; border-bottom: 2px solid var(--ink); padding-top: var(--space-6); }
.g-table tbody th { width: 17%; }
.g-table tbody tr:last-child th, .g-table tbody tr:last-child td { border-bottom: 0; padding-bottom: var(--space-6); }
.g-table th:first-child { padding-left: var(--space-8); }
.g-table th:last-child, .g-table td:last-child { padding-right: var(--space-8); }
.g-table .is-ours { background: var(--surface-raised); border-left: 2px solid var(--ink); border-right: 2px solid var(--ink); font-weight: 600; }
.g-table thead .is-ours { border-top: 2px solid var(--ink); border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md); }
.g-table tbody tr:last-child .is-ours { border-bottom: 2px solid var(--ink); border-bottom-left-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); }

.g-steps { display: flex; flex-direction: column; counter-reset: step; }
.g-steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-4); padding: var(--space-3) 0; border-top: 1px solid var(--line); max-width: 680px; }
.g-steps li:first-child { border-top: 2px solid var(--ink); }
.g-steps li::before { counter-increment: step; content: counter(step, decimal-leading-zero); font-family: var(--font-mono); font-size: 14px; line-height: 27px; font-weight: 500; color: var(--ink-muted); }

.g-wrong { background: var(--surface-raised); border: 2px solid var(--ink); border-radius: var(--radius-md); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); max-width: 680px; }
.g-wrong__head { display: flex; align-items: center; gap: var(--space-3); }
.g-wrong__head svg { width: 24px; height: 24px; flex: none; fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.g-wrong ul { display: flex; flex-direction: column; }
.g-wrong li { padding: var(--space-4) 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--space-1); }
.g-wrong li:last-child { padding-bottom: 0; }
.g-wrong li p { font-size: 16px; line-height: 1.45; color: var(--ink-muted); }

.g-faq { display: flex; flex-direction: column; max-width: 680px; }
.g-faq > div { padding: var(--space-4) 0; border-top: 1px solid var(--line-strong); display: flex; flex-direction: column; gap: var(--space-2); }
.g-faq > div:first-child { border-top: 2px solid var(--ink); }
.g-faq dd { color: var(--ink-muted); }

.g-close { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6) var(--space-8); padding: var(--space-12) 0 var(--space-16); border-top: 1px solid var(--line); }
.g-close a.g-link { min-height: 44px; display: inline-flex; align-items: center; font-size: 18px; }

/* Site additions: the landing's real month card in place of the drawn track; the site footer. */
.g-trackcard { max-width: 680px; }
.g .lp__foot { border-top-color: var(--line); color: var(--ink-muted); }
.g .lp__foot a { color: var(--ink-muted); }

@media (max-width: 720px) {
  .g { font-size: 16px; }
  .g__wrap { padding: 0 var(--space-4); }
  .g-h1 { font-size: 32px; }
  .g-h2 { font-size: 24px; }
  .g-lead { font-size: 18px; }
  .g-hero { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); padding: var(--space-6) 0 var(--space-8); }
  .g-sec { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); padding: var(--space-8) 0; }
  .g-take { border-radius: var(--radius-md); padding: var(--space-4); }
  .g-finding { gap: var(--space-3); }
  .g-finding__num { flex-basis: 100%; }
  .g-finding__num b { font-size: 48px; }
  .g-tablebox { border-radius: var(--radius-md); }
  .g-table { min-width: 760px; font-size: 15px; }
  .g-table th:first-child { padding-left: var(--space-4); }
  .g-table th:last-child, .g-table td:last-child { padding-right: var(--space-4); }
  .g-steps li { grid-template-columns: 32px minmax(0, 1fr); gap: var(--space-3); }
  .g-steps li::before { line-height: 24px; }
  .g-wrong { padding: var(--space-4); }
  .g-close { padding: var(--space-8) 0 var(--space-12); }
  .g-close .g-btn { width: 100%; }
}

/* Task 544: related guides and the /guide/ index. */
.g-related__list { gap: var(--space-2); }
.g-related__list a { font-size: 18px; min-height: 44px; display: inline-flex; align-items: center; }
.g-index { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); padding: 0 0 var(--space-12); }
.g-index__item { background: var(--surface); border-radius: var(--radius-lg); padding: var(--space-6) var(--space-8); display: flex; flex-direction: column; gap: var(--space-3); }
.g-index__item a { text-decoration: none; }
.g-index__item p { color: var(--ink-muted); font-size: 16px; }
@media (max-width: 720px) { .g-index { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); } .g-index__item { border-radius: var(--radius-md); padding: var(--space-4); } }

/* Task 548: the guide index's title links are tap targets of at least 44 px. */
a.g-h2 { display: inline-block; padding-block: 9px; }

/* Task 548: in the two-column layout (721-1100 px) the headings were too large for long compounds
   (sv, nb, da, fi); smaller there, and the Nordic headings carry soft hyphens at compound joints. */
@media (min-width: 721px) and (max-width: 1100px) {
  .g-h1 { font-size: 34px; }
  .g-h2 { font-size: 24px; }
}
/* The site-wide heading rule sets hyphens:none !important, which also switches off soft hyphens;
   guide headings use manual hyphens so the ­ at compound joints work (task 548). */
.g-h1.g-h1.g-h1, .g-h2.g-h2.g-h2 { hyphens: manual !important; -webkit-hyphens: manual !important; }