/* Linus Workshop — one stylesheet for the whole site.
 *
 * The rules this is built to, in order of how often they get broken:
 *   · Two typefaces. A serif for headings, the system sans for everything else.
 *   · One colour plus neutrals. Rust is the only hue; the greys carry a little
 *     warmth so they do not read as default slate.
 *   · One effect. Sharp edges and hairline rules — no shadows, no glow, no
 *     blur, no lift on hover. Hover changes a border or a background, nothing
 *     moves.
 *   · One spacing scale. Every margin and padding below is a --s token.
 */

:root {
  color-scheme: dark light;

  /* type: Space Grotesk for both jobs.
     --serif is the heading face — it kept the name from when it was one. */
  --serif: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --sans: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --heading-weight: 700;
  --heading-tracking: -0.03em;
  --heading-em: normal;   /* Space Grotesk has no true italic, so the
                             emphasised words are carried by colour alone */

  /* colour: Moss, dark. One hue, cool neutrals. */
  --ink: #16191a;
  --surface: #1f2324;
  --line: #2f3435;
  --line-strong: #454b4c;
  --text: #e6eae9;
  --muted: #8f9998;
  --signal: #6e9b80;
  --signal-dim: #4a6b57;
  --on-signal: #0f1512;   /* text on a filled signal-coloured surface */

  /* spacing — 4, 8, 16, 24, 32, 48, 64, 96, 128. Nothing else is allowed. */
  --s1: 4px;
  --s2: 8px;
  --s3: 16px;
  --s4: 24px;
  --s5: 32px;
  --s6: 48px;
  --s7: 64px;
  --s8: 96px;
  --s9: 128px;

  /* type scale — Compact. Every font-size in this file is one of these. */
  --t-xs: 11px;
  --t-sm: 13px;
  --t-ui: 14px;
  --t-body: 15px;
  --t-md: 16px;
  --t-lg: 19px;
  --t-xl: 22px;
  --t-2xl: 25px;
  --t-page: clamp(28px, 4.6vw, 40px);
  --t-display: clamp(32px, 5.4vw, 48px);
  --lh: 1.5;
  --lh-tight: 1.08;

  /* density — Tight. Every section's air comes from these, so the whole
     page loosens or tightens together instead of drifting apart. */
  --pad-section: var(--s5);
  --pad-hero-top: var(--s6);
  --pad-hero-bottom: var(--s5);
  --pad-head-top: var(--s6);
  --pad-head-bottom: var(--s5);
  --gap-split: var(--s5);
}

/* Moss, light. Not the dark one inverted — the green is darkened until it
   holds against a pale background, and the greys keep their coolness. */
@media (prefers-color-scheme: light) {
  :root {
    --ink: #f0f2ee;
    --surface: #e5eae3;
    --line: #d5dbd2;
    --line-strong: #b0b7ac;
    --text: #1a1e1b;
    --muted: #626a63;
    --signal: #3d6b52;
    --signal-dim: #2d5240;
    --on-signal: #f2f5f0;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--sans);
  background: var(--ink);
  color: var(--text);
  font-size: var(--t-body);
  line-height: var(--lh);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

a { color: var(--signal); }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
}

.wrap { width: min(1080px, 100% - var(--s6)); margin-inline: auto; }

/* A label in the left gutter, with the content beside it. Wide screens get
   the two columns; narrow ones stack, and the label just sits above. */
.split {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: var(--gap-split);
  align-items: start;
}
@media (max-width: 800px) {
  .split { grid-template-columns: 1fr; gap: var(--s3); }
}

.label {
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  padding-top: var(--s1);
}

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

.site-head { border-bottom: 1px solid var(--line); background: var(--ink); }
.site-head .wrap { padding: var(--s3) 0; }

.ts-nav { display: flex; align-items: center; gap: var(--s4); position: relative; }
.ts-nav a { text-decoration: none; }

.ts-mark {
  color: var(--text);
  font-family: var(--serif);
  font-size: var(--t-md);
  font-weight: 600;
}
.ts-mark b { color: var(--signal); font-weight: 600; }
.ts-mark:hover { color: var(--signal); }

.ts-links { display: flex; align-items: center; gap: var(--s4); margin-left: auto; }

.ts-links a,
.ts-menu-btn {
  font-family: var(--sans);
  font-size: var(--t-ui);
  color: var(--muted);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  border-bottom: 1px solid transparent;
  transition: color .12s, border-color .12s;
}
.ts-links a:hover,
.ts-menu-btn:hover { color: var(--text); }
.ts-links a[aria-current="page"] { color: var(--text); border-bottom-color: var(--signal); }
.ts-links a.ts-support { color: var(--signal); }
.ts-links a.ts-support:hover { border-bottom-color: var(--signal); }

/* the Tools drop-down — anchored to the bar, not the button, so it cannot
   hang off the edge of a narrow screen */
.ts-menu { position: static; }
.ts-menu-btn .caret { transition: transform .12s; }
.ts-menu[data-open="true"] .ts-menu-btn { color: var(--text); }
.ts-menu[data-open="true"] .caret { transform: scaleY(-1); }

.ts-menu-list {
  position: absolute;
  top: calc(100% + var(--s3));
  right: 0;
  min-width: 260px;
  max-width: calc(100vw - var(--s5));
  background: var(--surface);
  border: 1px solid var(--line-strong);
  padding: var(--s1);
  display: none;
  z-index: 20;
}
.ts-menu[data-open="true"] .ts-menu-list { display: block; }
.ts-menu-list a {
  display: block;
  padding: var(--s2) var(--s3);
  color: var(--text);
  font-size: var(--t-sm);
  line-height: 1.4;
}
.ts-menu-list a small { display: block; color: var(--muted); font-size: var(--t-xs); }
.ts-menu-list a:hover { background: var(--ink); }
.ts-menu-list .ts-empty {
  padding: var(--s2) var(--s3);
  color: var(--muted);
  font-size: var(--t-sm);
}

@media (max-width: 620px) {
  .ts-nav { gap: var(--s3); }
  .ts-links { gap: var(--s3); }
  .ts-links a, .ts-menu-btn { font-size: var(--t-sm); }
}

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

/* Deliberately lopsided: the headline runs wide on the left, the facts sit in
   a narrow column on the right and stop well short of the page edge. */
.hero { padding: var(--pad-hero-top) 0 var(--pad-hero-bottom); border-bottom: 1px solid var(--line); }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: var(--gap-split);
  align-items: end;
}
@media (max-width: 860px) {
  .hero { padding: var(--pad-hero-bottom) 0 var(--pad-head-bottom); }
  .hero-grid { grid-template-columns: 1fr; gap: var(--s5); align-items: start; }
}

