/* =========================================================================
   Lieze Jackson — Portfolio
   Dark-first, typographic. Space Grotesk + Space Mono.
   Palette derived from the brand mark, tuned for a warm near-black base.
   Light theme available via [data-theme="light"].
   ========================================================================= */

:root {
  /* ---- Dark theme (default) ---- */
  --bg:         #15111a;
  --surface:    #1e1824;
  --surface-2:  #271f2e;
  --text:       #f1ebe8;
  --text-soft:  #b7adb5;
  --text-mute:  #948a98;
  --accent:     #e493a8;   /* lifted rose — accent text / underlines on dark */
  --accent-2:   #8a2342;   /* wine — solid fills */
  --on-accent:  #fdf6f4;
  --sand:       #d9c7a3;
  --blue:       #aab7c7;
  --blush:      #f0dddd;
  --line:       rgba(241,235,232,.14);
  --line-soft:  rgba(241,235,232,.07);
  --shadow:     0 30px 80px rgba(0,0,0,.5);
  color-scheme: dark;

  /* ---- Type ---- */
  --display: "Space Grotesk", system-ui, -apple-system, sans-serif;
  --mono:    "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fs-mono:  .72rem;
  --fs-sm:    .9rem;
  --fs-body:  1.06rem;
  --fs-lead:  1.2rem;
  --fs-h4:    1.2rem;
  --fs-h3:    clamp(1.5rem, 2.4vw, 2rem);
  --fs-h2:    clamp(1.65rem, 3vw, 2.3rem);
  --fs-hero:  clamp(2.3rem, 5.6vw, 4.75rem);

  /* ---- Layout ---- */
  --wrap: 1240px;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --radius: 12px;
  --radius-lg: 20px;
  --ease: cubic-bezier(.22,.7,.2,1);
}

html[data-theme="light"] {
  --bg:         #faf7f2;
  --surface:    #ffffff;
  --surface-2:  #f2ece3;
  --text:       #241722;
  --text-soft:  #625560;
  --text-mute:  #5c6a7a;
  --accent:     #7a1a36;
  --accent-2:   #7a1a36;
  --on-accent:  #fdf6f4;
  --sand:       #a98a52;
  --blue:       #566579;
  --blush:      #b06b7e;
  --line:       rgba(36,23,34,.16);
  --line-soft:  rgba(36,23,34,.08);
  --shadow:     0 30px 80px rgba(36,23,34,.22);
  color-scheme: light;
}

/* ---------------------------------------------------------------- Reset */
*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}
body {
  font-family: var(--display);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background .5s var(--ease), color .5s var(--ease);
}
img { max-width:100%; height:auto; display:block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
::selection { background: var(--accent-2); color: var(--on-accent); }

/* ------------------------------------------------------------- Helpers */
.wrap { width:100%; max-width: var(--wrap); margin-inline:auto; padding-inline: var(--gutter); }
.mono { font-family: var(--mono); }
.eyebrow {
  font-family: var(--mono); font-size: var(--fs-mono);
  letter-spacing:.22em; text-transform:uppercase; color: var(--accent);
}
.eyebrow--mute { color: var(--text-mute); }
.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; }
.skip-link { position:absolute; left:1rem; top:-4rem; z-index:300; background: var(--text); color: var(--bg); padding:.7rem 1.1rem; border-radius:8px; transition: top .2s var(--ease); }
.skip-link:focus { top:1rem; }
:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

/* --------------------------------------------------------------- Buttons */
.btn {
  display:inline-flex; align-items:center; gap:.55em;
  font-family: var(--mono); font-size: var(--fs-sm); letter-spacing:.02em;
  padding:.9rem 1.5rem; border-radius:999px;
  transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn .arrow { transition: transform .3s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }
.btn--primary { background: var(--accent-2); color: var(--on-accent); }
.btn--primary:hover { transform: translateY(-2px); filter: brightness(1.08); }
.btn--ghost { border:1.5px solid var(--line); color: var(--text); }
.btn--ghost:hover { border-color: var(--text); transform: translateY(-2px); }

/* --------------------------------------------------------------- Header */
.site-header {
  position: sticky; top:0; z-index:100;
  backdrop-filter: saturate(140%) blur(12px);
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background .5s var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--line); }
.nav { display:flex; align-items:center; justify-content:space-between; height:74px; gap:1rem; }
.brand { display:flex; align-items:center; gap:.7rem; }
.brand-name { font-family: var(--mono); font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700; }
.brand-role { display:block; font-family:var(--mono); font-size:.6rem; letter-spacing:.16em; color: var(--text-mute); text-transform:uppercase; font-weight:400; }
.nav-links { display:flex; align-items:center; gap:2.1rem; }
.nav-links a { font-family: var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color: var(--text-mute); transition: color .2s var(--ease); position:relative; }
.nav-links a::after { content:""; position:absolute; left:0; bottom:-5px; height:1.5px; width:0; background: var(--accent); transition: width .28s var(--ease); }
.nav-links a:hover, .nav-links a.active { color: var(--text); }
.nav-links a:hover::after, .nav-links a.active::after { width:100%; }
.nav-cta { display:flex; align-items:center; gap:1.1rem; }

/* theme toggle */
.theme-toggle {
  display:inline-flex; align-items:center; gap:.4rem; font-family:var(--mono);
  font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color: var(--text-mute);
  border:1px solid var(--line); border-radius:999px; padding:.4rem .7rem; transition: border-color .2s, color .2s;
}
.theme-toggle:hover { color: var(--text); border-color: var(--text); }
.theme-toggle .ico { width:14px; height:14px; }

.menu-toggle { display:none; }

/* --------------------------------------------------------------- Hero */
.hero { padding: clamp(3rem,10vw,7.5rem) 0 clamp(2.5rem,6vw,4.5rem); position:relative; }
.hero .eyebrow { display:block; margin-bottom:1.8rem; }
.hero h1 {
  font-weight: 500; font-size: var(--fs-hero); line-height:.96; letter-spacing:-.03em;
  text-transform: uppercase; max-width: 14ch;
}
.hero h1 .thin { font-weight:300; }
.hero h1 .accent { color: var(--accent); }
.hero-lead { font-size: var(--fs-lead); color: var(--text-soft); max-width: 48ch; margin-top:2rem; line-height:1.5; font-weight:400; }
.hero-actions { display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2.4rem; }
.hero-meta { display:flex; flex-wrap:wrap; gap:1.4rem 2.6rem; margin-top:3.2rem; padding-top:1.7rem; border-top:1px solid var(--line); }
.hero-meta div { display:flex; flex-direction:column; gap:.3rem; }
.hero-meta dt { font-family:var(--mono); font-size:var(--fs-mono); letter-spacing:.14em; text-transform:uppercase; color: var(--text-mute); }
.hero-meta dd { font-size:.96rem; }

/* --------------------------------------------------------- Section frame */
.section { padding: clamp(5rem,11vw,9rem) 0; }
.section-head { display:flex; align-items:baseline; justify-content:space-between; gap:1rem 2rem; flex-wrap:wrap; margin-bottom: clamp(2.4rem,4vw,3.6rem); padding-top:1.3rem; border-top:1px solid var(--line-soft); }
.section-head h2 { font-family:var(--mono); font-weight:400; font-size:var(--fs-mono); letter-spacing:.24em; line-height:1; text-transform:uppercase; color: var(--text-mute); }
.section-head .meta { display:none; }
.lead-note { max-width:62ch; color: var(--text-soft); font-size: var(--fs-lead); line-height:1.5; }

