/* Works — Visual Manifestations.
   Warm branch (driftwood, black sand), copper metal. Built from
   sections/works/BUILD.md + design-reference.png. */

.wk-page { --surface: #0c0a09; background: var(--surface); --nav-menu-ground: rgba(20, 18, 16, .97); }

/* Links only fit beside the plate on wide screens; below 1180px they move into
   the dropdown menu (nav-menu.css). */
/* The nav spark carried margin-right:auto and so was the bar's spacer. With the
   ornament removed (2026-10-09) the brand takes that job, which keeps the links
   and the plate against the right edge. */
.nav .brand { margin-right: auto; }
/* warm branch: driftwood on black sand, so the nav's always-on ground is warm */
.wk-page .nav { --nav-ground: 20, 18, 16; }
.nav .nav-links + .nav-end { margin-left: 48px; }
@media (max-width: 1180px) { .nav .nav-links + .nav-end { margin-left: auto; } }

/* ---------- Hero ---------- */
.wk-hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: max(100vh, 820px);
  background: var(--surface) url("assets/works/scene.webp") no-repeat center bottom / cover;
}
.wk-hero::before { /* wash: keeps the headline legible over the sky, top-left heavier */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(12,10,9,.82) 0%, rgba(12,10,9,.45) 38%, rgba(12,10,9,0) 62%),
    linear-gradient(180deg, rgba(12,10,9,.55) 0%, rgba(12,10,9,0) 30%, rgba(12,10,9,0) 82%, rgba(12,10,9,.6) 100%);
}
.wk-hero .deco-frame { z-index: 1; }
.wk-hero .deco-frame i { background: var(--surface); }

.wk-sky {
  position: absolute; top: 0; right: 1.2vw; z-index: 0;
  width: min(52vw, 900px); height: auto; color: var(--accent); pointer-events: none;
}

/* ---------- Copy ---------- */
.wk-copy {
  position: relative; z-index: 3;
  padding: calc(1.8vh + 78px + clamp(16px, 3vh, 44px)) 0 0 clamp(28px, 4.3vw, 86px);
  max-width: 52vw;
}
.wk-copy { transition: opacity .6s var(--ease); }
/* an opened card owns the screen, so the headline steps back behind it */
.wk-hero:has(.wk-card[data-open="true"]) .wk-copy { opacity: .18; }
.wk-copy .deco-eyebrow { margin-bottom: clamp(8px, 1.2vh, 18px); }
.wk-title {
  font: 900 clamp(46px, 5.6vw, 112px)/.9 var(--display);
  letter-spacing: -.045em; word-spacing: .05em; color: var(--ink);
}
.wk-title span { display: block; }
.wk-lede {
  margin-top: clamp(10px, 1.8vh, 24px); max-width: 18em;
  font: 400 clamp(19px, 1.8vw, 36px)/1.24 var(--serif); color: var(--ink);
}
.wk-sub {
  margin-top: clamp(8px, 1.4vh, 18px); max-width: 22em;
  font: 300 clamp(16px, 1.45vw, 28px)/1.5 var(--serif); color: #efe6d8;
}
.wk-pin { /* rule with a centred diamond, as drawn under the copy */
  position: relative; display: block; width: clamp(160px, 14vw, 280px); height: 1px;
  margin-top: clamp(16px, 2.6vh, 34px); background: var(--accent-line);
}
.wk-pin::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -5px 0 0 -5px;
  border: 1px solid var(--accent); background: var(--surface); transform: rotate(45deg);
}

