/* Home Office Bench — shared styles */

:root {
  --ground: #F4F5F2;
  --surface: #FCFDFB;
  --surface-2: #E8EBE6;
  --ink: #14181A;
  --ink-2: #4A534F;
  --ink-3: #6E7873;
  --rule: #D8DCD6;
  --accent: #1B5E52;
  --accent-hover: #12463D;
  --accent-soft: #DDEAE4;
  --signal: #8A5210;
  --signal-soft: #F1E5D3;
  --shadow: 0 1px 2px rgba(20, 24, 26, .05);

  --serif: Charter, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: Seravek, "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "SF Mono", ui-monospace, "IBM Plex Mono", Menlo, Consolas, monospace;

  --micro: .75rem;
  --small: .875rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: 1.5rem;
  --step-3: 2rem;
  --step-4: 2.875rem;

  --measure: 34rem;
  --wide: 62rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0F1211;
    --surface: #171B1A;
    --surface-2: #202524;
    --ink: #E9ECE8;
    --ink-2: #A9B3AE;
    --ink-3: #848F8A;
    --rule: #2A2F2D;
    --accent: #5CC0A5;
    --accent-hover: #7BD4BC;
    --accent-soft: #1A2F2A;
    --signal: #D9A05B;
    --signal-soft: #2E2519;
    --shadow: none;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

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

/* ---------- layout ---------- */

.shell {
  width: 100%;
  max-width: var(--wide);
  margin: 0 auto;
  padding-inline: clamp(1.1rem, 4vw, 2.5rem);
}

/* Guide pages are a single reading column — narrow the shell so the text sits
   in the page rather than pinned to its left edge. Header and footer keep the
   full width, so the wordmark still lines up across the site. */
.guide main .shell { max-width: 46rem; }

.col { max-width: var(--measure); }

main { display: block; }

.stack { display: flex; flex-direction: column; gap: 1.1rem; }

/* ---------- header ---------- */

.site-head {
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
}
.site-head .shell {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  padding-block: 1rem;
}
.wordmark {
  font-family: var(--serif);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
  text-decoration: none;
}
.wordmark span { color: var(--accent); }
.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.25rem;
  font-family: var(--mono);
  font-size: var(--micro);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.site-nav a { color: var(--ink-2); text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--accent); }

/* ---------- disclosure ---------- */

.disclosure {
  background: var(--signal-soft);
  border-bottom: 1px solid var(--rule);
  color: var(--signal);
  font-size: var(--small);
}
.disclosure .shell { padding-block: .6rem; }
.disclosure a { color: inherit; }

/* ---------- typography ---------- */

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.012em;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }

p { margin: 0; }

