/* archive — careers, imprint, privacy, news index, news posts
   The subpage cluster minus core. All eight pages carry a byte-identical
   stylesheet (18,295 B) emitted by build/subpages/build-sub.mjs, so this file
   plus core is the whole of it — the eight pages have no remainder.
   /about and /contact do NOT link this file. Measured, they share exactly one
   rule with this cluster beyond core: linking it would push 143 foreign rules
   onto each of them and change how both pages render. Their shared ancestry is
   with the service pages, not with the subpages — see instrument.css.
*/

html{-webkit-text-size-adjust:100%}
b,strong,h1,h2,h3,h4,em{font-weight:400;font-style:normal}
button,input,select,textarea{font:inherit;color:inherit;background:none;border:0}
button{cursor:pointer}
.arrow{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;background:var(--signal);color:var(--ink);flex:none}
.arrow svg{width:16px;height:16px}
.link{display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-size:13px;letter-spacing:-0.02em;text-transform:uppercase;min-height:44px}
.link .ln{border-bottom:1px solid var(--hair-d);padding-bottom:2px}
.light .link .ln{border-bottom-color:var(--hair-l)}
.link .ar{width:14px;height:14px;flex:none}
.acts{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:14px;min-height:44px;flex:0 0 auto}
.brand .wm .name{font-size:17px;letter-spacing:-0.01em;white-space:nowrap}
.brand .wm .line{font-family:var(--mono);font-size:11px;letter-spacing:0.02em;text-transform:uppercase;color:var(--mute-d);margin-top:3px;white-space:nowrap}
.nav ul a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:12px;border:1px solid transparent;color:var(--mute-d)}
.nav ul a[aria-current="page"]{color:var(--paper);border-color:var(--hair-d)}
/* The light band that opens a document — the archive year, a post, a legal text — takes a
   little more air above it than a section normally does. This was four inline `padding-top`
   declarations in build-sub.mjs, which no media query can reach, so at 390px those four
   sections alone kept their 96px desktop opening. Same value, now reachable. */
