/* ---------------------------------------------------------------
   Setmark's own language. Full-width bands alternate ink and paper,
   both carry grain, everything is Plex Mono, and orange only ever
   appears on ink. Serif italic is an accent and nothing else.
   --------------------------------------------------------------- */
:root{
  --ink:#131611;
  --ink-2:#1A1E17;
  --paper:#E3E1DA;
  --paper-2:#EDEBE5;
  --on-ink:#F5F3EC;
  --on-ink-mute:#A0A69A;
  --on-paper:#1A1D17;
  --on-paper-mute:#5B6157;
  --orange:#EF5B2A;
  --orange-deep:#B53F1F;
  --green:#2B6B57;
  --rule-ink:rgba(245,243,236,.18);
  --rule-paper:#C2C8BC;
  --grid-ink:rgba(245,243,236,.045);
  --grid-paper:rgba(25,55,46,.06);
}
:root[data-theme="light"]{ color-scheme:light }

*{box-sizing:border-box}
body{
  margin:0;
  background:var(--ink);
  color:var(--on-ink);
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:15.5px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
}
p{margin:0;text-wrap:pretty}
h1,h2,h3{margin:0;font-weight:600;text-wrap:balance}
a{color:inherit}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

.wrap{max-width:1260px;margin:0 auto;padding:0 32px}

/* ---------- the two bands ---------- */
.band{position:relative;overflow:hidden}
.band > .wrap{position:relative;z-index:2}
.band::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(var(--g) 1px,transparent 1px),
    linear-gradient(90deg,var(--g) 1px,transparent 1px);
  background-size:52px 52px;
}
/* grain, generated inline so nothing is fetched from another host */
.band::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  opacity:var(--grain-o);mix-blend-mode:var(--grain-b);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  background-size:160px 160px;
}
.ink{background:var(--ink);color:var(--on-ink);--g:var(--grid-ink);--grain-o:.16;--grain-b:screen}
.paper{background:var(--paper);color:var(--on-paper);--g:var(--grid-paper);--grain-o:.20;--grain-b:multiply}

/* ---------- type ---------- */
.eyebrow{font-size:14px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  display:block;margin-bottom:26px}
.ink .eyebrow{color:var(--orange)}
.paper .eyebrow{color:var(--orange-deep)}
h1{font-size:clamp(1.95rem,4vw,3.15rem);line-height:1.14;letter-spacing:-.03em;
   max-width:14ch}
h2{font-size:clamp(1.6rem,3.1vw,2.5rem);line-height:1.14;letter-spacing:-.022em;
   text-transform:uppercase;max-width:20ch;margin-bottom:22px}
h3{font-size:1.1rem;line-height:1.34;letter-spacing:-.01em}
.serif{font-family:"IBM Plex Serif",Georgia,serif;font-style:italic;font-size:1.06em}
.lede{max-width:46ch;font-size:1.06rem;line-height:1.66;text-wrap:balance}
.ink .lede{color:var(--on-ink-mute)}
.paper .lede{color:var(--on-paper-mute)}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;text-decoration:none;cursor:pointer;
  font-size:14px;letter-spacing:.15em;text-transform:uppercase;font-weight:600;
  padding:20px 38px;border:1px solid var(--orange);background:var(--orange);color:#1A0E07;
}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;border-color:var(--on-ink);color:var(--on-ink)}
.btn.ghost:hover{background:rgba(245,243,236,.09);filter:none}
.btn.small{padding:12px 22px;font-size:12px;letter-spacing:.13em}

/* ---------- nav ---------- */
.nav{border-bottom:1px solid var(--rule-ink)}
.nav-in{display:flex;align-items:center;gap:26px;padding:14px 0;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand svg{display:block;flex:none;width:30px;height:30px}
.brand .wm{font-size:1.42rem;font-weight:600;letter-spacing:.02em;line-height:1}
.brand .wm i{font-style:normal;color:var(--orange)}
.nav-links{display:flex;gap:26px;margin-left:auto;align-items:center;flex-wrap:wrap;
  font-size:11.5px;letter-spacing:.13em;text-transform:uppercase}
.nav-links a{color:var(--on-ink-mute);text-decoration:none}
.nav-links a:hover{color:var(--on-ink)}
.nav-links a.on{color:var(--on-ink)}

/* ---------- hero ---------- */
.hero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:64px;padding:84px 0 92px;align-items:start}
.hero .eyebrow{margin-bottom:30px}
/* the headline needs air under it, not a nudge */
/* the gap under the headline is owned by the deck alone, so two margins
   cannot collapse against each other and quietly eat it */
