/* ============================================================
   Yeşim Pala — site styles
   Type: Fraunces (display serif) · Hanken Grotesk (sans) · IBM Plex Mono (labels)
   Palette: YP logo turkuazı + Velenor kapağı (lotus altını, derin deniz)
   ============================================================ */

:root {
  /* brand colour */
  --paper:    #FAFAF6;   /* warm near-white (logo zemini)      */
  --paper-2:  #F1F4F0;   /* slightly deeper                    */
  --ink:      #1E2423;   /* deep teal-black                    */
  --teal:     #2BB3AC;   /* YP logo turkuazı                   */
  --teal-700: #12756F;   /* okunur turkuaz (metin/etiket)      */
  --teal-900: #0D4744;   /* derin deniz — koyu bantlar         */
  --lotus:    #E0B45C;   /* kapaktaki lotus altını             */
  --lotus-600:#B78D3C;   /* koyu altın — açık zeminde metin    */
  --powder:   #DDF0EE;   /* açık turkuaz yıkama                */

  /* roles */
  --bg: var(--paper);
  --fg: var(--ink);
  --muted: color-mix(in srgb, var(--ink) 70%, var(--paper));
  --rule: color-mix(in srgb, var(--teal-700) 22%, transparent);

  /* type */
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* layout */
  --container: 1240px;
  --gut: clamp(1.25rem, 4vw, 3.25rem);
  --section-y: clamp(4.5rem, 9vw, 9rem);
  --radius: 4px;

  --ease: cubic-bezier(.2,.7,.2,1);
}

/* ---------- reset ---------- */
*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html { scroll-behavior: auto; } }

body {
  font-family: var(--sans);
  font-weight: 400;
  color: var(--fg);
  background: var(--bg);
  line-height: 1.6;
  font-size: clamp(1rem, .55vw + .9rem, 1.125rem);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* paper grain — tactile, anti-AI-perfect */
body::after{
  content:""; position: fixed; inset: 0; z-index: 9000; pointer-events: none;
  opacity:.04; mix-blend-mode: multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img,svg { display:block; max-width:100%; }
img { height:auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background:none; border:0; }
::selection { background: var(--teal-700); color: var(--paper); }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gut); }

.skip-link{
  position:absolute; left:50%; transform:translateX(-50%) translateY(-150%);
  background:var(--teal-700); color:var(--paper); padding:.6rem 1rem; border-radius:0 0 var(--radius) var(--radius);
  z-index:10000; transition:transform .2s var(--ease); font-family:var(--mono); font-size:.8rem;
}
.skip-link:focus{ transform:translateX(-50%) translateY(0); }

/* ---------- shared type ---------- */
.label{
  font-family: var(--mono); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color: var(--teal-700); display:block; margin-bottom:1.4rem;
}
.label--light{ color: color-mix(in srgb, var(--paper) 72%, var(--teal)); }

.section{ padding-block: var(--section-y); }

.section__title{
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(2rem, 4.6vw, 3.6rem); line-height: 1.08; letter-spacing: -.015em;
  font-optical-sizing: auto;
}
.section__title em{ font-style: italic; font-weight: 400; color: var(--lotus-600); }
.section__lead{ max-width: 46ch; color: var(--muted); margin-top: 1.2rem; font-size: 1.1rem; }

