:root{
  --paper:#fdfcfb;
  --paper-raised:#ffffff;
  --ink:#2b2620;
  --ink-soft:#6b6255;
  --line:#ece7e0;
  --accent:#b5613f;
  --accent-soft:#e8b9a4;
  --focus:#8a6d3f;
  --max:72ch;
  --tile-1:linear-gradient(135deg,#b5613f,#8a6d3f);
  --tile-2:linear-gradient(135deg,#7a8b6f,#5e7a8b);
  --tile-3:linear-gradient(135deg,#8a6d3f,#9c6b8b);
  --tile-4:linear-gradient(135deg,#5e7a8b,#7a8b6f);
  --tile-5:linear-gradient(135deg,#9c6b8b,#b5613f);
  --tile-6:linear-gradient(135deg,#a08a4f,#8a6d3f);
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#1b1712;
    --paper-raised:#241f19;
    --ink:#ece5d8;
    --ink-soft:#b3a998;
    --line:#3a332a;
    --accent:#e08a63;
    --accent-soft:#7a4a37;
    --focus:#d8b877;
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--accent)}
a:hover{color:var(--focus)}

.serif{font-family:'Source Serif 4','Iowan Old Style',Georgia,serif}

.container{max-width:1100px;margin:0 auto;padding:0 24px}
@media(max-width:640px){.container{padding:0 18px}}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.site-header-inner{
  display:flex;align-items:center;gap:20px;
  padding:16px 0;
}
.brand{
  font-family:'Source Serif 4',Georgia,serif;
  font-weight:600;font-size:1.15rem;letter-spacing:.01em;
  color:var(--ink);text-decoration:none;
}
.brand:hover{color:var(--ink)}
.main-nav{
  margin-left:auto;display:flex;flex-wrap:wrap;gap:4px 18px;
  font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;font-weight:500;
}
.main-nav a{
  color:var(--ink-soft);text-decoration:none;padding:6px 2px;border-bottom:2px solid transparent;
  transition:color .2s,border-color .2s;
}
.main-nav a:hover,.main-nav a.active{color:var(--ink);border-color:var(--accent)}
.lang-toggle{display:flex;gap:2px;border:1px solid var(--line);border-radius:20px;padding:2px;margin-left:8px}
.lang-toggle button{
  border:0;background:transparent;color:var(--ink-soft);font:inherit;font-size:.75rem;font-weight:600;
  letter-spacing:.05em;padding:4px 10px;border-radius:16px;cursor:pointer;transition:.2s;
}
.lang-toggle button.active{background:var(--accent);color:#fff}

@media(max-width:760px){
  .site-header-inner{flex-wrap:wrap}
  .main-nav{order:3;width:100%;margin-left:0;gap:10px 14px}
}

/* ---------- Main / typography ---------- */
main{padding:48px 0 96px}
.page-title{
  font-family:'Source Serif 4',Georgia,serif;
  font-weight:600;font-size:clamp(1.9rem,4vw,2.7rem);
  margin:0 0 8px;
}
.breadcrumb{
  font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);
  text-decoration:none;display:inline-block;margin-bottom:18px;
}
.breadcrumb:hover{color:var(--accent)}
.lede{
  font-family:'Source Serif 4',Georgia,serif;font-size:1.15rem;color:var(--ink-soft);
  max-width:var(--max);margin:0 0 32px;
}
.prose{max-width:var(--max)}
.prose h2,.section-heading{
  font-family:'Source Serif 4',Georgia,serif;font-weight:600;
  font-size:1.3rem;margin:2.2em 0 .6em;color:var(--accent);
}
.prose p{
  font-family:'Source Serif 4',Georgia,serif;font-size:1.08rem;
  margin:0 0 1.15em;color:var(--ink);
}
.prose p:first-of-type{margin-top:0}
.essay-block{margin-bottom:2em}

.essay-block.pull-quote{
  margin:2.4em 0;padding:.2em 0 .2em 1.1em;border-left:3px solid var(--accent);
}
.essay-block.pull-quote .section-heading{display:none}
.essay-block.pull-quote p{
  font-family:'Source Serif 4',Georgia,serif;font-style:italic;
  font-size:1.5rem;line-height:1.45;color:var(--focus);margin:0;
}

.home-intro p{
  font-family:'Source Serif 4',Georgia,serif;font-size:1.15rem;max-width:var(--max);
  margin:0 0 1.2em;color:var(--ink);
}

/* ---------- Tile grid ---------- */
.tile-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:22px;margin:36px 0;
}
.tile{
  position:relative;aspect-ratio:4/3;border-radius:14px;overflow:hidden;
  text-decoration:none;display:flex;align-items:flex-end;padding:20px;
  box-shadow:0 1px 3px rgba(0,0,0,.12);
  transition:transform .25s ease, box-shadow .25s ease;
  isolation:isolate;
}
.tile:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(0,0,0,.18)}
.tile::before{
  content:'';position:absolute;inset:0;z-index:-2;
  background-image:var(--tile-bg);
  background-size:cover;
  background-position:center;
}
.tile::after{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,.05) 55%);
}
.tile-title{
  font-family:'Source Serif 4',Georgia,serif;font-weight:600;color:#fff;
  font-size:1.25rem;text-shadow:0 1px 4px rgba(0,0,0,.4);
}
.tile-sub .tile{aspect-ratio:16/10}

/* ---------- Home hero ---------- */
.home-hero{margin-bottom:8px}
.home-hero .page-title{margin-bottom:20px}
.home-hero-image{
  width:100%;aspect-ratio:16/7;border-radius:16px;overflow:hidden;margin:0 0 36px;
  box-shadow:0 1px 3px rgba(0,0,0,.12);
}
.home-hero-image img{width:100%;height:100%;object-fit:cover}
@media(max-width:640px){.home-hero-image{aspect-ratio:4/3}}

/* ---------- Visual blocks ---------- */
.visual{margin:1.6em 0 2em;max-width:var(--max)}

.visual-bars-track{
  display:flex;width:100%;height:38px;border-radius:8px;overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.08);
}
.visual-bars-segment{
  display:flex;align-items:center;justify-content:center;
  font-family:'Inter',sans-serif;font-size:.78rem;font-weight:600;color:#fff;
  white-space:nowrap;overflow:hidden;
}
.visual-bars-legend{
  display:flex;flex-wrap:wrap;gap:14px 22px;margin-top:12px;
  font-family:'Inter',sans-serif;font-size:.85rem;color:var(--ink-soft);
}
.visual-bars-legend li{display:flex;align-items:center;gap:7px;list-style:none}
.visual-bars-legend .dot{width:10px;height:10px;border-radius:50%;flex:none}

