/* Project IN: night studio. Dark base, white logo, one accent per project. */
:root {
  --night: #110f12;
  --night-2: #18151a;
  --card: #1e1a20;
  --line: #2e2930;
  --text: #f3ede5;
  --muted: #b1a69c;
  --dim: #7d736b;
  --hh: #ff6b4a;    /* Hip Hop Project IN */
  --cc: #a98bff;    /* Co-Create */
  --emt: #3fd3c0;   /* Electronic Music Therapy */
  --df: #f4b84c;    /* Draw & Flow */
  --accent: var(--df);
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --r: 16px;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } }
body { margin: 0; background: var(--night); color: var(--text); font: 400 1.0625rem/1.65 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden }
img { max-width: 100%; display: block }
a { color: inherit }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.025em; line-height: 1.04; text-wrap: balance }
h1 { font-size: clamp(2.6rem, 7vw, 5.4rem) }
h2 { font-size: clamp(1.9rem, 4.2vw, 3.1rem) }
h1 em, h2 em { font: italic 400 1.08em/1 var(--serif); letter-spacing: 0; color: var(--accent) }
p { margin: 0 }
.mono { font-family: var(--mono); font-size: .78rem; letter-spacing: .08em }
.label { text-transform: uppercase; color: var(--dim); margin-bottom: .9rem }
.center { text-align: center; margin-inline: auto }
.muted { color: var(--muted) }
.skip { position: absolute; left: -999px; top: 0; background: var(--text); color: var(--night); padding: .6rem 1rem; z-index: 100 }
.skip:focus { left: 1rem }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px }

.wrap { width: min(76rem, 100% - 2.5rem); margin-inline: auto }
.wrap.narrow { width: min(46rem, 100% - 2.5rem) }
section { padding-block: clamp(4rem, 9vw, 7.5rem) }
.kicker { font: 500 .78rem/1.3 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--accent) }
.lede { font-size: clamp(1.1rem, 1.8vw, 1.3rem); color: var(--muted); max-width: 40rem }
.stack { display: flex; flex-direction: column; gap: 1.2rem; align-items: flex-start }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center }
@media (max-width: 860px) { .split { grid-template-columns: 1fr } }
.head { display: grid; gap: .8rem; margin-bottom: clamp(2rem, 4vw, 3rem); max-width: 46rem }
figure { margin: 0 }
figure img, .mosaic img { border-radius: var(--r); width: 100%; object-fit: cover }
figure img { aspect-ratio: 4/3 }
img.round { border-radius: 50%; aspect-ratio: 1; max-width: 26rem; margin-inline: auto }
.right { justify-self: end }

/* buttons & links */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font: 600 .98rem/1 var(--sans); color: var(--night); background: var(--text); border: 1px solid var(--text); border-radius: 999px; padding: 1rem 1.5rem; text-decoration: none; cursor: pointer; transition: background .2s, color .2s, border-color .2s }
.btn:hover { background: var(--accent); border-color: var(--accent) }
.btn.ghost { background: transparent; color: var(--text); border-color: var(--line) }
.btn.ghost:hover { border-color: var(--accent); color: var(--accent) }
.btn.small { padding: .65rem 1.05rem; font-size: .88rem }
.ctas { display: flex; flex-wrap: wrap; gap: .8rem }
.ctas.center { justify-content: center }
.link { color: var(--accent); text-decoration: none; font-weight: 600; border-bottom: 1px solid currentColor; padding-bottom: 2px }
.link:hover { opacity: .8 }

