/* Castellano. Shared stylesheet for all 21 sheets. */
:root{
  --paper:#F6F4EF; --paper-2:#EDEAE3; --ink:#191C18; --ink-2:rgba(25,28,24,.66);
  --line:rgba(25,28,24,.16); --line-2:rgba(25,28,24,.28);
  --accent:#33502F; --accent-soft:rgba(51,80,47,.10);
  --rail:0px; --gut:22px; --sec:88px;
}
@media (min-width:760px){ :root{ --gut:36px; --sec:112px } }
@media (min-width:1280px){ :root{ --rail:208px; --gut:48px; --sec:136px } }

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Newsreader",Georgia,"Times New Roman",serif;
  font-optical-sizing:auto; font-size:17px; line-height:1.62;
  font-variant-ligatures:common-ligatures; text-rendering:optimizeLegibility;
}
@media (min-width:1280px){ body{ padding-left:var(--rail); font-size:18px } }
@media (max-width:899px){ body{ padding-bottom:78px } }
img{ max-width:100%; height:auto; display:block }
h1,h2,h3,h4{ font-weight:400; margin:0; letter-spacing:-.012em; text-wrap:pretty }
p{ margin:0 0 1.05em }
p:last-child{ margin-bottom:0 }
a{ color:var(--ink); text-decoration:none }
a:hover{ color:var(--accent) }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px }
hr{ border:0; border-top:1px solid var(--line); margin:0 }

/* ---------- type roles ---------- */
.an{
  font-family:"Barlow Condensed","Arial Narrow",sans-serif; font-weight:500;
  text-transform:uppercase; letter-spacing:.16em; font-size:11.5px; line-height:1.5;
  color:var(--ink-2); font-variant-numeric:tabular-nums;
}
@media (min-width:760px){ .an{ font-size:12px } }
.an-ink{ color:var(--ink) }
.num{ font-family:"Barlow Condensed","Arial Narrow",sans-serif; font-variant-numeric:tabular-nums; font-weight:400; letter-spacing:.02em }
.display{ font-size:clamp(46px,7.4vw,104px); line-height:.98; letter-spacing:-.028em; font-weight:300 }
.h2{ font-size:clamp(30px,3.4vw,44px); line-height:1.1; letter-spacing:-.02em; font-weight:300 }
.h3{ font-size:clamp(22px,2.1vw,28px); line-height:1.2; font-weight:400 }
.lede{ font-size:clamp(20px,2.2vw,26px); line-height:1.42; font-weight:300; color:var(--ink) }
.quiet{ color:var(--ink-2) }
.prose{ max-width:66ch }
.prose-wide{ max-width:74ch }
.wrap{ max-width:1200px; margin:0 auto; padding:0 var(--gut) }
.sec{ padding:var(--sec) 0 }
.sec-t{ padding-top:var(--sec) }
.sec-b{ padding-bottom:var(--sec) }
.band{ background:var(--paper-2) }
.stack-s > * + *{ margin-top:14px }
.stack-m > * + *{ margin-top:26px }
.stack-l > * + *{ margin-top:48px }

/* ---------- the section opener: a hairline carrying an annotation ---------- */
.opener{ display:flex; align-items:center; gap:18px; margin-bottom:34px }
.opener .an{ flex:0 0 auto; white-space:nowrap }
.opener-line{ flex:1 1 auto; height:1px; background:var(--line); transform-origin:left center }
.opener-mark{ flex:0 0 auto }

