/* Kiem Studio, kiem.studio */
/* Layout: white page; every section opens with a full-width hairline; a label column on the left, content from 16.8%, running text from 31.5% */
/* One visual world on purpose: black on white in both light and dark settings. The card's lime is used for the logo only. Bold marks titles and labels. */
:root {
  --paper: #FFFFFF;
  --ink: #141414;
  --muted: #5E5E5E;
  --rule: #141414;
  --surface: #EFEFEC;
  --brand: #80CC28;       /* lime of the business card: only the logo */
  --brand-ground: #56965B;
  --hover: #2346C8;       /* hover colour for project links */
  --font: "Figtree", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --fs: clamp(17px, 1.47vw, 24px);
  --fs-big: clamp(26px, 2.95vw, 46px);
  --fs-huge: clamp(32px, 4.42vw, 70px);
  --c2: 16.8%;
  --c3: 31.5%;
  --head: 3.6rem;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
:root { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); font-size: var(--fs); font-weight: 400; line-height: 1.257; }
img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
h1, h2, h3 { font-weight: inherit; font-size: inherit; }
ul, ol { padding: 0; list-style: none; }
em { font-style: italic; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .14em; }
.u { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .14em; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.arrow::after { content: ""; display: inline-block; width: .78em; height: .78em; margin-left: .28em; vertical-align: -.06em; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M2 10h15M11 4l6 6-6 6' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M2 10h15M11 4l6 6-6 6' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat; }
.arrow-down::after { transform: rotate(90deg); }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 30; background: var(--paper); color: var(--ink); padding: 6px 10px; }
.skip:focus { left: max(16px, env(safe-area-inset-left, 0px)); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Full-width bands carry the side gutter on their inner wrapper */
.in { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.pad { padding-inline: clamp(0px, calc(3.2vw - 16px), 24px); }
.grid { display: grid; grid-template-columns: var(--c2) calc(var(--c3) - var(--c2)) minmax(0, 1fr); }
.label { grid-column: 1 / 3; font-size: var(--fs-big); font-weight: 300; line-height: 1.1; letter-spacing: -.015em; padding-right: 1em; text-wrap: balance; }
.label.short { grid-column: 1 / 2; }
.content { grid-column: 2 / -1; min-width: 0; }
.text { grid-column: 3 / -1; min-width: 0; }
.wide { grid-column: 1 / -1; min-width: 0; }
.big { font-size: var(--fs-big); font-weight: 300; line-height: 1.1; letter-spacing: -.015em; }
.huge { font-size: var(--fs-huge); font-weight: 400; line-height: 1.047; letter-spacing: -.03em; }
.measure { max-width: 38em; }
.measure p + p { margin-top: 1.26em; }
.small { font-size: max(13px, .7em); line-height: 1.35; }
.muted { color: var(--muted); }

.band { border-top: 1px solid var(--rule); padding-top: .3em; }
.band + .band, .band-gap { margin-top: 2.5em; }
main { display: block; }
.page:not(.page-home) main { padding-top: calc(var(--head) + 2.6em); }

/* Header */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 20; background: var(--paper); color: var(--ink); padding-top: env(safe-area-inset-top, 0px); }
.site-header .grid { align-items: center; min-height: var(--head); }
.brand { grid-column: 1 / 3; justify-self: start; display: block; line-height: 0; color: var(--brand); padding-block: 6px; transition: color .6s ease; }
.brand:hover { text-decoration: none; }
.logo { height: 1.45em; width: auto; display: block; }
.nav { grid-column: 3 / -1; display: flex; flex-wrap: wrap; gap: .2em .86em; }
.nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .14em; }
.menu-toggle { display: none; }
.page-home .site-header.over { background: transparent; color: #fff; }
.page-home .site-header.over .brand { color: #fff; }
.page-home .site-header.solid { border-bottom: 1px solid var(--rule); }

/* Home */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 30em; background: #2b2e2a; color: #fff; overflow: hidden; }
.hero .slides { position: absolute; inset: 0; z-index: 0; }
.hero .slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); opacity: 0; transition: opacity 3s ease-in-out; }
.hero .slide.is-prev { opacity: 1; z-index: 1; }
.hero .slide.is-active { opacity: 1; z-index: 2; }
@media (prefers-reduced-motion: reduce) { .hero .slide, .brand { transition: none; } }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .42), rgba(0, 0, 0, 0) 48%); pointer-events: none; }
.hero .in { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding-bottom: 1.6em; }
.hero .pad { display: flex; align-items: flex-end; justify-content: space-between; gap: 1em; }
.hero-title { font-size: var(--fs-huge); font-weight: 300; line-height: 1.047; letter-spacing: -.03em; max-width: 16em; }
.hero .credit { display: flex; align-items: center; gap: .6em; flex: none; padding-bottom: .35em; }
.info { display: none; width: 1.25em; height: 1.25em; border: 1.5px solid currentColor; border-radius: 50%; background: none; color: inherit; font: inherit;
        font-size: .9em; line-height: 1; place-items: center; cursor: pointer; padding: 0; }
