/* soldermask — the index, since 15 Sep 2026: a real board on black, big
   statements in Manrope, the ASCII wordmark kept, orange on the button and
   the eyebrow tick and nothing else. site.css carries the bar, the type
   scale, the footer and the kicker; everything below is this page's own. */

body.home{--wide:1280px}
body.home main{display:block;padding:0;align-items:stretch}
/* site.css gives every section a top margin and a rule for the thread pages'
   prose; here a section is a band and draws its own */
body.home main > section{margin:0;border-top:0}
/* and it underlines a link inside a paragraph; the hero's second link and the
   close's button are set on their own */
body.home .cta a{border-bottom:0}

/* ---- the bar's button ---------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  padding:12px 20px;border:1px solid var(--brand);color:var(--brand);
  transition:background .14s linear,color .14s linear;
}
.btn:hover,.btn:focus-visible{background:var(--brand);color:var(--bg)}
.btn.solid{background:var(--brand);color:var(--bg)}
.btn.solid:hover,.btn.solid:focus-visible{background:#ffa451;border-color:#ffa451}
header nav.bar a.btn{padding:9px 16px;font-size:12px;letter-spacing:.12em;color:var(--brand)}
header nav.bar a.btn:hover{color:var(--bg)}

/* ---- the hero: wordmark, one line, one board ------------------------------ */
.hero{
  position:relative;overflow:hidden;
  min-height:calc(100svh - var(--bar) - var(--notice,0px));
  display:flex;flex-direction:column;
  padding:58px 26px 0;
}
.hero-head{position:relative;z-index:2;max-width:var(--wide);width:100%;margin:0 auto}
/* the grid: light cycles laying track behind the hero and the close, faded
   toward the copy so it stays a backdrop. It is a canvas of text, so it
   sits in the page's own mono at the lattice's own pitch. */
canvas.tron{
  position:absolute;inset:0;width:100%;height:100%;z-index:0;
  pointer-events:none;opacity:.8;
  /* faded toward the foot, and cleared where the copy sits */
  -webkit-mask-image:
    linear-gradient(to bottom,rgb(0 0 0/.95) 0,rgb(0 0 0/.6) 50%,rgb(0 0 0/.3) 100%),
    radial-gradient(ellipse 30% 34% at 18% 70%,transparent 30%,rgb(0 0 0/.55) 70%,#000 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to bottom,rgb(0 0 0/.95) 0,rgb(0 0 0/.6) 50%,rgb(0 0 0/.3) 100%),
    radial-gradient(ellipse 30% 34% at 18% 70%,transparent 30%,rgb(0 0 0/.55) 70%,#000 100%);
  mask-composite:intersect;
}
.close canvas.tron{
  -webkit-mask-image:
    linear-gradient(to bottom,rgb(0 0 0/.1) 0,rgb(0 0 0/.6) 50%,rgb(0 0 0/.9) 100%),
    radial-gradient(ellipse 34% 30% at 22% 72%,transparent 30%,rgb(0 0 0/.55) 70%,#000 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to bottom,rgb(0 0 0/.1) 0,rgb(0 0 0/.6) 50%,rgb(0 0 0/.9) 100%),
    radial-gradient(ellipse 34% 30% at 22% 72%,transparent 30%,rgb(0 0 0/.55) 70%,#000 100%);
  mask-composite:intersect;
}
/* while a text resolves it wears the brand at the edge, then its own colour */
.materialising{color:var(--brand) !important;transition:none}
/* while a text derezzes (Tron.derez, .jolt) it carries a chromatic split
   that flickers: the two layers' colours pulled apart either side of it */
.glitching{animation:tron-split .12s steps(2,jump-none) infinite;will-change:transform}
@keyframes tron-split{
  0%{text-shadow:-.12em 0 rgb(57 135 229/.75),.12em 0 rgb(255 58 31/.75);transform:translateX(1px)}
  100%{text-shadow:.12em 0 rgb(57 135 229/.75),-.12em 0 rgb(255 58 31/.75);transform:translateX(-1px)}
}
.hero .banner-wrap{margin:0}
.hero-stage{
  position:relative;flex:1;
  max-width:var(--wide);width:100%;margin:0 auto;
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  align-items:end;gap:0 24px;
  min-height:420px;
}
.hero-copy{position:relative;z-index:2;padding:36px 0 44px}
.hero .tag{
  font-family:var(--sans);font-size:clamp(24px,2.6vw,36px);font-weight:600;
  letter-spacing:-.025em;line-height:1.08;color:var(--ink);margin:0 0 16px;
  max-width:19ch;
}
.hero .hero-sub{font-size:15.5px;line-height:1.55;color:var(--dim);max-width:44ch;margin:0 0 26px}
.hero .cta{display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center;margin:0}
.hero .cta a:not(.btn){
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);padding:12px 0;
}
.hero .cta a:not(.btn):hover{color:var(--ink)}
/* the board is the picture: right of the copy, larger than its column, its
   lower-left corner (transparent in the render) tucked behind the text */
.hero-board{
  position:relative;z-index:1;margin:0;
  align-self:end;justify-self:end;
  width:min(110%,980px);margin-right:-3%;margin-bottom:-1%;
  pointer-events:none;
}
.hero-board img{display:block;width:100%;height:auto}
/* a fade on the left so the copy stays legible where the board runs under it */
.hero-board::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to right,rgb(11 12 15/.85) 0,rgb(11 12 15/0) 26%);
  z-index:1;
}

/* the board's own facts, as a row of label / value pairs */
.spec{
  position:relative;z-index:2;
  max-width:var(--wide);width:100%;margin:0 auto;
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule);border-bottom:0;
}
.spec > div{background:var(--bg);padding:16px 18px 18px;min-width:0}
.spec dt{
  font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dimmer);margin:0 0 8px;
}
.spec dd{margin:0;font-size:13.5px;line-height:1.45;color:var(--ink)}
.spec dd small{display:block;color:var(--dim);font-size:12.5px;margin-top:3px}