/* ---------- header ---------- */
.skip{ position:absolute; left:-9999px }
.skip:focus{ left:8px; top:8px; z-index:200; background:var(--ink); color:var(--paper); padding:10px 14px }
.site-head{ border-bottom:1px solid var(--line); background:var(--paper); position:relative; z-index:50 }
.head-in{ display:flex; align-items:center; gap:20px; min-height:74px; flex-wrap:wrap }
.wordmark{ font-size:23px; letter-spacing:.19em; text-transform:uppercase; font-weight:300; margin-right:auto; white-space:nowrap }
@media (min-width:760px){ .wordmark{ font-size:26px } }
.nav{ display:flex; align-items:center; gap:4px; flex-wrap:wrap }
.navgroup{ position:relative }
.navgroup > summary{ list-style:none; cursor:pointer; padding:9px 12px; display:block }
.navgroup > summary::-webkit-details-marker{ display:none }
.navgroup > summary::after{ content:""; display:inline-block; width:5px; height:5px; margin-left:8px; border-right:1px solid var(--line-2); border-bottom:1px solid var(--line-2); transform:translateY(-2px) rotate(45deg) }
.navgroup[open] > summary{ color:var(--accent) }
.navgroup[open] > summary::after{ border-color:var(--accent) }
.navpanel{ position:absolute; top:100%; left:0; min-width:260px; background:var(--paper); border:1px solid var(--line); padding:10px 0; z-index:60 }
.navpanel a{ display:flex; gap:12px; padding:8px 18px; align-items:baseline }
.navpanel a:hover{ background:var(--accent-soft) }
.navpanel .n{ color:var(--ink-2); font-size:11px }
.navpanel a:hover .n{ color:var(--accent) }
.navlink{ padding:9px 12px; display:block }
.nav a[aria-current="page"], .navgroup summary[aria-current="true"]{ color:var(--accent) }
.head-rule{ border-top:1px solid var(--line); }
.head-meta{ display:flex; gap:22px; padding-top:7px; padding-bottom:7px; flex-wrap:wrap }
@media (max-width:899px){
  .head-in{ min-height:0; padding-top:14px; padding-bottom:6px; gap:10px }
  .nav{ width:100%; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:6px }
  .nav::-webkit-scrollbar{ display:none }
  .navgroup > summary, .navlink{ white-space:nowrap; padding:9px 10px }
  .navpanel{ position:fixed; left:0; right:0; top:auto; min-width:0; border-left:0; border-right:0 }
}

/* ---------- buttons ---------- */
.btn,.btn-line{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:"Barlow Condensed","Arial Narrow",sans-serif; font-weight:500;
  text-transform:uppercase; letter-spacing:.15em; font-size:12.5px;
  padding:13px 22px; border-radius:2px; cursor:pointer; transition:background .18s ease,color .18s ease,border-color .18s ease;
  min-height:44px; border:1px solid var(--ink); background:var(--ink); color:var(--paper);
}
.btn:hover{ background:var(--accent); border-color:var(--accent); color:var(--paper) }
.btn-line{ background:transparent; color:var(--ink); border-color:var(--line-2) }
.btn-line:hover{ border-color:var(--accent); color:var(--accent) }
.btn-sm{ padding:10px 16px; min-height:40px; font-size:11.5px }
.tlink{ border-bottom:1px solid var(--line-2); padding-bottom:2px; transition:border-color .18s ease,color .18s ease }
.tlink:hover{ border-color:var(--accent) }

/* ---------- drawing index rail ---------- */
.index{ display:none }
@media (min-width:1280px){
  .index{
    display:block; position:fixed; inset:0 auto 0 0; width:var(--rail); z-index:80;
    background:var(--paper); border-right:1px solid var(--line);
    padding:26px 16px 26px 22px; overflow-y:auto;
  }
  .index-t{ margin-bottom:16px }
  .index ol{ list-style:none; margin:0; padding:0 }
  .index li{ margin:0 }
  .index a{ display:flex; gap:9px; padding:3.5px 0; font-family:"Barlow Condensed","Arial Narrow",sans-serif; text-transform:uppercase; letter-spacing:.09em; font-size:11.5px; color:var(--ink-2); line-height:1.35 }
  .index a:hover{ color:var(--accent) }
  .index a .n{ font-variant-numeric:tabular-nums; flex:0 0 auto }
  .index a[aria-current="page"]{ color:var(--accent) }
  .index a[aria-current="page"] .n{ position:relative }
  .index a[aria-current="page"] .n::before{ content:""; position:absolute; left:-14px; top:.55em; width:8px; height:1px; background:var(--accent) }
  .index-gap{ height:11px }
  .index-foot{ margin-top:22px; padding-top:14px; border-top:1px solid var(--line) }
}

