/* ============================================================
   TurkishPress.com — Shared stylesheet
   Visual signature: Playfair Display + Source Serif 4
   Palette: navy / gold / cream
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;0,8..60,600;1,8..60,300;1,8..60,400&display=swap');

/* ───── Reset ───── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
img{max-width:100%;display:block;height:auto}

/* ───── Tokens ───── */
:root{
  --ink:#1a1612;
  --ink-muted:#5c5248;
  --ink-faint:#9c9088;
  --cream:#faf8f4;
  --cream-dark:#f0ece4;
  --cream-mid:#f5f1eb;
  --white:#fff;
  --gold:#8b6914;
  --gold-light:#c9a84c;
  --gold-pale:#f5edd8;
  --navy:#0e2a4a;
  --navy-mid:#1a4070;
  --navy-deep:#0a1d34;
  --teal:#0f6e56;
  --red:#7a1c1c;
  --red-pale:#f5e4e0;
  --border:#d8d0c4;
  --border-light:#e8e2d8;
  --max-wide:1100px;
  --max-prose:760px;
}

/* ───── Base ───── */
body{
  background:var(--cream);
  color:var(--ink);
  font-family:'Source Serif 4',Georgia,serif;
  font-size:17px;
  line-height:1.78;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:'Playfair Display',serif;color:var(--navy);font-weight:600;line-height:1.2}
p{margin-bottom:1.25rem;color:var(--ink)}
p:last-child{margin-bottom:0}
a{
  color:var(--navy);
  text-decoration:underline;
  text-decoration-color:var(--gold-light);
  text-underline-offset:3px;
  transition:color .15s;
}
a:hover{color:var(--gold)}
strong{font-weight:600}
em{font-style:italic}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ────────────────────────────────────────────────────────────
   NAVIGATION (sticky top, with mobile hamburger)
   ──────────────────────────────────────────────────────────── */
.site-nav{
  background:var(--navy);
  padding:0 1.75rem;
  display:flex;
  align-items:stretch;
  border-bottom:3px solid var(--gold);
  min-height:56px;
  position:sticky;top:0;z-index:50;
}
.site-nav .logo{
  font-family:'Playfair Display',serif;
  color:#fff;font-size:1.05rem;font-weight:600;
  padding:.95rem 1.5rem .95rem 0;
  border-right:1px solid rgba(255,255,255,.15);
  letter-spacing:.02em;
  text-decoration:none;display:flex;align-items:center;
  flex-shrink:0;
}
.site-nav .logo span{color:var(--gold-light)}
.nav-links{
  display:flex;align-items:stretch;
  flex-wrap:nowrap;overflow-x:auto;
  scrollbar-width:none;flex:1;
}
.nav-links::-webkit-scrollbar{display:none}
.nav-links a{
  color:rgba(255,255,255,.72);
  font-family:'Source Serif 4',serif;
  font-size:.78rem;
  padding:0 .9rem;
  text-decoration:none;
  letter-spacing:.06em;
  text-transform:uppercase;
  display:flex;align-items:center;
  transition:color .18s;
  border-bottom:2px solid transparent;
  white-space:nowrap;
}
.nav-links a:hover{color:#fff;border-bottom-color:var(--gold-light)}
.nav-links a.current{color:var(--gold-light);border-bottom-color:var(--gold-light)}
.nav-search{
  color:rgba(255,255,255,.55);
  padding:0 1rem;display:flex;align-items:center;
  font-size:.95rem;cursor:pointer;
  border-left:1px solid rgba(255,255,255,.15);
  background:none;border-top:none;border-right:none;border-bottom:none;
  flex-shrink:0;
}
.nav-toggle{
  display:none;
  background:none;border:none;
  color:#fff;cursor:pointer;
  padding:0 1rem;
  font-size:1.4rem;
  align-items:center;
}

/* ────────────────────────────────────────────────────────────
   HERO
   ──────────────────────────────────────────────────────────── */
.hero{
  background:linear-gradient(180deg,var(--cream-mid) 0%,var(--cream) 100%);
  padding:5rem 1.5rem 4rem;
  border-bottom:1px solid var(--border-light);
}
.hero-inner{max-width:var(--max-wide);margin:0 auto}
.hero-inner.split{display:grid;grid-template-columns:1.1fr .9fr;gap:4rem;align-items:center}
.breadcrumb{
  font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-muted);margin-bottom:1.5rem;
}
.breadcrumb a{color:var(--ink-muted);text-decoration:none}
.breadcrumb a:hover{color:var(--gold)}
.breadcrumb .sep{color:var(--ink-faint);margin:0 .5rem}
.hero-kicker, .eyebrow{
  font-family:'Playfair Display',serif;font-style:italic;
  color:var(--gold);font-size:.95rem;letter-spacing:.04em;
  margin-bottom:.9rem;
}
.hero h1{
  font-size:clamp(2.2rem,5vw,3.6rem);
  letter-spacing:-.01em;
  margin-bottom:1rem;
  line-height:1.1;
}
.hero h1 em{font-style:italic;color:var(--gold)}
.hero-subtitle, .lead{
  font-family:'Playfair Display',serif;font-style:italic;
  font-size:1.25rem;color:var(--ink-muted);
  line-height:1.5;max-width:560px;
}
.hero-meta{
  font-size:.82rem;color:var(--ink-faint);
  letter-spacing:.04em;text-transform:uppercase;
  margin-top:1.5rem;
}
.hero-meta strong{color:var(--ink-muted);font-weight:600}

