/* ============================================================
   Fonts, self-hosted.
   Not loaded from Google: a third-party font request leaks every
   visitor's IP to another company, which is a poor look on a page
   that promises to look after their email address. Also faster,
   and it still works on networks that block Google.
   ============================================================ */

@font-face{font-family:"Archivo";src:url("../fonts/archivo-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("../fonts/archivo-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("../fonts/archivo-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("../fonts/archivo-latin-800-normal.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}

@font-face{font-family:"Newsreader";src:url("../fonts/newsreader-latin-300-normal.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url("../fonts/newsreader-latin-300-italic.woff2") format("woff2");font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:"Newsreader";src:url("../fonts/newsreader-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

@font-face{font-family:"IBM Plex Mono";src:url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}

/* ============================================================
   Keep the Monroe
   Palette taken off the building itself: precast concrete panel,
   1970s smoked glazing, and the orange of a demolition notice —
   which is used exactly three times on this page and nowhere else.
   ============================================================ */

:root{
  --paper:#EDEBE6;
  --paper-2:#E4E1DA;
  --concrete:#C9C6BE;
  --concrete-deep:#8E8B83;
  --ink:#16191A;
  --ink-2:#414A4E;
  --glass:#2C363C;
  --glass-2:#3B474E;
  --signal:#E24A17;

  --f-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-body:"Newsreader",Georgia,"Times New Roman",serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  --wrap:1180px;
  --gut:clamp(20px,5vw,64px);
  --spine:64px;

  --band-y:clamp(72px,10vw,132px);
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:clamp(17px,1.05vw,19px);
  font-weight:300;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

img,svg{max-width:100%;display:block}
a{color:inherit}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ink);color:var(--paper);padding:12px 18px;
  font-family:var(--f-mono);font-size:13px;text-decoration:none;
}
.skip:focus{left:0}

:focus-visible{outline:2px solid var(--signal);outline-offset:3px}

.wrap{
  width:100%;max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gut);
}

/* ---------- type scale ---------- */

.display{
  font-family:var(--f-display);
  font-weight:800;
  font-size:clamp(2.6rem,6.4vw,5.1rem);
  line-height:0.97;
  letter-spacing:-0.035em;
  margin:0 0 1.1rem;
}
.display em{
  font-style:normal;
  color:var(--concrete-deep);
}

.h2{
  font-family:var(--f-display);
  font-weight:700;
  font-size:clamp(1.7rem,3.2vw,2.7rem);
  line-height:1.08;
  letter-spacing:-0.025em;
  margin:0 0 1.6rem;
  max-width:22ch;
}
.h2--tight{max-width:none;margin-bottom:1.1rem}

.h3{
  font-family:var(--f-display);
  font-weight:600;
  font-size:1.06rem;
  line-height:1.28;
  letter-spacing:-0.008em;
  margin:0 0 .5rem;
}

.eyebrow{
  font-family:var(--f-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--concrete-deep);
  margin:0 0 1.3rem;
  display:flex;align-items:center;gap:.55em;
}
.eyebrow--alert{color:var(--signal)}
.dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--signal);
  flex:none;
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.dot{animation:none}}

.lede{
  font-size:1.14em;
  line-height:1.58;
  max-width:46ch;
  margin:0 0 2rem;
  color:var(--ink-2);
}

/* ---------- buttons ---------- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--f-mono);
  font-size:12px;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;
  padding:14px 24px;
  background:var(--ink);color:var(--paper);
  border:1px solid var(--ink);
  border-radius:0;
  text-decoration:none;cursor:pointer;
  transition:background .18s ease,color .18s ease,transform .18s ease;
}
.btn:hover{background:var(--signal);border-color:var(--signal);color:#fff}
.btn:active{transform:translateY(1px)}
.btn--sm{padding:9px 16px;font-size:11px}
.btn--lg{padding:17px 32px;font-size:13px}
.btn--full{width:100%}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--concrete-deep)}
.btn--ghost:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn[disabled]{opacity:.45;pointer-events:none}

/* ---------- the spine: the signature element ----------
   A drawn section of the tower, 29 storeys, fixed to the left edge.
   It fills as you scroll: you are descending the building. */

