/* self-hosted fonts (restored after polish strip) */
@font-face {
  font-family: 'Karla';
  font-style: italic;
  font-weight: 400;
  font-display: optional;
  src: url(../fonts/Karla-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: 'Karla';
  font-style: italic;
  font-weight: 400;
  font-display: optional;
  src: url(../fonts/Karla-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: 'Karla';
  font-style: italic;
  font-weight: 600;
  font-display: optional;
  src: url(../fonts/Karla-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: 'Karla';
  font-style: italic;
  font-weight: 600;
  font-display: optional;
  src: url(../fonts/Karla-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: 'Karla';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url(../fonts/Karla-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: 'Karla';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url(../fonts/Karla-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: 'Karla';
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url(../fonts/Karla-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: 'Karla';
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url(../fonts/Karla-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: 'Karla';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url(../fonts/Karla-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: 'Karla';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url(../fonts/Karla-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: 'Karla';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url(../fonts/Karla-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: 'Karla';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url(../fonts/Karla-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;
}
@font-face {
  font-family: 'Libre Baskerville';
  font-style: italic;
  font-weight: 400;
  font-display: optional;
  src: url(../fonts/LibreBaskerville-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: 'Libre Baskerville';
  font-style: italic;
  font-weight: 400;
  font-display: optional;
  src: url(../fonts/LibreBaskerville-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: 'Libre Baskerville';
  font-style: italic;
  font-weight: 600;
  font-display: optional;
  src: url(../fonts/LibreBaskerville-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: 'Libre Baskerville';
  font-style: italic;
  font-weight: 600;
  font-display: optional;
  src: url(../fonts/LibreBaskerville-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: 'Libre Baskerville';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url(../fonts/LibreBaskerville-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: 'Libre Baskerville';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url(../fonts/LibreBaskerville-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: 'Libre Baskerville';
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url(../fonts/LibreBaskerville-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: 'Libre Baskerville';
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url(../fonts/LibreBaskerville-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: 'Libre Baskerville';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url(../fonts/LibreBaskerville-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: 'Libre Baskerville';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url(../fonts/LibreBaskerville-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: 'Libre Baskerville';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url(../fonts/LibreBaskerville-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: 'Libre Baskerville';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url(../fonts/LibreBaskerville-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ÜRHANE — Tarihli Kupür Arşivi
   Heritage / deri arşiv cildi — material-forward
   ============================================================ */

:root {
  --bg: #2B2420;
  --bg-deep: #221d19;
  --surface: #3A322B;
  --surface-2: #453b32;
  --surface-3: #4f4437;
  --ink: #EAE0D0;
  --ink-soft: #c7bba7;
  --ink-faint: #a99d8a;
  --accent: #B0894F;
  --accent-text: #d3a865;
  --accent-2: #7A5A3C;
  --line: rgba(234, 224, 208, 0.14);
  --line-strong: rgba(234, 224, 208, 0.30);
  --paper: #ece2cd;
  --paper-ink: #2c261f;
  --shadow-lift: 0 18px 40px -22px rgba(0, 0, 0, 0.7);
  --header-h: 76px;
  --serif: 'Libre Baskerville', 'Palatino Linotype', Georgia, serif;
  --sans: 'Karla', 'Segoe UI', system-ui, sans-serif;
  --maxw: 1400px;
  --pad: clamp(16px, 5vw, 60px);
  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 {
  overflow-x: hidden;
  max-width: 100vw;
  margin: 0;
}

/* Anchored sections clear the fixed header (also on cross-page landings) */
:where(section, [id]) { scroll-margin-top: calc(var(--header-h) + 16px); }

body {
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 18% 12%, rgba(176, 137, 79, 0.08), transparent 42%),
    radial-gradient(circle at 82% 78%, rgba(122, 90, 60, 0.10), transparent 46%);
  background-attachment: fixed, fixed;
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.65;
  letter-spacing: 0.01em;
}

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

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

p { margin: 0 0 1em; }
a { color: var(--accent-text); text-decoration: none; }
a:hover { color: var(--ink); }

ul { padding: 0; margin: 0; list-style: none; }

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

.eyebrow {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--accent-text);
  margin: 0 0 1.1rem;
}

.section {
  padding-block: clamp(64px, 9vw, 128px);
  position: relative;
}
.section--band {
  background-color: var(--bg-deep);
  background-image:
    radial-gradient(circle at 15% 0%, rgba(122, 90, 60, 0.18), transparent 55%),
    linear-gradient(160deg, rgba(34, 29, 25, 0.4), rgba(20, 17, 14, 0.55));
}

.lead {
  font-size: clamp(1.05rem, 1.6vw, 1.28rem);
  color: var(--ink-soft);
  max-width: 62ch;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--paper-ink);
  padding: 10px 18px;
  z-index: 2000;
  border-radius: 0 0 8px 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

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

/* Leather stitch divider */
.stitch {
  height: 2px;
  border: none;
  margin: 0;
  background-image: repeating-linear-gradient(
    90deg,
    var(--accent-2) 0 14px,
    transparent 14px 26px
  );
  opacity: 0.55;
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1080;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(34, 29, 25, 0.92);
  border-bottom: 1px solid var(--line);
  transition: background 240ms ease, box-shadow 240ms ease, height 240ms ease;
}
.site-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 4px;
  height: 1px;
  background-image: repeating-linear-gradient(90deg, var(--accent-2) 0 8px, transparent 8px 16px);
  opacity: 0.35;
}
.site-header.is-scrolled {
  background: rgba(28, 24, 20, 0.98);
  box-shadow: 0 8px 24px -16px rgba(0, 0, 0, 0.7);
  height: calc(var(--header-h) - 10px);
}
.header-inner {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.28rem;
  letter-spacing: 0.02em;
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.brand:hover { color: var(--ink); }
.brand .brand-mark {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--accent-text);
  font-family: var(--sans);
  font-weight: 600;
}

.nav-desktop {
  display: none;
  align-items: center;
  gap: clamp(14px, 2vw, 30px);
}
.nav-desktop a {
  position: relative;
  color: var(--ink-soft);
  font-weight: 500;
  font-size: 0.95rem;
  padding: 6px 2px;
  transition: color 200ms ease;
}
.nav-desktop a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 2px;
  background: var(--accent);
  transition: width 220ms cubic-bezier(.2,.7,.2,1);
}
.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-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--accent);
  color: var(--paper-ink) !important;
  font-weight: 600;
  font-size: 0.92rem;
  padding: 10px 20px;
  border-radius: 4px;
  border: 1px solid var(--accent);
  transition: background 200ms ease, color 200ms ease, transform 200ms ease;
}
.nav-desktop .nav-cta::after { display: none; }
.nav-cta:hover {
  background: var(--ink);
  color: var(--bg-deep) !important;
  transform: translateY(-2px);
}

.nav-toggle {
  position: relative;
  z-index: 1100;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 10px;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 260ms cubic-bezier(.2,.7,.2,1), opacity 200ms ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (min-width: 1024px) {
  .nav-desktop { display: flex; }
  .nav-toggle { display: none; }
}

/* Drawer */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 240ms ease, visibility 240ms ease;
  z-index: 1040;
}
.drawer-backdrop.is-open { opacity: 1; visibility: visible; }

.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(360px, 92vw);
  z-index: 1050;
  transform: translateX(100%);
  transition: transform 320ms cubic-bezier(.2,.7,.2,1);
  background-color: var(--bg-deep);
  background-image:
    radial-gradient(circle at 100% 0%, rgba(122, 90, 60, 0.22), transparent 60%),
    linear-gradient(180deg, rgba(34, 29, 25, 0.5), rgba(20, 17, 14, 0.4));
  border-left: 1px solid var(--line-strong);
  padding: calc(var(--header-h) + 20px) 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
}
.drawer.is-open { transform: translateX(0); }
.drawer a {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.15rem;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  transition: color 200ms ease, padding-left 200ms ease;
}
.drawer a:hover, .drawer a.is-active { color: var(--accent-text); padding-left: 6px; }
.drawer .drawer-cta {
  margin-top: 18px;
  text-align: center;
  background: var(--accent);
  color: var(--paper-ink);
  border-radius: 4px;
  border-bottom: none;
  padding: 14px 20px;
  font-family: var(--sans);
  font-weight: 600;
}
.drawer .drawer-cta:hover { background: var(--ink); color: var(--bg-deep); padding-left: 0; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.98rem;
  padding: 14px 26px;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
  text-align: center;
}
.btn-primary {
  background: var(--accent);
  color: var(--paper-ink);
  border-color: var(--accent);
  box-shadow: 0 10px 26px -16px rgba(176, 137, 79, 0.9);
}
.btn-primary:hover, .btn-primary:focus-visible {
  background: var(--ink);
  color: var(--bg-deep);
  transform: translateY(-2px);
}
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn-ghost:hover, .btn-ghost:focus-visible {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--accent);
  transform: translateY(-2px);
}
.btn .arrow { transition: transform 200ms ease; }
.btn:hover .arrow { transform: translateX(4px); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: min(92vh, 820px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  animation: heroZoom 18s ease-out forwards;
}
@keyframes heroZoom { to { transform: scale(1); } }
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(28, 24, 20, 0.62) 0%, rgba(28, 24, 20, 0.35) 40%, rgba(28, 24, 20, 0.9) 100%),
    linear-gradient(90deg, rgba(28, 24, 20, 0.7) 0%, transparent 60%);
}
/* Signature sheen following cursor over leather */
.hero__sheen {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    460px circle at var(--mx, 50%) var(--my, 40%),
    rgba(211, 168, 101, 0.16),
    transparent 65%
  );
  mix-blend-mode: screen;
  opacity: 0.9;
  transition: opacity 400ms ease;
}
.hero__inner {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad) clamp(48px, 8vw, 96px);
}
.hero__datetab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--paper);
  color: var(--paper-ink);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  padding: 8px 16px;
  border-radius: 3px 3px 8px 8px;
  box-shadow: 0 10px 22px -14px rgba(0, 0, 0, 0.8);
  transform: rotate(-1.4deg);
  margin-bottom: 22px;
  position: relative;
}
.hero__datetab::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,0.25);
}
.hero h1 {
  font-size: clamp(2.5rem, 6.2vw, 4.5rem);
  max-width: 15ch;
  margin-bottom: 0.4em;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.55);
}
.hero h1 .ink-line {
  position: relative;
  color: var(--accent-text);
}
.hero__sub {
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  color: var(--ink);
  max-width: 54ch;
  margin-bottom: 2rem;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.7);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 2rem;
}
.trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  align-items: center;
}
.trust-strip li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
  color: var(--ink-soft);
  font-weight: 500;
}
.trust-strip li::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* ============================================================
   TIMELINE (#zaman-cizelgesi) — horizontal scroll
   ============================================================ */
.timeline-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(28px, 4vw, 52px);
}
.timeline-head h2 { font-size: clamp(1.9rem, 4vw, 3rem); margin: 0; }
.timeline-hint {
  font-size: 0.85rem;
  color: var(--ink-faint);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.timeline-scroll {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 320px);
  gap: clamp(20px, 3vw, 36px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 34px 4px 30px;
  -webkit-overflow-scrolling: touch;
  scrollbar-color: var(--accent-2) transparent;
}
.timeline-scroll::-webkit-scrollbar { height: 8px; }
.timeline-scroll::-webkit-scrollbar-thumb { background: var(--accent-2); border-radius: 8px; }
.timeline-rail {
  position: relative;
}
.timeline-rail::before {
  content: "";
  position: absolute;
  left: var(--pad); right: var(--pad);
  top: 50%;
  height: 2px;
  background-image: repeating-linear-gradient(90deg, var(--line-strong) 0 10px, transparent 10px 20px);
  z-index: 0;
}
.clip-card {
  position: relative;
  scroll-snap-align: start;
  background: var(--paper);
  color: var(--paper-ink);
  border-radius: 3px;
  padding: 0 0 16px;
  box-shadow: var(--shadow-lift);
  transform: rotate(var(--tilt, -1deg));
  transition: transform 260ms cubic-bezier(.2,.7,.2,1), box-shadow 260ms ease;
}
.clip-card:nth-child(even) { --tilt: 1.2deg; }
.clip-card:hover {
  transform: rotate(0deg) translateY(-6px);
  box-shadow: 0 26px 50px -22px rgba(0, 0, 0, 0.8);
  z-index: 3;
}
/* pin */
.clip-card::before {
  content: "";
  position: absolute;
  top: -9px; left: 50%;
  transform: translateX(-50%);
  width: 16px; height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #d9b779, #8a6a3d 70%);
  box-shadow: 0 4px 8px rgba(0,0,0,0.5), inset 0 -1px 2px rgba(0,0,0,0.4);
  z-index: 4;
}
.clip-card__date {
  position: absolute;
  top: 12px; left: 12px;
  background: var(--paper-ink);
  color: var(--paper);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  padding: 5px 10px;
  border-radius: 2px;
  z-index: 3;
}
.clip-card__img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-bottom: 1px solid rgba(44, 38, 31, 0.12);
}
.clip-card__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: sepia(0.28) contrast(1.02);
  transition: transform 500ms ease;
}
.clip-card:hover .clip-card__img img { transform: scale(1.05); }
.clip-card__body { padding: 16px 18px 4px; }
.clip-card__kicker {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent-2);
}
.clip-card h3 {
  font-size: 1.12rem;
  color: var(--paper-ink);
  margin: 6px 0 8px;
  line-height: 1.25;
}
.clip-card p {
  font-size: 0.9rem;
  color: #5a4f42;
  margin: 0;
}

/* ============================================================
   NASIL (subscription flow) — vertical editorial timeline
   ============================================================ */
.flow {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
}
.flow-step {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: clamp(18px, 3vw, 34px);
  padding-bottom: clamp(34px, 5vw, 56px);
  position: relative;
}
.flow-step::before {
  content: "";
  position: absolute;
  left: 31px; top: 60px; bottom: -6px;
  width: 2px;
  background-image: repeating-linear-gradient(180deg, var(--accent-2) 0 8px, transparent 8px 16px);
  opacity: 0.5;
}
.flow-step:last-child::before { display: none; }
.flow-step__num {
  width: 64px; height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  border: 1px solid var(--accent);
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--accent-text);
  position: relative;
  z-index: 2;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.35);
}
.flow-step__body h3 {
  font-size: 1.32rem;
  margin-bottom: 6px;
}
.flow-step__time {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-text);
  margin-bottom: 8px;
}
.flow-step__body p { color: var(--ink-soft); margin: 0; }

/* ============================================================
   ARŞİV PLANLAYICI (tool)
   ============================================================ */
.planner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 3vw, 40px);
}
@media (min-width: 960px) {
  .planner { grid-template-columns: 1.05fr 0.95fr; align-items: start; }
}
.planner-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: clamp(22px, 3vw, 36px);
  box-shadow: var(--shadow-lift);
  position: relative;
}
.planner-panel::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid var(--line);
  border-radius: 7px;
  pointer-events: none;
}
.planner-panel h3 { font-size: 1.3rem; margin-bottom: 4px; }
.planner-panel .muted { color: var(--ink-faint); font-size: 0.9rem; margin-bottom: 22px; }
.field { margin-bottom: 18px; }
.field > span.label {
  display: block;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin-bottom: 7px;
}
.field > span.label .opt {
  font-style: normal;
  font-weight: 500;
  font-size: 0.78rem;
  color: var(--ink-faint);
  letter-spacing: 0.02em;
}
.field input[type="text"],
.field input[type="date"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea {
  width: 100%;
  background: var(--bg-deep);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  padding: 12px 14px;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(176, 137, 79, 0.22);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); }
