:root {
  --paper: oklch(0.992 0.004 85);
  --paper-2: oklch(0.965 0.008 80);
  --paper-3: oklch(0.88 0.012 75);
  --ink: oklch(0.22 0.012 70);
  --ink-soft: oklch(0.45 0.012 70);
  --rule: oklch(0.78 0.012 75);
  --accent: oklch(0.45 0.04 35);

  --serif: "Cormorant Garamond", "EB Garamond", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

.serif { font-family: var(--serif); font-weight: 400; letter-spacing: -0.005em; }
.kicker { font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); }

/* nav */
.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 28px 56px;
  border-bottom: 1px solid var(--rule);
  position: relative; z-index: 50;
}
.nav-brand { font-family: var(--serif); font-size: 22px; letter-spacing: 0.01em; }
.nav-brand .small { font-family: var(--sans); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); display: block; margin-top: 2px; }
.nav-links { display: flex; gap: 36px; font-size: 14px; }
.nav-links a { color: var(--ink); }
.nav-links a.active { color: var(--accent); }
.nav-meta { display: flex; gap: 20px; align-items: center; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.nav-meta .lang.active { color: var(--ink); }

@media (max-width: 880px) {
  .nav { padding: 18px 20px; }
  .nav-links, .nav-meta { display: none; }
}

/* footer */
.footer {
  border-top: 1px solid var(--rule);
  padding: 56px;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 48px;
  font-size: 13px; color: var(--ink-soft);
}
.footer h5 { font-family: var(--sans); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 16px; color: var(--ink); font-weight: 500; }
.footer p { margin-bottom: 8px; }
.footer .signup { display: flex; gap: 0; border-bottom: 1px solid var(--ink); padding-bottom: 6px; }
.footer .signup input { flex: 1; background: none; border: none; outline: none; font: inherit; color: var(--ink); }
.footer .signup button { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }

@media (max-width: 880px) {
  .footer { grid-template-columns: 1fr; padding: 32px 20px; gap: 28px; }
}

/* paper-frame */
.paper-frame {
  background: #fff;
  padding: clamp(20px, 4%, 40px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 18px 40px -28px rgba(40,30,20,0.18);
  display: flex; align-items: center; justify-content: center;
}
.paper-frame img { width: 100%; height: auto; }

/* status pills */
.tag {
  display: inline-block;
  font-family: var(--sans); font-size: 10px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  padding: 4px 8px; border: 1px solid currentColor;
  color: var(--ink-soft);
}
.tag.sold { color: var(--accent); }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-size: 13px; letter-spacing: 0.06em;
  padding: 14px 24px;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
  transition: background .2s ease, color .2s ease;
  cursor: pointer;
  text-align: center;
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn.primary { background: var(--ink); color: var(--paper); }
.btn.primary:hover { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.btn.primary:disabled { background: var(--ink); color: var(--paper); }
.btn .arrow { margin-left: 10px; }

/* shared */
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 56px; }
.measure { max-width: 60ch; }
hr.rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }

/* tonal series accents — applied to body via JS so the whole page tints */
body.tone-arkiv      { background: oklch(0.965 0.012 80); }
body.tone-norden     { background: oklch(0.97 0.012 110); }
body.tone-bohuslan   { background: oklch(0.975 0.012 230); }
body.tone-balett     { background: oklch(0.985 0.008 50); }
body.tone-marin-yta  { background: oklch(0.97 0.014 215); }
body.tone-marin-djup { background: oklch(0.955 0.016 235); }
body.tone-mystik     { background: oklch(0.965 0.014 295); }
body.tone-menagerie  { background: oklch(0.975 0.012 90); }
/* legacy class form still works */
.tone-marin-djup { background: oklch(0.955 0.016 235); }
.tone-balett    { background: oklch(0.985 0.008 50); }
.tone-mystik    { background: oklch(0.965 0.014 295); }
.tone-norden    { background: oklch(0.97 0.012 110); }
.tone-bohuslan  { background: oklch(0.975 0.012 230); }
.tone-arkiv     { background: oklch(0.965 0.012 80); }
.tone-marin-yta { background: oklch(0.97 0.014 215); }
.tone-menagerie { background: oklch(0.975 0.012 90); }

/* responsive scaffolds the React pages opt into via CSS class */
.page-grid-2 { display: grid; gap: 80px; }
@media (max-width: 880px) {
  .page-grid-2 { gap: 32px; }
  .wrap { padding: 0 20px; }
  .nav { padding: 18px 20px; }

  /* aggressive mobile reflow — beats inline styles on pages without mobile branches */
  body section[style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 32px !important; }
  body section[style*="padding"] { padding-left: 20px !important; padding-right: 20px !important; }
  body section[style*="padding-top"] { padding-top: 40px !important; padding-bottom: 40px !important; }
  body div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 32px !important; }
  body div[style*="position: sticky"] { position: static !important; }
  body h1.serif[style] { font-size: 36px !important; }
  body h2.serif[style] { font-size: 26px !important; }
  body img[style*="aspect-ratio"] { width: 100% !important; }
  body section[style*="max-width"] > div[style*="display: grid"] { grid-template-columns: 1fr !important; }
  body section[style*="margin: 0 auto"] { padding-left: 20px !important; padding-right: 20px !important; }
}