.spine{
  position:fixed;
  left:22px;top:0;
  height:100vh;
  width:var(--spine);
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  z-index:40;
  pointer-events:none;
}
.spine__label{
  font-family:var(--f-mono);
  font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--concrete-deep);
}
.spine__stack{
  display:flex;flex-direction:column;
  gap:3px;
  width:22px;
}
.floor{
  height:9px;
  background:var(--concrete);
  opacity:.42;
  transition:opacity .35s ease,background .35s ease;
}
.floor--mech{background:var(--concrete-deep)}
.floor.is-on{opacity:1}
.floor--mech.is-on{background:var(--signal)}
@media (prefers-reduced-motion:reduce){.floor{transition:none}}

@media (min-width:1320px){
  .spine{display:flex}
}

/* mobile / tablet: the same idea, laid flat across the top */
.topbar{
  position:fixed;top:0;left:0;right:0;height:3px;
  background:rgba(142,139,131,.22);
  z-index:60;
}
.topbar span{
  display:block;height:100%;width:0;
  background:var(--signal);
  transition:width .1s linear;
}
@media (min-width:1320px){.topbar{display:none}}

/* ---------- masthead ---------- */

.masthead{
  position:sticky;top:0;z-index:50;
  background:rgba(237,235,230,.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(142,139,131,.3);
}
.masthead__inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;
  padding-block:13px;
}
.wordmark{
  display:flex;align-items:center;gap:11px;
  text-decoration:none;
}
.wordmark__rule{
  width:3px;height:19px;
  background:var(--signal);
  flex:none;
}
.wordmark__text{
  font-family:var(--f-display);
  font-weight:800;
  font-size:15px;
  letter-spacing:-0.02em;
}

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

.hero{padding-block:clamp(52px,8vw,104px) clamp(60px,8vw,110px)}
.hero__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(40px,5vw,72px);
  align-items:center;
}
@media (min-width:900px){
  .hero__grid{grid-template-columns:1.35fr .65fr}
}

.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:2.4rem}

.hero__count{
  display:flex;align-items:baseline;gap:.6em;
  margin:0;
  padding-top:1.4rem;
  border-top:1px solid rgba(142,139,131,.4);
}
.count{
  font-family:var(--f-display);
  font-weight:800;
  font-size:1.9rem;
  letter-spacing:-0.03em;
  font-variant-numeric:tabular-nums;
}
.count__label{
  font-family:var(--f-mono);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--concrete-deep);
}

.hero__elev{margin:0}
.hero__elev svg{
  width:100%;height:auto;
  max-width:290px;
  margin-inline:auto;
  filter:drop-shadow(0 20px 34px rgba(22,25,26,.14));
}
.hero__elev figcaption{
  font-family:var(--f-mono);
  font-size:10px;
  letter-spacing:.06em;
  color:var(--concrete-deep);
  text-align:center;
  margin-top:16px;
  line-height:1.9;
}
.tick{
  display:inline-block;width:14px;height:3px;
  vertical-align:middle;margin:0 5px 0 12px;
}
.tick--mech{background:var(--signal)}
.tick--ghost{border-top:2px dashed var(--signal)}

/* ---------- bands ---------- */

.band{padding-block:var(--band-y)}
.band--dark{background:var(--glass);color:var(--paper)}
.band--dark .eyebrow{color:var(--concrete)}
.band--objection{background:var(--paper-2);border-block:1px solid rgba(142,139,131,.35)}
.band--ask{background:var(--concrete)}
.band--archive{background:var(--glass);color:var(--paper)}

/* ---------- status timeline ---------- */