/* nav */
.nav { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--night) 82%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: border-color .3s }
.nav.scrolled { border-color: var(--line) }
.nav-row { display: flex; align-items: center; gap: 1.6rem; padding-block: .8rem }
.brand img { height: 2.6rem; width: auto }
.links { display: flex; align-items: center; gap: 1.5rem; margin-left: auto; font-size: .95rem }
.links > a, .drop-btn { color: var(--muted); text-decoration: none; background: none; border: 0; font: inherit; cursor: pointer; padding: .3rem 0 }
.links > a:hover, .drop-btn:hover, .drop-btn[aria-expanded="true"] { color: var(--text) }
.drop { position: relative }
.drop-btn::after { content: ""; display: inline-block; width: .4rem; height: .4rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); margin-left: .5rem }
.drop-list { position: absolute; top: calc(100% + .9rem); left: -1rem; width: 19rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: .5rem; display: grid; box-shadow: 0 30px 60px -20px #000 }
.drop-list[hidden] { display: none }
.drop-list a { display: grid; gap: .15rem; padding: .75rem .9rem .75rem 1.1rem; border-radius: 10px; text-decoration: none; border-left: 3px solid var(--c) }
.drop-list a:hover { background: var(--night-2) }
.drop-list b { font-weight: 600 }
.drop-list span { font-size: .85rem; color: var(--muted) }
.drop-list .hh { --c: var(--hh) } .drop-list .cc { --c: var(--cc) } .drop-list .emt { --c: var(--emt) } .drop-list .df { --c: var(--df) }
.lang { display: flex; gap: .2rem }
.lang a { font: 500 .75rem/1 var(--mono); color: var(--dim); text-decoration: none; padding: .45rem .5rem; border-radius: 6px }
.lang a[aria-current] { color: var(--text); background: var(--card) }
.menu-btn { display: none; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid var(--line); background: none; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 5px }
.menu-btn i { display: block; width: 1rem; height: 1.5px; background: var(--text); transition: transform .25s }
.menu-btn[aria-expanded="true"] i:first-child { transform: translateY(3.25px) rotate(45deg) }
.menu-btn[aria-expanded="true"] i:last-child { transform: translateY(-3.25px) rotate(-45deg) }
.mobile-menu { border-top: 1px solid var(--line); background: var(--night) }
.mobile-menu[hidden] { display: none }
.mobile-menu .wrap { display: grid; padding-block: .6rem 1.4rem }
.mobile-menu a { padding: .85rem 0; border-bottom: 1px solid var(--line); text-decoration: none; font-size: 1.1rem }
@media (max-width: 980px) {
  .links, .nav-row > .btn.small { display: none }
  .lang { margin-left: auto }
  .menu-btn { display: flex }
}

/* hero */
.hero, .page-hero { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(7rem, 16vw, 12rem) clamp(4rem, 9vw, 7rem); min-height: min(88vh, 52rem); display: flex; flex-direction: column; justify-content: flex-end }
.page-hero { min-height: min(72vh, 44rem) }
.page-hero.plain { min-height: 0; padding-block: clamp(5rem, 11vw, 8rem) clamp(2rem, 5vw, 3rem) }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; filter: saturate(.9) }
.hero::after, .page-hero:not(.plain)::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(17 15 18 / .35) 0%, rgb(17 15 18 / .55) 45%, var(--night) 100%), linear-gradient(90deg, rgb(17 15 18 / .7), transparent 70%) }
.hero-copy { display: flex; flex-direction: column; gap: 1.4rem; align-items: flex-start }
.hero-copy h1 { max-width: 15ch }
.hero-copy .lede { color: #e2d9cf }
.sub-logo { height: 4.5rem; width: auto }
.ticker { position: absolute; left: 0; bottom: 1.2rem; display: flex; white-space: nowrap; color: var(--dim); font-size: .8rem; letter-spacing: .2em; margin: 0 }
.ticker span { padding-right: 1rem; animation: tick 40s linear infinite }
@keyframes tick { to { transform: translateX(-100%) } }
@media (prefers-reduced-motion: reduce) { .ticker span { animation: none } }

/* project accents */
.hh { --accent: var(--hh) } .cc { --accent: var(--cc) } .emt { --accent: var(--emt) } .df { --accent: var(--df) }
.hh-c { color: var(--hh) } .emt-c { color: var(--emt) }
.tinted { background: var(--night-2); border-block: 1px solid var(--line) }
.tinted.hh { background: linear-gradient(180deg, color-mix(in srgb, var(--hh) 7%, var(--night-2)), var(--night-2)) }
.tinted.cc { background: linear-gradient(180deg, color-mix(in srgb, var(--cc) 8%, var(--night-2)), var(--night-2)) }
.tinted.emt { background: linear-gradient(180deg, color-mix(in srgb, var(--emt) 7%, var(--night-2)), var(--night-2)) }
.tinted.df { background: linear-gradient(180deg, color-mix(in srgb, var(--df) 6%, var(--night-2)), var(--night-2)) }

/* numbers */
.numbers { padding-block: 2.5rem; border-bottom: 1px solid var(--line) }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem }
.grid4 div { display: grid; gap: .3rem; border-left: 1px solid var(--line); padding-left: 1.1rem }
.grid4 b { font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 600; letter-spacing: -.03em; line-height: 1 }
.grid4 span { color: var(--muted); font-size: .9rem; line-height: 1.4 }
@media (max-width: 760px) { .grid4 { grid-template-columns: 1fr 1fr; row-gap: 2rem } }

