/* ============================================================
   editorial.css — Pageant Photo Coach
   The PPC member of the editorial family shared with Bombyhead:
   cream paper, Fraunces italics, hairline rules, pill buttons.
   PPC's accent is midnight indigo (Bombyhead's is wine); gold is
   the shared publisher mark.

   How to opt in per page:
   1. Load Fraunces + Instrument Sans from Google Fonts
   2. Keep the Tailwind CDN, set fontFamily.sans to Instrument Sans
      and the `primary` scale to the midnight ramp (see guide)
   3. Load this file AFTER the page's inline <style>
   No JS changes required. Force light: keep data-theme="light".
   ============================================================ */

:root {
	color-scheme: light;
	--cream:         #fbf9f3;
	--cream-2:       #f4efe1;
	--paper:         #ffffff;
	--ink:           #16142b;
	--ink-soft:      #605d75;
	--ink-faint:     #9a98ac;
	--midnight:      #322b66;
	--midnight-deep: #201b45;
	--gold:          #b48a44;
	--gold-soft:     #d8b97a;
	--rule:          #d8d0bf;
	--rule-soft:     #ebe4d2;
	--shadow-sm: 0 1px 3px rgba(22, 20, 43, 0.06), 0 8px 24px -12px rgba(22, 20, 43, 0.18);
	--shadow:    0 2px 6px rgba(22, 20, 43, 0.08), 0 18px 32px -16px rgba(22, 20, 43, 0.28);
}

/* ---- Page chrome ---- */
html, body {
	font-family: "Instrument Sans", system-ui, sans-serif !important;
	background: var(--cream) !important;
	color: var(--ink) !important;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Subtle film grain — sits above everything, not interactive. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 9000;
	opacity: 0.04;
	mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

::selection { background: var(--midnight); color: var(--cream); }

/* ---- Headings: Fraunces with the swashy editorial settings ---- */
h1, h2, h3, .font-serif {
	font-family: "Fraunces", Georgia, serif !important;
	font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
	font-weight: 380;
	letter-spacing: -0.022em;
	line-height: 1.08;
}
h1 em, h2 em, h3 em, .editorial-em {
	font-style: italic;
	color: var(--midnight);
	font-variation-settings: "opsz" 60, "SOFT" 100, "WONK" 1;
}

/* ---- Editorial components ---- */
.eyebrow {
	font-family: "Instrument Sans", sans-serif;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--ink-soft);
}
.eyebrow--gold { color: var(--gold); }
.eyebrow::after { content: ""; display: none; }

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

.chapter-num {
	font-family: "Fraunces", Georgia, serif;
	font-style: italic;
	font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
	font-weight: 300;
	font-size: clamp(2.6rem, 5vw, 4rem);
	color: var(--gold);
	line-height: 1;
}

.gold-mark { color: var(--gold); }
.gold-mark::before { content: "✦"; }

.card-editorial {
	background: var(--paper);
	border: 1px solid var(--rule);
	border-radius: 0;
	box-shadow: var(--shadow-sm);
}
.card-editorial--tint { background: var(--cream-2); }

.btn-editorial {
	display: inline-block;
	background: var(--ink);
	color: var(--cream) !important;
	border: 0;
	border-radius: 999px;
	font-family: "Instrument Sans", sans-serif;
	font-weight: 500;
	letter-spacing: 0.02em;
	padding: 0.7em 1.5em;
	transition: background 0.25s, transform 0.2s;
	cursor: pointer;
}
.btn-editorial:hover { background: var(--midnight); transform: translateY(-1px); }
.btn-editorial:active { transform: translateY(0); }
.btn-editorial--accent { background: var(--midnight); }
.btn-editorial--accent:hover { background: var(--midnight-deep); }
.btn-editorial--ghost {
	background: var(--paper);
	color: var(--ink) !important;
	border: 1px solid var(--rule);
}
.btn-editorial--ghost:hover { background: var(--cream-2); transform: translateY(-1px); }

/* ============================================================
   Tailwind utility translation layer
   PPC pages are built with Tailwind CDN utilities. These rules
   pull the most common utilities onto editorial paper without
   touching every element. Pill buttons keep rounded-full.
   ============================================================ */

/* Sharp corners everywhere except pills */
.rounded, .rounded-md, .rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl {
	border-radius: 0 !important;
}

/* Paper + cream surfaces */
.bg-white { background-color: var(--paper) !important; }
.bg-gray-50, .bg-gray-100, .bg-slate-50, .bg-slate-100 { background-color: var(--cream-2) !important; }
.bg-primary-50, .bg-primary-100 { background-color: var(--cream-2) !important; }

/* Ink text ramp */
.text-gray-900, .text-slate-900, .text-gray-800 { color: var(--ink) !important; }
.text-gray-700, .text-gray-600, .text-slate-600 { color: var(--ink-soft) !important; }
.text-gray-500, .text-gray-400, .text-slate-400 { color: var(--ink-faint) !important; }

/* Hairline borders */
.border, .border-t, .border-b, .border-l, .border-r { border-color: var(--rule) !important; }
.border-gray-100, .border-gray-200, .border-gray-300,
.divide-gray-100 > *, .divide-gray-200 > * { border-color: var(--rule) !important; }

/* Soften Tailwind shadows to editorial */
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow, .shadow-md, .shadow-lg, .shadow-xl, .shadow-2xl { box-shadow: var(--shadow) !important; }

/* Forms: paper fields, sharp, rule borders */
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
select, textarea {
	background: var(--paper) !important;
	color: var(--ink) !important;
	border: 1px solid var(--rule) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	font-family: "Instrument Sans", sans-serif !important;
}
input::placeholder, textarea::placeholder { color: var(--ink-faint) !important; }
input:focus, select:focus, textarea:focus {
	border-color: var(--ink) !important;
	box-shadow: 0 0 0 3px rgba(50, 43, 102, 0.10) !important;
	outline: none !important;
	--tw-ring-color: transparent !important;
	--tw-ring-shadow: none !important;
}
label { color: var(--ink); }

hr { border: 0; border-top: 1px solid var(--rule); }

/* Links inside body copy */
.prose a, p a { color: var(--ink); border-bottom: 1px solid var(--rule); text-decoration: none; }
.prose a:hover, p a:hover { color: var(--midnight); border-color: var(--midnight); }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* Force light even when the OS is dark — editorial is a light
   aesthetic; the in-app dark theme is retired. */
@media (prefers-color-scheme: dark) {
	:root { color-scheme: light; }
	html, body { background: var(--cream) !important; color: var(--ink) !important; }
}