.light.open{padding-top:96px}
/* page hero */
.hero{padding:96px 0 120px}
.hero h1{font-size:clamp(3rem,7.2vw,6.5rem);line-height:1;letter-spacing:-0.028em;max-width:76%;margin-top:28px;text-wrap:pretty}
.hero.post h1{font-size:clamp(2.5rem,5.6vw,5rem);max-width:80%}
.hero .low{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;margin-top:clamp(4.5rem,12vh,8.75rem);align-items:start}
.hero .body{color:var(--mute-d);max-width:46ch;text-wrap:pretty}
.hero .acts{margin-top:40px}
.hero .meta{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.head{display:grid;gap:24px;margin-bottom:64px}
.head h2{font-size:clamp(2.5rem,5.2vw,4.6875rem);line-height:1.05;letter-spacing:-0.02em;max-width:14ch;margin-top:4px;text-wrap:pretty}
.h3{font-size:clamp(2.125rem,4.2vw,3.625rem);line-height:1.1;letter-spacing:-0.012em;text-wrap:pretty}
.h4{font-size:clamp(1.625rem,2.6vw,2rem);line-height:1.15;letter-spacing:-0.012em;text-wrap:pretty}
.lede{font-size:24px;line-height:1.2;letter-spacing:-0.006em;max-width:24em;text-wrap:pretty}
.copy{color:var(--mute-d);max-width:46ch;text-wrap:pretty}
.light .copy{color:var(--mute-l)}
.copy + .copy{margin-top:18px}
/* ledger rows */
.row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:40px;padding:56px 0}
.row + .row,.row.rule{border-top:1px solid var(--hair-d)}
.light .row + .row,.light .row.rule{border-top-color:var(--hair-l)}
.row .name{font-size:clamp(2.125rem,4vw,3.25rem);line-height:1;letter-spacing:-0.018em;margin-top:18px;text-wrap:pretty}
.row .sub{font-size:22px;line-height:1.3;letter-spacing:-0.004em;margin-bottom:16px;text-wrap:pretty;max-width:30em}
.row .body{color:var(--mute-d);font-size:17px;text-wrap:pretty;max-width:52ch}
.light .row .body{color:var(--mute-l)}
.row .go{margin-top:28px}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px}
.lbl{display:block;margin-bottom:6px;color:var(--mute-d)}
.light .lbl{color:var(--mute-l)}
/* hairline lists */
.list li{padding:16px 0;border-top:1px solid var(--hair-d);font-size:17px;line-height:1.3;text-wrap:pretty}
.list li:last-child{border-bottom:1px solid var(--hair-d)}
.light .list li,.light .list li:last-child{border-color:var(--hair-l)}
.list li .k{display:block;margin-bottom:6px}
.list li .v{color:var(--mute-d)}
.light .list li .v{color:var(--mute-l)}
.steps li{display:grid;grid-template-columns:40px 1fr;gap:16px;padding:24px 0;border-top:1px solid var(--hair-d)}
.steps li:last-child{border-bottom:1px solid var(--hair-d)}
.light .steps li,.light .steps li:last-child{border-color:var(--hair-l)}
.steps .n{font-family:var(--mono);font-size:13px;letter-spacing:-0.02em;color:var(--mute-d);padding-top:6px}
.light .steps .n{color:var(--mute-l)}
.steps .t{font-size:22px;line-height:1.25;letter-spacing:-0.004em;margin-bottom:8px;text-wrap:pretty}
.steps .d{color:var(--mute-d);font-size:17px;text-wrap:pretty;max-width:52ch;margin:0}
.prose .steps li{margin:0}
.light .steps .d{color:var(--mute-l)}
/* proof line */
.proof{padding:56px 0;border-top:1px solid var(--hair-d);border-bottom:1px solid var(--hair-d)}
.proof .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:40px;align-items:baseline}
.proof p{font-size:clamp(1.5rem,2.8vw,2.125rem);line-height:1.2;letter-spacing:-0.008em;text-wrap:pretty}
.proof .link{margin-top:20px}
/* No page in Archive mode renders a `.card` — grep `public/` and the only one is the
   homepage's, which is home.css's copy. That copy moved to container queries in August
   2026 and this one deliberately did not: with nothing on any page to measure, the change
   could not be verified, and `tools/card-probe.mjs` has no card here to walk. The two
   copies are no longer the same component. Before putting a card on a subpage, take
   home.css's version — the viewport ladder below is what it was fixed for. */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cards.two-up{grid-template-columns:1fr 1fr}
