/* Jerome Sescon portfolio: design system (SPEC.md section 3). Mobile first, breakpoints 768 and 1024 px. */

/* ---------- Tokens ---------- */
:root {
  --navy: #0B1220;
  --navy-2: #131C2E;
  --paper: #F7F8FA;
  --white: #FFFFFF;
  --ink: #0F172A;
  --muted: #475569;
  --on-dark: #E5E7EB;
  --muted-dark: #94A3B8;
  --teal: #14B8A6;       /* buttons and accents only, never text on light */
  --teal-ink: #0F766E;   /* links and small accents on light */
  --indigo: #6366F1;     /* decorative only, no text */
  --indigo-ink: #4F46E5;
  --missing-bg: #FDE68A;
  --error: #B91C1C;

  --hero-bg: linear-gradient(160deg, #0B1220 0%, #131C2E 60%, #1E1B4B 100%);

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  --r-sm: 8px;
  --r-md: 16px;
  --r-pill: 999px;

  --shadow-1: 0 1px 2px rgba(15,23,42,.08), 0 4px 16px rgba(15,23,42,.08);
  --shadow-hover: 0 8px 28px rgba(15,23,42,.16);

  --focus: 3px solid #14B8A6;
  --tap: 44px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

/* ---------- Base type ---------- */
body {
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
}
h1, h2, h3 { color: inherit; text-wrap: balance; }
h1 { font-size: clamp(2rem, 6vw, 3.5rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.5rem, 4vw, 2.25rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
h3 { font-size: 1.25rem; font-weight: 700; line-height: 1.3; }
p, li { max-width: 68ch; }
small, .small { font-size: 0.875rem; }
.mono { font-family: var(--mono); font-size: 0.875rem; }
strong { font-weight: 700; }

a { color: var(--teal-ink); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
.dark a:not(.btn), .hero a:not(.btn) { color: var(--on-dark); }

/* Spec ring is 3px #14B8A6, but teal on paper is only 2.3:1 (WCAG needs 3:1 for focus),
   so light areas use --teal-ink (5.2:1) and dark areas keep --teal (7.5:1). */
:focus-visible { outline: 3px solid var(--teal-ink); outline-offset: 2px; }
.dark :focus-visible, .hero :focus-visible, .site-header :focus-visible, .skip-link:focus-visible { outline-color: var(--teal); }

::selection { background: var(--teal); color: var(--navy); }

/* Draft placeholders: highlighted and found by scripts/check-missing.sh */
mark.missing {
  background: var(--missing-bg);
  color: var(--ink);
  padding: 0 var(--s-1);
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 0.9em;
}

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 20px;
}
.section { padding-block: var(--s-8); }
.section > .container > * + * { margin-top: var(--s-5); }
.section-intro { color: var(--muted); }

.dark { background: var(--navy); color: var(--on-dark); }
.hero { background: var(--hero-bg); color: var(--on-dark); }
.dark .section-intro, .dark .muted, .hero .muted { color: var(--muted-dark); }
.muted { color: var(--muted); }

.grid { display: grid; gap: var(--s-5); grid-template-columns: 1fr; }

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: -100px;
  z-index: 100;
  padding: var(--s-3) var(--s-4);
  background: var(--teal);
  color: var(--navy);
  font-weight: 700;
  border-radius: var(--r-sm);
}
.skip-link:focus { top: var(--s-4); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 48px;
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-pill);
  border: 2px solid transparent;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: box-shadow 150ms ease-out, background-color 150ms ease-out;
}
.btn-primary { background: var(--teal); color: var(--navy); }
.btn-primary:hover { background: #2DD4BF; box-shadow: var(--shadow-hover); }
.btn-secondary { background: transparent; color: var(--ink); border-color: currentColor; }
.dark .btn-secondary, .hero .btn-secondary { color: var(--on-dark); }
.btn-secondary:hover { background: rgba(20,184,166,.12); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* ---------- Cards ---------- */
.card {
  background: var(--white);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  padding: var(--s-5);
}
.card > * + * { margin-top: var(--s-3); }
.dark .card, .hero .card { background: var(--navy-2); box-shadow: none; border: 1px solid rgba(148,163,184,.18); }
.card-lead { border-top: 4px solid var(--teal); }
.card-icon { width: 48px; height: 48px; color: var(--teal-ink); }
.dark .card-icon, .hero .card-icon { color: var(--teal); }

@media (hover: hover) and (pointer: fine) {
  .card-hover { transition: transform 150ms ease-out, box-shadow 150ms ease-out; }
  .card-hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
}

/* ---------- Chips and tags ---------- */
.chip-list { display: flex; flex-wrap: wrap; gap: var(--s-2); padding: 0; list-style: none; }
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: var(--s-1) var(--s-4);
  border-radius: var(--r-pill);
  background: var(--white);
  border: 1px solid #CBD5E1;
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 600;
}
.dark .chip, .hero .chip { background: var(--navy-2); border-color: rgba(148,163,184,.35); color: var(--on-dark); }
.tag {
  display: inline-block;
  padding: 2px var(--s-3);
  border-radius: var(--r-pill);
  background: #E6F4F2;
  color: var(--teal-ink);
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 600;
}
.dark .tag, .hero .tag { background: rgba(20,184,166,.16); color: var(--teal); }

/* ---------- Expandable panel ---------- */
.panel-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--tap);
  padding: var(--s-2) 0;
  background: none;
  border: 0;
  color: var(--teal-ink);
  font-weight: 700;
}
.panel-toggle::after {
  content: "";
  width: 8px; height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 150ms ease-out;
}
.panel-toggle[aria-expanded="true"]::after { transform: rotate(-135deg) translateY(-2px); }
.panel { padding-top: var(--s-3); border-top: 1px solid #E2E8F0; }
.panel > * + * { margin-top: var(--s-3); }
.panel dt { font-weight: 700; }
.panel dl > div + div { margin-top: var(--s-3); }

/* ---------- Stepper ---------- */
.stepper { list-style: none; padding: 0; display: grid; gap: var(--s-5); counter-reset: step; }
.stepper > li { position: relative; padding-left: 56px; counter-increment: step; }
.stepper > li::before {
  content: counter(step);
  position: absolute; left: 0; top: 0;
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--teal);
  color: var(--navy);
  font-weight: 800;
}

/* ---------- Form field (only if the Owner approves a form; mailto is the default) ---------- */
.field { display: grid; gap: var(--s-2); }
.field label { font-weight: 600; }
.field input, .field textarea, .field select {
  min-height: 48px;
  padding: var(--s-3);
  border: 2px solid #64748B;
  border-radius: var(--r-sm);
  background: var(--white);
}
.field input:focus-visible, .field textarea:focus-visible { border-color: var(--teal-ink); }
.field-error { color: var(--error); font-size: 0.875rem; }

/* ---------- Header and nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--navy);
  color: var(--on-dark);
  border-bottom: 1px solid rgba(148,163,184,.18);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 64px; }
.logo { color: var(--on-dark); font-weight: 800; text-decoration: none; min-height: var(--tap); display: inline-flex; align-items: center; }
.site-header a:not(.btn) { color: var(--on-dark); }
.nav-list, .header-cta { display: none; }
.nav-menu > summary {
  list-style: none;
  display: inline-flex; align-items: center;
  min-height: var(--tap);
  padding: 0 var(--s-4);
  border: 2px solid rgba(229,231,235,.6);
  border-radius: var(--r-pill);
  font-weight: 700;
  cursor: pointer;
}
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu[open] > ul {
  position: absolute; left: 0; right: 0; top: 100%;
  margin: 0; padding: var(--s-2) 20px var(--s-4);
  list-style: none;
  background: var(--navy);
  border-bottom: 1px solid rgba(148,163,184,.18);
}
.nav-menu a { display: flex; align-items: center; min-height: 48px; text-decoration: none; font-weight: 600; }

/* ---------- Sections ---------- */
main section[id], #gallery { scroll-margin-top: 72px; }
.section-alt { background: var(--white); }
.section-tight { padding-block: var(--s-7); }
.eyebrow { font-family: var(--mono); font-size: 0.875rem; color: var(--teal); letter-spacing: .02em; }
.lead { font-size: 1.125rem; }
.hero-inner { display: grid; gap: var(--s-6); align-items: center; }
.hero-visual { width: 100%; max-width: 560px; aspect-ratio: 640 / 520; margin-inline: auto; }
.hero-visual { position: relative; }
.hero-visual img { width: 100%; height: 100%; }

/* ---------- 3D hero (SPEC section 6). Static image is the default; JS adds .motion-ok after the checks ---------- */
.hero-3d { display: none; }
.hero-defs { position: absolute; width: 0; height: 0; }
.motion-ok .hero-static { display: none; }
.motion-ok .hero-3d { display: block; position: absolute; inset: 0; perspective: 900px; }
.hero-tilt, .hero-stack { position: absolute; inset: 0; transform-style: preserve-3d; }
.hero-tilt { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 150ms ease-out; will-change: transform; }
.hero-stack { animation: hero-float 6s ease-in-out infinite; will-change: transform; }
.hero-paused .hero-stack { animation-play-state: paused; }
.hero-layer {
  position: absolute;
  left: var(--x); top: var(--y); width: var(--w);
  transform: translateZ(var(--z));
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.35));
  will-change: transform;
}
.hero-layer svg { display: block; width: 100%; height: auto; }
@keyframes hero-float {
  0%, 100% { transform: translateY(0) rotateY(-4deg); }
  50% { transform: translateY(-10px) rotateY(4deg); }
}

