/* ============================================================
   Tasha Amanda — Portfolio
   Design system: dark editorial, pink accent, rebel + elegant.
   Tokens from design-brain/projects/portfolio.json
   ============================================================ */

/* ---------- Self-hosted display face (hero name only) ---------- */
@font-face {
  font-family: 'Barbra';
  src: url('../fonts/Barbra-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- Self-hosted body face — Glacial Indifference (SIL OFL) ---------- */
@font-face {
  font-family: 'Glacial Indifference';
  src: url('../fonts/GlacialIndifference-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Glacial Indifference';
  src: url('../fonts/GlacialIndifference-Bold.otf') format('opentype');
  font-weight: 500 700;   /* only two weights exist; emphasis (strong) maps to Bold */
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* color — 80 / 15 / 5 */
  --bg:            #080808;
  --surface:       #131110;
  --surface-raised:#1c1917;
  --border:        #292524;
  --border-bright: #3a3530;

  --text-bright:   #ece8e2;
  --text:          #b6b1a8;
  --text-dim:      #888580;
  --text-faint:    #565049;

  --accent:        #ffa6dd;   /* pink */
  --accent-bright: #ffc2e8;
  --accent-dim:    #b06a94;

  --green:         #7fae84;   /* status: shipped / live */
  --gold:          #c8a96e;   /* status badges: shipped / live (was green) */
  --red:           #d45a5a;   /* status: sparse only */

  /* type */
  --font-display: 'Glacial Indifference', 'Montserrat', -apple-system, system-ui, sans-serif;
  --font-mono:    'Glacial Indifference', -apple-system, system-ui, sans-serif;   /* labels: Glacial, uppercase + tracked (was Space Mono) */
  --font-body:    'Glacial Indifference', 'DM Sans', -apple-system, system-ui, sans-serif;

  /* motion */
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1.0);
  --t:    260ms;

  /* layout */
  --pad: 48px;
  --maxw: 1180px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 400;                /* Glacial Indifference has no 300; 400 is its lightest */
  line-height: 1.65;
  font-size: 16px;
  letter-spacing: 0.06em;          /* open, airy tracking — the feminine cue on body copy */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--accent); color: #0a0a0a; }

/* ---------- Custom cursor (fine pointers only) ---------- */
.cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999; border-radius: 50%; opacity: 0; transition: opacity var(--t) var(--ease); mix-blend-mode: difference; }
.cursor-dot  { width: 8px; height: 8px; background: var(--accent-bright); transform: translate(-50%, -50%); }
.cursor-ring { width: 28px; height: 28px; border: 1px solid var(--accent); transform: translate(-50%, -50%); transition: width var(--t) var(--ease), height var(--t) var(--ease), opacity var(--t) var(--ease); }
.cursor-ring.is-hover { width: 48px; height: 48px; }
@media (hover: hover) and (pointer: fine) {
  body.cursor-on { cursor: none; }
  body.cursor-on a, body.cursor-on button { cursor: none; }
  .cursor-dot.is-active, .cursor-ring.is-active { opacity: 1; }
}

/* ---------- Scroll progress ---------- */
.scroll-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0%; background: linear-gradient(90deg, var(--accent-dim), var(--accent-bright)); z-index: 9000; transition: width 80ms linear; }

/* ---------- Nav ---------- */
.nav { position: fixed; top: 0; left: 0; width: 100%; z-index: 8000; padding: 22px var(--pad); display: flex; align-items: center; justify-content: space-between; background: linear-gradient(to bottom, rgba(8,8,8,0.92), rgba(8,8,8,0)); backdrop-filter: blur(2px); }
.nav-brand { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-bright); }
.nav-brand .dot { color: var(--accent); }
.nav-links { display: flex; gap: 30px; align-items: center; }
.nav-link { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim); position: relative; transition: color var(--t) var(--ease); }
.nav-link::after { content: ''; position: absolute; left: 0; bottom: -5px; width: 0; height: 1px; background: var(--accent); transition: width var(--t) var(--ease); }
.nav-link:hover { color: var(--accent-bright); }
.nav-link:hover::after { width: 100%; }
.nav-toggle { display: none; background: none; border: 0; flex-direction: column; gap: 4px; }
.nav-toggle span { width: 22px; height: 1.5px; background: var(--text-bright); transition: var(--t) var(--ease); }

