/* ============================================================
   Luke Dysart — Portfolio
   Hand-written CSS. Light, modern, responsive.
   Palette: warm gold + blues & purples on a light canvas.
   ============================================================ */

:root {
  --bg: #f6f3ec;             /* warm paper (primary canvas) */
  --bg-alt: #efeadd;         /* alternating band / slightly deeper paper */
  --surface: #fbf9f3;        /* cards (lighter paper) */
  --surface-2: #efeadd;      /* nested surfaces */
  --text: #292d38;           /* charcoal ink */
  --text-dim: #595f6e;       /* secondary text */
  --text-faint: #8b91a0;     /* tertiary / captions */

  --accent: #c59a42;         /* muted gold (primary accent) */
  --accent-soft: #ddb662;    /* lighter gold */
  --accent-ink: #322605;     /* text on gold buttons */
  --accent-2: #7ba6bd;       /* soft blue (secondary, used sparingly) */
  --accent-cyan: #bbd6e4;    /* soft blue tint */
  --accent-3: #b76e54;       /* muted coral (secondary, sparingly) */

  --border: #e0d9c8;         /* warm hairline */
  --shadow: 0 12px 34px -14px rgba(41, 45, 56, 0.22);
  --radius: 14px;
  --maxw: 1120px;
  --font-head: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-hand: 'Caveat', 'Segoe Script', cursive;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* The HTML `hidden` attribute must always win, even over display:flex rules
   (fixes modals/lightboxes that would otherwise show on page load). */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ---------------- Buttons ---------------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-head); font-weight: 500; font-size: 0.95rem;
  padding: 12px 22px; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; transition: transform .18s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
  background: none; color: var(--text);
}
.btn-small { padding: 8px 16px; font-size: 0.85rem; }
.btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 8px 22px -10px var(--accent); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -10px var(--accent); }
.btn-ghost { border-color: var(--border); color: var(--text); background: var(--surface); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }

/* ---------------- Header / Nav ---------------- */
#site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(247,248,252,0.78); backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent; transition: border-color .3s ease, background .3s ease;
}
#site-header.scrolled { border-color: var(--border); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-family: var(--font-head); font-weight: 700; letter-spacing: 2px; font-size: 1.05rem; }
.brand-mark { display: inline-flex; }
.ld-logo {
  display: block; height: 44px; width: auto; overflow: visible;
  /* the uploaded art has a thin transparent margin; nudge it to sit tight */
  margin: -2px -4px -2px -2px;
}
/* handwriting-reveal: the signature "writes itself" left-to-right on load */
.ld-logo { clip-path: inset(0 100% 0 0); animation: ldWrite 1.1s cubic-bezier(.5,.2,.2,1) .25s forwards; }
@keyframes ldWrite { to { clip-path: inset(0 0 0 0); } }
/* hover: re-run the write */
.brand:hover .ld-logo { animation: ldWrite .9s cubic-bezier(.5,.2,.2,1); }
.brand-word { line-height: 1; letter-spacing: 1.5px; }
@media (max-width: 420px) { .brand-word { display: none; } }
/* static fallback — logo fully shown, no wipe */
@media (prefers-reduced-motion: reduce) {
  .ld-logo { clip-path: none !important; animation: none !important; }
}
.nav-links { list-style: none; display: flex; gap: 30px; }
.nav-links a {
  font-family: var(--font-head); font-size: 0.9rem; font-weight: 500; color: var(--text-dim);
  position: relative; padding: 4px 0; transition: color .2s ease;
}
.nav-links a:hover { color: var(--text); }
.nav-links a::after {
  content: ''; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0;
  background: var(--accent); transition: width .25s ease;
}
.nav-links a:hover::after { width: 100%; }

.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; }
.nav-toggle span { width: 24px; height: 2px; background: var(--text); transition: .25s ease; }

/* ---------------- Hero ---------------- */
.hero {
  position: relative; min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; overflow: hidden;
  padding: 90px 0 40px;
}
.hero-grid-bg {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 38% 30%, rgba(197,154,66,0.12), transparent 55%),
    radial-gradient(circle at 72% 68%, rgba(123,160,189,0.12), transparent 55%),
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 46px 46px, 46px 46px;
  mask-image: radial-gradient(circle at 50% 45%, black 30%, transparent 82%);
  opacity: .42;
}
/* subtle film grain over the paper */
.hero-grain {
  position: absolute; inset: 0; pointer-events: none; opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

/* clean, centered hero — the message is the whole stage.
   Nudge the whole group up a touch from dead-center so it sits higher on
   desktop; the offset eases off on smaller screens to stay balanced. */
.hero-stage {
  position: relative; z-index: 2; width: 100%; max-width: 720px; margin: 0 auto; padding: 0 24px;
  transform: translateY(-52px);
}

/* CENTER message */
.hero-inner { text-align: center; }
.hero-eyebrow {
  font-family: var(--font-head); text-transform: uppercase; letter-spacing: 2.5px;
  font-size: 0.68rem; color: var(--text-dim); margin-bottom: 20px; font-weight: 600;
}
.hero-title {
  font-family: var(--font-display); font-weight: 600; line-height: 1.12;
  font-size: clamp(2.6rem, 6vw, 4.6rem); letter-spacing: -1px; margin-bottom: 22px;
  font-optical-sizing: auto; overflow: visible;
}
.hero-title .line { display: block; overflow: visible; padding: 0.1em 0.06em; }
.hero-title .accent { color: var(--accent); font-style: italic; font-weight: 600; display: inline-block; padding-right: .1em; }
.hero-line2 { font-weight: 700; display: inline-block; position: relative; }
.hero-sub { color: var(--text-dim); max-width: 440px; margin: 0 auto 30px; font-size: 1.12rem; line-height: 1.5; }
.hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
/* subtle: soften the hero buttons from a full pill to a rounded rectangle */
.hero-cta .btn { border-radius: 12px; }

.scroll-cue {
  position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
  width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%;
  color: var(--accent); background: rgba(197,154,66,.1); border: 1px solid rgba(197,154,66,.3);
  text-decoration: none; z-index: 3; animation: bob 2s ease-in-out infinite;
}
.scroll-cue:hover { background: rgba(197,154,66,.2); }

/* ---------------- Sections ---------------- */
.section { padding: 110px 0; position: relative; }
.section-alt { background: var(--bg-alt); }
.section-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 14px; }
.section-index {
  font-family: var(--font-head); color: var(--accent); font-weight: 600; font-size: 1rem;
  border: 1px solid var(--border); border-radius: 8px; padding: 2px 10px;
}
.section-title { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.8rem, 4vw, 2.6rem); letter-spacing: -0.5px; }
.section-lead { color: var(--text-dim); max-width: 620px; margin-bottom: 50px; }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: none; }