.hero h1{margin-bottom:0}
/* first paragraph is the standfirst and carries full contrast, the second
   steps down. Same words, but now there is an order to read them in. */
.hero .deck{margin-top:58px;max-width:38ch;font-size:1.28rem;line-height:1.58;
  color:var(--on-ink);text-wrap:balance}
.hero .deck + .deck{margin-top:24px;font-size:1.06rem;line-height:1.66;
  color:var(--on-ink-mute);max-width:40ch;text-wrap:balance}
.cta-row{display:flex;gap:12px;margin-top:56px;flex-wrap:wrap}

/* ---------- the paper card that sits in the dark ---------- */
.card{background:var(--paper-2);color:var(--on-paper);border:1px solid var(--rule-paper);
  position:relative;overflow:hidden}
.card::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.18;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}
.card > *{position:relative;z-index:1}
.card-cap{padding:14px 18px;border-bottom:1px solid var(--rule-paper);
  font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--on-paper-mute);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.card-cap b{color:var(--orange-deep);font-weight:600}

/* ---------- the week ---------- */
.week{padding:26px 22px 24px}
/* labels live in a gutter, so the bars are shape and nothing else */
.week-grid{display:grid;grid-template-columns:112px minmax(0,1fr);
  column-gap:16px;row-gap:11px;align-items:center;position:relative}
.week-grid .spacer{grid-column:1}
.days{grid-column:2;display:grid;grid-template-columns:repeat(5,1fr);
  border-bottom:1px solid var(--rule-paper);padding-bottom:7px;
  font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--on-paper-mute)}
.day{padding-left:8px;border-left:1px solid rgba(26,29,23,.12)}
.day:first-child{border-left:0;padding-left:0}

.rowlab{grid-column:1;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--on-paper-mute);text-align:right;line-height:1.3}
/* real columns and rows. The bars were floating in white space, so there
   was nothing for them to be measured against. */
.track{grid-column:2;position:relative;height:38px;
  border-bottom:1px solid rgba(26,29,23,.13);
  background-image:repeating-linear-gradient(90deg,
    rgba(26,29,23,.13) 0 1px,transparent 1px 20%)}
.rowlab{border-right:1px solid rgba(26,29,23,.13);padding-right:14px;
  align-self:stretch;display:flex;align-items:center;justify-content:flex-end}

/* the two quiet ones: outline only, so they recede */
.bar{position:absolute;top:0;bottom:0;border:1px solid rgba(26,29,23,.32);
  background:transparent}

/* the subject: solid to the deadline, hatched past it */
.bar.solid{background:var(--orange);border-color:var(--orange)}
.bar.past{border-color:var(--orange);border-left:0;
  background:repeating-linear-gradient(135deg,
    rgba(239,91,42,.55) 0 6px,rgba(239,91,42,.10) 6px 12px)}
.overtag{position:absolute;top:100%;margin-top:7px;font-size:9.5px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--orange-deep);white-space:nowrap}

/* the deadline runs the full height of the track stack */
.deadline{position:absolute;top:-4px;bottom:-4px;width:0;
  border-left:2px dashed var(--orange-deep);z-index:3}
.deadline b{position:absolute;top:-19px;left:50%;transform:translateX(-50%);
  color:var(--orange-deep);font-size:9.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;white-space:nowrap;background:var(--paper-2);padding:0 6px}

.week-foot{padding:20px 22px 22px;border-top:1px solid var(--rule-paper);
  background:rgba(26,29,23,.04)}
.week-foot p{color:var(--on-paper);font-size:1.06rem;line-height:1.5;
  max-width:36ch;margin:0 auto;text-align:center;font-weight:500;text-wrap:balance}
