/* ============================================================
   Miles — Simon Keijzer | design system
   ============================================================ */

:root{
  --bg:            #faf9f6;
  --bg-panel:      #f1efe9;
  --ink:           #17181a;
  --ink-soft:      #4a4b4d;
  --ink-mute:      #6e6f73;
  --line:          #dedad2;
  --accent:        #a8813a;   /* warm gold — "gold medal" thread */
  --accent-ink:    #7c611f;
  --white:         #ffffff;

  --serif: "Fraunces", "Iowan Old Style", "Georgia", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --maxw: 1180px;
  --gutter: 6vw;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:        #121212;
    --bg-panel:  #191919;
    --ink:       #f2f1ee;
    --ink-soft:  #c7c5bf;
    --ink-mute:  #8d8b85;
    --line:      #2c2b28;
    --accent:    #d4ab5f;
    --accent-ink:#e7c684;
    --white:     #1c1c1c;
  }
  :root:not([data-theme="light"]) img{ filter: brightness(.92) contrast(1.02); }
}
:root[data-theme="dark"]{
  --bg:        #121212;
  --bg-panel:  #191919;
  --ink:       #f2f1ee;
  --ink-soft:  #c7c5bf;
  --ink-mute:  #8d8b85;
  --line:      #2c2b28;
  --accent:    #d4ab5f;
  --accent-ink:#e7c684;
  --white:     #1c1c1c;
}
:root[data-theme="dark"] img{ filter: brightness(.92) contrast(1.02); }

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; overflow-x: hidden; }
body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  width: 100%;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
.container{ max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

h1,h2,h3,h4{
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 .5em;
  letter-spacing: -.01em;
}
h1{ font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 480; }
h2{ font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3{ font-size: 1.15rem; }
p{ margin: 0 0 1.1em; color: var(--ink-soft); }
.lede{ font-size: 1.2rem; color: var(--ink); font-family: var(--serif); font-style: italic; font-weight: 400; }

.eyebrow{
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-ink);
  display: inline-block;
  margin-bottom: .9em;
}
.rule{ width: 48px; height: 2px; background: var(--accent); border:0; margin: 0 0 1.4em; }

/* ---------- header ---------- */
.site-header{
  position: sticky; top:0; z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  height: 76px;
}
.wordmark{ display:inline-block; }
.wordmark-logo{ display:block; }
.wordmark-logo img{ display:block; height: 38px; width:auto; }
.wordmark-logo .logo-dark{ display:none; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .wordmark-logo .logo-light{ display:none; }
  :root:not([data-theme="light"]) .wordmark-logo .logo-dark{ display:block; }
}
:root[data-theme="dark"] .wordmark-logo .logo-light{ display:none; }
:root[data-theme="dark"] .wordmark-logo .logo-dark{ display:block; }
:root[data-theme="light"] .wordmark-logo .logo-light{ display:block; }
:root[data-theme="light"] .wordmark-logo .logo-dark{ display:none; }
.wordmark small{ display:block; font-family: var(--sans); font-size: .62rem; letter-spacing: .14em; color: var(--ink-mute); text-transform: uppercase; margin-top: 5px; }

.nav-main{ display:flex; align-items:center; gap: 2.1rem; }
.nav-main a{
  font-size: .87rem; font-weight: 500; color: var(--ink-soft);
  position: relative; padding: 4px 0;
}
.nav-main a:hover, .nav-main a.active{ color: var(--ink); }
.nav-main a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; background: var(--accent);
}
.lang-toggle{
  display:flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; font-size:.72rem; font-weight:600; letter-spacing:.04em;
}
.lang-toggle a{
  display:block; border:0; background:transparent; color:var(--ink-mute); padding: 10px 14px; cursor:pointer; font-family: var(--sans);
}
.lang-toggle a.active{ background: var(--ink); color: var(--bg); }
.theme-toggle{
  display:flex; align-items:center; justify-content:center; width:40px; height:40px;
  background:none; border:1px solid var(--line); border-radius:999px; cursor:pointer; color: var(--ink-mute); flex-shrink:0;
}
.theme-toggle:hover{ color: var(--ink); border-color: var(--ink-mute); }
.theme-toggle .icon-sun{ display:none; }
.theme-toggle .icon-moon{ display:block; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-toggle .icon-sun{ display:block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon{ display:none; }
}
:root[data-theme="dark"] .theme-toggle .icon-sun{ display:block; }
:root[data-theme="dark"] .theme-toggle .icon-moon{ display:none; }
:root[data-theme="light"] .theme-toggle .icon-sun{ display:none; }
:root[data-theme="light"] .theme-toggle .icon-moon{ display:block; }
.nav-toggle{ display:none; align-items:center; justify-content:center; min-width:44px; min-height:44px; background:none; border:0; cursor:pointer; padding:8px; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  display:block; width:22px; height:2px; background: var(--ink); position:relative; transition:.2s;
}
.nav-toggle span::before, .nav-toggle span::after{ content:""; position:absolute; }
.nav-toggle span::before{ top:-7px; } .nav-toggle span::after{ top:7px; }

/* ---------- hero ---------- */
.hero{ padding: 5.5rem 0 4.5rem; }
.hero-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 4vw; align-items:center; }
.hero-photo{ position:relative; }
.hero-photo img{ width:100%; height:auto; border-radius: 2px; }
.hero-photo .cap{ position:absolute; left:14px; bottom:14px; background: rgba(20,20,20,.62); color:#fff; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; padding:5px 10px; }
.hero-tags{ display:flex; flex-wrap:wrap; margin: 1.6rem 0 2rem; }
.hero-tags span{ font-size:.78rem; color: var(--ink-mute); margin: .25rem 0; }
.hero-tags span:not(:last-child)::after{ content:"·"; margin: 0 .55rem; color: var(--line); }
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  font-size:.85rem; font-weight:600; letter-spacing:.02em;
  background: var(--ink); color: var(--bg); padding: .85em 1.5em; border-radius: 2px; border: 1px solid var(--ink);
  transition: opacity .15s;
}
.btn:hover{ opacity:.82; }
.btn.ghost{ background:transparent; color:var(--ink); border:1px solid var(--line); }