/* Card tilt (desktop pointer only, set by JS) */
.motion-ok .tilt-card { transition: transform 150ms ease-out, box-shadow 150ms ease-out; }

/* Scroll reveal: content is visible unless JS and motion are both on */
.motion-ok .reveal { transition: opacity 400ms ease-out, transform 400ms ease-out; }
.motion-ok .reveal:not(.is-in) { opacity: 0; transform: translateY(16px); }
.hero-text > * + * { margin-top: var(--s-4); }
.hero-text .btn-row { margin-top: var(--s-5); }

.about-grid { display: grid; gap: var(--s-5); }
.about-text > * + * { margin-top: var(--s-4); }
.headshot { width: 100%; max-width: 320px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-md); }
.timeline { list-style: none; padding: 0; display: grid; gap: var(--s-4); }
.timeline > li { padding-left: var(--s-4); border-left: 3px solid var(--teal); }
.timeline strong { display: block; }

ul.grid { list-style: none; padding: 0; }
.services-lead h3 { font-size: 1.375rem; }
.price { padding: var(--s-5); border-radius: var(--r-md); background: var(--paper); }
.price > * + * { margin-top: var(--s-2); }
.price-line { font-size: 1.25rem; }

.case-summary dd, .panel dd { margin: 0; }
.cases { align-items: start; }
.case .panel { margin-top: var(--s-2); }
.case dt { font-weight: 700; margin-top: var(--s-3); }
.case dd { margin: 0; }
.gallery { margin-top: var(--s-7); }
.gallery > * + * { margin-top: var(--s-4); }
.gallery-item h4 { font-size: 1.0625rem; }
.gallery-video { width: 100%; height: auto; aspect-ratio: 9 / 16; border-radius: var(--r-sm); background: var(--navy); object-fit: cover; }
.gallery-item .tag { white-space: normal; }

