/* Home page. Cool paper and blue-black ink, Seoul blue as the one accent, one typeface. */

body.site {
  --paper: #e3e7ed;
  --ink: #0a0e16;
  --ink-soft: rgba(10, 14, 22, 0.56);
  --ink-line: rgba(10, 14, 22, 0.16);
  background: var(--paper);
  color: var(--ink);
}
body.site .micro { color: var(--ink-soft); }
body.site ::selection { background: var(--na); color: var(--ink); }

/* Navigation: text links, inverted over whatever is under them. */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 20px var(--gutter);
  color: #fff; mix-blend-mode: difference;
}
.nav-left { display: flex; align-items: center; gap: 32px; }
.nav-mark { display: block; width: 136px; }
.nav a, .nav span { font: 400 12px/16px var(--ext); letter-spacing: 0.08em; text-transform: uppercase; }
.nav a:hover { opacity: 0.6; }
/* sound: its own place, small, bottom left, over everything, legible on black and on paper */
.sound { position: fixed; left: var(--gutter); bottom: 16px; z-index: 30; padding: 8px 0;
  font: 400 9px/12px var(--ext); letter-spacing: 0.08em; text-transform: uppercase;
  color: #fff; mix-blend-mode: difference; background: none; border: 0; cursor: pointer; }
.sound:hover { opacity: 0.6; }
body.has-case .sound { display: none; }
@media (max-width: 599px) {
  .nav { padding-top: 16px; }
  .nav-left { gap: 14px; }
  .nav-mark { width: 100px; }
  .nav a { font-size: 11px; }
}
@media (max-width: 899px) { .nav .addr { display: none; } }

/* 0. Salt: a printed render of rock salt, laid out like a mineral poster. */
.stage { position: relative; }
.stage-pin { position: sticky; top: 0; height: 100svh; min-height: 620px; overflow: hidden; background: #05070c; }
.salt { position: absolute; inset: 0; color: var(--paper); --ink-soft: rgba(227, 231, 237, 0.55); display: grid; place-items: center; touch-action: pan-y; user-select: none; opacity: var(--salt, 1); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.salt canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; }
/* the crosshair: two hairlines that meet at the pointer */
.hair { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; background: var(--na); opacity: 0; transition: opacity 200ms; will-change: transform; }
.hair-across { width: 100%; height: 1px; }
.hair-down { width: 1px; height: 100%; }
.salt.has-hair .hair { opacity: 1; }
/* One line, in the middle, over the pictures. Our one cut of Akzidenz is drawn heavier with a
   hairline stroke; difference keeps it legible on black glass and on the paper drawing alike. */
.hero-line { position: absolute; left: var(--gutter); right: var(--gutter); top: 50%; transform: translateY(-50%); z-index: 2; margin: 0;
  text-align: center; font: 400 clamp(12px, 1.12vw, 20px)/1.4 var(--ext); letter-spacing: 0.02em; text-transform: uppercase;
  color: #fff; -webkit-text-stroke: 0.035em #fff; mix-blend-mode: difference; pointer-events: none; text-wrap: balance; }

/* 0. The element -------------------------------------------------------- */

/* Shared section head: a big word left, a big switch or note right. */
.block { padding: 120px var(--gutter) 0; }
.head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 48px; }
.head h2, .head .switch button {
  font: 400 clamp(28px, 5vw, 80px)/1 var(--ext); letter-spacing: 0.04em; text-transform: uppercase;
}
.switch { display: flex; gap: clamp(16px, 3vw, 48px); }
.switch button { color: var(--ink-line); transition: color var(--t) var(--ease); }
@media (max-width: 599px) {
  .head { flex-wrap: wrap; row-gap: 16px; }
  .head h2, .head .switch button { font-size: 26px; }
}
.switch button[aria-pressed='true'], .switch button:hover { color: var(--ink); }

/* 2. Selected work: an editorial page. Every picture has its own place and size on twelve
   columns, staggered down the page with room around it; name and work in small type below. */
.grid { display: grid; gap: 96px 16px; grid-template-columns: minmax(0, 1fr); }
.work { display: grid; gap: 12px; align-content: start; }
.work .frame { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--metal); }
.work img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 900ms var(--ease); }
.work .caption { display: grid; gap: 4px; }
.work .name { font: 400 12px/16px var(--ext); letter-spacing: 0.08em; text-transform: uppercase; transition: color var(--t) var(--ease); }
.work .what { font-size: 11px; line-height: 16px; color: var(--ink-soft); }
@media (hover: hover) {
  .work:hover img { transform: scale(1.02); }
  .work:hover .name { color: var(--ink-soft); }
}
/* phone: one column, pictures alternately left and right at different widths */
@media (max-width: 899px) {
  .work:nth-child(odd) { width: 86%; }
  .work:nth-child(even) { width: 70%; justify-self: end; }
  .work:nth-child(3n+1) .frame { aspect-ratio: 4 / 3; }
}
/* wide: six places that repeat */
@media (min-width: 900px) {
  .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 16px; }
  .work { margin-bottom: 120px; }
  .work:nth-child(6n+1) { grid-column: 1 / span 7; }
  .work:nth-child(6n+1) .frame { aspect-ratio: 4 / 3; }
  .work:nth-child(6n+2) { grid-column: 9 / span 4; margin-top: 200px; }
  .work:nth-child(6n+3) { grid-column: 3 / span 4; }
  .work:nth-child(6n+3) .frame { aspect-ratio: 3 / 4; }
  .work:nth-child(6n+4) { grid-column: 7 / span 6; margin-top: 260px; }
  .work:nth-child(6n+4) .frame { aspect-ratio: 3 / 2; }
  .work:nth-child(6n+5) { grid-column: 1 / span 5; margin-top: 40px; }
  .work:nth-child(6n+6) { grid-column: 8 / span 5; margin-top: 220px; }
  .work:nth-child(6n+6) .frame { aspect-ratio: 1 / 1; }
}