.eyebrow {
  font-family: var(--mono);
  font-size: var(--micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0;
}

.lede { font-size: var(--step-1); color: var(--ink-2); }

.prose { display: flex; flex-direction: column; gap: 1.15rem; max-width: var(--measure); }
.prose h2 { margin-top: 1.6rem; }
.prose h3 { margin-top: 1rem; font-size: var(--step-1); }
.prose ul, .prose ol { margin: 0; padding-left: 1.15rem; display: flex; flex-direction: column; gap: .5rem; }
.prose li { padding-left: .15rem; }
.prose strong { font-weight: 600; }

.page-head {
  padding-block: clamp(2.25rem, 6vw, 4rem) 1.75rem;
  display: flex;
  flex-direction: column;
  gap: .9rem;
}
.page-head .col { max-width: 42rem; }

section.band { padding-block: clamp(2rem, 5vw, 3.25rem); }
section.band + section.band { border-top: 1px solid var(--rule); }

/* ---------- home hero ---------- */

.hero { padding-block: clamp(2.5rem, 7vw, 5rem) clamp(2rem, 5vw, 3rem); }
.hero h1 { max-width: 16ch; }
.hero .lede { max-width: 46ch; margin-top: 1rem; }
.hero-meta {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.75rem;
  font-family: var(--mono);
  font-size: var(--micro);
  color: var(--ink-3);
  letter-spacing: .05em;
}

/* ---------- guide cards ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
}
/* Four cards read better as a 2x2 block than as a row of three plus an orphan. */
@media (min-width: 48rem) {
  .cards--2up { grid-template-columns: 1fr 1fr; }
}
.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 3px;
  box-shadow: var(--shadow);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, transform .15s;
}
.card:hover { border-color: var(--accent); transform: translateY(-1px); }
.card .kicker {
  font-family: var(--mono);
  font-size: var(--micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
}
.card h3 { font-size: var(--step-1); }
.card p { font-size: var(--small); color: var(--ink-2); }
.card .more {
  font-family: var(--mono);
  font-size: var(--micro);
  letter-spacing: .06em;
  color: var(--ink-3);
  margin-top: auto;
  padding-top: .35rem;
}

/* ---------- diagrams ----------
   Inline SVG rather than <img> so the drawings inherit the page's theme tokens
   and stay legible in both light and dark. Each carries a <title> for screen
   readers and repeats its point in the caption for anyone who can't see it. */

figure.diagram {
  margin: .4rem 0;
  max-width: var(--measure);
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
figure.diagram svg {
  width: 100%;
  height: auto;
  display: block;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 3px;
}
figure.diagram figcaption {
  font-size: var(--small);
  color: var(--ink-3);
  line-height: 1.5;
}
.dg-line { stroke: var(--ink-2); stroke-width: 1.5; fill: none; }
.dg-thin { stroke: var(--rule); stroke-width: 1; fill: none; }
.dg-dash { stroke: var(--ink-3); stroke-width: 1; fill: none; stroke-dasharray: 4 4; }
.dg-acc  { stroke: var(--accent); stroke-width: 2; fill: none; }
.dg-accf { fill: var(--accent); }
.dg-fill { fill: var(--surface-2); stroke: var(--ink-3); stroke-width: 1; }
.dg-ink  { fill: var(--ink); }
.dg-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  fill: var(--ink-3);
}
.dg-label--acc { fill: var(--accent); }
.dg-head {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  fill: var(--ink-2);
}

/* ---------- callouts ---------- */

.note {
  border-left: 2px solid var(--accent);
  padding: .15rem 0 .15rem 1rem;
  color: var(--ink-2);
  max-width: var(--measure);
}

.checklist {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 1.25rem 1.4rem;
  max-width: var(--measure);
  display: flex;
  flex-direction: column;
  gap: .7rem;
}
.checklist h3 {
  font-family: var(--mono);
  font-size: var(--micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}
.checklist ol, .checklist ul { margin: 0; padding-left: 1.15rem; display: flex; flex-direction: column; gap: .45rem; }
.checklist li { font-size: var(--small); color: var(--ink-2); }
.checklist li strong { color: var(--ink); font-weight: 600; }

/* ---------- product slot ---------- */

.pick {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 3px;
  box-shadow: var(--shadow);
  padding: 1.15rem 1.3rem;
  max-width: var(--measure);
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.pick .role {
  font-family: var(--mono);
  font-size: var(--micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.pick h3 { font-size: var(--step-1); }
.pick p { font-size: var(--small); color: var(--ink-2); }
.pick .buy {
  align-self: flex-start;
  font-family: var(--mono);
  font-size: var(--micro);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 2px;
  padding: .4rem .7rem;
  text-decoration: none;
  margin-top: .2rem;
}
.pick .buy:hover { background: var(--accent); color: var(--surface); }
.pick .unlinked {
  align-self: flex-start;
  font-family: var(--mono);
  font-size: var(--micro);
  letter-spacing: .06em;
  color: var(--ink-3);
  border: 1px dashed var(--rule);
  border-radius: 2px;
  padding: .4rem .7rem;
  margin-top: .2rem;
}

/* ---------- tables ---------- */

.table-scroll { overflow-x: auto; max-width: var(--measure); }
table { border-collapse: collapse; width: 100%; font-size: var(--small); }
th, td {
  text-align: left;
  padding: .6rem .9rem .6rem 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: baseline;
}
thead th {
  font-family: var(--mono);
  font-size: var(--micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  border-bottom-color: var(--ink-2);
}
td.num { font-variant-numeric: tabular-nums; font-family: var(--mono); }

/* ---------- read next ---------- */

.read-next {
  border-top: 1px solid var(--rule);
  padding-block: 2rem 3rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.read-next h2 { font-size: var(--step-2); }

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

.site-foot {
  border-top: 1px solid var(--rule);
  background: var(--surface);
  padding-block: 2rem 2.5rem;
  margin-top: 2rem;
}
.site-foot .shell { display: flex; flex-direction: column; gap: .9rem; }
.site-foot p, .site-foot li { font-size: var(--small); color: var(--ink-2); margin: 0; }
.foot-links { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; list-style: none; padding: 0; margin: 0; }
.foot-legal { font-family: var(--mono); font-size: var(--micro); color: var(--ink-3); max-width: 60ch; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}