/* Nordic Masur — design system
   Brand: Forest Green #2E5B3C · Charcoal #1A1A1A · Warm Birch #F5F0EB
          Honey Gold #C9A84C · Soft Grey #666666
   Committed light look. The wood is the colour; the interface stays quiet. */

:root {
  --green: #2E5B3C;
  --green-deep: #1F3F29;
  --green-tint: #EDF2EE;
  --charcoal: #1A1A1A;
  --birch: #F5F0EB;
  --birch-deep: #EAE2D9;
  --gold: #C9A84C;
  --grey: #666666;
  --grey-line: #DBD4CB;
  --white: #FFFFFF;

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --measure: 68ch;
  --wrap: 1120px;
  --wrap-narrow: 760px;

  --s1: 0.5rem;
  --s2: 1rem;
  --s3: 1.5rem;
  --s4: 2.5rem;
  --s5: 4rem;
  --s6: 6rem;
  --s7: 8rem;

  --radius: 3px;
}

/* ---------- reset ---------- */

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

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

body {
  margin: 0;
  background: var(--white);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
  /* .facts uses a full-bleed viewport-width trick (see below); clip rather
     than risk a 1px horizontal scrollbar from it. */
  overflow-x: clip;
}

img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }

a { color: var(--green); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--green-deep); }

/* ---------- type ---------- */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--charcoal);
  margin: 0 0 var(--s3);
  text-wrap: balance;
}

h1 { font-size: clamp(2.25rem, 1.4rem + 3.6vw, 3.9rem); letter-spacing: -0.025em; }
h2 { font-size: clamp(1.65rem, 1.2rem + 1.9vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.4rem); line-height: 1.25; }
h4 { font-size: 1.0625rem; font-family: var(--font-body); font-weight: 600; letter-spacing: 0; }

p { margin: 0 0 var(--s3); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  line-height: 1.5;
  color: #33372F;
  max-width: 58ch;
}

strong { font-weight: 600; }

small, .small { font-size: 0.9375rem; color: var(--grey); }

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
  margin: 0 0 var(--s2);
}

/* ---------- layout ---------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 24px;
}

/* Reading column stays narrow but keeps the same left edge as the hero,
   rather than centring itself inside the outer wrap. */
.wrap-narrow > * { max-width: var(--wrap-narrow); }
.wrap-narrow > .cards,
.wrap-narrow > .facts { max-width: 100%; }

section { padding-block: var(--s6); }
section.tight { padding-block: var(--s5); }

.band-birch { background: var(--birch); }
.band-green { background: var(--green); color: var(--white); }
.band-green h2, .band-green h3 { color: var(--white); }
.band-green a { color: var(--white); }
.band-line { border-top: 1px solid var(--grey-line); }

/* ---------- header ---------- */

.site-header {
  border-bottom: 1px solid var(--grey-line);
  background: var(--white);
  position: sticky;
  top: 0;
  z-index: 40;
}

.site-header .wrap {
  padding-block: 10px;
}

/* Row 1: brand + language switcher. Fixed width in every language (the
   switcher is always six two-letter codes), so this row never wraps. */
.header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  min-height: 52px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--charcoal);
  text-decoration: none;
  white-space: nowrap;
}
.brand span { color: var(--green); }
.brand-mark { display: block; width: 32px; height: 32px; flex: none; }

/* Row 2: main nav, on its own line so its per-language width (Finnish
   labels run much longer than English ones) can never affect row 1. */
.header-nav { margin-top: 6px; }

.nav {
  display: flex;
  gap: var(--s3);
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
  align-items: center;
}

.nav a {
  font-size: 0.9375rem;
  color: var(--charcoal);
  text-decoration: none;
  padding-block: 4px;
  border-bottom: 2px solid transparent;
}
.nav a:hover { border-bottom-color: var(--gold); }
.nav a[aria-current="page"] { border-bottom-color: var(--green); font-weight: 500; }

.langs {
  display: flex;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}
.langs a {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grey);
  text-decoration: none;
  padding: 5px 8px;
  border-radius: var(--radius);
}
.langs a:hover { background: var(--birch); color: var(--charcoal); }
.langs a[aria-current="true"] { background: var(--green); color: var(--white); }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s1);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  padding: 15px 28px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.btn-primary { background: var(--green); color: var(--white); border-color: var(--green); }
.btn-primary:hover { background: var(--green-deep); border-color: var(--green-deep); color: var(--white); }

.btn-ghost { background: transparent; color: var(--charcoal); border-color: var(--grey-line); }
.btn-ghost:hover { border-color: var(--charcoal); color: var(--charcoal); }

.band-green .btn-primary { background: var(--white); color: var(--green-deep); border-color: var(--white); }
.band-green .btn-primary:hover { background: var(--birch); color: var(--green-deep); }
.band-green .btn-ghost { color: var(--white); border-color: rgba(255,255,255,.45); }
.band-green .btn-ghost:hover { border-color: var(--white); }

