:root{
  --bg:      #e8e3d3;
  --paper:   #f6efe0;
  --ink:     #1f1f1d;
  --mute:    #6b6860;
  --rule:    rgba(var(--ink-rgb),.13);
  --rule-hvy:rgba(var(--ink-rgb),.85);
  --accent:  #c44a2a;
  --ease:    cubic-bezier(.65,.02,.2,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--ink);
  font-family:"Inter",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}

/* ─── NAV ──────────────────────────────────── */
.m-nav{
  display:flex;align-items:center;
  height:49px;padding:0 clamp(20px,2.5vw,48px);   /* shared header geometry */
  border-bottom:1px solid var(--rule-hvy);
  position:sticky;top:0;z-index:20;
  background:var(--bg);
}
.m-logo{
  font-weight:900;font-size:clamp(16px,1.4vw,22px);
  letter-spacing:-.03em;
}
.m-logo span{color:var(--accent)}
.m-nav-links{
  display:flex;gap:clamp(16px,2vw,36px);
  margin-left:clamp(24px,3vw,56px);
  font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
}
.m-nav-links a{opacity:.35;transition:opacity .2s}
.m-nav-links a:hover,.m-nav-links a.is-active{opacity:1}
.m-nav-right{display:flex;align-items:center;gap:16px;margin-left:auto}
.m-issue{
  font-size:11px;font-weight:700;letter-spacing:.1em;
  border:1.5px solid var(--ink);padding:3px 8px;
}

/* ─── HERO GRID ─────────────────────────────── */
.m-hero{
  border-bottom:1px solid var(--rule-hvy);
}
.m-hero-grid{
  display:grid;
  grid-template-columns: 1fr clamp(60px,8vw,120px) clamp(180px,22vw,320px);
  grid-template-rows: clamp(60px,8vh,100px) auto clamp(60px,8vh,100px);
}

/* cell borders */
.m-cell{
  border-right:1px solid var(--rule-hvy);
  border-bottom:1px solid var(--rule-hvy);
  padding:clamp(16px,2vw,32px);
}
.m-cell:last-child,.m-cell--tr,.m-cell--mr,.m-cell--br{border-right:0}
.m-cell--bl,.m-cell--bc,.m-cell--br{border-bottom:0}

.m-eyebrow{
  font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.45;
}
/* legal links — bottom-right hero cell; same voice as .m-hero-sub above it,
   and the same geometry: a 28ch block anchored to the cell's right edge, so
   the two left edges align exactly. Stacked, accent on hover. */
.m-cell--br{display:flex;flex-direction:column;}
.m-legal-links{
  align-self:flex-end;width:28ch;max-width:100%;
  font-size:clamp(12px,.9vw,14px);   /* same as .m-hero-sub, so 28ch resolves identically */
  display:flex;flex-direction:column;align-items:flex-start;gap:4px;
}
.m-legal-links a{
  font-size:clamp(12px,.9vw,14px);line-height:1.6;color:var(--mute);
  text-decoration:none;
  transition:color .15s ease;
}
.m-legal-links a:hover{color:var(--accent);}
.m-accent-mark{
  font-size:clamp(22px,3vw,42px);color:var(--accent);line-height:1;
}
.m-cell--headline{
  padding-top:clamp(28px,4vw,60px);
  padding-bottom:clamp(28px,4vw,60px);
}
.m-hero-title{
  font-size:clamp(52px,8.5vw,148px);
  font-weight:900;letter-spacing:-.04em;line-height:.94;
  text-transform:uppercase;
}
.m-hero-sub{
  font-size:clamp(12px,.9vw,14px);line-height:1.6;color:var(--mute);
  max-width:28ch;margin-top:auto;
  align-self:flex-end;
}
.m-cell--mr{
  display:flex;flex-direction:column;justify-content:flex-end;
}
.m-scroll-cue{
  font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  opacity:.4;
}

/* ─── THREE PILLARS ─────────────────────────── */
.m-pillars{
  border-bottom:1px solid var(--rule-hvy);
}
.m-pillar{
  display:grid;
  grid-template-columns:clamp(60px,7vw,110px) 1fr clamp(180px,32vw,480px);
  border-bottom:1px solid var(--rule-hvy);
  min-height:clamp(260px,36vh,480px);
}
.m-pillar:last-child{border-bottom:0}