/* --------------------------------------------------------- Featured work */
.features { display:flex; flex-direction:column; gap: clamp(3rem,7vw,6rem); }
.feature { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem,4vw,4rem); align-items:center; }
.feature--flip .feature-media { order:2; }
.feature-media {
  position:relative; display:block; border-radius: var(--radius-lg); overflow:hidden;
  background: var(--surface); border:1px solid var(--line-soft); aspect-ratio: 4/3;
}
.feature-media img { width:100%; height:100%; object-fit:cover; object-position: top center; transition: transform .8s var(--ease); }
.feature-media:hover img { transform: scale(1.04); }
.feature-num { position:absolute; top:1rem; left:1.1rem; z-index:2; font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; color: var(--on-accent); background: color-mix(in srgb, var(--bg) 55%, transparent); backdrop-filter: blur(4px); padding:.35rem .6rem; border-radius:999px; }
.feature-body .kicker { font-family:var(--mono); font-size:var(--fs-mono); letter-spacing:.16em; text-transform:uppercase; color: var(--accent); }
.feature-body h3 { font-weight:500; font-size: var(--fs-h3); letter-spacing:-.02em; text-transform:uppercase; line-height:1; margin:.9rem 0 1rem; }
.feature-body p { color: var(--text-soft); max-width:46ch; }
.feature-tags { display:flex; flex-wrap:wrap; gap:.5rem; margin:1.3rem 0 1.6rem; }
.feature-tags span { font-family:var(--mono); font-size:.66rem; letter-spacing:.04em; text-transform:uppercase; padding:.4rem .7rem; border:1px solid var(--line); border-radius:999px; color: var(--text-mute); }
.feature-link { display:inline-flex; align-items:center; gap:.5em; font-family:var(--mono); font-size:.82rem; text-transform:uppercase; letter-spacing:.06em; border-bottom:1.5px solid var(--accent); padding-bottom:3px; transition: gap .25s var(--ease); }
.feature-link:hover { gap:.9em; }
@media (max-width:820px){
  .feature { grid-template-columns:1fr; gap:1.4rem; }
  .feature--flip .feature-media { order:0; }
}

/* --------------------------------------------------------- Work index (grid + list) */
.index-controls { display:flex; align-items:center; gap:.5rem; }
.index-controls button { font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color: var(--text-mute); padding:.45rem .8rem; border:1px solid var(--line); border-radius:999px; transition: color .2s, border-color .2s, background .2s; }
.index-controls button[aria-pressed="true"] { color: var(--text); border-color: var(--text); }

/* list view */
.index.is-list { border-top:1px solid var(--line); }
.is-list .index-item {
  display:grid; grid-template-columns: 5.5rem 1fr 13rem 8rem 1.6rem; align-items:center; gap:1rem;
  width:100%; text-align:left; padding:1.5rem .4rem; border-bottom:1px solid var(--line);
  color: var(--text); position:relative; transition: padding-left .3s var(--ease), background .3s var(--ease);
}
.is-list .index-item:hover { padding-left:1.2rem; background: var(--surface); }
.is-list .ii-media { display:none; }
.ii-year { font-family:var(--mono); font-size:.82rem; color: var(--text-mute); }
.ii-title { font-weight:500; font-size: clamp(1.3rem,2.6vw,1.9rem); letter-spacing:-.02em; text-transform:uppercase; line-height:1; }
.ii-type, .ii-role { font-family:var(--mono); font-size:.7rem; letter-spacing:.05em; text-transform:uppercase; color: var(--text-mute); }
.ii-arrow { justify-self:end; color: var(--accent); transition: transform .3s var(--ease); }
.is-list .index-item:hover .ii-arrow { transform: translateX(4px); }

/* grid view */
.index.is-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(1rem,2.5vw,1.8rem); border-top:none; }
.is-grid .index-item { display:flex; flex-direction:column; text-align:left; border:none; padding:0; color: var(--text); }
.is-grid .ii-media { display:block; border-radius: var(--radius); overflow:hidden; aspect-ratio:4/3; background: var(--surface); border:1px solid var(--line-soft); margin-bottom:1rem; }
.is-grid .ii-media img { width:100%; height:100%; object-fit:cover; transition: transform .7s var(--ease); }
.is-grid .index-item:hover .ii-media img { transform: scale(1.05); }
.is-grid .ii-year { order:-1; margin-bottom:.5rem; }
.is-grid .ii-title { font-size:1.25rem; margin-bottom:.35rem; }
.is-grid .ii-role { display:none; }
.is-grid .ii-arrow { display:none; }
@media (max-width:860px){ .index.is-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:720px){
  .is-list .index-item { grid-template-columns: 3.4rem 1fr 1.4rem; row-gap:.3rem; }
  .is-list .ii-type { grid-column:2/3; } .is-list .ii-role { display:none; }
  .index.is-grid { grid-template-columns:1fr; }
}

/* --------------------------------------------------------- About */
.about-grid { display:grid; grid-template-columns: 290px 1fr; gap: clamp(2rem,5vw,4.5rem); align-items:start; }
.about-portrait { border-radius: var(--radius-lg); overflow:hidden; border:1px solid var(--line); position:relative; }
.about-portrait img { width:100%; filter: grayscale(1) contrast(1.02); }
.about-portrait figcaption { position:absolute; bottom:0; left:0; right:0; padding:1.4rem 1.2rem .9rem; font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color: var(--blush); background: linear-gradient(to top, color-mix(in srgb, var(--bg) 92%, transparent), transparent); }
.about-body p { font-size:1.16rem; line-height:1.6; margin-bottom:1.3rem; max-width:56ch; color: var(--text-soft); }
.about-body p.big { font-size: clamp(1.5rem,2.8vw,2.1rem); line-height:1.3; letter-spacing:-.02em; color: var(--text); max-width:22ch; }
.about-body strong { color: var(--text); font-weight:500; }
.skills-tags { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.8rem; }
.skills-tags span { font-family:var(--mono); font-size:.68rem; letter-spacing:.03em; padding:.45rem .8rem; border:1px solid var(--line); border-radius:999px; color: var(--text-mute); }
@media (max-width:820px){ .about-grid{ grid-template-columns:1fr; } .about-portrait{ max-width:240px; } }