/* ---------- sections ---------- */
section{ padding: 4.2rem 0; }
section.alt{ background: var(--bg-panel); }
section.border-t{ border-top: 1px solid var(--line); }

.pillars{ display:grid; grid-template-columns: repeat(4,1fr); gap: 1.8rem; margin-top: 2.4rem; }
.pillar .num{ font-family: var(--serif); font-size: .95rem; color: var(--accent); margin-bottom:.6rem; display:block; }
.pillar h3{ margin-bottom:.4rem; }
.pillar p{ font-size:.92rem; margin:0; }

.two-col{ display:grid; grid-template-columns: 1fr 1fr; gap: 4vw; }
.two-col.wide-left{ grid-template-columns: 1.3fr .9fr; }

.quote-block{
  border-left: 2px solid var(--accent); padding-left: 1.4rem; margin: 1.8rem 0;
}
.quote-block p{ font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--ink); }

.stat-row{ display:flex; flex-wrap:wrap; gap: 2.6rem; margin: 2rem 0 .5rem; }
.stat-row .stat b{ display:block; font-family: var(--serif); font-size: 2rem; color: var(--ink); }
.stat-row .stat span{ font-size: .8rem; color: var(--ink-mute); }

/* ---------- timeline (experience) ---------- */
.timeline{ position:relative; margin-top: 2.2rem; }
.tl-item{
  display:grid; grid-template-columns: 130px 1fr; gap: 2rem;
  padding: 1.7rem 0; border-top: 1px solid var(--line);
}
.tl-item:first-child{ border-top: 1px solid var(--line); }
.tl-period{ font-size:.82rem; color: var(--ink-mute); font-weight:600; letter-spacing:.03em; padding-top:.15rem; }
.tl-role{ font-family: var(--serif); font-size: 1.15rem; margin-bottom:.35rem; }
.tl-org{ color: var(--accent-ink); font-size:.85rem; font-weight:600; margin-left:.5em; }
.tl-desc{ margin:0; font-size:.95rem; }

.brand-row{ display:flex; flex-wrap:wrap; gap: .6rem; margin-top: 1.6rem; }
.brand-row span{
  font-size:.78rem; letter-spacing:.03em; color: var(--ink-soft);
  border:1px solid var(--line); padding: .45em .9em; border-radius: 999px;
}

.writing-item{ padding: 1.5rem 0; border-top:1px solid var(--line); }
.writing-item:last-child{ border-bottom: 1px solid var(--line); }
.writing-meta{ font-size:.75rem; color: var(--ink-mute); letter-spacing:.04em; text-transform:uppercase; margin-bottom:.5rem; }
.writing-item a.readmore{ font-size:.84rem; font-weight:600; color: var(--accent-ink); }
.writing-item a.readmore:hover{ text-decoration: underline; }

