/* ============================================================
   base.css — design tokens, reset, grain, global typography
   everything else imports and inherits from here
   ============================================================ */


/* --- self-hosted fonts ---
     files live in src/static/fonts/ and are copied to public/fonts/ during build.
     woff2 only — full browser support and smallest file size.
     swap ensures text renders in fallback immediately while the font loads,
     preventing a flash of invisible text (FOIT). */

@font-face {
  font-family:   'EB Garamond';
  font-style:    normal;
  font-weight:   400;
  font-display:  swap;
  src: url('/fonts/EBGaramond-Regular.ttf') format('ttf');
}

@font-face {
  font-family:   'EB Garamond';
  font-style:    italic;
  font-weight:   400;
  font-display:  swap;
  src: url('/fonts/EBGaramond-Italic.ttf') format('ttf');
}


/* --- design tokens --- */
:root {
  /* palette */
  --cream:  #FAF7F2;
  --ink:    #271A0D;
  --muted:  #8C7B6B;
  --faint:  #B5A494;
  --border: #E4D8C8;

  /* accent colors — also assigned as marginalia guest thread colors */
  --rose: #C27476;
  --gold: #C49060;
  --sage: #7A9E7E;
  --teal: #5F8A92;

  /* secondary guest color fallbacks — extends palette to 8 without repeating */
  --lavender:  #9B8DB5;
  --terracotta:#C4856A;
  --slate:     #7A8E9E;
  --moss:      #8A9E7A;

  /* typography */
  --font-serif: 'EB Garamond', Georgia, 'Palatino Linotype', Palatino, serif;

  /* fluid type — scales between 15px (narrow mobile) and 18px (desktop) */
  --font-size-base: clamp(15px, 4vw, 18px);
  --line-height-prose: 1.9;

  /* spacing scale */
  --space-xs: 0.4rem;
  --space-s:  0.8rem;
  --space-m:  1.6rem;
  --space-l:  2.4rem;
  --space-xl: 4rem;

  /* layout */
  --content-width:        640px;
  --padding-page:         2rem;
  --padding-page-mobile:  1.1rem;
}


/* --- reset --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin:  0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  /* prevents iOS from auto-inflating font sizes in landscape */
  -webkit-text-size-adjust: 100%;
}


/* --- body --- */
body {
  background-color: var(--cream);
  color:       var(--ink);
  font-family: var(--font-serif);
  font-size:   var(--font-size-base);
  line-height: var(--line-height-prose);
  min-height:  100vh;
}

/* grain overlay — fixed so it doesn't scroll away with content */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E");
  background-size: 180px;
}


/* --- global typography --- */
em { font-style: italic; }

a {
  color: inherit;
  text-decoration: none;
}


/* --- utility classes --- */

/* small uppercase label — threads, type indicators, section headings */
.label {
  font-size:      0.63rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* muted italic — dates, attributions, music credits */
.meta {
  font-size:  0.68rem;
  color:      var(--faint);
  font-style: italic;
}

/* back-navigation link — "← index", "← books" */
.back-link {
  display:        inline-block;
  font-size:      0.68rem;
  color:          var(--muted);
  letter-spacing: 0.04em;
  margin-bottom:  var(--space-l);
  cursor:         pointer;
  transition:     color 0.2s;
}

.back-link:hover { color: var(--ink); }