.btn-row {
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
  margin-top: var(--s4);
}

.link-arrow {
  display: inline-block;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
}
.link-arrow::after { content: " →"; }
.link-arrow:hover { border-bottom-color: var(--green); }

/* ---------- hero ---------- */

.hero {
  position: relative;
  background: var(--birch);
  padding-block: clamp(var(--s5), 8vw, var(--s7));
  border-bottom: 1px solid var(--birch-deep);
  overflow: hidden;
}
/* Woodgrain-inspired backdrop — irregular waved lines standing in for the
   figure in curly birch, until real photography replaces it. CSS only, no
   image asset. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background-image:
    repeating-linear-gradient(
      100deg,
      transparent 0 38px,
      rgba(46,91,60,.05) 38px 39px,
      transparent 39px 76px,
      rgba(201,168,76,.07) 76px 78px
    );
  mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 92%);
}
.hero .wrap { position: relative; }
.hero h1 { max-width: 18ch; }
.hero .lead { margin-top: var(--s3); }

.hero-home {
  background:
    linear-gradient(180deg, rgba(245,240,235,.94) 0%, rgba(245,240,235,.88) 100%),
    var(--birch-deep);
}

/* ---------- prose ---------- */

.prose > * + * { margin-top: var(--s3); }
.prose > h2 { margin-top: var(--s5); }
.prose > h2:first-child { margin-top: 0; }
.prose > h3 { margin-top: var(--s4); }

.prose ul, .prose ol {
  max-width: var(--measure);
  margin: 0 0 var(--s3);
  padding-left: 1.25rem;
}
.prose li { margin-bottom: var(--s1); }
.prose li::marker { color: var(--green); }

/* ---------- ricos blog content ---------- */
/* Blog posts render through Wix Ricos (RicosViewer.tsx), not our own
   markdown pipeline, so .prose's child-combinator rules above never reach
   them: Ricos wraps every block several levels deep inside .ricos-content
   (div > div > div > p/h2/...), and it ships its own viewer CSS that sets
   every block's own margin to 0 outright (it normally relies on separate
   "gap spacer" elements between blocks for spacing, which the markdown-to-
   Ricos seed script — scripts/seed-blog*.mjs — doesn't emit). Result: posts
   rendered as one unbroken slab of text, reported 19.09.2026.
   Fix: restate the same spacing scale directly against Ricos's own tags.
   Use plain descendant selectors (any depth) rather than child combinators,
   and don't touch Ricos's own hashed classnames (e.g. "_8wDM6") — they're
   regenerated per build and not something to depend on. A bare element
   selector here (.ricos-content p) still outranks Ricos's single-class
   reset (._8wDM6{margin:0}) on specificity — tied on the class count, and
   .ricos-content p carries one more type selector than ._8wDM6's zero — so
   no !important is needed. */
.ricos-content p { margin: 0 0 var(--s3); max-width: var(--measure); }
.ricos-content p:last-child { margin-bottom: 0; }
.ricos-content h2 { margin: var(--s5) 0 var(--s3); }
.ricos-content h2:first-child { margin-top: 0; }
.ricos-content h3 { margin: var(--s4) 0 var(--s3); }
.ricos-content h4 { margin: var(--s3) 0 var(--s2); }
.ricos-content ul, .ricos-content ol {
  max-width: var(--measure);
  margin: 0 0 var(--s3);
  padding-left: 1.25rem;
}
.ricos-content li { margin-bottom: var(--s1); }
.ricos-content li::marker { color: var(--green); }
.ricos-content blockquote,
.ricos-content figure,
.ricos-content table { margin: var(--s4) 0; }

/* ---------- table ---------- */

.table-scroll { overflow-x: auto; margin-block: var(--s3); }

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 460px;
  font-size: 0.9688rem;
}
th, td {
  text-align: left;
  padding: 13px 16px 13px 0;
  border-bottom: 1px solid var(--grey-line);
  vertical-align: top;
}
th {
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grey);
  border-bottom-color: var(--charcoal);
}
tbody tr:last-child td { border-bottom: none; }

/* ---------- cards ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1px;
  background: var(--grey-line);
  border: 1px solid var(--grey-line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-block: var(--s4);
}
.card {
  position: relative;
  background: var(--white);
  padding: var(--s4) var(--s3);
  padding-top: calc(var(--s4) + 4px);
  transition: background-color .15s ease;
}
.card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gold);
}
.card:hover { background: var(--green-tint); }
.card h3 { margin-bottom: var(--s2); }
.card p { font-size: 1rem; color: #34342F; margin-bottom: 0; }
.band-birch .card { background: var(--birch); }

/* ---------- steps ---------- */