/* ---------- title block ---------- */
.titleblock{ border-bottom:1px solid var(--line) }
.tb-in{ display:flex; gap:26px 40px; flex-wrap:wrap; padding-top:16px; padding-bottom:16px }
@media (min-width:900px){ .tb-in{ justify-content:flex-end; padding-top:18px; padding-bottom:20px } }
.tb-f{ min-width:96px }
.tb-f .k{ display:block; color:var(--ink-2) }
.tb-f .v{ display:block; color:var(--ink); font-family:"Barlow Condensed","Arial Narrow",sans-serif; text-transform:uppercase; letter-spacing:.12em; font-size:13px; font-variant-numeric:tabular-nums; margin-top:2px }
@media (min-width:900px){ .tb-f{ text-align:right } .tb-first{ margin-right:auto; text-align:left } }

/* ---------- hero ---------- */
.hero{ position:relative; border-bottom:1px solid var(--line) }
.hero-stage{ position:relative; overflow:hidden; background:var(--ink); aspect-ratio:1024/557; max-height:76vh }
.hero-photo{ position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover; object-position:50% 46% }
.hero-veil{ position:absolute; inset:0; z-index:3; background:linear-gradient(180deg,rgba(10,12,10,.42) 0%,rgba(10,12,10,.10) 46%,rgba(10,12,10,.62) 100%) }
.hero-copy{ position:relative; z-index:4; margin-top:-1px }
.hero-copy-in{ padding-top:34px; padding-bottom:var(--sec) }
.hero h1{ color:var(--ink) }
.hero .em{ font-style:italic; font-weight:300 }
.hero-acts{ display:flex; flex-wrap:wrap; gap:12px; align-items:center }
@media (min-width:900px){
  .hero-stage{ aspect-ratio:1024/470 }
  .hero-copy-in{ display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:48px; align-items:end; padding-top:44px }
}

/* svg elevation lines */
.elev path{ fill:none; stroke:currentColor; stroke-width:1; stroke-linecap:square; stroke-linejoin:miter; vector-effect:non-scaling-stroke }
.elev--page{ color:var(--ink) }
.elev--over{ color:#F6F4EF; opacity:.9 }

/* ---------- photographs ---------- */
figure{ margin:0 }
.ph{ position:relative; overflow:hidden; background:var(--paper-2) }
.ph img{ width:100%; height:auto }
.ph-cover{ position:relative; overflow:hidden; background:var(--paper-2) }
.ph-cover img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
figcaption{ padding-top:10px; border-top:1px solid var(--line); margin-top:12px; max-width:52ch }

/* ---------- grids ---------- */
.g2{ display:grid; gap:34px }
.g3{ display:grid; gap:34px }
.g4{ display:grid; gap:34px }
@media (min-width:760px){ .g2{ grid-template-columns:1fr 1fr; gap:44px } .g3{ grid-template-columns:repeat(3,1fr) } .g4{ grid-template-columns:1fr 1fr; gap:44px } }
@media (min-width:1100px){ .g4{ grid-template-columns:repeat(4,1fr) } .split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:64px } }
.split{ display:grid; gap:34px }

/* house cards */
.hcard .an{ display:flex; justify-content:space-between; gap:16px; border-top:1px solid var(--line); padding-top:9px; margin-top:12px }
.hcard .t{ font-size:23px; line-height:1.2; margin-top:6px; display:block }
.hcard:hover .t{ color:var(--accent) }