/* ---------- Layout helpers ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
section { padding: 96px 0; position: relative; }
.eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent); display: inline-block; margin-bottom: 22px; }
.eyebrow .idx { color: var(--text-faint); margin-right: 12px; }
.section-title { font-family: var(--font-display); font-weight: 200; font-size: clamp(30px, 4vw, 46px); line-height: 1.1; color: var(--text-bright); letter-spacing: -0.01em; margin-bottom: 18px; }
.section-title em { font-style: italic; color: var(--accent); }
.section-intro { max-width: 620px; color: var(--text); font-size: 17px; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; padding: 14px 26px; border: 1px solid var(--border-bright); color: var(--text-bright); transition: all var(--t) var(--ease); background: none; }
.btn .arr { transition: transform var(--t) var(--ease); }
.btn:hover { border-color: var(--accent); color: var(--accent-bright); }
.btn:hover .arr { transform: translateX(5px); }
.btn-primary { border-color: var(--accent-dim); background: rgba(255,166,221,0.06); }
.btn-ghost { border-color: transparent; padding-left: 0; padding-right: 0; color: var(--text-dim); }
.btn-ghost:hover { color: var(--accent-bright); }

/* ---------- Hero ---------- */
.hero { min-height: 100vh; display: flex; align-items: center; padding-top: 90px; position: relative; overflow: hidden; }
.hero-glow { position: absolute; width: 640px; height: 640px; border-radius: 50%; background: radial-gradient(circle, rgba(255,166,221,0.10), transparent 62%); pointer-events: none; transform: translate(-50%, -50%); transition: opacity 600ms var(--ease); opacity: 0.7; z-index: 0; }
.site-bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; display: block; pointer-events: none; }
.hero-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 0; position: relative; z-index: 1; width: 100%; }
.hero-left { padding-right: 56px; }
.hero-right { padding-left: 56px; border-left: 1px solid var(--border); display: flex; flex-direction: column; justify-content: center; }
.hero-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 30px; }
.hero-eyebrow .blink { color: var(--green); animation: blink 2.4s steps(1) infinite; }
@keyframes blink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: 0.25; } }
/* Hero name — self-hosted Barbra display face, animated by the JS scramble. */
.hero-name { font-family: 'Barbra', var(--font-display); font-weight: 400; font-size: clamp(52px, 8.5vw, 120px); line-height: 0.98; letter-spacing: 0; color: var(--accent); margin-bottom: 28px; }
.hero-name .ln { display: block; }
.hero-name .char { display: inline-block; white-space: pre; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.hero-role { font-family: var(--font-display); font-weight: 300; font-size: clamp(19px, 2.4vw, 26px); line-height: 1.35; color: var(--text); margin-bottom: 22px; max-width: 30ch; }
.hero-role em { font-style: italic; color: var(--accent-bright); }
.hero-positioning { font-size: 16px; color: var(--text-dim); max-width: 46ch; margin-bottom: 38px; }
.hero-cta { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }

/* stat boxes */
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); transform-origin: center; will-change: transform; animation: stat-drift 17s ease-in-out infinite; }
/* Ambient wind-float: the whole grid sways slowly around its own axis and returns,
   with uneven waypoints so it reads as a breeze, not a mechanical loop. */
@keyframes stat-drift {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
  22%  { transform: translate3d(2px, -6px, 0) rotate(0.5deg); }
  48%  { transform: translate3d(-2px, 4px, 0) rotate(-0.4deg); }
  74%  { transform: translate3d(1px, -3px, 0) rotate(0.25deg); }
  100% { transform: translate3d(0, 0, 0) rotate(0deg); }
}
.stat { background: var(--bg); padding: 26px 22px; transition: background var(--t) var(--ease); }
.stat-num { font-family: var(--font-display); font-weight: 200; font-size: 34px; color: var(--text-bright); line-height: 1; margin-bottom: 12px; }
.stat-num .u { font-size: 17px; color: var(--accent); }
.stat.flick .stat-num { color: var(--accent-bright); }
.stat-label { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); line-height: 1.5; }

