/* THEME "Norr" – stram skandinavisk/editoriell karaktär. Ren CSS ovanpå
   style.css. Systemfonter – ingen extern font behövs. */
:root {
  /* Temat sätter BAS-färgerna. De semantiska (--sea, --sand …) härleds i
     style.css och byts i mörkt läge — sätter temat dem direkt går mörkt
     läge förlorat för just det temat. */
  --sand-base: #f4f3ef;      /* kund-slot "Bakgrund": kritvit-varmgrå */
  --paper-base: #ffffff;
  --ink-base: #181a1b;
  --ink-2-base: #5a5d60;
  --sea-base: #2e5d4e;       /* kund-slot "Accent": gran */
  --sea-deep-base: #1c3a31;  /* kund-slot "Mörk" */
  --sun-base: #b0532e;       /* kund-slot "Varm": rost */
  --rule-base: #dcdbd5;
  --shadow: none;
}
body {
  font-family: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  line-height: 1.65;
}
h1, h2, h3 { font-family: inherit; font-weight: 800; letter-spacing: -0.03em; }

/* Masthead: vit, hård linjal */
.masthead { background: rgba(255, 255, 255, .93); border-bottom: 1px solid var(--ink); }
.brand .mark { border-radius: 0; background: var(--ink); font-family: inherit; font-weight: 800; }
nav a { text-transform: uppercase; font-size: .78rem; letter-spacing: .1em; font-weight: 600; }

/* Hero: ljus, enorm ink-typografi, rostfärgad markör */
.hero {
  background: var(--paper);
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: 5.5rem 0 4.5rem;
}
.hero .eyebrow {
  color: var(--sun);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .18em;
}
.hero h1 { font-size: clamp(2.8rem, 7.5vw, 5rem); }
.hero h1::after {
  content: ""; display: block; width: 4.5rem; height: .38rem;
  background: var(--sun); margin-top: 1.4rem;
}
.hero .lede { color: var(--ink-2); }
.cta { border-radius: 4px; background: var(--ink); box-shadow: none; font-weight: 700; }
.cta:hover { transform: none; background: var(--sea-deep); }
.cta.ghost { border: 1px solid var(--ink); color: var(--ink); }

/* Rubriker/kluster */
.section-head h2 { color: var(--ink); }
.prose h2, .prose h3, .contact h2, .unlock h2 { color: var(--ink); }
.prose a { color: var(--sea); text-decoration-thickness: 2px; }
.cluster-title { color: var(--ink-2); font-size: .85rem; letter-spacing: .16em; }
.cluster-title::before { width: 2.4rem; background: var(--sun); }

/* Kort: platta, kantlinje i stället för skugga */
.cards article {
  border-radius: 2px; border: 1px solid var(--rule);
  box-shadow: none;
}
.cards article:hover { transform: none; box-shadow: none; border-color: var(--ink); }
.pin {
  border-radius: 2px; background: transparent;
  border: 1px solid var(--sea); color: var(--sea);
}

/* Checklista: kantiga boxar */
.checklist li::before { border-radius: 2px; border-color: var(--ink); }
.checklist li.checked::before { background: var(--sea); border-color: var(--sea); }

/* Galleri: rå bildkant, platt bildtextbalk */
.gallery figure { border-radius: 2px; border: none; background: transparent; }
.gallery figcaption {
  background: rgba(24, 26, 27, .78);
  padding: .5rem .7rem;
}
.lightbox { background: rgba(20, 21, 22, .95); }
.lightbox img { border-radius: 0; }

/* Kalender */
.calendar-embed iframe { border-radius: 2px; }

/* Kontakt/upplåsning */
.contact input, .contact textarea, .unlock input { border-radius: 4px; border-color: #c7c6c0; }
.contact button, .unlock button { border-radius: 4px; }

/* Footer */
footer { border-top: 2px solid var(--ink); }

/* Foto-hero: nästan vit slöja – fotot blir en diskret ton bakom ink-typon. */
:root {
  --hero-veil-top: rgba(255, 255, 255, .55);
  --hero-veil-bottom: rgba(255, 255, 255, .94);
}