/* self-hosted fonts (restored after polish strip) */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400;
  font-display: optional;
  src: url(../fonts/Fraunces-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: 'Fraunces';
  font-style: italic;
  font-weight: 400;
  font-display: optional;
  src: url(../fonts/Fraunces-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: 'Fraunces';
  font-style: italic;
  font-weight: 600;
  font-display: optional;
  src: url(../fonts/Fraunces-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: 'Fraunces';
  font-style: italic;
  font-weight: 600;
  font-display: optional;
  src: url(../fonts/Fraunces-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: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url(../fonts/Fraunces-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: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url(../fonts/Fraunces-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: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url(../fonts/Fraunces-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: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url(../fonts/Fraunces-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: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url(../fonts/Fraunces-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: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url(../fonts/Fraunces-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: 'Fraunces';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url(../fonts/Fraunces-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: 'Fraunces';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url(../fonts/Fraunces-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: 'Inter';
  font-style: italic;
  font-weight: 400;
  font-display: optional;
  src: url(../fonts/Inter-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: 'Inter';
  font-style: italic;
  font-weight: 400;
  font-display: optional;
  src: url(../fonts/Inter-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: 'Inter';
  font-style: italic;
  font-weight: 600;
  font-display: optional;
  src: url(../fonts/Inter-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: 'Inter';
  font-style: italic;
  font-weight: 600;
  font-display: optional;
  src: url(../fonts/Inter-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: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url(../fonts/Inter-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: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url(../fonts/Inter-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: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url(../fonts/Inter-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: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url(../fonts/Inter-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: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url(../fonts/Inter-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: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url(../fonts/Inter-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: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url(../fonts/Inter-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: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url(../fonts/Inter-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;
}

/* ============================================================
   KATMAN — Kolaj Atölyesi
   Editorial-dergi · yırtık kağıt · katman katman
   ============================================================ */

:root {
  --bg: #F4F1EA;
  --surface: #FFFFFF;
  --surface-2: #EDE7D9;
  --surface-3: #E4DAC6;
  --ink: #1A1714;
  --ink-soft: #453D34;
  --muted: #6A5F52;
  --accent: #C8442A;         /* vermilion — fills / borders / decor */
  --accent-text: #9A2E19;    /* darkened — text on light */
  --accent-2: #33566B;       /* slate blue */
  --accent-2-text: #294455;
  --line: rgba(26, 23, 20, 0.14);
  --line-strong: rgba(26, 23, 20, 0.30);

  --serif: 'Fraunces', 'Georgia', 'Times New Roman', serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Courier New', 'Courier', monospace;

  --container: 1180px;
  --header-h: 74px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-2: cubic-bezier(.4, 0, .2, 1);

  interpolate-size: allow-keywords;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  max-width: 100vw;
}
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.68;
  letter-spacing: 0.01em;
  overflow-x: hidden;
  max-width: 100vw;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
figure, figcaption, blockquote, dl, dd { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4 { line-height: 1.14; margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

/* ---------- typography helpers ---------- */
.eyebrow {
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-text);
  display: inline-block;
}
.display {
  font-family: var(--serif);
  font-weight: 800;
  font-style: italic;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.serif { font-family: var(--serif); }
.lead { font-size: 1.16rem; color: var(--ink-soft); line-height: 1.62; }

/* drop-cap */
.drop-cap::first-letter {
  font-family: var(--serif);
  font-weight: 800;
  font-style: italic;
  font-size: 4.4em;
  line-height: 0.72;
  float: left;
  padding: 0.06em 0.14em 0 0;
  color: var(--accent-text);
}

/* ---------- layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: clamp(20px, 5vw, 72px);
  padding-right: clamp(20px, 5vw, 72px);
}
main { padding-top: var(--header-h); }
.section { padding: clamp(56px, 9vw, 118px) 0; position: relative; }
.section.container, .page-hero.container { padding-left: clamp(20px, 5vw, 40px); padding-right: clamp(20px, 5vw, 40px); }
.section--paper {
  background-color: var(--surface);
  background-image:
    radial-gradient(circle at 18% 20%, rgba(200, 68, 42, 0.035), transparent 42%),
    radial-gradient(circle at 82% 78%, rgba(51, 86, 107, 0.04), transparent 46%);
  background-size: cover;
  background-position: center;
}
.section--tone {
  background-color: var(--ink);
  color: var(--surface);
}
.section--tone .eyebrow { color: #E8A18F; }

/* torn-paper divider between sections */
.torn {
  position: relative;
  height: 26px;
  background: transparent;
  margin-top: -1px;
}
.torn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bg);
  -webkit-mask-image: linear-gradient(180deg, transparent 40%, #000 40%);
  mask-image: linear-gradient(180deg, transparent 40%, #000 40%);
  clip-path: polygon(0 55%, 4% 40%, 9% 62%, 14% 44%, 19% 66%, 24% 46%, 30% 68%, 36% 48%, 42% 70%, 48% 50%, 54% 68%, 60% 46%, 66% 66%, 72% 44%, 78% 64%, 84% 42%, 90% 62%, 95% 44%, 100% 58%, 100% 100%, 0 100%);
}

/* ============================================================
   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(244, 241, 234, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
  transition: background 240ms var(--ease), box-shadow 240ms var(--ease), height 240ms var(--ease);
}
.site-header.is-scrolled {
  background: rgba(244, 241, 234, 0.98);
  box-shadow: 0 8px 24px -16px rgba(26, 23, 20, 0.4);
  border-bottom-color: var(--line);
  height: 64px;
}
.header-inner {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: clamp(20px, 5vw, 72px);
  padding-right: clamp(20px, 5vw, 72px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.brand {
  font-family: var(--serif);
  font-weight: 800;
  font-style: italic;
  font-size: 1.32rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  white-space: nowrap;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.brand small {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 600;
  font-size: 0.56rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.nav-desktop { display: none; }
@media (min-width: 1024px) {
  .nav-desktop {
    display: flex;
    align-items: center;
    gap: clamp(18px, 2.4vw, 34px);
  }
  .nav-desktop a {
    position: relative;
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--ink-soft);
    padding: 6px 0;
    transition: color 200ms var(--ease);
  }
  .nav-desktop a::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 0; height: 2px;
    background: var(--accent);
    transition: width 240ms 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 a.nav-cta { color: var(--surface); padding: 10px 20px; display: inline-flex; align-items: center; }
  .nav-desktop .nav-cta::after { display: none; }
}

.nav-cta {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  background: var(--ink);
  color: var(--surface);
  padding: 10px 20px;
  border-radius: 2px;
  transition: background 200ms var(--ease), color 200ms var(--ease), transform 200ms var(--ease);
}
.nav-cta:hover, .nav-cta:focus-visible {
  background: var(--accent);
  color: var(--surface);
  transform: translateY(-1px);
}

/* hamburger */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 10px;
  background: transparent;
  border: 0;
  position: relative;
  z-index: 1100;
}
@media (min-width: 1024px) { .nav-toggle { display: none; } }
.nav-toggle span {
  display: block;
  height: 2px;
  width: 24px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 260ms var(--ease), opacity 200ms var(--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); }

/* ---------- drawer ---------- */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(26, 23, 20, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 240ms var(--ease), visibility 240ms var(--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);
  background: var(--bg);
  border-left: 3px solid var(--accent);
  transform: translateX(100%);
  transition: transform 320ms var(--ease);
  z-index: 1050;
  padding: calc(var(--header-h) + 24px) 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
}
.drawer.is-open { transform: translateX(0); }
.drawer a {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--ink);
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  transition: color 200ms var(--ease), padding-left 200ms var(--ease);
}
.drawer a:hover, .drawer a.is-active { color: var(--accent-text); padding-left: 8px; }
.drawer .nav-cta {
  color: var(--surface);
  background: var(--ink);
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.9rem;
  text-align: center;
  justify-content: center;
  display: flex;
  margin-top: 20px;
  border-bottom: 0;
  padding: 14px 20px;
}
.drawer .nav-cta:hover { padding-left: 20px; color: var(--surface); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  padding: 14px 26px;
  border-radius: 2px;
  border: 1.5px solid transparent;
  transition: background 220ms var(--ease), color 220ms var(--ease), transform 220ms var(--ease), box-shadow 220ms var(--ease);
}
.btn-primary { background: var(--accent); color: #FFF6F1; }
.btn-primary:hover, .btn-primary:focus-visible {
  background: var(--ink);
  color: var(--surface);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -18px rgba(200, 68, 42, 0.9);
}
.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 .arrow { transition: transform 220ms var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

/* ============================================================
   HERO — type-only massive
   ============================================================ */
.hero {
  position: relative;
  padding: clamp(40px, 7vw, 88px) 0 clamp(40px, 6vw, 72px);
  overflow: hidden;
}
.hero-inner { position: relative; z-index: 2; }
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(20px, 3vw, 34px);
}
.hero-eyebrow::before {
  content: "";
  width: 42px; height: 2px;
  background: var(--accent);
}
.hero h1 {
  font-family: var(--serif);
  font-weight: 800;
  font-style: italic;
  letter-spacing: -0.02em;
  font-size: clamp(3.1rem, 11vw, 4.5rem);
  line-height: 0.96;
  color: var(--ink);
  max-width: 15ch;
}
.hero h1 .line { display: block; overflow: hidden; }
.hero h1 .line > span {
  display: block;
  transform: translateY(105%);
  animation: mask-rise 900ms var(--ease) forwards;
  animation-delay: calc(var(--i, 0) * 130ms + 150ms);
}
.hero h1 .accent { color: var(--accent-text); }
@keyframes mask-rise { to { transform: translateY(0); } }

.hero-sub {
  margin-top: clamp(24px, 3.4vw, 40px);
  max-width: 44ch;
  font-size: clamp(1.05rem, 2vw, 1.32rem);
  color: var(--ink-soft);
  line-height: 1.56;
  opacity: 0;
  animation: fade-up 800ms var(--ease) forwards;
  animation-delay: 640ms;
}
@keyframes fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.hero-actions {
  margin-top: clamp(28px, 3.6vw, 44px);
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  opacity: 0;
  animation: fade-up 800ms var(--ease) forwards;
  animation-delay: 780ms;
}
.hero-trust {
  margin-top: clamp(26px, 3vw, 40px);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 8px;
  opacity: 0;
  animation: fade-up 800ms var(--ease) forwards;
  animation-delay: 900ms;
}
.trust-chip {
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 7px 13px;
  border-radius: 100px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.trust-chip::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
}

/* hero collage figure — signature "yapıştırılan kağıt" mask reveal */
.hero-collage {
  position: relative;
  margin-top: clamp(40px, 6vw, 72px);
}
.hero-collage-frame {
  position: relative;
  aspect-ratio: 16 / 8.2;
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: 0 40px 80px -50px rgba(26, 23, 20, 0.7);
}
.hero-collage-frame img {
  width: 100%; height: 100%;
  object-fit: cover;
}
/* pasted torn paper pieces sliding over */
.paper-piece {
  position: absolute;
  background-size: cover;
  background-position: center;
  box-shadow: 0 10px 24px -14px rgba(26, 23, 20, 0.6);
  opacity: 0;
  animation: paste-in 720ms var(--ease) forwards;
}
.paper-piece.p1 {
  width: 26%; height: 42%;
  left: 6%; top: 12%;
  background: linear-gradient(135deg, var(--surface-2), var(--surface-3));
  transform: rotate(-4deg) translateY(24px);
  clip-path: polygon(3% 6%, 96% 0, 100% 88%, 90% 100%, 8% 96%, 0 12%);
  animation-delay: 500ms;
}
.paper-piece.p2 {
  width: 20%; height: 30%;
  right: 10%; top: 20%;
  background: linear-gradient(135deg, var(--accent-2), var(--accent-2-text));
  transform: rotate(5deg) translateY(24px);
  clip-path: polygon(0 8%, 92% 3%, 100% 90%, 84% 100%, 6% 92%, 4% 10%);
  animation-delay: 700ms;
}
.paper-piece.p3 {
  width: 30%; height: 22%;
  left: 34%; bottom: 10%;
  background: var(--accent);
  transform: rotate(-2deg) translateY(24px);
  clip-path: polygon(2% 10%, 97% 0, 100% 82%, 92% 100%, 5% 94%, 0 16%);
  animation-delay: 880ms;
  display: flex; align-items: center; justify-content: center;
}
.paper-piece.p3 span {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 800;
  color: #FFF6F1;
  font-size: clamp(0.9rem, 2.4vw, 1.7rem);
  letter-spacing: -0.01em;
  transform: rotate(2deg);
}
@keyframes paste-in {
  from { opacity: 0; transform: var(--from, rotate(0)) translateY(24px); }
  to { opacity: 1; }
}
.paper-piece.p1 { animation-name: paste-p1; }
.paper-piece.p2 { animation-name: paste-p2; }
.paper-piece.p3 { animation-name: paste-p3; }
@keyframes paste-p1 { from { opacity: 0; transform: rotate(-4deg) translateY(24px); } to { opacity: 1; transform: rotate(-4deg) translateY(0); } }
@keyframes paste-p2 { from { opacity: 0; transform: rotate(5deg) translateY(24px); } to { opacity: 1; transform: rotate(5deg) translateY(0); } }
@keyframes paste-p3 { from { opacity: 0; transform: rotate(-2deg) translateY(24px); } to { opacity: 1; transform: rotate(-2deg) translateY(0); } }

/* ============================================================
   SECTION HEADS
   ============================================================ */
.sec-head { margin-bottom: clamp(34px, 5vw, 60px); max-width: 60ch; }
.sec-head .eyebrow { margin-bottom: 16px; }
.sec-head h2 {
  font-family: var(--serif);
  font-weight: 800;
  font-style: italic;
  letter-spacing: -0.015em;
  font-size: clamp(2.1rem, 5.4vw, 3.7rem);
  color: var(--ink);
}
.section--tone .sec-head h2 { color: var(--surface); }
.sec-head p { margin-top: 16px; color: var(--ink-soft); }
.section--tone .sec-head p { color: rgba(255,255,255,0.78); }

.index-num {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: var(--accent-text);
}

/* ============================================================
   MANIFESTO
   ============================================================ */
.manifesto-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(30px, 5vw, 68px);
  align-items: start;
}
@media (max-width: 860px) { .manifesto-grid { grid-template-columns: 1fr; } }
.manifesto-body p { margin: 0 0 20px; color: var(--ink-soft); }
.manifesto-body p:last-child { margin-bottom: 0; }
.manifesto-quote {
  position: relative;
  padding: clamp(24px, 4vw, 40px);
  background: var(--surface);
  border-left: 4px solid var(--accent);
  box-shadow: 0 30px 60px -46px rgba(26,23,20,0.6);
}
.manifesto-quote blockquote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.5rem, 3.4vw, 2.3rem);
  line-height: 1.22;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.manifesto-quote cite {
  display: block;
  margin-top: 22px;
  font-style: normal;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.manifesto-figure { margin-top: 28px; }
.manifesto-figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.manifesto-figure figcaption {
  margin-top: 10px;
  font-size: 0.78rem;
  color: var(--muted);
  font-style: italic;
}

/* triple maxim strip */
.maxims {
  margin-top: clamp(40px, 6vw, 70px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (max-width: 720px) { .maxims { grid-template-columns: 1fr; } }
.maxim {
  background: var(--bg);
  padding: clamp(24px, 3vw, 36px);
}
.maxim .n {
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--accent-text);
  letter-spacing: 0.1em;
}
.maxim h3 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  margin: 12px 0 8px;
  color: var(--ink);
}
.maxim p { font-size: 0.94rem; color: var(--muted); margin: 0; }

/* ============================================================
   PROGRAM (levels — textual)
   ============================================================ */
.levels { display: flex; flex-direction: column; gap: 2px; }
.level {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr) auto;
  gap: clamp(16px, 3vw, 44px);
  align-items: baseline;
  padding: clamp(26px, 3.4vw, 40px) 0;
  border-top: 1px solid var(--line-strong);
  transition: background 240ms var(--ease);
}
.levels .level:last-child { border-bottom: 1px solid var(--line-strong); }
.level:hover { background: var(--surface); }
.level-name {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(1.5rem, 3.4vw, 2.2rem);
  color: var(--ink);
  min-width: 0;
}
.level-name .tag {
  display: block;
  font-family: var(--mono);
  font-style: normal;
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--accent-text);
  margin-bottom: 6px;
}
.level-desc { min-width: 0; }
.level-desc p { margin: 0 0 12px; color: var(--ink-soft); }
.level-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.level-meta li {
  font-size: 0.76rem;
  color: var(--muted);
  border: 1px solid var(--line);
  padding: 4px 10px;
  border-radius: 100px;
}
.level-price {
  font-family: var(--mono);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  text-align: right;
}
.level-price small {
  display: block;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 4px;
}
@media (max-width: 780px) {
  .level {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .level-price { text-align: left; }
}

/* ============================================================
   PLANLAYICI (tool)
   ============================================================ */
.planner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
  gap: 2px;
  background: var(--line);
  border: 1px solid var(--line);
  box-shadow: 0 40px 80px -60px rgba(26,23,20,0.7);
}
@media (max-width: 880px) { .planner { grid-template-columns: 1fr; } }
.planner-form {
  background: var(--surface);
  padding: clamp(26px, 3.6vw, 44px);
}
.planner-out {
  background: var(--ink);
  color: var(--surface);
  padding: clamp(26px, 3.6vw, 44px);
  display: flex;
  flex-direction: column;
}
.planner-group { margin-bottom: 26px; }
.planner-group > .label {
  display: block;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.opt {
  position: relative;
}
.opt input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
}
.opt label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink-soft);
  border: 1.5px solid var(--line-strong);
  padding: 10px 16px;
  border-radius: 2px;
  cursor: pointer;
  transition: border-color 200ms var(--ease), background 200ms var(--ease), color 200ms var(--ease);
}
.opt label:hover { border-color: var(--accent); }
.opt input:checked + label {
  background: var(--ink);
  color: var(--surface);
  border-color: var(--ink);
}
.opt input:focus-visible + label {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.opt label .sub {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--accent-text);
}
.opt input:checked + label .sub { color: #E8A18F; }

.counter {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--line-strong);
  border-radius: 2px;
  overflow: hidden;
}
.counter button {
  width: 46px; height: 46px;
  border: 0; background: var(--surface-2);
  font-size: 1.3rem; color: var(--ink);
  line-height: 1;
  transition: background 200ms var(--ease), color 200ms var(--ease);
}
.counter button:hover { background: var(--accent); color: #FFF6F1; }
.counter button:disabled { opacity: 0.35; cursor: not-allowed; }
.counter .count {
  min-width: 64px;
  text-align: center;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1.1rem;
  font-variant-numeric: tabular-nums;
}
.counter-note { font-size: 0.8rem; color: var(--muted); margin: 10px 0 0; }

.planner-out .out-label {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #E8A18F;
  margin-bottom: 6px;
}
.planner-out .out-price {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(2.6rem, 7vw, 4rem);
  line-height: 1.02;
  font-variant-numeric: tabular-nums;
  color: var(--surface);
}
.planner-out .out-price small {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 400;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.6);
  margin-left: 6px;
}
.planner-out .out-break {
  margin: 22px 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.18);
  font-size: 0.9rem;
  color: rgba(255,255,255,0.82);
}
.planner-out .out-break .row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 0;
  font-variant-numeric: tabular-nums;
}
.planner-out .out-break .row span:last-child { font-family: var(--mono); }
.planner-out .out-date {
  margin-top: auto;
  padding: 16px;
  border-radius: 3px;
  font-size: 0.92rem;
  line-height: 1.5;
}
.out-date.free { background: rgba(51, 86, 107, 0.36); border-left: 3px solid #8FB6CE; }
.out-date.wait { background: rgba(200, 68, 42, 0.28); border-left: 3px solid #E8A18F; }
.out-date strong { display: block; font-family: var(--serif); font-style: italic; font-size: 1.14rem; margin-bottom: 4px; }
.planner-out .btn { margin-top: 20px; width: 100%; }
.planner-out .btn-primary { background: var(--accent); color: #FFF6F1; }
.planner-out .btn-primary:hover { background: #FFF6F1; color: var(--ink); }
.planner-disc { font-size: 0.74rem; color: rgba(255,255,255,0.5); margin: 14px 0 0; }

/* ============================================================
   EGITMEN (instructor)
   ============================================================ */
.egitmen-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(30px, 5vw, 64px);
  align-items: center;
}
@media (max-width: 820px) { .egitmen-grid { grid-template-columns: 1fr; } }
.egitmen-photo { position: relative; }
.egitmen-photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: grayscale(0.12) contrast(1.02);
}
.egitmen-photo .tape {
  position: absolute;
  top: -14px; left: 24px;
  background: var(--accent);
  color: #FFF6F1;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  padding: 6px 14px;
  transform: rotate(-2deg);
}
.egitmen-body .eyebrow { margin-bottom: 14px; }
.egitmen-body h2 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3.2rem);
  color: var(--ink);
  letter-spacing: -0.015em;
}
.egitmen-body .role {
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  color: var(--accent-text);
  margin: 8px 0 22px;
}
.egitmen-body p { color: var(--ink-soft); margin: 0 0 18px; }
.egitmen-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: 26px;
}
@media (max-width: 480px) { .egitmen-facts { grid-template-columns: 1fr; } }
.egitmen-facts .fact { background: var(--bg); padding: 20px; }
.egitmen-facts .num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
  min-width: 3ch;
  display: inline-block;
}
.egitmen-facts .cap { display: block; font-size: 0.78rem; color: var(--muted); margin-top: 4px; }

/* ============================================================
   ESERLER (student gallery, priced)
   ============================================================ */
.eserler-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 22px);
}
@media (max-width: 900px) { .eserler-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .eserler-grid { grid-template-columns: 1fr; } }
.eser {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
}
.eser-media { position: relative; overflow: hidden; aspect-ratio: 4 / 5; }
.eser-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease);
}
.eser:hover .eser-media img { transform: scale(1.05); }
.eser-media .price {
  position: absolute;
  bottom: 12px; left: 12px;
  background: var(--ink);
  color: #FFF6F1;
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 6px 12px;
}
.eser-info { padding: 18px 18px 20px; }
.eser-info h3 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
  font-size: 1.24rem;
  color: var(--ink);
  margin-bottom: 4px;
}
.eser-info .by { font-size: 0.8rem; color: var(--muted); }
.eser-info .tech { font-size: 0.78rem; color: var(--accent-text); margin-top: 8px; font-family: var(--mono); }

/* ============================================================
   TAKVIM (schedule list)
   ============================================================ */
.takvim-list { display: flex; flex-direction: column; }
.takvim-row {
  display: grid;
  grid-template-columns: minmax(0, 160px) minmax(0, 1fr) minmax(0, 140px) auto;
  gap: clamp(14px, 3vw, 36px);
  align-items: center;
  padding: clamp(22px, 3vw, 32px) 0;
  border-top: 1px solid var(--line-strong);
}
.takvim-list .takvim-row:last-child { border-bottom: 1px solid var(--line-strong); }
.takvim-date {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(1.2rem, 2.6vw, 1.6rem);
  color: var(--ink);
  min-width: 0;
}
.takvim-date span { display: block; font-family: var(--mono); font-style: normal; font-weight: 400; font-size: 0.72rem; color: var(--accent-text); letter-spacing: 0.08em; margin-top: 2px; }
.takvim-title { min-width: 0; }
.takvim-title h3 { font-size: 1.06rem; font-weight: 600; color: var(--ink); }
.takvim-title p { font-size: 0.86rem; color: var(--muted); margin: 4px 0 0; }
.takvim-level { font-size: 0.8rem; color: var(--ink-soft); font-family: var(--mono); }
.takvim-status {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 6px 13px;
  border-radius: 100px;
  white-space: nowrap;
  text-align: center;
}
.status-free { background: rgba(51,86,107,0.14); color: var(--accent-2-text); border: 1px solid rgba(51,86,107,0.3); }
.status-last { background: rgba(200,68,42,0.12); color: var(--accent-text); border: 1px solid rgba(200,68,42,0.3); }
.status-full { background: var(--surface-3); color: var(--muted); border: 1px solid var(--line-strong); }
@media (max-width: 760px) {
  .takvim-row { grid-template-columns: 1fr auto; gap: 10px 16px; }
  .takvim-date { grid-column: 1 / -1; }
  .takvim-level { grid-column: 1; }
  .takvim-status { grid-column: 2; grid-row: 3; }
  .takvim-title { grid-column: 1 / -1; grid-row: 2; }
}

/* atolye notlari (news) */
.notlar {
  margin-top: clamp(40px, 5vw, 64px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
@media (max-width: 760px) { .notlar { grid-template-columns: 1fr; } }
.not {
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent-2);
}
.not time { font-family: var(--mono); font-size: 0.74rem; color: var(--accent-2-text); letter-spacing: 0.06em; }
.not h4 { font-family: var(--serif); font-style: italic; font-weight: 700; font-size: 1.16rem; margin: 8px 0 6px; color: var(--ink); }
.not p { font-size: 0.88rem; color: var(--muted); margin: 0; }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.refs-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
@media (max-width: 880px) { .refs-grid { grid-template-columns: 1fr; } }
.ref {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: clamp(22px, 3vw, 32px);
  display: flex;
  flex-direction: column;
}
.ref blockquote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.14rem;
  line-height: 1.42;
  color: var(--ink);
  margin-bottom: 20px;
}
.ref blockquote::before { content: "“"; color: var(--accent); font-size: 2.4rem; line-height: 0; vertical-align: -0.3em; margin-right: 4px; }
.ref .who { margin-top: auto; }
.ref .who strong { display: block; font-size: 0.96rem; color: var(--ink); }
.ref .who span { font-size: 0.8rem; color: var(--muted); }

/* ============================================================
   FAQ
   ============================================================ */
.faq { max-width: 820px; }
.faq-item {
  border-bottom: 1px solid var(--line-strong);
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 24px 0;
  cursor: pointer;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.14rem, 2.4vw, 1.5rem);
  color: var(--ink);
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .plus {
  flex-shrink: 0;
  width: 30px; height: 30px;
  position: relative;
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
  transition: transform 300ms var(--ease), border-color 200ms var(--ease);
}
.faq-item summary .plus::before,
.faq-item summary .plus::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  background: var(--accent);
  transform: translate(-50%, -50%);
}
.faq-item summary .plus::before { width: 12px; height: 2px; }
.faq-item summary .plus::after { width: 2px; height: 12px; transition: transform 300ms var(--ease); }
.faq-item[open] summary .plus { transform: rotate(90deg); border-color: var(--accent); }
.faq-item[open] summary .plus::after { transform: translate(-50%, -50%) scaleY(0); }
.faq-item .answer {
  height: 0;
  padding: 0 0;
  overflow: hidden;
  transition: height 360ms var(--ease-2), padding-block-end 360ms var(--ease-2);
}
.faq-item[open] .answer {
  height: auto;
  padding-block-end: 26px;
}
.faq-item .answer p { margin: 0 0 12px; color: var(--ink-soft); }
.faq-item .answer p:last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) {
  .faq-item .answer { transition: none; }
}

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band {
  background: var(--accent);
  color: #FFF6F1;
  text-align: center;
  padding: clamp(56px, 8vw, 100px) 0;
}
.cta-band h2 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(2.2rem, 6vw, 4rem);
  letter-spacing: -0.015em;
  max-width: 16ch;
  margin: 0 auto 20px;
}
.cta-band p { max-width: 48ch; margin: 0 auto 32px; color: rgba(255,246,241,0.88); }
.cta-band .btn-primary { background: var(--ink); color: var(--surface); }
.cta-band .btn-primary:hover { background: #FFF6F1; color: var(--ink); }

/* ============================================================
   FORMS
   ============================================================ */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 620px) { .form-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 0.82rem; font-weight: 600; color: var(--ink-soft); letter-spacing: 0.02em; }
.field label .opt-tag { font-weight: 400; color: var(--muted); font-size: 0.76rem; }
.field input,
.field select,
.field textarea {
  font-family: var(--sans);
  font-size: 0.98rem;
  color: var(--ink);
  background: var(--surface);
  border: 0;
  border-bottom: 2px solid var(--line-strong);
  padding: 12px 4px;
  transition: border-color 200ms var(--ease);
  border-radius: 0;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--accent);
}
.field textarea { min-height: 130px; resize: vertical; }
.field.kvkk {
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
}
.field.kvkk label { font-weight: 400; font-size: 0.86rem; 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: 3px 0 0;
  accent-color: var(--accent);
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-hero { padding: clamp(50px, 8vw, 96px) 0 clamp(30px, 4vw, 50px); }
.contact-hero h1 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(2.6rem, 8vw, 4.5rem);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-top: 16px;
}
.contact-hero p { max-width: 50ch; margin-top: 18px; color: var(--ink-soft); font-size: 1.1rem; }
.channels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: clamp(30px, 4vw, 48px);
}
.channel {
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 24px;
  border-radius: 4px;
  transition: transform 240ms var(--ease), box-shadow 240ms var(--ease), border-color 240ms var(--ease);
}
.channel:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 44px -30px rgba(26,23,20,0.6);
  border-color: var(--accent);
}
.channel .badge {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 800;
  color: var(--accent-text);
  font-size: 1.2rem;
  margin-bottom: 16px;
}
.channel h3 { font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.channel a, .channel .val { font-size: 1.06rem; color: var(--ink); font-weight: 500; word-break: break-word; }
.channel a:hover { color: var(--accent-text); }
.channel .note { font-size: 0.82rem; color: var(--muted); margin-top: 8px; }

.hours-card {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 18px;
}
.hours-card .hrow {
  display: flex;
  justify-content: space-between;
  padding: 13px 20px;
  border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.hours-card .hrow:last-child { border-bottom: 0; }
.hours-card .hrow.is-today { background: rgba(200,68,42,0.07); }
.hours-card .hrow .day { font-weight: 500; color: var(--ink); }
.hours-card .hrow .time { font-family: var(--mono); color: var(--ink-soft); }

.contact-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 60px);
  align-items: start;
}
@media (max-width: 880px) { .contact-cols { grid-template-columns: 1fr; } }

/* ============================================================
   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: 4px;
}
.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: 13px 16px; border-bottom: 1px solid var(--line); font-size: 0.92rem; }
table th { background: var(--surface-2); font-weight: 600; color: var(--ink); }
table td { color: var(--ink-soft); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--ink);
  color: rgba(255,255,255,0.72);
  padding: clamp(50px, 7vw, 84px) 0 34px;
}
.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 52px);
}
@media (max-width: 860px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-top { grid-template-columns: 1fr; } }
.footer-brand .brand { color: var(--surface); }
.footer-brand .brand small { color: #E8A18F; }
.footer-brand p { margin: 16px 0 0; font-size: 0.9rem; max-width: 32ch; }
.footer-col h4 {
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #E8A18F;
  margin-bottom: 16px;
}
.footer-col a { display: block; font-size: 0.9rem; padding: 6px 0; color: rgba(255,255,255,0.72); transition: color 200ms var(--ease); }
.footer-col a:hover { color: var(--surface); }
.footer-bottom {
  margin-top: clamp(36px, 5vw, 56px);
  padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,0.14);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.55);
}
.footer-legal a { display: inline; color: rgba(255,255,255,0.7); margin-right: 16px; }
.footer-legal a:hover { color: var(--surface); }
.footer-reg { font-family: var(--mono); font-size: 0.74rem; }

/* ============================================================
   COOKIE
   ============================================================ */
.cookie-banner {
  position: fixed;
  bottom: 16px; left: 16px; right: 16px;
  max-width: 520px;
  margin: 0 auto;
  background: var(--ink);
  color: rgba(255,255,255,0.86);
  padding: 22px 24px;
  border-radius: 6px;
  border-top: 3px solid var(--accent);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.7);
  transform: translateY(140%);
  opacity: 0;
  transition: transform 280ms var(--ease), opacity 240ms var(--ease);
  z-index: 9999;
}
@media (min-width: 720px) { .cookie-banner { left: 24px; right: auto; max-width: 420px; } }
.cookie-banner.is-visible { transform: translateY(0); opacity: 1; }
.cookie-banner h2 { font-family: var(--serif); font-style: italic; font-size: 1.24rem; color: var(--surface); margin-bottom: 8px; }
.cookie-banner p { font-size: 0.86rem; line-height: 1.5; margin: 0 0 16px; }
.cookie-banner p a { color: #E8A18F; text-decoration: underline; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cookie-actions button {
  flex: 1 1 auto;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 3px;
  font-size: 0.86rem;
  font-weight: 600;
  border: 1.5px solid transparent;
  transition: background 200ms var(--ease), color 200ms var(--ease);
}
button[data-consent="accept"] { background: var(--accent); color: #FFF6F1; }
button[data-consent="accept"]:hover { background: #FFF6F1; color: var(--ink); }
button[data-consent="reject"] { background: transparent; color: var(--surface); border-color: rgba(255,255,255,0.4); }
button[data-consent="reject"]:hover { background: rgba(255,255,255,0.12); }
button[data-consent="settings"] { background: transparent; color: rgba(255,255,255,0.7); border-color: transparent; flex: 0 1 auto; text-decoration: underline; }
button[data-consent="settings"]:hover { color: var(--surface); }

/* ============================================================
   SKIP LINK / A11Y
   ============================================================ */
.skip-link {
  position: absolute;
  top: -60px; left: 16px;
  background: var(--accent);
  color: #FFF6F1;
  padding: 10px 18px;
  z-index: 2000;
  border-radius: 0 0 4px 4px;
  transition: top 200ms var(--ease);
}
.skip-link:focus { top: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ============================================================
   REVEAL
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 640ms var(--ease), transform 640ms var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero h1 .line > span, .hero-sub, .hero-actions, .hero-trust, .paper-piece {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
}
html.no-js .reveal { opacity: 1; transform: none; }

/* ============================================================
   PAGE HERO (subpages)
   ============================================================ */
.page-hero {
  padding: clamp(50px, 8vw, 92px) 0 clamp(30px, 4vw, 46px);
  border-bottom: 1px solid var(--line);
}
.page-hero h1 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(2.4rem, 7vw, 4.4rem);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-top: 14px;
}
.page-hero p { max-width: 56ch; margin-top: 16px; color: var(--ink-soft); }

.prose { max-width: 760px; }
.prose h2 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(1.6rem, 4vw, 2.3rem);
  color: var(--ink);
  margin: 40px 0 14px;
}
.prose h3 { font-size: 1.2rem; font-weight: 700; color: var(--ink); margin: 26px 0 10px; }
.prose p { color: var(--ink-soft); margin: 0 0 16px; }
.prose ul { margin: 0 0 16px; padding: 0; }
.prose ul li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 8px;
  color: var(--ink-soft);
}
.prose ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 11px;
  width: 7px; height: 7px;
  background: var(--accent);
  border-radius: 50%;
}
.prose a { color: var(--accent-text); text-decoration: underline; }

/* thank you */
.thanks { text-align: center; padding: clamp(70px, 12vw, 140px) 0; }
.thanks .mark {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(3rem, 9vw, 6rem);
  color: var(--accent-text);
  margin-bottom: 10px;
}
.thanks h1 { font-family: var(--serif); font-style: italic; font-size: clamp(2rem, 5vw, 3rem); color: var(--ink); margin-bottom: 16px; }
.thanks p { max-width: 44ch; margin: 0 auto 30px; color: var(--ink-soft); }

/* 404 */
.notfound { text-align: center; padding: clamp(80px, 14vw, 170px) 0; }
.notfound .code {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(5rem, 20vw, 12rem);
  line-height: 0.9;
  color: var(--accent-text);
}

/* long text safety */
.break { 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}

/* ============================================================
   KATMAN — WHOLE-PAGE MIXED-MEDIA SCRAPBOOK COLLAGE ENGINE
   Wall-to-wall torn paper · tape · gouache · halftone · ledger
   Palette: --accent #C8442A (vermilion) / --accent-2 #33566B (slate)
   ============================================================ */

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

:root{
  --paper-a:#EDE4CF; --paper-b:#E2D4B6; --paper-c:#F3ECDD; --paper-d:#D8C7A4;
  --tape:rgba(226,206,150,.66);
  --tape-slate:rgba(120,150,175,.52);
  --tape-verm:rgba(200,120,95,.50);
  --tape-cream:rgba(255,252,244,.66);
  --gou-olive:#7C864F; --gou-mustard:#C99A3B; --gou-teal:#3E7C7B; --gou-rose:#B06A54;
  --hand:#33566B;
}

/* ============================================================
   GLOBAL COLLAGE SUBSTRATE — continuous board shows through
   ============================================================ */
body{
  background-color:var(--bg);
  background-image:
    /* halftone dot patches (vermilion + slate), offset */
    radial-gradient(rgba(200,68,42,.05) 22%, transparent 24%),
    radial-gradient(rgba(51,86,107,.045) 22%, transparent 24%),
    /* ledger / graph paper ruling */
    linear-gradient(rgba(51,86,107,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(51,86,107,.05) 1px, transparent 1px),
    /* torn-paper warm mottle */
    radial-gradient(120% 80% at 12% 4%, rgba(200,68,42,.05), transparent 40%),
    radial-gradient(120% 90% at 88% 22%, rgba(51,86,107,.055), transparent 44%);
  background-size:7px 7px, 7px 7px, 46px 46px, 46px 46px, 100% 100%, 100% 100%;
  background-position:0 0, 3.5px 3.5px, 0 0, 0 0, 0 0, 0 0;
  background-attachment:fixed, fixed, scroll, scroll, scroll, scroll;
}

/* keep content above decor */
section > .container{ position:relative; z-index:3; }
.cta-band, .site-footer{ position:relative; }

/* every content section becomes a collage substrate slab (no flat solids) */
.section{ position:relative; overflow:visible; }
.section::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    repeating-linear-gradient(90deg, rgba(26,23,20,.028) 0 1px, transparent 1px 42px),
    radial-gradient(rgba(26,23,20,.035) 20%, transparent 22%);
  background-size:auto, 6px 6px;
  -webkit-mask-image:linear-gradient(180deg, #000 0 78%, transparent);
  mask-image:linear-gradient(180deg, #000 0 78%, transparent);
  opacity:.5;
}
/* paper sections read as a big torn cut-paper card, not flat white */
.section--paper{
  background-color:transparent;
  background-image:none;
}
.section--paper > .container{
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(247,240,225,.9));
  box-shadow:0 40px 90px -60px rgba(26,23,20,.6), 0 2px 0 rgba(255,255,255,.5) inset;
  border-radius:2px;
  padding-top:clamp(30px,4vw,54px);
  padding-bottom:clamp(30px,4vw,54px);
  /* deckled torn edges top+bottom */
  -webkit-mask-image:
    linear-gradient(#000,#000),
    radial-gradient(6px 8px at 6px -2px, transparent 6px, #000 7px);
  clip-path:polygon(
    0% 1.4%, 8% 0.2%, 17% 1.6%, 26% 0.3%, 35% 1.7%, 44% 0.4%, 53% 1.6%, 62% 0.3%,
    71% 1.7%, 80% 0.4%, 89% 1.5%, 100% 0.4%,
    100% 98.6%, 92% 99.8%, 83% 98.3%, 74% 99.7%, 65% 98.4%, 56% 99.7%, 47% 98.3%,
    38% 99.7%, 29% 98.4%, 20% 99.7%, 11% 98.4%, 0% 99.7%);
}
/* dark tone sections keep readable but gain grid */
.section--tone{ position:relative; }

/* ============================================================
   MIXED-MEDIA DECOR SYSTEM  (.km = pointer-events:none absolute)
   ============================================================ */
.km{ position:absolute; pointer-events:none; z-index:1; }
.tc-ink{ color:var(--ink); } .tc-verm{ color:var(--accent); } .tc-slate{ color:var(--accent-2); }
.tc-cream{ color:#FFF6EA; }
.ko35{opacity:.35}.ko5{opacity:.5}.ko6{opacity:.6}.ko7{opacity:.7}.ko85{opacity:.85}

/* torn magazine SCRAP (paper fragment, deckled polygon) */
.km-scrap{ width:120px; height:92px; background:var(--paper-a);
  box-shadow:0 12px 26px -16px rgba(26,23,20,.55);
  clip-path:polygon(3% 6%,26% 2%,54% 5%,82% 1%,98% 8%,95% 36%,100% 66%,96% 96%,70% 99%,42% 95%,18% 100%,2% 92%,0 60%,5% 30%); }
.km-scrap.pb{ background:var(--paper-b); } .km-scrap.pc{ background:var(--paper-c); } .km-scrap.pd{ background:var(--paper-d); }
.km-scrap.ink{ background:var(--ink); } .km-scrap.verm{ background:var(--accent); } .km-scrap.slate{ background:var(--accent-2); }
.km-scrap.ruled{ background-image:repeating-linear-gradient(0deg, transparent 0 13px, rgba(51,86,107,.28) 13px 14px); }
.km-scrap.printed{ background-image:repeating-linear-gradient(0deg, rgba(26,23,20,.5) 0 3px, transparent 3px 8px); background-size:100% 22px; }

/* ripped paper STRIP with deckled long edges */
.km-ripped{ width:200px; height:34px; background:var(--paper-c);
  box-shadow:0 8px 18px -12px rgba(26,23,20,.5);
  clip-path:polygon(0 22%,6% 42%,12% 20%,19% 46%,26% 22%,33% 48%,40% 24%,47% 46%,54% 22%,61% 48%,68% 24%,75% 46%,82% 22%,89% 46%,96% 24%,100% 40%,100% 78%,95% 60%,88% 80%,81% 58%,74% 80%,67% 58%,60% 80%,53% 58%,46% 80%,39% 58%,32% 80%,25% 58%,18% 80%,11% 58%,5% 80%,0 62%); }
.km-ripped.verm{ background:var(--accent); } .km-ripped.slate{ background:var(--accent-2); }

/* masking / washi TAPE strip (torn ends) */
.km-tape{ width:96px; height:30px; background:var(--tape);
  border-left:1px dashed rgba(255,255,255,.35); border-right:1px dashed rgba(255,255,255,.35);
  box-shadow:0 3px 9px -4px rgba(26,23,20,.45);
  clip-path:polygon(4% 0,96% 0,100% 18%,97% 50%,100% 84%,96% 100%,4% 100%,0 82%,3% 50%,0 16%); }
.km-tape.slate{ background:var(--tape-slate); }
.km-tape.verm{ background:var(--tape-verm); }
.km-tape.cream{ background:var(--tape-cream); }
.km-tape.lbl{ display:flex; align-items:center; justify-content:center; height:26px;
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:rgba(26,23,20,.6); }

/* paint / gouache SWATCH blob (organic) */
.km-swatch{ width:74px; height:74px; background:var(--gou-olive);
  border-radius:46% 54% 58% 42% / 52% 44% 56% 48%;
  box-shadow:0 10px 22px -14px rgba(26,23,20,.5);
  filter:saturate(1.05); }
.km-swatch.mustard{ background:var(--gou-mustard); }
.km-swatch.teal{ background:var(--gou-teal); }
.km-swatch.rose{ background:var(--gou-rose); }
.km-swatch.verm{ background:var(--accent); }
.km-swatch.slate{ background:var(--accent-2); }
.km-swatch::after{ content:""; position:absolute; inset:0; border-radius:inherit;
  background:radial-gradient(60% 40% at 32% 28%, rgba(255,255,255,.28), transparent 60%); }

/* long gouache STROKE (dry-brush) */
.km-stroke{ width:150px; height:26px; background:var(--accent);
  border-radius:40% 60% 55% 45% / 60% 50% 50% 40%;
  -webkit-mask:repeating-linear-gradient(90deg,#000 0 5px, rgba(0,0,0,.55) 5px 8px);
  mask:repeating-linear-gradient(90deg,#000 0 5px, rgba(0,0,0,.55) 5px 8px);
  opacity:.9; }
.km-stroke.slate{ background:var(--accent-2); } .km-stroke.olive{ background:var(--gou-olive); }
.km-stroke.mustard{ background:var(--gou-mustard); }

/* HALFTONE dot patch */
.km-halftone{ width:110px; height:110px;
  background:radial-gradient(currentColor 32%, transparent 34%); background-size:8px 8px;
  -webkit-mask:radial-gradient(circle,#000 60%,transparent 66%); mask:radial-gradient(circle,#000 60%,transparent 66%); }
.km-halftone.sq{ -webkit-mask:none; mask:none; }

/* LEDGER / graph-paper patch */
.km-ledger{ width:132px; height:104px; background:var(--surface);
  border:1px solid var(--line-strong);
  background-image:
    linear-gradient(rgba(51,86,107,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(51,86,107,.18) 1px, transparent 1px);
  background-size:12px 12px;
  box-shadow:0 12px 26px -16px rgba(26,23,20,.5); transform:rotate(-2deg); }

/* mm-RULER tick strip */
.km-ruler{ width:180px; height:16px; border-bottom:1.6px solid currentColor;
  background:repeating-linear-gradient(90deg, currentColor 0 1.4px, transparent 1.4px 9px);
  -webkit-mask:linear-gradient(180deg,transparent 0,#000 55%); mask:linear-gradient(180deg,transparent 0,#000 55%); }

/* registration CROSSHAIR */
.km-reg{ width:38px; height:38px;
  background:radial-gradient(circle, transparent 5px, currentColor 5px, currentColor 6.4px, transparent 7px); }
.km-reg::before{ content:""; position:absolute; left:50%; top:-6px; bottom:-6px; width:1.5px; background:currentColor; transform:translateX(-50%); }
.km-reg::after{ content:""; position:absolute; top:50%; left:-6px; right:-6px; height:1.5px; background:currentColor; transform:translateY(-50%); }

/* corner CROP marks (L) */
.km-crop{ width:28px; height:28px; }
.km-crop::before{ content:""; position:absolute; left:0; top:0; width:28px; height:1.6px; background:currentColor; }
.km-crop::after{ content:""; position:absolute; left:0; top:0; width:1.6px; height:28px; background:currentColor; }

/* rubber STAMP */
.km-stamp{ font-family:var(--mono); font-weight:700; font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; color:currentColor; border:2px solid currentColor; border-radius:3px;
  padding:5px 10px; opacity:.78; white-space:nowrap; transform:rotate(-6deg);
  background:rgba(244,241,234,.28); }
.km-stamp.ring{ box-shadow:0 0 0 2px rgba(255,255,255,.5) inset, 3px 3px 0 -1px currentColor; }
.km-stamp.solid{ color:#FFF6EA; border-color:transparent; opacity:.92; }
.km-stamp.solid.tc-verm{ background:var(--accent); }
.km-stamp.solid.tc-slate{ background:var(--accent-2); }
.km-stamp.solid.tc-ink{ background:var(--ink); }

/* HANDWRITING scrawl (script note) */
.km-hand{ font-family:var(--serif); font-style:italic; font-weight:600; color:var(--hand);
  font-size:1.15rem; line-height:1; transform:rotate(-7deg); white-space:nowrap; opacity:.85; }
.km-hand::after{ content:""; display:block; height:8px; margin-top:-2px;
  background:
    radial-gradient(6px 5px at 10% 60%, transparent 60%, var(--hand) 62% 70%, transparent 72%);
  -webkit-mask:none; }
.km-underline{ width:120px; height:12px;
  background:
    linear-gradient(90deg, transparent, var(--accent) 8%, var(--accent) 92%, transparent);
  border-radius:60% 60% 50% 50% / 100% 100% 0 0; opacity:.7;
  -webkit-mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); }

/* big GHOST section number */
.km-num{ font-family:var(--serif); font-style:italic; font-weight:800;
  font-size:clamp(120px,20vw,280px); line-height:.7; color:var(--accent);
  opacity:.06; letter-spacing:-.04em; }

/* ephemera: TICKET stub */
.km-ticket{ width:118px; height:44px; background:var(--paper-c); border:1px dashed var(--line-strong);
  box-shadow:0 8px 18px -12px rgba(26,23,20,.5);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-text);
  -webkit-mask:radial-gradient(8px 8px at 0 50%, transparent 7px, #000 8px), radial-gradient(8px 8px at 100% 50%, transparent 7px, #000 8px);
  -webkit-mask-composite:source-in; mask:radial-gradient(8px 8px at 0 50%, transparent 7px, #000 8px), radial-gradient(8px 8px at 100% 50%, transparent 7px, #000 8px); mask-composite:intersect; }

/* torn PHOTO cutout (uses site imagery) */
.km-photo{ background:#fff; padding:6px; box-shadow:0 22px 44px -22px rgba(26,23,20,.6);
  clip-path:polygon(2% 5%,24% 1%,52% 4%,80% 0,99% 6%,96% 34%,100% 66%,97% 96%,72% 99%,44% 96%,20% 100%,2% 94%,0 60%,4% 30%); }
.km-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.km-photo .tp{ position:absolute; top:-10px; left:24%; width:66px; height:22px; background:var(--tape); transform:rotate(-6deg); }
.km-photo .tp.b{ background:var(--tape-slate); left:auto; right:20%; transform:rotate(7deg); }

/* torn overprint BAND across a section edge (replaces flat .torn) */
.km-band{ height:14px; left:-2%; right:-2%; position:absolute;
  background:repeating-linear-gradient(90deg,var(--accent) 0 24px,var(--accent-2) 24px 48px);
  opacity:.85; pointer-events:none;
  clip-path:polygon(0 40%,4% 10%,9% 55%,15% 15%,22% 60%,30% 12%,38% 58%,46% 18%,54% 60%,62% 14%,70% 58%,78% 16%,86% 60%,93% 18%,100% 52%,100% 100%,0 100%); }

/* ============================================================
   RANSOM / CUT-PAPER highlighted words inside headings
   ============================================================ */
.rk{ position:relative; display:inline-block; padding:0 .12em; }
.rk::before{ content:""; position:absolute; inset:-.06em -.02em; z-index:-1;
  background:var(--gou-mustard); transform:rotate(-1.6deg);
  clip-path:polygon(2% 12%,98% 4%,100% 82%,96% 98%,3% 94%,0 20%); opacity:.9; }
.rk.verm::before{ background:var(--accent); }
.rk.slate::before{ background:var(--accent-2); }
.rk.tape::before{ background:var(--tape); clip-path:none; box-shadow:0 2px 8px -4px rgba(0,0,0,.4); }
.rk.verm, .rk.slate{ color:#FFF6EA; }
.rk.uline{ background:none; }
.rk.uline::before{ top:auto; bottom:-.12em; height:.22em; inset-inline:0;
  background:var(--accent); clip-path:polygon(0 40%,100% 0,100% 70%,0 100%); opacity:.8; }

/* cut-paper slab behind a section heading block */
.sec-head{ position:relative; z-index:3; }
.sec-head::before{
  content:""; position:absolute; z-index:-1; left:-16px; right:auto; top:-14px;
  width:min(320px,72%); height:calc(100% + 24px);
  background:linear-gradient(180deg, rgba(255,255,255,.82), rgba(237,231,217,.7));
  box-shadow:0 20px 40px -30px rgba(26,23,20,.5);
  transform:rotate(-.6deg);
  clip-path:polygon(1% 4%,97% 1%,100% 8%,99% 92%,96% 99%,2% 97%,0 88%,1% 12%);
}

/* ============================================================
   HEADER / NAV — collaged tape strip
   ============================================================ */
.site-header{ border-bottom:0; }
.site-header::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:9px; z-index:-1;
  background:repeating-linear-gradient(90deg,var(--accent) 0 22px,var(--accent-2) 22px 44px, var(--gou-mustard) 44px 66px);
  opacity:.8;
  clip-path:polygon(0 30%,3% 60%,7% 20%,11% 62%,16% 24%,21% 64%,26% 22%,31% 62%,36% 24%,41% 64%,46% 22%,51% 62%,56% 24%,61% 64%,66% 22%,71% 62%,76% 24%,81% 64%,86% 22%,91% 62%,96% 26%,100% 56%,100% 100%,0 100%); }
.brand{ position:relative; }
.brand::before{
  content:""; position:absolute; left:-10px; top:-6px; width:34px; height:20px;
  background:var(--tape); transform:rotate(-8deg); z-index:-1;
  box-shadow:0 2px 6px -3px rgba(0,0,0,.4); }

/* ============================================================
   CARD COLLAGE — tape corners + slight lift, legibility kept
   ============================================================ */
.eser, .not, .ref, .maxim{ position:relative; box-shadow:0 20px 44px -30px rgba(26,23,20,.5); }
.eser{ transform:rotate(-.5deg); }
.eser:nth-child(2n){ transform:rotate(.6deg); }
.eser:nth-child(3n){ transform:rotate(-.3deg); }
.eser::before, .ref::before, .not::before{
  content:""; position:absolute; top:-11px; left:50%; margin-left:-40px;
  width:80px; height:24px; background:var(--tape); transform:rotate(-3deg);
  box-shadow:0 3px 8px -4px rgba(26,23,20,.5); z-index:4; pointer-events:none;
  clip-path:polygon(4% 0,96% 0,100% 20%,97% 50%,100% 82%,96% 100%,4% 100%,0 82%,3% 50%,0 18%); }
.ref:nth-child(2n)::before{ background:var(--tape-slate); transform:rotate(4deg); }
.not:nth-child(3n)::before{ background:var(--tape-verm); }
.maxim{ background:var(--surface); }
.maxim::after{
  content:""; position:absolute; right:10px; top:10px; width:34px; height:34px;
  color:var(--accent-2); opacity:.5;
  background:radial-gradient(circle, transparent 5px, currentColor 5px, currentColor 6px, transparent 7px);
  pointer-events:none; }

/* level rows get a torn ticket price tag */
.level{ position:relative; }
.level-price{ position:relative; }

/* planner + tone cards sit on cut paper */
.planner{ position:relative; }
.planner::before{
  content:""; position:absolute; inset:-14px -10px; z-index:-1;
  background:linear-gradient(180deg, rgba(237,231,217,.9), rgba(216,199,164,.8));
  box-shadow:0 30px 60px -44px rgba(26,23,20,.6); transform:rotate(-.4deg);
  clip-path:polygon(0.5% 3%,99% 1%,100% 7%,99% 94%,97% 99%,1% 97%,0 90%,0.6% 9%); }

/* cta-band + footer collage substrate */
.cta-band{ position:relative; overflow:hidden; }
.cta-band::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:
    radial-gradient(rgba(255,246,241,.14) 20%, transparent 22%),
    repeating-linear-gradient(90deg, rgba(255,246,241,.08) 0 1px, transparent 1px 44px);
  background-size:7px 7px, auto; }
.cta-band .container{ position:relative; z-index:3; }
.site-footer::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.4;
  background-image:
    radial-gradient(rgba(255,255,255,.10) 20%, transparent 22%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 40px);
  background-size:7px 7px, auto; }
.site-footer .container{ position:relative; z-index:3; }
.site-footer::after{
  content:""; position:absolute; top:-7px; left:0; right:0; height:12px; z-index:4;
  background:repeating-linear-gradient(90deg,var(--accent) 0 22px,var(--accent-2) 22px 44px);
  opacity:.85;
  clip-path:polygon(0 60%,4% 20%,9% 62%,15% 22%,22% 60%,30% 20%,38% 60%,46% 22%,54% 60%,62% 20%,70% 60%,78% 22%,86% 60%,93% 22%,100% 56%,100% 0,0 0); }

/* subpage / legal headers collaged */
.page-hero, .contact-hero{ position:relative; overflow:visible; }
.page-hero::before, .contact-hero::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  left:auto; right:6%; top:18px; width:min(160px,34vw); height:96px;
  background:var(--surface);
  background-image:linear-gradient(rgba(51,86,107,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(51,86,107,.16) 1px,transparent 1px);
  background-size:12px 12px; border:1px solid var(--line-strong);
  box-shadow:0 14px 30px -20px rgba(26,23,20,.5); transform:rotate(3deg); }
.page-hero::after, .contact-hero::after{
  content:"KATMAN"; position:absolute; z-index:0; pointer-events:none;
  left:auto; right:9%; top:34px;
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--accent-text);
  transform:rotate(3deg); opacity:.9; }
.page-hero h1, .contact-hero h1, .page-hero .eyebrow, .contact-hero .eyebrow, .page-hero p, .contact-hero p{ position:relative; z-index:2; }

/* torn divider upgrade — keep .torn but overlay ric-rac paint */
.torn::after{
  content:""; position:absolute; left:6%; right:6%; top:2px; height:8px;
  background:repeating-linear-gradient(90deg,var(--accent) 0 16px,transparent 16px 40px);
  opacity:.35; pointer-events:none;
  -webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); }

/* ============================================================
   HERO — dense mixed-media cluster
   ============================================================ */
.hero{ overflow:hidden; }
.hero-inner{ position:relative; z-index:3; }
.hero-collage-frame{ transform:rotate(-1deg); box-shadow:0 50px 90px -50px rgba(26,23,20,.75); }
.hero-collage-frame::after{
  content:""; position:absolute; top:-12px; left:14%; width:120px; height:30px;
  background:var(--tape); transform:rotate(-4deg); z-index:5;
  box-shadow:0 4px 10px -5px rgba(0,0,0,.4);
  clip-path:polygon(4% 0,96% 0,100% 20%,97% 50%,100% 82%,96% 100%,4% 100%,0 82%,3% 50%,0 18%); }
/* hero decor cluster wrapper is just .hero (position relative already) */
.hero .km{ z-index:1; }
.hero .km-photo{ z-index:2; }

/* ============================================================
   SIGNATURE SCROLL SCENE — "KATMAN / katmanlar üst üste biner"
   collage poster builds layer by layer as you scroll
   ============================================================ */
.katman-track{ position:relative; height:340vh; }
.katman-pin{ position:sticky; top:0; height:100vh; overflow:hidden; display:grid; place-items:center;
  background:
    radial-gradient(rgba(26,23,20,.05) 1px, transparent 1.7px) 0 0/7px 7px,
    radial-gradient(130% 100% at 50% 38%, var(--surface), var(--bg) 74%); }
.katman-wrap{ position:relative; z-index:3; width:100%; max-width:var(--container);
  margin-inline:auto; padding-inline:clamp(16px,4vw,32px);
  display:grid; grid-template-columns:1fr; gap:clamp(22px,4vw,44px); align-items:center; }
@media (min-width:960px){ .katman-wrap{ grid-template-columns:1fr .82fr; } }

.katman-stage{ position:relative; width:100%; max-width:440px; aspect-ratio:4/5; margin-inline:auto;
  isolation:isolate; }
.kl{ position:absolute; will-change:transform,opacity; opacity:0; }
html.no-js .kl{ opacity:1; }
/* layer 0: base torn paper */
.kl-base{ inset:6% 4%; background:var(--paper-b);
  box-shadow:0 30px 60px -34px rgba(26,23,20,.55);
  clip-path:polygon(2% 4%,26% 1%,54% 3%,82% 0,99% 5%,97% 34%,100% 66%,97% 97%,72% 99%,44% 96%,20% 100%,2% 95%,0 62%,3% 30%);
  background-image:repeating-linear-gradient(0deg, transparent 0 15px, rgba(51,86,107,.12) 15px 16px); }
/* layer 1: paint field */
.kl-paint{ inset:14% 12% 22% 10%; background:var(--accent); opacity:.92;
  border-radius:44% 56% 52% 48% / 56% 46% 54% 44%;
  box-shadow:inset 0 0 40px rgba(26,23,20,.15); }
.kl-paint2{ inset:40% 20% 14% 30%; background:var(--gou-teal); opacity:.85;
  border-radius:52% 48% 44% 56% / 48% 56% 44% 52%; }
/* layer 2: cut photo */
.kl-photo{ inset:20% 16% 26% 18%; background:#fff; padding:6px;
  box-shadow:0 26px 50px -26px rgba(26,23,20,.6);
  clip-path:polygon(3% 5%,24% 1%,52% 4%,80% 0,99% 6%,96% 34%,100% 66%,97% 96%,72% 99%,44% 96%,20% 100%,2% 94%,0 60%,4% 30%); }
.kl-photo img{ width:100%; height:100%; object-fit:cover; display:block;
  filter:contrast(1.05) saturate(.96); }
/* layer 3: tape */
.kl-tape1{ top:16%; left:8%; width:130px; height:34px; background:var(--tape); transform:rotate(-18deg);
  clip-path:polygon(4% 0,96% 0,100% 18%,97% 50%,100% 84%,96% 100%,4% 100%,0 82%,3% 50%,0 16%); }
.kl-tape2{ bottom:20%; right:6%; width:150px; height:36px; background:var(--tape-slate); transform:rotate(12deg);
  clip-path:polygon(4% 0,96% 0,100% 18%,97% 50%,100% 84%,96% 100%,4% 100%,0 82%,3% 50%,0 16%); }
/* layer 4: handwriting */
.kl-hand{ bottom:12%; left:12%; font-family:var(--serif); font-style:italic; font-weight:600;
  color:var(--hand); font-size:clamp(1.1rem,3.4vw,1.7rem); transform:rotate(-8deg); }
.kl-hand::after{ content:""; display:block; width:80%; height:6px; margin-top:2px;
  background:var(--hand); opacity:.6; border-radius:60% 60% 50% 50%/100% 100% 0 0; }
/* layer 5: title */
.kl-title{ top:6%; left:0; right:0; text-align:center; font-family:var(--serif); font-style:italic;
  font-weight:800; font-size:clamp(2.4rem,8vw,4.6rem); color:var(--ink); letter-spacing:-.02em;
  text-shadow:3px 3px 0 rgba(255,246,234,.8); }
.kl-stamp{ bottom:26%; right:14%; }

.katman-cap{ position:relative; z-index:4; }
.katman-cap .eyebrow{ margin-bottom:12px; display:inline-block; background:var(--ink); color:#FFF6EA;
  padding:5px 12px; transform:rotate(-1.4deg); box-shadow:3px 3px 0 var(--accent-2); }
.katman-cap h2{ font-family:var(--serif); font-style:italic; font-weight:800;
  font-size:clamp(1.9rem,5vw,3.2rem); color:var(--ink); letter-spacing:-.015em; line-height:1.02; }
.katman-cap p{ margin-top:16px; color:var(--ink-soft); max-width:46ch; }
.katman-readout{ margin-top:20px; display:inline-flex; align-items:center; gap:14px;
  font-family:var(--mono); font-weight:700; font-size:14px; color:var(--ink);
  border:1.5px solid var(--line-strong); background:var(--surface); padding:12px 16px; border-radius:2px;
  box-shadow:0 12px 26px -18px rgba(26,23,20,.5); }
.katman-readout b{ color:var(--accent-text); font-size:1.5rem; font-variant-numeric:tabular-nums; min-width:2.4ch; text-align:right; }
.katman-readout .kbar{ width:120px; height:8px; background:var(--surface-3); border-radius:4px; overflow:hidden; }
.katman-readout .kbar > i{ display:block; height:100%; width:0; background:var(--accent); border-radius:4px; }
.katman-readout.done b{ color:var(--gou-teal); }
.kc{ opacity:0; transform:translateY(20px); }

.katman-scroll{ position:absolute; bottom:20px; left:50%; transform:translateX(-50%); z-index:6;
  font-family:var(--mono); font-weight:700; font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--ink); background:var(--tape); padding:6px 12px; animation:kmBob 2s ease-in-out infinite; }
@keyframes kmBob{ 0%,100%{ transform:translate(-50%,0); } 50%{ transform:translate(-50%,7px); } }

/* ============================================================
   PRELOADER + MOTES
   ============================================================ */
#pre{ position:fixed; inset:0; z-index:10000; background:var(--bg);
  display:grid; place-items:center; transition:opacity .7s ease, visibility .7s; }
#pre.done{ opacity:0; visibility:hidden; pointer-events:none; }
#pre .pl-in{ text-align:center; }
#pre .pl-mark{ font-family:var(--serif); font-style:italic; font-weight:800; font-size:clamp(32px,7vw,62px);
  letter-spacing:-.02em; color:var(--ink); text-shadow:3px 3px 0 rgba(200,68,42,.25); }
#pre .pl-sub{ font-family:var(--mono); font-size:11px; letter-spacing:.32em; text-transform:uppercase;
  color:var(--muted); margin-top:10px; }
#pre .pl-bar{ margin:22px auto 0; width:min(240px,60vw); height:14px;
  border:1px solid var(--line-strong); background:var(--surface); overflow:hidden; position:relative; }
#pre .pl-bar i{ position:absolute; inset:0; width:0;
  background:linear-gradient(90deg,var(--gou-mustard) 0 25%,var(--accent) 25% 55%,var(--accent-2) 55% 80%,var(--ink) 80% 100%);
  animation:plFill 1.15s cubic-bezier(.5,0,.2,1) forwards; }
@keyframes plFill{ to{ width:100%; } }
#motes{ position:fixed; inset:0; z-index:2; pointer-events:none; mix-blend-mode:multiply; opacity:.4; }

/* ============================================================
   MOBILE CURATION — keep whole-page collage, curate ~45%
   ============================================================ */
@media (max-width:900px){ .km-bleed{ display:none !important; } }
@media (max-width:768px){
  .km:not(.km-keep){ display:none !important; }
  .km-keep.km-scrap{ transform:scale(.72); }
  .km-keep.km-swatch{ transform:scale(.7); }
  .km-keep.km-tape{ width:74px; }
  .km-keep.km-ruler{ width:120px; }
  .km-keep.km-ledger{ width:98px; height:78px; }
  .km-keep.km-num{ font-size:110px; }
  .km-keep.km-stroke{ width:96px; height:18px; }
  .km-keep.km-ripped{ width:128px; height:24px; }
  .km-keep.km-halftone{ width:76px; height:76px; }
  .km-keep.km-ticket{ transform:scale(.82); }
  .km-keep.km-hand{ font-size:.92rem; max-width:44vw; white-space:normal; }
  .sec-head::before{ width:min(240px,86%); left:-10px; }
  .katman-track{ height:280vh; }
  .katman-stage{ max-width:320px; }
  .section--paper > .container{ padding-left:16px; padding-right:16px; }
}
@media (max-width:480px){
  .km-num{ font-size:90px; }
  .katman-track{ height:250vh; }
  .katman-stage{ max-width:270px; }
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  .katman-scroll{ animation:none; }
  .kc{ opacity:1; transform:none; }
  .kl{ opacity:1 !important; }
  #motes{ display:none; }
}