/* ---------- buttons ---------- */
.btn{
  --bg:var(--teal-700); --fg:var(--paper);
  display:inline-flex; align-items:center; gap:.6rem;
  font-family: var(--mono); font-size:.82rem; letter-spacing:.06em;
  padding:.95rem 1.6rem; border-radius:999px; border:1px solid var(--bg);
  background:var(--bg); color:var(--fg);
  transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  will-change: transform;
}
.btn--solid:hover{ background:var(--teal-900); border-color:var(--teal-900); transform: translateY(-2px); }
.btn--ghost{ background:transparent; color:var(--teal-700); border-color:color-mix(in srgb,var(--teal-700) 35%,transparent); }
.btn--ghost:hover{ background:var(--teal-700); color:var(--paper); transform: translateY(-2px); }
.btn--lg{ padding:1.1rem 2.1rem; font-size:.88rem; }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position: sticky; top:0; z-index: 1000;
  background: color-mix(in srgb, var(--paper) 80%, transparent);
  backdrop-filter: blur(10px) saturate(1.1);
  border-bottom: 1px solid transparent;
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.nav.is-scrolled{
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  border-bottom-color: var(--rule);
}
.nav__inner{ display:flex; align-items:center; justify-content:space-between; height: 72px; }
.nav__brand{ display:flex; align-items:center; gap:.7rem; }
.nav__mark{ width: 34px; height: 34px; color: var(--teal); }
.nav__name{ font-family:var(--serif); font-weight:500; font-size:1.02rem; letter-spacing:.01em; white-space:nowrap; }

.nav__links{ display:flex; align-items:center; gap:2rem; }
.nav__links a{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.04em; color:var(--ink);
  position:relative; padding-block:.3rem; transition: color .2s var(--ease);
}
.nav__links a:not(.nav__cta)::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--teal-700); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease);
}
.nav__links a:not(.nav__cta):hover::after,
.nav__links a.is-active::after{ transform:scaleX(1); }
.nav__links a.is-active{ color:var(--teal-700); }
.nav__cta{
  border:1px solid color-mix(in srgb,var(--teal-700) 35%,transparent); border-radius:999px;
  padding:.5rem 1.1rem !important; transition: background .25s var(--ease), color .25s var(--ease);
}
.nav__cta:hover{ background:var(--teal-700); color:var(--paper); }

.nav__toggle{ display:none; width:42px; height:42px; flex-direction:column; gap:6px; align-items:center; justify-content:center; }
.nav__toggle span{ width:22px; height:1.6px; background:var(--ink); transition: transform .3s var(--ease), opacity .3s var(--ease); }
.nav.is-open .nav__toggle span:nth-child(1){ transform: translateY(3.8px) rotate(45deg); }
.nav.is-open .nav__toggle span:nth-child(2){ transform: translateY(-3.8px) rotate(-45deg); }

.nav__mobile{ display:none; flex-direction:column; padding: .5rem var(--gut) 1.6rem; border-bottom:1px solid var(--rule); background: var(--paper); }
.nav__mobile a{ font-family:var(--serif); font-size:1.4rem; padding:.7rem 0; border-bottom:1px solid var(--rule); }
.nav__mobile a:last-child{ border-bottom:0; }

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; padding-block: clamp(3.5rem,7vw,6.5rem) clamp(3rem,6vw,5rem); }
.hero__grid{ display:grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem,5vw,5rem); align-items:center; }
.hero__title{
  font-family:var(--serif); font-weight:500; font-optical-sizing:auto;
  font-size: clamp(2.6rem, 7.2vw, 5.6rem); line-height:1.02; letter-spacing:-.03em; margin-block:.2em .55em;
}
.hero__title em{ font-style:italic; font-weight:400; color:var(--teal-700); }
.hero__lead{ max-width: 44ch; color: var(--muted); font-size: clamp(1.05rem,1.4vw,1.25rem); }
.hero__role{ margin-top:1.6rem; font-family:var(--mono); font-size:.8rem; letter-spacing:.04em; color:var(--teal-700); }
.hero__actions{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2.2rem; }

.hero__mark{ position:relative; aspect-ratio:1; display:grid; place-items:center; }
.hero__ring{ width: min(100%, 440px); color: var(--teal-700); animation: spin 46s linear infinite; }
@media (prefers-reduced-motion: reduce){ .hero__ring{ animation:none; } }
@keyframes spin{ to{ transform: rotate(360deg); } }
.hero__ringtext{ font-family:var(--mono); font-size:13px; letter-spacing:.32em; fill: color-mix(in srgb,var(--teal-700) 62%, var(--paper)); }
.hero__monogram{
  position:absolute; height: min(46%, 210px); width:auto; color: var(--teal);
  filter: drop-shadow(0 10px 22px color-mix(in srgb,var(--teal-900) 26%, transparent));
}

