/* Our work (our-work.php): mat opener with a rolling count, sticky chip bar, a filtered slideshow with a thumbnail strip,
   "Names you'll know" ledger with a photo pane, CTA. Tokens and shared components live in site.css. */

/* ---------- Opener: compact band on the cutting mat ---------- */
.wk-open { position: relative; overflow: clip; isolation: isolate; padding-block: clamp(20px, 3.4vh, 44px) clamp(22px, 3.6vh, 44px); }
.wk-open::after { content: ''; position: absolute; z-index: -1; right: -6vw; top: -30%; width: 40vw; height: 160%; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.06) 50%, rgba(255,255,255,0)); transform: skewX(-14deg); }
.wk-open__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px clamp(32px, 5vw, 96px); align-items: end; }
.wk-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-weight: 600; font-size: .95rem; color: rgba(255,255,255,.82); }
.wk-crumb a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; color: var(--yellow); text-decoration: none; }
.wk-crumb a:hover { text-decoration: underline; }
.wk-crumb [aria-current] { color: var(--white); }
.wk-open__title { font-size: clamp(2.5rem, min(5.3vw, 9vh), 5.3rem); line-height: .98; margin: 2px 0 clamp(14px, 2.2vh, 22px); display: flow-root; }
.wk-open__lede { margin: 0; color: rgba(255,255,255,.9); }

/* The tally: how many photos are showing, set like a die-cut number with the logo's extrusion */
.wk-tally { display: grid; justify-items: end; gap: 4px; padding-bottom: 4px; }
.wk-tally__num { font-family: var(--f-display); font-style: italic; font-weight: 850; font-stretch: 72%; font-size: clamp(5rem, min(11vw, 19vh), 10.5rem); line-height: 1.1; height: 1.1em; color: var(--yellow); font-variant-numeric: tabular-nums; letter-spacing: .01em;
  text-shadow: .014em .014em 0 var(--green), .028em .028em 0 var(--green), .042em .042em 0 var(--green), .056em .056em 0 var(--ink); padding-right: .1em; }
.wk-tally__label { display: grid; justify-items: end; text-align: right; font-weight: 600; color: rgba(255,255,255,.85); line-height: 1.3; }
.wk-tally__label b { font-family: var(--f-display); font-style: italic; font-weight: 850; font-stretch: 78%; text-transform: uppercase; font-size: 1.25rem; color: var(--white); letter-spacing: .02em; }

/* Plotter head: a crosshair that moves between grid points on the mat and follows the pointer */
.wk-open__head { position: absolute; z-index: -1; left: 0; top: 0; width: 44px; height: 44px; margin: -22px 0 0 -22px; display: none; pointer-events: none; }
.wk-open__head::before, .wk-open__head::after { content: ''; position: absolute; background: var(--yellow); }
.wk-open__head::before { left: 0; right: 0; top: 21px; height: 2px; }
.wk-open__head::after { top: 0; bottom: 0; left: 21px; width: 2px; }
.wk-open__head i { position: absolute; left: 15px; top: 15px; width: 14px; height: 14px; border: 2px solid var(--yellow); background: var(--green-mat); transform: rotate(45deg); }
.wk-open.has-head .wk-open__head { display: block; }

/* The cut lines the head leaves behind; they fade like scored lines on a mat */
.wk-open__trail { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.wk-open__trail path { fill: none; stroke: var(--yellow); stroke-width: 2; opacity: .75; }

/* Odometer digits (count and tally): fixed boxes, so nothing moves when fonts or scripts arrive; a digit rolls
   through a clipped window and only the digit showing is in the box at rest */
.odo { display: inline-flex; vertical-align: top; }
.odo__d { position: relative; display: inline-block; width: .56em; height: 1.1em; overflow: clip; }
.odo__c { position: absolute; left: 0; right: 0; top: 0; height: 1.1em; line-height: 1.1em; text-align: center; }

/* ---------- Chip bar: the foot of the band, sticky under the header while you look through the grid ---------- */
.wk { position: relative; background-color: var(--white); padding-bottom: clamp(24px, 3.4vh, 40px); scroll-margin-top: 110px; }
.wk-bar { position: sticky; top: 82px; z-index: 20; color: var(--white); background-color: var(--ink); background-image: linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 24px 24px; box-shadow: 0 3px 0 var(--yellow); }
.wk-bar__in { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; padding-block: 14px 16px; }
form.wk-chips[hidden] { display: none; }
.wk-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; min-width: 0; }
.chip { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 10px; border: 2px solid rgba(255,255,255,.45); border-radius: var(--r); background: transparent; color: var(--white); font-weight: 700; font-size: .94rem; line-height: 1.2; cursor: pointer; white-space: nowrap; isolation: isolate;
  transition: border-color .25s, color .3s, box-shadow .3s var(--ease), transform .2s var(--ease); }
