/* Humanly — one stylesheet for every page.
   body.home  = the owner-designed landing page (rules copied verbatim from the original
                inline <style>; change with care, the owner is happy with it as is).
   body.inner = every other page (category pages, idea/about/contact, 404).
   The left rail is shared; only the brand slot differs (wordmark vs "h" mark). */

@font-face{
  font-family:"Kode Mono";
  /* Self-hosted variable woff2 (latin subset, 400-700). The Google Fonts <link> this
     replaces could silently fall back to the system mono, which is exactly how the
     site stopped looking like itself. Kode Mono has no → or ∞; those fall back. */
  src:url("fonts/kode-mono-latin.woff2") format("woff2");
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
}

:root{
  --paper:#f4f4ee;
  --ink:#171714;
  --orange:#ff4a2f;
  --line:rgba(23,23,20,.14);
  --faint:rgba(23,23,20,.5);
}

*{ box-sizing:border-box; }

html,body{
  margin:0;
  min-height:100%;
  background:var(--paper);
  color:var(--ink);
  font-family:"Kode Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

body{
  min-height:100vh;
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }

/* Home has no visible heading by design; this h1 is for search engines and
   screen readers only. */
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

/* ---------------------------------------------------------------------------
   LEFT RAIL — no divider; brand + menu share one exact vertical axis
   --------------------------------------------------------------------------- */
.left-rail{
  --rail-axis:42px;
  --mark-size:44px;
  position:fixed;
  inset:0 auto 0 0;
  width:84px;
  z-index:5;
  pointer-events:none;
}

.brand{
  position:absolute;
  top:34px;
  left:var(--rail-axis);
  transform:translateX(-50%);
  pointer-events:auto;
  text-decoration:none;
}

/* Home: full vertical wordmark */
.brand--wordmark{
  width:36px;
  height:320px;
}

.brand--wordmark img{
  position:absolute;
  top:0;
  left:0;
  display:block;
  width:320px;
  height:auto;
  transform:rotate(-90deg) translateX(-100%);
  transform-origin:top left;
}

/* Inner pages: the "h" mark (same artwork as the favicon) */
.brand--mark{
  width:var(--mark-size);
  height:var(--mark-size);
  transition:transform .2s cubic-bezier(.22,.8,.24,1);
}

.brand--mark img{
  display:block;
  width:100%;
  height:100%;
}

.brand--mark:hover,
.brand--mark:focus-visible{
  transform:translateX(-50%) scale(1.06);
}

.side-nav{
  position:absolute;
  left:var(--rail-axis);
  bottom:38px;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:26px;
  pointer-events:auto;
}

.side-nav a{
  position:relative;
  display:block;
  color:var(--ink);
  text-decoration:none;
  font-size:15px;
  line-height:1;
  font-weight:400;
  letter-spacing:-.04em;
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  white-space:nowrap;
  padding-right:8px;
}

.side-nav a::after{
  content:"";
  position:absolute;
  right:0;
  top:0;
  width:2px;
  height:50%;
  background:var(--orange);
  transform:scaleY(0);
  transform-origin:top center;
  transition:transform .24s cubic-bezier(.22,.8,.24,1);
}

.side-nav a:hover::after,
.side-nav a:focus-visible::after,
.side-nav a.active::after{
  transform:scaleY(1);
}

/* ---------------------------------------------------------------------------
   HOME
   --------------------------------------------------------------------------- */
.home .page{
  min-height:100vh;
  position:relative;
  background:var(--paper);
}

.home main{
  min-height:100vh;
  padding:28px 64px 120px 170px;
  display:flex;
  align-items:flex-start;
}

.hero{
  display:flex;
  flex-direction:column;
  gap:14px;
  width:min(1040px, 84vw);
  margin-top:0;
}

.hero a{
  display:flex;
  align-items:flex-start;
  width:max-content;
  max-width:100%;
  color:var(--orange);
  text-decoration:none;
  font-size:clamp(56px, 6vw, 96px);
  line-height:1.01;
  font-weight:400;
  letter-spacing:-.065em;
  white-space:nowrap;
  transition:opacity .16s ease;
}

.hero a:hover,
.hero a:focus-visible{
  opacity:.78;
}

.count{
  margin-left:18px;
  margin-top:6px;
  font-size:.33em;
  line-height:1;
  letter-spacing:-.03em;
}

.home footer{
  position:fixed;
  right:48px;
  bottom:34px;
  text-align:right;
  font-size:15px;
  line-height:1.35;
  letter-spacing:-.035em;
  z-index:4;
}

.home footer .copy{
  margin-bottom:5px;
}

/* ---------------------------------------------------------------------------
   INNER PAGES
   --------------------------------------------------------------------------- */
.inner{
  /* Column layout so the footer sits at the bottom of short pages. */
  display:flex;
  flex-direction:column;
  min-height:100vh;
  /* Faint dot grid, the one texture borrowed from warp.dev. */
  background-image:radial-gradient(rgba(23,23,20,.13) 1px, transparent 1.2px);
  background-size:24px 24px;
}

.inner main{
  flex:1 0 auto;
  width:100%;
  padding:28px 64px 0 170px;
  max-width:1440px;
}

.crumbs{
  display:flex;
  justify-content:space-between;
  gap:24px;
  font-size:15px;
  line-height:1.2;
  letter-spacing:-.04em;
  text-transform:uppercase;
}

.crumbs a:hover,
.crumbs a:focus-visible{ color:var(--orange); }

.kbd{
  display:inline-block;
  border:1px solid var(--line);
  padding:1px 6px;
  margin:0 2px;
  background:var(--paper);
}

/* The page title is the home link, grown up: same size, same count. */
.title{
  display:flex;
  align-items:flex-start;
  margin:18px 0 10px;
  color:var(--orange);
  font-size:clamp(48px, 5vw, 80px);
  line-height:1.01;
  font-weight:400;
  letter-spacing:-.065em;
}

.cats{
  display:flex;
  flex-wrap:wrap;
  gap:10px 28px;
  margin-bottom:42px;
  font-size:15px;
  letter-spacing:-.04em;
}

.cats a{
  position:relative;
  padding-bottom:6px;
}

.cats sup{
  margin-left:3px;
  color:var(--orange);
  font-size:10px;
}

.cats a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:50%;
  height:2px;
  background:var(--orange);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .24s cubic-bezier(.22,.8,.24,1);
}