/* ---------------- About ---------------- */
.about-grid { display: grid; grid-template-columns: 320px 1fr; gap: 48px; align-items: start; }
.about-photo { position: sticky; top: 100px; }
.photo-placeholder, .art-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius);
  color: var(--text-faint); text-align: center; aspect-ratio: 4/5; width: 100%;
}
.photo-placeholder small, .art-placeholder small { font-size: 0.72rem; opacity: .7; }
.about-text p { color: var(--text-dim); margin-bottom: 20px; max-width: 60ch; }
.about-text strong { color: var(--text); font-weight: 600; }
/* subtle standalone research links below the bio — a small cohesive footer */
.about-research {
  margin-top: 28px; font-family: var(--font-head); font-size: 0.82rem;
  letter-spacing: 0.5px; color: var(--text-faint);
}
.about-research p { margin: 0 0 6px; color: var(--text-faint); }
.about-research p:last-child { margin-bottom: 0; }

/* ---------------- Projects — editorial case studies ---------------- */
/* Two-column: logo/identity on the left, information on the right.
   No cards, no app-icon chrome — just a divider between projects. */
.project {
  display: grid; grid-template-columns: 300px 1fr; gap: 48px; align-items: start;
  padding: 48px 0; border-top: 1px solid var(--border);
}
.project:first-of-type { border-top: 0; padding-top: 8px; }

/* Logo presented as a project identity, with breathing room — not an icon tile */
.project-media { position: sticky; top: 112px; }
.project-logo {
  position: relative; width: 100%; aspect-ratio: 1 / 1; max-width: 240px;
  display: flex; align-items: center; justify-content: center;
}
.project-logo .logo-anim { width: 78%; height: 78%; overflow: visible; }

/* information column */
.project-eyebrow {
  font-family: var(--font-head); font-size: 0.72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1.6px; color: var(--text-faint);
  margin-bottom: 14px;
}
.project-title {
  font-family: var(--font-head); font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 700;
  letter-spacing: -0.5px; margin-bottom: 6px; display: flex; align-items: baseline;
  flex-wrap: wrap; gap: 12px;
  color: var(--text);   /* all titles default to charcoal (consistent across projects) */
}
.project-title-link { color: var(--text); transition: color .2s ease; }
.project-title-link:hover { color: var(--accent); }   /* gold only on hover */
.project-subtitle {
  font-family: var(--font-display); font-style: italic; font-size: 1.12rem;
  color: var(--accent-2); margin-bottom: 20px;
}
.project-desc { color: var(--text-dim); margin-bottom: 16px; line-height: 1.75; max-width: 60ch; }
.project-links { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; margin-top: 6px; }

/* "Explore Project" link — understated, gold on hover */
.project-explore {
  font-family: var(--font-head); font-weight: 600; font-size: 0.9rem; color: var(--text);
  display: inline-flex; align-items: center; gap: 7px; padding-bottom: 2px;
  border-bottom: 1.5px solid var(--accent); transition: gap .2s ease, color .2s ease;
}
.project-explore:hover { color: var(--accent); gap: 11px; }

/* small "In Development" status pill — tasteful, not a badge sticker */
.status-pill {
  font-family: var(--font-head); font-size: 0.64rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1.2px; color: var(--accent-3);
  border: 1px solid var(--border); border-radius: 999px; padding: 4px 11px;
  align-self: center; white-space: nowrap;
}

/* confidential indicator — small, professional */
.project-meta {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 6px;
  font-family: var(--font-head); font-size: 0.8rem; letter-spacing: 0.4px; color: var(--text-faint);
}
.lock-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); display: inline-block; }

