/* Dawid Nikadon - portfolio.
   One family (Archivo, variable width) for everything: the condensed cut
   shouts, the normal cut talks. Warm black, paper, and liquid chrome as the
   only accent, with a light sweep on hover. Square corners everywhere.
   Motion lives in site.js; CSS holds end states only, so a crawler or a failed
   script still sees every word. */

@font-face { font-family: 'Archivo'; src: url(../fonts/archivo-latin.woff2) format('woff2');
  font-weight: 100 900; font-stretch: 62% 125%; 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(../fonts/archivo-latinext.woff2) format('woff2');
  font-weight: 100 900; font-stretch: 62% 125%; 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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --ink: #100f0c;
  --ink-2: #1a1814;
  --paper: #ebe3d3;
  --paper-dim: rgba(235, 227, 211, .6);
  --paper-faint: rgba(235, 227, 211, .16);
  --paper-ghost: rgba(235, 227, 211, .3);
  --ink-dim: rgba(16, 15, 12, .62);
  --ink-faint: rgba(16, 15, 12, .16);
  --shadow: rgba(16, 15, 12, .45);
  /* Round 4: the metal itself is live WebGL (js/liquid.js) on four surfaces
     only; every smaller accent is this plain silver, no painted-on shine. */
  --accent: #d6d7d9;

  --gut: clamp(16px, 2.6vw, 40px);
  --col-gap: clamp(12px, 1.6vw, 24px);
  --bar-h: 60px;

  --f: 'Archivo', 'Arial Narrow', sans-serif;

  --t-fast: 180ms;
  --t-mid: 240ms;
  --ease-out: cubic-bezier(.165, .84, .44, 1); /* easeOutQuart, the references' UI curve */
  --ease-io: cubic-bezier(.76, 0, .24, 1);

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
/* No double-tap zoom anywhere (round 5: brushing on a phone kept zooming
   the page); the hero is a locked first slide on touch screens, below. */
html { -webkit-text-size-adjust: 100%; touch-action: manipulation; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--f);
  font-stretch: 100%;
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, video { display: block; max-width: 100%; }
/* Reveal start states (a logo sliding in from 8 % right, letters spread apart)
   sit outside the column until they play; clip them per section so the page
   never gets wider than the screen. clip, not hidden: keeps position:sticky. */
main > section, .foot { overflow-x: clip; }
a { color: inherit; text-decoration: none; }
button { font: inherit; text-transform: inherit; letter-spacing: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; border-radius: 0; }
::selection { background: var(--accent); color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.wrap { padding-inline: var(--gut); }
.label { font-size: 14px; font-weight: 500; color: var(--paper-dim); margin: 0 0 10px; }
.h2 {
  margin: 0;
  font-stretch: 62%;
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(56px, 11vw, 200px);
  line-height: .82;
  letter-spacing: -.01em;
}
.h2 sup { font-size: clamp(16px, 1.6vw, 24px); font-stretch: 100%; font-weight: 500; vertical-align: top; margin-left: .3em; letter-spacing: 0; color: var(--accent); }

/* ---------- curtain: lifts once on load ---------- */
.loader { display: none; }
.js .loader { display: block; position: fixed; inset: 0; z-index: 90; pointer-events: none; }
.loader__panel { position: absolute; inset: 0; background: var(--ink); }
.js .loader.is-done, .loader-off .loader { display: none; }

/* ---------- liquid chrome (js/liquid.js) ----------
   An absolutely placed canvas over its host; transparent wherever the brush
   has not been, so without WebGL the page underneath is simply the page. */
.liquid { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }

/* ---------- page tint: the hovered project's colour, over the whole page ---------- */
.tint { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
  transition: opacity 400ms var(--ease-out), background-color 400ms var(--ease-out); }
.tint.is-on { opacity: .42; }

/* ---------- warp: two panels cover the screen during a section jump ---------- */
.warp { position: fixed; inset: 0; z-index: 85; pointer-events: none; visibility: hidden; }
.warp i { position: absolute; inset: 0; transform: translateY(100%); }
.warp i:first-child { background: var(--accent); }
.warp i:last-child { background: var(--ink); }

/* ---------- top bar ---------- */
.bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  height: var(--bar-h);
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: clamp(16px, 2.4vw, 36px);
  padding-inline: var(--gut);
  color: var(--paper);
  transition: color var(--t-mid), transform var(--t-mid) var(--ease-out);
}
.bar { transition: color var(--t-mid), background-color var(--t-mid); }
/* Over the hero the bar floats; past it, it gets a solid ground so it never
   collides with the big headings (it no longer hides on scroll). */
.bar.is-solid { background: var(--bar-tint, var(--ink)); }
.bar { transition: color var(--t-mid), background-color 400ms var(--ease-out); }
.bar.on-paper { color: var(--ink); }
.bar.on-paper.is-solid { background: var(--paper); }
.js .bar__name { opacity: 0; transition: opacity var(--t-mid) var(--ease-out); }
.js .bar__name.is-shown { opacity: 1; }
/* The hero name's own cut and em letter-spacing: the fly-in lands on these
   exact glyphs, so the hand-over cannot jump (#217). */
.bar__name { font-weight: 800; font-stretch: 62%; text-transform: uppercase; font-size: 23px; letter-spacing: -.012em; line-height: 1; justify-self: start; }
.bar__nav { display: flex; gap: clamp(16px, 2vw, 30px); }
.bar__nav a, .bar__menu { font-size: 15px; font-weight: 500; position: relative; padding: 8px 0; }
.bar__nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform var(--t-mid) var(--ease-out);
}
.bar__nav a:hover::after, .bar__nav a.is-active::after { transform: scaleX(1); transform-origin: left; }
.lang { display: flex; gap: 6px; align-items: center; font-size: 15px; font-weight: 500; }
.lang button { padding: 8px 2px; opacity: .45; transition: opacity var(--t-fast); }
.lang button[aria-pressed="true"] { opacity: 1; }
.lang span { opacity: .45; }
.bar__menu { display: none; }

