/* MBA Models — Fragment Language app
 * Visual tokens preserved verbatim from the prior Next.js app:
 *   Dark   #1E1E1E        (hero, CTA, footer, detail page)
 *   Dark2  #252525        (cards on dark)
 *   Crimson #A51C30       (Harvard crimson — primary accent)
 *   Crimson-hover #8B1728
 *   Crimson-brightd #C42339
 * Typography: system-ui stack. No Tailwind at runtime.
 */

*,*::before,*::after { box-sizing: border-box; }
html,body { margin:0; padding:0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: #ffffff;
  color: #111827;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

.container { max-width: 1152px; margin: 0 auto; padding: 0 24px; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* ── NAV ── */
.nav {
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  position: sticky;
  top: 0;
  z-index: 50;
}
.nav-inner { display:flex; align-items:center; justify-content:space-between; padding:12px 24px; max-width:1152px; margin:0 auto; }
.brand { display:flex; align-items:center; gap:12px; }
.brand-mark {
  width:36px; height:36px; background:#A51C30; border-radius:4px;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:700; font-size:14px;
}
.brand-name { display:flex; flex-direction:column; line-height:1.1; }
.brand-name .title { font-weight:700; color:#111827; font-size:18px; letter-spacing:-0.01em; }
.brand-name .tag { font-size:10px; color:#9ca3af; letter-spacing:0.12em; text-transform:uppercase; margin-top:-1px; }
.nav-links { display:none; gap:24px; font-size:14px; align-items:center; }
.nav-links a { color:#4b5563; }
.nav-links a:hover { color:#A51C30; }
.nav-cta { background:#A51C30; color:#fff; padding:8px 16px; border-radius:4px; font-weight:600; font-size:14px; }
.nav-cta:hover { background:#8B1728; }
@media (min-width: 768px) { .nav-links { display:flex; } }

/* ── BUTTONS ── */
.btn { display:inline-flex; align-items:center; gap:8px; padding:12px 24px; border-radius:4px; font-weight:600; font-size:14px; border:0; }
.btn-primary { background:#A51C30; color:#fff; box-shadow: 0 10px 15px -3px rgba(165,28,48,0.2); }
.btn-primary:hover { background:#8B1728; }
.btn-secondary { background: rgba(255,255,255,0.10); color:#fff; border:1px solid rgba(255,255,255,0.10); }
.btn-secondary:hover { background: rgba(255,255,255,0.15); }
.btn-ghost { background:#f3f4f6; color:#111827; }
.btn-ghost:hover { background:#e5e7eb; }
.btn-lg { padding:14px 32px; }

/* ── HERO ── */
.hero { position:relative; overflow:hidden; background:#1E1E1E; }
.hero-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0.3; filter:grayscale(100%); }
.hero-overlay { position:absolute; inset:0; background: linear-gradient(to right, #1E1E1E, rgba(30,30,30,0.9) 60%, rgba(30,30,30,0.5)); }
.hero-grid { position:absolute; inset:0; opacity:0.03; background-image: linear-gradient(rgba(255,255,255,0.5) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.5) 1px, transparent 1px); background-size:40px 40px; }
.hero-inner { position:relative; padding:80px 24px; max-width:1152px; margin:0 auto; }
@media (min-width: 768px) { .hero-inner { padding:112px 24px; } }
.hero-content { max-width:640px; }
.hero-pill { display:inline-flex; align-items:center; gap:8px; background: rgba(165,28,48,0.20); color:#A51C30; padding:6px 16px; border-radius:999px; font-size:14px; font-weight:500; border:1px solid rgba(165,28,48,0.30); margin-bottom:24px; }
.hero h1 { font-size:36px; line-height:1.1; color:#fff; font-weight:800; margin:0 0 24px; letter-spacing:-0.02em; }
@media (min-width: 768px) { .hero h1 { font-size:48px; } }
.hero .accent { color:#A51C30; }
.hero p.lead { font-size:18px; color:#9ca3af; margin:0 0 32px; max-width:512px; line-height:1.6; }
.hero-cta { display:flex; gap:12px; flex-wrap:wrap; }

/* ── SECTIONS ── */
section.white { background:#ffffff; padding:64px 0; }
section.gray  { background:#f9fafb; padding:64px 0; }
section.dark  { background:#1E1E1E; padding:64px 0; }
section.dark h2 { color:#fff; }
section.dark .lead { color:#9ca3af; }

.section-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:32px; }
.section-head h2 { font-size:24px; font-weight:700; margin:0; letter-spacing:-0.01em; }
.section-head .view-all { font-size:14px; color:#A51C30; display:inline-flex; align-items:center; gap:4px; }
.section-head .view-all:hover { text-decoration:underline; }

/* ── FEATURED GRID (light bg cards) ── */
.grid3 { display:grid; grid-template-columns: 1fr; gap:16px; }
@media (min-width: 768px) { .grid3 { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px) { .grid3 { grid-template-columns: repeat(3,1fr); } }

.model-card {
  background:#ffffff; border:1px solid #e5e7eb; border-radius:8px; overflow:hidden;
  display:block; transition: box-shadow 0.15s, border-color 0.15s;
}
.model-card:hover { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.06); border-color: rgba(165,28,48,0.30); }
.model-card .stripe { height:4px; background:#A51C30; }
.model-card .body { padding:20px; }
.model-card .meta { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.model-card .cat-tag { font-size:12px; background:#f3f4f6; color:#6b7280; padding:2px 8px; border-radius:4px; }
.model-card .video-tag { font-size:12px; background: rgba(165,28,48,0.10); color:#A51C30; padding:2px 8px; border-radius:4px; display:inline-flex; align-items:center; gap:4px; }
.model-card h3 { font-size:18px; font-weight:700; color:#111827; margin:0 0 4px; transition: color 0.15s; }
.model-card:hover h3 { color:#A51C30; }
.model-card .creator { font-size:12px; color:#9ca3af; margin:0; }

/* ── CATEGORY CARDS (grayscale → colour on hover) ── */
.cat-grid { display:grid; grid-template-columns: 1fr; gap:20px; }
@media (min-width: 768px) { .cat-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px) { .cat-grid { grid-template-columns: repeat(3,1fr); } }

.cat-card { position:relative; height:176px; border-radius:12px; overflow:hidden; display:block; }
.cat-card.tall { height:224px; }
.cat-card img {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:grayscale(100%); transition: filter 500ms, transform 500ms;
}
.cat-card:hover img { filter:grayscale(0); transform: scale(1.05); }
.cat-card .veil {
  position:absolute; inset:0;
  background: linear-gradient(to top, rgba(30,30,30,0.95), rgba(30,30,30,0.50) 50%, rgba(30,30,30,0.20));
  transition: background 300ms;
}
.cat-card:hover .veil { background: linear-gradient(to top, rgba(165,28,48,0.80), rgba(165,28,48,0.30) 50%, transparent); }
.cat-card .inner { position:relative; height:100%; display:flex; flex-direction:column; justify-content:flex-end; padding:20px; color:#fff; }
.cat-card .count { font-size:11px; color: rgba(255,255,255,0.5); font-weight:500; text-transform:uppercase; letter-spacing:0.08em; margin-bottom:4px; }
.cat-card .name { font-size:20px; font-weight:700; margin:0; }
.cat-card .desc { font-size:12px; color: rgba(255,255,255,0.6); margin:4px 0 0; }
.cat-card.tall .name { font-size:24px; }
.cat-card.tall .desc { font-size:14px; }

/* ── WHY GRID ── */
.why-grid { display:grid; grid-template-columns:1fr; gap:32px; text-align:center; }
@media (min-width: 768px) { .why-grid { grid-template-columns: repeat(3,1fr); } }
.why-icon { width:48px; height:48px; border-radius:8px; background: rgba(165,28,48,0.10); color:#A51C30; display:flex; align-items:center; justify-content:center; margin:0 auto 16px; }
.why-grid h3 { font-size:18px; font-weight:700; margin:0 0 8px; }
.why-grid p { font-size:14px; color:#6b7280; margin:0; }

/* ── CTA SECTION ── */
.cta-center { text-align:center; }
.cta-center h2 { font-size:28px; font-weight:700; color:#fff; margin:0 0 16px; letter-spacing:-0.01em; }
.cta-center p { color:#9ca3af; margin:0 0 32px; }

/* ── FOOTER ── */
.footer { background:#1E1E1E; margin-top:80px; }
.footer .inner { max-width:1152px; margin:0 auto; padding:40px 24px; }
.footer-row { display:flex; flex-direction:column; gap:32px; justify-content:space-between; align-items:flex-start; }
@media (min-width: 768px) { .footer-row { flex-direction:row; } }
.footer-brand { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.footer-brand .mark { width:32px; height:32px; background:#A51C30; border-radius:4px; color:#fff; font-weight:700; font-size:14px; display:flex; align-items:center; justify-content:center; }
.footer-brand .name { color:#fff; font-weight:700; }
.footer-blurb { font-size:14px; color:#6b7280; max-width:320px; margin:0; }
.footer-cols { display:flex; gap:48px; font-size:14px; }
.footer-cols .h { color:#9ca3af; font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:0.08em; margin-bottom:8px; }
.footer-cols a { display:block; color:#6b7280; padding:3px 0; }
.footer-cols a:hover { color:#fff; }
.footer-law { border-top:1px solid #27272a; margin-top:32px; padding-top:24px; font-size:12px; color:#4b5563; }

/* ── MODEL DETAIL (dark immersive) ── */
.detail { background:#1E1E1E; color:#fff; min-height:100vh; padding:48px 0 80px; }
.back-link { color:#A51C30; font-size:14px; font-weight:500; display:inline-flex; align-items:center; gap:4px; margin-bottom:32px; }
.back-link:hover { color:#C42339; }
.detail-head { max-width:860px; margin:0 auto; }
.detail-head h1 { font-size:36px; font-weight:800; margin:0 0 8px; letter-spacing:-0.02em; }
.detail-head .sub { color:#9ca3af; margin:0 0 4px; }
.detail-head .meta { display:flex; gap:16px; color:#6b7280; font-size:13px; margin-top:16px; flex-wrap:wrap; }
.detail-head .meta span { display:inline-flex; align-items:center; gap:6px; }
.detail-head .cat-pill { display:inline-block; background: rgba(165,28,48,0.20); color:#A51C30; border:1px solid rgba(165,28,48,0.30); padding:4px 12px; border-radius:999px; font-size:12px; font-weight:500; margin-bottom:16px; text-transform:uppercase; letter-spacing:0.06em; }
.video-wrap { max-width:860px; margin:40px auto 0; background:#0e0e0e; border:1px solid #27272a; border-radius:12px; overflow:hidden; aspect-ratio:16/9; }
.video-wrap video { width:100%; height:100%; display:block; background:#000; }
.script { max-width:860px; margin:40px auto 0; background:#252525; border:1px solid #27272a; border-radius:12px; padding:32px; }
.script h2 { font-size:18px; font-weight:700; color:#fff; margin:0 0 16px; letter-spacing:-0.01em; }
.script p { font-size:16px; line-height:1.8; color:#d4d4d8; margin:0 0 16px; }
.script p:last-child { margin-bottom:0; }
.keywords { max-width:860px; margin:24px auto 0; display:flex; flex-wrap:wrap; gap:8px; }
.keyword { background: rgba(255,255,255,0.06); color:#d4d4d8; padding:4px 12px; border-radius:999px; font-size:12px; }
.detail-actions { max-width:860px; margin:32px auto 0; display:flex; gap:12px; flex-wrap:wrap; }

/* ── CATEGORY LANDING PAGE ── */
.cat-hero { position:relative; height:280px; border-radius:12px; overflow:hidden; margin-bottom:32px; }
.cat-hero img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(100%); }
.cat-hero .veil { position:absolute; inset:0; background: linear-gradient(to top, rgba(30,30,30,0.95), rgba(30,30,30,0.55) 50%, rgba(30,30,30,0.25)); }
.cat-hero .inner { position:relative; height:100%; padding:32px; color:#fff; display:flex; flex-direction:column; justify-content:flex-end; }
.cat-hero h1 { font-size:40px; font-weight:800; margin:0 0 8px; letter-spacing:-0.02em; }
.cat-hero p { color: rgba(255,255,255,0.7); font-size:16px; margin:0; max-width:640px; }
.cat-hero .count { color: rgba(255,255,255,0.5); font-size:12px; font-weight:500; text-transform:uppercase; letter-spacing:0.08em; margin-bottom:8px; }

.library-grid { display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width: 640px) { .library-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px) { .library-grid { grid-template-columns: repeat(3,1fr); } }

.lib-card {
  background:#fff; border:1px solid #e5e7eb; border-radius:8px; padding:20px;
  display:flex; flex-direction:column; gap:6px; transition: all 0.15s;
}
.lib-card:hover { border-color: rgba(165,28,48,0.30); box-shadow: 0 10px 15px -3px rgba(0,0,0,0.08); }
.lib-card .cat { font-size:11px; color:#9ca3af; text-transform:uppercase; letter-spacing:0.08em; }
.lib-card h3 { font-size:17px; font-weight:700; color:#111827; margin:0; transition: color 0.15s; line-height:1.3; }
.lib-card:hover h3 { color:#A51C30; }
.lib-card .creator { font-size:12px; color:#9ca3af; margin:0; }
.lib-card .flags { margin-top:8px; display:flex; gap:6px; flex-wrap:wrap; }
.lib-card .flag { font-size:11px; padding:2px 8px; border-radius:4px; background: rgba(165,28,48,0.10); color:#A51C30; display:inline-flex; align-items:center; gap:4px; }

/* ── SEARCH BAR ── */
.search-row { display:flex; gap:12px; margin-bottom:24px; flex-wrap:wrap; }
.search-input {
  flex:1; min-width:240px; padding:12px 16px;
  background:#fff; border:1px solid #e5e7eb; border-radius:8px;
  font-size:14px; color:#111827;
}
.search-input:focus { outline:none; border-color:#A51C30; box-shadow: 0 0 0 3px rgba(165,28,48,0.10); }

/* ── ADMIN ── */
.admin-wrap { background:#09090b; color:#e4e4e7; min-height:100vh; padding:48px 0; }
.admin-wrap h1 { font-size:24px; font-weight:700; margin:0 0 24px; }
.admin-login { max-width:360px; margin:96px auto; background:#18181b; border:1px solid #27272a; border-radius:16px; padding:40px; }
.admin-login input { width:100%; padding:12px 14px; background:#09090b; border:1px solid #3f3f46; color:#e4e4e7; border-radius:8px; font-size:14px; margin-bottom:12px; }
.admin-login button { width:100%; padding:12px; background:#A51C30; color:#fff; border:0; border-radius:8px; font-weight:700; font-size:14px; }
.admin-login button:hover { background:#8B1728; }
.admin-card { background:#18181b; border:1px solid #27272a; border-radius:12px; padding:24px; }
.admin-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap:16px; }
.admin-stat .value { font-size:28px; font-weight:700; color:#fff; margin:0; }
.admin-stat .label { font-size:12px; color:#71717a; text-transform:uppercase; letter-spacing:0.08em; margin-top:4px; }
.admin-err { color:#f87171; font-size:13px; margin-bottom:12px; text-align:center; }

/* ── ICON SIZING ── */
svg.icon { width:16px; height:16px; flex-shrink:0; }
svg.icon-sm { width:12px; height:12px; flex-shrink:0; }
svg.icon-lg { width:24px; height:24px; flex-shrink:0; }