/*
  Gami Development — work sheets, featured case, brand chips (round 2).
  Rendered by modules/sheets.js from data/work.js. Load after ../lib/gami.css (and site.css).
  Every class is prefixed .wk- so pages can style around it without collisions.
*/

/* ================================================================
   Justified rows
   ================================================================ */
.wk-grid {
  --wk-gap: 24px;
  --wk-row-gap: clamp(44px, 4.4vw, 64px);
  display: grid; row-gap: var(--wk-row-gap);
  min-width: 0;
}
.wk-row { display: flex; align-items: flex-start; gap: var(--wk-gap); min-width: 0; }
/* widths ∝ aspect with flex-basis 0, so every stage in a row lands on the same height */
.wk-row > .wk-sheet { flex: var(--a) 1 0; }
.wk-row.is-capped { justify-content: center; }
.wk-row.is-capped > .wk-sheet { flex: 0 0 calc(var(--a) * var(--wk-h)); }
@media (max-width: 640px) { .wk-grid { --wk-gap: 12px; --wk-row-gap: 36px; } }

/* ================================================================
   One sheet = one screen: bezel, chamfer, hairline, caption block
   ================================================================ */
.wk-sheet { position: relative; min-width: 0; container: wk / inline-size; }
.wk-stage {
  position: relative; width: 100%; aspect-ratio: var(--ar);
  container-type: size;
}
.wk-glow {
  position: absolute; inset: 0; pointer-events: none;
  box-shadow: 0 0 56px rgb(var(--spill) / .16);
  transition: box-shadow 420ms linear;
}
.wk-sheet.is-live .wk-glow { box-shadow: 0 0 72px rgb(var(--spill) / .46); }

.wk-hit {
  --fold: clamp(96px, min(78cqw, 58cqh), 220px);
  position: absolute; inset: 0; display: block; color: inherit; text-align: left;
  perspective: 900px; perspective-origin: 100% 0;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
div.wk-hit { cursor: default; }
.wk-hit:focus-visible { outline: 2px solid var(--focus); outline-offset: 5px; }

.wk-face {
  --ch: 14px;
  position: absolute; inset: 0; overflow: hidden; background: var(--bezel);
  clip-path: polygon(0 0, calc(100% - var(--ch)) 0, 100% var(--ch), 100% 100%, 0 100%);
  transition: clip-path var(--d-corner) var(--ease-out);
}
.wk-face::before { /* 1px gold → red top hairline: the only place warm light touches the screen */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 4;
  background: linear-gradient(90deg, rgba(255,163,168,0), var(--gold) 16%, var(--red) 84%, rgba(255,111,150,.2));
}
.wk-face::after { /* the chamfer's own cut edge, catching the light */
  content: ""; position: absolute; top: 0; right: 0; width: var(--ch); height: var(--ch); z-index: 4;
  background: linear-gradient(to bottom left, transparent calc(50% - .6px), rgba(250,239,239,.45) 50%, transparent calc(50% + .6px));
  transition: opacity var(--d-corner) var(--ease-out);
}

/* Media: every sheet shows a still by default; footage only while the sheet is live */
.wk-media { position: absolute; inset: 0; background: #07080A; }
.wk-media > img, .wk-media > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.wk-media > video { opacity: 0; }
.wk-sheet.is-playing .wk-media > video { opacity: 1; animation: wk-scan 300ms steps(8, end) both; }   /* SINCRONIA */
@keyframes wk-scan { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
/* Screenshots and photos: a slow push-in while live, so every sheet answers the pointer the same way */
.wk-media--screen > img, .wk-media--photo > img { transform-origin: 50% 0; transition: transform 5s cubic-bezier(.22, 1, .36, 1); }
.wk-media--photo > img { transform-origin: 50% 40%; }
.wk-sheet.is-live .wk-media--screen > img, .wk-sheet.is-live .wk-media--photo > img { transform: scale(1.06); }

/* In-frame labels */
.wk-ratio {
  position: absolute; right: 10px; bottom: 10px; z-index: 3; pointer-events: none;
  font-family: var(--f-mono); font-stretch: 87.5%; font-size: 10.5px; line-height: 1;
  color: rgba(250,239,239,.82); padding: 5px 6px; background: rgba(11,13,16,.62);
}
.wk-tally {
  position: absolute; left: 10px; bottom: 10px; z-index: 3; pointer-events: none;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--f-label); font-stretch: 150%; font-weight: 500; font-size: 9.5px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--text); padding: 6px 8px 6px 7px; background: rgba(11,13,16,.66);
  opacity: 0; transition: opacity 160ms linear;
}
.wk-tally .g-tally { width: 6px; height: 6px; }
.wk-sheet.is-playing .wk-tally { opacity: 1; }

/* ---------- Corner fold (the client's favourite): the face opens along 45° while the flap swings over ---------- */
.wk-flap {
  position: absolute; top: 0; right: 0; width: var(--fold); height: var(--fold); z-index: 5;
  transform-origin: 0 0; transform: rotate3d(1, 1, 0, 180deg);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transition: transform var(--d-corner) var(--ease-out);
  filter: drop-shadow(-5px 7px 9px rgba(0,0,0,.5));
  pointer-events: none;
}
.wk-fold-back {
  position: absolute; inset: 0; overflow: hidden;
  clip-path: polygon(0 0, 0 100%, 100% 100%);
  background: linear-gradient(to top right, #FAF6EC 0%, var(--paper) 30%, var(--paper-2) 50%, transparent 50%);
  color: var(--paper-ink);
}
.wk-fold-back::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--grain-url); background-size: 180px 180px; opacity: .22; mix-blend-mode: multiply; }
.wk-fold-back::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top right, transparent calc(50% - 1.6px), rgba(255,255,255,.85) calc(50% - .5px), transparent 50%); }
.wk-fold-text {
  position: absolute; inset: 0; margin: 0;
  font-family: var(--f-display); font-weight: 620; font-size: calc(var(--fold) * .085); line-height: 1.18; letter-spacing: -.012em;
  font-variation-settings: "SHRP" 100; color: var(--paper-ink);
}
.wk-fold-text .fl { position: absolute; left: 0; white-space: nowrap; }

