/*! GENERATED FILE — do not edit directly. Source: resources/css/design/tokens/* + resources/css/public.css */
/* SceneLog uses Satoshi (by Fontshare / Indian Type Foundry), loaded from the
Fontshare CDN with a non-render-blocking in the public (NOT a
CSS @import here — that forced a serial HTML→css→fontshare→woff2 chain that
blocked first paint). See resources/views/public/layout.blade.php. */
/* ============================================================
SceneLog · Color tokens · "Reel"
Brand is NAVY: a deep dark-blue primary by day, a light sky-blue
"beam" by night. No purple anywhere in the interface. Day = white
surfaces, deep ink text, navy primary. Night = deep ink surfaces
with a light-blue beam. Marquee gold is the single accent in both
themes (stars, live, love). Any gradient lives in the LOGO ONLY.
Light is default (:root); dark overrides under
[data-theme="dark"]. Components only touch --sl-* aliases.
============================================================ */
:root {
/* ---- Raw palette: Navy (brand primary — dark blue, never purple) ---- */
--navy-50: #EEF3FC;
--navy-100: #DBE5F8;
--navy-200: #B7CBF0;
--navy-300: #8BA8E4;
--navy-400: #5A7FD2;
--navy-500: #3358B8;
--navy-600: #244B9E;
--navy-700: #1E3A8A; /* day primary */
--navy-800: #16306E;
--navy-900: #102450;
--navy-950: #0A1836;
/* ---- Raw palette: Azure (secondary blue; docs + charts only) ---- */
--azure-300: #9DC0F5;
--azure-400: #6FA0EE;
--azure-500: #3D7FE0;
--azure-600: #2A63C4;
--azure-700: #1E4EA0;
/* ---- Raw palette: Marquee gold (accent) ---- */
--gold-50: #FFF8E6;
--gold-100: #FFEFC2;
--gold-200: #FFE28E;
--gold-300: #FFD35C;
--gold-400: #FFC22E; /* accent · night */
--gold-500: #F2A90D;
--gold-600: #D18E00; /* accent · day */
--gold-700: #A26C00;
--gold-800: #764C00;
--gold-900: #4E3200;
/* ---- Raw palette: Cloud (day neutrals, navy-tinted) ---- */
--cloud-25: #FCFCFE;
--cloud-50: #F7F8FC;
--cloud-100: #EFF0F8;
--cloud-200: #E3E5F1;
--cloud-300: #D2D5E7;
--cloud-400: #9BA0BD;
--cloud-500: #6C7192;
--cloud-600: #4E5372;
--cloud-700: #383D5C;
--cloud-800: #232645;
--cloud-900: #14172E;
/* ---- Raw palette: Ink (night surface steps, deep navy) ---- */
--ink-950: #0A0C20; /* night canvas */
--ink-900: #0D1029; /* sunken */
--ink-800: #131735; /* card */
--ink-700: #1A1E40; /* elevated */
--ink-600: #262B54; /* border */
--ink-500: #363C71; /* border strong */
--ink-400: #878DB8; /* muted text */
--ink-200: #C6C9E4; /* secondary text */
--ink-50: #F2F3FB; /* text */
/* ============================================================
SEMANTIC ALIASES · DAY (white main, ink text, navy primary)
============================================================ */
/* Surfaces */
--sl-bg: #FFFFFF;
--sl-bg-subtle: #F7F8FC;
--sl-surface: #FFFFFF;
--sl-surface-2: #F7F8FC;
--sl-elevated: #FFFFFF;
--sl-overlay: rgba(10, 12, 32, 0.48);
/* Text */
--sl-text: #14172E;
--sl-text-secondary:#4E5372;
--sl-text-muted: #9BA0BD;
--sl-text-on-brand: #FFFFFF; /* on a navy button */
--sl-text-on-accent:#14172E; /* ink on gold, never white on gold */
/* Lines */
--sl-border: #E3E5F1;
--sl-border-strong: #D2D5E7;
--sl-ring: rgba(30, 58, 138, 0.25);
/* Brand = navy (primary actions, links, active nav) */
--sl-brand: #1E3A8A;
--sl-brand-hover: #16306E;
--sl-brand-active: #102450;
--sl-brand-soft: #E8EEFA;
--sl-brand-soft-text:#1E3A8A;
/* Accent = marquee gold (stars, live, love, streaks) */
--sl-accent: #D18E00;
--sl-accent-hover: #B87B00;
--sl-accent-soft: #FFF3D2;
--sl-accent-soft-text:#8A5B00;
/* Semantic (foreground / background / text triplets) */
--sl-success: #0E9F5D; --sl-success-bg: #E4F8EE; --sl-success-text: #0B6B41;
--sl-warning: #E25822; --sl-warning-bg: #FDEDE4; --sl-warning-text: #A33A12;
--sl-error: #DE3B4E; --sl-error-bg: #FDEBED; --sl-error-text: #A82334;
--sl-info: #2F7FE0; --sl-info-bg: #E9F2FD; --sl-info-text: #1D5FB0;
/* Rating · gold like a marquee star (community + your score share it) */
--sl-rating: #D18E00;
--sl-rating-track: #E3E5F1;
/* Live / on-air · the only red outside errors (premiere dots, LIVE pills) */
--sl-live: #DE3B4E;
/* Poster placeholder (when artwork is missing) · solid, navy-tinted */
--sl-poster-fallback: #E3E5F1; /* @kind color */
}
/* ============================================================
SEMANTIC ALIASES · DAY, EXPLICIT SCOPE
[data-theme="light"] restates the :root aliases so a wrapper
can flip back to day even when an ANCESTOR (e.g. the host
page's ) is stamped data-theme="dark". Keep in sync.
============================================================ */
[data-theme="light"] {
--sl-bg: #FFFFFF;
--sl-bg-subtle: #F7F8FC;
--sl-surface: #FFFFFF;
--sl-surface-2: #F7F8FC;
--sl-elevated: #FFFFFF;
--sl-overlay: rgba(10, 12, 32, 0.48);
--sl-text: #14172E;
--sl-text-secondary:#4E5372;
--sl-text-muted: #9BA0BD;
--sl-text-on-brand: #FFFFFF;
--sl-text-on-accent:#14172E;
--sl-border: #E3E5F1;
--sl-border-strong: #D2D5E7;
--sl-ring: rgba(30, 58, 138, 0.25);
--sl-brand: #1E3A8A;
--sl-brand-hover: #16306E;
--sl-brand-active: #102450;
--sl-brand-soft: #E8EEFA;
--sl-brand-soft-text:#1E3A8A;
--sl-accent: #D18E00;
--sl-accent-hover: #B87B00;
--sl-accent-soft: #FFF3D2;
--sl-accent-soft-text:#8A5B00;
--sl-success: #0E9F5D; --sl-success-bg: #E4F8EE; --sl-success-text: #0B6B41;
--sl-warning: #E25822; --sl-warning-bg: #FDEDE4; --sl-warning-text: #A33A12;
--sl-error: #DE3B4E; --sl-error-bg: #FDEBED; --sl-error-text: #A82334;
--sl-info: #2F7FE0; --sl-info-bg: #E9F2FD; --sl-info-text: #1D5FB0;
--sl-rating: #D18E00;
--sl-rating-track: #E3E5F1;
--sl-live: #DE3B4E;
--sl-poster-fallback: #E3E5F1; /* @kind color */
}
/* ============================================================
SEMANTIC ALIASES · NIGHT (deep ink main, light-blue beam)
============================================================ */
[data-theme="dark"] {
--sl-bg: #0A0C20;
--sl-bg-subtle: #0D1029;
--sl-surface: #131735;
--sl-surface-2: #0D1029;
--sl-elevated: #1A1E40;
--sl-overlay: rgba(3, 4, 12, 0.68);
--sl-text: #F2F3FB;
--sl-text-secondary:#C6C9E4;
--sl-text-muted: #878DB8;
--sl-text-on-brand: #0A0C20; /* ink text on the light-blue beam */
--sl-text-on-accent:#14172E;
--sl-border: #262B54;
--sl-border-strong: #363C71;
--sl-ring: rgba(124, 168, 255, 0.35);
/* Brand at night = the beam: light sky-blue on ink */
--sl-brand: #7CA8FF;
--sl-brand-hover: #A0C0FF;
--sl-brand-active: #5E8CF0;
--sl-brand-soft: rgba(124, 168, 255, 0.15);
--sl-brand-soft-text:#A9C6FF;
--sl-accent: #FFC22E;
--sl-accent-hover: #FFD35C;
--sl-accent-soft: rgba(255, 194, 46, 0.13);
--sl-accent-soft-text:#FFD35C;
--sl-success: #2FBF7A; --sl-success-bg: rgba(23, 178, 106, 0.16); --sl-success-text: #7FE0B0;
--sl-warning: #F2803D; --sl-warning-bg: rgba(226, 88, 34, 0.16); --sl-warning-text: #FFB08A;
--sl-error: #FF5C6E; --sl-error-bg: rgba(222, 59, 78, 0.16); --sl-error-text: #FF9DA8;
--sl-info: #5CA1F2; --sl-info-bg: rgba(47, 127, 224, 0.16); --sl-info-text: #9CC5F8;
--sl-rating: #FFC22E;
--sl-rating-track: #262B54;
--sl-live: #FF4D5E;
--sl-poster-fallback: #161A3D; /* @kind color */
}
/* ============================================================
SceneLog · Typography tokens
Family: Satoshi (see /fonts/satoshi.css). Satoshi is a clean
geometric grotesque; SceneLog uses it for everything ·
Black (900) for display, Bold (700) for headings, Medium (500)
for UI labels, Regular (400) for body.
============================================================ */
:root {
/* Families */
--sl-font-sans: 'Satoshi', ui-sans-serif, system-ui, -apple-system,
'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
--sl-font-display: 'Satoshi', ui-sans-serif, system-ui, sans-serif;
--sl-font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
/* Weights */
--sl-weight-light: 300;
--sl-weight-regular: 400;
--sl-weight-medium: 500;
--sl-weight-bold: 700;
--sl-weight-black: 900;
/* Type scale (rem @ 16px root) */
--sl-text-xs: 0.75rem; /* 12 */
--sl-text-sm: 0.875rem; /* 14 */
--sl-text-base: 1rem; /* 16 */
--sl-text-md: 1.125rem; /* 18 */
--sl-text-lg: 1.25rem; /* 20 */
--sl-text-xl: 1.5rem; /* 24 */
--sl-text-2xl: 1.875rem; /* 30 */
--sl-text-3xl: 2.375rem; /* 38 */
--sl-text-4xl: 3rem; /* 48 */
--sl-text-5xl: 3.75rem; /* 60 */
--sl-text-6xl: 4.5rem; /* 72 */
/* Line heights */
--sl-leading-none: 1;
--sl-leading-tight: 1.15;
--sl-leading-snug: 1.3;
--sl-leading-normal: 1.5;
--sl-leading-relaxed: 1.65;
/* Letter spacing · display tightens, all-caps opens up */
--sl-tracking-tighter: -0.03em;
--sl-tracking-tight: -0.015em;
--sl-tracking-normal: 0em;
--sl-tracking-wide: 0.02em;
--sl-tracking-caps: 0.08em; /* eyebrows / overlines */
}
/* ============================================================
SceneLog · Spacing tokens
4px base grid. Use --sl-space-* for padding, gap, margin.
============================================================ */
:root {
--sl-space-0: 0;
--sl-space-1: 0.25rem; /* 4 */
--sl-space-2: 0.5rem; /* 8 */
--sl-space-3: 0.75rem; /* 12 */
--sl-space-4: 1rem; /* 16 */
--sl-space-5: 1.25rem; /* 20 */
--sl-space-6: 1.5rem; /* 24 */
--sl-space-8: 2rem; /* 32 */
--sl-space-10: 2.5rem; /* 40 */
--sl-space-12: 3rem; /* 48 */
--sl-space-16: 4rem; /* 64 */
--sl-space-20: 5rem; /* 80 */
--sl-space-24: 6rem; /* 96 */
/* Named aliases for common component rhythm */
--sl-gutter: 1rem; /* screen-edge padding (mobile) */
--sl-gutter-lg: 1.5rem; /* screen-edge padding (web) */
--sl-stack: 0.75rem; /* default vertical gap in a stack */
--sl-section: 4rem; /* between marketing sections */
/* Container widths */
--sl-container: 1200px;
--sl-container-sm: 720px;
--sl-app-width: 390px; /* mobile app design width (iPhone) */
}
/* ============================================================
SceneLog · Radius tokens · "Reel"
One notch curvier than default web UI · screens, lenses and
tickets, not boxes. Posters stay tighter (md) so artwork
reads as artwork. The STUB radius is the signature shape:
three soft corners + one tucked corner, like a torn ticket ·
use it on billboards, feature panels and callouts (point the
tucked corner toward the content it belongs to).
============================================================ */
:root {
--sl-radius-xs: 0.5rem; /* 8 · chips, small controls */
--sl-radius-sm: 0.625rem; /* 10 · inputs, tags */
--sl-radius-md: 0.75rem; /* 12 · posters, buttons */
--sl-radius-lg: 1.125rem; /* 18 · cards */
--sl-radius-xl: 1.5rem; /* 24 · modals, large cards */
--sl-radius-2xl: 2rem; /* 32 · sheets, hero panels */
--sl-radius-pill: 999px; /* pills, avatars, switches */
--sl-radius-icon: 22.37%; /* app-icon squircle ratio */
/* Signature "ticket stub" · 3 round corners, 1 tucked. @kind other */
--sl-radius-stub: 1.5rem 1.5rem 1.5rem 0.5rem;
--sl-radius-stub-flip: 1.5rem 1.5rem 0.5rem 1.5rem; /* @kind other */
}
/* ============================================================
SceneLog · Elevation / shadow tokens · "Reel"
Day: soft ink-tinted shadows (low spread, layered).
Night: deep indigo-black shadows + a faint cool top highlight
on cards; the primary CTA can GLOW (periwinkle beam / gold).
============================================================ */
:root {
--sl-shadow-xs: 0 1px 2px rgba(20, 23, 46, 0.05);
--sl-shadow-sm: 0 1px 3px rgba(20, 23, 46, 0.08), 0 1px 2px rgba(20, 23, 46, 0.04);
--sl-shadow-md: 0 4px 8px -2px rgba(20, 23, 46, 0.10), 0 2px 4px -2px rgba(20, 23, 46, 0.06);
--sl-shadow-lg: 0 12px 16px -4px rgba(20, 23, 46, 0.08), 0 4px 6px -2px rgba(20, 23, 46, 0.04);
--sl-shadow-xl: 0 20px 24px -4px rgba(20, 23, 46, 0.10), 0 8px 8px -4px rgba(20, 23, 46, 0.04);
--sl-shadow-2xl: 0 24px 48px -12px rgba(20, 23, 46, 0.18);
/* Card = the everyday container shadow */
--sl-shadow-card: 0 1px 3px rgba(20, 23, 46, 0.06), 0 1px 2px rgba(20, 23, 46, 0.04);
/* Pop = dropdowns, popovers, menus */
--sl-shadow-pop: 0 12px 24px -6px rgba(20, 23, 46, 0.14), 0 4px 8px -4px rgba(20, 23, 46, 0.08);
/* Beam glow · reserved for the primary CTA on hero surfaces */
--sl-shadow-brand: 0 10px 24px -8px rgba(30, 58, 138, 0.45);
/* Marquee glow · reserved for gold CTAs / the live check-in button */
--sl-shadow-accent: 0 8px 22px -6px rgba(209, 142, 0, 0.40);
/* Poster lift on hover */
--sl-shadow-poster: 0 10px 30px -8px rgba(20, 23, 46, 0.28);
--sl-focus-ring: 0 0 0 4px var(--sl-ring);
}
[data-theme="dark"] {
--sl-shadow-xs: 0 1px 2px rgba(3, 4, 14, 0.45);
--sl-shadow-sm: 0 1px 3px rgba(3, 4, 14, 0.55), 0 1px 2px rgba(3, 4, 14, 0.4);
--sl-shadow-md: 0 4px 10px -2px rgba(3, 4, 14, 0.6);
--sl-shadow-lg: 0 14px 24px -6px rgba(3, 4, 14, 0.65);
--sl-shadow-xl: 0 24px 36px -8px rgba(3, 4, 14, 0.7);
--sl-shadow-2xl: 0 32px 56px -12px rgba(3, 4, 14, 0.75);
--sl-shadow-card: 0 1px 3px rgba(3, 4, 14, 0.55), inset 0 1px 0 rgba(124, 168, 255, 0.08);
--sl-shadow-pop: 0 16px 32px -8px rgba(3, 4, 14, 0.75);
/* The beam: a light-blue halo behind the night-mode primary */
--sl-shadow-brand: 0 8px 28px -6px rgba(124, 168, 255, 0.30);
--sl-shadow-accent: 0 8px 26px -6px rgba(255, 194, 46, 0.32);
--sl-shadow-poster: 0 14px 34px -10px rgba(3, 4, 14, 0.75);
}
/* ============================================================
SceneLog · Motion tokens · "Reel"
Quick and confident in everyday UI; one long cinematic
glide reserved for hero/billboard moments. The soft
overshoot spring stays reserved for delight (check-in
confirm, like tap) and nowhere else.
============================================================ */
:root {
--sl-duration-instant: 80ms; /* @kind other */
--sl-duration-fast: 140ms; /* @kind other */
--sl-duration-base: 220ms; /* @kind other */
--sl-duration-slow: 320ms; /* @kind other */
--sl-duration-slower: 480ms; /* @kind other */
--sl-duration-cinema: 700ms; /* @kind other */
--sl-ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
--sl-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
--sl-ease-in: cubic-bezier(0.4, 0, 1, 1); /* @kind other */
--sl-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
--sl-ease-cinema: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
--sl-transition: all var(--sl-duration-base) var(--sl-ease-out); /* @kind other */
}
/* ============================================================
SceneLog · Base layer
Minimal, opinionated resets that make the tokens feel "on"
out of the box. Consumers linking styles.css inherit Satoshi,
the surface background, and sensible defaults.
============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font-family: var(--sl-font-sans);
font-weight: var(--sl-weight-regular);
font-size: var(--sl-text-base);
line-height: var(--sl-leading-normal);
color: var(--sl-text);
background: var(--sl-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-feature-settings: 'ss01', 'cv01', 'liga' 1, 'calt' 1;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
font-weight: var(--sl-weight-bold);
line-height: var(--sl-leading-tight);
letter-spacing: var(--sl-tracking-tight);
color: var(--sl-text);
}
p { margin: 0; }
a { color: var(--sl-brand); text-decoration: none; }
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--sl-brand); color: var(--sl-text-on-brand); }
:where(:focus-visible) {
outline: 2px solid var(--sl-brand);
outline-offset: 2px;
}
/* Small utility: eyebrow / overline text */
.sl-eyebrow {
font-size: var(--sl-text-xs);
font-weight: var(--sl-weight-bold);
letter-spacing: var(--sl-tracking-caps);
text-transform: uppercase;
color: var(--sl-text-muted);
}
/*
* SceneLog · public marketing + catalog (server-rendered Blade) stylesheet.
* Pulls in the shared design tokens (the same --sl-* system the React app uses)
* and layers on the component styles the SSR pages need. Deliberately does NOT
* import Tailwind or any React — this is a lean, crawler-friendly bundle so the
* public pages ship no application JS.
*
* This is the AUTHORED SOURCE. The public pages actually link the self-contained
* public/css/public.css (design tokens + these styles concatenated) so they do
* not depend on the Vite manifest. After editing this file, regenerate the
* served file by concatenating, in order, the design token files
* (fonts/satoshi.css, then tokens/colors,typography,spacing,radius,shadows,
* motion,base) followed by this file with its first @import line stripped, into
* public/css/public.css. See docs or the git history for the exact shell one-liner.
*/
/* ---- Base page ---------------------------------------------------------- */
html { scroll-behavior: smooth; }
body { min-height: 100vh; background: var(--sl-bg); color: var(--sl-text); }
img { max-width: 100%; }
a { color: inherit; text-decoration: none; }
.sl-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.sl-container--narrow { max-width: 900px; }
.sl-eyebrow {
font: 700 11px var(--sl-font-sans);
letter-spacing: 0.09em; text-transform: uppercase; color: var(--sl-text-muted);
}
.sl-visually-hidden {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* ---- Buttons (mirror design-system Button) ------------------------------ */
.sl-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
font: 500 0.875rem var(--sl-font-sans); letter-spacing: -0.005em;
height: 40px; padding: 0 16px; border: 1px solid transparent;
border-radius: var(--sl-radius-md); cursor: pointer; white-space: nowrap;
transition: background var(--sl-duration-fast) var(--sl-ease-out),
color var(--sl-duration-fast) var(--sl-ease-out),
border-color var(--sl-duration-fast) var(--sl-ease-out),
box-shadow var(--sl-duration-fast) var(--sl-ease-out),
transform var(--sl-duration-fast) var(--sl-ease-out);
}
.sl-btn:active { transform: scale(0.975); }
.sl-btn:focus-visible { outline: none; box-shadow: var(--sl-focus-ring); }
.sl-btn--lg { height: 48px; padding: 0 22px; font-size: 1rem; }
.sl-btn--sm { height: 32px; padding: 0 12px; border-radius: var(--sl-radius-sm); }
.sl-btn--block { width: 100%; }
.sl-btn--primary { background: var(--sl-brand); color: var(--sl-text-on-brand); box-shadow: var(--sl-shadow-brand); }
.sl-btn--primary:hover { background: var(--sl-brand-hover); }
.sl-btn--secondary { background: var(--sl-surface); color: var(--sl-text); border-color: var(--sl-border); }
.sl-btn--secondary:hover { background: var(--sl-bg-subtle); border-color: var(--sl-border-strong); }
.sl-btn--accent { background: var(--sl-accent); color: var(--sl-text-on-accent); box-shadow: var(--sl-shadow-accent); }
.sl-btn--accent:hover { background: var(--sl-accent-hover); }
.sl-btn--ghost { background: transparent; color: var(--sl-text-secondary); }
.sl-btn--ghost:hover { background: var(--sl-bg-subtle); color: var(--sl-text); }
/* ---- Site header -------------------------------------------------------- */
.sl-header {
position: sticky; top: 0; z-index: 50;
background: color-mix(in srgb, var(--sl-bg) 88%, transparent);
backdrop-filter: saturate(1.4) blur(12px);
-webkit-backdrop-filter: saturate(1.4) blur(12px);
border-bottom: 1px solid var(--sl-border);
}
.sl-header__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 64px; }
.sl-brand { display: inline-flex; align-items: center; gap: 10px; }
.sl-brand img { display: block; width: 30px; height: 30px; }
.sl-brand__word { font: 900 19px var(--sl-font-sans); letter-spacing: -0.03em; color: var(--sl-text); }
.sl-nav { display: flex; align-items: center; gap: 28px; }
.sl-nav a { font: 500 14px var(--sl-font-sans); color: var(--sl-text-secondary); }
.sl-nav a:hover, .sl-nav a[aria-current="page"] { color: var(--sl-text); }
.sl-header__cta { display: flex; align-items: center; gap: 10px; }
.sl-header__burger { display: none; }
/* ---- Footer ------------------------------------------------------------- */
.sl-footer { border-top: 1px solid var(--sl-border); background: var(--sl-bg); margin-top: 96px; }
.sl-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; padding: 48px 0 8px; }
.sl-footer__blurb { font: 400 13px/1.55 var(--sl-font-sans); color: var(--sl-text-muted); max-width: 260px; margin-top: 12px; }
.sl-footer__col { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.sl-footer__col h3 { font: 700 10.5px var(--sl-font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sl-text-muted); margin: 0 0 4px; }
.sl-footer__col a { font: 500 13px var(--sl-font-sans); color: var(--sl-text-secondary); }
.sl-footer__col a:hover { color: var(--sl-text); }
.sl-footer__bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 24px 0 44px; margin-top: 24px; border-top: 1px solid var(--sl-border); }
.sl-footer__legal { font: 500 12px/1.5 var(--sl-font-sans); color: var(--sl-text-muted); max-width: 520px; }
.sl-tmdb { display: inline-flex; align-items: center; gap: 8px; font: 500 11px var(--sl-font-sans); color: var(--sl-text-muted); }
.sl-tmdb svg { display: block; height: 14px; width: auto; }
/* ---- Hero (home) -------------------------------------------------------- */
.sl-hero { position: relative; overflow: hidden; }
.sl-hero__inner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 56px; align-items: center; padding: 72px 0 40px; }
.sl-hero h1 { font: 900 clamp(40px, 5.5vw, 64px)/1.03 var(--sl-font-sans); letter-spacing: -0.032em; color: var(--sl-text); margin: 16px 0 0; text-wrap: balance; }
.sl-hero p { font: 400 17.5px/1.6 var(--sl-font-sans); color: var(--sl-text-secondary); margin: 20px 0 0; max-width: 480px; text-wrap: pretty; }
.sl-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.sl-hero__note { display: flex; align-items: center; gap: 8px; margin-top: 22px; font: 500 13px var(--sl-font-sans); color: var(--sl-text-muted); }
.sl-hero__art { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.sl-hero__art .sl-poster:nth-child(2) { transform: translateY(22px); }
.sl-hero__art .sl-poster:nth-child(3) { transform: translateY(-14px); }
/* ---- Section header ----------------------------------------------------- */
.sl-section { padding-top: 72px; }
.sl-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.sl-section__head h2 { font: 900 clamp(24px, 3vw, 32px) var(--sl-font-sans); letter-spacing: -0.025em; color: var(--sl-text); margin: 6px 0 0; }
.sl-section__see { font: 600 13px var(--sl-font-sans); color: var(--sl-brand-soft-text); white-space: nowrap; }
.sl-section__see:hover { text-decoration: underline; }
/* ---- Poster grid + card ------------------------------------------------- */
.sl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 20px 16px; }
.sl-grid--rail { grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); grid-template-columns: none; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 8px; scrollbar-width: thin; }
.sl-grid--rail .sl-poster { scroll-snap-align: start; }
.sl-poster { display: flex; flex-direction: column; gap: 10px; color: var(--sl-text); }
.sl-poster__art { position: relative; aspect-ratio: 2/3; border-radius: var(--sl-radius-md); overflow: hidden; background: var(--sl-poster-fallback); box-shadow: var(--sl-shadow-sm); transition: transform var(--sl-duration-base) var(--sl-ease-out), box-shadow var(--sl-duration-base) var(--sl-ease-out); }
.sl-poster:hover .sl-poster__art { transform: translateY(-3px); box-shadow: var(--sl-shadow-poster); }
.sl-poster__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sl-poster__fallback { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--sl-text-muted); font: 700 13px var(--sl-font-sans); text-align: center; padding: 12px; }
.sl-poster__score { position: absolute; top: 8px; left: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; background: rgba(5,8,22,.72); color: #fff; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); border-radius: var(--sl-radius-pill); font: 800 11.5px var(--sl-font-sans); }
.sl-poster__score svg { color: var(--sl-accent); }
.sl-poster__rank { position: absolute; bottom: 6px; left: 8px; font: 900 26px var(--sl-font-sans); color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.6); line-height: 1; }
.sl-poster__title { font: 700 14px var(--sl-font-sans); letter-spacing: -0.01em; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.sl-poster__meta { display: flex; align-items: center; gap: 6px; margin-top: 2px; font: 500 12.5px var(--sl-font-sans); color: var(--sl-text-secondary); }
.sl-poster__dot { width: 3px; height: 3px; border-radius: 50%; background: var(--sl-text-muted); flex: 0 0 auto; }
/* ---- Chips / tags ------------------------------------------------------- */
.sl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sl-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: var(--sl-radius-pill); border: 1px solid var(--sl-border); background: var(--sl-surface); font: 600 12.5px var(--sl-font-sans); color: var(--sl-text-secondary); }
.sl-chip:hover { border-color: var(--sl-border-strong); color: var(--sl-text); }
.sl-chip--active { background: var(--sl-brand-soft); border-color: transparent; color: var(--sl-brand-soft-text); }
.sl-badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: var(--sl-radius-pill); font: 700 11px var(--sl-font-sans); letter-spacing: 0.02em; text-transform: uppercase; }
.sl-badge--brand { background: var(--sl-brand-soft); color: var(--sl-brand-soft-text); }
.sl-badge--muted { background: var(--sl-bg-subtle); color: var(--sl-text-muted); }
/* ---- Feature cards (home differentiators) ------------------------------- */
.sl-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.sl-feature { border: 1px solid var(--sl-border); border-radius: var(--sl-radius-lg); padding: 22px 20px; background: var(--sl-surface); display: flex; flex-direction: column; gap: 10px; }
.sl-feature__icon { width: 40px; height: 40px; border-radius: var(--sl-radius-md); display: flex; align-items: center; justify-content: center; background: var(--sl-brand-soft); color: var(--sl-brand-soft-text); }
.sl-feature h3 { font: 800 16px var(--sl-font-sans); letter-spacing: -0.01em; color: var(--sl-text); margin: 4px 0 0; }
.sl-feature p { font: 400 13.5px/1.55 var(--sl-font-sans); color: var(--sl-text-secondary); margin: 0; }
/* ---- Detail (title / person) page --------------------------------------- */
.sl-detail__backdrop { position: relative; height: clamp(260px, 42vw, 460px); overflow: hidden; background: var(--sl-bg-subtle); }
.sl-detail__backdrop img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sl-detail__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--sl-bg) 10%, transparent) 0%, color-mix(in srgb, var(--sl-bg) 55%, transparent) 55%, var(--sl-bg) 100%); }
.sl-detail__head { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; margin-top: -120px; position: relative; }
.sl-detail__poster { border-radius: var(--sl-radius-lg); overflow: hidden; box-shadow: var(--sl-shadow-poster); aspect-ratio: 2/3; background: var(--sl-poster-fallback); }
.sl-detail__poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sl-detail__body { align-self: flex-end; padding-bottom: 8px; }
.sl-detail__body h1 { font: 900 clamp(28px, 4vw, 44px)/1.05 var(--sl-font-sans); letter-spacing: -0.03em; color: var(--sl-text); margin: 12px 0 0; text-wrap: balance; }
.sl-detail__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; font: 500 14px var(--sl-font-sans); color: var(--sl-text-secondary); }
.sl-detail__meta .sl-poster__dot { background: var(--sl-border-strong); }
.sl-detail__score { display: inline-flex; align-items: center; gap: 6px; font: 800 15px var(--sl-font-sans); color: var(--sl-text); }
.sl-detail__score svg { color: var(--sl-accent); }
.sl-detail__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.sl-detail__cols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; padding-top: 48px; }
.sl-prose { font: 400 16px/1.7 var(--sl-font-sans); color: var(--sl-text-secondary); max-width: 68ch; }
.sl-prose h2 { font: 800 20px var(--sl-font-sans); letter-spacing: -0.02em; color: var(--sl-text); margin: 40px 0 14px; }
.sl-facts { border: 1px solid var(--sl-border); border-radius: var(--sl-radius-lg); background: var(--sl-surface); padding: 8px 18px; }
.sl-facts dl { display: grid; grid-template-columns: 1fr; margin: 0; }
.sl-facts__row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--sl-border); }
.sl-facts__row:last-child { border-bottom: 0; }
.sl-facts dt { font: 600 13px var(--sl-font-sans); color: var(--sl-text-muted); margin: 0; }
.sl-facts dd { font: 600 13px var(--sl-font-sans); color: var(--sl-text); margin: 0; text-align: right; }
/* ---- Cast rail ---------------------------------------------------------- */
.sl-cast { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 18px 14px; }
.sl-cast__person { text-align: center; }
.sl-cast__avatar { width: 100%; aspect-ratio: 1; border-radius: 999px; overflow: hidden; background: var(--sl-poster-fallback); margin: 0 auto 8px; max-width: 96px; }
.sl-cast__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sl-cast__name { font: 700 13px var(--sl-font-sans); color: var(--sl-text); line-height: 1.3; }
.sl-cast__role { font: 500 12px var(--sl-font-sans); color: var(--sl-text-muted); margin-top: 2px; }
/* ---- Seasons ------------------------------------------------------------ */
.sl-seasons { display: flex; flex-direction: column; gap: 10px; }
.sl-season { display: flex; align-items: center; gap: 14px; padding: 12px; border: 1px solid var(--sl-border); border-radius: var(--sl-radius-md); background: var(--sl-surface); }
.sl-season img { width: 52px; aspect-ratio: 2/3; object-fit: cover; border-radius: var(--sl-radius-sm); flex: 0 0 auto; background: var(--sl-poster-fallback); }
.sl-season__name { font: 700 14px var(--sl-font-sans); color: var(--sl-text); }
.sl-season__sub { font: 500 12.5px var(--sl-font-sans); color: var(--sl-text-muted); margin-top: 2px; }
/* ---- Browse toolbar + pagination --------------------------------------- */
.sl-page-head { padding: 40px 0 8px; }
.sl-page-head h1 { font: 900 clamp(30px, 4vw, 44px) var(--sl-font-sans); letter-spacing: -0.03em; color: var(--sl-text); margin: 8px 0 0; }
.sl-page-head p { font: 400 15.5px/1.6 var(--sl-font-sans); color: var(--sl-text-secondary); margin: 12px 0 0; max-width: 640px; }
.sl-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 24px 0 8px; padding: 14px 0; border-top: 1px solid var(--sl-border); border-bottom: 1px solid var(--sl-border); }
.sl-toolbar__group { display: flex; align-items: center; gap: 8px; }
.sl-toolbar label { font: 600 12px var(--sl-font-sans); color: var(--sl-text-muted); }
.sl-select { height: 36px; padding: 0 30px 0 12px; border: 1px solid var(--sl-border); border-radius: var(--sl-radius-sm); background: var(--sl-surface); color: var(--sl-text); font: 600 13px var(--sl-font-sans); cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239BA0BD' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
.sl-count { font: 500 13px var(--sl-font-sans); color: var(--sl-text-muted); margin-left: auto; }
.sl-pagination { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 48px 0 0; flex-wrap: wrap; }
.sl-pagination a, .sl-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border-radius: var(--sl-radius-sm); border: 1px solid var(--sl-border); background: var(--sl-surface); font: 600 13px var(--sl-font-sans); color: var(--sl-text-secondary); }
.sl-pagination a:hover { border-color: var(--sl-border-strong); color: var(--sl-text); }
.sl-pagination [aria-current="page"] { background: var(--sl-brand); border-color: transparent; color: var(--sl-text-on-brand); }
.sl-pagination .is-disabled { opacity: 0.4; pointer-events: none; }
/* ---- Closing CTA band --------------------------------------------------- */
.sl-cta-band { margin-top: 88px; }
.sl-cta-band__inner { border-radius: var(--sl-radius-xl); border: 1px solid var(--sl-border); background: var(--sl-bg-subtle); padding: 56px 32px; text-align: center; }
.sl-cta-band h2 { font: 900 clamp(28px, 4vw, 40px) var(--sl-font-sans); letter-spacing: -0.028em; color: var(--sl-text); margin: 0; }
.sl-cta-band p { font: 400 16px var(--sl-font-sans); color: var(--sl-text-secondary); margin: 14px auto 0; max-width: 520px; }
.sl-cta-band .sl-hero__cta { justify-content: center; }
.sl-empty { text-align: center; padding: 80px 24px; color: var(--sl-text-muted); }
.sl-empty h2 { font: 800 20px var(--sl-font-sans); color: var(--sl-text); margin: 0 0 8px; }
/* ---- Breadcrumbs -------------------------------------------------------- */
.sl-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 20px; font: 500 13px var(--sl-font-sans); color: var(--sl-text-muted); }
.sl-crumbs a:hover { color: var(--sl-text); }
.sl-crumbs__sep { color: var(--sl-border-strong); }
/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 900px) {
.sl-hero__inner { grid-template-columns: 1fr; gap: 32px; padding-top: 48px; }
.sl-hero__art { max-width: 420px; }
.sl-detail__cols { grid-template-columns: 1fr; gap: 32px; }
.sl-detail__head { grid-template-columns: 150px minmax(0, 1fr); gap: 20px; margin-top: -80px; }
.sl-detail__poster { width: 150px; }
.sl-features { grid-template-columns: repeat(2, 1fr); }
.sl-footer__grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 640px) {
.sl-nav { display: none; }
.sl-header__cta .sl-btn--ghost { display: none; }
.sl-header__burger { display: inline-flex; }
.sl-grid { grid-template-columns: repeat(3, 1fr); gap: 16px 12px; }
.sl-detail__head { grid-template-columns: 120px minmax(0, 1fr); }
.sl-detail__poster { width: 120px; }
.sl-features { grid-template-columns: 1fr; }
.sl-footer__grid { grid-template-columns: 1fr 1fr; }
.sl-cta-band__inner { padding: 40px 20px; }
}
/* ---- Mobile disclosure nav (no-JS ) ---------------------------- */
.sl-mobile-nav { display: none; }
@media (max-width: 640px) {
.sl-mobile-nav { display: block; }
.sl-mobile-nav summary { list-style: none; cursor: pointer; }
.sl-mobile-nav summary::-webkit-details-marker { display: none; }
.sl-mobile-nav__panel { position: absolute; left: 0; right: 0; top: 64px; background: var(--sl-surface); border-bottom: 1px solid var(--sl-border); box-shadow: var(--sl-shadow-lg); padding: 12px 24px 20px; display: flex; flex-direction: column; gap: 4px; }
.sl-mobile-nav__panel a { padding: 12px 4px; font: 600 15px var(--sl-font-sans); color: var(--sl-text); border-bottom: 1px solid var(--sl-border); }
}
/* ======================================================================== */
/* Blog */
/* ======================================================================== */
.sl-blog-chips { margin: 24px 0 8px; }
/* ---- Post grid + cards -------------------------------------------------- */
.sl-post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 26px; margin-top: 28px; }
.sl-post-card { display: flex; flex-direction: column; background: var(--sl-surface); border: 1px solid var(--sl-border); border-radius: var(--sl-radius-lg); overflow: hidden; transition: border-color var(--sl-duration-fast) var(--sl-ease-out), box-shadow var(--sl-duration-fast) var(--sl-ease-out), transform var(--sl-duration-fast) var(--sl-ease-out); }
.sl-post-card:hover { border-color: var(--sl-border-strong); box-shadow: var(--sl-shadow-lg); transform: translateY(-2px); }
.sl-post-card__media { display: block; aspect-ratio: 1200 / 630; background: var(--sl-poster-fallback); overflow: hidden; }
.sl-post-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sl-post-card__ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font: 900 44px var(--sl-font-sans); color: var(--sl-text-on-brand); background: var(--sl-brand); }
.sl-post-card__body { display: flex; flex-direction: column; gap: 10px; padding: 18px 18px 22px; flex: 1; }
.sl-post-card__cat { align-self: flex-start; font: 700 10.5px var(--sl-font-sans); letter-spacing: 0.07em; text-transform: uppercase; color: var(--sl-brand-soft-text); background: var(--sl-brand-soft); padding: 5px 10px; border-radius: var(--sl-radius-pill); }
.sl-post-card__cat:hover { color: var(--sl-text-on-brand); background: var(--sl-brand); }
.sl-post-card__title { font: 800 18px/1.3 var(--sl-font-sans); letter-spacing: -0.02em; color: var(--sl-text); margin: 0; }
.sl-post-card__title a:hover { color: var(--sl-brand); }
.sl-post-card__dek { font: 400 14px/1.6 var(--sl-font-sans); color: var(--sl-text-secondary); margin: 0; }
.sl-post-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; padding-top: 6px; font: 500 12.5px var(--sl-font-sans); color: var(--sl-text-muted); }
/* ---- Article ------------------------------------------------------------ */
.sl-article__head { padding: 28px 0 8px; }
.sl-article__head h1 { font: 900 clamp(30px, 5vw, 48px)/1.08 var(--sl-font-sans); letter-spacing: -0.035em; color: var(--sl-text); margin: 14px 0 0; }
.sl-article__dek { font: 400 clamp(16px, 2vw, 19px)/1.6 var(--sl-font-sans); color: var(--sl-text-secondary); margin: 16px 0 0; }
.sl-article__byline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 20px; font: 500 13.5px var(--sl-font-sans); color: var(--sl-text-muted); }
.sl-article__cover { margin: 32px 0 8px; }
.sl-article__cover img { width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; border-radius: var(--sl-radius-xl); background: var(--sl-poster-fallback); }
.sl-article__cover figcaption { font: 500 12px var(--sl-font-sans); color: var(--sl-text-muted); text-align: center; margin-top: 10px; }
.sl-article .sl-prose { max-width: none; margin-top: 32px; font-size: 17px; }
/* Prose elements DeepSeek/markdown emit that the base .sl-prose didn't cover. */
.sl-prose h3 { font: 800 17px var(--sl-font-sans); letter-spacing: -0.01em; color: var(--sl-text); margin: 30px 0 10px; }
.sl-prose p { margin: 0 0 18px; }
.sl-prose ul, .sl-prose ol { margin: 0 0 18px; padding-left: 24px; }
.sl-prose li { margin: 6px 0; }
.sl-prose a { color: var(--sl-brand); text-decoration: underline; text-underline-offset: 2px; }
.sl-prose a:hover { color: var(--sl-brand-hover); }
.sl-prose strong { color: var(--sl-text); font-weight: 700; }
.sl-prose blockquote { margin: 22px 0; padding: 6px 18px; border-left: 3px solid var(--sl-brand); color: var(--sl-text); font-style: italic; }
.sl-prose img { border-radius: var(--sl-radius-md); margin: 18px 0; }
.sl-prose code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; background: var(--sl-bg-subtle); padding: 2px 6px; border-radius: var(--sl-radius-sm); }
.sl-prose pre { background: var(--sl-bg-subtle); border: 1px solid var(--sl-border); border-radius: var(--sl-radius-md); padding: 16px; overflow-x: auto; margin: 0 0 18px; }
.sl-prose pre code { background: none; padding: 0; }
.sl-prose h2:first-child, .sl-prose h3:first-child, .sl-prose p:first-child { margin-top: 0; }
.sl-article__cta { margin: 44px 0 8px; border-radius: var(--sl-radius-xl); border: 1px solid var(--sl-border); background: var(--sl-bg-subtle); padding: 32px; text-align: center; }
.sl-article__cta h2 { font: 800 22px var(--sl-font-sans); letter-spacing: -0.02em; color: var(--sl-text); margin: 0 0 8px; }
.sl-article__cta p { font: 400 15px/1.6 var(--sl-font-sans); color: var(--sl-text-secondary); margin: 0 0 18px; max-width: 460px; margin-inline: auto; }
/* ---- Notices ------------------------------------------------------------ */
.sl-note { border-radius: var(--sl-radius-md); padding: 12px 16px; font: 500 14px var(--sl-font-sans); margin: 0 0 18px; }
.sl-note ul { margin: 0; padding-left: 18px; }
.sl-note--ok { background: color-mix(in srgb, var(--sl-brand) 12%, transparent); color: var(--sl-brand-soft-text); border: 1px solid color-mix(in srgb, var(--sl-brand) 32%, transparent); }
.sl-note--err { background: color-mix(in srgb, #e5484d 12%, transparent); color: #e5484d; border: 1px solid color-mix(in srgb, #e5484d 34%, transparent); }
/* ---- Comments ----------------------------------------------------------- */
.sl-comments { margin: 56px 0 24px; padding-top: 32px; border-top: 1px solid var(--sl-border); }
.sl-comments > h2 { font: 800 22px var(--sl-font-sans); letter-spacing: -0.02em; color: var(--sl-text); margin: 0 0 20px; }
.sl-comments__empty { font: 400 15px var(--sl-font-sans); color: var(--sl-text-muted); margin: 0 0 24px; }
.sl-comment-list { list-style: none; margin: 0 0 32px; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.sl-comment-list--replies { margin: 18px 0 0; padding-left: 20px; border-left: 2px solid var(--sl-border); gap: 18px; }
.sl-comment { display: flex; gap: 14px; }
.sl-comment__avatar { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font: 800 15px var(--sl-font-sans); color: var(--sl-text-on-brand); background: var(--sl-brand); }
.sl-comment__main { flex: 1; min-width: 0; }
.sl-comment__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.sl-comment__author { font: 700 14px var(--sl-font-sans); color: var(--sl-text); }
.sl-comment__head time { font: 500 12.5px var(--sl-font-sans); color: var(--sl-text-muted); }
.sl-comment__body { font: 400 14.5px/1.6 var(--sl-font-sans); color: var(--sl-text-secondary); }
/* ---- Comment form ------------------------------------------------------- */
.sl-comment-form { background: var(--sl-surface); border: 1px solid var(--sl-border); border-radius: var(--sl-radius-lg); padding: 24px; }
.sl-comment-form h3 { font: 800 18px var(--sl-font-sans); color: var(--sl-text); margin: 0 0 4px; }
.sl-comment-form__note { font: 400 13px var(--sl-font-sans); color: var(--sl-text-muted); margin: 0 0 18px; }
.sl-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sl-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.sl-field label { font: 600 12.5px var(--sl-font-sans); color: var(--sl-text-secondary); }
.sl-field input, .sl-field textarea { width: 100%; padding: 11px 13px; border: 1px solid var(--sl-border); border-radius: var(--sl-radius-md); background: var(--sl-bg); color: var(--sl-text); font: 400 14.5px var(--sl-font-sans); }
.sl-field input:focus, .sl-field textarea:focus { outline: none; border-color: var(--sl-brand); box-shadow: var(--sl-focus-ring); }
.sl-field textarea { resize: vertical; min-height: 110px; }
.sl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 900px) {
.sl-post-grid { grid-template-columns: repeat(2, 1fr); gap: 26px 20px; }
}
@media (max-width: 640px) {
.sl-post-grid { grid-template-columns: 1fr; }
.sl-field-row { grid-template-columns: 1fr; }
.sl-comment-form { padding: 20px; }
}