@font-face { font-family: "Anton"; src: url("assets/anton-400-ext.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Anton"; src: url("assets/anton-400.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; src: url("assets/ibm-plex-mono-400-ext.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; src: url("assets/ibm-plex-mono-400.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; src: url("assets/ibm-plex-mono-600-ext.woff2") format("woff2"); font-style: normal; font-weight: 600; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; src: url("assets/ibm-plex-mono-600.woff2") format("woff2"); font-style: normal; font-weight: 600; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Archivo"; src: url("assets/archivo-normal.woff") format("woff"); font-style: normal; font-weight: 400 900; font-stretch: normal; font-display: swap; }

:root {
  color-scheme: dark;
  --black: #141412;
  --paper: #f6f4ef;
  --red: #ee3c29;
  --muted: #aaa7a0;
  --dark-rule: #3e3b36;
  --paper-rule: #c6c1b8;
  --gutter: clamp(20px, 4.5vw, 76px);
  --body: "Archivo", Arial, sans-serif;
  --display: var(--body);
  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --anton: "Anton", Impact, "Arial Narrow", sans-serif;
  --display-size: clamp(64px, 7vw, 120px);
  --h2-size: clamp(44px, 5.5vw, 96px);
  --h3-size: clamp(26px, 2.6vw, 44px);
  --email-size: clamp(32px, 4.4vw, 64px);
  --lead-size: 20px;
  --body-size: 16px;
  --small-size: 14px;
  --label-size: 11px;
  --label-accent: #a22b1d;
  --section-bottom: 120px;
  --label-title-gap: 16px;
  --title-content-gap: 48px;
  --gallery-gap: 40px;
  --card-row-gap: 78px;
}
@media (max-width: 1023px) { :root { --section-bottom: 88px; } }
@media (max-width: 599px) { :root { --section-bottom: 64px; --gallery-gap: 16px; --label-size: 10px; } }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-gutter: stable; }
body { margin: 0; background: var(--black); color: var(--paper); font-family: var(--body); }
body.reel-open, body.opening-active { overflow: hidden; }
img, video, canvas { display: block; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: default; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, figure, dl, dd { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid #ff624e; outline-offset: 5px; }
section[id], article[id], footer[id], figure[id] { scroll-margin-top: 22px; }
.wrap { max-width: 1536px; width: 100%; margin-inline: auto; padding-inline: var(--gutter); }
.mono { font: 400 var(--label-size)/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.index-slash { color: var(--red); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 10; top: 12px; left: 12px; padding: 12px 16px; background: var(--paper); color: var(--black); transform: translateY(-180%); }
.skip-link:focus { transform: none; }

.header { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 76px; position: relative; }
.header::after { content: ""; position: absolute; left: var(--gutter); right: var(--gutter); bottom: 0; border-bottom: 1px solid var(--dark-rule); }
.wordmark { display: inline-flex; align-items: center; gap: 13px; font-family: var(--display); font-weight: 900; letter-spacing: -.075em; font-size: 29px; line-height: 1; }
.wordmark-mark, .intro-mark {
  aspect-ratio: 1; flex: none; background: var(--red); mask: url("assets/kvetcch-mark.png") center / contain no-repeat;
}
.wordmark-mark { inline-size: 30px; }
.header nav { display: flex; align-items: center; gap: clamp(14px, 2.6vw, 40px); font-size: var(--small-size); font-weight: 400; }
.header nav a { padding: 12px 0; }
.header nav a:hover, .work-link:hover { color: #ff604d; }

.opening {
  --paper: #f4f2ee;
  --intro-muted: #615e57;
  --intro-rule: #d1ccc3;
  --intro-gutter: clamp(16px, 3.85vw, 84px);
  position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr);
  block-size: 100dvh; min-block-size: 0;
  padding: env(safe-area-inset-top) max(var(--intro-gutter), env(safe-area-inset-right)) env(safe-area-inset-bottom) max(var(--intro-gutter), env(safe-area-inset-left));
  background: var(--paper); color: var(--black); color-scheme: light;
}
html:has(body.opening-active) { scrollbar-gutter: auto; }
.opening-active .opening { position: fixed; inset: 0; z-index: 8; overflow: hidden; overscroll-behavior: contain; transition: opacity .24s ease; }
.opening-active .opening-out { opacity: 0; pointer-events: none; }
.opening :is(.ticket-hints, .opening-controls, .opening-fibers) {
  visibility: hidden; opacity: 0; transition: opacity .2s ease;
}
.opening[data-guides-visible] :is(.ticket-hints, .opening-controls),
.opening[data-tear-started] .opening-fibers { visibility: visible; opacity: 1; }
.opening :focus-visible { outline-color: var(--black); }
.opening-header {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; column-gap: clamp(8px, 2vw, 28px);
  min-block-size: clamp(49px, 8.7dvh, 100px); border-bottom: 1px solid var(--intro-rule);
}
.opening-header .wordmark { justify-self: start; font-size: clamp(21px, 2.15vw, 29px); gap: clamp(7px, 1vw, 13px); white-space: nowrap; }
.intro-mark { inline-size: clamp(21px, 2.2vw, 30px); }
.opening-index { text-align: center; font-weight: 600; }
.opening-skip {
  justify-self: end; display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  white-space: nowrap;
}
.opening-skip span:first-child { text-decoration: underline; text-underline-offset: .28em; text-decoration-thickness: 1px; }
.opening-skip .skip-arrow { color: var(--red); font-size: 14px; }
.opening-skip:hover span:first-child { color: #a82e21; }
#portfolio:focus { outline: none; }

.opening-layout {
  display: grid; min-width: 0; min-height: 0;
  grid-template: "copy" auto "ticket" minmax(0, 1fr) "controls" auto "fibers" auto / minmax(0, 1fr);
  row-gap: clamp(7px, 1.35dvh, 16px); padding-block: clamp(9px, 1.9dvh, 22px) clamp(9px, 1.5dvh, 18px);
}
.opening-copy { grid-area: copy; text-align: center; }
.opening-copy h1 {
  display: grid; gap: .06em;
  font: 900 clamp(25px, min(7.4vw, 5dvh), 56px) / .93 var(--display);
  letter-spacing: -.055em; word-spacing: .045em;
}
.opening-copy h1 > span { display: block; white-space: nowrap; }
.opening-heading-measure { position: absolute; inline-size: max-content; visibility: hidden; pointer-events: none; }
.opening-description, .opening-available { font-size: clamp(12px, 1.38vw, 17px); line-height: 1.4; }
.opening-description { margin-top: clamp(8px, 1.55dvh, 18px); color: var(--intro-muted); }
.opening-available { margin-top: clamp(4px, .7dvh, 8px); font-weight: 700; }

.ticket-field {
  --ticket-target: 45dvh;
  grid-area: ticket; display: grid; grid-template-rows: minmax(0, 1fr) auto; min-width: 0; min-height: 0;
  row-gap: clamp(4px, 1dvh, 12px);
}
.ticket-labels { display: none; }
.ticket-well { display: grid; place-items: center; min-width: 0; min-height: 0; container-type: size; }
.ticket-hints {
  display: flex; align-items: center; justify-content: center; gap: clamp(11px, 2.6vw, 38px);
  min-height: 14px; color: var(--intro-muted); white-space: nowrap;
}
.ticket-hints b { margin-inline-end: 4px; font-size: 1.4em; font-weight: 400; line-height: 1; }
.pull-touch { display: none; }
@media (any-pointer: coarse) {
  .pull-pointer { display: none; }
  .pull-touch { display: inline; }
}
.flip-mouse { display: none; }
.stage {
  --ticket-lean: -3deg;
  --ticket-height: min(var(--ticket-target), 94cqh, 150cqw);
  --sheet-gutter: clamp(7px, calc(var(--ticket-height) * .031), 23px);
  --ticket-notch: 5px;
  position: relative; isolation: isolate; display: grid; grid-template-rows: minmax(0, 1fr) 26%;
  inline-size: calc(var(--ticket-height) * .56); block-size: var(--ticket-height);
  overflow: hidden; border-radius: 7px; transform: rotate(var(--ticket-lean));
  filter: drop-shadow(8px 11px 13px rgb(20 20 18 / .19)); touch-action: none;
  color: var(--paper);
}
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#shadow { pointer-events: none; }
#ticket { touch-action: none; cursor: grab; }
#ticket:focus-visible { outline: 2px solid var(--red); outline-offset: -4px; }
#ticket.grabbing { cursor: grabbing; }
.stage:not([data-renderer="webgl"]) canvas { visibility: hidden; pointer-events: none; }
.stage:not([data-renderer="webgl"]) { cursor: grab; }
.sheet-top, .sheet-stub { position: relative; display: grid; min-width: 0; min-height: 0; pointer-events: none; }
.sheet-top { grid-template-rows: minmax(0, 1fr); }
.stage:not([data-renderer="webgl"]) .sheet-top {
  background: var(--black);
  mask: radial-gradient(circle at 0 100%, transparent var(--ticket-notch), #000 5.5px) left / 51% 100% no-repeat,
        radial-gradient(circle at 100% 100%, transparent var(--ticket-notch), #000 5.5px) right / 51% 100% no-repeat;
}
.stage:not([data-renderer="webgl"]) .sheet-stub {
  background: var(--red); transition: transform .44s ease-in, opacity .44s ease-in;
  mask: radial-gradient(circle at 0 0, transparent var(--ticket-notch), #000 5.5px) left / 51% 100% no-repeat,
        radial-gradient(circle at 100% 0, transparent var(--ticket-notch), #000 5.5px) right / 51% 100% no-repeat;
}
.stage[data-torn]:not([data-renderer="webgl"]) .sheet-stub { transform: translateY(105%); opacity: 0; }
.stage:not([data-renderer="webgl"]) :is(.sheet-top, .sheet-stub)::after {
  content: ""; position: absolute; inset-inline: var(--ticket-notch); block-size: 1.5px;
  background: repeating-linear-gradient(to right, var(--paper) 0 9px, transparent 9px 15px);
}
.sheet-top::after { inset-block-end: 0; }
.sheet-stub::after { inset-block-start: 0; }
.opening-copy-zone { min-width: 0; min-height: 0; container-type: size; padding: var(--sheet-gutter); }
.ticket-title { display: grid; gap: var(--headline-gap, clamp(3px, 1.1cqw, 7px)); }
.headline-row, .stub-heading { position: relative; display: block; width: 100%; height: var(--ink-height, calc(var(--default-size) * .88)); }
.headline-looking { --default-size: min(21cqw, 42cqh); }
.headline-projects { --default-size: min(27cqw, 54cqh); }
.ticket-lettering {
  position: absolute; left: var(--ink-left, 0px); top: var(--ink-top, -.07em);
  font: 400 var(--ink-size, var(--default-size)) / 1 var(--anton);
  font-kerning: normal; letter-spacing: var(--ink-tracking, -.01em); white-space: nowrap;
}
.sheet-reverse { position: absolute; inset: 0; display: grid; place-items: center; }
.ticket-back-mark { display: block; width: 60%; height: auto; fill: var(--paper); }
.ticket-mono {
  font-size: clamp(5px, calc(var(--ticket-height) * .020), 12px); line-height: 1.15;
  letter-spacing: .15em; white-space: nowrap; text-align: center;
}
.ticket-back-pull { position: absolute; inset-inline: 0; inset-block-end: clamp(6px, calc(var(--ticket-height) * .031), 20px); }
.sheet-stub { place-items: center; }
.stub-copy, .stub-reverse {
  grid-area: 1 / 1; display: grid; justify-items: center; align-content: center; width: 100%;
  gap: clamp(3px, calc(var(--ticket-height) * .012), 10px); color: var(--black);
}
.stub-copy { padding-inline: var(--sheet-gutter); }
.stub-reverse svg { display: block; width: 73%; height: clamp(10px, calc(var(--ticket-height) * .064), 46px); fill: currentColor; }
.stub-heading { --default-size: min(11cqw, calc(var(--ticket-height) * .10)); }
.stub-heading .ticket-lettering { left: var(--ink-left, 50%); }
.stub-heading:not([data-fitted]) .ticket-lettering { translate: -50% 0; }
.stage:not([data-face="back"]) :is(.sheet-reverse, .stub-reverse),
.stage[data-face="back"] :is(.opening-copy-zone, .stub-copy),
.stage[data-renderer="webgl"] :is(.opening-copy-zone, .sheet-reverse, .stub-copy, .stub-reverse) { visibility: hidden; }

.opening-controls, .opening-fibers { width: min(100%, 480px); justify-self: center; }
.opening-controls { grid-area: controls; }
.opening-buttons { display: grid; grid-template-columns: minmax(125px, .85fr) minmax(0, 1.15fr); gap: 8px; }
.opening-flip, .opening-tear {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-block-size: clamp(43px, 5.55dvh, 55px); padding-inline: 11px; border-radius: 4px;
  font: 700 clamp(12px, 1.05vw, 15px) / 1.1 var(--body); white-space: nowrap;
  transition: background .16s ease, color .16s ease;
}
.opening-flip { border: 1px solid #9e9a90; background: transparent; color: var(--black); }
.opening-flip:hover { background: #e6e2da; }
.opening-tear { justify-content: space-between; padding-inline: clamp(12px, 1.35vw, 18px); border: 0; background: var(--black); color: var(--paper); }
.opening-tear:hover { background: #35352e; }
.opening-flip[aria-disabled="true"], .opening-tear[aria-disabled="true"] { cursor: default; }
.opening-buttons svg { inline-size: 18px; block-size: 18px; flex: none; }
.flip-short { display: none; }
.opening[data-tear-state="entered"] .opening-tear { background: var(--red); color: var(--black); transition: none; }
.opening:not([data-tear-state="idle"]) .opening-tear svg { visibility: hidden; }
.opening-pull-note { margin-top: 8px; text-align: center; color: var(--intro-muted); }
.opening-fibers { grid-area: fibers; display: grid; gap: 7px; }
.opening-fiber-labels {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  color: var(--intro-muted); font-variant-numeric: tabular-nums;
}
.opening-fiber-track {
  --fiber-marks: repeating-linear-gradient(to right, currentColor 0 calc(100% / 33 - 2px), transparent 0 calc(100% / 33));
  position: relative; block-size: 6px; color: #d2cdc4; background: var(--fiber-marks);
}
.opening-fiber-track::after {
  content: ""; position: absolute; inset: 0; color: #777568; background: var(--fiber-marks);
  clip-path: inset(0 0 0 var(--fibers-broken, 0%));
}
.opening[data-tear-direction="right"] .opening-fiber-track::after { clip-path: inset(0 var(--fibers-broken, 0%) 0 0); }

@media (min-width: 1024px) {
  .opening-layout {
    grid-template: "copy ticket" auto "controls ticket" auto ". ticket" minmax(0, 1fr) "fibers ticket" auto / minmax(0, clamp(300px, 30vw, 520px)) minmax(0, 1fr);
    column-gap: clamp(34px, 4.8vw, 100px); row-gap: clamp(15px, 4.3dvh, 47px); padding-block: 0;
  }
  .opening-copy { container-type: inline-size; text-align: start; padding-top: clamp(22px, 8dvh, 90px); }
  .opening-copy h1 { font-size: clamp(30px, min(11.7cqw, 7dvh), 71px); }
  .opening-description, .opening-available { font-size: clamp(14px, 1.02vw, 17px); }
  .opening-description { max-width: 36ch; }
  .opening-controls, .opening-fibers { justify-self: start; }
  .opening-fibers { margin-bottom: clamp(14px, 6.1dvh, 68px); }
  .ticket-field {
    --ticket-target: 68dvh;
    grid-template-rows: auto minmax(0, 1fr) auto; padding-block: clamp(9px, 3dvh, 38px) clamp(10px, 4dvh, 45px);
  }
  .ticket-labels {
    display: flex; justify-content: flex-end; color: var(--intro-muted);
  }
  .flip-mouse { display: inline; }
  .flip-touch { display: none; }
}
@media (max-width: 599px) {
  .opening { --intro-gutter: clamp(13px, 4.2vw, 24px); }
  .opening-header { grid-template-columns: minmax(0, 1fr) auto; min-block-size: clamp(44px, 6.7dvh, 61px); }
  .opening-header .wordmark { font-size: 22px; }
  .opening-index, .opening-description, .opening-pull-note, .ticket-hint-bend, .flip-full { display: none; }
  .opening-available { margin-top: 8px; }
  .ticket-field { --ticket-target: 50dvh; }
  .ticket-hint-tear { order: -1; }
  .opening-layout { padding-block: clamp(9px, 1.5dvh, 15px) clamp(8px, 1.25dvh, 13px); }
  .opening-buttons { grid-template-columns: 104px minmax(0, 1fr); }
  .flip-short { display: inline; }
}
@media (max-height: 590px) {
  .opening-layout { row-gap: 8px; }
  .opening-description { margin-top: 6px; }
  .opening-available { margin-top: 4px; }
  .opening-fibers { gap: 5px; }
  .opening-pull-note { margin-top: 5px; }
}
@media (min-width: 1024px) and (max-height: 500px) {
  .opening-copy { padding-top: 12px; }
  .opening-copy h1 { font-size: clamp(25px, 7dvh, 35px); }
  .opening-fibers { margin-bottom: 12px; }
}
@media (max-height: 390px) {
  .opening-header { min-block-size: 38px; }
  .opening-skip { min-block-size: 37px; }
  .opening-layout { row-gap: 5px; padding-block: 5px; }
  .opening-copy h1 { font-size: clamp(19px, 5.7dvh, 25px); }
  .opening-description, .opening-available { font-size: 11px; }
  .opening-flip, .opening-tear { min-block-size: 35px; }
  .opening-fibers { gap: 4px; }
}

#portfolio, .project-page, .reel-dialog, body:not(.opening-active) > .skip-link {
  font-family: var(--body); font-weight: 400;
}
:is(#portfolio, .project-page, .reel-dialog), :is(#portfolio, .project-page, .reel-dialog) * {
  font-kerning: normal; font-feature-settings: "kern" 1;
}
:where(#portfolio, .project-page, .reel-dialog) p { text-wrap: pretty; }
:where(#portfolio, .project-page, .reel-dialog) :is(.mono, .credits dt) { white-space: nowrap; }

#portfolio > section, .contact-content, .project-lead, .project-notes, .project-material { padding-block-end: var(--section-bottom); }
.eyebrow { font-weight: 600; }
.eyebrow + :is(h1, h2) { margin-block-start: var(--label-title-gap); }
.hero h1, .project-copy h1, .contact-content h2 {
  font: 900 var(--display-size)/.9 var(--display); letter-spacing: -.055em; word-spacing: .12em; text-wrap: balance; overflow-wrap: anywhere;
}
.work-heading h2, .section-heading h2, .project-notes h2, .material-heading h2 {
  font: 900 var(--h2-size)/.95 var(--display); letter-spacing: -.05em; word-spacing: .1em; color: var(--black); text-wrap: balance; overflow-wrap: anywhere;
}
.heading-measure {
  position: absolute; inline-size: min-content; visibility: hidden; pointer-events: none;
  white-space: normal; overflow-wrap: normal; hyphens: none; text-wrap: wrap;
}
.work-card h3, .profile-lead, .practice-list dt > [data-i18n], .project-pagination strong {
  font: 900 var(--h3-size)/1 var(--display); letter-spacing: -.035em; word-spacing: .04em; color: var(--black); text-wrap: pretty;
}
.role, .hero-line, .contact-note, .project-summary { font: 400 var(--lead-size)/1.45 var(--body); max-inline-size: 60ch; }
.work-card-summary, .profile-bio, .practice-list dd, .project-notes > p, .project-notice {
  font: 400 var(--body-size)/1.55 var(--body); color: #4b4942; max-inline-size: 62ch;
}
.hero-section { background: var(--black); color: var(--paper); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.hero { display: grid; grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr); align-items: center; gap: clamp(28px, 5vw, 80px); padding-block-start: 44px; }
.contact-content { container-type: inline-size; }
.hero .eyebrow { color: var(--muted); display: flex; align-items: center; gap: 9px; }
.signal-dot { width: 7px; height: 7px; flex: 0 0 7px; background: var(--red); border-radius: 50%; box-shadow: 0 0 0 3px #ee3c2920; }
.role { margin-block-start: var(--title-content-gap); font-weight: 700; }
.hero-line { color: var(--muted); margin-block-start: 7px; }
.hero-actions { margin-top: 31px; display: flex; align-items: center; flex-wrap: wrap; gap: 12px 21px; }
.button { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 12px 17px; font-size: var(--small-size); transition: background .18s, color .18s; }
.button svg { width: 16px; height: 16px; flex: 0 0 16px; }
.button-primary { background: var(--red); color: var(--paper); }
.button-primary:hover { background: #ff684e; }
.work-link { display: inline-flex; align-items: center; gap: 7px; border-bottom: 1px solid #77746d; padding: 7px 0 5px; white-space: nowrap; }
.work-link [aria-hidden="true"] { font-size: 13px; line-height: 1; }
.paper { color-scheme: light; background: var(--paper); color: var(--black); }
.paper .eyebrow { color: var(--label-accent); }
#portfolio .paper .eyebrow { color: var(--red); }
.eyebrow > span { margin-inline-start: 7px; }
.hero .eyebrow > span { margin-inline-start: 0; }
.photo-frame { display: block; overflow: hidden; }
.photo-frame > img {
  width: 100%; object-fit: cover; object-position: var(--photo-position, 50% 50%);
  transform-origin: var(--photo-position, 50% 50%); transform: scale(var(--photo-zoom, 1));
}
.reel-figure { max-width: 460px; width: 100%; justify-self: center; }
.reel-poster { display: block; position: relative; overflow: hidden; background: #0b0d12; }
.reel-poster:focus-visible { outline-color: var(--paper); }
.reel-poster img { width: 100%; height: auto; }
.poster-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 68px; height: 68px; display: grid; place-items: center; border: 1px solid #f6f4efba; border-radius: 50%; background: #141412bc; color: var(--paper); transition: background .18s; }
.poster-play svg { width: 23px; height: 23px; margin-left: 3px; }
.reel-poster:hover .poster-play { background: var(--red); color: var(--black); border-color: var(--red); }
.reel-figure figcaption { min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 7px; color: #514e47; }
.hero-reel { max-width: 420px; }
.hero-reel figcaption { color: var(--muted); }

.work-heading, .section-heading, .material-heading {
  border-top: 1px solid var(--paper-rule); padding-block: clamp(25px, 3.4vw, 46px) var(--title-content-gap);
}
.work-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.work-count, .project-frame-count { flex: none; white-space: nowrap; color: #58534c; margin-bottom: 4px; }
.work-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(18px, calc(6vw - 44px), 44px); row-gap: 0;
}
.work-card { min-width: 0; border-top: 1px solid var(--paper-rule); }
.work-card-link { display: block; }
@supports (grid-template-rows: subgrid) {
  .work-card, .work-card-link { display: grid; grid-template-rows: subgrid; grid-row: span 5; }
  .work-card-link { align-items: stretch; }
}
@media (min-width: 1024px) { .work-card:nth-child(n+4) { margin-block-start: var(--card-row-gap); } }
.work-card-index {
  display: flex; justify-content: space-between; align-items: center; gap: 3px; min-height: 42px;
  color: #514e47;
}
.work-card-index > span:last-child { color: var(--label-accent); font-size: 16px; line-height: 1; }
.work-card-art { aspect-ratio: 4 / 5; overflow: hidden; background: #e5e0d7; }
.work-card-art img { height: 100%; transition: transform .25s ease; }
.work-card-link:hover img { transform: scale(calc(var(--photo-zoom, 1) * 1.025)); }
.work-card-kind { margin-block-start: 16px; color: var(--red); }
.work-card h3 { margin-block-start: 10px; }
.work-card-summary { margin-block-start: 14px; }
.work-card-link:hover h3, .project-pagination a:hover strong { text-decoration: underline; text-decoration-color: var(--label-accent); text-underline-offset: .13em; }
.credits { border-top: 1px solid var(--paper-rule); margin-top: 24px; padding-top: 14px; display: grid; gap: 12px; }
.credits > div { display: grid; grid-template-columns: 93px minmax(0, 1fr); align-items: baseline; gap: 12px; }
.credits dt { font: 600 var(--label-size)/1.4 var(--mono); color: var(--label-accent); letter-spacing: .08em; text-transform: uppercase; }
.credits dd { font-size: var(--small-size); line-height: 1.55; text-wrap: pretty; }
.case-link {
  display: inline-flex; gap: 9px; align-items: center; min-height: 43px;
  border-bottom: 1px solid currentColor;
}
.case-link:hover { color: var(--label-accent); }

.profile-layout { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(27px, 8vw, 122px); align-items: center; }
.profile-portrait { width: 100%; max-width: 480px; }
.profile-portrait img { width: 100%; height: auto; background: #e6e1d8; }
.profile-portrait figcaption, .project-cover figcaption, .project-frame figcaption {
  display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px;
  padding: 9px 0 6px; color: #514e47;
}
.profile-copy { max-width: 620px; }
.profile-bio { margin-top: 17px; }
.profile-credits > div { grid-template-columns: 184px minmax(0, 1fr); align-items: baseline; }
.profile-credit-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.profile-credit-list :is(a, strong) { font-weight: 700; }
.profile-credit-list a { text-decoration: underline; text-underline-offset: .2em; }
.profile-credit-list a:hover { color: var(--label-accent); }
.collaboration-project-name { display: none; }
.profile-collaborations { gap: 12px; }
.profile-collaborations li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: 9px; }
.collaboration-number { color: var(--red); font-weight: 600; }
.collaboration-description { margin-block-start: 2px; color: #4b4942; }
.profile-programs dd { color: #4b4942; }
.profile-actions { display: flex; align-items: center; flex-wrap: wrap; column-gap: clamp(12px, 2.7vw, 32px); margin-top: 18px; }
.profile-actions > span { color: #58534c; padding-block: 12px; }
.practice-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(16px, 3.3vw, 51px); row-gap: 0; }
.practice-list > div { min-width: 0; border-top: 1px solid var(--paper-rule); padding-top: 16px; }
@supports (grid-template-rows: subgrid) {
  .practice-list > div { display: grid; grid-template-rows: subgrid; grid-row: span 3; }
  .practice-list dt { display: grid; grid-template-rows: subgrid; grid-row: span 2; }
}
.practice-list dt > span[aria-hidden="true"] { display: block; margin-bottom: var(--label-title-gap); color: var(--label-accent); font-weight: 600; }
.practice-list dt > [data-i18n] { display: block; }
.practice-list dd { margin-top: 10px; }

.project-main { padding-bottom: clamp(33px, 5.4vw, 77px); }
.project-crumb {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 57px;
  border-bottom: 1px solid var(--paper-rule);
}
.project-crumb a { display: inline-flex; align-items: center; min-height: 44px; }
.project-crumb a:hover { color: var(--label-accent); }
.project-crumb > span { color: #514e47; }
.project-lead {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: clamp(29px, 6.8vw, 105px);
  align-items: center; padding-block-start: clamp(28px, 5.6vw, 85px);
}
.project-copy { min-width: 0; }
.project-heading { margin-bottom: var(--title-content-gap); }
.project-subtitle { margin-top: 16px; font: italic clamp(22px, 2.2vw, 30px)/1.25 Georgia, serif; }
.project-kind { color: #514e47; }
.project-summary { margin-top: 16px; }
.project-notice { margin-top: 14px; border-left: 2px solid var(--paper-rule); padding-left: 11px; color: var(--black); }
.project-notice-footnote { margin-block-start: 18px; border: 0; padding-inline-start: 0; font-size: var(--small-size); line-height: 1.45; }
.project-footnote-mark { color: var(--label-accent); font-weight: 700; }
.project-copy .case-link { margin-top: 11px; }
.project-cover { justify-self: center; width: 100%; max-width: 530px; }
.project-photo { aspect-ratio: 4 / 5; background: #e6e1d8; }
.project-photo > img { height: 100%; }
.project-notes {
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); gap: var(--title-content-gap);
  align-items: end; border-top: 1px solid var(--paper-rule); padding-block-start: clamp(25px, 3.4vw, 46px);
}
.material-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.project-frames { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gallery-gap); align-items: start; }
.project-frame { min-width: 0; }
.project-motion-link { padding: 3px 0 5px; border-bottom: 1px solid currentColor; color: var(--label-accent); }
.project-motion-link:hover { color: var(--black); }
.project-pagination { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; border-block: 1px solid var(--paper-rule); }
.project-pagination a { display: grid; align-content: start; gap: var(--label-title-gap); min-height: 96px; min-width: 0; padding: 14px 0; }
.project-pagination a:last-child { text-align: end; }
.project-pagination a > span { color: var(--label-accent); }
.project-pagination strong { overflow-wrap: anywhere; }

@media (max-width: 1023px) {
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 680px) and (max-width: 1023px) {
  .work-card:nth-child(n+3) { margin-block-start: var(--card-row-gap); }
}
@media (max-width: 710px) {
  .profile-layout, .project-lead, .project-notes { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .profile-portrait, .project-cover { max-width: 530px; justify-self: start; }
}
@media (max-width: 520px) {
  .profile-credits > div { grid-template-columns: minmax(0, 1fr); gap: 5px; }
}

.contact-section { color-scheme: light; background: var(--red); color: var(--black); }
.contact-content { padding-block-start: clamp(42px, 6.7vw, 98px); border-top: 1px solid var(--black); }
.contact-note { margin-block: var(--title-content-gap) 25px; white-space: pre-line; }
.contact-email {
  display: flex; justify-content: space-between; align-items: center; gap: .18em;
  border-block: 1px solid var(--black); padding: 15px 0 17px;
  font: 900 min(var(--email-size), 8.16cqi)/1 var(--display); letter-spacing: -.025em; white-space: nowrap;
}
.contact-email:hover { text-decoration: underline; text-underline-offset: .14em; }
.contact-arrow { width: .84em; height: .84em; flex: 0 0 .84em; }
.contact-section :focus-visible { outline-color: var(--black); }
.footer-links { min-height: 69px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0 8px; }
.footer-signature { min-width: 0; white-space: normal; }
.footer-signature > span, .footer-practice, .footer-nav a { white-space: nowrap; }
.footer-practice { justify-self: center; }
.footer-nav { display: flex; justify-content: flex-end; flex-wrap: wrap; min-width: 0; column-gap: clamp(8px, calc(1.5vw - 8px), 18px); }
.footer-links a { padding: 7px 0; }
.footer-links a:hover { text-decoration: underline; text-underline-offset: 3px; }

.reel-dialog { max-width: calc(100vw - 22px); max-height: 94svh; width: min(76vw, calc(83svh * .75), 560px); padding: 0; margin: auto; background: var(--black); color: var(--paper); border: 1px solid #625c52; overscroll-behavior: contain; }
.reel-dialog::backdrop { background: #080807ed; }
.player-heading { min-height: 44px; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-left: 13px; }
.player-close { display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding-inline: 12px; border: 0; background: transparent; text-transform: uppercase; font: inherit; }
.player-close [aria-hidden="true"] { font-size: 19px; line-height: .75; }
.player-close:hover { background: #39352f; }
.reel-dialog video { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: contain; background: #050505; }
.reel-error { padding: 12px; font-size: 13px; }
.reel-error a { text-decoration: underline; }

@media (min-width: 1180px) and (max-height: 800px) {
  .hero { padding-block-start: 31px; }
}
@media (max-width: 1120px) {
  .hero-contact { display: none; }
  .hero { gap: 30px; }
}
@media (max-width: 800px) {
  .header { min-height: 64px; gap: 14px; }
  .wordmark { font-size: 25px; gap: 8px; }
  .wordmark-mark { inline-size: 24px; }
  .hero { grid-template-columns: minmax(0, 1fr); gap: 34px; padding-block-start: 37px; }
  .hero-actions { margin-top: 23px; }
  .hero-contact { display: inline-flex; }
  .reel-figure { max-width: 560px; justify-self: start; }
}
@media (min-width: 600px) and (max-width: 1100px) {
  .footer-links.wrap { padding-inline: clamp(12px, calc(4vw - 12px), var(--gutter)); }
}
@media (max-width: 440px) {
  .hero-actions { gap: 11px 14px; }
  .hero-contact { display: none; }
  .button { padding-inline: 12px; min-height: 45px; }
  #portfolio, .project-page { --gutter: clamp(10px, calc(8vw - 16px), 20px); }
  .reel-dialog { width: min(calc(100vw - 22px), calc(80svh * .75)); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

.language-switch { display: inline-flex; flex: none; align-items: center; gap: 10px; }
.language-switch button {
  position: relative; display: grid; place-items: center; inline-size: 20px; block-size: 29px;
  padding: 0; border: 0; background: transparent; color: inherit;
}
.language-switch svg { display: block; inline-size: 20px; block-size: 13px; border: .65px solid #141412; }
.language-switch button[aria-pressed="false"] svg { filter: grayscale(1); opacity: .4; }
.language-switch button:hover svg, .language-switch button:focus-visible svg { filter: none; opacity: 1; }
.language-switch button[aria-pressed="true"]::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 3px; height: 1.5px; background: #141412;
}
.header .language-switch button[aria-pressed="true"]::after { box-shadow: 0 0 0 .55px #f4f2ee; }
.language-switch button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.not-found-page { color-scheme: light; }
.not-found { min-height: 100svh; display: grid; align-content: center; justify-items: start; padding-block: 48px; }
.not-found .eyebrow { color: var(--label-accent); }
.not-found h1 { font: 900 clamp(42px, 7vw, 104px)/.95 var(--display); letter-spacing: -.055em; }
.not-found-note { margin-top: 24px; font-size: var(--body-size); line-height: 1.55; }
.not-found-home { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 12px; text-decoration: underline; text-underline-offset: .28em; }
.not-found-home:hover { color: var(--label-accent); }
.opening-tools { display: flex; justify-self: end; align-items: center; gap: clamp(10px, 1.55vw, 22px); white-space: nowrap; }
.header nav { gap: clamp(14px, 2.5vw, 32px); }
.header-links { display: flex; align-items: center; gap: clamp(12px, 2.45vw, 36px); }
.flip-phone { display: none; }
:is(.opening, .editor-body) [data-font-choice="display"] { font-family: var(--display) !important; font-weight: 900 !important; }
:is(.opening, .editor-body) [data-font-choice="anton"] { font-family: var(--anton) !important; font-weight: 400 !important; }
:is(.opening, .editor-body) [data-font-choice="mono"] { font-family: var(--mono) !important; font-weight: 400 !important; }
:is(.opening, .editor-body) [data-font-choice="body"] { font-family: var(--body) !important; font-weight: 400 !important; }
html[lang="pl"] .ticket-hints { flex-wrap: wrap; row-gap: 3px; }
html[lang="pl"] .opening-buttons { grid-template-columns: minmax(160px, .95fr) minmax(120px, 1.05fr); }
@media (max-width: 679px) {
  .work-grid { grid-template-columns: minmax(0, 1fr); }
  .work-card, .work-card-link { display: block; grid-row: auto; }
  .work-card + .work-card { margin-block-start: var(--card-row-gap); }
}
@media (max-width: 599px) {
  .contact-content { padding-block-end: 30px; }
  .footer-links {
    grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center;
    min-block-size: 0; padding-block-end: max(8px, env(safe-area-inset-bottom)); gap: 4px;
  }
  .footer-links::before {
    content: ""; inline-size: 100%; border-block-start: 1px solid currentColor; opacity: .32; margin-block-end: 10px;
  }
  .footer-signature, .footer-practice { text-wrap: balance; }
  .footer-practice { white-space: normal; }
  .footer-nav {
    display: grid; grid-template-columns: 1fr auto 1fr; width: 100%; column-gap: 8px; margin-block-start: 3px;
  }
  .footer-nav a { display: inline-flex; align-items: center; justify-content: center; gap: .45em; min-block-size: 44px; }
  .footer-nav a:first-child { justify-self: start; }
  .footer-nav a:last-child { justify-self: end; }
  .practice-list { grid-template-columns: minmax(0, 1fr); row-gap: 21px; }
  .practice-list > div, .practice-list dt { display: block; grid-row: auto; }
  .work-heading, .material-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; align-items: baseline; }
  .work-heading > div, .material-heading > div { display: contents; }
  .work-heading h2, .material-heading h2 { grid-column: 1 / -1; grid-row: 2; }
  .work-count, .project-frame-count { grid-column: 2; grid-row: 1; margin: 0; }
  .project-frames { grid-template-columns: minmax(0, 1fr); }
  .project-pagination { gap: 0; }
  .project-pagination a { min-height: 76px; gap: 8px; padding: 12px 10px 14px 0; }
  .project-pagination a:last-child { border-inline-start: 1px solid var(--paper-rule); padding-inline: 10px 0; }
  .project-pagination a > span { white-space: normal; }
  .project-pagination strong { font-size: clamp(17px, 5vw, 24px); line-height: 1.1; text-wrap: balance; }
  .header { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 16px; padding-block: 11px 3px; }
  .header nav { display: contents; }
  .header .language-switch {
    grid-column: 2; grid-row: 1; justify-self: end; position: relative; inline-size: 50px; block-size: 29px;
    margin-inline-end: max(0px, 14px - var(--gutter));
  }
  .header .language-switch button {
    position: absolute; z-index: 1; inset-block-start: -11px; inline-size: 44px; block-size: 44px;
    align-items: start; padding-block-start: 19px;
  }
  .header .language-switch button:first-child { inset-inline-start: -24px; justify-items: end; }
  .header .language-switch button:last-child { inset-inline-start: 20px; justify-items: start; padding-inline-start: 10px; }
  .header .language-switch button::after { inset-block-end: 7px; }
  .header .language-switch button:first-child::after { inset-inline: 24px 0; }
  .header .language-switch button:last-child::after { inset-inline: 10px 14px; }
  .header-links { grid-column: 1 / -1; grid-row: 2; justify-content: space-between; gap: 9px; }
  .header-links a { padding-block: 10px; }
  .flip-touch { display: none; }
  .flip-phone { display: inline; }
  html[lang="pl"] .opening-buttons { grid-template-columns: 104px minmax(0, 1fr); }
  .profile-lead-name { display: block; font-size: clamp(22px, 6.5vw, 27px); }
  .profile-lead-role {
    display: block; margin-block-start: 6px; font-size: clamp(18px, 4.9vw, 22px);
    font-weight: 700; line-height: 1.18; letter-spacing: -.025em; text-wrap: balance;
  }
  .collaboration-project-link { display: none; }
  .collaboration-project-name { display: inline; }
}