/* self-hosted fonts (restored after polish strip) */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: optional;
  src: url(../fonts/PlayfairDisplay-400-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: optional;
  src: url(../fonts/PlayfairDisplay-400-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 600;
  font-display: optional;
  src: url(../fonts/PlayfairDisplay-600-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 600;
  font-display: optional;
  src: url(../fonts/PlayfairDisplay-600-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url(../fonts/PlayfairDisplay-400-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url(../fonts/PlayfairDisplay-400-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url(../fonts/PlayfairDisplay-500-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url(../fonts/PlayfairDisplay-500-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url(../fonts/PlayfairDisplay-600-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url(../fonts/PlayfairDisplay-600-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url(../fonts/PlayfairDisplay-700-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url(../fonts/PlayfairDisplay-700-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   Kupür Atölyesi — editorial newspaper aesthetic
   ============================================================ */

:root {
  --bg: #F4F1EA;
  --surface: #FBFAF6;
  --surface-2: #ECE7DB;
  --ink: #1A1815;
  --ink-soft: #423D36;
  --muted: #5C564B;
  --accent: #C0342B;
  --accent-text: #A2281F;
  --accent-2: #8A8578;
  --line: rgba(26, 24, 21, 0.15);
  --line-strong: rgba(26, 24, 21, 0.34);
  --paper-edge: rgba(26, 24, 21, 0.06);

  --serif-display: 'Playfair Display', 'Georgia', 'Times New Roman', serif;
  --serif-body: 'Georgia', 'Times New Roman', 'Cambria', serif;
  --mono: 'Courier New', 'Consolas', monospace;

  --container: 1180px;
  --pad: clamp(20px, 5vw, 64px);
  --header-h: 74px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  interpolate-size: allow-keywords;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

html, body {
  margin: 0;
  overflow-x: hidden;
  max-width: 100vw;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif-body);
  font-size: clamp(16px, 1.05vw + 13px, 18px);
  line-height: 1.62;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

figure, figcaption, blockquote, dd, dl { margin: 0; }
img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--serif-display);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--ink);
}

a { color: var(--accent-text); text-decoration: none; }
a:hover { color: var(--ink); }

p { overflow-wrap: anywhere; word-break: break-word; }

::selection { background: var(--accent); color: var(--surface); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

.section { padding-block: clamp(56px, 8vw, 108px); }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 2000;
  background: var(--ink); color: var(--surface);
  padding: 10px 16px; border-radius: 4px;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; color: var(--surface); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- Shared type helpers ---------- */
.eyebrow {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.72rem;
  color: var(--accent-text);
  margin: 0 0 14px;
  display: inline-block;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 26px; height: 1px;
  background: var(--accent);
  vertical-align: middle;
  margin-right: 10px;
}
.eyebrow-light { color: #E9B7B2; }
.eyebrow-light::before { background: #E9B7B2; }

.section-title {
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  font-weight: 800;
}
.section-title-light { color: var(--surface); }
.section-intro {
  max-width: 58ch;
  color: var(--ink-soft);
  margin: 18px 0 0;
}
.section-head { margin-bottom: clamp(30px, 4vw, 52px); max-width: 760px; }

.num { font-family: var(--mono); font-weight: 700; letter-spacing: 0; }

.lead { font-size: clamp(1.05rem, 1.4vw, 1.28rem); line-height: 1.6; color: var(--ink-soft); }

/* Drop cap with ink-bleed */
.dropcap::first-letter {
  font-family: var(--serif-display);
  font-weight: 900;
  float: left;
  font-size: 4.6em;
  line-height: 0.78;
  padding: 0.04em 0.1em 0 0;
  margin-right: 0.04em;
  color: var(--accent-text);
  text-shadow: 0 0 1px rgba(162, 40, 31, 0.25);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: background .22s var(--ease), color .22s var(--ease),
              transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
  text-align: center;
}
.btn-primary {
  background: var(--accent);
  color: var(--surface);
  box-shadow: 0 8px 22px -14px rgba(162, 40, 31, 0.9);
}
.btn-primary:hover, .btn-primary:focus-visible {
  background: var(--ink);
  color: var(--surface);
  transform: translateY(-2px);
}
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn-ghost:hover, .btn-ghost:focus-visible {
  background: var(--ink);
  color: var(--surface);
  border-color: var(--ink);
  transform: translateY(-2px);
}
.btn-ghost-light {
  color: var(--surface);
  border-color: rgba(251, 250, 246, 0.55);
}
.btn-ghost-light:hover, .btn-ghost-light:focus-visible {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--surface);
}

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1080;
  background: rgba(244, 241, 234, 0.92);
  border-bottom: 1px solid transparent;
  transition: background .24s var(--ease), box-shadow .24s var(--ease), border-color .24s var(--ease);
  backdrop-filter: saturate(1.2);
}
.site-header.scrolled {
  background: rgba(244, 241, 234, 0.98);
  box-shadow: 0 8px 24px -18px rgba(0, 0, 0, 0.4);
  border-bottom-color: var(--line);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
}
.brand { display: flex; flex-direction: column; line-height: 1; color: var(--ink); }
.brand:hover { color: var(--ink); }
.brand-mark {
  font-family: var(--serif-display);
  font-weight: 900;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
}
.brand-sub {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
}

.nav-desktop { display: none; align-items: center; gap: clamp(16px, 2vw, 30px); }
.nav-desktop a {
  position: relative;
  font-family: var(--mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  padding: 6px 0;
}
.nav-desktop a::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 0; height: 2px; background: var(--accent);
  transition: width .24s var(--ease);
}
.nav-desktop a:hover { color: var(--ink); }
.nav-desktop a:hover::after,
.nav-desktop a.is-active::after { width: 100%; }
.nav-desktop a.is-active { color: var(--ink); }
.nav-desktop .nav-cta {
  background: var(--ink);
  color: var(--surface);
  padding: 10px 18px;
  border-radius: 2px;
}
.nav-desktop .nav-cta::after { display: none; }
.nav-desktop .nav-cta:hover,
.nav-desktop .nav-cta.is-active { background: var(--accent); color: var(--surface); }

/* Hamburger */
.nav-toggle {
  position: relative;
  z-index: 1100;
  width: 46px; height: 46px;
  display: inline-flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
  background: transparent; border: 1px solid var(--line-strong);
  border-radius: 3px; cursor: pointer;
}
.nav-toggle span {
  width: 22px; height: 2px; background: var(--ink);
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Drawer */
.drawer-backdrop {
  position: fixed; inset: 0; z-index: 1040;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0; transition: opacity .24s var(--ease);
}
.drawer-backdrop.is-open { opacity: 1; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(360px, 92vw);
  z-index: 1050;
  background: var(--surface);
  border-left: 1px solid var(--line);
  transform: translateX(100%);
  transition: transform .32s var(--ease);
  padding: calc(var(--header-h) + 20px) 30px 30px;
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.drawer.is-open { transform: translateX(0); box-shadow: -20px 0 50px -30px rgba(0,0,0,.5); }
.drawer-eyebrow {
  font-family: var(--mono); text-transform: uppercase;
  letter-spacing: 0.2em; font-size: 0.7rem; color: var(--muted); margin: 0 0 10px;
}
.drawer-nav { display: flex; flex-direction: column; gap: 4px; }
.drawer-nav a {
  font-family: var(--serif-display);
  font-size: 1.5rem; font-weight: 700;
  color: var(--ink); padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.drawer-nav a:hover { color: var(--accent-text); }
.drawer-cta {
  margin-top: 18px; font-family: var(--mono); font-size: 0.82rem;
  border-bottom: none; justify-content: center;
}
.drawer-cta:hover { color: var(--surface); }
.drawer-foot {
  margin-top: auto; padding-top: 24px;
  font-size: 0.85rem; color: var(--muted); line-height: 1.5;
}

main { padding-top: var(--header-h); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: min(88vh, 780px);
  display: flex; align-items: flex-end;
  overflow: hidden;
  color: var(--surface);
  isolation: isolate;
}
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: center 30%;
  animation: heroZoom 18s ease-out both;
}
@keyframes heroZoom { from { transform: scale(1.08); } to { transform: scale(1); } }
.hero-scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(15, 13, 11, 0.92) 0%, rgba(15, 13, 11, 0.55) 38%, rgba(15, 13, 11, 0.35) 70%, rgba(15, 13, 11, 0.5) 100%);
}
.hero-sheen {
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 40%), rgba(255, 244, 225, 0.14), transparent 60%);
  mix-blend-mode: screen;
  pointer-events: none;
  transition: opacity .4s var(--ease);
}
.hero-inner { padding-block: clamp(48px, 9vw, 96px); position: relative; }
.hero-title {
  font-size: clamp(2.9rem, 9.2vw, 7rem);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 6px 0 0;
  color: var(--surface);
  text-shadow: 0 2px 30px rgba(0,0,0,.4);
}
.hero-title .line { display: block; }
.hero-title .line-accent { font-style: italic; color: #F1C9C4; }
.hero-rule {
  border: none; height: 2px; width: 130px;
  background: var(--accent); margin: 26px 0;
}
.hero-sub {
  font-size: clamp(1.05rem, 1.8vw, 1.4rem);
  max-width: 46ch; color: rgba(251, 250, 246, 0.92);
  line-height: 1.5;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.trust-strip {
  list-style: none; padding: 0; margin: 34px 0 0;
  display: flex; flex-wrap: wrap; gap: 10px 22px;
  font-family: var(--mono); text-transform: uppercase;
  letter-spacing: 0.09em; font-size: 0.72rem;
  color: rgba(251, 250, 246, 0.9);
}
.trust-strip li { position: relative; padding-left: 18px; }
.trust-strip li::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 7px; height: 7px; margin-top: -3.5px;
  background: var(--accent); border-radius: 50%;
}
/* torn/deckle bottom edge */
.hero-deckle {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 22px; z-index: 1;
  background: var(--bg);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 7px, transparent 7px 15px);
  mask: repeating-linear-gradient(90deg, #000 0 7px, transparent 7px 15px);
  -webkit-mask-size: 100% 100%;
}

/* ---------- Manifesto ---------- */
.manifesto {
  background: var(--bg);
}
.manifesto-grid {
  display: grid; gap: clamp(30px, 5vw, 64px);
  grid-template-columns: 1fr;
}
.manifesto-lead .section-title { font-size: clamp(2.1rem, 5vw, 3.6rem); }
.manifesto-lead .lead { margin-top: 22px; }
.values { list-style: none; padding: 0; margin: 0; display: grid; gap: 22px; }
.value {
  border-top: 2px solid var(--ink);
  padding-top: 18px;
}
.value-no {
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.12em;
  color: var(--accent-text); display: block; margin-bottom: 8px;
}
.value h3 { font-size: 1.35rem; margin-bottom: 8px; }
.value p { color: var(--ink-soft); margin: 0; font-size: 0.98rem; }

/* ---------- Tarih bulucu ---------- */
.finder {
  background:
    linear-gradient(rgba(26,24,21,0.02), rgba(26,24,21,0.02)),
    var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.finder-head { max-width: 720px; margin-bottom: 34px; }
.finder-panel {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(22px, 3vw, 40px);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: clamp(22px, 3vw, 40px);
  box-shadow: 0 30px 60px -50px rgba(0,0,0,.6);
}
.finder-form { display: grid; gap: 18px; align-content: start; }
.finder-form .field { display: grid; gap: 8px; }
.finder-form label {
  font-family: var(--mono); text-transform: uppercase;
  letter-spacing: 0.1em; font-size: 0.72rem; color: var(--ink-soft);
}
.finder-form input[type="date"],
.finder-form select {
  font-family: var(--serif-body); font-size: 1.05rem;
  padding: 13px 14px; border: 1px solid var(--line-strong);
  border-radius: 3px; background: var(--surface); color: var(--ink);
  width: 100%;
}
.finder-form input:focus, .finder-form select:focus {
  border-color: var(--accent); outline: none;
  box-shadow: 0 0 0 3px rgba(192, 52, 43, 0.14);
}
.field-hint { font-size: 0.82rem; color: var(--muted); margin: 0; }
.finder-submit { margin-top: 4px; }

.finder-result {
  border-left: 2px dashed var(--line-strong);
  padding-left: clamp(18px, 3vw, 30px);
  min-height: 220px;
  display: flex; align-items: center;
}
.finder-placeholder { color: var(--muted); text-align: center; margin: 0 auto; }
.finder-ph-mark { font-size: 2.4rem; color: var(--accent-2); display: block; margin-bottom: 8px; }
.finder-card { width: 100%; display: grid; grid-template-columns: 96px 1fr; gap: 18px; align-items: start; }
.finder-card .fc-thumb {
  width: 96px; aspect-ratio: 3/4; object-fit: cover;
  border: 1px solid var(--line-strong); border-radius: 2px;
  box-shadow: 3px 4px 0 var(--paper-edge);
}
.fc-date { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.08em; color: var(--accent-text); margin: 0 0 4px; text-transform: uppercase; }
.fc-title { font-size: 1.3rem; margin: 0 0 8px; }
.fc-desc { font-size: 0.92rem; color: var(--ink-soft); margin: 0 0 12px; }
.fc-price { font-family: var(--mono); font-weight: 700; font-size: 1.05rem; margin: 0 0 14px; color: var(--ink); }
.fc-price span { color: var(--muted); font-weight: 400; font-size: 0.82rem; }
.finder-warn {
  width: 100%;
  border-left: 3px solid var(--accent);
  background: rgba(192, 52, 43, 0.06);
  padding: 16px 18px; border-radius: 0 4px 4px 0;
}
.finder-warn strong { display: block; font-family: var(--serif-display); font-size: 1.15rem; margin-bottom: 6px; color: var(--accent-text); }
.finder-warn p { margin: 0; color: var(--ink-soft); font-size: 0.94rem; }
.finder-note { margin-top: 20px; font-size: 0.82rem; color: var(--muted); }

/* ---------- Headlines ---------- */
.headlines-grid {
  display: grid; gap: clamp(20px, 2.6vw, 34px);
  grid-template-columns: 1fr;
}
.hl-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px; overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease);
}
.hl-card:hover { transform: translateY(-5px); box-shadow: 0 24px 44px -34px rgba(0,0,0,.6); }
.hl-media { position: relative; overflow: hidden; }
.hl-media img { width: 100%; aspect-ratio: 3/2; object-fit: cover; transition: transform .5s var(--ease); }
.hl-card:hover .hl-media img { transform: scale(1.04); }
.cut-line {
  position: absolute; left: 0; right: 0; bottom: 12px;
  font-family: var(--mono); font-size: 0.7rem; color: rgba(251,250,246,0.85);
  letter-spacing: 2px; padding-left: 12px; text-shadow: 0 1px 4px rgba(0,0,0,.6);
  pointer-events: none;
}
.hl-body { padding: 20px 22px 24px; }
.hl-date { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-text); margin: 0 0 6px; }
.hl-body h3 { font-size: 1.4rem; margin-bottom: 8px; font-style: italic; }
.hl-body p { font-size: 0.94rem; color: var(--ink-soft); margin: 0; }

/* ---------- Restore ---------- */
.restore { background: var(--surface-2); }
.restore-grid { display: grid; grid-template-columns: 1fr; gap: clamp(30px, 5vw, 60px); align-items: start; }
.restore-media { display: grid; gap: 20px; }
.restore-fig img {
  width: 100%; object-fit: cover; border-radius: 4px;
  border: 1px solid var(--line);
  box-shadow: 6px 8px 0 var(--paper-edge);
}
.restore-fig figcaption {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em;
  color: var(--muted); margin-top: 10px; text-transform: uppercase;
}
.restore-fig--detail { max-width: 62%; }
.restore-copy .lead { margin: 20px 0 26px; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; counter-reset: st; }
.step {
  display: grid; grid-template-columns: 110px 1fr; gap: 16px;
  align-items: start; padding: 16px 0;
  border-top: 1px solid var(--line);
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step-time {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em;
  color: var(--accent-text); text-transform: uppercase; padding-top: 3px;
}
.step h3 { font-size: 1.12rem; margin-bottom: 4px; }
.step p { margin: 0; font-size: 0.92rem; color: var(--ink-soft); }
.step > div { min-width: 0; }

/* ---------- Collection / frames ---------- */
.frames-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 30px);
  margin-bottom: clamp(40px, 6vw, 70px);
}
.frame-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 4px; overflow: hidden;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease);
}
.frame-card:hover { transform: translateY(-5px); box-shadow: 0 22px 42px -34px rgba(0,0,0,.6); }
.frame-media img { width: 100%; aspect-ratio: 5/6; object-fit: cover; }
.frame-card figcaption { padding: 16px 18px; display: flex; flex-direction: column; gap: 3px; }
.frame-name { font-family: var(--serif-display); font-weight: 700; font-size: 1.1rem; }
.frame-desc { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.05em; color: var(--muted); text-transform: uppercase; }

.pricing {
  border: 1px solid var(--line-strong); border-radius: 6px;
  padding: clamp(22px, 3vw, 38px);
  background: var(--surface);
}
.pricing-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.pricing-head h3 { font-size: 1.6rem; }
.pricing-tag { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-text); margin: 0; }
.price-table { width: 100%; border-collapse: collapse; }
.price-table th, .price-table td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: 0.94rem; vertical-align: top; }
.price-table thead th { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); border-bottom: 2px solid var(--ink); }
.price-table tbody th { font-family: var(--serif-display); font-weight: 700; font-size: 1rem; }
.price-table td.num { font-family: var(--mono); font-weight: 700; white-space: nowrap; color: var(--ink); }
.price-notes { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; font-size: 0.9rem; color: var(--ink-soft); }
.price-notes strong { color: var(--ink); font-family: var(--serif-display); }

/* ---------- Corporate ---------- */
.corporate { padding: 0; }
.corporate-band { background: var(--ink); color: var(--surface); }
.corporate-grid {
  display: grid; grid-template-columns: 1fr; gap: clamp(30px, 5vw, 60px);
  align-items: center; padding-block: clamp(56px, 8vw, 100px);
}
.corporate-copy p { color: rgba(251, 250, 246, 0.86); }
.corporate-list { list-style: none; padding: 0; margin: 24px 0; display: grid; gap: 12px; }
.corporate-list li { position: relative; padding-left: 22px; color: rgba(251,250,246,0.92); }
.corporate-list li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; background: var(--accent); border-radius: 50%; }
.corporate-price { font-size: 1.1rem; margin: 24px 0; color: var(--surface); }
.corporate-price .num { font-size: 1.6rem; color: #F1C9C4; }
.corporate-price-note { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; color: rgba(251,250,246,0.6); }
.corporate-media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 4px; }

/* ---------- Testimonials ---------- */
.testimonials {
  background: var(--surface-2);
}
.ref-grid { display: grid; grid-template-columns: 1fr; gap: clamp(20px, 3vw, 34px); }
.ref {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 4px; padding: 28px 26px;
  position: relative;
}
.ref::before {
  content: "“"; font-family: var(--serif-display); font-weight: 900;
  font-size: 4rem; line-height: 1; color: var(--accent);
  position: absolute; top: 6px; left: 18px; opacity: 0.24;
}
.ref p { font-size: 1.02rem; line-height: 1.55; color: var(--ink); font-style: italic; margin: 14px 0 20px; position: relative; }
.ref footer { border-top: 1px solid var(--line); padding-top: 14px; }
.ref cite { font-family: var(--serif-display); font-weight: 700; font-style: normal; font-size: 1.05rem; display: block; }
.ref footer span { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.05em; color: var(--muted); text-transform: uppercase; }

/* ---------- FAQ ---------- */
.faq-wrap { max-width: 860px; }
.faq-list { border-top: 2px solid var(--ink); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  cursor: pointer; list-style: none;
  font-family: var(--serif-display); font-weight: 700;
  font-size: clamp(1.05rem, 1.6vw, 1.28rem);
  padding: 22px 44px 22px 4px; position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; position: absolute; right: 6px; top: 50%;
  transform: translateY(-50%); font-family: var(--mono);
  font-size: 1.6rem; color: var(--accent-text); transition: transform .3s var(--ease);
}
.faq-item[open] summary::after { content: "–"; }
.faq-body {
  height: 0; overflow: hidden;
  padding: 0 44px 0 4px;
  transition: height .36s cubic-bezier(.4,0,.2,1), padding-block-end .36s cubic-bezier(.4,0,.2,1);
}
.faq-item[open] .faq-body { height: auto; padding-block-end: 24px; }
.faq-body p { margin: 0; color: var(--ink-soft); }
@media (prefers-reduced-motion: reduce) { .faq-body { transition: none; } }

/* ---------- Notes ---------- */
.notes-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.notes-list li {
  display: grid; grid-template-columns: 150px 1fr; gap: 18px;
  align-items: baseline; padding: 18px 0; border-top: 1px solid var(--line);
}
.notes-list li:last-child { border-bottom: 1px solid var(--line); }
.note-date { font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.06em; color: var(--accent-text); text-transform: uppercase; }
.notes-list p { margin: 0; color: var(--ink-soft); font-size: 0.98rem; }

/* ---------- Contact ---------- */
.contact { background: var(--surface); border-top: 1px solid var(--line); }
.contact-grid { display: grid; grid-template-columns: 1fr; gap: clamp(30px, 5vw, 60px); align-items: start; }
.contact-list { display: grid; gap: 4px; margin-top: 28px; }
.contact-list > div {
  display: grid; grid-template-columns: 110px 1fr; gap: 16px;
  padding: 14px 0; border-top: 1px solid var(--line); align-items: start;
}
.contact-list dt { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.contact-list dd { margin: 0; color: var(--ink); }
.contact-list a { color: var(--accent-text); }
.contact-list a:hover { color: var(--ink); }

/* Form */
.form { display: grid; gap: 18px; }
.field-row { display: grid; grid-template-columns: 1fr; gap: 18px; }
.field { display: grid; gap: 7px; min-width: 0; }
.field label { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.field label span { color: var(--accent-text); }
.field input, .field select, .field textarea {
  font-family: var(--serif-body); font-size: 1rem;
  padding: 13px 14px; border: 1px solid var(--line-strong);
  border-radius: 3px; background: var(--bg); color: var(--ink); width: 100%;
}
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(192, 52, 43, 0.14);
}
.kvkk { grid-template-columns: auto 1fr; align-items: start; gap: 12px; }
.field.kvkk span { font-family: var(--serif-body); font-size: 0.9rem; text-transform: none; letter-spacing: 0; color: var(--ink-soft); }
.field input[type="checkbox"] {
  appearance: auto; -webkit-appearance: auto;
  width: 18px; height: 18px; min-width: 18px; min-height: 18px;
  padding: 0; border: 0; margin: 2px 0 0; accent-color: var(--accent);
}
.honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }
.form-submit { justify-self: start; margin-top: 6px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: rgba(251, 250, 246, 0.82); padding-top: clamp(48px, 6vw, 72px); }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 40px; padding-bottom: 44px; }
.footer-brand .brand-mark { color: var(--surface); font-size: 1.5rem; display: block; margin-bottom: 12px; }
.footer-brand p { font-size: 0.92rem; color: rgba(251, 250, 246, 0.72); max-width: 40ch; }
.footer-stat { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.04em; color: rgba(251,250,246,0.6); margin-top: 14px; }
.footer-col { display: flex; flex-direction: column; }
.footer-col h3, .footer-contact h3 {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: #E9B7B2; margin: 0 0 16px; font-weight: 700;
}
.footer-col a { display: block; color: rgba(251, 250, 246, 0.82); padding: 6px 0; font-size: 0.92rem; }
.footer-col a:hover { color: var(--surface); }
.footer-contact p { font-size: 0.9rem; color: rgba(251, 250, 246, 0.72); margin: 0 0 12px; line-height: 1.55; }
.footer-contact a { color: rgba(251, 250, 246, 0.82); }
.footer-contact a:hover { color: var(--surface); }
.footer-bottom {
  border-top: 1px solid rgba(251, 250, 246, 0.14);
  padding: 22px 0 30px;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em;
  color: rgba(251, 250, 246, 0.56);
}
.footer-legal a { display: inline; color: rgba(251, 250, 246, 0.7); }
.footer-legal a:hover { color: var(--surface); }

