:root{
  --bg:#f2f0ea;
  --bg-alt:#e5e2d9;
  --bg-dark:#1a1c22;
  --ink:#1a1c22;
  --ink-soft:#6e6b64;
  --ink-inv:#f2f0ea;
  --accent:#a82c26;
  --accent2:#2a4a6b;
  --rule:#c9c5b8;
  --rule-dark:#3a3d47;
  --serif:Georgia,'Times New Roman',serif;
  --sans:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:18px;
  line-height:1.9;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}

a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
a:focus-visible,:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.band-dark a:focus-visible{outline-color:var(--bg)}

/* ---------- grid ---------- */
.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 40px}
.grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:28px}
.c6{grid-column:1 / 7}
.c7{grid-column:1 / 8}
.c9{grid-column:1 / 10}

/* ---------- typography ---------- */
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.3;margin:0}
h1{font-size:44px;letter-spacing:-.005em}
h2{font-size:30px;margin-bottom:22px}
h3{font-size:22px;margin:38px 0 12px}
p{margin:0 0 26px}
p:last-child{margin-bottom:0}
.lede{font-size:20px;line-height:1.85}
.note{color:var(--ink-soft);font-size:14px;line-height:1.7}
.num{font-family:var(--serif);color:var(--accent2);font-size:14px;letter-spacing:.06em;display:block;margin-bottom:10px}

ul{margin:0 0 26px;padding:0;list-style:none}
li{position:relative;padding-left:26px;margin-bottom:10px;line-height:1.75}
li::before{content:"";position:absolute;left:0;top:.72em;width:11px;height:1px;background:var(--accent)}
li:last-child{margin-bottom:0}

/* ---------- separators ---------- */
.sep{margin:0 0 30px}
.sep span{display:block;height:1px;background:var(--rule)}
.sep i{display:block;height:3px;width:148px;background:var(--accent);margin-top:6px}
.band-dark .sep span{background:var(--rule-dark)}

/* ---------- header ---------- */
.site-head{border-bottom:1px solid var(--rule);background:var(--bg)}
.head-in{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 32px;padding:22px 0}
.brand{font-family:var(--serif);font-size:23px;color:var(--ink);text-decoration:none;letter-spacing:.01em}
.brand:hover{text-decoration:none;color:var(--accent)}
.site-nav ul{display:flex;flex-wrap:wrap;gap:6px 26px;margin:0}
.site-nav li{padding:0;margin:0}
.site-nav li::before{display:none}
.site-nav a{font-size:16px;color:var(--ink);text-decoration:none;padding-bottom:3px;border-bottom:1px solid transparent}
.site-nav a:hover{border-bottom-color:var(--accent);color:var(--accent)}
.site-nav a[aria-current="page"]{border-bottom-color:var(--accent);color:var(--accent)}

