:root {
    --paper:      #FBFAF9;
    --surface:    #FFFFFF;
    --nav:        rgba(251,250,249,.82);
    --ink:        #16151A;
    --ink-soft:   #3A3742;
    --muted:      #6E6B76;
    --rule:       #E4E1E6;
    --rule-soft:  #EFEDF1;
    --accent:     #C8442A;
    --accent-bg:  #FBEFEC;
    --shadow:     0 1px 2px rgba(22,21,26,.04), 0 8px 24px rgba(22,21,26,.05);

    --serif: ui-serif, "New York", Iowan Old Style, Georgia, serif;
    --sans:  -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Helvetica Neue", sans-serif;
    --mono:  ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  }

  @media (prefers-color-scheme: dark) {:root:not([data-theme="light"]) {
      --paper:     #121116;
      --surface:   #1A181F;
      --nav:       rgba(18,17,22,.82);
      --ink:       #EDEBF0;
      --ink-soft:  #C6C2CD;
      --muted:     #948FA0;
      --rule:      #2C2933;
      --rule-soft: #232028;
      --accent:    #E8735A;
      --accent-bg: #2A1C19;
      --shadow:    0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.28);
    }
  }:root[data-theme="dark"] {
    --paper:     #121116;
    --surface:   #1A181F;
    --nav:       rgba(18,17,22,.82);
    --ink:       #EDEBF0;
    --ink-soft:  #C6C2CD;
    --muted:     #948FA0;
    --rule:      #2C2933;
    --rule-soft: #232028;
    --accent:    #E8735A;
    --accent-bg: #2A1C19;
    --shadow:    0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.28);
  }

  * { box-sizing: border-box; min-width: 0; }

  html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

  body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.6;
    overflow-wrap: break-word;
    -webkit-font-smoothing: antialiased;
  }

  .wrap { max-width: 56rem; margin: 0 auto; padding: 0 1.5rem; }

  /* ---------------------------------------------------------- nav */

  .topbar {
    position: sticky; top: 0; z-index: 20;
    background: var(--nav);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--rule);
  }

  .topbar .wrap {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: .4rem 1.1rem; padding-top: .8rem; padding-bottom: .8rem;
  }

  .brand {
    display: flex; align-items: center; gap: .5rem;
    font-family: var(--mono); font-size: .74rem;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink); text-decoration: none; margin-right: auto;
  }

  .brand .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }

  .navlinks { display: flex; flex-wrap: wrap; gap: .3rem; }

  .navlinks a {
    font-family: var(--mono); font-size: .7rem;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--muted); text-decoration: none;
    padding: .34rem .6rem; border-radius: 7px;
    transition: color .18s ease, background .18s ease;
  }

  .navlinks a:hover { color: var(--ink); background: var(--rule-soft); }
  .navlinks a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; color: var(--ink); }

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

  .masthead { display: flex; flex-direction: column; gap: 1.6rem; padding: 4.5rem 0 2.75rem; }

  .masthead h1 {
    font-family: var(--serif);
    font-size: clamp(2.4rem, 6.6vw, 3.9rem);
    line-height: 1.05; letter-spacing: -.022em;
    font-weight: 500; margin: 0; text-wrap: balance;
  }

  .standfirst {
    font-size: 1.18rem; line-height: 1.55; color: var(--ink-soft);
    margin: 0; max-width: 34rem; text-wrap: pretty;
  }

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

  .entry {
    background: var(--surface); border-radius: 18px; box-shadow: var(--shadow);
    padding: 1.9rem 2rem 1.4rem;
    display: flex; flex-direction: column; gap: .9rem;
    animation: rise .7s cubic-bezier(.2,.7,.3,1) both;
  }

  @keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) { .entry { animation: none; } }

  .entry-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: .1rem .8rem; }

  .term {
    font-family: var(--serif); font-size: 1.85rem;
    font-weight: 500; letter-spacing: -.015em; margin: 0;
  }

  .pos { font-family: var(--serif); font-style: italic; font-size: 1rem; color: var(--muted); }

  .def { margin: 0; color: var(--ink-soft); }
  .def b { font-weight: 600; color: var(--ink); }

  .usage {
    margin: 0; padding-left: 1rem; border-left: 2px solid var(--rule);
    font-family: var(--serif); font-style: italic; color: var(--muted); line-height: 1.5;
  }

  .entry-foot {
    display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .9rem;
    margin-top: .35rem; padding-top: .85rem; border-top: 1px solid var(--rule-soft);
    font-family: var(--mono); font-size: .7rem;
    letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  }

  .cred b { color: var(--ink-soft); font-weight: 500; }
  .flag { color: var(--accent); background: var(--accent-bg); padding: .2rem .5rem; border-radius: 5px; }
  .fix { margin-left: auto; color: var(--accent); }

  /* ---------------------------------------------------------- sections */

  section { padding: 3.25rem 0; }

  .eyebrow {
    font-family: var(--mono); font-size: .72rem; letter-spacing: .14em;
    text-transform: uppercase; color: var(--muted); margin: 0 0 1.1rem;
  }

  h2 {
    font-family: var(--serif); font-size: 1.75rem; font-weight: 500;
    letter-spacing: -.015em; line-height: 1.25; margin: 0 0 1rem; text-wrap: balance;
  }

  p { margin: 0 0 1.1rem; color: var(--ink-soft); }
  p:last-child { margin-bottom: 0; }

  .stack { display: flex; flex-direction: column; gap: 1.25rem; }
  hr { border: 0; border-top: 1px solid var(--rule); margin: 0; }

  /* ---------------------------------------------------------- search */

  .finder { display: flex; flex-direction: column; gap: .9rem; margin-bottom: 2.25rem; }

  .searchbox { position: relative; display: flex; align-items: center; }

  .searchbox input {
    width: 100%; font-family: var(--sans); font-size: 1.05rem; color: var(--ink);
    background: var(--surface); border: 1px solid var(--rule);
    border-radius: 14px; padding: .85rem 1rem .85rem 2.6rem;
    box-shadow: var(--shadow); appearance: none;
    transition: border-color .18s ease;
  }

  .searchbox input::placeholder { color: var(--muted); }
  .searchbox input:focus { outline: none; border-color: var(--accent); }

  .searchbox svg {
    position: absolute; left: .95rem; width: 16px; height: 16px;
    stroke: var(--muted); fill: none; stroke-width: 2; pointer-events: none;
  }


  .alpha { display: flex; flex-wrap: wrap; gap: .12rem; }

  .ltr {
    font-family: var(--mono); font-size: .68rem; text-transform: uppercase;
    color: var(--muted); background: transparent; border: 0;
    border-radius: 6px; padding: .26rem .42rem; cursor: pointer; min-width: 1.6rem;
    transition: color .15s ease, background .15s ease;
  }

  .ltr:hover { color: var(--ink); background: var(--rule-soft); }
  .ltr[aria-pressed="true"] { color: var(--accent); background: var(--accent-bg); }
  .ltr[disabled] { opacity: .25; cursor: default; background: none; }
  .ltr:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

  .chips { display: flex; flex-wrap: wrap; gap: .35rem; }

  .chip {
    font-family: var(--mono); font-size: .68rem; letter-spacing: .07em;
    text-transform: uppercase; color: var(--muted);
    background: transparent; border: 1px solid var(--rule);
    border-radius: 100px; padding: .3rem .7rem; cursor: pointer;
    transition: color .18s ease, border-color .18s ease, background .18s ease;
  }

  .chip:hover { color: var(--ink); }
  .chip[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); background: var(--accent-bg); }
  .chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  .count {
    font-family: var(--mono); font-size: .7rem; letter-spacing: .07em;
    text-transform: uppercase; color: var(--muted);
  }

  /* ---------------------------------------------------------- entry list */

  .cat { margin-bottom: 2.5rem; }

  .cat h3 {
    font-family: var(--mono); font-size: .7rem; letter-spacing: .14em;
    text-transform: uppercase; color: var(--muted);
    margin: 0 0 .35rem; padding-bottom: .6rem; border-bottom: 1px solid var(--rule);
  }

  .e { padding: 1.15rem 0; border-bottom: 1px solid var(--rule-soft); }

  .e-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: .1rem .6rem; margin-bottom: .3rem; }

  .e-h h4 {
    font-family: var(--serif); font-size: 1.28rem; font-weight: 500;
    letter-spacing: -.01em; margin: 0; color: var(--ink);
  }

  .e-h .pos { font-size: .92rem; }

  .badge {
    font-family: var(--mono); font-size: .6rem; letter-spacing: .08em;
    text-transform: uppercase; padding: .16rem .45rem; border-radius: 4px;
    color: var(--accent); background: var(--accent-bg); margin-left: auto;
  }

  .badge.stub { color: var(--muted); background: var(--rule-soft); }

  .e-d { margin: 0; color: var(--ink-soft); font-size: .97rem; line-height: 1.6; }

  .e-u {
    margin: .55rem 0 0; padding-left: .85rem; border-left: 2px solid var(--rule);
    font-family: var(--serif); font-style: italic; color: var(--muted);
    font-size: .95rem; line-height: 1.5;
  }

  .e-empty { color: var(--muted); font-style: italic; font-size: .95rem; margin: 0; }

  .vote { display: flex; align-items: center; gap: .15rem; margin-top: .6rem; }

  .v {
    background: none; border: 0; cursor: pointer; padding: .2rem .35rem;
    font-size: .72rem; line-height: 1; color: var(--muted); border-radius: 5px;
    transition: color .15s ease, background .15s ease;
  }

  .v:hover { color: var(--ink); background: var(--rule-soft); }
  .v[aria-pressed="true"] { color: var(--accent); }
  .v:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

  .score {
    font-family: var(--mono); font-size: .72rem; color: var(--muted);
    min-width: 1.6rem; text-align: center; font-variant-numeric: tabular-nums;
  }

  .noresult {
    font-family: var(--mono); font-size: .8rem; color: var(--muted);
    padding: 2rem 0; text-align: center;
  }

  [hidden] { display: none !important; }


  /* ---------------------------------------------------------- board */

  #postform { display: flex; flex-direction: column; gap: .9rem; }

  #postbody {
    width: 100%; font-family: var(--sans); font-size: 1rem; line-height: 1.6;
    color: var(--ink); background: var(--paper);
    border: 1px solid var(--rule); border-radius: 12px;
    padding: .85rem 1rem; resize: vertical; min-height: 6rem;
    transition: border-color .18s ease;
  }

  #postbody::placeholder { color: var(--muted); }
  #postbody:focus { outline: none; border-color: var(--accent); }

  .formrow { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

  .hint {
    font-family: var(--mono); font-size: .68rem; letter-spacing: .06em;
    text-transform: uppercase; color: var(--muted);
  }

  .hint.ok  { color: var(--accent); }
  .hint.err { color: var(--accent); }

  .send {
    margin-left: auto; font-family: var(--mono); font-size: .7rem;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--paper); background: var(--ink);
    border: 0; border-radius: 100px; padding: .5rem 1.1rem; cursor: pointer;
    transition: opacity .18s ease;
  }

  .send:hover { opacity: .82; }
  .send:disabled { opacity: .4; cursor: default; }
  .send:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  .posts { display: flex; flex-direction: column; }

  .post { padding: 1.15rem 0; border-bottom: 1px solid var(--rule-soft); }

  .post-h {
    display: flex; align-items: baseline; gap: .6rem;
    font-family: var(--mono); font-size: .68rem;
    letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
    margin-bottom: .4rem;
  }

  .post-h .who { color: var(--ink-soft); }
  .post-b { margin: 0; color: var(--ink-soft); font-size: .97rem; line-height: 1.6; }

  .posts-empty {
    font-family: var(--mono); font-size: .75rem; color: var(--muted);
    padding: 1.5rem 0; text-align: center;
  }

  /* ---------------------------------------------------------- panels */

  .panel {
    display: flex; flex-direction: column; gap: 1.5rem;
    background: var(--surface); border-radius: 20px;
    box-shadow: var(--shadow); padding: 2.1rem 2rem;
  }

  .tweet {
    font-family: var(--mono); font-size: .82rem; line-height: 1.75;
    background: var(--paper); border: 1px solid var(--rule);
    border-radius: 12px; padding: 1.1rem 1.2rem; color: var(--ink-soft);
    white-space: pre-wrap; overflow-wrap: break-word;
  }

  .tweet .at { color: var(--accent); }

  .steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .8rem; }

  .steps li { display: flex; gap: .9rem; align-items: flex-start; color: var(--ink-soft); line-height: 1.5; }

  .steps .k {
    flex: none; font-family: var(--mono); font-size: .67rem;
    letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
    padding-top: .3rem; width: 5.6rem;
  }

  .steps code { font-family: var(--mono); font-size: .85em; color: var(--accent); }

  /* ---------------------------------------------------------- figures */

  .figures {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: 1px; background: var(--rule); border: 1px solid var(--rule);
    border-radius: 16px; overflow: hidden;
  }

  .fig { background: var(--surface); padding: 1.3rem 1.2rem; display: flex; flex-direction: column; gap: .3rem; }

  .fig .n {
    font-size: 1.7rem; font-weight: 300; letter-spacing: -.02em;
    font-variant-numeric: tabular-nums; line-height: 1.1;
  }

  .fig .l {
    font-family: var(--mono); font-size: .67rem; letter-spacing: .07em;
    text-transform: uppercase; color: var(--muted); line-height: 1.4;
  }

  .note { font-size: .9rem; color: var(--muted); line-height: 1.55; }

  /* ---------------------------------------------------------- tools */

  .tools { display: flex; flex-direction: column; border-top: 1px solid var(--rule); }

  .tool { display: flex; gap: 1.1rem; align-items: baseline; padding: 1rem 0; border-bottom: 1px solid var(--rule-soft); }

  .tool code { font-family: var(--mono); font-size: .82rem; color: var(--ink); flex: none; min-width: 12rem; }

  .tool span { color: var(--muted); font-size: .93rem; line-height: 1.5; }

  /* ---------------------------------------------------------- footer */

  footer.foot {
    padding: 2.75rem 0 4.5rem; border-top: 1px solid var(--rule);
    font-family: var(--mono); font-size: .72rem; letter-spacing: .06em;
    text-transform: uppercase; color: var(--muted);
    display: flex; flex-wrap: wrap; gap: .6rem 1.4rem;
  }

  a { color: var(--accent); text-underline-offset: 3px; }
  a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

  @media (max-width: 34rem) {
    body { font-size: 16px; }
    .masthead { padding-top: 3rem; }
    .entry, .panel { padding-left: 1.4rem; padding-right: 1.4rem; }
    .tool { flex-direction: column; gap: .2rem; }
    .tool code { min-width: 0; }
    .steps li { flex-direction: column; gap: .1rem; }
    .steps .k { width: auto; padding-top: 0; }
    .brand { margin-right: 0; width: 100%; }
    .tweet { font-size: .75rem; }
    .badge { margin-left: 0; }
  }

  /* ---------------------------------------------------------- multipage additions */

  .masthead.compact { padding: 3.5rem 0 2rem; }
  .masthead.compact h1 { font-size: clamp(2rem, 5vw, 2.9rem); }

  section.flush { padding-top: 0; }

  .cta { display: flex; flex-wrap: wrap; gap: .6rem; }

  .btn {
    font-family: var(--mono); font-size: .74rem;
    letter-spacing: .1em; text-transform: uppercase;
    padding: .7rem 1.1rem; border-radius: 9px;
    background: var(--accent); color: var(--paper);
    text-decoration: none; border: 1px solid var(--accent);
    transition: opacity .18s ease;
  }

  .btn:hover { opacity: .85; }
  .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

  .btn.ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
  .btn.ghost:hover { background: var(--rule-soft); opacity: 1; }

  /* the fee split: two figures, no chrome, same family as .fig */
  .split {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 1px; background: var(--rule); border-radius: 14px; overflow: hidden;
  }

  /* one figure alone shouldn't stretch the full width like a banner */
  /* a lone figure shouldn't paint an empty second cell beside itself */
  .split.one { grid-template-columns: minmax(0, 22rem); width: fit-content; max-width: 100%; }

  .navlinks a[aria-current="page"] { color: var(--ink); background: var(--rule-soft); }

  /* the tools rows carry addresses too: let them wrap instead of overflowing */
  .tool span { overflow-wrap: anywhere; }
  .tool code { min-width: 9rem; }

  @media (max-width: 30rem) {
    .tool { flex-direction: column; gap: .3rem; }
    .tool code { min-width: 0; }
  }


  /* ---------------------------------------------------------- chrome off */

  /* no scrollbar anywhere: the page scrolls, the bar just doesn't paint */
  html { scrollbar-width: none; -ms-overflow-style: none; }
  html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; display: none; }
  * { scrollbar-width: none; }
  *::-webkit-scrollbar { width: 0; height: 0; display: none; }

  /* ---------------------------------------------------------- footer */

  .foot { border-top: 1px solid var(--rule); margin-top: 4.5rem; padding: 1.6rem 0 2.6rem; }

  .foot .wrap {
    display: flex; flex-wrap: wrap; align-items: center;
    justify-content: space-between; gap: .5rem 1.1rem;
    font-family: var(--mono); font-size: .67rem;
    letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
  }

  .foot-links { display: flex; gap: .3rem; }

  .foot-links a {
    color: var(--muted); text-decoration: none;
    padding: .26rem .55rem; border-radius: 7px;
    transition: color .18s ease, background .18s ease;
  }

  .foot-links a:hover { color: var(--ink); background: var(--rule-soft); }
  .foot-links a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; color: var(--ink); }


  /* ------------------------------------------------------ reading measure */

  /* 17px across a 640px column runs about 75 characters, which is the top of
     the comfortable range and most of why the page read heavy. The lede was
     already held at 34rem; prose now matches it, so the column has one edge
     instead of a different one per element. Panels, examples and lists keep
     the full width on purpose: they are scanned, not read. */
  .stack p,
  section > p,
  .panel .note { max-width: 34rem; }

  /* Stops the ragged single-word last line that makes paragraphs look broken. */
  .stack p, section > p, .panel .note, .e-d, .lede { text-wrap: pretty; }

  /* ------------------------------------------------------ vertical rhythm */

  /* A heading belongs to what follows it, not to what it follows. Even spacing
     everywhere is the thing that reads as generated, so the space above a
     heading is now clearly larger than the space beneath it. */
  .eyebrow { margin-bottom: .5rem; }
  section h2 { margin-bottom: 1.5rem; }

  /* Group a label with the example it labels, and let groups breathe apart. */
  .panel { gap: 1.15rem; }
  .panel .note + .tweet { margin-top: -.45rem; }
  .panel .tweet + .note { margin-top: 1rem; }
  .panel .steps { margin-top: .35rem; }

  /* Numerals in running text should sit on the baseline like letters do. */
  .stack p, section > p, .panel .note { font-variant-numeric: oldstyle-num; }


  /* ------------------------------------------------------ width */

  /* The shell is wide; the reading column is not. Panels, examples, the tools
     rows and the entry list get the extra room because they are scanned.
     Prose stays at its measure, because that is the one thing width hurts. */

  /* Section rules run edge to edge. A page whose every element stops at the
     same inner boundary reads like a narrow ribbon floating in a big window;
     one full-width line is enough to make the margins look chosen. */
  hr {
    width: 100vw;
    margin-left: calc(50% - 50vw);
  }