/* Seller Notebook – shared styles
   Colours, fonts and the grain strength are all in the :root block below. */

:root {
  --color-paper: #f6f1e6;        /* page background */
  --color-card: #fbf8f1;         /* boxes and cards */
  --color-ink: #1f1d1a;          /* main text */
  --color-muted: #6a645a;        /* secondary text */
  --color-line: #ddd4c3;         /* borders and notebook lines */
  --color-accent: #6a48a8;       /* purple links, numbers and accents */
  --color-accent-soft: #ece5f7;
  /* Soft shaded sides: purple on the left, warm yellow on the right. Raise or lower the last number (opacity) to change strength. */
  --side-glow-left: rgba(106, 72, 168, 0.13);
  --side-glow-right: rgba(240, 205, 90, 0.20);
  --color-highlight: #f7e48a;    /* highlighter yellow */
  --color-button: #f4cf4f;       /* yellow call-to-action buttons */
  --color-button-hover: #f0c22e;
  --color-button-text: #1f1d1a;
  --font-heading: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-code: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --page-width: 1080px;
  --text-width: 700px;
  --radius: 10px;
  /* Grain: change --grain-opacity to make it stronger or weaker. */
  --grain-opacity: 0.26;
  --grain-blend: multiply;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-paper: #191816;
    --color-card: #22201d;
    --color-ink: #efe9dd;
    --color-muted: #aaa294;
    --color-line: #3a3631;
    --color-accent: #c3aef0;
    --color-accent-soft: #2f2747;
    --side-glow-left: rgba(150, 110, 230, 0.16);
    --side-glow-right: rgba(230, 195, 80, 0.08);
    --color-highlight: #6b5d1c;
    --color-button: #f4cf4f;
    --color-button-hover: #f7d96e;
    --color-button-text: #1f1d1a;
    --grain-opacity: 0.2;
    --grain-blend: screen;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

html { background: var(--color-paper); }

/* Seamless shaded sides: two very wide radial gradients that fade to nothing, fixed to the screen. */
html::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 95% at 0% 45%, var(--side-glow-left) 0%, transparent 100%),
    radial-gradient(ellipse 55% 95% at 100% 55%, var(--side-glow-right) 0%, transparent 100%);
}

body {
  margin: 0;
  background: transparent;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
}

/* Grain overlay: a fixed noise texture drawn with an inline SVG filter. */
body::before {
  content: "";
  position: fixed;
  inset: -50%;
  z-index: 100;
  pointer-events: none;
  opacity: var(--grain-opacity);
  mix-blend-mode: var(--grain-blend);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a { color: var(--color-accent); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

h1, h2, h3 { font-family: var(--font-heading); font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
h1 { font-size: clamp(2rem, 5vw, 2.9rem); margin: 0 0 16px; }
h2 { font-size: 1.6rem; margin: 48px 0 12px; }
h3 { font-size: 1.2rem; margin: 32px 0 8px; }

mark {
  background-image: linear-gradient(transparent 45%, var(--color-highlight) 45%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-color: transparent;
  color: inherit;
  padding: 0 2px;
}

.container { width: 100%; max-width: var(--page-width); margin: 0 auto; padding: 0 16px; }
.narrow { max-width: var(--text-width); }

/* Header */
.site-header { border-bottom: 1px solid var(--color-line); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; padding-top: 16px; padding-bottom: 16px; }
.brand { font-family: var(--font-heading); font-size: 1.35rem; font-weight: 600; color: var(--color-ink); text-decoration: none; }
.brand span { color: var(--color-accent); }
.site-nav { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 0.95rem; }
.site-nav a { color: var(--color-ink); text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--color-accent); text-decoration: underline; }

/* Hero */
.hero { padding: 64px 0 40px; }
.lead { font-size: 1.2rem; color: var(--color-muted); max-width: 620px; margin: 0 0 16px; }
.eyebrow { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-muted); margin: 0 0 12px; }

/* Cards */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin: 16px 0 0; padding: 0; list-style: none; }
.card { background: var(--color-card); border: 1px solid var(--color-line); border-radius: var(--radius); padding: 20px; }
.card h3 { margin: 0 0 6px; font-size: 1.15rem; }
.card h3 a { color: var(--color-ink); text-decoration: none; }
.card h3 a:hover { color: var(--color-accent); }
.card p { margin: 0; color: var(--color-muted); font-size: 0.95rem; }
.tag { display: inline-block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-accent); margin-bottom: 6px; }
.soon { color: var(--color-muted); font-style: italic; }