.card{background:var(--paper);border-radius:28px;padding:40px;display:flex;flex-direction:column;min-height:300px}
.card .meta{display:flex;gap:12px;align-items:center;color:var(--mute-l);flex-wrap:wrap}
.card h3{font-size:30px;line-height:1.15;letter-spacing:-0.012em;margin:32px 0 14px;text-wrap:pretty}
.card p{color:var(--mute-l);font-size:17px;text-wrap:pretty}
.card .link{margin-top:auto;padding-top:28px}
.card .list{margin-top:8px}
.card .list li{padding:12px 0}
/* entries: news index */
.entry{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:40px;padding:40px 0;border-top:1px solid var(--hair-l)}
.entry:last-child{border-bottom:1px solid var(--hair-l)}
.entry .meta{display:flex;gap:12px;color:var(--mute-l);flex-wrap:wrap}
.entry h3{font-size:clamp(1.625rem,2.8vw,2.125rem);line-height:1.15;letter-spacing:-0.012em;margin-bottom:12px;text-wrap:pretty}
.entry p{color:var(--mute-l);font-size:17px;text-wrap:pretty;max-width:60ch}
.entry .link{margin-top:16px}
/* prose: posts and legal */
.prose{max-width:68ch;font-size:19px;line-height:1.45;letter-spacing:-0.002em}
.prose p{margin:0 0 22px;text-wrap:pretty}
.prose h2{font-size:30px;line-height:1.15;letter-spacing:-0.012em;margin:56px 0 18px;text-wrap:pretty}
.prose h3{font-size:22px;line-height:1.25;letter-spacing:-0.006em;margin:36px 0 12px}
.prose h2:first-child{margin-top:0}
.prose ul,.prose ol{margin:0 0 22px;padding-left:1.3em}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li{margin-bottom:10px;text-wrap:pretty}
.prose li::marker{color:var(--mute-l)}
.prose a{border-bottom:1px solid var(--hair-l);padding-bottom:1px}
.prose blockquote{font-size:26px;line-height:1.25;letter-spacing:-0.008em;padding:28px 0;margin:40px 0;border-top:1px solid var(--hair-l);border-bottom:1px solid var(--hair-l);text-wrap:pretty}
.prose code{font-family:var(--mono);font-size:0.82em;letter-spacing:-0.01em;background:var(--paper);border:1px solid var(--hair-l);border-radius:4px;padding:1px 6px}
.prose pre{background:var(--ink);color:var(--bone);border-radius:12px;padding:22px 26px;font-family:var(--mono);font-size:13px;line-height:1.6;letter-spacing:-0.01em;overflow-x:auto;margin:0 0 28px;white-space:pre}
.prose pre .pr{color:var(--mute-d)}
.prose pre .ac{color:var(--paper)}
.prose pre .lb{color:var(--mute-d)}
.prose pre .mu{color:var(--dim-d)}
.prose pre .wn,.prose pre .ok{color:var(--signal)}
.prose .cap{display:block;color:var(--mute-l);margin-bottom:12px}
.prose .note{color:var(--mute-l);font-size:17px}
.prose address{font-style:normal}
.tile{background:var(--paper);border-radius:16px;padding:28px 32px;margin:0 0 32px}
.tile .q{font-size:22px;line-height:1.25;margin:10px 0 20px}
.tile .r{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 20px;padding:12px 0;border-top:1px solid var(--hair-l);align-items:baseline}
.tile .r .b{grid-column:1/-1;height:2px;background:var(--hair-l);position:relative}
.tile .r .b i{position:absolute;left:0;top:0;bottom:0;background:var(--ink)}
.tile .r.rec .b i{background:var(--signal)}
.tile .r .c{color:var(--mute-l)}
.tile .big{font-size:24px;line-height:1.25;letter-spacing:-0.006em;margin:12px 0 18px;text-wrap:pretty}
.tile .bar{height:2px;background:var(--hair-l);position:relative;margin:0 0 12px}
.tile .bar i{position:absolute;left:0;top:0;bottom:0;background:var(--signal)}
.tile .kv{display:flex;justify-content:space-between;gap:16px;color:var(--mute-l);flex-wrap:wrap}
.tile ul{list-style:none;padding:0;margin:0}
.tile ul li{padding:12px 0;border-top:1px solid var(--hair-l);margin:0}
.tile ul li small{display:block;font-family:var(--mono);font-size:12px;letter-spacing:-0.01em;color:var(--mute-l);margin-top:6px;text-transform:uppercase}
.tile .who{display:flex;gap:12px;flex-wrap:wrap;color:var(--mute-l);margin-bottom:12px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:0 0 32px}
.grid4 > div,.pair > div{background:var(--paper);border-radius:16px;padding:24px}
.grid4 .n{display:block;color:var(--mute-l);margin-bottom:10px}
.grid4 .t{font-size:20px;margin-bottom:8px}
.grid4 .d{color:var(--mute-l);font-size:15px;line-height:1.35;text-wrap:pretty}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0 0 32px}
.pair .n{display:block;color:var(--mute-l);margin-bottom:12px}
.pair p{margin:0 0 10px;font-size:17px;line-height:1.35}
.pair .m{font-family:var(--mono);font-size:12px;letter-spacing:-0.01em;color:var(--mute-l);text-transform:uppercase}
.pair .price{font-size:40px;line-height:1;letter-spacing:-0.02em;margin:8px 0 14px}
.pair .price small{display:block;font-family:var(--mono);font-size:12px;letter-spacing:-0.01em;color:var(--mute-l);text-transform:uppercase;margin-top:8px}
.postnav{margin-top:72px;display:grid;grid-template-columns:1fr 1fr;gap:32px;border-top:1px solid var(--hair-l);padding-top:28px}
.postnav .lbl{margin-bottom:10px}
.postnav a{font-size:20px;line-height:1.25;letter-spacing:-0.006em;border-bottom:1px solid var(--hair-l);padding-bottom:1px}
.postnav .end{color:var(--mute-l);font-size:17px}
.postnav .r{text-align:right}
.toc{margin:0 0 56px}
.toc ol{list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 32px}
.toc li{margin:0}
.toc a{display:inline-flex;min-height:36px;align-items:center;border:0;font-family:var(--mono);font-size:13px;letter-spacing:-0.02em;text-transform:uppercase;color:var(--mute-l)}
.toc a:hover{color:var(--ink)}
.legal .prose h2{font-size:24px;margin:48px 0 14px}
.legal .prose h3{font-size:19px}
.legal .prose p{margin-bottom:14px}
.legal .upd{margin-top:56px;padding-top:24px;border-top:1px solid var(--hair-l)}
/* form */
.form{display:grid;gap:24px}
.field{display:grid;gap:10px}
.field label{color:var(--mute-l)}
.field input,.field select,.field textarea{width:100%;background:var(--paper);border:1px solid var(--hair-l);border-radius:8px;padding:14px 16px;font-size:17px;line-height:1.3;color:var(--ink);min-height:52px;-webkit-appearance:none;appearance:none}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23586463' stroke-width='1.5'%3E%3Cpath d='M3.5 6 8 10.5 12.5 6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:14px;padding-right:44px}
.field textarea{min-height:150px;resize:vertical}
.form .sub-row{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.form .meta{color:var(--mute-l);font-size:15px;max-width:40ch}
.mails{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.mails div{padding:20px 0;border-top:1px solid var(--hair-l)}
.mails .lbl{margin-bottom:8px}
.mails a{font-size:17px;border-bottom:1px solid var(--hair-l);padding-bottom:1px;word-break:break-all}
/* closing */
.close{padding:140px 0 130px}
.close h2{font-size:clamp(2.5rem,5.4vw,4.6875rem);line-height:1.05;letter-spacing:-0.02em;text-wrap:pretty}
.close .sub{color:var(--mute-d);margin:32px 0 40px;max-width:44ch;font-size:22px;line-height:1.3;text-wrap:pretty}
/* responsive */
@media (max-width:1024px){
  .fgrid{grid-template-columns:1fr 1fr 1fr}
  .fgrid .about{grid-column:1/-1}
  .hero h1{max-width:90%}
  .cards{grid-template-columns:1fr 1fr}
  .grid4{grid-template-columns:1fr 1fr}
  .mails{grid-template-columns:1fr 1fr}
}
@media (max-width:1139px){
  .nav .wrap{gap:16px}
  .nav ul{gap:2px}
  .nav ul a{padding:0 9px}
  .nav .cta{margin-left:0}
}
@media (max-width:980px){
  .nav ul{display:none;position:absolute;left:0;right:0;top:100%;background:var(--ink);padding:8px var(--gut) 24px;flex-direction:column;gap:0;margin:0;z-index:5;border-bottom:1px solid var(--hair-d)}
  .nav[data-open="true"] ul{display:flex}
  .nav ul a{min-height:52px;padding:0;border-radius:0;color:var(--paper);font-size:15px}
  .nav ul a[aria-current="page"]{border-color:transparent}
  .nav ul li + li a{border-top:1px solid var(--hair-d)}
  .nav .cta{display:none}
  .m-cta{display:block;padding-top:20px}
  .nav ul li.m-cta a{border-top:0;min-height:44px;padding:10px 16px;border-radius:8px;color:var(--ink);font-size:13px}
  .menu{display:inline-flex;align-items:center;justify-content:center}
}
@media (max-width:760px){
  br.d{display:none}
  section{padding:88px 0}
  .brand .wm .name{font-size:15px}
  .hero{padding:48px 0 88px}
  .hero h1,.hero.post h1{max-width:100%;font-size:clamp(2.5rem,11.5vw,4rem)}
  .hero .low{grid-template-columns:1fr;gap:32px;margin-top:56px}
  .hero .sub{max-width:100%}
  .head h2{max-width:100%}
  .row,.two,.proof .wrap,.entry,.cards,.cards.two-up,.pair,.postnav,.mails,.toc ol{grid-template-columns:1fr}
  .row{gap:24px;padding:40px 0}
  .two{gap:32px}
  .proof{padding:48px 0}
  .card{min-height:0;padding:32px;border-radius:24px}
  .grid4{grid-template-columns:1fr}
  .entry{gap:16px;padding:32px 0}
  .prose{font-size:18px}
  .prose blockquote{font-size:22px}
  .tile{padding:22px}
  .postnav .r{text-align:left}
  .close{padding:104px 0 96px}
  .fgrid{grid-template-columns:1fr 1fr}
  footer{padding-top:80px}
}
/* ---------- the phone, composed ----------
   Everything above this line is one ladder from 1440px down to 760px, and a 390px phone was
   getting the bottom rung of it: a tablet layout with less room. Three things are decided here
   that the tablet layout has no reason to decide.

   1. The type scale. Above, eight steps run 75px → 17px, and by 390px the clamps have collapsed
      them into 45 / 40 / 34 / 26 / 24 / 22 / 18 / 17 — five of those inside eight pixels of each
      other, which the reader cannot rank, so the hierarchy stops working as hierarchy. A phone
      has room for four steps. These are the four; the ranks that lost their size keep their
      place through colour and the mono eyebrow that already sits above them.
   2. The rhythm. 88px above and below every section is a 1440px measure. At 390px it reads as
      an empty page, and it costs a screenful per boundary on documents that are already twelve
      screens long.
   3. Density over air. Archive mode's quality is type and rhythm, and a narrow column wants
      packing, not breathing room — which is also what puts more than one idea on a screen. */
@media (max-width:599px){
  /* Headlines are balanced, not just orphan-trimmed. `pretty` fixes the last line; what goes
     wrong at 390px is the whole rag — five words over one. Phone-only, because the desktop line
     breaks are settled and balance would move them. */
  .hero h1,.hero.post h1,.head h2,.h3,.h4,.entry h3,.card h3,.close h2,.row .name{text-wrap:balance}
  /* 1 — the four steps */
  .hero h1,.hero.post h1{font-size:clamp(2.25rem,10.2vw,2.75rem);letter-spacing:-0.026em}
  .head h2{font-size:28px;line-height:1.08;letter-spacing:-0.016em}
  .h3{font-size:28px;line-height:1.1}
  .h4,.lede,.row .sub,.steps .t,.prose h2,.card h3,.entry h3,.tile .q,.tile .big{font-size:20px;line-height:1.25;letter-spacing:-0.004em}
  /* The fourth step is not a size. Inter Tight ships one weight here, so a rank that has run out
     of size carries its difference in case, tracking and colour instead — which at 350px is a
     stronger distinction than 22px against 19px was. The legal selector is carried along because
     `.legal .prose h3` outranks a bare `.prose h3` and would otherwise take the rank back. */
  .prose h3,.legal .prose h3{font-size:17px;line-height:1.3;letter-spacing:0.04em;text-transform:uppercase;color:var(--mute-l)}
  .close h2{font-size:30px;line-height:1.06}
  .proof p{font-size:22px}
  .row .name{font-size:30px;margin-top:10px}
  .pair .price{font-size:30px}
  /* body: 17px on a 40-character measure is three characters wider than 18px, and long German
     and technical compounds get a break rather than a horizontal scrollbar. `8 4 4` on the legal
     pages, which are the German ones, against `9 5 4` for English prose. */
  .prose{font-size:17px;line-height:1.5;hyphens:auto;hyphenate-limit-chars:9 5 4}
  .legal .prose{hyphenate-limit-chars:8 4 4}
  /* a heading is set, not flowed: it should break where it was written to break */
  .prose h2,.prose h3,.head h2,.hero h1{hyphens:manual}
  .prose p{margin:0 0 18px}
  .prose h2{margin:36px 0 12px}
  .prose h3{margin:28px 0 10px}
  .prose blockquote{font-size:20px;padding:20px 0;margin:28px 0}
  .prose pre{padding:16px 18px;font-size:12px}
  .legal .prose h2{font-size:20px;margin:32px 0 10px}

  /* 2 — the rhythm */
  section{padding:60px 0}
  .light.open{padding-top:56px}
  .hero{padding:28px 0 44px}
  .hero .low{margin-top:36px;gap:24px}
  .head{margin-bottom:36px;gap:16px}
  .close{padding:76px 0 68px}
  .close .sub{margin:20px 0 28px;font-size:20px}
  footer{padding-top:60px}
  .fbot{margin-top:56px}

  /* 3 — density */
  .row{padding:28px 0;gap:16px}
  .entry{padding:24px 0;gap:10px}
  .two{gap:24px}
  .proof{padding:36px 0}
  .card{padding:24px;border-radius:20px}
  .card .link{padding-top:20px}
  .steps li{padding:18px 0}
  .tile{padding:18px;border-radius:14px}
  .grid4{gap:12px}
  .grid4 > div,.pair > div{padding:18px}
  .toc{margin:0 0 40px}
  .postnav{margin-top:52px;gap:24px}

  /* the thumb: a heading that is a link is a target, and 31px of line box is not one. The
     padding is cancelled by an equal negative margin, so the hit area grows and nothing moves. */
  .entry h3 a{display:block;padding-block:10px;margin-block:-10px}
  .toc a{min-height:44px}
  /* the post's prev/next links carry their own underline, so padding alone would push the rule
     down the page. Padding on the top edge only, cancelled by an equal negative margin, grows the
     box itself to 44px and leaves the underline exactly where it was — so the target is a real
     44px box rather than a 26px box with a hit area drawn around it. */
  .postnav a{display:inline-block;padding-block:18px 0;margin-block:-18px 0}
}

/* The external mark and its spoken twin: a box and a screen-reader clip, neither of which is
   motion. They sat inside the reduced-motion guard, so a reader with Reduce Motion on saw the
   "(opens in a new tab)" text in full and the 11px glyph drawn at its intrinsic 38–66px on all
   eight of these pages. 404.css already carries them out here; this is the same correction. */
.ext{width:11px;height:11px;margin-left:7px;flex:0 0 auto;vertical-align:baseline;opacity:.75}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.extlink:focus-visible .ext{opacity:1}
/* the hover half of the same pair, gated: a finger cannot leave an element, so an ungated
   :hover latches on tap and the glyph stays lit until the reader taps something else. */
@media (hover:hover){ .extlink:hover .ext{opacity:1} }
/* motion, Archive mode: one reveal on arrival, quiet hovers, one easing */
@media (prefers-reduced-motion:no-preference){
  .hero h1,.hero .tag,.hero .meta{opacity:0;animation:rise 600ms var(--ease) 60ms both}
  @keyframes rise{to{opacity:1;transform:none}}
  .hero h1{transform:translateY(8px)}
  .nav ul a{transition:color 220ms var(--ease),border-color 220ms var(--ease)}
  .btn,.arrow,.menu{transition:opacity 220ms var(--ease)}
  /* a pointer that cannot hover gets the acknowledgement some other way: the press itself.
     200ms is the state step of the scale, and the transform starts on touchdown, which is
     where the feeling of a response comes from. */
  @media (hover:none){
    .btn,.arrow,.menu{transition:opacity 220ms var(--ease),transform 200ms var(--ease)}
    .btn:active,.arrow:active,.menu:active{transform:scale(.97)}
  }
  .link .ln{transition:border-color 220ms var(--ease)}
  .prose a,.postnav a,.mails a{transition:border-color 220ms var(--ease)}
  .field input,.field select,.field textarea{transition:border-color 220ms var(--ease)}
  .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ink);outline:0}
  /* A finger cannot leave an element, so on touch `:hover` latches on tap and
     stays until the reader taps somewhere else. Hover is an enhancement for
     pointers that have one; `@media (hover:hover)` is the guard, never a width. */
  @media (hover:hover){
    .nav ul a:hover{color:var(--paper);border-color:var(--hair-d)}
    .btn:hover,.arrow:hover,.menu:hover{opacity:.86}
    .link:hover .ln{border-bottom-color:currentColor}
    .prose a:hover,.postnav a:hover,.mails a:hover{border-bottom-color:currentColor}
  }
}