:root{
  --bg:#1e1a20;
  --bg-alt:#272229;
  --bg-contrast:#e9e6e1;
  --ink:#e9e6e1;
  --ink-dim:#9c949c;
  --ink-contrast:#1e1a20;
  --brass:#c9a24b;
  --silver:#a9b2bd;
  --serif:Georgia,'Times New Roman',serif;
  --sans:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,'SFMono-Regular',Menlo,Consolas,'Courier New',monospace;
  --gap:88px;
}

*{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(--brass);text-decoration:none;border-bottom:1px solid rgba(201,162,75,.45)}
a:hover{border-bottom-color:var(--brass)}
a:focus-visible,button:focus-visible{outline:2px solid var(--brass);outline-offset:3px}

h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.3;margin:0}

p{margin:0 0 1.5em}
p:last-child{margin-bottom:0}

/* ---------- grid shell ---------- */
.shell{
  max-width:1240px;
  margin:0 auto;
  padding:0 32px;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:24px;
}

/* ---------- header / nav ---------- */
.masthead{border-bottom:1px solid rgba(169,178,189,.22)}
.masthead .shell{align-items:center;padding-top:22px;padding-bottom:22px;row-gap:14px}

.brand{
  grid-column:1 / 4;
  font-family:var(--serif);
  font-size:22px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink);
  border:0;
}
.brand span{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.28em;color:var(--silver);text-transform:uppercase;margin-top:4px}

.mainnav{grid-column:5 / 13;display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:flex-end}
.mainnav a{
  border:0;
  color:var(--ink-dim);
  font-size:14px;
  letter-spacing:.09em;
  text-transform:uppercase;
  padding-bottom:3px;
  border-bottom:1px solid transparent;
}
.mainnav a:hover,.mainnav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--brass)}

/* ---------- perforation strip ---------- */
.perf{
  height:22px;
  background-image:repeating-linear-gradient(to right,
    rgba(169,178,189,.30) 0 10px, transparent 10px 26px);
  background-size:26px 8px;
  background-repeat:repeat-x;
  background-position:left center;
  margin:0;
  border:0;
}
.perf--light{
  background-image:repeating-linear-gradient(to right,
    rgba(30,26,32,.28) 0 10px, transparent 10px 26px);
}

/* ---------- hero ---------- */
.hero{padding:var(--gap) 0 calc(var(--gap) - 16px)}
.hero .shell{row-gap:40px}

.filmstrip{
  grid-column:1 / 3;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-content:start;
  gap:14px 12px;
  border-left:1px solid rgba(169,178,189,.28);
  padding-left:16px;
}
.filmstrip div{display:flex;align-items:center;gap:8px}
.filmstrip i{width:9px;height:9px;background:var(--brass);opacity:.75;display:block;font-style:normal}
.filmstrip b{font-family:var(--mono);font-weight:400;font-size:12px;letter-spacing:.16em;color:var(--silver)}