/* --------------------------------------------------------- Process */
.process-grid { display:grid; grid-template-columns: repeat(2,1fr); gap: clamp(1.5rem,3vw,2.5rem); }
.process-step { border-top:1px solid var(--line); padding-top:1.3rem; }
.process-step .p-n { font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; color: var(--accent); text-transform:uppercase; display:block; margin-bottom:.9rem; }
.process-step h4 { font-weight:500; font-size:var(--fs-h4); text-transform:uppercase; letter-spacing:-.01em; margin-bottom:.6rem; }
.process-step p { color: var(--text-soft); font-size:.98rem; max-width:44ch; }
.process-ai { margin-top: clamp(2rem,4vw,3rem); background: var(--surface); border:1px solid var(--line-soft); border-radius: var(--radius-lg); padding: clamp(1.6rem,3vw,2.6rem); }
.process-ai .eyebrow { display:block; margin-bottom:1rem; }
.process-ai h4 { font-weight:500; font-size: var(--fs-h3); text-transform:uppercase; letter-spacing:-.02em; max-width:20ch; line-height:1.02; }
.process-ai p { color: var(--text-soft); max-width:64ch; margin-top:1rem; }
.process-ai .tools { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.4rem; }
.process-ai .tools span { font-family:var(--mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; padding:.4rem .75rem; border:1px solid var(--line); border-radius:999px; color: var(--text-mute); }
@media (max-width:720px){ .process-grid{ grid-template-columns:1fr; } }

/* --------------------------------------------------------- Experience / timeline */
.xp { border-top:1px solid var(--line); }
.xp-item { display:grid; grid-template-columns: 12rem 1fr; gap: clamp(1rem,3vw,3rem); padding: clamp(1.6rem,3vw,2.4rem) 0; border-bottom:1px solid var(--line); }
.xp-when { font-family:var(--mono); font-size:.76rem; letter-spacing:.04em; color: var(--text-mute); }
.xp-when b { display:block; color: var(--accent); font-weight:400; margin-top:.3rem; }
.xp-role h4 { font-weight:500; font-size: var(--fs-h4); letter-spacing:-.01em; }
.xp-role .org { font-family:var(--mono); font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; color: var(--text); margin:.35rem 0 .9rem; }
.xp-role p { color: var(--text-soft); font-size:.98rem; max-width:60ch; margin-bottom:.9rem; }
.xp-role ul { color: var(--text-soft); font-size:.95rem; padding-left:1.1rem; margin:.6rem 0; }
.xp-role li { margin-bottom:.45rem; }
.xp-role .tags { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1rem; }
.xp-role .tags span { font-family:var(--mono); font-size:.64rem; text-transform:uppercase; letter-spacing:.04em; padding:.35rem .65rem; border:1px solid var(--line); border-radius:999px; color: var(--text-mute); }
@media (max-width:720px){ .xp-item{ grid-template-columns:1fr; gap:.6rem; } }

/* expandable earlier experience */
.earlier { margin-top:1.6rem; }
.earlier summary { font-family:var(--mono); font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color: var(--text-mute); cursor:pointer; padding:1rem 0; list-style:none; display:flex; align-items:center; gap:.6rem; border-bottom:1px solid var(--line); transition: color .2s; }
.earlier summary:hover { color: var(--text); }
.earlier summary::-webkit-details-marker { display:none; }
.earlier summary .chev { transition: transform .3s var(--ease); }
.earlier[open] summary .chev { transform: rotate(90deg); }
.earlier-row { display:grid; grid-template-columns: 8rem 1fr auto; gap:1rem; padding:.9rem 0; border-bottom:1px solid var(--line-soft); font-size:.92rem; }
.earlier-row .yr { font-family:var(--mono); font-size:.74rem; color: var(--text-mute); }
.earlier-row .r-org { font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color: var(--text-mute); text-align:right; }
@media (max-width:600px){ .earlier-row{ grid-template-columns: 5rem 1fr; } .earlier-row .r-org{ grid-column:2; text-align:left; } }

/* --------------------------------------------------------- Education + Recognition */
.two-col { display:grid; grid-template-columns:1fr 1fr; gap: clamp(2rem,5vw,4.5rem); }
.mini-head { font-family:var(--mono); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color: var(--text-mute); border-bottom:1px solid var(--line); padding-bottom:.8rem; margin-bottom:1.4rem; }
.stack-item { padding:1rem 0; border-bottom:1px solid var(--line-soft); }
.stack-item h5 { font-weight:500; font-size:1.05rem; letter-spacing:-.01em; }
.stack-item .sub { font-family:var(--mono); font-size:.74rem; color: var(--text-mute); margin-top:.3rem; letter-spacing:.03em; }
.stack-item.award h5::before { content:"★"; color: var(--sand); margin-right:.5rem; }
@media (max-width:720px){ .two-col{ grid-template-columns:1fr; } }

/* --------------------------------------------------------- Contact */
.contact-grid { display:grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem,5vw,5rem); align-items:start; }
.contact-lead h2 { font-weight:500; font-size: clamp(1.55rem,2.6vw,2.15rem); letter-spacing:-.02em; text-transform:uppercase; line-height:1.05; max-width:16ch; }
.contact-lead p { color: var(--text-soft); font-size: var(--fs-lead); margin:1.6rem 0 2rem; max-width:42ch; }
.copy-email { display:inline-flex; align-items:center; gap:.7rem; font-family:var(--mono); font-size:.92rem; padding:.9rem 1.2rem; border:1px solid var(--line); border-radius:999px; transition: border-color .2s, background .2s; }
.copy-email:hover { border-color: var(--text); }
.copy-email .lbl { color: var(--text-mute); }
.copy-email.copied .lbl { color: var(--accent); }
.contact-socials { display:flex; gap:1.5rem; margin-top:1.6rem; }
.contact-socials a { font-family:var(--mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color: var(--text-mute); border-bottom:1px solid transparent; padding-bottom:2px; transition: color .2s, border-color .2s; }
.contact-socials a:hover { color: var(--text); border-color: var(--accent); }

/* form */
.form { display:flex; flex-direction:column; gap:1.1rem; }
.field { display:flex; flex-direction:column; gap:.45rem; }
.field label { font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color: var(--text-mute); }
.field input, .field textarea {
  font-family: var(--display); font-size:1rem; color: var(--text);
  background: var(--surface); border:1px solid var(--line); border-radius:10px;
  padding:.85rem 1rem; transition: border-color .2s, background .2s;
}
.field input:focus, .field textarea:focus { outline:none; border-color: var(--accent); }
.field textarea { resize:vertical; min-height:120px; }
.form-status { font-family:var(--mono); font-size:.78rem; min-height:1.2em; }
.form-status.ok { color:#6fcf97; } .form-status.err { color:#e493a8; }
@media (max-width:820px){ .contact-grid{ grid-template-columns:1fr; } }

/* --------------------------------------------------------- Footer */
.site-footer { border-top:1px solid var(--line); padding: clamp(2.5rem,5vw,4rem) 0 2.4rem; }
.footer-top { display:flex; justify-content:space-between; gap:2rem; flex-wrap:wrap; margin-bottom:2.6rem; }
.footer-top .f-word { font-weight:500; font-size: clamp(2.2rem,6vw,4.5rem); text-transform:uppercase; letter-spacing:-.03em; line-height:.9; }
.footer-links { display:flex; flex-direction:column; gap:.6rem; text-align:right; }
.footer-links a { font-family:var(--mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; color: var(--text-mute); transition: color .2s; }
.footer-links a:hover { color: var(--text); }
.footer-bottom { display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; align-items:center; padding-top:1.6rem; border-top:1px solid var(--line-soft); }
.footer-bottom span, .footer-bottom time { font-family:var(--mono); font-size:.72rem; letter-spacing:.04em; color: var(--text-mute); }
.clock { color: var(--accent) !important; }

/* --------------------------------------------------------- Lightbox (brand projects) */
.lb { position:fixed; inset:0; z-index:400; display:none; }
.lb.open { display:block; }
.lb-scrim { position:absolute; inset:0; background: rgba(8,5,10,.72); backdrop-filter: blur(7px); animation: fade .3s var(--ease); }
@keyframes fade { from{opacity:0} to{opacity:1} }
.lb-panel { position:absolute; inset: clamp(.5rem,3vw,3rem); background: var(--bg); border:1px solid var(--line); border-radius: var(--radius-lg); overflow:hidden; display:grid; grid-template-columns: 1.15fr .85fr; box-shadow: var(--shadow); animation: rise .4s var(--ease); }
@keyframes rise { from{opacity:0; transform: translateY(16px)} to{opacity:1; transform:none} }
.lb-gallery { overflow-y:auto; background: var(--surface); padding: clamp(1rem,2vw,1.6rem); display:flex; flex-direction:column; gap:1rem; }
.lb-gallery img { border-radius:10px; width:100%; border:1px solid var(--line-soft); }
.lb-info { overflow-y:auto; padding: clamp(1.6rem,3vw,2.8rem); }
.lb-info .eyebrow { display:block; margin-bottom:1rem; }
.lb-info h3 { font-weight:500; font-size: clamp(1.8rem,3.2vw,2.6rem); letter-spacing:-.02em; text-transform:uppercase; line-height:1; }
.lb-meta { display:flex; flex-wrap:wrap; gap:1.1rem 2rem; margin:1.4rem 0 1.8rem; padding-bottom:1.4rem; border-bottom:1px solid var(--line); }
.lb-meta div { display:flex; flex-direction:column; gap:.2rem; }
.lb-meta dt { font-family:var(--mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color: var(--text-mute); }
.lb-meta dd { font-size:.9rem; }
.lb-info h4 { font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color: var(--accent); margin:1.6rem 0 .6rem; }
.lb-info p { color: var(--text-soft); margin-bottom:1rem; font-size:.98rem; }
.lb-close { position:absolute; top: clamp(.8rem,2vw,1.4rem); right: clamp(.8rem,2vw,1.4rem); z-index:5; width:44px; height:44px; border-radius:50%; background: var(--text); color: var(--bg); display:grid; place-items:center; font-size:1.1rem; transition: transform .25s var(--ease); }
.lb-close:hover { transform: rotate(90deg); }
@media (max-width:820px){ .lb-panel{ grid-template-columns:1fr; grid-template-rows:45% 55%; inset:0; border-radius:0; } }

/* --------------------------------------------------------- Case study page */
.case-hero { padding: clamp(2.5rem,6vw,4.5rem) 0 clamp(1.5rem,4vw,3rem); }
.back-link { display:inline-flex; align-items:center; gap:.5em; font-family:var(--mono); font-size:.76rem; text-transform:uppercase; letter-spacing:.08em; color: var(--text-mute); margin-bottom:2.2rem; transition: gap .25s var(--ease), color .2s; }
.back-link:hover { gap:.85em; color: var(--text); }
.case-hero h1 { font-weight:500; font-size: clamp(1.8rem,3.6vw,2.9rem); line-height:1.02; letter-spacing:-.025em; text-transform:uppercase; max-width:22ch; margin:1rem 0 1.1rem; }
.case-meta { display:grid; grid-template-columns: repeat(4,1fr); gap:1.5rem; margin-top:2.6rem; padding-top:1.8rem; border-top:1px solid var(--line); }
.case-meta div { display:flex; flex-direction:column; gap:.35rem; }
.case-meta dt { font-family:var(--mono); font-size:var(--fs-mono); letter-spacing:.12em; text-transform:uppercase; color: var(--text-mute); }
.case-meta dd { font-size:.96rem; }
@media (max-width:640px){ .case-meta{ grid-template-columns: repeat(2,1fr); } }

.case-figure { margin: clamp(2rem,5vw,4rem) 0; }
.case-figure img { border-radius: var(--radius-lg); border:1px solid var(--line-soft); width:100%; background: var(--surface); }
.case-figure figcaption { font-family:var(--mono); font-size:.72rem; letter-spacing:.04em; color: var(--text-mute); margin-top:.9rem; text-align:center; text-transform:uppercase; }
.case-figure--grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.case-figure--grid figcaption { grid-column:1/-1; }
@media (max-width:640px){ .case-figure--grid{ grid-template-columns:1fr; } }

.prose { max-width: 70ch; margin-inline:auto; }
.prose .eyebrow { display:block; margin: clamp(2.5rem,5vw,3.5rem) 0 .8rem; }
.prose h2 { font-weight:500; font-size: var(--fs-h2); letter-spacing:-.025em; text-transform:uppercase; margin:.4rem 0 1.1rem; line-height:1; }
.prose h3 { font-weight:500; font-size: var(--fs-h4); text-transform:uppercase; letter-spacing:-.01em; margin:2rem 0 .7rem; }
.prose p { color: var(--text-soft); margin-bottom:1.2rem; }
.prose ul { color: var(--text-soft); padding-left:1.2rem; margin-bottom:1.3rem; }
.prose li { margin-bottom:.5rem; }
.prose strong { color: var(--text); font-weight:500; }
.pullquote { font-weight:400; font-size: clamp(1.6rem,3.4vw,2.3rem); line-height:1.25; letter-spacing:-.02em; color: var(--text); border-left:3px solid var(--accent); padding-left:1.4rem; margin:2.5rem 0; }
.kv { display:grid; grid-template-columns: repeat(3,1fr); gap:1.4rem; margin:1.8rem 0; }
.kv div { border-top:2px solid var(--accent); padding-top:1rem; }
.kv b { font-weight:500; font-size: clamp(1.4rem,3vw,2rem); line-height:1; display:block; letter-spacing:-.01em; }
.kv span { font-family:var(--mono); font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color: var(--text-mute); display:block; margin-top:.6rem; }
@media (max-width:640px){ .kv{ grid-template-columns:1fr; } }
.case-next { border-top:1px solid var(--line); margin-top:3rem; text-align:center; }

/* --------------------------------------------------------- Reveal */
[data-reveal]{ opacity:0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ [data-reveal]{ opacity:1; transform:none; } }

/* --------------------------------------------------------- Mobile nav */
@media (max-width:860px){
  .nav-links a { font-size:.72rem; }
  .nav-links { gap:1.3rem; }
}
@media (max-width:720px){
  .menu-toggle { display:inline-flex; flex-direction:column; gap:5px; width:40px; height:40px; align-items:center; justify-content:center; }
  .menu-toggle span { width:22px; height:2px; background: var(--text); transition: transform .3s var(--ease), opacity .3s var(--ease); }
  .nav-links { position:fixed; inset:74px 0 auto 0; flex-direction:column; gap:0; background: var(--bg); border-bottom:1px solid var(--line); padding:1rem var(--gutter) 1.6rem; transform: translateY(-130%); transition: transform .35s var(--ease); }
  .nav-links.open { transform: translateY(0); }
  .nav-links a { padding:.95rem 0; font-size:1rem; width:100%; border-bottom:1px solid var(--line-soft); }
  .menu-toggle.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  .menu-toggle.open span:nth-child(2){ opacity:0; }
  .menu-toggle.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
}

/* print (résumé) */
@media print {
  .site-header, .site-footer, .cv-actions, .no-print { display:none !important; }
}

/* =========================================================================
   Revision 2 — Everlytic-led restructure, credibility, timeline
   ========================================================================= */

/* credibility strip */
.cred { display:flex; flex-wrap:wrap; gap:0; margin-top:3rem; padding-top:1.7rem; border-top:1px solid var(--line); }
.cred div { flex:1 1 auto; min-width:130px; padding:.2rem 1.6rem .2rem 0; }
.cred div + div { padding-left:1.6rem; border-left:1px solid var(--line-soft); }
.cred b { display:block; font-weight:500; font-size:1.25rem; letter-spacing:-.01em; line-height:1; }
.cred b .accent { color:var(--accent); }
.cred span { font-family:var(--mono); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-mute); margin-top:.5rem; display:block; }
@media (max-width:720px){ .cred div{ flex-basis:45%; padding:.6rem 1rem .6rem 0;} .cred div+div{ border-left:none; padding-left:0;} }

/* platform chapters (Everlytic workstreams) */
.chapters-head { display:flex; align-items:baseline; gap:.8rem; flex-wrap:wrap; margin:clamp(2rem,4vw,3rem) 0 1.4rem; }
.chapters-head .eyebrow { color:var(--text-mute); }
.chapters-head .line { flex:1; height:1px; background:var(--line); min-width:40px; }
.chapters { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:var(--radius-lg); overflow:hidden; }
.chapter { background:var(--bg); padding:1.5rem 1.4rem; display:flex; flex-direction:column; gap:.5rem; min-height:150px; transition:background .3s var(--ease); position:relative; }
.chapter:hover { background:var(--surface); }
.chapter .cn { font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; color:var(--accent); text-transform:uppercase; }
.chapter h4 { font-weight:500; font-size:1.12rem; letter-spacing:-.01em; text-transform:uppercase; line-height:1.05; margin-top:.2rem; }
.chapter p { color:var(--text-soft); font-size:.86rem; line-height:1.45; }
.chapter .go { margin-top:auto; font-family:var(--mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-mute); display:inline-flex; align-items:center; gap:.4em; transition:color .2s, gap .25s var(--ease); }
.chapter:hover .go { color:var(--accent); gap:.7em; }
@media (max-width:820px){ .chapters{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .chapters{ grid-template-columns:1fr;} .chapter{ min-height:0;} }

/* secondary earlier work (GBC + Undivided) */
.earlier-work { display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3rem); margin-top:1.4rem; max-width:960px; margin-inline:auto; }
.ew-card { display:block; color:var(--text); border:1px solid var(--line-soft); border-radius:var(--radius-lg); overflow:hidden; background:var(--surface); transition:transform .35s var(--ease), border-color .3s; }
.ew-card:hover { transform:translateY(-3px); border-color:var(--line); }
.ew-media { aspect-ratio:16/9; overflow:hidden; background:var(--surface-2); }
.ew-media img { width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.ew-card:hover .ew-media img { transform:scale(1.04); }
.ew-body { padding:1.3rem 1.4rem 1.5rem; }
.ew-body .kicker { font-family:var(--mono); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); }
.ew-body h4 { font-weight:500; font-size:1.2rem; letter-spacing:-.01em; text-transform:uppercase; margin:.5rem 0 .5rem; line-height:1.05; }
.ew-body p { color:var(--text-soft); font-size:.9rem; }
.ew-body .go { margin-top:.9rem; font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-mute); display:inline-flex; gap:.4em; align-items:center; }
.ew-card:hover .ew-body .go { color:var(--accent); }
@media (max-width:640px){ .earlier-work{ grid-template-columns:1fr; max-width:420px;} }

/* always-visible earlier-experience timeline */
.early-tl { margin-top:1.4rem; border-top:1px solid var(--line); }
.early-tl .lbl { font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-mute); padding:1rem 0 .4rem; display:block; }
.early-row { display:grid; grid-template-columns:8.5rem 1fr auto; gap:1rem; padding:.8rem 0; border-bottom:1px solid var(--line-soft); font-size:.93rem; align-items:baseline; }
.early-row .yr { font-family:var(--mono); font-size:.74rem; color:var(--text-mute); }
.early-row .r-org { font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--text-mute); text-align:right; }
@media (max-width:600px){ .early-row{ grid-template-columns:5rem 1fr; } .early-row .r-org{ grid-column:2; text-align:left; color:var(--text-soft);} }