.hero h1 {
  font-size: var(--t-display);
  line-height: var(--lh-tight);
  max-width: 13ch;
}
.hero h1 em { font-style: var(--heading-em); color: var(--signal); }
.hero .lede { margin-top: var(--s4); max-width: 46ch; color: var(--muted); font-size: var(--t-md); }

.facts { border-top: 1px solid var(--line); }
.facts div {
  display: flex;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-sm);
  color: var(--muted);
}
.facts div b { color: var(--text); font-weight: 500; }

/* ----------------------------------------------------------------- content */

main { flex: 1; }
.section { padding: var(--pad-section) 0; }
.section + .section { padding-top: 0; }

.page-head { padding: var(--pad-head-top) 0 var(--pad-head-bottom); border-bottom: 1px solid var(--line); }
.page-head h1 { font-size: var(--t-page); line-height: var(--lh-tight); }
.page-head p { margin-top: var(--s3); color: var(--muted); font-size: var(--t-md); max-width: 52ch; }

.prose { max-width: 60ch; }
.prose h2 { font-size: var(--t-xl); margin: var(--s6) 0 var(--s2); }
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--muted); margin-bottom: var(--s3); }
.prose ul { color: var(--muted); list-style: none; }
.prose li { margin-bottom: var(--s3); padding-left: var(--s4); position: relative; }
.prose li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: var(--s2);
  height: 1px;
  background: var(--signal);
}
.prose strong { color: var(--text); font-weight: 600; }
/* underlined, because in a palette where the signal colour is near-white a
   link picked out by colour alone stops reading as one */
.prose a { text-decoration: underline; text-underline-offset: 2px; }

/* ------------------------------------------------------- rows, not cards */

/* Tools and links are lists separated by hairlines. No boxes, so there are no
   corners to round and no shadows to stack under them. */
.rows { border-top: 1px solid var(--line); }
.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s4);
  align-items: baseline;
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
}
a.row:hover { background: var(--surface); }
a.row:hover .row-go { color: var(--signal); }
.row h3 { font-size: var(--t-lg); }
.row p { color: var(--muted); font-size: var(--t-ui); margin-top: var(--s1); max-width: 56ch; }
.row-go { color: var(--muted); font-size: var(--t-sm); white-space: nowrap; }

.empty {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: var(--s5) 0;
  color: var(--muted);
  max-width: 52ch;
}
.empty strong { display: block; color: var(--text); font-family: var(--serif); font-size: var(--t-lg); font-weight: var(--heading-weight); margin-bottom: var(--s1); }

/* socials as the same kind of row */
.social {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: var(--text);
}
.social:hover { color: var(--signal); }
.social svg { flex: none; color: var(--muted); }
.social:hover svg { color: var(--signal); }
.social .who { font-size: var(--t-body); }
.social .note { margin-left: auto; color: var(--muted); font-size: var(--t-sm); text-align: right; }
@media (max-width: 560px) { .social .note { display: none; } }

/* ------------------------------------------------------------------ button */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  text-decoration: none;
  font-family: var(--sans);
  font-size: var(--t-ui);
  padding: var(--s3) var(--s4);
  border: 1px solid var(--line-strong);
  color: var(--text);
  background: none;
  transition: background .12s, border-color .12s, color .12s;
}
.btn:hover { border-color: var(--signal); color: var(--signal); }
.btn-primary { background: var(--signal); border-color: var(--signal); color: var(--on-signal); font-weight: 550; }
.btn-primary:hover { background: var(--signal-dim); border-color: var(--signal-dim); color: var(--on-signal); }

.actions { display: flex; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s5); }

/* ---------------------------------------------------------------- tip jar */

/* Left-aligned and open at the right, so it reads as part of the column
   rather than a centred card dropped on top of it. */
.jar {
  border-top: 2px solid var(--signal);
  border-bottom: 1px solid var(--line);
  padding: var(--s5) 0;
  max-width: 52ch;
}
.jar h2 { font-size: var(--t-2xl); }
.jar p { color: var(--muted); margin-top: var(--s2); }
.jar .actions { margin-top: var(--s4); align-items: center; }
.jar .handle { color: var(--muted); font-size: var(--t-sm); }

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

.site-foot {
  border-top: 1px solid var(--line);
  padding: var(--s5) 0 var(--pad-section);
  margin-top: auto;
  color: var(--muted);
  font-size: var(--t-sm);
}
.foot-grid { display: flex; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; }
.foot-grid a { color: var(--muted); text-decoration: none; }
.foot-grid a:hover { color: var(--text); }
.foot-social { display: flex; gap: var(--s4); flex-wrap: wrap; }