.status__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  border-top:1px solid rgba(201,198,190,.28);
}
@media (min-width:760px){
  .status__grid{grid-template-columns:repeat(4,1fr)}
}
.status__item{
  padding:26px 22px 30px 0;
  border-bottom:1px solid rgba(201,198,190,.28);
}
@media (min-width:760px){
  .status__item{
    border-bottom:none;
    border-right:1px solid rgba(201,198,190,.28);
    padding:26px 22px 8px;
  }
  .status__item:first-child{padding-left:0}
  .status__item:last-child{border-right:none}
}
.status__item p{margin:0;font-size:.95em;line-height:1.55;color:rgba(237,235,230,.78)}
.status__date{
  font-family:var(--f-mono);
  font-size:11px !important;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--concrete) !important;
  margin-bottom:.7rem !important;
}
.status__item--now .status__date{color:var(--signal) !important}
.status__item--now p strong{color:var(--paper);font-weight:400}

/* ---------- the case ---------- */

.case__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:2px;
  background:rgba(142,139,131,.3);
  border:1px solid rgba(142,139,131,.3);
  margin-top:2.6rem;
}
@media (min-width:720px){.case__grid{grid-template-columns:1fr 1fr}}

.case__item{
  background:var(--paper);
  padding:clamp(26px,3.2vw,40px);
}
.case__fig{
  font-family:var(--f-display);
  font-weight:800;
  font-size:clamp(2rem,3.4vw,2.9rem);
  letter-spacing:-0.04em;
  line-height:1;
  color:var(--signal);
  margin:0 0 1rem;
  font-variant-numeric:tabular-nums;
}
.case__item p:last-child{
  margin:0;
  font-size:.96em;
  color:var(--ink-2);
}

/* ---------- objection ---------- */

.objection{max-width:none}
.objection .h2{
  font-size:clamp(2.1rem,5vw,3.4rem);
  color:var(--concrete-deep);
}
.objection__body{
  columns:1;
  max-width:70ch;
}
@media (min-width:900px){
  .objection__body{columns:2;column-gap:56px}
}
.objection__body p{margin:0 0 1.25em;break-inside:avoid}
.objection__body p:last-child{margin-bottom:0}
.objection__body strong{font-weight:400;box-shadow:inset 0 -0.5em 0 rgba(226,74,23,.16)}

/* ---------- quotes ---------- */

.quotes{
  display:grid;grid-template-columns:1fr;
  gap:2px;
  margin-bottom:2.8rem;
}
@media (min-width:820px){.quotes{grid-template-columns:1fr 1fr}}

.quote{
  margin:0;
  padding:34px 32px;
  background:var(--glass-2);
  display:flex;flex-direction:column;justify-content:space-between;
  gap:26px;
}
.quote blockquote{margin:0}
.quote blockquote p{
  margin:0;
  font-family:var(--f-body);
  font-size:clamp(1.25rem,2.3vw,1.7rem);
  line-height:1.3;
  font-weight:300;
  font-style:italic;
  letter-spacing:-0.01em;
}
.quote blockquote p::before{content:"\201C"}
.quote blockquote p::after{content:"\201D"}
.quote figcaption{display:flex;flex-direction:column;gap:5px}
.quote__who{
  font-family:var(--f-mono);
  font-size:12px;font-weight:500;
  letter-spacing:.08em;
  color:var(--paper);
}
.quote__role{
  font-family:var(--f-mono);
  font-size:10.5px;
  line-height:1.6;
  letter-spacing:.03em;
  color:rgba(201,198,190,.66);
}

.record__note{
  max-width:60ch;
  font-size:.95em;
  color:rgba(237,235,230,.72);
  margin:0;
  padding-top:1.8rem;
  border-top:1px solid rgba(201,198,190,.24);
}
.record__note a{color:var(--signal);text-underline-offset:3px}

/* ---------- the building ---------- */

