/* Embodied Tea — design tokens
   A paper-and-ink system. Restraint over decoration.
   Everything is in oklch where it matters; hex used where consistency with print is helpful.
*/

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

:root {
  /* --- Surfaces (warm paper) --- */
  --paper:        #f4f1ea;     /* primary canvas */
  --paper-2:      #ebe6da;     /* secondary surface, gently inset */
  --paper-3:      #e2dccb;     /* deepest paper (very rare) */
  --card:         #fbf8f1;     /* slightly lighter card surface */

  /* --- Ink --- */
  --ink:          #1c1b17;     /* primary text */
  --ink-2:        #3a3833;     /* secondary text */
  --ink-3:        #6b6558;     /* muted text, captions */
  --ink-4:        #9a9384;     /* hint, marginalia */
  --ink-rule:     #c2bba6;     /* hairline rules */
  --ink-rule-strong: #8a8472;  /* heavier rules */

  /* --- Accents (used sparingly) --- */
  --moss:         #5a6a3a;     /* primary accent — CTAs, marks */
  --moss-dark:    #3a4a25;     /* hover, dense use */
  --moss-wash:    #e8ecdc;     /* very light tint, behind a tag */
  --tea:          #7a4a2a;     /* warm brown, for tea references */
  --clay:         #a64a2a;     /* rare highlight, e.g. weather alert */

  /* --- Typography --- */
  --font-serif:   'EB Garamond', 'Times New Roman', Georgia, serif;
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;

  /* Type scale — built for editorial reading.
     Headings prefer the serif at generous sizes; body sticks to ~17px.
  */
  --t-xs:   0.75rem;   /* 12px — mono labels, marginalia */
  --t-sm:   0.875rem;  /* 14px — small body, captions */
  --t-base: 1.0625rem; /* 17px — body */
  --t-md:   1.25rem;   /* 20px — large body, pull quote */
  --t-lg:   1.5rem;    /* 24px — small headings */
  --t-xl:   2rem;      /* 32px — section headings */
  --t-2xl:  2.625rem;  /* 42px — page lead */
  --t-3xl:  3.75rem;   /* 60px — hero */
  --t-4xl:  5.5rem;    /* 88px — hero, large desktop */

  /* Line heights */
  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-body:   1.55;
  --lh-loose:  1.7;

  /* Spacing (4px base, named in semantic increments) */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  32px;
  --s-8:  40px;
  --s-9:  56px;
  --s-10: 72px;
  --s-11: 96px;
  --s-12: 128px;

  /* Radii — quiet */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;

  /* Border rules */
  --rule-hair: 1px solid var(--ink-rule);
  --rule-strong: 1px solid var(--ink-rule-strong);
  --rule-ink: 1px solid var(--ink);

  /* Motion */
  --dur-fast: 140ms;
  --dur-med:  220ms;
  --ease:     cubic-bezier(.2,.7,.2,1);

  /* Layout */
  --content-max: 1160px;
  --gutter: clamp(24px, 4vw, 56px);
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html, body { background: var(--paper); color: var(--ink); }
body {
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  font-feature-settings: 'ss01', 'cv11', 'ss03';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
}

h1 { font-size: var(--t-3xl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); }

p { margin: 0; }

a {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--ink-rule);
  transition: text-decoration-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
a:hover { text-decoration-color: var(--ink); }

/* Visually hidden (accessible) — no off-screen overflow.
   A skip link using this reveals itself on keyboard focus. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.visually-hidden:focus {
  position: fixed;
  top: var(--s-4);
  left: var(--s-4);
  width: auto;
  height: auto;
  margin: 0;
  padding: 10px 16px;
  overflow: visible;
  clip: auto;
  clip-path: none;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--r-sm);
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  z-index: 1000;
}

/* Utility — quiet rule */
.rule        { height: 1px; background: var(--ink-rule); border: 0; margin: 0; }
.rule-strong { height: 1px; background: var(--ink-rule-strong); border: 0; margin: 0; }

/* Mono caption — used for dates, "field notes" style labels */
.mono {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Selection — moss wash */
::selection { background: var(--moss-wash); color: var(--ink); }

/* Buttons (used very rarely — most CTAs are inline links with arrows) */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: var(--t-base);
  font-weight: 500;
  padding: 12px 22px;
  border-radius: var(--r-md);
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  text-decoration: none;
}
.btn:hover { background: var(--moss-dark); border-color: var(--moss-dark); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink-rule-strong);
}
.btn-ghost:hover { background: var(--paper-2); border-color: var(--ink); }

/* Inline link with arrow — the workhorse CTA */
.link-arrow {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: var(--t-base);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
  color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.link-arrow::after {
  content: '→';
  font-family: var(--font-serif);
  transition: transform var(--dur-fast) var(--ease);
}
.link-arrow:hover { color: var(--moss-dark); border-color: var(--moss-dark); }
.link-arrow:hover::after { transform: translateX(3px); }