/* ---------- gallery ---------- */
.gallery{ column-count: 3; column-gap: .6rem; margin-top: 2rem; }
.gallery figure{ margin: 0 0 .6rem; break-inside: avoid; overflow:hidden; position:relative; background: var(--bg-panel); }
.gallery figure img{ width:100%; height:auto; display:block; transition: transform .5s ease; }
.gallery figure:hover img{ transform: scale(1.045); }
.gallery figcaption{
  position:absolute; left:0; right:0; bottom:0; padding: .8rem .9rem;
  background: linear-gradient(0deg, rgba(0,0,0,.62), transparent);
  color:#fff; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; opacity:0; transition:.2s;
}
.gallery figure:hover figcaption{ opacity:1; }
@media (hover: none){
  .gallery figcaption{ opacity:1; }
}

/* ---------- contact ---------- */
.contact-card{
  background: var(--ink); color: var(--bg); border-radius: 3px; padding: 3.2rem var(--gutter);
  text-align:center;
}
.contact-card h2{ color: var(--bg); }
.contact-card p{ color: #d8d6cf; max-width: 560px; margin-left:auto; margin-right:auto; }
.contact-links{ display:flex; justify-content:center; gap:1rem; flex-wrap:wrap; margin-top: 1.8rem; }
.contact-links a.btn{ background: var(--accent); border-color: var(--accent); color:#1b1503; }
.contact-links a.btn.ghost{ background:transparent; color: var(--bg); border-color: #4a4a44; }

.info-list{ margin-top: 2.4rem; display:grid; grid-template-columns: repeat(3,1fr); gap: 2rem; text-align:left; }
.info-list h4{ font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color: var(--ink-mute); margin-bottom:.5rem; }
.info-list p{ margin:0; font-size:.95rem; }
.info-list a{ color: var(--accent-ink); font-weight:600; }

/* ---------- footer ---------- */
.site-footer{ border-top:1px solid var(--line); padding: 2.4rem 0; }
.site-footer .container{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; }
.site-footer p{ margin:0; font-size:.8rem; color: var(--ink-mute); }
.footer-links{ display:flex; gap:1.4rem; }
.footer-links a{ font-size:.8rem; color: var(--ink-mute); }
.footer-links a:hover{ color: var(--ink); }

/* ---------- utility ---------- */
.mt-0{ margin-top:0; }
.center{ text-align:center; }
.header-actions{ display:flex; align-items:center; gap:14px; }
.hero.compact{ padding-bottom:2rem; }
.btn-row{ display:flex; gap:.9rem; flex-wrap:wrap; }
.link-accent{ font-weight:600; color: var(--accent-ink); }
.quote-block.inline-left{ text-align:left; display:inline-block; }
.pillars.two-up{ margin-top:0; grid-template-columns:1fr 1fr; }
.fine-print{ font-size:.9rem; }
.translation-note{ font-size:.85rem; opacity:.75; }
.w-640{ max-width:640px; }
.w-760{ max-width:760px; }
.w-820{ max-width:820px; }
.w-900{ max-width:900px; }
.full-photo{ margin: 0; }
.full-photo img{ width:100%; max-height: 62vh; object-fit:cover; }
.full-photo figcaption{ text-align:center; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color: var(--ink-mute); padding: .9rem 0; }

.reveal{ opacity:0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .gallery figure img{ transition:none; }
}

/* ---------- accessibility ---------- */
.skip-link{
  position:absolute; left:-999px; top:auto;
  background: var(--ink); color: var(--bg);
  padding: .8em 1.2em; z-index:100; font-size:.85rem; font-weight:600;
}
.skip-link:focus{ left: 14px; top: 14px; }

/* ---------- responsive ---------- */
@media (max-width: 880px){
  .wordmark small{ display:none; }
  .hero-grid, .two-col, .two-col.wide-left{ grid-template-columns: 1fr; }
  .pillars{ grid-template-columns: repeat(2,1fr); }
  .info-list{ grid-template-columns: 1fr; }
  .gallery{ column-count: 2; }
  .tl-item{ grid-template-columns: 1fr; gap:.4rem; }
  .nav-main{
    position:fixed; top:76px; right:0; bottom:0; left:0; z-index:60;
    background: var(--bg); overflow-y:auto;
    flex-direction:column; align-items:flex-start; padding: 2rem var(--gutter);
    gap: 1.4rem; transform: translateX(100%); transition: transform .25s ease;
  }
  .nav-main.open{ transform: translateX(0); }
  .nav-main a{ font-size: 1.1rem; padding: .3rem 0; }
  .nav-toggle{ display:flex; }
}
@media (max-width: 560px){
  .pillars{ grid-template-columns: 1fr 1fr; }
}