.sheet {
  position: fixed; inset: 0; z-index: 55; background: var(--ink);
  display: flex; align-items: flex-end; padding: calc(var(--bar-h) + 24px) var(--gut) 48px;
}
.sheet[hidden] { display: none; }
.sheet nav { display: flex; flex-direction: column; }
.sheet a { font-stretch: 62%; font-weight: 800; text-transform: uppercase; font-size: clamp(56px, 17vw, 120px); line-height: .9; }

@media (max-width: 860px) {
  .bar__nav { display: none; }
  .bar__menu { display: block; }
}

/* ---------- hero ---------- */
.hero { position: relative; height: 100svh; min-height: 560px; overflow: hidden; background: var(--ink); }
.hero__frame { position: absolute; inset: 0; overflow: hidden; }
.hero__video { width: 100%; height: 100%; object-fit: cover; }
.hero__shade { position: absolute; inset: 0; background:
  linear-gradient(to top, rgba(16,15,12,.85) 0%, rgba(16,15,12,.25) 45%, rgba(16,15,12,.1) 70%, rgba(16,15,12,.5) 100%); }
.hero__text { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 var(--gut) calc(var(--gut) + 6px); }
.hero__nameWrap { position: relative; transform-origin: 0 0; }
/* The brush canvas covers video, name and the button row (round 6: the
   button turns to chrome under the brush like the name; the canvas lets
   clicks through). */
.hero > .liquid { z-index: 2; }
.hero__foot { position: relative; z-index: 1; }
.hero__name {
  margin: 0;
  font-stretch: 62%;
  font-weight: 800;
  text-transform: uppercase;
  line-height: .78;
  letter-spacing: -.012em;
  font-size: 17vw; /* site.js fits this to the exact row width */
  white-space: nowrap;
}
.hero__line { display: inline-block; white-space: nowrap; } /* a name line never breaks inside a word, even if the fit is off by a pixel */
.hero__line + .hero__line { margin-left: .18em; }
.hero__foot { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: clamp(18px, 2.4vw, 32px); }
.hero__scroll { display: inline-flex; gap: 10px; align-items: center; color: var(--paper-dim); white-space: nowrap; font-size: 15px; font-weight: 500;
  transition: opacity var(--t-mid) var(--ease-out), transform var(--t-mid) var(--ease-out); }
.hero__scroll.is-gone { opacity: 0; transform: translateY(8px); pointer-events: none; }

/* CTA: a slab, not a pill. The arrow block carries the accent. */
.cta {
  position: relative;
  display: inline-flex; align-items: stretch; min-height: 56px;
  background: var(--paper); color: var(--ink);
  font-stretch: 75%; font-weight: 800; text-transform: uppercase; font-size: clamp(18px, 1.6vw, 22px); letter-spacing: .01em;
}
.cta > span:first-child { display: flex; align-items: center; padding: 0 22px; }
.cta__arrow { display: flex; align-items: center; justify-content: center; width: 64px; font-size: 1.5em; font-weight: 900; }
/* no width change on hover: the brush layer is drawn from this layout */
/* Phones: one line, full width, and it is the way into the page: the hero
   itself is a locked slide where a finger only brushes. */