/* contact reply note */
.reply-note { font-family:var(--mono); font-size:.72rem; letter-spacing:.04em; color:var(--text-mute); margin-top:1.2rem; display:flex; align-items:center; gap:.5rem; }
.reply-note .dot { width:7px; height:7px; border-radius:50%; background:#6fcf97; box-shadow:0 0 0 3px color-mix(in srgb,#6fcf97 22%,transparent); }

/* case-study chapter anchors + chapter nav */
.chapter-nav { display:flex; flex-wrap:wrap; gap:.5rem; margin:2rem 0 0; }
.chapter-nav a { font-family:var(--mono); font-size:.68rem; letter-spacing:.05em; text-transform:uppercase; color:var(--text-mute); border:1px solid var(--line); border-radius:999px; padding:.45rem .8rem; transition:color .2s,border-color .2s; }
.chapter-nav a:hover { color:var(--text); border-color:var(--text); }
.prose h2[id], .prose h3[id] { scroll-margin-top:100px; }
.chapter-tag { font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); display:block; margin-bottom:.3rem; }

/* At-a-glance spec panel (case study) */
.glance { border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(1.2rem,3vw,1.8rem) clamp(1.4rem,3vw,2.2rem); margin:clamp(1.6rem,4vw,2.6rem) 0; }
.glance .g-row { display:grid; grid-template-columns:180px 1fr; gap:1.4rem; padding:1rem 0; border-bottom:1px solid var(--line-soft); align-items:baseline; }
.glance .g-row:first-child { padding-top:0; }
.glance .g-row:last-child { border-bottom:none; padding-bottom:0; }
.g-row dt { font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-mute); }
.g-row dd { color:var(--text); font-size:.98rem; }
.g-chips { display:flex; flex-wrap:wrap; gap:.45rem; }
.g-chips span { font-family:var(--mono); font-size:.68rem; letter-spacing:.03em; padding:.35rem .7rem; border:1px solid var(--line); border-radius:999px; color:var(--text-soft); }
@media (max-width:600px){ .glance .g-row{ grid-template-columns:1fr; gap:.5rem; } }