/* ============================================================
   BELIEF BAND (Velenor'dan)
   ============================================================ */
.belief{ position:relative; background:var(--teal-900); color:var(--paper); padding-block: clamp(4.5rem,9vw,8rem); overflow:hidden; }
.belief__watermark{
  position:absolute; right: -4%; top:50%; transform:translateY(-50%);
  height: 150%; width:auto; color: color-mix(in srgb,var(--paper) 6%, transparent); pointer-events:none;
}
.belief__inner{ position:relative; max-width: 30ch; }
.belief__quote{
  font-family:var(--serif); font-weight:400; font-optical-sizing:auto;
  font-size: clamp(1.8rem, 4.4vw, 3.4rem); line-height:1.14; letter-spacing:-.02em;
}
.belief__quote em{ font-style:italic; color: var(--lotus); }
.belief__by{ margin-top:1.2rem; font-family:var(--mono); font-size:.78rem; letter-spacing:.1em; color: color-mix(in srgb,var(--lotus) 75%, var(--paper)); }

/* ============================================================
   KİTAP
   ============================================================ */
.book__grid{ display:grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem,5vw,5rem); align-items:start; }
.book__media{ position: sticky; top: 100px; }
.book__cover{
  border-radius: var(--radius); overflow:hidden;
  box-shadow: 0 30px 60px -30px color-mix(in srgb,var(--teal-900) 55%, transparent);
  border:1px solid var(--rule);
}
.book__formats{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.2rem; }
.book__formats span{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; color:var(--teal-700);
  border:1px solid var(--rule); border-radius:999px; padding:.35rem .85rem;
}
.book__body{ margin-top: 1.8rem; display:grid; gap:1.1rem; max-width: 58ch; color: color-mix(in srgb,var(--ink) 86%, var(--paper)); }
.book__body p:first-child{ font-family:var(--serif); font-style:italic; font-size:1.2rem; color:var(--teal-700); }
.book__meta{ margin-top:1.6rem; font-family:var(--mono); font-size:.78rem; letter-spacing:.04em; color:var(--muted); }