/* ---------- number band ---------- */
.numbers{ display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line) }
@media (min-width:900px){ .numbers{ grid-template-columns:repeat(4,1fr) } }
.numbers > div{ padding:26px 0 30px; border-bottom:1px solid var(--line) }
@media (min-width:900px){ .numbers > div{ border-bottom:0; border-right:1px solid var(--line); padding:30px 26px 34px } .numbers > div:first-child{ padding-left:0 } .numbers > div:last-child{ border-right:0 } }
@media (max-width:899px){ .numbers > div:nth-child(odd){ border-right:1px solid var(--line); padding-right:18px } .numbers > div:nth-child(even){ padding-left:18px } }
.numbers .big{ font-family:"Barlow Condensed","Arial Narrow",sans-serif; font-weight:400; font-size:clamp(40px,5vw,62px); line-height:1; letter-spacing:.005em; font-variant-numeric:tabular-nums; display:block; margin-bottom:9px }

/* ---------- tables ---------- */
.tw{ overflow-x:auto }
table{ border-collapse:collapse; width:100%; min-width:520px }
th,td{ text-align:left; padding:13px 16px 13px 0; border-bottom:1px solid var(--line); vertical-align:top }
th{ font-family:"Barlow Condensed","Arial Narrow",sans-serif; font-weight:500; text-transform:uppercase; letter-spacing:.16em; font-size:11.5px; color:var(--ink-2); border-bottom-color:var(--line-2) }
td.n, th.n{ font-family:"Barlow Condensed","Arial Narrow",sans-serif; font-variant-numeric:tabular-nums; letter-spacing:.04em; white-space:nowrap; font-size:16px }
tbody tr:nth-child(even){ background:var(--paper-2) }
tbody tr:nth-child(even) td{ box-shadow:none }
table.plain tbody tr:nth-child(even){ background:transparent }
caption{ caption-side:bottom; text-align:left; padding-top:12px; color:var(--ink-2); font-size:15px; max-width:60ch }

/* ---------- FAQ ---------- */
.faq{ border-top:1px solid var(--line) }
.faq details{ border-bottom:1px solid var(--line) }
.faq summary{ list-style:none; cursor:pointer; padding:20px 44px 20px 0; position:relative; font-size:clamp(19px,1.9vw,22px); line-height:1.3 }
.faq summary::-webkit-details-marker{ display:none }
.faq summary:hover{ color:var(--accent) }
.faq summary::after{ content:"+"; position:absolute; right:6px; top:19px; font-family:"Barlow Condensed","Arial Narrow",sans-serif; font-size:22px; line-height:1; color:var(--ink-2) }
.faq details[open] summary::after{ content:"\2013" }
.faq .a{ padding:0 0 24px; max-width:64ch }

/* ---------- build sequence ---------- */
.seq-frames{ display:grid; gap:16px }
@media (min-width:760px){ .seq-frames{ grid-template-columns:repeat(5,1fr) } }
.seq-frame{ position:relative }
.seq-frame img{ width:100%; height:auto; display:block }
.seq-frame .an{ padding-top:8px; border-top:1px solid var(--line); margin-top:9px; display:block }
.seq-readout{ display:none }
html.js .seq{ position:relative; height:420vh }
html.js .seq-sticky{ position:sticky; top:0; height:100vh; display:flex; flex-direction:column; justify-content:center; padding-top:48px; padding-bottom:48px }
html.js .seq-frames{ position:relative; display:block; aspect-ratio:1024/557; height:min(62vh,540px); width:100%; overflow:hidden; background:var(--paper-2) }
html.js .seq-frame{ position:absolute; inset:0 }
html.js .seq-frame img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 0% }
html.js .seq-frame .an{ display:none }
html.js .seq-readout{ display:flex; gap:18px; align-items:baseline; justify-content:space-between; border-top:1px solid var(--line); padding-top:10px; margin-top:12px }
.seq-track{ display:flex; gap:6px; align-items:center }
.seq-tick{ width:26px; height:1px; background:var(--line-2) }
.seq-tick.on{ background:var(--accent); height:2px }