.week-foot p b{color:var(--orange-deep);font-weight:600}

/* ---------- the six ---------- */
.six{padding:78px 0 84px}
.rows{display:flex;flex-direction:column;gap:22px;margin-top:48px}
/* Each entry opens with an ink strip. That is what separates them,
   not a heavier hairline. */
.item{border:1px solid var(--rule-paper);background:var(--paper-2)}
.item .strip{background:var(--ink);color:var(--on-ink);padding:16px 26px;
  display:flex;align-items:baseline;gap:20px;flex-wrap:wrap;
  font-size:14px;letter-spacing:.16em;text-transform:uppercase;font-weight:500}
.item .strip b{color:var(--orange);font-size:18px;font-weight:600;letter-spacing:.08em}
.item .strip span{color:var(--on-ink-mute)}
.item .in{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.78fr)}
.item .in.solo{grid-template-columns:1fr}
/* The headline sits left, the explanation sits beside it. Nothing is pinned to
   a narrow measure inside a wide card, so the right half stops being a hole. */
.item .body{padding:34px 26px 36px;display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:20px 52px;align-items:start}
.item .body p{margin-top:0;color:var(--on-paper-mute);max-width:none}
.item .side{padding:26px 24px;border-left:1px solid var(--rule-paper);
  display:flex;flex-direction:column;gap:18px}
.item .side .k{display:block;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--on-paper-mute)}
.item .side .v{display:block;margin-top:6px;font-size:.96rem;line-height:1.5}
.figs{display:flex;flex-wrap:wrap;gap:18px 26px}
.figs .n{display:block;font-size:1.75rem;font-weight:600;color:var(--orange-deep);
  font-variant-numeric:tabular-nums;line-height:1;letter-spacing:-.02em}
.figs .c{display:block;margin-top:7px;font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--on-paper-mute)}

/* ---------- boundary ---------- */
.boundary{padding:78px 0 84px}
.cols{display:grid;grid-template-columns:1fr 1fr;margin-top:42px;border:1px solid var(--rule-ink)}
.col{padding:32px 30px}
.col + .col{border-left:1px solid var(--rule-ink);background:rgba(245,243,236,.035)}
.col .tag{display:block;margin-bottom:16px;color:var(--orange);font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase}
.col p{color:var(--on-ink-mute)}
.col p + p{margin-top:13px}
.col h3{margin-bottom:14px;max-width:26ch}

/* ---------- form ---------- */
.book{padding:84px 0 92px}
.form-card{margin-top:38px;max-width:820px;padding:32px 30px;border:1px solid var(--rule-ink);
  background:rgba(245,243,236,.035)}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.f{display:flex;flex-direction:column;gap:8px}
.f.full{grid-column:1/-1}
.f label{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--on-ink-mute)}
.f input,.f select,.f textarea{
  font-family:inherit;font-size:15px;border-radius:0;padding:12px 13px;
  background:rgba(245,243,236,.06);color:var(--on-ink);border:1px solid rgba(245,243,236,.26);
}
.f textarea{min-height:104px;resize:vertical}
.f option{color:#131611}
.form-foot{display:flex;gap:20px;align-items:center;margin-top:24px;flex-wrap:wrap}
.form-note{color:var(--on-ink-mute);font-size:.9rem;max-width:40ch}
.preview-flag{margin-top:20px;border:1px dashed var(--orange);padding:12px 15px;
  color:var(--orange);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--rule-ink);padding:26px 0}
.foot-in{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  color:var(--on-ink-mute);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase}

