/* ============================================================
   CASE STUDIES INDEX ONLY (case-studies/index.html) - loaded after site.css.
   Split out of site.css on 2026-10-20 to slim the render-blocking CSS on
   every other page; the rules keep their site.css order and @media wrappers.
   ============================================================ */
/* ---- case study cards ---- */
/* ---- featured work: three builds, alternating image/body rows ---- */
#site .fwork { display: grid; gap: clamp(44px, 6vw, 84px); }
/* soft colour bulbs (main.bulbs): one continuous layer for the whole page,
   exactly like the footer's glow - cobalt and lime washes alternating left
   and right down the scroll. Painted on <main>, never per-section, so no
   boundary can ever draw a line through them. Sections above it go
   transparent so the washes read through */
/* where the page opens on the dark band, the glows start below its wave so
   the paper wave meets plain paper instead of a tinted step */
#site main.bulbs { background:
  var(--grain),
  linear-gradient(to bottom, #F7F9FC 0, #F7F9FC 400px, rgba(247,249,252,0) 720px),
  radial-gradient(54vw 560px at 92% 0%, rgba(44,95,216,.09), transparent 62%),
  radial-gradient(58vw 640px at -4% 24%, rgba(126,164,246,.14), transparent 62%),
  radial-gradient(56vw 620px at 104% 50%, rgba(44,95,216,.08), transparent 62%),
  radial-gradient(54vw 600px at -6% 74%, rgba(126,164,246,.13), transparent 62%),
  radial-gradient(58vw 640px at 102% 96%, rgba(44,95,216,.08), transparent 62%); }
#site main.bulbs .phead { background: none; }
#site .fwrow { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4.4vw, 72px); align-items: center;
  scroll-margin-top: calc(var(--navh, 77px) + 24px); }
#site .fwnum { display: flex; align-items: center; gap: 14px; margin: 0 0 14px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .04em; color: var(--cb); }
#site .fwnum::after { content: ""; flex: 1; height: 1px; background: rgba(11,27,51,.12); }
#site .fwrow:nth-child(even) .fwshot { order: 2; }
#site .fwbody h3 { font-size: clamp(1.4rem, 2.3vw, 1.8rem); line-height: 1.14; letter-spacing: -.028em; margin-bottom: 12px; }
#site .fwbody > p:not(.go):not(.gosoon) { margin: 0 0 20px; font-size: 15px; line-height: 1.65; color: var(--k-mu); max-width: 52ch; }
#site .fwtags { display: flex; flex-wrap: wrap; gap: 8px; }
#site .fwtags span { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; letter-spacing: .02em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 100px; background: rgba(11,27,51,.055); color: #3D4E68; }
#site .fwtags span:nth-child(3n+1) { background: rgba(44,95,216,.09); color: #2C55B8; }
#site .fwtags span:nth-child(3n+2) { background: rgba(101,163,63,.13); color: #3E6E27; }
#site .fwbody .go { position: relative; display: inline-flex; align-items: center; gap: 9px; margin: 20px 0 0; padding-bottom: 7px;
  font-size: 14px; font-weight: 600; letter-spacing: -.01em; color: var(--nvy); text-decoration: none; }
@media (max-width: 860px) {
  #site .fwrow { grid-template-columns: 1fr; gap: 20px; }
  #site .fwrow:nth-child(even) .fwshot { order: 0; }
}
/* ---- case studies: the key figure on each card ----
   One .fwm per card: a small label, the figure, and what it measures, between
   two hairlines after the description (the Spec design, chosen 2026-10-11 over
   Ledger, Callout and Panel). A figure still to come (.soon) is greyed. */
#site .fwbody { display: flex; flex-direction: column; align-items: flex-start; }
#site .fwbody > .fwnum { align-self: stretch; }
#site .fwbody > .fwm { order: 1; }
#site .fwbody > .fwtags, #site .fwbody > .go, #site .fwbody > .gosoon { order: 2; }
#site .fwm { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 16px; align-self: stretch; max-width: 52ch; margin: -2px 0 22px; padding: 14px 0 15px;
  border-top: 1px solid rgba(11,27,51,.14); border-bottom: 1px solid rgba(11,27,51,.14); }