/* ---------- Carousel ---------- */
/* above .wk-copy, so an opened card passes in front of the headline */
.wk-carousel { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.wk-carousel > * { pointer-events: auto; }
.wk-stage {
  /* four cards stand side by side on the driftwood, all of them readable at once */
  /* sized and placed in vh so the whole row always lands inside one screen */
  --w: min(17vw, 24vh, 340px);
  --step: calc(var(--w) * .96);
  position: absolute; left: 50%; bottom: calc(7vh + 100px); width: 0; height: calc(var(--w) * 1.41);
  perspective: 2000px;
}

.wk-card {
  /* --cx centres a card on the stage's midline. That is only wanted while the
     cards are absolutely placed on the driftwood; the phone grid positions them
     itself, so it sets --cx to 0 rather than having every card pulled half its
     own width to the left. (Named --cx, not --c: the faces use --c for their
     chamfer, and a card-level --c would be inherited straight into it.) */
  --cx: -50%;
  --x: 0px; --y: 0px; --r: 0deg; --ry: 0deg; --s: 1;
  position: absolute; left: 0; bottom: 0;
  width: var(--w); height: calc(var(--w) * 1.41);
  padding: 0; border: 0; background: none; color: inherit; cursor: pointer;
  font: inherit; text-align: center;
  transform: translateX(var(--cx)) translateX(var(--x)) translateY(var(--y)) rotateZ(var(--r)) rotateY(var(--ry)) scale(var(--s));
  transform-origin: 50% 100%;
  /* The shape swaps portrait -> landscape with no duration, timed to land while
     the card is edge-on (the ease front-loads the turn, so 90 degrees arrives
     around 120ms of the 900ms flip). Nothing is on screen to squash. */
  transition: transform .9s var(--ease), opacity .6s var(--ease), filter .6s var(--ease),
              width 0s linear .12s, height 0s linear .12s;
  /* a literal physical object, so it may cast a shadow (DESIGN.md, Drawn Frame Rule) */
  filter: drop-shadow(0 26px 30px rgba(0,0,0,.55));
}
/* the resting row: a shallow fan, outer cards turned slightly toward the viewer */
.wk-card:nth-child(1) { --x: calc(var(--step) * -1.5); --y: 1.5%; --r: -3deg; --ry:  7deg; z-index: 1; }
.wk-card:nth-child(2) { --x: calc(var(--step) * -0.5); --y: 0;    --r: -1deg; --ry:  2deg; z-index: 2; }
.wk-card:nth-child(3) { --x: calc(var(--step) *  0.5); --y: 0;    --r:  1deg; --ry: -2deg; z-index: 2; }
.wk-card:nth-child(4) { --x: calc(var(--step) *  1.5); --y: 1.5%; --r:  3deg; --ry: -7deg; z-index: 1; }

/* Hover: the card lifts and takes a Tiffany glow.
   NOTE — DESIGN.md carries an exception dated 2026-10-06 saying this deck wears
   no action colour, because a Tiffany mark on a painted face would read as a
   sticker on a painting. The glow is kept to the narrowest reading of that: it
   is cast behind the card's silhouette and never touches the artwork. Layered
   drop-shadows are used rather than box-shadow so the light follows the
   chamfered alpha, tracing the card's real edge instead of a rectangle. */
.wk-card:hover, .wk-card:has(:focus-visible) {
  --y: -2.5%; z-index: 4;
  filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .55))
          drop-shadow(0 0 9px rgba(134, 209, 205, .5))
          drop-shadow(0 0 28px rgba(134, 209, 205, .26));
}

/* The card is a plain container; this invisible button turns it over. A link
   cannot sit inside a button, so the case-study link needs the card not to be
   one. It lies under the faces, which pass clicks through to it. */
.wk-flip {
  position: absolute; inset: 0; z-index: 0;
  appearance: none; -webkit-appearance: none;
  background: transparent; border: 0; padding: 0; cursor: pointer;
}
.wk-flip:focus-visible { outline: none; }
.wk-card:has(:focus-visible) .wk-face { outline: 2px solid var(--action); outline-offset: 4px; }

/* opened: the card steps out of the row, squares up and turns over — and lands
   on its side, because the work on the back is wider than it is tall once the
   caption sits beside it rather than under it */
.wk-card[data-open="true"] {
  --x: 0px; --y: -14%; --r: 0deg; --ry: 0deg; --s: 2.1;
  width: calc(var(--w) * 1.41); height: var(--w);
  z-index: 6; filter: drop-shadow(0 48px 64px rgba(0,0,0,.75));
}
/* while one is open the rest step back so the work reads on its own */
.wk-stage:has(.wk-card[data-open="true"]) .wk-card:not([data-open="true"]) {
  --s: .9; opacity: .4; filter: drop-shadow(0 18px 22px rgba(0,0,0,.6)) brightness(.5);
}
/* A card that has stepped back is still clickable, so it answers a hover —
   it comes part way up out of the dark and glows, just less than a resting one */