.intro h2 { max-width: 14ch }

/* project cards */
.projects { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem }
@media (max-width: 760px) { .projects { grid-template-columns: 1fr } }
.project { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: .5rem; min-height: 26rem; padding: 1.6rem; border-radius: var(--r); text-decoration: none; border: 1px solid var(--line) }
.project img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .8s ease }
.project::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 20%, rgb(17 15 18 / .92) 78%) }
.project:hover img { transform: scale(1.05) }
.project .mono { color: var(--accent); text-transform: uppercase }
.project b { font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.05 }
.project > span:not(.mono) { color: #ddd3c8; max-width: 30rem }
.project i { position: absolute; top: 1.3rem; right: 1.3rem; width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center; font-style: normal; background: var(--accent); color: var(--night); font-weight: 700; transition: transform .3s }
.project:hover i { transform: rotate(-45deg) }

/* story, quote, cards */
.story figure img { aspect-ratio: 5/4 }
.quote { padding-block: clamp(4rem, 8vw, 6rem); background: var(--night-2); border-block: 1px solid var(--line) }
blockquote { margin: 0; display: grid; gap: 1.4rem; text-align: center }
blockquote p { font: italic 400 clamp(1.6rem, 3.4vw, 2.5rem)/1.25 var(--serif) }
blockquote footer { color: var(--accent); text-transform: uppercase }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem }
.cards.three { grid-template-columns: repeat(3, 1fr) }
@media (max-width: 860px) { .cards.three { grid-template-columns: 1fr } }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 1.5rem; display: grid; gap: .5rem; align-content: start; border-top: 3px solid var(--accent) }
.card b { font-size: 1.15rem; font-weight: 600 }
.card p { color: var(--muted); font-size: .98rem }
.num { color: var(--accent) }
.pull { font: italic 400 clamp(1.5rem, 3vw, 2.2rem)/1.3 var(--serif); text-align: center; margin-top: clamp(2.5rem, 5vw, 4rem); color: var(--text) }
.moves { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; width: 100% }
.moves li { padding: .8rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--card); font-weight: 500 }
.moves b { color: var(--accent) }
.mosaic { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem }
.mosaic img { aspect-ratio: 3/4 }
.mosaic.two { grid-template-columns: 1fr 1fr }
.mosaic.two img { aspect-ratio: 4/3 }
@media (max-width: 760px) { .mosaic { grid-template-columns: 1fr 1fr } }
.logo-panel { background: #fff; border-radius: var(--r); padding: 1.5rem }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem }
.steps div { display: grid; gap: .5rem; border-top: 1px solid var(--line); padding-top: 1.2rem }
.steps b { font-size: 1.4rem; font-weight: 600 }
.steps p { color: var(--muted) }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr } }

/* gallery */
.gallery { columns: 4 14rem; column-gap: .8rem }
.art { display: block; width: 100%; margin: 0 0 .8rem; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 12px; overflow: hidden; break-inside: avoid }
.art img { width: 100%; transition: transform .6s ease }
.art:hover img { transform: scale(1.04) }
.lightbox { border: 0; padding: 0; background: transparent; max-width: 92vw; max-height: 92vh }
.lightbox::backdrop { background: rgb(10 8 11 / .9) }
.lightbox img { max-width: 92vw; max-height: 88vh; border-radius: 10px }
.lb-close { position: fixed; top: 1rem; right: 1rem; width: 2.8rem; height: 2.8rem; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--text); font-size: 1.5rem; cursor: pointer }

/* journal */
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem }
@media (max-width: 860px) { .posts { grid-template-columns: 1fr } }
.post-card { display: grid; gap: .55rem; align-content: start; text-decoration: none; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; padding-bottom: 1.4rem; transition: border-color .2s }
.post-card:hover { border-color: var(--accent) }
.post-card img { aspect-ratio: 16/10; object-fit: cover; width: 100% }
.post-card .mono, .post-card b, .post-card > span:last-child { padding-inline: 1.3rem }
.post-card .mono { color: var(--dim); margin-top: .5rem }
.post-card b { font-size: 1.25rem; line-height: 1.2; font-weight: 600; letter-spacing: -.01em }
.post-card > span:last-child { color: var(--muted); font-size: .95rem }
.post-head { padding-block: clamp(4rem, 9vw, 6rem) 2rem; display: grid; gap: 1.2rem }
.post-head h1 { font-size: clamp(2.2rem, 5vw, 3.6rem) }
.post-head .mono { color: var(--dim) }
.back { color: var(--accent); text-decoration: none }
.post-body { display: grid; gap: 1.3rem; font-size: 1.1rem; padding-bottom: 3rem }
.post-body h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-top: 1.4rem }
.post-body p, .post-body li { color: #ddd3c8 }
.post-body ul { margin: 0; padding-left: 1.2rem; display: grid; gap: .4rem }
.post-body figure { display: grid; gap: .6rem }
.post-body figure img { aspect-ratio: auto }
.post-body figcaption { font-size: .88rem; color: var(--dim) }
.refs { border-top: 1px solid var(--line); padding-top: 1.2rem; font-size: .9rem }
.refs h3 { font-size: 1rem; margin-bottom: .6rem }
.post-foot { display: flex; flex-wrap: wrap; gap: .8rem; padding-bottom: clamp(4rem, 8vw, 6rem) }

/* about */
.founder figure img { aspect-ratio: 1; filter: grayscale(1) contrast(1.05) }
.thanks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 0 2rem }
.thanks li { display: grid; gap: .1rem; padding: 1rem 0; border-bottom: 1px solid var(--line) }
.thanks span { color: var(--muted); font-size: .92rem }
.partners { padding-block: 3rem }
.logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem }
.logos img { height: 4.2rem; width: auto; background: #fff; border-radius: 12px; padding: .7rem 1rem; opacity: .9 }

/* work with us */
.offers { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem }
@media (max-width: 860px) { .offers { grid-template-columns: 1fr } }
.offer { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(1.5rem, 3vw, 2.2rem); display: flex; flex-direction: column; gap: 1rem }
.offer h2 { font-size: clamp(1.6rem, 3vw, 2.2rem) }
.offer > p:not(.kicker):not(.meta) { color: var(--muted) }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem }
.ticks li::before { content: "✦"; color: var(--accent); margin-right: .6rem; font-size: .8rem }
.meta { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--text) }
.offer:nth-child(1) { --accent: var(--df) } .offer:nth-child(2) { --accent: var(--emt) } .offer:nth-child(3) { --accent: var(--cc) } .offer:nth-child(4) { --accent: var(--hh) }
.founders-band { background: var(--night-2); border-block: 1px solid var(--line); padding-block: 3.5rem }

