/* =========================================================
   Bryan Shum — Portfolio v2
   Design system derived from the "Resume Version 2" and
   "Cover Letter" Figma documents: warm paper palette, serif
   display type, tracked mono labels, thin rust dividers.
   Flat by design — no drop shadows anywhere.
   ========================================================= */

:root {
  /* Color */
  --bg: #FDFBF7;
  --bg-alt: #F5F2EB;
  --bg-canvas: #DEDAD2;
  --ink: #1A1714;
  --muted: #6B6359;
  --faint: #9A8E86;
  --accent: #B94B2A;
  --divider: rgba(26, 23, 20, 0.1);
  --divider-accent: rgba(185, 75, 42, 0.28);

  /* Type */
  --font-display: 'Playfair Display', serif;
  --font-body: 'DM Sans', sans-serif;
  --font-mono: 'DM Mono', monospace;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4rem;
  --space-8: 6rem;
  --space-9: 8rem;

  --container-w: 72rem;
  --nav-h: 5rem;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, video, canvas { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: none; cursor: pointer; color: inherit; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

.container {
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}

/* ---------- Grain overlay (paper texture, no shadows) ---------- */
.grain-overlay {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  mix-blend-mode: multiply;
}

/* ---------- Liquid cursor ---------- */
.has-custom-cursor, .has-custom-cursor a, .has-custom-cursor button {
  cursor: none;
}
.cursor-liquid {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: difference;
}

/* ---------- Section eyebrow ("SLabel") ---------- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.eyebrow-tick {
  width: 28px;
  height: 2px;
  background: var(--accent);
  flex-shrink: 0;
}
.eyebrow-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.eyebrow-line {
  flex: 1;
  height: 1px;
  background: var(--divider);
}
.eyebrow-name {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.work-spotlight-group.is-work-active .eyebrow-name {
  opacity: 1;
  transform: translateX(0);
}

/* ---------- Spotlight dim (basement.studio-style hover highlight) ---------- */
.is-dimmed {
  opacity: 0.32;
  transition: opacity 0.3s ease;
}

/* ---------- Nav / Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(253, 251, 247, 0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1.5px solid var(--accent);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}
.nav-logo .logo-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.01em;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}
.nav-link {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  position: relative;
  padding-block: 4px;
  transition: color 0.2s ease;
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1.5px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.nav-link:hover, .nav-link.is-active {
  color: var(--ink);
}
.nav-link:hover::after, .nav-link.is-active::after {
  transform: scaleX(1);
}
.nav-toggle {
  display: none;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

@media (max-width: 720px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: absolute;
    top: var(--nav-h);
    left: 0; right: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--divider);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: var(--space-3) clamp(1.25rem, 4vw, 3rem) var(--space-5);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  .nav-links.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .nav-link { padding-block: var(--space-3); width: 100%; }
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--divider);
  background: var(--bg-alt);
  padding-block: var(--space-6);
  margin-top: var(--space-9);
}
.footer-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}
.footer-links {
  display: flex;
  gap: var(--space-5);
}
.footer-links a { color: var(--muted); transition: color 0.2s ease; }
.footer-links a:hover { color: var(--accent); }

/* ---------- Buttons / links ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 4px;
  border-bottom: 1.5px solid var(--accent);
  transition: gap 0.2s ease, color 0.2s ease;
}
.btn:hover { gap: 1rem; color: var(--accent); }
.btn-arrow { transition: transform 0.2s ease; }
.btn:hover .btn-arrow { transform: translateX(3px); }
.btn[aria-disabled="true"] {
  border-bottom-color: var(--divider);
  color: var(--faint);
  pointer-events: none;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--divider);
}
.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero-content {
  position: relative;
  width: 100%;
  padding-block: var(--space-8);
  pointer-events: none;
}
.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-5);
  display: block;
}
.hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3.2rem, 11vw, 9rem);
  line-height: 0.95;
  letter-spacing: 0.005em;
  max-width: 20ch;
}
.hero-tagline {
  font-family: var(--font-mono);
  font-size: clamp(0.85rem, 1.4vw, 1rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: var(--space-5);
}
.hero-actions {
  margin-top: var(--space-7);
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
  pointer-events: auto;
}

/* ---------- Marquee ---------- */
.marquee {
  overflow: hidden;
  border-bottom: 1px solid var(--divider);
  padding-block: var(--space-4);
  background: var(--bg-alt);
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 40s linear infinite;
}
.marquee-unit {
  display: flex;
  align-items: baseline;
  flex-shrink: 0;
  gap: 2.5rem;
  padding-right: 2.5rem;
}
.marquee-track span {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.6vw, 1.8rem);
  white-space: nowrap;
  color: var(--muted);
}
.marquee-track span.marquee-sep { color: var(--accent); }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- Generic section ---------- */
.section {
  padding-block: var(--space-9);
}
.section-alt {
  /* Transparent enough (not the flat --bg-alt) that the fixed grain
     layer, which sits behind everything, actually reads through — a
     fully opaque background paints over it since it's a later, higher
     layer in the normal paint order than the grain's negative z-index.
     92% was too subtle to notice; dropped further for real visibility. */
  background: rgba(245, 242, 235, 0.68);
}
.section-lead {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height: 1.35;
  max-width: 42ch;
  margin-bottom: var(--space-6);
}
.section-body {
  max-width: 62ch;
  color: var(--muted);
  font-size: 1.05rem;
}
.section-body p + p { margin-top: var(--space-4); }

/* ---------- Capability list ---------- */
.capability-list { border-top: 1px solid var(--divider); }
.capability-item {
  display: grid;
  grid-template-columns: 3rem 28rem 1fr;
  align-items: center;
  gap: var(--space-5);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--divider);
  transition: padding-left 0.3s ease, opacity 0.3s ease;
}
.capability-item:hover { padding-left: var(--space-3); }
.capability-item.is-dimmed { opacity: 0.32; }
.capability-index {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--faint);
  transition: color 0.3s ease;
}
.capability-item:hover .capability-index { color: var(--accent); }
.capability-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 5.2vw, 4.2rem);
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  height: 1.35em;
  line-height: 1.35;
}
.capability-name-track {
  display: flex;
  flex-direction: column;
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
.capability-item:hover .capability-name-track {
  transform: translateY(-50%);
}
.capability-name-line {
  display: block;
  line-height: 1.35;
}
.capability-desc {
  color: var(--muted);
  font-size: 0.95rem;
  max-width: 42ch;
}
@media (max-width: 720px) {
  .capability-item { grid-template-columns: 1fr; gap: var(--space-2); }
}

/* ---------- Work feature (single large project spread) ---------- */
.work-feature {
  display: block;
}
.work-feature-media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--divider);
}
.work-feature-media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(0.55);
  transition: filter 0.5s ease, transform 0.6s ease;
}
.work-feature:hover .work-feature-media img,
a.work-feature:focus-visible .work-feature-media img {
  filter: grayscale(0);
  transform: scale(1.02);
}
.work-feature-media video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.work-feature:hover .work-feature-media video {
  opacity: 1;
}
.work-feature-body {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: var(--space-7);
  padding-top: var(--space-6);
}
.work-feature-meta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.work-feature-body h3 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  margin-bottom: var(--space-3);
}
.work-feature-body p { color: var(--muted); margin-bottom: var(--space-5); max-width: 56ch; }