/* 3. Clients -------------------------------------------------------------- */
.clist { display: grid; gap: 40px 16px; grid-template-columns: 1fr 1fr; }
@media (min-width: 900px) { .clist { grid-template-columns: repeat(4, 1fr); } }
.cl-col h3 { margin-bottom: 16px; }
.cl-col li { font-size: 13px; line-height: 1.85; }

/* 4. Office --------------------------------------------------------------- */
.statement { font: 400 clamp(20px, 2.6vw, 40px)/1.3 var(--ext); letter-spacing: 0.01em; max-width: 30em; margin-bottom: 96px; }
.history { margin-top: 96px; }
.history h3 { margin-bottom: 16px; }
.place { margin-top: 96px; display: grid; gap: 12px; }
.place img { width: 100%; height: auto; display: block; }
.depth-still { position: relative; aspect-ratio: 2048 / 1222; background: #05070c; }
.depth-still canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.contact { margin-top: 64px; display: grid; gap: 32px 16px; grid-template-columns: 1fr 1fr; }
@media (min-width: 900px) { .contact { grid-template-columns: repeat(4, 1fr); } }
.contact a:hover { color: var(--na); }

footer { margin-top: 120px; padding: 20px var(--gutter) 88px; display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid var(--ink-line); }
footer a:hover { color: var(--ink); }

/* Brand covers: a wordmark on its own ground, at the cover ratio. */
.brandcover { display: grid; place-items: center; width: 100%; height: 100%; }
.brandcover img { width: 56%; height: auto; }
.work .frame { display: block; }

/* Competences: six columns of what we do. */
.comps { display: grid; gap: 48px 16px; grid-template-columns: 1fr 1fr; }
@media (min-width: 900px) { .comps { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .comps { grid-template-columns: repeat(6, 1fr); } }
.comp h3 { font: 400 13px/1.4 var(--ext); letter-spacing: 0.08em; text-transform: uppercase; border-top: 1px solid var(--ink); padding-top: 12px; margin-bottom: 16px; }
.comp .no { display: block; color: var(--ink-soft); margin-bottom: 8px; }
.comp li { font-size: 13px; line-height: 1.85; color: var(--ink-soft); }
@media (max-width: 599px) { .nav .wide-only { display: none; } }

/* A case, over the page. */
.case {
  position: fixed; inset: 0; z-index: 15; overflow-y: auto; overscroll-behavior: contain;
  background: var(--paper); padding: 72px var(--gutter) 120px; outline: none;
  animation: case-in var(--t) var(--ease);
}
@keyframes case-in { from { opacity: 0; transform: translateY(16px); } }
body.has-case { overflow: hidden; }
.case-bar { display: flex; gap: 24px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--ink-line); }
.case-bar span { margin-right: auto; }
.case-bar button { color: var(--ink); padding: 8px 0; }
.case-bar button:hover { color: var(--na); }
.case-title { font: 400 clamp(36px, 8vw, 140px)/0.95 var(--ext); letter-spacing: 0.02em; text-transform: uppercase; margin: 48px 0; overflow-wrap: anywhere; }
.case-facts { display: grid; gap: 24px 16px; grid-template-columns: 1fr 1fr; margin-bottom: 64px; }
@media (min-width: 900px) { .case-facts { grid-template-columns: repeat(5, 1fr); } }
.case-facts div { border-top: 1px solid var(--ink-line); padding-top: 12px; }
.case-facts dd { font-size: 14px; margin-top: 4px; }
.case-facts .ext { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.case-lead { font: 400 clamp(18px, 2.2vw, 32px)/1.35 var(--ext); max-width: 34em; margin-bottom: 96px; }
.case-media { display: grid; gap: 16px; }
.mrow { display: grid; gap: 16px; }
.mrow.pair { grid-template-columns: 1fr 1fr; }
.mrow img, .mrow video, .mrow .brandcover { width: 100%; height: auto; display: block; background: var(--metal); }
.mrow .brandcover { aspect-ratio: 1.5; }
.case-credit { margin-top: 24px; }

/* The identity sheet of a case. */
.idsheet { margin-top: 120px; display: grid; gap: 48px; }
.idsheet > h3 { border-top: 1px solid var(--ink); padding-top: 12px; }
.id-logos { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .id-logos { grid-template-columns: 2fr 2fr 1fr; } }
.id-logo { aspect-ratio: 1.6; display: grid; place-items: center; }
.id-logo img { width: 62%; max-height: 40%; object-fit: contain; }
.id-logo.is-mark img { width: 36%; max-height: 46%; }
.id-colours { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
@media (min-width: 768px) { .id-colours { grid-template-columns: repeat(4, 1fr); } }
.id-swatch .chip { aspect-ratio: 1; margin-bottom: 12px; border: 1px solid var(--ink-line); }
.id-type { display: grid; gap: 16px; }
.id-face { display: grid; gap: 4px; border-top: 1px solid var(--ink-line); padding-top: 16px; }
.id-face .sample { font-size: clamp(40px, 7vw, 96px); line-height: 1.05; }

.case-next { display: grid; gap: 8px; text-align: left; width: 100%; margin-top: 120px; padding-top: 16px; border-top: 1px solid var(--ink); }
.case-next-title { font: 400 clamp(28px, 5vw, 80px)/1 var(--ext); text-transform: uppercase; letter-spacing: 0.02em; }
.case-next:hover .case-next-title { color: var(--na); }

/* Grid tracks never grow past the page: images and logos shrink to fit. */
.idsheet, .case-media, .mrow { grid-template-columns: minmax(0, 1fr); }
.mrow.pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (min-width: 768px) { .id-logos { grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1fr); } }
.id-logo, .id-swatch, .id-face { min-width: 0; }

/* Instruments in a case: a still with Play, then the instrument itself. */
.mrow.thirds { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .mrow.thirds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.app-tile { display: grid; gap: 12px; align-content: start; }
.app-stage { position: relative; aspect-ratio: 16 / 10; background: #0d0d0b; overflow: hidden; }
.mrow:not(.thirds) .app-stage { aspect-ratio: 16 / 9; }
.app-stage img { width: 100%; height: 100%; object-fit: cover; }
.app-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.app-play {
  position: absolute; left: 16px; bottom: 16px; padding: 10px 18px; border-radius: 999px;
  background: var(--paper); color: var(--ink); font: 400 12px/16px var(--ext); letter-spacing: 0.08em; text-transform: uppercase;
  transition: background var(--t) var(--ease);
}
.app-play:hover { background: var(--na); }
.app-tile figcaption { display: grid; gap: 4px; }
.app-tile h4 { font: 400 13px/1.4 var(--ext); letter-spacing: 0.08em; text-transform: uppercase; }
.app-tile p { color: var(--ink-soft); font-size: 13px; }
.app-tile a.micro { text-decoration: underline; text-underline-offset: 3px; }

/* Turntable. */
.spin { position: relative; cursor: ew-resize; touch-action: pan-y; background: #e8e8ea; user-select: none; }
.spin img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.spin-hint { position: absolute; left: 16px; bottom: 12px; }

/* The venue edit: picture left, the venues right, the one on screen lit. */
.cut { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .cut { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); align-items: start; } }
.cut-stage { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--metal); cursor: pointer; }
.cut-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.12); }
.cut-stage img.is-on { opacity: 1; transform: scale(1); transition: transform 2.4s cubic-bezier(.2, .8, .2, 1); }
.cut.is-held .cut-stage img.is-on { transition: none; }
.cut-label { position: absolute; left: 16px; bottom: 12px; color: #fff !important; mix-blend-mode: difference; }
.cut-list { list-style: none; counter-reset: v; }
.cut-list li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--ink-line); font-size: 13px; transition: background 120ms linear; }
.cut-list li.is-on { background: rgba(111, 143, 242, 0.3); }