/* Hero CSS art (Hittite sun-disk placeholder) */
.hero-art{
  aspect-ratio:1/1;
  max-width:380px;
  margin-left:auto;
  position:relative;
  background:radial-gradient(ellipse at 50% 35%,#d8b86a 0%,#b8902f 35%,#8b6914 70%);
  border-radius:50%;
}
.hero-art:after{
  content:"";
  position:absolute;
  inset:8%;
  border-radius:50%;
  background:radial-gradient(circle at 50% 40%,rgba(255,253,245,.85) 0%,rgba(255,250,235,0) 60%);
}
.hero-art .mountains{
  position:absolute;
  bottom:8%;left:12%;right:12%;
  height:40%;
  background:linear-gradient(180deg,transparent 0%,transparent 30%,#0e2a4a 55%,#1a4070 100%);
  clip-path:polygon(0 100%, 12% 50%, 28% 75%, 42% 35%, 58% 60%, 72% 25%, 86% 55%, 100% 70%, 100% 100%);
}
.hero-caption{
  text-align:center;
  font-family:'Playfair Display',serif;font-style:italic;
  font-size:.82rem;color:var(--ink-faint);
  margin-top:1rem;
  max-width:380px;margin-left:auto;
}

/* ────────────────────────────────────────────────────────────
   PAGE WRAP (for prose-led pages: city pages, about, etc.)
   ──────────────────────────────────────────────────────────── */
.page-wrap{max-width:var(--max-prose);margin:0 auto;padding:3rem 1.5rem 4rem}

/* ────────────────────────────────────────────────────────────
   SECTION SCAFFOLD (for landing pages with multiple sections)
   ──────────────────────────────────────────────────────────── */
section{padding:4rem 1.5rem}
.section-inner{max-width:var(--max-wide);margin:0 auto}
.section-inner.prose{max-width:var(--max-prose)}
.section-head{
  display:flex;align-items:baseline;justify-content:space-between;
  margin-bottom:2rem;padding-bottom:.75rem;
  border-bottom:1px solid var(--border-light);
  flex-wrap:wrap;gap:1rem;
}
.section-head h2{font-size:2rem;letter-spacing:-.005em}
.section-head h2 .roman{
  font-family:'Playfair Display',serif;font-style:italic;
  color:var(--gold);font-size:.85rem;font-weight:400;
  margin-right:.7rem;letter-spacing:.06em;vertical-align:middle;
}
.section-head .seemore{
  font-family:'Source Serif 4',serif;
  font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-muted);text-decoration:none;
}
.section-head .seemore:hover{color:var(--gold)}
.section-intro{
  font-family:'Playfair Display',serif;font-style:italic;
  color:var(--ink-muted);font-size:1.15rem;line-height:1.55;
  max-width:680px;margin-bottom:2rem;
}

/* Numbered section heads (used on city/place pages) */
h2.section{
  font-size:1.7rem;
  margin:3rem 0 1.25rem;
  padding-bottom:.5rem;
  border-bottom:1px solid var(--border-light);
}
h2.section .num{
  font-family:'Playfair Display',serif;font-style:italic;
  color:var(--gold);font-size:.85rem;font-weight:400;
  margin-right:.6rem;letter-spacing:.05em;
}
h3.sub{font-size:1.2rem;margin:2rem 0 .75rem;color:var(--navy-mid)}

/* ────────────────────────────────────────────────────────────
   COMPONENTS — used across multiple page types
   ──────────────────────────────────────────────────────────── */

/* Pull quote */
.pullquote{
  font-family:'Playfair Display',serif;
  font-style:italic;
  color:var(--navy);
  font-size:1.45rem;
  line-height:1.4;
  border-left:3px solid var(--gold);
  padding:.75rem 0 .75rem 1.5rem;
  margin:2rem 0;
  max-width:600px;
}

/* Quick facts grid (city pages) */
.quick-facts{
  background:var(--white);
  border:1px solid var(--border-light);
  border-radius:4px;
  padding:1.5rem;
  margin:0 0 3rem;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:1rem 1.5rem;
}
.qf-label{
  font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:.3rem;
}
.qf-val{
  font-family:'Playfair Display',serif;
  color:var(--navy);
  font-size:1.15rem;font-weight:600;
  line-height:1.2;
}
.qf-sub{font-size:.78rem;color:var(--ink-muted);margin-top:.15rem}

/* Earthquake / "note on the present" callout */
.present-note{
  background:var(--red-pale);
  border-left:3px solid var(--red);
  border-radius:4px;
  padding:1.5rem 1.75rem;
  margin:0 0 2.5rem;
}
.present-kicker{
  font-family:'Playfair Display',serif;font-style:italic;
  color:var(--red);font-size:.9rem;letter-spacing:.04em;
  margin-bottom:.4rem;
}
.present-note h3{
  font-family:'Playfair Display',serif;
  color:var(--navy);font-size:1.2rem;
  margin-bottom:.7rem;
}
.present-note p{
  font-size:.95rem;line-height:1.7;color:var(--ink-muted);
  margin-bottom:.7rem;
}
.present-note p:last-child{margin-bottom:0}

/* Sidebar / aside (legends, cultural sidebars) */
.legends, .aside-block{
  background:var(--cream-mid);
  border:1px solid var(--border-light);
  border-radius:4px;
  padding:2rem 2rem 1.5rem;
  margin:2.5rem 0;
}
.legends-kicker{
  font-family:'Playfair Display',serif;font-style:italic;
  color:var(--gold);font-size:.95rem;letter-spacing:.04em;
  margin-bottom:.4rem;
}
.legends h3, .aside-block h3{
  font-family:'Playfair Display',serif;
  color:var(--navy);font-size:1.5rem;
  margin-bottom:1.25rem;
}
.legends-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.75rem;
  margin-top:1rem;
}
.legend h4{
  font-family:'Playfair Display',serif;
  color:var(--navy-mid);font-size:1.05rem;
  margin-bottom:.6rem;font-style:italic;
}
.legend p{
  font-size:.93rem;line-height:1.7;color:var(--ink-muted);
  margin-bottom:.7rem;
}
.legend p:last-child{margin-bottom:0}
.legend-attrib{
  font-size:.75rem;color:var(--ink-faint);
  margin-top:.6rem;font-style:italic;
}