.wk-stage:has(.wk-card[data-open="true"]) .wk-card:not([data-open="true"]):hover,
.wk-stage:has(.wk-card[data-open="true"]) .wk-card:not([data-open="true"]):has(:focus-visible) {
  opacity: .78;
  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .6)) brightness(.78)
          drop-shadow(0 0 9px rgba(134, 209, 205, .45))
          drop-shadow(0 0 26px rgba(134, 209, 205, .22));
}

.wk-inner {
  position: absolute; inset: 0; z-index: 1; display: block;
  pointer-events: none;   /* the faces sit above .wk-flip, so let clicks through */
  transform-style: preserve-3d; transition: transform .9s var(--ease);
}
.wk-card[data-open="true"] .wk-inner { transform: rotateY(180deg); }

/* Chamfered corners: the system allows chamfers, never radius */
.wk-face {
  --c: clamp(8px, .9vw, 16px);
  position: absolute; inset: 0; display: flex; flex-direction: column;
  pointer-events: none;   /* clicks fall through to .wk-flip beneath */
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
  --chamfer: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
  isolation: isolate;
  /* gilt edge of a physical card: the face sits 2px inside it, so the edge follows the chamfers unbroken */
  background: linear-gradient(160deg, #dcb47c 0%, #8f6a3e 45%, #c9a063 75%, #7d5b35 100%);
}
.wk-face::before {
  content: ""; position: absolute; inset: 2px; z-index: -1;
  background: #0f0d0b; clip-path: var(--chamfer);
}

/* ---- front: the card artwork itself, which carries its own painted frame,
       so it runs full bleed inside the gilt edge and takes no inner frame ---- */
.wk-front img {
  position: absolute; left: 2px; top: 2px; width: calc(100% - 4px); height: calc(100% - 4px);
  object-fit: cover; clip-path: var(--chamfer);
}
/* the name is held back so the artwork reads clean, and arrives on hover or focus */
.wk-plate {
  position: absolute; left: 2px; right: 2px; bottom: 2px; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: .5em;
  padding: 22% 6% 7%; clip-path: var(--chamfer);
  background: linear-gradient(180deg, rgba(12,10,9,0) 0%, rgba(12,10,9,.9) 72%);
  opacity: 0; transition: opacity .45s var(--ease);
}
.wk-card:hover .wk-plate, .wk-card:has(:focus-visible) .wk-plate { opacity: 1; }
.wk-name {
  font: 500 calc(var(--w) * .045)/1.25 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
  max-width: 78%; text-wrap: balance;
}
.wk-kind {
  font: 400 calc(var(--w) * .029)/1.25 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--accent);
  max-width: 86%; text-wrap: balance;
}

/* ---- back: the portfolio piece ---- */
.wk-back { transform: rotateY(180deg); }
.wk-back img {
  position: absolute; left: 2px; top: 2px; width: calc(100% - 4px); height: calc(100% - 4px);
  object-fit: cover; clip-path: var(--chamfer);
}
/* ---- the one action on an opened card ----
   The link sits BELOW the card, centred on it, and is a sibling of .wk-inner
   rather than a child of the back face (changed 2026-10-08, on request). Three
   reasons it has to live outside the faces: the faces are clipped to the
   chamfer, so anything past the card's edge would be cut off; .wk-inner is
   turned 180deg with backface-visibility hidden; and the boards run from
   near-black to plain white, which made a label sitting ON the art a coin toss
   for legibility. Off the card it always meets the hero's dark ground.
   It is still inside .wk-card, so it inherits the card's scale (--s) and reads
   at the same size it always did.
   (A .wk-cap plate stood inside the foot of the back face until this date, and
   before that a layout with 3:4 art beside the caption. Both are in git.) */
