/* ─────────────────────────────────────────────────────────────
   taste.css — restraint pass. Loaded last on every page.
   Type: 3 weights (400/500/600), floor 12px, body 16/1.55.
   Colour: one accent (ink), status green only on the dot.
   No blur, no heavy shadows, no pill chrome on static metadata.
   ───────────────────────────────────────────────────────────── */
:root { --f: 'Geist', system-ui, -apple-system, sans-serif; --fm: 'Geist Mono', ui-monospace, monospace; }
html.light { --acc: #111; --acc2: #000; --ink: #111; --ink2: #222; --ink3: #444; --mid: #666; --dim: #9a9a9a; --rule: #e6e6e6; --bg2: #f6f6f6; --bg3: #efefef; --bg4: #e3e3e3; }

/* ── Type scale ── */
html.light body { font-size: 16px; line-height: 1.55; font-weight: 400; }
html.light h1, html.light h2, html.light h3 { line-height: 1.15; font-weight: 600; }
html.light [class*="hstat-n"], html.light .pkpi-stat-n, html.light .pcard-title, html.light .card-t, html.light .oc-t, html.light .sn,
html.light .ps-n, html.light .ps-t, html.light .pq-m, html.light .bcp-title, html.light .card-n, html.light .pcard-num, html.light .hero-num { font-weight: 600 !important; }
html.light .btn-fill, html.light .btn-accent, html.light .btn-outline { font-weight: 500 !important; }

/* floor every meta label at 12px; eyebrows keep mono + uppercase, with calmer tracking */
html.light .eyebrow, html.light .client-tag, html.light .sl, html.light .sec-eye, html.light .pq-s, html.light .next-ey, html.light .nda-bar-text,
html.light .nav-links a, html.light .nav-avail, html.light .work-hdr-meta, html.light .about-eye, html.light .skill-r, html.light .nav-cs, html.light .nav-cs-c,
html.light .nav-cs-back, html.light .nav-cs-r, html.light .device-cap-t, html.light .map-eye, html.light .wrow-num, html.light .wrow-sector, html.light .wrow-cta-label,
html.light .ai-col-n, html.light .ai-foot, html.light .ml, html.light .mi, html.light .hero-tag, html.light .clink-btn, html.light .wrow-tag, html.light .wrow-stats,
html.light .wrow-nda, html.light .cs-nav-btn, html.light .nav-cs-num, html.light .nav-btn-fill, html.light .nav-btn-outline, html.light .nav-logo-sub,
html.light .hstat-l, html.light .nda-box-label, html.light .disc-label, html.light .clink-l, html.light .clink-sub, html.light .nda-label, html.light .avail-status,
html.light .about-eyebrow, html.light .contact-eyebrow, html.light .chapter-label, html.light .tl-year, html.light .tl-role, html.light .s-label, html.light .skill-level,
html.light .journal-caption, html.light .journal-gallery-label, html.light .timeline-title, html.light .portrait-credit, html.light .portrait-loc,
html.light .project-tag, html.light .pcard-tag, html.light .pcard-sector, html.light .pcard-nda, html.light .nav-cs-site a, html.light footer, html.light .btn
  { font-size: 12px !important; letter-spacing: .06em !important; line-height: 1.4; }

/* running text: sans, secondary/body size, readable measure */
html.light .hero-sub, html.light .ai-intro, html.light .hero-desc, html.light .about-body p, html.light .disc-box p, html.light .resume-box p, html.light .contact-l p,
html.light .ai-col p, html.light .wrow-desc, html.light .mv, html.light .pcard-desc, html.light .device-cap p, html.light .device-cap-d, html.light .ps-d, html.light .oc-d
  { font-family: var(--f) !important; font-size: 15px !important; line-height: 1.55 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--ink3); max-width: 70ch; }