@media (hover: none) { .hero { touch-action: none; } }
@media (max-width: 700px) {
  .hero__foot { display: block; }
  .cta { display: flex; width: 100%; min-height: 52px; font-stretch: 62%; font-size: clamp(14px, 4.9vw, 21px); white-space: nowrap; }
  .cta > span:first-child { flex: 1; padding: 0 14px; }
  .cta__arrow { width: 48px; font-size: 1.35em; }
  .hero__name { white-space: normal; }
  .hero__line { display: table; } /* own line, but shrink-wrapped so fitName can measure the glyphs */
  .hero__line + .hero__line { margin-left: 0; }
  .hero__scroll { display: none; }
}

/* ---------- statement ---------- */
.statement { padding-block: clamp(120px, 22vh, 260px) clamp(120px, 20vh, 240px); }
.statement__text .w { display: inline-block; }
/* Words with their own motion: silver, they do a small move once the
   scroll reveal reaches them. */
.statement__text .kw { display: inline-block; }
.statement__text .kw .c { display: inline-block; color: var(--accent); }
.statement__text {
  margin: 0; max-width: 21em;
  font-size: clamp(30px, 4.4vw, 76px);
  line-height: 1.04; font-weight: 600; font-stretch: 80%; letter-spacing: -.012em;
}

/* ---------- work ---------- */
.work { padding-bottom: clamp(100px, 16vh, 200px); position: relative; isolation: isolate; }
.work__head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(32px, 5vh, 56px); }

.list { list-style: none; margin: 0; }
.list .row { border-top: 1px solid var(--paper-faint); }
.list .row:last-child { border-bottom: 1px solid var(--paper-faint); }
.row > a {
  display: grid; align-items: center; gap: var(--col-gap);
  grid-template-columns: minmax(0, 1fr) minmax(0, 15rem) 3.5rem 1.5rem;
  padding: clamp(14px, 1.8vw, 22px) 0;
  position: relative;
}
.row__artist, .row__year { font-size: 14px; font-weight: 500; color: var(--paper-dim); }
.row__title {
  font-stretch: 62%; font-weight: 800; text-transform: uppercase;
  font-size: clamp(34px, 5.2vw, 96px); line-height: .9; letter-spacing: -.005em;
  overflow-wrap: anywhere;
}
.row__go { justify-self: end; font-size: 20px; transition: transform var(--t-mid) var(--ease-out); }
.row__views { display: block; margin-top: 2px; color: var(--paper); }
.row__thumb { display: none; }
.row.is-out { display: none; }
@media (hover: hover) and (pointer: fine) {
  .list:hover .row > a { opacity: .32; }
  .list .row > a { transition: opacity var(--t-mid) var(--ease-out); }
  .list .row > a:hover, .list .row > a:focus-visible { opacity: 1; }
  /* Highlighter wipe (from Thomas Ciszewski): an accent block runs under the
     title, left to right, and the title flips to ink on top of it. */
  .row__title { position: relative; z-index: 0; justify-self: start; padding: 0 .08em; margin-left: -.08em; transition: color var(--t-mid) var(--ease-out), transform var(--t-mid) var(--ease-out); }
  .row__title::before { content: ''; position: absolute; z-index: -1; inset: .06em 0 .02em; background: var(--accent);
    transform: scaleX(0); transform-origin: right; transition: transform 300ms var(--ease-out); }
  .row > a:hover .row__title { transform: translateX(10px); color: var(--ink); }
  .row > a:hover .row__title::before { transform: scaleX(1); transform-origin: left; }
  .row > a:hover .row__go { transform: translateX(6px); }
  .row > a:hover .row__artist, .row > a:hover .row__year { color: var(--paper); }
}
@media (max-width: 860px) {
  .row > a { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; padding: 18px 0 22px; }
  .row__thumb {
    display: block; grid-column: 1 / -1; position: relative; aspect-ratio: 16 / 9; overflow: hidden;
    background: var(--ink-2); margin-bottom: 10px;
  }
  .row__thumb img, .row__thumb video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .row__title { grid-column: 1 / -1; grid-row: 2; }
  .row__artist { grid-column: 1; grid-row: 3; }
  .row__year { grid-column: 2; grid-row: 3; justify-self: end; }
  .row__go { display: none; }
}