.freq-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.freq-opt {
  position: relative;
}
.freq-opt input {
  position: absolute;
  opacity: 0;
  inset: 0;
  cursor: pointer;
}
.freq-opt span {
  display: block;
  text-align: center;
  padding: 12px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink-soft);
  transition: all 200ms ease;
  cursor: pointer;
}
.freq-opt input:checked + span {
  border-color: var(--accent);
  background: rgba(176, 137, 79, 0.16);
  color: var(--ink);
}
.freq-opt input:focus-visible + span { outline: 2px solid var(--accent-text); outline-offset: 2px; }

.planner-result {
  background:
    radial-gradient(circle at 100% 0%, rgba(176, 137, 79, 0.18), transparent 55%),
    linear-gradient(165deg, var(--bg-deep), #1b1713);
  border: 1px solid var(--accent-2);
  border-radius: 10px;
  padding: clamp(22px, 3vw, 34px);
  box-shadow: var(--shadow-lift);
}
.planner-result h3 { font-size: 1.2rem; margin-bottom: 14px; }
.result-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.96rem;
}
.result-row .k { color: var(--ink-faint); }
.result-row .v { color: var(--ink); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.result-total {
  margin-top: 18px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.result-total .k { font-size: 0.9rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.1em; }
.result-total .v {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}
.planner-note {
  margin-top: 6px;
  font-size: 0.78rem;
  color: var(--ink-faint);
}
.planner-msg {
  margin-top: 14px;
  padding: 11px 14px;
  border-radius: 6px;
  font-size: 0.88rem;
  font-weight: 500;
  display: none;
}
.planner-msg.is-warn {
  display: block;
  background: rgba(160, 70, 50, 0.2);
  border: 1px solid rgba(200, 110, 80, 0.5);
  color: #f0c9b8;
}
.planner-cal {
  margin-top: 18px;
}
.planner-cal h4 { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-soft); margin-bottom: 10px; }
.cal-list { display: flex; flex-direction: column; gap: 7px; }
.cal-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.cal-list li::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
.cal-list li .cal-date { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; min-width: 8.5ch; }

/* ============================================================
   ARŞİV PAKETİ / PRICING (list + photo)
   ============================================================ */
.pkg-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}
@media (min-width: 800px) { .pkg-grid { grid-template-columns: repeat(3, 1fr); } }
.pkg {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 28px 26px;
  position: relative;
  transition: transform 240ms cubic-bezier(.2,.7,.2,1), box-shadow 240ms ease, border-color 240ms ease;
}
.pkg:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); border-color: var(--accent); }
.pkg.is-featured { border-color: var(--accent); background: var(--surface-2); }
.pkg.is-featured::after {
  content: "En çok tercih edilen";
  position: absolute;
  top: -12px; left: 26px;
  background: var(--accent);
  color: var(--paper-ink);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 3px;
}
.pkg h3 { font-size: 1.28rem; margin-bottom: 4px; }
.pkg .pkg-tag { font-size: 0.82rem; color: var(--ink-faint); margin-bottom: 18px; }
.pkg .price {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.8rem, 3.5vw, 2.3rem);
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.pkg .price span { font-family: var(--sans); font-size: 0.88rem; font-weight: 500; color: var(--ink-faint); }
.pkg .price-note { font-size: 0.74rem; color: var(--ink-faint); margin: 6px 0 20px; }
.pkg-list { display: flex; flex-direction: column; gap: 9px; margin-bottom: 12px; }
.pkg-list li { display: flex; gap: 10px; font-size: 0.92rem; color: var(--ink-soft); }
.pkg-list li::before { content: "+"; color: var(--accent-text); font-weight: 700; flex-shrink: 0; }
.pkg-list.excl li::before { content: "–"; color: var(--ink-faint); }
.pkg-teslim {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
  color: var(--ink-faint);
}
.pkg .btn { margin-top: 18px; width: 100%; }