.m-pillar-num{
  font-size:10px;font-weight:700;letter-spacing:.1em;color:var(--mute);
  padding:clamp(20px,2.5vw,40px) clamp(16px,1.5vw,28px);
  border-right:1px solid var(--rule-hvy);
  writing-mode:vertical-rl;
  align-items:flex-start;
  display:flex;
}
.m-pillar-content{
  padding:clamp(24px,3vw,52px) clamp(20px,2.5vw,44px);
  display:flex;flex-direction:column;gap:clamp(12px,1.5vw,24px);
  border-right:1px solid var(--rule-hvy);
  justify-content:center;
}
.m-pillar--alt .m-pillar-content{
  border-right:0;
  border-left:1px solid var(--rule-hvy);
}
.m-pillar-title{
  font-size:clamp(32px,5vw,72px);
  font-weight:900;letter-spacing:-.04em;line-height:.95;
  text-transform:uppercase;
}
.m-pillar-context{
  font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);
}
.m-pillar-body{
  font-size:clamp(11px,.85vw,13px);line-height:1.75;color:var(--mute);max-width:48ch;
}
.m-pillar-link{
  display:inline-flex;align-items:center;
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  margin-top:auto;
  border-bottom:1.5px solid var(--ink);padding-bottom:3px;
  width:fit-content;
  transition:opacity .2s;
}
.m-pillar-link:hover{opacity:.5}
.m-pillar-image{
  overflow:hidden;
  background:var(--paper);
}
.m-pillar-image img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(.15);
  display:block;
  transition:transform .9s var(--ease);
}
.m-pillar:hover .m-pillar-image img{transform:scale(1.04)}

/* alt layout: image col-1, num col-2, content col-3 */
.m-pillar--alt{
  grid-template-columns:clamp(180px,32vw,480px) clamp(60px,7vw,110px) 1fr;
}
.m-pillar--alt .m-pillar-image{
  grid-column:1;grid-row:1;
  border-right:1px solid var(--rule-hvy);
}
.m-pillar--alt .m-pillar-num{
  grid-column:2;grid-row:1;
  border-right:0;border-left:1px solid var(--rule-hvy);
}
.m-pillar--alt .m-pillar-content{
  grid-column:3;grid-row:1;
  border-right:0;border-left:1px solid var(--rule-hvy);
}

/* ─── MANIFESTO ─────────────────────────────── */
.m-manifesto{
  border-bottom:1px solid var(--rule-hvy);
  background:#1f1f1d;color:#e8e3d3;
}
.m-manifesto-grid{
  display:grid;
  grid-template-columns:clamp(80px,10vw,160px) 1fr;
  grid-template-rows:auto auto;
  min-height:clamp(180px,28vh,340px);
}
.m-manifesto-label{
  grid-row:1/3;
  font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  opacity:.35;
  padding:clamp(32px,4vw,64px) clamp(20px,2.5vw,44px);
  border-right:1px solid rgba(232,227,211,.15);
  writing-mode:vertical-rl;
  display:flex;align-items:flex-start;
}
.m-manifesto-quote{
  font-size:clamp(22px,3.5vw,56px);
  font-weight:800;letter-spacing:-.03em;line-height:1.1;
  font-style:normal;
  padding:clamp(40px,5vw,80px) clamp(28px,3.5vw,60px) clamp(20px,2vw,36px);
}
.m-manifesto-attr{
  font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  opacity:.4;
  padding:0 clamp(28px,3.5vw,60px) clamp(40px,5vw,80px);
  grid-column:2;
}

/* ─── CLOSING GRID ──────────────────────────── */
.m-close{
  border-bottom:1px solid var(--rule-hvy);
}
.m-close-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
}
.m-close-card{
  display:flex;flex-direction:column;gap:10px;
  padding:clamp(28px,3.5vw,56px) clamp(20px,2.5vw,44px);
  border-right:1px solid var(--rule-hvy);
  transition:background .25s;
  cursor:pointer;
}
.m-close-card:last-child{border-right:0}
.m-close-card:hover{background:var(--paper)}
.m-close-num{
  font-size:10px;font-weight:700;letter-spacing:.1em;color:var(--mute);
}
.m-close-name{
  font-size:clamp(22px,3vw,44px);font-weight:900;letter-spacing:-.04em;
  line-height:.95;text-transform:uppercase;
}
.m-close-desc{
  font-size:11px;color:var(--mute);letter-spacing:.02em;margin-top:auto;
  flex:1;display:flex;align-items:flex-end;
}
.m-close-arrow{
  font-size:20px;opacity:.3;margin-top:8px;
  align-self:flex-end;
  transition:opacity .2s,transform .3s var(--ease);
}
.m-close-card:hover .m-close-arrow{opacity:.9;transform:translate(4px,-4px)}