/* The whole sheet answers the pointer (screen and caption are one object); keyboard focus lands on the stage. */
.wk-hit:focus-visible .wk-face, .wk-sheet.is-folded .wk-face, .wk-feat:focus-within .wk-face { --ch: var(--fold); }
.wk-hit:focus-visible .wk-flap, .wk-sheet.is-folded .wk-flap, .wk-feat:focus-within .wk-flap { transform: rotate3d(1, 1, 0, 0deg); }
.wk-hit:focus-visible .wk-face::after, .wk-sheet.is-folded .wk-face::after, .wk-feat:focus-within .wk-face::after { opacity: 0; }
@media (hover: hover) {
  .wk-sheet:not(.wk-feat):hover .wk-face, .wk-feat .wk-hit:hover .wk-face { --ch: var(--fold); }
  .wk-sheet:not(.wk-feat):hover .wk-flap, .wk-feat .wk-hit:hover .wk-flap { transform: rotate3d(1, 1, 0, 0deg); }
  .wk-sheet:not(.wk-feat):hover .wk-face::after, .wk-feat .wk-hit:hover .wk-face::after { opacity: 0; }
  .wk-sheet.has-link .wk-cap { cursor: pointer; }
  .wk-sheet.has-link:hover .wk-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; text-decoration-color: rgba(250,239,239,.45); }
}
/* No-footage (attract) screens fold a smaller corner, so their drawing and logo stay in view. */
.wk-sheet[data-media="none"] .wk-hit { --fold: clamp(64px, min(52cqw, 40cqh), 170px); }

/* ---------- Caption block: client · screen / title / one line ---------- */
.wk-cap { padding-top: 16px; }
.wk-meta {
  margin: 0 0 7px;
  font-family: var(--f-mono); font-stretch: 87.5%; font-size: 11.5px; line-height: 1.45; color: var(--text-3);
  text-wrap: pretty;
}
.wk-bs { display: none; }
@container wk (max-width: 260px) { .wk-bf { display: none; } .wk-bs { display: inline; } }
.wk-title {
  margin: 0;
  font-family: var(--f-display); font-weight: 620; font-variation-settings: "SHRP" 100;
  color: var(--text); font-size: 1.25rem; line-height: 1.12; letter-spacing: -.015em; text-wrap: balance;
}
.wk-line { margin: 8px 0 0; font-size: .875rem; line-height: 1.5; color: var(--text-2); max-width: 46ch; text-wrap: pretty; }
.wk-fact { display: none; margin: 8px 0 0; padding-left: 17px; text-indent: -17px; font-size: .875rem; line-height: 1.4; color: var(--text); text-wrap: pretty; }
.wk-fact::before { /* a tiny folded corner: this line is what the fold shows (hanging, so wrapped lines align) */
  content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 8px; vertical-align: .02em; text-indent: 0;
  background: linear-gradient(to top right, var(--paper) 0 50%, transparent 50%);
}
.wk-go { display: none; }
.wk-note { margin: 8px 0 0; font-family: var(--f-mono); font-stretch: 87.5%; font-size: 11px; line-height: 1.45; color: var(--text-3); }
.wk-pend { margin: 8px 0 0; line-height: 1.3; font-size: .875rem; }
.wk-pend .g-pending { white-space: normal; display: inline-block; }
@media (hover: none) { .wk-fact { display: block; } }
@container wk (max-width: 184px) {
  .wk-line { font-size: .8125rem; line-height: 1.45; }
  .wk-title { font-size: 1.0625rem; }
  .wk-meta { font-size: 11.5px; }
}

@container wk (max-width: 130px) { .wk-scr { display: none; } }
@container wk (max-width: 150px) {
  .wk-note { display: none; }
  .wk-cap { padding-top: 12px; }
  .wk-ratio { display: none; }
  .wk-title { font-size: .9375rem; }
  .wk-meta { font-size: 11.5px; }
}

/* ---------- Solo: one sheet on a wide grid (most brand filters) is a composition, not a lone card ----------
   The screen takes the first --span columns (by its aspect, see soloSpan), the caption the next four, one column
   of air between; both are centred on each other and start on the grid's left edge, under the group head. */