/* Flagship summary (homepage Everlytic) + awards */
.flag-meta { display:flex; flex-wrap:wrap; gap:1rem 2rem; margin:1.3rem 0 1.3rem; }
.flag-meta div { display:flex; flex-direction:column; gap:.3rem; }
.flag-meta dt { font-family:var(--mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-mute); }
.flag-meta dd { font-size:.9rem; }
.flag-cta { margin-top:1.6rem; }
.feature .feature-body .btn--primary { align-self:flex-start; }

/* awards section */
.awards-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:var(--radius-lg); overflow:hidden; }
.award-cell { background:var(--bg); padding:1.5rem 1.4rem; display:flex; flex-direction:column; gap:.5rem; min-height:140px; }
.award-cell .star { color:var(--sand); font-size:1rem; }
.award-cell h4 { font-weight:500; font-size:1.05rem; letter-spacing:-.01em; line-height:1.1; }
.award-cell .sub { font-family:var(--mono); font-size:.68rem; letter-spacing:.02em; color:var(--text-mute); margin-top:auto; line-height:1.4; }
@media (max-width:820px){ .awards-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:480px){ .awards-grid{ grid-template-columns:1fr;} .award-cell{ min-height:0;} }

/* =========================================================================
   Revision 3 — Portfolio simplification: Creative Work + Gallery
   ========================================================================= */
.creative-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem,3vw,2rem); }
.creative-grid .ew-card { background:var(--surface); }
.creative-grid .ew-media { aspect-ratio:16/10; }
.creative-grid .ew-body h4 { font-size:1.12rem; }
@media (max-width:900px){ .creative-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .creative-grid{ grid-template-columns:1fr; max-width:420px; margin-inline:auto; } }

/* branded placeholder panel for pending imagery */
.ew-media.placeholder, .case-figure .placeholder {
  display:grid; place-items:center; text-align:center;
  background:
    radial-gradient(120% 120% at 30% 20%, color-mix(in srgb,var(--accent-2) 30%, transparent), transparent 60%),
    linear-gradient(150deg, var(--surface-2), var(--surface));
}
.ew-media.placeholder .ph-label { font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text); }
.ew-media.placeholder .ph-sub { font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-mute); margin-top:.5rem; }