/* ---------- sections rhythm ---------- */
.s-a{padding:72px 0}
.s-b{padding:88px 0}
.s-c{padding:104px 0}
.band-alt{background:var(--bg-alt)}
.band-dark{background:var(--bg-dark);color:var(--ink-inv)}
.band-dark h2,.band-dark h3{color:var(--ink-inv)}
.band-dark .note{color:#a7a49c}
.band-dark .num{color:#8fb0cf}

/* ---------- hero ---------- */
.hero{padding:76px 0 64px}
.hero-in{position:relative;padding-left:36px}
.dim-v{position:absolute;left:0;top:6px;bottom:6px;width:1px;background:var(--accent2)}
.dim-v::before,.dim-v::after{content:"";position:absolute;left:-6px;width:13px;height:1px;background:var(--accent2)}
.dim-v::before{top:0}
.dim-v::after{bottom:0}
.hero h1{grid-column:1 / 9}
.hero h1 .l2{display:block;padding-left:9%}
.dim-h{display:flex;align-items:center;gap:16px;grid-column:1 / 9;margin:34px 0 30px}
.dim-h::before,.dim-h::after{content:"";flex:1 1 auto;height:8px;border-bottom:1px solid var(--rule);border-left:1px solid var(--accent2);transform:translateY(-4px)}
.dim-h::after{border-left:0;border-right:1px solid var(--accent2)}
.dim-h b{font-weight:400;font-size:14px;color:var(--accent2);letter-spacing:.04em;white-space:nowrap}

/* ---------- main figure with callout ---------- */
.figure-row{align-items:start}
.fig-main{grid-column:1 / 8;margin:0}
.fig-main img{width:100%}
.fig-main figcaption{margin-top:12px}
.callout{grid-column:9 / 13;position:relative;padding-top:26px}
.callout::before{content:"";position:absolute;top:34px;left:-42px;width:42px;height:1px;background:var(--accent2)}
.callout p{font-size:15px;line-height:1.8;color:var(--ink-soft)}

/* ---------- dark detail block ---------- */
.detail-row{align-items:center;row-gap:40px}
.detail-text{grid-column:1 / 7}
.fig-detail{grid-column:8 / 13;margin:0}
.fig-detail img{width:100%}
.fig-detail figcaption{margin-top:12px}

/* ---------- document pages ---------- */
.doc{grid-column:1 / 9;border-left:1px solid var(--rule);padding-left:30px}
.doc h2{position:relative;margin-top:52px}
.doc h2::before{content:"";position:absolute;left:-31px;top:.62em;width:18px;height:1px;background:var(--accent)}
.doc > h2:first-of-type{margin-top:44px}
.doc h3{font-size:20px}

/* ---------- footer ---------- */
.site-foot{background:var(--bg);padding:0 0 34px}
.foot-rule{height:1px;background:var(--rule)}
.foot-rule i{display:block;height:3px;width:148px;background:var(--accent);position:relative;top:5px}
.foot-in{display:grid;grid-template-columns:repeat(12,1fr);column-gap:28px;row-gap:34px;padding:48px 0 34px}
.foot-brand{grid-column:1 / 7}
.foot-brand p{font-size:15px;line-height:1.8;color:var(--ink-soft);margin:12px 0 0;max-width:36em}
.foot-name{font-family:var(--serif);font-size:32px;line-height:1.2}
.foot-col-a{grid-column:8 / 11}
.foot-col-b{grid-column:11 / 13}
.foot-col-a h2,.foot-col-b h2{font-family:var(--sans);font-size:14px;color:var(--accent2);margin:0 0 14px;font-weight:400;letter-spacing:.04em}
.foot-in ul{margin:0}
.foot-in li{padding-left:0;margin-bottom:8px;font-size:16px;line-height:1.7}
.foot-in li::before{display:none}
.foot-in a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule)}
.foot-in a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.foot-end{border-top:1px solid var(--rule);padding-top:20px}
.foot-end p{font-size:14px;color:var(--ink-soft);margin:0}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .grid,.foot-in{display:block}
  .hero h1,.dim-h,.fig-main,.callout,.detail-text,.fig-detail,.doc,
  .c6,.c7,.c9,.foot-brand,.foot-col-a,.foot-col-b{grid-column:auto}
  .callout{padding-top:26px;margin-top:26px;border-top:1px solid var(--rule)}
  .callout::before{display:none}
  .fig-detail{margin-top:36px;max-width:420px}
  .foot-col-a,.foot-col-b{margin-top:30px}
  .s-a,.s-b,.s-c{padding:52px 0}
  .hero{padding:48px 0 44px}
}
@media (max-width:640px){
  body{font-size:17px;line-height:1.85}
  .wrap{padding:0 20px}
  h1{font-size:32px}
  h2{font-size:25px}
  h3{font-size:19px}
  .lede{font-size:18px}
  .hero h1 .l2{padding-left:0}
  .s-a,.s-b,.s-c{padding:44px 0}
  .foot-name{font-size:26px}
  .head-in{padding:18px 0}
  .site-nav ul{gap:6px 18px}
  .doc{padding-left:20px}
  .doc h2::before{left:-21px;width:12px}
}