/* Brudapo — frame-scene */

:root{
  --bg:#f6f1e7;
  --bg-alt:#ece4d6;
  --bg-dark:#1a2340;
  --ink:#12182b;
  --ink-soft:#6b6858;
  --ink-light:#f6f1e7;
  --gold:#e2a93b;
  --rust:#b4472f;
  --serif:Georgia,'Times New Roman',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --mono:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,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(--serif);
  font-size:18px;
  line-height:1.65;
  overflow-x:hidden;
}

.wrap{
  max-width:1180px;
  margin:0 auto;
  padding:0 24px;
}

.grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:24px;
}

/* --- perforation strip --- */
.perf{
  height:14px;
  display:flex;
  gap:10px;
  align-items:center;
  overflow:hidden;
}
.perf span{
  flex:0 0 10px;
  height:10px;
  background:var(--rust);
  opacity:.55;
}
.perf--light span{background:var(--gold);opacity:.7}

/* --- header --- */
.site-head{
  border-bottom:1px solid rgba(18,24,43,.18);
}
.site-head .wrap{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:12px 28px;
  padding-top:22px;
  padding-bottom:18px;
}
.brand{
  font-family:var(--serif);
  font-size:23px;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--ink);
}
.brand span{color:var(--rust)}
.site-nav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:6px 22px;
}
.site-nav a{
  font-family:var(--sans);
  font-size:12.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink);
  text-decoration:none;
  border-bottom:2px solid transparent;
  padding-bottom:2px;
}
.site-nav a:hover,
.site-nav a[aria-current="page"]{border-bottom-color:var(--gold)}