@media (max-width: 720px) {
  .work-feature-body { grid-template-columns: 1fr; gap: var(--space-3); }
}

.work-more {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--divider);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ---------- Case study ---------- */
/* The reading area no longer blocks the shared grain canvas with an
   opaque background — instead, main.js's grain renderer detects this
   element (`.grain-safe-zone`) and fades blotch contribution out
   smoothly within it, so the SAME canvas, same color and opacity as the
   Approach section's alt background, shows through here too, just
   without blotches interfering with the text. The panel below is
   wider than the text column (breathing room) and fades at its own
   left/right edges via a mask, and its bottom edge extends down through
   the footer's top margin so there's no bare gap before the footer. */
.case-content {
  position: relative;
  isolation: isolate;
}
.case-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: -4rem;
  right: -4rem;
  bottom: -8rem;
  z-index: -1;
  pointer-events: none;
  background: rgba(245, 242, 235, 0.68);
  -webkit-mask-image: linear-gradient(to right, transparent, black 90px, black calc(100% - 90px), transparent);
  mask-image: linear-gradient(to right, transparent, black 90px, black calc(100% - 90px), transparent);
}
.case-header { padding-block: var(--space-7) var(--space-6); border-bottom: 1px solid var(--divider); }
.case-meta {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: var(--space-3);
}
.case-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.4rem);
  max-width: 20ch;
}

.step {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: var(--space-6);
  position: relative;
  padding-bottom: var(--space-8);
}
.step:last-child { padding-bottom: 0; }
.step-marker {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  height: 1.2rem;
}
.step-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
.step-num {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  color: var(--accent);
}
.step::before {
  content: '';
  position: absolute;
  top: 1.2rem;
  bottom: calc(-1 * var(--space-8) + 0.2rem);
  left: 3px;
  width: 1px;
  background: var(--divider-accent);
}
.step:last-child::before { display: none; }
.step-content h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  margin-bottom: var(--space-3);
}
.step-content p { color: var(--muted); }
.step-content p + p { margin-top: var(--space-3); }
.step-content ul { margin-top: var(--space-3); }
.step-content li {
  position: relative;
  padding-left: 1.4rem;
  color: var(--muted);
  margin-bottom: var(--space-2);
}
.step-content li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--accent);
}
.step-content em { color: var(--ink); font-style: italic; }
.step-content strong { color: var(--ink); }

.case-figure {
  margin: var(--space-5) 0 var(--space-6);
  border: 1px solid var(--divider);
}
.case-figure img, .case-figure video { width: 100%; }
.case-figure figcaption {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--divider);
  background: var(--bg-alt);
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--divider);
}
.tag {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--divider);
  padding: 0.5rem 0.9rem;
}

@media (max-width: 640px) {
  .step { grid-template-columns: 1fr; }
  .step::before { display: none; }
}

/* ---------- Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-6);
}
.contact-card {
  padding: var(--space-5);
  border: 1px solid var(--divider);
  transition: border-color 0.2s ease, transform 0.2s ease, opacity 0.3s ease;
  display: block;
}
.contact-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.contact-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin-bottom: var(--space-3);
}
.contact-value {
  font-family: var(--font-display);
  font-size: 1.1rem;
}
.closing-band {
  margin-top: var(--space-9);
  padding-top: var(--space-7);
  border-top: 1px solid var(--divider);
  text-align: center;
}
.closing-text {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 2.6rem);
}

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Page hero (non-home pages) ---------- */
.page-hero {
  padding-block: var(--space-8) var(--space-6);
  border-bottom: 1px solid var(--divider);
}
.page-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3.6rem);
}
.page-hero p {
  color: var(--muted);
  max-width: 48ch;
  margin-top: var(--space-3);
}