/* bencounsell.com. Layout: one 1080px column. Each section is a two-column row: a small mono label on the
   left, the content on the right, separated by hairlines. The one bold element is the name in the hero,
   framed with construction lines and an inspector size label, the same visual language as Hairline. */
:root {
  --paper: #f6f6f4;
  --paper-2: #ededea;
  --ink: #16171a;
  --ink-2: #484b51;
  --ink-3: #7a7e85;
  --line: #deded9;
  --gold: #9a6a08;       /* text-safe gold for small accents */
  --gold-line: #c9921a;  /* construction lines and marks */
  --gold-soft: #f6ead0;

  --f-display: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --f-body: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --t-name: clamp(2.9rem, 1.2rem + 7.4vw, 7rem);
  --t-h1: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  --t-lead: clamp(1.15rem, 1.05rem + .45vw, 1.35rem);
  --t-small: .8125rem;
  --gutter: clamp(16px, 4vw, 40px);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0e0f11; --paper-2: #17191c; --ink: #ececed; --ink-2: #a8acb2; --ink-3: #777b82; --line: #26292e;
    --gold: #f4c64f; --gold-line: #c9921a; --gold-soft: #2a210c;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0e0f11; --paper-2: #17191c; --ink: #ececed; --ink-2: #a8acb2; --ink-3: #777b82; --line: #26292e;
  --gold: #f4c64f; --gold-line: #c9921a; --gold-soft: #2a210c;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 1.0625rem/1.65 var(--f-body); -webkit-font-smoothing: antialiased;
  min-height: 100vh; display: flex; flex-direction: column;
}
main { flex: 1 0 auto; width: 100%; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--ink-3); }
a:hover { text-decoration-color: var(--gold-line); }
:focus-visible { outline: 2px solid var(--gold-line); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--f-display); margin: 0; text-wrap: balance; letter-spacing: -0.04em; }
p { margin: 0; text-wrap: pretty; }
.mono { font-family: var(--f-display); }
.wrap { max-width: 1080px; margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 16px; background: var(--ink); color: var(--paper); padding: 8px 12px; z-index: 10; }

/* ------------------------------------------------------------ header + footer */
.top { border-bottom: 1px solid var(--line); }
.top-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 18px; flex-wrap: wrap; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 700 .95rem/1 var(--f-display); letter-spacing: -0.02em; }
.mark { width: 24px; height: 24px; fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: square; }
.mark .fine { stroke: var(--gold-line); stroke-width: 1; }
.top nav { display: flex; gap: 22px; font: 500 var(--t-small)/1 var(--f-display); }
.top nav a { text-decoration: none; color: var(--ink-2); padding-block: 6px; }
.top nav a:hover, .top nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -1px 0 var(--gold-line); }

.foot { border-top: 1px solid var(--line); margin-top: 96px; }
.foot-in { display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; padding-block: 28px; font: 400 var(--t-small)/1.5 var(--f-display); color: var(--ink-3); }
.foot nav { display: flex; gap: 18px; flex-wrap: wrap; }
.foot a { color: var(--ink-2); text-decoration: none; }
.foot a:hover { color: var(--ink); }