.minihead{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--teal-700); margin:1.9rem 0 .9rem;
}
.buy{ display:flex; flex-wrap:wrap; gap:.7rem; }
.buy a{
  font-family:var(--mono); font-size:.85rem; letter-spacing:.05em; font-weight:500;
  border:1.5px solid color-mix(in srgb,var(--teal-700) 45%, transparent);
  border-radius:999px; padding:.8rem 1.4rem; color:var(--teal-900);
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.buy a:hover{ background:var(--teal-700); color:var(--paper); border-color:var(--teal-700); transform:translateY(-2px); }
.buy a.buy--primary{ background:var(--teal-700); color:var(--paper); border-color:var(--teal-700); }
.buy a.buy--primary:hover{ background:var(--teal-900); border-color:var(--teal-900); }

.listen{
  display:inline-flex; align-items:center; gap:.9rem;
  border:1.5px solid color-mix(in srgb,var(--lotus-600) 55%, transparent);
  border-radius:999px; padding:.55rem 1.5rem .55rem .6rem;
  font-family:var(--mono); font-size:.85rem; font-weight:500; color:var(--ink);
  transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.listen:hover{ background: color-mix(in srgb,var(--lotus) 35%, transparent); border-color:var(--lotus-600); transform:translateY(-2px); }
.listen__play{
  width:38px; height:38px; border-radius:999px; background:var(--lotus);
  display:grid; place-items:center; font-size:.72rem; color:var(--ink); flex:none;
}
.listen__sub{ display:block; font-size:.7rem; font-weight:400; letter-spacing:.02em; color:var(--muted); margin-top:.15rem; }

.book__actions{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2rem; }

/* ============================================================
   DİNLE & İZLE
   ============================================================ */
.media__spotify{ border:0; border-radius:12px; display:block; width:100%; height:400px; }
@media (max-width:600px){ .media__spotify{ height:352px; } }

/* ============================================================
   OKURLARDAN
   ============================================================ */
.readers{ background: var(--paper-2); }
.readers__head{ max-width:60ch; margin-bottom: clamp(2rem,4vw,3.2rem); }
.rquotes{ display:grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap:1.2rem; }
.rquote{
  background: var(--paper); border:1px solid var(--rule); border-radius:var(--radius);
  padding: 2rem 1.9rem 1.8rem; display:flex; flex-direction:column;
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.rquote:hover{ transform: translateY(-4px); border-color: color-mix(in srgb,var(--teal-700) 40%, transparent); box-shadow: 0 18px 40px -28px color-mix(in srgb,var(--teal-900) 60%, transparent); }
.rquote blockquote{
  font-family:var(--serif); font-size:1.25rem; line-height:1.35; letter-spacing:-.01em;
}
.rquote figcaption{ margin-top:auto; padding-top:1.4rem; font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; color:var(--muted); }
.readers__note{ margin-top:2rem; font-family:var(--mono); font-size:.78rem; color:var(--muted); }
.readers__note a{ color:var(--teal-700); border-bottom:1px solid var(--rule); }

/* ============================================================
   HAKKINDA
   ============================================================ */
.about__grid{ display:grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem,5vw,5rem); align-items:start; }
.about__media{ position: sticky; top: 100px; }
.portrait{
  position:relative; aspect-ratio: 4/5; border-radius: 999px 999px var(--radius) var(--radius);
  background: radial-gradient(120% 80% at 50% 0%, var(--powder), color-mix(in srgb,var(--powder) 60%, var(--paper)));
  border:1px solid var(--rule);
  display:grid; place-items:center; overflow:hidden;
}
.portrait img{ width:100%; height:100%; object-fit:cover; }
.portrait__mono{ height:38%; width:auto; color: color-mix(in srgb,var(--teal) 55%, var(--powder)); }
.about__tags{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.2rem; }
.about__tags span{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; color:var(--teal-700);
  border:1px solid var(--rule); border-radius:999px; padding:.35rem .85rem;
}
.about__body{ margin-top: 1.8rem; display:grid; gap:1.1rem; max-width: 54ch; color: color-mix(in srgb,var(--ink) 86%, var(--paper)); }
.about__body p:first-child{ font-size:1.18rem; color:var(--ink); }

/* ============================================================
   BASIN
   ============================================================ */
.press__head{ max-width:60ch; margin-bottom: clamp(2rem,4vw,3.2rem); }
.pcards{ display:grid; grid-template-columns: repeat(auto-fit,minmax(270px,1fr)); gap:1.2rem; }
.pcard{
  display:flex; flex-direction:column;
  background: var(--paper); border:1px solid var(--rule); border-radius:var(--radius); overflow:hidden;
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.pcard:hover{ transform: translateY(-4px); border-color: color-mix(in srgb,var(--teal-700) 40%, transparent); box-shadow: 0 18px 40px -28px color-mix(in srgb,var(--teal-900) 60%, transparent); }
.pcard__thumb{ position:relative; aspect-ratio:16/9; overflow:hidden; display:block; background:var(--powder); }
.pcard__thumb img{ width:100%; height:100%; object-fit:cover; }
.pcard__play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:54px; height:54px; border-radius:999px;
  background: color-mix(in srgb,var(--ink) 55%, transparent);
  color:var(--paper); display:grid; place-items:center; font-size:.85rem; padding-left:3px;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.pcard:hover .pcard__play{ background:var(--teal-700); transform:translate(-50%,-50%) scale(1.08); }
.pcard__thumb--article{ background:var(--teal-900); display:grid; place-items:center; }
.pcard__glyph{ font-family:var(--serif); font-size:6rem; line-height:1; color:var(--lotus); transform:translateY(.25em); }
.pcard__body{ display:block; padding:1.3rem 1.4rem 1.5rem; }
.pcard__meta{ display:block; font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--teal-700); }
.pcard__title{ display:block; font-family:var(--serif); font-size:1.3rem; line-height:1.22; margin-top:.5rem; color:var(--ink); }

/* ============================================================
   SSS
   ============================================================ */
.faq{ background: var(--paper); }
.faq__list{ max-width: 62ch; border-top:1px solid var(--rule); }
.faq__list details{ border-bottom:1px solid var(--rule); }
.faq__list summary{
  font-family:var(--serif); font-size:1.25rem; padding:1.2rem 2.2rem 1.2rem 0;
  cursor:pointer; list-style:none; position:relative; transition: color .2s var(--ease);
}
.faq__list summary::-webkit-details-marker{ display:none; }
.faq__list summary::after{
  content:"+"; position:absolute; right:.2rem; top:50%; transform:translateY(-50%);
  font-family:var(--mono); font-size:1.1rem; color:var(--teal-700); transition: transform .25s var(--ease);
}
.faq__list details[open] summary::after{ transform:translateY(-50%) rotate(45deg); }
.faq__list summary:hover{ color:var(--teal-700); }
.faq__list details p{ padding:0 0 1.4rem; max-width:56ch; color:var(--muted); }
.faq__list details a{ color:var(--teal-700); }

/* kapak 3B tilt */
.book__cover{ transform-style:preserve-3d; transition: transform .35s var(--ease); will-change:transform; }
@media (prefers-reduced-motion: reduce){ .book__cover{ transition:none; } }

/* ============================================================
   CTA BAND (lotus)
   ============================================================ */
.cta{ background: var(--lotus); color: var(--ink); }
.cta__inner{ text-align:center; padding-block: clamp(4rem,8vw,7rem); display:grid; justify-items:center; gap:1.2rem; }
.cta__title{ font-family:var(--serif); font-weight:500; font-size: clamp(2rem,5vw,3.7rem); line-height:1.08; letter-spacing:-.02em; max-width: 20ch; }
.cta__title em{ font-style:italic; color: var(--teal-900); }
.cta__sub{ font-family:var(--serif); font-style:italic; font-size:1.15rem; color:var(--teal-900); max-width:38ch; }
.cta__taste{
  background:var(--paper); border-radius:var(--radius); text-align:left;
  padding:1.8rem 2rem; max-width:34rem; margin-top:.6rem;
  box-shadow:0 18px 40px -28px color-mix(in srgb,var(--teal-900) 60%, transparent);
}
.taste__label{ font-family:var(--mono); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--lotus-600); margin-bottom:.9rem; }
.taste__word{ font-family:var(--serif); font-weight:500; font-size:1.5rem; color:var(--teal-900); }
.taste__say{ font-family:var(--serif); font-style:italic; font-size:.92rem; color:var(--lotus-600); margin:.15rem 0 .7rem; }
.taste__text{ font-size:.98rem; color:var(--ink); }
.taste__more{ margin-top:1rem; font-family:var(--mono); font-size:.74rem; letter-spacing:.04em; color:var(--muted); }
.cta .btn--solid{ --bg: var(--teal-900); margin-top:.8rem; }
.cta .btn--solid:hover{ background: var(--ink); border-color: var(--ink); }

/* ============================================================
   İLETİŞİM / OKUR LİSTESİ
   ============================================================ */
.contact{ background: var(--teal-900); color: var(--paper); }
.contact__grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2.5rem,6vw,6rem); align-items:start; }
.contact .section__title{ color: var(--paper); }
.contact .section__title em{ color: var(--lotus); }
.contact__lead{ margin-top:1.2rem; max-width: 40ch; color: color-mix(in srgb,var(--paper) 78%, var(--teal-900)); }
.contact__list{ list-style:none; padding:0; margin-top:2.4rem; display:grid; gap:0; }
.contact__list li{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.4rem 1.4rem; padding:1.1rem 0; border-top:1px solid color-mix(in srgb,var(--paper) 16%, transparent); }
.contact__k{ font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color: color-mix(in srgb,var(--lotus) 80%, var(--paper)); min-width:7rem; }
.contact__list a{ font-family:var(--serif); font-size:1.3rem; transition:color .2s var(--ease); }
.contact__list a:hover{ color: var(--lotus); }