/* gallery: force grid, remove interactive chrome feel */
.gallery.index.is-grid { grid-template-columns:repeat(3,1fr); }
@media (max-width:860px){ .gallery.index.is-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .gallery.index.is-grid{ grid-template-columns:1fr; } }

/* video figures (looping demos) */
.case-video { width:100%; height:100%; object-fit:cover; border-radius:var(--radius-lg); border:1px solid var(--line-soft); display:block; background:var(--surface); }
.case-figure--grid .case-video { border-radius:var(--radius); }
.vid-wrap { border-radius:var(--radius-lg); overflow:hidden; }

/* =========================================================================
   Revision 4 — Kyle-Bowman-inspired restructure
   Unified project gallery · compact hero · grouped case-study figures
   (Preserves the existing plum/rose identity + Space Grotesk / Space Mono.)
   ========================================================================= */

/* ---- Compact hero: name + positioning, gallery peeks beneath ---------- */
.hero--compact { padding: clamp(2.4rem,6vw,4.6rem) 0 clamp(1.6rem,3vw,2.4rem); }
.hero--compact h1 {
  max-width: 20ch; letter-spacing:-.03em;
  font-size: clamp(1.75rem,3.4vw,2.75rem);
}
.hero--compact .hero-lead { margin-top:1.4rem; max-width:52ch; font-size:1.1rem; }
.hero--compact .hero-actions { margin-top:1.8rem; }
.hero-stat {
  display:flex; flex-wrap:wrap; gap:.5rem 2rem; margin-top:2rem;
  padding-top:1.4rem; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:.68rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-mute);
}
.hero-stat b { color:var(--text); font-weight:700; }
.hero-stat .accent { color:var(--accent); }
.hero-stat span:not(:last-child)::after { content:"·"; margin-left:2rem; color:var(--line); }

/* ---- Work section: toolbar (filter + grid/list) ----------------------- */
#work { padding-top: clamp(1rem,2vw,1.6rem); }
.work-toolbar {
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:1rem 2rem; flex-wrap:wrap;
  padding-top:1.3rem; border-top:1px solid var(--line);
  margin-bottom: clamp(1.8rem,3vw,2.6rem);
}
.work-toolbar .tb-label { display:flex; align-items:baseline; gap:.7rem; }
.work-toolbar h2 {
  font-family:var(--mono); font-weight:400; font-size:var(--fs-mono);
  letter-spacing:.24em; line-height:1; text-transform:uppercase; color:var(--text-mute);
}
.work-toolbar .count { font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; color:var(--text-mute); }
.tb-controls { display:flex; align-items:center; gap:1.3rem; flex-wrap:wrap; }
.work-filter { display:flex; gap:.4rem; flex-wrap:wrap; }
.work-filter button {
  font-family:var(--mono); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-mute); padding:.42rem .8rem; border:1px solid var(--line);
  border-radius:999px; transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.work-filter button:hover { color:var(--text); border-color:var(--text); }
.work-filter button[aria-pressed="true"] { color:var(--on-accent); background:var(--accent-2); border-color:var(--accent-2); }
.view-toggle { display:flex; gap:.3rem; }
.view-toggle button {
  display:inline-flex; align-items:center; justify-content:center; width:34px; height:30px;
  border:1px solid var(--line); border-radius:8px; color:var(--text-mute);
  transition: color .2s, border-color .2s;
}
.view-toggle button svg { width:15px; height:15px; }
.view-toggle button:hover { color:var(--text); border-color:var(--text); }
.view-toggle button[aria-pressed="true"] { color:var(--text); border-color:var(--text); }
@media (max-width:560px){ .view-toggle { display:none; } }

/* ---- The gallery ------------------------------------------------------ */
.work { display:grid; grid-template-columns:repeat(3,1fr); gap: clamp(1.4rem,3vw,2.4rem) clamp(1.2rem,2.5vw,1.8rem); }
.work-card { display:flex; flex-direction:column; text-align:left; color:var(--text); width:100%; background:none; transition: opacity .35s var(--ease); }
.work-card[hidden] { display:none; }
.wc-media {
  position:relative; display:block; border-radius:var(--radius); overflow:hidden;
  aspect-ratio:4/3; background:var(--surface); border:1px solid var(--line-soft); margin-bottom:1.05rem;
}
.wc-media img { width:100%; height:100%; object-fit:cover; object-position:top center;
  transition: transform .8s var(--ease), filter .5s var(--ease); }
.work-card:hover .wc-media img, .work-card:focus-visible .wc-media img { transform:scale(1.045); }
.wc-media::after {
  content:""; position:absolute; inset:0; border-radius:inherit;
  background: linear-gradient(to top, color-mix(in srgb,var(--bg) 42%, transparent), transparent 46%);
  opacity:0; transition:opacity .4s var(--ease);
}
.work-card:hover .wc-media::after { opacity:1; }
.wc-view {
  position:absolute; left:1rem; bottom:1rem; z-index:2;
  display:inline-flex; align-items:center; gap:.45em;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--on-accent);
  opacity:0; transform:translateY(6px); transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.work-card:hover .wc-view, .work-card:focus-visible .wc-view { opacity:1; transform:none; }
.wc-cat {
  position:absolute; top:.9rem; left:.95rem; z-index:2;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text); background: color-mix(in srgb,var(--bg) 62%, transparent);
  backdrop-filter: blur(6px); padding:.34rem .6rem; border-radius:999px; border:1px solid var(--line-soft);
}
.wc-head { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; }
.wc-title { font-weight:500; font-size:1.32rem; letter-spacing:-.02em; text-transform:uppercase; line-height:1.02;
  transition: color .25s var(--ease); }
.work-card:hover .wc-title, .work-card:focus-visible .wc-title { color:var(--accent); }
.wc-year { font-family:var(--mono); font-size:.72rem; color:var(--text-mute); flex-shrink:0; }
.wc-sub { font-family:var(--mono); font-size:.72rem; letter-spacing:.04em; text-transform:uppercase;
  color:var(--text-mute); margin-top:.4rem; }

/* list view */
.work.is-list { display:block; border-top:1px solid var(--line); grid-template-columns:none; }
.work.is-list .work-card {
  display:grid; grid-template-columns: 4.6rem 1fr 15rem 9rem 1.4rem; align-items:center; gap:1.2rem;
  padding:1.35rem .3rem; border-bottom:1px solid var(--line);
  transition: padding-left .3s var(--ease), background .3s var(--ease);
}
.work.is-list .work-card:hover { padding-left:1.1rem; background:var(--surface); }
.work.is-list .wc-media, .work.is-list .wc-cat, .work.is-list .wc-view { display:none; }
.work.is-list .wc-head { display:contents; }
.work.is-list .wc-year { order:-1; font-size:.8rem; }
.work.is-list .wc-title { font-size:clamp(1.2rem,2.4vw,1.7rem); }
.work.is-list .wc-sub { margin-top:0; }
.work.is-list .wc-list-cat { font-family:var(--mono); font-size:.68rem; letter-spacing:.05em; text-transform:uppercase; color:var(--text-mute); }
.work.is-list .wc-arrow { justify-self:end; color:var(--accent); transition: transform .3s var(--ease); }
.work.is-list .work-card:hover .wc-arrow { transform:translateX(4px); }
.wc-arrow, .wc-list-cat { display:none; }
.work.is-list .wc-arrow, .work.is-list .wc-list-cat { display:block; }