/* Huiso rooms: the picture, then a row of rooms and a row of finishes. */
.rooms { display: grid; gap: 16px; }
.rooms-stage { position: relative; overflow: hidden; background: #111; }
.rooms-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--t) var(--ease); }
.rooms-stage img.is-on { opacity: 1; }
.rooms-row { display: flex; flex-wrap: wrap; gap: 8px; }
.rooms-row button {
  padding: 8px 14px; border: 1px solid var(--ink-line); border-radius: 999px;
  font: 400 11px/16px var(--ext); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft);
}
.rooms-row button[aria-pressed='true'] { color: var(--ink); border-color: var(--ink); }
.rooms-row button:hover { border-color: var(--ink); color: var(--ink); }

/* Case, SDL-style: hero picture, name left and story right, then numbered chapters. */
.case-hero { margin-top: 24px; }
.case-hero img, .case-hero .brandcover { width: 100%; height: auto; display: block; max-height: 78svh; object-fit: cover; }
.case-intro { display: grid; gap: 32px 16px; margin: 48px 0 120px; }
@media (min-width: 900px) { .case-intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.case-name { font: 400 14px/1.4 var(--ext); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 24px; }
.case-left .case-facts { grid-template-columns: 1fr 1fr; margin: 0; }
.case-headline { font: 400 clamp(26px, 3.2vw, 48px)/1.12 var(--ext); letter-spacing: 0.01em; margin-bottom: 24px; }
.case-right .case-lead { font: 400 15px/1.7 var(--ext); margin: 0; max-width: 36em; color: var(--ink-soft); }

.chapter { margin-bottom: 120px; }
.chapter-head { display: grid; gap: 12px 16px; padding-top: 12px; border-top: 1px solid var(--ink); margin-bottom: 40px; }
@media (min-width: 900px) { .chapter-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.chapter-head h3 { font: 400 14px/1.4 var(--ext); letter-spacing: 0.08em; text-transform: uppercase; display: flex; gap: 16px; }
.chapter-head p { font-size: 15px; line-height: 1.7; color: var(--ink-soft); max-width: 36em; }
.chapter .idsheet { margin-top: 0; }
.shot { display: grid; gap: 8px; min-width: 0; }
.shot figcaption { color: var(--ink-soft); }

/* While a case is open the navigation sits on paper, and the case bar sticks just below it. */
body.has-case .nav { background: var(--paper); mix-blend-mode: normal; color: var(--ink); }
.case-bar { position: sticky; top: 0; z-index: 2; background: var(--paper); padding-top: 12px; }
body.has-case .case { top: 56px; padding-top: 0; }

/* Live demos: the real site in a quiet frame, its address above it. */
.demo { display: grid; gap: 10px; min-width: 0; }
.demo-bar { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.demo-bar a { text-decoration: underline; text-underline-offset: 3px; }
.demo-stage {
  position: relative; overflow: hidden; border-radius: 10px; background: #0d0d0b;
  box-shadow: 0 1px 0 rgba(3, 3, 3, 0.06), 0 24px 60px -24px rgba(3, 3, 3, 0.35);
}
.demo-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.demo figcaption { color: var(--ink-soft); }

/* Grit over the whole site: a coarse grain, like a print or a dusty scan. It moves in steps,
   at film rate, and holds still for anyone who asks for less motion. */
body.site::after {
  content: ''; position: fixed; inset: -50%; z-index: 40; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.22; mix-blend-mode: multiply; animation: grit 0.5s steps(6) infinite;
}
@keyframes grit {
  0% { transform: translate(0, 0); } 20% { transform: translate(-7%, 4%); } 40% { transform: translate(5%, -6%); }
  60% { transform: translate(-3%, 8%); } 80% { transform: translate(8%, 2%); } 100% { transform: translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) { body.site::after { animation: none; } }
/* pictures a little rawer: more contrast, less colour */
.work img, .case img { filter: contrast(1.12) saturate(0.82); }