.cats a:hover::after,
.cats a:focus-visible::after,
.cats a[aria-current="page"]::after{
  transform:scaleX(1);
}

/* Sticky keyboard index: [1] SERVE [2] EXIF AI ... */
.index{
  position:sticky;
  top:0;
  z-index:3;
  display:flex;
  gap:26px;
  padding:14px 0;
  overflow-x:auto;
  scrollbar-width:none;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:var(--paper);
  font-size:15px;
  letter-spacing:-.04em;
  white-space:nowrap;
}

.index::-webkit-scrollbar{ display:none; }

/* Ideas month strip: [ 2026 ] opens sideways into its months on hover/focus/tap. */
.year-group{
  display:flex;
  align-items:center;
  gap:18px;
  outline:none;
  cursor:default;
}

.index .index-year{
  margin-right:0;
  color:var(--orange);
  white-space:nowrap;
}

.index .year-months{
  margin-right:0;
  color:var(--ink);
  display:flex;
  gap:14px;
  max-width:0;
  overflow:hidden;
  opacity:0;
  transition:max-width .45s cubic-bezier(.22,.8,.24,1), opacity .3s ease;
}

.index .year-group:hover .year-months,
.index .year-group:focus-within .year-months{
  max-width:900px;
  opacity:1;
}

.index .year-group:hover .index-year,
.index .year-group:focus-within .index-year{ color:var(--ink); }

/* SEP | AUG | JUL: separator drawn in CSS so links stay clean for screen readers. */
.index .year-months a + a::before{
  content:"|";
  margin-right:14px;
  color:rgba(23,23,20,.3);
  pointer-events:none;
}

.index .year-months .br{
  font-style:normal;
  color:var(--orange);
}

.index .year-months a:hover,
.index .year-months a:focus-visible{ color:var(--orange); }

.index span{
  margin-right:6px;
  color:var(--orange);
}

.index a:hover,
.index a:focus-visible,
.index a.on{
  color:var(--orange);
}

.app{
  display:grid;
  grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr);
  gap:56px;
  align-items:center;
  padding:64px 0;
  /* Clear the sticky index when jumping to #anchors. */
  scroll-margin-top:52px;
}

.app > div{ min-width:0; }

.hash{
  margin-bottom:18px;
  color:var(--orange);
  font-size:15px;
  letter-spacing:-.04em;
  text-transform:uppercase;
}

.name{
  margin:0 0 18px;
  font-size:44px;
  line-height:1;
  font-weight:400;
  letter-spacing:-.065em;
}

