/* =====================================================================
   polklein.com in a living language (built 14 Oct 2026, live 15 Oct 2026)
   Drawn from livingbrand.agency: panels held in from the page's edges, a floating header, a wall of
   brand pieces, quotes as a pile, logos as cards, cards that move into place. Kept as polklein.com:
   black and white with one pink-coral accent, the serif turn, the Swiss grid underneath. Corners are
   narrow on purpose (Pol): three to six pixels, where Living Brand rounds its pills and cards.
   Loads after site.css and overrides it.
   ===================================================================== */
:root {
  --r-pic: 3px;     /* pictures */
  --r-btn: 4px;     /* buttons, the header bar, the cursor tag */
  --r-panel: 6px;   /* panels and cards */
  --inset: clamp(10px, 1.5vw, 22px);   /* how far a panel stands in from the page's edge */
  --in-m: calc(var(--m) - var(--inset));   /* a panel's own margin, so its words keep the page's left edge */
}

.btn { border-radius: var(--r-btn); }

/* ---------- the header: one floating bar ---------- */
.hdr.lx-hdr {
  inset: 12px 0 auto 0; height: auto; padding: 0 var(--inset); gap: 0;
  justify-content: center; pointer-events: none;
  background: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  transform: none !important;   /* the bar stays; it doesn't tuck away */
}
.lx-bar {
  pointer-events: auto; display: flex; align-items: center; gap: clamp(14px, 2.2vw, 30px);
  width: min(100%, 980px); padding: 7px 7px 7px 18px;
  background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--rule); border-radius: var(--r-btn);
  box-shadow: 0 10px 30px -22px rgba(14, 14, 18, .5);
  transition: background-color .35s, color .35s, border-color .35s;
}
.lx-bar .logo { font-size: 1.14rem; margin-right: auto; }
.lx-nav { position: relative; gap: clamp(16px, 2vw, 26px); }
.lx-nav a { padding: 7px 0; }
.lx-nav a:hover, .lx-nav a[aria-current="page"] { text-decoration-line: none; }
/* a hairline glides under the link the pointer is on, and rests under the page you're on */
.lx-glide { position: absolute; bottom: 2px; height: 1.5px; left: var(--gl, 0); right: var(--gr, 100%); background: currentColor; opacity: 0; transition: left .45s var(--out), right .45s var(--out), opacity .3s; }
.lx-nav.is-gliding .lx-glide { opacity: 1; }
.lx-bar .btn { height: 38px; padding: 0 16px; font-size: .875rem; }
.hdr.on-ink .lx-bar { background: rgba(26, 26, 33, .86); color: var(--on-ink); border-color: var(--rule-ink); }
.hdr.menu-open .lx-bar { background: transparent; border-color: transparent; box-shadow: none; }

/* ---------- panels: ink and stone sections, held in from the edges ---------- */
.lx-panel { margin-inline: var(--inset); border-radius: var(--r-panel); }
.lx-panel.wrap, .lx-panel .wrap { padding-inline: var(--in-m); }
.second.lx-panel { padding-bottom: 0; overflow: hidden; }
.second.lx-panel .frame { margin-inline: clamp(12px, 9vw, 168px); border-radius: var(--r-panel); }
.lx .section + .lx-panel, .lx-panel + .lx-panel { margin-top: var(--gap-v); }

/* ---------- 1 · the hook, larger ---------- */
.lx-hero { padding-top: clamp(130px, 19vh, 190px); padding-bottom: clamp(34px, 4.6vw, 60px); }
.lx-hero .hook { font-size: clamp(2.6rem, 6.4vw, 6.9rem); max-width: 12.6em; }

/* the tag that follows the pointer over the work */
.lx-follow { position: fixed; left: 0; top: 0; z-index: 70; pointer-events: none; translate: var(--x, -200px) var(--y, -200px); }
.lx-follow span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 11px; border-radius: var(--r-btn); background: var(--ink); color: var(--on-ink); font-weight: 600; font-size: .8125rem; white-space: nowrap; transform: translate(14px, 14px) scale(.7); transform-origin: 0 0; opacity: 0; transition: opacity .2s, transform .35s var(--out); }
.lx-follow.on-ink span { background: var(--on-ink); color: var(--ink); }
.lx-follow.is-on span { opacity: 1; transform: translate(14px, 14px) scale(1); }
.lx-follow svg { width: 11px; height: 11px; }
.has-follow [data-cursor], .has-follow [data-cursor] * { cursor: none; }   /* the tag stands in for the pointer, over the whole wall at once */