/* cursor-following preview */
.peek { position: fixed; left: 0; top: 0; z-index: 40; pointer-events: none; width: clamp(280px, 30vw, 500px); visibility: hidden; }
.peek.is-vertical { width: clamp(180px, 15vw, 260px); }
.peek__inner { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink-2); clip-path: inset(50% 50% 50% 50%); }
.peek.is-vertical .peek__inner { aspect-ratio: 9 / 16; }
.peek__inner img, .peek__inner video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (hover: none), (pointer: coarse) { .peek { display: none; } }

/* ---------- experience (paper section) ---------- */
.exp { background: var(--paper); color: var(--ink); padding-block: clamp(100px, 16vh, 200px); }
.exp .h2 { margin-bottom: clamp(48px, 8vh, 96px); }
.job { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 112px); align-items: center; }
/* #218 + round 5: the title over the logo on the left, nothing else; the
   brands it worked with on the right, an even 2 x 4 grid (no orphan row). */
.job__logo { display: flex; align-items: center; }
.logo { display: block; background: currentColor; max-width: 100%;
  -webkit-mask: var(--src) center / contain no-repeat; mask: var(--src) center / contain no-repeat; }
/* The liquid canvas is a child of the masked logo, so the mask cuts the metal
   to the letters too. */
.job__logo .logo { width: 100%; position: relative; overflow: hidden; touch-action: pan-y; }
.job__wordmark { font-stretch: 62%; font-weight: 900; text-transform: lowercase; font-size: clamp(80px, 13vw, 240px); line-height: .8; letter-spacing: -.02em; }
.job__role { margin: 0 0 clamp(16px, 2vw, 28px); font-stretch: 62%; font-weight: 800; text-transform: uppercase; font-size: clamp(36px, 4.4vw, 76px); line-height: .9; letter-spacing: -.01em; }
.job__ex { font-size: .5em; vertical-align: .72em; margin-right: .06em; letter-spacing: 0; }
.brands { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: clamp(64px, 9vh, 92px); gap: clamp(16px, 2.4vh, 28px) clamp(24px, 3vw, 48px); align-items: center; justify-items: center; }
.brands[hidden] { display: none; }
.brands li { display: flex; align-items: center; justify-content: center; color: var(--ink); min-height: 64px; }
.brands { position: relative; touch-action: pan-y; } /* one brush canvas over the whole grid */
.brands .logo { transform: scale(1.25); opacity: .8; transition: opacity var(--t-mid) var(--ease-out), transform var(--t-mid) var(--ease-out); }
.brands li:hover .logo { opacity: 1; } /* no hover scale: the brush mask is drawn from where the logos stand */
@media (max-width: 860px) {
  .job { grid-template-columns: 1fr; }
  .brands { margin-top: 40px; grid-auto-rows: 72px; }
  .brands .logo { transform: none; }
}

/* ---------- about ---------- */
.about { padding-block: clamp(100px, 16vh, 200px); }
.about__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--col-gap); align-items: start; }
.about__copy { grid-column: 1 / 6; grid-row: 1 / 3; position: sticky; top: calc(var(--bar-h) + 16vh); margin-top: 16vh; } /* #219: lower */
.about__h { margin: 0 0 28px; font-stretch: 62%; font-weight: 800; text-transform: uppercase; font-size: clamp(48px, 5.6vw, 104px); line-height: 1.02; letter-spacing: -.01em; } /* #220: room for the Ą tail */
.about__p2 { max-width: 32em; font-size: clamp(18px, 1.35vw, 21px); line-height: 1.45; margin: 0;
  text-align: justify; text-align-last: left; hyphens: manual; } /* #219: full rows, no word broken with a hyphen */
/* Plain inline words here (opacity still applies): an inline-block word
   cannot be stretched by justify, which left gaps like moats. */
.about__p2 .w { display: inline; }
.shot { margin: 0; position: relative; }
.shot img { width: 100%; height: auto; }
.shot picture { display: block; position: relative; overflow: hidden; }
.shot { cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; }
/* the secret picture covers the photo exactly, above the liquid canvas */
.shot img.shot__egg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; }
.shot--a { grid-column: 7 / 10; grid-row: 1; }
.shot--b { grid-column: 10 / 13; grid-row: 1; margin-top: 22vh; }
.shot--c { grid-column: 6 / 11; grid-row: 2; margin-top: 4vh; }