.one{
  display:flex;
  gap:14px;
  max-width:420px;
  margin:0 0 22px;
  font-size:15px;
  line-height:1.45;
  letter-spacing:-.035em;
}

.one::before{
  content:"";
  flex:none;
  width:18px;
  height:2px;
  margin-top:.7em;
  background:var(--orange);
}

.body{
  max-width:420px;
  margin:0 0 26px 32px;
  font-size:15px;
  line-height:1.45;
  letter-spacing:-.035em;
}

.meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:0 0 28px 32px;
  padding:0;
  list-style:none;
  font-size:14px;
  letter-spacing:-.03em;
}

.meta li + li::before{
  content:"·";
  margin-right:10px;
  color:rgba(23,23,20,.35);
}

.cta{
  display:flex;
  flex-wrap:wrap;
  gap:12px 26px;
  margin-left:32px;
  font-size:15px;
  letter-spacing:-.04em;
  text-transform:uppercase;
}

.cta a:first-child{ color:var(--orange); }

.cta a:hover,
.cta a:focus-visible{ opacity:.7; }

/* Warp-style figure: [ FIG. 01 — SERVE ] */
.fig{
  border:1px solid var(--line);
  background:rgba(244,244,238,.92);
}

.fig-top{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-bottom:1px solid var(--line);
  font-size:14px;
  letter-spacing:-.03em;
  text-transform:uppercase;
  white-space:nowrap;
}

.fig-top .rule{
  flex:1;
  min-width:12px;
  height:1px;
  background:var(--line);
}

.fig-top .box{
  display:grid;
  place-items:center;
  width:22px;
  height:18px;
  border:1px solid var(--line);
  font-size:10px;
}

.fig-body{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:300px;
  padding:34px;
  font-size:15px;
  line-height:1.7;
  letter-spacing:-.03em;
  overflow-wrap:anywhere;
}

.fig-body .p{ margin-right:10px; color:var(--orange); }
.fig-body .hl{ color:var(--orange); }
.fig-body .dim{ color:var(--faint); }
.fig-body .ok{ color:#2f8a4f; }

.cur{
  display:inline-block;
  width:9px;
  height:18px;
  vertical-align:-3px;
  background:var(--orange);
  animation:blink 1s steps(1) infinite;
}

@keyframes blink{ 50%{ opacity:0; } }

.kv{
  display:grid;
  grid-template-columns:120px minmax(0, 1fr);
  gap:4px 18px;
}

.photo{
  height:120px;
  margin-bottom:22px;
  border:1px solid var(--line);
  background:
    linear-gradient(180deg, transparent 55%, rgba(23,23,20,.9) 55% 57%, transparent 57%),
    radial-gradient(circle at 70% 58%, var(--orange) 0 26px, transparent 27px),
    repeating-linear-gradient(90deg, rgba(23,23,20,.08) 0 1px, transparent 1px 12px);
}

.bar{
  display:flex;
  gap:3px;
  margin:10px 0;
}

.bar i{
  flex:1;
  height:16px;
  background:var(--orange);
}

.bar i.e{ background:rgba(23,23,20,.1); }

/* Placeholder figure for apps whose real preview is not written yet. */
.fig-body .todo{
  display:grid;
  place-items:center;
  min-height:200px;
  border:1px dashed var(--line);
  color:var(--faint);
  text-transform:uppercase;
}

/* Text pages (IDEA / ABOUT / CONTACT / 404) reuse .app rows with prose. */
.prose{
  max-width:620px;
  margin:0 0 22px;
  font-size:15px;
  line-height:1.55;
  letter-spacing:-.035em;
}

.prose p{ margin:0 0 16px; }

.big-link{
  font-size:clamp(28px, 3.2vw, 44px);
  line-height:1.1;
  letter-spacing:-.06em;
  color:var(--orange);
  overflow-wrap:anywhere;
}

.big-link:hover,
.big-link:focus-visible{ opacity:.78; }

/* Inner footer is static: a fixed footer would sit on top of scrolling content. */
.inner footer{
  display:flex;
  justify-content:flex-end;
  padding:40px 48px 34px 170px;
  text-align:right;
  font-size:15px;
  line-height:1.35;
  letter-spacing:-.035em;
}

.inner footer .copy{ margin-bottom:5px; }

footer a:hover,
footer a:focus-visible{ color:var(--orange); }

/* Legal pages reuse the post layout; a little tighter, no hero figure. */
.legal{ padding-top:10px; }
.legal .post-body h2{ margin-top:40px; }

/* ---------------------------------------------------------------------------
   CATEGORY PAGES: sticky two-row menu + one app panel at a time
   --------------------------------------------------------------------------- */
/* Category menu and app tabs stay pinned together once the big title scrolls away. */
.catbar{
  position:sticky;
  top:0;
  z-index:4;
  margin-bottom:34px;
  padding-top:12px;
  background:var(--paper);
}

.catbar .cats{ margin-bottom:12px; }
.catbar .index{ position:static; }

.app-panel{
  margin-bottom:48px;
  scroll-margin-top:120px;
}

.app-panel[hidden]{ display:none; }

.panel-grid{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  gap:48px;
  padding:40px 34px 36px;
}

/* Right column: terminal preview, then install and downloads. */
.panel-side{
  display:flex;
  flex-direction:column;
  gap:28px;
  min-width:0;
}

.name-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}