/* ---------- Cookie banner ---------- */
.cookie-banner {
  position: fixed; bottom: 16px; left: 16px; right: 16px;
  max-width: 520px; margin: 0 auto; z-index: 9999;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: 8px;
  padding: 22px 24px; box-shadow: 0 30px 60px -30px rgba(0,0,0,.6);
  transform: translateY(140%); opacity: 0;
  transition: transform .28s var(--ease), opacity .24s var(--ease);
}
.cookie-banner.is-visible { transform: translateY(0); opacity: 1; }
.cookie-title { font-size: 1.2rem; margin: 0 0 8px; }
.cookie-desc { font-size: 0.9rem; color: var(--ink-soft); margin: 0 0 16px; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-actions .btn { flex: 1 1 auto; min-height: 44px; font-size: 0.76rem; padding: 12px 16px; }

/* Cookie settings panel */
.cookie-settings-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(15, 13, 11, 0.6);
  display: grid; place-items: center; padding: 20px;
}
.cookie-settings {
  background: var(--surface); color: var(--ink);
  border-radius: 10px; padding: clamp(22px, 3vw, 34px);
  max-width: 500px; width: 100%; max-height: 90vh; overflow-y: auto;
  border: 1px solid var(--line-strong);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.7);
}
.cookie-settings h2 { font-size: 1.4rem; margin: 0 0 8px; }
.cs-desc { font-size: 0.9rem; color: var(--ink-soft); margin: 0 0 20px; }
.cs-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 0; border-top: 1px solid var(--line);
}
.cs-row span { display: flex; flex-direction: column; gap: 3px; }
.cs-row strong { font-family: var(--serif-display); font-size: 1rem; }
.cs-row small { font-size: 0.8rem; color: var(--muted); }
.cs-row input[type="checkbox"] {
  appearance: auto; -webkit-appearance: auto;
  width: 20px; height: 20px; min-width: 20px; accent-color: var(--accent); flex-shrink: 0;
}
.cs-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.cs-actions .btn { flex: 1 1 auto; min-height: 44px; }