@media (max-width:900px){ .work { grid-template-columns:repeat(2,1fr); } }
@media (max-width:720px){
  .work.is-list .work-card { grid-template-columns: 3.4rem 1fr 1.4rem; row-gap:.25rem; }
  .work.is-list .wc-sub { grid-column:2/3; }
  .work.is-list .wc-list-cat { display:none; }
}
@media (max-width:520px){ .work { grid-template-columns:1fr; } }

/* ---- Grouped case-study figures (curated, not stacked) ---------------- */
.figure-group { margin: clamp(1.6rem,4vw,3rem) 0; }
.figure-row { display:grid; gap: clamp(.8rem,1.6vw,1.1rem); }
.figure-row.duo   { grid-template-columns: repeat(2,1fr); }
.figure-row.trio  { grid-template-columns: repeat(3,1fr); }
.figure-row.wide-left  { grid-template-columns: 1.6fr 1fr; }
.figure-row.wide-right { grid-template-columns: 1fr 1.6fr; }
.figure-row .fr-cell { border-radius:var(--radius); overflow:hidden; border:1px solid var(--line-soft); background:var(--surface); aspect-ratio:4/3; }
.figure-row .fr-cell.tall { aspect-ratio:3/4; }
.figure-row .fr-cell.wideimg { aspect-ratio:16/10; }
.figure-row .fr-cell img, .figure-row .fr-cell video { width:100%; height:100%; object-fit:cover; display:block;
  transition: transform .7s var(--ease); }
.figure-row .fr-cell.contain img { object-fit:contain; background:var(--surface); }
.figure-row .fr-cell:hover img { transform:scale(1.03); }
.figure-cap { font-family:var(--mono); font-size:.7rem; letter-spacing:.04em; color:var(--text-mute);
  margin-top:.85rem; text-transform:uppercase; text-align:center; }
@media (max-width:760px){
  .figure-row.trio { grid-template-columns: repeat(2,1fr); }
  .figure-row.wide-left, .figure-row.wide-right { grid-template-columns:1fr; }
}
@media (max-width:520px){ .figure-row.duo, .figure-row.trio { grid-template-columns:1fr; } }

/* tighten case prose rhythm for faster reading */
.prose--tight h2 { margin:.3rem 0 .8rem; }
.prose--tight p { margin-bottom:1rem; }
.prose--tight .eyebrow { margin: clamp(1.8rem,3.5vw,2.6rem) 0 .6rem; }

/* condensed chapter list for the flagship */
.chapter-list { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line-soft);
  border:1px solid var(--line-soft); border-radius:var(--radius-lg); overflow:hidden; margin: clamp(1.4rem,3vw,2rem) 0; }
.chapter-list .cl-item { background:var(--bg); padding:1.3rem 1.4rem; }
.chapter-list .cl-n { font-family:var(--mono); font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }
.chapter-list .cl-item h3 { font-weight:500; font-size:1.06rem; text-transform:uppercase; letter-spacing:-.01em; margin:.35rem 0 .5rem; }
.chapter-list .cl-item p { color:var(--text-soft); font-size:.9rem; line-height:1.5; margin:0; }
@media (max-width:600px){ .chapter-list { grid-template-columns:1fr; } }

/* ---- About: How I work (folded-in process) + empty state -------------- */
.how-i-work { margin-top:2.2rem; padding-top:1.6rem; border-top:1px solid var(--line); }
.how-i-work .eyebrow { display:block; margin-bottom:1.1rem; }
.hiw-steps { list-style:none; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:.9rem 1.6rem; counter-reset:hiw; }
.hiw-steps li { position:relative; padding-left:2.2rem; font-size:.92rem; color:var(--text-soft); line-height:1.45; }
.hiw-steps li::before { counter-increment:hiw; content:"0" counter(hiw); position:absolute; left:0; top:.05rem;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.06em; color:var(--accent); }
.hiw-steps b { color:var(--text); font-weight:500; }
.hiw-ai { margin-top:1.3rem; font-size:.92rem; color:var(--text-soft); max-width:60ch; }
@media (max-width:560px){ .hiw-steps { grid-template-columns:1fr; } }

.work-empty { font-family:var(--mono); font-size:.8rem; letter-spacing:.05em; text-transform:uppercase;
  color:var(--text-mute); padding:2.4rem 0; text-align:center; }


/* ---- Project prev/next navigation (structured sequence) --------------- */
.project-nav { display:flex; align-items:center; justify-content:space-between; gap:1rem 1.4rem; flex-wrap:wrap;
  max-width:900px; margin: clamp(2.4rem,5vw,3.6rem) auto 0; padding-top: clamp(1.6rem,3vw,2.2rem);
  border-top:1px solid var(--line); }
.project-nav a { display:flex; flex-direction:column; gap:.35rem; color:var(--text); }
.project-nav .pn-dir { font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-mute);
  display:inline-flex; align-items:center; gap:.4em; transition:gap .25s var(--ease); }
.project-nav .pn-title { font-weight:500; font-size:1.1rem; letter-spacing:-.01em; text-transform:uppercase; transition:color .2s var(--ease); }
.project-nav a:hover .pn-title { color:var(--accent); }
.project-nav .pn-prev:hover .pn-dir { gap:.75em; }
.project-nav .pn-next { text-align:right; }
.project-nav .pn-next:hover .pn-dir { gap:.75em; }
.project-nav .pn-all { align-self:center; flex-direction:row; font-family:var(--mono); font-size:.68rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-mute); border:1px solid var(--line); border-radius:999px; padding:.55rem 1.05rem;
  transition:color .2s, border-color .2s; }
.project-nav .pn-all:hover { color:var(--text); border-color:var(--text); }
@media (max-width:600px){
  .project-nav { gap:1.4rem; }
  .project-nav .pn-all { order:-1; width:100%; text-align:center; justify-content:center; }
  .project-nav .pn-prev, .project-nav .pn-next { flex:1 1 40%; }
}

/* brand-project detail: short intro under hero */
.case-hero .lead-note { max-width:60ch; }

/* =========================================================================
   Revision 5 — Multidisciplinary repositioning
   Capabilities matrix + grouped, product-first work gallery.
   Reuses existing tokens/type; no change to palette or fonts.
   ========================================================================= */

/* ---- Capabilities: typographic matrix (no heavy cards) ---------------- */
.capabilities { padding-top: clamp(3rem,7vw,5rem); padding-bottom: clamp(3rem,7vw,5rem); }
.cap-intro { max-width: 62ch; margin-bottom: clamp(2.2rem,4vw,3.2rem); }
.cap-title { font-weight:500; font-size: var(--fs-h2); letter-spacing:-.025em; text-transform:uppercase; line-height:1.02; }
.cap-intro p { color: var(--text-soft); font-size: var(--fs-lead); line-height:1.5; margin-top:1.1rem; max-width:58ch; }
.cap-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(1.6rem,4vw,3.2rem);
  border-top:1px solid var(--line); padding-top: clamp(1.8rem,3vw,2.6rem); }
.cap-col .eyebrow { display:block; margin-bottom:1.1rem; }
.cap-col ul { list-style:none; padding:0; display:flex; flex-direction:column; gap:.55rem; }
.cap-col li { font-size:1.02rem; color: var(--text-soft); letter-spacing:-.005em; position:relative; padding-left:1.15rem; }
.cap-col li::before { content:""; position:absolute; left:0; top:.62em; width:5px; height:5px;
  border-radius:50%; background: var(--accent); opacity:.65; }
@media (max-width:760px){ .cap-grid { grid-template-columns:1fr 1fr; gap:1.8rem 2rem; } }
@media (max-width:480px){ .cap-grid { grid-template-columns:1fr; } }