.ico{
  display:inline-block;
  flex:none;
  vertical-align:-3px;
}

.gh{
  display:grid;
  place-items:center;
  flex:none;
  width:40px;
  height:40px;
  border:1px solid rgba(23,23,20,.3);
  transition:border-color .16s ease, color .16s ease;
}

.gh .ico{ width:20px; height:20px; }

.gh:hover,
.gh:focus-visible{
  border-color:var(--orange);
  color:var(--orange);
}

.panel-info{ min-width:0; }
.panel-info .body{ margin-left:32px; }

.facts{
  display:grid;
  grid-template-columns:max-content minmax(0, 1fr);
  gap:6px 18px;
  margin:6px 0 24px 32px;
  font-size:14px;
  letter-spacing:-.03em;
}

.facts dt{ color:var(--orange); }
.facts dd{ margin:0; }

.panel-term{
  align-self:stretch;
  min-width:0;
  padding:26px 24px;
  border:1px solid var(--line);
  background:rgba(23,23,20,.03);
  font-size:14px;
  line-height:1.9;
  letter-spacing:-.03em;
  overflow-wrap:anywhere;
}

.panel-term .p{ margin-right:10px; color:var(--orange); }
.panel-term .hl{ color:var(--orange); }
.panel-term .dim{ color:var(--faint); }
.panel-term .ok{ color:#2f8a4f; }
.panel-term .bar{ display:flex; }

.dl-title{
  margin:0 0 14px;
  color:var(--orange);
  font-size:14px;
  font-weight:400;
  letter-spacing:-.03em;
}

.cmd{
  display:flex;
  align-items:stretch;
  max-width:760px;
  border:1px solid var(--ink);
}

.cmd code{
  flex:1;
  min-width:0;
  padding:12px 14px;
  overflow-x:auto;
  background:var(--ink);
  color:var(--paper);
  font-size:14px;
  letter-spacing:-.02em;
  white-space:nowrap;
}

/* Named copy-btn, not .copy: .copy is the footer copyright line. */
.copy-btn{
  padding:0 16px;
  border:0;
  background:var(--paper);
  color:var(--ink);
  font:inherit;
  font-size:13px;
  cursor:pointer;
}

.copy-btn:hover,
.copy-btn:focus-visible{ color:var(--orange); }

.dl-note{
  margin:12px 0 0;
  font-size:13px;
  line-height:1.5;
  letter-spacing:-.02em;
}

.variant-toggle{
  display:flex;
  gap:8px;
  margin-bottom:16px;
}

.variant-toggle button{
  padding:7px 12px;
  border:1px solid rgba(23,23,20,.3);
  background:none;
  color:var(--ink);
  font:inherit;
  font-size:13px;
  cursor:pointer;
}

.variant-toggle button.on{
  border-color:var(--ink);
  background:var(--ink);
  color:var(--paper);
}

.variant[hidden]{ display:none; }

/* OS split buttons: click the OS, then pick the CPU from the little menu. */
.split-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.split{ position:relative; }

.split summary{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border:1px solid rgba(23,23,20,.3);
  font-size:14px;
  letter-spacing:-.03em;
  list-style:none;
  cursor:pointer;
  transition:border-color .16s ease, background .16s ease, color .16s ease;
}

.split summary::-webkit-details-marker{ display:none; }
.split summary:hover,
.split summary:focus-visible{ border-color:var(--ink); }
.split .caret{ font-size:11px; opacity:.7; }

/* The visitor's own OS is highlighted by site.js. */
.split.mine summary{
  border-color:var(--orange);
  background:var(--orange);
  color:var(--paper);
}

.split[open] summary{
  border-color:var(--ink);
  background:var(--ink);
  color:var(--paper);
}

.split-menu{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  z-index:5;
  display:flex;
  flex-direction:column;
  min-width:190px;
  padding:8px 0;
  border:1px solid var(--ink);
  background:var(--paper);
}

.split-menu small{
  padding:4px 14px 8px;
  color:var(--faint);
  font-size:11px;
}

.split-menu a{
  padding:8px 14px;
  font-size:14px;
  letter-spacing:-.03em;
}

.split-menu a:hover,
.split-menu a:focus-visible{
  background:var(--orange);
  color:var(--paper);
}

.split-divider{
  align-self:stretch;
  width:1px;
  margin:6px 4px;
  background:rgba(23,23,20,.3);
}

.split-row .gh{
  width:auto;
  height:auto;
  padding:0 12px;
  align-self:stretch;
}

.nowrap{ white-space:nowrap; }

/* App Store / Google Play buttons. */
.store-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.store{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:180px;
  padding:10px 16px;
  background:var(--ink);
  color:var(--paper);
  transition:background .16s ease;
}

.store .ico{ width:24px; height:24px; }

.store > span{
  display:flex;
  flex-direction:column;
  font-size:15px;
  letter-spacing:-.03em;
}

.store small{
  font-size:10px;
  opacity:.75;
}

a.store:hover,
a.store:focus-visible{ background:var(--orange); }

.store.soon{
  border:1px dashed rgba(23,23,20,.35);
  background:none;
  color:var(--faint);
}

.panel-info .cta a{ color:var(--ink); }
.panel-info .cta a:first-child{ color:var(--orange); }

/* ---------------------------------------------------------------------------
   TEXT LINKS, FORMS (contact, custom development)
   --------------------------------------------------------------------------- */
.text-link{
  color:var(--orange);
  border-bottom:1px solid currentColor;
}

.text-link:hover,
.text-link:focus-visible{ opacity:.7; }

.app--form,
.app--text{ align-items:start; }

.build-list{
  margin:0 0 22px 32px;
  padding:0;
  list-style:none;
  max-width:440px;
  font-size:15px;
  line-height:1.5;
  letter-spacing:-.035em;
}

.build-list li{ margin-bottom:10px; }
.build-list b{ font-weight:400; color:var(--orange); }

.small-idea{ margin:34px 0 12px; }
.app--form .body b{ font-weight:400; color:var(--orange); }

.form{
  display:flex;
  flex-direction:column;
  gap:26px;
  padding:34px;
  border:1px solid var(--line);
  background:rgba(244,244,238,.92);
}

.field{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
  margin:0;
  padding:0;
  border:0;
}

.field-row{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  gap:26px;
}

.field label,
.field legend{
  padding:0;
  font-size:14px;
  letter-spacing:-.03em;
}

.field legend{ margin-bottom:10px; }
.opt{ color:var(--faint); }

.field input:not([type]),
.field input[type="email"],
.field input[type="text"],
.field textarea{
  width:100%;
  padding:8px 0;
  border:0;
  border-bottom:1px solid rgba(23,23,20,.35);
  border-radius:0;
  background:transparent;
  color:var(--ink);
  font:inherit;
  font-size:16px; /* 16px stops iOS zooming into the field on focus */
  letter-spacing:-.03em;
  resize:vertical;
}

.field textarea{
  padding:10px;
  border:1px solid rgba(23,23,20,.35);
}

.field input:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--orange);
}