/* Featured callout (navy/gold deep-dive box) */
.feature-callout{
  background:linear-gradient(180deg,#0e2a4a 0%,#1a4070 100%);
  color:#f5edd8;
  padding:2.5rem 2rem;
  border-radius:4px;
  margin:3rem 0;
}
.feature-callout .kicker{
  font-family:'Playfair Display',serif;font-style:italic;
  color:var(--gold-light);font-size:.9rem;
  letter-spacing:.04em;margin-bottom:.5rem;
}
.feature-callout h3{
  color:#fff;font-size:1.6rem;margin-bottom:1rem;
  font-family:'Playfair Display',serif;
}
.feature-callout p{
  color:#e8dcc0;font-size:1rem;line-height:1.75;margin-bottom:1rem;
}
.feature-callout p:last-child{margin-bottom:0}
.feature-callout strong{color:#f5edd8}
.feature-stats{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1rem;margin-top:1.5rem;
  padding-top:1.5rem;border-top:1px solid rgba(245,237,216,.2);
}
.feature-stats .fs-num{
  font-family:'Playfair Display',serif;
  color:var(--gold-light);
  font-size:1.6rem;font-weight:600;
  line-height:1;
}
.feature-stats .fs-lbl{
  font-size:.72rem;color:#c9b88a;
  letter-spacing:.08em;text-transform:uppercase;
  margin-top:.3rem;
}

/* Peaks / data table */
.peaks{
  width:100%;
  border-collapse:collapse;
  margin:1rem 0 1.5rem;
  font-size:.95rem;
}
.peaks th, .peaks td{
  text-align:left;
  padding:.7rem 1rem;
  border-bottom:1px solid var(--border-light);
}
.peaks th{
  font-family:'Playfair Display',serif;
  font-weight:600;color:var(--navy);
  font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;
  background:var(--cream-mid);
}
.peaks td.h{
  font-family:'Playfair Display',serif;
  color:var(--navy);font-weight:600;
  text-align:right;
}

/* Practical info card grid (2x2) */
.practical-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.5rem;
  margin:1.5rem 0;
}
.practical-card{
  background:var(--white);
  border:1px solid var(--border-light);
  padding:1.25rem 1.4rem;
  border-radius:4px;
}
.practical-card h4{
  font-family:'Playfair Display',serif;color:var(--navy);
  font-size:1rem;margin-bottom:.5rem;
}
.practical-card p{
  font-size:.92rem;line-height:1.6;color:var(--ink-muted);
  margin-bottom:0;
}

/* "Around the place" nearby cards */
.nearby{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.5rem;
  margin:1.5rem 0 2.5rem;
}
.nearby-card{
  background:var(--white);
  border:1px solid var(--border-light);
  padding:1.25rem 1.4rem;
  border-radius:4px;
}
.nearby-card h4{
  font-family:'Playfair Display',serif;color:var(--navy);
  font-size:1.05rem;margin-bottom:.4rem;
}
.nearby-card .nearby-distance{
  font-size:.72rem;color:var(--gold);
  letter-spacing:.08em;text-transform:uppercase;
  margin-bottom:.6rem;
}
.nearby-card p{
  font-size:.92rem;line-height:1.65;color:var(--ink-muted);
  margin-bottom:0;
}

/* Cross-link block (ILoveTurkey / sister site) */
.cross-link{
  background:var(--gold-pale);
  border:1px solid var(--gold-light);
  padding:1.25rem 1.5rem;
  border-radius:4px;
  margin:2.5rem 0;
  font-size:.95rem;
  display:flex;
  align-items:center;
  gap:1rem;
}
.cross-link-icon{
  font-family:'Playfair Display',serif;
  color:var(--gold);font-size:1.5rem;font-weight:700;
  flex-shrink:0;
}
.cross-link p{margin:0;color:var(--ink)}
.cross-link a{font-weight:600;color:var(--navy)}

/* Sources block */
.sources{
  margin-top:3.5rem;
  padding-top:1.5rem;
  border-top:1px solid var(--border-light);
  font-size:.85rem;
  color:var(--ink-muted);
  line-height:1.65;
}
.sources h3{
  font-size:.95rem;margin-bottom:.75rem;
  letter-spacing:.04em;
  color:var(--navy-mid);
  font-family:'Playfair Display',serif;
}
.sources ul{padding-left:1.25rem;list-style:none}
.sources li{
  margin-bottom:.5rem;
  position:relative;
}
.sources li:before{
  content:"·";position:absolute;left:-1rem;
  color:var(--gold);font-weight:700;
}
.sources a{color:var(--ink-muted)}

/* ────────────────────────────────────────────────────────────
   HOMEPAGE-SPECIFIC SECTIONS
   ──────────────────────────────────────────────────────────── */

/* Intro pull-quote band */
.intro{
  background:var(--cream-mid);
  padding:3.5rem 1.5rem;
  border-bottom:1px solid var(--border-light);
}
.intro-inner{max-width:var(--max-prose);margin:0 auto;text-align:center}
.intro p{
  font-family:'Playfair Display',serif;font-style:italic;
  color:var(--navy);font-size:1.4rem;line-height:1.5;
}

/* Timeline rail (homepage + timeline page) */
.timeline-section{background:var(--cream-mid)}
.timeline-rail{
  position:relative;
  padding:2rem 0 1rem;
  overflow-x:auto;
  scrollbar-width:thin;
  scrollbar-color:var(--gold-light) transparent;
}
.timeline-track{
  position:relative;
  min-width:1200px;
  height:240px;
}
.timeline-line{
  position:absolute;
  top:120px;left:0;right:0;
  height:2px;
  background:linear-gradient(90deg,var(--gold-light) 0%,var(--gold) 50%,var(--gold-light) 100%);
}
.timeline-mark{
  position:absolute;
  top:108px;
  width:14px;height:14px;
  background:var(--cream);
  border:2px solid var(--gold);
  border-radius:50%;
  transform:translateX(-50%);
  cursor:pointer;
  transition:transform .15s,background .15s;
  display:block;
  text-decoration:none;
}
.timeline-mark:hover{transform:translateX(-50%) scale(1.3);background:var(--gold)}
.timeline-label{
  position:absolute;
  width:120px;
  transform:translateX(-50%);
  text-align:center;
}
.timeline-label.above{top:30px}
.timeline-label.below{top:160px}
.timeline-era{
  font-family:'Playfair Display',serif;
  color:var(--navy);font-size:.95rem;font-weight:600;
  line-height:1.2;
}
.timeline-date{
  font-family:'Source Serif 4',serif;
  color:var(--gold);font-size:.74rem;
  letter-spacing:.08em;text-transform:uppercase;
  margin-top:.2rem;
}
.timeline-hint{
  text-align:center;
  font-family:'Playfair Display',serif;font-style:italic;
  color:var(--ink-faint);font-size:.85rem;
  margin-top:1rem;
}

/* Featured story (homepage) */
.featured{padding-bottom:5rem}
.featured-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:3rem;
  align-items:center;
}
.featured-art{
  aspect-ratio:4/3;
  background:linear-gradient(135deg,#0e2a4a 0%,#1a4070 60%,#2d5d9c 100%);
  position:relative;
  border-radius:4px;
  overflow:hidden;
}
.featured-art:before{
  content:attr(data-label);
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-family:'Playfair Display',serif;
  color:rgba(245,237,216,.15);
  font-size:5rem;font-weight:700;
  letter-spacing:.05em;
  text-align:center;
}
.featured-art:after{
  content:"";position:absolute;
  bottom:0;left:0;right:0;
  height:35%;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.4));
  clip-path:polygon(0 100%, 0 70%, 15% 60%, 30% 75%, 45% 50%, 65% 65%, 80% 45%, 100% 60%, 100% 100%);
}
.featured-text .kicker{
  font-family:'Playfair Display',serif;font-style:italic;
  color:var(--gold);font-size:.85rem;letter-spacing:.06em;
  margin-bottom:.6rem;
}
.featured-text h3{
  font-size:2.2rem;margin-bottom:1rem;line-height:1.15;
}
.featured-text p{
  color:var(--ink-muted);font-size:1.02rem;line-height:1.7;
  margin-bottom:1.25rem;
}
.featured-text .read{
  font-family:'Source Serif 4',serif;
  color:var(--navy);font-weight:600;
  text-decoration:none;
  border-bottom:1px solid var(--gold);
  padding-bottom:2px;letter-spacing:.02em;
}
.featured-text .read:hover{color:var(--gold)}
.featured-text .byline{
  font-size:.78rem;color:var(--ink-faint);
  letter-spacing:.04em;text-transform:uppercase;
  margin-top:1.5rem;
}