/* ---- Work: grouped, product-first bands ------------------------------- */
#work-gallery { display:flex; flex-direction:column; gap: clamp(2.6rem,5vw,4.2rem); }
.work-band[hidden] { display:none; }
.band-head { display:flex; align-items:baseline; justify-content:space-between; gap:.8rem 1.4rem; flex-wrap:wrap;
  padding-bottom:1rem; margin-bottom: clamp(1.4rem,2.6vw,2rem); border-bottom:1px solid var(--line); }
.band-label { font-weight:500; font-size: clamp(1.15rem,2vw,1.5rem); text-transform:uppercase; letter-spacing:-.015em; line-height:1; }
.band-note { font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color: var(--text-mute); }
/* product + digital lead with larger 2-up cards; brand is a tighter 3-up set */
.work-band[data-band="product"] .work,
.work-band[data-band="digital"] .work { grid-template-columns: repeat(2,1fr); }
.work-band[data-band="brand"]   .work { grid-template-columns: repeat(3,1fr); }
@media (max-width:900px){ .work-band[data-band="brand"] .work { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){
  .work-band[data-band="product"] .work,
  .work-band[data-band="digital"] .work,
  .work-band[data-band="brand"]   .work { grid-template-columns:1fr; }
}

/* =========================================================================
   Revision 6 — Unified gallery (single grid) + real project assets
   Supersedes the grouped-band layout in Revision 5 (bands no longer rendered).
   ========================================================================= */

/* One consistent 3 / 2 / 1 column gallery with a tasteful hover lift */
.work.is-grid { grid-template-columns: repeat(3,1fr); }
@media (max-width:900px){ .work.is-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width:600px){ .work.is-grid { grid-template-columns: 1fr; } }
.wc-media { transition: box-shadow .45s var(--ease); }
.work-card:hover .wc-media, .work-card:focus-visible .wc-media { box-shadow: var(--shadow); }

/* Case-study hero cover: large, uncropped 4:3 */
.case-hero + .wrap .case-figure { margin-top: clamp(1.4rem,3vw,2.4rem); }
.case-figure img { display:block; }

/* Looping demo videos sit flush in the figure group */
/* Looping demo videos are square (1:1) — give the wrapper a real box so the
   video fills it without distortion or cropping, and keep it tidy in width. */
.figure-group .vid-wrap { aspect-ratio: 1 / 1; max-width: 720px; margin: 0 auto clamp(.8rem,1.6vw,1.1rem); }
.figure-group .vid-wrap .case-video { width: 100%; height: 100%; }
.figure-group .vid-wrap + .figure-row { margin-top: clamp(.8rem,1.6vw,1.1rem); }
.figure-group .figure-cap { text-align: center; }

/* =========================================================================
   Revision 7 — Editorial case-study template (two-column: image rail + story)
   Full-width hero (summary + info table), then a left image rail beside a
   right narrative column. Supersedes the prose/figure-group case layout.
   ========================================================================= */

.case { padding-top: clamp(1.5rem, 4vw, 3rem); }

/* ---- Hero: breadcrumb, title, summary, info table (full width) ---- */
.cs-hero { padding: clamp(1rem,3vw,2.5rem) 0 0; }
.cs-crumb { display:flex; align-items:center; gap: clamp(1rem,2vw,1.6rem);
  flex-wrap:wrap; margin-bottom: clamp(1.6rem,3.5vw,2.6rem); }
.cs-crumb .eyebrow { margin:0; }
.cs-hero h1 {
  font-size: clamp(2.1rem, 5vw, 3.7rem); font-weight:600; line-height:1.02;
  letter-spacing:-0.015em; text-transform:uppercase; margin:0;
  max-width: 16ch;
}
.cs-summary {
  margin: clamp(1.3rem,2.6vw,1.9rem) 0 0; max-width: 60ch;
  font-size: clamp(1.05rem,1.5vw,1.28rem); line-height:1.6;
  color: var(--text-muted-strong, var(--text-muted));
}
.cs-table {
  margin: clamp(2.2rem,4.5vw,3.4rem) 0 0; max-width: 820px;
  border:1px solid var(--line); border-radius: var(--radius-lg); overflow:hidden;
}
.cs-row { display:grid; grid-template-columns: 170px 1fr; gap:1rem;
  padding: clamp(.85rem,1.6vw,1.15rem) clamp(1.1rem,2vw,1.5rem);
  border-bottom:1px solid var(--line-soft); }
.cs-row:last-child { border-bottom:0; }
.cs-row dt { margin:0; font-family: var(--mono); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color: var(--text-muted); align-self:center; }
.cs-row dd { margin:0; color: var(--text); font-size: clamp(.95rem,1.2vw,1.05rem); align-self:center; }

/* ---- Two-column body ---- */
.cs-layout {
  margin: clamp(3rem,7vw,6.5rem) 0 clamp(2.5rem,6vw,5rem);
  display:grid; grid-template-columns: minmax(0,0.9fr) minmax(0,1.05fr);
  gap: clamp(2.5rem,5.5vw,6rem); align-items:start;
}
.cs-media, .cs-media-rest { display:flex; flex-direction:column; gap: clamp(.85rem,1.6vw,1.2rem); }
.cs-fig { margin:0; }
.cs-fig img, .cs-video {
  width:100%; height:auto; display:block;
  border-radius: var(--radius-lg); border:1px solid var(--line-soft);
  background: var(--surface);
}
.cs-video { aspect-ratio: 1 / 1; object-fit: cover; }

/* narrative column */
.cs-content { display:flex; flex-direction:column; gap: clamp(2.6rem,5vw,3.8rem); }
.cs-sec { }
.cs-sec .eyebrow { display:block; margin:0 0 .8rem; }
.cs-content h2 {
  font-size: clamp(1.5rem,2.5vw,2.15rem); font-weight:600; line-height:1.08;
  letter-spacing:-0.01em; text-transform:uppercase; margin:0 0 clamp(.8rem,1.4vw,1.1rem);
}
.cs-content h3 {
  font-family: var(--mono); font-size:.8rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color: var(--text); margin: clamp(1.6rem,2.6vw,2rem) 0 .7rem;
}
.cs-content p {
  margin:0 0 1rem; max-width: 60ch; line-height:1.72;
  color: var(--text-muted-strong, var(--text-muted));
}
.cs-content p:last-child { margin-bottom:0; }
.cs-content ul { list-style:none; margin:.3rem 0 0; padding:0; }
.cs-content li { position:relative; padding-left:1.2rem; margin-bottom:.6rem;
  line-height:1.65; color: var(--text-muted-strong, var(--text-muted)); max-width:60ch; }
.cs-content li::before { content:""; position:absolute; left:0; top:.62em;
  width:6px; height:6px; border-radius:50%; background: var(--accent); }

/* ---- Responsive: collapse rail + story, interleave sensibly ---- */
@media (max-width: 860px) {
  .cs-layout { display:flex; flex-direction:column; gap: clamp(1.8rem,6vw,2.6rem); margin-top: clamp(2.2rem,7vw,3rem); }
  .cs-media { display:contents; }          /* lift rail children into the flex flow */
  .cs-fig--lead { order:1; }
  .cs-content  { order:2; }
  .cs-media-rest { order:3; }
  .cs-content h2 { max-width:none; }
  .cs-hero h1 { max-width: 18ch; }
}
@media (max-width: 560px) {
  .cs-row { grid-template-columns: 100px 1fr; gap:.6rem; }
  .cs-table { max-width:none; }
}