/* ---------------- MIMIC live demo ---------------- */
.mimic-demo {
  margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--border);
  animation: fadeUp .4s ease both;
}
.mimic-stage { display: block; }
.mimic-video-wrap {
  position: relative; aspect-ratio: 16/9; max-width: 640px; margin: 0 auto;
  background: #05070b; border: 1px solid var(--border);
  border-radius: 12px; overflow: hidden;
}
#mimic-video, #mimic-overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
#mimic-video { object-fit: cover; transform: scaleX(-1); }
.mimic-status {
  position: absolute; top: 10px; left: 10px; font-family: var(--font-head); font-size: 0.72rem;
  letter-spacing: 1px; text-transform: uppercase; color: var(--accent-soft);
  background: rgba(0,0,0,.5); padding: 4px 10px; border-radius: 6px;
}
.mimic-fps {
  position: absolute; bottom: 8px; right: 10px; font-family: var(--font-head); font-size: 0.7rem;
  color: var(--text-faint);
}
.mimic-bars { margin-top: 18px; display: grid; gap: 10px; }
.mimic-bar { display: grid; grid-template-columns: 60px 1fr 44px; align-items: center; gap: 12px; }
.mimic-bar label { font-family: var(--font-head); font-size: 0.82rem; color: var(--text-dim); }
.mimic-bar .bar { height: 10px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.mimic-bar .bar i { display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-soft)); border-radius: 999px;
  transition: width .09s linear; }
.mimic-bar span { font-family: var(--font-head); font-size: 0.8rem; color: var(--text); text-align: right; }
.mimic-controls { margin-top: 18px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mimic-note { font-size: 0.78rem; color: var(--text-faint); flex: 1 1 240px; }

/* ---------------- Gallery ---------------- */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
.gallery-item { cursor: pointer; }
.gallery-item .art-placeholder { aspect-ratio: 3/4; transition: transform .25s ease, border-color .25s ease; }
.gallery-item:hover .art-placeholder { transform: translateY(-4px); border-color: var(--accent); }
.gallery-item figcaption { color: var(--text-dim); font-size: 0.85rem; margin-top: 10px; }
.gallery-item .art-sub { color: var(--text-faint); margin-left: 8px; }
.gallery-more {
  margin-top: 24px; font-family: var(--font-head); font-size: 0.9rem; color: var(--text-dim);
}
.art-placeholder.empty { border-style: dashed; }
.placeholder-slot { cursor: default; }

/* ---------------- Lightbox ---------------- */
.lightbox {
  position: fixed; inset: 0; z-index: 200; background: rgba(5,7,11,.92);
  display: flex; align-items: center; justify-content: center; padding: 40px;
}
.lightbox img { max-width: 92vw; max-height: 88vh; border-radius: 10px; }
.lightbox-close { position: absolute; top: 22px; right: 30px; font-size: 2.4rem; color: #fff; background: none; border: 0; cursor: pointer; line-height: 1; }

/* ---------------- Footer ---------------- */
.site-footer { border-top: 1px solid var(--border); padding: 40px 0; background: var(--bg-alt); }
.footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; }
.footer-brand { font-family: var(--font-head); font-weight: 700; letter-spacing: 2px; }
.footer-links { display: flex; gap: 20px; }
.footer-links a { color: var(--text-dim); transition: color .2s ease; }
.footer-links a:hover { color: var(--accent); }
.site-footer small { color: var(--text-faint); width: 100%; }

/* ---------------- Animations ---------------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes bob { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(8px); } }

/* ---------------- Responsive ---------------- */
@media (max-width: 820px) {
  .nav-toggle { display: flex; }
  .nav-links {
    position: fixed; top: 68px; right: 0; width: 100%; flex-direction: column; gap: 0;
    background: var(--bg-alt); border-top: 1px solid var(--border);
    max-height: 0; overflow: hidden; transition: max-height .3s ease;
  }
  .nav-links.open { max-height: 320px; }
  .nav-links li { width: 100%; border-bottom: 1px solid var(--border); }
  .nav-links a { display: block; padding: 16px 24px; }
  /* ease the hero's upward nudge on tablet so it stays balanced */
  .hero-stage { transform: translateY(-32px); }
  .about-grid { grid-template-columns: 1fr; }
  .about-photo { position: static; max-width: 300px; }
  .project { grid-template-columns: 1fr; gap: 24px; padding: 36px 0; }
  .project-media { position: static; }
  .project-logo { max-width: 150px; aspect-ratio: 1 / 1; }
  .mimic-stage { grid-template-columns: 1fr; }
}

/* phones: keep the hero close to centered so nothing crowds the top */
@media (max-width: 520px) {
  .hero-stage { transform: translateY(-18px); }
}

/* inline text links */
.inline-link { color: var(--accent-2); border-bottom: 1px solid var(--accent-2); transition: opacity .2s ease; }
.inline-link:hover { opacity: 0.7; }

/* ---------------- Inline SVG media (no raster images) ---------------- */
/* About monogram card — dark panel + faint grid + Luke's real signature */
.photo-monogram {
  position: relative; width: 100%; aspect-ratio: 4/5; border-radius: var(--radius);
  overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow);
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(70% 55% at 30% 26%, rgba(201,163,74,0.22), transparent 70%),
    linear-gradient(150deg, #242730, #1f1f1f);
}
.photo-monogram::before {
  content: ""; position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background-image: linear-gradient(#2c2f38 1px, transparent 1px), linear-gradient(90deg, #2c2f38 1px, transparent 1px);
  background-size: 80px 80px;
}
.photo-monogram svg { display: block; width: 100%; height: 100%; }
/* the mark is a black PNG — invert it to a light mark on the dark card */
.photo-monogram-mark {
  position: relative; z-index: 1; width: 72%; height: auto;
  filter: invert(94%) sepia(6%); margin-top: -6%;
}
.photo-monogram-name {
  position: absolute; z-index: 1; bottom: 11%; left: 0; right: 0; text-align: center;
  font-family: var(--font-head); font-weight: 500; font-size: 0.82rem;
  letter-spacing: 6px; color: var(--accent);
}

/* optional real photo (used if you swap the monogram for an <img>) */
.about-photo-img {
  width: 100%; aspect-ratio: 4/5; object-fit: cover;
  border-radius: var(--radius); border: 1px solid var(--border);
}

/* Photographed/scanned artwork in the gallery */
.art-photo {
  aspect-ratio: 4/5; width: 100%; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--border); background: var(--surface-2);
  transition: transform .25s ease, border-color .25s ease;
}
.art-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gallery-item:hover .art-photo { transform: translateY(-4px); border-color: var(--accent); }

/* Lightbox: support inline-SVG artwork as well as <img> */
.lightbox-svg { max-width: 92vw; max-height: 88vh; }
.lightbox-svg svg { max-width: 92vw; max-height: 88vh; width: auto; height: auto; border-radius: 10px; }

/* ---------------- Accessibility ---------------- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--accent); color: var(--accent-ink); font-family: var(--font-head);
  font-weight: 600; padding: 10px 18px; border-radius: 0 0 10px 0;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   Project Logs — feed + recorder studio + video lightbox
   ============================================================ */

/* Toolbar */
.logs-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 14px; margin-bottom: 28px;
}
.logs-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.logs-chip {
  font-family: var(--font-head); font-size: 0.82rem; font-weight: 500;
  color: var(--text-dim); background: var(--surface); border: 1px solid var(--border);
  padding: 7px 15px; border-radius: 999px; cursor: pointer; transition: .2s ease;
}
.logs-chip:hover { color: var(--text); border-color: var(--accent); }
.logs-chip.is-active { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }

/* Feed grid */
.logs-feed { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; }
.logs-empty { color: var(--text-dim); margin-top: 10px; }

.log-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow);
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
  display: flex; flex-direction: column;
}
.log-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 16px 40px -16px rgba(27,34,48,0.28); }

.log-media {
  position: relative; aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.log-media-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 25%, rgba(199,150,47,0.26), transparent 60%),
    linear-gradient(145deg, #e9edf7, #dbe3f1);
}
.log-media.is-playable { cursor: pointer; }
.log-media.is-playable:hover .log-play { transform: scale(1.12); background: var(--accent); color: var(--accent-ink); }
.log-play {
  position: relative; z-index: 2; width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.3rem; color: var(--accent);
  background: rgba(255,255,255,0.85); border: 1px solid var(--accent);
  transition: transform .2s ease, background .2s ease, color .2s ease; padding-left: 4px;
}
.log-soon {
  position: relative; z-index: 2; font-family: var(--font-head); font-size: 0.8rem;
  letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim);
  border: 1px dashed var(--text-faint); padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,0.6);
}
.log-num {
  position: absolute; top: 10px; left: 10px; z-index: 2; font-family: var(--font-head);
  font-size: 0.68rem; letter-spacing: 1.5px; color: var(--accent-3);
  background: rgba(255,255,255,0.8); padding: 4px 9px; border-radius: 6px;
}
.log-dur {
  position: absolute; bottom: 10px; right: 10px; z-index: 2; font-family: var(--font-head);
  font-size: 0.72rem; color: var(--text); background: rgba(255,255,255,0.82); padding: 3px 8px; border-radius: 6px;
}
.log-body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 10px; }
.log-tags { display: flex; align-items: center; gap: 10px; }
.log-date { font-family: var(--font-head); font-size: 0.75rem; color: var(--text-faint); }
.log-title { font-family: var(--font-head); font-size: 1.1rem; }
.log-blurb { color: var(--text-dim); font-size: 0.92rem; }

/* ---- Recorder studio ---- */
.recorder {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 24px; margin-bottom: 32px; box-shadow: var(--shadow); animation: fadeUp .35s ease both;
}
.recorder-head h3 { font-family: var(--font-head); font-size: 1.3rem; }
.recorder-sub { color: var(--text-dim); font-size: 0.9rem; margin: 6px 0 20px; max-width: 640px; }
.recorder-stage { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; }
.recorder-video-wrap {
  position: relative; aspect-ratio: 16/9; background: #05070b; border: 1px solid var(--border);
  border-radius: 12px; overflow: hidden;
}
#rec-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); background: #05070b; }
.recorder-overlay {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; text-align: center;
  background: rgba(5,7,11,.72); color: var(--text-dim); font-family: var(--font-head);
}
.rec-badge {
  position: absolute; top: 12px; left: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-head); font-size: 0.8rem; letter-spacing: 1px; color: #fff;
  background: rgba(0,0,0,.6); padding: 6px 12px; border-radius: 999px;
}
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: #ff3b3b; animation: recpulse 1.3s infinite; }
.rec-badge.is-paused .rec-dot { animation: none; background: var(--text-faint); }
@keyframes recpulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

.recorder-side { display: flex; flex-direction: column; gap: 14px; }
.recorder-field { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-head); font-size: 0.82rem; color: var(--text-dim); }
.recorder-field textarea {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; color: var(--text);
  padding: 12px; font-family: var(--font-body); font-size: 0.9rem; resize: vertical; line-height: 1.5;
}
.recorder-toggle { display: flex; align-items: center; gap: 8px; color: var(--text-dim); font-size: 0.88rem; }
.recorder-toggle input { accent-color: var(--accent); width: 16px; height: 16px; }
.recorder-controls { display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; }
.recorder-controls .btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }

.recorder-result { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--border); }
.recorder-result h4 { font-family: var(--font-head); font-size: 1rem; margin-bottom: 12px; }
#rec-playback { width: 100%; max-width: 520px; border-radius: 12px; border: 1px solid var(--border); background: #000; }
.recorder-result-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.rec-size { font-family: var(--font-head); font-size: 0.8rem; color: var(--text-faint); }
.recorder-note { color: var(--text-faint); font-size: 0.8rem; margin-top: 12px; max-width: 600px; }

/* ---- Video lightbox ---- */
.vlightbox {
  position: fixed; inset: 0; z-index: 200; background: rgba(5,7,11,.94);
  display: flex; align-items: center; justify-content: center; padding: 40px;
}
/* iframe embeds (YouTube/Vimeo) keep a 16:9 frame */
.vlightbox-inner { width: min(90vw, 980px); max-height: 86vh; display: flex; align-items: center; justify-content: center; }
.vlightbox-inner iframe {
  width: 100%; aspect-ratio: 16/9; border-radius: 12px; border: 0; background: #000;
}
/* self-hosted video sizes to its own footage (no forced black 16:9 box) */
.vlightbox-inner video {
  max-width: min(90vw, 980px); max-height: 86vh; width: auto; height: auto;
  border-radius: 12px; border: 0; background: #000; display: block;
}

@media (max-width: 820px) {
  .recorder-stage { grid-template-columns: 1fr; }
}

/* ============================================================
   Animated project logos (inline SVG — no files, no size limits)
   ============================================================ */

/* logo sizing is handled by .project-logo .logo-anim (editorial cards above) */

/* ---- Mary: heartbeat pulse-M draws on, then breathes ---- */
.logo-mary .mary-pulse {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: maryDraw 1.6s ease-out forwards, maryBreathe 3.2s ease-in-out 1.8s infinite;
}
@keyframes maryDraw { to { stroke-dashoffset: 0; } }
@keyframes maryBreathe {
  0%, 100% { opacity: 1; filter: drop-shadow(0 0 0 rgba(228,232,255,0)); }
  50%      { opacity: 0.82; filter: drop-shadow(0 0 5px rgba(228,232,255,0.55)); }
}
/* a live "pulse travels the line" accent on hover */
.project:hover .logo-mary .mary-pulse {
  animation: maryDraw 1s ease-out forwards, maryTravel 1.4s linear infinite;
}
@keyframes maryTravel {
  0%   { stroke-dasharray: 26 274; stroke-dashoffset: 300; }
  100% { stroke-dasharray: 26 274; stroke-dashoffset: 0; }
}

/* ---- MIMIC: the word writes itself, then its reflection MIMICS it ---- */
/* reveal via a left-to-right clip wipe (like it's being written). The write
   loops gently — writes in, holds, clears, and re-writes — so the logo keeps
   its signature behavior after the first play (single looping animation each,
   no duplicate loops). */
.logo-mimic .mi-top {
  clip-path: inset(0 100% 0 0);
  animation: miWriteLoop 7s steps(16, end) .4s infinite;
}
.logo-mimic .mi-bot {
  clip-path: inset(0 100% 0 0);
  animation: miWriteLoop 7s steps(16, end) 1.6s infinite, miMimicGlow 2.6s ease-in-out 2.6s infinite;
}
@keyframes miWriteLoop {
  0%   { clip-path: inset(0 100% 0 0); }   /* unwritten */
  14%  { clip-path: inset(0 0 0 0); }      /* fully written (~1s) */
  82%  { clip-path: inset(0 0 0 0); }      /* hold */
  92%  { clip-path: inset(0 100% 0 0); }   /* clear */
  100% { clip-path: inset(0 100% 0 0); }   /* wait, then repeat */
}
/* the reflection subtly pulses, echoing the original */
@keyframes miMimicGlow { 0%,100%{ opacity:.4 } 50%{ opacity:.75 } }
/* mirror line draws in between the two */
.logo-mimic .mi-mirror { stroke-dasharray: 80; stroke-dashoffset: 80; animation: miMirror .6s ease 1.3s forwards; }
@keyframes miMirror { to { stroke-dashoffset: 0; } }

.logo-mimic { transition: transform .4s cubic-bezier(.22,.61,.36,1); }
.project:hover .logo-mimic { transform: scale(1.04); }
/* the write already loops continuously, so hover just lifts the mark subtly
   (no second write animation — avoids duplicate loops) */

/* ---- Stories: light rises from the open page; a line-bird lifts off ---- */
/* the column of light breathes */
.logo-stories .st-lightcol { transform-box: view-box; transform-origin: 64px 86px; animation: stLightBreathe 4s ease-in-out infinite; }
@keyframes stLightBreathe { 0%,100%{ opacity:.55; transform: scaleY(.96) } 50%{ opacity:.95; transform: scaleY(1.04) } }
.logo-stories .st-pool { animation: stPoolGlow 4s ease-in-out infinite; }
@keyframes stPoolGlow { 0%,100%{ opacity:.65 } 50%{ opacity:1 } }
/* the bird illustration lifts off the page, drifts up, and resets */
.logo-stories .st-bird { transform-box: view-box; transform-origin: 64px 50px; animation: stBirdLift 5s ease-in-out infinite; }
@keyframes stBirdLift {
  0%   { transform: translateY(26px) scale(.7); opacity: 0; }
  18%  { opacity: 1; }
  45%  { transform: translateY(0) scale(1); opacity: 1; }
  80%  { transform: translateY(-10px) scale(1.02); opacity: 1; }
  100% { transform: translateY(-20px) scale(1); opacity: 0; }
}
.logo-stories .st-spk { transform-box: view-box; opacity: 0; }
.logo-stories .s1 { transform-origin: 60px 62px; animation: stSpark 5s ease-in-out infinite .3s; }
.logo-stories .s2 { transform-origin: 70px 58px; animation: stSpark 5s ease-in-out infinite .7s; }
@keyframes stSpark { 0%{opacity:0;transform:translateY(6px)} 30%{opacity:1} 70%{opacity:1} 100%{opacity:0;transform:translateY(-14px)} }
.logo-stories { transition: transform .4s cubic-bezier(.22,.61,.36,1); }
.project:hover .logo-stories { transform: translateY(-3px) scale(1.05); }