/* Civilisations grid */
.civilisations{background:var(--white);border-top:1px solid var(--border-light);border-bottom:1px solid var(--border-light)}
.civ-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.5rem;
}
.civ-card{
  padding:1.5rem 1.25rem;
  border:1px solid var(--border-light);
  border-radius:4px;
  background:var(--cream);
  text-decoration:none;
  display:block;
  transition:transform .15s,border-color .15s;
}
.civ-card:hover{transform:translateY(-2px);border-color:var(--gold-light)}
.civ-era{
  font-family:'Source Serif 4',serif;
  color:var(--gold);font-size:.7rem;
  letter-spacing:.1em;text-transform:uppercase;
  margin-bottom:.5rem;
}
.civ-name{
  font-family:'Playfair Display',serif;
  color:var(--navy);font-size:1.2rem;font-weight:600;
  margin-bottom:.4rem;
}
.civ-desc{
  font-size:.85rem;color:var(--ink-muted);
  line-height:1.55;
}

/* Cities split (ancient | modern) */
.cities-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3rem;
  margin-top:1rem;
}
.cities-col h3{
  font-size:1.4rem;margin-bottom:.4rem;
}
.cities-col h3 em{font-style:italic;color:var(--gold);font-weight:400;font-size:.95rem}
.cities-col .col-intro{
  font-size:.92rem;color:var(--ink-muted);
  margin-bottom:1.25rem;line-height:1.6;
}
.city-list{list-style:none}
.city-list li{
  padding:.85rem 0;
  border-bottom:1px solid var(--border-light);
  display:flex;justify-content:space-between;align-items:baseline;
  gap:1rem;
}
.city-list li:last-child{border-bottom:none}
.city-list a{
  font-family:'Playfair Display',serif;
  color:var(--navy);font-size:1.05rem;font-weight:600;
  text-decoration:none;
}
.city-list a:hover{color:var(--gold)}
.city-list .city-meta{
  font-size:.78rem;color:var(--ink-faint);
  letter-spacing:.04em;text-transform:uppercase;
  text-align:right;
  flex-shrink:0;
}