.field ::placeholder{ color:var(--faint); }

.pills{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.pill{ position:relative; }

.pill input{
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
}

.pill span{
  display:inline-block;
  padding:7px 12px;
  border:1px solid rgba(23,23,20,.3);
  font-size:14px;
  letter-spacing:-.03em;
  cursor:pointer;
  transition:border-color .16s ease, color .16s ease, background .16s ease;
}

.pill input:hover + span{ border-color:var(--ink); }
.pill input:focus-visible + span{ outline:2px solid var(--orange); outline-offset:2px; }

.pill input:checked + span{
  border-color:var(--orange);
  background:var(--orange);
  color:var(--paper);
}

/* Honeypot: invisible to people, tempting to bots. */
.hp{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  opacity:0;
}

.form-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
}

/* Status message takes the free space on the left; buttons sit on the right. */
.form-actions .form-status{
  flex:1 1 200px;
  order:0;
}

/* Result banners: red when nothing was sent (spam, errors), ink when sent. */
.form-status.is-error,
.form-status.is-ok{
  flex-basis:100%;
  padding:12px 14px;
  color:var(--paper);
}

.form-status.is-error{ background:var(--orange); }
.form-status.is-ok{ background:var(--ink); }

.ai{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:11px 16px;
  border:1px solid var(--ink);
  background:none;
  color:var(--ink);
  font:inherit;
  font-size:14px;
  letter-spacing:-.03em;
  cursor:pointer;
  transition:border-color .16s ease, color .16s ease, opacity .16s ease;
}