.contact__form{ background: color-mix(in srgb,var(--paper) 7%, transparent); border:1px solid color-mix(in srgb,var(--paper) 16%, transparent); border-radius: var(--radius); padding: clamp(1.5rem,3vw,2.4rem); display:grid; gap:1.1rem; }
.field{ display:grid; gap:.45rem; }
.field label{ font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color: color-mix(in srgb,var(--paper) 75%, var(--teal-900)); }
.field input, .field textarea{
  font-family:var(--sans); font-size:1rem; color: var(--paper);
  background: color-mix(in srgb,var(--ink) 30%, transparent);
  border:1px solid color-mix(in srgb,var(--paper) 22%, transparent); border-radius: var(--radius);
  padding:.8rem .9rem; width:100%; transition: border-color .2s var(--ease), background .2s var(--ease);
}
.field input:focus, .field textarea:focus{ outline:none; border-color: var(--lotus); }
.field textarea{ resize:vertical; min-height:96px; }
.contact__form .btn{ justify-self:start; --bg: var(--lotus); color: var(--ink); border-color: var(--lotus); }
.contact__form .btn:hover{ background: var(--paper); border-color: var(--paper); transform: translateY(-2px); }
.contact__note{ font-family:var(--mono); font-size:.78rem; letter-spacing:.02em; color: var(--lotus); min-height:1.2em; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background: var(--ink); color: color-mix(in srgb,var(--paper) 88%, var(--ink)); padding-block: clamp(3rem,6vw,4.5rem) 2rem; }
.footer__grid{ display:flex; flex-wrap:wrap; gap:2rem; justify-content:space-between; align-items:flex-start; }
.footer__brand{ display:flex; align-items:center; gap:1rem; }
.footer__mark{ width:38px; height:38px; color: var(--teal); }
.footer__name{ font-family:var(--serif); font-size:1.2rem; color: var(--paper); }
.footer__motto{ font-family:var(--mono); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color: color-mix(in srgb,var(--paper) 55%, var(--ink)); margin-top:.2rem; }
.footer__nav, .footer__social{ display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; }
.footer__nav a, .footer__social a{ font-family:var(--mono); font-size:.78rem; letter-spacing:.04em; color: color-mix(in srgb,var(--paper) 70%, var(--ink)); transition:color .2s var(--ease); }
.footer__nav a:hover, .footer__social a:hover{ color: var(--teal); }
.footer__base{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:.6rem; margin-top: clamp(2rem,5vw,3.5rem); padding-top:1.5rem; border-top:1px solid color-mix(in srgb,var(--paper) 14%, transparent); }
.footer__base p{ font-family:var(--mono); font-size:.72rem; letter-spacing:.04em; color: color-mix(in srgb,var(--paper) 50%, var(--ink)); }
.footer__credit{ font-family:var(--serif) !important; font-style:italic; font-size:.95rem !important; letter-spacing:0 !important; color: color-mix(in srgb,var(--teal) 80%, var(--paper)) !important; }

/* ============================================================
   REVEAL
   ============================================================ */
.js [data-reveal]{ opacity:0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js [data-reveal].is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .js [data-reveal]{ opacity:1 !important; transform:none !important; transition:none; }
}

:focus-visible{ outline: 2px solid var(--lotus-600); outline-offset: 3px; border-radius: 2px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 940px){
  .hero__grid{ grid-template-columns: 1fr; }
  .hero__mark{ order:-1; max-width: 340px; margin-inline:auto; }
  .book__grid{ grid-template-columns: 1fr; }
  .book__media{ position:static; max-width: 320px; }
  .about__grid{ grid-template-columns: 1fr; }
  .about__media{ position:static; max-width: 360px; }
  .contact__grid{ grid-template-columns: 1fr; }
}
@media (max-width: 760px){
  .nav__links{ display:none; }
  .nav__toggle{ display:flex; }
  .nav.is-open .nav__mobile{ display:flex; }
}
@media (max-width: 560px){
  .hero__actions{ flex-direction:column; align-items:stretch; }
  .hero__actions .btn{ width:100%; justify-content:center; }
  .footer__base{ flex-direction:column; }
}