/* Home page: five topics in one row on wide screens, three principles side by side */
.topic-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.principles { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.principle-number { display: block; font-family: var(--font-heading); font-size: 1.6rem; line-height: 1; color: var(--color-accent); margin-bottom: 10px; }
.principles .card p a { white-space: nowrap; }

section { padding: 24px 0; }

/* Article */
.breadcrumbs { font-size: 0.85rem; color: var(--color-muted); margin: 32px 0 16px; }
.breadcrumbs a { color: var(--color-muted); }
.article-meta { color: var(--color-muted); font-size: 0.9rem; margin-bottom: 24px; }
.summary { background: var(--color-card); border: 1px solid var(--color-line); border-left: 4px solid var(--color-accent); border-radius: var(--radius); padding: 16px 20px; margin: 24px 0; }
.summary h2 { font-size: 1.1rem; margin: 0 0 8px; font-family: var(--font-body); }
.summary ul { margin: 0; padding-left: 20px; }
.table-of-contents { border: 1px dashed var(--color-line); border-radius: var(--radius); padding: 16px 20px; margin: 24px 0; font-size: 0.95rem; }
.table-of-contents strong { display: block; margin-bottom: 6px; }
.table-of-contents ol { margin: 0; padding-left: 20px; }

.prompt { position: relative; background: var(--color-card); border: 1px solid var(--color-line); border-radius: var(--radius); margin: 16px 0 24px; }
.prompt-label { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 14px; border-bottom: 1px solid var(--color-line); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-muted); }
.prompt pre { margin: 0; padding: 14px; white-space: pre-wrap; word-wrap: break-word; font-family: var(--font-code); font-size: 0.88rem; line-height: 1.6; color: var(--color-ink); }
.copy-button { font: inherit; font-size: 0.75rem; cursor: pointer; border: 1px solid var(--color-accent); color: var(--color-accent); background: transparent; border-radius: 6px; padding: 3px 10px; }
.copy-button:hover { background: var(--color-accent-soft); }

.note { background: var(--color-accent-soft); border-radius: var(--radius); padding: 14px 18px; margin: 20px 0; font-size: 0.95rem; }

.faq h3 { font-family: var(--font-body); font-size: 1.05rem; }

.compare { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 0.95rem; }
.compare th, .compare td { border: 1px solid var(--color-line); padding: 8px 10px; text-align: left; vertical-align: top; }
.compare th { background: var(--color-card); }
.table-wrap { overflow-x: auto; }

.author-box { display: flex; gap: 16px; align-items: flex-start; border-top: 1px solid var(--color-line); margin-top: 48px; padding-top: 24px; font-size: 0.95rem; color: var(--color-muted); }
.author-box strong { color: var(--color-ink); }

/* Footer */
.site-footer { border-top: 1px solid var(--color-line); margin-top: 64px; padding: 32px 0 48px; font-size: 0.9rem; color: var(--color-muted); }
.site-footer .container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.site-footer a { color: var(--color-muted); }

@media (max-width: 600px) {
  body { font-size: 16px; }
  .hero { padding: 40px 0 24px; }
  h2 { font-size: 1.4rem; }
}

/* ---------------------------------------------------------------
   Animations (driven by animations.js)
   They only run when the visitor allows motion. Without JavaScript,
   or with "reduce motion" turned on, everything is simply visible.
   --------------------------------------------------------------- */
.card { transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }

@media (prefers-reduced-motion: no-preference) {
  /* 4. Cards lift slightly on hover */
  .card:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(74, 48, 120, 0.10); border-color: var(--color-accent-soft); }

  /* 1. Fade and slide up on scroll */
  .animations-on .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
  .animations-on .reveal.is-visible { opacity: 1; transform: none; }
  .animations-on .card.reveal.is-visible:hover { transform: translateY(-4px); transition-delay: 0s; }

  /* 3. Hero heading appears word by word */
  .animations-on .hero-word { display: inline-block; opacity: 0; transform: translateY(0.4em); transition: opacity 0.5s ease, transform 0.5s ease; }
  .animations-on .hero h1.is-visible .hero-word { opacity: 1; transform: none; }

  /* 2. Highlighter draws itself from left to right */
  .animations-on main mark { background-size: 0% 100%; transition: background-size 0.8s ease; }
  .animations-on main mark.is-visible,
  .animations-on .hero h1.is-visible mark { background-size: 100% 100%; }
}

/* Small line under the home page intro */
.hero-platforms { margin: 12px 0 0; font-size: 0.9rem; color: var(--color-muted); }

/* Call-to-action buttons */
.button {
  display: inline-block;
  background: var(--color-button);
  color: var(--color-button-text);
  font-weight: 600;
  text-decoration: none;
  border-radius: 999px;
  padding: 12px 22px;
  box-shadow: 0 6px 18px rgba(240, 194, 46, 0.30);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.button:hover { background: var(--color-button-hover); color: var(--color-button-text); text-decoration: none; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(240, 194, 46, 0.38); }
.button-small { padding: 7px 16px; font-size: 0.9rem; box-shadow: none; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 28px 0 8px; }
.text-link { color: var(--color-accent); font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .button, .button:hover { transition: none; transform: none; } }

/* Prompt builder "Try it" window */
.section-intro { color: var(--color-muted); margin: -4px 0 16px; }
.tool-window {
  background: var(--color-card);
  border: 1px solid var(--color-line);
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(74, 48, 120, 0.12);
  overflow: hidden;
  margin: 8px 0 24px;
}
.tool-window-bar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--color-line); font-size: 0.85rem; color: var(--color-muted); }
.tool-window-dots { display: inline-flex; gap: 6px; }
.tool-window-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--color-line); display: block; }
.tool-window-dots i:first-child { background: var(--color-accent); opacity: 0.6; }
.tool-window-dots i:nth-child(2) { background: var(--color-button); }
.tool-window-badge { margin-left: auto; background: var(--color-accent-soft); color: var(--color-accent); border-radius: 999px; padding: 2px 10px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.tool-window-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
.builder-form { display: grid; gap: 14px; padding: 20px; border-right: 1px solid var(--color-line); }
.builder-form label { display: grid; gap: 6px; font-size: 0.9rem; font-weight: 600; }
.builder-form select, .builder-form textarea {
  font: inherit; font-weight: 400; font-size: 0.95rem; color: var(--color-ink);
  background: var(--color-paper); border: 1px solid var(--color-line); border-radius: 8px; padding: 9px 10px; width: 100%;
}
.builder-form textarea { resize: vertical; min-height: 110px; }
.builder-form select:focus, .builder-form textarea:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.builder-note { margin: 0; font-size: 0.8rem; color: var(--color-muted); }
.builder-result { display: flex; flex-direction: column; min-width: 0; }
.builder-result-label { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--color-line); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-muted); }
.builder-result-label .button { text-transform: none; letter-spacing: 0; font-size: 0.85rem; }
.builder-result pre { margin: 0; padding: 20px; white-space: pre-wrap; word-wrap: break-word; font-family: var(--font-code); font-size: 0.85rem; line-height: 1.6; color: var(--color-ink); max-height: 460px; overflow: auto; }
@media (max-width: 760px) {
  .tool-window-body { grid-template-columns: 1fr; }
  .builder-form { border-right: none; border-bottom: 1px solid var(--color-line); }
}
.builder-tip-highlight {
  color: var(--color-ink);
  background-image: linear-gradient(transparent 62%, var(--color-highlight) 62%);
  padding: 0 1px;
}