/* Gallery of dated priced clippings */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
@media (min-width: 720px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
.gallery figure {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
}
.gallery figure img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  filter: sepia(0.22);
  transition: transform 500ms ease;
}
.gallery figure:hover img { transform: scale(1.05); }
.gallery figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 26px 14px 12px;
  background: linear-gradient(transparent, rgba(20, 17, 14, 0.92));
  color: var(--ink);
}
.gallery figcaption .g-date { font-size: 0.72rem; letter-spacing: 0.08em; color: var(--accent-text); font-weight: 600; }
.gallery figcaption .g-title { font-family: var(--serif); font-size: 0.98rem; margin: 3px 0; }
.gallery figcaption .g-price { font-size: 0.82rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* ============================================================
   TESLİMAT TAKVİMİ
   ============================================================ */
.calendar-band {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}
@media (min-width: 900px) { .calendar-band { grid-template-columns: 0.9fr 1.1fr; } }
.calendar-media {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-lift);
}
.calendar-media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.cal-schedule { display: flex; flex-direction: column; gap: 2px; }
.cal-schedule-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 14px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.cal-schedule-row .cs-label { font-family: var(--serif); font-size: 1.05rem; color: var(--ink); }
.cal-schedule-row .cs-desc { color: var(--ink-faint); font-size: 0.86rem; display: block; margin-top: 2px; }
.cal-schedule-row .cs-when { font-weight: 700; color: var(--accent-text); font-size: 0.92rem; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ============================================================
   STATS / MANIFESTO
   ============================================================ */
.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
@media (min-width: 760px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { text-align: center; padding: 8px; }
.stat .num {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(2rem, 4.5vw, 3rem);
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
  min-width: 4ch;
  display: inline-block;
  line-height: 1.1;
}
.stat .lbl { font-size: 0.82rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 4px; }

.manifesto {
  max-width: 26ch;
}
.manifesto blockquote {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.5rem, 3.4vw, 2.4rem);
  line-height: 1.3;
  color: var(--ink);
}
.split-editorial {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
@media (min-width: 920px) { .split-editorial { grid-template-columns: 1fr 1fr; } }
.split-editorial.reverse .se-media { order: -1; }
.se-media {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-lift);
  position: relative;
}
.se-media img { width: 100%; aspect-ratio: 5/4; object-fit: cover; }
.se-media .macro-tag {
  position: absolute;
  bottom: 12px; left: 12px;
  background: var(--paper);
  color: var(--paper-ink);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 3px;
  transform: rotate(-1.5deg);
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testi-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 720px) { .testi-grid { grid-template-columns: repeat(3, 1fr); } }
.testi {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 24px 22px;
}
.testi p { font-size: 0.98rem; color: var(--ink); font-style: italic; margin-bottom: 16px; }
.testi .who { font-weight: 700; color: var(--ink); font-size: 0.92rem; }
.testi .meta { font-size: 0.8rem; color: var(--ink-faint); margin-top: 2px; }

/* ============================================================
   FAQ
   ============================================================ */
.faq { max-width: 820px; margin: 0 auto; }
.faq-item {
  border-bottom: 1px solid var(--line);
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 22px 44px 22px 0;
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--ink);
  position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 4px; top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  color: var(--accent-text);
  transition: transform 300ms ease;
}
.faq-item[open] summary::after { content: "–"; }
.faq-item > .answer {
  height: 0;
  padding: 0 0;
  overflow: hidden;
  color: var(--ink-soft);
  transition: height 360ms cubic-bezier(.4,0,.2,1), padding-block-end 360ms cubic-bezier(.4,0,.2,1);
}
.faq-item[open] > .answer {
  height: auto;
  padding-block-end: 24px;
}
@media (prefers-reduced-motion: reduce) { .faq-item > .answer { transition: none; } }

/* ============================================================
   CTA band
   ============================================================ */