.ai .ico{ color:var(--orange); }

.ai:hover:not(:disabled),
.ai:focus-visible{
  border-color:var(--orange);
  color:var(--orange);
}

.ai:disabled{
  opacity:.4;
  cursor:not-allowed;
}

.ai[hidden]{ display:none; }

.undo{
  padding:0;
  border:0;
  border-bottom:1px solid currentColor;
  background:none;
  color:var(--orange);
  font:inherit;
  font-size:14px;
  cursor:pointer;
}

.send{
  padding:12px 20px;
  border:0;
  background:var(--ink);
  color:var(--paper);
  font:inherit;
  font-size:15px;
  letter-spacing:-.04em;
  cursor:pointer;
  transition:background .16s ease;
}

.send:hover,
.send:focus-visible{ background:var(--orange); }
.send:disabled{ opacity:.5; cursor:wait; }

.form-status{
  margin:0;
  font-size:14px;
  letter-spacing:-.03em;
  text-transform:uppercase;
}

/* ---------------------------------------------------------------------------
   IDEAS INDEX
   --------------------------------------------------------------------------- */
.lede{
  max-width:620px;
  margin:0 0 30px;
  font-size:15px;
  line-height:1.5;
  letter-spacing:-.035em;
}

/* Funnel + divider in front of the topic filters, so the row reads as a filter. */
.topic-filter{ align-items:center; }

.filter-mark{
  display:inline-flex;
  padding-bottom:6px;
  color:var(--orange);
}

.filter-mark .ico{ width:16px; height:16px; }

.filter-divider{
  align-self:stretch;
  width:1px;
  margin:0 4px 6px;
  background:rgba(23,23,20,.3);
}

.topic-filter button{
  position:relative;
  padding:0 0 6px;
  border:0;
  background:none;
  color:var(--ink);
  font:inherit;
  cursor:pointer;
}

.topic-filter button::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:50%;
  height:2px;
  background:var(--orange);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .24s cubic-bezier(.22,.8,.24,1);
}

.topic-filter button:hover::after,
.topic-filter button:focus-visible::after,
.topic-filter button.on::after{ transform:scaleX(1); }

.topic-filter sup{
  margin-left:3px;
  color:var(--orange);
  font-size:10px;
}

.month{
  padding:44px 0 8px;
  scroll-margin-top:52px;
}

.month-label{
  margin:0 0 8px;
  color:var(--orange);
  font-size:15px;
  font-weight:400;
  letter-spacing:-.04em;
}

.post-list{
  margin:0;
  padding:0;
  list-style:none;
  border-top:1px solid var(--line);
}

.post-row a{
  display:grid;
  grid-template-columns:56px minmax(0, 1fr) 120px;
  gap:16px;
  align-items:start;
  padding:22px 0 24px;
  border-bottom:1px solid var(--line);
  transition:transform .18s ease, color .18s ease;
}

.post-row a:hover,
.post-row a:focus-visible{
  color:var(--orange);
  transform:translateX(3px);
}

.post-date{
  padding-top:6px;
  color:var(--orange);
  font-size:15px;
}

.post-main{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
}

.post-title{
  font-size:29px;
  line-height:1.05;
  letter-spacing:-.055em;
}

.post-desc{
  max-width:640px;
  color:var(--ink);
  font-size:14px;
  line-height:1.45;
  letter-spacing:-.03em;
}

.post-topic{
  padding-top:8px;
  font-size:13px;
  letter-spacing:-.02em;
  text-align:right;
}

/* Pager under the Ideas list: ← NEWER  [ 1 | 2 | 3 ]  OLDER → */
.pager{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:34px 0 10px;
  font-size:15px;
  letter-spacing:-.04em;
}

.pager[hidden]{ display:none; }

