/* ============================================================
   KOLM KOMA ARHITEKTID — site stylesheet
   Frozen from the approved "C" front-page prototype (hero header)
   and the Ringmaja case-study template. One system, three page
   types: front (body.front), case study (body.project), text page.
   ============================================================ */
:root {
  --ink: #1a1a1a;
  --ink-soft: #555;
  --hairline: #e3e0da;
  --paper: #fff;
  --paper-warm: #f7f5f1;
  --accent: #1a1a1a;
  --measure: 680px;
  --wide: 1280px;
  --pad: clamp(20px, 4vw, 56px);
  --bar-h: 76px;
  /* height of a fixed banner above the page, if the host puts one there
     (Voog's trial ribbon). site.js measures it; 0 everywhere else. */
  --ribbon-h: 0px;
  /* how much of the window an upright photo in the body text may take. The
     header is 76px, so 76vh leaves the top of the next block in sight and the
     photo never has to be scrolled to be seen whole. */
  --kk-tall-h: 76vh;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }
body {
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 400;
  color: var(--ink); background: var(--paper);
  font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased;
}
img { display: block; width: 100%; height: auto; }
a { color: inherit; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* ---------- header ---------- */
.bar {
  position: sticky; top: var(--ribbon-h); z-index: 50;
  display: flex; justify-content: space-between; align-items: center;
  height: var(--bar-h); padding: 0 var(--pad);
  background: var(--paper);
}
.logo { display: block; position: relative; width: 232.3px; height: 26.4px; }
.logo img { position: absolute; top: 0; left: 0; width: auto; transition: opacity 300ms ease, filter 300ms ease; }
.logo .lg-full { height: 26.4px; }
.logo .lg-mark { height: 26.4px; opacity: 0; pointer-events: none; }
.bar nav { display: flex; gap: 26px; font-size: 14px; font-weight: 600; }
.bar nav a {
  text-decoration: none; padding: 9px 0 6px;
  border-bottom: 3px solid transparent; color: #8a8a8a;
  transition: color .3s ease, border-color .3s ease;
}
.bar nav a:hover { color: var(--ink); }
.bar nav a[aria-current] { color: var(--ink); border-bottom-color: var(--ink); }
.burger { display: none; }

/* front page: the bar floats transparently over the hero slideshow and only
   turns solid on the way back up (see site.js) */
body.front .bar {
  position: fixed; top: var(--ribbon-h); left: 0; right: 0;
  background: transparent;
  transition: background-color .3s ease, transform .3s ease;
}
body.front .bar.solid { background: var(--paper); }
body.front .bar.away { transform: translateY(calc(-100% - var(--ribbon-h))); }
body.front .logo { transition: width 300ms ease; }
body.front .logo img { filter: invert(1); }
body.front .bar.solid .logo img, body.front.menu-open .logo img { filter: none; }
body.front .bar nav a { color: rgba(255,255,255,.62); }
body.front .bar nav a:hover { color: #fff; }
body.front .bar nav a[aria-current] { color: #fff; border-bottom-color: #fff; }
body.front .bar.solid nav a { color: #8a8a8a; }
body.front .bar.solid nav a:hover { color: var(--ink); }
body.front .bar.solid nav a[aria-current] { color: var(--ink); border-bottom-color: var(--ink); }

@media (max-width: 820px) {
  /* Apple-scale mobile header: 48px bar, ~17px mark, hairline burger */
  :root { --bar-h: 48px; }
  .logo { width: 30.6px; height: 17px; }
  .logo .lg-full { display: none; }
  .logo .lg-mark { position: static; height: 100%; opacity: 1; pointer-events: auto; }
  .bar nav { display: none; }
  .burger {
    /* place-content packs the three line rows together mid-button;
       place-items would spread them across the full 44px height */
    display: grid; place-content: center; justify-items: center; gap: 0;
    width: 44px; height: 44px; border: 0; background: none; cursor: pointer;
    margin-right: -13px; /* optical: align lines, not the 44px touch box, to --pad */
  }
  .burger span {
    display: block; width: 18px; height: 1.5px; background: var(--ink); margin: 2.75px 0;
    transition: transform .25s ease, opacity .25s ease, background-color .3s ease;
  }
  body.front .burger span { background: #fff; }
  body.front .bar.solid .burger span, body.front.menu-open .burger span { background: var(--ink); }
  body.menu-open .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.menu-open .burger span:nth-child(2) { opacity: 0; }
  body.menu-open .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .mobile-menu {
    position: fixed; inset: var(--bar-h) 0 0 0; z-index: 40;
    background: var(--paper);
    display: none; flex-direction: column; gap: 0;
    padding: 28px var(--pad);
  }
  body.menu-open .mobile-menu { display: flex; }
  .mobile-menu a {
    text-decoration: none; font-size: 26px; font-weight: 600; letter-spacing: -0.01em;
    line-height: 1.35; padding: 7px 0;
  }
  .mobile-menu a[aria-current] { text-decoration: underline; text-underline-offset: 6px; }
  body.menu-open { overflow: hidden; }
  body.menu-open .bar { background: var(--paper); }
}
@media (min-width: 821px) { .mobile-menu { display: none !important; } }

/* ---------- front page: hero slideshow ---------- */
.featured a { position: relative; display: block; text-decoration: none; overflow: hidden; background: #111; }
.featured a::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: clamp(90px, 18vh, 160px);
  background: linear-gradient(rgba(0,0,0,.35), transparent); z-index: 1; pointer-events: none;
}
.featured img { aspect-ratio: 21 / 9; object-fit: cover; opacity: .97; transition: transform 6s cubic-bezier(.19,1,.22,1); }
.featured .slide { position: absolute; inset: 0; height: 100%; opacity: 0; transition: opacity 1.2s ease, transform 6s cubic-bezier(.19,1,.22,1); }
.featured .slide.show { opacity: .97; }
.featured a:hover img { transform: scale(1.025); }
.featured .fl {
  position: absolute; inset: auto 0 0 0; padding: clamp(20px, 3.5vw, 44px) var(--pad);
  background: linear-gradient(transparent, rgba(0,0,0,.55));
  color: #fff; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px;
  transition: opacity .9s ease;
}
.featured .fl b { display: block; font-size: clamp(22px, 3.2vw, 40px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.featured .fl small { font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; opacity: .85; }
@media (max-width: 700px) { .featured img { aspect-ratio: 4 / 3; } }

/* ---------- works grid ---------- */
/* The grid is page chrome, not prose: it runs the full width and lines up with
   the header — left edge on the logo, right edge on the last menu item — rather
   than sitting inside the --wide measure the case studies use. */
.works {
  max-width: none; padding: clamp(48px, 8vh, 90px) var(--pad) 0;
  scroll-margin-top: var(--bar-h);
}
.works-head {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  margin-bottom: 30px; position: sticky; top: var(--ribbon-h); z-index: 40;
  background: var(--paper); min-height: var(--bar-h);
}
.works-head h1 { font-size: clamp(24px, 3.2vw, 38px); font-weight: 800; letter-spacing: -0.02em; }
.filter { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.filter .kk-filter-row { display: contents; }
.filter button {
  font: 600 17px/1.2 "Manrope", sans-serif;
  padding: 9px 0 6px; border: 0; border-bottom: 3px solid transparent;
  background: none; color: #8a8a8a; cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}
.filter button:hover { color: var(--ink); }
.filter button.on { color: var(--ink); border-bottom-color: var(--ink); }
.grid { display: grid; gap: 28px; grid-template-columns: repeat(6, 1fr); }
.card { position: relative; display: block; text-decoration: none; grid-column: span 2; }
.card .thumb { display: block; overflow: hidden; background: var(--paper-warm); }
.card.big { grid-column: span 3; }
.card img { aspect-ratio: 4 / 3; object-fit: cover; transition: transform 1s ease; }
.card.big img { aspect-ratio: 16 / 10; }
.card:hover img { transform: scale(1.028); transition: transform 6s cubic-bezier(.15,.8,.2,1); }
.card .ov { display: flex; justify-content: flex-start; align-items: baseline; gap: 10px; padding: 12px 0 0; }
.card .ov b { font-size: 19px; font-weight: 800; letter-spacing: -0.015em; }
.card .ov span { font-size: 14px; font-weight: 400; color: var(--ink-soft); flex: none; }
@media (max-width: 900px) {
  .works-head h1 { display: none; }
  .works-head { position: static; min-height: 0; }
  .works { padding-top: 30px; } /* hero-to-filter gap = filter-to-works gap */
  .filter { display: block; }
  .filter .kk-filter-row { display: flex; align-items: flex-start; gap: 2ch; margin: 0; }
  .filter button { flex: 0 0 auto; }
  .filter button { font-size: clamp(16px, 5.1vw, 20px); padding: 8px 0 6px; }
  .filter button:not(.on) { color: #9c9c9c; }
  .grid { gap: 14px; grid-template-columns: 1fr 1fr; }
  .card, .card.big { grid-column: span 1; }
  .card img, .card.big img { aspect-ratio: 4 / 3; }
  .card .ov { display: block; padding: 8px 0 2px; }
  .card .ov b { display: block; font-size: 15.5px; }
  .card .ov span { display: block; margin-top: 1px; font-size: 12px; }
}

/* ---------- case study + text pages: shared scaffolding ---------- */
.hero { padding: clamp(20px, 4vh, 44px) var(--pad) 0; max-width: var(--wide); margin: 0 auto; }
.hero-head {
  display: grid; grid-template-columns: auto 1fr;
  gap: clamp(28px, 5vw, 90px); align-items: start;
  margin-bottom: clamp(48px, 8vh, 88px);
}
.hero h1 { font-size: clamp(44px, 8.5vw, 116px); font-weight: 800; letter-spacing: -0.035em; line-height: .98; }
.hero.tight h1 { font-size: clamp(38px, 6vw, 84px); }
/* at display size the left side bearing of the first letter reads as an indent;
   a hair of negative offset sets it against the same edge as the text below */
.project .hero-head h1 { position: relative; left: -0.04em; }
.hero .sub {
  font-size: clamp(18px, 2.2vw, 26px); font-weight: 300;
  max-width: 30ch; line-height: 1.35; color: var(--ink-soft); justify-self: end;
  /* top of sub's first line sits on the H1 lowercase (x-height) top line */
  padding-top: calc(clamp(44px, 8.5vw, 116px) * 0.340 - 0.36em);
}
.hero-head.one { grid-template-columns: 1fr; gap: 0; margin-bottom: clamp(28px, 5vh, 52px); }
.hero-head.one .kicker { margin-bottom: 14px; }
@media (max-width: 820px) {
  .hero-head { grid-template-columns: 1fr; gap: 16px; }
  .hero-head.one { gap: 0; }
  .hero .sub { justify-self: start; padding-top: 0; }
}
.hero-media { max-width: var(--wide); margin: 0 auto; padding: 0 var(--pad); }
.hero-media.bleed { max-width: none; padding: 0; }
.hero-media img { object-fit: cover; }
.hero-media.bleed img { aspect-ratio: 21 / 9; }
.hero-media.crop img { aspect-ratio: 4 / 3; }
@media (max-width: 700px) { .hero-media.bleed img { aspect-ratio: 4 / 3; } }

.facts {
  max-width: var(--wide); margin: 0 auto; padding: 34px var(--pad) 10px;
  display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 26px 56px;
}
.fact .n { font-size: clamp(18px, 2.2vw, 26px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.fact .n.nowrap { white-space: nowrap; }
.fact .l { margin-top: 6px; }
/* one shared style for every small uppercase label on the page */
.fact .l, .plan h3, .drawings h4, .kicker {
  font-size: 12px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-soft);
}

section { max-width: var(--wide); margin: 0 auto; padding: clamp(56px, 10vh, 120px) var(--pad) 0; }
section.tight { padding-top: clamp(32px, 6vh, 64px); }
.sec-head { display: flex; align-items: baseline; gap: 18px; margin-bottom: clamp(28px, 5vh, 52px); }
.sec-head h2 { font-size: clamp(26px, 3.6vw, 44px); font-weight: 800; letter-spacing: -0.025em; }

.prose { max-width: var(--measure); }
.prose p + p, .prose p + h3, .prose ul + p { margin-top: 1.2em; }
.prose h3 { font-size: 20px; font-weight: 800; letter-spacing: -0.015em; margin-top: 1.8em; }
.prose ul { margin-left: 1.1em; }
.prose li { margin-top: .3em; }
.prose a { text-decoration: underline; text-decoration-thickness: 1px; }
.prose a:hover { color: var(--ink-soft); }
.lede { font-size: clamp(18px, 2.2vw, 26px); font-weight: 300; line-height: 1.45; letter-spacing: -0.01em; max-width: 26ch; }
.lede strong { font-weight: 700; }

/* ---------- intro: text + credits table side by side ---------- */
.intro-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 420px); gap: clamp(36px, 6vw, 110px); align-items: start; }
@media (max-width: 900px) { .intro-cols { grid-template-columns: 1fr; } }
.credits { border-top: 2px solid var(--ink); padding-top: 6px; }
.credits div { display: flex; justify-content: space-between; gap: 18px; padding: 11px 0; border-bottom: 1px solid var(--hairline); font-size: 17px; }
.credits dt { color: var(--ink-soft); font-weight: 400; }
.credits dd { font-weight: 700; text-align: right; }

/* ---------- challenges / principles (Ringmaja) ---------- */
.challenge-grid { display: grid; gap: clamp(28px, 4vw, 44px); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.challenge { border-top: 2px solid var(--ink); padding-top: 18px; }
.challenge b { display: block; font-size: 17px; font-weight: 800; line-height: 1.4; max-width: 30ch; }
.challenge span { display: block; margin-top: 8px; font-size: 17px; color: var(--ink-soft); max-width: 34ch; }
.questions { margin-top: clamp(56px, 10vh, 120px); }
.questions .challenge p { font-size: 17px; color: var(--ink-soft); max-width: 34ch; }
.principles { display: grid; gap: clamp(24px, 3.5vw, 40px); grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.principle h3 { font-size: 17px; font-weight: 800; margin: 0 0 8px; letter-spacing: -0.01em; }
.principle p { font-size: 17px; color: var(--ink-soft); }

/* ---------- image story blocks ---------- */
.story { display: grid; gap: 14px; margin-top: clamp(36px, 6vh, 64px); }
.story:first-of-type { margin-top: 0; }
.story .full img { object-fit: cover; }
.story.crop .full img { aspect-ratio: 16 / 8.5; }
.duo { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; align-items: start; }
.duo.w2-1 { grid-template-columns: 2fr 1fr; }
.duo.w1-2 { grid-template-columns: 1fr 2fr; }
/* .fit sizes each cell proportionally to its aspect ratio, so a pair of
   photos with different proportions still ends up exactly the same height */
.duo.fit { display: flex; }
.duo.fit > span { display: block; min-width: 0; flex-basis: 0; }
@media (max-width: 700px) {
  .duo, .duo.w2-1, .duo.w1-2 { grid-template-columns: 1fr; }
  .duo.fit { flex-direction: column; }
}
.story.crop .duo img { aspect-ratio: 4 / 3; object-fit: cover; height: 100%; }
.caption { display: flex; gap: 12px; align-items: baseline; max-width: 760px; padding-top: 4px; }
/* Inline SVG with fixed w+h: img-with-viewBox sizing is unreliable in Safari (stretches). */
.caption .comma { flex: none; width: 7px; height: 14px; color: var(--ink); transform: translateY(3px); }
.caption p { font-size: 14px; color: var(--ink-soft); line-height: 1.55; }
.caption p b { color: var(--ink); font-weight: 700; letter-spacing: .01em; }
.quad { display: grid; gap: 14px; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .quad { grid-template-columns: repeat(2, 1fr); } }
.quad figure img { aspect-ratio: 3 / 4; object-fit: cover; }
.quad figcaption { font-size: 14px; color: var(--ink-soft); padding-top: 8px; line-height: 1.5; }
figcaption { font-size: 14px; color: var(--ink-soft); padding-top: 8px; line-height: 1.5; }

.embed { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; background: var(--paper-warm); }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- architectural drawings + plans ---------- */
.duo.drawings { grid-template-columns: 1.6fr 1fr; align-items: start; gap: 28px; }
@media (max-width: 700px) { .duo.drawings { grid-template-columns: 1fr; } }
.drawings figure { display: grid; gap: 18px; align-content: start; }
.drawings img { aspect-ratio: auto; height: auto; }
.drawings .legend { grid-template-columns: repeat(2, auto); }
.plan { margin-top: clamp(36px, 6vh, 60px); }
.plan h3 { margin-bottom: 16px; }
.legend { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 10px 48px; margin-top: 14px; }
.legend span { font-size: 14px; color: var(--ink-soft); display: flex; align-items: center; gap: 8px; }
.legend b { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 10.5px; font-weight: 700; }
@media (max-width: 700px) { .legend { grid-template-columns: repeat(2, auto); gap: 10px 28px; } }

/* ---------- press ---------- */
.press ul { list-style: none; max-width: 780px; }
.press li { border-top: 1px solid var(--hairline); }
.press li:last-child { border-bottom: 1px solid var(--hairline); }
.press a, .press .noref {
  display: flex; justify-content: space-between; gap: 20px; align-items: baseline;
  padding: 18px 0; text-decoration: none; font-weight: 700; font-size: 17px; letter-spacing: -0.01em;
}
.press small { font-weight: 400; font-size: 14px; color: var(--ink-soft); flex: none; }
.press a { transition: color .2s ease; }
.press a:hover { color: var(--ink-soft); }

/* ---------- lightbox ---------- */
.zoomable { cursor: zoom-in; }
.lb {
  position: fixed; inset: 0; z-index: 100; display: none;
  background: rgba(255,255,255,.98); place-items: center; padding: clamp(12px, 3vw, 48px);
}
.lb.open { display: grid; }
.lb img { max-width: 100%; max-height: calc(100vh - 96px); width: auto; object-fit: contain; }
.lb figcaption { text-align: center; padding-top: 12px; max-width: 70ch; margin: 0 auto; }
.lb button {
  position: absolute; border: 0; background: none; cursor: pointer; color: var(--ink);
  width: 56px; height: 56px; display: grid; place-items: center; font-size: 26px; line-height: 1;
}
.lb .lb-close { top: 8px; right: 8px; }
.lb .lb-prev { left: 4px; top: 50%; transform: translateY(-50%); }
.lb .lb-next { right: 4px; top: 50%; transform: translateY(-50%); }
.lb .lb-count { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); font-size: 13px; color: var(--ink-soft); }

/* ---------- project navigation ---------- */
.pager { max-width: var(--wide); margin: clamp(56px, 10vh, 110px) auto 0; padding: 0 var(--pad); display: flex; gap: 20px; justify-content: space-between; border-top: 1px solid var(--hairline); }
.pager a { display: flex; flex-direction: column; gap: 4px; padding: 22px 0; text-decoration: none; max-width: 45%; }
.pager a.next { text-align: right; align-items: flex-end; }
.pager small { font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); }
.pager b { font-size: clamp(17px, 2vw, 22px); font-weight: 800; letter-spacing: -0.015em; }
.pager a:hover b { color: var(--ink-soft); }

/* ---------- team (kontakt) ---------- */
.team { display: grid; gap: clamp(28px, 4vw, 44px) clamp(24px, 3vw, 40px); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.member img { aspect-ratio: 3 / 4; object-fit: cover; background: var(--paper-warm); margin-bottom: 14px; }
.member h3 { font-size: 20px; font-weight: 800; letter-spacing: -0.015em; }
.member .mi { font-size: 15px; color: var(--ink-soft); margin-top: 4px; }
.member .mi p + p { margin-top: .7em; }
.member a { text-decoration: none; color: var(--ink); }
.member a:hover { color: var(--ink-soft); }
.lede-block p { font-size: clamp(18px, 2.2vw, 24px); font-weight: 300; line-height: 1.45; }
.lede-block p + p { margin-top: .8em; }

/* ---------- footer ---------- */
footer { margin-top: clamp(32px, 6vh, 70px); }
.foot-inner {
  /* full width, on the same left/right lines as the header and the works grid */
  padding: 40px var(--pad) 60px;
  display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: center;
  font-size: 13.5px; color: var(--ink-soft);
}
.foot-inner b { color: var(--ink); }
.foot-txt { display: flex; align-items: baseline; gap: 18px; }
.foot-soc { display: inline-flex; align-items: center; gap: 18px; }
@media (max-width: 820px) { .foot-txt { flex-direction: column; align-items: flex-start; gap: 2px; } }
.soc { display: inline-flex; }
.soc svg { width: 18px; height: 18px; fill: var(--ink); transition: fill .2s ease; }
.soc:hover svg { fill: var(--ink-soft); }
.foot-mail { font-weight: 400; color: var(--ink); text-decoration: none; transition: color .2s ease; }
.foot-mail:hover { color: var(--ink-soft); }

/* ---------- reveal motion ---------- */
.r { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.r.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .r { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   VOOG CMS INTEGRATION
   One stylesheet serves both the generated static build and the
   Voog templates. Everything below maps Voog's editor markup
   (.edy-*, {% content %} areas) onto the layout above — none of
   these selectors match anything the static build emits.
   ============================================================ */

/* ---------- editor flow: prose keeps the measure, media goes wide ------- */
.kk-flow > p, .kk-flow > ul, .kk-flow > ol, .kk-flow > h2, .kk-flow > h3,
.kk-flow > h4, .kk-flow > blockquote, .kk-flow > .edy-texteditor-container:not(.image-container) {
  max-width: var(--measure);
}
.kk-flow > p + p, .kk-flow > ul + p, .kk-flow > p + h3 { margin-top: 1.2em; }
.kk-flow > h3 { font-size: 20px; font-weight: 800; letter-spacing: -0.015em; margin-top: 1.8em; }
.kk-flow > h2 { font-size: clamp(26px, 3.6vw, 44px); font-weight: 800; letter-spacing: -0.025em; margin-top: 1.4em; }
.kk-flow ul { margin-left: 1.1em; }
.kk-flow li { margin-top: .3em; }
.kk-flow a { text-decoration: underline; text-decoration-thickness: 1px; }
.kk-flow a:hover { color: var(--ink-soft); }
/* Voog wraps every editor image in .image-container with an inline max-width
   the editor set by dragging. The design wants one full-measure column, so the
   inline width is overridden and the block gets the .story rhythm instead. */
.kk-flow .image-container {
  max-width: 100% !important; width: 100% !important;
  float: none !important; margin: clamp(36px, 6vh, 64px) 0;
}
.kk-flow .image-container:first-child { margin-top: 0; }
.kk-flow .edy-padding-resizer-wrapper { max-width: 100%; }
.kk-flow img, .kk-flow picture { display: block; }
/* The ratio box already holds the photo's space, so a project page is a column
   of empty rectangles until the files arrive — and these pages carry 9MB of
   photo. Filling that space with the placeholder tint the cards, the gallery and
   the team photos already use makes the wait read as loading rather than as a
   page that failed. It is paint only; nothing moves.
   The photo covers the tint by having a background of its own: an <img> paints
   its background behind its own pixels, so the seven body drawings that are
   transparent PNGs keep the white they have today instead of picking up a warm
   rectangle. Before the file arrives the img has no intrinsic height, so it
   covers nothing and the tint shows through. */
.kk-flow .edy-padding-resizer-wrapper { background: var(--paper-warm); }
.kk-flow .image-container img { background: var(--paper); }
/* Voog emits an empty <p> after most editor images; it would double the gap */
.kk-flow > p:empty { display: none; }

/* ---------- upright photos: capped by height, and paired ------------------
   An editor image drawn across the whole 1168px column is as tall as its own
   proportion makes it, so the 2:3 the studio shoots most comes out 195vh — two
   screenfuls of picture. The static design never had this: it pairs body photos
   two-up with .duo.fit, at one shared height. Voog's editor cannot make that
   shape — it emits one full-width block per photo — so site.js measures each
   image's own ratio box, groups the upright ones that stand next to each other
   into a .kk-duo row and hands the row the proportion the fitted row comes out
   at. The row is then capped by height, which is the thing the screen limits;
   the widths follow. A row of one is the same rule with one photo in it.
   Voog's own .portrait class is not a usable hook: the markup came across from
   the old site and five upright photos on three projects are labelled
   landscape, one carries both and one carries neither.
   -------------------------------------------------------------------------- */
.kk-flow .kk-duo {
  display: flex; gap: 14px; align-items: flex-start;
  margin: clamp(36px, 6vh, 64px) 0;
  max-width: min(100%, calc(var(--kk-tall-h) / var(--kk-row)));
}
.kk-flow .kk-duo:first-child { margin-top: 0; }
/* the row owns the sizing; the blocks inside it are flex items, sized by the
   flex-grow site.js writes on each (1 / its proportion), which is what makes a
   pair of different shapes come out the same height */
.kk-flow .kk-duo > .image-container {
  width: auto !important; max-width: none !important; margin: 0 !important; min-width: 0;
}
@media (max-width: 700px) {
  /* a half-column upright photo would be under 170px wide on a phone */
  .kk-flow .kk-duo { display: block; max-width: 100%; }
  .kk-flow .kk-duo > .image-container + .image-container { margin-top: clamp(36px, 6vh, 64px) !important; }
}

/* ---------- lede: the first paragraph of the intro area ---------- */
.kk-lede > p:first-child {
  font-size: clamp(18px, 2.2vw, 26px); font-weight: 300; line-height: 1.45;
  letter-spacing: -0.01em; max-width: 26ch;
}
.kk-lede > p:first-child + p { margin-top: 1.4em; }

/* ---------- rich case study (Ringmaja) ------------------------------------
   The bespoke blocks live in ordinary content areas and carry the same class
   names as the static build, because Voog's editor preserves nested divs and
   their classes through a save. Three tags it does NOT preserve — span, small
   and figure — have block-level stand-ins here, sitting next to the originals
   so the static page keeps rendering from the rules above.
   -------------------------------------------------------------------------- */
/* The rich hero puts the title and the kicker in a wrapper so the standfirst can
   be its own content area beside them. That wrapper makes the first grid column
   size to the whole block instead of to the h1, so the columns are named here:
   the title takes what is left and the standfirst keeps its own measure. */
.hero-head.kk-hero-rich { grid-template-columns: minmax(0, 1fr) auto; }
.hero-head.kk-hero-rich .kicker { margin-bottom: 14px; }
@media (max-width: 820px) { .hero-head.kk-hero-rich { grid-template-columns: 1fr; } }
/* the hero standfirst is its own content area, so it arrives as a paragraph */
.kk-sub p + p { margin-top: .6em; }
/* span -> p inside a challenge card */
.challenge b + p {
  display: block; margin-top: 8px; font-size: 17px;
  color: var(--ink-soft); max-width: 34ch;
}
/* span -> div inside a plan or drawing legend */
.legend > div { font-size: 14px; color: var(--ink-soft); display: flex; align-items: center; gap: 8px; }
/* small -> b for the source label on a press entry */
.press a b, .press .noref b { font-weight: 400; font-size: 14px; color: var(--ink-soft); flex: none; }
/* figure/figcaption -> div/p in the four-up */
.quad > div > p { font-size: 14px; color: var(--ink-soft); padding-top: 8px; line-height: 1.5; }
.drawings > div { display: grid; gap: 18px; align-content: start; }
/* the caption's comma is drawn by the stylesheet rather than sitting in the
   content as an inline SVG the editor would put a text cursor inside */
.kk-caption::before {
  content: ""; flex: none; width: 7px; height: 14px;
  background: var(--ink); transform: translateY(3px);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='14.175 13.812 18.859 37.715'%3E%3Cpolyline points='14.175 32.669 14.175 13.812 33.034 13.812 33.034 51.527 14.175 32.669' fill='%23000'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='14.175 13.812 18.859 37.715'%3E%3Cpolyline points='14.175 32.669 14.175 13.812 33.034 13.812 33.034 51.527 14.175 32.669' fill='%23000'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* spacing the static page carries as inline styles */
.kk-rich .kk-gap { margin-top: clamp(56px, 10vh, 120px); }
.kk-rich .kk-gap-b { margin-bottom: clamp(28px, 5vh, 52px); }
.kk-rich .kk-note { font-weight: 300; margin-bottom: clamp(28px, 5vh, 52px); }
.kk-rich .intro-cols .prose { margin-top: 32px; }
.kk-rich .intro-cols + .story { margin-top: 48px; }
.kk-rich .principles, .kk-rich .quad { margin-top: clamp(36px, 6vh, 64px); }
.kk-rich .sec-head + .principles, .kk-rich .kk-note + .principles { margin-top: 0; }

/* Voog wraps every editor photo in .image-container with inline sizing it lets
   the editor drag. Inside these grids the design owns the size, so the wrapper
   is flattened and the picture fills whatever box the grid hands it. */
.kk-rich .image-container {
  max-width: 100% !important; width: 100% !important;
  float: none !important; margin: 0 !important;
}
.kk-rich .edy-padding-resizer-wrapper { max-width: 100%; }
.kk-rich .story .duo:not(.drawings) .edy-padding-resizer-wrapper picture,
.kk-rich .story .full .edy-padding-resizer-wrapper picture,
.kk-rich .quad .edy-padding-resizer-wrapper picture {
  width: 100% !important; height: 100% !important; left: 0 !important; top: 0 !important;
}
.kk-rich .story .duo:not(.drawings) .edy-padding-resizer-wrapper img,
.kk-rich .story .full .edy-padding-resizer-wrapper img,
.kk-rich .quad .edy-padding-resizer-wrapper img {
  position: absolute; inset: 0;
  width: 100% !important; height: 100% !important; object-fit: cover;
}
/* The fixed crops, expressed as the wrapper's ratio box instead of the image's.
   A pair is one row of equal height even when the columns are 2:1, which the
   static page gets from height:100% on the img. Here the first photo sets the
   row at 4:3 of its own column and the second stretches to meet it. */
.kk-rich .story.crop .duo:not(.drawings) .edy-padding-resizer-wrapper { padding-bottom: 75% !important; }
/* only while the pair is actually side by side — stacked, each photo is its own
   row and stretching the second one would collapse it to nothing */
@media (min-width: 701px) {
  .kk-rich .story.crop .duo:not(.drawings) { align-items: stretch; }
  .kk-rich .story.crop .duo:not(.drawings) > .image-container { height: 100%; }
  .kk-rich .story.crop .duo:not(.drawings) > .image-container:not(:first-child)
    .edy-padding-resizer-wrapper { padding-bottom: 0 !important; height: 100%; }
}
.kk-rich .story.crop .full .edy-padding-resizer-wrapper { padding-bottom: 53.125% !important; }
.kk-rich .quad .edy-padding-resizer-wrapper { padding-bottom: 133.333% !important; }
/* drawings and plans keep their own proportions, as on the static page: the
   ratio box is dropped and the picture goes back in the flow to size the box */
.kk-rich .drawings .edy-padding-resizer-wrapper,
.kk-rich .plan .edy-padding-resizer-wrapper { padding-bottom: 0 !important; }
.kk-rich .drawings picture, .kk-rich .plan picture {
  position: static !important; width: 100% !important; height: auto !important;
}
.kk-rich .drawings picture img, .kk-rich .plan picture img {
  position: static !important; width: 100% !important; height: auto !important;
}

/* ---------- hero image area (main-image content) ---------- */
.hero-media .image-container { max-width: 100% !important; width: 100% !important; margin: 0; }
.hero-media .edy-padding-resizer-wrapper { max-width: 100%; }
/* the rich hero bleeds edge to edge at a fixed 21:9, so it crops like the rest */
.hero-media.bleed .edy-padding-resizer-wrapper { padding-bottom: 42.857% !important; }
.hero-media.bleed .edy-padding-resizer-wrapper picture {
  width: 100% !important; height: 100% !important; left: 0 !important; top: 0 !important;
}
.hero-media.bleed .edy-padding-resizer-wrapper img {
  position: absolute; inset: 0;
  width: 100% !important; height: 100% !important; object-fit: cover;
}
@media (max-width: 700px) {
  .hero-media.bleed .edy-padding-resizer-wrapper { padding-bottom: 75% !important; }
}
/* a few imported articles keep their whole body in repeated "main-image"
   areas; from the second block on this reads as an ordinary content flow */
.hero-media.kk-flow > .image-container ~ .image-container { margin-top: clamp(36px, 6vh, 64px); }
.hero-media.kk-flow > p, .hero-media.kk-flow > h2, .hero-media.kk-flow > h3 { margin-top: 1.2em; }

/* ---------- galleries (img-gallery content) ---------- */
/* Voog's own gallery grid already lays photos out; the design only needs its
   spacing, a neutral placeholder colour and the zoom cursor. */
.kk-gallery { margin-top: clamp(36px, 6vh, 64px); }
.kk-gallery .edy-gallery-list-item, .kk-gallery .edy-site-gallery-item { background: var(--paper-warm); }
.kk-gallery img { cursor: zoom-in; }
.kk-gallery .edy-gallery-caption, .kk-gallery figcaption {
  font-size: 14px; color: var(--ink-soft); line-height: 1.55;
}

/* ---------- works listing outside the front page ---------- */
/* On the front page the bar is fixed and transparent, so the filter row sticks
   to the very top; everywhere else the bar itself is sticky and the row has to
   come to rest below it. */
body:not(.front) .works-head { top: calc(var(--bar-h) + var(--ribbon-h)); }
body:not(.front) .works { scroll-margin-top: calc(var(--bar-h) * 2); }
@media (max-width: 900px) { body:not(.front) .works-head { top: var(--ribbon-h); } }

/* ---------- team members (contact page) ---------- */
.member .kk-member-photo img { aspect-ratio: 3 / 4; object-fit: cover; background: var(--paper-warm); }
.member .kk-member-photo .image-container { max-width: 100% !important; width: 100% !important; margin: 0; }
.member .kk-mi { font-size: 15px; color: var(--ink-soft); margin-top: 14px; }
.member .kk-mi > *:first-child {
  font-size: 20px; font-weight: 800; letter-spacing: -0.015em;
  color: var(--ink); margin-bottom: 4px;
}
.member .kk-mi p + p { margin-top: .7em; }

/* ---------- hero slideshow source (front page gallery area) ---------- */
/* The editor manages the slideshow as an ordinary Voog gallery; site.js lifts
   its images into .featured and this keeps the raw area out of the layout. */
.kk-hero-src { display: none; }
body.editmode .kk-hero-src { display: block; padding: 0 var(--pad) 24px; }

/* ---------- edit mode ---------- */
/* Voog's toolbar overlays the top of the page and the front-page header is
   fixed and transparent — pin it down so edit handles stay reachable. */
body.editmode.front .bar { position: sticky; background: var(--paper); transform: none !important; }
body.editmode.front .bar .logo img { filter: none; }
body.editmode.front .bar nav a { color: #8a8a8a; }
body.editmode .r { opacity: 1; transform: none; }
body.editmode .works-head { position: static; }
.kk-edit-panel {
  max-width: var(--wide); margin: 0 auto; padding: 20px var(--pad);
  border: 1px dashed var(--hairline); background: var(--paper-warm);
  font-size: 14px;
}
.kk-edit-panel h2 { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 12px; }
.kk-edit-panel .kk-fields { display: grid; gap: 10px 24px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.kk-edit-panel label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 4px; }
.kk-edit-panel input[type=text], .kk-edit-panel input[type=number], .kk-edit-panel select {
  width: 100%; padding: 7px 9px; border: 1px solid var(--hairline); background: var(--paper);
  font: 400 15px/1.4 "Manrope", sans-serif; color: var(--ink);
}
.kk-edit-panel .kk-row { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.kk-edit-panel button {
  padding: 8px 18px; border: 0; background: var(--ink); color: #fff; cursor: pointer;
  font: 700 14px/1.2 "Manrope", sans-serif;
}
.kk-edit-panel button[disabled] { opacity: .45; cursor: default; }
.kk-edit-panel .kk-hint { color: var(--ink-soft); font-size: 13px; }
.kk-edit-panel .kk-status { font-size: 13px; font-weight: 700; }
/* unpublished projects, visible in edit mode only */
body.editmode .card.kk-draft .thumb { opacity: .4; }
body.editmode .card.kk-draft .ov b::after {
  content: "mustand"; display: inline-block; margin-left: 8px; vertical-align: middle;
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft); border: 1px solid var(--hairline); padding: 1px 6px;
}
/* every affordance that saves itself carries the same hint-and-status line */
.kk-order-hint, .kk-facts-hint {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  font-size: 13px; color: var(--ink-soft);
}
.kk-order-hint .kk-status, .kk-facts-hint .kk-status { font-weight: 700; color: var(--ink); }
.kk-order-hint .kk-status.kk-busy,
.kk-facts-hint .kk-status.kk-busy { color: var(--ink-soft); font-weight: 400; }
/* drag a card to reorder the active tab (edit mode) */
.kk-order-hint { margin: -8px 0 22px; }
/* a project's facts, edited in the strip itself (edit mode) */
.kk-facts-hint { max-width: var(--wide); margin: 0 auto; padding: 26px var(--pad) 0; }
.kk-facts-edit { padding-top: 12px; }
.kk-fv {
  display: inline-block; min-width: 1ch; cursor: text; outline: none;
  border-bottom: 1px dashed var(--hairline);
}
.kk-fv:hover { border-bottom-color: var(--ink-soft); }
.kk-fv:focus { border-bottom-style: solid; border-bottom-color: var(--ink); }
/* an emptied field keeps its place in the strip, and something to click on */
.kk-fv.kk-empty::after { content: "—"; color: var(--ink-soft); font-weight: 400; }
body.editmode .card { cursor: grab; }
body.editmode .card.kk-dragging { opacity: .35; cursor: grabbing; }
body.editmode .card img { pointer-events: none; }  /* the card drags, not the photo */

/* Narrow first text paragraph on Meist, Kliendile and Liitu */
body.page-3550816 .kk-lede > p:first-child,
body.page-3550837 .kk-lede > p:first-child,
body.page-3550838 .kk-lede > p:first-child { width: 100%; max-width: 612px; }

/* ---------- Voog gallery white lightbox ---------- */
/* Keep Voog/PhotoSwipe galleries visually consistent with the site's white custom lightbox. */
.pswp__bg { background: #fff !important; }
.pswp__top-bar,
.pswp__caption { background: transparent !important; color: #111 !important; }
.pswp__counter,
.pswp__caption__center { color: #111 !important; }
.pswp__button { filter: invert(1); }
.pswp__img--placeholder--blank { background: #fff !important; }
/* Hide captions in every fullscreen gallery 2026-08-07 */
.pswp__caption {
  display: none !important;
}
/* Full-width project portraits on mobile 2026-08-07 */
@media (max-width: 700px) {
  .project .kk-flow [data-kk-portrait-rows] {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
  }
  .project .kk-flow .kk-duo > [data-kk-portrait-item] {
    display: block !important;
    flex: none !important;
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}
/* Full-width project portraits on mobile v2 2026-08-07 */
@media (max-width: 700px) {
  html body.project section.tight.kk-flow [data-kk-portrait-rows] {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
  }
  html body.project section.tight.kk-flow .kk-duo > [data-kk-portrait-item] {
    display: block !important;
    flex: none !important;
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}
/* Ringmaja intro and challenge lines 3x 2026-08-12 */
body.project .kk-rich .credits,
body.project .kk-rich .challenge {
  border-top-width: 6px;
}
/* Ringmaja drawing columns aligned to credits 2026-08-12 */
body.project .kk-rich .duo.drawings {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
}
@media (max-width: 700px) {
  body.project .kk-rich .duo.drawings {
    grid-template-columns: 1fr;
  }
}
/* Ringmaja mobile drawing order 2026-08-12 */
@media (max-width: 700px) {
  body.project .kk-rich .duo.drawings > :first-child {
    order: 2;
  }
  body.project .kk-rich .duo.drawings > :nth-child(2) {
    order: 1;
  }
}
/* Ringmaja project hero centered crop 2026-08-12 */
body.project .hero-media [data-image-id="25509536"] img {
  object-position: 50% 50% !important;
}