/* ---------- Selected Work ---------- */
.work-list { border-top: 1px solid var(--border); margin-top: 12px; }
.work-row { display: grid; grid-template-columns: 56px 1fr auto; gap: 24px; align-items: start; padding: 34px 20px 34px 16px; border-bottom: 1px solid var(--border); position: relative; transition: background var(--t) var(--ease); }
.work-row::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent); transform: scaleY(0); transform-origin: bottom; transition: transform var(--t) var(--ease); }
.work-row:hover { background: linear-gradient(90deg, rgba(255,166,221,0.04), transparent 70%); }
.work-row:hover::before { transform: scaleY(1); transform-origin: top; }
.work-index { font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); padding-top: 6px; }
.work-name { font-family: var(--font-display); font-weight: 300; font-size: clamp(24px, 3vw, 34px); color: var(--text-bright); line-height: 1.1; margin-bottom: 8px; letter-spacing: -0.01em; }
.work-name .role { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-left: 14px; vertical-align: middle; }
.work-oneliner { color: var(--text); font-size: 16px; max-width: 56ch; margin-bottom: 16px; }
.work-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tag { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); border: 1px solid var(--border); padding: 5px 10px; transition: all var(--t) var(--ease); }
.work-row:hover .tag { border-color: var(--border-bright); }
.tag:hover { color: var(--accent-bright); border-color: var(--accent-dim); }
.work-right { display: flex; flex-direction: column; align-items: flex-end; gap: 16px; padding-top: 4px; }
.work-year { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); white-space: nowrap; }
.status { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; }
.status--live::before, .status--shipped::before { background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.status--live, .status--shipped { color: var(--gold); }
.status--building::before { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.status--building { color: var(--accent); }
.work-link { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); display: inline-flex; gap: 8px; align-items: center; transition: color var(--t) var(--ease); white-space: nowrap; }
.work-link .arr { transition: transform var(--t) var(--ease); }
.work-row:hover .work-link { color: var(--accent-bright); }
.work-row:hover .work-link .arr { transform: translateX(4px); }
.work-link.muted { color: var(--text-faint); }

/* ---------- Process / How I work ---------- */
.process-flow { display: flex; flex-wrap: wrap; gap: 10px 6px; align-items: center; margin: 36px 0 48px; }
.process-step { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); border: 1px solid var(--border); padding: 9px 13px; transition: all var(--t) var(--ease); }
.process-step:hover { color: var(--accent-bright); border-color: var(--accent-dim); transform: translateY(-2px); }
.process-step.key { color: var(--accent); border-color: var(--accent-dim); }
.process-arrow { color: var(--text-faint); font-size: 12px; }
.process-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); }
.process-card { background: var(--bg); padding: 30px 26px; transition: background var(--t) var(--ease); }
.process-card:hover { background: var(--surface); }
.process-card h4 { font-family: var(--font-display); font-weight: 300; font-size: 19px; color: var(--text-bright); margin-bottom: 12px; }
.process-card h4 .n { font-family: var(--font-mono); font-size: 11px; color: var(--accent); margin-right: 10px; }
.process-card p { font-size: 14.5px; color: var(--text-dim); }

/* ---------- Experience ---------- */
.exp-row { display: grid; grid-template-columns: 200px 1fr; gap: 36px; padding: 38px 0; border-bottom: 1px solid var(--border); }
.exp-row:first-child { border-top: 1px solid var(--border); }
.exp-period { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); }
.exp-loc { display: block; color: var(--text-faint); margin-top: 8px; font-size: 10px; }
.exp-role { font-family: var(--font-display); font-weight: 300; font-size: 24px; color: var(--text-bright); margin-bottom: 4px; }
.exp-company { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 18px; }
.exp-company a { border-bottom: 1px solid transparent; transition: border var(--t) var(--ease); }
.exp-company a:hover { border-color: var(--accent-dim); }
.exp-points { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.exp-points li { padding-left: 20px; position: relative; color: var(--text); font-size: 15.5px; }
.exp-points li::before { content: '→'; position: absolute; left: 0; color: var(--accent-dim); }

/* ---------- About ---------- */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.about-lead { font-family: var(--font-display); font-weight: 200; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.35; color: var(--text-bright); letter-spacing: -0.01em; }
.about-lead em { font-style: italic; color: var(--accent); }

/* Animated accent highlights: Barbra display face, settling to pink.
   'em.scramble-word' outranks the gold '.section-title em' / '.about-lead em' rules above. */
em.scramble-word { font-family: 'Barbra', var(--font-display); font-style: normal; color: #ffa6dd; letter-spacing: 0; }
.about-body p { margin-bottom: 18px; color: var(--text); }
.about-body p:last-child { margin-bottom: 0; }

/* ---------- Contact / footer ---------- */
.contact { text-align: center; padding: 120px 0; }
.contact .section-title { margin-bottom: 30px; }
.contact-btn { font-size: 13px; padding: 20px 42px; letter-spacing: 0.2em; }
.contact-sub { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); margin-top: 28px; }
footer { border-top: 1px solid var(--border); padding: 36px var(--pad); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
footer .f-item { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); }
footer .f-links { display: flex; gap: 24px; }
footer .f-links a { color: var(--text-dim); transition: color var(--t) var(--ease); }
footer .f-links a:hover { color: var(--accent-bright); }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: 80ms; }
.reveal.d2 { transition-delay: 160ms; }
.reveal.d3 { transition-delay: 240ms; }