@media (max-width:980px){
  .hero-in{grid-template-columns:1fr;gap:40px;padding:52px 0 60px}
  .item .in{grid-template-columns:1fr}
  .item .side{border-left:0;border-top:1px solid var(--rule-paper)}
  .cols{grid-template-columns:1fr}
  .col + .col{border-left:0;border-top:1px solid var(--rule-ink)}
  .fields{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- the two-part headline, the site's own move ---------- */
.turn{display:block;margin-top:.16em;font-family:"IBM Plex Serif",Georgia,serif;font-style:italic;
  text-transform:none;letter-spacing:-.012em;font-weight:400}
h1 .turn{font-size:.95em;margin-top:.3em}
h2 .turn{font-size:.97em;color:var(--orange);margin-top:.34em}
.paper h2 .turn{color:var(--orange-deep)}
.item h3{font-size:clamp(1.45rem,2.5vw,2.05rem);line-height:1.14;letter-spacing:-.026em}
.item h3 .turn{font-size:.99em;color:var(--orange-deep);margin-top:.42em}
.item .body p{font-size:1.02rem;line-height:1.7;padding-top:.34em}
.col h3{font-size:1.22rem;line-height:1.24}

/* ---------- the split: two opposite grounds, edge to edge ----------
   The bottom of the page was one tone all the way down. The color change
   between these two is the divider, so no border is needed and neither
   half can recede. */
.split{display:grid;grid-template-columns:1fr 1fr;margin-top:8px}
.half{padding:56px 46px;position:relative}
.paper-half{background:var(--paper-2);color:var(--on-paper)}
.orange-half{background:var(--orange);color:#20120A}
.half .tag{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;margin-bottom:18px}
.paper-half .tag{color:var(--orange-deep)}
.orange-half .tag{color:#6B2409}
.half h3{font-size:clamp(1.35rem,2.2vw,1.8rem);line-height:1.16;letter-spacing:-.024em;
  margin-bottom:24px;max-width:18ch}
.half p{font-size:1.02rem;line-height:1.68;max-width:44ch}
.half p + p{margin-top:14px}
.paper-half p{color:var(--on-paper-mute)}
.orange-half p{color:#4A1E08}
.strikes{list-style:none;margin:0 0 22px;padding:0}
.strikes li{padding:12px 0;border-top:1px solid var(--rule-paper);
  color:#8B9084;text-decoration:line-through;text-decoration-color:var(--orange-deep);
  text-decoration-thickness:2px;font-size:.99rem}
.orange-half .btn.ink-btn{margin-top:28px;background:var(--ink);border-color:var(--ink);
  color:var(--on-ink)}

/* the form band sits on paper, so the page does not end on one tone */
.band.paper .form-card{background:var(--paper-2);border-color:var(--rule-paper)}
.band.paper .f label{color:var(--on-paper-mute)}
.band.paper .f input,.band.paper .f select,.band.paper .f textarea{
  background:var(--paper-3,#F4F2EC);border-color:var(--rule-paper);color:var(--on-paper)}
.band.paper .form-note{color:var(--on-paper-mute)}
.band.paper .preview-flag{border-color:var(--orange-deep);color:var(--orange-deep)}

@media (max-width:900px){
  .split{grid-template-columns:1fr}
  .half{padding:44px 30px}
}

/* =================================================================
   DEPTH
   The page was reading flat because every surface sat in the same
   plane: solid fills, hairline borders, no light. The fix is physical
   rather than decorative. Paper is a sheet lying on a dark desk, so it
   casts a real shadow and catches light on its top edge. Ink is a
   surface lit from above, not a swatch. Bands stack, so each one
   shadows the one below it.
   ================================================================= */

/* surfaces are lit, not filled */
.ink{background-color:#131611;
  background-image:radial-gradient(135% 95% at 50% -12%,rgba(245,243,236,.06),transparent 62%)}
.paper{background-color:#E3E1DA;
  background-image:radial-gradient(125% 95% at 50% -6%,rgba(255,255,255,.6),transparent 66%)}

/* each band sits under the one above it */
.band + .band{box-shadow:inset 0 16px 30px -16px rgba(0,0,0,.55)}

/* paper lying on the dark ground: real shadow, lit top edge */
.card,.form-card,.item,.split{position:relative}
.card{box-shadow:0 30px 56px -20px rgba(0,0,0,.75),0 4px 10px rgba(0,0,0,.4)}
.card::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:rgba(255,255,255,.8);z-index:3;pointer-events:none}

/* cards on the paper band sit closer to it, so the shadow is tighter */
.item{box-shadow:0 12px 26px -14px rgba(26,29,23,.45),0 1px 3px rgba(26,29,23,.14)}
.item .strip{box-shadow:inset 0 -2px 6px rgba(0,0,0,.45)}

.split{box-shadow:0 26px 56px -22px rgba(0,0,0,.65)}
.half{position:relative}
.paper-half::before,.orange-half::before{content:"";position:absolute;left:0;right:0;top:0;
  height:1px;background:rgba(255,255,255,.55);pointer-events:none}

.form-card{box-shadow:0 18px 40px -18px rgba(26,29,23,.45),0 1px 3px rgba(26,29,23,.12)}
.form-card::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:rgba(255,255,255,.7);pointer-events:none}

/* fields are recessed into the sheet rather than drawn on it */
.f input,.f select,.f textarea{box-shadow:inset 0 2px 5px rgba(26,29,23,.14)}

/* buttons are objects. Hard offset, no blur, because this brand is
   printed and stamped, not glossy. */
.btn{box-shadow:5px 5px 0 rgba(19,22,17,.5);
  transition:transform .12s ease,box-shadow .12s ease}
.btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 rgba(19,22,17,.55);filter:none}
.btn:active{transform:translate(3px,3px);box-shadow:2px 2px 0 rgba(19,22,17,.45)}
.paper .btn,.paper-half .btn{box-shadow:5px 5px 0 rgba(26,29,23,.28)}
.paper .btn:hover,.paper-half .btn:hover{box-shadow:7px 7px 0 rgba(26,29,23,.32)}
.orange-half .btn.ink-btn{box-shadow:5px 5px 0 rgba(90,36,12,.45)}
.orange-half .btn.ink-btn:hover{box-shadow:7px 7px 0 rgba(90,36,12,.5)}
.btn.ghost{box-shadow:5px 5px 0 rgba(0,0,0,.35)}

/* the bar that matters lifts off the chart */
.bar.solid{box-shadow:0 3px 10px rgba(181,63,31,.45)}

/* the ink strip on each card gets a lit lower lip so it reads as a
   band laid over the sheet, not a hole cut in it */
.item .strip + .in{box-shadow:inset 0 3px 8px -3px rgba(0,0,0,.22)}
@media (max-width:900px){
  .item .body{grid-template-columns:1fr;gap:18px}
  .item .body p{padding-top:0}
}

/* ---------- drawing imagery ----------
   TxDOT public bid set, cleared for marketing. Tinted back so it reads as
   surface. No quantity or finding is drawn on any of it. */
.plate{position:relative;height:clamp(180px,22vw,300px);overflow:hidden;
  background:#131611;border-top:1px solid var(--rule-ink);
  border-bottom:1px solid var(--rule-ink)}
.plate .img{position:absolute;inset:0;background-size:cover;background-position:center 42%;
  filter:grayscale(1) contrast(1.1);opacity:.34}
.plate .veil{position:absolute;inset:0;
  background:linear-gradient(90deg,#131611 0%,rgba(19,22,17,.35) 38%,
    rgba(19,22,17,.35) 62%,#131611 100%)}
.plate .cap{position:absolute;left:0;right:0;bottom:16px;text-align:center;
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--on-ink-mute);z-index:2}
.plate .cap b{color:var(--orange);font-weight:600}

/* the form band had an empty right half */
.book-in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:56px;align-items:start}
.plate-tall{position:relative;overflow:hidden;border:1px solid var(--rule-paper);
  min-height:440px;box-shadow:0 18px 40px -18px rgba(26,29,23,.45)}
.plate-tall .img{position:absolute;inset:0;background-size:cover;
  background-position:center;filter:grayscale(1) contrast(1.06);opacity:.85}
.plate-tall .veil{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(237,235,229,.1) 0%,rgba(237,235,229,.75) 100%)}
.plate-tall .cap{position:absolute;left:20px;right:20px;bottom:18px;
  font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--on-paper-mute);z-index:2}
.plate-tall .cap b{color:var(--orange-deep);font-weight:600;display:block;margin-bottom:5px}
@media (max-width:900px){
  .book-in{grid-template-columns:1fr}
  .plate-tall{min-height:280px}
}

/* the plate sells, it does not caption. Attribution goes in the corner. */
/* nothing sits on it now, so the drawing can come forward and the band
   can be shorter. It is a breath between the hero and the list. */
.plate{height:auto;min-height:clamp(150px,17vw,240px)}
.plate .img{opacity:.5;background-position:center 40%}
.plate .veil{background:linear-gradient(180deg,rgba(19,22,17,.92) 0%,rgba(19,22,17,.45) 45%,
  rgba(19,22,17,.92) 100%)}
.plate-say{position:relative;z-index:2;text-align:center;padding:48px 32px;max-width:900px}
.plate-say h2{font-size:clamp(1.5rem,3.4vw,2.7rem);line-height:1.14;letter-spacing:-.024em;
  text-transform:none;max-width:none;margin:0}
.plate-say h2 .turn{margin-top:.32em;color:var(--orange)}

/* the scenario sits directly under the section head and carries more
   weight than the framing line below it */
.scenario{font-size:clamp(1.15rem,2.1vw,1.5rem);line-height:1.5;max-width:34ch;
  color:var(--on-paper);text-wrap:balance;margin-bottom:22px}
.ink .scenario{color:var(--on-ink)}

/* the list gets its own header rather than a caption floating above it */
.cards-head{margin-top:52px;padding-top:26px;border-top:2px solid var(--on-paper);
  font-size:clamp(1.35rem,3vw,2.4rem);line-height:1.22;letter-spacing:-.024em;
  max-width:none;text-wrap:balance}
/* runs across the full column as one line, so the turn stays inline */
.cards-head .turn{display:inline;margin-top:0;color:var(--orange-deep)}

/* the header had an empty right half. A finish schedule is the thing a
   reviewer has to reconcile against the drawings, so it belongs here. */
.six-head{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:52px;align-items:center}
.sched{margin:0;border:1px solid var(--rule-paper);background:#fff;overflow:hidden;
  position:relative;box-shadow:0 18px 38px -18px rgba(26,29,23,.5),0 1px 3px rgba(26,29,23,.16)}
.sched::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(237,235,229,.85) 100%)}
.sched img{display:block;width:100%;height:auto}
@media (max-width:900px){.six-head{grid-template-columns:1fr;gap:34px}}