.cta-band {
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(176, 137, 79, 0.14), transparent 60%),
    linear-gradient(160deg, var(--bg-deep), #1b1713);
}
.cta-band h2 { font-size: clamp(2rem, 4.5vw, 3.2rem); margin-bottom: 0.4em; }
.cta-band p { max-width: 52ch; margin: 0 auto 1.8em; color: var(--ink-soft); }
.cta-band .hero__actions { justify-content: center; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--bg-deep);
  border-top: 1px solid var(--line);
  padding-block: clamp(48px, 6vw, 76px) 28px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px;
  margin-bottom: 40px;
}
@media (min-width: 720px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer-brand .brand { font-size: 1.4rem; margin-bottom: 14px; }
.footer-brand p { color: var(--ink-soft); font-size: 0.92rem; max-width: 40ch; }
.footer-col h4 { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent-text); margin-bottom: 16px; }
.footer-col a { display: block; color: var(--ink-soft); font-size: 0.93rem; padding: 5px 0; }
.footer-col a:hover { color: var(--ink); }
.footer-contact li { color: var(--ink-soft); font-size: 0.92rem; padding: 5px 0; word-break: break-word; }
.footer-contact a { color: var(--ink-soft); }
.footer-contact a:hover { color: var(--accent-text); }
.footer-bottom {
  border-top: 1px solid var(--line);
  padding-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  color: var(--ink-faint);
}
.footer-legal a { display: inline; color: var(--ink-faint); }
.footer-legal a:hover { color: var(--ink); }
.footer-legal span { margin: 0 8px; opacity: 0.5; }

/* ============================================================
   FORMS / CONTACT
   ============================================================ */
.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);
}
.field.kvkk {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  font-size: 0.88rem;
  color: var(--ink-soft);
}
.field.kvkk .label { margin: 0; }
.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px 18px;
}
@media (min-width: 640px) { .form-grid.two { grid-template-columns: 1fr 1fr; } }

.contact-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px;
}
.contact-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px;
  transition: transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease;
}
.contact-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--accent); }
.contact-card .cc-icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(176, 137, 79, 0.16);
  border: 1px solid var(--accent);
  color: var(--accent-text);
  font-size: 1.2rem;
  margin-bottom: 14px;
}
.contact-card h3 { font-size: 1.05rem; margin-bottom: 4px; }
.contact-card a, .contact-card .cc-value { color: var(--ink); font-weight: 600; font-size: 0.98rem; word-break: break-word; }
.contact-card a:hover { color: var(--accent-text); }
.contact-card .cc-sub { color: var(--ink-faint); font-size: 0.82rem; margin-top: 4px; }

.hours-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}
.hours-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 0.95rem;
}
.hours-row.is-today { border-color: var(--accent); background: var(--surface-2); }
.hours-row .h-day { color: var(--ink-soft); font-weight: 600; }
.hours-row .h-time { color: var(--ink); font-variant-numeric: tabular-nums; }

/* ============================================================
   DOCS / GENERIC PAGE
   ============================================================ */
.page-hero {
  padding-top: calc(var(--header-h) + clamp(40px, 6vw, 80px));
  padding-bottom: clamp(32px, 5vw, 56px);
  background:
    radial-gradient(circle at 12% 15%, rgba(176, 137, 79, 0.16), transparent 55%),
    linear-gradient(160deg, var(--bg-deep), #1b1713);
  border-bottom: 1px solid var(--line);
  min-height: 240px;
}
.page-hero h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); max-width: 20ch; }
.page-hero p { color: var(--ink-soft); max-width: 60ch; }
.doc-body { padding-block: clamp(40px, 6vw, 72px); }
.doc-body .container { max-width: 900px; }
.doc-body h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin: 1.6em 0 0.5em; }
.doc-body h3 { font-size: 1.15rem; margin: 1.2em 0 0.4em; }
.doc-body p, .doc-body li { color: var(--ink-soft); }
.doc-body ul.bullets { margin: 0 0 1.2em; }
.doc-body ul.bullets li { padding-left: 20px; position: relative; margin-bottom: 8px; }
.doc-body ul.bullets li::before {
  content: "";
  position: absolute; left: 0; top: 11px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
}

/* Tables */
.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: 8px;
}
.table-scroll > table { margin: 0 !important; min-width: 480px; width: 100%; border-collapse: collapse; }
:where(*:has(> .table-scroll), *:has(> * > .table-scroll), *:has(> * > * > .table-scroll)) { min-width: 0; }
table th, table td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 0.92rem; }
table th { background: var(--surface-2); color: var(--ink); font-weight: 600; }
table td { color: var(--ink-soft); }

/* Team */
.team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 720px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }
.team-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.team-card img { width: 100%; aspect-ratio: 4/5; object-fit: cover; filter: sepia(0.15); }
.team-card .tc-avatar {
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 30% 25%, var(--surface-3), var(--surface));
  border-bottom: 1px solid var(--line);
}
.team-card .tc-avatar span {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 2.6rem);
  color: var(--accent-text);
  letter-spacing: 0.04em;
}
.team-card .tc-body { padding: 20px 22px; }
.team-card h3 { font-size: 1.15rem; margin-bottom: 2px; }
.team-card .tc-role { color: var(--accent-text); font-size: 0.84rem; font-weight: 600; margin-bottom: 10px; }
.team-card p { font-size: 0.9rem; color: var(--ink-soft); margin: 0; }