.js .info { display: grid; }
.pause { display: none; width: 1.25em; height: 1.25em; border: 1.5px solid currentColor; border-radius: 50%; background: none; color: inherit;
         font-size: .9em; padding: 0; place-items: center; cursor: pointer; }
.js .has-slides .pause { display: grid; }
.pause::before { content: ""; width: .34em; height: .5em; border-left: 1.5px solid currentColor; border-right: 1.5px solid currentColor; }
.pause[aria-pressed="true"]::before { width: 0; height: 0; border-style: solid; border-width: .28em 0 .28em .46em;
                                     border-color: transparent transparent transparent currentColor; margin-left: .12em; }
.credit-text { font-size: max(13px, .7em); }
.credit-text a { text-decoration: underline; }
.intro { padding-top: 2.4em; padding-bottom: 2.5em; }
.intro .huge { grid-column: 1 / -1; max-width: 18.4em; }
.intro .more { grid-column: 1 / -1; margin-top: 1.25em; }

/* Project cards */
.cards { display: grid; gap: 2.5em 1.9em; }
.cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card { display: block; }
.card:hover { text-decoration: none; }
.card .frame { aspect-ratio: 3 / 2; background: var(--surface); overflow: hidden; }
.cards-3 .card .frame { aspect-ratio: 4 / 5; }
.card .frame img { width: 100%; height: 100%; object-fit: cover; }
.card-title { display: block; margin-top: .47em; font-weight: 600; }
.card-line { display: block; margin-top: .63em; }
.card-by { display: block; margin-top: .4em; color: var(--muted); font-size: max(13px, .7em); }
.card .card-title, .card .card-line { transition: color .15s ease; }
.card:hover .card-title, .card:hover .card-line, .card:focus-visible .card-title { color: var(--hover); text-decoration: none; }
.after { margin-top: 1.25em; }

/* Projects page controls */
.controls { display: grid; gap: 1.6em; margin-bottom: 2.6em; }
.tabs { display: flex; flex-wrap: wrap; gap: .3em .86em; }
.tab { font: inherit; color: inherit; background: none; border: 1px solid transparent; padding: 0 .22em; line-height: 1.2; cursor: pointer; }
.tab:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .14em; }
.tab[aria-pressed="true"], .tab[aria-current="page"] { border-color: var(--ink); }
.tab[aria-pressed="true"]:hover, .tab[aria-current="page"]:hover { text-decoration: none; }

.list { width: 100%; border-collapse: collapse; margin-top: .2em; }
.list th, .list td { text-align: left; font-weight: 400; vertical-align: top; padding: .25em 1em .9em 0; border-top: 1px solid var(--rule); }
.list thead th { padding-bottom: 1.6em; }
.list .year { text-align: right; padding-right: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.list a:hover { text-decoration: none; color: var(--hover); }
.list .name { font-weight: 600; }

/* Project page */
.title-row .text { font-size: var(--fs-big); font-weight: 300; line-height: 1.1; letter-spacing: -.015em; }
.hero-figure { margin-top: 1.3em; }
.hero-figure img { width: 100%; background: var(--surface); }
.lead { margin-top: .9em; }
.facts { display: grid; grid-template-columns: 7.6em minmax(0, 1fr); gap: .1em 1em; margin-top: 2.5em; max-width: 38em; }
.facts dt { font-weight: 600; }
.facts dd { min-width: 0; overflow-wrap: break-word; }
.body-text { margin-top: 2.5em; }
.media { display: grid; gap: 4.2em 0; margin-top: 4.2em; }
.media figure img { width: 100%; background: var(--surface); }
.media figcaption { margin-top: .5em; }
.m-full { grid-column: 1 / -1; }
.m-col { grid-column: 3 / -1; }
.m-pair { grid-column: 3 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.9em; align-items: start; }

/* Lists of terms and years (studio) */
.dl { display: grid; grid-template-columns: 5em minmax(0, 1fr); gap: .1em 0; max-width: 42em; }
.dl dt { grid-column: 1; }
.dl dd { grid-column: 2; }
.dl dt:not(:first-child), .dl dt:not(:first-child) + dd { margin-top: 1.26em; }
.dl-term { grid-template-columns: minmax(0, 32%) minmax(0, 1fr); column-gap: 1em; }
.dl-term dt { font-weight: 600; }
.refs { display: block; margin-top: .25em; }
.note { margin-top: 1.26em; max-width: 38em; }
.studio-manifesto { margin-top: 3.4em; }
.who-intro { margin-bottom: 2.5em; }
.row { margin-top: 3.2em; }
.row:first-child { margin-top: 0; }
.studio-images { display: grid; grid-template-columns: minmax(0, 69.4fr) minmax(0, 27.7fr); column-gap: 2.9%; align-items: start; margin-top: 3.6em; }
.studio-images img { width: 100%; background: var(--surface); }
.people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5em 1.9em; }
.person img { width: 100%; max-width: 360px; aspect-ratio: 4 / 3; object-fit: cover; background: var(--surface); margin-bottom: .9em; }
.person h3 { font-weight: 600; }
.person .measure { margin-top: .9em; }
.person .more { margin-top: .9em; }
.person .more p + p { margin-top: .2em; }
.partners li + li { margin-top: 0; }

