/* Velikosti v rem rostou se šířkou okna jako u reference:
   1 rem = 10 px při šířce 1440 px (desktop), 10,4 px při 390 px (mobil). */
html { font-size: calc(100vw / 144); -webkit-text-size-adjust: 100%; }
@media (max-width: 760px) { html { font-size: calc(100vw / 37.5); } }

:root {
  --ink: #0b0b0b;
  --paper: #ff2a2a;          /* červená Boldie — celá plocha webu */
  --mute: #8a1414;           /* černá přes červenou, ~50 % */
  --soft: #c41f1f;           /* ztlumené položky (galerie, tým, filtry) */
  --earth-glow: transparent;
  --dot: #0b0b0b;            /* čtvereček na červené */
  --dot-soft: #ffffff;       /* a na fotce */
  --m: 3.2rem;               /* okraj stránky (mobil níž) */
  --g: 1.2rem;               /* mezera ve mřížce */
  --ease: cubic-bezier(.65, 0, .35, 1);
}

* { box-sizing: border-box; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: "Setup Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400; font-size: 1.6rem; line-height: 1.12;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p, h1, h2, h3, dl, dd, figure, ol { margin: 0; }
[hidden] { display: none !important; }
sup { font-size: .42em; vertical-align: top; position: relative; top: .25em; margin-left: .08em; letter-spacing: 0; }

.grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--g); padding-inline: var(--m);
}
.meta { font-size: 1.6rem; line-height: 1.12; }
.meta-up { font-size: 1.4rem; text-transform: uppercase; letter-spacing: .02em; }
.num { color: var(--mute); font-size: 1.4rem; font-feature-settings: "tnum"; }
.body { font-size: 1.6rem; line-height: 1.15; max-width: 30em; }
.strong { font-weight: 500; }
.ph { background: var(--shade, #d9d7d2); aspect-ratio: var(--r, 4/5); }

@media (max-width: 760px) { :root { --m: 2rem; } }

/* ── wordmark ─────────────────────────────────────────────────────── */
.wordmark {
  font-weight: 500; letter-spacing: -.055em; line-height: .78;
  white-space: nowrap; display: flex; align-items: baseline;
  padding-inline: var(--m);
}
.wm-line { display: inline-block; overflow: hidden; padding: .06em .02em .02em 0; }
/* ── hlavička ─────────────────────────────────────────────────────── */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  padding-top: var(--m); padding-bottom: var(--m); align-items: baseline;
  transition: color .5s var(--ease);
}
body.header-dark .header { color: #fff; }
.logo, .mark { font-weight: 500; font-size: 1.9rem; letter-spacing: -.045em; line-height: 1; white-space: nowrap; }
.logo { grid-column: 1 / 3; visibility: hidden; }   /* na úvodu jen místo, kam logo dojede */
.logo.is-link { visibility: visible; }               /* na podstránkách normální logo */
.mark {
  position: fixed; left: 0; top: 0; z-index: 55; color: var(--ink);
  transform-origin: 0 0; transition: color .5s var(--ease);
}
body.header-dark .mark { color: #fff; }
.mark-base { display: inline-block; width: 0; height: 0; vertical-align: baseline; }
.mc { display: inline-block; }

/* menu se ukáže, až logo dojede nahoru */
.header > :not(.logo) {
  opacity: 0; transform: translateY(-.6rem); pointer-events: none;
  transition: opacity .3s var(--ease), transform .4s var(--ease);
}
body.nav-on .header > :not(.logo) { opacity: 1; transform: none; pointer-events: auto; }
body.nav-on .header > :nth-child(3) { transition-delay: .03s; }
body.nav-on .header > :nth-child(4) { transition-delay: .06s; }
.nav { grid-column: 3 / 7; }
.nav a, .header-end a, .lang a { position: relative; }
.nav a::after, .header-end > a::after, .foot-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease);
}
.nav a:hover::after, .header-end > a:hover::after, .foot-nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.comma { margin-right: .3em; }
.where { grid-column: 9 / 11; text-align: right; }
.clock { opacity: .45; margin-right: .6em; font-feature-settings: "tnum"; }
.header-end { grid-column: 11 / 13; display: flex; justify-content: flex-end; gap: 2.4rem; }
.lang { display: flex; gap: .3em; }
.lang a { opacity: .4; transition: opacity .3s; }
.lang a.on, .lang a:hover { opacity: 1; }
@media (max-width: 760px) {
  .nav { grid-column: 4 / 10; }
  .where { display: none; }
  .header-end { grid-column: 10 / 13; }
  .header-end > a { display: none; }
}


/* ── hero: fotka přes celou obrazovku ─────────────────────────────── */
.hero { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: var(--ink); color: #fff; }
.hero-pin { position: absolute; inset: 0; will-change: transform; }
.hero-img { position: absolute; inset: 0; margin: 0; }
.hero-img img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.hero-img { will-change: transform, opacity; }
/* drobný claim vpravo nad obřím logem */
.hero-tag {
  position: absolute; right: var(--m); bottom: calc(var(--mark-h, 14vw) + var(--m) + 2.4rem); max-width: 22em; margin: 0;
  font-size: 1.4rem; line-height: 1.3; text-align: right; color: #fff; pointer-events: none;
}
@media (max-width: 760px) { .hero-tag { font-size: 1rem; max-width: 16em; } }


/* ── 01 studio ────────────────────────────────────────────────────── */
.studio { padding-top: 22vh; padding-bottom: 24vh; row-gap: 0; align-items: start; }
.studio-img { grid-column: 1 / 3; grid-row: 1 / 3; --shade: #d2cec6; }
.sec-label { display: flex; gap: 1rem; align-items: baseline; font-size: 1.4rem; text-transform: uppercase; letter-spacing: .02em; }
.studio .sec-label { grid-column: 6 / 8; grid-row: 1; }
.studio-note { grid-column: 6 / 11; grid-row: 2; margin-top: 10vh; }
.statement {
  grid-column: 1 / 13; margin-top: 18vh;
  font-weight: 400; font-size: 7.2rem; line-height: 1.0; letter-spacing: -.04em;
  text-indent: 25%;
}
.statement .w { opacity: .12; }
@media (min-width: 761px) {
  .studio .statement { margin-top: 0; }
}
@media (max-width: 760px) {
  .studio-img { grid-column: 1 / 7; }
  .studio .sec-label { grid-column: 8 / 13; }
  .studio-note { grid-column: 1 / 13; grid-row: 3; margin-top: 8vh; }
  .statement { font-size: 3.6rem; text-indent: 12%; }
}

/* ── 02 práce: rozházená galerie ──────────────────────────────────── */
.works-head { padding-bottom: 10vh; align-items: baseline; }
.works-head > :nth-child(1) { grid-column: 1 / 7; }
.works-head > :nth-child(2) { grid-column: 7 / 9; }
.works-head > :nth-child(3) { grid-column: 11 / 13; text-align: right; }

.g-row { align-items: start; }
.g-row + .g-row { margin-top: var(--row-gap, 14vh); }
.g-item {
  position: relative; display: block; margin-top: var(--dy, 0);
  transition: opacity .5s var(--ease);
}
.g-media { position: relative; overflow: hidden; }
.g-media > * { display: block; width: 100%; height: auto; transition: transform 1.1s var(--ease); }
.g-item[style*="--ratio"] .g-media { aspect-ratio: var(--ratio); }
.g-item[style*="--ratio"] .g-media > * { height: 100%; object-fit: cover; }
.g-cap { flex-direction: row !important; justify-content: space-between; gap: 1rem; }
/* popisek pod fotkou: název, pod ním drobně typ a rok */
.g-cap { display: flex; flex-direction: column; margin-top: .9rem; font-size: 1.2rem; line-height: 1.25; }
.g-name { color: var(--ink); }
.g-meta { color: var(--mute); }
/* najetí: ostatní projekty ustoupí, obrázek se jemně přiblíží */
.gallery.is-hover .g-item:not(:hover) { opacity: .28; }
.g-item:hover .g-media > * { transform: scale(1.035); }

.works { padding-bottom: 16vh; overflow-x: clip; }
@media (max-width: 760px) {
  .works-head > :nth-child(1) { grid-column: 1 / 9; }
  .works-head > :nth-child(2) { display: none; }
  .g-cap { font-size: 1.3rem; }
}

/* ── 03 vize ──────────────────────────────────────────────────────── */
/* sekce začíná bíle oblakem fotek; jedna z nich naroste přes celou obrazovku
   a stane se pozadím (home.js). Výška = oblak 160vh + původní pojezd slov. */
.vision { height: 360vh; position: relative; background: var(--paper); color: #fff; overflow-x: clip; }
.vision-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--paper); }
.vision-img { z-index: 2; will-change: clip-path; }
.vision-img img { will-change: transform; }
.vision-rule, .vision-words, .vision-texts { z-index: 4; }
.cloud { position: absolute; inset: 0; z-index: 1; }
.cl-item { position: absolute; left: var(--x); top: var(--y); width: var(--w); translate: -50% -50%; opacity: calc(.3 + var(--d) * .7); will-change: transform; }
.cl-item img { display: block; width: 100%; height: auto; }
.cloud-link {
  position: absolute; z-index: 3; left: 50%; top: 32%; translate: -50% -50%; color: var(--ink); white-space: nowrap;
  font-size: 10rem; letter-spacing: -.045em; line-height: 1.05; border-bottom: 1px solid currentColor; will-change: transform, opacity;
}
.cloud-link sup { font-size: .32em; vertical-align: top; position: relative; top: .3em; margin-left: .05em; letter-spacing: 0; }
@media (max-width: 760px) {
  .cloud-link { font-size: 4.4rem; top: 26%; }
  .cl-item { width: calc(var(--w) * 2.2); }
}
.vision-img { position: absolute; inset: 0; aspect-ratio: auto; }
.vision-rule {
  position: absolute; left: var(--m); right: var(--m); top: 58%;
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: .8rem; border-bottom: 1px solid rgba(255, 255, 255, .28);
}
.vision-rule .num { color: rgba(255, 255, 255, .55); }
.vision-words { position: absolute; left: calc(var(--m) + 8.33vw); right: 0; top: calc(58% - 13vh); }
.vision-track { display: flex; gap: 6vw; white-space: nowrap; }
.vision-track span { font-size: 6rem; letter-spacing: -.045em; line-height: 1; opacity: .25; }
.vision-texts { position: absolute; left: 41.66%; top: calc(58% + 5vh); width: min(26em, 40vw); }
.vision-texts p { position: absolute; top: 0; left: 0; opacity: 0; color: rgba(255, 255, 255, .88); }
@media (max-width: 760px) {
  .vision-words { left: var(--m); }
  .vision-track span { font-size: 3.8rem; }
  .vision-texts { left: var(--m); width: calc(100% - 2 * var(--m)); }
}

/* ── patička ──────────────────────────────────────────────────────── */
/* bílá jako zbytek stránky, oddělená linkou; vše v jednom pásu, pod ním obří logo a pod logem právní řádek */
.foot { background: var(--paper); color: var(--ink); overflow: hidden; }
.foot-card {
  margin: 0 var(--m); padding: 3rem 0 0; padding-inline: 0;
  border-top: 1px solid var(--ink); align-items: start; font-size: 1.5rem; line-height: 1.4;
}
.foot-talk { grid-column: 1 / 7; }
.foot-ask, .foot-cta { font-size: 3.2rem; letter-spacing: -.03em; line-height: 1.1; }
.foot-ask { color: var(--mute); }
.foot-cta { display: inline-block; border-bottom: 1px solid currentColor; }
.foot-nav { grid-column: 7 / 9; display: flex; flex-direction: column; align-items: flex-start; }
.foot-nav a { position: relative; }
.foot-addr { grid-column: 9 / 12; }
.foot-social { grid-column: 12 / 13; }
.foot-mark { color: var(--ink); margin-top: 6rem; }
.foot-mark .wm-line { padding-bottom: 0; }
.foot-legal { padding-top: 1.2rem; padding-bottom: 1.6rem; color: var(--mute); font-size: 1.3rem; }
.foot-legal > :nth-child(1) { grid-column: 1 / 7; }
.foot-legal > :nth-child(2) { grid-column: 7 / 9; }
.foot-legal > :nth-child(3) { grid-column: 9 / 13; justify-self: end; }
.foot-legal a:hover { color: var(--ink); }
@media (max-width: 760px) {
  .foot-card { row-gap: 3rem; padding-top: 2.4rem; }
  .foot-ask, .foot-cta { font-size: 2.4rem; }
  .foot-talk { grid-column: 1 / 13; }
  .foot-nav { grid-column: 1 / 6; grid-row: span 2; }
  .foot-addr { grid-column: 6 / 13; }
  .foot-social { grid-column: 6 / 13; margin-top: -1.6rem; }
  .foot-mark { margin-top: 4rem; }
  .foot-legal { row-gap: .4rem; }
  .foot-legal > :nth-child(1) { grid-column: 1 / 13; }
  .foot-legal > :nth-child(2) { grid-column: 1 / 7; }
  .foot-legal > :nth-child(3) { grid-column: 7 / 13; justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  .statement .w { opacity: 1 !important; }
}

/* ── mobil: drobnosti, které přetékaly ────────────────────────────── */
.nav { white-space: nowrap; }
@media (max-width: 760px) {
  .logo { grid-column: 1 / 4; }
  .nav { grid-column: 4 / 10; }
    }

/* ── sdílené prvky podstránek ─────────────────────────────────────── */
.veil { position: fixed; inset: 0; z-index: 300; background: var(--paper); pointer-events: none; }
/* aktivní stránka v menu: trvalé podtržení (stejné jako při najetí) */
.nav a.on::after { transform: scaleX(1); }
.more { display: inline-block; border-bottom: 1px solid currentColor; }
.studio-more { grid-column: 6 / 11; margin-top: 8vh; justify-self: start; }
@media (max-width: 760px) { .studio-more { grid-column: 1 / 13; } }

.page-head { padding-top: 22vh; padding-bottom: 7vh; align-items: end; }
.page-title {
  grid-column: 1 / 10; font-weight: 400; font-size: 18rem; line-height: .86; letter-spacing: -.055em;
}
.page-title sup { font-size: .16em; top: .5em; color: var(--mute); letter-spacing: 0; }
.page-intro { grid-column: 10 / 13; }
@media (max-width: 760px) {
  .page-head { padding-top: 16vh; row-gap: 3rem; }
  .page-title { grid-column: 1 / 13; font-size: 8.4rem; }
  .page-intro { grid-column: 1 / 13; }
}

/* ── Práce ────────────────────────────────────────────────────────── */
.work-bar { padding-bottom: 10vh; align-items: baseline; }
.filters { grid-column: 1 / 10; font-size: 2.4rem; letter-spacing: -.02em; line-height: 1.2; }
.filters button { color: var(--soft); transition: color .3s; }
.filters button:hover, .filters button.on { color: var(--ink); }
.filters sup { font-size: .5em; }
.views { grid-column: 10 / 13; text-align: right; display: flex; justify-content: flex-end; gap: .4em; }
.views-label { color: var(--mute); margin-right: .6em; }
.views button { color: var(--soft); transition: color .3s; }
.views button.on, .views button:hover { color: var(--ink); }
.work-grid { padding-bottom: 20vh; }

.work-list { padding-bottom: 20vh; }
.wl-head { color: var(--mute); padding-bottom: 1.2rem; border-bottom: 1px solid var(--ink); }
.wl-row { padding: 1.4rem 0 1.2rem; border-bottom: 1px solid rgba(11, 11, 11, .14); align-items: baseline; transition: color .35s var(--ease); }
.wl-head > :nth-child(1), .wl-row > :nth-child(1) { grid-column: 1 / 2; }
.wl-head > :nth-child(2), .wl-row > :nth-child(2) { grid-column: 2 / 7; }
.wl-head > :nth-child(3), .wl-row > :nth-child(3) { grid-column: 7 / 9; }
.wl-head > :nth-child(4), .wl-row > :nth-child(4) { grid-column: 9 / 11; }
.wl-head > :nth-child(5), .wl-row > :nth-child(5) { grid-column: 12 / 13; text-align: right; }
.wl-name { font-size: 4rem; letter-spacing: -.035em; line-height: 1.05; }
.work-list.is-hover .wl-row:not(:hover) { color: var(--soft); }
.work-list.is-hover .wl-row:not(:hover) .num { color: var(--soft); }
.wl-preview {
  position: fixed; left: 0; top: 0; z-index: 45; width: 24rem; pointer-events: none;
  opacity: 0; transition: opacity .3s var(--ease);
}
.wl-preview.on { opacity: 1; }
.wl-preview img { display: block; width: 100%; height: auto; }
@media (max-width: 760px), (hover: none) { .wl-preview { display: none; } }
@media (max-width: 760px) {
  .filters { grid-column: 1 / 13; font-size: 2rem; }
  .views { grid-column: 1 / 13; justify-content: flex-start; margin-top: 2rem; }
  .wl-head > :nth-child(3), .wl-row > :nth-child(3), .wl-head > :nth-child(4), .wl-row > :nth-child(4) { display: none; }
  .wl-head > :nth-child(2), .wl-row > :nth-child(2) { grid-column: 2 / 11; }
  .wl-head > :nth-child(5), .wl-row > :nth-child(5) { grid-column: 11 / 13; }
  .wl-name { font-size: 2.6rem; }
}

/* ── Detail projektu ──────────────────────────────────────────────── */
.pj-head { padding-top: 16vh; padding-bottom: 5vh; align-items: end; row-gap: 3vh; }
.pj-back { grid-column: 1 / 7; color: var(--mute); transition: color .3s; }
.pj-back:hover { color: var(--ink); }
.pj-idx { grid-column: 11 / 13; text-align: right; }
.pj-title { grid-column: 1 / 13; font-weight: 400; font-size: 14rem; line-height: .9; letter-spacing: -.055em; }
.pj-sub { grid-column: 1 / 7; color: var(--mute); }
.pj-cover { overflow: hidden; margin: 0 var(--m); height: 88vh; height: 88svh; }
.pj-cover img { display: block; width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.pj-info { padding-block: 14vh 16vh; align-items: start; }
.pj-facts { grid-column: 1 / 4; display: grid; grid-template-columns: 7.5rem 1fr; row-gap: .5rem; font-size: 1.3rem; line-height: 1.3; }
.pj-facts dt { color: var(--mute); }
.pj-lead { grid-column: 6 / 12; font-size: 2.8rem; line-height: 1.22; letter-spacing: -.02em; }
.pj-facts dd { max-width: 34em; }
/* bloky obsahu projektu (data.js → blocks) */
.pj-blocks { padding-bottom: 20vh; }
.pb { align-items: end; }
.pb + .pb { margin-top: 14vh; }
.pb-fig { margin: 0; }
.pb-media { overflow: hidden; }
.pb-media img { display: block; width: 100%; height: auto; }
.pb-media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.pb-cap { margin-top: 1rem; color: var(--mute); max-width: 40em; }
.pb-copy p + p { margin-top: 1.1em; }
.pb-text .pb-copy { grid-column: 6 / 11; }
/* samostatná fotka: velikost a zarovnání */
.pb-image.is-full { padding-inline: 0; }
.pb-image.is-full .pb-fig { grid-column: 1 / -1; }
.pb-image.is-full .pb-cap { padding-inline: var(--m); }
.pb-image.is-large.to-left .pb-fig { grid-column: 1 / 10; }
.pb-image.is-large.to-center .pb-fig { grid-column: 2 / 12; }
.pb-image.is-large.to-right .pb-fig { grid-column: 4 / 13; }
.pb-image.is-medium.to-left .pb-fig { grid-column: 2 / 7; }
.pb-image.is-medium.to-center .pb-fig { grid-column: 4 / 10; }
.pb-image.is-medium.to-right .pb-fig { grid-column: 7 / 12; }
.pb-image.is-small.to-left .pb-fig { grid-column: 3 / 6; }
.pb-image.is-small.to-center .pb-fig { grid-column: 6 / 9; }
.pb-image.is-small.to-right .pb-fig { grid-column: 8 / 11; }
/* dvojice: druhá fotka posunutá, ať to nepůsobí jako tabulka */
.pb-pair { align-items: start; }
.pb-pair .n0 { grid-column: 1 / 6; }
.pb-pair .n1 { grid-column: 7 / 12; margin-top: 16vh; }
/* fotka s textem vedle */
.pb-it.on-left .pb-fig { grid-column: 1 / 8; grid-row: 1; }
.pb-it.on-left .pb-copy { grid-column: 9 / 13; grid-row: 1; }
.pb-it.on-right .pb-fig { grid-column: 6 / 13; grid-row: 1; }
.pb-it.on-right .pb-copy { grid-column: 1 / 5; grid-row: 1; }
@media (min-width: 761px) {
  .pb-it { align-items: start; }
  .pb-it .pb-copy { position: sticky; top: 32vh; }
}
.pj-next { padding-top: 10vh; padding-bottom: 14vh; border-top: 1px solid var(--ink); margin: 0 var(--m); padding-inline: 0; align-items: end; row-gap: 2vh; }
.pj-next-label { grid-column: 1 / 7; grid-row: 1; align-self: start; }
.pj-next-title { grid-column: 1 / 10; grid-row: 2; font-size: 12rem; line-height: .92; letter-spacing: -.055em; transition: transform .7s var(--ease); }
.pj-next:hover .pj-next-title { transform: translateX(2rem); }
.pj-next-title .br { display: inline-block; font-weight: 300; will-change: transform; }
.pj-next-title .br.l { margin-right: .12em; }
.pj-next-title .br.r { margin-left: .12em; }
.pj-next-meta { grid-column: 1 / 7; grid-row: 3; color: var(--mute); }
.pj-next-img { grid-column: 10 / 13; grid-row: 1 / 4; display: block; align-self: end; overflow: hidden; aspect-ratio: 4/5; }
.pj-next-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) {
  .pj-title { font-size: 6.4rem; }
  .pj-sub { grid-column: 1 / 13; }
  .pj-cover { height: 60vh; }
  .pj-facts { grid-column: 1 / 13; }
  .pj-lead { grid-column: 1 / 13; grid-row: 1; font-size: 2.2rem; margin-bottom: 6vh; }
  .pb + .pb { margin-top: 8vh; }
  .pb .pb-fig, .pb .pb-copy, .pb-text .pb-copy { grid-column: 1 / 13 !important; grid-row: auto !important; margin-top: 0; }
  .pb-image.is-medium .pb-fig, .pb-image.is-small .pb-fig { grid-column: 2 / 12 !important; }
  .pb-pair { row-gap: 4vh; }
  .pb-pair .n1 { grid-column: 4 / 13 !important; }
  .pb-it { row-gap: 3vh; }
  .pj-next-title { grid-column: 1 / 13; font-size: 5.6rem; }
  .pj-next-img { grid-column: 8 / 13; grid-row: 1; width: 100%; }
}

/* ── Studio (podle telhaclarke.com.au/studio) ─────────────────────── */
.st-intro { padding-top: 24vh; align-items: end; row-gap: 0; }
.st-statement { grid-column: 1 / 11; font-weight: 400; font-size: 5.2rem; line-height: 1.04; letter-spacing: -.035em; }
.st-scroll { grid-column: 11 / 13; justify-self: end; color: var(--soft); }
.st-intro-text { grid-column: 1 / 5; grid-row: 2; align-self: end; max-width: none; font-size: 1.9rem; line-height: 1.3; }
.st-intro-img { grid-column: 7 / 13; grid-row: 2; margin: 6vh 0 0; height: 92vh; overflow: hidden; }
.st-intro-img img { display: block; width: 100%; height: 100%; object-fit: cover; will-change: transform; }

.st-quote { padding-block: 22vh; }
.st-quote-text { grid-column: 1 / 13; font-size: 7.2rem; line-height: 1.05; letter-spacing: -.04em; text-indent: 16.6%; }
.st-quote-by { grid-column: 3 / 13; margin-top: 4vh; }

.st-team { padding-bottom: 22vh; align-items: start; }
.st-team .sec-label { grid-column: 1 / 4; }
.st-names { grid-column: 5 / 10; list-style: none; margin: 0; padding: 0; }
.st-names li { font-size: 4.8rem; line-height: 1.3; letter-spacing: -.035em; color: var(--soft); cursor: default; transition: color .35s var(--ease); }
.st-names li.on { color: var(--ink); }
.st-card { grid-column: 10 / 13; position: sticky; top: 8rem; }
.st-card-img { aspect-ratio: 3 / 4; overflow: hidden; background: rgba(11, 11, 11, .08); }
.st-card-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.st-card.empty .st-card-img img { visibility: hidden; }
.st-card-role { display: flex; justify-content: space-between; margin-top: 1rem; max-width: none; }
.st-card-contact { display: flex; flex-direction: column; margin-top: .6rem; max-width: none; color: var(--mute); text-align: center; }
.st-card-contact a:hover { color: var(--ink); }

.st-values { position: relative; height: 100vh; height: 100svh; overflow: hidden; color: #fff; }
.st-values-img { position: absolute; inset: 0; margin: 0; }
.st-values-img img { display: block; width: 100%; height: 120%; margin-top: -10%; object-fit: cover; will-change: transform; }
.st-values-label { position: absolute; z-index: 1; left: var(--m); top: 2.4rem; }
.st-values-label .num { color: rgba(255, 255, 255, .6); }
.st-values-text { position: absolute; z-index: 1; right: var(--m); bottom: 4rem; width: 25%; max-width: none; font-size: 1.9rem; line-height: 1.3; }
.st-values-text p + p { margin-top: 1em; }
.st-corner { position: absolute; z-index: 1; top: 1.2rem; width: 1rem; height: 1rem; border-top: 1px solid #fff; }
.st-corner.tl { left: var(--m); border-left: 1px solid #fff; }
.st-corner.tr { right: var(--m); border-right: 1px solid #fff; }

@media (max-width: 760px) {
  .st-intro { padding-top: 16vh; }
  .st-statement { grid-column: 1 / 13; font-size: 3.6rem; }
  .st-scroll { display: none; }
  .st-intro-text { grid-column: 1 / 13; grid-row: auto; margin-top: 5vh; font-size: 1.7rem; }
  .st-intro-img { grid-column: 1 / 13; grid-row: auto; height: 60vh; }
  .st-quote { padding-block: 14vh; }
  .st-quote-text { font-size: 3.4rem; text-indent: 12%; }
  .st-team .sec-label, .st-names { grid-column: 1 / 13; }
  .st-names { margin-top: 4vh; }
  .st-names li { font-size: 3rem; }
  .st-card { display: none; }
  .st-values-text { width: auto; left: var(--m); font-size: 1.7rem; }
}

/* ── fotky v sekcích úvodu ────────────────────────────────────────── */
.studio-img { aspect-ratio: 4/5; overflow: hidden; }
.studio-img img, .vision-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vision-img { position: absolute; inset: 0; margin: 0; }

/* ── čtverečky (u bluedotu modré tečky) ──────────────────────────────────────────────────── */
/* hvězda: na chvíli se rozsvítí na prázdném místě */
.bd-star, .bd-click {
  position: absolute; z-index: 30; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  border-radius: 0; background: var(--dot); pointer-events: none; opacity: 0;
}
.bd-star { animation: bd-twinkle var(--t, 6s) ease-in-out forwards; }
.bd-click { animation: bd-pop 2.4s cubic-bezier(.2, .7, .2, 1) forwards; }
.bd-star.on-dark, .bd-click.on-dark { background: var(--dot-soft); box-shadow: 0 0 6px 1px var(--earth-glow); }
@keyframes bd-twinkle {
  0% { opacity: 0; transform: scale(.3); }
  22% { opacity: 1; transform: scale(1); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: scale(.5); }
}
@keyframes bd-pop {
  0% { opacity: 0; transform: scale(2.2); }
  12% { opacity: 1; transform: scale(1); }
  60% { opacity: 1; }
  100% { opacity: 0; }
}
/* rozseté tečky: stojí na místě, část pomalu dýchá */
.bd-seed {
  position: absolute; z-index: 5; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  border-radius: 0; background: var(--dot); pointer-events: none; will-change: transform;
}
.bd-seed.on-dark { background: var(--dot-soft); box-shadow: 0 0 6px 1px var(--earth-glow); }
.bd-seed.breathe { animation: bd-breathe 7s ease-in-out var(--d) infinite; }
@keyframes bd-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .bd-seed.breathe { animation: none; } }
/* tečka uprostřed závoje při přechodu mezi stránkami */
.veil::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px;
  border-radius: 0; background: var(--dot);
}


/* ── Studio: služby ───────────────────────────────────────────────── */
.st-services { padding-block: 22vh; align-items: start; row-gap: 8vh; }
.st-services .sec-label { grid-column: 1 / 4; }
.st-services-intro { grid-column: 4 / 13; font-size: 5.2rem; line-height: 1.04; letter-spacing: -.035em; }
.st-services-list { grid-column: 1 / 13; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--g); border-top: 1px solid var(--ink); padding-top: 1.6rem; }
.st-svc h3 { font-weight: 400; font-size: 2.8rem; letter-spacing: -.03em; line-height: 1.05; margin: 1.2rem 0 2.4rem; }
.st-svc .body { font-size: 1.5rem; line-height: 1.3; margin-bottom: 2.4rem; padding-right: 2rem; }
.st-svc ul { list-style: none; margin: 0; padding: 0; font-size: 1.4rem; line-height: 1.45; }
.st-svc li { border-top: 1px solid rgba(11, 11, 11, .2); padding: .5rem 0 .4rem; }

/* ── Studio: klienti ─────────────────────────────────────────────── */
.st-clients { padding-block: 22vh; align-items: start; }
.st-clients .sec-label { grid-column: 1 / 4; }
.st-client-list { grid-column: 4 / 13; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.st-client-list li { border-bottom: 1px solid rgba(11, 11, 11, .2); transition: color .35s var(--ease); }
.st-client-list a, .st-client-list li > span { display: grid; grid-template-columns: 1fr 14rem 18rem; align-items: center; column-gap: var(--g); padding: 1.2rem 0 1rem; }
.st-c-name { font-size: 4.8rem; letter-spacing: -.035em; line-height: 1.05; }
.st-c-field { color: var(--mute); font-size: 1.4rem; }
.st-c-logo { width: 18rem; height: 7rem; object-fit: contain; object-position: right center; justify-self: end; }
.st-client-list.is-hover li:not(:hover) { color: var(--soft); }
.st-client-list.is-hover li:not(:hover) .st-c-logo { opacity: .35; }

@media (max-width: 760px) {
  .st-services .sec-label, .st-clients .sec-label { grid-column: 1 / 13; }
  .st-services-intro { grid-column: 1 / 13; font-size: 3rem; }
  .st-services-list { grid-column: 1 / 13; grid-template-columns: 1fr; row-gap: 6vh; }
  .st-client-list { grid-column: 1 / 13; }
  .st-client-list a, .st-client-list li > span { grid-template-columns: minmax(0, 1fr); row-gap: .2rem; }
  .st-c-logo { display: none; }
  .st-c-name { font-size: 3rem; }
  .st-svc h3 { margin-bottom: 1.6rem; }
}

/* ── mobil: hlavička s delším logem „Boldie Collective" ───────────── */
@media (max-width: 760px) {
  .logo, .mark { font-size: 1.55rem; }
  .logo { grid-column: 1 / 6; }
  .nav { grid-column: 6 / 10; }
  .header-end { grid-column: 10 / 13; }
}

/* mobil: projekty pod sebou s mezerou, hlavička sekce na jednom řádku */
@media (max-width: 760px) {
  .g-row.grid { row-gap: 7vh; }
  .works-head.grid { display: flex; justify-content: space-between; gap: 1rem; }
}

/* ── 02 práce na úvodu: vodorovný pás (home.js ho přišpendlí a posouvá) ── */
.works:has(.h-strip) {
  height: 100vh; height: 100svh; padding: 0; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
}
.works:has(.h-strip) .works-head { padding-bottom: 4vh; padding-top: 6vh; }
.h-track { display: flex; align-items: flex-start; gap: calc(var(--g) * 2); padding-inline: var(--m); width: max-content; }
.h-item { flex: none; }
.h-item .g-media { height: 68vh; height: 68svh; }
.h-item .g-media > * { height: 100%; width: auto; max-width: none; transform: scale(1.14); }
.h-item:hover .g-media > * { transform: scale(1.18); }
.h-item .g-cap { font-size: 1.3rem; }
.h-item .g-name .num { font-size: inherit; margin-right: .6em; }
.works-count { font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .h-item .g-media { height: 58svh; width: 82vw; }
  .h-item .g-media > * { width: 100%; object-fit: cover; }
  .h-track { gap: var(--g); }
}
@media (prefers-reduced-motion: reduce) {
  .works:has(.h-strip) { height: auto; padding-block: 12vh; }
  .h-strip { overflow-x: auto; }
}

/* detail projektu má vždy bílé pozadí, černé písmo a šedé popisky */
body[data-page="project"] {
  --paper: #ffffff;
  --mute: #7a7a7a;
  --soft: #b8b8b8;
  --dot: #0b0b0b;
  background: var(--paper);
}

/* ── detail projektu: mozaika od kraje ke kraji (podle bureauborsche.com) ── */
.mz-hero { display: grid; grid-template-columns: repeat(2, 1fr); height: 100vh; height: 100svh; }
.mz-hero.n1 { grid-template-columns: 1fr; }
.mz-hero.n3 { grid-template-columns: repeat(3, 1fr); }
.mz-hero .mz-cell { height: 100%; }
.mz-cell { margin: 0; overflow: hidden; position: relative; background: var(--soft); }
.mz-cell img, .mz-cell video { display: block; width: 100%; height: 100%; object-fit: cover; }
.mz-row { display: flex; }
.mz-cell.is-embed { flex: 1 1 auto; background: #fff; }
.mz-cell iframe { display: block; width: 100%; height: 100%; border: 0; pointer-events: none; }
.mz-row .mz-cell:only-child { flex: 1 1 auto; }
/* jediná fotka v řadě: vždy celá šířka, výška podle fotky */
.mz-row .mz-cell:only-child:not(.is-embed):not(.is-video) { flex: 0 0 100% !important; aspect-ratio: auto !important; }
.mz-row .mz-cell:only-child:not(.is-embed):not(.is-video) img { height: auto; }
/* pás s textem mezi úvodní dvojicí a mozaikou */
.pj-band { padding: 4.8rem var(--m) 9rem; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--g); row-gap: 4rem; }
.pj-band-head { grid-column: 1 / -1; }
.pj-band .pj-title { font-size: 4.4rem; line-height: 1.02; letter-spacing: -.035em; font-weight: 400; }
.pj-band .pj-sub { font-size: 4.4rem; line-height: 1.02; letter-spacing: -.035em; color: var(--mute); }
.pj-band-body { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: start; }
.pj-copy { grid-column: 1 / 6; font-size: max(13px, 1.3rem); line-height: 1.45; }
.pj-band .pj-lead { font-size: inherit; line-height: inherit; margin: 0; }
.pj-band .pj-texts { margin-top: .9em; }
.pj-texts p + p { margin-top: .9em; }
.pj-band .pj-facts { display: block; grid-column: 7 / 13; margin: 0; font-size: max(12px, 1.15rem); line-height: 1.45; }
.pj-row { display: grid; grid-template-columns: max(84px, 9rem) 1fr; column-gap: 1.6rem; padding-block: 1rem; border-top: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); margin: 0; }
.pj-facts .pj-row:last-child { border-bottom: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); }
.pj-lab { color: var(--mute); }
.pj-val { margin: 0; min-width: 0; }
.pj-cr { list-style: none; margin: 0; padding: 0; }
.pj-cr li span + span { color: var(--mute); }
.mz { padding-bottom: 14vh; }
@media (max-width: 760px) {
  .mz-hero, .mz-hero.n3 { grid-template-columns: 1fr; height: auto; }
  .mz-hero .mz-cell { height: 70svh; }
  .mz-row { flex-wrap: wrap; }
  .mz-row .mz-cell { flex: 1 1 100% !important; }
  .pj-band { padding: 3.2rem var(--m) 5rem; row-gap: 3rem; }
  .pj-band .pj-title, .pj-band .pj-sub { font-size: 3.2rem; }
  .pj-copy, .pj-band .pj-facts { grid-column: 1 / -1; font-size: 1.4rem; }
  .pj-band .pj-facts { margin-top: 3rem; font-size: 1.3rem; }
}
}

/* Práce: na mobilu taky dva vedle sebe, popisek pod sebou */
@media (max-width: 760px) {
  .work-grid .g-row.grid { column-gap: 1rem; }
  .work-grid .g-cap { flex-direction: column !important; gap: 0; font-size: 1.15rem; }
}

/* ── projekty: dlaždice dva vedle sebe, od kraje ke kraji, bez mezer ── */
.gallery:has(.tiles), .work-grid:has(.tiles) { padding: 0; margin: 0; }
.works { padding-bottom: 0; }
.works-head { padding-bottom: 4rem; }
.work-grid { padding-bottom: 0; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; }
.tile { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #111; color: #fff; }
.tile img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.tile:hover img { transform: scale(1.05); }
.tile-name { position: absolute; left: 2rem; bottom: 1.8rem; font-size: 1.3rem; line-height: 1.2; color: #fff; }
.gallery.is-hover .tile:not(:hover), .work-grid.is-hover .tile:not(:hover) { opacity: 1; }
.tile img { transition: transform .9s var(--ease); }
@media (max-width: 760px) {
  .tile { aspect-ratio: 4 / 5; }
  .tile-name { left: 1rem; bottom: 1rem; font-size: 1.1rem; }
}

/* úvod: patička vjede do fotky s bagetou — průhledná, bílé písmo, fotka zůstává pod ní */
body[data-page="home"] .foot {
  position: relative; z-index: 6; margin-top: -100vh; margin-top: -100svh; min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end; background: transparent; color: #fff; pointer-events: none;
}
body[data-page="home"] .foot > * { pointer-events: auto; }
body[data-page="home"] .foot-ask, body[data-page="home"] .foot-legal, body[data-page="home"] .foot-legal a { color: rgba(255, 255, 255, .72); }
body[data-page="home"] .foot-mark, body[data-page="home"] .foot a, body[data-page="home"] .foot-legal a:hover { color: #fff; }
body[data-page="home"] .foot-card { border-color: rgba(255, 255, 255, .5); }

/* detail projektu: články o projektu (pod fotkami) */
.pj-press { padding: 10vh var(--m) 4vh; }
.pj-press-label { font-weight: 400; font-size: 4.4rem; letter-spacing: -.035em; line-height: 1; margin: 0 0 3rem; }
.pj-press-label sup { font-size: .35em; vertical-align: top; position: relative; top: .3em; margin-left: .1em; letter-spacing: 0; }
.pj-press-list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); }
.pj-press-list a {
  display: grid; grid-template-columns: 2fr 6fr 1fr 2rem; gap: 2rem; align-items: baseline;
  padding-block: 1.4rem; border-top: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); font-size: max(13px, 1.4rem);
  transition: padding .4s var(--ease);
}
.pj-press-list a:hover { padding-left: 1rem; }
.pp-src, .pp-date { color: var(--mute); }
.pp-date { font-variant-numeric: tabular-nums; text-align: right; }
.pp-arrow { text-align: right; }
@media (max-width: 760px) {
  .pj-press-label { font-size: 3rem; }
  .pj-press-list a { grid-template-columns: 1fr auto; row-gap: .3rem; }
  .pp-src { grid-column: 1; grid-row: 1; } .pp-date { grid-column: 2; grid-row: 1; }
  .pp-title { grid-column: 1 / -1; grid-row: 2; } .pp-arrow { display: none; }
}

/* výkon: dlaždice a buňky mozaiky jsou samostatné celky (překreslení zůstane uvnitř) */
.tile, .mz-cell { contain: paint; }
.mz-cell iframe { contain: strict; }

/* ── Studio v2: velká typografie, fotky od kraje ke kraji ─────────── */
.sx-intro { padding: calc(var(--head-h, 7rem) + 14vh) var(--m) 10vh; }
.sx-title { font-weight: 400; font-size: 13rem; line-height: .92; letter-spacing: -.055em; margin: 0; max-width: 11em; text-wrap: balance; }
.sx-cols { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--g); margin-top: 8vh; }
.sx-lead { grid-column: 7 / 12; font-size: 2.2rem; line-height: 1.25; letter-spacing: -.015em; margin: 0; }
.sx-note { grid-column: 1 / 5; grid-row: 1; align-self: end; color: var(--mute); font-size: max(12px, 1.3rem); margin: 0; max-width: 28em; }
.sx-photo { margin: 0; overflow: hidden; }
.sx-photo img { display: block; width: 100%; height: auto; will-change: transform; }
.sx-label { font-weight: 400; font-size: 4.4rem; letter-spacing: -.035em; line-height: 1; margin: 0 0 4rem; padding-inline: var(--m); }
.sx-label sup { font-size: .35em; vertical-align: top; position: relative; top: .3em; margin-left: .1em; letter-spacing: 0; }
/* tým: čtyři vedle sebe, bez mezer, jméno bíle vlevo dole */
.sx-team { padding-top: 16vh; }
.sx-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.sx-person { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #111; contain: paint; }
.sx-person img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; transition: transform .9s var(--ease); }
.sx-person:hover img { transform: scale(1.05); }
.sx-name { position: absolute; left: 2rem; bottom: 1.8rem; right: 2rem; color: #fff; font-size: 1.3rem; line-height: 1.25; display: flex; flex-direction: column; }
.sx-role { opacity: .7; }
/* přístup: hodnoty velkým písmem pod sebou */
.sx-approach { padding: 18vh 0 4vh; }
.sx-values { list-style: none; margin: 0; padding: 0 var(--m); border-top: 1px solid var(--ink); }
.sx-values li { display: flex; align-items: baseline; gap: 3rem; font-size: 8rem; line-height: 1.05; letter-spacing: -.045em; padding-block: 1.2rem; border-bottom: 1px solid var(--ink); overflow: hidden; }
.sx-num { font-size: 1.3rem; letter-spacing: 0; color: var(--mute); font-variant-numeric: tabular-nums; min-width: 3rem; }
/* citát */
.sx-quote { padding: 16vh var(--m); display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--g); }
.sx-quote-text { grid-column: 3 / 12; font-size: 4.4rem; line-height: 1.1; letter-spacing: -.035em; margin: 0; text-wrap: balance; }
.sx-quote-by { grid-column: 3 / 12; margin: 3rem 0 0; color: var(--mute); font-size: max(12px, 1.3rem); }
/* klienti */
.sx-clients { padding-bottom: 18vh; }
.sx-client-list { list-style: none; margin: 0; padding: 0 var(--m); border-top: 1px solid var(--ink); }
.sx-client-list li > * { display: grid; grid-template-columns: 6fr 6fr; align-items: center; gap: 2rem; padding-block: 1.6rem; border-bottom: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); }
.sx-c-name { font-size: 3.2rem; letter-spacing: -.03em; line-height: 1; transition: transform .5s var(--ease); }
.sx-client-list a:hover .sx-c-name { transform: translateX(1.2rem); }
.sx-c-field { color: var(--mute); font-size: max(12px, 1.3rem); }
.sx-c-logo { justify-self: end; height: 3.6rem; display: flex; align-items: center; }
.sx-c-logo img { height: 100%; width: auto; max-width: 18rem; object-fit: contain; display: block; }
@media (max-width: 760px) {
  .sx-intro { padding: calc(var(--head-h, 7rem) + 8vh) var(--m) 6vh; }
  .sx-title { font-size: 5.6rem; }
  .sx-cols { display: flex; flex-direction: column; gap: 3rem; margin-top: 4vh; }
  .sx-lead { font-size: 1.8rem; }
  .sx-label { font-size: 3rem; margin-bottom: 2.4rem; }
  .sx-grid { grid-template-columns: repeat(2, 1fr); }
  .sx-name { left: 1rem; bottom: 1rem; right: 1rem; font-size: 1.15rem; }
  .sx-values li { font-size: 3.6rem; gap: 1.6rem; }
  .sx-quote-text, .sx-quote-by { grid-column: 1 / -1; }
  .sx-quote-text { font-size: 2.8rem; }
  .sx-client-list li > * { grid-template-columns: 1fr auto; }
  .sx-c-field { display: none; }
  .sx-c-name { font-size: 2.2rem; }
}

.sx-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.sx-intro .sx-cols { margin-top: 0; }