.steps {
  position: relative;
  display: grid;
  gap: var(--s4);
  margin-block: var(--s4);
  counter-reset: step;
  max-width: var(--measure);
}
/* Connecting line behind the numbered circles, so the steps read as one
   continuous process rather than a stack of isolated cards. */
.steps::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 46px;
  bottom: 46px;
  width: 1px;
  background: var(--grey-line);
}
.step {
  position: relative;
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: var(--s3);
  align-items: start;
}
.step::before {
  counter-increment: step;
  content: counter(step);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.35rem;
  color: var(--white);
  background: var(--green);
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
}
.step h3 { margin-bottom: var(--s1); }
.step p { margin-bottom: 0; }

/* ---------- facts (stat strip) ---------- */

/* Full-bleed tinted band so the numbers read as a distinct, scannable strip
   rather than another line in the text column. Breaks out of .wrap-narrow
   using the viewport-width trick; falls back gracefully (just unindented)
   wherever an ancestor's overflow-x is clipped. */
.facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* Column gap was var(--s5) (64px) — on a narrower viewport that alone ate
     enough width to force two- and three-word labels ("MOISTURE ON
     DESPATCH", "TREE TO SHIPPED TIMBER") onto 2–3 lines. Narrower gap plus
     tighter dt type below gives each column real room without going back to
     auto-fit (which is what collapsed this to one column in the first
     place — see the two-column decision above). */
  gap: var(--s4) var(--s3);
  margin-block: var(--s5);
  margin-inline: calc(50% - 50vw);
  padding: var(--s4) max(24px, calc(50vw - var(--wrap-narrow) / 2));
  background: var(--green-tint);
  border-top: 1px solid var(--green);
  border-bottom: 1px solid var(--green);
}
.fact dt {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--green-deep);
  margin-bottom: 8px;
}
.fact dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.85rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--charcoal);
}

/* ---------- quote ---------- */

.pullquote {
  margin: var(--s5) 0;
  padding-left: var(--s3);
  border-left: 3px solid var(--gold);
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.7rem);
  line-height: 1.35;
  color: var(--green-deep);
  max-width: 42ch;
}

/* ---------- cta band ---------- */

.cta-band { background: var(--green); color: var(--white); padding-block: var(--s5); }
.cta-band h2 { color: var(--white); max-width: 20ch; }
.cta-band p { color: rgba(255,255,255,.86); max-width: 52ch; }
.cta-band .cta-email-alt { margin-top: var(--s3); font-size: 0.9375rem; }
.cta-band .cta-email-alt a { color: var(--white); text-decoration: underline; text-underline-offset: 2px; }
.cta-band .cta-email-alt a:hover { color: var(--gold); }
/* The band is --green, the same as .btn-primary's fill, so the button had no
   visible shape inside a CTA band (found 24.09.2026). Same inversion as
   .band-green. */
.cta-band .btn-primary { background: var(--white); color: var(--green-deep); border-color: var(--white); }
.cta-band .btn-primary:hover { background: var(--birch); color: var(--green-deep); border-color: var(--birch); }

/* Short ask form inside a CTA band (07.10.2026, blocks.ts askFormHtml).
   White fields on the green band, labels in white. Name and email share a
   row on wider screens so the whole form stays about the height of the old
   button band plus one text box. */
.ask-band .form { margin-top: var(--s3); max-width: 620px; }
.ask-band .field label { color: var(--white); }
.ask-band .field textarea { min-height: 96px; }
.ask-band .field input, .ask-band .field select, .ask-band .field textarea { border-color: transparent; }
.ask-band .field input::placeholder, .ask-band .field textarea::placeholder { color: var(--grey); }
.ask-band .field input:focus, .ask-band .field select:focus, .ask-band .field textarea:focus { outline-color: var(--gold); }
.ask-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s2); }
@media (max-width: 560px) { .ask-row { grid-template-columns: 1fr; } }
.ask-more { margin-bottom: var(--s3); }
.ask-more summary {
  cursor: pointer;
  color: var(--white);
  font-size: 0.9375rem;
  text-decoration: underline;
  text-underline-offset: 2px;
  margin-bottom: var(--s2);
}
.ask-more summary:hover { color: var(--gold); }
.ask-more[open] summary { margin-bottom: var(--s3); }

/* ---------- media ---------- */

.media {
  background: var(--birch-deep);
  border-radius: var(--radius);
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  color: var(--grey);
  font-size: 0.875rem;
  text-align: center;
  padding: var(--s3);
  margin-block: var(--s4);
  max-width: 100%;
}
/* Once a page's :::media block carries a real ![](src) — see blocks.ts —
   this variant replaces the placeholder box with an actual photo plus
   caption below it. */