/* Contact */
.blocks > * + * { margin-top: 1.26em; }
strong { font-weight: 600; }

/* Footer */
.site-footer { margin-top: 3.8em; border-top: 1px solid var(--rule); }
.site-footer .grid { grid-template-columns: var(--c2) calc(var(--c3) - var(--c2)) 24.4% minmax(0, 1fr); padding-top: .3em; padding-bottom: 1.3em; }
.f1 { grid-column: 1 / 3; }
.f2 { grid-column: 3; }
.f3 { grid-column: 4; }

/* Narrow screens */
@media (max-width: 760px) {
  :root { --head: 3.4rem; }
  .grid { grid-template-columns: minmax(0, 1fr); }
  .label, .content, .text, .wide, .m-full, .m-col, .m-pair { grid-column: 1 / -1; }
  .label { margin-bottom: .55em; }
  .brand { grid-column: 1; }
  .site-header .grid { grid-template-columns: minmax(0, 1fr) auto; }
  .site-header { border-bottom: 1px solid var(--rule); }
  .page-home .site-header.over { border-bottom-color: transparent; }
  .js .menu-toggle { display: grid; grid-column: 2; grid-row: 1; justify-self: end; width: 2.2em; height: 2.2em; place-items: center; background: none; border: 0; color: inherit; cursor: pointer; padding: 0; }
  .menu-toggle span, .menu-toggle span::before, .menu-toggle span::after { display: block; width: 1.3em; height: 1.5px; background: currentColor; position: relative; content: ""; }
  .menu-toggle span::before { position: absolute; top: -.42em; }
  .menu-toggle span::after { position: absolute; top: .42em; }
  .nav { grid-column: 1 / -1; padding-bottom: .5em; }
  .js .nav { display: none; }
  .js .site-header.open .nav { display: grid; gap: .1em; font-size: var(--fs-big); font-weight: 300; padding-block: .3em .8em; }
  .js .page-home .site-header.open { background: var(--paper); color: var(--ink); }
  .js .page-home .site-header.open .brand { color: var(--brand); }
  .hero { height: 62svh; min-height: 24em; }
  .cards-2, .cards-3, .people, .m-pair { grid-template-columns: minmax(0, 1fr); }
  .m-pair { gap: 2.2em; }
  .media { gap: 2.4em 0; margin-top: 2.6em; }
  .studio-images { grid-template-columns: minmax(0, 1fr); row-gap: 1.2em; }
  .studio-images img + img, .studio-images > :nth-child(2) { max-width: 60%; }
  .facts, .dl-term { grid-template-columns: minmax(0, 1fr); }
  .dl-term dt, .dl-term dd { grid-column: 1; }
  .facts dd + dt { margin-top: .9em; }
  .dl-term dt:not(:first-child) + dd { margin-top: 0; }
  .list .for, .list .type { display: none; }
  .site-footer .grid { grid-template-columns: minmax(0, 1fr); row-gap: 1.1em; }
  .f1, .f2, .f3 { grid-column: 1; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .cards-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.refs a:hover, .credit-text a:hover { color: var(--hover); text-decoration: none; }
.m-video video { display: block; width: 100%; height: auto; background: var(--surface); }