:root{
  --bg:#14161a;
  --bg-alt:#1d2026;
  --bg-contrast:#e4e4e1;
  --text:#d8dbdf;
  --muted:#8a9098;
  --ink:#14161a;
  --amber:#e8a33d;
  --teal:#4fb79a;
  --sans:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --serif:Georgia,'Times New Roman',serif;
}

*{box-sizing:border-box}

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

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--serif);
  font-size:18px;
  line-height:1.7;
  overflow-x:hidden;
}

.wrap{
  max-width:1180px;
  margin:0 auto;
  padding-left:32px;
  padding-right:32px;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:24px;
}

p{margin:0 0 20px}
p:last-child{margin-bottom:0}

a{color:var(--amber);text-decoration:none;border-bottom:1px solid rgba(232,163,61,.45)}
a:hover{border-bottom-color:var(--amber)}
a:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-bottom-color:transparent}

h1,h2,h3{font-family:var(--sans);font-weight:800;color:#f0f2f4}

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

.site-head{padding-top:28px}
.site-head .wrap{row-gap:14px}

.brand{
  grid-column:1 / 4;
  font-family:var(--sans);
  font-weight:800;
  font-size:15px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#f0f2f4;
  border-bottom:0;
}
.brand:focus-visible{outline:2px solid var(--amber);outline-offset:4px}

.site-nav{grid-column:4 / 13}
.site-nav ul{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:6px 26px;
  justify-content:flex-end;
}
.site-nav a{
  font-family:var(--sans);
  font-size:13px;
  letter-spacing:.06em;
  color:var(--muted);
  border-bottom:0;
}
.site-nav a:hover{color:var(--text)}
.site-nav a[aria-current="page"]{color:var(--amber)}

.head-rule{
  grid-column:1 / 6;
  height:1px;
  background:var(--amber);
  margin-top:18px;
}

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

.hero{padding-top:56px;padding-bottom:8px}
.hero .wrap{row-gap:0}

.hero h1{
  grid-column:1 / 8;
  margin:0;
  font-size:clamp(34px,5.6vw,64px);
  line-height:.98;
  letter-spacing:-.025em;
}
.hero h1 .l1{display:block;margin-left:16.6666%}
.hero h1 .l2{display:block}

.hero-topics{
  grid-column:9 / 13;
  align-self:end;
  margin:0;
  padding:0;
  list-style:none;
  font-family:var(--sans);
  font-size:13px;
  letter-spacing:.04em;
  color:var(--muted);
}
.hero-topics li{
  padding:9px 0;
  border-top:1px solid #2c3038;
}
.hero-topics li:last-child{border-bottom:1px solid #2c3038}
.hero-topics li span{color:var(--teal);margin-right:10px}

.hero-lede{grid-column:1 / 7;margin-top:44px}
.hero-lede p{color:var(--text)}

.hero-figure{
  grid-column:8 / 13;
  margin:44px 0 0;
  align-self:start;
}
.hero-figure .frame{
  border:1px solid rgba(232,163,61,.55);
  padding:8px;
}
.hero-figure img{display:block;width:100%;height:auto}
.hero-figure figcaption{
  margin-top:12px;
  font-family:var(--sans);
  font-size:12px;
  line-height:1.55;
  color:var(--muted);
}

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

main{display:block}

.sec{padding-top:32px;padding-bottom:32px}
.sec-alt{background:var(--bg-alt);padding-top:56px;padding-bottom:56px;margin-top:32px;margin-bottom:32px}

.col{grid-column:1 / 7}
.shift .col{grid-column:4 / 10}

.rule{
  display:block;
  width:calc((100% - 5 * 24px) * 2 / 6 + 24px);
  max-width:180px;
  height:1px;
  background:var(--amber);
  margin-bottom:22px;
}

.sec h2{
  margin:0 0 18px;
  font-size:clamp(22px,2.5vw,30px);
  line-height:1.14;
  letter-spacing:-.015em;
}
.sec h3{
  margin:32px 0 12px;
  font-size:18px;
  line-height:1.3;
  letter-spacing:.005em;
}

.eyebrow{
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.16em;
  color:var(--teal);
  margin:0 0 10px;
}

ul.list,ol.list{margin:0 0 20px;padding-left:0;list-style:none}
ul.list li,ol.list li{
  position:relative;
  padding-left:24px;
  margin-bottom:10px;
}
ul.list li::before{
  content:"";
  position:absolute;
  left:0;top:13px;
  width:10px;height:1px;
  background:var(--amber);
}
ol.list{counter-reset:step}
ol.list li{counter-increment:step;padding-left:34px}
ol.list li::before{
  content:counter(step,decimal-leading-zero);
  position:absolute;left:0;top:0;
  font-family:var(--sans);
  font-size:12px;
  color:var(--teal);
  letter-spacing:.05em;
}

/* ---------- contrast section ---------- */

.sec-contrast{
  background:var(--bg-contrast);
  color:var(--ink);
  padding-top:64px;
  padding-bottom:64px;
  margin-top:32px;
  margin-bottom:32px;
}
.sec-contrast h2,.sec-contrast h3{color:var(--ink)}
.sec-contrast .eyebrow{color:#2f7d69}
.sec-contrast .rule{background:#b8781f}
.sec-contrast ul.list li::before{background:#b8781f}
.sec-contrast a{color:#8a5511;border-bottom-color:rgba(138,85,17,.5)}
.sec-contrast a:focus-visible{outline-color:#8a5511}

.detail-figure{
  grid-column:1 / 6;
  margin:0;
}
.detail-figure img{display:block;width:100%;height:auto}
.detail-figure figcaption{
  margin-top:12px;
  font-family:var(--sans);
  font-size:12px;
  line-height:1.55;
  color:#5c6067;
}
.detail-text{grid-column:7 / 13}

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

.page-head{padding-top:52px;padding-bottom:8px}
.page-head h1{
  grid-column:1 / 9;
  margin:0;
  font-size:clamp(30px,4.4vw,50px);
  line-height:1.02;
  letter-spacing:-.02em;
}
.page-head .head-line{
  grid-column:1 / 3;
  height:1px;
  background:var(--amber);
  margin-bottom:24px;
}

.doc{padding-top:40px;padding-bottom:24px}
.doc .col{grid-column:1 / 7}
.doc section{margin-bottom:56px}
.doc section:last-child{margin-bottom:0}
.doc h2{
  position:relative;
  padding-left:36px;
  margin:0 0 16px;
  font-size:21px;
  line-height:1.25;
}
.doc h2::before{
  content:"";
  position:absolute;
  left:0;top:.62em;
  width:24px;height:1px;
  background:var(--amber);
}

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

.site-foot{margin-top:64px;padding-bottom:56px}
.site-foot .foot-rule{
  grid-column:1 / 6;
  height:1px;
  background:var(--amber);
  margin-bottom:28px;
}
.foot-a{grid-column:1 / 6}
.foot-b{grid-column:6 / 9}
.foot-c{grid-column:9 / 13}

.foot-name{
  font-family:var(--sans);
  font-weight:800;
  font-size:15px;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin:0 0 12px;
  color:#f0f2f4;
}
.site-foot p{font-size:15px;line-height:1.65;color:var(--muted);margin-bottom:12px}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li{margin-bottom:8px}
.site-foot li a{
  font-family:var(--sans);
  font-size:13px;
  color:var(--muted);
  border-bottom:0;
}
.site-foot li a:hover{color:var(--text)}
.foot-note{font-size:13px;color:#6f757d}

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

@media (max-width:900px){
  .wrap{padding-left:24px;padding-right:24px;column-gap:18px}
  .site-nav{grid-column:1 / 13}
  .site-nav ul{justify-content:flex-start;gap:6px 20px}
  .brand{grid-column:1 / 13}
  .head-rule{grid-column:1 / 9}
  .hero h1{grid-column:1 / 13}
  .hero h1 .l1{margin-left:0}
  .hero-topics{grid-column:1 / 13;margin-top:32px}
  .hero-lede{grid-column:1 / 13}
  .hero-figure{grid-column:1 / 10;margin-top:32px}
  .col,.shift .col,.doc .col{grid-column:1 / 13}
  .page-head h1{grid-column:1 / 13}
  .page-head .head-line{grid-column:1 / 5}
  .detail-figure{grid-column:1 / 9}
  .detail-text{grid-column:1 / 13;margin-top:28px}
  .foot-a,.foot-b,.foot-c{grid-column:1 / 13}
  .foot-b,.foot-c{margin-top:26px}
  .site-foot .foot-rule{grid-column:1 / 9}
}

@media (max-width:620px){
  body{font-size:17px}
  .sec{padding-top:20px;padding-bottom:20px}
  .sec-alt,.sec-contrast{padding-top:40px;padding-bottom:40px;margin-top:20px;margin-bottom:20px}
  .hero{padding-top:36px}
  .hero-figure{grid-column:1 / 13}
  .detail-figure{grid-column:1 / 13}
  .site-foot{margin-top:40px}
  .rule{max-width:120px}
}