/* ---------- the close ----------
   One band, one instruction, one field. It is the only saturated surface on
   the page, so it cannot be scrolled past by accident. */
.close{background:var(--orange);color:#20120A;position:relative;overflow:hidden}
.close::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>")}
.close > .wrap{position:relative;z-index:2;padding:84px 32px 88px}
.close .tag{display:block;font-size:14px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;color:#6B2409;margin-bottom:26px}
.close h2{font-size:clamp(1.8rem,3.6vw,3rem);line-height:1.12;letter-spacing:-.026em;
  text-transform:none;max-width:20ch;margin-bottom:0;color:#20120A}
.close h2 .turn{margin-top:.3em;color:#5C1F06}
.close .say{margin-top:30px;max-width:46ch;font-size:1.1rem;line-height:1.6;color:#4A1E08}
.close form{display:flex;gap:0;max-width:620px;margin-top:40px;flex-wrap:wrap}
.close input{flex:1 1 300px;font-family:inherit;font-size:16px;padding:19px 18px;
  border-radius:0;background:#FFF7F3;border:1px solid #20120A;border-right:0;color:#20120A;
  box-shadow:inset 0 2px 5px rgba(32,18,10,.14)}
.close input::placeholder{color:#8A6A5C}
.close button{font-family:inherit;font-size:14px;letter-spacing:.15em;text-transform:uppercase;
  font-weight:600;cursor:pointer;padding:19px 34px;background:var(--ink);color:var(--on-ink);
  border:1px solid var(--ink);box-shadow:5px 5px 0 rgba(90,36,12,.4);
  transition:transform .12s ease,box-shadow .12s ease}
.close button:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 rgba(90,36,12,.45)}
.close button:active{transform:translate(3px,3px);box-shadow:2px 2px 0 rgba(90,36,12,.35)}
.close .fine{margin-top:26px;max-width:60ch;font-size:.92rem;line-height:1.6;color:#5C1F06}
@media (max-width:620px){
  .close input{border-right:1px solid #20120A}
  .close button{width:100%}
}