/* ============================================================
   CASE STUDY PAGES
   ============================================================ */
.cs-back { position: fixed; top: 22px; left: var(--pad); z-index: 8001; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); display: inline-flex; gap: 9px; align-items: center; transition: color var(--t) var(--ease); }
.cs-back:hover { color: var(--accent-bright); }
.cs-back .arr { transition: transform var(--t) var(--ease); }
.cs-back:hover .arr { transform: translateX(-4px); }

.cs-hero { padding: 168px 0 70px; border-bottom: 1px solid var(--border); }
.cs-kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin-bottom: 26px; }
.cs-title { font-family: var(--font-display); font-weight: 200; font-size: clamp(40px, 7vw, 84px); line-height: 0.98; letter-spacing: -0.02em; color: var(--text-bright); margin-bottom: 24px; }
.cs-tagline { font-family: var(--font-display); font-weight: 300; font-size: clamp(20px, 2.6vw, 28px); line-height: 1.4; color: var(--text); max-width: 30ch; }
.cs-tagline em { font-style: italic; color: var(--accent-bright); }

.cs-meta-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); margin-top: 56px; }
.cs-meta { background: var(--bg); padding: 22px 20px; }
.cs-meta .k { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 10px; }
.cs-meta .v { font-size: 14px; color: var(--text-bright); line-height: 1.4; }
.cs-meta .v .status { font-size: 9.5px; }

.cs-section { padding: 74px 0; border-bottom: 1px solid var(--border); }
.cs-section:last-of-type { border-bottom: 0; }
.cs-layout { display: grid; grid-template-columns: 240px 1fr; gap: 48px; }
.cs-layout .lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); padding-top: 6px; }
.cs-body { max-width: 720px; }
.cs-body h3 { font-family: var(--font-display); font-weight: 300; font-size: clamp(26px, 3.4vw, 38px); color: var(--text-bright); letter-spacing: -0.01em; margin-bottom: 26px; line-height: 1.15; }
.cs-body h4 { font-family: var(--font-display); font-weight: 400; font-size: 20px; color: var(--text-bright); margin: 34px 0 14px; }
.cs-body p { margin-bottom: 18px; color: var(--text); font-size: 16.5px; }
.cs-body p:last-child { margin-bottom: 0; }
.cs-body strong { color: var(--text-bright); font-weight: 500; }
.cs-body em { color: var(--accent-bright); font-style: italic; }
.cs-body a.inline { color: var(--accent); border-bottom: 1px solid var(--accent-dim); }
.cs-lead { font-family: var(--font-display); font-weight: 300; font-size: clamp(20px, 2.5vw, 26px) !important; line-height: 1.4; color: var(--text-bright) !important; margin-bottom: 28px !important; }

.cs-list { list-style: none; display: flex; flex-direction: column; gap: 14px; margin: 8px 0 24px; }
.cs-list li { padding-left: 24px; position: relative; color: var(--text); }
.cs-list li::before { content: '→'; position: absolute; left: 0; color: var(--accent-dim); }
.cs-list li strong { color: var(--text-bright); }

.cs-quote { border-left: 2px solid var(--accent); padding: 6px 0 6px 28px; margin: 30px 0; font-family: var(--font-display); font-weight: 300; font-style: italic; font-size: clamp(20px, 2.6vw, 26px); line-height: 1.4; color: var(--text-bright); }
.cs-quote .who { display: block; font-family: var(--font-mono); font-style: normal; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); margin-top: 16px; }