.wk-grid.is-solo { --wk-row-gap: 0px; }
.wk-grid.is-solo .wk-row { display: block; }
.wk-sheet.is-solo {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter, 24px); align-items: center;
  container: none;
}
.wk-sheet.is-solo .wk-stage { grid-column: 1 / span var(--span, 7); }
.wk-sheet.is-solo .wk-cap { grid-column: calc(var(--span, 7) + 2) / span 4; padding-top: 0; }
.wk-sheet.is-solo .wk-meta { font-size: 12px; margin-bottom: 12px; }
.wk-sheet.is-solo .wk-title { font-size: clamp(1.6rem, 1rem + 1.3vw, 2.25rem); line-height: 1.02; letter-spacing: -.03em; }
.wk-sheet.is-solo .wk-fact { display: block; margin-top: 16px; font-size: 1rem; }
.wk-sheet.is-solo .wk-line { display: block; margin-top: 10px; font-size: 1rem; max-width: 40ch; }
.wk-sheet.is-solo .wk-note { display: block; margin-top: 14px; }
.wk-sheet.is-solo .wk-pend { margin-top: 14px; }
.wk-sheet.is-solo .wk-go {
  display: inline-flex; gap: 10px; margin: 22px 0 0; padding-bottom: 4px; border-bottom: 1px solid rgba(250,239,239,.3);
  font-family: var(--f-label); font-stretch: 125%; font-weight: 500; font-size: 13px; letter-spacing: .04em; color: var(--text);
}
.wk-sheet.is-solo .wk-ratio { display: block; }
@media (hover: hover) { .wk-sheet.is-solo.has-link:hover .wk-go { border-bottom-color: var(--signal); } }

/* ---------- Filter: sheets fold away to the top-right corner and unfold back (DOBRA) ---------- */
.wk-grid.is-folding-out .wk-sheet { animation: wk-fold-out 200ms var(--ease-fold) both; }
.wk-grid.is-folding-in .wk-sheet { animation: wk-fold-in 520ms var(--ease-fold) both; animation-delay: calc(var(--i, 0) * 34ms); }
@keyframes wk-fold-in {
  from { clip-path: polygon(100% 0, 100% 0, 100% 0); }
  to { clip-path: polygon(calc(100% - var(--wk-wipe, 2000px)) 0, 100% 0, 100% var(--wk-wipe, 2000px)); }
}
@keyframes wk-fold-out {
  from { clip-path: polygon(calc(100% - var(--wk-wipe, 2000px)) 0, 100% 0, 100% var(--wk-wipe, 2000px)); }
  to { clip-path: polygon(100% 0, 100% 0, 100% 0); }
}

/* ================================================================
   Attract screen: a designed idle screen for pieces with no footage
   ================================================================ */
.wk-attract {
  --pa: #FAEFEF; --pa2: #F0DCDE; --pa3: #CDBF9F; --ink-p: #1A1714;
  position: absolute; inset: 0; overflow: hidden; container: wkscr / size;
  background:
    radial-gradient(120% 80% at 0% 100%, rgba(255,163,168,.13), rgba(255,138,122,.05) 40%, transparent 68%),
    radial-gradient(80% 60% at 100% 0%, rgba(3,71,114,.22), transparent 70%),
    #0F1115;
}
.wk-attract::before { /* a blank sheet's 45° crease, corner to corner */
  content: ""; position: absolute; top: 0; right: 0; width: 100%; aspect-ratio: 1; pointer-events: none;
  background: linear-gradient(to top right, transparent calc(50% - .5px), rgba(250,239,239,.07) 50%, transparent calc(50% + .5px));
}
.wk-attract::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--grain-url); background-size: 256px; opacity: .06; mix-blend-mode: screen; }

/* Portrait (default): the drawing under the crease, then the client's chip and the name, bottom-left, above the
   in-frame labels. The corner fold (≤ 52 % of the width) only ever meets the top of the drawing. */
.wk-attract__in {
  position: absolute; inset: 0; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto auto;
  grid-template-areas: "art" "chip" "name";
  row-gap: clamp(8px, 4cqw, 16px);
  padding: clamp(18px, 20cqw, 72px) 8cqw max(10cqw, 42px);
}
.wk-attract__in > * { min-width: 0; }
.wk-attract__chip {
  grid-area: chip; justify-self: start;
  --chh: clamp(32px, 20cqw, 60px);
  display: grid; place-items: center;
  height: var(--chh); aspect-ratio: 2.4; max-width: 100%;
  background: #1B1D22; box-shadow: inset 0 0 0 1px rgba(250,239,239,.14);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
}
.wk-attract__chip--paper { background: var(--pa); box-shadow: none; }
.wk-attract__chip img { height: calc(var(--chh) * var(--lh, 50) / 100); width: auto; max-width: 80%; object-fit: contain; }
.wk-attract__chip--none { aspect-ratio: auto; height: auto; padding: 0; background: none; box-shadow: none; clip-path: none; }
.wk-attract__chip--none .g-pending { font-size: clamp(9.5px, 3cqw, 11px); }