/* ---- a block: eyebrow, headline, support ---------------------------------- */
body.home main > .block{
  padding:112px 26px;border-top:1px solid var(--rule);
}
.block > .inner{max-width:var(--wide);margin:0 auto}
.block .kicker{margin-bottom:28px}
.block h2{
  font-family:var(--sans);font-weight:600;
  font-size:clamp(28px,3.4vw,46px);line-height:1.06;letter-spacing:-.025em;
  color:var(--ink);margin:0 0 18px;max-width:24ch;
}
.block h2.statement{
  font-size:clamp(34px,5.4vw,76px);line-height:1;letter-spacing:-.035em;
  max-width:22ch;margin-bottom:34px;
}
.block .sub{font-size:clamp(15px,1.4vw,18px);line-height:1.5;color:var(--dim);max-width:52ch;margin:0}
.support{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 48px;
  max-width:900px;
}
.support p{font-size:16px;line-height:1.6;color:var(--dim);margin:0;max-width:44ch}
.support p strong{color:var(--ink);font-weight:500}

/* two columns: the words left, the picture right */
.block-split .inner{
  display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);
  gap:40px 64px;align-items:center;
}
.side-board{margin:0;min-width:0}
.side-board img{display:block;width:100%;height:auto}
.side-board figcaption{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--dimmer);
  margin:14px 0 0;
}

/* ---- the sequence ---------------------------------------------------------- */
.stages{list-style:none;margin:36px 0 0;padding:0;border-top:1px solid var(--rule);max-width:560px}
.stages li{
  display:grid;grid-template-columns:38px minmax(0,1fr);gap:16px;align-items:baseline;
  padding:14px 0;border-bottom:1px solid var(--rule);
}
.stages b{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.08em;color:var(--dimmer)}
.stages span{font-size:15.5px;line-height:1.45;color:var(--ink)}
.stages li:last-child span{color:var(--ink)}