/* shared family keyframes */
@keyframes markDraw { to { stroke-dashoffset: 0; } }
@keyframes markBreathe {
  0%, 100% { opacity: 1; filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
  50%      { opacity: 0.85; filter: drop-shadow(0 0 5px rgba(255,255,255,0.55)); }
}

/* Reduced motion: show finished marks, no formation animation */
@media (prefers-reduced-motion: reduce) {
  .logo-mary .mary-pulse { stroke-dashoffset: 0 !important; animation: none !important; }
  .logo-mimic .mi-top, .logo-mimic .mi-bot { clip-path: none !important; animation: none !important; }
  .logo-mimic .mi-mirror { stroke-dashoffset: 0 !important; animation: none !important; }
  .logo-stories .st-lightcol, .logo-stories .st-pool, .logo-stories .st-spk { animation: none !important; }
  .logo-stories .st-bird { animation: none !important; transform: none !important; opacity: 1 !important; }
  .logo-stories .st-spk { opacity: .8 !important; }
}

/* ============================================================
   Tabbed navigation — show one panel at a time (JS adds
   .tabs-enabled to <body>; without JS, all sections stack).
   ============================================================ */
.tabs-enabled .tab-panel[hidden] { display: none !important; }

/* Non-hero panels sit below the fixed header when shown as a tab */
.tabs-enabled .section.tab-panel { padding-top: 128px; min-height: 100vh; }
.tabs-enabled .hero.tab-panel { min-height: 100vh; }

/* In tab mode the panel-enter animation handles entrances, so the old
   scroll-reveal must not leave content stuck invisible. */
.tabs-enabled .reveal { opacity: 1 !important; transform: none !important; }

/* Active nav styling */
.nav-links a.is-active { color: var(--text); }
.nav-links a.is-active::after { width: 100%; }

/* Panel entrance animation (staggered children for a kinetic feel) */
.panel-enter { animation: panelIn .5s cubic-bezier(.22,.61,.36,1) both; }
@keyframes panelIn {
  from { opacity: 0; transform: translateY(18px) scale(.995); }
  to   { opacity: 1; transform: none; }
}
/* stagger the main blocks inside an entering panel */
.panel-enter .section-head,
.panel-enter .about-grid,
.panel-enter .project,
.panel-enter .logs-toolbar,
.panel-enter .logs-feed,
.panel-enter .gallery,
.panel-enter .hero-inner { animation: riseIn .6s cubic-bezier(.22,.61,.36,1) both; }
.panel-enter .project:nth-child(2) { animation-delay: .06s; }
.panel-enter .project:nth-child(3) { animation-delay: .12s; }
.panel-enter .project:nth-child(4) { animation-delay: .18s; }
@keyframes riseIn {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .panel-enter, .panel-enter * { animation: none !important; }
}

/* ============================================================
   Front-page — clean, centered message
   ============================================================ */

/* Center content: gentle staggered entrance */
.panel-enter .hero-eyebrow { animation: riseIn .6s ease .1s both; }
.panel-enter .line-1 .accent { display:inline-block; animation: riseIn .7s ease .2s both; }
.panel-enter .line-2 .hero-line2 { display:inline-block; animation: riseIn .7s ease .34s both; }
.panel-enter .hero-sub { animation: riseIn .6s ease .5s both; }
.panel-enter .hero-cta { animation: riseIn .6s ease .62s both; }

/* restrained button hover */
.hero-cta .btn:hover { transform: translateY(-2px); }

/* respect reduced motion: hero content visible, no motion */
@media (prefers-reduced-motion: reduce) {
  .panel-enter .hero-eyebrow, .panel-enter .line-1 .accent, .panel-enter .line-2 .hero-line2,
  .panel-enter .hero-sub, .panel-enter .hero-cta { animation: none !important; }
}

/* ---------------- "By request" note (code/GitHub) ---------------- */
.by-request {
  font-family: var(--font-head); font-size: 0.8rem; color: var(--text-faint);
  border: 1px dashed var(--border); padding: 8px 14px; border-radius: 10px;
  background: var(--surface-2); display: inline-flex; align-items: center; gap: 6px;
}
.by-request::before { content: "🔑"; font-size: 0.85rem; }

/* ---------------- Commission request ---------------- */
.commission {
  margin-top: 44px; display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; padding: 28px 32px; border-radius: var(--radius);
  border: 1px solid var(--border); box-shadow: var(--shadow);
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(199,150,47,.14), transparent 55%),
    radial-gradient(120% 160% at 100% 100%, rgba(123,92,196,.14), transparent 55%),
    var(--surface);
}
.commission-text h3 { font-family: var(--font-head); font-size: 1.3rem; margin-bottom: 6px; }
.commission-text p { color: var(--text-dim); max-width: 560px; font-size: 0.95rem; }