/* the drawing fits its cell (preserveAspectRatio meet), never its own width, so it can't spill onto the chip */
.wk-attract__art { grid-area: art; position: relative; min-height: 0; }
.wk-attract__art svg { position: absolute; top: 0; bottom: 0; left: 50%; width: min(100%, 74cqw); height: 100%; transform: translateX(-50%); overflow: visible; }
.wk-attract__name {
  grid-area: name; margin: 0; max-width: 100%;
  font-family: var(--f-display); font-weight: 620; font-variation-settings: "SHRP" 100;
  color: var(--text); font-size: clamp(13px, 11cqw, 44px); line-height: 1; letter-spacing: -.03em; text-wrap: balance;
}
/* phone-shaped screen (9 : 19,5): a little more drawing, the same stack */
@container wkscr (max-aspect-ratio: 1/2) {
  .wk-attract__in { padding-top: clamp(18px, 24cqw, 80px); }
  .wk-attract__art svg { width: min(100%, 80cqw); }
}
/* Landscape: chip top-left, name bottom-left, the drawing in the right column, below the crease (the fold is
   40 % of the height there), so a folded corner lands on empty screen. */
@container wkscr (orientation: landscape) {
  .wk-attract__in {
    grid-template-columns: minmax(0, 1fr) 40cqw;
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "chip ." ". art" "name art";
    column-gap: 6cqw; row-gap: 0;
    padding: 8cqh 7cqw max(15cqh, 38px) 6cqw;
  }
  .wk-attract__chip { --chh: clamp(36px, 17cqh, 64px); }
  .wk-attract__art { align-self: end; height: 54cqh; margin-top: 36cqh; }
  .wk-attract__art svg { width: 100%; }
  .wk-attract__name { align-self: end; font-size: clamp(13px, 11.5cqh, 48px); }
}
@container wkscr (orientation: landscape) and (max-width: 400px) {
  .wk-attract__name { font-size: 10cqh; }
}

/* In-frame label, where footage sheets show "Na tela": a hollow square instead of the lit tally. */
.wk-attract__tag {
  position: absolute; left: 10px; bottom: 10px; z-index: 3; pointer-events: none;
  display: inline-flex; align-items: center; gap: 7px; max-width: calc(100% - 20px);
  font-family: var(--f-mono); font-stretch: 87.5%; font-size: 10.5px; line-height: 1; white-space: nowrap;
  color: rgba(250,239,239,.82); padding: 5px 7px 5px 6px; background: rgba(11,13,16,.62);
}
.wk-attract__tag i { flex: none; width: 6px; height: 6px; box-shadow: inset 0 0 0 1px rgba(250,239,239,.6); }
@container (max-width: 120px) { .wk-attract__tag { left: 6px; bottom: 6px; max-width: calc(100% - 12px); gap: 5px; padding: 4px 5px; font-size: 9px; } }