.cs-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); margin: 28px 0; }
.cs-cards.three { grid-template-columns: 1fr 1fr 1fr; }
.cs-card { background: var(--bg); padding: 26px 24px; transition: background var(--t) var(--ease); }
.cs-card:hover { background: var(--surface); }
.cs-card .n { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.cs-card h5 { font-family: var(--font-display); font-weight: 400; font-size: 17px; color: var(--text-bright); margin-bottom: 8px; }
.cs-card p { font-size: 14px; color: var(--text-dim); margin: 0; }

/* persona cards */
.persona { background: var(--surface); border: 1px solid var(--border); padding: 28px; margin: 22px 0; }
.persona .pname { font-family: var(--font-display); font-weight: 400; font-size: 20px; color: var(--text-bright); }
.persona .pmeta { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin: 6px 0 16px; }
.persona .pquote { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: 18px; color: var(--text); line-height: 1.4; }

/* data table */
.cs-table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 14.5px; }
.cs-table th { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border-bright); }
.cs-table td { padding: 14px; border-bottom: 1px solid var(--border); color: var(--text); vertical-align: top; }
.cs-table td strong { color: var(--text-bright); }
.cs-table tr:hover td { background: rgba(255,166,221,0.03); }

/* flow diagram (mono ascii-ish) */
.cs-flow { background: var(--surface); border: 1px solid var(--border); padding: 28px; margin: 26px 0; font-family: 'Space Mono', ui-monospace, monospace; font-size: 12.5px; line-height: 1.9; color: var(--text-dim); overflow-x: auto; }
.cs-flow .step { color: var(--text-bright); }
.cs-flow .aha { color: var(--accent-bright); }
.cs-flow .arr { color: var(--accent-dim); }

/* status banner */
.cs-status { background: linear-gradient(120deg, rgba(200,169,110,0.06), transparent 70%); border: 1px solid var(--border); border-left: 2px solid var(--gold); padding: 24px 28px; margin: 26px 0; }
.cs-status.building { border-left-color: var(--accent); background: linear-gradient(120deg, rgba(255,166,221,0.06), transparent 70%); }
.cs-status .lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 10px; }
.cs-status p { margin: 0; color: var(--text); }

/* next project */
.cs-next { display: flex; justify-content: space-between; align-items: center; padding: 60px var(--pad); border-top: 1px solid var(--border); flex-wrap: wrap; gap: 20px; }
.cs-next .lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); }
.cs-next a { font-family: var(--font-display); font-weight: 200; font-size: clamp(28px, 4vw, 46px); color: var(--text-bright); transition: color var(--t) var(--ease); }
.cs-next a:hover { color: var(--accent-bright); }

/* ============================================================
   DEVICE MOCKUPS  (real product screenshots)
   ============================================================ */
.showcase { padding: 60px 0; border-bottom: 1px solid var(--border); background: radial-gradient(120% 90% at 50% 0%, rgba(255,166,221,0.06), transparent 60%); }
.showcase.dark { background: radial-gradient(120% 90% at 50% 0%, rgba(99,102,241,0.08), transparent 62%); }

.mockup-browser { border: 1px solid var(--border-bright); border-radius: 12px; overflow: hidden; background: var(--surface); box-shadow: 0 50px 90px -50px rgba(0,0,0,0.85); max-width: 940px; margin: 0 auto; transition: transform var(--t) var(--ease); }
.mockup-browser:hover { transform: translateY(-4px); }
.mockup-browser .bar { display: flex; align-items: center; gap: 8px; padding: 11px 16px; background: var(--surface-raised); border-bottom: 1px solid var(--border); }
.mockup-browser .bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--border-bright); }
.mockup-browser .bar .url { margin-left: 14px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--text-dim); background: var(--bg); padding: 6px 14px; border-radius: 999px; }
.mockup-browser img { width: 100%; display: block; }
.mockup-cap { text-align: center; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); margin-top: 20px; }
.mockup-cap a { color: var(--accent-dim); border-bottom: 1px solid transparent; }
.mockup-cap a:hover { border-color: var(--accent-dim); }

/* phones */
.phone-grid { display: flex; gap: 30px; justify-content: center; align-items: flex-end; flex-wrap: wrap; }
.mockup-phone { width: 244px; border: 9px solid #15120f; border-radius: 40px; background: #15120f; box-shadow: 0 50px 90px -45px rgba(0,0,0,0.9); position: relative; overflow: hidden; transition: transform var(--t) var(--ease); }
.mockup-phone.raise { transform: translateY(-26px); }
.mockup-phone:hover { transform: translateY(-30px); }
.mockup-phone::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 40%; height: 17px; background: #15120f; border-radius: 0 0 14px 14px; z-index: 2; }
.mockup-phone img { width: 100%; display: block; border-radius: 30px; }
.mockup-phone .ph-empty { aspect-ratio: 9 / 19.5; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; padding: 26px; border-radius: 30px; background: linear-gradient(165deg, var(--surface-raised), var(--surface)); }
.ph-empty .pe-name { font-family: var(--font-display); font-weight: 300; font-size: 18px; color: var(--text-bright); }
.ph-empty .pe-note { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); line-height: 1.6; }

