/* HOSTILE TAKEOVER
   Identity taken from the SOCIAL IDENTITY board: near-black, ivory, vermilion.
   Square corners, hairline rules, heavy condensed caps, wide-tracked mono.
*/

:root{
  /* brand, exactly as the board prints them */
  --ink:#101112;
  --ivory:#EEECE5;
  --vermilion:#E84435;

  /* derived: the board's own greys, read off the panels */
  --ink-2:#17181A;      /* panel */
  --ink-3:#1F2124;      /* raised: inputs, hover */
  --rule:#2B2D31;       /* hairline */
  --rule-2:#3A3D42;     /* hairline, brighter */
  --ivory-2:#A6A49D;    /* secondary text */
  --ivory-3:#6C6B67;    /* labels, tertiary */
  --vermilion-hi:#FF5B4A;

  --gutter:16px;
  --maxw:1280px;
  --hair:1px solid var(--rule);
  --line:1px solid var(--rule-2);
  --ez:cubic-bezier(.16,1,.3,1);

  --disp:"Anton",Impact,"Haettenschweiler",sans-serif;
  --mono:"Azeret Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{overflow-x:clip} /* the full-bleed hero uses 100vw, which counts the scrollbar */

body{
  background:var(--ink);
  color:var(--ivory-2);
  font-family: var(--mono);
  font-size:14px;
  line-height:1.62;
  padding-bottom:56px;
  -webkit-font-smoothing:antialiased;
  /* Azeret rewrites x between digits as a multiplication sign. Fatal for 0x addresses. */
  font-feature-settings:"calt" 0;
}

.filing{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);position:relative}

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

.label{
  font-family: var(--mono);
  font-size:10px;text-transform:uppercase;letter-spacing:.22em;color:var(--ivory-3);
}

h2{
  font-family: var(--disp);
  font-size:24px;font-weight:400;text-transform:uppercase;letter-spacing:0;
  color:var(--ivory);padding:32px 0 14px;line-height:1;
  display:flex;align-items:center;gap:14px;
}
h2::after{content:"";height:1px;flex:1;background:var(--rule)}

h3{
  font-family: var(--disp);font-size:18px;font-weight:400;letter-spacing:0;
  text-transform:uppercase;color:var(--ivory);margin-bottom:7px;line-height:1;
}

p{max-width:70ch;margin:0 0 12px;color:var(--ivory-2)}
p:last-child{margin-bottom:0}

a{color:var(--ivory);text-decoration:none;border-bottom:1px solid var(--rule-2);
  transition:color .18s var(--ez),border-color .18s var(--ez)}
a:hover{color:var(--vermilion);border-color:var(--vermilion)}
:focus-visible{outline:2px solid var(--vermilion);outline-offset:3px}

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

.masthead{
  position:sticky;top:0;z-index:5;background:var(--ink);
  max-width:var(--maxw);margin:0 auto;
  display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;
  padding:13px var(--gutter);border-bottom:var(--hair);
}
.mark{
  background:none;border:0;padding:0;cursor:pointer;
  font-family: var(--disp);font-size:22px;letter-spacing:0;line-height:1;
  text-transform:uppercase;color:var(--ivory);
  display:inline-flex;align-items:center;gap:9px;
}
.mark svg{width:17px;height:17px;fill:var(--vermilion);flex:none}
.ticker{
  font-family: var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--vermilion);border:1px solid var(--vermilion);padding:4px 8px;
}

.routes{display:flex;gap:2px;flex-wrap:wrap;margin-left:14px}
.routes button{
  background:none;border:1px solid transparent;color:var(--ivory-3);cursor:pointer;
  font-family: var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.2em;
  padding:8px 12px;
  transition:color .18s var(--ez),background .18s var(--ez);
}
.routes button:hover{color:var(--ivory)}
.routes button.on{color:var(--ink);background:var(--ivory)}

.inline-route{
  background:none;border:0;padding:0;cursor:pointer;color:var(--vermilion);font:inherit;
  border-bottom:1px solid var(--vermilion);
  transition:color .18s var(--ez);
}
.inline-route:hover{color:var(--vermilion-hi)}
.jump{margin-top:28px;font-size:12px;color:var(--ivory-3)}