/* Regions grid */
.regions{background:var(--cream-mid)}
.region-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1rem;
}
.region-card{
  background:var(--white);
  padding:1.4rem 1.2rem;
  border-radius:4px;
  border:1px solid var(--border-light);
  text-decoration:none;
  display:block;
  transition:border-color .15s;
}
.region-card:hover{border-color:var(--gold-light)}
.region-num{
  font-family:'Playfair Display',serif;font-style:italic;
  color:var(--gold);font-size:.85rem;
  margin-bottom:.3rem;
}
.region-name{
  font-family:'Playfair Display',serif;
  color:var(--navy);font-size:1rem;font-weight:600;
  margin-bottom:.4rem;
}
.region-cities{
  font-size:.78rem;color:var(--ink-muted);
  line-height:1.5;
}
.regions-link{
  margin-top:1.5rem;font-size:.88rem;color:var(--ink-muted);
  font-style:italic;font-family:'Playfair Display',serif;
}
.regions-link a{color:var(--gold)}

/* Tables / dishes */
.tables-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2rem;
}
.dish-card{
  text-decoration:none;
  display:block;
}
.dish-art{
  aspect-ratio:4/3;
  border-radius:4px;
  margin-bottom:1rem;
  transition:transform .15s;
}
.dish-card:hover .dish-art{transform:scale(1.02)}
.dish-1{background:linear-gradient(135deg,#c9a84c 0%,#8b6914 100%)}
.dish-2{background:linear-gradient(135deg,#7a1c1c 0%,#a32d2d 100%)}
.dish-3{background:linear-gradient(135deg,#0f6e56 0%,#1a8c70 100%)}
.dish-region{
  font-family:'Source Serif 4',serif;
  color:var(--gold);font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;
  margin-bottom:.3rem;
}
.dish-name{
  font-family:'Playfair Display',serif;
  color:var(--navy);font-size:1.25rem;font-weight:600;
  margin-bottom:.4rem;
}
.dish-desc{
  font-size:.9rem;color:var(--ink-muted);
  line-height:1.6;
}

/* Twin cards (Through the Year + secondary) */
.twin{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3rem;
}
.twin-card{
  background:var(--white);
  padding:2rem;
  border:1px solid var(--border-light);
  border-radius:4px;
  text-decoration:none;
  display:block;
  color:inherit;
}
.twin-card .kicker{
  font-family:'Playfair Display',serif;font-style:italic;
  color:var(--gold);font-size:.85rem;
  margin-bottom:.5rem;
}
.twin-card h3{font-size:1.4rem;margin-bottom:.6rem}
.twin-card p{
  color:var(--ink-muted);font-size:.95rem;line-height:1.7;
  margin-bottom:.8rem;
}
.twin-card .twin-link{
  font-size:.82rem;color:var(--gold);
  letter-spacing:.04em;text-transform:uppercase;
  text-decoration:none;
}

/* Family of sites (navy band) */
.family{background:var(--navy);color:#e8dcc0}
.family h2{color:#fff}
.family .section-head{border-bottom-color:rgba(245,237,216,.2)}
.family .section-intro{color:#c9b88a}
.family-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.25rem;
}
.family-card{
  background:rgba(245,237,216,.06);
  border:1px solid rgba(245,237,216,.15);
  padding:1.4rem 1.2rem;
  border-radius:4px;
  text-decoration:none;
  display:block;
  transition:background .15s,border-color .15s;
}
.family-card:hover{background:rgba(245,237,216,.1);border-color:var(--gold-light)}
.family-domain{
  font-family:'Playfair Display',serif;
  color:#fff;font-size:1.05rem;font-weight:600;
  margin-bottom:.3rem;
}
.family-domain span{color:var(--gold-light)}
.family-desc{
  font-size:.82rem;color:#c9b88a;
  line-height:1.55;
}

/* Newsletter */
.newsletter{
  background:var(--cream-mid);
  text-align:center;
  padding:4rem 1.5rem;
}
.newsletter-inner{max-width:560px;margin:0 auto}
.newsletter h3{font-size:1.6rem;margin-bottom:.6rem}
.newsletter p{
  color:var(--ink-muted);font-size:1rem;
  margin-bottom:1.5rem;
}
.newsletter form{display:flex;gap:.5rem;max-width:420px;margin:0 auto}
.newsletter input{
  flex:1;padding:.85rem 1rem;
  border:1px solid var(--border);
  background:var(--white);
  font-family:'Source Serif 4',serif;font-size:.95rem;
  border-radius:3px;
}
.newsletter button{
  padding:.85rem 1.5rem;
  background:var(--navy);color:#fff;
  border:none;
  font-family:'Playfair Display',serif;font-size:.95rem;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;
  cursor:pointer;border-radius:3px;
  transition:background .15s;
}
.newsletter button:hover{background:var(--gold)}
.newsletter .small{
  font-size:.78rem;color:var(--ink-faint);
  margin-top:1rem;font-style:italic;
  font-family:'Playfair Display',serif;
}

/* ────────────────────────────────────────────────────────────
   404 + Privacy + general utility pages
   ──────────────────────────────────────────────────────────── */
.utility-wrap{
  max-width:560px;margin:0 auto;
  padding:5rem 1.5rem 3rem;
  text-align:center;
}
.utility-wrap h1{
  font-size:2.4rem;margin-bottom:1rem;
}
.utility-wrap .big-num{
  font-family:'Playfair Display',serif;font-style:italic;
  color:var(--gold);font-size:5rem;font-weight:700;
  line-height:1;margin-bottom:1rem;
}
.utility-wrap p{color:var(--ink-muted);font-size:1.05rem}
.utility-wrap .links{
  margin-top:2rem;
  font-size:.88rem;
  color:var(--ink-muted);
}
.utility-wrap .links a{margin:0 .5rem}

.legal-wrap{max-width:var(--max-prose);margin:0 auto;padding:3rem 1.5rem 4rem}
.legal-wrap h2{font-size:1.5rem;margin:2rem 0 1rem}
.legal-wrap p, .legal-wrap li{font-size:.96rem;line-height:1.75;color:var(--ink)}
.legal-wrap ul{padding-left:1.5rem;margin-bottom:1rem}

/* ────────────────────────────────────────────────────────────
   FOOTER
   ──────────────────────────────────────────────────────────── */
.site-footer{
  background:var(--navy-deep);
  color:rgba(255,255,255,.6);
  padding:3rem 1.5rem 2rem;
  border-top:3px solid var(--gold);
}
.footer-inner{
  max-width:var(--max-wide);margin:0 auto;
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:3rem;
  margin-bottom:2rem;
}
.footer-brand{
  font-family:'Playfair Display',serif;
  color:#fff;font-size:1.25rem;font-weight:600;
  margin-bottom:.5rem;
}
.footer-brand span{color:var(--gold-light)}
.footer-tagline{
  font-family:'Playfair Display',serif;font-style:italic;
  color:#c9b88a;font-size:.95rem;line-height:1.5;
  max-width:280px;
}
.footer-col h4{
  font-family:'Source Serif 4',serif;color:#fff;
  font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  margin-bottom:.85rem;font-weight:600;
}
.footer-col ul{list-style:none}
.footer-col li{margin-bottom:.5rem}
.footer-col a{
  color:rgba(255,255,255,.6);text-decoration:none;
  font-size:.88rem;
}
.footer-col a:hover{color:var(--gold-light)}
.footer-base{
  max-width:var(--max-wide);margin:0 auto;
  padding-top:1.5rem;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex;justify-content:space-between;align-items:center;
  font-size:.78rem;color:rgba(255,255,255,.4);
  flex-wrap:wrap;gap:.5rem;
}

/* ────────────────────────────────────────────────────────────
   RESPONSIVE
   ──────────────────────────────────────────────────────────── */
@media (max-width:900px){
  .nav-links{
    display:none;
    position:absolute;top:100%;left:0;right:0;
    background:var(--navy);
    flex-direction:column;
    border-bottom:3px solid var(--gold);
    padding:.5rem 0;
  }
  .nav-links.open{display:flex}
  .nav-links a{
    padding:.85rem 1.75rem;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .nav-search{display:none}
  .nav-toggle{display:flex}

  .hero-inner.split{grid-template-columns:1fr;gap:2rem}
  .hero-art{margin:0 auto}
  .hero-caption{margin:1rem auto 0}

  .featured-grid,.cities-split,.twin,.tables-grid,.legends-grid,.nearby,.practical-grid{
    grid-template-columns:1fr;gap:2rem;
  }
  .civ-grid,.region-grid,.family-grid{grid-template-columns:repeat(2,1fr)}
  .feature-stats{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr 1fr;gap:2rem}
  section{padding:3rem 1.25rem}
  .hero{padding:3rem 1.25rem 2.5rem}
  .page-wrap{padding:2rem 1.25rem 3rem}
}

@media (max-width:540px){
  body{font-size:16px}
  .civ-grid,.region-grid,.family-grid{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr}
  .hero h1{font-size:2rem}
  .feature-callout{padding:1.75rem 1.25rem}
  .legends, .aside-block{padding:1.5rem 1.25rem}
}