:root{
    --forest:#2C4A3B; --forest-deep:#1B2E23; --parchment:#F6F1E7;
    --sand:#EAE2D0; --brass:#B08D57; --brass-text:#7A5C34; --sage:#C7D0BE; --ink:#3A4A40; --ink-soft:#556356;
    --rust:#9A4A2E; --rust-light:#C97456;
    --ink-muted:#526050; --paper-raised:#FCF9F1;
  }

*{margin:0;padding:0;box-sizing:border-box}

html{scroll-behavior:smooth}

body{background:var(--parchment);color:var(--ink);font-family:'Libre Franklin',sans-serif;font-weight:300;overflow-x:hidden;-webkit-font-smoothing:antialiased}

::selection{background:var(--sage);color:var(--forest-deep)}

h1,h2,h3,.serif{font-family:'Cormorant Garamond',serif;font-weight:500;color:var(--forest-deep)}

.kicker{font-size:11px;letter-spacing:4px;color:var(--brass-text);text-transform:uppercase;font-weight:400}

/* ————— header ————— */
  header{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;justify-content:space-between;align-items:center;
    padding:22px 5vw;transition:background .4s ease, box-shadow .4s ease}

header.scrolled{background:rgba(246,241,231,.92);backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(44,74,59,.08)}

.wordmark{display:flex;line-height:0}

.wordmark img{height:42px;width:auto;display:block}

nav a{font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--ink);text-decoration:none;font-weight:400;position:relative}

nav a::after{content:"";position:absolute;left:0;bottom:-5px;width:0;height:1px;background:var(--brass);transition:width .35s ease}

nav a:hover::after{width:100%}

nav a.book{color:var(--brass-text)}

nav a.lang-switch{border:1px solid rgba(176,141,87,.55);border-radius:999px;padding:5px 12px 4px;color:var(--brass-text)}

nav a.home-btn::after{display:none}

nav a.lang-switch::after{display:none}

nav a.lang-switch.on{background:var(--brass-text);border-color:var(--brass-text);color:var(--parchment)}

.narrow p.lede::first-letter{font-family:'Cormorant Garamond',serif;font-size:3.2em;float:left;line-height:.82;
    padding:6px 12px 0 0;color:var(--brass-text)}

.narrow .pull{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(20px,2.3vw,26px);
    line-height:1.5;color:var(--forest);margin:2em 0;padding-left:1.4em;border-left:1px solid var(--brass)}

.closing p{font-family:'Cormorant Garamond',serif;font-size:clamp(24px,3vw,36px);color:var(--forest-deep);max-width:20em;line-height:1.42;font-style:italic}

.cta{font-size:12px;letter-spacing:2.5px;color:var(--brass-text);text-decoration:none;text-transform:uppercase;
    border-bottom:1px solid var(--brass);padding-bottom:5px;font-weight:400;transition:opacity .3s}

.cta:hover{opacity:.65}

/* ————— footer ————— */
  footer{padding:56px 5vw 40px;border-top:1px solid var(--sand);display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:flex-end}

footer .flogo{height:44px;width:auto;display:block}

footer small{display:block;max-width:46em;font-size:11px;line-height:1.8;color:var(--ink-muted);margin-top:12px}

footer .links{display:flex;gap:26px}

footer .links a{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--ink-soft);text-decoration:none}

footer .links a:hover{color:var(--brass-text)}

/* birlesik govde metni — 18px / 1.3 / 300 (isaretlenen metin kutusu) */
  .block p:not(.sub):not(.kicker):not(.lede):not(.sig):not(.up-list):not(.intro-link):not(.alist-note), .narrow p:not(.sub):not(.lede):not(.sig), .narrow li{font-size:18px;line-height:1.3;font-weight:300}

/* ————— hardening: focus visibility, form errors, no-JS fallback ————— */

:is(a, button, input, textarea, [tabindex]):focus-visible{
  outline:2px solid var(--brass);outline-offset:2px;border-radius:2px;
}

.ferr{display:none;color:var(--rust);font-size:13px;line-height:1.5;margin-top:6px}

.frow.invalid input,.frow.invalid textarea{border-bottom-color:var(--rust)}

.frow.invalid .ferr{display:block}

/* If JS never runs at all, scroll-reveal elements must not stay permanently
   invisible — the .reveal default is only safe because IntersectionObserver
   (or, on the home page, a confirmed-GSAP body.anim class) is what hides them. */
@media (scripting:none){
  .reveal{opacity:1 !important;transform:none !important}
}

/* Touch targets: WCAG 2.2 AA asks for 24x24 CSS px. Several controls render
   14-21px tall from their type size alone. Scoped to coarse pointers so the
   desktop composition is untouched; padding grows the hit box, not the text. */
@media (pointer:coarse){
  body footer .links a{padding:5px 0}
  body .cta,body .m-readmore,body .strip-toggle,body .story-link{padding-top:4px;padding-bottom:6px}
  body nav a.home-btn{display:inline-flex;align-items:center;justify-content:center;min-width:26px;min-height:26px}
  body .logo-strip a{display:inline-flex;align-items:center;min-height:26px}
  body .narrow a[href^="mailto"],body .narrow a[href^="tel"]{display:inline-block;padding:3px 0}
}