/* the seal: wallet, top right */
.seal-slot{position:relative;display:inline-flex;margin-left:auto}
.seal{
  background:var(--vermilion);border:1px solid var(--vermilion);color:var(--ink);
  font-family: var(--mono);font-size:10px;font-weight:500;
  text-transform:uppercase;letter-spacing:.2em;padding:8px 14px;cursor:pointer;
  transition:background .18s var(--ez),border-color .18s var(--ez),color .18s var(--ez);
}
.seal:hover:not(:disabled){background:var(--vermilion-hi);border-color:var(--vermilion-hi)}
.seal:disabled{background:none;border-color:var(--rule-2);color:var(--ivory-3);cursor:not-allowed}
.seal[data-signed="1"]{
  background:none;color:var(--ivory);border-color:var(--ivory);letter-spacing:.06em;
  text-transform:none;
}
.seal-menu{
  position:absolute;top:calc(100% + 5px);right:0;z-index:6;min-width:200px;
  background:var(--ink-2);border:var(--line);padding:11px;display:grid;gap:8px;
}
.seal-note{font-size:10px;text-transform:uppercase;letter-spacing:.2em;color:var(--ivory-3)}
.seal-out{
  background:none;border:var(--line);color:var(--ivory-2);
  font-family: var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.18em;
  padding:9px 10px;cursor:pointer;
  transition:color .18s var(--ez),border-color .18s var(--ez);
}
.seal-out:hover{color:var(--vermilion);border-color:var(--vermilion)}

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

.oneline{
  padding:34px 0 28px;max-width:56ch;font-size:15px;line-height:1.5;color:var(--ivory-2);
}
.oneline strong{
  font-family: var(--disp);font-weight:400;color:var(--ivory);
  font-size:2.35em;letter-spacing:0;display:block;margin-bottom:10px;
  text-transform:uppercase;line-height:.94;
}

/* ------------------------------------------------------------------ valuation */

.valuation{padding:36px 0 30px;display:grid;gap:8px}
.valuation .val{
  font-family: var(--disp);font-size:64px;line-height:.9;letter-spacing:0;color:var(--ivory);
}
.val-sub{font-size:12px;color:var(--ivory-3);letter-spacing:.04em}
.val-sub .sep{color:var(--rule-2);padding:0 6px}

.state .figure--lead dd:not(.sub){color:var(--vermilion)}

.poster-cta{
  margin-top:18px;background:var(--ink);border:1px solid var(--ink);color:var(--ivory);
  font-family: var(--disp);font-size:20px;letter-spacing:.02em;text-transform:uppercase;
  padding:13px 24px;cursor:pointer;
  transition:background .18s var(--ez),color .18s var(--ez);
}
.poster-cta:hover{background:var(--vermilion);border-color:var(--vermilion);color:var(--ink)}

