/* Tezeldi — mirror-axis */

:root{
  --paper:#fcfbf9;
  --paper-alt:#efeeea;
  --ink:#141414;
  --muted:#6a6a66;
  --accent:#c22a22;
  --accent-2:#3c5a4a;
  --maxw:1160px;
  --gut:28px;
}

*,*::before,*::after{box-sizing:border-box;}

html{-webkit-text-size-adjust:100%;}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:18px;
  line-height:1.9;
  overflow-x:hidden;
}

h1,h2,h3{
  font-family:Georgia,'Times New Roman',serif;
  font-weight:400;
  line-height:1.3;
  margin:0;
  letter-spacing:.005em;
}

h1{font-size:clamp(1.9rem,4.2vw,3rem);}
h2{font-size:clamp(1.45rem,2.6vw,2rem);}
h3{font-size:clamp(1.12rem,1.7vw,1.32rem);}

p{margin:0 0 1.55em;}
p:last-child{margin-bottom:0;}

a{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(194,42,34,.4);}
a:hover{border-bottom-color:var(--accent);}

a:focus-visible,
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

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

/* ---------- grid ---------- */

.wrap{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding-left:var(--gut);
  padding-right:var(--gut);
}

.grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:24px;
}

.axis{position:relative;}
.axis::before{
  content:"";
  position:absolute;
  top:0;bottom:0;left:50%;
  width:1px;
  background:rgba(60,90,74,.35);
  transform:translateX(-.5px);
}

/* ---------- header ---------- */

.site-head{
  border-bottom:1px solid rgba(20,20,20,.12);
  background:var(--paper);
}
.site-head .wrap{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:10px 26px;
  padding-top:22px;
  padding-bottom:22px;
  text-align:center;
}
.brand{
  font-family:Georgia,'Times New Roman',serif;
  font-size:1.32rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink);
  border-bottom:0;
  flex-basis:100%;
}
.site-nav ul{
  list-style:none;
  margin:0;padding:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px 0;
}
.site-nav li + li::before{
  content:"/";
  color:var(--accent-2);
  margin:0 14px;
}
.site-nav a{
  font-size:.92rem;
  letter-spacing:.06em;
  color:var(--ink);
  border-bottom:1px solid transparent;
}
.site-nav a:hover,
.site-nav a[aria-current="page"]{border-bottom-color:var(--accent);}

/* ---------- hero ---------- */

.hero{padding:72px 0 0;}
.hero-inner{position:relative;text-align:center;}
.hero-inner::before{
  content:"";
  position:absolute;
  top:-72px;bottom:0;left:50%;
  width:1px;
  background:linear-gradient(180deg,rgba(194,42,34,0),rgba(194,42,34,.75) 22%,rgba(194,42,34,.75) 78%,rgba(194,42,34,0));
  transform:translateX(-.5px);
}
.eyebrow{
  position:relative;
  font-size:.78rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--accent-2);
  margin:0 0 26px;
  background:var(--paper);
  display:inline-block;
  padding:0 16px;
}
.hero h1{
  position:relative;
  max-width:19ch;
  margin:0 auto 30px;
  background:var(--paper);
  padding:0 14px;
}
.hero-lead{
  position:relative;
  grid-column:4 / span 6;
  color:var(--ink);
  background:var(--paper);
  padding:0 12px;
}
.hero-grid{margin-top:8px;}
.hero-side{
  margin-top:56px;
  font-size:.94rem;
  line-height:1.75;
  color:var(--muted);
  text-align:left;
}
.hero-side h2{
  font-size:1rem;
  font-family:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink);
  margin-bottom:12px;
}
.hero-side--l{grid-column:1 / span 3;}
.hero-side--r{grid-column:10 / span 3;}

.hero-figure{
  margin:64px auto 0;
  max-width:680px;
  position:relative;
}
.hero-figure img{width:100%;}
figcaption{
  font-size:14px;
  line-height:1.6;
  color:var(--muted);
  margin-top:14px;
  text-align:center;
}

/* ---------- sections ---------- */

