:root {
  --ink: #080a09;
  --paper: #f2f1e9;
  --lime: #b8ef00;
  --line: rgba(242, 241, 233, 0.18);
  --muted: rgba(242, 241, 233, 0.64);
  --accent: #b8ef00;
  --accent-2: #587600;
  --visual-a: #cad7d0;
  --visual-b: #26322c;
  --mono: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
  --sans: "Avenir Next", "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--paper); background: var(--ink); font-family: var(--sans); line-height: 1.55; overflow-x: hidden; }
body::before { position: fixed; inset: 0; z-index: 20; pointer-events: none; content: ""; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }
a { color: inherit; }

.case--resolution { --accent: #ff714c; --accent-2: #8542a6; --visual-a: #ef6541; --visual-b: #44306f; }
.case--resolution h1 { font-size: clamp(3.8rem, 7vw, 7rem); }
.case--soda { --accent: #ffe370; --accent-2: #377fae; --visual-a: #a9dcea; --visual-b: #3c75a0; }
.case--namoo { --accent: #f4b36f; --accent-2: #9d3d37; --visual-a: #eab275; --visual-b: #6a302a; }
.case--nyssa { --accent: #e97ebc; --accent-2: #7650a1; --visual-a: #352641; --visual-b: #a65395; }
.case--personal { --accent: #b8ef00; --accent-2: #293f6d; --visual-a: #9dd3a4; --visual-b: #253966; }

.skip-link { position: fixed; top: 1rem; left: 1rem; z-index: 100; padding: .7rem 1rem; color: var(--ink); background: var(--lime); transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }

.site-header { position: fixed; inset: 0 0 auto; z-index: 10; display: flex; align-items: center; justify-content: space-between; padding: 1.25rem clamp(1.25rem, 4vw, 4rem); transition: background 180ms ease, backdrop-filter 180ms ease; }
.site-header.is-scrolled { background: rgba(8,10,9,.82); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255,255,255,.08); }
.brand { display: flex; align-items: center; gap: .75rem; font: .76rem var(--mono); letter-spacing: .07em; text-decoration: none; text-transform: uppercase; }
.brand img { width: 42px; height: 42px; object-fit: cover; border-radius: 50%; }
.back-link { padding-bottom: .25rem; font: .7rem var(--mono); letter-spacing: .06em; text-decoration: none; text-transform: uppercase; border-bottom: 1px solid var(--accent); }

.case-hero { display: grid; grid-template-columns: .88fr 1.12fr; gap: clamp(3rem, 8vw, 9rem); align-items: center; min-height: min(88svh, 860px); padding: 7rem clamp(1.25rem, 7vw, 8rem) 3rem; }
.hero-copy { align-self: auto; }
.eyebrow, .section-label, .meta dt, .placeholder-label, .award-year, footer { font-family: var(--mono); font-size: .68rem; letter-spacing: .09em; text-transform: uppercase; }
.eyebrow { margin-bottom: 2.6rem; color: var(--accent); }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { margin-bottom: 1.6rem; font-weight: 500; line-height: .92; letter-spacing: -.065em; }
h1 { max-width: 9ch; font-size: clamp(4.4rem, 9vw, 9rem); }
h2 { font-size: clamp(3.3rem, 7vw, 7rem); }
.hero-deck { max-width: 35rem; color: var(--muted); font-size: clamp(1rem, 1.4vw, 1.22rem); }
.founder-context { max-width: 35rem; margin: 1.25rem 0 0; color: var(--muted); font: .68rem/1.65 var(--mono); letter-spacing: .045em; text-transform: uppercase; }
.award-chip { display: inline-flex; gap: .7rem; align-items: center; margin-top: 1.3rem; padding: .66rem .9rem; color: var(--ink); background: var(--accent); font: .68rem var(--mono); letter-spacing: .06em; text-transform: uppercase; }

.visual-placeholder { position: relative; overflow: hidden; background: linear-gradient(145deg, var(--visual-a), var(--visual-b)); isolation: isolate; }
.visual-placeholder::before { position: absolute; inset: -25%; z-index: -1; content: ""; background: repeating-conic-gradient(from 10deg, transparent 0 12deg, rgba(255,255,255,.15) 12deg 17deg, transparent 17deg 29deg); border-radius: 50%; animation: slow-spin 30s linear infinite; }
.visual-placeholder::after { position: absolute; inset: 12%; z-index: -1; content: ""; background: rgba(242,241,233,.78); clip-path: polygon(50% 0, 63% 34%, 100% 50%, 64% 61%, 50% 100%, 37% 63%, 0 50%, 37% 35%); mix-blend-mode: soft-light; }
.hero-visual { min-height: min(72vw, 760px); }
.placeholder-label { position: absolute; right: 1rem; bottom: 1rem; left: 1rem; display: flex; justify-content: space-between; margin: 0; color: rgba(255,255,255,.78); }
.placeholder-label b { font-weight: 400; }

.meta { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0 clamp(1.25rem, 7vw, 8rem) 5rem; }
.meta > div { padding: 1.2rem 1.2rem 1.2rem 0; border-top: 1px solid var(--line); }
.meta dt { margin-bottom: .55rem; color: var(--muted); }
.meta dd { margin: 0; font-size: .9rem; }

.light-section { color: var(--ink); background: var(--paper); }
.case-intro { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(3rem, 8vw, 9rem); padding: clamp(5rem, 10vw, 10rem) clamp(1.25rem, 7vw, 8rem); }
.section-label { color: var(--accent-2); }
.case-intro h2 { max-width: 11ch; }
.body-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; padding-top: 1rem; }
.body-copy p { color: rgba(8,10,9,.66); }

.gallery { display: grid; grid-template-columns: 1.25fr .75fr; gap: 1rem; align-items: stretch; padding: 0 clamp(1.25rem, 7vw, 8rem) clamp(5rem, 10vw, 10rem); }
.gallery .visual-placeholder:first-child { min-height: min(62vw, 680px); }
.gallery .visual-placeholder:last-child { min-height: min(62vw, 680px); }
.gallery .visual-placeholder:last-child:not(.has-upload) { filter: hue-rotate(28deg) saturate(.8); }

.recognition { padding: clamp(5rem, 9vw, 9rem) clamp(1.25rem, 7vw, 8rem); background: var(--accent); color: var(--ink); }
.recognition-header { display: grid; grid-template-columns: .7fr 1.3fr; gap: 3rem; align-items: end; margin-bottom: 4rem; }
.recognition-header h2 { margin: 0; }
.award-list { border-top: 1px solid rgba(8,10,9,.35); }
.award { display: grid; grid-template-columns: .35fr 1.2fr .8fr; gap: 2rem; align-items: baseline; padding: 1.35rem 0; border-bottom: 1px solid rgba(8,10,9,.35); }
.award h3 { margin: 0; font-size: clamp(1.25rem, 2.2vw, 2rem); font-weight: 500; letter-spacing: -.03em; }
.award p { margin: 0; font-size: .82rem; }

.credits { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(3rem, 8vw, 9rem); padding: clamp(5rem, 9vw, 9rem) clamp(1.25rem, 7vw, 8rem); }
.credits h2 { max-width: 11ch; }
.credit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-content: start; }
.credit-grid p { margin-bottom: 0; padding-top: .9rem; color: var(--muted); border-top: 1px solid var(--line); }
.credit-grid strong { display: block; margin-bottom: .35rem; color: var(--paper); font: .68rem var(--mono); letter-spacing: .07em; text-transform: uppercase; }

.next-project { display: flex; justify-content: space-between; align-items: center; gap: 2rem; padding: clamp(4rem, 7vw, 7rem) clamp(1.25rem, 7vw, 8rem); color: var(--ink); background: var(--paper); text-decoration: none; }
.next-project span { font: .7rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.next-project strong { font-size: clamp(2rem, 5vw, 5rem); font-weight: 500; letter-spacing: -.05em; }
.next-project b { font-size: clamp(2rem, 5vw, 5rem); font-weight: 400; color: var(--accent-2); }

footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 1.5rem; padding: 2rem clamp(1.25rem, 4vw, 4rem); color: var(--muted); }
footer p { margin: 0; }
footer a { text-decoration: none; }
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 700ms ease, transform 700ms ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@keyframes slow-spin { to { transform: rotate(360deg); } }

@media (max-width: 850px) {
  .case-hero { grid-template-columns: 1fr; align-items: center; padding-top: 8rem; }
  .hero-visual { min-height: 112vw; }
  .meta { grid-template-columns: 1fr 1fr; }
  .case-intro, .credits, .recognition-header { grid-template-columns: 1fr; }
  .body-copy { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr; align-items: start; }
  .gallery .visual-placeholder:first-child, .gallery .visual-placeholder:last-child { min-height: 110vw; }
  .gallery .visual-placeholder:last-child.has-upload .uploaded-media { position: static; height: auto; object-fit: contain; }
  .award { grid-template-columns: .3fr 1fr; }
  .award p { grid-column: 2; }
}

@media (max-width: 520px) {
  .brand span { display: none; }
  h1 { font-size: clamp(4rem, 19vw, 6.3rem); }
  .meta { grid-template-columns: 1fr; }
  .credit-grid { grid-template-columns: 1fr; }
  .next-project { align-items: flex-end; }
  .next-project strong { display: block; }
  footer { flex-direction: column; }
}

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

.visual-placeholder.has-upload { min-height: 0 !important; padding: 0; background: transparent; isolation: auto; }
.visual-placeholder.has-upload::before, .visual-placeholder.has-upload::after { display: none; }
.uploaded-media { display: block; width: 100%; height: auto; object-fit: contain; }
.gallery .visual-placeholder:last-child.has-upload .uploaded-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reveal { opacity: 1; transform: none; }

@media (max-width: 850px) {
  .gallery .visual-placeholder:last-child.has-upload .uploaded-media { position: static; height: auto; object-fit: contain; }
}