.hero-text{grid-column:3 / 12}
.hero-kicker{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--brass);
  margin:0 0 26px;
}
.hero h1{font-size:clamp(30px,4.1vw,52px);max-width:16ch;margin-bottom:32px}
.hero h1 em{display:block;font-style:normal;color:var(--silver)}
.hero-lede{grid-column:6 / 12;font-size:19px;color:#d6d1cd}

.hero-frame{
  grid-column:6 / 13;
  max-width:620px;
  justify-self:end;
  border:2px solid rgba(201,162,75,.55);
  padding:10px;
  position:relative;
}
.hero-frame img{aspect-ratio:16/9;object-fit:cover;width:100%}
.hero-frame figcaption{
  font-size:14px;
  color:var(--ink-dim);
  text-align:right;
  margin-top:10px;
  line-height:1.5;
}

/* ---------- scenes ---------- */
.scene{padding:var(--gap) 0}
.scene--alt{background:var(--bg-alt)}
.scene .shell{row-gap:0}

.scene-no{
  grid-column:1 / 3;
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:.24em;
  color:var(--brass);
  padding-top:6px;
}
.scene-no::after{
  content:"";
  display:block;
  width:44px;
  height:1px;
  background:rgba(201,162,75,.6);
  margin-top:12px;
}

.scene-body{grid-column:3 / 12}
.scene-body > h2{font-size:clamp(24px,2.6vw,32px);margin-bottom:28px;max-width:22ch}
.scene-body > h3{font-size:21px;margin:38px 0 14px;color:#ded9d4}
.scene-body p{max-width:none}
.scene-narrow{grid-column:3 / 10}

.subhead{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--silver);
  margin:0 0 20px;
}

/* ---------- lists ---------- */
.checklist{
  grid-column:3 / 12;
  list-style:none;
  padding:0;
  margin:34px 0 0;
  columns:2;
  column-gap:44px;
}
.checklist li{
  break-inside:avoid;
  padding-left:24px;
  position:relative;
  margin-bottom:18px;
  font-size:17px;
  line-height:1.75;
}
.checklist li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:8px;height:8px;
  background:var(--brass);
}
.checklist li b{font-weight:600;color:#fff}

.steplist{
  list-style:none;
  counter-reset:s;
  padding:0;
  margin:32px 0 0;
}
.steplist li{
  counter-increment:s;
  padding-left:52px;
  position:relative;
  margin-bottom:22px;
  border-top:1px solid rgba(169,178,189,.18);
  padding-top:16px;
}
.steplist li::before{
  content:counter(s,decimal-leading-zero);
  position:absolute;
  left:0;top:16px;
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:.1em;
  color:var(--silver);
}
.steplist strong{display:block;font-family:var(--serif);font-size:19px;color:#fff;margin-bottom:4px;font-weight:400}

/* ---------- contrast scene ---------- */
.scene--light{background:var(--bg-contrast);color:var(--ink-contrast)}
.scene--light h2,.scene--light h3{color:var(--ink-contrast)}
.scene--light .scene-no{color:#8a6a1f}
.scene--light .scene-no::after{background:rgba(30,26,32,.35)}
.scene--light .subhead{color:#5f5a60}
.scene--light a{color:#8a6a1f;border-bottom-color:rgba(138,106,31,.45)}
.scene--light .checklist li::before{background:#8a6a1f}
.scene--light .checklist li b{color:var(--ink-contrast)}
.scene--light .steplist li{border-top-color:rgba(30,26,32,.18)}
.scene--light .steplist strong{color:var(--ink-contrast)}
.scene--light .steplist li::before{color:#5f5a60}

.detail-figure{
  grid-column:3 / 7;
  margin:0;
  border:2px solid rgba(30,26,32,.5);
  padding:9px;
}
.detail-figure img{aspect-ratio:4/5;object-fit:cover;width:100%}
.detail-figure figcaption{font-size:14px;line-height:1.55;color:#5f5a60;margin-top:10px}
.detail-text{grid-column:8 / 13}
.detail-text h2{font-size:clamp(23px,2.4vw,30px);margin-bottom:24px}

/* ---------- terms / definition rows ---------- */
.rows{grid-column:3 / 12;margin:30px 0 0;padding:0}
.rows > div{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:8px 32px;
  border-top:1px solid rgba(169,178,189,.2);
  padding:18px 0;
}
.rows dt{font-family:var(--serif);font-size:18px;color:#fff}
.rows dd{margin:0;color:#cec8c4;font-size:17px;line-height:1.8}
.scene--light .rows > div{border-top-color:rgba(30,26,32,.18)}
.scene--light .rows dt{color:var(--ink-contrast)}
.scene--light .rows dd{color:#413c43}

/* ---------- about numbered blocks ---------- */
.chapter{padding:56px 0 0}
.chapter .shell{row-gap:0}
.chapter + .chapter .shell::before{
  content:"";
  grid-column:1 / 13;
  height:1px;
  background:rgba(169,178,189,.2);
  margin-bottom:56px;
}
.chapter-no{
  grid-column:1 / 3;
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:.24em;
  color:var(--silver);
  padding-top:8px;
}
.chapter-body{grid-column:3 / 10}
.chapter-body h2{font-size:clamp(22px,2.3vw,28px);margin-bottom:20px}

/* ---------- page head ---------- */
.pagehead{padding:calc(var(--gap) - 16px) 0 40px}
.pagehead .shell{row-gap:24px}
.pagehead .hero-kicker{grid-column:1 / 13;margin-bottom:0}
.pagehead h1{grid-column:1 / 10;font-size:clamp(28px,3.6vw,44px);max-width:18ch}
.pagehead p{grid-column:3 / 11;color:#d6d1cd}

/* ---------- legal text ---------- */
.legal{padding:0 0 var(--gap)}
.legal .shell{row-gap:0}
.legal section{grid-column:3 / 11;padding-top:44px}
.legal section h2{font-size:23px;margin-bottom:16px}
.legal section h2::before{
  content:attr(data-no);
  display:block;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.24em;
  color:var(--brass);
  margin-bottom:10px;
}
.legal ul{padding-left:20px;margin:0 0 1.4em}
.legal li{margin-bottom:10px}
.legal li::marker{color:var(--brass)}

/* ---------- contact block ---------- */
.contact-card{
  grid-column:3 / 10;
  margin-top:30px;
  border-left:2px solid var(--brass);
  padding:4px 0 4px 24px;
}
.contact-card p{margin-bottom:.6em}
.contact-card .who{font-family:var(--serif);font-size:20px}

/* ---------- footer ---------- */
.sitefoot{background:var(--bg-contrast);color:var(--ink-contrast);margin-top:0}
.sitefoot .perf{margin-bottom:44px}
.sitefoot .shell{padding-top:0;padding-bottom:48px;row-gap:36px}
.foot-left{grid-column:1 / 7}
.foot-left .fname{font-family:var(--serif);font-size:22px;letter-spacing:.14em;text-transform:uppercase;margin:0 0 12px}
.foot-left p{font-size:16px;color:#4b464c;max-width:44ch}
.foot-right{grid-column:8 / 13}
.foot-right h2{font-family:var(--mono);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:#5f5a60;margin:0 0 16px;font-weight:400}
.foot-nav{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:8px}
.foot-nav a{color:var(--ink-contrast);border-bottom:1px solid rgba(30,26,32,.25);font-size:16px}
.foot-nav a:hover{border-bottom-color:#8a6a1f;color:#8a6a1f}
.foot-mail{font-size:16px;color:#4b464c}
.foot-mail a{color:#8a6a1f;border-bottom-color:rgba(138,106,31,.45)}
.foot-bottom{grid-column:1 / 13;border-top:1px solid rgba(30,26,32,.18);padding-top:20px;font-size:14px;color:#5f5a60}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .hero-frame{grid-column:4 / 13;justify-self:stretch}
  .hero-text{grid-column:3 / 13}
  .hero-lede{grid-column:3 / 13}
  .scene-body,.scene-narrow,.checklist,.rows,.chapter-body,.legal section,.contact-card{grid-column:3 / 13}
  .detail-figure{grid-column:1 / 6}
  .detail-text{grid-column:6 / 13}
  .pagehead h1,.pagehead p{grid-column:1 / 13}
  .foot-left{grid-column:1 / 7}
  .foot-right{grid-column:7 / 13}
}

@media (max-width:720px){
  :root{--gap:52px}
  body{font-size:17px;line-height:1.85}
  .shell{padding:0 20px;column-gap:16px}
  .masthead .shell{padding-top:18px;padding-bottom:18px}
  .brand{grid-column:1 / 13;font-size:19px}
  .mainnav{grid-column:1 / 13;justify-content:flex-start;gap:6px 20px}
  .mainnav a{font-size:13px}

  .filmstrip{
    grid-column:1 / 13;
    grid-template-columns:repeat(3,auto);
    justify-content:start;
    border-left:0;
    border-top:1px solid rgba(169,178,189,.28);
    padding:16px 0 0;
    gap:10px 22px;
  }
  .hero-text,.hero-lede,.hero-frame{grid-column:1 / 13}
  .hero-frame{max-width:none;padding:7px}
  .hero-frame figcaption{text-align:left}
  .hero h1{max-width:none}

  .scene-no,.chapter-no{grid-column:1 / 13;padding-top:0;margin-bottom:18px}
  .scene-no::after{margin-top:8px}
  .scene-body,.scene-narrow,.checklist,.rows,.chapter-body,.legal section,.contact-card,
  .detail-figure,.detail-text,.pagehead h1,.pagehead p,.pagehead .hero-kicker{grid-column:1 / 13}
  .checklist{columns:1;margin-top:26px}
  .detail-text{margin-top:34px}
  .rows > div{grid-template-columns:1fr;padding:16px 0}
  .chapter + .chapter .shell::before{margin-bottom:40px}
  .steplist li{padding-left:0}
  .steplist li::before{position:static;display:block;margin-bottom:6px}

  .foot-left,.foot-right,.foot-bottom{grid-column:1 / 13}
}