:root{
  --bg:#f4f0e8;
  --bg-alt:#e7e1d5;
  --bg-dark:#20242a;
  --ink:#22201b;
  --ink-2:#776f62;
  --ink-inv:#f4f0e8;
  --ink-inv-2:#b3aa9a;
  --accent:#2c4668;
  --accent-2:#a06a2c;
  --hair:#d5cdbd;
  --gap:24px;
  --serif:Georgia,'Times New Roman',serif;
  --sans:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

*,*::before,*::after{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:17px;
  line-height:1.8;
  overflow-x:hidden;
}

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

a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}

a:focus-visible,
button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.s--dark a:focus-visible{outline-color:#c7a878}

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

.wrap{max-width:1160px;margin:0 auto;padding:0 clamp(20px,4vw,40px)}

.grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--gap);
}

/* ---------- masthead ---------- */

.masthead{padding-top:34px}

.nav-row{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:12px 32px;
}

.site-id{
  font-family:var(--serif);
  font-size:16px;
  letter-spacing:.16em;
  color:var(--ink);
  text-decoration:none;
}
.site-id:hover{color:var(--accent)}

.nav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px 30px;
  font-size:13px;
  letter-spacing:.07em;
}

.nav a{
  color:var(--ink);
  text-decoration:none;
  padding-bottom:3px;
  border-bottom:1px solid transparent;
}
.nav a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.nav a[aria-current="page"]{border-bottom-color:var(--accent-2)}

.nav-rule{grid-column:1/span 5;height:1px;background:var(--accent);margin-top:22px}

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

.hero{padding-top:58px;padding-bottom:30px}

.hero h1{
  grid-column:1/span 9;
  display:grid;
  grid-template-columns:repeat(9,minmax(0,1fr));
  column-gap:var(--gap);
  margin:0;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(33px,5.2vw,60px);
  line-height:1.06;
  letter-spacing:-.015em;
}
.hero h1 .l1{grid-column:3/span 7}
.hero h1 .l2{grid-column:1/span 7}

.hero-topics{
  grid-column:10/span 3;
  margin:6px 0 0;
  padding:0;
  list-style:none;
  font-size:13px;
  line-height:1.5;
  color:var(--ink-2);
}
.hero-topics li{border-top:1px solid var(--hair);padding:9px 0}
.hero-topics li:last-child{border-bottom:1px solid var(--hair)}

.hero-lead{grid-column:1/span 6;margin-top:38px;font-size:18px}

/* ---------- main image ---------- */

.media-main{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--gap);
  align-items:end;
  margin:44px 0 0;
}
.media-main .frame{grid-column:8/span 5;border:1px solid var(--accent);padding:8px}
.media-main figcaption{grid-column:2/span 3;font-size:12px;line-height:1.6;color:var(--ink-2)}
.media-main figcaption .tag{
  display:block;
  font-family:var(--serif);
  font-size:13px;
  letter-spacing:.1em;
  color:var(--accent-2);
  margin-bottom:8px;
}

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

.s{padding-block:32px}
.s--tint{background:var(--bg-alt);padding-block:56px}
.s--dark{background:var(--bg-dark);color:var(--ink-inv);padding-block:66px}

.rule{grid-column:1/span 2;height:1px;background:var(--accent-2);margin-bottom:22px}
.shift .rule{grid-column:4/span 2}

.col{grid-column:1/span 6}
.shift .col{grid-column:4/span 6}

h2{
  font-family:var(--serif);
  font-weight:400;
  font-size:26px;
  line-height:1.3;
  margin:0 0 16px;
  letter-spacing:-.005em;
}

h3{
  font-family:var(--serif);
  font-weight:400;
  font-size:18px;
  line-height:1.45;
  margin:30px 0 8px;
}

p{margin:0}
p+p{margin-top:20px}

.cap{font-size:12px;line-height:1.6;color:var(--ink-2)}

.list{margin:20px 0 0;padding-left:20px}
.list li{margin-top:10px}
.list li::marker{color:var(--accent)}