/* ---------- Reveal ---------- */
.reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.reveal.is-in { opacity: 1; transform: none; }
.hero .reveal { transition-duration: .8s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero-media img { animation: none; }
}
html.no-js .reveal { opacity: 1; transform: none; }

/* ---------- Tables (global scroll wrap) ---------- */
.table-scroll {
  display: block; width: 100%; max-width: 100%; min-width: 0;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  margin: 18px 0;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.table-scroll > table { margin: 0 !important; min-width: 480px; width: 100%; }
:where(*:has(> .table-scroll), *:has(> * > .table-scroll), *:has(> * > * > .table-scroll)) { min-width: 0; }

/* ---------- Generic content page (legal / thanks) ---------- */
.page-hero {
  background: var(--ink); color: var(--surface);
  padding-block: clamp(56px, 9vw, 120px);
  position: relative; overflow: hidden;
}
.page-hero .eyebrow { color: #E9B7B2; }
.page-hero .eyebrow::before { background: #E9B7B2; }
.page-hero h1 { color: var(--surface); font-size: clamp(2.2rem, 5.5vw, 4rem); font-weight: 800; }
.page-hero p { color: rgba(251, 250, 246, 0.82); max-width: 56ch; margin-top: 16px; }
.page-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 18px;
  background: var(--bg);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 7px, transparent 7px 15px);
  mask: repeating-linear-gradient(90deg, #000 0 7px, transparent 7px 15px);
}
.prose { max-width: 780px; }
.prose h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 40px 0 14px; }
.prose h3 { font-size: 1.2rem; margin: 26px 0 10px; }
.prose p, .prose li { color: var(--ink-soft); }
.prose ul, .prose ol { padding-left: 22px; display: grid; gap: 8px; margin: 14px 0; }
.prose a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--ink); }
.prose .updated { font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }

/* Thank you */
.thanks { text-align: center; padding-block: clamp(70px, 12vw, 150px); }
.thanks-mark { font-size: 3rem; color: var(--accent); margin-bottom: 10px; }
.thanks h1 { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 800; }
.thanks p { color: var(--ink-soft); max-width: 48ch; margin: 18px auto 32px; }

/* Contact page channel cards */
.channels-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(16px, 2.4vw, 26px); margin-top: 10px;
}
.channel-card {
  border: 1px solid var(--line); border-radius: 12px; padding: 24px;
  background: var(--surface); transition: transform .24s var(--ease), box-shadow .24s var(--ease);
}
.channel-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -30px rgba(0,0,0,.5); }
.channel-badge {
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(192, 52, 43, 0.12); color: var(--accent-text);
  display: grid; place-items: center; font-family: var(--serif-display);
  font-weight: 900; font-size: 1.2rem; margin-bottom: 16px;
}
.channel-card h3 { font-size: 1.1rem; margin-bottom: 6px; }
.channel-card a { color: var(--accent-text); font-size: 1.02rem; word-break: break-word; }
.channel-card a:hover { color: var(--ink); }
.channel-card .channel-sub { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 8px 0 0; }

/* Team */
.team-grid { display: grid; grid-template-columns: 1fr; gap: clamp(20px, 3vw, 34px); }
.team-card { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.team-card img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.team-body { padding: 22px 24px; }
.team-body h3 { font-size: 1.3rem; }
.team-role { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text); margin: 4px 0 12px; }
.team-body p { font-size: 0.94rem; color: var(--ink-soft); margin: 0; }
.team-avatar {
  display: grid; place-items: center;
  aspect-ratio: 16 / 7;
  background:
    radial-gradient(120% 140% at 20% 0%, rgba(192, 52, 43, 0.10), transparent 60%),
    var(--surface-2);
  border-bottom: 1px solid var(--line);
  font-family: var(--serif-display); font-weight: 900;
  font-size: 2.4rem; letter-spacing: 0.04em;
  color: var(--accent-text);
}