@media (max-width: 860px) {
  .about__copy { grid-column: 1 / -1; grid-row: auto; position: static; margin: 0 0 24px; }
  .shot--a { grid-column: 1 / 8; grid-row: auto; }
  .shot--b { grid-column: 6 / 13; grid-row: auto; margin-top: -10vh; }
  .shot--c { grid-column: 2 / 12; grid-row: auto; margin-top: 4vh; }
}

/* ---------- contact ---------- */
.contact { padding-block: clamp(100px, 16vh, 200px) clamp(60px, 10vh, 120px); border-top: 1px solid var(--paper-faint); }
.contact__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--col-gap); }
.contact__head { grid-column: 1 / 6; grid-row: 1; align-self: start; position: sticky; top: calc(var(--bar-h) + 40px); } /* #221: back on the left */
.contact__head .direct { margin-top: 40px; }
.contact__title { margin: 0; font-stretch: 62%; font-weight: 800; text-transform: uppercase; font-size: clamp(96px, 15vw, 280px); line-height: .8; letter-spacing: -.015em; }
.contact__lead { margin: 24px 0 48px; color: var(--paper-dim); font-size: 19px; max-width: 24em; }
.direct__mail { display: inline-block; font-stretch: 85%; font-weight: 600; font-size: clamp(18px, 1.6vw, 24px); border-bottom: 1px solid var(--paper-faint); padding-bottom: 2px; overflow-wrap: anywhere; transition: border-color var(--t-fast); }
.direct__mail:hover { border-color: var(--paper); }
.btn-text { display: inline-flex; min-height: 44px; align-items: center; margin-left: 12px; color: var(--paper-dim); font-size: 15px; font-weight: 500; transition: color var(--t-fast); }
.btn-text:hover { color: var(--paper); }