.visual-quadrant{
  display:grid;grid-template-columns:1fr 1fr;gap:2px;
  background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden;
}
.visual-quadrant-cell{
  background:var(--paper-raised);padding:16px 18px;min-height:88px;
}
.visual-quadrant-cell .q-label{
  font-family:'Inter',sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--accent);display:block;margin-bottom:4px;
}
.visual-quadrant-cell .q-sub{font-family:'Inter',sans-serif;font-size:.86rem;color:var(--ink-soft);line-height:1.4}
.visual-quadrant-cell.emphasis{background:color-mix(in srgb, var(--accent) 10%, var(--paper-raised))}

.visual-chips{display:flex;flex-wrap:wrap;gap:10px}
.visual-chip{
  display:flex;align-items:center;gap:8px;
  background:var(--paper-raised);border:1px solid var(--line);border-radius:24px;
  padding:8px 16px 8px 10px;
}
.visual-chip .chip-num{
  width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;
  font-family:'Inter',sans-serif;font-size:.72rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;flex:none;
}
.visual-chip .chip-label{font-family:'Inter',sans-serif;font-size:.86rem;font-weight:500;color:var(--ink)}

/* ---------- Links / further reading ---------- */
.further-reading{
  margin-top:2.5em;padding-top:1.5em;border-top:1px solid var(--line);max-width:var(--max);
}
.further-reading h3{
  font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);margin:0 0 .8em;
}
.further-reading ul{list-style:none;margin:0;padding:0}
.further-reading li{margin-bottom:.5em}
.further-reading a{text-decoration:none;font-weight:500}
.further-reading a:hover{text-decoration:underline}

.contact-email{
  display:inline-block;font-family:'Source Serif 4',Georgia,serif;font-size:1.3rem;
  margin:.6em 0 1.4em;color:var(--accent);text-decoration:none;
}
.contact-email:hover{text-decoration:underline}

/* ---------- Footer ---------- */
.site-footer{
  border-top:1px solid var(--line);padding:28px 0;margin-top:40px;
  font-size:.85rem;color:var(--ink-soft);
}
.site-footer a{color:var(--ink-soft);text-decoration:underline}
.site-footer a:hover{color:var(--accent)}