/* Oak & Mason — v2 Stone & Oak design tokens */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,300;1,6..72,400;1,6..72,500&family=JetBrains+Mono:wght@300;400;500&display=swap');

:root {
  /* Surfaces */
  --ivory:      #F4EFE6;
  --paper:      #FAF6EE;
  --parchment:  #E8DFC8;
  --hairline:   #D9D2C2;
  --hairline-2: #C8BFA8;

  /* Ink — deep slate-green replaces black throughout */
  --ink:        #1B2A2E;
  --ink-2:      #2C3A3D;
  --ink-mute:   #6E7A7A;
  --ink-faint:  #9AA29F;

  /* Wood + accent */
  --oak:        #5C4A2E;
  --tobacco:    #8C6A3F;
  --gold:       #A88A5C;
  --gold-soft:  #C9B795;

  /* Type families */
  --f-display:  'Newsreader', 'Cormorant', 'Times New Roman', serif;
  --f-body:     'Newsreader', 'Cormorant', 'Times New Roman', serif;
  --f-mono:     'JetBrains Mono', 'IBM Plex Mono', ui-monospace, Menlo, monospace;

  /* Layout */
  --container:  1320px;
  --page-x:     96px;
}

@media (max-width: 1024px) { :root { --page-x: 32px; } }
@media (max-width: 640px)  { :root { --page-x: 20px; } }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--f-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

::selection { background: var(--ink); color: var(--ivory); }

/* Common helpers */
.mono       { font-family: var(--f-mono); font-weight: 400; }
.mono-up    { font-family: var(--f-mono); font-weight: 400; text-transform: uppercase; letter-spacing: 0.18em; font-size: 11px; color: var(--ink-mute); }
.mono-up-sm { font-family: var(--f-mono); font-weight: 400; text-transform: uppercase; letter-spacing: 0.22em; font-size: 10px; color: var(--ink-mute); }
.serif      { font-family: var(--f-display); }
.italic     { font-style: italic; }
.it-oak     { font-style: italic; color: var(--oak); font-weight: 300; }
.it-gold    { font-style: italic; color: var(--gold-soft); font-weight: 300; }

.hr-thin { border: 0; border-top: 1px solid var(--hairline); }
.hr-ink  { border: 0; border-top: 1px solid var(--ink); }