/* Srulad.com — EDITORIAL-CURATOR theme
   Curator/redaqcia direction. Editorial magazine sensibility married to dark
   streaming readability. Serif-forward display, warm paper surface for essays,
   amber as spot-color (not UI chrome), Georgian-first typography as identity. */

:root {
  /* --- Base surfaces: dark but WARMER than default (ink-black, not flat black) --- */
  --color-bg:          #0c0a08;   /* warm near-black, slight brown tint */
  --color-bg-2:        #15110d;   /* deeper surface */
  --color-surface:     #1d1812;   /* card/panel */
  --color-surface-2:   #2a2219;   /* elevated */
  --color-paper:       #f7f1e6;   /* IVORY — editorial essay blocks, quote pulls */
  --color-paper-ink:   #1a1410;   /* text on ivory */
  --color-border:      #2e271e;
  --color-border-strong: #463a2c;
  --color-rule:        rgba(247,241,230,0.12); /* editorial hairline */

  /* --- Text --- */
  --color-text:        #f4ede0;   /* off-white warm */
  --color-text-muted:  #a8a094;
  --color-text-subtle: #6d6559;
  --color-text-editorial: #d9cfb8; /* byline, eyebrow, kicker */

  /* --- Spot colors — used SPARINGLY like magazine spots --- */
  --color-accent:      #d4a84b;   /* warm editorial gold — NOT netflix-gold */
  --color-accent-hover:#e8bf5c;
  --color-accent-soft: rgba(212,168,75,0.12);
  --color-spot:        #c9402e;   /* editorial crimson — rare, for emphasis */
  --color-spot-hover:  #e04e3a;

  --color-success:     #7fa857;   /* muted olive — NOT Silicon-Valley-green */
  --color-danger:      #c9402e;

  /* IMDB yellow stays authentic (badge only) */
  --color-imdb-bg:     #f5c518;
  --color-imdb-text:   #0a0907;
  --color-quality-bg:  rgba(0,0,0,0.82);
  --color-quality-text:#f4ede0;

  /* --- Typography: Serif-forward, editorial --- */
  --font-display:      'Noto Serif Georgian', 'BPG Arial Caps', 'Playfair Display', Georgia, serif;
  --font-sans:         'Noto Sans Georgian', 'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --font-mono:         'JetBrains Mono', 'SF Mono', 'Berkeley Mono', Menlo, monospace;
  --font-eyebrow:      'Inter', 'Helvetica Neue', sans-serif;

  --text-xs:    0.75rem;    /* 12 — caption */
  --text-sm:    0.8125rem;  /* 13 — meta */
  --text-base:  1rem;       /* 16 — body */
  --text-md:    1.0625rem;  /* 17 — editorial body */
  --text-lg:    1.1875rem;  /* 19 — large body / drop cap */
  --text-xl:    1.375rem;   /* 22 — kicker headline */
  --text-2xl:   1.75rem;    /* 28 — section head */
  --text-3xl:   2.25rem;    /* 36 — large head */
  --text-4xl:   3rem;       /* 48 — display */
  --text-5xl:   4.25rem;    /* 68 — feature cover */
  --text-6xl:   6rem;       /* 96 — masthead */
  --text-7xl:   8.5rem;     /* 136 — editorial hero */

  --leading-tight:  1.1;
  --leading-snug:   1.25;
  --leading-normal: 1.5;
  --leading-relaxed:1.65;
  --leading-loose:  1.85;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.06em;
  --tracking-wider: 0.14em;   /* eyebrows / labels */
  --tracking-widest: 0.24em;  /* kicker caps */

  /* --- Spacing: editorial rhythm (bigger than default) --- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* --- Shapes: editorial = sharper, print-like --- */
  --radius-xs:   2px;
  --radius-sm:   3px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-xl:   14px;
  --radius-full: 9999px;

  /* --- Shadows --- */
  --shadow-sm:    0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:    0 4px 10px rgba(0,0,0,0.5);
  --shadow-lg:    0 16px 40px rgba(0,0,0,0.55);
  --shadow-card:  0 2px 6px rgba(0,0,0,0.4), 0 12px 28px rgba(0,0,0,0.35);
  --shadow-paper: 0 20px 60px rgba(0,0,0,0.5), 0 2px 0 rgba(247,241,230,0.03) inset;

  /* --- Layout --- */
  --container-max:      1360px;
  --container-editorial: 1120px;   /* editorial pages read narrower */
  --container-text:     720px;     /* optimal reading measure */

  /* --- Motion --- */
  --ease-out:      cubic-bezier(.16,1,.3,1);
  --ease-in-out:   cubic-bezier(.65,.05,.36,1);
  --dur-fast:      120ms;
  --dur-base:      240ms;
  --dur-slow:      480ms;
}

/* --- Base --- */
html, body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
}

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

/* --- Editorial typography helpers --- */
.eyebrow {
  font-family: var(--font-eyebrow);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-accent);
}

.display-serif {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

.byline {
  font-family: var(--font-eyebrow);
  font-size: var(--text-xs);
  color: var(--color-text-editorial);
  letter-spacing: var(--tracking-wide);
}

.rule-hairline {
  border: 0;
  border-top: 1px solid var(--color-rule);
  margin: var(--space-8) 0;
}

.drop-cap::first-letter {
  font-family: var(--font-display);
  font-size: 4.2em;
  float: left;
  line-height: 0.85;
  padding: 0.08em 0.08em 0 0;
  color: var(--color-accent);
  font-weight: 700;
}

/* --- Print-style grid utilities --- */
.editorial-grid {
  display: grid;
  gap: var(--space-8);
}

.rule-column {
  border-left: 1px solid var(--color-rule);
  padding-left: var(--space-6);
}

/* Selection */
::selection { background: var(--color-accent); color: var(--color-paper-ink); }