:root{
  --bg:#f7f7f5;
  --surface:#ffffff;
  --text:#131313;
  --muted:#6f6f6a;
  --line:#ddddda;
  --soft:#efefeb;

  --page-max:1248px;
  --gutter:28px;
  --header-h:72px;

  --rail:160px;
  --grid-gap:48px;

  color-scheme:light;
}

html[data-theme="dark"]{
  --bg:#10100f;
  --surface:#151514;
  --text:#f0f0ee;
  --muted:#a3a39c;
  --line:#2d2d2a;
  --soft:#1b1b19;
  color-scheme:dark;
}

*{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  scroll-padding-top:96px;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Lato","Helvetica Neue",Arial,system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{color:inherit}
button,a{font:inherit}

.wrap{
  width:min(calc(100% - (var(--gutter) * 2)),var(--page-max));
  margin-inline:auto;
}

/* HEADER */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
}

.header-inner{
  height:var(--header-h);
  display:flex;
  align-items:center;
  gap:24px;
}

.brand{
  font-size:1.03rem;
  font-weight:700;
  letter-spacing:-.02em;
  text-decoration:none;
  white-space:nowrap;
}

.nav{
  display:flex;
  align-items:center;
  gap:24px;
  margin-left:auto;
}

.nav a{
  font-size:.94rem;
  font-weight:400;
  color:var(--muted);
  text-decoration:none;
}

.nav a:hover,
.nav a[aria-current="page"]{
  color:var(--text);
}

.controls{
  display:flex;
  align-items:center;
  gap:10px;
}

.langs{
  display:flex;
  align-items:center;
  padding:4px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--bg);
}

.lang-btn,
.theme-btn{
  border:0;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
}

.lang-btn{
  min-width:36px;
  height:30px;
  padding:0 8px;
  border-radius:999px;
  font-size:.72rem;
  font-weight:700;
  text-transform:uppercase;
}

.lang-btn[aria-pressed="true"]{
  background:var(--text);
  color:var(--bg);
}

.theme-btn{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:50%;
}

.theme-btn:hover{background:var(--soft)}

/* SHARED PAGE GEOMETRY */
.hero{
  padding:76px 0 70px;
  border-bottom:1px solid var(--line);
}

.section{
  padding:62px 0 78px;
  border-bottom:1px solid var(--line);
}

.rail-grid{
  display:grid;
  grid-template-columns:var(--rail) minmax(0,1fr);
  gap:var(--grid-gap);
  align-items:start;
}

.eyebrow,
.section-kicker{
  font-size:.80rem;
  line-height:1.2;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:700;
}

h1{
  margin:.62rem 0 .66rem;
  font-size:clamp(2.5rem,4.3vw,4.65rem);
  line-height:.96;
  letter-spacing:-.052em;
  font-weight:600;
}

.hero--manifest h1{
  max-width:none;
}

@media(min-width:1040px){
  .hero--manifest h1{white-space:nowrap}
}

.subtitle{
  font-size:clamp(1rem,1.5vw,1.34rem);
  line-height:1.35;
  font-weight:400;
  color:var(--muted);
}

.tagline{
  max-width:900px;
  margin:46px 0 0;
  font-size:clamp(1.38rem,2.7vw,2.32rem);
  line-height:1.18;
  letter-spacing:-.028em;
  font-weight:400;
}

/* MANIFEST */
.section-head{
  margin-bottom:26px;
}

.section-title{
  margin:0;
  font-size:clamp(2rem,3.45vw,3.5rem);
  line-height:1;
  letter-spacing:-.04em;
  font-weight:600;
}

.manifesto-list{
  margin:0;
  padding:0;
  list-style:none;
}

.thesis{
  display:grid;
  grid-template-columns:var(--rail) minmax(0,1fr);
  gap:var(--grid-gap);
  padding:22px 0;
  border-top:1px solid var(--line);
}

.thesis:last-child{
  border-bottom:1px solid var(--line);
}

.num{
  padding-top:.24rem;
  color:var(--muted);
  font-size:.92rem;
  font-variant-numeric:tabular-nums;
}

.num a{text-decoration:none}

.thesis-text{
  width:100%;
  max-width:980px;
  margin:0;
  font-size:clamp(1.14rem,2vw,1.63rem);
  line-height:1.3;
  letter-spacing:-.016em;
  font-weight:400;
}

/* WHY PAGE – SAME GRID, SAME WIDTH */
.why-layout{
  display:grid;
  grid-template-columns:var(--rail) minmax(0,1fr);
  gap:var(--grid-gap);
  align-items:start;
}

.prose{
  width:100%;
  min-width:0;
}

.prose > p{
  max-width:840px;
  margin:0 0 1.2em;
  font-size:clamp(1.02rem,1.38vw,1.18rem);
  line-height:1.7;
  font-weight:400;
}

.panel{
  width:100%;
  margin-top:30px;
  padding:28px 30px;
  border:1px solid var(--line);
  background:var(--surface);
}

.panel + .panel{
  margin-top:20px;
}

.panel h3{
  margin:0 0 18px;
  font-size:.80rem;
  line-height:1.2;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:700;
}

.panel blockquote{
  max-width:900px;
  margin:0;
  font-size:clamp(1.45rem,2.4vw,2.25rem);
  line-height:1.1;
  letter-spacing:-.03em;
  font-weight:500;
}

.panel p{
  max-width:840px;
  margin:18px 0 0;
  font-size:1rem;
  line-height:1.65;
}

.panel a{text-underline-offset:4px}

/* FOOTER */
footer{padding:30px 0 54px}

.footer-inner{
  display:flex;
  justify-content:space-between;
  gap:20px;
  color:var(--muted);
  font-size:.88rem;
}

.to-top{text-decoration:none}
.to-top:hover{color:var(--text)}

/* TABLET / MOBILE */
@media(max-width:860px){
  :root{
    --gutter:18px;
    --header-h:64px;
    --rail:46px;
    --grid-gap:14px;
  }

  .header-inner{gap:12px}
  .nav{display:none}
  .controls{margin-left:auto}

  .langs{
    max-width:240px;
    overflow:auto;
    scrollbar-width:none;
  }

  .hero{
    padding:48px 0 46px;
  }

  .section{
    padding:44px 0 56px;
  }

  h1{
    font-size:clamp(2.65rem,10vw,4.1rem);
  }

  .tagline{
    margin-top:34px;
    max-width:none;
  }

  .section-head,
  .why-layout{
    grid-template-columns:1fr;
    gap:18px;
  }

  .thesis{
    grid-template-columns:46px minmax(0,1fr);
    gap:14px;
    padding:19px 0;
  }

  .thesis-text{
    max-width:none;
    font-size:clamp(1.14rem,5.6vw,1.6rem);
  }

  .prose > p,
  .panel p,
  .panel blockquote{
    max-width:none;
  }

  .panel{
    padding:22px 20px;
  }

  .footer-inner{
    flex-direction:column;
  }
}

@media(max-width:500px){
  :root{--gutter:14px}

  .brand{font-size:.92rem}

  .lang-btn{
    min-width:29px;
    padding:0 6px;
    font-size:.66rem;
  }

  .theme-btn{
    width:34px;
    height:34px;
  }
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}