.form { grid-column: 7 / 13; grid-row: 1; display: flex; flex-direction: column; gap: 34px; }
.field { border: 0; margin: 0; padding: 0; min-width: 0; position: relative; }
.field label, .field legend { display: block; font-size: 15px; font-weight: 500; color: var(--paper-dim); margin-bottom: 8px; padding: 0; }
.field em { font-style: normal; opacity: .6; }
.field input, .field textarea {
  width: 100%; font: inherit; font-size: 20px; color: var(--paper); background: transparent;
  border: 0; border-bottom: 1px solid var(--paper-faint); border-radius: 0; padding: 8px 0 12px;
  transition: border-color var(--t-fast);
}
.field textarea { resize: vertical; min-height: 140px; line-height: 1.4; }
.field input::placeholder, .field textarea::placeholder { color: var(--paper-ghost); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--paper); }
.field.is-bad input, .field.is-bad textarea { border-color: var(--paper); border-bottom-width: 2px; }
.field__err { margin: 6px 0 0; color: var(--paper); font-size: 14px; font-weight: 500; }
.chips { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.chips legend { width: 100%; margin-bottom: 12px; }
/* Options read as words, not as boxes: condensed caps, dim until chosen; the
   chosen one gets a silver bar under it. */
.chips button {
  position: relative; padding: 4px 0 10px; min-height: 44px;
  font-stretch: 70%; font-weight: 800; text-transform: uppercase; font-size: clamp(22px, 2vw, 30px); line-height: 1;
  color: var(--paper-ghost); transition: color var(--t-fast);
}
.chips button::after { content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 3px; background: var(--accent);
  transform: scaleX(0); transform-origin: left; transition: transform var(--t-mid) var(--ease-out); }
.chips button:hover { color: var(--paper-dim); }
.chips button[aria-pressed="true"] { color: var(--paper); }
.chips button[aria-pressed="true"]::after { transform: scaleX(1); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form__foot { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.send {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 40px;
  min-width: min(100%, 320px); min-height: 64px; padding: 0 22px;
  background: var(--paper); color: var(--ink); /* round 5: plain paper, no metal */
  font-stretch: 70%; font-weight: 800; text-transform: uppercase; font-size: 26px; letter-spacing: .01em;
}
.send__arrow { transition: transform var(--t-mid) var(--ease-out); }
.send:hover .send__arrow { transform: translateX(8px); }
.send[disabled] { opacity: .6; cursor: progress; }
.form__status:empty { display: none; }
.form__status { border-left: 2px solid var(--paper); padding: 6px 0 6px 14px; font-size: 18px; }
.form__status.is-err { border-color: var(--paper); border-left-width: 4px; }
.form__status a { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 860px) {
  .contact__head, .form { grid-column: 1 / -1; grid-row: auto; }
  .contact__head { position: static; text-align: left; order: -1; }
  .form { margin-top: 48px; }
}

/* ---------- footer ---------- */
.foot { padding-bottom: 28px; overflow: hidden; }
.marquee { overflow: hidden; padding-block: clamp(24px, 4vh, 48px); }
.marquee__track { display: flex; width: max-content; white-space: nowrap; }
.marquee__track span {
  font-stretch: 62%; font-weight: 800; text-transform: uppercase;
  font-size: clamp(64px, 12vw, 220px); line-height: .9; padding-right: .3em;
  color: transparent; -webkit-text-stroke: 1px var(--paper-dim);
}
/* "Producent video" is the job title, so it is the one set solid; the Gothic
   nudge is the only accent in the line. */
.marquee__track span.is-main { color: var(--paper); -webkit-text-stroke: 0; }
.marquee__track span.is-nudge { color: var(--accent); -webkit-text-stroke: 0; }
.foot__row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px 28px; color: var(--paper-dim); border-top: 1px solid var(--paper-faint); padding-top: 20px; font-size: 14px; font-weight: 500; }
.foot__row a { transition: color var(--t-fast); }
.foot__row a:hover { color: var(--paper); }
/* the grzybek mark: a tiny chrome mushroom, one text-height, before the © */
.foot__copy { display: inline-flex; align-items: center; gap: .45em; }
.mush { position: relative; display: inline-block; width: 1.25em; height: 1.25em; flex: none; transform: translateY(-.08em);
  background: url('../img/grzybek-128.png?v=1') center / contain no-repeat; }
.mush.is-live { background: none; } /* the live liquid canvas took over */
/* Phones (round 6): the address big and first, "Do góry" a full-width slab
   (on a phone it is the only way back to the first slide), the small print
   in one quiet line at the bottom. */
@media (max-width: 700px) {
  .foot__row { display: grid; grid-template-columns: 1fr auto; grid-template-areas: 'mail mail' 'top top' 'copy credit';
    gap: 18px 16px; padding-top: 28px; align-items: center; }
  .foot__mail { grid-area: mail; color: var(--paper); font-stretch: 85%; font-weight: 600; font-size: clamp(17px, 5vw, 21px); overflow-wrap: anywhere; }
  .foot__top { grid-area: top; display: flex; justify-content: space-between; align-items: center; min-height: 52px; padding: 0 16px;
    background: var(--paper); color: var(--ink); font-stretch: 62%; font-weight: 800; text-transform: uppercase; font-size: 20px; letter-spacing: .01em; }
  .foot__row a.foot__top:hover { color: var(--ink); }
  .foot__copy { grid-area: copy; font-size: 13px; }
  .foot__credit { grid-area: credit; font-size: 13px; }
  .send { width: 100%; } /* the same full-width slab as Do góry */
}

/* ---------- lightbox ---------- */
.lb { position: fixed; inset: 0; z-index: 70; background: var(--ink); display: grid; grid-template-rows: auto 1fr auto; padding: 16px var(--gut); }
.lb[hidden] { display: none; }
.lb__top, .lb__bot { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 48px; }
.lb__title { margin: 0; font-stretch: 62%; font-weight: 800; text-transform: uppercase; font-size: clamp(24px, 3vw, 44px); line-height: 1; }
.lb__close { min-height: 44px; padding: 0 4px; font-size: 15px; font-weight: 500; }
/* phones: just the cross, big enough to hit; the word stays for screen readers */
@media (max-width: 700px) {
  .lb__close { min-width: 44px; font-size: 26px; }
  .lb__closeTxt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.lb__stage { display: grid; place-items: center; min-height: 0; padding-block: 12px; }
.lb__media { width: min(100%, calc((100svh - 160px) * 16 / 9)); aspect-ratio: 16 / 9; background: var(--ink-2); }
.lb__media.is-vertical { width: auto; height: min(100%, calc(100svh - 160px)); aspect-ratio: 9 / 16; }
.lb__media iframe { width: 100%; height: 100%; border: 0; display: block; }
.lb__bot { color: var(--paper-dim); font-size: 14px; font-weight: 500; }