/* Home page. Paper and ink, one typeface, the city as the only dark block. */

body.site {
  --paper: #f0efeb;
  --ink: #030303;
  --ink-soft: rgba(3, 3, 3, 0.56);
  --ink-line: rgba(3, 3, 3, 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; }
@media (max-width: 599px) {
  .nav { padding-top: 16px; }
  .nav-left { gap: 14px; }
  .nav-mark { width: 100px; }
  .nav a { font-size: 11px; }
  .nav .addr { display: none; }
}

/* 0. Salt: a printed render of rock salt, laid out like a mineral poster. */
.stage { position: relative; height: 280svh; }
.stage-pin { position: sticky; top: 0; height: 100svh; min-height: 620px; overflow: hidden; background: var(--bg, #000); }
.salt { position: absolute; inset: 0; color: var(--ink); display: grid; place-items: center; touch-action: pan-y; user-select: none; opacity: var(--salt, 1); }
.stage-pin.is-atom .salt { pointer-events: none; }
.salt canvas { position: absolute; inset: 0; width: 100%; height: 100%; transform: scale(var(--zoom, 1)); will-change: transform; cursor: grab; touch-action: pan-y; }
.salt.is-holding canvas { cursor: grabbing; }
.salt-title { position: absolute; left: var(--gutter); top: 88px; padding: 14px 0 0 18px; font: 400 clamp(26px, 3.4vw, 52px)/1.12 var(--ext); letter-spacing: 0.005em; }
.salt-title::before { content: ''; position: absolute; left: 0; top: 0; width: 14px; height: 14px; border-left: 2px solid currentColor; border-top: 2px solid currentColor; }
.salt .ion { position: absolute; font: 300 clamp(40px, 5vw, 72px)/1 var(--text); color: var(--ink); pointer-events: none; }
.salt .ion.plus { left: 31%; top: 24%; }
.salt .ion.minus { right: 31%; bottom: 20%; }
.salt-note { position: absolute; left: var(--gutter); bottom: 40px; max-width: 30em; font-size: 13px; line-height: 1.6; color: var(--ink-soft); }
.salt-tile { position: absolute; right: var(--gutter); bottom: 40px; display: grid; gap: 6px; justify-items: center; }
.salt-tile b { font: 400 26px/1 var(--ext); letter-spacing: 0.04em; border: 1.5px solid currentColor; padding: 10px 14px; }
.salt-tile span { font: 400 10px/1 var(--ext); letter-spacing: 0.14em; color: var(--ink-soft); }
@media (max-width: 767px) {
  .salt .ion.plus { left: 10%; top: 26%; } .salt .ion.minus { right: 10%; bottom: 24%; }
  .salt-note { right: 110px; }
}

/* 0. The element -------------------------------------------------------- */
.atom { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; touch-action: pan-y; opacity: var(--atom, 0); pointer-events: none; }
.stage-pin.is-atom .atom { pointer-events: auto; }
.atom canvas { width: min(92vw, 80svh); height: min(92vw, 80svh); }
.atom .micro { position: absolute; }
.corner-tl { top: 72px; left: var(--gutter); }
.corner-tr { top: 72px; right: var(--gutter); }
.atom-foot { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 64px; display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; }
.atom-foot .micro { position: static; }
.atom-foot .statement { margin: 0; font-size: clamp(18px, 2.2vw, 32px); }

/* 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: three across, a picture and a name. */
.grid { display: grid; gap: 40px 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.work { display: grid; gap: 10px; align-content: start; }
.work .frame { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: #dcdad4; }
.work img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 900ms var(--ease); }
.work .name { font-size: 14px; transition: color var(--t) var(--ease); }
@media (hover: hover) {
  .work:hover img { transform: scale(1.02); }
  .work:hover .name { color: var(--ink-soft); }
}

/* 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; }
.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: #dcdad4; }
.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: #dcdad4; 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(255, 164, 27, 0.35); }

/* 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); }