html.light .hero-sub, html.light .hero-desc, html.light .about-body p { font-size: 17px !important; color: var(--ink2); }
html.light .wrow-desc { font-size: 14px !important; }
html.light .wrow-title { font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
html.light .work-hdr-title, html.light .ai-h, html.light .about-h { letter-spacing: -.02em; }
html.light .mv { font-size: 14px !important; font-weight: 500; color: var(--ink); }
html.light .ml { color: var(--mid); margin-bottom: 4px; }

/* ── Chrome: opaque nav, no blur, no heavy shadow ── */
html.light .nav, html.light .nav-cs, html.light .mobile-menu { background: #fff !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-bottom: 1px solid var(--rule); }
html.light .wrow:hover { box-shadow: 0 2px 8px rgba(0,0,0,.05); border-color: var(--ink); transform: none; }
html.light .wrow { border-radius: 8px; }
html.light .wrow-cta { border-radius: 8px; }
html.light .wrow-thumb img { filter: none !important; transform: none !important; }
html.light .wrow:hover .wrow-sector { letter-spacing: .06em !important; }
html.light .meta-box, html.light .pcard, html.light .book-card, html.light .ai-col { box-shadow: none !important; }

/* ── One accent. Teal CTA → ink; status dot stays semantic green ── */
html.light .btn-accent, html.light .btn-fill, html.light .nav-btn-fill { background: #111 !important; color: #fff !important; border-color: #111 !important; }
html.light .btn-accent:hover, html.light .btn-fill:hover { background: #333 !important; }
html.light .btn-outline, html.light .nav-btn-outline { background: transparent !important; color: #111 !important; border: 1px solid #111 !important; }
html.light .btn-outline:hover { background: #111 !important; color: #fff !important; }
html.light .adot { background: #1f9d55 !important; box-shadow: none !important; }
html.light a:focus-visible, html.light button:focus-visible { outline: 2px solid #111; outline-offset: 2px; }

/* ── Static metadata: no pill chrome. Tags read as plain meta text separated by dots ── */
html.light .wrow-tags { gap: 0 10px; margin-top: 8px; }
html.light .wrow-tag, html.light .pcard-tag, html.light .project-tag { border: 0 !important; padding: 0 !important; background: none !important; color: var(--mid) !important; }
html.light .wrow-tag + .wrow-tag::before { content: "·"; margin-right: 10px; color: var(--dim); }
html.light .wrow-nda, html.light .pcard-nda { border: 0 !important; padding: 0 !important; color: var(--ink3) !important; }
html.light .wrow-stats { gap: 24px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rule); text-transform: none !important; letter-spacing: 0 !important; color: var(--mid); }
html.light .wrow-stat b { font-size: 16px; font-weight: 600; font-family: var(--f); }

/* ── Client strip: static, no ticker ── */
html.light .marquee { overflow: visible; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
html.light .mtrack { animation: none !important; transform: none !important; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 40px; padding: 20px 48px; width: auto; }
html.light .mi { padding: 0 !important; border: 0 !important; color: var(--mid); white-space: nowrap; }
html.light .mi.dup { display: none; }

/* ── Spacing on an 8px rhythm ── */
html.light .hero-main { padding-top: 96px; padding-bottom: 96px; }
html.light .hero-ctas { margin-top: 32px !important; }
html.light .wlist { gap: 24px; padding-top: 8px; }
html.light .wrow-main { gap: 8px; padding: 24px; }
html.light .ai-section, html.light .about-section, html.light .contact-section { padding-top: 96px; padding-bottom: 96px; }

/* ── Motion: respect the OS ── */
@media (prefers-reduced-motion: reduce) {
  html.light *, html.light *::before, html.light *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  html.light .hero-story .word { opacity: 1 !important; transform: none !important; }
}
@media (max-width: 760px) { html.light .mtrack { padding: 16px 24px; gap: 6px 24px; } html.light .wrow-main { padding: 20px; } }

/* hero sized to content, not the viewport (top bar removed) */
html.light .hero-index { min-height: 0; }
html.light .hero-main { align-items: start; grid-template-columns: minmax(0, 880px); gap: 0; }
html.light .hero-story { font-size: clamp(36px, 5.2vw, 64px); line-height: 1.08; letter-spacing: -.025em; font-weight: 600; max-width: 18ch; }
html.light body { font-size: 16px !important; }
html.light .cs-footer > div { padding: 64px 48px !important; }
/* client strip: let it wrap on phones */
html.light .marquee { height: auto !important; min-height: 0 !important; max-height: none !important; padding: 0 !important; display: block !important; }
html.light .mtrack { position: static !important; height: auto !important; line-height: 1.6; }
/* no 700 anywhere */
html.light strong, html.light b, html.light .oc-t, html.light .card-t, html.light .pcard-title, html.light [style*="font-weight:700"], html.light [style*="font-weight: 700"] { font-weight: 600 !important; }

/* ── Project cards: screenshot sits in a quiet well, as a window ── */
html.light .wrow { border-radius: 12px; overflow: hidden; }
html.light .wrow-thumb { aspect-ratio: 16 / 10; background: var(--bg2); border-bottom: 1px solid var(--rule); padding: 48px 28px 0; box-sizing: border-box; position: relative; overflow: hidden; }
html.light .wrow-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; border: 1px solid rgba(0,0,0,.10); border-bottom: 0; border-radius: 8px 8px 0 0; box-shadow: 0 6px 20px rgba(0,0,0,.06); background: #fff; transition: transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s; }
html.light .wrow:hover .wrow-thumb img { transform: translateY(-4px) !important; box-shadow: 0 12px 28px rgba(0,0,0,.07); }
html.light .wrow:hover .wrow-thumb { background: var(--bg3); }
html.light .wrow-num { top: 18px; left: 28px; color: var(--mid); font-size: 12px !important; }
html.light .wrow-arr { top: 14px; right: 24px; font-size: 18px; color: var(--mid); }
html.light .wrow:hover .wrow-arr { color: var(--ink); }
html.light .wrow-main { padding: 22px 28px 26px; gap: 6px; }
html.light .wrow-sector { color: var(--mid); }
html.light .wrow-title { font-size: 21px; margin-top: 2px; }
html.light .wrow-desc { color: var(--ink3); }
html.light .wrow-tags { margin-top: 6px; }
html.light .wrow-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px; padding-top: 16px; }
html.light .wrow-stat b { font-size: 18px; letter-spacing: -.01em; margin-bottom: 2px; }
html.light .wrow-stat { font-size: 12px; line-height: 1.35; }
@media (max-width: 760px) { html.light .wrow-thumb { padding: 44px 20px 0; } html.light .wrow-main { padding: 18px 20px 22px; } html.light .wrow-stats { grid-template-columns: repeat(3, 1fr); gap: 10px; } }