/* Contact CTA (replaces on-page form) */
.contact-cta {
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 8px; padding: clamp(28px, 4vw, 44px);
  box-shadow: 0 30px 60px -50px rgba(0,0,0,.6);
  align-self: start;
}
.contact-cta-mark {
  display: inline-grid; place-items: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(192, 52, 43, 0.12); color: var(--accent-text);
  font-size: 1.5rem; margin-bottom: 18px;
}
.contact-cta h3 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 12px; }
.contact-cta p { color: var(--ink-soft); margin: 0 0 22px; }
.contact-cta .btn { width: 100%; }
.contact-cta-alt { font-size: 0.9rem; color: var(--muted); margin: 16px 0 0 !important; text-align: center; }
.contact-cta-alt a { color: var(--accent-text); }
.contact-cta-alt a:hover { color: var(--ink); }

/* Hours table for contact page */
.hours-grid { display: grid; gap: 6px; margin-top: 10px; }
.hours-grid > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); font-variant-numeric: tabular-nums; }
.hours-grid .day { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); }
.hours-grid .hrs { font-family: var(--mono); font-size: 0.85rem; color: var(--ink); }

/* ============================================================
   Responsive
   ============================================================ */
@media (min-width: 720px) {
  .manifesto-grid { grid-template-columns: 1.05fr 0.95fr; }
  .values { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr 1fr; }
  .headlines-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hl-card--wide { grid-column: 1 / -1; flex-direction: row; }
  .hl-card--wide .hl-media { flex: 1 1 55%; }
  .hl-card--wide .hl-media img { height: 100%; aspect-ratio: auto; min-height: 260px; }
  .hl-card--wide .hl-body { flex: 1 1 45%; align-self: center; }
  .hl-card--flat { grid-column: 1 / -1; flex-direction: row-reverse; }
  .hl-card--flat .hl-media { flex: 1 1 55%; }
  .hl-card--flat .hl-media img { height: 100%; aspect-ratio: auto; min-height: 240px; }
  .hl-card--flat .hl-body { flex: 1 1 45%; align-self: center; }
  .restore-grid { grid-template-columns: 0.9fr 1.1fr; }
  .finder-panel { grid-template-columns: 0.85fr 1.15fr; }
  .contact-grid { grid-template-columns: 0.9fr 1.1fr; }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; }
  .corporate-grid { grid-template-columns: 1.05fr 0.95fr; }
  .team-grid { grid-template-columns: repeat(3, 1fr); }
  .cookie-banner { left: 24px; right: auto; max-width: 420px; }
}

@media (min-width: 1024px) {
  .nav-desktop { display: flex; }
  .nav-toggle { display: none; }
  .frames-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ref-grid { grid-template-columns: repeat(3, 1fr); }
  :root { --header-h: 82px; }
}

@media (max-width: 719px) {
  .restore-fig--detail { max-width: 78%; margin-left: auto; }
  .step { grid-template-columns: 90px 1fr; gap: 12px; }
  .notes-list li { grid-template-columns: 1fr; gap: 4px; }
  .contact-list > div { grid-template-columns: 100px 1fr; }
  .footer-bottom { flex-direction: column; }
  .finder-result { border-left: none; border-top: 2px dashed var(--line-strong); padding-left: 0; padding-top: 24px; margin-top: 6px; }
}

@media (max-width: 480px) {
  .hl-card--wide, .hl-card--flat { flex-direction: column; }
  .frames-grid { grid-template-columns: 1fr 1fr; }
  .cookie-actions .btn { flex: 1 1 100%; }
  .finder-card { grid-template-columns: 72px 1fr; }
  .finder-card .fc-thumb { width: 72px; }
}

.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--accent);z-index:9998;transition:width 80ms linear;pointer-events:none}

/* ============================================================
   ✦ LUXURY NEWSPRINT COLLAGE OVERLAY — wall-to-wall cut-paper
   Continuous aged-newsprint substrate, gilt-foil decor toolkit,
   letterpress cut-paper cards, and the signature pinned scene
   "RESTORASYON KATLARI" (conservation strata, transparency+depth).
   ============================================================ */

/* --- sticky-fix: CLIP not hidden (body overflow-x:hidden breaks position:sticky) --- */
html{ overflow-x:clip; overflow-y:visible; }
body{ overflow-x:clip; overflow-y:visible; max-width:100vw; }

:root{
  /* ONE metallic gold */
  --gilt-hi:#e9cd8f; --gilt:#c2a259; --gilt-lo:#7c5f28;
  --gilt-grad:linear-gradient(135deg,#eccf90 0%,#c8a85c 24%,#7c5f28 50%,#c8a85c 76%,#efd79a 100%);
  --gold-line:rgba(150,116,52,.42);
  --paper:#f7f2e6; --paper-2:#efe7d4; --paper-ink:#2a2418;
  --mat:#fbf8f0; --matline:rgba(120,92,40,.30);
  --wax:#6f2b26; --news:#efe9db; --deep:#1a1815;
  /* deepen the loud red to a restrained oxblood ink */
  --accent:#7c2b25; --accent-text:#6f2620;
}

section, .hero, .site-header, .site-footer, .manifesto, .finder, .restore,
.headlines, .collection, .corporate, .testimonials, .faq, .notes, .contact { position:relative; }

/* --- CONTINUOUS AGED-NEWSPRINT SUBSTRATE (fixed) --- */
body{
  background-color:#efe9db;
  background-image:
    radial-gradient(120% 90% at 14% -6%, rgba(255,250,235,.7), transparent 46%),
    radial-gradient(120% 90% at 90% 22%, rgba(150,116,52,.055), transparent 44%),
    radial-gradient(100% 80% at 50% 112%, rgba(40,34,20,.07), transparent 60%),
    radial-gradient(rgba(40,38,30,.05) 1px, transparent 1.6px),
    repeating-linear-gradient(90deg, rgba(40,38,30,.045) 0 1px, transparent 1px 174px),
    repeating-linear-gradient(93deg, rgba(120,95,45,.014) 0 2px, transparent 2px 6px),
    linear-gradient(180deg,#f2ece0,#ece4d3 60%,#e6dcc8);
  background-size:auto,auto,auto,6px 6px,auto,auto,auto;
  background-attachment:fixed,fixed,fixed,fixed,fixed,fixed,fixed;
  background-position:0 0,0 0,0 0,2px 3px,0 0,0 0,0 0;
}
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  box-shadow:inset 0 0 200px rgba(60,46,18,.16), inset 0 0 0 8px rgba(120,95,45,.08);
  background:radial-gradient(130% 90% at 50% -8%, rgba(255,250,232,.5), transparent 55%);
}
main{ position:relative; z-index:2; }
section > .container, .corporate-band, .faq-wrap{ position:relative; z-index:4; }

/* --- neutralise every flat fill so the newsprint wall shows through --- */
.section, .manifesto, .finder, .restore, .testimonials, .contact,
.headlines, .collection, .notes, .faq{ background:transparent !important; }
.finder{ border-top:1px solid var(--gold-line) !important; border-bottom:1px solid var(--gold-line) !important; }
.contact{ border-top:1px solid var(--gold-line) !important; }
/* hairline gold rule where sections meet */
.section + .section::after,
.manifesto::after{
  content:""; position:absolute; left:0; right:0; top:0; height:1px; z-index:3; pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--gold-line) 16%,var(--gold-line) 84%,transparent);
}

