/* ───────────────────────────────────────────────────────────
   Skogshorn AS
   Single asymmetric column. Serif throughout. No accent colour.
   No animation. No cards. Nothing that moves.
   ─────────────────────────────────────────────────────────── */

:root {
  --paper:  #f3f1ec;
  --ink:    #1c1a17;
  --quiet:  #57524b;
  --faint:  #948d83;
  --hair:   rgba(28, 26, 23, .20);

  --serif: ui-serif, "Iowan Old Style", "Hoefler Text", "Palatino Linotype",
           Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;

  --col:    31rem;   /* measure */
  --inset:  max(1.75rem, 15vw);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1a1917;
    --ink:   #e8e4dc;
    --quiet: #a49d92;
    --faint: #767068;
    --hair:  rgba(232, 228, 220, .22);
  }
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.75;
  font-variant-numeric: oldstyle-nums proportional-nums;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 4px;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--hair); padding: .6rem 1rem; font-size: .875rem;
}
.skip:focus { left: 1.5rem; top: 1.5rem; }

/* ── language, top right, plain text ── */

.lang {
  position: absolute; top: 2.25rem; right: max(1.75rem, 4vw);
  display: flex; align-items: baseline; gap: .4rem;
  font-size: .8125rem;
}
.lang__d { color: var(--faint); }
.lang__b {
  appearance: none; background: none; border: 0; margin: 0; padding: 0;
  font: inherit; color: var(--faint); cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: .22em;
  text-decoration-thickness: from-font;
}
.lang__b:hover { color: var(--ink); }
.lang__b.is-on {
  color: var(--ink);
  text-decoration-color: var(--hair);
  cursor: default;
}

/* ── page frame ── */

.page {
  padding: clamp(6rem, 22vh, 12rem) 1.75rem clamp(4rem, 14vh, 8rem) var(--inset);
  max-width: calc(var(--inset) + var(--col) + 1.75rem);
}

/* ── wordmark ── */

.wordmark {
  margin: 0 0 clamp(3rem, 9vh, 5rem);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: .07em;
  line-height: 1;
}
.wordmark__as {
  margin-left: .55em;
  font-size: .8125em;
  letter-spacing: .1em;
  color: var(--faint);
}

/* ── opening statement ── */

.opening {
  margin: 0 0 clamp(3.25rem, 10vh, 5.5rem);
  max-width: 22ch;
  font-size: clamp(1.5rem, 4.2vw, 2rem);
  line-height: 1.32;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

/* ── entries: heading hangs in the left margin on wide viewports ── */

.entry {
  position: relative;
  margin: 0 0 clamp(2.5rem, 7vh, 3.75rem);
}
.entry:last-of-type { margin-bottom: 0; }

.entry__h {
  margin: 0 0 .35rem;
  font-size: .8125rem;
  font-weight: 400;
  font-style: italic;
  letter-spacing: .01em;
  color: var(--faint);
}

.entry__c > p {
  margin: 0 0 .9rem;
  color: var(--quiet);
}
.entry__c > p:last-child { margin-bottom: 0; }

@media (min-width: 74rem) {
  .entry__h {
    position: absolute;
    left: -10.5rem;
    top: .42em;
    width: 8.75rem;
    text-align: right;
    margin: 0;
  }
}

/* ── areas: quiet list, no markers, no descriptions ── */

.areas {
  margin: 0; padding: 0; list-style: none;
  color: var(--quiet);
}
.areas li {
  padding: .3rem 0;
  border-bottom: 1px solid var(--hair);
}
.areas li:first-child { border-top: 1px solid var(--hair); }

/* ── contact ── */

.who { margin: 0; color: var(--quiet); }
.addr { margin: 0; color: var(--quiet); overflow-wrap: anywhere; }

/* ── links ── */

a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-offset: .2em;
  text-decoration-color: var(--hair);
}
a:hover { text-decoration-color: currentColor; }

/* ── colophon ── */

.colophon {
  margin-top: clamp(5rem, 16vh, 9rem);
  padding-top: 1.1rem;
  border-top: 1px solid var(--hair);
}
.colophon__l {
  margin: 0;
  font-size: .78125rem;
  letter-spacing: .015em;
  color: var(--faint);
}
.colophon__l a { color: var(--faint); }
.colophon__l a:hover { color: var(--ink); }

/* ── language blocks ── */

.doc[hidden] { display: none; }

/* ── small screens ── */

@media (max-width: 34rem) {
  body { font-size: 16px; }
  .lang { position: static; margin: 1.75rem 1.75rem 0; justify-content: flex-end; }
  .page { padding-top: 2.5rem; }
}

/* ── print ── */

@media print {
  .lang, .skip { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .page { padding: 0; max-width: none; }
  .entry__h { position: static; text-align: left; width: auto; margin: 0 0 .3rem; }
  a { text-decoration: none; }
}