/* Notes / son eklenenler */
.notes-list { display: flex; flex-direction: column; gap: 14px; max-width: 640px; }
.note-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.note-item .n-date { font-weight: 700; color: var(--accent-text); font-size: 0.82rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.note-item .n-text { color: var(--ink-soft); }

/* ============================================================
   COOKIE
   ============================================================ */
.cookie-banner {
  position: fixed;
  bottom: 16px; left: 16px; right: 16px;
  max-width: 520px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  padding: 20px 22px;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,0.8);
  transform: translateY(140%);
  opacity: 0;
  transition: transform 280ms cubic-bezier(.2,.7,.2,1), opacity 240ms;
  z-index: 9999;
}
.cookie-banner.is-visible { transform: translateY(0); opacity: 1; }
@media (min-width: 720px) { .cookie-banner { left: 24px; right: auto; max-width: 420px; } }
.cookie-banner h2 { font-size: 1.05rem; margin-bottom: 6px; }
.cookie-banner p { font-size: 0.86rem; color: var(--ink-soft); margin-bottom: 14px; }
.cookie-banner p a { color: var(--accent-text); text-decoration: underline; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-actions button {
  flex: 1 1 auto;
  min-height: 44px;
  padding: 11px 16px;
  border-radius: 6px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  border: 1px solid var(--line-strong);
  transition: all 200ms ease;
}
.cookie-actions [data-consent="accept"] { background: var(--accent); color: var(--paper-ink); border-color: var(--accent); }
.cookie-actions [data-consent="accept"]:hover { background: var(--ink); color: var(--bg-deep); }
.cookie-actions [data-consent="reject"] { background: var(--surface-2); color: var(--ink); }
.cookie-actions [data-consent="reject"]:hover { background: var(--surface-3); }
.cookie-actions [data-consent="settings"] { background: transparent; color: var(--ink-soft); flex-basis: 100%; }
.cookie-actions [data-consent="settings"]:hover { color: var(--ink); border-color: var(--accent); }

/* ============================================================
   REVEAL / MOTION
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 600ms cubic-bezier(.2,.7,.2,1), transform 600ms cubic-bezier(.2,.7,.2,1);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero__media img { animation: none; transform: scale(1); }
}
html.no-js .reveal { opacity: 1; transform: none; }

/* Ink-trace under dates */
@keyframes inkDrift {
  0%, 100% { background-position: 0 0; }
  50% { background-position: 6px 0; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 640px) {
  body { font-size: 16px; }
  .hero { min-height: 88vh; }
  .contact-card { padding: 20px; }
  .pkg { padding: 24px 20px; }
  .flow-step { grid-template-columns: 52px minmax(0,1fr); gap: 14px; }
  .flow-step__num { width: 52px; height: 52px; font-size: 1.25rem; }
  .flow-step::before { left: 25px; }
}
@media (max-width: 400px) {
  .freq-group { grid-template-columns: 1fr; }
}

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

.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}

/* ============================================================
   ============================================================
   KUPÜRHANE — WALL-TO-WALL NEWSPRINT & ALMANAC COLLAGE ENGINE
   One continuous papered pressroom wall: aged newsprint & almanac
   sheets pasted over a deep ink ground, bone clippings, gold-foil
   datelines + hairline gold rules, wax seals, silk ribbon, deckle
   edges, folio numbers, byline slugs, halftone — plus a pinned
   "ARSIV / concertina unfolds" signature scroll scene.
   Palette: deep ink/oxblood ground + aged bone/ivory + ONE gold.
   ============================================================
   ============================================================ */

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

:root{
  --ink0:#221a13;
  --news:#e9dfc8;
  --news-2:#ded1b2;
  --news-3:#d2c29e;
  --almanac:#e7dbbe;
  --paper:#ece1c9;
  --paper-ink:#2a2318;
  --paper-soft:#584c39;
  --paper-faint:#7a6c53;
  --gold:#b0894f;
  --gold-hi:#e7c987;
  --gold-lo:#7c5c2c;
  --gold-line:rgba(176,137,79,.48);
  --wax:#6d241d;
  --ribbon:#8a2c22;
  --crease:rgba(24,17,9,.55);
}

section,.hero,.site-header,.site-footer{ position:relative; }

/* --- THE WALL: continuous aged-newsprint + almanac collage (fixed) --- */
body{
  background-color:#241c14 !important;
  background-image:
    linear-gradient(103deg, rgba(232,220,190,.16) 0 30%, transparent 30.4% 100%),
    linear-gradient(-98deg, rgba(226,210,176,.13) 0 26%, transparent 26.4% 100%),
    radial-gradient(46% 38% at 78% 8%, rgba(233,223,196,.16), transparent 60%),
    radial-gradient(52% 34% at 12% 62%, rgba(224,206,168,.12), transparent 62%),
    radial-gradient(40% 40% at 92% 78%, rgba(233,223,196,.10), transparent 60%),
    repeating-linear-gradient(0deg, rgba(232,221,193,.045) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, transparent 0 176px, rgba(176,137,79,.10) 176px 177px, transparent 177px 354px),
    radial-gradient(rgba(232,221,193,.05) 1px, transparent 1.7px),
    radial-gradient(rgba(0,0,0,.16) 1px, transparent 1.6px),
    radial-gradient(120% 100% at 50% -8%, rgba(96,74,38,.30), transparent 55%),
    linear-gradient(180deg,#2a2016,#241c14 60%,#1d160f) !important;
  background-size:auto,auto,auto,auto,auto,auto,354px 100%,7px 7px,9px 9px,auto,auto !important;
  background-position:0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,4px 5px,0 0,0 0 !important;
  background-attachment:fixed !important;
  color:var(--ink);
}
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  box-shadow:inset 0 0 240px rgba(10,7,3,.62), inset 0 0 0 7px rgba(176,137,79,.10);
  background:
    radial-gradient(130% 84% at 50% -10%, rgba(231,201,135,.10), transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}
main,.site-footer{ position:relative; z-index:2; }
section > .container,.hero__inner,.footer-grid,.footer-bottom,.fold-wrap{ position:relative; z-index:4; }
.hero__inner{ z-index:5; }

/* --- neutralise flat fills so the wall shows through everywhere --- */
.section--band,.cta-band,.page-hero,.section{ background:transparent !important; }
.section--band::before,.cta-band::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.9;
  background:
    linear-gradient(100deg, rgba(233,223,196,.10) 0 40%, transparent 40.5%),
    radial-gradient(60% 50% at 85% 12%, rgba(176,137,79,.10), transparent 60%),
    linear-gradient(180deg, rgba(18,13,8,.34), rgba(12,9,5,.42));
}
.section + .section::after,.section + .section--band::after,
.section--band + .section::after,.cta-band::after{
  content:""; position:absolute; left:0; right:0; top:0; height:2px; z-index:3;
  background:linear-gradient(90deg,transparent,var(--gold-line) 16%,var(--gold-line) 84%,transparent);
}

/* header + footer = papered wall zones with a gold picture-rail edge */
.site-header{ background:rgba(30,22,15,.86) !important; backdrop-filter:blur(9px);
  border-bottom:1px solid var(--gold-line) !important; }
.site-header.is-scrolled{ background:rgba(26,19,12,.95) !important; }
.site-footer{
  background-color:#1a130c !important;
  background-image:
    radial-gradient(120% 90% at 50% -14%, rgba(176,137,79,.12), transparent 55%),
    linear-gradient(96deg, rgba(232,221,193,.06) 0 34%, transparent 34.4%),
    repeating-linear-gradient(0deg, rgba(232,221,193,.03) 0 1px, transparent 1px 5px),
    linear-gradient(180deg,#1c150d,#140e08) !important;
  border-top:2px solid var(--gold) !important;
}

/* ============================================================
   EYEBROW -> gold-foil dateline stamp   +   masthead + dropcap
   ============================================================ */
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--sans); font-weight:700; font-size:.7rem;
  letter-spacing:.26em; text-transform:uppercase;
  color:#26200f !important;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold) 60%,var(--gold-lo));
  border:1px solid rgba(90,66,24,.5);
  padding:5px 12px; border-radius:2px; transform:rotate(-.8deg);
  box-shadow:2px 3px 0 rgba(10,7,3,.4), inset 0 1px 0 rgba(255,246,220,.5);
}
.eyebrow::before{ content:"\2726"; font-size:.62rem; color:#3a2c10; }
.section-head.center .eyebrow,.timeline-head .eyebrow{ transform:none; }

.brand::first-letter{ color:var(--accent-text); }

.dropcap::first-letter{
  float:left; font-family:var(--serif); font-weight:700;
  font-size:3.1em; line-height:.72; padding:.06em .12em .02em 0;
  color:var(--accent-text); text-shadow:0 2px 0 rgba(0,0,0,.35);
}
.gilt{
  color:var(--accent-text);
  background:linear-gradient(180deg,var(--gold-hi),var(--gold) 55%,var(--gold-lo));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
h1 .ink-line{ position:relative; }
h1 .ink-line::after{
  content:""; position:absolute; left:0; right:0; bottom:-.06em; height:.14em;
  background:linear-gradient(90deg,transparent,var(--gold),transparent); opacity:.7; border-radius:2px;
}

/* ============================================================
   CLIPPINGS — cards become bone newsprint pinned to the wall
   ============================================================ */
.pkg,.testi,.planner-panel,.contact-card,.team-card{
  background:linear-gradient(178deg,var(--news),var(--news-2)) !important;
  color:var(--paper-ink) !important;
  border:1px solid rgba(90,66,24,.28) !important;
  border-radius:2px !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,251,236,.4),
    0 22px 40px -24px rgba(0,0,0,.75),
    0 8px 16px -14px rgba(0,0,0,.6) !important;
  position:relative;
}
.pkg::before,.testi::before,.contact-card::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; border-radius:2px;
  background:repeating-linear-gradient(0deg, rgba(42,35,24,.05) 0 1px, transparent 1px 6px);
}
.planner-panel::before{ inset:6px; border:1px dashed rgba(90,66,24,.3); background:none; }
.pkg > *,.testi > *,.planner-panel > *,.contact-card > *{ position:relative; z-index:1; }