/* header + footer = translucent newsprint zones with a picture-rail edge */
.site-header{ background:rgba(244,240,231,.82) !important; backdrop-filter:blur(9px) saturate(1.15);
  border-bottom:1px solid var(--gold-line) !important; }
.site-header.scrolled{ background:rgba(244,240,231,.95) !important; box-shadow:0 10px 30px -22px rgba(60,46,18,.5); }
.brand-mark{ position:relative; }
.brand-mark::after{ content:""; position:absolute; left:0; right:0; bottom:-3px; height:2px;
  background:var(--gilt-grad); border-radius:2px; opacity:.9; }

.corporate-band{ background-color:#1a1815 !important;
  background-image:
    radial-gradient(120% 90% at 50% -10%, rgba(194,162,89,.12), transparent 55%),
    radial-gradient(rgba(255,255,255,.03) 1px, transparent 1.5px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.028) 0 1px, transparent 1px 150px),
    linear-gradient(180deg,#211e19,#161410) !important;
  background-size:auto,7px 7px,auto,auto !important;
  border-block:2px solid var(--gilt) !important; }

.site-footer{ background-color:#1a1815 !important;
  background-image:
    radial-gradient(120% 90% at 50% -10%, rgba(194,162,89,.10), transparent 55%),
    radial-gradient(rgba(255,255,255,.025) 1px, transparent 1.5px),
    linear-gradient(180deg,#201d18,#141210) !important;
  background-size:auto,8px 8px,auto !important;
  border-top:2px solid var(--gilt) !important; }

/* --- EYEBROW → letterpress brass chip --- */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  background:linear-gradient(180deg,rgba(176,141,79,.16),rgba(176,141,79,.09));
  border:1px solid rgba(150,116,52,.30);
  padding:5px 12px; border-radius:2px; transform:rotate(-.6deg);
  box-shadow:2px 3px 0 rgba(90,70,30,.12);
}
.eyebrow::before{ background:var(--gilt) !important; }
.eyebrow-light{ color:#e9cd8f !important;
  background:linear-gradient(180deg,rgba(233,205,143,.18),rgba(233,205,143,.09)); border-color:rgba(233,205,143,.34); }
.eyebrow-light::before{ background:#e9cd8f !important; }

/* --- CARDS → gilt-framed clippings & letterpress cut-paper --- */
.hl-card, .frame-card{
  border:6px solid var(--gilt) !important; border-image:var(--gilt-grad) 1 !important;
  border-radius:0 !important; background:var(--mat) !important;
  box-shadow:inset 0 0 0 1px var(--matline), inset 0 0 0 3px rgba(255,255,255,.45),
    0 30px 46px -26px rgba(60,46,18,.5) !important;
}
.value, .ref, .contact-cta, .finder-panel, .pricing, .team-card, .channel-card{
  background:linear-gradient(180deg,var(--mat),var(--paper-2)) !important;
  border:1px solid var(--matline) !important; border-radius:2px !important;
  box-shadow:0 22px 40px -30px rgba(60,46,18,.44), inset 0 0 0 1px rgba(255,255,255,.4) !important;
}
.value{ padding:18px 20px 20px !important; border-top:3px solid var(--gilt) !important; }
.ref{ position:relative; }
.ref::before{ color:var(--gilt) !important; opacity:.4 !important; }
.faq-list{ border-top:2px solid var(--gilt) !important; }
.faq-item summary::after{ color:var(--accent-text) !important; }
.hl-body h3, .fc-title, .frame-name{ color:var(--ink); }

/* ============================================================
   DECOR SYSTEM  (.pm absolute · pointer-events:none)
   ============================================================ */
.pm{ position:absolute; pointer-events:none; z-index:1; }
.pm-decor{ left:0; right:0; width:100%; }

/* full-width hairline gold picture-rail / column rule */
.pm-rail{ height:7px; left:0; right:0; width:100%;
  background:linear-gradient(180deg, rgba(233,205,143,.5), rgba(124,95,40,.32) 48%, rgba(80,58,22,.32));
  box-shadow:0 3px 7px -3px rgba(60,46,18,.5), inset 0 1px 0 rgba(255,246,214,.6); }
.pm-rail::after{ content:""; position:absolute; left:0; right:0; top:7px; height:4px;
  background:linear-gradient(180deg, rgba(60,46,18,.2), transparent); }

/* gilt-framed clipping */
.pm-frame{ width:70px; height:90px; background:var(--mat);
  border:5px solid var(--gilt); border-image:var(--gilt-grad) 1;
  box-shadow:0 20px 30px -16px rgba(60,46,18,.5), inset 0 0 0 2px rgba(120,92,40,.24);
  transform:rotate(-3deg); }
.pm-frame::before{ content:""; position:absolute; inset:5px; border:1px solid var(--matline);
  background-image:repeating-linear-gradient(0deg, rgba(40,38,30,.12) 0 1px, transparent 1px 6px); opacity:.5; }
.pm-frame.wide{ width:100px; height:74px; }
.pm-frame.tall{ width:60px; height:104px; }

/* glassine / vellum tape */
.pm-tape{ width:80px; height:23px; background:rgba(176,141,79,.18);
  border:1px solid rgba(255,255,255,.42); box-shadow:0 4px 9px -6px rgba(60,46,18,.5);
  transform:rotate(-6deg); }
.pm-tape::before,.pm-tape::after{ content:""; position:absolute; top:0; bottom:0; width:6px;
  background:repeating-linear-gradient(180deg, rgba(60,46,18,.06) 0 2px, transparent 2px 4px); }
.pm-tape::before{ left:0 } .pm-tape::after{ right:0 }
.pm-tape.tp-gold{ background:rgba(194,162,89,.28); }
.pm-tape.tp-ink{ background:rgba(26,24,21,.12); }

/* torn newsprint scrap (with faint column lines) */
.pm-scrap{ width:88px; height:58px; background:var(--paper);
  box-shadow:0 12px 22px -13px rgba(60,46,18,.5);
  background-image:repeating-linear-gradient(0deg, rgba(40,38,30,.12) 0 1px, transparent 1px 6px);
  clip-path:polygon(2% 8%,18% 2%,40% 7%,62% 1%,86% 6%,99% 14%,97% 40%,100% 66%,95% 92%,74% 99%,50% 94%,28% 100%,8% 95%,1% 70%,4% 40%);
  transform:rotate(-4deg); }

/* dateline / byline slug card */
.pm-placard{ background:var(--paper); color:var(--paper-ink);
  font-family:var(--mono); font-size:10px; line-height:1.4; letter-spacing:.02em;
  padding:8px 12px 9px; max-width:170px;
  box-shadow:0 14px 24px -14px rgba(60,46,18,.5), inset 0 0 0 1px rgba(120,92,40,.16);
  transform:rotate(-1.4deg); }
.pm-placard b{ display:block; font-family:var(--serif-display); font-weight:800; font-size:11px;
  color:var(--accent-text); margin-bottom:2px; text-transform:uppercase; letter-spacing:.12em; }
.pm-placard i{ font-style:italic; color:var(--muted); }

/* cut headline strip */
.pm-strip{ background:var(--paper); color:var(--paper-ink);
  font-family:var(--serif-display); font-weight:800; font-size:15px; letter-spacing:.005em;
  padding:5px 13px; white-space:nowrap; box-shadow:0 10px 20px -12px rgba(60,46,18,.5);
  border-top:1px solid rgba(40,38,30,.16); border-bottom:1px solid rgba(40,38,30,.16);
  transform:rotate(-2deg); }
.pm-strip.ink{ background:var(--deep); color:var(--gilt-hi); border-color:rgba(0,0,0,.4); }
.pm-strip.italic{ font-style:italic; font-weight:600; }

/* newspaper column-rules patch */
.pm-col{ width:118px; height:150px; opacity:.5; transform:rotate(-1deg);
  background-image:
    repeating-linear-gradient(90deg, rgba(40,38,30,.18) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(0deg, rgba(40,38,30,.09) 0 4px, transparent 4px 7px); }

/* registration + crop ticks */
.pm-cross{ width:24px; height:24px; }
.pm-cross::before,.pm-cross::after{ content:""; position:absolute; background:rgba(150,116,52,.6); }
.pm-cross::before{ left:50%; top:0; width:1.5px; height:100%; transform:translateX(-50%); }
.pm-cross::after{ top:50%; left:0; height:1.5px; width:100%; transform:translateY(-50%); }
.pm-crop{ width:22px; height:22px; border-top:2px solid rgba(150,116,52,.55); border-left:2px solid rgba(150,116,52,.55); }
.pm-crop.br{ border-top:0; border-left:0; border-bottom:2px solid rgba(150,116,52,.55); border-right:2px solid rgba(150,116,52,.55); }

/* refined ransom cut-letter (gold-foil) */
.pm-letter{ width:30px; height:34px; display:grid; place-items:center;
  font-family:var(--serif-display); font-weight:800; font-size:19px; color:var(--paper-ink);
  background:var(--paper); box-shadow:0 8px 16px -10px rgba(60,46,18,.5); transform:rotate(-5deg); }
.pm-letter.foil{ background:var(--deep); color:var(--gilt-hi);
  text-shadow:0 1px 0 rgba(0,0,0,.4); }

/* halftone-dot newsprint patch */
.pm-dot{ width:54px; height:54px; opacity:.45; transform:rotate(6deg);
  background-image:radial-gradient(rgba(40,38,30,.5) 22%, transparent 24%);
  background-size:8px 8px; }

/* dateline stamp (oxblood ink) */
.pm-stamp{ font-family:var(--mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent-text); border:1.5px solid var(--accent-text); border-radius:3px;
  padding:5px 8px; opacity:.6; transform:rotate(-4deg); background:rgba(124,43,37,.045); }

/* folio number */
.pm-folio{ font-family:var(--mono); font-size:12px; letter-spacing:.22em; color:var(--accent-text); opacity:.66; }

/* spotlight glow */
.pm-glow{ width:230px; height:150px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,247,224,.5), transparent 72%); filter:blur(4px); }