.link-tap { display: inline-flex; align-items: center; min-height: var(--tap); }

.ai-box { border-left: 4px solid var(--teal); }

.site-footer { padding-block: var(--s-6); }
.footer-inner { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.nav-list a[aria-current] { text-decoration: underline; text-decoration-color: var(--teal); text-decoration-thickness: 3px; text-underline-offset: 8px; }
.footer-inner a { display: inline-flex; align-items: center; min-height: var(--tap); }
.footer-inner p { display: flex; align-items: center; min-height: var(--tap); }

/* ---------- Breakpoints ---------- */
@media (min-width: 768px) {
  .container { padding-inline: 32px; }
  .grid-2, .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .section { padding-block: var(--s-9); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
  .stepper { grid-template-columns: repeat(4, 1fr); }
  .stepper > li { padding-left: 0; padding-top: 56px; }
  .nav-menu { display: none; }
  .nav-list { display: flex; gap: var(--s-1); list-style: none; margin: 0; padding: 0; }
  .nav-list a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--s-3); text-decoration: none; font-weight: 600; }
  .nav-list a:hover { text-decoration: underline; }
  .header-cta { display: inline-flex; }
  .hero-inner { grid-template-columns: 1.1fr 1fr; }
  .about-grid { grid-template-columns: 320px 1fr; align-items: start; gap: var(--s-7); }
}

/* ---------- Reduced motion (SPEC section 6) ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* 404 page */
body.hero { min-height: 100vh; }