/* ---------- drawing over the photograph ---------- */
.over{ position:relative; overflow:hidden; background:var(--ink) }
.over img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1 }
.over .elev{ position:absolute; inset:0; width:100%; height:100%; z-index:2 }
.over .shade{ position:absolute; inset:0; z-index:3; background:rgba(10,12,10,.30); pointer-events:none }
.over .lbl{ position:absolute; left:0; bottom:0; z-index:4; padding:14px 18px; color:#F6F4EF }
.over .lbl .an{ color:rgba(246,244,239,.82) }

/* ---------- on time chart ---------- */
.chart{ border-top:1px solid var(--line) }
.chart-row{ display:grid; grid-template-columns:1fr; gap:6px; padding:14px 0; border-bottom:1px solid var(--line) }
@media (min-width:760px){ .chart-row{ grid-template-columns:210px minmax(0,1fr); gap:20px; align-items:center } }
.chart-track{ position:relative; height:26px }
.chart-base{ position:absolute; left:0; right:0; top:13px; height:1px; background:var(--line) }
.chart-due{ position:absolute; top:0; bottom:0; width:1px; background:var(--line-2); left:var(--due) }
.chart-bar{ position:absolute; top:12px; height:3px; background:var(--ink); left:var(--x1); width:var(--w) }
.chart-mark{ position:absolute; top:7px; left:var(--a); width:13px; height:13px; margin-left:-6px; background:var(--ink) }
.chart-mark.late{ background:transparent; border:1px solid var(--ink); transform:rotate(45deg) }
.chart-why{ padding:0 0 14px; border-bottom:1px solid var(--line); margin-top:-1px }
@media (min-width:760px){ .chart-why{ padding-left:230px } }
.chart-key{ display:flex; gap:26px; flex-wrap:wrap; padding-top:16px }
.chart-key span{ display:flex; align-items:center; gap:9px }
.key-sq{ width:11px; height:11px; background:var(--ink); flex:0 0 auto }
.key-di{ width:10px; height:10px; border:1px solid var(--ink); transform:rotate(45deg); flex:0 0 auto }
.key-ln{ width:1px; height:15px; background:var(--line-2); flex:0 0 auto }

/* ---------- forms ---------- */
.field{ display:block; margin-bottom:22px }
.field > .an{ display:block; margin-bottom:7px }
input[type=text],input[type=email],input[type=tel],select,textarea{
  width:100%; font-family:"Newsreader",Georgia,serif; font-size:17px; color:var(--ink);
  background:transparent; border:0; border-bottom:1px solid var(--line-2); border-radius:0;
  padding:10px 2px; min-height:46px; transition:border-color .18s ease;
}
select{ font-family:"Barlow Condensed","Arial Narrow",sans-serif; text-transform:uppercase; letter-spacing:.1em; font-size:13.5px; -webkit-appearance:none; appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%); background-position:calc(100% - 13px) 21px,calc(100% - 8px) 21px; background-size:5px 5px,5px 5px; background-repeat:no-repeat }
textarea{ min-height:120px; resize:vertical; line-height:1.55 }
input:hover,select:hover,textarea:hover{ border-bottom-color:var(--ink-2) }
input:focus,select:focus,textarea:focus{ outline:0; border-bottom-color:var(--accent) }
.hp{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.formnote{ color:var(--ink-2); font-size:15.5px; max-width:56ch }
.thanks{ border-top:1px solid var(--accent); padding-top:22px }
.bb{ display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end }
.bb .f{ flex:1 1 220px; min-width:0 }
.bb input{ min-height:44px }

/* ---------- closing band ---------- */
.closing{ border-top:1px solid var(--line); background:var(--paper-2) }
.closing-in{ padding-top:var(--sec); padding-bottom:var(--sec); display:grid; gap:34px }
@media (min-width:1100px){ .closing-in{ grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:64px; align-items:end } }
.closing .acts{ display:flex; gap:14px; flex-wrap:wrap; align-items:center }

/* ---------- footer ---------- */
.site-foot{ border-top:1px solid var(--line); background:var(--paper) }
.foot-top{ display:grid; gap:40px; padding:56px 0 44px }
@media (min-width:900px){ .foot-top{ grid-template-columns:minmax(0,1fr) minmax(0,1.6fr); gap:64px } }
.foot-index{ display:grid; grid-template-columns:1fr 1fr; gap:26px 30px }
@media (min-width:760px){ .foot-index{ grid-template-columns:repeat(4,1fr) } }
.foot-index ul{ list-style:none; margin:8px 0 0; padding:0 }
.foot-index li{ margin:0 }
.foot-index a{ display:flex; gap:9px; padding:3px 0; font-family:"Barlow Condensed","Arial Narrow",sans-serif; text-transform:uppercase; letter-spacing:.09em; font-size:11.5px; color:var(--ink-2); line-height:1.4 }
.foot-index a:hover{ color:var(--accent) }
.foot-index .n{ font-variant-numeric:tabular-nums }
.foot-plate{ width:104px; border:1px solid var(--line) }
.foot-bb{ border-top:1px solid var(--line); padding:26px 0 }
.foot-legal{ border-top:1px solid var(--line); padding:22px 0 40px; display:grid; gap:12px }
@media (min-width:900px){ .foot-legal{ grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:40px } }

/* ---------- sticky phone bar ---------- */
.stickybar{ position:fixed; left:0; right:0; bottom:0; z-index:90; background:var(--paper); border-top:1px solid var(--line); padding:9px var(--gut) calc(9px + env(safe-area-inset-bottom)); display:flex; gap:9px; align-items:center }
@media (min-width:900px){ .stickybar{ display:none } }
.stickybar input{ flex:1 1 auto; min-height:44px; padding:8px 2px; font-size:16px }
.stickybar .btn{ flex:0 0 auto; padding:12px 15px; min-height:44px; font-size:11.5px }

/* ---------- motion ---------- */
html.js [data-rule]{ transform:scaleX(0) }
html.js [data-rule].is-in{ transform:scaleX(1); transition:transform .7s cubic-bezier(.22,.61,.36,1) }
html.js [data-fade]{ opacity:0 }
html.js [data-fade].is-in{ opacity:1; transition:opacity .6s ease .1s }
html.js [data-photo] img, html.js img[data-photo]{ opacity:0; transform:scale(1.04); transform-origin:50% 50% }
html.js [data-photo].is-in img, html.js img[data-photo].is-in{ opacity:1; transform:none; transition:opacity .9s ease,transform .9s cubic-bezier(.22,.61,.36,1) }
html.js .hero-photo{ filter:brightness(.72) contrast(.92) }
html.js .hero.is-done .hero-photo{ filter:none; transition:filter 1.2s ease }
html.js .over .elev path{ transition:stroke-dashoffset 1.4s cubic-bezier(.4,.05,.2,1) }
html.js .over .elev{ transition:opacity .5s linear }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; scroll-behavior:auto !important }
}

