/* The Scandi Journal — shared styles
   Layout concept: a quiet magazine. Photos lead, type stays small and calm,
   generous white space, asymmetric two-column spreads that stack on phones. */
:root {
  --paper: #f6f3ee;      /* linen white */
  --oat: #ebe4d9;        /* oat / sand panels */
  --ink: #3d2b21;        /* warm dark brown — main text */
  --ink-soft: #7a6555;   /* driftwood — captions, meta */
  --line: #dcd2c4;       /* hairlines */
  --sea: #5f7884;        /* Baltic blue-grey accent */
  --dusk: #d9a57e;       /* sunset apricot, used sparingly */

  --display: "Instrument Serif", "Cormorant Garamond", Georgia, serif;
  --body: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;

  --step--1: 0.8125rem;
  --step-0: 1.0625rem;
  --step-1: 1.375rem;
  --step-2: 2rem;
  --step-3: clamp(2.5rem, 6vw, 4.25rem);
  --step-4: clamp(3rem, 9vw, 6.5rem);

  --wrap: 1240px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #1f1813; --oat: #2b221b; --ink: #eee5d8; --ink-soft: #b7a491;
    --line: #3d3128; --sea: #9fb6c1; --dusk: #e0b28f; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #1f1813; --oat: #2b221b; --ink: #eee5d8; --ink-soft: #b7a491;
  --line: #3d3128; --sea: #9fb6c1; --dusk: #e0b28f; color-scheme: dark;
}

* { box-sizing: border-box; }
body {
  background: var(--paper); color: var(--ink);
  font-family: var(--body); font-size: var(--step-0); line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--paper); }
a { color: inherit; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.05; margin: 0; text-wrap: balance; letter-spacing: -0.01em; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--sea); outline-offset: 3px; }

.wrap {
  max-width: var(--wrap); margin-inline: auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}
.label {
  font-size: var(--step--1); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 500;
}

/* Header */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 18px; flex-wrap: wrap; }
.logo { font-family: var(--display); font-size: 1.6rem; text-decoration: none; line-height: 1; white-space: nowrap; }
.logo span { font-style: italic; }
.nav { display: flex; gap: clamp(14px, 3vw, 36px); flex-wrap: wrap; }
.nav a { text-decoration: none; font-size: var(--step--1); letter-spacing: 0.14em; text-transform: uppercase; padding-block: 4px; border-bottom: 1px solid transparent; }
.nav a:hover, .nav a[aria-current] { border-color: var(--ink); }

/* Generic section */
section { padding-block: clamp(64px, 10vw, 128px); }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(32px, 5vw, 56px); }
.section-head h2 { font-size: var(--step-3); }
.section-head p { max-width: 38ch; color: var(--ink-soft); }
.more { font-size: var(--step--1); letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid var(--ink); padding-bottom: 2px; white-space: nowrap; }

figure { margin: 0; }
figcaption { font-size: var(--step--1); color: var(--ink-soft); margin-top: 10px; }

.btn {
  display: inline-block; text-decoration: none; font-size: var(--step--1); letter-spacing: 0.12em; text-transform: uppercase;
  padding: 14px 22px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); transition: background .2s, color .2s;
}
.btn:hover { background: transparent; color: var(--ink); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--paper); }

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding-block: 48px 40px; font-size: var(--step--1); color: var(--ink-soft); }
.site-footer .wrap { display: grid; gap: 24px; grid-template-columns: 1fr; }
.site-footer .logo { color: var(--ink); }
.foot-links { display: flex; gap: 24px; flex-wrap: wrap; }
.foot-links a { text-decoration: none; }
.foot-links a:hover { text-decoration: underline; }
.disclosure { max-width: 70ch; }
@media (min-width: 800px) { .site-footer .wrap { grid-template-columns: 1fr auto; align-items: end; } .disclosure { grid-column: 1 / -1; } }

@media (prefers-reduced-motion: no-preference) {
  .zoom img { transition: transform 1.2s cubic-bezier(.2,.6,.2,1); }
  .zoom:hover img { transform: scale(1.035); }
}
.zoom { overflow: hidden; }