/* ======================================================================
   POP — 2026-10 redesign
   Framed white "windows" on a soft, drifting blue/coral ground.
   Black ink, one chunky display face, a collage that moves.
   Loaded after style.css; everything here overrides the NOIR layer.
   ====================================================================== */
:root {
  --paper:   #ffffff;
  --paper-2: #f1efec;
  --ink:     #111111;
  --ink-2:   #5f5f5f;
  --rule:    #e2e2e2;
  --print:   #111111;
  --sky:     #d3dee8;
  --coral:   #e9826e;
  --rose:    #d9545a;
  --chunk:   "Bowlby One", "Dela Gothic One", "Arial Black", Impact, sans-serif;
  --win-r:   clamp(14px, 2vw, 26px);
  --win-m:   clamp(0.6rem, 2.4vw, 2.6rem);
  --ease:    cubic-bezier(.2,.8,.2,1);
  --spring:  cubic-bezier(.34,1.56,.64,1);
  color-scheme: light;
}

html { background: var(--sky); overflow-x: clip; }
body {
  background: transparent; color: var(--ink);
  position: relative; isolation: isolate; overflow-x: hidden;
}
::selection { background: var(--ink); color: #fff; }

/* ---------- the drifting ground ---------- */
.bg {
  position: fixed; inset: -10vmax; z-index: -1; pointer-events: none;
  background: var(--sky);
  overflow: hidden;
}
.bg i {
  position: absolute; border-radius: 50%; filter: blur(70px); opacity: .7;
}
.bg i:nth-child(1) { width: 48vmax; height: 40vmax; left: -6vmax; top: 22vmax; background: var(--rose); }
.bg i:nth-child(2) { width: 40vmax; height: 36vmax; right: -4vmax; top: 52vmax; background: var(--coral); opacity: .55; }
.bg i:nth-child(3) { width: 36vmax; height: 30vmax; left: 38vmax; top: -6vmax; background: #f4c7b8; opacity: .5; }
@media (prefers-reduced-motion: no-preference) {
  .bg i:nth-child(1) { animation: drift1 26s ease-in-out infinite alternate; }
  .bg i:nth-child(2) { animation: drift2 32s ease-in-out infinite alternate; }
  .bg i:nth-child(3) { animation: drift3 22s ease-in-out infinite alternate; }
  @keyframes drift1 { to { transform: translate(18vmax, -14vmax) scale(1.15); } }
  @keyframes drift2 { to { transform: translate(-22vmax, -20vmax) scale(.9); } }
  @keyframes drift3 { to { transform: translate(-12vmax, 22vmax) scale(1.2); } }
}

/* ---------- window frame ---------- */
.win {
  position: relative; background: #fff; color: var(--ink);
  border: 1.5px solid var(--ink); border-radius: var(--win-r);
  margin: 0 var(--win-m) var(--win-m); overflow: hidden;
  box-shadow: 0 30px 60px -40px rgba(17,17,17,.45);
}

/* ---------- bar: a floating pill ---------- */
.bar {
  position: sticky; top: 0.7rem; z-index: 50;
  margin: 0.7rem var(--win-m) var(--win-m);
  padding: 0.65rem clamp(0.9rem, 2vw, 1.4rem);
  background: rgba(255,255,255,.82); backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1.5px solid var(--ink); border-radius: 999px;
}
.bar-name {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--chunk); font-size: 1rem; text-transform: uppercase; color: var(--ink);
}
.bar-name::before {
  content: "✳"; display: inline-block; font-family: var(--body); font-size: 1.35rem; line-height: 1;
  transition: transform .6s var(--spring);
}
.bar-name:hover::before { transform: rotate(180deg) scale(1.15); }
@media (prefers-reduced-motion: no-preference) {
  .bar-name::before { animation: spin 14s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
}
.bar-nav a, .lang { color: var(--ink); font-size: 0.8rem; text-transform: none; }
.bar-nav a { position: relative; }
.bar-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1.5px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .35s var(--ease);
}
.bar-nav a:hover { color: var(--ink); }
.bar-nav a:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------- hero ---------- */
.mh { margin: 0; }
.mh-win { padding: clamp(0.9rem, 2vw, 1.6rem) clamp(0.9rem, 2.2vw, 2rem) clamp(1rem, 3vw, 2.5rem); }
.mh-cap {
  display: flex; justify-content: space-between; gap: 1rem;
  font-size: 0.72rem; color: var(--ink-2); line-height: 1.3;
}
.mh-word {
  margin: clamp(0.4rem, 1.2vw, 1rem) 0 0; line-height: .8;
  font-family: var(--chunk); font-weight: 400; color: var(--ink);
  font-size: 15.2vw; letter-spacing: -0.03em; white-space: nowrap; text-transform: uppercase;
  text-align: center; position: relative; z-index: 1;
  transform: translateY(calc(var(--sp, 0) * -40px)) scale(calc(1 - var(--sp, 0) * .06));
}
.mh-word .fit { display: inline-block; }
.mh-word .ch { display: inline-block; transform-origin: 50% 100%; }
.mh-word .sp { display: inline-block; width: .22em; }
@media (prefers-reduced-motion: no-preference) {
  .mh-word .ch { animation: drop .9s var(--spring) both; animation-delay: calc(var(--i) * 60ms + 100ms); }
  @keyframes drop { from { opacity: 0; transform: translateY(-60%) rotate(calc(var(--r, 6) * 1deg)); } }
  .mh-word .ch:hover { animation: squish .6s var(--spring); }
  @keyframes squish { 30% { transform: scale(1.15, .8); } 60% { transform: scale(.92, 1.12); } }
}

/* collage */
.mh-collage {
  position: relative; z-index: 2;
  height: clamp(20rem, 38vw, 44rem);
  margin-top: -7vw;
}
.tl {
  position: absolute; left: var(--x); top: var(--y); width: var(--w);
  display: block; text-decoration: none; color: var(--ink);
  transform: translate3d(calc(var(--mx, 0) * var(--d, 1) * 1px), calc(var(--my, 0) * var(--d, 1) * 1px + var(--sp, 0) * var(--d, 1) * 90px), 0);
  transition: transform .5s var(--ease);
  z-index: var(--z, 1);
}
.tl-in {
  display: block; position: relative; transform: rotate(var(--r, 0deg));
  transition: transform .5s var(--spring), box-shadow .4s ease;
  box-shadow: 0 18px 30px -18px rgba(17,17,17,.45);
  border-radius: clamp(10px, 1.4vw, 20px);
}
.tl-in > img, .tl-in > video {
  display: block; width: 100%; aspect-ratio: var(--ar, 16/9); object-fit: cover; background: var(--paper-2);
  border-radius: inherit;
}
.tl-tag {
  position: absolute; left: 50%; bottom: -0.9rem; transform: translate(-50%, 6px) rotate(-2deg);
  background: var(--ink); color: #fff; white-space: nowrap; border-radius: 999px;
  font-size: 0.7rem; line-height: 1; padding: 0.45rem 0.75rem; opacity: 0;
  transition: opacity .25s ease, transform .35s var(--spring); pointer-events: none;
}
.tl:hover, .tl:focus-visible { z-index: 20; }
.tl:hover .tl-in, .tl:focus-visible .tl-in { transform: rotate(0deg) scale(1.08); box-shadow: 0 30px 50px -20px rgba(17,17,17,.55); }
.tl:hover .tl-tag, .tl:focus-visible .tl-tag { opacity: 1; transform: translate(-50%, 0) rotate(-2deg); }
.tl:focus-visible { outline: none; }
.tl:focus-visible .tl-in { outline: 2px solid var(--ink); outline-offset: 4px; }

@media (prefers-reduced-motion: no-preference) {
  .tl-pop { display: block; animation: pop .9s var(--spring) both; animation-delay: calc(var(--n) * 90ms + 650ms); }
  @keyframes pop { from { opacity: 0; transform: translate3d(0, 40px, 0) scale(.6); } }
  .tl-float { display: block; animation: bob var(--fd, 6s) ease-in-out infinite alternate; animation-delay: calc(var(--n) * -.8s); }
  @keyframes bob { from { transform: translateY(-6px) rotate(-.6deg); } to { transform: translateY(6px) rotate(.6deg); } }
}

/* stickers */
.stk { position: absolute; pointer-events: none; z-index: 15; }
.stk-note {
  font-family: "Caveat", "Comic Sans MS", cursive; font-size: clamp(1rem, 1.6vw, 1.5rem);
  line-height: 1.05; color: var(--ink); transform: rotate(-6deg); text-align: center;
}
.stk-note svg { width: 3.2em; height: auto; display: block; margin: 0.2rem auto 0; transform: scaleY(-1) rotate(160deg); }
.stk-star {
  font-size: clamp(2.2rem, 4.5vw, 4.4rem); color: var(--rose); line-height: 1;
}
@media (prefers-reduced-motion: no-preference) {
  .stk { animation: pop .8s var(--spring) both 1.5s; }
  .stk-star span { display: inline-block; animation: spin 9s linear infinite; }
}

/* ---------- discipline strip (static) ---------- */
.mq {
  margin: 0 var(--win-m) var(--win-m); border-radius: 999px; overflow: hidden;
  background: var(--ink); color: #fff; border: 1.5px solid var(--ink);
  transform: rotate(-1.2deg);
}
.mq-track { display: block; text-align: center; padding: 0 1.2rem; }
.mq-track span {
  font-family: var(--chunk); text-transform: uppercase; white-space: normal; text-align: center; line-height: 1.5;
  font-size: clamp(0.8rem, 1.18vw, 1.35rem); padding: 0.6rem 0; letter-spacing: 0.01em;
}
.mq-track b { font-family: var(--body); font-weight: 400; color: var(--coral); padding: 0 0.6em; }

/* ---------- work: every client is its own window ---------- */
.work { padding: 0; max-width: none; }
.work .group, .group {
  background: #fff; border: 1.5px solid var(--ink) !important; border-radius: var(--win-r);
  margin: 0 var(--win-m) var(--win-m) !important;
  padding: clamp(1.1rem, 2.6vw, 2.4rem) !important; overflow: hidden;
  box-shadow: 0 30px 60px -40px rgba(17,17,17,.45);
}
.band { align-items: flex-end; }
.band-n, .band-client { font-family: var(--chunk); font-weight: 400; color: var(--ink); text-transform: uppercase; letter-spacing: -0.02em; line-height: .86; }
.band-n { font-size: clamp(2.6rem, 6vw, 6.5rem); -webkit-text-stroke: 1.5px var(--ink); color: transparent; }
.band-client { font-size: clamp(2rem, 6.4vw, 7rem); }
.band-meta { color: var(--ink); border-top: 1.5px solid var(--ink); padding-top: 0.9rem; margin-top: 1rem; }
.band-role .mono { color: var(--ink); }
.band-note { color: var(--ink-2); }
.band-logo { filter: brightness(0) saturate(100%) invert(9%) sepia(36%) saturate(3000%) hue-rotate(345deg) brightness(90%); opacity: 1; }

.group .card a { color: var(--ink); }
.group .card-img {
  border-radius: calc(var(--win-r) * .6); overflow: hidden;
  border: 1.5px solid var(--ink); background: var(--paper-2);
  transform: perspective(900px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg));
  transition: transform .4s var(--ease), box-shadow .4s ease;
}
.group .card a:hover .card-img { box-shadow: 0 24px 40px -24px rgba(17,17,17,.6); }
.group .card a:hover .card-img img { transform: scale(1.06); }
.group .card-title { font-weight: 500; }
.group .card a:hover .card-title { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.group .card-place { color: var(--ink-2); }
.rail-btn { color: var(--ink); border-color: var(--ink); background: #fff; border-radius: 999px; }
.rail-btn:hover:not(:disabled) { background: var(--ink); color: #fff; border-color: var(--ink); }
.conf-tag { background: var(--ink); color: #fff; border-radius: 999px; }

/* reveal: windows rise and settle */
@media (prefers-reduced-motion: no-preference) {
  .js .rv { opacity: 0; transform: translateY(60px) rotate(1.2deg); }
  .js .rv.in { opacity: 1; transform: none; transition: opacity .8s ease, transform 1s var(--spring); }
  .js .group .card { opacity: 0; transform: translateY(30px); }
  .js .group.in .card { opacity: 1; transform: none; transition: opacity .6s ease, transform .8s var(--spring); transition-delay: calc(var(--k, 0) * 80ms + 200ms); }
}

/* ---------- chain, cta, footer ---------- */
.span, .cta {
  background: #fff; border: 1.5px solid var(--ink) !important; border-radius: var(--win-r);
  margin: 0 var(--win-m) var(--win-m); padding: clamp(1.4rem, 3vw, 3rem) !important;
}
.sec-title { color: var(--ink); }
.sec-note, .cta-lead { color: var(--ink-2); }
.chain { font-family: var(--chunk); font-weight: 400; text-transform: uppercase; letter-spacing: -0.01em; color: var(--ink); line-height: 1.05; }
.chain .link { display: inline-block; transition: transform .4s var(--spring), color .2s; }
.chain .link:hover { transform: rotate(-4deg) scale(1.08); color: var(--rose); }
.chain .arrow { color: var(--coral); }
.span-stats .n { font-family: var(--chunk); font-weight: 400; color: var(--ink); }
.span-stats .l { color: var(--ink-2); }
.cta { background: var(--ink); color: #fff; }
.cta .cta-lead { color: rgba(255,255,255,.75); }
.cta-link { font-family: var(--chunk); font-weight: 400; color: #fff; border-bottom-color: rgba(255,255,255,.4); letter-spacing: -0.01em; }
.cta-link:hover { border-bottom-color: #fff; color: var(--coral); }

.foot { background: transparent; border: 0 !important; color: var(--ink); align-items: center; flex-wrap: wrap; }
.foot-name { font-family: var(--chunk); font-size: clamp(1.6rem, 4vw, 3rem); text-transform: uppercase; color: var(--ink); }
.foot-links a, .foot-meta { color: var(--ink); }
.foot-links a:hover { color: var(--rose); }

/* ---------- about ---------- */
.am { padding: clamp(1rem, 2vw, 1.6rem) clamp(0.9rem, 2.2vw, 2rem) 0; }
.am .mh-word { font-size: 16.5vw; margin-top: 0; }
.am .mh-collage { height: clamp(16rem, 30vw, 34rem); margin-top: -5vw; }
.about, .cv {
  background: #fff; border: 1.5px solid var(--ink); border-radius: var(--win-r);
  margin: 0 var(--win-m) var(--win-m); max-width: none;
  padding: clamp(1.4rem, 3vw, 3rem);
}
.about-title { font-family: var(--chunk); font-weight: 400; color: var(--ink); text-transform: uppercase; letter-spacing: -0.02em; line-height: .95; }
.about-body, .cv-role { color: var(--ink); }
.cv .sec-title { border-top-color: var(--ink); }
.cv-row { border-color: var(--rule); }

/* ---------- project pages ---------- */
.project {
  background: #fff; border: 1.5px solid var(--ink); border-radius: var(--win-r);
  margin: 0 var(--win-m) var(--win-m); overflow: hidden;
}
.project .phead { padding-top: clamp(1.5rem, 4vw, 3rem); }
.project > :first-child { margin-top: 0; }
.ptitle { font-family: var(--chunk); font-weight: 400; color: var(--ink); text-transform: uppercase; letter-spacing: -0.02em; line-height: .92; }
.titleblock { border-top-color: var(--ink); }
.fig img, .phero img { border-radius: calc(var(--win-r) * .5); }
.eyebrow a { color: var(--ink); }

/* ---------- gate ---------- */
.gate { background: var(--sky); }
.gate-name { font-family: var(--chunk); color: var(--ink); text-transform: uppercase; }

/* ---------- small screens ---------- */
@media (max-width: 760px) {
  .mh-win { min-height: 0; }
  .mh-cap > :last-child { display: none; }
  .mh-word { font-size: 15.4vw; }
  .mh-collage { height: 150vw; margin-top: -2vw; }
  .mh .stk-note { display: none; }
  .tl { left: var(--xm, var(--x)); top: var(--ym, var(--y)); width: var(--wm, var(--w)); }
  .tl-tag { display: none; }
  .am .mh-collage { height: 72vw; }
  .bar { top: 0.4rem; margin-top: 0.4rem; }
  .mq { transform: none; border-radius: 22px; }
}

/* ---------- breathing room on project pages ---------- */
.project {
  --pad: clamp(1.25rem, 7vw, 8rem);
  --max: 1240px;
}
.project .phead, .project .pgrid, .project .pnav, .project .pvideo {
  max-width: var(--max); margin-left: auto; margin-right: auto;
}
.project .phero { max-width: calc(var(--max) + var(--pad) * 2); margin-left: auto; margin-right: auto; }
.project .ptext p, .project .lede { max-width: 62ch; }

/* language switch: an obvious EN | 한국어 pill */
.bar .lang { display: inline-flex; padding: 3px; gap: 2px; border: 1.5px solid var(--ink) !important; border-radius: 999px; background: #fff; cursor: pointer; }
.bar .lang .lang-opt { display: inline-block !important; padding: 0.25rem 0.6rem; border-radius: 999px; font-size: 0.74rem; line-height: 1; color: var(--ink); font-family: "Noto Sans KR", var(--body); }
html:not([lang="ko"]) .bar .lang .lang-en, html[lang="ko"] .bar .lang .lang-ko { background: var(--ink); color: #fff; }
.bar .lang:hover .lang-opt { opacity: .85; }

/* project cards: titles readable at a glance */
.group .card-body { padding-top: 0.9rem; }
.group .card-title { display: block; font-family: "Inter Tight", var(--display); font-weight: 700; font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem); line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); }
.group .card-place { display: block; margin-top: 0.35rem; font-size: 0.78rem; letter-spacing: 0.01em; }
@media (max-width: 700px) { .group .card-title { font-size: 1.1rem; } }

/* ---------- no letterboxing: images at their own proportions ---------- */
.fig img, .phero img { aspect-ratio: auto !important; height: auto; object-fit: initial; background: transparent !important; }
.pair { display: flex !important; gap: var(--plate-gap); align-items: flex-start; }
.pair > .fig { flex: var(--ar, 1) 1 0; min-width: 0; }
.pair.tall .fig img { aspect-ratio: auto !important; object-fit: initial; }
@media (max-width: 700px) { .pair { flex-direction: column; } .pair > .fig { flex: none; width: 100%; } }

/* every company group: a 4-column grid, no sideways scrolling */
.group .cards { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2rem); overflow: visible; padding: 0; scroll-snap-type: none; }
.group .card { flex: none !important; width: auto !important; }
.group .rail-nav { display: none; }
@media (max-width: 700px) { .group .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* project chapters on regular project pages */
.cr-sec { max-width: var(--max); margin: clamp(3rem, 8vw, 6rem) auto 0; }
.cr-head { padding: 0 var(--pad); margin-bottom: clamp(1.2rem, 3vw, 2rem); border-top: 1.5px solid var(--ink); padding-top: 1.2rem; }
.cr-kick { margin: 0; font-size: 0.78rem; text-transform: uppercase; color: var(--ink-2); }
.cr-h { margin: 0.3rem 0 0.5rem; font-family: var(--chunk); font-weight: 400; text-transform: uppercase; font-size: clamp(1.6rem, 4vw, 3.2rem); line-height: .95; color: var(--ink); }
html[lang="ko"] .cr-h .ko { font-family: "Gothic A1", "Noto Sans KR", sans-serif; font-weight: 800; letter-spacing: -0.04em; }
.cr-d { margin: 0; max-width: 60ch; color: var(--ink-2); font-size: 1rem; line-height: 1.5; }
html[lang="ko"] .cr-d { word-break: keep-all; }
.ptext strong { font-weight: 600; color: var(--ink); }

/* ---------- chapter flow connector ---------- */
.flow {
  position: relative; z-index: 3; height: clamp(150px, 16vw, 210px);
  margin: calc(var(--win-m) * -1) auto calc(var(--win-m) * -0.2);
  display: grid; place-items: center; pointer-events: none;
}
.flow-path { position: absolute; left: 50%; top: 0; width: 40px; height: 100%; transform: translateX(-50%); overflow: visible; }
.flow-path path {
  fill: none; stroke: var(--ink); stroke-width: 3.6; stroke-linecap: round;
  stroke-dasharray: 0.1 11; vector-effect: non-scaling-stroke;
}
.flow-pill {
  position: relative; display: inline-flex; align-items: center; gap: .6rem;
  padding: .45rem .95rem .45rem .5rem; background: #fff; color: var(--ink);
  border: 1.5px solid var(--ink); border-radius: 999px;
  box-shadow: 4px 4px 0 var(--ink); font-size: .86rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  transform: rotate(-2deg);
}
.flow-pill b {
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; width: 1.9rem; height: 1.9rem; padding: 0;
  border-radius: 999px; background: var(--ink); color: #fff; font-family: "Inter Tight", sans-serif; font-weight: 900; font-size: 1rem; letter-spacing: 0;
}
.flow-pill b em { font-style: normal; opacity: .7; font-size: .7rem; margin-left: .1rem; }
html[lang="ko"] .flow-k .ko { letter-spacing: -0.02em; font-weight: 600; }
.flow-first { height: clamp(110px, 11vw, 150px); }
.flow-cr { margin: clamp(2rem, 5vw, 3.5rem) auto calc(clamp(3rem, 8vw, 6rem) * -1 + 1rem); }
@media (prefers-reduced-motion: no-preference) {
  .js .flow .flow-path path { stroke-dashoffset: 60; transition: stroke-dashoffset 1.6s ease; }
  .js .flow .flow-pill { opacity: 0; transform: translateY(14px) rotate(4deg) scale(.9); transition: opacity .5s ease .15s, transform .7s var(--spring) .15s; }
  .js .flow.on .flow-path path { stroke-dashoffset: 0; animation: flowdash 2.4s linear infinite; }
  .js .flow.on .flow-pill { opacity: 1; transform: rotate(-2deg); }
  @keyframes flowdash { to { stroke-dashoffset: -18; } }
}

/* closing main-scene photo on project pages: portrait shots stay a sensible size */
.gallery .fig-portrait { width: min(100%, 980px); margin-left: auto; margin-right: auto; }
.pair.match { align-items: stretch; }
.pair.match .fig figcaption { margin-top: .5rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }
.pair.match .fig:last-child figcaption { color: var(--ink); font-weight: 600; }
.pair.match + .pair.match { margin-top: var(--plate-gap); }
/* render → built: the built photo gets the bigger share */
.pair.match > .fig:first-child { flex: 1.35 1 0 !important; align-self: center; }
.pair.match > .fig:last-child { flex: 1 1 0 !important; }

/* ---------- contact card ---------- */
.contact-card {
  position: fixed; z-index: 80; width: min(20rem, calc(100vw - 24px));
  padding: 1rem 1.1rem 1.1rem; background: #fff; color: var(--ink);
  border: 1.5px solid var(--ink); border-radius: 18px; box-shadow: 5px 5px 0 var(--ink);
}
.contact-card[hidden] { display: none; }
.cc-k { margin: 0; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }
.cc-mail { margin: .25rem 0 .8rem; font-family: "Inter Tight", var(--body); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.01em; word-break: break-all; }
.cc-row { display: flex; flex-wrap: wrap; gap: .45rem; }
.cc-btn {
  appearance: none; font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer;
  padding: .45rem .85rem; border: 1.5px solid var(--ink); border-radius: 999px; background: #fff; color: var(--ink); text-decoration: none;
}
.cc-btn:hover, .cc-btn:focus-visible { background: var(--ink); color: #fff; }
.cc-copy { background: var(--ink); color: #fff; }
.cc-x { position: absolute; top: .45rem; right: .6rem; appearance: none; border: 0; background: none; font-size: 1.3rem; line-height: 1; cursor: pointer; color: var(--ink-2); }

/* project headers: the client's logo, not just its name */
.eyebrow-logo { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.eyebrow-logo .brand-logo { transform: scale(1.6); transform-origin: left center; margin-right: calc(var(--lh) * var(--ar) * .6); }
.eyebrow-logo a { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; }
.brand-logo { display: inline-block; height: var(--lh, 1.6rem); aspect-ratio: var(--ar); background: var(--ink);
  -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }
.eyebrow-logo .lx { font: 300 1.8rem/1 "Inter Tight", sans-serif; color: var(--ink-2); }
.eyebrow-logo img.ip-logo { height: 3.4rem; width: auto; background: none; display: block; }
.eyebrow-logo .lx-name { font: 800 1.9rem/1 "Inter Tight", sans-serif; letter-spacing: .02em; color: var(--ink); }

/* ---------- zoomed out: project windows sit narrower, with the ground showing around them ---------- */
@media (min-width: 900px) {
  .project, .cs main > .win, .cs main > .flow { max-width: 1180px; margin-left: auto; margin-right: auto; }
  .project { --pad: clamp(1.25rem, 5vw, 5rem); --max: 1060px; }
  .cs main > .win.cs-sec { padding-left: clamp(1.25rem, 5vw, 5rem); padding-right: clamp(1.25rem, 5vw, 5rem); }
}

/* project-page stat strip */
.pstats { list-style: none; max-width: var(--max); margin: clamp(1.4rem, 3vw, 2.4rem) auto 0; padding: 0 var(--pad);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.6rem, 1.4vw, 1rem); }
.pstats li { border: 1.5px solid var(--ink); border-radius: 16px; padding: .9rem 1rem; background: var(--paper-2); }
.pstats b { display: block; font: 900 clamp(1.1rem, 2vw, 1.6rem)/1.05 "Inter Tight", var(--body); letter-spacing: -0.02em; }
.pstats span { display: block; margin-top: .35rem; font-size: .84rem; line-height: 1.4; color: var(--ink-2); }
@media (max-width: 760px) { .pstats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* embedded film (Vimeo) */
.fig.vframe { position: relative; aspect-ratio: 16 / 9; border-radius: calc(var(--win-r) * .5); overflow: hidden; background: #000; }
.fig.vframe iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.fig.vframe + .fig.vframe { margin-top: var(--plate-gap); }