/*
 * kindle-overlay.css
 * E-ink / Kindle warm parchment overlay for thomasorganic.com
 * Drop this file after styles.css — it overrides colour tokens and
 * typography to produce a warm, literary, ink-on-paper aesthetic.
 * Fully reversible: remove the <link> tag to restore the original look.
 */

/* ─── Google Fonts: EB Garamond for body copy ─────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Playfair+Display:wght@500;600;700;800&display=swap');

/* ─── Paper-grain noise texture (pure CSS SVG data URI) ──────────────── */
:root {
  --paper-grain: 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.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
}

/* ─── Light mode: warm parchment ─────────────────────────────────────── */
:root {
  --bg:     #f5f0e8;   /* aged parchment page */
  --paper:  #faf7f2;   /* fresh page surface  */
  --soft:   #ede8df;   /* slightly deeper parchment for panels */
  --line:   #c8b89a;   /* warm tan — book page edge */
  --text:   #1a1410;   /* deep warm ink black */
  --muted:  #6b5c4e;   /* sepia — footnote tone */
  --accent: #8b6914;   /* amber ink — fountain pen annotation */

  /* replace the cool blue gradient with a warm parchment radial */
  --cover-grad:
    radial-gradient(circle at 15% 20%, rgba(200,160,80,.18), transparent 42%),
    radial-gradient(circle at 80% 30%, rgba(180,140,90,.14), transparent 45%),
    radial-gradient(circle at 45% 80%, rgba(160,120,70,.12), transparent 44%),
    linear-gradient(135deg, #f7f2e8, #ede8dc);
}

/* ─── Dark mode: warm candlelight night-reading ───────────────────────── */
[data-theme="dark"] {
  --bg:     #1c1510;   /* dark walnut */
  --paper:  #251d17;   /* slightly lighter walnut */
  --soft:   #2e2419;   /* warm dark panel */
  --line:   #4a3a2c;   /* warm dark border */
  --text:   #e8dcc8;   /* candlelight cream */
  --muted:  #b09a80;   /* warm sepia muted */
  --accent: #d4a843;   /* warm gold accent */

  --cover-grad:
    radial-gradient(circle at 15% 20%, rgba(200,140,50,.14), transparent 42%),
    radial-gradient(circle at 80% 30%, rgba(180,120,60,.10), transparent 45%),
    radial-gradient(circle at 45% 80%, rgba(160,100,40,.09), transparent 44%),
    linear-gradient(135deg, #2a2018, #1f1810);
}

/* ─── Paper grain on body ─────────────────────────────────────────────── */
body {
  background-color: var(--bg);
  background-image: var(--paper-grain);
  background-attachment: fixed;
  background-size: 200px 200px;
  font-family: 'EB Garamond', Georgia, 'Times New Roman', serif;
  font-size: 1.08rem;
  line-height: 1.72;
  letter-spacing: 0.012em;
}

/* ─── Typography hierarchy ────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', Georgia, serif;
  letter-spacing: 0.01em;
}

/* Body copy — EB Garamond everywhere except nav/UI chrome */
p, li, blockquote, td, th, .deck, .meta, .story p {
  font-family: 'EB Garamond', Georgia, serif;
}

/* Nav and UI chrome stay clean sans-serif */
.topbar, .menu, .menu a, .brand, .kicker, .btn,
.contact-btn, .theme-toggle, .quick-link-item span,
.quick-link-item strong {
  font-family: 'Playfair Display', Georgia, serif;
}

.kicker {
  font-family: 'EB Garamond', Georgia, serif;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  color: var(--accent);
}

/* ─── Topbar ──────────────────────────────────────────────────────────── */
.topbar {
  background: var(--bg);
  background-image: var(--paper-grain);
  background-size: 200px 200px;
  border-bottom: 1px solid var(--line);
  backdrop-filter: none; /* remove glass blur — ink doesn't blur */
}

/* ─── Hero section ────────────────────────────────────────────────────── */
.home-hero {
  background:
    var(--paper-grain),
    radial-gradient(circle at 50% -30%, rgba(200,160,80,.15), rgba(250,247,242,.9) 48%, rgba(250,247,242,.98));
  border: 1px solid var(--line);
  border-radius: 4px; /* books have square corners */
}

[data-theme="dark"] .home-hero {
  background:
    var(--paper-grain),
    radial-gradient(circle at 50% -30%, rgba(180,120,40,.14), rgba(28,21,16,.92) 48%, rgba(20,15,10,.98));
}

/* Remove the animated glowing blobs — e-ink is static */
.home-hero::before {
  display: none;
}

/* Replace grid overlay with a subtle ruled-line effect */
.home-hero::after {
  background-image:
    linear-gradient(transparent 95%, rgba(139,105,20,.08) 95%);
  background-size: 100% 2.4rem;
  opacity: 0.6;
  mask-image: none;
}

[data-theme="dark"] .home-hero .kicker,
[data-theme="dark"] .home-hero h1,
[data-theme="dark"] .home-hero .deck {
  color: var(--text);
}

/* ─── Cards & panels ──────────────────────────────────────────────────── */
.card, .story, .cover, .work-with-me-feature,
.quick-link-item, .ai-agent-hero {
  background: var(--paper);
  background-image: var(--paper-grain);
  background-size: 200px 200px;
  border: 1px solid var(--line);
  border-radius: 3px; /* near-square — book-like */
}

/* Subtle inner shadow to mimic page depth */
.card, .story, .cover {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 3px rgba(26,20,16,.06);
}

[data-theme="dark"] .card,
[data-theme="dark"] .story,
[data-theme="dark"] .cover {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 1px 3px rgba(0,0,0,.25);
}

/* ─── Story cards: replace coloured radial tints with warm paper tints ── */
.cards-3 .story:nth-child(3n+1) {
  background-image: var(--paper-grain),
    radial-gradient(circle at 20% 18%, rgba(200,155,70,.10), transparent 46%);
}
.cards-3 .story:nth-child(3n+2) {
  background-image: var(--paper-grain),
    radial-gradient(circle at 80% 20%, rgba(180,140,80,.09), transparent 46%);
}
.cards-3 .story:nth-child(3n+3) {
  background-image: var(--paper-grain),
    radial-gradient(circle at 40% 85%, rgba(160,120,60,.08), transparent 46%);
}

/* ─── Blog art headers: sepia/desaturated ink-print look ─────────────── */
.blog-art {
  filter: sepia(0.55) contrast(0.92) brightness(0.96);
  border-radius: 2px;
}

/* Remove the coloured radial overlays on blog art */
.blog-art::after {
  mix-blend-mode: multiply;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(180,140,80,.18), transparent 60%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* ─── Blog hero banners ───────────────────────────────────────────────── */
.blog-hero {
  filter: sepia(0.5) contrast(0.9) brightness(0.95);
  border-radius: 3px;
  animation: none; /* e-ink is static — no gradient drift */
}

/* Replace vivid gradients with warm sepia tones */
.blog-hero-1 { background-image: linear-gradient(135deg, #2a1f14, #5c4530, #9c7a55); }
.blog-hero-2 { background-image: linear-gradient(135deg, #1a2214, #3d5c30, #7a9c55); }
.blog-hero-3 { background-image: linear-gradient(135deg, #251a2a, #5c3060, #9c6090); }

/* ─── Buttons ─────────────────────────────────────────────────────────── */
.btn {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1rem;
  letter-spacing: 0.04em;
  border-radius: 3px;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.btn-cta-red {
  background: var(--accent);
  color: #faf7f2;
  border: 1px solid var(--accent);
}
.btn-cta-red:hover {
  background: #6e5010;
  border-color: #6e5010;
}

.cta-primary {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
}
.cta-primary:hover {
  background: var(--accent);
  color: #faf7f2;
}

/* ─── Quick links ─────────────────────────────────────────────────────── */
.quick-links {
  background-image:
    var(--paper-grain),
    radial-gradient(circle at 80% 12%, rgba(200,155,70,.10), transparent 40%),
    radial-gradient(circle at 18% 90%, rgba(180,130,60,.09), transparent 40%);
}

.quick-link-item {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 3px;
}
.quick-link-item:hover {
  border-color: var(--accent);
  background: var(--paper);
  transform: translateY(-1px);
}

/* ─── Core focus panel (gold metal → warm parchment) ─────────────────── */
.core-focus-metal {
  background:
    var(--paper-grain),
    radial-gradient(circle at 15% 20%, rgba(220,185,100,.30), transparent 36%),
    radial-gradient(circle at 80% 30%, rgba(200,175,120,.25), transparent 38%),
    linear-gradient(135deg, #f7f0dc, #f0e8cc 55%, #e8ddb8);
  border-color: #c8a860;
}
.core-focus-metal h2 { color: #2a2010; }
.core-focus-metal .meta { color: #6b5530; }

[data-theme="dark"] .core-focus-metal {
  background:
    var(--paper-grain),
    linear-gradient(135deg, #2a2018, #22180e 55%, #1f1608);
  border-color: #4a3820;
}
[data-theme="dark"] .core-focus-metal h2 { color: var(--text); }
[data-theme="dark"] .core-focus-metal .meta { color: var(--muted); }

/* ─── Work with me feature box ────────────────────────────────────────── */
.work-with-me-feature {
  background:
    var(--paper-grain),
    linear-gradient(180deg,
      color-mix(in oklab, var(--paper) 88%, var(--accent) 12%),
      var(--paper));
  border-radius: 4px;
}

/* ─── Section titles ──────────────────────────────────────────────────── */
.section-title {
  font-family: 'Playfair Display', Georgia, serif;
  border-bottom: 1px solid var(--line);
  padding-bottom: .4rem;
}

/* ─── Article / blog post body copy ──────────────────────────────────── */
.article-body,
.prose,
article p,
article li,
article blockquote {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1.12rem;
  line-height: 1.78;
  max-width: 68ch;
}

article blockquote {
  border-left: 3px solid var(--accent);
  margin-left: 0;
  padding-left: 1.2rem;
  color: var(--muted);
  font-style: italic;
}

/* ─── Horizontal rules → book chapter dividers ───────────────────────── */
hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: 2rem auto;
  width: 60%;
  position: relative;
}

/* ─── Snowfox image ───────────────────────────────────────────────────── */
.snowfox-image {
  filter: sepia(0.3) contrast(0.95);
  border-radius: 3px;
  border-color: var(--line);
}

/* ─── Contact buttons ─────────────────────────────────────────────────── */
.contact-phone {
  border-color: var(--accent);
  background: rgba(139,105,20,.10);
  color: #6e5010;
}
.contact-whatsapp {
  border-color: #5a7a3a;
  background: rgba(90,122,58,.10);
  color: #3a5a1a;
}
.contact-message {
  border-color: #7a5a3a;
  background: rgba(122,90,58,.10);
  color: #5a3a1a;
}

[data-theme="dark"] .contact-phone  { color: #d4a843; background: rgba(212,168,67,.14); border-color: #d4a843; }
[data-theme="dark"] .contact-whatsapp { color: #8abf68; background: rgba(138,191,104,.14); border-color: #8abf68; }
[data-theme="dark"] .contact-message  { color: #c49a6a; background: rgba(196,154,106,.14); border-color: #c49a6a; }

/* ─── Theme toggle button ─────────────────────────────────────────────── */
.theme-toggle {
  border-color: var(--line);
  background: var(--soft);
  color: var(--text);
  border-radius: 3px;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 0.9rem;
}

/* ─── Project gallery ─────────────────────────────────────────────────── */
.project-gallery figure {
  border-radius: 3px;
  border-color: var(--line);
  background: var(--paper);
  background-image: var(--paper-grain);
  background-size: 200px 200px;
}
.project-gallery img {
  filter: sepia(0.25) contrast(0.95);
}

/* ─── AI agent hero ───────────────────────────────────────────────────── */
.ai-agent-hero {
  border-radius: 4px;
}
.ai-agent-hero .hero-image img {
  filter: sepia(0.3) contrast(0.92);
  border-radius: 3px;
  box-shadow: 0 8px 28px rgba(26,20,16,.18);
}

/* ─── Wipeout page (keep its own style, just warm it slightly) ────────── */
.wipeout-body {
  background: radial-gradient(circle at 20% 20%, #1a1408 0%, #0d0a04 45%, #080600 100%);
}

/* ─── Scrollbar (webkit) — warm parchment ─────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ─── Selection highlight ─────────────────────────────────────────────── */
::selection {
  background: rgba(139,105,20,.22);
  color: var(--text);
}

/* ─── Smooth transitions ──────────────────────────────────────────────── */
body, .topbar, .card, .story, .cover, .quick-link-item {
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}