.checks{list-style:none;margin:20px 0 0;padding:0}
.checks li{position:relative;padding-left:24px;margin-top:10px}
.checks li::before{
  content:"";
  position:absolute;
  left:0;
  top:15px;
  width:12px;
  height:1px;
  background:var(--accent);
}

.s--dark h2,
.s--dark h3{color:var(--ink-inv)}
.s--dark .rule{background:var(--accent-2)}
.s--dark .cap{color:var(--ink-inv-2)}
.s--dark a{color:#c7a878}
.s--dark .checks li::before{background:#c7a878}

/* ---------- detail image inside dark section ---------- */

.media-detail{grid-column:1/span 4;margin:0}
.media-detail figcaption{margin-top:12px}
.detail-text{grid-column:7/span 6}

/* ---------- about ---------- */

.page-head{padding-top:54px;padding-bottom:6px}
.page-head h1{
  grid-column:1/span 8;
  margin:0;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(29px,3.9vw,44px);
  line-height:1.15;
  letter-spacing:-.01em;
}
.page-head .standfirst{grid-column:1/span 6;margin-top:26px;color:var(--ink-2)}

.doc{padding-top:34px;padding-bottom:20px}
.doc-col{grid-column:1/span 6}
.block{margin-top:56px}
.block:first-child{margin-top:8px}
.block h2{position:relative;padding-left:38px}
.block h2::before{
  content:"";
  position:absolute;
  left:0;
  top:.72em;
  width:24px;
  height:1px;
  background:var(--accent);
}

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

.footer{margin-top:76px;padding-bottom:58px}
.footer-rule{grid-column:1/span 5;height:1px;background:var(--accent);margin-bottom:28px}

.f-name{grid-column:1/span 5}
.f-name .mark{font-family:var(--serif);font-size:19px;letter-spacing:.14em}
.f-nav{grid-column:6/span 3}
.f-meta{grid-column:9/span 4}

.f-nav ul{list-style:none;margin:0;padding:0;font-size:14px}
.f-nav li{margin-top:6px}
.f-nav li:first-child{margin-top:0}
.f-nav a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--hair);padding-bottom:2px}
.f-nav a:hover{border-bottom-color:var(--accent);color:var(--accent)}

.f-meta .mail{font-size:15px}
.f-meta p{font-size:13px;line-height:1.7;color:var(--ink-2)}
.f-meta p+p{margin-top:12px}

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

@media (max-width:1000px){
  .hero h1{grid-column:1/-1;grid-template-columns:1fr;font-size:clamp(31px,6.4vw,46px)}
  .hero h1 .l1,
  .hero h1 .l2{grid-column:1}
  .hero-topics{grid-column:1/-1;margin-top:30px}
  .hero-lead{grid-column:1/-1}
  .media-main .frame{grid-column:1/span 8}
  .media-main figcaption{grid-column:9/span 4;align-self:start;margin-top:4px}
  .col,
  .shift .col,
  .doc-col,
  .page-head h1,
  .page-head .standfirst{grid-column:1/-1}
  .rule,
  .shift .rule{grid-column:1/span 3}
  .media-detail{grid-column:1/span 6}
  .detail-text{grid-column:1/-1;margin-top:30px}
  .f-name{grid-column:1/span 6}
  .f-nav{grid-column:7/span 6}
  .f-meta{grid-column:1/-1;margin-top:26px}
}

@media (max-width:680px){
  body{font-size:16px;line-height:1.75}
  .masthead{padding-top:26px}
  .nav-row{justify-content:flex-start;gap:10px 22px}
  .nav ul{gap:6px 20px}
  .nav-rule{grid-column:1/-1;margin-top:18px}
  .hero{padding-top:36px;padding-bottom:20px}
  .media-main{margin-top:32px}
  .media-main .frame,
  .media-main figcaption{grid-column:1/-1}
  .media-main figcaption{margin-top:12px}
  .s{padding-block:20px}
  .s--tint{padding-block:36px}
  .s--dark{padding-block:42px}
  .media-detail,
  .f-name,
  .f-nav{grid-column:1/-1}
  .f-nav{margin-top:24px}
  .page-head{padding-top:34px}
  .block{margin-top:44px}
  .footer{margin-top:52px;padding-bottom:42px}
}