/* Work (PLAN-SITE A3; PLAN-SITE-D D1.1-D1.6): the page's own blocks over home-v3e/css/base.css (the text system) and
   kit/v3e/site.css (the chrome, the Closing, flow and filters). Motion: transform, opacity and clip-path only, on the
   kit's --ease-out / --ease-in-out; never ease-in, scale(0) or transition: all; the panels' blur is never animated.
   Reduced motion and no WebGL: one composed still per section, every word in its section's flow. */

/* ============================================================ the hero: the chapters as three quiet chips, a row of
   links under the hero's words (they leave with them) */
.w-chips { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 0; padding: 0; list-style: none; }
html:not(.v3-reduced):not(.v3-nogl) .w-chips { position: fixed; left: var(--g-m); top: var(--w-chips-top, 62vh); z-index: 3; opacity: 0; transform: translate3d(0, 10px, 0); visibility: hidden; transition: opacity calc(260ms * var(--rv-slow, 1)) var(--v3-ease), transform calc(260ms * var(--rv-slow, 1)) var(--v3-ease), visibility 0s linear calc(260ms * var(--rv-slow, 1)); }
html:not(.v3-reduced):not(.v3-nogl) .e-sec--hero:has(> .xp.is-on) .w-chips { opacity: 1; transform: none; visibility: visible; transition-duration: calc(480ms * var(--rv-slow, 1)), calc(480ms * var(--rv-slow, 1)), 0s; transition-delay: calc(260ms * var(--rv-slow, 1)), calc(260ms * var(--rv-slow, 1)), 0s; }
.w-chip-link { position: relative; isolation: isolate; display: inline-grid; gap: 3px; min-height: 44px; padding: 8px 14px 9px; border: 1px solid var(--line-strong, rgba(236, 233, 241, 0.3)); border-radius: 12px; color: var(--signal, #ece9f1); text-decoration: none; background: rgba(14, 10, 22, 0.5); transition: border-color 180ms var(--ease-out), background-color 180ms var(--ease-out), transform 120ms var(--ease-out); }
.w-chip-link__k { font: 500 10px/1.2 var(--v3-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--filament, #c9b6ea); }
.w-chip-link__n { font: 400 14px/1.2 var(--v3-body); color: rgba(236, 233, 241, 0.92); }
.w-chip-link:active { transform: scale(0.97); }
.w-chip-link:focus-visible { outline: 2px solid var(--filament, #c9b6ea); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .w-chip-link:hover { border-color: var(--signal, #ece9f1); background: rgba(236, 233, 241, 0.08); } }

/* the "Illustrative" mark: a quiet outlined pill beside the words it qualifies */
.w-chip { display: inline-block; padding: 3px 8px 2px; border: 1px solid rgba(242, 194, 122, 0.7); border-radius: 999px; color: var(--gold, #f2c27a); font: 500 10.5px/1.2 var(--v3-mono); letter-spacing: 0.14em; text-transform: uppercase; }
.xp__eb .w-chip { margin-left: 8px; }

/* ============================================================ the portfolio (D1.6): the wall across the full grid */
/* the head: the portfolio's title zone, with the relight bar under it until the head leaves; then the bar docks under
   the header (portfolio.js sets --w-bar-y, the bar's top, and --w-clip, the wall's top edge, from the head's height) */
html[data-layout="land"] .xp[data-land="phead"], html[data-layout="port"] .xp[data-port="phead"] { left: var(--g-m); top: calc(var(--nav-h, 72px) + 10px); width: max-content; max-width: min(var(--z-title-w), 760px); padding: 14px 18px; gap: 6px; }
/* (desktop: the head in two columns, its title left and its words right, so the wall's first rows stand whole under
   the bar by the second screen: D1.1 firstwork) */
html[data-layout="land"] .xp[data-land="phead"] { max-width: calc(100vw - 2 * var(--g-m)); display: grid; grid-template-columns: auto minmax(0, 35ch); column-gap: 40px; row-gap: 4px; align-items: end; }
html[data-layout="land"] .xp[data-land="phead"] .xp__eb { grid-column: 1; grid-row: 1; }
html[data-layout="land"] .xp[data-land="phead"] .xp__h2 { grid-column: 1; grid-row: 2; font-size: clamp(28px, 2.5vw, 46px); }
html[data-layout="land"] .xp[data-land="phead"] .w-pf-intro { grid-column: 2; grid-row: 1 / 3; max-width: 35ch; font-size: clamp(14.5px, 1.05vw, 17px); line-height: 1.42; }
.w-pf-sub { color: rgba(236, 233, 241, 0.86); }
html[data-layout="port"] .xp[data-port="phead"] { right: var(--g-m); width: auto; max-width: none; padding: 12px 14px; }
html[data-layout="port"] .xp[data-port="phead"] .xp__body { font-size: 14.5px; line-height: 1.38; }
/* the bar: the relight's controls, a glass strip for as long as the wall runs */
html[data-layout="land"] .xp[data-land="bar"] { left: var(--g-m); right: var(--g-m); top: 0; padding: 8px 10px; width: auto; z-index: 4; }
html[data-layout="port"] .xp[data-port="bar"] { left: 0; right: 0; top: 0; padding: 6px var(--g-m); width: auto; z-index: 4; border-radius: 0; }
html:not(.v3-reduced):not(.v3-nogl) .xp.w-bar { transform: translate3d(0, var(--w-bar-y, 140px), 0); transition: transform calc(520ms * var(--rv-slow, 1)) var(--ease-in-out), visibility 0s linear calc(760ms * var(--rv-slow, 1)); }
html:not(.v3-reduced):not(.v3-nogl) .xp.w-bar.is-on { transition: transform calc(520ms * var(--rv-slow, 1)) var(--ease-in-out), visibility 0s; }
html[data-layout="port"] .xp[data-port="bar"]::before { border-radius: 0; border-left: 0; border-right: 0; }
/* the bar, the stall's title and the figures read over bright work and road light: a denser glass */
.xp.w-bar::before, .xp[data-story="w-b14"]::before, .xp.w-figc::before, .xp[data-story="w-imp-close"]::before { background: rgba(14, 10, 22, 0.84) !important; }
.w-bar .fz-filter:not([aria-pressed="true"]), .w-bar .fz-tab:not([aria-selected="true"]) { color: rgba(236, 233, 241, 0.88); }
html.rv-one .xp.w-bar, html.rv-one .xp[data-story="w-b14"] { background: rgba(14, 10, 22, 0.5); }
.w-bar__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
html[data-layout="port"] .w-bar__row { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding-bottom: 2px; }
html[data-layout="port"] .w-bar__row::-webkit-scrollbar { display: none; }
.w-bar .fz-filter { flex: none; }
.w-views { margin-left: auto; flex: none; }
/* the two menus (What we did, Sector): a disclosure whose list drops under the bar */
.w-dd { position: relative; flex: none; }
.w-dd > summary { list-style: none; gap: 8px; }
.w-dd > summary::-webkit-details-marker { display: none; }
.w-dd__chev { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 180ms var(--ease-out); }
.w-dd[open] .w-dd__chev { transform: translateY(1px) rotate(-135deg); }
.w-dd.is-on > summary { color: var(--signal, #ece9f1); border-color: var(--signal, #ece9f1); }
.w-dd__list { position: absolute; left: 0; top: calc(100% + 8px); z-index: 5; width: max-content; max-width: min(520px, 86vw); padding: 10px; border-radius: 14px; background: rgba(14, 10, 22, 0.88); border: 1px solid var(--gl-edge); box-shadow: inset 0 1px 0 var(--gl-hi), 0 18px 48px rgba(0, 0, 0, 0.45); display: flex; flex-wrap: wrap; gap: 6px; }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { html.gl-blur .w-dd__list { background: rgba(14, 10, 22, 0.74); -webkit-backdrop-filter: blur(14px) saturate(115%); backdrop-filter: blur(14px) saturate(115%); } }
.w-dd[open] .w-dd__list { animation: w-drop 200ms var(--ease-out) both; }
@keyframes w-drop { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: none; } }
html[data-layout="port"] .w-dd { position: static; }
html[data-layout="port"] .w-dd__list { position: fixed; left: var(--g-m); right: var(--g-m); top: calc(var(--w-clip, 120px) + 6px); max-width: none; }

/* the wall fills the frame; its columns span the grid (n by width: wall.js) and pass behind the bar's lower edge */
html[data-layout="land"] .xp[data-land="wall"], html[data-layout="port"] .xp[data-port="wall"] { inset: 0; z-index: 2; padding: 0; }
.wall { position: absolute; inset: 0; overflow: hidden; --wg: 24px; }
html:not(.v3-reduced):not(.v3-nogl) .wall { clip-path: inset(var(--w-clip, 140px) 0 0 0); transition: clip-path calc(520ms * var(--rv-slow, 1)) var(--ease-in-out); }
.wall__veil { position: absolute; inset: 0; background: #07060a; opacity: 0; visibility: hidden; pointer-events: none; }
.wall__col { position: absolute; top: 0; left: 0; display: grid; gap: 24px; align-content: start; width: var(--wc, 300px); will-change: transform; }
.wall--two { --wg: 12px; }
.wall--two .wall__col { gap: 16px; }
.wall__tile { display: grid; gap: 0; color: var(--signal, #ece9f1); text-decoration: none; border-radius: 8px; overflow: hidden; transition: opacity 320ms var(--ease-in-out), transform 320ms var(--ease-in-out); }
.wall__media { display: block; position: relative; overflow: hidden; background: var(--graphite, #121017); transform-origin: var(--wx, 46%) var(--wy, 46%); transform: scale(0.07); transition: transform calc(420ms * var(--rv-slow, 1)) var(--v3-ease); }
.wall__media::after { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 120% at var(--wgx, 50%) var(--wgy, 50%), #ffe2b8 0%, #ffb877 22%, rgba(255, 170, 100, 0.6) 46%, rgba(40, 24, 18, 0.9) 100%); opacity: 1; transition: opacity calc(260ms * var(--rv-slow, 1)) var(--v3-ease); pointer-events: none; }
.wall__media img, .wall__media video { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform calc(420ms * var(--rv-slow, 1)) var(--v3-ease); }
.wall__tile.is-in .wall__media { transform: none; transition-duration: calc(760ms * var(--rv-slow, 1)); }
.wall__tile.is-in .wall__media::after { opacity: 0; transition-duration: calc(520ms * var(--rv-slow, 1)); transition-delay: calc(60ms * var(--rv-slow, 1)); }
.wall__tile.is-in .wall__media img, .wall__tile.is-in .wall__media video { transform: none; transition-duration: calc(760ms * var(--rv-slow, 1)); }
/* the words always under the work, at the column's full width (D1.6: no side or narrow placements that cut them) */
.wall__cap { display: grid; gap: 5px; min-width: 0; padding: 12px 14px 13px; background: rgba(14, 10, 22, 0.9); border: 1px solid var(--gl-edge); border-top: 0; border-radius: 0 0 8px 8px; opacity: 0; transform: translate3d(0, 8px, 0); transition: opacity calc(280ms * var(--rv-slow, 1)) var(--v3-ease), transform calc(280ms * var(--rv-slow, 1)) var(--v3-ease); }
.wall__tile.is-in.is-cap .wall__cap { opacity: 1; transform: none; transition-duration: calc(480ms * var(--rv-slow, 1)); transition-delay: calc(320ms * var(--rv-slow, 1)); }
.wall__client { margin: 0; font: 600 clamp(18px, 1.4vw, 24px)/1.04 var(--v3-title); letter-spacing: -0.015em; text-transform: uppercase; overflow-wrap: anywhere; }
.wall__scopes { font: 500 11px/1.5 var(--v3-mono); letter-spacing: 0.08em; text-transform: uppercase; color: rgba(236, 233, 241, 0.86); overflow-wrap: anywhere; }
.wall__res { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font: 500 14px/1.38 var(--v3-body); color: var(--gold, #f2c27a); }
.wall__res .v3-reported { font-size: 10.5px; }
.wall__case { justify-self: start; margin-top: 2px; padding: 3px 8px 2px; border: 1px solid rgba(201, 182, 234, 0.6); border-radius: 999px; font: 500 10.5px/1.4 var(--v3-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--filament, #c9b6ea); }
.wall__rest { position: relative; isolation: isolate; margin: 6px 0 2px; padding: 16px 18px 15px; font: 600 clamp(18px, 1.5vw, 24px)/1.05 var(--v3-title); letter-spacing: -0.015em; text-transform: uppercase; color: var(--signal, #ece9f1); opacity: 0; transform: translate3d(0, 8px, 0); transition: opacity calc(280ms * var(--rv-slow, 1)) var(--v3-ease), transform calc(280ms * var(--rv-slow, 1)) var(--v3-ease); }
.wall__rest::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 12px; background: var(--gl-tint); border: 1px solid var(--gl-edge); box-shadow: inset 0 1px 0 var(--gl-hi), var(--gl-shadow); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { html.gl-blur[data-layout="land"] .wall__rest::before { background: var(--gl-fill); -webkit-backdrop-filter: blur(14px) saturate(115%); backdrop-filter: blur(14px) saturate(115%); } }
.wall__rest::after { content: ''; display: block; width: 40px; height: 2px; margin-top: 10px; background: var(--filament, #c9b6ea); transform: scaleX(0); transform-origin: left; transition: transform calc(260ms * var(--rv-slow, 1)) var(--v3-ease); }
.wall__rest.is-in { opacity: 1; transform: none; transition-duration: calc(480ms * var(--rv-slow, 1)); }
.wall__rest.is-in::after { transform: none; transition-duration: calc(640ms * var(--rv-slow, 1)); transition-delay: calc(200ms * var(--rv-slow, 1)); }
.wall--two .wall__client { font-size: 15.5px; }
.wall--two .wall__scopes { font-size: 10px; letter-spacing: 0.04em; }
.wall--two .wall__res { font-size: 12.5px; }
.wall--two .wall__cap { padding: 9px 10px 10px; gap: 4px; }
.wall--two .wall__rest { font-size: 15px; padding: 12px 12px 11px; }
@media (hover: hover) and (pointer: fine) { a.wall__tile:hover .wall__media img, a.wall__tile:hover .wall__media video { transform: scale(1.025); } }
a.wall__tile:focus-visible { outline: 2px solid var(--filament, #c9b6ea); outline-offset: 3px; }
/* the relight: every other tile goes back into a dark window; only the chosen work stays lit (no reflow) */
.wall__tile.is-dim, .wall__rest.is-dim { opacity: 0.14; transform: scale(0.94); }
.wall__rest.is-dim { transition: opacity 320ms var(--ease-in-out), transform 320ms var(--ease-in-out); }
.wall__empty { position: absolute; left: 50%; top: 46%; z-index: 3; width: min(440px, calc(100vw - 2 * var(--g-m))); transform: translate(-50%, -50%); display: grid; gap: 12px; justify-items: start; padding: 22px 24px; border-radius: 16px; background: rgba(14, 10, 22, 0.84); border: 1px solid var(--gl-edge); }
.wall__empty[hidden] { display: none; }
.wall__empty-note { font: 400 15px/1.45 var(--v3-body); color: rgba(236, 233, 241, 0.9); }
.wall__also { position: absolute; left: var(--g-m); right: var(--g-m); top: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 10px 14px; border-radius: 12px; background: rgba(14, 10, 22, 0.7); font: 400 14px/1.45 var(--v3-body); opacity: 0; transition: opacity 300ms var(--v3-ease); }
.wall__also.is-in { opacity: 1; }
.wall__also .fz-mono { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--filament, #c9b6ea); }
.w-also__note { font-size: 10px; letter-spacing: 0.08em; color: rgba(236, 233, 241, 0.7); }

/* the index: a real table on the reading glass over the dimmed wall (its own scroll, sideways on a phone) */
html[data-layout="land"] .xp[data-land="index"] { left: var(--g-m); right: var(--g-m); top: calc(var(--w-clip, 140px) + 10px); bottom: 24px; padding: 0; z-index: 3; }
html[data-layout="port"] .xp[data-port="index"] { left: 12px; right: 12px; top: calc(var(--w-clip, 120px) + 8px); bottom: 12px; padding: 0; z-index: 3; }
.w-ix::before { background: rgba(14, 10, 22, 0.88) !important; }
.w-ix__scroll { height: 100%; overflow: auto; overscroll-behavior: contain; padding: 8px 6px 12px; border-radius: inherit; }
.w-ix__scroll:focus-visible { outline: 2px solid var(--filament, #c9b6ea); outline-offset: -2px; }
.w-ix__t { width: 100%; min-width: 760px; border-collapse: collapse; font: 400 13.5px/1.35 var(--v3-body); color: var(--signal, #ece9f1); }
.w-ix__t th, .w-ix__t td { padding: 9px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line, rgba(236, 233, 241, 0.12)); }
.w-ix__t thead th { position: sticky; top: 0; z-index: 1; background: rgba(14, 10, 22, 0.96); font: 500 10px/1.3 var(--v3-mono); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(236, 233, 241, 0.82); }
.w-ix__t tbody th { font: 600 15px/1.1 var(--v3-title); letter-spacing: -0.01em; text-transform: uppercase; }
.w-ix__t td.fz-mono { font: 500 10.5px/1.6 var(--v3-mono); letter-spacing: 0.08em; text-transform: uppercase; color: rgba(236, 233, 241, 0.86); }
.w-ix__t a { color: var(--filament, #c9b6ea); text-underline-offset: 3px; }
.w-ix__did a { display: inline-block; padding: 2px 0; }
.w-ix__t .v3-reported { margin-left: 6px; }
.w-ix__note { display: block; margin-top: 3px; font-size: 9.5px; letter-spacing: 0.08em; color: rgba(236, 233, 241, 0.7); font-weight: 400; }
.w-ix__t tr.is-dim { opacity: 0.28; transition: opacity 320ms var(--ease-in-out); }
html[data-layout="port"] .w-ix__t { min-width: 680px; }

/* ============================================================ Impact: the figures' words */
/* over the film the figure is lit in the world (scene/faced.js): its numerals stay for screen readers, its label and
   credit stand in the band */
.w-fig { display: flex; align-items: baseline; gap: 12px; margin: 0; }
.w-fig__n { font: 800 clamp(56px, 7vw, 120px)/0.86 var(--v3-title); letter-spacing: -0.045em; color: var(--signal, #ece9f1); }
.w-fig__l { font: 600 clamp(19px, 1.6vw, 26px)/1 var(--v3-title); font-stretch: 88%; letter-spacing: -0.02em; text-transform: uppercase; }
.w-fig__c { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font: 500 10.5px/1.5 var(--v3-mono); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(236, 233, 241, 0.9); }
.w-figc { gap: 8px; }
.w-figc .xp__h2 { margin-bottom: 4px; }
/* the ten countries with the 10: flags and names only (no clients) */
.w-ctry { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; margin: 6px 0 0; padding: 0; list-style: none; }
.w-ctry__c { display: flex; align-items: center; gap: 8px; font: 600 12.5px/1.15 var(--v3-title); letter-spacing: 0.01em; text-transform: uppercase; }
.w-ctry__c img { flex: none; width: 20px; height: 15px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(236, 233, 241, 0.18); object-fit: cover; }
html[data-layout="land"] .w-figc--ctry { max-width: min(460px, var(--z-cap-w)) !important; }
/* 80+'s chapter opener and the countries are taller than the caption band; they stand on its foot */
html[data-layout="land"] .xp[data-land="figp"] { left: var(--g-m); top: auto; bottom: var(--z-cap-bottom); width: max-content; max-width: min(520px, calc(100vw - 2 * var(--g-m))); }
html[data-layout="port"] .xp[data-port="figp"] { left: var(--g-m); right: var(--g-m); top: auto; bottom: var(--z-cap-bottom); width: auto; max-width: none; }

/* ============================================================ the chain's words */
/* each gantry's line: its station's name is painted on the sign (scene/chain.js), so over the film the label carries
   the line alone (the name stays for screen readers); reduced motion and no WebGL show both */
.w-st .w-st__name { font-size: 10px; color: var(--filament, #c9b6ea); }
.w-st .w-st__line { font: 500 13.5px/1.3 var(--v3-body); max-width: 22ch; }
.w-st--revenue .w-st__line { color: var(--gold, #f2c27a); }
.w-line { margin: 0; padding: 0; list-style: none; }
html:not(.v3-reduced):not(.v3-nogl) .w-line { display: contents; }
/* a phone: the stations' lines as one list in the band (V3e's services list on a phone) */
html[data-layout="port"]:not(.v3-reduced):not(.v3-nogl) .w-line {
  display: grid; position: fixed; left: var(--g-m); right: var(--g-m); bottom: var(--z-cap-bottom); z-index: 3;
  grid-template-columns: 1fr 1fr; gap: 6px 12px; padding: 14px 16px; isolation: isolate; visibility: hidden;
  transition: visibility 0s linear calc(760ms * var(--rv-slow, 1));
}
html[data-layout="port"]:not(.v3-reduced):not(.v3-nogl) .w-line:has(.xp.is-on) { visibility: visible; transition-delay: 0s; }
html[data-layout="port"] .w-line::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: var(--gl-r); background: rgba(14, 10, 22, 0.8); border: 1px solid var(--gl-edge); box-shadow: inset 0 1px 0 var(--gl-hi), var(--gl-shadow); opacity: 0; transition: opacity 260ms var(--v3-ease) 300ms; }
html[data-layout="port"] .w-line:has(.xp.is-on)::before { opacity: 1; transition-duration: 420ms; transition-delay: 0s; }
html[data-layout="port"]:not(.v3-reduced):not(.v3-nogl) .w-line .xp { position: relative; padding: 0; min-height: 22px; }
html[data-layout="port"] .w-line .xp::before { display: none; }
html[data-layout="port"] .w-line .w-st__line { font-size: 12.5px; }
html.rv-one[data-layout="port"]:not(.v3-reduced):not(.v3-nogl) body .w-line { opacity: 0; translate: 0 12px; transition: opacity calc(260ms * var(--rv-slow, 1)) var(--v3-ease), translate calc(260ms * var(--rv-slow, 1)) var(--v3-ease), visibility 0s linear calc(260ms * var(--rv-slow, 1)); }
html.rv-one[data-layout="port"]:not(.v3-reduced):not(.v3-nogl) body .w-line:has(.xp.is-on) { opacity: 1; translate: none; transition-duration: calc(420ms * var(--rv-slow, 1)), calc(420ms * var(--rv-slow, 1)), 0s; transition-delay: calc(120ms * var(--rv-slow, 1)), calc(120ms * var(--rv-slow, 1)), 0s; }
html.rv-one[data-layout="port"]:not(.v3-reduced):not(.v3-nogl) body .w-line .xp { opacity: 1; translate: none; visibility: inherit; }

/* ============================================================ the proof (D1.2): one case at a time, a card across the
   grid, the road in view under it */
html[data-layout="land"] .xp[data-land="ptitle"] { left: var(--g-m); top: calc(var(--nav-h, 72px) + 10px); width: max-content; max-width: calc(100vw - 2 * var(--g-m)); padding: 12px 18px; gap: 4px; }
/* (one line on a desktop: set by the story id, so the headline's line split at build time already sees it) */
@media (min-width: 1000px) { .xp[data-story="w-b19"] .xp__head { font-size: clamp(21px, 1.8vw, 30px); max-width: none; white-space: nowrap; } }
html[data-layout="land"] .xp[data-land="card"] { left: max(var(--g-m), calc(50vw - 840px)); right: max(var(--g-m), calc(50vw - 840px)); top: calc(var(--nav-h, 72px) + 104px); bottom: clamp(110px, calc(42vh - 189px), 21vh); padding: 0; }
html[data-layout="port"] .xp[data-port="card"] { left: var(--g-m); right: var(--g-m); top: calc(var(--nav-h, 60px) + 10px); bottom: 74px; padding: 0; }
.xp.wp::before { display: none; }
html:not(.v3-reduced):not(.v3-nogl) .xp.wp { display: block; }
.wp-card { position: relative; display: grid; height: 100%; min-height: 0; grid-template-columns: calc(var(--g-col, 86px) * 7 + var(--g-gut, 24px) * 6) minmax(0, 1fr); gap: var(--g-gut, 24px); }
.wp-card__media { position: relative; min-height: 0; display: grid; place-items: center; padding: 18px; border-radius: 16px; background: rgba(7, 6, 11, 0.94); border: 1px solid rgba(255, 226, 190, 0.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 24px 70px rgba(0, 0, 0, 0.45); overflow: hidden; }
.wp-card__mat { display: block; aspect-ratio: var(--ar); width: auto; height: auto; max-width: 100%; max-height: 100%; overflow: hidden; border-radius: 6px; background: var(--graphite, #121017); box-shadow: 0 0 0 1px rgba(255, 220, 180, 0.14); }
/* (the mat takes the work's own ratio and the largest size the cell allows: by height when it is tall, by width when wide) */
.wp-card__mat:has(> :is(img, video)) { height: 100%; }
.wp-card__mat img, .wp-card__mat video { display: block; width: 100%; height: 100%; object-fit: contain; }
.wp-card__story { position: relative; isolation: isolate; min-height: 0; display: flex; flex-direction: column; gap: clamp(6px, 1.1vh, 12px); padding: clamp(16px, 2.6vh, 32px) clamp(20px, 2.2vw, 36px); border-radius: 16px; overflow: hidden; }
.wp-card__story::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: rgba(12, 9, 19, 0.95); border: 1px solid var(--gl-edge); box-shadow: inset 0 1px 0 var(--gl-hi), 0 24px 70px rgba(0, 0, 0, 0.4); }
.wp-card__count { margin: 0; font: 500 12px/1.2 var(--v3-mono); letter-spacing: 0.16em; color: rgba(236, 233, 241, 0.7); }
.wp-card__kick { margin: 0; font: 500 12px/1.3 var(--v3-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--filament, #c9b6ea); }
.wp-card__h { margin: 0; font: 600 clamp(24px, min(3vw, 4.6vh), 56px)/0.98 var(--v3-title); font-stretch: 92%; letter-spacing: -0.025em; text-transform: uppercase; text-wrap: balance; }
.wp-card__sup { margin: 0; max-width: 52ch; font: 400 clamp(15px, min(1.25vw, 2.2vh), 18px)/1.42 var(--v3-body); color: rgba(236, 233, 241, 0.88); }
.wp-card__figs { display: flex; flex-wrap: wrap; gap: 6px 28px; margin-top: auto; }
.wp-card__fig { display: grid; gap: 4px; margin: 0; max-width: 30ch; font: 400 16px/1.32 var(--v3-body); color: rgba(236, 233, 241, 0.92); }
.wp-card__fig b { font: 600 clamp(44px, min(5.4vw, 7.4vh), 96px)/0.9 var(--v3-title); letter-spacing: -0.04em; white-space: nowrap; }
.wp-card__figs:has(> .wp-card__fig + .wp-card__fig) b { font-size: clamp(44px, min(4.2vw, 6.4vh), 80px); }
.wp-card__rep { margin: 0; line-height: 1; }
.wp-card__path { margin: 0; font: 500 12px/1.5 var(--v3-mono); letter-spacing: 0.08em; text-transform: uppercase; color: rgba(236, 233, 241, 0.84); }
.wp-card__ch { color: var(--filament, #c9b6ea); font-weight: 600; }
.wp-card__mv { color: var(--gold, #f2c27a); font-weight: 600; }
.wp-card__sep { margin: 0 6px; }
.wp-card__cta { position: relative; align-self: flex-start; margin-top: 4px; }
/* (a smaller desktop: the story takes six columns, its lines wrap less; a short frame: tighter type) */
@media (min-width: 900px) and (max-width: 1399px) { html[data-layout="land"] .wp-card { grid-template-columns: calc(var(--g-col, 74px) * 6 + var(--g-gut, 24px) * 5) minmax(0, 1fr); } }
@media (max-height: 800px) and (min-width: 900px) { .wp-card__story { gap: 6px; } .wp-card__h { font-size: clamp(22px, min(2.8vw, 4.3vh), 56px); } }
/* in and out: the card slides in from the right as the lens trucks to its station, and on to the left as it leaves */
html:not(.v3-reduced):not(.v3-nogl) .xp.wp .wp-card { opacity: 0; transform: translate3d(6%, 0, 0); transition: opacity calc(260ms * var(--rv-slow, 1)) var(--v3-ease), transform calc(420ms * var(--rv-slow, 1)) var(--ease-in-out); }
html:not(.v3-reduced):not(.v3-nogl) .xp.wp.is-on .wp-card { opacity: 1; transform: none; transition-duration: calc(480ms * var(--rv-slow, 1)), calc(620ms * var(--rv-slow, 1)); }
html:not(.v3-reduced):not(.v3-nogl) .xp.wp.is-post .wp-card { transform: translate3d(-6%, 0, 0); }
/* a phone: the card the frame's width, its work on top (at most 34 % of the height), its story under it; no ties */
html[data-layout="port"] .wp-card { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 10px; }
html[data-layout="port"] .wp-card__media { padding: 10px; max-height: 34vh; }
html[data-layout="port"] .wp-card__mat { max-height: calc(34vh - 20px); }
html[data-layout="port"] .wp-card__story { gap: 7px; padding: 16px 16px 14px; }
html[data-layout="port"] .wp-card__h { font-size: clamp(26px, 7.4vw, 34px); }
html[data-layout="port"] .wp-card__sup { font-size: 15px; line-height: 1.36; }
html[data-layout="port"] .wp-card__fig { font-size: 14px; }
html[data-layout="port"] .wp-card__fig b, html[data-layout="port"] .wp-card__figs:has(> .wp-card__fig + .wp-card__fig) b { font-size: 40px; }
html[data-layout="port"] .wp-card__figs { gap: 4px 18px; margin-top: 2px; }
html[data-layout="port"] .wp-card__path { font-size: 10.5px; }
html[data-layout="port"] :is(.xp.wp .wp-card) { transform: none; }
html.rv-one:not(.v3-reduced):not(.v3-nogl) body .xp.wp .wp-card { opacity: 1; transform: none; transition: none; }

/* the ties: under the card, from its lower edge, a lavender line to where the case changed and gold to where it moved */
.w-ties { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; z-index: 2; pointer-events: none; overflow: visible; opacity: 0; transition: opacity 260ms var(--v3-ease); }
.w-ties.is-on { opacity: 1; transition-duration: 420ms; }
.w-tie { stroke-width: 1.5; fill: none; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset calc(300ms * var(--rv-slow, 1)) var(--v3-ease); }
.w-tie.is-in { stroke-dashoffset: 0; transition-duration: calc(620ms * var(--rv-slow, 1)); transition-delay: calc(260ms * var(--rv-slow, 1)); }
.w-tie--ch { stroke: var(--e-line, #c9b6ea); }
.w-tie--mv { stroke: var(--gold, #f2c27a); }
.w-ties circle { fill: rgba(7, 6, 10, 0.6); stroke-width: 1.5; opacity: 0; transition: opacity 260ms var(--v3-ease); }
.w-ties circle.is-in { opacity: 1; transition-delay: calc(820ms * var(--rv-slow, 1)); }
html[data-layout="port"] .w-ties, .v3-reduced .w-ties, .v3-nogl .w-ties { display: none; }

/* the Closing's line stays inside the measure (52 characters) */
html[data-layout="land"] .xp[data-story="cta"] .xp__body { max-width: 300px; }

/* ============================================================ reduced motion and no WebGL: one composed still per
   section, every word in its section's flow (the wall a static grid, the index a table under it, the four cards
   stacked) */
.v3-reduced .w-fig__n, .v3-nogl .w-fig__n { position: static !important; width: auto !important; height: auto !important; margin: 0 !important; clip: auto !important; overflow: visible !important; }
.v3-reduced .w-line, .v3-nogl .w-line { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; width: min(100%, 980px); }
.v3-reduced .xp.wp, .v3-nogl .xp.wp { width: 100% !important; max-width: 1180px !important; }
.v3-reduced .wp-card, .v3-nogl .wp-card { height: auto; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.v3-reduced .wp-card__mat, .v3-nogl .wp-card__mat { height: auto; max-height: 60vh; }
.v3-reduced .e-sec--portfolio .xp--block, .v3-nogl .e-sec--portfolio .xp--block { max-width: 1320px !important; width: 100% !important; }
.v3-reduced .wall, .v3-nogl .wall { position: relative; inset: auto; overflow: visible; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; align-items: start; clip-path: none; }
.v3-reduced .wall__col, .v3-nogl .wall__col { position: relative; left: auto !important; width: auto !important; transform: none !important; display: grid !important; }
.v3-reduced :is(.wall__media, .wall__media img, .wall__media video, .wall__cap, .wall__rest, .wall__rest::after), .v3-nogl :is(.wall__media, .wall__media img, .wall__media video, .wall__cap, .wall__rest, .wall__rest::after) { transform: none; opacity: 1; transition: none; }
.v3-reduced .wall__media::after, .v3-nogl .wall__media::after, .v3-reduced .wall__veil, .v3-nogl .wall__veil { display: none; }
.v3-reduced .wall__also, .v3-nogl .wall__also { position: relative; left: auto; right: auto; opacity: 1; transform: none !important; grid-column: 1 / -1; }
.v3-reduced .wall__empty, .v3-nogl .wall__empty { position: relative; left: auto; top: auto; transform: none; grid-column: 1 / -1; }
.v3-reduced .w-ix__scroll, .v3-nogl .w-ix__scroll { height: auto; max-height: none; }
.v3-reduced .xp[data-story="w-pf-bar"], .v3-nogl .xp[data-story="w-pf-bar"] { position: sticky !important; top: calc(var(--nav-h, 72px) + 8px); z-index: 4; transform: none; }
.v3-reduced .w-ix, .v3-nogl .w-ix { width: 100% !important; max-width: 1320px !important; }
.v3-reduced .w-dd__list, .v3-nogl .w-dd__list { position: static; margin-top: 8px; max-width: none; animation: none; }
@media (max-width: 760px), (max-aspect-ratio: 9/10) {
  .v3-reduced .wall, .v3-nogl .wall { grid-template-columns: 1fr 1fr; gap: 12px; }
  .v3-reduced .w-ctry, .v3-nogl .w-ctry { grid-template-columns: 1fr; }
  .v3-reduced .wp-card, .v3-nogl .wp-card { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .wall__tile, .wall__rest, .wall__media, .wall__media::after, .wall__cap, .w-tie, .w-ix__t tr, .wp-card, .w-chips, .xp.w-bar, .wall { transition: none !important; }
  .w-dd[open] .w-dd__list { animation: none; }
}