.pager button{
  padding:0;
  border:0;
  background:none;
  color:var(--ink);
  font:inherit;
  cursor:pointer;
}

.pager button:hover,
.pager button:focus-visible,
.pager button.on{ color:var(--orange); }

.pager-off{ color:rgba(23,23,20,.3); }

.pager-pages{
  display:flex;
  align-items:center;
  gap:14px;
}

.pager-pages .br{
  font-style:normal;
  color:var(--orange);
}

.pager-pages button + button::before{
  content:"|";
  margin-right:14px;
  color:rgba(23,23,20,.3);
}

.index .index-year{ cursor:pointer; }

/* ---------------------------------------------------------------------------
   IDEAS POST
   --------------------------------------------------------------------------- */
.post{
  max-width:1000px;
  padding-top:40px;
}

.post-head{ max-width:none; }

.post-h1{
  margin:0 0 20px;
  font-size:clamp(40px, 4.6vw, 68px);
  line-height:1.02;
  font-weight:400;
  letter-spacing:-.06em;
}

.post-lede{
  display:flex;
  gap:14px;
  margin:0 0 20px;
  font-size:17px;
  line-height:1.5;
  letter-spacing:-.035em;
}

.post-lede::before{
  content:"";
  flex:none;
  width:18px;
  height:2px;
  margin-top:.75em;
  background:var(--orange);
}

.post-meta{
  display:flex;
  gap:18px;
  margin:0 0 36px 32px;
  font-size:13px;
  letter-spacing:-.02em;
}

.post-meta span + span::before{
  content:"·";
  margin-right:18px;
  color:rgba(23,23,20,.35);
}

.post-hero{
  margin:0 0 48px;
  border:1px solid var(--line);
  background:rgba(244,244,238,.92);
}

.post-hero svg,
.post-figure svg,
.post-hero img,
.post-figure img{
  display:block;
  width:100%;
  height:auto;
}

/* Body text spans the same width as the figures (the .post column), justified.
   Hyphenation keeps justified monospace from opening wide gaps between words. */
.post-body{
  font-size:16px;
  line-height:1.7;
  letter-spacing:-.03em;
}

.post-body p,
.post-body li,
.post-body blockquote,
.post-lede{
  text-align:justify;
  hyphens:auto;
  -webkit-hyphens:auto;
}

.post-body p{ margin:0 0 22px; }

.post-body h2{
  margin:52px 0 18px;
  font-size:24px;
  line-height:1.15;
  font-weight:400;
  letter-spacing:-.05em;
  text-transform:uppercase;
}

.post-body h2::before{
  content:"## ";
  color:var(--orange);
}

.post-body h3{
  margin:34px 0 12px;
  font-size:18px;
  font-weight:400;
  letter-spacing:-.04em;
}

.post-body a{
  color:var(--orange);
  border-bottom:1px solid currentColor;
}

.post-body ul,
.post-body ol{
  margin:0 0 22px;
  padding-left:22px;
}

.post-body li{ margin-bottom:8px; }
.post-body ul{ list-style:square; }
.post-body li::marker{ color:var(--orange); }

.post-body blockquote{
  margin:30px 0;
  padding:4px 0 4px 22px;
  border-left:2px solid var(--orange);
  font-size:19px;
  line-height:1.5;
}

.post-body code{
  padding:1px 5px;
  background:rgba(23,23,20,.07);
  font-size:.92em;
}

.post-body pre{
  margin:0 0 22px;
  padding:18px 20px;
  overflow-x:auto;
  border:1px solid var(--line);
  background:rgba(23,23,20,.04);
  font-size:14px;
  line-height:1.6;
}

.post-body pre code{ padding:0; background:none; }

.post-figure{
  margin:36px 0;
  border:1px solid var(--line);
  background:rgba(244,244,238,.92);
}


.post-figure figcaption{
  padding:12px 14px;
  border-top:1px solid var(--line);
  font-size:13px;
  line-height:1.45;
  letter-spacing:-.02em;
}

.spec{
  width:100%;
  margin:0 0 26px;
  border-collapse:collapse;
  font-size:14px;
  letter-spacing:-.02em;
}

.spec th,
.spec td{
  padding:10px 12px 10px 0;
  border-bottom:1px solid var(--line);
  text-align:left;
  vertical-align:top;
}

.spec th{
  width:34%;
  color:var(--orange);
  font-weight:400;
}

/* ---------------------------------------------------------------------------
   BREAKPOINTS — same widths as the original home page
   --------------------------------------------------------------------------- */