.chip::before { content: ''; position: absolute; inset: -2px; z-index: -1; background: var(--yellow); border-radius: var(--r); clip-path: inset(0 100% 0 0); transition: clip-path .5s var(--ease); }
.chip > span { transition: opacity .4s; }
.chip__n { font-size: .875rem; font-weight: 700; padding: 1px 5px; border-radius: var(--r); background: rgba(255,255,255,.14); font-variant-numeric: tabular-nums; transition: background-color .3s; }
.chip:hover { border-color: var(--yellow); }
.chip.is-on { color: var(--ink); border-color: var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.chip.is-on::before { clip-path: inset(0 0 0 0); }
.chip.is-on .chip__n { background: rgba(13,20,16,.14); }
.chip:active { transform: translate(2px, 2px); }
.chip__plot { position: absolute; inset: -2px; width: calc(100% + 4px); height: calc(100% + 4px); overflow: visible; pointer-events: none; }
.chip__plot rect { fill: none; stroke: var(--yellow); stroke-width: 2; }
.wk-count { flex: none; display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; }
.wk-count__n { font-family: var(--f-display); font-style: italic; font-weight: 850; font-stretch: 76%; font-size: 2rem; line-height: 1.1; color: var(--yellow); font-variant-numeric: tabular-nums; }
.wk-count__t { color: rgba(255,255,255,.88); }

/* ---------- The slideshow: one photo at a time on the cutting mat, fitted whole inside a stage sized from the
   screen (screen less the sticky header, the chip bar and the strip), so every photo shows complete and as large as
   the screen allows. Without JS the slides scroll sideways and the thumbnails link to them ---------- */
.wk__wrap { padding-top: clamp(16px, 2.4vh, 26px); }
/* --bar-h is the chip bar's height (the script measures it; one or two rows of chips) */
.wk { --bar-h: 128px; }
.wk-stage { --stage-h: clamp(360px, calc(100svh - 82px - var(--bar-h) - 136px), 1000px); position: relative; height: var(--stage-h); border-radius: var(--r); overflow: clip; box-shadow: 0 0 0 2px var(--ink); }
.wk-track { display: flex; height: 100%; margin: 0; padding: 0; list-style: none; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
.wk-track::-webkit-scrollbar { display: none; }
.wk-track:focus-visible { outline: 3px solid var(--yellow); outline-offset: -3px; }
.wk-slide { flex: 0 0 100%; height: 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; scroll-margin-top: calc(var(--head-h) + 110px); }
.wk-slide.is-out { display: none; }
.wk-slide.is-far { visibility: hidden; }
.wk-slide__fig { display: grid; grid-template-rows: minmax(0, 1fr) auto; height: 100%; margin: 0; padding: clamp(18px, 2.6vh, 30px) 104px 0; }
.wk-slide__pic { position: relative; min-height: 0; margin-right: 12px; margin-bottom: 12px; }
/* The photo whole, as large as fits, with the site's yellow offset edge hugging it */
.wk-slide__pic img { position: absolute; inset: 0; margin: auto; width: auto; height: auto; max-width: 100%; max-height: 100%; border-radius: var(--r); background: var(--green-deep); box-shadow: 10px 10px 0 var(--yellow), 10px 10px 0 2px var(--ink); user-select: none; -webkit-user-drag: none; }
.wk-slide__cap { display: grid; gap: 1px; min-height: 68px; padding: 8px 300px 16px 0; align-content: center; color: var(--white); line-height: 1.3; }
.wk-slide__cap b { position: relative; padding-left: 18px; font-size: 1.06rem; font-weight: 700; }
.wk-slide__cap b::before { content: ''; position: absolute; left: 0; top: .34em; width: 10px; height: 10px; background: var(--yellow); transform: skewX(-14deg); }
.wk-slide__cap small { padding-left: 18px; font-size: .95rem; font-weight: 500; color: rgba(255,255,255,.86); }

/* Arrows at the sides (along the foot of the stage on phones) */
.wk-nav { position: absolute; z-index: 3; top: calc(50% - 60px); width: 56px; height: 56px; display: grid; place-items: center; padding: 0; border: 2px solid var(--ink); border-radius: var(--r); background: var(--yellow); color: var(--ink); box-shadow: 4px 4px 0 var(--ink); cursor: pointer; transition: transform .15s var(--ease), box-shadow .15s var(--ease); }
.wk-nav:hover { transform: translate(-1px, -1px); box-shadow: 6px 6px 0 var(--ink); }
.wk-nav:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ink); }
.wk-nav svg { width: 24px; height: 24px; }
.wk-nav--prev { left: 24px; }
.wk-nav--next { right: 24px; }

