:root{
  --bg:#101a24;
  --bg-alt:#16232f;
  --bg-contrast:#e9edf0;
  --text:#e3e9ee;
  --text-dim:#8b9aa6;
  --text-contrast:#101a24;
  --accent:#3fb3ae;
  --accent2:#d8a15a;
  --rule:rgba(227,233,238,.18);
  --rule-dark:rgba(16,26,36,.22);
  --step:72px;
  --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(--text);
  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:none;border-bottom:1px solid rgba(63,179,174,.45)}
a:hover{border-bottom-color:var(--accent)}
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

/* ---------- grid ---------- */
.grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:0 28px;
  max-width:1240px;
  margin:0 auto;
  padding:0 32px;
}
.margin-col{
  grid-column:1 / 4;
  border-right:1px solid var(--rule);
  padding-right:24px;
}
.body-col{grid-column:4 / 10}
.wide-col{grid-column:4 / 12}
.full-col{grid-column:4 / 13}

/* ---------- header ---------- */
.site-head{border-bottom:1px solid var(--rule)}
.site-head .grid{padding-top:26px;padding-bottom:26px;align-items:baseline}
.brand{
  grid-column:1 / 4;
  font-family:var(--serif);
  font-size:21px;
  letter-spacing:.06em;
  line-height:1.3;
  color:var(--text);
  border:0;
}
.brand:hover{color:var(--accent)}
.site-nav{grid-column:4 / 13}
.site-nav ul{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:6px 22px;
}
.site-nav a{
  font-size:15px;letter-spacing:.04em;
  color:var(--text-dim);border-bottom:1px solid transparent;
  padding-bottom:2px;
}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--text);border-bottom-color:var(--accent)}