a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}
a:hover{color:var(--rust)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* --- hero --- */
.hero{padding:64px 0 0}
.hero .grid{align-items:start}

.filmstrip{
  grid-column:1 / span 2;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px 14px;
  align-content:start;
  border-right:1px solid rgba(18,24,43,.16);
  padding-right:18px;
}
.filmstrip div{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.12em;
  color:var(--ink-soft);
  display:flex;
  align-items:center;
  gap:7px;
}
.filmstrip div::before{
  content:"";
  width:9px;height:9px;
  background:var(--gold);
  flex:0 0 9px;
}

.hero-text{grid-column:3 / span 8}
h1{
  font-size:clamp(34px,5.2vw,60px);
  line-height:1.08;
  margin:0 0 26px;
  font-weight:normal;
  letter-spacing:-.01em;
}
h1 em{
  display:block;
  font-style:italic;
  color:var(--rust);
}
.hero-text p{margin:0 0 20px;max-width:38em}
.hero-lede{font-size:20px}

.hero-figure{
  grid-column:6 / span 7;
  margin:44px 0 0;
  align-self:end;
}
.hero-figure img,
figure img{
  display:block;
  width:100%;
  height:auto;
  border:2px solid var(--ink);
  background:var(--bg-alt);
}
.hero-figure{max-width:620px;justify-self:end}
figcaption{
  font-family:var(--sans);
  font-size:12px;
  line-height:1.5;
  color:var(--ink-soft);
  margin-top:9px;
  text-align:right;
}

/* --- sections --- */
.scene{padding:var(--gap) 0}
.scene--alt{background:var(--bg-alt)}
.scene--dark{background:var(--bg-dark);color:var(--ink-light)}
.scene--dark h2,.scene--dark h3{color:var(--ink-light)}
.scene--dark a{color:var(--gold);text-decoration-color:var(--gold)}
.scene--dark a:hover{color:#fff}
.scene--dark figcaption{color:#b9b7ab}
.scene--dark li::marker{color:var(--gold)}

.scene-no{
  grid-column:1 / span 2;
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:.18em;
  color:var(--rust);
}
.scene-no::after{
  content:"";
  display:block;
  height:1px;
  background:var(--rust);
  opacity:.5;
  margin-top:10px;
}
.scene--dark .scene-no{color:var(--gold)}
.scene--dark .scene-no::after{background:var(--gold)}

.scene-body{grid-column:3 / span 7}
.scene-body--wide{grid-column:3 / span 9}

h2{
  font-size:clamp(25px,3vw,33px);
  line-height:1.22;
  font-weight:normal;
  margin:0 0 22px;
  letter-spacing:-.005em;
}
h3{
  font-style:italic;
  font-size:21px;
  font-weight:normal;
  margin:34px 0 12px;
}
p{margin:0 0 20px}
.scene-body p:last-child,.scene-body ul:last-child,.scene-body ol:last-child{margin-bottom:0}

.lead-note{
  font-family:var(--sans);
  font-size:13px;
  line-height:1.6;
  color:var(--ink-soft);
  border-left:2px solid var(--gold);
  padding-left:14px;
  margin:26px 0 0;
  max-width:34em;
}

ul,ol{margin:0 0 20px;padding-left:1.15em}
li{margin:0 0 9px}
li::marker{color:var(--gold)}

.cols2{
  columns:2;
  column-gap:34px;
}
.cols2 li{break-inside:avoid}

.mini-title{
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin:0 0 12px;
}

/* dark section with detail image */
.detail-grid{align-items:center;row-gap:40px}
.detail-figure{grid-column:3 / span 4;margin:0}
.detail-figure img{border-color:var(--gold)}
.detail-figure figcaption{text-align:left}
.detail-copy{grid-column:8 / span 5}

/* about numbered blocks */
.about-block{padding:34px 0;border-top:1px solid rgba(18,24,43,.16)}
.about-block:first-of-type{border-top:none;padding-top:0}
.about-block .scene-no{align-self:start}

/* definition-ish rows */
.rows{margin:0}
.rows dt{
  font-style:italic;
  font-size:19px;
  margin-top:22px;
}
.rows dd{
  margin:6px 0 0;
  color:var(--ink);
}
.rows dt:first-child{margin-top:0}

/* --- footer --- */
.site-foot{background:var(--bg-dark);color:var(--ink-light);margin-top:0}
.site-foot .perf{padding-top:0}
.foot-inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:34px;
  padding:52px 0 46px;
}
.foot-inner h2{font-size:21px;margin:0 0 12px}
.foot-inner p{font-size:15px;color:#cfcabb;max-width:32em}
.site-foot a{color:var(--gold)}
.foot-nav ul{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;gap:8px 20px}
.foot-nav a{font-family:var(--sans);font-size:12.5px;letter-spacing:.09em;text-transform:uppercase}
.foot-mail{font-size:16px}
.foot-note{
  font-family:var(--sans);
  font-size:12px;
  color:#a9a496;
  padding-bottom:38px;
}

/* --- responsive --- */
@media (max-width:900px){
  :root{--gap:52px}
  body{font-size:17px}
  .grid{column-gap:16px}
  .filmstrip{
    grid-column:1 / -1;
    grid-template-columns:repeat(3,auto);
    justify-content:start;
    gap:8px 20px;
    border-right:none;
    border-bottom:1px solid rgba(18,24,43,.16);
    padding:0 0 16px;
    margin-bottom:26px;
  }
  .hero{padding-top:36px}
  .hero-text,.scene-body,.scene-body--wide,.detail-copy{grid-column:1 / -1}
  .hero-figure{grid-column:1 / -1;max-width:none;margin-top:32px}
  .scene-no{grid-column:1 / -1;margin-bottom:16px}
  .detail-figure{grid-column:1 / -1;max-width:420px}
  figcaption{text-align:left}
  .cols2{columns:1}
  .foot-inner{grid-template-columns:1fr;padding:38px 0 32px}
  .site-head .wrap{padding-top:16px;padding-bottom:14px}
}
@media (max-width:520px){
  .site-nav ul{gap:6px 14px}
  .brand{font-size:20px}
}