/* ============================================================
   gabrielpenman.co.uk — Engineering Calm + a few modern touches
   Tokens: from design-language/project/colors_and_type.css
   Additions (restrained):
     - text-decoration-style: wavy on links (squiggle)
     - variable font weight hover on h1 (Newsreader wght axis)
     - scroll-driven reveals via animation-timeline: view()
     - anchor-positioned footnotes
     - @starting-style entrance
     - text-wrap: balance / pretty
   All motion respects prefers-reduced-motion.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,600&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --bg:           #fcfaf3;
  --bg-sunk:      #f5f1e4;
  --bg-ink:       #1c1e22;
  --fg:           #1a1a1a;
  --fg-muted:     #6b6b6b;
  --fg-faint:     #a0a0a0;
  --rule:         #e8e2cf;
  --accent:       #2d4a6b;

  --font-serif:   'Newsreader', 'Source Serif 4', Georgia, serif;
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, Menlo, monospace;

  --t-xs:    13px;
  --t-sm:    14px;
  --t-base:  19px;
  --t-lg:    22px;
  --t-h3:    24px;
  --t-h2:    28px;
  --t-h1:    34px;
  --t-display: 44px;

  --lh-tight: 1.2;
  --lh-body:  1.65;

  --ls-caps:  0.08em;

  --measure:       680px;
  --measure-wide:  760px;
  --gutter:        24px;
  --space-1:  8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;

  --rule-thin: 1px solid var(--rule);
  --radius-1: 2px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-serif);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: color-mix(in oklch, var(--accent) 25%, transparent); }

/* Header / nav — small sans, name left, link right */
.site-header {
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--space-5) var(--gutter) var(--space-3);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-sans);
  font-size: var(--t-xs);
}
.site-header .brand {
  color: var(--fg);
  text-decoration: none;
  font-weight: 500;
}
.site-header nav { display: flex; gap: var(--space-3); }
.site-header nav a {
  color: var(--fg-muted);
  text-decoration: none;
}
.site-header nav a:hover { color: var(--fg); }

/* Main */
.site-main {
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--space-4) var(--gutter) var(--space-7);
}

/* Page title — serif weight 400, animatable variable axis on hover */
h1, .h1 {
  font-family: var(--font-serif);
  font-size: var(--t-h1);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: -0.005em;
  margin: 0 0 var(--space-2);
  text-wrap: balance;
  font-variation-settings: 'wght' 400, 'opsz' 36;
  view-transition-name: page-title;
  animation: gp-rise 800ms cubic-bezier(0.2, 0.6, 0.2, 1) both;
}
@starting-style {
  h1 { opacity: 0; transform: translateY(10px); }
}
h1 em {
  font-style: italic;
  color: var(--accent);
  font-variation-settings: 'wght' 400, 'opsz' 36;
  transition: font-variation-settings 500ms ease;
}
h1 em:hover { font-variation-settings: 'wght' 600, 'opsz' 36; }

@keyframes gp-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Section labels — small sans caps, muted */
h2, .caps {
  font-family: var(--font-sans);
  font-size: var(--t-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--fg-muted);
  margin: var(--space-5) 0 var(--space-2);
}

h3 {
  font-family: var(--font-serif);
  font-size: var(--t-h3);
  font-weight: 500;
  line-height: var(--lh-tight);
  margin: var(--space-4) 0 var(--space-1);
  text-wrap: balance;
}

.sublabel {
  font-family: var(--font-sans);
  font-size: var(--t-xs);
  color: var(--fg-muted);
  margin: 0 0 var(--space-3);
}

/* Body prose */
p {
  margin: 0 0 var(--space-3);
  max-width: var(--measure);
  text-wrap: pretty;
}

.lede {
  font-size: var(--t-lg);
  line-height: 1.5;
  color: color-mix(in oklch, var(--fg) 88%, transparent);
  margin-bottom: var(--space-4);
}

/* Links — squiggle underline in accent.
   Hover thickens the squiggle. No color change. */
a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-thickness 120ms linear;
}
a:hover { text-decoration-thickness: 2px; }

/* Header / nav links lose the squiggle — only body links squiggle. */
.site-header a,
.site-footer a,
.no-squiggle {
  text-decoration: none;
}
.site-header a:hover,
.site-footer a:hover {
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 1px;
}

/* Single button per page — rectangular, accent border */
.btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--accent);
  border-radius: var(--radius-1);
  padding: 10px 20px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms linear;
}
.btn:hover {
  background: color-mix(in oklch, var(--accent) 8%, transparent);
  text-decoration: none;
}

/* Rules */
hr {
  border: 0;
  border-top: var(--rule-thin);
  margin: var(--space-4) 0;
}

/* Pricing tables — small sans, dense, brand-consistent */
table {
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  border-collapse: collapse;
  margin: var(--space-2) 0 var(--space-4);
  width: 100%;
  max-width: var(--measure);
}
th, td {
  text-align: left;
  padding: 10px 16px 10px 0;
  border-bottom: var(--rule-thin);
  vertical-align: top;
}
th {
  font-weight: 500;
  color: var(--fg-muted);
  text-transform: uppercase;
  font-size: var(--t-xs);
  letter-spacing: var(--ls-caps);
}
td.price {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  white-space: nowrap;
  color: var(--fg);
}

/* Blockquote — left rule, italic */
blockquote {
  margin: var(--space-4) 0;
  padding-left: var(--space-3);
  border-left: 2px solid var(--rule);
  color: var(--fg-muted);
  font-style: italic;
  max-width: var(--measure);
}

code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--bg-sunk);
  padding: 1px 5px;
  border-radius: var(--radius-1);
}

/* ----------- Scroll-driven reveal -----------
   Sections fade up as they enter the viewport, on the compositor.
   Disabled if the browser doesn't support view() timelines or the
   user prefers reduced motion. */
.reveal {
  animation: gp-reveal linear both;
  animation-timeline: view();
  animation-range: entry 0% cover 25%;
}
@keyframes gp-reveal {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@supports not (animation-timeline: view()) {
  .reveal { opacity: 1; transform: none; animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal, h1 { animation: none; opacity: 1; transform: none; }
  h1 em { transition: none; }
  * { scroll-behavior: auto; }
}

/* ----------- Sidenote / anchor-positioned footnote -----------
   Inline trigger gets a dotted accent underline; a small note
   pops below it via CSS anchor positioning. Static fallback
   inlines the note for browsers without anchor support. */
.note-trigger {
  color: var(--accent);
  border-bottom: 1px dotted var(--accent);
  text-decoration: none;
  cursor: help;
  font-style: italic;
  anchor-name: --note;
}
.note {
  position: absolute;
  position-anchor: --note;
  top: anchor(bottom);
  left: anchor(left);
  margin-top: 6px;
  width: 260px;
  padding: 10px 14px;
  background: var(--fg);
  color: var(--bg);
  font-family: var(--font-sans);
  font-size: var(--t-xs);
  line-height: 1.5;
  border-radius: var(--radius-1);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
  z-index: 10;
}
.note-trigger:hover + .note,
.note-trigger:focus + .note { opacity: 1; }
@supports not (anchor-name: --x) {
  .note {
    position: static;
    display: inline-block;
    margin: 4px 0 8px;
    width: auto;
    opacity: 1;
    background: var(--bg-sunk);
    color: var(--fg);
  }
}

/* Page footer */
.site-footer {
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--space-3) var(--gutter) var(--space-5);
  font-family: var(--font-sans);
  font-size: var(--t-xs);
  color: var(--fg-muted);
  border-top: var(--rule-thin);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.site-footer a { color: var(--fg-muted); }