/* appended: components used by the sheets */
.bb .f label{ display:block; margin-bottom:7px }
.bb .formnote{ flex:1 1 100%; margin-top:6px }
.stickybar form{ display:flex; gap:9px; align-items:center; flex:1 1 auto; margin:0 }
.stickybar form .f{ flex:1 1 auto; min-width:0 }
.stickybar form label{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0) }
.stickybar .thanks{ padding:6px 0; border-top:0 }
.stickybar .thanks p:first-child{ display:none }
.foot-index .col-t{ display:block; color:var(--ink) }
.mark-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line) }
.mark-list li{ padding:15px 0; border-bottom:1px solid var(--line); display:grid; gap:5px }
@media (min-width:760px){ .mark-list li{ grid-template-columns:190px minmax(0,1fr); gap:30px; align-items:baseline } }
.callout{ border-top:1px solid var(--ink); padding:22px 0 0 }
.steps{ list-style:none; margin:0; padding:0 }
.steps > li{ border-top:1px solid var(--line); padding:28px 0 32px; display:grid; gap:12px }
@media (min-width:900px){ .steps > li{ grid-template-columns:170px minmax(0,1fr); gap:40px } }
.steps > li:last-child{ border-bottom:1px solid var(--line) }
.arith{ display:grid; gap:0; border-top:1px solid var(--line) }
.arith .r{ display:flex; justify-content:space-between; gap:20px; padding:12px 0; border-bottom:1px solid var(--line) }
.arith .r.total{ border-bottom:1px solid var(--ink); border-top:1px solid var(--ink); margin-top:-1px }
.arith .r .v{ font-family:"Barlow Condensed","Arial Narrow",sans-serif; font-variant-numeric:tabular-nums; font-size:17px; letter-spacing:.04em; white-space:nowrap }
.arith .r.total .v, .arith .r.total .k{ font-size:19px }
.two-col{ display:grid; gap:0; border-top:1px solid var(--ink) }
@media (min-width:900px){ .two-col{ grid-template-columns:1fr 1fr; column-gap:56px } }
.two-col .col{ padding:22px 0 6px }
@media (min-width:900px){ .two-col .col + .col{ border-left:1px solid var(--line); padding-left:56px; margin-left:-28px } }