/* ---- the systems: three, side by side --------------------------------------- */
.cards{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule);margin:44px 0 0;
}
.card{display:flex;flex-direction:column;background:var(--bg);transition:background .14s linear}
.card:hover{background:#0f1116}
.card-media{border-bottom:1px solid var(--rule)}
.card-media canvas{display:block;width:100%;height:230px;touch-action:pan-y}
.card-body{display:flex;flex-direction:column;flex:1;padding:24px 24px 22px}
.card h3{
  font-family:var(--sans);font-size:clamp(22px,2vw,28px);font-weight:600;
  line-height:1;letter-spacing:-.025em;color:var(--ink);margin:0 0 10px;
}
.card .role{font-family:var(--mono);font-size:11.5px;line-height:1.45;color:var(--dim);margin:0 0 18px}
.card .desc{font-size:14px;line-height:1.55;color:var(--dim);margin:0 0 24px}
.card .go{
  margin-top:auto;
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dimmer);
  border-top:1px solid var(--rule);padding:14px 0 0;
}
.card:hover .go{color:var(--ink)}

/* ---- the numbers ------------------------------------------------------------ */
.stats{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule);margin:44px 0 0;
}
.stats > div{background:var(--bg);padding:28px 24px 30px;min-width:0}
.stats b{
  display:block;font-family:var(--mono);font-weight:500;
  font-size:clamp(30px,3.6vw,50px);line-height:1;letter-spacing:-.03em;
  color:var(--ink);font-variant-numeric:tabular-nums;margin:0 0 16px;white-space:nowrap;
}
.stats b.pair{font-size:clamp(24px,2.7vw,38px);padding:4px 0 6px}
.stats span{display:block;font-size:14px;line-height:1.45;color:var(--ink)}
.stats em{display:block;font-style:normal;font-size:12.5px;line-height:1.5;color:var(--dim);margin-top:10px}

/* ---- the principles: four, two by two ---------------------------------------- */
.principles{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 64px;
  margin:36px 0 0;border-top:1px solid var(--rule);
}
/* site.css numbers a thread page's principles and spaces them; here they are
   four equals in a grid, not a sequence */
.principles .principle{margin:0;padding:28px 0 30px;border-bottom:1px solid var(--rule)}
.principles .principle h3::before{content:none}
.principle h3{
  font-family:var(--sans);font-size:20px;font-weight:600;letter-spacing:-.015em;
  line-height:1.2;color:var(--ink);margin:0 0 10px;
}
.principle p{font-size:15px;line-height:1.6;color:var(--dim);margin:0;max-width:44ch}