/* ---------------- Current collaborations ---------------- */
.collab-note {
  margin-top: 22px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.collab-label {
  font-family: var(--font-head); font-size: 0.72rem; letter-spacing: 2px; text-transform: uppercase;
  color: var(--accent-2);
}
.collab-names { color: var(--text-dim); font-size: 0.95rem; }
.collab-names strong { color: var(--text); }

/* ---------------- To the People Who Made Me — a personal letter ---------------- */
/* The closing letter — one cohesive, personal reading column. Paragraph
   spacing and subtle hierarchy carry the composition (no label rails). */
.letter { max-width: 64ch; margin: 2px auto 0; }
.letter > p { color: var(--text-dim); font-size: 1rem; line-height: 1.7; margin-bottom: 18px; }
.letter strong { color: var(--text); font-weight: 600; }

/* opening statement — elegant serif introduction, ~2 lines on desktop */
.letter-lead {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.3rem, 2.1vw, 1.7rem); line-height: 1.4; letter-spacing: -0.2px;
  color: var(--text) !important; margin: 0 0 34px !important; max-width: 40ch;
}

/* the line that carries the letter — a balanced statement with a quiet gold
   rule; emphasis without reading like a generic pull-quote */
.letter-statement {
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: 1.3rem; line-height: 1.5;
  color: var(--text) !important; max-width: none;
  margin: 30px 0 !important; padding-left: 20px;
  border-left: 2px solid var(--accent);
}

/* understated heading for the Places + Rob sub-sections */
.letter-heading {
  font-family: var(--font-head); font-weight: 600; font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 2px; color: var(--accent);
  margin: 0 0 16px !important;
}

/* The places — a compact typographic grouping with small gold separators,
   constrained to the content width so the names wrap into balanced rows */
.places { margin-top: 44px; }
.places-names {
  margin: 0 0 16px !important; max-width: 44ch;
  display: flex; flex-wrap: wrap; align-items: baseline; row-gap: 6px;
  font-family: var(--font-head); font-weight: 500; font-size: 1rem; color: var(--text);
}
.places-names span { white-space: nowrap; }
.places-names span:not(:last-child)::after {
  content: "·"; color: var(--accent); margin: 0 12px; font-weight: 700;
}
.places-note { color: var(--text-dim) !important; font-size: 1rem; line-height: 1.7; }

/* the note to Rob — its own quiet identity: a divider + hierarchy, not a card */
.letter-note {
  margin-top: 48px; padding-top: 36px; border-top: 1px solid var(--border);
}
.letter-note p { color: var(--text-dim); font-size: 1rem; line-height: 1.7; margin-bottom: 18px; }
.letter-note-name {
  font-family: var(--font-display); font-size: 1.75rem; font-weight: 600;
  color: var(--text) !important; margin-bottom: 20px !important; letter-spacing: -0.3px;
}
.letter-signoff {
  font-family: var(--font-display); font-style: italic; font-size: 1.3rem;
  color: var(--text) !important; margin: 20px 0 0 !important;
}

@media (max-width: 820px) {
  .letter { max-width: 100%; }
  .letter-lead { font-size: 1.25rem; }
  .places-names { line-height: 2.1; }
}

/* ---------------- Animated stick-guy mascot ---------------- */
.stickguy { position: absolute; width: 150px; height: 175px; z-index: 1; pointer-events: none; }
.stickguy svg { width: 100%; height: 100%; overflow: visible; }
.stickguy-left { top: 30%; left: 2%; }
@media (max-width: 1100px) { .stickguy-left { left: -1%; width: 120px; } }
@media (max-width: 820px) { .stickguy { display: none; } }

/* each pose fades in while the others fade out — 6 poses, 15s loop */
.stickguy .pose { opacity: 0; animation: poseCycle 15s ease-in-out infinite; transform-origin: 56px 70px; }
.stickguy .pose-chute  { animation-delay: 0s; }
.stickguy .pose-chef   { animation-delay: 2.5s; }
.stickguy .pose-run    { animation-delay: 5s; }
.stickguy .pose-hockey { animation-delay: 7.5s; }
.stickguy .pose-paint  { animation-delay: 10s; }
.stickguy .pose-salute { animation-delay: 12.5s; }
@keyframes poseCycle {
  0%     { opacity: 0; transform: translateY(8px) scale(.96); }
  3%     { opacity: 1; transform: none; }
  14%    { opacity: 1; transform: none; }
  17%    { opacity: 0; transform: translateY(-6px) scale(.98); }
  100%   { opacity: 0; }
}
/* the parachute pose should gently sway while visible */
.stickguy .pose-chute { animation: poseCycle 15s ease-in-out infinite, chuteSway 2.4s ease-in-out infinite; }
@keyframes chuteSway { 0%,100%{ transform: rotate(-3deg) } 50%{ transform: rotate(3deg) } }
/* little tossed item (food / paint) bobs */
.stickguy .toss { animation: tossBob 1s ease-in-out infinite; }
@keyframes tossBob { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-5px) } }
/* running pose: quick leg jitter via subtle horizontal nudge */
.stickguy .pose-run g { animation: runBob .5s ease-in-out infinite; transform-box: view-box; }
@keyframes runBob { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-2px) } }