/* Counter, timer line, pause and full screen, bottom right of the stage */
.wk-ctrl { position: absolute; z-index: 3; right: 24px; bottom: 14px; display: flex; align-items: center; gap: 12px; }
.wk-ctrl__n { margin: 0; font-family: var(--f-display); font-style: italic; font-weight: 850; font-stretch: 78%; font-size: 1.5rem; line-height: 1; color: var(--yellow); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wk-ctrl__bar { position: relative; width: 84px; height: 4px; background: rgba(255,255,255,.22); overflow: clip; }
.wk-ctrl__bar span { position: absolute; inset: 0; background: var(--yellow); transform: scaleX(0); transform-origin: 0 50%; }
.wk-ctrl__btn { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 2px solid rgba(255,255,255,.55); border-radius: var(--r); background: rgba(6,26,15,.4); color: var(--white); cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.wk-ctrl__btn:hover { background: var(--yellow); border-color: var(--ink); color: var(--ink); }
.wk-ctrl__btn[hidden] { display: none; }
.wk-ctrl__btn svg { width: 20px; height: 20px; }
.wk-ctrl__btn .i-play, .wk-ctrl__btn[data-paused="true"] .i-pause { display: none; }
.wk-ctrl__btn[data-paused="true"] .i-play { display: block; }
.no-js .wk-nav, .no-js .wk-ctrl { display: none; }
.no-js .wk-track { scrollbar-width: thin; scrollbar-color: var(--yellow) transparent; }
.no-js .wk-slide__cap { padding-right: 0; }

/* Full screen: the stage takes the whole screen */
.wk-stage:fullscreen { --stage-h: 100vh; width: 100vw; border-radius: 0; box-shadow: none; }
.wk-stage:fullscreen .wk-slide__fig { padding-top: 28px; }

/* The strip: every photo of the chosen set as a thumbnail; the one showing is marked */
.wk-rail { display: flex; gap: 8px; margin-top: 12px; padding: 3px 3px 7px; overflow-x: auto; scrollbar-width: none; -webkit-mask: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); }
.wk-rail::-webkit-scrollbar { display: none; }
.no-js .wk-rail { scrollbar-width: thin; scrollbar-color: var(--green) var(--galv); }
.wk-thumb { flex: 0 0 auto; display: block; width: 100px; aspect-ratio: 4 / 3; border-radius: var(--r); overflow: clip; opacity: .66; outline: 3px solid transparent; outline-offset: -3px; transition: opacity .25s, outline-color .25s, box-shadow .25s var(--ease), transform .25s var(--ease); }
.wk-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wk-thumb:hover { opacity: 1; transform: translateY(-2px); }
.wk-thumb.is-on { opacity: 1; outline-color: var(--yellow); box-shadow: 3px 3px 0 var(--ink); }
.wk-thumb.is-out { display: none; }
.wk-thumb:focus-visible { outline-color: var(--ink); opacity: 1; }

@media (max-width: 1060px) { .wk-bar { top: 78px; } }
@media (max-width: 900px) {
  .wk { --bar-h: 100px; }
  .wk-stage { --stage-h: clamp(340px, min(calc(100svh - 78px - var(--bar-h) - 110px), 122vw), 760px); }
  .wk-slide__fig { padding-inline: 84px; }
  .wk-nav { width: 48px; height: 48px; }
  .wk-nav--prev { left: 16px; }
  .wk-nav--next { right: 16px; }
  .wk-open__grid { grid-template-columns: minmax(0, 1fr); }
  .wk-open__trail path { opacity: .45; }
  .wk-open__head > i, .wk-open__head::before, .wk-open__head::after { opacity: .6; }
  .wk-tally { grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center; gap: 4px 16px; }
  .wk-tally__num { font-size: clamp(3.4rem, 15vw, 5rem); }
  .wk-tally__label { justify-items: start; text-align: left; }
  .wk-bar__in { flex-direction: column-reverse; align-items: stretch; gap: 6px; padding-block: 8px 12px; }
  .wk-count { align-self: flex-start; }
  .wk-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 2px 8px 6px 2px; margin: -2px 0 -6px -2px; -webkit-mask: linear-gradient(90deg, #000 85%, transparent); mask: linear-gradient(90deg, #000 85%, transparent); }
  .wk-chips::-webkit-scrollbar { display: none; }
}
/* Phones: the photo takes the full width; arrows, counter and pause share a row along the foot of the stage */
@media (max-width: 700px) {
  .wk-slide__fig { padding: 14px 14px 0; }
  .wk-slide__cap { min-height: 0; padding: 4px 0 72px; }
  .wk-slide__cap b { font-size: 1rem; }
  .wk-nav { top: auto; bottom: 12px; }
  .wk-nav--prev { left: 12px; }
  .wk-nav--next { right: 12px; }
  .wk-ctrl { right: auto; left: 50%; bottom: 14px; transform: translateX(-50%); gap: 10px; }
  .wk-ctrl__n { font-size: 1.3rem; }
  .wk-ctrl__bar { width: 44px; }
  .wk-ctrl [data-full] { display: none; }
  .wk-thumb { width: 76px; }
}
@media (max-width: 640px) {
  .wk-count__n { font-size: 1.35rem; }
  .wk-tally { display: none; }
}

/* ---------- Names you'll know: a ledger of contracts, each line ruled in as you read, with a photo pane ---------- */
.wk-names { padding-block: clamp(60px, 6.6vw, 100px); background-image: repeating-linear-gradient(0deg, rgba(13,20,16,.05) 0 1px, transparent 1px 32px), linear-gradient(90deg, transparent calc(var(--gutter) - 14px), rgba(14,143,60,.18) calc(var(--gutter) - 14px), rgba(14,143,60,.18) calc(var(--gutter) - 12px), transparent calc(var(--gutter) - 12px)); }
.wk-names__grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(36px, 5vw, 88px); align-items: start; }
.wk-names__list { border-top: 2px solid var(--ink); }
.wk-name { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 20px; padding: 12px 0 14px; cursor: default; }
.wk-name__name { justify-self: start; font-family: var(--f-display); font-style: italic; font-weight: 850; font-stretch: 74%; text-transform: uppercase; font-size: clamp(1.2rem, 1.7vw, 1.75rem); line-height: 1.1; color: var(--ink); padding: 0 .3em 0 .2em; margin-left: -.2em;
  background: linear-gradient(var(--yellow), var(--yellow)) 0 88% / 0% 46% no-repeat; transition: color .4s, background-size .6s var(--ease); }
.wk-name__tag { font-weight: 700; font-size: .95rem; color: var(--steel); white-space: nowrap; transition: color .4s; }
.wk-name__rule { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--line); }
.wk-name__rule span { position: absolute; inset: 0; background: var(--ink); transform-origin: 0 50%; }
.wk-name.is-on .wk-name__name { background-size: 100% 46%; color: var(--ink); }
.wk-name.is-on .wk-name__tag { color: var(--green-text); }
.wk-name__thumb { display: none; }
.wk-names__pane { position: sticky; top: 112px; height: min(var(--media-cap), 520px); }
.wk-pic { position: absolute; inset: 0; margin: 0; overflow: clip; border-radius: var(--r); background: var(--green-deep); opacity: 0; visibility: hidden; transition: opacity .5s, visibility 0s .5s; }
.wk-pic.is-on { opacity: 1; visibility: visible; transition: opacity .5s, visibility 0s; }
.wk-pic__par { position: absolute; left: 0; right: 0; top: -6%; height: 112%; }
.wk-pic__par img { width: 100%; height: 100%; object-fit: cover; }
.wk-pic .caption b { color: var(--yellow); margin-right: 4px; }
.wk-pic--type { display: grid; place-items: center; padding: 10% 8%; }
.wk-pic__word { font-family: var(--f-display); font-style: italic; font-weight: 850; font-stretch: 72%; text-transform: uppercase; font-size: clamp(3rem, 7vw, 8rem); line-height: .95; text-align: center; color: var(--white); }
.wk-pic--long .wk-pic__word { font-size: clamp(2.4rem, 4.4vw, 4.6rem); }
.wk-pic__word.cut { width: auto; }
@media (max-width: 900px) {
  .wk-names__grid { grid-template-columns: minmax(0, 1fr); }
  .wk-names__pane { display: none; }
  .wk-name { grid-template-columns: minmax(0, 1fr) 96px; align-items: center; min-height: 92px; }
  .wk-name__name { grid-column: 1; }
  .wk-name__tag { grid-column: 1; grid-row: 2; }
  .wk-name__thumb { display: block; grid-column: 2; grid-row: 1 / 3; width: 96px; height: 72px; border-radius: var(--r); overflow: clip; }
  .wk-name__thumb img { width: 100%; height: 100%; object-fit: cover; }
}