.band{padding:64px 0;}
.band--alt{background:var(--paper-alt);padding:80px 0;}
.band--wide{padding:96px 0;}
.band--dark{
  background:var(--ink);
  color:var(--paper);
  padding:96px 0;
}
.band--dark h2,.band--dark h3{color:var(--paper);}
.band--dark p{color:#d9d8d3;}
.band--dark figcaption{color:#9b9a95;}
.band--dark a{color:#e79a94;border-bottom-color:rgba(231,154,148,.5);}

.sep{
  width:33.33%;
  min-width:180px;
  max-width:340px;
  height:26px;
  margin:0 auto 44px;
  border-top:1px solid var(--accent-2);
  border-radius:180px 180px 0 0;
}
.band--dark .sep{border-top-color:#6f8d7d;}

.sec-head{text-align:center;margin-bottom:40px;}
.sec-num{
  display:block;
  font-size:.78rem;
  letter-spacing:.24em;
  color:var(--accent-2);
  margin-bottom:14px;
}
.band--dark .sec-num{color:#7fa392;}
.sec-head h2{max-width:22ch;margin:0 auto;}

/* symmetric pair */
.pair{row-gap:44px;}
.pair > *:nth-child(odd){grid-column:2 / span 4;}
.pair > *:nth-child(even){grid-column:8 / span 4;}
.pair h3{margin-bottom:12px;}
.pair p{font-size:.98rem;line-height:1.8;}

/* narrative — deliberately asymmetric */
.narrative{grid-column:1 / span 7;}
.narrative h2{margin-bottom:24px;}
.narrative + .narrative{margin-top:56px;}

/* centered prose */
.prose{grid-column:4 / span 6;}
.prose h3{margin:36px 0 12px;}

/* lists */
.checklist{
  list-style:none;
  margin:0;padding:0;
}
.checklist li{
  position:relative;
  padding-left:26px;
  margin-bottom:14px;
  font-size:.99rem;
  line-height:1.75;
}
.checklist li::before{
  content:"";
  position:absolute;
  left:0;top:.72em;
  width:9px;height:1px;
  background:var(--accent);
}
.steps{
  margin:0;padding:0;
  list-style:none;
  counter-reset:st;
}
.steps li{
  counter-increment:st;
  position:relative;
  padding-left:44px;
  margin-bottom:20px;
  font-size:.99rem;
  line-height:1.78;
}
.steps li::before{
  content:counter(st,decimal-leading-zero);
  position:absolute;left:0;top:.1em;
  font-family:Georgia,'Times New Roman',serif;
  font-size:.9rem;
  color:var(--accent-2);
  letter-spacing:.08em;
}

/* detail figure inside dark band */
.detail-grid{align-items:start;row-gap:40px;}
.detail-fig{grid-column:1 / span 5;margin:0;}
.detail-fig img{width:100%;}
.detail-fig figcaption{text-align:left;}
.detail-text{grid-column:7 / span 6;}
.detail-text h3{margin:30px 0 12px;}

/* ---------- page header (inner pages) ---------- */

.page-head{
  padding:72px 0 0;
  text-align:center;
  position:relative;
}
.page-head::before{
  content:"";
  position:absolute;
  top:0;height:52px;left:50%;
  width:1px;background:var(--accent);
  transform:translateX(-.5px);
}
.page-head h1{max-width:20ch;margin:26px auto 22px;}
.page-head .standfirst{
  max-width:56ch;
  margin:0 auto;
  color:var(--muted);
  font-size:1.02rem;
}

/* about key pair */
.keypair{margin-top:52px;row-gap:36px;}
.keypair > *:nth-child(odd){grid-column:2 / span 4;}
.keypair > *:nth-child(even){grid-column:8 / span 4;}
.keypair h3{
  font-family:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:.86rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent-2);
  margin-bottom:10px;
}
.keypair p{font-size:.98rem;line-height:1.8;}

/* contact block */
.contact-block{
  grid-column:4 / span 6;
  text-align:center;
  margin-top:8px;
}
.contact-block .mail{
  font-family:Georgia,'Times New Roman',serif;
  font-size:1.24rem;
  word-break:break-word;
}

/* ---------- footer ---------- */

.site-foot{
  background:var(--paper);
  padding:72px 0 56px;
  text-align:center;
  border-top:1px solid rgba(20,20,20,.1);
  margin-top:0;
}
.site-foot .sep{margin-bottom:34px;}
.foot-brand{
  font-family:Georgia,'Times New Roman',serif;
  font-size:1.24rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  margin:0 0 22px;
}
.foot-nav ul{
  list-style:none;margin:0 0 24px;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;gap:6px 0;
}
.foot-nav li + li::before{
  content:"/";color:var(--accent-2);margin:0 13px;
}
.foot-nav a{font-size:.9rem;color:var(--ink);border-bottom:1px solid transparent;}
.foot-nav a:hover{border-bottom-color:var(--accent);}
.foot-mail{margin:0 0 12px;font-size:1rem;}
.foot-note{
  margin:0 auto;
  max-width:52ch;
  font-size:14px;
  line-height:1.7;
  color:var(--muted);
}

/* ---------- responsive ---------- */

@media (max-width:900px){
  body{font-size:17px;line-height:1.85;}
  .grid{column-gap:18px;}
  .hero{padding-top:52px;}
  .hero-lead,.prose,.contact-block{grid-column:1 / span 12;}
  .narrative{grid-column:1 / span 12;}
  .pair > *:nth-child(odd),
  .pair > *:nth-child(even),
  .keypair > *:nth-child(odd),
  .keypair > *:nth-child(even){grid-column:1 / span 12;}
  .hero-side--l,.hero-side--r{grid-column:1 / span 12;margin-top:34px;}
  .hero-inner::before,.axis::before{display:none;}
  .detail-fig,.detail-text{grid-column:1 / span 12;}
  .detail-fig{max-width:460px;}
  .band{padding:48px 0;}
  .band--alt,.band--wide,.band--dark{padding:56px 0;}
  .hero-figure{margin-top:44px;}
  .page-head{padding-top:52px;}
}

@media (max-width:560px){
  :root{--gut:20px;}
  body{font-size:16.5px;}
  .site-nav li + li::before{margin:0 9px;}
  .foot-nav li + li::before{margin:0 9px;}
  .band,.band--alt,.band--wide,.band--dark{padding:40px 0;}
  .sep{min-width:140px;margin-bottom:32px;}
}