/* ---------- sections ---------- */
section{padding:var(--step) 0}
.band-alt{background:var(--bg-alt)}
.band-contrast{background:var(--bg-contrast);color:var(--text-contrast)}
.band-contrast .margin-col{border-right-color:var(--rule-dark)}
.band-contrast .initial{color:var(--text-contrast)}
.band-contrast .rule{background:var(--rule-dark)}
.band-contrast .caption,.band-contrast .kicker{color:#4d5c68}
.band-contrast a{color:#12726f;border-bottom-color:rgba(18,114,111,.4)}
.band-contrast blockquote{border-left-color:var(--accent2)}

.initial{
  font-family:var(--serif);
  font-size:64px;
  line-height:1;
  color:var(--text);
  margin:0;
  text-align:right;
}
.kicker{
  font-size:14px;
  line-height:1.6;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent2);
  margin:0 0 10px;
  text-align:right;
}
.caption{
  font-size:14px;
  line-height:1.6;
  color:var(--text-dim);
  margin:12px 0 0;
  text-align:right;
}
.rule{
  height:1px;
  background:var(--rule);
  border:0;
  margin:20px 0 28px;
  width:100%;
}

h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.3;margin:0}
h1{font-size:44px;letter-spacing:.01em}
h2{font-size:31px}
h3{font-size:22px;margin-top:36px}
p{margin:0 0 26px;max-width:34em}
.lead{font-size:20px;color:#cfd9e1}

/* ---------- hero ---------- */
.hero{padding-top:calc(var(--step) - 8px);padding-bottom:var(--step)}
.hero .initial{font-size:96px;line-height:.92}
.hero h1{margin-bottom:22px}
.hero .guides{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:22px 0;margin-bottom:8px}
.hero .guides p:last-child{margin-bottom:0}

/* ---------- main image ---------- */
.figure-row{padding-top:0}
.figure-row figure{grid-column:6 / 13;margin:0}
.figure-row .fig-side{grid-column:1 / 4;border-right:1px solid var(--rule);padding-right:24px}
.figure-row img{width:100%}

/* ---------- lists ---------- */
ul.list,ol.list{
  margin:0 0 28px;
  padding-left:22px;
}
ul.list{list-style:none;padding-left:0}
ul.list li{position:relative;padding-left:26px;margin-bottom:14px;max-width:38em}
ul.list li::before{
  content:"";position:absolute;left:0;top:.82em;
  width:12px;height:1px;background:var(--accent);
}
ol.list li{margin-bottom:14px;max-width:38em;padding-left:6px}
ol.list li::marker{color:var(--accent2);font-family:var(--serif)}
.band-contrast ul.list li::before{background:#12726f}

dl.terms{margin:0 0 26px}
dl.terms dt{font-family:var(--serif);font-size:19px;margin-top:22px;color:var(--text)}
.band-contrast dl.terms dt{color:var(--text-contrast)}
dl.terms dd{margin:6px 0 0;color:#cfd9e1;max-width:36em}
.band-contrast dl.terms dd{color:#3a4854}

blockquote{
  margin:0 0 28px;
  padding:4px 0 4px 22px;
  border-left:2px solid var(--accent2);
  color:var(--text-dim);
  font-family:var(--serif);
  font-size:19px;
  line-height:1.7;
}

/* ---------- detail block in contrast band ---------- */
.detail-grid{align-items:start}
.detail-fig{grid-column:4 / 8;margin:0}
.detail-fig img{width:100%}
.detail-fig figcaption{font-size:14px;line-height:1.6;color:#4d5c68;margin-top:12px;text-align:left}
.detail-text{grid-column:8 / 13}
.detail-text p{max-width:32em}

/* ---------- footer ---------- */
.site-foot{background:var(--bg-alt);border-top:1px solid var(--rule);padding:56px 0 64px}
.site-foot .grid{align-items:start}
.foot-brand{
  grid-column:1 / 5;
  border-left:1px solid var(--accent);
  padding-left:22px;
}
.foot-brand p{margin:0;font-family:var(--serif);font-size:20px;letter-spacing:.05em}
.foot-brand span{display:block;font-family:var(--sans);font-size:14px;color:var(--text-dim);margin-top:8px;letter-spacing:0}
.foot-nav{grid-column:5 / 10}
.foot-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;font-size:15px}
.foot-nav li:not(:last-child)::after{content:"/";color:var(--accent2);margin:0 12px}
.foot-nav a{color:var(--text-dim);border-bottom-color:transparent}
.foot-nav a:hover{color:var(--text);border-bottom-color:var(--accent)}
.foot-mail{grid-column:10 / 13;text-align:right;font-size:15px}
.foot-mail span{display:block;color:var(--text-dim);font-size:14px;margin-bottom:6px}

/* ---------- legal / about pages ---------- */
.page-head{padding-bottom:calc(var(--step) / 2)}
.page-head h1{margin-bottom:18px}
.doc-block{padding-top:0;padding-bottom:calc(var(--step) / 2)}
.doc-block:last-of-type{padding-bottom:var(--step)}
.doc-block h2{margin-bottom:16px}
.updated{font-size:14px;color:var(--text-dim)}

/* ---------- responsive ---------- */
@media (max-width:900px){
  :root{--step:52px}
  .grid{gap:0 20px;padding:0 24px}
  h1{font-size:34px}
  h2{font-size:26px}
  .hero .initial{font-size:64px}
  .initial{font-size:46px}
  .margin-col,.figure-row .fig-side{grid-column:1 / 3;padding-right:16px}
  .body-col,.wide-col,.full-col{grid-column:3 / 13}
  .figure-row figure{grid-column:3 / 13}
  .detail-fig{grid-column:3 / 8}
  .detail-text{grid-column:8 / 13}
  .foot-brand{grid-column:1 / 7}
  .foot-nav{grid-column:7 / 13}
  .foot-mail{grid-column:1 / 13;text-align:left;margin-top:24px}
}

@media (max-width:640px){
  :root{--step:44px}
  body{font-size:17px;line-height:1.8}
  .grid{display:block;padding:0 20px}
  .margin-col,.figure-row .fig-side{border-right:0;border-left:2px solid var(--accent);padding:0 0 0 14px;margin-bottom:18px}
  .band-contrast .margin-col,.band-contrast .fig-side{border-left-color:#12726f}
  .initial,.kicker,.caption{text-align:left}
  .hero .initial{font-size:56px}
  .initial{font-size:40px}
  h1{font-size:29px}
  h2{font-size:23px}
  h3{font-size:20px}
  .figure-row figure,.detail-fig,.detail-text{margin:0}
  .detail-text{margin-top:28px}
  .site-head .grid{padding-top:20px;padding-bottom:20px}
  .brand{display:block;margin-bottom:14px}
  .site-nav ul{gap:4px 18px}
  .foot-mail{text-align:left;margin-top:22px}
  .foot-nav{margin-top:22px}
  .foot-nav li:not(:last-child)::after{margin:0 8px}
}