/* RIGHT buddy — reacts in sync with the left guy (they interact) */
.stickguy-right { top: 30%; right: 2%; }
@media (max-width: 1100px) { .stickguy-right { right: -1%; width: 120px; } }
.stickguy-right .react { opacity: 0; animation: reactCycle 15s ease-in-out infinite; transform-box: view-box; }
/* timed so the reaction matches the left guy's current activity */
.stickguy-right .react-goalie { animation-delay: 7.5s; }  /* left = hockey */
.stickguy-right .react-thumb  { animation-delay: 10s; }   /* left = painting */
.stickguy-right .react-cheer  { animation-delay: 12.5s; } /* left = salute */
@keyframes reactCycle {
  0%, 46% { opacity: 0; }
  50%     { opacity: 1; }
  63%     { opacity: 1; }
  67%, 100% { opacity: 0; }
}
/* cheer buddy bounces; thumbs-up buddy bobs */
.stickguy-right .react-cheer { animation: reactCycle 15s ease-in-out 12.5s infinite, buddyBounce .5s ease-in-out 12.5s 6; }
@keyframes buddyBounce { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-5px) } }

/* Golden retriever trots across the hero between the two characters */
.hero-dog { position: absolute; bottom: 16%; width: 70px; z-index: 1; pointer-events: none;
  animation: dogTrot 15s ease-in-out infinite; }
@keyframes dogTrot {
  0%, 60% { left: -8%; opacity: 0; }
  64%     { opacity: 1; }
  82%     { left: 92%; opacity: 1; }
  86%, 100% { left: 100%; opacity: 0; }
}
.hero-dog .dog-tail { transform-box: view-box; transform-origin: 52px 20px; animation: dogWag .3s ease-in-out infinite; }
@keyframes dogWag { 0%,100%{ transform: rotate(0) } 50%{ transform: rotate(16deg) } }
@media (max-width: 820px) { .hero-dog { display: none; } }

/* Doodles sketch themselves in once on load, then just float (no flicker) */
.panel-enter .doodle { animation: doodleFloat 7s ease-in-out infinite, doodleSketchIn .8s ease-out both; }
@keyframes doodleSketchIn {
  0%   { opacity: 0; transform: scale(.6) rotate(var(--r,0deg)); }
  60%  { opacity: .9; }
  100% { opacity: .9; transform: scale(1) rotate(var(--r,0deg)); }
}

@media (prefers-reduced-motion: reduce) {
  .stickguy .pose, .stickguy-right .react, .hero-dog, .hero-dog .dog-tail { animation: none; }
  .stickguy .pose-chute { opacity: 1; animation: none; }
  .stickguy .pose-chef, .stickguy .pose-run, .stickguy .pose-hockey,
  .stickguy .pose-paint, .stickguy .pose-salute { opacity: 0; }
  .stickguy-right .react-thumb { opacity: 1; }
  .stickguy-right .react-cheer, .stickguy-right .react-goalie { opacity: 0; }
  .stickguy .toss, .stickguy .pose-run g { animation: none; }
  .doodle { animation: none; opacity: .9; }
  .hero-dog { display: none; }
}

/* ============================================================
   Project detail pages (projects/*.html) — an extension of the
   portfolio, not a separate site. Modular blocks; project media
   can be swapped for Rive embeds later without layout changes.
   ============================================================ */
.detail-page { padding-top: 108px; }
.detail-main { max-width: 860px; margin: 0 auto; padding: 0 24px 100px; }

/* back-to-engineering link */
.detail-back {
  display: inline-flex; align-items: center; gap: 8px; margin: 28px 0 36px;
  font-family: var(--font-head); font-size: 0.85rem; font-weight: 600; color: var(--text-dim);
  transition: gap .2s ease, color .2s ease;
}
.detail-back:hover { color: var(--accent); gap: 12px; }

.detail-eyebrow {
  font-family: var(--font-head); font-size: 0.72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1.6px; color: var(--text-faint); margin-bottom: 14px;
}
.detail-title {
  font-family: var(--font-head); font-weight: 700; letter-spacing: -0.6px;
  font-size: clamp(2.1rem, 5vw, 3.1rem); margin-bottom: 10px;
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
}
.detail-subtitle {
  font-family: var(--font-display); font-style: italic; font-size: 1.25rem;
  color: var(--accent-2); margin-bottom: 28px;
}
.detail-intro { color: var(--text-dim); font-size: 1.08rem; line-height: 1.75; max-width: 64ch; }

/* content blocks */
.detail-section { margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--border); }
.detail-section:first-of-type { border-top: 0; }
.detail-section h2 {
  font-family: var(--font-head); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.3px;
  margin-bottom: 16px;
}
.detail-section p { color: var(--text-dim); line-height: 1.75; margin-bottom: 14px; max-width: 64ch; }
.detail-section ul { color: var(--text-dim); line-height: 1.7; margin: 0 0 14px 1.1rem; }
.detail-section li { margin-bottom: 8px; }
.detail-section strong { color: var(--text); font-weight: 600; }

/* a slot for future media (photos / video / Rive embeds) */
.media-slot {
  margin-top: 20px; border: 1px dashed var(--border); border-radius: var(--radius);
  background: var(--surface-2);
  min-height: 220px; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 28px;
}
.media-slot p {
  font-family: var(--font-head); font-size: 0.82rem; letter-spacing: 0.5px;
  color: var(--text-faint); margin: 0; max-width: 42ch;
}

/* reuse the home demo styles on the detail page; keep it tidy */
.detail-page .mimic-demo { margin-top: 20px; border-top: 0; padding-top: 0; }

@media (max-width: 820px) {
  .detail-main { padding-bottom: 72px; }
}