.media-photo {
  background: none;
  aspect-ratio: auto;
  display: block;
  padding: 0;
  text-align: left;
}
.media-photo img {
  width: 100%;
  border-radius: var(--radius);
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.media-photo figcaption {
  margin-top: var(--s2);
  font-size: 0.875rem;
  color: var(--grey);
}

/* SVG diagram variant — see the isDiagram check in src/lib/blocks.ts. These
   are portrait infographics (~1200x1500) with the label text baked into the
   graphic, so a 16:9 cover crop (the photo variant above) would cut text
   off. Shown at natural aspect ratio, with a thin line to separate the
   diagram's own pale fill from the page background instead of a hard crop. */
.media-diagram {
  background: none;
  aspect-ratio: auto;
  display: block;
  padding: 0;
  text-align: left;
}
.media-diagram img {
  width: 100%;
  height: auto;
  max-width: 480px;
  display: block;
  margin-inline: auto;
  border: 1px solid var(--grey-line);
  border-radius: var(--radius);
}
.media-diagram figcaption {
  margin-top: var(--s2);
  font-size: 0.875rem;
  color: var(--grey);
  text-align: center;
}

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--s5);
  align-items: start;
}

/* ---------- form ---------- */

.form { max-width: 620px; margin-top: var(--s4); }
.field { margin-bottom: var(--s3); }
.field label {
  display: block;
  font-size: 0.9375rem;
  font-weight: 500;
  margin-bottom: 6px;
}
.field input, .field select, .field textarea {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  color: var(--charcoal);
  padding: 12px 14px;
  border: 1px solid var(--grey-line);
  border-radius: var(--radius);
  background: var(--white);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--green);
  outline-offset: 1px;
  border-color: var(--green);
}
.field textarea { min-height: 130px; resize: vertical; }
.field .hint { font-size: 0.875rem; color: var(--grey); margin-top: 5px; }

/* ---------- footer ---------- */

.site-footer {
  background: var(--charcoal);
  color: #CFCBC5;
  padding-block: var(--s5) var(--s4);
  font-size: 0.9375rem;
}
.site-footer h4 {
  color: var(--white);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--s2);
}
.site-footer a { color: #CFCBC5; text-decoration: none; }
.site-footer a:hover { color: var(--white); text-decoration: underline; }
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--s4);
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 8px; }
.footer-social { display: inline-flex; align-items: center; gap: 6px; }
.footer-social svg { flex-shrink: 0; }
.footer-bottom {
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: 1px solid #333;
  display: flex;
  justify-content: space-between;
  gap: var(--s3);
  flex-wrap: wrap;
  color: #8C8880;
  font-size: 0.875rem;
}

/* ---------- todo marker ---------- */

.todo {
  background: #FFF4CE;
  border-bottom: 1px dashed #B08900;
  padding: 0 3px;
  font-size: 0.95em;
}

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .nav { gap: var(--s2) var(--s3); }
  section { padding-block: var(--s5); }
}

@media (max-width: 560px) {
  body { font-size: 1rem; }
  .wrap { padding-inline: 18px; }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; }
  .facts { gap: var(--s4) var(--s2); padding-inline: 18px; }
  .fact dt { font-size: 0.65rem; letter-spacing: 0.01em; }
  .step { grid-template-columns: 38px 1fr; gap: var(--s2); }
  .step::before { width: 38px; height: 38px; font-size: 1.1rem; }
  .steps::before { left: 18px; }

  /* Below ~500px of usable width, "Nordic Masur" plus all six language
     codes no longer fit on one line (measured: brand ~174px + switcher
     ~209px + gap needs ~407px, a narrow phone has ~339px) — the switcher
     was running off the right edge, DA and DE unreachable. Let it wrap to
     its own line under the brand instead of shrinking type past
     legibility or hiding any language behind a dropdown: every language
     stays one tap away and stays above the main nav, on every viewport. */
  .header-top {
    flex-wrap: wrap;
    row-gap: 8px;
    min-height: auto;
  }
  .langs {
    flex-wrap: wrap;
    /* Optically align the switcher's visible text with the brand's left
       edge — each link's own padding would otherwise indent it 8px. */
    margin-inline-start: -8px;
  }
}

@media print {
  .site-header, .cta-band { position: static; }
}

/* Contact form thank-you state (Wix Forms submission — added for the
   headless rebuild, not present in the original static-site design). */
.form-sent {
  max-width: 620px;
  margin-top: var(--s4);
  padding: var(--s3);
  background: var(--green-tint);
  border: 1px solid var(--green);
  border-radius: 4px;
}
.form-sent p { margin: 0; color: var(--green-deep); }
.form-sent:focus { outline: none; }
@media (prefers-reduced-motion: no-preference) {
  .form-sent { animation: form-sent-in .4s ease both; }
  @keyframes form-sent-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
  }
}