/* ---------- CTA ---------- */
.wk-cta__ill { position: absolute; right: 12px; bottom: 12px; z-index: 1; padding: 4px 9px; border-radius: var(--r); background: rgba(6,26,15,.78); color: var(--white); font-size: .875rem; font-weight: 600; }
.wk-send li { position: relative; padding: 10px 0 10px 26px; border-bottom: 1px solid var(--line); font-weight: 600; }
.wk-send li:last-child { border-bottom: 0; padding-bottom: 0; }
.wk-send li::before { content: ''; position: absolute; left: 2px; top: 17px; width: 12px; height: 12px; background: var(--yellow); border: 2px solid var(--ink); transform: skewX(-14deg); }

/* ---------- Start states (JS and motion only; no-JS and reduced motion show the finished page) ---------- */
/* Ambient: a band of light drifts across the mat; on phones the ledger thumbnails breathe */
@media (prefers-reduced-motion: no-preference) {
  .wk-open::after { animation: wkSweep 16s ease-in-out infinite alternate; }
  .wk-name__thumb img { animation: wkBreathe 6s ease-in-out infinite alternate; }
  .wk-name:nth-child(2n) .wk-name__thumb img { animation-delay: -3s; }
}
@keyframes wkSweep { from { transform: translateX(0) skewX(-14deg); } to { transform: translateX(-48vw) skewX(-14deg); } }
@keyframes wkBreathe { from { transform: scale(1); } to { transform: scale(1.12); } }

@media (prefers-reduced-motion: no-preference) {
  html.js:not(.motion-off) .wk-bar .chip:not(.is-cut) { border-color: transparent; box-shadow: none; }
  html.js:not(.motion-off) .wk-bar .chip:not(.is-cut) > span { opacity: 0; }
  html.js:not(.motion-off) .wk-bar .chip:not(.is-cut)::before { clip-path: inset(0 100% 0 0); }
  html.js:not(.motion-off) .wk-pic__word { --o: 0%; --f: 0%; --e: 0; }
  html.js:not(.motion-off) .wk-name:not(.is-filled) .wk-name__name { color: var(--steel); }
}