.pkg h3,.testi .who,.contact-card h3{ color:var(--paper-ink) !important; }
.pkg .pkg-tag,.pkg .price-note,.pkg-teslim,.testi .meta,.contact-card .cc-sub{ color:var(--paper-faint) !important; }
.pkg-list li,.contact-card a,.contact-card .cc-value{ color:var(--paper-soft) !important; }
.pkg .price{ color:#7a5320 !important; }
.pkg .price span{ color:var(--paper-faint) !important; }
.pkg-list li::before{ color:var(--gold-lo) !important; }
.testi p{ color:#463c2c !important; font-style:italic; }
.pkg-teslim{ border-top-color:rgba(90,66,24,.2) !important; }
.pkg .pkg-list.excl li,.pkg .pkg-list.excl li::before{ color:var(--paper-faint) !important; }

.pkg::after,.testi::after{
  content:"\2014 ar\015fiv \2014"; position:absolute; z-index:1; left:0; right:0; bottom:8px;
  text-align:center; font-family:var(--sans); font-weight:700; font-size:.56rem;
  letter-spacing:.28em; text-transform:uppercase; color:rgba(90,66,24,.4); pointer-events:none;
}
.pkg{ padding-bottom:34px !important; }
.testi{ padding-bottom:38px !important; overflow:visible; }

.pkg,.testi,.contact-card,.team-card{ transition:transform 240ms cubic-bezier(.2,.7,.2,1),box-shadow 240ms ease; }
.pkg:nth-child(3n+1){ transform:rotate(-.8deg); } .pkg:nth-child(3n){ transform:rotate(.7deg); }
.testi:nth-child(odd){ transform:rotate(-.7deg); } .testi:nth-child(even){ transform:rotate(.8deg); }
.contact-card:nth-child(odd){ transform:rotate(-.6deg); } .contact-card:nth-child(even){ transform:rotate(.6deg); }
.pkg:hover,.testi:hover,.contact-card:hover{ transform:translateY(-5px) rotate(0deg) !important; z-index:9;
  box-shadow:inset 0 0 0 1px rgba(255,251,236,.4),0 34px 54px -26px rgba(0,0,0,.85) !important; }
.pkg.is-featured{ background:linear-gradient(178deg,#f0e7d0,#e4d6b6) !important; border-color:var(--gold) !important;
  box-shadow:inset 0 0 0 1px rgba(255,251,236,.5),0 30px 52px -24px rgba(120,90,40,.7),0 0 0 2px rgba(176,137,79,.25) !important; }
.pkg.is-featured::after{ content:""; }

/* planner form on paper — fully usable, dark ink on cream */
.planner-panel h3{ color:var(--paper-ink) !important; }
.planner-panel .muted{ color:var(--paper-faint) !important; }
.planner-panel .field > span.label{ color:var(--paper-ink) !important; }
.planner-panel .field input[type="text"],
.planner-panel .field input[type="date"],
.planner-panel .field select,
.planner-panel .field textarea{
  background:#fbf6e8 !important; border:1px solid rgba(90,66,24,.4) !important;
  color:var(--paper-ink) !important; border-radius:3px !important;
}
.planner-panel .field input::placeholder{ color:var(--paper-faint) !important; }
.planner-panel .field input:focus,.planner-panel .field select:focus,.planner-panel .field textarea:focus{
  border-color:var(--gold-lo) !important; box-shadow:0 0 0 3px rgba(176,137,79,.25) !important; }
.planner-panel .freq-opt span{ background:#f6efdd !important; border-color:rgba(90,66,24,.35) !important; color:var(--paper-soft) !important; }
.planner-panel .freq-opt input:checked + span{ background:rgba(176,137,79,.24) !important; border-color:var(--gold-lo) !important; color:var(--paper-ink) !important; }
.planner-panel .planner-note{ color:var(--paper-faint) !important; }

.planner-result{ border:1px solid var(--gold) !important;
  box-shadow:0 22px 44px -22px rgba(0,0,0,.8), inset 0 0 0 1px rgba(176,137,79,.18) !important; }

/* clip-card (timeline) — already paper: add folio + polish */
.clip-card{ background:linear-gradient(178deg,var(--news),var(--news-2)) !important; }
.clip-card__img img{ filter:sepia(.34) contrast(1.03) brightness(.99); }
.clip-card::after{
  content:"Fol."; position:absolute; right:10px; bottom:8px; font-family:var(--serif);
  font-weight:700; font-size:.6rem; letter-spacing:.12em; color:rgba(90,66,24,.5);
}

/* framed media: gilt frame + mat on photos */
.se-media img,.calendar-media img{ filter:sepia(.2) contrast(1.02); }
.se-media,.calendar-media{
  border:6px solid var(--gold) !important;
  border-image:linear-gradient(135deg,var(--gold-hi),var(--gold) 45%,var(--gold-lo)) 1 !important;
  border-radius:0 !important;
  box-shadow:0 26px 46px -24px rgba(0,0,0,.8), inset 0 0 0 2px rgba(90,66,24,.3) !important;
}
.gallery figure{ border:4px solid var(--gold) !important;
  border-image:linear-gradient(135deg,var(--gold-hi),var(--gold) 45%,var(--gold-lo)) 1 !important;
  border-radius:0 !important; background:var(--news) !important; }
.macro-tag{ background:var(--news) !important; color:var(--paper-ink) !important; border:1px solid var(--gold-line); }

/* faq on the wall — bone text stays; gold rules */
.faq-item{ border-bottom:1px solid var(--gold-line) !important; }
.faq-item summary{ color:var(--ink) !important; }
.faq-item summary::after{ color:var(--accent-text) !important; }

/* stats become almanac tallies */
.stat .num{ color:var(--accent-text) !important; text-shadow:0 2px 0 rgba(0,0,0,.4); }
.stat{ position:relative; }
.section--band .stat::after{ content:""; position:absolute; right:-10px; top:16%; bottom:16%; width:1px; background:var(--gold-line); }
.stats .stat:last-child::after{ display:none; }
@media (max-width:760px){ .section--band .stat::after{ display:none; } }

.btn-ghost:hover{ background:rgba(233,223,196,.12) !important; }

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

.pm-rail{ height:6px; left:0; right:0; width:100%;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold) 45%,var(--gold-lo));
  box-shadow:0 3px 7px -3px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,246,220,.5); opacity:.9; }

.pm-scrap{ width:96px; height:66px; background:var(--news);
  background-image:repeating-linear-gradient(0deg, rgba(42,35,24,.22) 0 1px, transparent 1px 5px);
  box-shadow:0 14px 24px -14px rgba(0,0,0,.7);
  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); }
.pm-scrap.dark{ background:#2e241a; background-image:repeating-linear-gradient(0deg, rgba(233,223,196,.16) 0 1px, transparent 1px 5px); }

.pm-strip{ width:150px; height:30px; background:var(--news-2);
  box-shadow:0 10px 20px -12px rgba(0,0,0,.7); transform:rotate(-2deg);
  background-image:linear-gradient(0deg,rgba(42,35,24,.7) 0 40%,transparent 40%),
    repeating-linear-gradient(0deg,transparent 0 6px, rgba(42,35,24,.16) 6px 7px);
  background-size:100% 12px,100% 100%; background-repeat:no-repeat,repeat; }

.pm-halftone{ width:64px; height:64px; opacity:.5;
  background-image:radial-gradient(rgba(176,137,79,.6) 26%, transparent 28%);
  background-size:9px 9px; transform:rotate(6deg); }
.pm-dot{ width:52px; height:52px; opacity:.42;
  background-image:radial-gradient(rgba(233,223,196,.5) 22%, transparent 24%);
  background-size:8px 8px; }

.pm-column{ width:52px; height:150px; background:rgba(233,223,196,.05);
  background-image:repeating-linear-gradient(0deg, rgba(233,223,196,.16) 0 1px, transparent 1px 6px);
  border-left:1px solid var(--gold-line); border-right:1px solid var(--gold-line); transform:rotate(1deg); }

.pm-dateline{ font-family:var(--sans); font-weight:700; font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color:#26200f; padding:5px 9px;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold) 60%,var(--gold-lo));
  border:1px solid rgba(90,66,24,.5); box-shadow:2px 3px 0 rgba(10,7,3,.4); transform:rotate(-3deg);
  white-space:nowrap; }

.pm-folio{ width:34px; height:34px; display:grid; place-items:center;
  font-family:var(--serif); font-weight:700; font-size:15px; color:var(--news);
  border:1px solid var(--gold-line); border-radius:50%; background:rgba(20,14,8,.5); transform:rotate(-6deg); }

.pm-byline{ font-family:var(--sans); font-size:9px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--news); background:rgba(20,14,8,.55);
  border:1px solid var(--gold-line); padding:4px 8px; transform:rotate(-1.4deg); white-space:nowrap; }

.pm-placard{ background:var(--news); color:var(--paper-ink);
  font-family:var(--sans); font-size:10px; line-height:1.4; letter-spacing:.02em;
  padding:8px 11px 9px; max-width:160px;
  box-shadow:0 14px 24px -14px rgba(0,0,0,.7), inset 0 0 0 1px rgba(90,66,24,.16); transform:rotate(-1.6deg); }