/* design-system specimen (Closetly-style swatch row) */
.specimen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); margin: 28px 0; }
.swatch { background: var(--bg); }
.swatch .chip { height: 92px; }
.swatch .meta { padding: 16px 18px; }
.swatch .nm { font-family: var(--font-display); font-weight: 400; font-size: 15px; color: var(--text-bright); }
.swatch .hx { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--text-dim); margin-top: 5px; }
@media (max-width: 600px) { .specimen { grid-template-columns: 1fr; } }

/* ============================================================
   PROJECT WORLDS — each case study its own brand, one shell.
   Tokens cascade automatically: cursor, scroll bar, links,
   borders, emphasis all re-theme from these overrides.
   ============================================================ */

/* ruwth — calm clinical light · sage */
body.w-ruwth {
  --bg: #faf8f5; --surface: #ffffff; --surface-raised: #f1ece6;
  --border: #e7ded3; --border-bright: #d8cdbf;
  --text-bright: #2c2723; --text: #5d554b; --text-dim: #8d8377; --text-faint: #b3a99b;
  --accent: #d4577a; --accent-bright: #e8627c; --accent-dim: #c98f9b;
}
body.w-ruwth ::selection { background: #e8627c; color: #fff; }
body.w-ruwth .showcase { background: radial-gradient(120% 90% at 50% 0%, rgba(232,98,124,0.08), transparent 60%); }

/* Brain OS — pure black · indigo → cyan → violet */
body.w-brainos {
  --bg: #000000; --surface: #0b0b12; --surface-raised: #13131d;
  --border: rgba(255,255,255,0.07); --border-bright: rgba(255,255,255,0.15);
  --text-bright: #e7e7f1; --text: #a6a6bb; --text-dim: #70708a; --text-faint: #4c4c63;
  --accent: #6366f1; --accent-bright: #22b8d8; --accent-dim: #4f46c9;
}
body.w-brainos .cs-title em, body.w-brainos .cs-tagline em, body.w-brainos .cs-body em {
  background: linear-gradient(135deg, #6366f1, #06b6d4, #8b5cf6);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}

/* Portfolio-matched case studies (Gigly, Bitmask, DIBA): default pink world +
   Barbra display title, so they read like the landing. ruwth & Brain OS keep
   their own worlds above. */
body.w-pf .cs-title { font-family: 'Barbra', var(--font-display); font-weight: 400; color: var(--accent); letter-spacing: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  :root { --pad: 22px; }
  .nav-links { position: fixed; inset: 0; background: var(--bg); flex-direction: column; justify-content: center; gap: 34px; transform: translateX(100%); transition: transform 360ms var(--ease); }
  .nav-links.open { transform: none; }
  .nav-link { font-size: 13px; }
  .nav-toggle { display: flex; z-index: 8002; }
  .nav-toggle.open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2) { opacity: 0; }
  .nav-toggle.open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .hero-left { padding-right: 0; }
  .hero-right { padding-left: 0; border-left: 0; border-top: 1px solid var(--border); padding-top: 40px; }

  .work-row { grid-template-columns: 32px 1fr; gap: 16px; }
  .work-right { grid-column: 2; flex-direction: row; align-items: center; justify-content: space-between; width: 100%; }

  .process-grid { grid-template-columns: 1fr; }
  .exp-row { grid-template-columns: 1fr; gap: 16px; }
  .about-grid { grid-template-columns: 1fr; gap: 32px; }
  .cs-meta-grid { grid-template-columns: 1fr 1fr; }
  .cs-layout { grid-template-columns: 1fr; gap: 18px; }
  .cs-layout .lbl { padding-top: 0; }
  .cs-cards, .cs-cards.three { grid-template-columns: 1fr; }
  .cs-back { position: static; display: inline-flex; margin: 100px var(--pad) 0; }
}

@media (max-width: 480px) {
  .stat-grid { grid-template-columns: 1fr; }
  .cs-meta-grid { grid-template-columns: 1fr; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  .cursor-dot, .cursor-ring { display: none; }
  body.cursor-on { cursor: auto; }
}