/* ---- the close: the board from low, then the last word ----------------------- */
body.home main > .close{position:relative;overflow:hidden;border-top:1px solid var(--rule);padding:0 26px 96px}
.close .inner{max-width:var(--wide);margin:0 auto;position:relative}
.close-board{margin:0 auto;width:min(100%,1180px);padding:72px 0 24px}
.close-board img{display:block;width:100%;height:auto}
.close .kicker{margin-bottom:28px}
.close h2{
  font-family:var(--sans);font-weight:600;font-size:clamp(30px,4.2vw,60px);
  line-height:1.02;letter-spacing:-.03em;color:var(--ink);margin:0 0 22px;max-width:22ch;
}
/* p:not(.kicker): a bare `.close p` outranks `.kicker` and would set the stamp in body type */
.close p:not(.kicker){font-size:16px;line-height:1.6;color:var(--dim);max-width:50ch;margin:0 0 30px}
.threads{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule);margin:56px 0 0;
}
.threads a{background:var(--bg);padding:20px 20px 22px;display:block;transition:background .14s linear}
.threads a:hover{background:#0f1116}
.threads b{display:block;font-family:var(--sans);font-size:17px;font-weight:600;letter-spacing:-.015em;color:var(--ink);margin:0 0 6px}
.threads span{display:block;font-family:var(--mono);font-size:11.5px;line-height:1.45;color:var(--dim)}

/* ---- narrower ------------------------------------------------------------------ */
@media (max-width:1100px){
  .hero-stage{grid-template-columns:minmax(0,6fr) minmax(0,6fr)}
  .hero-board{width:min(120%,900px)}
  .spec{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  .hero{min-height:0;padding-top:36px}
  .hero-stage{grid-template-columns:1fr;gap:0}
  .hero-board{
    order:-1;width:112%;margin:8px -6% 0;justify-self:center;
  }
  .hero-board::before{display:none}
  .hero-copy{padding:8px 0 36px}
  body.home main > .block{padding:80px 26px}
  .block-split .inner{grid-template-columns:1fr;gap:36px}
  .side-board{max-width:640px}
  .support{grid-template-columns:1fr;gap:18px}
  .cards{grid-template-columns:1fr}
  .card-media canvas{height:200px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .principles{grid-template-columns:1fr;gap:0}
  .threads{grid-template-columns:1fr}
}
@media (max-width:520px){
  header nav.bar a.btn{padding:9px 12px;font-size:10.5px}
  .hero{padding:28px 20px 0}
  .hero .tag{font-size:26px}
  .spec{grid-template-columns:1fr 1fr}
  .spec > div{padding:13px 14px 14px}
  body.home main > .block{padding:64px 20px}
  .block h2.statement{font-size:36px}
  .stats{grid-template-columns:1fr}
  .stats b,.stats b.pair{white-space:normal}
  body.home main > .close{padding:0 20px 64px}
  .close-board{padding-top:48px}
}
/* the banner-fit script keeps the wordmark on one line; a phone on its side
   caps the column so the wordmark does not fill the hero on its own */
@media (max-height:520px) and (orientation:landscape){
  .hero{padding-top:24px}
  .hero .banner-wrap{max-width:min(520px,62vw)}
}

/* ---- about: the person, the pace, the works, the road --------------------- */
.who{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px 72px;align-items:start}
.portrait{margin:0;min-width:0;max-width:440px}
.portrait img{display:block;width:100%;height:auto}
.who-copy p:not(.kicker){font-size:16px;line-height:1.6;color:var(--dim);max-width:52ch;margin:0 0 18px}
.who-copy p.kicker{margin:0 0 28px}
.who-copy p strong{color:var(--ink);font-weight:500}
.who-copy p.why{color:var(--ink);border-top:1px solid var(--rule);padding-top:22px;margin-top:28px}
.works,.next{list-style:none;margin:40px 0 0;padding:0;border-top:1px solid var(--rule)}
.works li,.next li{
  display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:8px 48px;
  padding:22px 0 24px;border-bottom:1px solid var(--rule);
}
.works b,.next b{font-family:var(--sans);font-size:18px;font-weight:600;letter-spacing:-.015em;line-height:1.25;color:var(--ink)}
.works b a{border-bottom:1px solid var(--rule)}
.works b a:hover{border-bottom-color:var(--ink)}
.works span,.next span{font-size:15px;line-height:1.6;color:var(--dim);max-width:60ch}
/* the road is a sequence -- the order they are being worked -- so it counts */
.next{counter-reset:road}
.next li{grid-template-columns:38px minmax(0,4fr) minmax(0,8fr)}
.next li::before{
  counter-increment:road;content:counter(road,decimal-leading-zero);
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.08em;color:var(--dimmer);
  padding-top:5px;
}
@media (max-width:900px){
  .who{grid-template-columns:1fr;gap:28px}
  .portrait{max-width:360px}
  .works li{grid-template-columns:1fr;gap:6px}
  .next li{grid-template-columns:38px minmax(0,1fr)}
  .next span{grid-column:2}
}

/* ---- credits: whose work is in the tree, six lists ---------------------- */
/* the opening is a line of the builder's, set as the headline, with who said
   it under it in the kicker's type and no tick */
.block h2.quote{max-width:26ch;margin-bottom:14px}
.by{
  font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dimmer);
  margin:0 0 30px;
}
/* the jump row under the opening: one line of the sections, mono */
.jump{
  display:flex;flex-wrap:wrap;gap:10px 28px;
  margin:44px 0 0;padding-top:22px;border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dimmer);
}
.jump a:hover{color:var(--ink)}
/* a row: the name and who it is left, what was taken right -- the works
   list's grid, with a mono line under the name for the author and licence */
.credits{list-style:none;margin:36px 0 0;padding:0;border-top:1px solid var(--rule)}
.credits li{
  display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:8px 48px;
  padding:20px 0 22px;border-bottom:1px solid var(--rule);
}
.credits b{font-family:var(--sans);font-size:17px;font-weight:600;letter-spacing:-.015em;line-height:1.3;color:var(--ink)}
.credits b a{border-bottom:1px solid var(--rule)}
.credits b a:hover{border-bottom-color:var(--ink)}
.credits b small{
  display:block;font-family:var(--mono);font-size:10.5px;font-weight:400;
  letter-spacing:.06em;line-height:1.5;color:var(--dimmer);margin-top:7px;
}
.credits b small a{border-bottom-color:transparent}
.credits b small a:hover{border-bottom-color:var(--dimmer)}
.credits span{font-size:15px;line-height:1.6;color:var(--dim);max-width:60ch}
.credits span a{border-bottom:1px solid var(--rule)}
.credits span a:hover{color:var(--ink);border-bottom-color:var(--ink)}
.credits code,.block .sub code{
  font-family:var(--mono-code);font-size:.92em;color:var(--ink);white-space:nowrap;
}
/* the opening's support columns sit under its sub line, not against it */
.block .sub + .support{margin-top:34px}
/* the papers are grouped by what each was used for; a group heading is a
   kicker without the tick, and the rows under it are tighter */
.block h3.group{
  font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--dim);
  margin:48px 0 0;
}
.credits.refs{margin-top:14px}
.credits.refs li{padding:16px 0 18px}
.credits.refs b{font-size:15.5px}
.credits.refs span{font-size:14.5px}
.block .sub em{font-style:italic;color:var(--ink)}
@media (max-width:900px){
  .credits li{grid-template-columns:1fr;gap:6px}
  .jump{gap:10px 20px}
}