/* contact */
.form { display: grid; gap: 1rem; align-content: start }
.form label { display: grid; gap: .4rem; font-size: .92rem; color: var(--muted) }
.form input, .form select, .form textarea { font: inherit; color: var(--text); background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: .85rem 1rem; width: 100% }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--accent) }
.form .check { grid-template-columns: auto 1fr; align-items: start; gap: .7rem }
.form .check input { width: 1.1rem; height: 1.1rem; margin-top: .2rem; accent-color: var(--accent) }
.form .btn { justify-self: start }
.form-status { min-height: 1.4rem; color: var(--df); font-size: .92rem }
.hp { position: absolute; left: -9999px }
.sent { display: grid; gap: .8rem; align-content: start }
.sent[hidden] { display: none }
.contact { align-items: start }
.plain-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem }
.plain-list a { text-decoration: none; color: var(--muted) }
.plain-list a:hover { color: var(--accent) }
.legal { display: grid; gap: .8rem; padding-bottom: 2rem }
.legal h2 { font-size: 1.4rem; margin-top: 1.2rem }
.legal p { color: var(--muted) }

/* closing band */
.cta-band { text-align: center; background: radial-gradient(60rem 30rem at 50% 120%, color-mix(in srgb, var(--accent) 16%, transparent), transparent) }
.cta-band .wrap { display: grid; gap: 1.2rem; justify-items: center }
.cta-band p { color: var(--muted) }

/* footer */
footer.site { border-top: 1px solid var(--line); padding-block: 3.5rem 2rem; background: var(--night-2) }
.foot { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2rem }
@media (max-width: 860px) { .foot { grid-template-columns: 1fr 1fr } .foot-brand { grid-column: 1 / -1 } }
.foot-brand { display: grid; gap: .9rem; align-content: start }
.foot-brand img { height: 3.4rem; width: auto }
.foot-brand p { color: var(--muted); max-width: 22rem }
.ins { color: var(--dim) !important; font-size: .72rem }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem }
.foot a { color: var(--muted); text-decoration: none }
.foot a:hover { color: var(--text) }
.foot-base { display: flex; flex-wrap: wrap; gap: 1rem 2rem; margin-top: 3rem; padding-top: 1.4rem; border-top: 1px solid var(--line); font: 400 .78rem/1.4 var(--mono); color: var(--dim) }
.foot-base a { color: var(--dim); text-decoration: none }
.foot-base a:hover { color: var(--text) }
.sister { color: var(--df) !important }

/* reveal on scroll */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s ease }
.js .reveal.in { opacity: 1; transform: none }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none } }
.quake-panel { aspect-ratio: 5/4; border-radius: var(--r); display: grid; align-content: center; justify-items: start; gap: .6rem; padding: clamp(1.5rem, 4vw, 3rem); background: radial-gradient(40rem 24rem at 20% 10%, color-mix(in srgb, var(--hh) 30%, transparent), transparent), var(--card); border: 1px solid var(--line) }
.quake-panel b { font-size: clamp(5rem, 13vw, 9rem); line-height: .9; letter-spacing: -.05em; font-weight: 600; color: var(--hh) }
.quake-panel span:not(.mono) { font: italic 400 clamp(1.4rem, 2.6vw, 2rem)/1.2 var(--serif); max-width: 16ch }
.quake-panel .mono { color: var(--dim) }

/* Project IN Lab: tools we build */
.lab { background: var(--night-2); border-block: 1px solid var(--line) }
.tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem }
@media (max-width: 980px) { .tools { grid-template-columns: 1fr 1fr } }
@media (max-width: 560px) { .tools { grid-template-columns: 1fr } }
.tool { position: relative; display: grid; gap: .5rem; align-content: start; padding: 1.5rem; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); text-decoration: none; transition: border-color .2s, transform .2s }
.tool:hover { border-color: var(--emt); transform: translateY(-2px) }
.tool .mono { color: var(--emt); text-transform: uppercase }
.tool b { font-size: 1.35rem; font-weight: 600 }
.tool > span:not(.mono) { color: var(--muted); font-size: .95rem }
.tool i { position: absolute; top: 1.2rem; right: 1.3rem; font-style: normal; color: var(--dim) }
.lab-note { color: var(--dim); margin-top: 1.5rem }
.note-box { border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.1rem; background: var(--card); color: var(--muted) }

.founder .ctas { gap: 1.4rem }