:root{
  --bg:#f0eef4;
  --bg-alt:#e2dfea;
  --dark:#241f2e;
  --ink:#1d1a24;
  --ink-soft:#6a6577;
  --accent:#5a4c8c;
  --ochre:#a3762a;
  --rule:rgba(29,26,36,.16);
  --rule-dark:rgba(240,238,244,.22);
  --serif:Georgia,'Times New Roman',serif;
  --sans:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --step:72px;
}

*{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{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- grid ---------- */
.grid{
  max-width:1200px;
  margin:0 auto;
  padding-left:28px;
  padding-right:28px;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:28px;
}

.margin{
  grid-column:1 / 4;
  border-right:1px solid var(--rule);
  padding-right:20px;
  text-align:right;
  font-size:14px;
  line-height:1.6;
  color:var(--ink-soft);
}

.mark{
  display:block;
  font-family:var(--serif);
  font-size:24px;
  letter-spacing:.06em;
  color:var(--ochre);
  line-height:1.2;
}

.col{grid-column:4 / 10}
.col-wide{grid-column:4 / 12}

/* ---------- header ---------- */
.site-head{padding-top:26px;padding-bottom:26px;border-bottom:1px solid var(--rule)}
.site-head .grid{row-gap:12px}

.brand{
  grid-column:1 / 4;
  font-family:var(--serif);
  font-size:21px;
  line-height:1.3;
  letter-spacing:.02em;
  color:var(--ink);
  text-decoration:none;
  align-self:center;
}
.brand:hover{color:var(--accent)}

.site-nav{grid-column:4 / 13;align-self:center}
.site-nav ul{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:6px 22px;
  font-size:15px;
}
.site-nav a{color:var(--ink);text-decoration:none;padding-bottom:2px;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(--ochre)}

/* ---------- hero ---------- */
.hero{padding-top:var(--step);padding-bottom:var(--step)}
.hero .rule-line{grid-column:4 / 10;height:1px;background:var(--rule)}

.hero-title{
  grid-column:4 / 11;
  position:relative;
  margin:0 0 36px;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(28px,3.5vw,44px);
  line-height:1.3;
  letter-spacing:.005em;
}
.initial{
  position:absolute;
  right:100%;
  margin-right:28px;
  top:-.06em;
  font-size:2.6em;
  line-height:1;
  color:var(--ochre);
}
.hero-side{
  grid-column:1 / 4;
  grid-row:1 / span 3;
  border-right:1px solid var(--accent);
}
.hero-lede{
  grid-column:4 / 10;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  padding:26px 0;
  margin:0;
  color:var(--ink);
}

/* ---------- sections ---------- */
.band{padding-top:var(--step);padding-bottom:var(--step)}
.band-alt{background:var(--bg-alt)}
.band-dark{background:var(--dark);color:var(--bg)}

h2{
  margin:0 0 26px;
  padding-bottom:16px;
  border-bottom:1px solid var(--rule);
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(23px,2.3vw,30px);
  line-height:1.3;
}
h2.plain{border-bottom:0;padding-bottom:0;margin-bottom:18px}
.mark--letter{font-size:44px;line-height:1}

h3{
  margin:36px 0 10px;
  font-family:var(--serif);
  font-weight:400;
  font-size:20px;
  line-height:1.3;
}
p{margin:0 0 26px}
p:last-child{margin-bottom:0}

.list{
  grid-column:4 / 12;
  margin:0 0 26px;
  padding:0;
  list-style:none;
}
.list li{
  position:relative;
  padding-left:26px;
  margin-bottom:14px;
  line-height:1.75;
}
.list li::before{
  content:"";
  position:absolute;
  left:0;top:.85em;
  width:12px;height:1px;
  background:var(--accent);
}
.list--check li::before{background:var(--ochre)}
.list li:last-child{margin-bottom:0}

.note{color:var(--ink-soft);font-size:16px}

/* ---------- figures ---------- */
.figure{grid-column:6 / 13;margin:0}
.figure img{width:100%}
.fig-caption{
  grid-column:1 / 4;
  border-right:1px solid var(--rule);
  padding-right:20px;
  text-align:right;
  font-size:14px;
  line-height:1.7;
  color:var(--ink-soft);
}
.fig-caption .mark{margin-bottom:8px}

/* dark section */
.band-dark .margin,
.band-dark .fig-caption{border-right-color:var(--rule-dark);color:#b9b3c6}
.band-dark h2{border-bottom-color:var(--rule-dark);color:var(--bg)}
.band-dark a{color:#c3b6f0}
.band-dark a:focus-visible{outline-color:#c3b6f0}
.band-dark .list li::before{background:#c3b6f0}

.figure-detail{grid-column:3 / 7;margin:0}
.figure-detail img{width:100%}
.figure-detail figcaption{
  margin-top:14px;
  font-size:14px;
  line-height:1.7;
  color:#b9b3c6;
}
.detail-text{grid-column:8 / 13}

/* ---------- footer ---------- */
.site-foot{
  background:var(--bg-alt);
  border-top:1px solid var(--rule);
  padding-top:44px;
  padding-bottom:44px;
  margin-top:0;
}
.foot-inner{
  grid-column:1 / 13;
  border-left:1px solid var(--accent);
  padding-left:24px;
  display:flex;
  flex-wrap:wrap;
  gap:16px 40px;
  align-items:baseline;
  justify-content:space-between;
}
.foot-name{font-family:var(--serif);font-size:20px;line-height:1.3}
.foot-nav ul{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;font-size:15px}
.foot-nav li{margin:0}
.foot-nav li + li::before{content:"/";color:var(--ochre);margin:0 12px;text-decoration:none}
.foot-nav a{color:var(--ink);text-decoration:none;border-bottom:1px solid transparent}
.foot-nav a:hover{border-bottom-color:var(--accent);color:var(--accent)}
.foot-mail{font-size:15px}
.foot-note{
  grid-column:1 / 13;
  margin-top:26px;
  padding-left:24px;
  font-size:14px;
  color:var(--ink-soft);
}

/* ---------- legal / about pages ---------- */
.page-head{padding-top:var(--step);padding-bottom:36px}
.page-title{
  grid-column:4 / 11;
  position:relative;
  margin:0;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(26px,3vw,38px);
  line-height:1.3;
}
.page-head .rule-line{grid-column:4 / 10;height:1px;background:var(--rule);margin-top:30px}

.text-block{padding-bottom:var(--step)}
.text-block + .text-block{padding-top:0}

/* ---------- responsive ---------- */
@media (max-width:900px){
  :root{--step:44px}
  body{font-size:17px;line-height:1.85}
  .grid{
    grid-template-columns:1fr;
    column-gap:0;
    padding-left:20px;
    padding-right:20px;
  }
  .brand,.site-nav,.col,.col-wide,.list,.figure,.figure-detail,.detail-text,
  .hero-title,.hero-lede,.hero .rule-line,.page-title,.page-head .rule-line,
  .foot-inner,.foot-note{grid-column:1 / -1}
  .hero-side{display:none}
  .margin,.fig-caption{
    grid-column:1 / -1;
    border-right:0;
    border-left:1px solid var(--rule);
    padding-right:0;
    padding-left:16px;
    text-align:left;
    margin-bottom:18px;
  }
  .fig-caption{margin-top:0;margin-bottom:18px}
  .initial{
    position:static;
    display:inline;
    margin-right:0;
    font-size:1em;
    color:inherit;
  }
  .foot-inner{
    display:block;
    padding-left:16px;
  }
  .foot-mail{margin-top:14px}
  .foot-note{padding-left:16px}
  .site-head .grid{row-gap:14px}
}

@media (max-width:900px) and (min-width:0px){
  .figure-detail figcaption{margin-bottom:26px}
}