.wk-study {
  position: absolute; left: 50%; top: 100%; z-index: 2;
  margin-top: calc(var(--w) * .055);
  display: inline-flex; align-items: center; gap: .85em;
  padding: .7em 1.15em;
  border: 1px solid var(--action);
  background: rgba(12, 10, 9, .72);
  font: 500 calc(var(--w) * .030)/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; white-space: nowrap;
  pointer-events: none; opacity: 0;
  transform: translate(-50%, 7px);
  transition: opacity .4s var(--ease), transform .5s var(--ease), background .35s var(--ease);
}
.wk-study svg { width: calc(var(--w) * .055); color: var(--action); }
.wk-study:hover, .wk-study:focus-visible {
  background: linear-gradient(rgba(134, 209, 205, .16), rgba(134, 209, 205, .16)),
              rgba(12, 10, 9, .78);
}
.wk-study:focus-visible { outline: 2px solid var(--action); outline-offset: 3px; }
.wk-card[data-open="true"] .wk-study {
  pointer-events: auto; opacity: 1; transform: translate(-50%, 0); transition-delay: .5s;
}

/* Three of the four pieces have no case study written yet. The note that says so
   is not actionable, and by the two-metals rule only actionable things carry
   Tiffany, so it takes the warm structural metal and loses the arrow. */
.wk-study-soon { border-color: rgba(201, 144, 95, .45); cursor: default; }
.wk-card[data-open="true"] .wk-study-soon { pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .wk-study { transition-duration: .01s; }
}

/* ---------- Tablet: the row tightens but all four stay on the wood ---------- */
@media (max-width: 1100px) {
  .wk-stage { --w: min(21vw, 26vh, 300px); --step: calc(var(--w) * .88); }
}

/* ---------- Phone: copy on top, the four cards in a 2x2 hand below ---------- */
@media (max-width: 900px) {
  .wk-hero { min-height: 0; background-size: 220% auto; background-position: 62% bottom; }
  .wk-hero::before { background: linear-gradient(180deg, rgba(12,10,9,.9) 0%, rgba(12,10,9,.55) 45%, rgba(12,10,9,0) 70%, rgba(12,10,9,.5) 100%); }
  .wk-copy { max-width: none; padding-right: clamp(28px, 6vw, 60px); }
  .wk-sky { width: 80vw; opacity: .6; }

  .wk-carousel {
    position: relative; inset: auto; margin: 28px 0 0;
    /* the foot leaves room for the case-study link, which now stands below the
       card and so reaches past the bottom row of the hand */
    padding: 0 clamp(20px, 5vw, 44px) clamp(60px, 9vh, 88px);
  }
  .wk-stage {
    --w: min(40vw, 230px); --step: 0px;
    --gap: clamp(16px, 4vw, 30px);
    position: static; width: auto; height: auto;
    display: grid; grid-template-columns: repeat(2, var(--w));
    gap: var(--gap); justify-content: center;
  }
  .wk-card {
    position: relative; left: auto; bottom: auto; width: var(--w);
    --cx: 0px; --x: 0px; --y: 0px; --r: 0deg; --ry: 0deg;
  }
  /* the grid places each card, so nothing is pulled off its own cell */
  .wk-card:nth-child(n) { --cx: 0px; --x: 0px; --y: 0px; --r: 0deg; --ry: 0deg; }
  /* An opened card turns on its side here too, so the landscape board fills it
     edge to edge (2026-10-08). It is wider than its own grid cell, so rather
     than sit half off the hand it steps out and centres itself on the whole
     2x2 block, laid across the dimmed cards behind it. --cx does the centring:
     a card in the left column travels right, one in the right column left, by
     the distance from its cell's centre to the block's centre, less half the
     width it gained. It never grows taller than a closed card, so the row it
     stands in cannot push into the copy above. */
  .wk-card[data-open="true"] {
    --s: 1.22; --y: 0px;
    width: calc(var(--w) * 1.41); height: var(--w);
    align-self: center;
  }
  .wk-card:nth-child(odd)[data-open="true"]  { --cx: calc(var(--w) *  .295 + var(--gap) / 2); }
  .wk-card:nth-child(even)[data-open="true"] { --cx: calc(var(--w) * -.705 - var(--gap) / 2); }
  .wk-stage:has(.wk-card[data-open="true"]) .wk-card:not([data-open="true"]) { --s: 1; opacity: .5; }

  /* Type on these cards is sized off --w, which is roughly half its desktop
     value on a phone — that puts the case-study link near 5px. These give it a
     readable floor; the scale above is already counted in. */
  .wk-study { font-size: max(calc(var(--w) * .030), 8px); }
  .wk-study svg { width: max(calc(var(--w) * .055), 15px); }
}