/* ══════════════ MOBILE (≤699px) ══════════════ */
@media (max-width:699px){
  .m-nav{gap:12px;padding:12px 16px}
  .m-nav-links{
    margin-left:8px;gap:14px;flex:1;min-width:0;
    overflow-x:auto;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 20px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 20px),transparent);
  }
  .m-nav-links::-webkit-scrollbar{display:none}
  .m-nav-links a{flex:none}
  .m-nav-right{gap:12px;margin-left:8px}
  .m-issue{display:none}

  /* hero: single column, spacer cells dropped */
  .m-hero-grid{grid-template-columns:1fr;grid-template-rows:auto}
  .m-cell{border-right:0}
  .m-cell--tc,.m-cell--tr,.m-cell--mc,.m-cell--bc,.m-cell--br{display:none}
  .m-cell--bl{border-bottom:0}
  .m-hero-title{font-size:clamp(44px,13vw,64px)}
  .m-hero-sub{margin-top:16px;align-self:flex-start}

  /* pillars stack: number strip, image, then content */
  .m-pillar,.m-pillar--alt{
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto;
    min-height:0;
  }
  .m-pillar-num,.m-pillar--alt .m-pillar-num{
    writing-mode:horizontal-tb;
    grid-column:1;grid-row:1;
    border-right:0;border-left:0;
    border-bottom:1px solid var(--rule-hvy);
    padding:12px 16px;
  }
  .m-pillar-image,.m-pillar--alt .m-pillar-image{
    grid-column:1;grid-row:2;
    border-right:0;border-left:0;
    aspect-ratio:16/10;
  }
  .m-pillar-content,.m-pillar--alt .m-pillar-content{
    grid-column:1;grid-row:3;
    border-right:0;border-left:0;
    padding:20px 16px 28px;
  }

  /* manifesto: label above the quote, horizontal */
  .m-manifesto-grid{grid-template-columns:1fr;min-height:0}
  .m-manifesto-label{
    grid-row:auto;writing-mode:horizontal-tb;
    padding:18px 16px 0;border-right:0;
  }
  .m-manifesto-quote{padding:14px 16px 12px}
  .m-manifesto-attr{grid-column:1;padding:0 16px 28px}

  .m-close-grid{grid-template-columns:1fr}
  .m-close-card{border-right:0;border-bottom:1px solid var(--rule-hvy);padding:22px 16px}
  .m-close-card:last-child{border-bottom:0}
}

/* ═══ GUEST VIEW (2026-07-17) — informative, dictionary-only ═══
   Shown to visitors & regular users instead of the three pillars
   (admin keeps the full page; anecdote-gate.js swaps via
   [data-admin-only]/[data-guest-only]). Same Swiss grammar:
   hairlines, big numerals, uppercase eyebrows. */
/* ═══ "Why it matters" essay (2026-07-23) — culture + origins, shown to all.
   Label column + a readable prose column, same hairline grammar. ═══ */
.m-essay{border-bottom:1px solid var(--rule-hvy)}
.m-essay-grid{
  display:grid;
  grid-template-columns:clamp(160px,22vw,320px) 1fr;
}
.m-essay-label{
  padding:clamp(28px,4vw,56px) clamp(20px,3vw,48px);
  font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);
  border-right:1px solid var(--rule-hvy);
}
.m-essay-body{
  padding:clamp(30px,4vw,60px) clamp(20px,3vw,48px);
  max-width:74ch;
}
.m-essay-body p{
  font-size:clamp(15px,1.25vw,18.5px);line-height:1.72;color:var(--ink);
  margin:0 0 1.05em;
}
.m-essay-body p:last-child{margin-bottom:0}
.m-essay-toggle{
  margin-top:16px;padding:0;background:none;border:0;cursor:pointer;
  font-family:"Inter",system-ui,sans-serif;
  font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);
  display:inline-flex;align-items:center;gap:7px;
  transition:color .15s;
}
.m-essay-toggle:hover{color:var(--ink)}
.m-essay-toggle span{font-size:14px;font-weight:600;line-height:1}
.m-essay-more[hidden]{display:none}
.m-essay-more > p:first-child{margin-top:1.05em}
.m-essay-body .m-essay-thanks{
  margin-top:1.4em;margin-bottom:.2em;
}
.m-essay-body .m-essay-sign{
  margin-top:.2em;
  font-size:clamp(13px,1vw,15px);font-weight:700;letter-spacing:.01em;
  color:var(--ink);
}
@media (max-width:720px){
  .m-essay-grid{grid-template-columns:1fr}
  .m-essay-label{border-right:0;border-bottom:1px solid var(--rule-hvy);padding-bottom:14px}
}