.pm-placard b{ display:block; font-family:var(--serif); font-weight:700; font-size:11px;
  color:var(--gold-lo); margin-bottom:2px; text-transform:uppercase; letter-spacing:.08em; }
.pm-placard i{ font-style:normal; color:var(--paper-faint); font-variant-numeric:tabular-nums; }

.pm-cross{ width:24px; height:24px; }
.pm-cross::before,.pm-cross::after{ content:""; position:absolute; background:rgba(176,137,79,.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:20px; height:20px; border-top:2px solid rgba(176,137,79,.6); border-left:2px solid rgba(176,137,79,.6); }
.pm-crop.br{ border-top:0; border-left:0; border-bottom:2px solid rgba(176,137,79,.6); border-right:2px solid rgba(176,137,79,.6); }

.pm-letter{ width:32px; height:36px; display:grid; place-items:center;
  font-family:var(--serif); font-weight:700; font-size:20px; color:var(--paper-ink);
  background:var(--news); box-shadow:0 8px 16px -10px rgba(0,0,0,.7); transform:rotate(-5deg); }
.pm-letter.dark{ background:#241a10; color:var(--gold-hi); }

.pm-tape{ width:78px; height:22px; background:rgba(233,223,196,.16);
  border:1px solid rgba(255,255,255,.18); box-shadow:0 4px 9px -6px rgba(0,0,0,.6); transform:rotate(-6deg); }
.pm-tape.tp-gold{ background:rgba(176,137,79,.26); }

.pm-seal{ width:62px; height:62px; border-radius:50%;
  background:radial-gradient(circle at 38% 34%, #93332b, var(--wax) 58%, #47130f 100%);
  box-shadow:0 12px 22px -10px rgba(50,10,8,.7), inset 0 2px 4px rgba(255,255,255,.16), inset 0 -6px 10px rgba(0,0,0,.4);
  display:grid; place-items:center; transform:rotate(-6deg); }
.pm-seal::before{ content:""; position:absolute; inset:6px; border-radius:50%; border:1px dashed rgba(255,225,205,.4); }
.pm-seal::after{ content:"K"; font-family:var(--serif); font-weight:700; font-size:24px; color:rgba(255,231,207,.92); text-shadow:0 1px 1px rgba(0,0,0,.5); }
.pm-seal.lg{ width:84px; height:84px; } .pm-seal.lg::after{ font-size:32px; }

.pm-ribbon{ width:26px; height:120px; top:0;
  background:linear-gradient(90deg,#6f2019,var(--ribbon) 45%,#5c1a14);
  box-shadow:0 10px 18px -10px rgba(0,0,0,.7), inset 1px 0 0 rgba(255,255,255,.12);
  clip-path:polygon(0 0,100% 0,100% 100%,50% 84%,0 100%); }

.pm-stamp{ width:70px; height:70px; border-radius:50%;
  border:2px solid rgba(176,137,79,.55); display:grid; place-items:center; transform:rotate(-12deg); opacity:.7; }
.pm-stamp::before{ content:""; position:absolute; inset:5px; border-radius:50%; border:1px dashed rgba(176,137,79,.45); }
.pm-stamp::after{ content:"AR\015eIV"; font-family:var(--sans); font-weight:700; font-size:9px; letter-spacing:.18em; color:rgba(176,137,79,.8); }

.pm-deckle{ width:110px; height:74px; background:var(--almanac);
  box-shadow:0 16px 28px -16px rgba(0,0,0,.7);
  clip-path:polygon(0 6%,6% 0,94% 3%,100% 10%,97% 90%,100% 100%,8% 97%,0 92%); transform:rotate(2deg);
  background-image:repeating-linear-gradient(0deg, rgba(42,35,24,.08) 0 1px, transparent 1px 6px); }

/* mobile decor curation (curate ~40-55%, scale — NOT remove substrate) */
@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-scrap,.pm-placard,.pm-deckle,.pm-seal,.pm-strip,.pm-column,.pm-halftone{
    transform:scale(.8) rotate(-2deg); transform-origin:top left; }
}

/* ============================================================
   SIGNATURE SCENE — ARSIV concertina UNFOLDS (sticky-pin)
   ============================================================ */
.fold-track{ position:relative; height:400vh; }
.fold-pin{ position:sticky; top:0; height:100vh; overflow:hidden; display:grid; place-items:center;
  background-image:
    radial-gradient(120% 80% at 50% -8%, rgba(231,201,135,.14), transparent 55%),
    linear-gradient(97deg, rgba(233,223,196,.10) 0 34%, transparent 34.4%),
    repeating-linear-gradient(0deg, rgba(233,223,196,.04) 0 1px, transparent 1px 6px);
  box-shadow:inset 0 0 200px rgba(10,7,3,.5); }
.fold-wrap{ width:100%; max-width:1120px; margin-inline:auto;
  padding-inline:clamp(16px,4vw,40px);
  display:flex; flex-direction:column; gap:clamp(20px,3vw,34px); align-items:center; text-align:center; }
.fold-stage{ position:relative; width:100%; display:flex; justify-content:center; }
.fold-cap{ max-width:60ch; }
.fold-cap .lead{ margin-inline:auto; }
.fold-strip{ display:flex; perspective:1700px; transform-style:preserve-3d;
  width:max-content; max-width:100%; margin-inline:auto; }
.fold-panel{ position:relative; flex:0 0 auto;
  width:clamp(116px,14.5vw,166px); aspect-ratio:3/4;
  transform-origin:left center; transform:rotateY(-88deg); backface-visibility:hidden;
  background:linear-gradient(176deg,var(--news),var(--news-2));
  border:1px solid rgba(90,66,24,.4);
  box-shadow:0 24px 40px -22px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,251,236,.4);
  will-change:transform; }
.fold-panel:first-child{ transform:rotateY(0deg); transform-origin:center; box-shadow:0 24px 44px -20px rgba(0,0,0,.85); }
.fold-panel .fp-img{ position:absolute; inset:7px 7px 34px; overflow:hidden; background:#2a2016; }
.fold-panel .fp-img img{ width:100%; height:100%; object-fit:cover; filter:sepia(.34) contrast(1.03); display:block; }
.fold-panel .fp-date{ position:absolute; left:7px; top:7px; z-index:3;
  font-family:var(--sans); font-weight:700; font-size:8.5px; letter-spacing:.08em;
  background:var(--paper-ink); color:var(--news); padding:3px 6px; }
.fold-panel .fp-cap{ position:absolute; left:8px; right:8px; bottom:9px; z-index:3;
  font-family:var(--serif); font-weight:700; font-size:10.5px; line-height:1.15; color:var(--paper-ink); }
.fold-panel .fp-fol{ position:absolute; right:8px; bottom:9px; z-index:3;
  font-family:var(--serif); font-size:8px; color:rgba(90,66,24,.6); }
.fold-panel::before{ content:""; position:absolute; top:0; bottom:0; right:0; width:2px; z-index:4;
  background:linear-gradient(180deg,rgba(255,251,236,.5),rgba(90,66,24,.5)); }
.fold-panel::after{ content:""; position:absolute; inset:0; z-index:5; pointer-events:none;
  background:linear-gradient(90deg, var(--crease) 0%, rgba(24,17,9,.12) 40%, transparent 78%);
  opacity:calc(1 - var(--o,0)); }
.fold-panel:first-child::before{ display:none; }

.fold-seal{ position:absolute; z-index:12; left:50%; top:50%; transform:translate(-50%,-50%) rotate(-6deg);
  width:74px; height:74px; border-radius:50%;
  background:radial-gradient(circle at 38% 34%, #93332b, var(--wax) 58%, #47130f 100%);
  box-shadow:0 14px 26px -10px rgba(50,10,8,.7), inset 0 2px 4px rgba(255,255,255,.16), inset 0 -6px 10px rgba(0,0,0,.4);
  display:grid; place-items:center; }
.fold-seal::after{ content:"K"; font-family:var(--serif); font-weight:700; font-size:30px; color:rgba(255,231,207,.92); }
.fold-ribbon{ position:absolute; z-index:11; left:calc(50% - 13px); top:-4px; width:26px; height:150px;
  background:linear-gradient(90deg,#6f2019,var(--ribbon) 45%,#5c1a14);
  box-shadow:0 10px 18px -10px rgba(0,0,0,.7); clip-path:polygon(0 0,100% 0,100% 100%,50% 86%,0 100%); }

.fold-cap .fold-c{ opacity:0; transform:translateY(20px); }
.fold-cap h2{ font-size:clamp(1.9rem,4vw,2.9rem); }
.fold-cap .lead{ color:var(--ink-soft); max-width:44ch; margin-top:12px; }
.fold-readout{ margin-top:20px; display:inline-flex; align-items:center; gap:12px;
  font-family:var(--sans); font-weight:700; font-size:14px; color:var(--ink);
  border:1px solid var(--gold-line); border-radius:2px; padding:10px 16px; background:rgba(20,14,8,.5); }
.fold-readout b{ color:var(--accent-text); font-variant-numeric:tabular-nums; min-width:5ch; text-align:right; }
.fold-cap .gilt-word{ color:var(--accent-text); }
@media (max-width:1000px){ .fold-track{ height:340vh; } .fold-panel{ width:clamp(104px,17vw,150px); } }
@media (max-width:600px){
  .fold-track{ height:280vh; }
  .fold-panel{ width:22vw; }
  .fold-panel:nth-child(n+6){ display:none; }
}

/* ============================================================
   PRELOADER  +  gold-dust motes
   ============================================================ */
#pre{ position:fixed; inset:0; z-index:99999; display:grid; place-items:center;
  background-color:#241c14;
  background-image:
    radial-gradient(120% 90% at 50% -8%, rgba(231,201,135,.12), transparent 55%),
    repeating-linear-gradient(0deg, rgba(233,223,196,.04) 0 1px, transparent 1px 6px),
    linear-gradient(180deg,#2a2016,#1d160f);
  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(--news),var(--news-2)); color:var(--paper-ink);
  padding:30px 46px; border:7px solid var(--gold);
  border-image:linear-gradient(135deg,var(--gold-hi),var(--gold) 45%,var(--gold-lo)) 1;
  box-shadow:0 30px 56px -24px rgba(0,0,0,.8); transform:rotate(-1.2deg); }
#pre .pl-mark{ font-family:var(--serif); font-weight:700; font-size:clamp(24px,7vw,42px); letter-spacing:.02em; color:var(--paper-ink); }
#pre .pl-mark b{ color:var(--gold-lo); font-weight:700; }
#pre .pl-sub{ font-family:var(--sans); font-size:10px; font-weight:700; letter-spacing:.3em; text-transform:uppercase; color:var(--paper-faint); margin-top:8px; }
#pre .pl-bar{ margin:20px auto 0; width:min(230px,58vw); height:8px; border:1px solid var(--gold-line); background:rgba(90,66,24,.16); overflow:hidden; position:relative; }
#pre .pl-bar i{ position:absolute; inset:0; width:0; background:linear-gradient(90deg,var(--gold),var(--gold-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; }

/* ============================================================
   REDUCED MOTION — resolve scenes to final state
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .fold-cap .fold-c{ opacity:1; transform:none; }
  .fold-panel{ transform:rotateY(0deg) !important; }
  .fold-panel::after{ opacity:0 !important; }
  .fold-seal,.fold-ribbon{ opacity:0 !important; }
}

@media (max-width:760px){
  .hero .pm-seal{ width:48px; height:48px; } .hero .pm-seal::after{ font-size:19px; }
  .hero .pm-ribbon{ height:84px; }
}

/* ============================================================
   REAL-PHOTO COLLAGE — gilt-framed cut-outs of the archive
   ============================================================ */
.pframe{
  position:relative; overflow:hidden; background:var(--news);
  border:5px solid var(--gold);
  border-image:linear-gradient(135deg,var(--gold-hi),var(--gold) 45%,var(--gold-lo)) 1;
  box-shadow:0 24px 44px -24px rgba(0,0,0,.8), inset 0 0 0 2px rgba(90,66,24,.3);
}
.pframe > img{ width:100%; height:100%; object-fit:cover; filter:sepia(.26) contrast(1.03); display:block; }
.pframe .pf-date{
  position:absolute; left:8px; top:8px; z-index:3;
  font-family:var(--sans); font-weight:700; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase;
  color:#26200f; padding:4px 8px;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold) 60%,var(--gold-lo));
  border:1px solid rgba(90,66,24,.5); box-shadow:2px 3px 0 rgba(10,7,3,.35); white-space:nowrap;
}
.pframe .pf-cap{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  padding:26px 12px 11px;
  background:linear-gradient(transparent, rgba(18,13,8,.92));
  font-family:var(--serif); font-weight:700; font-size:.9rem; line-height:1.2; color:var(--news);
}

/* responsive collage row for previously bare / CSS-only areas */
.photo-strip{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:clamp(16px,2.4vw,28px);
}
.photo-strip .pframe{ aspect-ratio:4/3; transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease; }
.photo-strip .pframe:nth-child(odd){ transform:rotate(-1.1deg); }
.photo-strip .pframe:nth-child(even){ transform:rotate(1deg); }
.photo-strip .pframe:hover{ transform:rotate(0) translateY(-5px);
  box-shadow:0 34px 54px -26px rgba(0,0,0,.85), inset 0 0 0 2px rgba(90,66,24,.3); z-index:5; }

/* calendar media gains a paper tag like the editorial media */
.calendar-media{ position:relative; }
.calendar-media .macro-tag{
  position:absolute; bottom:12px; left:12px; z-index:3;
  font-size:.72rem; font-weight:600; padding:6px 12px; border-radius:3px; transform:rotate(-1.5deg);
}

/* HERO photo cluster — pinned gilt cut-outs (hero has overflow:hidden -> no page overflow) */
.hero-photos{ position:absolute; top:92px; right:clamp(20px,4vw,60px); z-index:4;
  width:300px; height:330px; display:none; pointer-events:none; }
@media (min-width:1120px){ .hero-photos{ display:block; } }
.hero-photos .pframe{ position:absolute; box-shadow:0 28px 48px -22px rgba(0,0,0,.85), inset 0 0 0 2px rgba(90,66,24,.3); }
.hero-photos .hp-1{ right:6px; top:0; width:172px; aspect-ratio:3/4; transform:rotate(3.2deg); z-index:2; }
.hero-photos .hp-2{ left:0; top:126px; width:190px; aspect-ratio:3/2; transform:rotate(-4deg); z-index:1; }

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

/* fix: subpages readable on dark ground — body text was dark ink, make it light */
body.subpage main :is(p,li,dd,td,figcaption,blockquote,span){ color:#D8CDB8 !important; }
body.subpage main :is(h1,h2,h3,h4){ color:#EAE0D0 !important; }
body.subpage main a:not([class*=btn]):not(.nav-cta){ color:#EAE0D0 !important; }
body.subpage main .eyebrow, body.subpage main .pm-dateline{ color:#26200f !important; }
/* fix#2: the blanket light-text rule above wrongly lightened text inside the LIGHT
   cream cards (.pkg/.testi/.planner-panel/.contact-card/.team-card use --news bg),
   making it merge. Restore dark paper-ink inside those cards (higher specificity wins). */
body.subpage main :is(.pkg,.testi,.planner-panel,.contact-card,.team-card) :is(h1,h2,h3,h4,h5,p,li,dd,dt,span,strong,em,figcaption,blockquote,td,th){ color:var(--paper-ink) !important; }
body.subpage main :is(.pkg,.testi,.planner-panel,.contact-card,.team-card) .tc-role{ color:rgba(44,38,31,.74) !important; }
body.subpage main :is(.pkg,.testi,.planner-panel,.contact-card,.team-card) a:not([class*=btn]):not(.nav-cta){ color:var(--paper-ink) !important; }
body.subpage main .macro-tag{ color:var(--paper-ink) !important; }
/* the avatar chip keeps its own DARK gradient bg — its initials must stay light/gold */
body.subpage main .team-card .tc-avatar span{ color:var(--accent-text) !important; }