#site .fwm::before { content: "Key figure"; grid-column: 1 / -1; margin-bottom: 8px; font-size: 14.5px; font-weight: 600; color: #55657D; }
#site .fwm.soon::before { content: "Results"; }
#site .fwm b { font-size: 2.6rem; font-weight: 600; line-height: 1; letter-spacing: -.035em; color: var(--nvy); font-variant-numeric: tabular-nums; }
#site .fwm span { font-size: 15.5px; line-height: 1.45; color: var(--k-mu); max-width: 34ch; }
#site .fwm.soon b { font-size: 1.15rem; font-weight: 600; letter-spacing: 0; color: #607086; }
#site .pintro .lead { margin: 0; max-width: 62ch;
  font-size: clamp(1.02rem, 1.5vw, 1.16rem); line-height: 1.65; color: #42536E; }
#site .fwlkimg { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 760; border-radius: 14px; opacity: .8; box-shadow: 0 30px 60px -34px rgba(11,27,51,.4); }
#site .fwlk { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 4px; border-radius: 14px; background: rgba(11,27,51,.28); }
#site .fwlk i { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 6px; border-radius: 50%; background: #fff; color: var(--nvy); box-shadow: 0 14px 30px -14px rgba(11,27,51,.6); transition: transform .2s; }
/* the padlock: drawn symmetrical round x = 12 and optically centred in its 24px box (shackle top
   y 3, body bottom y 20.5, the heavier body sitting a touch low), display block so no baseline gap */
#site .lkic { display: block; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#site .lkic .k { fill: currentColor; stroke: none; }
#site .fwlk b { font-size: 15px; font-weight: 600; color: #fff; }
#site .fwlk small { font-size: 13px; color: rgba(255,255,255,.85); }
#site .fwlock:hover .fwlk i, #site .fwlock:focus-visible .fwlk i { transform: translateY(-3px); }
#site .lkpop-i { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%; background: #EEF3FD; color: var(--cb); }
#site .lkpop .lkpop-k { margin: 0 auto 6px; font-family: 'JetBrains Mono', monospace; font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--cb); }
#site .lkpop .lkpop-n { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--k-line, rgba(11,27,51,.1)); font-size: 14px; }
#site .lkpop-b { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
/* the popup's two buttons: smaller than the page buttons and identical in size, the Close one a quiet outline (a <button> otherwise picks up the browser's grey fill) */
#site .lkpop-b .btn { padding: 9px 18px; font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.3; border-radius: 6px; border: 1px solid transparent; box-shadow: none; cursor: pointer; }
#site .lkpop-b .btn.dk { background: #fff; border-color: rgba(11,27,51,.2); color: var(--nvy); }
#site .lkpop-b .btn.dk:hover { background: rgba(11,27,51,.05); }
#site .lkpop-x { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; color: #55657D; cursor: pointer; }
#site .lkpop-x:hover { background: rgba(11,27,51,.06); color: var(--nvy); }
#site .lkpop-x svg { display: block; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
@media (prefers-reduced-motion: reduce) {
#site .fwlk i { transition: none; }
}
/* ---- card 08's picture (The Espresso Den): a drawn preview of the storefront in its own
   colours, under one fixed blur (never animated) ---- */
#site .edpv { aspect-ratio: 600 / 380; border-radius: 14px; overflow: hidden; background: #faf8f3; padding: 4% 5%; display: grid; grid-template-rows: auto 1fr auto; gap: 6%;
  box-shadow: 0 30px 60px -34px rgba(11,27,51,.4); filter: blur(3px); opacity: .85; }