/* Paper-fold drawings: paper tones and ink, shared by every motif */
.wk-attract .p { fill: var(--pa); }
.wk-attract .p2 { fill: var(--pa2); }
.wk-attract .p3 { fill: var(--pa3); }
.wk-attract .k { fill: var(--ink-p); }
.wk-attract .kl { fill: none; stroke: var(--ink-p); stroke-width: 1.2; stroke-linecap: square; }
.wk-attract .cr { fill: none; stroke: rgba(26,23,20,.28); stroke-width: .6; }
.wk-attract .ln { fill: none; stroke: rgba(250,239,239,.22); stroke-width: .6; }
.wk-attract .sg { fill: var(--signal); }
.wk-attract .gd { fill: var(--gold); }
.wk-attract .led { fill: #0A0B0E; stroke: rgba(250,239,239,.16); stroke-width: .6; }
.wk-attract .dim { fill: var(--pa); opacity: .16; }
.wk-attract .shadow { fill: #000; opacity: .38; filter: blur(2px); }
.wk-attract [data-a="bar"], .wk-attract [data-a="print"], .wk-attract [data-a="swap"] { transform-box: fill-box; }

/* Live (hover / focus / centred on touch): each drawing runs its small idle loop. Static otherwise. */
.is-live .wk-attract [data-a="scan"] { animation: wk-a-scan 1.8s var(--ease-fold) infinite alternate; }
@keyframes wk-a-scan { from { transform: translateY(0); } to { transform: translateY(56px); } }
.is-live .wk-attract [data-a="facet"] { animation: wk-a-facet 2.4s var(--ease-fold) infinite; animation-delay: calc(var(--k) * 160ms); transform-origin: 60px 62px; transform-box: view-box; }
@keyframes wk-a-facet { 0%, 55%, 100% { transform: scale(1); } 20% { transform: scale(.9); } }
.is-live .wk-attract [data-a="score"] { animation: wk-a-score 2.4s var(--ease-fold) infinite; transform-origin: 60px 62px; transform-box: view-box; }
@keyframes wk-a-score { 0% { transform: scale(.35); } 45%, 100% { transform: scale(1); } }
.is-live .wk-attract [data-a="bar"] { animation: wk-a-bar 2.2s var(--ease-fold) infinite; animation-delay: calc(var(--k) * 140ms); transform-origin: 50% 100%; }
@keyframes wk-a-bar { 0% { transform: scaleY(.2); } 40%, 100% { transform: scaleY(1); } }
.is-live .wk-attract [data-a="print"] { animation: wk-a-print 3s var(--ease-fold) infinite; }
@keyframes wk-a-print { 0% { transform: translateY(-78px); } 45%, 100% { transform: translateY(0); } }
.is-live .wk-attract [data-a="hop"] { animation: wk-a-hop 3.2s steps(1, end) infinite; }
@keyframes wk-a-hop { 0% { transform: translate(0, 0); } 25% { transform: translate(-60px, 24px); } 50% { transform: translate(30px, 24px); } 75% { transform: translate(-30px, 0); } }
.is-live .wk-attract [data-a="swap"] { animation: wk-a-swap 2.6s steps(8, end) infinite; }
@keyframes wk-a-swap { 0%, 10% { clip-path: inset(0 0 100% 0); } 40%, 100% { clip-path: inset(0 0 0 0); } }

/* ================================================================
   Featured case: 8 columns of screen, 4 of facts, centred on each other
   ================================================================ */
.wk-feat {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 32px;
  align-items: center; container: none;
}
.wk-feat__media { grid-column: 1 / span 8; min-width: 0; }
.wk-feat__body { grid-column: 9 / span 4; min-width: 0; }
.wk-feat .wk-stage { --ar: 16 / 9; }
.wk-feat .wk-hit { --fold: clamp(150px, 30cqw, 232px); }
.wk-feat__eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; }
.wk-feat__eyebrow .g-tally { flex: none; }
.wk-feat__title {
  margin: 0; font-family: var(--f-display); font-weight: 620; font-variation-settings: "SHRP" 100; color: var(--text);
  font-size: clamp(2.1rem, 1rem + 2.4vw, 3.25rem); line-height: .96; letter-spacing: -.035em; text-wrap: balance;
}
.wk-feat__lede { margin: 18px 0 0; font-size: 1.0625rem; line-height: 1.5; color: var(--text-2); max-width: 40ch; text-wrap: pretty; }
.wk-feat__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--gutter); margin: 28px 0 0; border-top: 1px solid var(--edge); }
.wk-feat__stats > div { padding: 14px 0 12px; border-bottom: 1px solid var(--edge); display: grid; gap: 4px; align-content: start; }
.wk-feat__stats dd { margin: 0; order: -1; font-family: var(--f-display); font-weight: 620; font-variation-settings: "SHRP" 100; color: var(--text); font-size: clamp(1.9rem, 1rem + 1.5vw, 2.6rem); line-height: 1; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.wk-feat__stats dt { font-family: var(--f-mono); font-stretch: 87.5%; font-size: 11.5px; color: var(--text-3); line-height: 1.3; }
.wk-feat__where { margin: 18px 0 0; }
.wk-feat__cta { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
.wk-feat .wk-note { margin-top: 12px; }
@media (max-width: 1023px) {
  .wk-feat__media, .wk-feat__body { grid-column: 1 / -1; }
  .wk-feat__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .wk-feat { row-gap: 24px; }
  .wk-feat__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wk-feat .wk-hit { --fold: clamp(120px, 40cqw, 160px); }
  .wk-feat__cta .g-btn { width: 100%; }
}

/* ================================================================
   Brand chips (the round-1 look): ink chip for white logos, cream paper chip for colour logos
   ================================================================ */
.wk-chipset { display: grid; row-gap: clamp(24px, 2.6vw, 36px); }
.wk-chipgroup { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 16px; container-type: inline-size; }
.wk-chipgroup__head { grid-column: 1 / span 3; padding-top: 4px; border-top: 1px solid var(--edge); }
.wk-chipgroup__head h3, .wk-chipgroup__head .wk-chipgroup__h { margin: 14px 0 0; font-family: var(--f-label); font-stretch: 150%; font-weight: 500; font-size: 11px; letter-spacing: .32em; text-transform: uppercase; color: var(--text-2); }
.wk-chipgroup__head p { margin: 8px 0 0; font-family: var(--f-mono); font-stretch: 87.5%; font-size: 12px; color: var(--text-3); }
/* five chips to a row on desktop and tablet, three on phones; renderBrandChips picks spans that close full rows */
.wk-chips { grid-column: 4 / span 9; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; list-style: none; margin: 0; padding: 0; }

.wk-chip { position: relative; display: block; aspect-ratio: 16 / 10; container-type: size; }
.wk-chip--d1 { grid-column: span 1; }
.wk-chip--d2 { grid-column: span 2; aspect-ratio: auto; }
.wk-chip--d3 { grid-column: span 3; aspect-ratio: auto; }
.wk-chip--fixed { width: 208px; height: 112px; aspect-ratio: auto; flex: none; }
.wk-chip__hit {
  --fold: clamp(60px, 80cqh, 104px);
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-align: left;
  perspective: 700px; perspective-origin: 100% 0;
  -webkit-tap-highlight-color: transparent;
}
span.wk-chip__hit { cursor: default; }
.wk-chip__hit:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.wk-chip__face {
  --ch: var(--ch-chip);
  position: absolute; inset: 0; display: grid; place-items: center;
  background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--edge);
  clip-path: polygon(0 0, calc(100% - var(--ch)) 0, 100% var(--ch), 100% 100%, 0 100%);
  transition: clip-path var(--d-corner) var(--ease-out), box-shadow var(--d-ui) var(--ease-out);
}
.wk-chip__face::after { content: ""; position: absolute; top: 0; right: 0; width: var(--ch); height: var(--ch); background: linear-gradient(to bottom left, transparent calc(50% - .6px), rgba(250,239,239,.3) 50%, transparent calc(50% + .6px)); transition: opacity var(--d-corner) var(--ease-out); }
.wk-chip--paper .wk-chip__face { background: var(--paper); box-shadow: none; }
.wk-chip--paper .wk-chip__face::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--grain-url); background-size: 200px; opacity: .14; mix-blend-mode: multiply; }
.wk-chip--paper .wk-chip__face::after { background: linear-gradient(to bottom left, transparent calc(50% - .6px), rgba(26,23,20,.22) 50%, transparent calc(50% + .6px)); }
.wk-chip__face img { position: relative; z-index: 1; height: calc(var(--lh) * 1cqh); width: auto; max-width: 78%; object-fit: contain; }
.wk-chip__word { position: relative; z-index: 1; font-family: var(--f-label); font-stretch: 150%; font-weight: 600; font-size: clamp(9px, 11cqh, 12.5px); letter-spacing: .26em; text-transform: uppercase; color: var(--text); text-align: center; line-height: 1.35; padding: 0 10%; }
.wk-chip__word small { display: block; margin-top: .5em; font-family: var(--f-mono); font-stretch: 87.5%; font-weight: 400; font-size: .82em; letter-spacing: 0; text-transform: none; color: var(--text-3); }
.wk-chip__face--split { display: grid; grid-template-columns: var(--parts); place-items: stretch; }
.wk-chip__part { position: relative; display: grid; place-items: center; min-width: 0; }
.wk-chip__part img { max-width: 80%; }
.wk-chip__part--paper { padding-right: 24cqh; }
.wk-chip__part--paper + .wk-chip__part { padding-left: 24cqh; }
.wk-chip__part--paper::before, .wk-chip__part--paper::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: -50cqh; clip-path: polygon(0 0, 100% 0, calc(100% - 100cqh) 100%, 0 100%); pointer-events: none; }
.wk-chip__part--paper::before { background: var(--paper); }
.wk-chip__part--paper::after { background-image: var(--grain-url); background-size: 200px; opacity: .14; mix-blend-mode: multiply; }
.wk-chip__part--ink + .wk-chip__part--ink::before { content: ""; position: absolute; top: 0; bottom: 0; left: -50cqh; width: 100cqh; pointer-events: none; background: linear-gradient(to top right, transparent calc(50% - .6px), rgba(250,239,239,.18) 50%, transparent calc(50% + .6px)); }
/* a split chip set to fewer cells than it has files shows the first ones (the icon file, a second file on the same ground) */
.wk-chip[data-dparts="2"] .wk-chip__part:nth-child(n+3), .wk-chip[data-dparts="1"] .wk-chip__part:nth-child(n+2) { display: none; }
.wk-chip[data-dparts="2"] .wk-chip__face--split { grid-template-columns: 1fr 1fr; }
.wk-chip[data-dparts="1"] .wk-chip__face--split { grid-template-columns: 1fr; }