/* ------------------------------------------------------------ hero */
.hero { padding-block: clamp(56px, 10vw, 120px) clamp(48px, 7vw, 88px); display: grid; gap: clamp(28px, 4vw, 44px); }
.frame { position: relative; justify-self: start; max-width: 100%; padding: 10px 14px 6px; }
@media (min-width: 900px) { .frame { margin-left: -14px; } .tag { left: -14px; } }
/* Construction lines: a bold corner at the top left (the logo's L) and fine lines that run past the box. */
.frame::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-top: 3px solid var(--ink); border-left: 3px solid var(--ink);
  width: 28px; height: 28px;
}
.frame::after {
  content: ""; position: absolute; inset: -14px; pointer-events: none;
  background:
    linear-gradient(var(--gold-line), var(--gold-line)) 0 14px / 100% 1px no-repeat,
    linear-gradient(var(--gold-line), var(--gold-line)) 0 calc(100% - 14px) / 100% 1px no-repeat,
    linear-gradient(var(--gold-line), var(--gold-line)) 14px 0 / 1px 100% no-repeat,
    linear-gradient(var(--gold-line), var(--gold-line)) calc(100% - 14px) 0 / 1px 100% no-repeat;
  opacity: .7;
}
.frame h1 { font-size: var(--t-name); font-weight: 800; line-height: 1; letter-spacing: -0.065em; }
.tag {
  position: absolute; left: -14px; bottom: calc(100% + 18px); white-space: nowrap;
  font-size: .72rem; line-height: 1; color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.tag b { color: var(--gold); font-weight: 700; }
.intro { font-size: var(--t-lead); line-height: 1.55; color: var(--ink-2); max-width: 36em; }

/* ------------------------------------------------------------ sections */
.block { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 16px 32px; padding-block: 36px; border-top: 1px solid var(--line); }
.label { font: 500 var(--t-small)/1.9 var(--f-display); letter-spacing: 0; color: var(--ink-3); }
.label::before { content: "#"; color: var(--gold); margin-right: 2px; }
@media (max-width: 720px) { .block { grid-template-columns: minmax(0, 1fr); } }

.rows { list-style: none; margin: 0; padding: 0; display: grid; }
.row { display: grid; gap: 4px 20px; align-items: baseline; text-decoration: none; padding: 14px 12px; margin-inline: -12px; border: 1px solid transparent; }
.row:hover { border-color: var(--line); background: var(--paper-2); }
.row:hover .row-title { text-decoration: underline; text-decoration-color: var(--gold-line); }
.row-main { display: grid; gap: 4px; min-width: 0; }
.row-title { font: 700 1.05rem/1.35 var(--f-display); letter-spacing: -0.03em; }
.row-sub { color: var(--ink-2); font-size: .98rem; }

.product-row { grid-template-columns: 44px minmax(0, 1fr) auto; align-items: start; }
.product-row img { border: 1px solid var(--line); }
.row-meta { display: grid; gap: 2px; text-align: right; font-size: .75rem; line-height: 1.6; color: var(--ink-3); white-space: nowrap; }
.pill { display: inline-block; vertical-align: 2px; margin-left: 6px; padding: 3px 6px; font: 600 .65rem/1 var(--f-display); letter-spacing: .04em; text-transform: uppercase; color: var(--gold); background: var(--gold-soft); border: 1px solid var(--gold-line); }
@media (max-width: 720px) {
  .product-row { grid-template-columns: 44px minmax(0, 1fr); }
  .row-meta { grid-column: 2; display: flex; flex-wrap: wrap; gap: 0 14px; text-align: left; }
}

.post-row { grid-template-columns: 6.5rem minmax(0, 1fr); }
.post-row time { font: 400 var(--t-small)/1.9 var(--f-display); color: var(--ink-3); font-variant-numeric: tabular-nums; }
@media (max-width: 480px) { .post-row { grid-template-columns: minmax(0, 1fr); } }
.more { margin-top: 16px; font: 500 var(--t-small)/1.5 var(--f-display); color: var(--ink-3); }

.prose { display: grid; gap: 1.1em; max-width: 38em; min-width: 0; }
.prose > * { margin: 0; }
.prose h2 { font-size: 1.4rem; margin-top: .6em; }
.prose h3 { font-size: 1.15rem; margin-top: .4em; }
.prose a { text-decoration-color: var(--gold-line); }
.prose code { font: .9em var(--f-display); background: var(--paper-2); padding: .1em .35em; }
.prose pre { overflow-x: auto; background: var(--paper-2); border: 1px solid var(--line); padding: 16px; font: .875rem/1.6 var(--f-display); }
.prose pre code { background: none; padding: 0; }
.prose blockquote { border-left: 3px solid var(--gold-line); padding-left: 16px; color: var(--ink-2); }
.prose img { border: 1px solid var(--line); }
.links { display: flex; gap: 20px; flex-wrap: wrap; font: 500 var(--t-small)/1.5 var(--f-display); }
.todo { background: var(--gold-soft); outline: 1px dashed var(--gold-line); }

/* ------------------------------------------------------------ inner pages */
.page { padding-top: clamp(48px, 8vw, 96px); }
.page-head { display: grid; gap: 14px; padding-bottom: 36px; }
.page-head h1 { font-size: var(--t-h1); font-weight: 800; line-height: 1.08; letter-spacing: -0.055em; }
.meta { font-size: var(--t-small); color: var(--ink-3); }
.post { max-width: 42rem; }
.post .prose { font-size: 1.125rem; line-height: 1.7; }
.post-foot { margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--line); font: 500 var(--t-small)/1.5 var(--f-display); }

/* Privacy policy (rendered by scripts/legal.mjs into _legal-shell.html). */
.policy { display: grid; gap: 16px; max-width: 46rem; margin-inline: auto; }
.policy h1 { font-size: var(--t-h1); font-weight: 800; letter-spacing: -0.055em; }
.policy h2 { font-size: 1.3rem; margin-top: 20px; }
.policy p, .policy li { color: var(--ink-2); }
.policy ul, .policy ol { margin: 0; padding-left: 1.2rem; display: grid; gap: 6px; }
.policy .eyebrow { font-size: var(--t-small); color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.policy .callout { padding: 16px 18px; border: 1px solid var(--line); border-left: 3px solid var(--gold-line); background: var(--paper-2); }
.policy a { text-decoration-color: var(--gold-line); }