.building{
  display:grid;grid-template-columns:1fr;
  gap:clamp(36px,4.5vw,68px);
  align-items:start;
}
@media (min-width:880px){.building{grid-template-columns:1.1fr .9fr}}
.building__text p{max-width:48ch;color:var(--ink-2)}

.spec{margin:0;border-top:1px solid rgba(142,139,131,.45)}
.spec__row{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:20px;
  padding:12px 0;
  border-bottom:1px solid rgba(142,139,131,.28);
}
.spec dt{
  font-family:var(--f-mono);
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--concrete-deep);
  flex:none;
}
.spec dd{
  margin:0;
  font-family:var(--f-display);
  font-weight:500;
  font-size:.94rem;
  text-align:right;
}
.spec__note{color:var(--concrete-deep);font-weight:500}
.spec__row--alert dd{color:var(--signal);font-weight:600}

/* ---------- the ask ---------- */

.ask__intro{max-width:56ch;margin:0 0 2.6rem;color:var(--ink-2)}

.ask__list{
  list-style:none;
  counter-reset:ask;
  margin:0 0 2.6rem;padding:0;
  display:grid;grid-template-columns:1fr;
  gap:0;
  border-top:1px solid rgba(22,25,26,.22);
}
@media (min-width:820px){.ask__list{grid-template-columns:1fr 1fr}}

.ask__list li{
  counter-increment:ask;
  position:relative;
  padding:24px 24px 26px 52px;
  border-bottom:1px solid rgba(22,25,26,.22);
}
@media (min-width:820px){
  .ask__list li:nth-child(odd){border-right:1px solid rgba(22,25,26,.22);padding-left:0}
  .ask__list li:nth-child(odd){padding-left:52px}
}
.ask__list li::before{
  content:counter(ask,decimal-leading-zero);
  position:absolute;left:0;top:26px;
  font-family:var(--f-mono);
  font-size:11px;font-weight:500;
  letter-spacing:.1em;
  color:var(--signal);
}
.ask__list p{margin:0;font-size:.94em;color:#2E3335;max-width:44ch}

.ask__addressed{
  font-family:var(--f-mono);
  font-size:11px;line-height:2;
  letter-spacing:.06em;
  color:#4A5154;
  max-width:60ch;
  margin:0;
}

/* ---------- sign ---------- */

.form{display:flex;flex-direction:column;gap:18px}
.field{display:flex;flex-direction:column;gap:7px}
.field label{
  font-family:var(--f-mono);
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--concrete);
}
.opt{color:rgba(201,198,190,.5);letter-spacing:.08em}

.field input,
.field textarea{
  font-family:var(--f-body);
  font-size:1rem;
  font-weight:300;
  color:var(--paper);
  background:rgba(237,235,230,.06);
  border:1px solid rgba(201,198,190,.3);
  border-radius:0;
  padding:13px 14px;
  width:100%;
  transition:border-color .18s ease,background .18s ease;
}
.field textarea{resize:vertical;min-height:88px;line-height:1.5}
.field input::placeholder,
.field textarea::placeholder{color:rgba(201,198,190,.4)}
.field input:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--signal);
  background:rgba(237,235,230,.1);
}
.field input.is-bad,
.field textarea.is-bad{border-color:var(--signal);background:rgba(226,74,23,.09)}