.chart-scale{ display:grid; grid-template-columns:1fr; gap:6px; padding-bottom:12px }
@media (min-width:760px){ .chart-scale{ grid-template-columns:210px minmax(0,1fr); gap:20px; align-items:end } }
.chart-ticks{ position:relative; height:20px }
.chart-ticks span{ position:absolute; bottom:0; transform:translateX(-50%); white-space:nowrap }
.chart-ticks .contract{ color:var(--ink) }
.chart-row .who{ display:grid; gap:1px }

/* sibling photographs that share a baseline get one fixed box */
.hcard figure, .even-ph{ position:relative; aspect-ratio:3/2; overflow:hidden; background:var(--paper-2) }
.hcard figure img, .even-ph img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }

/* drawn elevations on the style sheets */
.elevbox{ border:1px solid var(--line); background:var(--paper); padding:26px 22px 20px }
@media (min-width:760px){ .elevbox{ padding:40px 40px 26px } }
.elevbox .elev{ display:block; width:100%; height:auto; aspect-ratio:1000/480 }
.elevbox .cap{ display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; border-top:1px solid var(--line); margin-top:20px; padding-top:11px }
html.js .elevbox .elev path{ transition:stroke-dashoffset 1.4s cubic-bezier(.4,.05,.2,1) }

/* house sheets: full bleed hero, fact table, plate */
.hero-flat{ border-bottom:1px solid var(--line); background:var(--ink) }
.hero-flat img{ display:block; width:100%; height:auto }
.facts{ display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line) }
@media (min-width:760px){ .facts{ grid-template-columns:repeat(3,1fr) } }
@media (min-width:1100px){ .facts{ grid-template-columns:repeat(4,1fr) } }
.facts > div{ padding:18px 22px 22px 0; border-bottom:1px solid var(--line) }
.facts .v{ display:block; margin-top:5px; font-family:"Barlow Condensed","Arial Narrow",sans-serif; font-weight:400; letter-spacing:.04em; font-variant-numeric:tabular-nums; font-size:clamp(21px,2.3vw,28px); line-height:1.15 }
.over{ aspect-ratio:1024/430 }
@media (max-width:759px){ .over{ aspect-ratio:5/4 } }
.plate{ display:grid; gap:30px; align-items:center }
@media (min-width:900px){ .plate{ grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:56px } }
.plate img{ width:100%; border:1px solid var(--line) }

/* captions: annotation label, prose underneath */
figcaption .an{ display:block; margin-bottom:6px }
figcaption .cap-t{ display:block; color:var(--ink-2); font-size:16px; line-height:1.52; max-width:54ch }
.lead .an{ display:block; margin-bottom:5px }