/* ---------- 2 · scale: the statement lights up as you read it ---------- */
.lx-scale { padding-block: clamp(56px, 7vw, 104px) clamp(40px, 5vw, 72px); }
.lx-light { margin-top: clamp(16px, 2vw, 24px); max-width: 23ch; font-weight: 760; font-size: clamp(1.9rem, 3.7vw, 3.75rem); line-height: 1.06; letter-spacing: -.035em; text-wrap: balance; }
.lx-light .lw { color: rgba(14, 14, 18, .16); transition: color .5s; }
.lx-light .lw.is-lit { color: var(--ink); }
.lx-figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--g); margin: clamp(48px, 6vw, 88px) 0 0; padding: 0; list-style: none; }
.lx-figs li { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; min-height: clamp(160px, 15vw, 220px); padding: clamp(18px, 2vw, 26px); border-radius: var(--r-panel); background: var(--smoke); }
.lx-figs b { font-weight: 820; font-size: clamp(2.2rem, 3.8vw, 4rem); line-height: .95; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.lx-figs li > span { display: grid; gap: 2px; }
.lx-figs .c { font-size: clamp(.95rem, 1.1vw, 1.05rem); }
.lx-figs .n { font-size: .8125rem; color: var(--muted); line-height: 1.35; }

/* cards in a group arrive one after another, row by row */
[data-gather].is-live > * { opacity: 0; transform: translateY(36px) scale(.97); transition: opacity .8s var(--out) var(--delay, 0s), transform 1s var(--out) var(--delay, 0s); }
[data-gather].is-in > * { opacity: 1; transform: none; }
/* the figures turn up like cards laid on a table, one after another */
.lx-figs { perspective: 1100px; }
/* ---------- one pattern for motion, across the site (Pol, 14 Oct 2026) ----------
   panels rise into place; cards in a group are dealt in, one after another, each from a slight angle;
   a card that stands alone arrives tilted and straightens; under the pointer, cards lift. The logos keep
   their scatter as the one flourish. */
[data-gather="flip"].is-live > * { transform: translateY(90px) rotate(var(--deal-r, 0deg)) scale(.92); transform-origin: 50% 100%;
  transition: opacity .7s var(--out) var(--delay, 0s), transform 1.3s cubic-bezier(.2, 1.15, .3, 1) var(--delay, 0s),
    translate .5s var(--out), box-shadow .5s var(--out), background-color .45s var(--out), color .45s var(--out); }   /* hover lifts keep their own easing */
[data-gather="flip"].is-in > * { transform: none; }
/* the logos fly in from all sides at their own angles and land in the grid, then come into focus */
[data-gather="scatter"].is-live > * { transform: translate(var(--sx, 0), var(--sy, 120px)) rotate(var(--sr, 0deg)) scale(.72);
  transition: opacity .5s var(--out) var(--delay, 0s), transform 1.3s cubic-bezier(.18, 1.25, .3, 1) var(--delay, 0s),
    translate .6s var(--out), box-shadow .6s var(--out), background-color .4s var(--out); }   /* the arrival keeps its stagger; the hover lift keeps its own easing, with no delay */
[data-gather="scatter"].is-in > * { transform: none; }
[data-gather="scatter"].is-live img { scale: 1.3; filter: blur(6px); transition: scale 1s var(--out) calc(var(--delay, 0s) + .45s), filter .9s var(--out) calc(var(--delay, 0s) + .45s); }
[data-gather="scatter"].is-in img { scale: 1; filter: blur(0); }

/* ---------- 3 · what clients say: a pile of cards that spreads ---------- */
.lx-words { padding-block: clamp(64px, 8vw, 120px) clamp(48px, 6vw, 88px); }
.lx-pile { position: relative; display: grid; align-items: start; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: clamp(24px, 3vw, 44px); margin: clamp(28px, 3.4vw, 48px) 0 0; padding: 0; list-style: none; }
.lx-q { position: relative; padding: clamp(16px, 1.8vw, 24px); background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-panel); box-shadow: 0 26px 50px -38px rgba(14, 14, 18, .5); transform: rotate(var(--rot, 0deg)); transition: transform 1.3s var(--out) var(--delay, 0s), box-shadow .4s; }
/* four across, each at its own height and tilt, like cards dropped on a table */
.lx-q:nth-child(1) { grid-column: 1 / span 3; --rot: -1.6deg; }
.lx-q:nth-child(2) { grid-column: 4 / span 3; margin-top: clamp(36px, 5vw, 80px); --rot: 1.2deg; }
.lx-q:nth-child(3) { grid-column: 7 / span 3; margin-top: clamp(12px, 1.6vw, 24px); --rot: -.7deg; }
.lx-q:nth-child(4) { grid-column: 10 / span 3; margin-top: clamp(56px, 7vw, 112px); --rot: 1.5deg; }
.lx-q:hover { box-shadow: 0 30px 56px -34px rgba(14, 14, 18, .55); }
.lx-pile.is-live:not(.is-in) .lx-q { transform: translate(var(--hx, 0px), var(--hy, 0px)) rotate(calc(var(--rot) * 3)) scale(.9); }
.lx-q-img { display: block; border-radius: var(--r-pic); overflow: hidden; }
.lx-q-img .crop { background: var(--smoke); }   /* each keeps its curated crop, from the live site */
.lx-q-img .crop img { transition: transform 1.1s var(--out); }
.lx-q-img:hover .crop img { transform: scale(1.04); }
.lx-q-cap { margin-top: 12px; font-size: .8125rem; line-height: 1.45; color: var(--muted); }
.lx-q-cap b { color: var(--ink); font-weight: 650; }
.lx-q blockquote { margin-top: 16px; }
.lx-q blockquote::before { content: "\201C"; display: block; height: .5em; font-family: var(--serif); font-size: 3.6rem; line-height: 1; color: #b9b7b0; }
.lx-q blockquote p { font-family: var(--serif); font-size: clamp(1.15rem, 1.35vw, 1.35rem); line-height: 1.24; text-wrap: pretty; }
.lx-q footer { margin-top: 12px; font-size: .8125rem; color: var(--muted); }
.lx-q footer b { color: var(--ink); font-weight: 650; }

/* ---------- 4 · logos as cards ---------- */
.lx-logos { padding-block: clamp(48px, 6vw, 88px) clamp(88px, 11vw, 160px); }
.lx-logos .label { text-align: center; }
/* the logo cards exactly as Living Brand sets them: six cards' width across a 1240px stage, 4:3, 4% inset,
   each file filling its card; six across, as there, for twelve names */
.lx-logo-grid { --lg: clamp(10px, 1.2vw, 18px); --lc: calc((min(1240px, 100vw - 2 * var(--m)) - 5 * var(--lg)) / 6);
  display: grid; grid-template-columns: repeat(6, var(--lc)); justify-content: center; gap: var(--lg); margin: clamp(40px, 5vw, 72px) 0 0; padding: 0; list-style: none; perspective: 1400px; }
.lx-logo-grid li { display: grid; place-items: center; aspect-ratio: 4 / 3; padding: 4%; border-radius: var(--r-panel); background: var(--smoke); transition: translate .6s var(--out), box-shadow .6s var(--out), background-color .4s var(--out); }
.lx-logo-grid li:hover { translate: 0 -6px; background: var(--paper); box-shadow: 0 2px 2px rgba(12, 15, 13, .04), 0 12px 24px -10px rgba(12, 15, 13, .14); }
.lx-logo-grid img { width: 100%; height: auto; }

/* ---------- 5 · services: the list lights under the pointer ---------- */
.services .s-list li { position: relative; transition: color .3s; }
.services .s-list[data-spotlight]:hover li { color: var(--on-ink-2); }
.services .s-list[data-spotlight] li:hover { color: var(--on-ink); }

/* ---------- 7 · approach: three cards that stack as you scroll ---------- */
.lx-approach { padding-block: clamp(32px, 4vw, 64px) clamp(88px, 12vw, 176px); }   /* "What changes" above already ends on a full section of space (Pol, 14 Oct 2026) */
.lx-deck { display: grid; gap: clamp(14px, 1.8vw, 22px); margin: clamp(48px, 6vw, 88px) 0 0; padding: 0; list-style: none; }
.lx-step {
  position: sticky; top: calc(92px + var(--i) * 16px);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: stretch;
  min-height: min(70vh, 540px); padding: clamp(22px, 2.8vw, 40px); border-radius: var(--r-panel); background: var(--smoke);
  transform-origin: 50% 0; transform: scale(calc(1 - var(--cover, 0) * .04));
  filter: brightness(calc(1 - var(--cover, 0) * .1));
}
.lx-step:nth-child(2) { background: var(--ink); color: var(--on-ink); --hair: var(--rule-ink); --quiet: var(--on-ink-2); }
.lx-step:nth-child(3) { background: var(--paper); border: 1px solid var(--rule); }
.lx-step-text { grid-column: 1 / span 6; display: flex; flex-direction: column; gap: 14px; }
.lx-step .n { font-weight: 400; font-size: clamp(3.4rem, 7vw, 7rem); line-height: .8; letter-spacing: -.05em; }
.lx-step h3 { margin-top: auto; font-weight: 780; font-size: clamp(1.6rem, 2.7vw, 2.7rem); line-height: 1.02; letter-spacing: -.032em; text-wrap: balance; }
.lx-step p { max-width: 40ch; color: var(--quiet); }
.lx-step .deliver { max-width: 40ch; }
.lx-step .deliver li { border-color: var(--hair); }
.lx-step-img { grid-column: 8 / -1; margin: 0; display: grid; align-items: center; justify-items: end; }
.lx-step-img .crop { width: 100%; max-height: min(58vh, 460px); border-radius: var(--r-pic); }
.lx-step:nth-child(1) .lx-step-img .crop, .lx-step:nth-child(3) .lx-step-img .crop { width: auto; height: min(58vh, 460px); }

/* ---------- 8 · the portrait, framed like a card ---------- */
.lx-portrait { border-radius: var(--r-panel); }

/* ---------- 9 · the closing panel rises into place ---------- */
.lx-outro { transform-origin: 50% 100%; transform: scale(calc(.94 + var(--rise, 1) * .06)); }
footer.foot { margin-top: var(--gap-v); margin-inline: var(--inset); margin-bottom: 0; border-radius: var(--r-panel) var(--r-panel) 0 0; border-top: 0; padding-inline: var(--in-m); }

/* buttons lean toward the pointer */
[data-magnetic] { translate: var(--mag-x, 0px) var(--mag-y, 0px); transition: translate .35s var(--out), background-color .2s, color .2s; }

/* ---------- headings rise a line at a time ---------- */
[data-lines] .ln { display: block; overflow: hidden; padding: 0 .12em .3em; margin: 0 -.12em -.3em; }
[data-lines].lx-split .ln > span { display: block; transform: translateY(135%); transition: transform 1.1s var(--out); transition-delay: calc(var(--d, 0ms) + var(--i) * 90ms); }
[data-lines].lx-split.is-in .ln > span { transform: none; }

/* things that rise as they arrive */
.lx-rise { opacity: 0; translate: 0 30px; transition: opacity .9s var(--out), translate 1.1s var(--out); transition-delay: var(--d, 0ms); }
.lx-rise.is-in { opacity: 1; translate: 0 0; }

/* ---------- smaller screens ---------- */
@media (max-width: 820px) {
  .lx-bar { padding-left: 14px; }
  .lx-figs { grid-template-columns: 1fr 1fr; }
  .lx-logo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lx-q { grid-column: span 6 !important; margin-top: 0 !important; }
  .lx-step { grid-template-columns: 1fr; position: relative; top: 0; min-height: 0; row-gap: 22px; }
  .lx-step-text, .lx-step-img { grid-column: 1 / -1; }
  .lx-step-img { justify-items: start; }
  .lx-step-img .crop { width: 100% !important; height: auto !important; max-height: none; }
}
@media (max-width: 560px) { .lx-q { grid-column: 1 / -1 !important; } }
@media (prefers-reduced-motion: reduce) {
  [data-gather].is-live > *, .lx-pile.is-live .lx-q, .lx-rise, [data-lines].lx-split .ln > span { opacity: 1 !important; translate: none !important; transform: none !important; }
  .lx-q { transform: rotate(var(--rot, 0deg)) !important; }
  .lx-step, .lx-outro { transform: none; filter: none; }
  .lx-light .lw { color: var(--ink); }
}

/* ---------- the second: a stone card on the black panel, arriving tilted like the client quotes and
   straightening in exactly the second the line runs (Pol, 14 Oct 2026). The heading is set a size down
   from the closing band's, so the card reads as a statement rather than a shout. ---------- */
.second.lx-panel .frame { background: var(--smoke); transform-origin: 50% 30%; }
.second .monument { font-weight: 800; font-size: clamp(2.2rem, 5.6vw, 6.3rem); letter-spacing: -.048em; max-width: 9em; }   /* keeps the turn on its own line */
html.lx-motion .second .frame { transition: transform 1s cubic-bezier(.3, .7, .2, 1), opacity .45s var(--out); }
html.lx-motion .second:not(.is-on) .frame { transform: translateY(70px) rotate(-5deg) scale(.94); opacity: .6; }

/* ---------- the serif, set a step smaller than the grotesk's lowercase (Pol, 14 Oct 2026) ---------- */
:is(h1, h2, .wk-break p) em { font-size: .92em; }
.say blockquote p { font-size: clamp(1.14rem, 1.45vw, 1.5rem); }
.quote p { font-size: clamp(1.18rem, 1.5vw, 1.45rem); }
.voices li { font-size: clamp(1.55rem, 2.8vw, 2.85rem); }
.lx-q blockquote p { font-size: clamp(1.05rem, 1.23vw, 1.23rem); }
.lx-hero .hook { text-wrap: wrap; }   /* keeps "for" on the first line */

/* ---------- the work: a wall of each brand's pieces on a tilted plane, and the brands listed below
   (after Living Brand's projects page, on this site's black panel; Pol, 14 Oct 2026) ---------- */
.lx-wall-panel { padding: 0; overflow: hidden; background: var(--ink); }
.lx-wall { position: relative; height: clamp(340px, 42.5vw, 620px); max-height: 62vh; overflow: hidden; perspective: 1600px; }
.lx-wall-plane { position: absolute; inset: -14% -28%; display: grid; align-content: center; gap: 1.6vw; transform: rotateX(24deg) rotateZ(-8deg); transform-style: preserve-3d; transition: transform 2s cubic-bezier(.16, 1, .3, 1); }
html.lx-motion .lx-wall-panel:not(.is-in) .lx-wall-plane { transform: rotateX(62deg) rotateZ(-16deg) translateY(18%); }
.lx-wall-row { display: flex; width: max-content; margin: 0; padding: 0; list-style: none; animation: lxwall 90s linear infinite; }
.lx-wall-row[style*="--k:1"] { animation-duration: 112s; animation-direction: reverse; }
.lx-wall-row[style*="--k:2"] { animation-duration: 80s; }
@keyframes lxwall { to { transform: translateX(-50%); } }
.lx-wall-row li { flex: none; padding-right: 1.6vw; transition: opacity .6s var(--out), filter .6s var(--out); }
.lx-wall-img { display: block; height: clamp(152px, 16.9vw, 280px); border-radius: var(--r-pic); overflow: hidden; }
.lx-wall-img .crop { height: 100%; width: auto; }
/* a brand under the pointer, in the wall or the list, lights all its pieces; the rest go grey and dim */
.lx-wall.has-on .lx-wall-row li { opacity: .18; filter: grayscale(1); }
.lx-wall.has-on .lx-wall-row li.is-hit { opacity: 1; filter: none; }

.lx-brands { padding-block: clamp(40px, 5vw, 72px) clamp(64px, 8vw, 120px); }
.lx-brands-head { display: flex; justify-content: space-between; align-items: baseline; }
.lx-brand-list { list-style: none; margin: clamp(18px, 2.2vw, 30px) 0 0; padding: 0; border-bottom: 1px solid var(--rule);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4.4fr) max-content; column-gap: var(--g); }
/* every row shares the list's columns, so the middle column lines up and the sector takes its own width */
.lx-brand-list li, .lx-brand-list a { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
.lx-brand-list li { transition: opacity .4s var(--out); }
.lx-brand-list.has-on li:not(.is-on) { opacity: .38; }
.lx-brand-list a { align-items: baseline; padding: clamp(16px, 1.8vw, 26px) 0; border-top: 1px solid var(--rule); color: inherit; text-decoration: none; }
.lx-brand-list b { font-weight: 760; font-size: clamp(1.25rem, 1.9vw, 1.9rem); line-height: 1.1; letter-spacing: -.03em; transition: translate .5s var(--out); }
.lx-brand-list li.is-on b { translate: 10px 0; }
.lx-brand-list .t { font-size: 1rem; }
.lx-brand-list .s { color: var(--muted); font-size: .9375rem; text-align: right; }
@media (max-width: 820px) {
  .lx-wall { height: 300px; }
  .lx-wall-img { height: 96px; }
  .lx-brand-list { grid-template-columns: 1fr; }
  .lx-brand-list a { gap: 4px; }
  .lx-brand-list .s { text-align: left; }
}
@media (prefers-reduced-motion: reduce) { .lx-wall-row { animation: none; } }

/* ---------- the same language on every page (Pol, 14 Oct 2026) ----------
   bands become panels held in from the edges; panels that meet keep a sliver of page between them; the
   black strips on Work and the slab on Approach take the panel's corners; About's full wall of names
   sits seven across in Living Brand's cards. */
.lx-panel + .lx-panel { margin-top: var(--gap-v); }
.wk-break::before, .slab { border-radius: var(--r-panel); }
.lx-logo-grid-all { --lc: calc((min(1240px, 100vw - 2 * var(--m)) - 6 * var(--lg)) / 7); grid-template-columns: repeat(7, var(--lc)); }
@media (max-width: 820px) { .lx-logo-grid-all { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* the second's line, a little heavier so its one-second run reads (Pol, 14 Oct 2026) */
.second .tick { height: 4px; border-radius: 2px; overflow: hidden; }

/* ---------- color from the work, on the case studies: a rule under the title in the brand's color, its quote
   panel lightly tinted, and the next project glowing in its own (Pol, 14 Oct 2026). The home wall stays
   black and white, and the pointer tag is black (Pol: the colored glow there was too much). */
.lx-follow.on-ink span { background: var(--ink); color: var(--on-ink); box-shadow: 0 0 0 1px rgba(255, 255, 255, .6), 0 10px 24px -8px rgba(0, 0, 0, .6); }
.c-title h1::after { content: ""; display: block; width: 72px; height: 5px; margin-top: clamp(14px, 1.6vw, 22px); border-radius: 3px; background: var(--accent); }   /* the site's accent, not the brand's (Pol, 15 Oct 2026) */
.c-quote { background: var(--smoke); }   /* stone, not the brand's tint (Pol, 15 Oct 2026) */
/* the end of a case study: two cards, previous on the left in white with a stone stroke, next on the right in
   black; they travel into place like the column cards, and lift under the pointer (Pol, 15 Oct 2026) */
.pn { padding-block: clamp(40px, 5vw, 72px) clamp(56px, 7vw, 104px); }
.no-quote .pn { margin-top: clamp(64px, 8vw, 120px); }
.pn-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--g); margin: 0; padding: 0; list-style: none; }
.pn-card { display: grid; gap: clamp(14px, 1.6vw, 22px); align-content: start; height: 100%; padding: clamp(20px, 2.2vw, 32px); border-radius: var(--r-panel); background: var(--paper); color: var(--ink); text-decoration: none; box-shadow: inset 0 0 0 1.5px #e2e2dd; transition: translate .5s var(--out), box-shadow .5s var(--out); }
.pn-card .label { margin: 0; color: var(--muted); }
.pn-img { display: flex; height: clamp(170px, 17vw, 270px); }
.pn-img .crop { height: 100%; width: auto; max-width: 100%; border-radius: var(--r-pic); box-shadow: 0 2px 3px rgba(12, 15, 13, .05), 0 18px 34px -20px rgba(12, 15, 13, .35); }
.pn-info { display: grid; gap: 6px; }
.pn-info b { font-weight: 800; font-size: clamp(1.5rem, 2.5vw, 2.5rem); line-height: 1; letter-spacing: -.03em; text-wrap: balance; }
.pn-info .c { font-size: .9375rem; color: var(--muted); }
.pn-card:hover { translate: 0 -6px; box-shadow: inset 0 0 0 1.5px #d4d4ce, 0 26px 50px -30px rgba(12, 15, 13, .3); }
.pn-card:hover .pn-info b { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.pn-next { background: var(--ink); color: var(--on-ink); box-shadow: none; }
.pn-next .label, .pn-next .pn-info .c { color: var(--on-ink-2); }
.pn-next:hover { box-shadow: 0 30px 56px -30px rgba(12, 15, 13, .7); }
.pn-next .pn-img .crop { box-shadow: 0 0 0 1px rgba(255, 255, 255, .06); }
@media (max-width: 820px) {
  .pn-grid { grid-template-columns: 1fr; }
  .pn-grid li:last-child { order: -1; }   /* next first on phones */
}

/* ---------- the second, a little shorter (Pol, 14 Oct 2026) ---------- */
.second .frame { padding: clamp(32px, 4.4vw, 72px) clamp(24px, 5vw, 96px); }
.second .tick { margin-top: clamp(20px, 2.6vw, 36px); }
.second .frame .big-light { margin-top: clamp(20px, 2.6vw, 36px); }

/* ---------- Work: each project's words on the left, a fan of its pieces on the right ---------- */
.wk-list:has(.wk2) { row-gap: clamp(72px, 9vw, 140px); }
.wk2 { align-items: center; }
.wk2 .wk-t { grid-column: 1 / span 4; }
.wk-fan { grid-column: 6 / span 7; position: relative; display: block; height: clamp(250px, 28vw, 440px); }
.wk-card { --off: calc(var(--k) - (var(--n) - 1) / 2); position: absolute; top: 50%; left: 50%; width: 58%; z-index: calc(var(--n) - var(--k)); translate: -50% -50%;
  transform: translateX(calc(var(--off) * var(--spread, 26%))) rotate(calc(var(--off) * var(--tilt, 4.5deg)));
  border-radius: var(--r-pic); overflow: hidden; box-shadow: 0 2px 3px rgba(12, 15, 13, .05), 0 22px 40px -22px rgba(12, 15, 13, .45);
  transition: transform 1.2s cubic-bezier(.2, 1.15, .3, 1) calc(var(--k) * 70ms), translate .5s var(--out), box-shadow .5s var(--out); }
.wk-card .crop { width: 100%; background: var(--smoke); }
html.lx-motion .wk2:not(.is-in) .wk-card { transform: translateY(40px) rotate(calc(var(--off) * 1deg)); }
/* the fan's own box takes the pointer, not the moving cards, so spreading can't pull a card out from under
   it and set the hover flickering (Pol, 14 Oct 2026) */
.wk-card { pointer-events: none; }
.wk-fan:hover { --spread: 34%; --tilt: 6.5deg; }
.wk-fan:hover .wk-card:first-child { translate: -50% calc(-50% - 12px); box-shadow: 0 2px 3px rgba(12, 15, 13, .05), 0 34px 60px -26px rgba(12, 15, 13, .55); }
.wk2 .wk-t { border-bottom-width: 2px; border-bottom-color: var(--ink); }
@media (max-width: 820px) {
  .wk2 .wk-t, .wk-fan { grid-column: 1 / -1; }
  .wk-fan { height: 62vw; margin-top: 8px; }
  .wk-card { width: 64%; }
}

.ways .way { margin-inline: calc(-1 * clamp(12px, 1.3vw, 20px)); padding: 22px clamp(12px, 1.3vw, 20px) 26px; border-radius: var(--r-panel); transition: background-color .5s var(--out), box-shadow .5s var(--out), translate .5s var(--out); }
.ways .way:hover { background: var(--paper); border-top-color: transparent; translate: 0 -4px; box-shadow: 0 2px 2px rgba(12, 15, 13, .04), 0 14px 28px -12px rgba(12, 15, 13, .16); }
.ways { perspective: 1100px; }
/* the slab arrives tilted, like the client quotes, and settles */
html.lx-motion .lx-tilt { transition: transform 1.1s cubic-bezier(.3, .7, .2, 1), opacity .6s var(--out); }
html.lx-motion .lx-tilt:not(.is-in) { transform: translateY(56px) rotate(-3.5deg) scale(.95); opacity: .3; }

/* ---------- About: the places I've led, as cards ---------- */
.led { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--g); margin-top: clamp(24px, 3vw, 40px); perspective: 1100px; }
.led li, .led li:last-child { display: grid; grid-template-columns: 1fr; gap: 6px; align-content: start; padding: clamp(16px, 1.8vw, 24px); border: 0; border-radius: var(--r-panel); background: var(--smoke); transition: background-color .4s var(--out), translate .5s var(--out), box-shadow .5s var(--out); }
.led li:hover { background: var(--paper); translate: 0 -4px; box-shadow: 0 2px 2px rgba(12, 15, 13, .04), 0 14px 28px -12px rgba(12, 15, 13, .16); }
.led li:first-child { grid-column: 1 / -1; background: var(--ink); color: var(--on-ink); }
.led li:first-child span { color: var(--on-ink-2); }
@media (max-width: 560px) { .led { grid-template-columns: 1fr; } }

/* ---------- Insights: the articles as cards, the notes on stone ---------- */
.posts { perspective: 1100px; }
.post { padding: clamp(20px, 2.2vw, 30px); border-top: 0; border-radius: var(--r-panel); background: var(--ink); color: var(--on-ink); min-height: clamp(220px, 20vw, 300px); grid-template-rows: auto 1fr auto; transition: translate .5s var(--out), box-shadow .5s var(--out); }
.post p, .post .meta { color: var(--on-ink-2); }
.post:hover { translate: 0 -6px; box-shadow: 0 30px 50px -28px rgba(12, 15, 13, .6); }
.notes { gap: clamp(20px, 2.4vw, 32px); padding-block: clamp(32px, 4vw, 56px) clamp(64px, 8vw, 112px); }
.note { padding: clamp(28px, 4vw, 64px) clamp(20px, 3vw, 48px); border-top: 0; border-radius: var(--r-panel); background: var(--smoke); }
@media (prefers-reduced-motion: reduce) { .lx-tilt, .wk-card { transform: none !important; } }

/* ---------- the second and the voices, much tighter (Pol, 14 Oct 2026) ---------- */
.second.lx-panel { padding-top: clamp(14px, 1.6vw, 24px); }
.second .frame { padding: clamp(24px, 3vw, 48px) clamp(22px, 4vw, 72px); }
.second .monument { font-size: clamp(2rem, 4.8vw, 5.4rem); }
.second .tick { margin-top: clamp(14px, 1.8vw, 26px); }
.second .tick-read { margin-top: 8px; }
.second .frame .big-light { margin-top: clamp(14px, 1.8vw, 26px); font-size: clamp(1.15rem, 1.6vw, 1.6rem); max-width: 40ch; }
.voices { padding-block: clamp(36px, 4.4vw, 68px) clamp(40px, 5vw, 76px); }
.voices .v-head { top: 96px; }
.voices li { padding-block: clamp(10px, 1.1vw, 16px); font-size: clamp(1.35rem, 2.3vw, 2.35rem); }

/* ---------- columns as cards, on Approach and About: they flip up in turn, and turn black under the pointer ---------- */
.lx-cards > li, .lx-cards > li:last-child { margin-inline: 0; padding: clamp(20px, 2.2vw, 32px); border-top: 0; border-radius: var(--r-panel); background: var(--smoke);
  transition: opacity .6s var(--out) var(--delay, 0s), transform 1.2s cubic-bezier(.2, 1.2, .3, 1) var(--delay, 0s), translate .5s var(--out), box-shadow .5s var(--out), background-color .45s var(--out), color .45s var(--out); }
.lx-cards { perspective: 1100px; }
.lx-cards > li:hover { translate: 0 -6px; box-shadow: 0 2px 2px rgba(12, 15, 13, .04), 0 22px 40px -18px rgba(12, 15, 13, .22); }   /* a lift only; the color change added little (Pol, 14 Oct 2026) */
.lx-cards > li p, .lx-cards .deliver li { transition: color .45s var(--out), border-color .45s var(--out); }
.ways .way { background: var(--paper); }
.ways .way:hover { box-shadow: 0 2px 2px rgba(12, 15, 13, .04), 0 18px 34px -14px rgba(12, 15, 13, .2); }

/* ---------- Insights: the article cards lean toward the pointer; the notes arrive tilted, one from each side ---------- */
[data-tilt] { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--out), translate .5s var(--out), box-shadow .5s var(--out); }
html.lx-motion .lx-tilt-r:not(.is-in) { transform: translateY(56px) rotate(3.5deg) scale(.95); }
.ways .way { margin-inline: 0; border-top: 0; padding: clamp(20px, 2.2vw, 30px); }   /* separate white cards on the stone panel */


/* ---------- the grotesk headings, tracked in about a third less (Pol, 14 Oct 2026); page titles other than
   the home hook looser still, since at their size the tight track made letters touch ---------- */
.page-hero h1, .ab-hero h1 { letter-spacing: -.022em; }
.monument, .second .monument { letter-spacing: -.034em; }
.hook { letter-spacing: -.028em; }
.display, .sp-info b, .framework li::before { letter-spacing: -.026em; }
.c-title h1, .article-head h1 { letter-spacing: -.02em; }
.nx-info b, .wk-name { letter-spacing: -.03em; }
.lx-figs b, .figs b, .move .n, .lx-step .n { letter-spacing: -.03em; }
.lx-light, .note h2, .lx-step h3 { letter-spacing: -.024em; }
.lx-brand-list b, .bigger .slab h2 { letter-spacing: -.02em; }
html, body { overflow-x: clip; }   /* cards dealt in from an angle may reach past the edge before they land; never let the page scroll sideways */

/* each fan sits on a stone ground of its own shape and place; some run off the right edge of the page */
.wk-fan::before { content: ""; position: absolute; z-index: 0; inset: var(--gt, 7%) var(--gr, 2%) var(--gb, 7%) var(--gl, 2%); border-radius: var(--r-panel); background: var(--smoke); transition: background-color .6s var(--out); }
.wk-fan:hover::before { background: #e9e9e5; }
.wk2:nth-child(7n+1) .wk-fan { --gt: 4%; --gr: calc(var(--cap) - var(--m)); --gb: 12%; --gl: 10%; }
.wk2:nth-child(7n+2) .wk-fan { --gt: 14%; --gr: 8%; --gb: 0%; --gl: -2%; }
.wk2:nth-child(7n+4) .wk-fan { --gt: 0%; --gr: calc(var(--cap) - var(--m)); --gb: 16%; --gl: 24%; }
.wk2:nth-child(7n+5) .wk-fan { --gt: 10%; --gr: 16%; --gb: 4%; --gl: 4%; }
.wk2:nth-child(7n+6) .wk-fan { --gt: 18%; --gr: calc(var(--cap) - var(--m)); --gb: -4%; --gl: 6%; }
.wk2:nth-child(7n+7) .wk-fan { --gt: 2%; --gr: 4%; --gb: 14%; --gl: 18%; }
.wk2:nth-child(7n+3) .wk-fan { --gt: 8%; --gr: calc(var(--cap) - var(--m)); --gb: 8%; --gl: 30%; }


/* ---------- columns come up with the scroll (Approach, About) ---------- */
html.lx-motion .lx-scrollin > li { transform-origin: 50% 100%;
  transition: transform 1.2s cubic-bezier(.2, 1, .3, 1) var(--delay, 0s), opacity .5s var(--out) var(--delay, 0s),
    translate .5s var(--out), box-shadow .5s var(--out), background-color .45s var(--out), color .45s var(--out); }
html.lx-motion .lx-scrollin:not(.is-in) > li { transform: translate(var(--dx, 0px), 170px) rotate(var(--deal-r, 0deg)) scale(.9); opacity: 0; }

/* ---------- the accent, used in a few places (Pol, 14 Oct 2026) ----------
   Infrared, a pink pushed toward signal red (it began as Klein blue). The second's line runs in it; selection and keyboard
   focus are in it; the dark buttons, the pointer tag and the cards that darken under the pointer take it; the
   hairline under the nav glides in it. The serif turns stay black, so the blue stays rare. */
:root { --accent: #c92849; --accent-deep: #ad1f3c; }   /* a pink-coral, chosen 14 Oct 2026 after Klein blue, cherry, violet, chartreuse, peach, citron and a run of pinks */
.second .tick i { background: var(--accent); }
::selection { background: var(--accent); color: var(--accent-ink, #ffffff); }
:focus-visible { outline-color: var(--accent); }
.btn-dark, .hdr.on-ink .btn-dark { background: var(--accent); color: var(--accent-ink, #ffffff); }
.btn-dark:hover, .hdr.on-ink .btn-dark:hover { background: var(--accent-deep); }
.lx-follow span, .lx-follow.on-ink span { background: var(--accent); color: var(--accent-ink, #ffffff); box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .5); }
.lx-glide { background: var(--accent); height: 2px; }

/* panels arrive tilted and a little low, then settle smoothly into place */
html.lx-motion :is(.lx-panel:not(.lx-outro):not(.lx-wall-panel), .lx-arrive) { transform-origin: 50% 0; transition: transform 1.15s cubic-bezier(.2, 1, .3, 1), opacity .5s var(--out); }
html.lx-motion :is(.lx-panel:not(.lx-outro):not(.lx-wall-panel), .lx-arrive):not(.is-in) { transform: translateY(70px) rotate(var(--tilt, -1.2deg)) scale(.975); opacity: .15; }   /* calmer, and the words never wait long (15 Oct 2026) */

/* ---------- three more touches of the accent (Pol, 14 Oct 2026) ----------
   the button on every closing panel, and the underline of a text link as the pointer reaches it (the serif
   turns in infrared were tried and dropped) */
.close-band .btn-light { background: var(--accent); color: var(--accent-ink, #ffffff); }
.close-band .btn-light:hover { background: var(--accent-deep); }
.link { transition: text-decoration-color .25s var(--out), text-decoration-thickness .25s var(--out); }
.link:hover { text-decoration-color: var(--accent); }

/* Insights: stone, stone, then white with a stone outline (Pol, 14 Oct 2026) */
.posts .post { background: var(--smoke); color: var(--ink); }
.posts .post p, .posts .post .meta { color: var(--muted); }
.posts li:nth-child(3) .post { background: var(--paper); box-shadow: inset 0 0 0 1.5px #e2e2dd; }
.posts .post:hover { box-shadow: 0 2px 2px rgba(12, 15, 13, .04), 0 22px 40px -18px rgba(12, 15, 13, .22); }
.posts li:nth-child(3) .post:hover { box-shadow: inset 0 0 0 1.5px #e2e2dd, 0 22px 40px -18px rgba(12, 15, 13, .22); }
.bigger .slab h2 { max-width: none; }
.slab h2 em { white-space: nowrap; }   /* "Sometimes the fix is / bigger than a campaign." on two lines */
/* ---------- Questions: the rows come up one after another, and each answer opens and closes smoothly ---------- */
html.lx-motion .lx-rows > * { transition: transform 1.1s cubic-bezier(.2, 1, .3, 1) var(--delay, 0s), opacity .7s var(--out) var(--delay, 0s); }
html.lx-motion .lx-rows:not(.is-in) > * { transform: translateY(70px); opacity: 0; }
:root { interpolate-size: allow-keywords; }
.faq details::details-content { block-size: 0; overflow: hidden; transition: block-size .5s var(--out), content-visibility .5s allow-discrete; }
.faq details[open]::details-content { block-size: auto; }
.faq summary::after { transition: transform .4s var(--out); }
.faq summary { transition: color .25s var(--out); }
.faq summary:hover { color: var(--accent); }
/* the first card, the main article, black: black, stone, outlined white reads as a deliberate step down (Pol, 14 Oct 2026) */
.posts li:nth-child(1) .post { background: var(--ink); color: var(--on-ink); }
.posts li:nth-child(1) .post p, .posts li:nth-child(1) .post .meta { color: var(--on-ink-2); }
.posts li:nth-child(1) .post:hover { box-shadow: 0 30px 50px -28px rgba(12, 15, 13, .6); }
/* the two notes below match their cards: the first on stone, the second white with a stone stroke (Pol, 14 Oct 2026) */
#rules.note { background: var(--paper); box-shadow: inset 0 0 0 1.5px #e2e2dd; }

/* phones: the Brands label and "All work" share one line without crowding */
@media (max-width: 560px) { .lx-brands-head { gap: 16px; } .lx-brands-head .label { max-width: 22ch; } .lx-brands-head .link { white-space: nowrap; } }
/* the portrait on About, cornered like the panels and the home's portrait (Pol, 15 Oct 2026) */
.portrait { border-radius: var(--r-panel); overflow: hidden; }
/* previous and next, narrower, at either margin; previous on stone; an arrow along the top of each (Pol, 15 Oct 2026) */
.pn-grid { grid-template-columns: repeat(2, minmax(0, clamp(300px, 30vw, 460px))); gap: clamp(12px, 1.2vw, 18px); }
.pn-grid { justify-content: space-between; }   /* previous at the left margin, next at the right */
.pn-prev { background: var(--smoke); box-shadow: none; }
.pn-prev:hover { box-shadow: 0 2px 2px rgba(12, 15, 13, .04), 0 22px 40px -18px rgba(12, 15, 13, .22); }
.pn-img { height: clamp(150px, 13vw, 210px); }
.pn-info b { font-size: clamp(1.35rem, 2vw, 2rem); }
@media (max-width: 820px) { .pn-grid { grid-template-columns: 1fr; } }
.pn-top { display: flex; align-items: center; gap: 12px; }
.pn-next .pn-top { justify-content: flex-end; }   /* "Next project" sits beside its arrow, the same gap as "Previous project" */
.pn-arrow { width: 30px; height: 15px; flex: none; transition: translate .5s var(--out); }
.pn-prev:hover .pn-arrow { translate: -6px 0; }
.pn-next:hover .pn-arrow { translate: 6px 0; }
.pn-next .pn-top { color: var(--on-ink); }
.pn-prev .pn-top { color: var(--ink); }

/* on a phone, a tapped brand carries a small tag: on the wall where the finger landed (a second tap there opens
   it), and in its row of the list (Pol, 15 Oct 2026) */
.lx-go { display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 8px 11px; border-radius: var(--r-btn); background: var(--ink); color: var(--on-ink); font-weight: 600; font-size: .8125rem; line-height: 1; white-space: nowrap; opacity: 0; transform: scale(.7); transform-origin: 0 0; transition: opacity .2s, transform .35s var(--out); pointer-events: none; }
.lx-go.is-on { opacity: 1; transform: scale(1); }
.lx-go svg { width: 11px; height: 11px; flex: none; }
.lx-go-wall { position: absolute; z-index: 2; left: 0; top: 0; background: var(--on-ink); color: var(--ink); }
.lx-go-wall.is-on { pointer-events: auto; }
.lx-brand-list .lx-go { grid-column: 1 / -1; margin-top: 10px; }
.lx-brand-list a { -webkit-tap-highlight-color: transparent; }
.lx-wall { -webkit-tap-highlight-color: transparent; }

/* very wide screens: everything stops at 1760px and sits centered, with white margins beyond (Pol, 16 Oct 2026) */
:root { --gap-v: clamp(10px, 1.5vw, 22px); --cap: max(0px, (100vw - 1760px) / 2); --m: calc(clamp(20px, 4.4vw, 76px) + var(--cap)); --inset: calc(clamp(10px, 1.5vw, 22px) + var(--cap)); }

/* larger type: the home hook and the brand names (Pol, 30 Oct 2026) */
.lx-hero .hook { font-size: clamp(2.6rem, 8vw, 7rem); line-height: .98; letter-spacing: -.028em; }
.lx-brand-list b { font-size: clamp(1.5rem, 3vw, 3rem); letter-spacing: -.015em; }

/* the red (Pol, 30 Oct 2026): every closing panel, with a black button, and on polklein.com's home the one-second panel, its heading and bar black */
.close-band, .close-band.ink { background: var(--accent); }
.close-band .btn-light { background: #000; color: #fff; }
.close-band .btn-light:hover { background: #222; }
.second.ink { background: var(--accent); }
.second.ink *:not(i) { background-color: transparent !important; color: #fff !important; box-shadow: none !important; }
.second.ink .monument, .second.ink .monument *, .second.ink .tick-read, .second.ink .tick-read * { color: #000 !important; }
.second .tick i { background: #000; }
/* the scale statement runs the full width */
.lx-scale .lx-light { max-width: 100%; }
/* the quotes stay fully white on the red, on every screen */
.second.ink #voices li { opacity: 1 !important; color: #fff !important; }

/* hero hook: the pre-30 Oct size on large screens, bigger on small ones (Pol, 9 Nov 2026) */
.lx-hero .hook { font-size: clamp(2.6rem, min(8vw, max(6.4vw, 5.75rem)), 6.9rem); }
/* the red one-second panel lost its card, so its frame padding no longer insets the heading */
.second.ink .frame { padding-inline: 0; margin-inline: calc(var(--m) - var(--inset)); }