/* ---- charts: the retro's and the about page's, one set of rules ------------ */
/* the retro's charts. Series colours are a step of the brand orange and a
   blue chosen against this surface (OKLCH L inside the dark band, CVD
   ΔE 27, 3:1 contrast); text never wears them. */
:root{--s1:#e06d0c;--s2:#3987e5;--axis:#2a2e36;--tipbg:#15181e}
.chart{margin:0 0 28px}
.chart figcaption{font-family:var(--mono);font-size:12.5px;font-weight:500;
  color:var(--ink);margin:0 0 10px;letter-spacing:.01em}
.chart figcaption span{display:block;font-family:var(--sans);font-weight:400;
  font-size:13px;color:var(--dim);margin-top:3px;letter-spacing:0}
.chart .plot{width:100%}
.chart svg{display:block;overflow:visible;font-family:var(--sans)}
.chart svg .tick{font-family:var(--mono);font-size:10px;fill:var(--dimmer);
  font-variant-numeric:tabular-nums}
.chart svg .lbl{font-size:11px;fill:var(--dim)}
.chart svg .val{font-family:var(--mono);font-size:11px;fill:var(--ink);
  font-variant-numeric:tabular-nums}
.chart svg .num{font-family:var(--mono);font-size:9px;fill:var(--ink);
  font-weight:600}
.chart svg .leg{font-size:11px;fill:var(--dim)}
/* the key under a chart: the marks as the chart draws them, one short line each */
.chart ul.marks{list-style:none;margin:8px 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:4px 20px;
  font-size:12px;line-height:1.4;color:var(--dim)}
.chart ul.marks li{display:flex;gap:7px;align-items:center}
.chart ul.marks svg{flex:none;overflow:visible}
.chart ul.marks li.note{color:var(--dimmer)}
.multiples{display:grid;grid-template-columns:1fr 1fr;gap:0 26px}
/* retro-draw floors a chart at 280px, so two of them plus the gutter need
   586px of column: below that the pair pushed the whole band sideways
   instead of shrinking. min-width:0 keeps the SVG from doing it again. */
.multiples > *{min-width:0}
@media (max-width:700px){.multiples{grid-template-columns:1fr}}
ol.key{list-style:none;margin:6px 0 0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:4px 18px;
  font-size:12.5px;line-height:1.45;color:var(--dim)}
@media (max-width:560px){ol.key{grid-template-columns:1fr}}
ol.key li{display:flex;gap:9px;align-items:baseline}
ol.key b{font-family:var(--mono);font-size:10.5px;font-weight:600;
  color:var(--ink);flex:none;width:16px;text-align:right}
.viz-tip{position:fixed;z-index:10;pointer-events:none;
  background:var(--tipbg);border:1px solid var(--rule);color:var(--ink);
  font-size:12px;line-height:1.45;padding:7px 10px;border-radius:7px;
  max-width:260px;box-shadow:0 8px 24px -8px rgb(0 0 0/.7)}
.viz-tip b{font-family:var(--mono);font-weight:500;font-size:11.5px}
.viz-tip i{color:var(--dim);font-style:normal;display:block}
details.tables{margin:6px 0 0}
details.tables summary{font-family:var(--mono);font-size:11.5px;
  color:var(--dim);cursor:pointer;letter-spacing:.02em;list-style:none}
details.tables summary::before{content:"▸ ";color:var(--brand)}
details.tables[open] summary::before{content:"▾ "}
details.tables summary::-webkit-details-marker{display:none}
details.tables table{border-collapse:collapse;margin:14px 0 6px;
  font-size:12.5px;width:100%}
details.tables caption{text-align:left;font-family:var(--mono);
  font-size:11.5px;color:var(--dim);padding:0 0 6px}
details.tables th,details.tables td{text-align:left;padding:5px 10px 5px 0;
  border-bottom:1px solid var(--rule);color:var(--dim);vertical-align:top}
details.tables th{color:var(--ink);font-weight:600}
details.tables td.n{font-family:var(--mono);font-variant-numeric:tabular-nums;
  color:var(--ink);white-space:nowrap}
.charts{margin:56px 0 0;max-width:860px}
.charts .chart{margin:0 0 44px}
.charts .chart:last-child{margin-bottom:0}

/* ---- the app, feature by feature ------------------------------------------
   One band a feature, the picture large and the words beside it, sides
   alternating (`.flip`), a wide one full width (`.wide`) -- the shape of a
   feature page. Every picture is a real screenshot (landing/shots.py), so it
   is framed as a window: a hairline, no shadow, no device chrome. */
body.home main > .features{padding-bottom:0}
.features > .inner .sub{margin-bottom:8px}
.feature{padding:72px 0 0}
.feature .inner{
  max-width:var(--wide);margin:0 auto;
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:36px 64px;align-items:center;
}
.feature.flip .inner{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.feature.flip .feature-copy{order:2}
.feature.wide .inner{grid-template-columns:1fr;gap:28px}
.feature.wide .feature-copy{max-width:640px}
/* a wide band's words sit left or right by turns, the way the split bands do */
.feature.wide.flip .feature-copy{order:0;margin-left:auto}
/* the thread's two columns are tall, so the words for them start level with their tops */
.feature.top .inner{align-items:start}
.feature:last-child{padding-bottom:112px}
.feature-copy .kicker{margin-bottom:22px}
.feature-copy h3{
  font-family:var(--sans);font-weight:600;
  font-size:clamp(24px,2.6vw,36px);line-height:1.08;letter-spacing:-.025em;
  color:var(--ink);margin:0 0 16px;max-width:18ch;
}
.feature-copy p:not(.kicker){font-size:15.5px;line-height:1.6;color:var(--dim);margin:0 0 14px;max-width:46ch}
.feature-copy p:last-child{margin-bottom:0}
.feature-copy kbd{
  font-family:var(--mono);font-size:11px;color:var(--ink);
  border:1px solid var(--rule);border-radius:3px;padding:1px 5px 0;
}
.feature-media{margin:0;min-width:0}
.feature-media img{
  display:block;width:100%;height:auto;
  border:1px solid var(--rule);background:#0b0c0f;
}
.feature-media figcaption{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--dimmer);
  margin:12px 0 0;
}
/* the thread is a narrow column, so its two crops stand side by side, tops
   level, each no wider than it was on screen */
.feature-media.pair{
  display:grid;grid-template-columns:repeat(2,minmax(0,300px));gap:16px;
  justify-content:end;align-items:start;
}
.feature-media.pair figcaption{grid-column:1/-1}
@media (max-width:900px){
  .feature{padding-top:56px}
  .feature .inner,.feature.flip .inner{grid-template-columns:1fr;gap:24px}
  .feature.flip .feature-copy{order:0}
  .feature.wide.flip .feature-copy{margin-left:0}
  .feature:last-child{padding-bottom:80px}
  .feature-media.pair{grid-template-columns:repeat(2,minmax(0,1fr));justify-content:start}
}
@media (max-width:520px){
  .feature:last-child{padding-bottom:64px}
  .feature-copy h3{font-size:24px}
  /* a phone is one thread column wide, so the two crops stack */
  .feature-media.pair{grid-template-columns:minmax(0,320px)}
}