/* wax seal */
.pm-seal{ width:64px; height:64px; border-radius:50%;
  background:radial-gradient(circle at 38% 34%, #8a3a33, var(--wax) 58%, #4e1c19 100%);
  box-shadow:0 12px 22px -10px rgba(70,20,16,.6), inset 0 2px 4px rgba(255,255,255,.18), inset 0 -6px 10px rgba(0,0,0,.35);
  display:grid; place-items:center; transform:rotate(-6deg); }
.pm-seal::before{ content:""; position:absolute; inset:6px; border-radius:50%; border:1px dashed rgba(255,230,210,.4); }
.pm-seal::after{ content:"K"; font-family:var(--serif-display); font-weight:800; font-size:25px;
  color:rgba(255,236,214,.9); text-shadow:0 1px 1px rgba(0,0,0,.4); }
.pm-seal.lg{ width:86px; height:86px; }
.pm-seal.lg::after{ font-size:33px; }

/* mobile decor curation — keep ~45%, hide the rest, scale the heavy pieces */
@media (max-width:900px){ .pm-bleed:nth-of-type(2n){ display:none !important; } }
@media (max-width:600px){
  .pm-bleed:nth-of-type(3n+1){ display:none !important; }
  .pm-frame,.pm-placard,.pm-scrap,.pm-seal,.pm-col,.pm-strip{ transform:scale(.8) rotate(-2deg); transform-origin:top left; }
  .pm-glow{ display:none; }
}
/* keep hero decor clear of the headline on phones */
@media (max-width:760px){
  .hero .pm-seal{ top:12% !important; right:8px !important; }
  .hero .pm-strip{ font-size:12px; }
}

/* ============================================================
   ✦ SIGNATURE SCENE — RESTORASYON KATLARI (conservation strata)
   Translucent layers separate in DEPTH (see-through parallax),
   then converge & settle into the finished framed headline.
   ============================================================ */
.cine-track{ position:relative; }
.cine-pin{ position:sticky; top:0; height:100vh; overflow:hidden; display:grid; place-items:center; }
.strata-track{ height:340vh; }
.strata-pin{
  background-color:#eadfc8;
  background-image:
    radial-gradient(120% 80% at 50% -6%, rgba(255,247,224,.55), transparent 55%),
    radial-gradient(rgba(40,38,30,.05) 1px, transparent 1.6px),
    repeating-linear-gradient(90deg, rgba(40,38,30,.05) 0 1px, transparent 1px 150px),
    linear-gradient(180deg,#f1e9d8,#e6dcc5);
  background-size:auto,6px 6px,auto,auto;
  box-shadow:inset 0 0 200px rgba(60,46,18,.2), inset 0 0 0 8px rgba(120,95,45,.09);
}
.strata-wrap{ position:relative; z-index:4; width:100%; max-width:var(--container);
  margin-inline:auto; padding-inline:clamp(16px,4vw,32px);
  display:grid; grid-template-columns:1fr; gap:clamp(24px,4vw,48px); align-items:center; }
@media (min-width:1000px){ .strata-wrap{ grid-template-columns:1fr .82fr; } }

.strata-stage{ position:relative; width:100%; max-width:400px; aspect-ratio:3/4;
  margin-inline:auto; perspective:1300px; perspective-origin:52% 42%; }
.strata-scene{ position:absolute; inset:0; transform-style:preserve-3d; }
.strata-layer{ position:absolute; inset:0; will-change:transform,opacity;
  transform-style:preserve-3d; backface-visibility:hidden; }
.strata-layer > *{ position:absolute; inset:0; }
.strata-layer .lyr-tag{
  position:absolute; left:8px; bottom:8px; inset:auto auto 8px 8px; width:auto; height:auto;
  font-family:var(--mono); font-size:8.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-text); background:rgba(247,242,230,.86); padding:3px 7px;
  border:1px solid var(--gold-line); border-radius:2px; opacity:0; transition:opacity .3s ease; }
.strata-scene.exploded .lyr-tag{ opacity:.92; }

/* L0 — sararmış özgün baskı (base) */
.sl-base img{ width:100%; height:100%; object-fit:cover; filter:sepia(.28) contrast(.96); }
.sl-base{ box-shadow:0 30px 50px -26px rgba(60,46,18,.6); background:#efe7d2; }
.sl-damage{ position:absolute; inset:0; pointer-events:none; mix-blend-mode:multiply;
  background:
    radial-gradient(60% 40% at 78% 22%, rgba(120,86,40,.4), transparent 60%),
    radial-gradient(50% 30% at 18% 80%, rgba(120,86,40,.34), transparent 62%),
    linear-gradient(120deg, transparent 46%, rgba(90,64,30,.5) 47%, rgba(90,64,30,.15) 49%, transparent 50%); }
/* L1 — Japon kâğıdı tamiri (tissue mend vellum) */
.sl-tissue{ background:linear-gradient(135deg, rgba(255,255,250,.26), rgba(242,236,220,.12));
  box-shadow:inset 0 0 0 1px rgba(194,162,89,.35); mix-blend-mode:screen; }
.sl-tissue::after{ content:""; position:absolute; left:38%; top:8%; width:26%; height:84%;
  transform:rotate(6deg);
  background:repeating-linear-gradient(120deg, rgba(255,255,250,.5) 0 2px, rgba(230,224,205,.2) 2px 4px);
  box-shadow:0 0 0 1px rgba(194,162,89,.3); }
/* L2 — deasidifikasyon filmi (wash film) */
.sl-wash{ background:linear-gradient(180deg, rgba(206,222,222,.16), rgba(190,206,210,.1));
  box-shadow:inset 0 0 0 1px rgba(194,162,89,.3); mix-blend-mode:multiply; }
/* L3 — vernik parlaklığı (varnish sheen) */
.sl-varnish{ background:linear-gradient(115deg, transparent 30%, rgba(255,250,235,.24) 47%, rgba(255,250,235,.05) 56%, transparent 68%);
  box-shadow:inset 0 0 0 1px rgba(233,205,143,.32); mix-blend-mode:screen; }
/* L4 — altın çerçeve (gilt frame, transparent center) */
.sl-frame{ border:15px solid var(--gilt); border-image:var(--gilt-grad) 1;
  box-shadow:inset 0 0 0 2px rgba(120,92,40,.4), inset 0 0 24px rgba(60,46,18,.28),
    0 40px 60px -30px rgba(60,46,18,.6); }

/* caption / readout */
.strata-cap .strata-c{ opacity:0; transform:translateY(20px); }
.strata-cap h2{ font-size:clamp(1.8rem,4vw,2.8rem); font-weight:800; }
.strata-cap .lead{ color:var(--ink-soft); max-width:46ch; margin-top:14px; }
.strata-cap .accent-word{ color:var(--accent-text); font-style:italic; }
.strata-readout{ margin-top:20px; display:inline-flex; align-items:center; flex-wrap:wrap; gap:10px 16px;
  font-family:var(--mono); font-weight:700; font-size:14px; color:var(--ink);
  border:1px solid var(--gold-line); border-radius:3px; padding:12px 16px;
  background:linear-gradient(180deg,var(--paper),var(--paper-2)); box-shadow:0 14px 24px -18px rgba(60,46,18,.4); }
.strata-readout b{ color:var(--accent-text); font-variant-numeric:tabular-nums; }
#strataPct{ font-size:20px; min-width:3.6ch; text-align:right; display:inline-block; }
.strata-kat{ padding-left:16px; border-left:1px solid var(--gold-line); color:var(--muted); font-weight:600; }
.strata-legend{ list-style:none; padding:0; margin:22px 0 0; display:grid; gap:8px; }
.strata-legend li{ position:relative; padding-left:30px;
  font-family:var(--mono); font-size:.74rem; letter-spacing:.02em; color:var(--muted);
  transition:color .3s ease; }
.strata-legend li::before{ counter-increment:none; content:"0" counter(strata-i);
  position:absolute; left:0; top:0; font-size:.68rem; color:var(--accent-text);
  border:1px solid var(--gold-line); border-radius:2px; padding:0 4px; }
.strata-legend{ counter-reset:strata-i; }
.strata-legend li{ counter-increment:strata-i; }
.strata-legend li.on{ color:var(--ink); }
.strata-legend li.on::before{ background:var(--gilt-grad); color:#241a06; border-color:transparent; }
@media (max-width:1000px){ .strata-track{ height:300vh; } .strata-stage{ max-width:340px; } }
@media (max-width:600px){ .strata-track{ height:260vh; } .strata-stage{ max-width:250px; } }

/* ============================================================
   PRELOADER + gold-dust motes
   ============================================================ */
#pre{ position:fixed; inset:0; z-index:99999; display:grid; place-items:center;
  background-color:#efe9db;
  background-image:radial-gradient(120% 90% at 50% -8%, rgba(255,247,224,.55), transparent 55%),
    radial-gradient(rgba(40,38,30,.05) 1px, transparent 1.6px), linear-gradient(180deg,#f2ece0,#e6dcc8);
  background-size:auto,10px 10px,auto;
  transition:opacity .7s ease, visibility .7s; }
#pre.done{ opacity:0; visibility:hidden; pointer-events:none; }
#pre .pl-in{ position:relative; text-align:center;
  background:linear-gradient(180deg,var(--paper),var(--paper-2)); color:var(--ink);
  padding:30px 46px; border:8px solid var(--gilt); border-image:var(--gilt-grad) 1;
  box-shadow:0 30px 56px -24px rgba(60,46,18,.5); transform:rotate(-1.1deg); }
#pre .pl-in::before{ content:""; position:absolute; top:-14px; left:50%; width:13px; height:13px;
  transform:translateX(-50%) rotate(45deg); background:linear-gradient(135deg,#efd79a,#8a6a2a);
  box-shadow:0 4px 8px -2px rgba(60,46,18,.5); }
#pre .pl-mark{ font-family:var(--serif-display); font-weight:900; font-size:clamp(24px,7vw,42px); letter-spacing:-.01em; color:var(--ink); }
#pre .pl-mark b{ color:var(--accent-text); font-weight:900; }
#pre .pl-sub{ font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); margin-top:8px; }
#pre .pl-bar{ margin:20px auto 0; width:min(220px,58vw); height:8px; border:1px solid var(--gold-line); background:rgba(120,95,45,.14); overflow:hidden; position:relative; }
#pre .pl-bar i{ position:absolute; inset:0; width:0;
  background:linear-gradient(90deg,var(--gilt-lo),var(--gilt-hi)); animation:plFill 1.15s cubic-bezier(.5,0,.2,1) forwards; }
@keyframes plFill{ to{ width:100%; } }
#motes{ position:fixed; inset:0; z-index:3; pointer-events:none; mix-blend-mode:screen; opacity:.5; }
html.no-js #pre{ display:none; }

/* ============================================================
   REDUCED MOTION — resolve the strata scene to final framed state
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .strata-cap .strata-c{ opacity:1; transform:none; }
  .strata-layer{ opacity:1 !important; transform:none !important; }
  .sl-damage{ opacity:0 !important; }
  .strata-legend li{ color:var(--ink); }
}

/* fix: keep header pinned on scroll (redesign had reset it to relative) */
.site-header{ position: sticky; top: 0; }

/* fix: header is sticky (in-flow), so the header-height padding-top on main was a
   double gap above the first section — remove it. */
main{ padding-top: 0 !important; }