.check{
  display:flex;align-items:flex-start;gap:11px;
  font-size:.9em;
  color:rgba(237,235,230,.78);
  cursor:pointer;
  line-height:1.45;
}
.check input{
  width:16px;height:16px;flex:none;margin-top:3px;
  accent-color:var(--signal);
}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.form__msg{
  margin:0;
  font-family:var(--f-mono);
  font-size:12px;line-height:1.6;
  letter-spacing:.03em;
  min-height:1.2em;
}
.form__msg.is-ok{color:#8FD4A8}
.form__msg.is-bad{color:var(--signal)}

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

.foot{
  background:var(--ink);
  color:rgba(237,235,230,.62);
  padding-block:clamp(52px,6vw,76px) 34px;
  font-size:.88rem;
}
.foot__grid{
  display:grid;grid-template-columns:1fr;
  gap:36px;
  padding-bottom:36px;
}
@media (min-width:760px){.foot__grid{grid-template-columns:1.5fr 1fr 1fr;gap:44px}}

.foot__mark{color:var(--paper);margin:0 0 12px;font-size:15px}
.foot__blurb{margin:0;max-width:40ch;line-height:1.6}
.foot__head{
  font-family:var(--f-mono);
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--concrete-deep);
  margin:0 0 12px;
}
.foot__head--sp{margin-top:26px}
.foot__list{list-style:none;margin:0;padding:0;line-height:1.9}
.foot__list a{
  text-decoration:none;
  border-bottom:1px solid rgba(142,139,131,.35);
  transition:color .16s ease,border-color .16s ease;
}
.foot__list a:hover{color:var(--paper);border-color:var(--signal)}

.foot__legal{
  margin:0;
  padding-top:26px;
  border-top:1px solid rgba(142,139,131,.24);
  font-family:var(--f-mono);
  font-size:10.5px;
  line-height:1.9;
  letter-spacing:.04em;
  color:rgba(142,139,131,.85);
}
.foot__sep{padding-inline:8px;color:rgba(142,139,131,.5)}

/* ---------- scroll reveal ---------- */

.reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1);
}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
}

/* ============================================================
   Fixes from screenshot review
   ============================================================ */

/* Anchor targets were landing underneath the sticky masthead, which
   clipped the eyebrow of whichever section you jumped to. */
[id]{scroll-margin-top:78px}

/* The primary call to action sat near-black on the dark band — the most
   important button on the page was the hardest one to see. Invert it. */
.band--archive .btn{
  background:var(--paper);
  color:var(--ink);
  border-color:var(--paper);
}
.band--archive .btn:hover{
  background:var(--signal);
  border-color:var(--signal);
  color:#fff;
}

/* Two columns constrained to 70ch total gave each column a ~35 character
   measure and left half the row empty. Widen the container instead. */
@media (min-width:900px){
  .objection__body{max-width:880px}
}

/* The elevation is the thesis of the page; give it room on small screens
   rather than letting it shrink into a thumbnail. */
@media (max-width:899px){
  .hero__elev svg{max-width:230px}
  .hero__elev{margin-top:8px}
}

/* Wide viewports: keep the fixed spine clear of the text column. */
@media (min-width:1320px) and (max-width:1460px){
  .wrap{padding-left:max(var(--gut),96px)}
}

/* Legend items were wrapping mid-pair, orphaning a swatch at the end of a
   line. Each item is now its own row. */
.hero__elev figcaption{line-height:1.6}
.key{display:block;margin-top:5px}
.key .tick{margin:0 7px 0 0}

/* Let paragraphs split across the two columns so they balance, instead of
   stacking two in the left and one in the right. */
.objection__body p{break-inside:auto}

/* ---------- confirmation after signing ---------- */

.done{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:14px;
  padding:34px 32px 36px;
  background:rgba(201,198,190,.07);
  border-left:2px solid var(--signal);
}
.done__tick{width:38px;height:38px;color:var(--signal);margin-bottom:2px}
.done__head{
  font-family:var(--f-display);
  font-weight:700;
  font-size:1.45rem;
  letter-spacing:-0.02em;
  line-height:1.15;
  margin:0;
  color:var(--paper);
}
.done__body{
  margin:0;
  font-size:.98em;
  line-height:1.6;
  color:rgba(237,235,230,.78);
  max-width:44ch;
}
.done__acts{margin-top:10px}

