/* ===== ENSO — shared editorial system ===== */

:root{
  --paper:#F4F1EA;
  --paper-2:#ECE7DC;
  --ink:#111418;
  --ink-soft:#2C313A;
  --ink-dim:#6A7282;
  --rule: rgba(17,20,24,.16);
  --rule-soft: rgba(17,20,24,.08);
  --sky:#3E86C2;
  --accent:#C25A2C;     /* the rust 'sf' color */
  --accent-soft:#D67A3C;
}
*{box-sizing:border-box}
html,body{
  margin:0; padding:0;
  background:var(--paper); color:var(--ink);
  font-family:"Fraunces", Georgia, serif; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
body{ min-height:100vh; overflow-x:hidden; }
a{ color:inherit; }

/* ===== Shell ===== */
.shell{
  position:relative;
  width:100%; max-width:1240px; margin:0 auto;
  padding: 28px clamp(24px,5vw,64px) 56px;
  min-height:100vh;
  display:flex; flex-direction:column;
}

/* ===== LOGO ===== */
.logo{
  display:inline-flex; flex-direction:column; align-items:center;
  line-height:1; text-decoration:none; color:inherit;
}
.logo .word{
  font-family:"Fraunces", serif; font-style:italic; font-weight:400;
  font-size: 28px; letter-spacing:-.012em; color:var(--ink);
}
.logo .sf{
  font-family:"Fraunces", serif; font-style:normal; font-weight:400;
  font-size: 9px; letter-spacing:.6em; text-transform:lowercase;
  color: var(--accent); margin-top: 6px; padding-left: .6em;
}
.logo.lg .word{ font-size: 64px; }
.logo.lg .sf{ font-size: 13px; margin-top:14px; letter-spacing:.7em;}
.logo.xl .word{ font-size: clamp(120px, 16vw, 220px); font-weight:400;}
.logo.xl .sf{ font-size: clamp(16px, 1.4vw, 22px); margin-top: clamp(18px,2vh,28px); letter-spacing:.7em;}
.logo.sm .word{ font-size: 22px;}
.logo.sm .sf{ font-size: 8px; letter-spacing:.55em; margin-top:5px;}

/* ===== Top nav (logo + links) ===== */
.topnav{
  display:flex; align-items:flex-start; justify-content:space-between;
  padding-bottom:18px;
  border-bottom: 1px solid var(--rule-soft);
}
.nav-links{
  display:flex; align-items:center; gap:clamp(20px,4vw,52px);
  font-family:"Inter", "Helvetica Neue", system-ui, sans-serif;
  font-weight:600; font-size:13px; letter-spacing:.18em; text-transform:uppercase;
  padding-top: 10px;
}
.nav-links a{
  text-decoration:none; color:var(--ink-dim); padding:6px 0;
  border-bottom:1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.nav-links a:hover{ color: var(--ink); }
.nav-links a.active{ color: var(--ink); border-bottom-color: var(--ink);}

/* ===== Page label (small uppercase, like "WE KNOW") ===== */
.page-label{
  font-family:"Inter", "Helvetica Neue", system-ui, sans-serif;
  font-weight:700; font-size:14px; letter-spacing:.18em; text-transform:uppercase;
  color: var(--ink); margin: 0 0 24px;
}

/* ===== Editorial body (large bold serif) ===== */
.lead{
  font-family:"Fraunces", serif; font-weight:600;
  font-size: clamp(28px, 3.6vw, 54px);
  line-height: 1.18; letter-spacing: -.012em;
  color: var(--ink); margin: 0;
  max-width: 22ch;
  text-wrap: balance;
}
.lead em{ font-style: italic; font-weight: 500;}
.lead .lighter{ font-weight:400; color:var(--ink-soft);}

.body-text{
  font-family:"Fraunces", serif; font-weight:600;
  font-size: clamp(20px, 2.1vw, 30px);
  line-height: 1.32; letter-spacing: -.005em;
  color: var(--ink);
  max-width: 32ch;
}
.body-text em{ font-style: italic; font-weight: 500; }
.body-text .light{ font-weight:400; color: var(--ink-soft); }

.prose{
  font-family:"Fraunces", serif; font-weight:400;
  font-size: clamp(18px, 1.45vw, 21px);
  line-height: 1.65; color: var(--ink-soft);
  max-width: 60ch;
}
.prose p{ margin: 0 0 1.1em; text-wrap: pretty;}
.prose p:last-child{ margin-bottom: 0;}
.prose em{ font-style: italic; color: var(--ink);}
.prose strong{ font-weight:500; color: var(--ink); font-style:normal;}

/* ===== Footer ===== */
.foot{
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid var(--rule-soft);
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  font-family:"JetBrains Mono", monospace; font-size:10px; letter-spacing:.28em; text-transform:uppercase;
  color: var(--ink-dim);
}
.foot .sig{
  font-family:"Fraunces", serif; font-style:italic; font-weight:400;
  letter-spacing:0; text-transform:none; color:var(--ink); font-size:16px;
}

/* ===== Inline next-page link arrow ===== */
.next-link{
  display:inline-flex; align-items:center; gap:10px;
  margin-top: clamp(28px,5vh,56px);
  font-family:"Inter", "Helvetica Neue", system-ui, sans-serif;
  font-weight:600; font-size:13px; letter-spacing:.18em; text-transform:uppercase;
  color: var(--ink); text-decoration:none;
  border-bottom:1px solid var(--ink); padding-bottom:6px;
  align-self: flex-start;
}
.next-link .arr{ transition: transform .2s ease;}
.next-link:hover .arr{ transform: translateX(5px);}

/* ===== Mobile ===== */
@media (max-width: 720px){
  .topnav{ flex-direction:column; align-items:flex-start; gap:14px;}
  .nav-links{ gap:22px; padding-top:0;}
  .lead{ font-size: clamp(28px, 7vw, 44px);}
  .body-text{ font-size: clamp(20px, 5.4vw, 28px);}
  .logo.xl .word{ font-size: clamp(80px, 22vw, 140px);}
}