@media (max-width:1100px){
  .app{
    grid-template-columns:minmax(0, 1fr);
    gap:36px;
  }

  .panel-grid{
    grid-template-columns:minmax(0, 1fr);
    gap:28px;
  }
}

@media (max-width:900px){
  .left-rail{
    --rail-axis:34px;
    --mark-size:36px;
    width:68px;
  }

  .brand{ top:28px; }

  .brand--wordmark{
    width:32px;
    height:260px;
  }

  .brand--wordmark img{ width:260px; }

  .side-nav{
    bottom:32px;
    gap:22px;
  }

  .side-nav a{ font-size:13px; }

  .home main{ padding:24px 28px 130px 118px; }

  .hero a{
    font-size:clamp(44px, 8vw, 66px);
    white-space:normal;
  }

  /* Deliberate change from the original home CSS: as a flex row, a wrapped label
     ("SECURITY / TOOLS") keeps its full-width text box, so the count floated at
     the far right edge. As a block, the count sits right after the last word. */
  .hero a,
  .title{
    display:block;
    width:auto;
  }

  .hero .count,
  .title .count{
    display:inline-block;
    vertical-align:top;
    /* The source already has a space before the count; flex collapsed it, block keeps it. */
    margin-left:2px;
    margin-top:.25em;
  }

  .home footer{
    right:28px;
    bottom:24px;
    font-size:13px;
  }

  .inner main{ padding:24px 28px 0 118px; }

  .crumbs .keys{ display:none; }

  .title{
    font-size:clamp(40px, 6.5vw, 56px);
    width:auto;
  }

  .name{ font-size:36px; }

  .inner footer{
    padding:32px 28px 24px 118px;
    font-size:13px;
  }


  .post-row a{ grid-template-columns:42px minmax(0, 1fr); }
  .post-topic{ grid-column:2; padding-top:0; text-align:left; }
}

@media (max-width:620px){
  .left-rail{
    --rail-axis:28px;
    --mark-size:30px;
    width:56px;
  }

  .brand{ top:24px; }

  .brand--wordmark{
    width:28px;
    height:220px;
  }

  .brand--wordmark img{ width:220px; }

  .side-nav{
    bottom:24px;
    gap:18px;
  }

  .side-nav a{ font-size:11px; }

  .home main{ padding:22px 18px 170px 90px; }

  .hero{ gap:18px; }

  .hero a{ font-size:clamp(34px, 10vw, 50px); }

  .home footer{
    position:absolute;
    right:18px;
    left:90px;
    bottom:18px;
    font-size:11px;
  }

  .inner main{ padding:22px 18px 0 90px; }

  .title{
    font-size:clamp(32px, 9vw, 44px);
  }

  .name{ font-size:30px; }

  .app{ padding:44px 0; }

  .body,
  .meta,
  .cta{ margin-left:0; }

  /* Long labels ("[ FIG. 01 — SECURITY TOOL 01 ]") do not fit beside the rules. */
  .fig-top{
    justify-content:space-between;
    white-space:normal;
    font-size:12px;
    text-align:center;
  }

  .fig-top .rule{ display:none; }

  .fig-body{
    min-height:0;
    padding:22px 18px;
    font-size:13px;
  }

  .kv{ grid-template-columns:90px minmax(0, 1fr); }

  .inner footer{
    padding:28px 18px 18px 90px;
    font-size:11px;
  }

  .form{ padding:22px 18px; }
  .field-row{ grid-template-columns:minmax(0, 1fr); }
  .build-list{ margin-left:0; }
  .post-title{ font-size:22px; }
  .post-row a{ grid-template-columns:32px minmax(0, 1fr); gap:10px; }
  .post-body{ font-size:15px; }
  .post-h1{ font-size:32px; }
  .panel-grid{ padding:24px 18px 6px; }
  /* Keep the sticky menu two short rows: categories scroll sideways instead of wrapping. */
  .catbar .cats{
    flex-wrap:nowrap;
    overflow-x:auto;
    scrollbar-width:none;
    white-space:nowrap;
  }
  .catbar .cats::-webkit-scrollbar{ display:none; }
  .panel-info .body,
  .facts{ margin-left:0; }
  .panel-grid{ padding-bottom:24px; }
  .cmd code{ font-size:12px; }
  .post-lede{ font-size:15px; }
  .post-meta{ margin-left:0; }
}

@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    transition:none !important;
    animation:none !important;
  }
}