/* foot: the count (filter) and the brand's note or pending mark */
.wk-chip__foot {
  position: absolute; z-index: 2; left: 8px; right: 8px; bottom: 7px; pointer-events: none;
  display: flex; align-items: baseline; gap: 8px; min-width: 0;
  font-family: var(--f-mono); font-stretch: 87.5%; font-size: 10.5px; line-height: 1; color: var(--text-3);
}
.wk-chip__count { flex: none; }
.wk-chip__note { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-chip__pend { font-size: 9.5px; line-height: 1.25; white-space: nowrap; }
.wk-ns { display: none; }
@container (max-width: 176px) { .wk-chip__pend .wk-nl { display: none; } .wk-chip__pend .wk-ns { display: inline; } }
.wk-chip--paper .wk-chip__foot { color: var(--paper-ink-2); }
.wk-chip--paper .wk-chip__pend { color: #B3263E; border-color: rgba(179,38,62,.45); }

.wk-chip .wk-fold-text { font-size: max(11px, calc(var(--fold) * .13)); line-height: 1.12; letter-spacing: -.005em; }
.wk-chip--paper .wk-fold-back { background: linear-gradient(to top right, #EFE7D6 0%, var(--paper-2) 34%, #D9CEB6 50%, transparent 50%); }
/* Round 4: a chip never folds. Hover / focus = highlight: the logo goes to full white, the edge and a rule under
   the chip turn coral, and the face lifts 2 px (transform + opacity only). */
.wk-chip .wk-flap { display: none; }
.wk-chip__face img, .wk-chip__word, .wk-chip__all { opacity: .74; transition: opacity var(--d-ui) var(--ease-out), filter var(--d-ui) var(--ease-out); }
.wk-chip__face { transition: clip-path var(--d-corner) var(--ease-out), box-shadow var(--d-ui) var(--ease-out), transform var(--d-ui) var(--ease-out), background-color var(--d-ui) var(--ease-out); }
.wk-chip__hit:is(a, button)::before { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 2px; background: var(--signal); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--d-ui) var(--ease-out); pointer-events: none; }
.wk-chip__hit[aria-pressed="true"] .wk-chip__face img, .wk-chip__hit[aria-pressed="true"] .wk-chip__word, .wk-chip__hit[aria-pressed="true"] .wk-chip__all { opacity: 1; }
.wk-chip__hit:is(a, button):focus-visible .wk-chip__face { transform: translateY(-2px); background-color: #16181D; box-shadow: inset 0 0 0 1px rgba(255,82,119,.7); }
.wk-chip__hit:is(a, button):focus-visible .wk-chip__face img, .wk-chip__hit:is(a, button):focus-visible .wk-chip__word, .wk-chip__hit:is(a, button):focus-visible .wk-chip__all { opacity: 1; }
.wk-chip__hit:is(a, button):focus-visible::before { transform: scaleX(1); }
@media (hover: hover) {
  .wk-chip__hit:is(a, button):hover .wk-chip__face { transform: translateY(-2px); background-color: #16181D; box-shadow: inset 0 0 0 1px rgba(255,82,119,.7); }
  .wk-chip__hit:is(a, button):hover .wk-chip__face img, .wk-chip__hit:is(a, button):hover .wk-chip__word, .wk-chip__hit:is(a, button):hover .wk-chip__all { opacity: 1; filter: drop-shadow(0 0 10px rgba(255,255,255,.22)); }
  .wk-chip__hit:is(a, button):hover::before { transform: scaleX(1); }
  .wk-chip__hit:is(a, button):hover .wk-chip__count { color: var(--text); }
}
@media (prefers-reduced-motion: reduce) { .wk-chip__face, .wk-chip__hit::before { transition: none; } }
html[data-motion="reduce"] .wk-chip__face, html[data-motion="reduce"] .wk-chip__hit::before { transition: none; }
/* selected: a lit edge and a signal rule under the chip (the fold stays a hover answer) */
.wk-chip__hit[aria-pressed="true"] .wk-chip__face { box-shadow: inset 0 0 0 1px rgba(250,239,239,.55); }
.wk-chip--paper .wk-chip__hit[aria-pressed="true"] .wk-chip__face { box-shadow: inset 0 0 0 1px rgba(26,23,20,.35); }
.wk-chip__hit[aria-pressed="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 2px; background: var(--signal); }
.wk-chip__hit[aria-pressed="false"] .wk-chip__count { opacity: .85; }
.wk-chip__hit[aria-pressed="true"] .wk-chip__count { color: var(--text); }
.wk-chip--paper .wk-chip__hit[aria-pressed="true"] .wk-chip__count { color: var(--paper-ink); }
.wk-chip__arrow { display: none; }

/* Filter status and reset, under the chip grid (aligned to the chip columns) */
.wk-chipbar {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter);
}
.wk-chipbar > * { grid-row: 1; }
.wk-chipstatus { grid-column: 4 / span 6; margin: 0; align-self: center; font-family: var(--f-mono); font-stretch: 87.5%; font-size: 12px; line-height: 1.5; color: var(--text-2); }
.wk-chipstatus b { color: var(--text); font-weight: 500; }
.wk-all {
  grid-column: 10 / span 3; justify-self: end; position: relative;
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 16px 0 18px;
  border: 0; background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--edge); color: var(--text); cursor: pointer;
  font-family: var(--f-display); font-weight: 600; font-variation-settings: "SHRP" 100; font-size: 15px; letter-spacing: -.01em;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  transition: box-shadow var(--d-ui) var(--ease-out);
}
.wk-all__n { font-family: var(--f-mono); font-stretch: 87.5%; font-weight: 400; font-size: 11px; color: var(--text-3); }
.wk-all:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; clip-path: none; }
.wk-all[aria-pressed="true"] { box-shadow: inset 0 0 0 1px rgba(250,239,239,.55), inset 0 -2px 0 var(--signal); }
.wk-all[aria-pressed="true"] .wk-all__n { color: var(--text); }
@media (hover: hover) { .wk-all:hover { box-shadow: inset 0 0 0 1px rgba(250,239,239,.4); } .wk-all[aria-pressed="true"]:hover { box-shadow: inset 0 0 0 1px rgba(250,239,239,.55), inset 0 -2px 0 var(--signal); } }

@media (max-width: 1023px) {
  .wk-chipgroup__head, .wk-chips { grid-column: 1 / -1; }
  .wk-chipstatus { grid-column: 1 / span 8; }
  .wk-all { grid-column: 9 / span 4; }
}
@media (max-width: 640px) {
  .wk-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .wk-chip.wk-chip--m1 { grid-column: span 1; aspect-ratio: 16 / 10; height: auto; }
  .wk-chip.wk-chip--m2 { grid-column: span 2; aspect-ratio: auto; height: calc((100cqw - 16px) / 3 * .625); }
  .wk-chip.wk-chip--m3 { grid-column: span 3; aspect-ratio: auto; height: calc((100cqw - 16px) / 3 * .625); }
  .wk-chip[data-dparts] .wk-chip__part:nth-child(n) { display: grid; }
  .wk-chip[data-dparts] .wk-chip__face--split { grid-template-columns: var(--parts); }
  .wk-chip[data-mparts="2"] .wk-chip__part:nth-child(n+3), .wk-chip[data-mparts="1"] .wk-chip__part:nth-child(n+2) { display: none; }
  .wk-chip[data-mparts="2"] .wk-chip__face--split { grid-template-columns: 1fr 1fr; }
  .wk-chip[data-mparts="1"] .wk-chip__face--split { grid-template-columns: 1fr; }
  .wk-chip--fixed { width: 152px; height: 84px; }
  .wk-chip .wk-flap { display: none; }
  .wk-chip__arrow { display: block; position: absolute; z-index: 2; right: 7px; bottom: 5px; font-size: 12px; line-height: 1; color: var(--text-3); }
  .wk-chip--paper .wk-chip__arrow { color: var(--paper-ink-2); }
  .wk-chip__foot { right: 22px; }
  .wk-chip__foot .wk-chip__pend, .wk-chip__foot .wk-chip__note { display: none; }   /* too small here: kept in the chip's name and the group head */
  .wk-chipbar { row-gap: 12px; }
  .wk-chipbar > * { grid-row: auto; }
  .wk-chipstatus, .wk-all { grid-column: 1 / -1; }
  .wk-all { justify-self: stretch; justify-content: space-between; }
}

/* ================================================================
   Round 3 · one mixed brand grid (no family groups), uniform ink chips, "Todas" first
   ================================================================ */
.wk-chips--flat { grid-column: auto; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; container-type: inline-size; }
.wk-chips--flat .wk-chip { grid-column: auto; aspect-ratio: 16 / 10; height: auto; }
.wk-chips--flat .wk-chip__face img { max-width: 70%; }
.wk-chip__all { position: relative; z-index: 1; font-family: var(--f-display); font-weight: 600; font-variation-settings: "SHRP" 100; font-size: clamp(14px, 18cqh, 18px); letter-spacing: -.01em; color: var(--text); }
.wk-chip--all .wk-chip__face::after { opacity: .6; }
@media (max-width: 1023px) { .wk-chips--flat { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .wk-chips--flat { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .wk-chips--flat .wk-chip.wk-chip--m1 { aspect-ratio: 4 / 3; }
  .wk-chips--flat .wk-chip__face img { max-width: 76%; }
  .wk-chips--flat .wk-chip__foot { left: 6px; bottom: 5px; font-size: 9.5px; }
  .wk-chips--flat .wk-chip__arrow { display: none; }
  /* text-only chips (Liga X Awards): readable on phones, on two lines if needed */
  .wk-chip__word { font-size: 11px; font-stretch: 112.5%; letter-spacing: .04em; padding: 0 5%; line-height: 1.25; }
}

/* Attract screen (no footage): a designed screen from modules/screen-art.js fills the stage */
.wk-face .wk-sa { position: absolute; inset: 0; overflow: hidden; background: #060A16; }
.wk-face .wk-sa > canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }

/* Drawn attract screens: the scene stops above the ratio badge's strip, so the badge never sits on the scene's own
   bottom content (e.g. foto-ia's download QR) */
.wk-face:has(> .wk-sa) { background: #060A16; }
.wk-face > .wk-sa { bottom: 32px; }
/* Banco BV's on-dark file is grey; knock it out to white until a pure-white logo is supplied */
.wk-chip img[src*="banco-bv-on-dark"], .wk-attract__chip img[src*="banco-bv-on-dark"] { filter: brightness(0) invert(1) drop-shadow(0 0 0 #fff) drop-shadow(0 0 0 #fff) drop-shadow(0 0 0 #fff); }   /* the file is partly translucent: stacked zero-offset shadows lift its alpha */

/* ================================================================
   Round 4: small corner fold (≈ 40 px) on every sheet the renderers draw (.wk-sm), so the footage stays in view.
   The flap is a plain cream corner; the fact it used to carry is a caption line under the title (always shown),
   whose little folded-corner mark turns coral while the sheet is folded. Pages that draw their own .wk-sheet
   markup can opt in with the same class.
   ================================================================ */
.wk-sheet.wk-sm .wk-hit, .wk-sheet.wk-sm[data-media="none"] .wk-hit { --fold: 40px; }
.wk-feat.wk-sm .wk-hit { --fold: 48px; }
.wk-sm .wk-fold-text { display: none; }
.wk-sm .wk-flap { filter: drop-shadow(-2px 3px 4px rgba(0,0,0,.45)); }
.wk-sm .wk-fold-back::after { background: linear-gradient(to top right, transparent calc(50% - 1px), rgba(255,255,255,.9) calc(50% - .4px), transparent 50%); }
.wk-sheet.wk-sm:not(.wk-feat) .wk-fact { display: block; margin-top: 6px; font-family: var(--f-mono); font-stretch: 87.5%; font-size: 12px; line-height: 1.45; color: var(--text); }
.wk-sm .wk-fact::before { transition: background var(--d-ui) var(--ease-out); }
.wk-sm.is-folded .wk-fact::before, .wk-sm:focus-within .wk-fact::before { background: linear-gradient(to top right, var(--signal) 0 50%, transparent 50%); }
@media (hover: hover) { .wk-sm:hover .wk-fact::before { background: linear-gradient(to top right, var(--signal) 0 50%, transparent 50%); } }
.wk-sheet.wk-sm.is-solo .wk-fact { font-family: var(--f-display); font-stretch: normal; font-size: 1rem; margin-top: 16px; }