/* ---------- print ----------
   Scroll-revealed sections are transparent until they enter the viewport,
   which would print as blank pages. Someone taking this to a hearing needs
   it to come out of the printer intact. */

@media print{
  .reveal{opacity:1 !important;transform:none !important}
  .spine,.topbar,.masthead,.hero__cta,.done__acts{display:none !important}
  .form{display:none !important}
  body{background:#fff;color:#000;font-size:11pt}
  .band,.band--dark,.band--archive,.band--ask,.band--objection{
    background:#fff !important;color:#000 !important;
    padding-block:18pt;break-inside:avoid;
  }
  .quote{background:#fff !important;border:1pt solid #999}
  .quote__who,.quote__role,.status__item p,.status__date,
  .arch__intro p,.record__note,.done__body{color:#000 !important}
  .case__grid,.ask__list{border-color:#999}
  .case__item{background:#fff}
  a{color:#000;text-decoration:underline}
  .foot{background:#fff;color:#000;padding-block:12pt}
  .foot__list a{border:none}
  .hero__elev svg{max-width:180px}
  h1,h2,h3{break-after:avoid}
}

/* ============================================================
   The archive
   Entries are set as catalogue records: monospace accession line,
   serif body. The form sits above them so the page reads as an
   invitation first and a collection second.
   ============================================================ */

/* Intro and form sit side by side on wide screens so the section does not
   leave half the row empty; they stack under 980px. */
.arch__top{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(36px,4vw,64px);
  align-items:start;
  padding-bottom:clamp(40px,5vw,60px);
  margin-bottom:clamp(38px,4.5vw,58px);
  border-bottom:1px solid rgba(201,198,190,.22);
}
@media (min-width:980px){
  .arch__top{grid-template-columns:1fr 1fr}
}
.arch__head{max-width:56ch}
.arch__intro p{color:rgba(237,235,230,.78);margin:0 0 1.1em}
.arch__contract{
  padding:18px 20px;
  background:rgba(201,198,190,.09);
  border-left:2px solid var(--signal);
  font-size:.95em;
}
.arch__contract strong{color:var(--paper);font-weight:400}

.arch__form{max-width:560px}

.field__count{
  margin:6px 0 0;
  font-family:var(--f-mono);
  font-size:10.5px;
  letter-spacing:.1em;
  color:rgba(201,198,190,.45);
  text-align:right;
}
.field__count.is-near{color:var(--signal)}

.form__fine{
  margin:0;
  font-size:.86em;
  line-height:1.6;
  color:rgba(237,235,230,.55);
}

/* ---------- entries ---------- */

.entries__empty{
  max-width:52ch;
  color:rgba(237,235,230,.65);
  font-size:1.02em;
  padding:8px 0 20px;
}

.entries__head{
  display:flex;align-items:baseline;gap:14px;
  margin:0 0 6px;
  padding-bottom:14px;
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--concrete);
  border-bottom:1px solid rgba(201,198,190,.3);
}
.entries__note{color:rgba(201,198,190,.45)}

.entry{
  padding:26px 0 28px;
  border-bottom:1px solid rgba(201,198,190,.16);
  max-width:74ch;
}
.entry__meta{
  display:flex;flex-wrap:wrap;align-items:baseline;
  gap:6px 16px;
  margin-bottom:12px;
}
.entry__no{
  font-family:var(--f-mono);
  font-size:10.5px;
  letter-spacing:.12em;
  color:var(--signal);
  flex:none;
}
.entry__name{
  font-family:var(--f-display);
  font-weight:600;
  font-size:.98rem;
  letter-spacing:-0.01em;
  color:var(--paper);
}
.entry__conn{
  font-family:var(--f-mono);
  font-size:10.5px;
  letter-spacing:.04em;
  line-height:1.6;
  color:rgba(201,198,190,.62);
}
.entry__body{
  margin:0;
  font-size:1.02em;
  line-height:1.62;
  color:rgba(237,235,230,.86);
}

.entries__more{padding-top:30px}

/* Archive entries print — someone may well want the record on paper. */
@media print{
  .arch__form,.entries__more{display:none !important}
  .entry{border-bottom:1pt solid #ccc;break-inside:avoid;max-width:none}
  .entry__name,.entry__body,.entry__conn,.entries__head{color:#000 !important}
  .entry__no{color:#666 !important}
}

/* ---------- taking an entry down ----------
   Quiet by default. It needs to be findable, not prominent — but the
   archive promises removal on request, so it cannot be buried either. */

.removal{
  margin-top:clamp(38px,4.5vw,58px);
  padding-top:26px;
  border-top:1px solid rgba(201,198,190,.22);
  max-width:560px;
}
.removal summary{
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:rgba(201,198,190,.6);
  cursor:pointer;
  list-style:none;
  padding:4px 0;
  transition:color .16s ease;
}
.removal summary::-webkit-details-marker{display:none}
.removal summary::before{content:"+ ";color:var(--signal)}
.removal[open] summary::before{content:"– "}
.removal summary:hover{color:var(--paper)}
.removal__body{padding-top:20px}
.removal__body > p{
  color:rgba(237,235,230,.72);
  font-size:.95em;
  max-width:52ch;
  margin:0 0 22px;
}
.removal .btn{align-self:flex-start}

@media print{.removal{display:none !important}}

/* ---------- building image ----------
   Full-bleed so the tower has room to be a tower. Ships as a drawing;
   drop a photograph in at the same path and nothing else changes. */

.shot{margin:0 0 clamp(38px,4.5vw,60px)}
.shot img{
  width:100%;height:auto;display:block;
  border:1px solid rgba(142,139,131,.4);
  background:#273137;
}
.shot figcaption{
  margin-top:12px;
  font-family:var(--f-mono);
  font-size:10.5px;
  line-height:1.8;
  letter-spacing:.05em;
  color:var(--concrete-deep);
  max-width:64ch;
}
.shot code{
  font-family:var(--f-mono);
  background:rgba(142,139,131,.2);
  padding:1px 5px;
}
@media print{
  .shot img{border-color:#999}
  .shot figcaption{color:#000}
}

/* ============================================================
   Contrast pass on the archive.
   The first version leaned too far toward "quiet" — names, dates
   and body text were all set well below full strength, which reads
   as washed out rather than restrained. Entries are the content;
   they get full weight.
   ============================================================ */

.entry__body{
  color:#F2F0EB;
  opacity:1;
  font-size:1.06em;
  line-height:1.64;
}
.entry__name{
  color:#FFFFFF;
  font-size:1.04rem;
  font-weight:700;
}
.entry__conn{
  color:#B9C2C6;
  font-size:11px;
}
.entry__no{color:#F2652F}
.entry{border-bottom:1px solid rgba(201,198,190,.28)}

.entries__head{color:#DCD9D2}
.entries__note{color:#9AA3A7}

.arch__intro p{color:#DAD8D2}
.arch__contract{background:rgba(201,198,190,.13)}
.arch__contract strong{color:#FFFFFF}

/* form fields */
.field label{color:#CFD5D7}
.opt{color:#8F999E}
.field input,.field textarea{
  color:#F2F0EB;
  background:rgba(237,235,230,.10);
  border-color:rgba(201,198,190,.45);
}
.field input::placeholder,.field textarea::placeholder{color:#8B9498}
.field__count{color:#9AA3A7}

/* status banner for the no-JS round trip */
.flash{
  margin:0 0 20px;
  padding:14px 18px;
  font-family:var(--f-mono);
  font-size:12px;
  line-height:1.65;
  letter-spacing:.03em;
  border-left:2px solid var(--signal);
}
.flash--ok{background:rgba(143,212,168,.12);color:#B9E6C9}
.flash--bad{background:rgba(226,74,23,.14);color:#F6A488}