.bids dl{margin:0;border-top:var(--line)}
.bid-row{
  display:grid;grid-template-columns:1fr auto auto;gap:2px 16px;align-items:center;
  padding:13px 0;border-bottom:var(--hair);font-size:13px;
}
.bid-row .when{color:var(--ivory-3);font-size:11px;letter-spacing:.06em}
.bid-row .added{color:var(--ivory);text-align:right;font-variant-numeric:tabular-nums}
.bid-row .run{color:var(--ivory-3);text-align:right;font-size:11px;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.bid-row .took{color:var(--vermilion);font-size:10px;text-transform:uppercase;letter-spacing:.18em}
.bid-round{display:grid;grid-template-columns:1fr auto auto;padding:12px 0 4px}
.bid-round dt{color:var(--ivory-3);font-size:10px;text-transform:uppercase;letter-spacing:.18em}
.bid-round+.bid-row{border-top:0}

/* ------------------------------------------------------------------ home: the board's hero panel */

/* The banner itself, cut from the board: the chair photograph sits flush right and bottom, the
   empty wall-and-floor strip between the board's headline and its first chair is stretched across
   the whole slab so the floor line runs under the copy too. Copy 36 / photograph 64, as printed. */
.hero-wrap{margin-top:22px}
.hero{
  --floor:11.8%;                     /* the photograph's floor: 14.4% of its height, at 82% of the slab */
  position:relative;overflow:hidden;
  border:1px solid var(--rule-2);
  background:#0E0E0E url(assets/hero-wall.webp) center bottom / 100% 82% no-repeat;
  display:grid;grid-template-columns:1fr;
  padding:28px 24px 0;
}
.hero-copy{position:relative;z-index:1}
.hero-copy h1{
  font-family: var(--disp);font-size:72px;font-weight:400;line-height:.84;
  text-transform:uppercase;letter-spacing:-.015em;color:var(--ivory);
}
.hero-copy .tag{color:var(--ivory);font-size:15px;margin-top:16px;letter-spacing:0;line-height:1.4}
.hero-ctas{display:flex;align-items:center;gap:22px;margin-top:22px}
.cta{
  background:var(--vermilion);border:1px solid var(--vermilion);color:var(--ink);
  font-family: var(--disp);font-size:17px;letter-spacing:.02em;text-transform:uppercase;
  padding:12px 22px;cursor:pointer;white-space:nowrap;
  transition:background .18s var(--ez),border-color .18s var(--ez);
}
.cta:hover{background:var(--vermilion-hi);border-color:var(--vermilion-hi)}
.cta:focus-visible,.cta-link:focus-visible{outline:1px solid var(--ivory);outline-offset:3px}
.cta-link{
  background:none;border:0;padding:0;cursor:pointer;color:var(--ivory-2);
  font-family: var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  border-bottom:1px solid var(--rule-2);padding-bottom:2px;
  transition:color .18s var(--ez),border-color .18s var(--ez);
}
.cta-link:hover{color:var(--ivory);border-color:var(--ivory)}
.chairs{display:block;width:100%;height:auto;margin:18px -24px 0;width:calc(100% + 48px);max-width:none}

.campaign{display:grid;grid-template-columns:1fr;gap:14px;margin:22px 0 10px}
.campaign .poster{margin:0;position:relative;display:flex;flex-direction:column;min-height:380px}
.campaign .poster .shout{max-width:none;font-size:56px;margin-bottom:0}
.campaign .poster-foot{margin-top:auto}
.poster-facts{
  list-style:none;display:grid;gap:9px;margin:22px 0 20px;padding-top:16px;
  border-top:1px solid var(--ink);font-size:11.5px;line-height:1.5;letter-spacing:.02em;color:var(--ink);
}
.poster-facts li{display:grid;grid-template-columns:2.4em 1fr;gap:6px;max-width:44ch}
.poster-facts .n{color:var(--vermilion);letter-spacing:.14em}
.poster-ledger{margin:0 0 20px}
.poster-ledger div{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:9px 0;border-bottom:1px solid var(--rule);
}
.poster-ledger dd{font-family: var(--disp);font-size:26px;line-height:1;color:var(--ivory);
  font-variant-numeric:tabular-nums}
.poster-ledger dd.lapsing{color:var(--vermilion)}
.poster-foot{
  display:flex;justify-content:space-between;gap:16px;
  font-size:10px;text-transform:uppercase;letter-spacing:.18em;line-height:1.5;
}
.poster-foot span:last-child{text-align:right}
.campaign .poster--dark{background:var(--ink);border:1px solid var(--ivory);color:var(--ivory)}
.campaign .poster--dark .shout{color:var(--ivory)}
.campaign .poster--dark .poster-foot,.campaign .poster--dark p{color:var(--ivory-2)}
.poster-rule{display:block;height:2px;background:var(--vermilion);margin:22px 0 6px}

/* ------------------------------------------------------------------ state */

.state{display:grid;grid-template-columns:1fr;gap:0;margin:0;border-top:var(--line)}
.figure{padding:18px 0;border-bottom:var(--hair)}
.figure dd{
  font-family: var(--disp);
  font-size:44px;line-height:.92;letter-spacing:0;color:var(--ivory);
  margin:11px 0 8px;
}
.figure .sub{font-size:10px;margin:0;display:block;color:var(--ivory-3);white-space:normal;
  font-family: var(--mono);letter-spacing:.16em;text-transform:uppercase}
.figure .lapsing{color:var(--vermilion)}

.standing{
  font-size:13px;color:var(--ivory-2);padding:15px 0 0;max-width:none;
}
.standing .short{color:var(--vermilion)}

/* ------------------------------------------------------------------ floor */

/* what is on the table: pot left, conditions right, one rule under both */
.table-top{display:grid;grid-template-columns:1fr;gap:0 40px;align-items:end;border-bottom:var(--line)}
.table-top .valuation{padding:26px 0 22px}
.state--inline{border-top:0}
.state--inline .figure{padding:16px 0 20px;border-bottom:0}

/* your tender: a raised panel in the page's own ink. Vermilion carries the emphasis, not a colour flip. */
.offer-sheet{background:var(--ink-2);border:1px solid var(--rule-2);padding:28px 24px 22px;margin-top:26px}
.offer-sheet h2{padding:0 0 8px}
.sheet-head p{color:var(--ivory-2);max-width:56ch;font-size:13px;margin-bottom:22px}
.sheet-row{display:grid;grid-template-columns:1fr;gap:20px 40px;align-items:center;
  padding:20px 0;border-top:var(--line);border-bottom:var(--line)}
.sheet-threshold{display:grid;gap:4px}
.sheet-threshold .big{font-family: var(--disp);font-size:56px;line-height:.9;color:var(--vermilion);
  letter-spacing:0;white-space:nowrap;display:flex;align-items:baseline;gap:10px}
.sheet-threshold .big-unit{font-family: var(--mono);font-size:11px;letter-spacing:.14em;color:var(--vermilion)}
.you-body{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.transmittal[data-state="dormant"] .you-body{opacity:.55}
.you-field{display:flex;align-items:center;gap:12px}
.you-field .label{color:var(--ivory-2)}
.you-field input{
  width:6em;background:var(--ink);border:var(--line);color:var(--ivory);
  font-family: var(--disp);font-size:40px;letter-spacing:0;padding:6px 14px;line-height:1;
  transition:border-color .18s var(--ez);
}
.you-field input:hover:not(:disabled),.you-field input:focus{border-color:var(--vermilion);outline:0}
.you-field input::placeholder{color:var(--ivory-3)}
.you-field input:disabled{opacity:.5;cursor:not-allowed}
.you-unit{font-size:11px;letter-spacing:.14em;color:var(--ivory-2);text-transform:uppercase}
.you-quote{flex:1 1 auto;font-size:12px;color:var(--ivory-3)}
.you-quote strong{white-space:nowrap;font-weight:400;color:var(--ivory)}
.offer-sheet .deliver{width:auto;margin:0;padding:13px 30px;font-size:20px}
.you-sign{
  background:var(--ivory);border:1px solid var(--ivory);color:var(--ink);cursor:pointer;
  font-family: var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;padding:14px 18px;
  transition:background .18s var(--ez),border-color .18s var(--ez);
}
.you-sign:hover{background:var(--vermilion);border-color:var(--vermilion)}
.sheet-row .of-record{grid-column:1/-1}

.you-meta{display:grid;grid-template-columns:1fr;gap:14px 24px;margin:0;padding:18px 0 4px}
.you-meta dd{font-family: var(--disp);font-size:26px;line-height:1;color:var(--ivory);margin-top:6px;
  font-variant-numeric:tabular-nums}
.you-meta dd.sub{font-family: var(--mono);font-size:10px;margin-top:6px;color:var(--ivory-3)}
.offer-sheet .receipt{margin:14px 0 0;padding:12px 0 0}

/* profile */
.profile-id{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;padding:20px 0;border-top:var(--line)}
.profile-id .who{font-size:14px;color:var(--ivory);overflow-wrap:anywhere}
.state--profile .figure dd:not(.sub){font-size:40px}
.sheet--quiet h2{font-size:15px;color:var(--ivory-2)}
.note{font-size:12px;color:var(--ivory-3);max-width:none;margin:0 0 10px}
.note span{color:var(--ivory-2)}
.cols--profile{display:grid;grid-template-columns:1fr;gap:0 56px}
.cols--profile .sheet{border-top:0;padding-top:0}
.cols--profile .ledger{border-top:var(--hair)}

/* the record, quieter */
.record-pair{display:grid;grid-template-columns:1fr;gap:0 48px;margin-top:8px}
.schedule--quiet h2,.bids--quiet h2{font-size:15px;color:var(--ivory-2);padding:30px 0 8px}
.schedule--quiet .seat{padding:10px 0;font-size:12px}
.schedule--quiet .seat .who{color:var(--ivory-2)}
.schedule--quiet .seat--vacant .who{color:var(--vermilion)}
.schedule--quiet .seat .amt{color:var(--ivory-2)}
.schedule--quiet .seat:first-child .amt{font-family: var(--mono);font-size:12px}
.schedule--quiet .seat .chair{width:12px;height:12px}
.schedule--quiet .totals{font-size:12px}
.bids--quiet .bid-row{padding:10px 0;font-size:12px}

/* ------------------------------------------------------------------ schedule */

.schedule dl{margin:0;border-top:var(--line)}
.seat{
  position:relative;isolation:isolate;
  display:grid;grid-template-columns:1.6em 2.2em 1fr auto;gap:2px 12px;align-items:center;
  padding:14px 0;border-bottom:var(--hair);font-size:13px;
  transition:background .18s var(--ez);
}
/* the chair: five in a row, the vacant one is red. Straight from the board. */
.seat .chair{width:15px;height:15px;fill:var(--ivory-3);flex:none;
  transition:fill .18s var(--ez)}
.seat:hover{background:var(--ink-2)}
.seat:hover .chair{fill:var(--ivory-2)}
.seat::before{
  content:"";position:absolute;inset:0;z-index:-1;transform-origin:left;
  width:var(--share,0%);background:var(--ink-2);
  animation:sweep 620ms cubic-bezier(.16,1,.3,1) both;
}
@keyframes sweep{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.seat .no{color:var(--ivory-3);font-size:11px;letter-spacing:.14em}
.seat .who{overflow-wrap:anywhere;color:var(--ivory)}
.seat .amt{text-align:right;color:var(--ivory);font-variant-numeric:tabular-nums}
.seat .pct{text-align:right;color:var(--ivory-3);font-size:10px;letter-spacing:.18em}
.seat:first-child .amt{font-family: var(--disp);font-size:19px;letter-spacing:0}
.seat--vacant .chair{fill:var(--vermilion)}
.seat--vacant .who,.seat--vacant .no,.seat--vacant .amt{color:var(--vermilion)}

.totals{
  display:flex;justify-content:space-between;gap:12px;padding:13px 0 0;font-size:13px;
}
.totals span:last-child{font-variant-numeric:tabular-nums;color:var(--ivory)}

/* ------------------------------------------------------------------ tender */

.steps{border-top:var(--line);padding-top:18px;display:grid;gap:11px}
.steps input{
  width:100%;background:var(--ink-2);border:var(--line);color:var(--ivory);
  font-family: var(--disp);font-size:30px;letter-spacing:0;padding:13px 15px;
  transition:border-color .18s var(--ez);
}
.steps input:hover:not(:disabled),.steps input:focus{border-color:var(--vermilion)}
.steps input::placeholder{color:var(--ivory-3)}
.steps input:disabled{opacity:.5;cursor:not-allowed}
.hint{
  font-size:11px;color:var(--ivory-3);margin:0;max-width:none;letter-spacing:.02em;
  display:flex;justify-content:space-between;gap:8px;
}
.hint strong{font-weight:400;color:var(--ivory)}
.hint span{white-space:nowrap}

.deliver{
  width:100%;background:var(--vermilion);border:1px solid var(--vermilion);color:var(--ink);
  font-family: var(--disp);font-size:19px;letter-spacing:.02em;text-transform:uppercase;
  padding:15px 18px;cursor:pointer;margin-top:4px;
  transition:background .18s var(--ez),border-color .18s var(--ez);
}
.deliver:hover:not(:disabled){background:var(--vermilion-hi);border-color:var(--vermilion-hi)}
.deliver:disabled{background:none;border:1px solid var(--rule-2);color:var(--ivory-3);
  cursor:not-allowed}

.of-record{display:flex;gap:8px;flex-wrap:wrap}
.of-record button{
  flex:1 1 auto;background:var(--vermilion);border:1px solid var(--vermilion);color:var(--ink);
  font-family: var(--mono);font-size:11px;font-weight:500;
  text-transform:uppercase;letter-spacing:.18em;padding:14px 18px;cursor:pointer;
  transition:background .18s var(--ez);
}
.of-record button:hover:not(:disabled){background:var(--vermilion-hi)}

.receipt{
  margin:14px 0 0;padding:12px 0 0;max-width:none;border-top:var(--hair);
  font-size:10px;text-transform:uppercase;letter-spacing:.2em;color:var(--ivory-3);
  overflow-wrap:anywhere;
}
.receipt--transit{color:var(--ivory)}
.receipt--rejected{color:var(--vermilion)}

/* ------------------------------------------------------------------ pages */

.page{padding-bottom:10px}
.head{padding:34px 0 28px;max-width:62ch}
.head h1{
  font-family: var(--disp);font-size:46px;font-weight:400;line-height:.92;
  text-transform:uppercase;letter-spacing:0;color:var(--ivory);margin-bottom:14px;
}
.head p{color:var(--ivory-3);font-size:14px;max-width:58ch}

.sheet{border-top:var(--line);padding:0 0 30px;margin-bottom:6px}
.sheet > h2:first-child{padding-top:26px}
.sheet ol{list-style:none;counter-reset:cl}
.sheet dl{margin:0 0 14px;border-top:var(--hair)}
.sheet dl div{
  display:grid;grid-template-columns:1fr;gap:2px;padding:12px 0;border-bottom:var(--hair);
}
.sheet dd{font-size:13px;overflow-wrap:anywhere;color:var(--ivory);
  font-variant-numeric:tabular-nums}
/* the illustrative split reads as a two-column ledger, not a labelled form */
[data-f="example"] div{display:flex!important;justify-content:space-between;gap:16px}
[data-f="example"] dt{color:var(--ivory-2);font-size:13px}
[data-f="example"] dd{font-family: var(--disp);font-size:18px;letter-spacing:0}

/* the poster: the board's inverted block, used where the page must raise its voice */
.poster{
  background:var(--ivory);color:var(--ink);padding:30px 26px;margin:22px 0 6px;
}
.poster p{color:var(--ink);max-width:46ch;font-size:12px;letter-spacing:.04em}
.poster .shout{
  font-family: var(--disp);font-size:40px;line-height:.9;text-transform:uppercase;
  color:var(--ink);margin-bottom:14px;display:block;max-width:20ch;
}
.poster .shout em{font-style:normal;color:var(--vermilion)}

.ledger div{border-bottom:var(--hair)}
.ledger dd{font-size:15px}

.sheet dl div.rec-row{
  display:grid;grid-template-columns:2.4em 1fr auto;gap:2px 12px;align-items:center;
  padding:14px 0;border-bottom:var(--hair);font-size:13px;
}
.rec-row dd:last-child{text-align:right}
.rec-row .no{color:var(--ivory-3);font-size:11px;letter-spacing:.14em}
.rec-row .state-tag{font-size:10px;text-transform:uppercase;letter-spacing:.2em}
.rec-row .state-tag--closed{color:var(--ivory)}
.rec-row .state-tag--lapsed{color:var(--vermilion)}
.rec-row .state-tag--live{color:var(--vermilion)}

.step{padding:0 0 18px}
.step p{max-width:64ch;margin:0}

.condition{counter-increment:cl;position:relative;padding:0 0 13px 2.6em;max-width:none}
.condition::before{
  content:counter(cl);position:absolute;left:0;top:0;
  font-family: var(--disp);font-size:15px;color:var(--vermilion);
}
.term{text-transform:uppercase;letter-spacing:.12em;color:var(--vermilion);font-size:.9em}

.plain{
  max-width:none;color:var(--ivory);font-size:15px;border-top:1px solid var(--vermilion);
  padding-top:13px;margin-top:6px;
}

.formula{
  font-family: var(--mono);font-size:13px;color:var(--ivory);
  background:var(--ink-2);border:var(--hair);padding:15px;margin:0 0 16px;
  overflow-x:auto;white-space:pre;
}

.disclosure li{list-style:none;padding:0 0 12px 2.2em;position:relative;max-width:none;
  color:var(--ivory-3);font-size:13px}
.disclosure li::before{content:attr(data-note);position:absolute;left:0;
  font-size:10px;color:var(--ivory-3);letter-spacing:.14em}
.disclosure strong{font-weight:400;color:var(--ivory)}

/* ------------------------------------------------------------------ colophon */

.colophon{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;
  margin-top:38px;padding:22px 0 10px;border-top:var(--line);
}
.colophon-mark{
  font-family: var(--disp);font-size:17px;letter-spacing:0;
  text-transform:uppercase;color:var(--ivory-3);
}
.colophon-links{display:flex;gap:6px;flex-wrap:wrap}
.colophon-links a{
  font-size:10px;text-transform:uppercase;letter-spacing:.2em;color:var(--ivory-3);
  border:1px solid var(--rule-2);padding:8px 12px;
  transition:color .18s var(--ez),border-color .18s var(--ez);
}
.colophon-links a:hover{color:var(--ivory);border-color:var(--ivory)}
.colophon-note{
  margin-left:auto;font-size:10px;text-transform:uppercase;letter-spacing:.2em;
  color:var(--ivory-3);
}

.specimen{
  position:fixed;left:0;right:0;bottom:0;z-index:7;
  background:var(--vermilion);border:0;
  padding:10px var(--gutter);text-align:center;
  font-family: var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.2em;
  color:var(--ink);
}

/* ------------------------------------------------------------------ 700 */

@media (min-width:700px){
  :root{--gutter:28px}
  .valuation .val{font-size:96px}
  .hero-copy h1{font-size:120px}
  .campaign{grid-template-columns:1fr 1fr}
  body{font-size:15px}
  .mark{font-size:27px}
  .mark svg{width:21px;height:21px}
  .oneline{font-size:17px;max-width:60ch}
  .state{grid-template-columns:repeat(3,1fr);gap:0}
  .state--profile{grid-template-columns:repeat(4,1fr)}
  .figure{padding:20px 22px;border-right:var(--hair)}
  .figure:last-child{border-right:0}
  .figure dd{font-size:54px}
  .seat{grid-template-columns:1.8em 2.6em 1fr 9em 6em;padding:15px 0}
  .sheet dl div{grid-template-columns:13em 1fr;gap:12px;align-items:baseline}
  h2{font-size:30px}
  .head h1{font-size:68px}
  .poster .shout{font-size:58px}
}

/* ------------------------------------------------------------------ 1040 */

@media (min-width:1040px){
  :root{--gutter:40px}
  .valuation .val{font-size:112px}
  .valuation{padding:36px 0 30px}
  .hero{
    grid-template-columns:36fr 64fr;padding:0;
    /* the board banner is 3.75:1; 2.8:1 in the 1280 column keeps its shape and lines up with the posters */
    aspect-ratio:2.8/1;max-height:calc(100vh - 150px);
  }
  .hero-copy{
    display:grid;grid-template-rows:1fr auto auto auto 1fr var(--floor);
    padding:0 0 0 52px;
  }
  .hero-copy h1{grid-row:2;font-size:clamp(60px,5.2vw,76px)}
  .hero-copy .tag{grid-row:3}
  .hero-ctas{grid-row:4}
  .chairs{position:absolute;right:0;bottom:0;height:82%;width:auto;margin:0;max-width:none}
  .campaign .poster .shout{font-size:74px}
  .table-top{grid-template-columns:minmax(0,1fr) auto}
  .table-top .valuation .val{font-size:96px}
  .state--inline{grid-template-columns:repeat(3,auto);gap:0 48px}
  .state--inline .figure{padding:0 0 26px;border-right:0}
  .figure dd{font-size:46px;white-space:nowrap}
  .offer-sheet{padding:34px 40px 26px}
  .sheet-row{grid-template-columns:auto minmax(0,1fr)}
  .sheet-threshold .big{font-size:72px}
  .you-meta{grid-template-columns:repeat(3,1fr)}
  .record-pair{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
  .schedule--quiet .seat{grid-template-columns:1.6em 2.4em 1fr 7em 5em;padding:10px 0}
  .oneline{padding:40px 0 32px}
  .sheet ol.howto{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
  /* the filings read as a two-column document: no clause runs past 60ch, no column stays empty */
  .sheet .cols{display:grid;grid-template-columns:1fr 1fr;gap:0 56px;align-items:start}
  .sheet .cols p{max-width:none}
  .sheet .cols--deep{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
  .cols--profile{grid-template-columns:1fr 1fr}
  .sheet .cols dl{margin-bottom:0}
  .sheet ol.conditions{display:grid;grid-template-columns:1fr 1fr;gap:0 56px}
  .head{max-width:none}
  .head p{max-width:70ch}
  .howto .step{padding:0}
  .poster{padding:44px 40px}
  .poster .shout{font-size:74px}
}

@media (min-width:1360px){ .head h1{font-size:84px} }
/* the tender row: label, field, unit, then the button pushed to the right edge */
.you-body{justify-content:flex-start}
.offer-sheet .deliver{margin-left:auto;align-self:stretch}
@media (min-width:1360px){ .you-body{flex-wrap:nowrap} }
}

/* ------------------------------------------------------------------ motion off */

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .seat::before{transform:scaleX(1)}
}