/* purpleaskepott.com — «Ett trykk i én farge».
   One sheet, one ink. No build step, no JavaScript, no third-party requests. */


/* ============================================================
   1. FONTS — self-hosted, so no visitor IP leaves the box
   ============================================================ */

@font-face {
  font-family: "EB Garamond";
  src: url("/fonts/eb-garamond-roman.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "EB Garamond";
  src: url("/fonts/eb-garamond-italic.woff2") format("woff2");
  font-weight: 400 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Libre Caslon Display";
  src: url("/fonts/libre-caslon-display.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


/* ============================================================
   2. TOKENS
   ============================================================ */

:root {
  color-scheme: light dark;

  --display: "Libre Caslon Display", "Big Caslon", "Hoefler Text", Georgia, "Times New Roman", serif;
  --text:    "EB Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;

  /* dagsutgaven */
  --ground:     #DED2B9;
  --paper:      #F2EAD9;
  --paper-deep: #E6DAC3;
  --ink:        #3B1E57;
  --ink-soft:   #5C3D79;
  --blaaveis:   #4A46A8;
  --roesslyng:  #7B3F6E;
  --rule:   rgba(59,30,87,.32);
  --laid:   rgba(59,30,87,.030);
  --chain:  rgba(59,30,87,.045);
  --foxing: rgba(120,86,40,.055);
  --korn: .14;

  --laid-step: 4px;
  --deckle-filter: url(#deckle);
  --plate-filter: url(#ink-day);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* nattutgaven */
    --ground:     #0C0616;
    --paper:      #150B22;
    --paper-deep: #1E1030;
    --ink:        #E8DCF2;
    --ink-soft:   #C3AEDA;
    --blaaveis:   #9C8DF0;
    --roesslyng:  #B27FA6;
    --rule:   rgba(232,220,242,.24);
    --laid:   rgba(232,220,242,.028);
    --chain:  rgba(232,220,242,.040);
    --foxing: transparent;
    --korn: .09;

    --plate-filter: url(#ink-night);
  }
}

/* Moiré guard: 4px laid lines shimmer on 2x displays and the grain reads
   twice as strong. A rendering fix, not a nicety. */
/* The -webkit- branch is not decoration: WebKit had no `resolution` media
   feature before Safari 16, so on older iPads and Macs both blocks would be
   skipped and the artefact this guard exists to prevent would ship silently. */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  :root { --laid-step: 6px; --laid: rgba(59,30,87,.022); --korn: .09; }
}
@media (prefers-color-scheme: dark) and (-webkit-min-device-pixel-ratio: 2),
       (prefers-color-scheme: dark) and (min-resolution: 2dppx) {
  :root { --laid: rgba(232,220,242,.020); --korn: .06; }
}

@media (max-width: 639px) {
  :root { --deckle-filter: url(#deckle-sm); }
}

@media (prefers-contrast: more) {
  :root { --ink-soft: var(--ink); --rule: rgba(59,30,87,.48); --korn: .06; }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root { --rule: rgba(232,220,242,.38); }
}


/* ============================================================
   3. FRAME
   ============================================================ */

html, body {
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--text);
  font-feature-settings: "onum" 1, "kern" 1, "liga" 1;
  -webkit-text-size-adjust: 100%;
}

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

:focus-visible {
  outline: 2px solid var(--blaaveis);
  outline-offset: 4px;
  border-radius: 2px;
}

/* Never display:none — WebKit drops filter references out of such subtrees. */
.filterdefs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.ark {
  position: relative;
  /* The board must stay wider than the deckle's outward reach (17px + the
     filter's ±7px), or the ragged edge lands at negative x and is unreachable. */
  width: calc(100% - 2 * clamp(24px, 3vw, 28px));
  max-width: 1180px;
  margin-inline: auto;
  min-height: 100vh;
  min-height: 100svh;
}


/* ============================================================
   4. THE PAPER — six gradient layers plus a tiled grain
   ============================================================ */

.leaf {
  position: absolute;
  inset: -14px 0;
  z-index: 0;
  background-color: var(--paper);
  background-image:
    /* foxing — two age spots, off-centre */
    radial-gradient(circle 90px at 17% 22%, var(--foxing), transparent 70%),
    radial-gradient(circle 74px at 83% 68%, var(--foxing), transparent 70%),
    /* fibre mottle */
    radial-gradient(60% 40% at 18% 12%, rgba(59,30,87,.024), transparent 70%),
    radial-gradient(50% 45% at 72% 44%, rgba(59,30,87,.020), transparent 70%),
    radial-gradient(70% 40% at 40% 86%, rgba(59,30,87,.018), transparent 70%),
    /* chain lines — vertical, the mould of a laid sheet */
    repeating-linear-gradient(90deg, var(--chain) 0 1px, transparent 1px 96px),
    /* laid lines — horizontal */
    repeating-linear-gradient(0deg, var(--laid) 0 1px, transparent 1px var(--laid-step));
}

.leaf::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: var(--korn);
  background-repeat: repeat;
  background-size: 240px 240px;   /* the grain must TILE, never stretch */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* The moon — night edition only. A separate element so its opacity can
   breathe without repainting the six-layer paper stack. */
.maane { display: none; }

@media (prefers-color-scheme: dark) {
  .maane {
    display: block;
    position: fixed;
    inset: 0;
    /* Above the deckle strips (z-index 1): the wash has to cross the sheet's
       edge, or the untinted 34px strips read as a hard band down each side. */
    z-index: 2;
    pointer-events: none;
    opacity: .70;
    background: radial-gradient(120% 90% at 78% 8%, #241239 0%, rgba(21,11,34,0) 62%);
  }
}

/* The deckled edge: two 34px strips straddling the leaf's edge, never the
   whole sheet. No text is ever inside a filtered element. */
.deckle {
  position: absolute;
  top: -14px;
  bottom: -14px;
  z-index: 1;
  width: 34px;
  background-color: var(--paper);
  background-image: repeating-linear-gradient(0deg, var(--laid) 0 1px, transparent 1px var(--laid-step));
  filter: var(--deckle-filter);
}
.deckle-l { left:  -17px; }
.deckle-r { right: -17px; }


/* ============================================================
   5. SHEET
   ============================================================ */

.sheet {
  position: relative;
  z-index: 3;
  /* The inline padding is capped against the viewport: its clamp() floor is a
     rem, so under text-only zoom it would otherwise eat the content box and
     spill it under overflow-x:clip, where it is unreachable. */
  padding: clamp(2.5rem, 5vw, 4.5rem) min(clamp(1.5rem, 4vw, 3.5rem), 7vw) clamp(3rem, 6vw, 5rem);
}


/* ============================================================
   6. TYPOGRAPHY
   ============================================================ */

/* Small caps are faked — the shipped builds carry no reliable "smcp". */
.kaps,
.lopetittel,
.folg span {
  text-transform: uppercase;
  letter-spacing: .28em;
  /* .28em tracking on an unbreakable word (KORRESPONDANSE) overflows a 320px
     column once the rem grows under text-only zoom. Cap against the viewport,
     and break as a last resort — clipped text is unreachable, broken text is not. */
  font-size: min(.6875rem, 4.2vw);
  overflow-wrap: anywhere;
  font-weight: 500;
}

.lopetittel {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 clamp(1.75rem, 4vw, 2.75rem);
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-soft);
  line-height: 1;
  letter-spacing: .30em;
}
.lopetittel span { font-family: var(--display); }
.lopetittel span:last-child { margin-right: -.30em; }   /* trailing tracking */

.tittel {
  margin: 0;
  font-weight: 400;
  text-shadow: 0 1px 0 rgba(255,255,255,.42), 0 -0.5px 0 rgba(21,11,34,.07);
}
@media (prefers-color-scheme: dark) {
  .tittel { text-shadow: 0 0 20px rgba(156,141,240,.16); }
}

.t-over, .t-main {
  display: block;
  text-transform: uppercase;
  font-family: var(--display);
}
.t-over {
  margin-left: -0.01em;
  font-size: clamp(1.125rem, 2.6vw, 2rem);
  line-height: 1.1;
  letter-spacing: .26em;
  color: var(--ink);
}
.t-main {
  margin-left: -0.045em;   /* optical alignment of the A */
  /* ASKEPOTT measures 5.386em in Libre Caslon Display once .04em of tracking
     is added, and it is one unbreakable word. The clamp minimum is in rem, so
     text-only zoom grows the word while the column it sits in does not — and
     overflow-x:clip makes any spill permanently unreachable. Cap it against
     the column itself (.hode is the query container), so the page's own name
     can never be clipped. Plain clamp first: pre-container-query browsers keep
     the specified sizing. */
  font-size: clamp(3rem, 7.4vw, 5.9rem);
  font-size: min(clamp(3rem, 7.4vw, 5.9rem), 17cqw);
  line-height: .95;
  letter-spacing: .04em;
}
.t-aske { color: var(--ink); }
.t-pott { color: var(--ink-soft); }

.proklamasjon {
  margin: 0;
  font-style: italic;
  font-size: clamp(1.7rem, 3.3vw, 2.7rem);
  line-height: 1.24;
  color: var(--ink);
}

.folg { margin: 0; }
.folg span {
  color: var(--ink-soft);
  line-height: 1;
}

.tekst { margin-top: clamp(2.25rem, 4vw, 3.25rem); }

.brodtekst {
  margin: 0 0 1.7rem;
  max-width: 42ch;
  font-size: 1.125rem;
  line-height: 1.72;
  color: var(--ink);
}
.brodtekst::first-letter {
  font-family: var(--display);
  float: left;
  font-size: 4.6em;
  line-height: .78;
  margin: .06em .1em -.06em 0;
  color: var(--ink);
}

.aforisme {
  clear: left;
  margin: 0 0 1.7rem;
  max-width: 42ch;
  font-style: italic;
  font-size: clamp(1.1rem, 1.9vw, 1.375rem);
  line-height: 1.42;
  color: var(--ink);
}

.engelsk {
  margin: 0;
  max-width: 46ch;
  font-size: .9375rem;
  line-height: 1.65;
  color: var(--ink-soft);
}

.marg p {
  margin: 0;
  max-width: 40ch;
  font-style: italic;
  font-size: .8125rem;
  line-height: 1.55;
  color: var(--ink-soft);
}


/* ============================================================
   7. ORNAMENT AND TICKS
   ============================================================ */

/* Rosemaling rule. The wobble is what stops it reading as clip-art. */
.ornament {
  display: block;
  color: var(--ink);
  margin: 2rem 0 1.75rem;
  max-width: 100%;
  height: auto;
  filter: url(#wobble);
}
@media (max-width: 480px) {
  .ornament { width: 240px; }
}

/* Blåveis — six petaloid sepals in one whorl, never five petals. */
.rosett {
  color: var(--blaaveis);
  vertical-align: -0.16em;
  margin-right: .55em;
}

/* Twelve ticks: a clock unrolled into a ruler. The body copy is its caption. */
.klokke {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin: 1.25rem 0 1.5rem;
  height: 18px;
}
.klokke i {
  display: block;
  width: 1px;
  height: 14px;
  background: var(--ink-soft);
  opacity: calc(.28 + var(--i) * .055);
}
.klokke i:last-child {
  width: 2px;
  height: 18px;
  opacity: 1;
  background: var(--blaaveis);
}
@media (prefers-color-scheme: dark) {
  .klokke i:last-child {
    box-shadow: 0 0 8px rgba(156,141,240,.75), 0 0 20px rgba(156,141,240,.30);
  }
}


/* ============================================================
   8. THE PLATE
   ============================================================ */

.plansje {
  padding: 14px;
  transform: rotate(-0.6deg);      /* a tipped-in plate is never square */
  box-shadow:
    inset 0 0 0 1px rgba(59,30,87,.30),   /* the platemark */
    inset 0 0 3px  rgba(59,30,87,.16),
    0 1px 0        rgba(255,255,255,.50);
}
.plansje img {
  display: block;
  width: 100%;
  height: auto;
  filter: var(--plate-filter);
}
.plansje figcaption {
  display: block;
  text-align: center;
  margin-top: .9rem;
}
.plansje figcaption .kaps {
  display: block;
  font-family: var(--display);
  line-height: 1;
  color: var(--ink-soft);
}
.bbtekst {
  display: block;
  margin-top: .5rem;
  font-style: italic;
  font-size: .875rem;
  line-height: 1.45;
  color: var(--ink-soft);
}
.plansje-notat {
  display: block;
  margin-top: .55rem;
  font-style: italic;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.plansje-notat span { display: block; }

@media (prefers-color-scheme: dark) {
  .plansje {
    box-shadow:
      inset 0 0 0 1px rgba(232,220,242,.22),
      inset 0 0 3px  rgba(232,220,242,.12),
      0 1px 0        rgba(0,0,0,.35);
  }
  .plansje img { opacity: .93; }
}


/* ============================================================
   9. COLOPHON
   ============================================================ */

.kolofon {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
}
.kolofon-merke { margin: 0 0 .6rem; }
.kolofon .kaps { line-height: 1; color: var(--ink-soft); }

.kontakt {
  margin: 0 0 1.5rem;
  font-style: normal;
}
.kontakt a {
  font-size: 1rem;
  line-height: 1.4;
  letter-spacing: .01em;
  color: var(--blaaveis);
  text-decoration: none;
  /* The nib rests drawn, and presses harder on hover/focus. It cannot rest at
     zero height: --blaaveis against the --ink-soft copy directly above and
     below it computes to 1.14:1 (light) / 1.39:1 (dark), so colour alone is no
     cue at all, and this link is the page's entire function. */
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  overflow-wrap: anywhere;             /* the address is one long token */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 380ms ease-out;
}
.kontakt a:hover,
.kontakt a:focus-visible { background-size: 100% 2px; }

/* One sepal step, so the six-fold flower lands back on itself. */
.kolofon .rosett { transition: transform 500ms ease; }
.kolofon:has(a:hover) .rosett,
.kolofon:has(a:focus-visible) .rosett { transform: rotate(60deg); }

.kreditt {
  margin: 0;
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--ink-soft);
}


/* ============================================================
   10. MOTION — opt-in only. The default render is the final state.
   ============================================================ */

@keyframes blekk {
  from { opacity: 0; transform: translateY(8px); filter: blur(3px); }
}

/* The ornament settles without a blur: an animated `filter` would displace
   its static url(#wobble) reference. */
@keyframes blekk-ren {
  from { opacity: 0; transform: translateY(8px); }
}

/* Both endpoints must be stated. An implicit `to` would take the element's
   underlying `clip-path: none`, and inset() against the keyword none is not
   interpolable — it falls back to discrete, so the wipe becomes a hard pop
   halfway through instead of the sheet lifting off the press. */
@keyframes trekk {
  from { opacity: 0; clip-path: inset(0 0 100% 0); }
  to   { opacity: 1; clip-path: inset(0 0 0 0); }
}

@keyframes slag {
  from { opacity: .18; transform: scaleY(.4); }
}

/* The widening is done on transform, not width: transform-origin is bottom
   (50% 100%), so scaleX(1.5) spreads the 2px bar symmetrically to 3px without
   relaying out .klokke on every frame of the strike. */
@keyframes slag-tolv {
  0%  { opacity: .18; transform: scaleY(.4); }
  31% { opacity: 1;   transform: none; }
  65% { transform: scaleX(1.5); }
}

@keyframes slag-tolv-natt {
  0%  { opacity: .18; transform: scaleY(.4);
        box-shadow: 0 0 0 rgba(156,141,240,0), 0 0 0 rgba(156,141,240,0); }
  31% { opacity: 1;   transform: none;
        box-shadow: 0 0 0 rgba(156,141,240,0), 0 0 0 rgba(156,141,240,0); }
  65% { box-shadow: 0 0 16px rgba(156,141,240,.95), 0 0 38px rgba(156,141,240,.50); }
}

@keyframes maaneskinn {
  from { opacity: .58; }
  to   { opacity: .82; }
}

@media (prefers-reduced-motion: no-preference) {

  /* Ink settle — an impression sinking into damp paper. */
  .lopetittel,
  .tittel,
  .proklamasjon,
  .folg,
  .tekst,
  .marg,
  .kolofon {
    animation: blekk 900ms cubic-bezier(.16,.84,.44,1) both;
  }
  .lopetittel   { animation-delay:   0ms; }
  .tittel       { animation-delay:  90ms; }
  .proklamasjon { animation-delay: 300ms; }
  /* .folg is the last block in the header, so it settles last — without this
     it would sit at full opacity from t=0, alone above an empty wordmark. */
  .folg         { animation-delay: 360ms; }
  .tekst        { animation-delay: 400ms; }
  .marg         { animation-delay: 460ms; }
  .kolofon      { animation-delay: 520ms; }

  .ornament { animation: blekk-ren 900ms cubic-bezier(.16,.84,.44,1) 200ms both; }

  /* The pull — the sheet lifting off the press, top down. */
  /* `backwards`, not `both`: holding inset(0) after the run would clip the
     figure's outer 1px platemark highlight, which paints outside the border box. */
  .plansje { animation: trekk 1400ms cubic-bezier(.22,1,.36,1) 240ms backwards; }

  /* The strike — eleven ticks ramp, the twelfth snaps. */
  .klokke i {
    transform-origin: bottom;
    animation: slag 220ms cubic-bezier(.16,.84,.44,1) both;
    animation-delay: calc(700ms + var(--i) * 78ms);
  }
  .klokke i:last-child {
    animation-name: slag-tolv;
    animation-duration: 700ms;
  }
}

@media (prefers-reduced-motion: no-preference) and (prefers-color-scheme: dark) {
  .klokke i:last-child { animation-name: slag-tolv-natt; }
  .maane { animation: maaneskinn 18s ease-in-out infinite alternate; }
}

@media (prefers-reduced-motion: reduce) {
  .kontakt a { transition: none; background-size: 100% 1px; }
  .kontakt a:hover,
  .kontakt a:focus-visible { background-size: 100% 2px; }
  .kolofon .rosett { transition: none; }
}
@media (prefers-color-scheme: dark) and (prefers-reduced-motion: reduce) {
  .maane { opacity: .70; }
}


/* ============================================================
   11. THE DEDICATION
   ============================================================ */

.dedikasjon {
  margin: clamp(1.5rem, 3vw, 2rem) 0 .45rem;
  max-width: 22ch;
  font-family: var(--display);
  font-size: clamp(1.25rem, 2.8vw, 1.7rem);
  line-height: 1.26;
  color: var(--ink);
}
.dedikasjon-en {
  margin: 0;
  max-width: 30ch;
  font-style: italic;
  font-size: clamp(.95rem, 1.7vw, 1.0625rem);
  line-height: 1.45;
  color: var(--ink-soft);
}


/* ============================================================
   12. THE BILINGUAL SETTING — a facing-page edition

   Every .tospraak has exactly two children: Norwegian, then English.
   Below 900px they stack; above it they sit as recto and verso with the
   gutter rule between them. The English is set in --ink-soft (7.3:1 on
   paper, so it is a register, not a legibility compromise).
   ============================================================ */

.tospraak > * { min-width: 0; }

@media (min-width: 900px) {
  .tospraak {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
  .tospraak > :first-child { padding-right: clamp(1.75rem, 3.5vw, 3rem); }
  .tospraak > :last-child {
    padding-left: clamp(1.75rem, 3.5vw, 3rem);
    border-left: 1px solid var(--rule);
  }
}

/* Stacked, the two languages need a seam or they read as one run-on voice. */
@media (max-width: 899px) {
  .tospraak > :last-child {
    margin-top: 1.4rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--rule);
  }
}

.tekst [lang="en"] { color: var(--ink-soft); }


/* ============================================================
   13. THE DOCUMENT — headings, body, verdicts
   ============================================================ */

.bolk { margin: clamp(2.5rem, 5vw, 3.75rem) 0 0; }

.tekst h2 {
  margin: 0 0 1rem;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
  line-height: 1.18;
  color: var(--ink);
}
.tekst h3 {
  margin: 0 0 .85rem;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  line-height: 1.22;
  color: var(--ink);
}
.tekst h2[lang="en"], .tekst h3[lang="en"] { color: var(--ink-soft); }

.tekst p {
  margin: 0 0 1.15rem;
  max-width: 46ch;
  font-size: 1.0625rem;
  line-height: 1.7;
}
.tekst p:last-child { margin-bottom: 0; }

/* The drop cap opens each language, so the facing pages start level. */
.brodtekst { max-width: 44ch; }

/* A line that carries the argument. Set in display, given air. */
.uthevet {
  margin: 1.5rem 0 1.4rem !important;
  max-width: 30ch !important;
  font-family: var(--display);
  font-size: clamp(1.2rem, 2.2vw, 1.5rem) !important;
  line-height: 1.32 !important;
  color: var(--ink) !important;
}
.tospraak > [lang="en"] .uthevet { color: var(--ink-soft) !important; }

/* The safeguarding caveat. Quieter than the argument, and never buried. */
.innskudd {
  margin-top: 1.6rem !important;
  padding-left: .95rem;
  border-left: 2px solid var(--roesslyng);
  font-style: italic;
  font-size: .9375rem !important;
  line-height: 1.6 !important;
  color: var(--ink-soft) !important;
}

.dokument {
  margin: clamp(2.25rem, 4.5vw, 3.25rem) 0 0;
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
  border-top: 1px solid var(--rule);
}
.dok-nr { margin: 0 0 .8rem !important; max-width: none !important; }
.dok-nr .kaps { color: var(--roesslyng); }
.dok-hode { margin-bottom: .25rem; }

/* The statute, quoted verbatim: a slip of a different paper laid on the page. */
.lovtekst {
  margin: 1.35rem 0 1.5rem;
  padding: clamp(1rem, 2vw, 1.35rem) clamp(1.1rem, 2.2vw, 1.5rem);
  background: var(--paper-deep);
  border-left: 3px solid var(--blaaveis);
  box-shadow: inset 0 0 0 1px rgba(59,30,87,.10);
}
.lovtekst p {
  margin: 0 0 .85rem;
  max-width: 64ch;
  font-size: 1rem;
  line-height: 1.68;
  color: var(--ink);
}
.lovtekst p:last-of-type { margin-bottom: .55rem; }
.lovtekst footer { margin: 0; }
.lovtekst cite {
  font-family: var(--display);
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: .6875rem;
  color: var(--ink-soft);
}
@media (prefers-color-scheme: dark) {
  .lovtekst { box-shadow: inset 0 0 0 1px rgba(232,220,242,.09); }
}

.dok-tolk { margin-top: 1.1rem; }

/* The verdict at the foot of each document. */
.dom {
  margin: 0 !important;
  max-width: 32ch !important;
  font-family: var(--display);
  font-size: clamp(1.1rem, 2vw, 1.35rem) !important;
  line-height: 1.34 !important;
  color: var(--ink) !important;
}
.dom-par { margin-top: 1.5rem; }
.dom-par > [lang="en"] { color: var(--ink-soft) !important; }

.kilde {
  margin: 1.2rem 0 0 !important;
  max-width: 62ch !important;
  font-size: .8125rem !important;
  line-height: 1.6 !important;
  color: var(--ink-soft) !important;
}


/* ============================================================
   14. WHAT TO DO — the address, and the people who can help
   ============================================================ */

.handling,
.hjelp {
  margin-top: clamp(2.75rem, 5vw, 4rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--rule);
}

.stor-kontakt {
  margin: clamp(1.5rem, 3vw, 2rem) 0 0 !important;
  max-width: none !important;
  text-align: center;
}
.stor-kontakt a {
  font-family: var(--display);
  font-size: clamp(1.0625rem, 3.4vw, 1.75rem);
  line-height: 1.35;
  color: var(--blaaveis);
  text-decoration: none;
  /* Same drawn nib as the colophon: --blaaveis against the copy around it is
     nowhere near a 3:1 non-text contrast, so colour alone cues nothing. */
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  overflow-wrap: anywhere;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 380ms ease-out;
}
.stor-kontakt a:hover,
.stor-kontakt a:focus-visible { background-size: 100% 2px; }

.lenker {
  margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 900px) {
  .lenker { grid-template-columns: 1fr 1fr; gap: 2rem clamp(1.75rem, 3.5vw, 3rem); }
}
.lenker a {
  display: inline-block;
  margin-bottom: .4rem;
  font-family: var(--display);
  font-size: 1.15rem;
  color: var(--blaaveis);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  transition: background-size 380ms ease-out;
}
.lenker a:hover,
.lenker a:focus-visible { background-size: 100% 2px; }
.lenker span {
  display: block;
  max-width: 46ch;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.lenker span[lang="en"] { font-style: italic; }


/* ============================================================
   15. THE PLATES — one drawn, one tipped in
   ============================================================ */

/* Plate I is inline SVG, not an <img>: it inherits --ink through
   currentColor, so it re-inks itself for the night edition instead of being
   pushed through the duotone filter the photographic plate needs. */
.hender {
  display: block;
  width: 100%;
  height: auto;
  color: var(--ink);
}
@media (prefers-color-scheme: dark) {
  .hender { color: var(--ink); opacity: .95; }
}

.plansje-hender { margin: clamp(2rem, 4vw, 3rem) 0 0; }

/* Plate II is small and centred: a tipped-in illustration, not a hero. */
.plansje-rackham {
  width: min(100%, 300px);
  margin: clamp(2.25rem, 4.5vw, 3.25rem) auto 0;
}


/* ============================================================
   16. LAYOUT — one sheet, read top to bottom

   The placeholder was a three-column grid with the plate pinned beside a
   short block of copy. This is a long document, so the sheet is now a single
   measure and the bilingual grid does the column work section by section.
   ============================================================ */

.sheet { display: block; max-width: 62rem; margin-inline: auto; }

/* The wordmark still sizes against its own box, not the viewport (see
   .t-main), so .hode stays a query container. */
.hode { container-type: inline-size; }

.tekst { margin-top: clamp(2rem, 4vw, 3rem); }

.marg {
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  padding-left: 1rem;
  border-left: 1px solid var(--rule);
}

/* Phones. A 10px board with the strips 17px out put the whole ragged edge at
   negative x — invisible, and the strips then painted flat paper across the
   entire --ground margin. 14px of board and an 8px overhang keeps the chatter
   on-screen (6px ± the small filter's 4px) with board still showing outside it. */
@media (max-width: 639px) {
  .ark      { width: calc(100% - 28px); }
  .deckle-l { left:  -8px; }
  .deckle-r { right: -8px; }
}

@media (min-width: 1200px) {
  .marg { max-width: 34rem; }
}