/* 2026-11-01: the six new parts plus the Minecraft touches, on top of pf.css and suit.css.
   1. live numbers (zerobot.eu feed), 2. latest video card, 3. reviews wall, 4. commission builder,
   5. bike XP bar, 6. inventory slots with vanilla tooltips, 8. the footer sit,
   9. the case study pages (/work/...). Same tokens, fonts and section rhythm as pf.css. Nothing here
   loops: counts play once, everything rests under reduced motion. (7, the block-break seams, was
   removed on 2026-11-01: the owner did not like it.) */

[hidden] { display: none !important; }
@font-face { font-family: McVanilla; font-display: swap; src: url(/assets/fonts/mcvanilla.woff) format('woff'); }
:root { --mc: McVanilla, 'Courier New', monospace; --px: 2px; }
@media (min-width: 700px) { :root { --px: 3px; } }

/* ---------- 1. live numbers: a quiet row under the "What I've made" title ---------- */
.lv-box { margin: 0 0 44px; }
.lv-row { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid rgba(20, 21, 22, .14); }
.lv { display: flex; align-items: baseline; gap: 14px; padding: 16px 0; border-bottom: 1px solid rgba(20, 21, 22, .14); }
.lv-n { font-family: var(--wide); font-weight: 800; font-size: clamp(26px, 3.4vw, 40px); line-height: 1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; min-width: 2ch; }
.lv-t { font-size: 14px; line-height: 1.4; color: rgba(20, 21, 22, .7); }
.lv-t b { font-weight: 600; color: var(--ink2); }
.lv-st { display: inline-flex; align-items: center; gap: 8px; font-family: var(--wide); font-weight: 800; font-size: clamp(18px, 2.2vw, 26px); line-height: 1; text-transform: uppercase; }
.lv-st::before { content: ''; width: 8px; height: 8px; background: #4f8a5c; }
.lv-st.off::before { background: #9a5a50; }
.lv-k { display: flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(20, 21, 22, .55); margin-bottom: 12px; }
@media (min-width: 760px) {
  .lv-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; border-top: 0; }
  .lv { flex-direction: column; gap: 10px; border-bottom: 0; border-top: 1px solid rgba(20, 21, 22, .14); padding: 18px 0 0; }
}
/* the dark pages (case studies) use the same row on the dark head */
.wk-head .lv-row, .wk-head .lv { border-color: rgba(215, 226, 234, .14); }
.wk-head .lv-t { color: rgba(215, 226, 234, .7); }
.wk-head .lv-t b { color: var(--bright); }
.wk-head .lv-n { color: var(--bright); }
.wk-head .lv-st { color: var(--bright); }

/* ---------- 2. latest video: a small card inside the Videos row ---------- */
.yt { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 14px; align-items: center; margin-top: 18px; max-width: 520px; padding: 8px; border-radius: 18px; background: rgba(255, 255, 255, .55); border: 1px solid rgba(20, 21, 22, .1); transition: background-color .2s; }
.yt:hover { background: #fff; }
.yt-pic { position: relative; aspect-ratio: 16 / 9; border-radius: 11px; overflow: hidden; background: #cfcbca; }
.yt-pic img { width: 100%; height: 100%; object-fit: cover; }
.yt-pic::after { content: ''; position: absolute; left: 50%; top: 50%; width: 30px; height: 21px; margin: -10.5px 0 0 -15px; border-radius: 6px; background: rgba(12, 12, 12, .72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M3.5 2.5v5l4-2.5z' fill='%23fff'/%3E%3C/svg%3E") center / 14px no-repeat; }
.yt-b { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.yt-k { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(20, 21, 22, .55); }
.yt-t { font-weight: 500; font-size: 15px; line-height: 1.3; color: var(--ink2); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.yt-d { font-size: 12px; color: rgba(20, 21, 22, .55); }
@media (min-width: 760px) { .yt { grid-template-columns: 168px minmax(0, 1fr); } }

/* ---------- 3. reviews wall: small, because there are three ---------- */
.rv { padding-top: 64px; }
.rv-head { display: grid; gap: 10px; margin-bottom: 24px; }
.rv-head h3 { font-family: var(--wide); font-weight: 800; text-transform: uppercase; font-size: clamp(20px, 3vw, 32px); line-height: 1.05; letter-spacing: -.01em; }
.rv-head p { font-size: 13px; line-height: 1.55; color: rgba(20, 21, 22, .65); max-width: 34rem; }
.rv-grid { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.rv-c { display: flex; flex-direction: column; gap: 14px; padding: 22px 22px 18px; border-radius: 22px; background: rgba(255, 255, 255, .62); border: 1px solid rgba(20, 21, 22, .1); }
.rv-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.rv-plug { font-weight: 600; font-size: 15px; }
.rv-stars { display: inline-flex; gap: 2px; color: var(--ink2); }
.rv-stars svg { width: 15px; height: 15px; }
.rv-stars .e { opacity: .2; }
.rv-q { margin: 0; font-weight: 300; font-size: 16px; line-height: 1.5; letter-spacing: -.005em; }
.rv-q p + p { margin-top: 8px; }
.rv-by { margin-top: auto; display: flex; flex-direction: column; gap: 3px; padding-top: 12px; border-top: 1px solid rgba(20, 21, 22, .1); font-size: 13px; line-height: 1.45; color: rgba(20, 21, 22, .65); }
.rv-by b { font-weight: 600; color: var(--ink2); }
.rv-by a { text-decoration: underline; text-underline-offset: 3px; color: var(--ink2); }
.rv-fix { font-size: 13px; line-height: 1.45; color: rgba(20, 21, 22, .72); padding: 9px 11px; border-radius: 12px; background: rgba(20, 21, 22, .05); }
@media (min-width: 900px) {
  .rv-head { grid-template-columns: minmax(0, 1fr) 320px; align-items: end; }
  .rv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
}

/* The downhill shortlist got its own sheet when the goal moved up (2026-11-02): its head now opens the
   sheet, so it drops the gap that used to separate it from the goal above. */
#shortlist .wish-head { margin-top: 0; }

/* ---------- 4. commission builder: the white sheet, three steps and a result ---------- */
.qb .goal-sheet { align-items: stretch; }
.qb-head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.qb-lead { max-width: 36rem; font-weight: 300; line-height: 1.6; font-size: clamp(.95rem, 1.4vw, 1.15rem); opacity: .7; margin-top: 20px; }
.qb-form { width: 100%; max-width: 72rem; margin: 40px auto 0; display: grid; gap: 28px; }
.qb-step { border: 0; min-width: 0; }
.qb-step legend { font-weight: 500; text-transform: uppercase; letter-spacing: .02em; font-size: clamp(1rem, 1.6vw, 1.3rem); margin-bottom: 14px; display: flex; align-items: baseline; gap: 10px; }
.qb-step legend small { font-size: .7rem; letter-spacing: .12em; opacity: .5; font-weight: 400; }
.qb-types { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.qb-opt { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; background: #F2F3F4; cursor: pointer; transition: background-color .2s, box-shadow .2s; }
.qb-opt:hover { background: #EAECEE; }
.qb-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.qb-box { flex: none; width: 20px; height: 20px; margin-top: 1px; border: 2px solid var(--bg); border-radius: 50%; display: grid; place-items: center; }
.qb-box::after { content: ''; width: 10px; height: 10px; border-radius: inherit; background: var(--bg); transform: scale(0); transition: transform .25s var(--e-out); }
.qb-check .qb-box { border-radius: 6px; }
.qb-check .qb-box::after { border-radius: 2px; }
.qb-opt input:checked + .qb-box::after { transform: scale(1); }
.qb-opt input:focus-visible + .qb-box { outline: 2px solid var(--bg); outline-offset: 3px; }
.qb-opt:has(input:checked) { box-shadow: inset 0 0 0 2px var(--bg); background: #fff; }
.qb-tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.qb-tx b { font-weight: 500; font-size: .98rem; line-height: 1.25; }
.qb-tx span { font-size: .8rem; line-height: 1.45; opacity: .6; }
.qb-feats { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.qb-note { font-size: .78rem; opacity: .55; margin-top: 10px; }
.qb-what { width: 100%; min-height: 96px; resize: vertical; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: #F2F3F4; font: inherit; font-weight: 300; font-size: 1rem; line-height: 1.5; color: var(--bg); }
.qb-what:focus { outline: 2px solid var(--bg); outline-offset: 2px; background: #fff; }
.qb-res { display: flex; flex-direction: column; gap: 14px; padding: 24px; border-radius: 24px; background: var(--bg); color: var(--ink); }
.qb-res-k { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; opacity: .6; }
.qb-price { font-weight: 900; font-size: clamp(1.9rem, 3vw, 2.5rem); line-height: 1; letter-spacing: -.02em; color: var(--bright); font-variant-numeric: tabular-nums; }
.qb-time { font-size: .95rem; opacity: .8; }
.qb-fine { font-size: .78rem; line-height: 1.5; opacity: .6; }
.qb-sum { margin: 0; white-space: pre-wrap; font-family: var(--mono); font-size: .74rem; line-height: 1.55; padding: 12px 14px; border-radius: 14px; background: rgba(215, 226, 234, .06); border: 1px solid rgba(215, 226, 234, .12); color: rgba(215, 226, 234, .85); max-height: 12rem; overflow: auto; }
.qb-go { align-self: flex-start; white-space: normal; text-align: center; }
.qb-said { font-size: .82rem; min-height: 1.2em; color: #9fe0bd; }
@media (min-width: 640px) { .qb-types, .qb-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) {
  .qb-form { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; column-gap: 40px; }
  .qb-form > .qb-step { grid-column: 1; }
  .qb-res { grid-column: 2; grid-row: 1 / span 3; position: sticky; top: 24px; }
}

/* ---------- 5. the bike, as the vanilla XP bar (textures from the 1.21.11 client jar) ---------- */
.xp { width: 100%; max-width: 64rem; display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); }
.xp-k { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; opacity: .55; }
.xp-wrap { position: relative; width: min(100%, calc(182 * var(--px))); padding-top: calc(11 * var(--px)); }
.xp-bar { position: relative; display: block; width: 100%; aspect-ratio: 182 / 5; image-rendering: pixelated; background: url(/assets/img/mc/xp-bg.png) 0 0 / 100% 100% no-repeat; }
.xp-fill { position: absolute; inset: 0; image-rendering: pixelated; background: url(/assets/img/mc/xp-fill.png) 0 0 / 100% 100% no-repeat; clip-path: inset(0 calc(100% - var(--xw, 0%)) 0 0); }
html.anim .xp-fill { transition: clip-path 1.4s var(--e-out) .2s; }
/* the level number: vanilla green #80FF20 with a 1 px black outline on all four sides */
.xp-lvl {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%); font-family: var(--mc); font-size: calc(8 * var(--px)); line-height: 1; color: #80FF20; white-space: nowrap;
  text-shadow: var(--px) 0 0 #000, calc(-1 * var(--px)) 0 0 #000, 0 var(--px) 0 #000, 0 calc(-1 * var(--px)) 0 #000;
}
.xp-lvl.px { top: calc(1 * var(--px)); text-shadow: none; }
/* 2026-11-02: the number is drawn at whole device pixels (more.js sets --gp per screen), sits on the bar
   like in game, and is a plain level number: vanilla never shows a % sign there */
.xp-wrap.xp-gp { --px: var(--gp); width: min(100%, calc(182 * var(--gp))); padding-top: calc(8 * var(--gp)); }
.xp-wrap.xp-gp .xp-lvl { z-index: 1; }
.xp-lvl canvas { image-rendering: pixelated; image-rendering: crisp-edges; }

/* spec rows that bring up their photo in the catalog above (gallery.js, data-photo) */
.goal-spec .pick { cursor: pointer; transition: background-color .2s var(--ease); }
.goal-spec .pick dd { text-decoration: underline dotted rgba(12, 12, 12, .3); text-underline-offset: 4px; }
@media (hover: hover) { .goal-spec .pick:hover dd { text-decoration-color: currentColor; } }
.xp-cap { font-weight: 500; font-size: clamp(.95rem, 1.4vw, 1.1rem); }
.xp-cap span { opacity: .55; font-weight: 400; }

/* ---------- 6. inventory slots and the vanilla tooltip ---------- */
.inv { margin: 8px 16px 28px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.inv-k { font-family: var(--mc); font-size: calc(8 * var(--px)); color: #404040; line-height: 1; align-self: flex-start; }
/* the container panel: vanilla #C6C6C6 with a light top-left and dark bottom-right edge */
.inv-panel {
  --s: calc(18 * var(--px));
  display: flex; flex-direction: column; gap: calc(5 * var(--px)); padding: calc(7 * var(--px)); background: #C6C6C6;
  box-shadow: inset var(--px) var(--px) 0 #fff, inset calc(-1 * var(--px)) calc(-1 * var(--px)) 0 #555, 0 0 0 var(--px) #000;
  border-radius: calc(2 * var(--px));
}
.inv-grid { list-style: none; display: grid; grid-template-columns: repeat(9, var(--s)); grid-auto-rows: var(--s); }
.slot {
  position: relative; display: grid; place-items: center; width: var(--s); height: var(--s); image-rendering: pixelated;
  background: url(/assets/img/mc/slot.png) 0 0 / 100% 100% no-repeat; outline: none; -webkit-tap-highlight-color: transparent;
}
.slot img { width: calc(16 * var(--px)); height: calc(16 * var(--px)); image-rendering: pixelated; pointer-events: none; filter: saturate(.72); transition: filter .2s var(--ease); }
/* 2026-11-02: 22 vanilla icons side by side were the brightest patch on the page; they rest a little
   quieter and come to full colour under the pointer, on focus or when tapped */
.slot:hover img, .slot:focus-visible img, .slot.armed img { filter: none; }
.slot::after { content: ''; position: absolute; inset: var(--px); background: rgba(255, 255, 255, .5); opacity: 0; pointer-events: none; }
.slot:hover::after, .slot:focus-visible::after, .slot.armed::after { opacity: 1; }
.slot:focus-visible { box-shadow: 0 0 0 var(--px) #fff, 0 0 0 calc(2 * var(--px)) #000; z-index: 1; }
.slot.empty { pointer-events: none; }
.inv-hint { font-size: .72rem; letter-spacing: .06em; opacity: .55; text-align: center; }
/* the tooltip: the 1.21 frame look, dark violet box, violet edge, white or rarity name, grey lore */
.mc-tip {
  --px: 2px; /* the tooltip stays at GUI scale 2 everywhere, like a normal window */
  position: fixed; z-index: 60; left: 0; top: 0; max-width: min(320px, calc(100vw - 24px)); pointer-events: none;
  padding: calc(3 * var(--px)) calc(4 * var(--px)) calc(4 * var(--px)); background: rgba(14, 14, 14, .95);
  box-shadow: 0 0 0 var(--px) rgba(14, 14, 14, .95);
  font-family: var(--mc); font-size: calc(8 * var(--px)); line-height: calc(10 * var(--px)); color: #fff; text-shadow: var(--px) var(--px) 0 #3f3f3f;
}
/* a tapped tooltip on a touch screen sits over other text: no see-through there (2026-11-02) */
@media (hover: none) { .mc-tip { background: #0E0E0E; box-shadow: 0 0 0 var(--px) #0E0E0E; } }
/* 2026-11-02, owner: the violet frame and the aqua name were the loudest colours on the page. The tooltip
   now takes the page's own ink: near-black box, a grey frame lit from the top like the inventory's bevel,
   white names, grey lore, the price line a warm off-white. Still the game's shape, font and shadows. */
.mc-tip::before { content: ''; position: absolute; inset: 0; border: var(--px) solid transparent; border-image: linear-gradient(180deg, #8B8B8B, #4A4A4A) 1; pointer-events: none; }
.mc-tip .t-name { color: #fff; margin-bottom: calc(2 * var(--px)); }
.mc-tip .t-rare { color: #fff; }
.mc-tip .t-lore:nth-child(3) { color: #D7D2C8; text-shadow: var(--px) var(--px) 0 #35332f; }
.mc-tip .t-lore { color: #AAAAAA; text-shadow: var(--px) var(--px) 0 #2a2a2a; }
.mc-tip .t-hint { color: #555555; text-shadow: none; margin-top: calc(2 * var(--px)); }
/* narrow screens: more.js picks a smaller whole game pixel so the 9 slots fit, instead of squeezing the
   slot texture to a fractional size (2026-11-02) */

/* covers in slot frames (the plugins case study) */
.cv-grid { list-style: none; width: 100%; max-width: 72rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.cv-slot {
  position: relative; display: block; padding: var(--px); image-rendering: pixelated; background: #8B8B8B;
  box-shadow: inset var(--px) var(--px) 0 #373737, inset calc(-1 * var(--px)) calc(-1 * var(--px)) 0 #fff; outline: none; -webkit-tap-highlight-color: transparent;
}
.cv-slot img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; image-rendering: auto; }
.cv-slot::after { content: ''; position: absolute; inset: var(--px); background: rgba(255, 255, 255, .35); opacity: 0; pointer-events: none; transition: opacity .15s; }
.cv-slot:hover::after, .cv-slot:focus-visible::after, .cv-slot.armed::after { opacity: 1; }
.cv-slot:focus-visible { box-shadow: inset var(--px) var(--px) 0 #373737, inset calc(-1 * var(--px)) calc(-1 * var(--px)) 0 #fff, 0 0 0 var(--px) #fff, 0 0 0 calc(2 * var(--px)) #000; }
@media (min-width: 700px) { .cv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 1100px) { .cv-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.kit { position: relative; }

/* ---------- 7. My setup v2 (2026-11-02): my desk photo with markers, a small card and the list (kit.js) ----------
   The photo and the list sit side by side on wide screens and stack on phones. The markers are a small
   square with a plus, like the game's crosshair; an open one turns light and its plus turns to a cross.
   html.anim: the photo settles from a slight zoom and the markers come in one by one, once. */
.kit-stage { width: 100%; max-width: 72rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 4px; text-align: left; }
.kit-photo { margin: 0; min-width: 0; }
.kit-pic { position: relative; border-radius: 18px; }
.kit-zoom { position: relative; overflow: hidden; border-radius: inherit; aspect-ratio: 4 / 3; background: #1a1612; }
.kit-zoom img { width: 100%; height: 100%; object-fit: cover; transform-origin: 62% 70%; }
html.anim .kit-zoom img { transform: scale(1.09) translate3d(-1.2%, 1.4%, 0); transition: transform 2.2s var(--e-out); }
html.anim .kit-photo.in .kit-zoom img { transform: none; }
/* the photo dims a little while a card is open, so the card and its marker read first */
.kit-zoom::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: rgba(12, 12, 12, .28); opacity: 0; transition: opacity .35s var(--ease); pointer-events: none; }
.kit-pic.has-card .kit-zoom::after { opacity: 1; }

.hs {
  position: absolute; z-index: 2; left: var(--x); top: var(--y); width: 36px; height: 36px; margin: -18px 0 0 -18px; padding: 0; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center; -webkit-tap-highlight-color: transparent;
}
.hs::before { content: ''; grid-area: 1 / 1; width: 20px; height: 20px; border-radius: 4px; background: rgba(12, 12, 12, .62); box-shadow: inset 0 0 0 1.5px rgba(247, 245, 242, .92), 0 2px 10px rgba(0, 0, 0, .45); transition: background-color .25s var(--ease), transform .35s var(--e-out); }
.hs::after {
  content: ''; grid-area: 1 / 1; width: 10px; height: 10px;
  background: linear-gradient(var(--bright), var(--bright)) 50% 50% / 2px 100% no-repeat, linear-gradient(var(--bright), var(--bright)) 50% 50% / 100% 2px no-repeat;
  transition: transform .35s var(--e-out);
}
.hs.on::before { background: var(--bright); transform: scale(1.18); }
.hs.on::after { background: linear-gradient(var(--bg), var(--bg)) 50% 50% / 2px 100% no-repeat, linear-gradient(var(--bg), var(--bg)) 50% 50% / 100% 2px no-repeat; }
.hs[aria-expanded="true"]::after { transform: rotate(45deg); }
.hs:focus-visible { outline: none; }
.hs:focus-visible::before { box-shadow: inset 0 0 0 1.5px rgba(247, 245, 242, .92), 0 0 0 3px var(--bg), 0 0 0 5px var(--bright); }
html.anim .hs::before, html.anim .hs::after { opacity: 0; transform: scale(.4); transition: opacity .4s var(--ease) calc(.7s + var(--i) * 90ms), transform .5s var(--e-out) calc(.7s + var(--i) * 90ms), background-color .25s var(--ease); }
html.anim .kit-photo.in .hs::before, html.anim .kit-photo.in .hs::after { opacity: 1; transform: none; }
html.anim .kit-photo.in .hs.on::before { transform: scale(1.18); }
html.anim .kit-photo.in .hs[aria-expanded="true"]::after { transform: rotate(45deg); }
html.anim .kit-photo.in.done .hs::before, html.anim .kit-photo.in.done .hs::after { transition-delay: 0s; }

.kit-card {
  position: absolute; z-index: 3; left: 0; top: 0; display: flex; gap: 12px; align-items: flex-start; padding: 10px 14px 12px 10px;
  border-radius: 14px; background: #151515; border: 1px solid rgba(215, 226, 234, .14); box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .7); color: var(--ink);
}
.kit-card[hidden] { display: none; }
html.anim .kit-card { animation: kc-in .35s var(--e-out); }
@keyframes kc-in { from { opacity: 0; translate: 0 6px; } }
.kc-pic { flex: none; width: 76px; height: 57px; border-radius: 9px; background: #fff; object-fit: contain; }
.kc-b { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kc-n { font-weight: 500; text-transform: uppercase; font-size: .92rem; line-height: 1.15; color: var(--bright); }
.kc-k { font-size: .75rem; opacity: .55; }
.kc-t { margin-top: 5px; font-weight: 300; font-size: .82rem; line-height: 1.45; color: rgba(215, 226, 234, .82); }
.kc-go { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; margin-top: 7px; font-size: .8rem; color: var(--bright); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(247, 245, 242, .35); }
.kc-go:hover { text-decoration-color: currentColor; }
.kit-card.dock .kc-pic { width: 60px; height: 45px; }
.kit-card.dock .kc-t { font-size: .78rem; }

.kit-list { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; align-content: start; min-width: 0; }
.kit-list a {
  display: flex; align-items: center; gap: 12px; padding: 6px 12px 6px 6px; border-radius: 14px; background: #141414; border: 1px solid rgba(215, 226, 234, .07);
  transition: background-color .25s var(--ease), border-color .25s var(--ease);
}
.kit-list img { flex: none; width: 52px; height: 39px; border-radius: 9px; background: #fff; object-fit: contain; }
.kit-list span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.kit-list b { font-weight: 500; text-transform: uppercase; font-size: .84rem; line-height: 1.2; color: var(--bright); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kit-list small { font-size: .74rem; opacity: .55; }
.kit-list li.on a { background: #1f1f1f; border-color: rgba(215, 226, 234, .32); }
.kit-list a:focus-visible { outline: 2px solid var(--bright); outline-offset: 2px; }
@media (min-width: 560px) and (max-width: 979px) { .kit-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) {
  .kit-stage { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 18px; align-items: start; }
  .kit-pic { border-radius: 26px; }
  .kit-list { gap: 5px; }
  .kit-list a { padding: 5px 12px 5px 5px; }
  .kit-list img { width: 48px; height: 36px; }
}

/* ---------- 8. the footer sit: my character on the footer's top edge, legs over the front ---------- */
.kf-sit { position: relative; z-index: 4; height: 0; width: min(1150px, calc(100% - 32px)); margin: 0 auto; }
/* 2026-11-02: re-rendered (tools/suit/sit.json, sit-layers.json) in a real sit: thighs forward, knees bent,
   shins over the edge; the whole head (the old head layer hid behind an invisible helmet); a 1536 stage,
   2.5x to 5x the shown size, lossless WebP with clean alpha and no outline filter. --k = CSS px per stage
   px; the seat (thigh underside at the ledge's front edge, y 953) sits on the footer's top edge. */
.sit { --k: .16px; position: absolute; right: 4px; top: calc(-953 * var(--k)); width: calc(1536 * var(--k)); height: calc(1536 * var(--k)); pointer-events: none; }
.sit img { position: absolute; max-width: none; }
.sit-b { left: calc(442 * var(--k)); top: calc(431 * var(--k)); width: calc(618 * var(--k)); height: calc(787 * var(--k)); }
.sit-h { left: calc(577 * var(--k)); top: calc(141 * var(--k)); width: calc(381 * var(--k)); height: calc(327 * var(--k)); transform-origin: 50.13% 93.73%; transition: transform .6s var(--e-out); }
.sit-hit { position: absolute; left: calc(520 * var(--k)); top: calc(141 * var(--k)); width: calc(500 * var(--k)); height: calc(812 * var(--k)); pointer-events: auto; }
@media (hover: hover) { .sit-hit:hover ~ .sit-h { transform: rotate(-7deg); } }
@media (prefers-reduced-motion: reduce) { .sit-h { transition: none; } }
/* room above the edge for him, under the contact links */
.contact { padding-bottom: 150px; }
@media (min-width: 768px) { .contact { padding-bottom: 220px; } }
@media (min-width: 640px) { .kf-sit { width: min(1150px, calc(100% - 64px)); } .sit { --k: .19px; right: 40px; } }
@media (min-width: 860px) { .kf-sit { width: min(1150px, calc(100% - 80px)); } .sit { --k: .21px; right: auto; left: calc(350px + 16px + 120px); } }

/* ---------- 9. case study pages ---------- */
.wk-head { padding-bottom: 40px; }
.wk-head .lg-facts b { font-family: var(--wide); font-weight: 800; letter-spacing: -.01em; font-size: clamp(1.3rem, 2.6vw, 2rem); }
.wk-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.wk-cta .gbtn { font-size: .8rem; padding: 10px 22px; }
.wk-head .lv-box { width: 100%; max-width: 64rem; margin: 0; text-align: left; }
.wk-head .lv-k { color: rgba(215, 226, 234, .55); }
.wk-head .lv-row { grid-template-columns: minmax(0, 1fr); }
.wk-head .lv { flex-direction: row; align-items: baseline; gap: 14px; }
.wk-body { max-width: 46rem; }
.wk-body h3 { font-weight: 500; text-transform: uppercase; letter-spacing: .02em; font-size: 1rem; margin: 26px 0 8px; }
.wk-list { list-style: none; margin-top: 16px; }
.wk-list li { position: relative; padding: 11px 0 11px 22px; border-top: 1px solid var(--line); font-weight: 300; font-size: clamp(1rem, 1.3vw, 1.06rem); line-height: 1.6; color: rgba(12, 12, 12, .8); }
.wk-list li:last-child { border-bottom: 1px solid var(--line); }
.wk-list li::before { content: ''; position: absolute; left: 2px; top: 1.15em; width: 8px; height: 8px; background: var(--bg); }
.wk-list b { font-weight: 500; color: var(--bg); }
.wk-shots { display: grid; gap: 14px; margin: 32px 0 8px; }
.wk-shot { margin: 0; }
.wk-shot img { width: 100%; height: auto; border-radius: 18px; background: #e9ecee; box-shadow: 0 18px 40px -26px rgba(12, 12, 12, .5); }
.wk-shot figcaption { margin-top: 8px; font-size: .78rem; line-height: 1.45; opacity: .6; }
@media (min-width: 760px) { .wk-shots--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wk-shots--3 .wk-shot:first-child { grid-column: 1 / -1; } }
.wk-nums { margin-top: 16px; }
.wk-nums div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.wk-nums div:last-child { border-bottom: 1px solid var(--line); }
.wk-nums dt { font-weight: 300; font-size: clamp(.95rem, 1.3vw, 1.05rem); color: rgba(12, 12, 12, .75); }
.wk-nums dd { font-weight: 900; font-size: clamp(1.1rem, 2vw, 1.6rem); line-height: 1.1; text-align: right; white-space: nowrap; }
.wk-next { display: grid; gap: 10px; margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--line); }
.wk-next p { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; opacity: .5; }
.wk-next div { display: flex; flex-wrap: wrap; gap: 10px; }
.wk-next .gbtn { border-color: var(--bg); color: var(--bg); font-size: .8rem; padding: 10px 22px; }
.wk-next .gbtn:hover { background-color: rgba(12, 12, 12, .06); }
.wk-cv { margin-top: 28px; }

/* ---------- 2026-11-02 compact pass (owner: "make where stuff is a little smaller") ----------
   Section titles, the white sheets and the gaps between sections take about a quarter less room, so
   more of the page fits on a screen. Same breakpoints as pf.css; this file loads after it. */
.sec-h { font-size: clamp(2.5rem, 9vw, 120px); }
.goal { padding-top: 28px; }
.goal-sheet { padding: 44px 18px 32px; }
.goal-bike { width: min(100%, 860px); margin: 12px 0 4px; }
.me { padding-top: 88px; gap: 32px; }
.kit { padding-top: 72px; }
/* the bottom keeps the room for the footer sit (section 8): his head is about 130 / 155 / 170 px tall above
   the edge, and the compact padding had let it cover the contact links (bug fixed 2026-11-02) */
.contact { padding: 88px 20px 150px; gap: 32px; }
@media (min-width: 640px) and (max-width: 767px) { .contact { padding-bottom: 176px; } }
@media (min-width: 640px) {
  .goal { padding-top: 36px; }
  .goal-sheet { padding: 56px 32px 40px; }
  .me { padding-top: 104px; }
}
@media (min-width: 768px) {
  .goal { padding-top: 44px; }
  .goal-sheet { padding: 64px 48px 48px; }
  .goal-body { gap: 40px; }
  .me { padding: 120px 40px 48px; gap: 40px; }
  .kit { padding-top: 88px; }
  .contact { padding: 112px 40px 210px; }
}

/* ---------- 2026-11-02 the goal: TUES photo catalog (.gal.tues, gallery.js) ----------
   The desk catalog from pf.css, light for the white sheet. The stage keeps the side photo's shape
   (1600x974), so the first view looks like the old single photo. .tues-cut = studio view with alpha,
   multiplied into the sheet; YT's studio details and ride shots fill the stage as photos. */
.goal .gal.tues { width: min(100%, 860px); margin: 12px 0 4px; gap: 12px; }
.tues .gal-stage { aspect-ratio: 1600 / 974; border-radius: 18px; background: transparent; }
.tues .gal-stage:focus-visible { outline: 2px solid var(--bg); outline-offset: 4px; }
.tues .gal-fg { object-fit: cover; }
.tues .gal-slide.tues-cut .gal-fg { object-fit: contain; mix-blend-mode: multiply; }
.tues .gal-thumbs { position: relative; } /* gallery.js scrolls to th.offsetLeft: measure it inside the row */
.tues .gal-th { width: 64px; aspect-ratio: 16 / 10; border-radius: 10px; border-color: rgba(12, 12, 12, .14); background: #ECEDEF; opacity: .55; }
.tues .gal-th.tues-cut { background: #F4F5F6; }
.tues .gal-th.tues-cut img { object-fit: contain; mix-blend-mode: multiply; }
.tues .gal-th:hover { opacity: .85; }
.tues .gal-th[aria-current="true"] { opacity: 1; border-color: var(--bg); box-shadow: 0 0 0 1px var(--bg); }
.tues .gal-th:focus-visible, .tues .rbtn:focus-visible { outline: 2px solid var(--bg); outline-offset: 2px; }
.tues .gal-n, .tues .gal-n b { color: var(--bg); }
.tues .rbtn { color: var(--bg); background: transparent; border-color: rgba(12, 12, 12, .2); box-shadow: none; }
.tues .rbtn:hover { background: rgba(12, 12, 12, .06); }
.tues-cap { text-align: right; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; opacity: .4; }
@media (max-width: 479px) { .tues .gal-th { width: 56px; } }
@media (min-width: 640px) {
  .tues .gal-stage { border-radius: 26px; }
  .tues .gal-th { width: 76px; border-radius: 12px; }
}
@media (min-width: 1024px) { .tues .gal-stage { border-radius: 32px; } .tues .gal-th { width: 84px; } }