.m-info{border-bottom:1px solid var(--rule-hvy)}
.m-info-grid{
  display:grid;
  grid-template-columns:clamp(160px,22vw,320px) 1fr;
  border-bottom:1px solid var(--rule-hvy);
}
.m-info-label{
  padding:clamp(28px,4vw,56px) clamp(20px,3vw,48px);
  font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);
  border-right:1px solid var(--rule-hvy);
}
.m-info-lead{
  padding:clamp(28px,4vw,56px) clamp(20px,3vw,48px);
  font-size:clamp(19px,2.5vw,34px);
  font-weight:600;letter-spacing:-.02em;line-height:1.32;
  max-width:26em;
}
.m-info-stats{
  display:grid;grid-template-columns:repeat(3,1fr);
}
.m-info-stat{
  display:flex;flex-direction:column;gap:8px;
  padding:clamp(22px,3vw,40px) clamp(20px,3vw,48px);
}
.m-info-stat + .m-info-stat{border-left:1px solid var(--rule-hvy)}
.m-info-stat-n{
  font-size:clamp(30px,4vw,58px);
  font-weight:900;letter-spacing:-.04em;line-height:1;
}
.m-info-stat-l{
  font-size:clamp(10px,.8vw,12px);line-height:1.55;color:var(--mute);max-width:24ch;
}

.m-how{border-bottom:1px solid var(--rule-hvy)}
.m-how-head{
  padding:clamp(20px,2.6vw,34px) clamp(20px,3vw,48px);
  font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mute);
  border-bottom:1px solid var(--rule-hvy);
}
.m-how-row{
  display:grid;
  grid-template-columns:clamp(60px,7vw,110px) 1fr;
  border-bottom:1px solid var(--rule-hvy);
}
.m-how-num{
  padding:clamp(22px,3vw,40px) 0 0 clamp(20px,3vw,48px);
  font-size:clamp(12px,1vw,15px);font-weight:800;letter-spacing:.04em;
  color:var(--accent);
}
.m-how-body{
  padding:clamp(22px,3vw,40px) clamp(20px,3vw,48px);
  border-left:1px solid var(--rule-hvy);
}
.m-how-title{
  font-size:clamp(22px,2.6vw,40px);
  font-weight:900;letter-spacing:-.03em;line-height:1;
  text-transform:uppercase;
  margin:0 0 10px;
}
.m-how-text{
  font-size:clamp(11px,.9vw,13.5px);line-height:1.75;color:var(--mute);
  max-width:58ch;margin:0;
}
.m-how-cta{
  display:flex;align-items:center;justify-content:space-between;
  padding:clamp(24px,3.4vw,46px) clamp(20px,3vw,48px);
  font-size:clamp(16px,2vw,28px);
  font-weight:800;letter-spacing:-.02em;text-transform:uppercase;
  transition:background .25s,color .25s;
}
.m-how-cta span{transition:transform .3s var(--ease)}
.m-how-cta:hover{background:var(--ink);color:var(--bg)}
.m-how-cta:hover span{transform:translate(4px,-4px)}

@media (max-width:699px){
  .m-info-grid{grid-template-columns:1fr}
  .m-info-label{border-right:0;border-bottom:1px solid var(--rule-hvy);padding-bottom:14px}
  .m-info-stats{grid-template-columns:1fr}
  .m-info-stat + .m-info-stat{border-left:0;border-top:1px solid var(--rule-hvy)}
  .m-how-row{grid-template-columns:56px 1fr}
}