#site .edpv i { display: block; border-radius: 4px; background: #e9dfd2; }
#site .edpv-nav { display: flex; align-items: center; gap: 5%; }
#site .edpv-nav i { height: 9px; width: 9%; }
#site .edpv-nav .lg { width: 14%; height: 16px; background: #402d23; margin-right: auto; }
#site .edpv-nav .cta { width: 13%; height: 20px; background: #c25f4d; border-radius: 100px; }
#site .edpv-hero { display: grid; align-content: center; gap: 9px; padding: 0 0 0 2%; border-radius: 10px; background: linear-gradient(120deg, #402d23, #6b4a38); padding: 6%; }
#site .edpv-hero .h1 { width: 62%; height: 18px; background: #faf8f3; }
#site .edpv-hero .h2 { width: 44%; height: 18px; background: #f0c9b8; }
#site .edpv-hero .p { width: 52%; height: 8px; background: rgba(250,248,243,.5); }
#site .edpv-hero .btn { width: 20%; height: 20px; background: #c25f4d; border-radius: 100px; margin-top: 6px; }
#site .edpv-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4%; }
#site .edpv-cards span { display: grid; gap: 6px; padding: 6px; border-radius: 8px; background: #fff; }
#site .edpv-cards .im { height: 46px; background: #d9c4b0; }
#site .edpv-cards i { height: 7px; }
#site .edpv-cards .s { width: 60%; background: #c25f4d; opacity: .6; }
/* ---- card 06 Avalanche: a personal project, not client work (James 2026-10-18). The row sits on
   its own soft ice panel with hairline crosshair corners (an approved exception to the no-tint rule:
   one card, not a band), a "Personal project" label on the number line, a drawn picture (blocks
   tumbling down a stepped slope, falling in once when the row reveals, none under reduced motion)
   and a "Coming soon" line in the link's place. No page yet: once one exists, make div.avl an
   a.fwshot and swap .fwsoon for the usual a.go (see the comment in case-studies.html) ---- */
#site .fwrow-pp { position: relative; padding: clamp(18px, 3vw, 40px); border: 1px solid rgba(44,95,216,.16);
  background: linear-gradient(135deg, #EDF2FD 0%, #F5F8FE 55%, #EAF0FC 100%); }
#site .fwrow-pp::before, #site .fwrow-pp::after { content: ""; position: absolute; width: 13px; height: 13px; pointer-events: none; opacity: .7;
  background: linear-gradient(var(--cb), var(--cb)) center / 13px 1px no-repeat, linear-gradient(var(--cb), var(--cb)) center / 1px 13px no-repeat; }
#site .fwrow-pp::before { top: -7px; left: -7px; }
#site .fwrow-pp::after { bottom: -7px; right: -7px; }
#site .fwrow-pp .fwnum::after { background: rgba(44,95,216,.2); }
#site .fwpp { display: inline-flex; align-items: center; gap: 8px; padding: 5px 11px; border-radius: 100px; border: 1px solid rgba(44,95,216,.24); background: #fff;
  font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--cb); }
#site .fwpp::before { content: ""; width: 7px; height: 7px; border-radius: 1.5px; background: var(--cb); }
#site .avl { overflow: hidden; border-radius: 14px; aspect-ratio: 600 / 380; background: var(--nvy); box-shadow: 0 30px 60px -34px rgba(11,27,51,.45); }
#site .avl svg { display: block; width: 100%; height: 100%; }
#site .avl-ridge { fill: rgba(126,164,246,.07); stroke: rgba(126,164,246,.38); stroke-width: 1; }
#site .avl-top rect { fill: #fff; }
#site .avl-b rect { transform-box: fill-box; transform-origin: center; transform: rotate(var(--r)); opacity: var(--o, 1); }
#site .avl-b .c { fill: var(--cb); }
#site .avl-b .l { fill: #7EA4F6; }
#site .avl-b .w { fill: #fff; }
html.js-anim #site .fwrow-pp:not(.in) .avl-b rect { opacity: 0; }
html.js-anim #site .fwrow-pp.in .avl-b rect { animation: avlfall 1.1s cubic-bezier(.3,.75,.25,1) calc(.35s + var(--d, 0s)) both; }
#site .fwsoon { order: 2; display: inline-flex; align-items: center; gap: 9px; margin: 20px 0 0; padding-bottom: 7px; font-size: 14px; font-weight: 600; letter-spacing: -.01em; color: #55657D; }
#site .fwsoon svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) {
  html.js-anim #site .fwrow-pp .avl-b rect, html.js-anim #site .fwrow-pp:not(.in) .avl-b rect { animation: none; opacity: var(--o, 1); }
}
#site .fwrow[hidden] { display: none !important; }
@keyframes avlfall { from { opacity: 0; transform: translate(-64px, -32px) rotate(calc(var(--r) - 150deg)); } }