@media (prefers-reduced-motion: reduce) {
  .wk-card, .wk-inner { transition-duration: .01s; }
  .wk-card { transition-delay: 0s; }   /* the shape swaps with the turn, not after it */
}

/* ---------- Design portfolio card deck ---------- */
.wk-deck {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(1220px, 154vw, 2220px);
  background:
    radial-gradient(circle at 72% 12%, rgba(201, 144, 95, .2) 0 2px, transparent 3px 100px),
    radial-gradient(circle at 32% 68%, rgba(201, 144, 95, .16) 0 1px, transparent 2px 80px),
    linear-gradient(180deg, rgba(12, 10, 9, .34), rgba(12, 10, 9, .1) 32%, rgba(12, 10, 9, .46)),
    url("assets/works/scene.webp") center bottom / cover no-repeat,
    #070605;
}
.wk-deck::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse at 45% 0%, rgba(255, 232, 185, .08), transparent 34%),
    radial-gradient(ellipse at 78% 34%, rgba(201, 144, 95, .12), transparent 22%),
    linear-gradient(90deg, rgba(0, 0, 0, .42), transparent 16%, transparent 84%, rgba(0, 0, 0, .5));
  mix-blend-mode: screen;
}
.wk-deck::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(circle at 18% 18%, rgba(232, 176, 96, .42) 0 1px, transparent 1.6px),
    radial-gradient(circle at 82% 44%, rgba(232, 176, 96, .32) 0 1px, transparent 1.8px),
    radial-gradient(circle at 40% 86%, rgba(255, 240, 205, .22) 0 1px, transparent 1.6px);
  background-size: 72px 84px, 118px 96px, 164px 140px;
  opacity: .42;
}
.wk-deck .deco-frame { z-index: 3; }
.wk-deck .deco-frame i { background: #070605; }
.deck-field {
  position: absolute; z-index: 2; inset: clamp(105px, 8vw, 150px) 0 clamp(64px, 5vw, 96px);
  width: min(100%, 1500px); margin: 0 auto;
}
.deck-card {
  --w: clamp(180px, 22vw, 354px);
  --tilt: 0deg;
  --lift: 0px;
  position: absolute; width: var(--w); aspect-ratio: 3 / 4.25;
  margin: 0; padding: calc(var(--w) * .058) calc(var(--w) * .052) calc(var(--w) * .17);
  color: #211a13;
  background:
    linear-gradient(135deg, rgba(255,255,255,.28), rgba(255,255,255,0) 28%),
    linear-gradient(155deg, #f0dcc5 0%, #b98c58 43%, #f1d9b7 64%, #7d5b34 100%);
  clip-path: polygon(8% 0, 92% 0, 100% 6%, 100% 94%, 92% 100%, 8% 100%, 0 94%, 0 6%);
  filter: drop-shadow(0 34px 28px rgba(0, 0, 0, .56)) drop-shadow(0 8px 7px rgba(0, 0, 0, .34));
  transform: translateY(var(--lift)) rotate(var(--tilt));
  transition: transform .45s var(--ease), filter .45s var(--ease);
}
.deck-card::before {
  content: ""; position: absolute; inset: calc(var(--w) * .018);
  background:
    linear-gradient(rgba(40, 25, 13, .1), rgba(40, 25, 13, .06)),
    #ead8c2;
  clip-path: inherit; z-index: -1;
}
.deck-card::after {
  content: ""; position: absolute;
  left: calc(var(--w) * .065); right: calc(var(--w) * .065);
  top: calc(var(--w) * .115); bottom: calc(var(--w) * .25);
  border: 1px solid rgba(54, 34, 18, .5);
  box-shadow:
    0 0 0 1px rgba(218, 158, 83, .46),
    inset 0 0 0 5px rgba(238, 211, 172, .18);
  pointer-events: none;
}
.deck-card img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  border: 1px solid rgba(40, 28, 18, .68);
  filter: saturate(.88) contrast(1.06);
}
.deck-num {
  position: absolute; top: calc(var(--w) * .043); left: calc(var(--w) * .07); z-index: 1;
  font: 500 calc(var(--w) * .052)/1 var(--mono); letter-spacing: .1em;
  color: #2c2118;
}
.deck-card figcaption {
  position: absolute; left: 12%; right: 12%; bottom: calc(var(--w) * .055);
  font: 500 calc(var(--w) * .043)/1.12 var(--mono);
  letter-spacing: .16em; text-transform: uppercase; text-align: center;
  color: #2d221a;
}
.deck-card:hover {
  --lift: -10px;
  z-index: 8;
  filter: drop-shadow(0 38px 34px rgba(0, 0, 0, .62))
          drop-shadow(0 0 18px rgba(134, 209, 205, .18));
}

.deck-card-01 { left: 6%; top: 4%; --tilt: -9deg; z-index: 2; }
.deck-card-02 { left: 34%; top: 1%; --tilt: 7deg; z-index: 4; --w: clamp(194px, 24vw, 384px); }
.deck-card-03 { right: 7%; top: 6%; --tilt: -8deg; z-index: 2; }
.deck-card-04 { left: -2%; top: 30%; --tilt: -8deg; z-index: 3; --w: clamp(172px, 20vw, 330px); }
.deck-card-05 { left: 25%; top: 30%; --tilt: 9deg; z-index: 5; }
.deck-card-06 { left: 51%; top: 31%; --tilt: -10deg; z-index: 4; }
.deck-card-07 { right: -1%; top: 35%; --tilt: 8deg; z-index: 3; }
.deck-card-08 { left: 5%; top: 59%; --tilt: -7deg; z-index: 3; }
.deck-card-09 { left: 37%; top: 58%; --tilt: 4deg; z-index: 4; --w: clamp(176px, 21vw, 340px); }
.deck-card-10 { right: 7%; top: 57%; --tilt: 8deg; z-index: 5; }
.deck-card-11 { left: 22%; bottom: -2%; --tilt: -9deg; z-index: 2; --w: clamp(174px, 20vw, 330px); }
.deck-card-12 { right: 27%; bottom: 1%; --tilt: 8deg; z-index: 3; --w: clamp(180px, 21vw, 342px); }

.deck-meta {
  position: absolute; z-index: 4; display: flex; flex-direction: column; gap: 14px;
  font: 500 clamp(13px, 1.2vw, 18px)/1.5 var(--mono); letter-spacing: .28em;
  text-transform: uppercase; color: #f1e5d5; text-shadow: 0 2px 10px rgba(0,0,0,.75);
  pointer-events: none;
}
.deck-meta i {
  display: block; width: 18px; height: 18px; border: 1px solid var(--accent);
  transform: rotate(45deg); margin: 8px 0; position: relative;
}
.deck-meta i::before {
  content: ""; position: absolute; top: 50%; left: 24px; width: 72px; height: 1px;
  background: var(--accent-line); transform: rotate(-45deg); transform-origin: left center;
}
.deck-meta-left { left: clamp(38px, 4vw, 72px); bottom: clamp(150px, 10vw, 220px); }
.deck-meta-right { right: clamp(42px, 5vw, 86px); bottom: clamp(88px, 7vw, 132px); text-align: right; align-items: flex-end; }
.deck-meta-right i::before { left: auto; right: 24px; transform-origin: right center; transform: rotate(45deg); }

@media (max-width: 980px) {
  .wk-deck { min-height: 0; padding: 96px clamp(20px, 5vw, 44px) 86px; }
  .deck-field {
    position: relative; inset: auto; width: min(100%, 760px);
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(16px, 4vw, 30px); padding-top: 20px;
  }
  .deck-card {
    --w: auto;
    position: relative; left: auto; right: auto; top: auto; bottom: auto;
    width: 100%; padding: clamp(10px, 2vw, 18px) clamp(9px, 1.8vw, 16px) clamp(38px, 6vw, 58px);
    transform: rotate(var(--tilt));
  }
  .deck-card::before { inset: 4px; }
  .deck-card::after { left: clamp(14px, 3vw, 28px); right: clamp(14px, 3vw, 28px); top: clamp(24px, 4vw, 42px); bottom: clamp(56px, 8vw, 84px); }
  .deck-num { top: clamp(10px, 2vw, 18px); left: clamp(14px, 2.8vw, 26px); font-size: clamp(11px, 2.4vw, 18px); }
  .deck-card figcaption { bottom: clamp(12px, 2vw, 20px); font-size: clamp(9px, 1.8vw, 15px); }
  .deck-card:nth-child(odd) { --tilt: -2.5deg; }
  .deck-card:nth-child(even) { --tilt: 2.5deg; margin-top: 10%; }
  .deck-card-11, .deck-card-12 { margin-top: -2%; }
  .deck-meta { display: none; }
}

@media (max-width: 560px) {
  .wk-deck { padding-top: 84px; }
  .deck-field { gap: 18px 14px; }
  .deck-card {
    padding: 9px 8px 32px;
    filter: drop-shadow(0 16px 15px rgba(0, 0, 0, .56));
  }
  .deck-card::before { inset: 3px; }
  .deck-card::after { left: 10px; right: 10px; top: 18px; bottom: 44px; }
  .deck-num { top: 8px; left: 12px; font-size: 10px; }
  .deck-card figcaption { left: 9%; right: 9%; bottom: 9px; font-size: 8px; letter-spacing: .1em; }
}

/* ---------- Shared shell responsive ----------
   Copied from blueprint-page.css: these nav and footer rules live per page, not in
   blueprint-shared.css. Without them the nav plate sits off-screen on a phone.
   Nav ground is warm here to match the branch. */
/* the frame's edge pins sit 7px outside the rule; keep the rule at least 8px in
   so they never cross the screen edge on a phone */
.wk-page .deco-frame { inset: max(1.2vw, 8px); }

@media (max-width: 1024px) {
  .wk-page .nav { padding-left: 32px; background: rgba(20, 18, 16, .82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
  .wk-page .foot-grid { grid-template-columns: 1fr 1fr; gap: 5vh 6vw; }
  .wk-page .foot-col + .foot-col { border-left: 0; padding-left: 0; }
  .wk-page .foot-col:first-child { grid-column: 1 / -1; }
  .wk-page .foot-sub { max-width: none; }
  .wk-page .foot-base { flex-wrap: wrap; justify-content: center; text-align: center; row-gap: 14px; }
  .wk-page .foot-base i { min-width: 40px; }
}
@media (max-width: 640px) {
  .wk-page .nav { height: 64px; padding: 0 12px 0 16px; }
  .wk-page .nav-end::before { display: none; }
  .wk-page .nav .bp-cta { padding: 10px 16px; font-size: 12px; letter-spacing: .08em; gap: 0; white-space: nowrap; }
  .wk-page .nav .bp-cta svg { display: none; }
  .wk-page .nav .bp-cta::before, .wk-page .nav .bp-cta::after,
  .wk-page .nav .bp-cta i::before, .wk-page .nav .bp-cta i::after { width: 7px; height: 7px; left: auto; right: auto; }
  .wk-page .nav .bp-cta::before { left: 4px; top: 4px; }
  .wk-page .nav .bp-cta::after { right: 4px; bottom: 4px; }
  .wk-page .nav .bp-cta i::before { right: 4px; top: 4px; }
  .wk-page .nav .bp-cta i::after { left: 4px; bottom: 4px; }
  .wk-page .brand img { height: 26px; margin-left: calc(26px * -0.15); }
  .wk-page .foot-grid { grid-template-columns: 1fr; gap: 4.5vh; }
  .wk-page .foot-form { flex-direction: column; }
  .wk-page .foot-join { justify-content: center; }
  .wk-page .foot-base i { display: none; }
  .wk-page .foot-base { flex-direction: column; gap: 16px; }
}