/* Selected work, scroll-driven (2026-10-02). As the visitor scrolls, the stage stays pinned, the device swaps from site
   to site, each tall screenshot scrolls in step, and the whole section's colors flow from one project's palette into the
   next (set by work.js as CSS variables). Phones and reduced motion get a stacked, still version. */
@property --bg { syntax: '<color>'; inherits: true; initial-value: #eef0eb; }
@property --fg { syntax: '<color>'; inherits: true; initial-value: #14213d; }
@property --accent { syntax: '<color>'; inherits: true; initial-value: #f2b632; }
.work {
  --bg: #eef0eb; --fg: #14213d; --accent: #f2b632;
  --ease: cubic-bezier(.22, .61, .36, 1);
  position: relative; background: var(--bg); color: var(--fg);
  padding: clamp(4.5rem, 9vw, 7rem) 0 clamp(3rem, 6vw, 4.5rem);
  transition: --bg .9s var(--ease), --fg .9s var(--ease), --accent .9s var(--ease);
}
.work__head { position: relative; z-index: 2; }
.shead--work { margin-bottom: clamp(1rem, 3vw, 2rem); }
.shead--work h2, .shead--work > p:last-child { color: var(--fg); }
.shead--work > p:last-child { opacity: .78; }
.shead--work .shead__no { background: var(--fg); color: var(--bg); }
.work__word { position: relative; display: inline-block; }
.work__word::after { content: ""; position: absolute; left: 0; right: 0; bottom: .02em; height: .16em; background: var(--accent); transform: scaleX(var(--word, 0)); transform-origin: left; }

/* the pinned stage */
/* --n lives here, not in a style attribute: jaraf.net's CSP (style-src 'self') blocks inline styles */
.showcase { --n: 5; position: relative; height: calc(var(--n) * 100vh + 85vh); }   /* +85: the last project gets a full turn on stage */
.stage { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; }
.stage__grid { display: grid; grid-template-columns: 11rem minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(1.5rem, 3.5vw, 3.5rem); align-items: center; padding-top: 4.5rem; }

/* progress rail */
.rail { position: relative; align-self: center; }
.rail ol { list-style: none; margin: 0; padding: 0 0 0 1.1rem; display: grid; gap: .9rem; }
.rail__track { position: absolute; left: 0; top: .2rem; bottom: .2rem; width: 2px; background: color-mix(in srgb, var(--fg) 18%, transparent); }
.rail__fill { position: absolute; inset: 0 0 auto 0; height: calc(var(--progress, 0) * 100%); background: var(--accent); }
.rail a { display: block; text-decoration: none; font: 500 .74rem/1.25 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--fg); opacity: .45; transition: opacity .25s var(--ease), transform .25s var(--ease); }
.rail a b { display: block; font-weight: 500; color: var(--accent); margin-bottom: .1rem; }
.rail a:hover, .rail a:focus-visible { opacity: .85; }
.rail a.is-active { opacity: 1; transform: translateX(.3rem); }
.rail a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* the device: a desktop frame with a phone leaning on it */
.device { position: relative; perspective: 1400px; }
.frame { position: relative; background: #fff; border: 2px solid var(--fg); box-shadow: 10px 10px 0 var(--accent); transform-origin: 50% 60%; }
.frame.is-swap { animation: frame-swap .9s var(--ease); }
@keyframes frame-swap { 0% { transform: none; } 35% { transform: perspective(1400px) rotateY(-5deg) rotateX(2deg) scale(.965); } 100% { transform: none; } }
.frame__bar { display: flex; align-items: center; gap: .38rem; padding: .55rem .8rem; background: #eef0eb; border-bottom: 2px solid #14213d; font: 500 .74rem/1 var(--mono); color: #14213d; }
.frame__bar i { width: .62rem; height: .62rem; border-radius: 50%; border: 1.5px solid #14213d; }
.frame__bar i:nth-child(1) { background: #e0614f; } .frame__bar i:nth-child(2) { background: #f2b632; } .frame__bar i:nth-child(3) { background: #5fbf7a; }
.frame__url { margin-left: .5rem; font-weight: 500; }
.frame__screens { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #0d1426; }
.screen { position: absolute; inset: 0; margin: 0; clip-path: inset(100% 0 0 0); }
.screen.is-in { animation: wipe-up .85s var(--ease) forwards; }
@keyframes wipe-up { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
.screen.is-in img { animation: settle 1.1s var(--ease); }
@keyframes settle { from { scale: 1.08; } to { scale: 1; } }
.screen img { width: 100%; height: auto; will-change: transform; }
.screen:not(.screen--pan) img { height: 100%; object-fit: cover; object-position: top; }
.phone { position: absolute; right: -1.8rem; bottom: -2.4rem; width: clamp(6.5rem, 10vw, 9rem); aspect-ratio: 9 / 18; border: 6px solid #090c14; border-radius: 1.4rem; overflow: hidden; background: #000; box-shadow: 0 1.2rem 2.4rem rgba(0, 0, 0, .45); transform: rotate(4deg); transition: transform .45s var(--ease); }
.device:hover .phone { transform: rotate(0deg) translateY(-.4rem); }
.phone__screens { position: relative; width: 100%; height: 100%; }
.phone__screens img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; clip-path: inset(100% 0 0 0); }
.phone__screens img.is-in { animation: wipe-up .7s var(--ease) .14s forwards; }

/* the words, one panel per project */
.copy { position: relative; min-height: 26rem; }
.work.is-live .panel { position: absolute; inset: 0 0 auto 0; visibility: hidden; }
.work.is-live .panel > * { opacity: 0; transform: translateY(1.4rem); }
.work.is-live .panel.is-active { visibility: visible; }
.work.is-live .panel.is-active > * { opacity: 1; transform: none; transition: opacity .55s var(--ease), transform .55s var(--ease); }
.work.is-live .panel.is-active > :nth-child(2) { transition-delay: .18s; } .work.is-live .panel.is-active > :nth-child(3) { transition-delay: .24s; } .work.is-live .panel.is-active > :nth-child(4) { transition-delay: .30s; } .work.is-live .panel.is-active > :nth-child(5) { transition-delay: .36s; } .work.is-live .panel.is-active > :nth-child(6) { transition-delay: .42s; } .work.is-live .panel.is-active > :nth-child(7) { transition-delay: .48s; }
.work.is-live .panel.is-leaving { visibility: visible; }
.work.is-live .panel.is-leaving > * { opacity: 0; transform: translateY(-1rem); transition: opacity .25s var(--ease), transform .3s var(--ease); }
.panel__shot { display: none; }
.panel__kind { margin: 0 0 .55rem; font: 500 .74rem/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.panel h3 { margin: 0 0 .7rem; font: 700 clamp(2rem, 3.4vw, 3rem)/.98 var(--cond); text-transform: uppercase; letter-spacing: -.01em; }
.panel__line { margin: 0 0 1.1rem; opacity: .85; max-width: 30rem; }
.panel__tags { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0 0 1.2rem; }
.panel__tags li { font: 500 .72rem/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; padding: .45rem .6rem; border: 1px solid color-mix(in srgb, var(--fg) 35%, transparent); }
.panel__quote { margin: 0 0 1.1rem; font: italic 600 1.2rem/1.3 var(--cond); }
.panel__quote span { display: block; margin-top: .25rem; font: 400 .74rem var(--mono); font-style: normal; letter-spacing: .06em; text-transform: uppercase; opacity: .65; }
.panel__stats { display: flex; flex-wrap: wrap; margin: 0 0 1.3rem; border-top: 1px solid color-mix(in srgb, var(--fg) 22%, transparent); }
.panel__stats div { padding: .75rem 1.2rem .1rem 0; margin-right: 1.2rem; border-right: 1px solid color-mix(in srgb, var(--fg) 14%, transparent); }
.panel__stats div:last-child { border-right: 0; }
.panel__stats dt { font: 500 .66rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; opacity: .65; margin-bottom: .35rem; }
.panel__stats dd { margin: 0; font: 700 2.1rem/1 var(--cond); font-variant-numeric: tabular-nums; }
.panel__link { position: relative; display: inline-flex; gap: .35rem; align-items: baseline; font: 600 .95rem/1.2 var(--cond); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; color: var(--fg); padding-bottom: .22rem; }
.panel__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform .25s var(--ease); }
.panel__link:hover::after, .panel__link:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.panel__link span { transition: transform .25s var(--ease); }
.panel__link:hover span { transform: translate(2px, -2px); }
.panel__link:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.panel:not(.is-active) .panel__link { pointer-events: none; }

.work__note { position: relative; z-index: 2; margin-top: 2rem; font: 400 .74rem/1.5 var(--mono); opacity: .6; }

/* stacked, still version: phones, small windows, reduced motion, and no JavaScript */
.work:not(.is-live) .showcase { height: auto; }
.work:not(.is-live) .stage { position: static; height: auto; overflow: visible; display: block; }
.work:not(.is-live) .stage__grid { display: block; padding-top: 0; }
.work:not(.is-live) .rail, .work:not(.is-live) .device { display: none; }
.work:not(.is-live) .copy { min-height: 0; display: grid; gap: 1.5rem; }
.work:not(.is-live) .panel { position: relative; opacity: 1; transform: none; padding: 1.4rem; background: var(--pbg, #14213d); color: var(--pfg, #eef0eb); --fg: var(--pfg, #eef0eb); --accent: var(--pacc, #f2b632); border: 2px solid var(--pfg, #eef0eb); box-shadow: 6px 6px 0 var(--pacc, #f2b632); }
.work:not(.is-live) .panel .panel__link { pointer-events: auto; }
.work:not(.is-live) .panel__shot { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border: 2px solid var(--pfg, #eef0eb); margin-bottom: 1.2rem; }


/* Phones and narrow windows: the same scroll showcase, stacked for a tall screen (Paul, 2026-10-02: on the phone "the
   products don't scroll"). Progress rail across the top, the site preview below it, the project's story under that. */
@media (max-width: 62rem) {
  .work.is-live .showcase { height: calc(var(--n) * 100svh + 85svh); }
  .work.is-live .stage { height: 100svh; align-items: flex-start; }
  .work.is-live .stage__grid { grid-template-columns: minmax(0, 1fr); gap: .9rem; padding-top: 5rem; align-content: start; }
  .work.is-live .rail ol { display: flex; justify-content: space-between; gap: .4rem; padding: 0 0 .55rem; }
  .work.is-live .rail a { font-size: 0; transform: none; padding: .2rem 0; }
  .work.is-live .rail a b { font-size: .78rem; margin: 0; }
  .work.is-live .rail a.is-active b { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
  .work.is-live .rail__track { top: auto; bottom: 0; left: 0; right: 0; width: auto; height: 2px; }
  .work.is-live .rail__fill { inset: 0 auto 0 0; height: 100% !important; width: calc(var(--progress, 0) * 100%); }
  .work.is-live .phone { display: none; }
  .work.is-live .frame { box-shadow: 6px 6px 0 var(--accent); }
  .work.is-live .frame__bar { padding: .45rem .6rem; font-size: .68rem; }
  .work.is-live .copy { min-height: 0; }
  .work.is-live .panel h3 { font-size: clamp(1.6rem, 7vw, 2.1rem); margin-bottom: .45rem; }
  .work.is-live .panel__kind { margin-bottom: .35rem; }
  .work.is-live .panel__line { font-size: .95rem; line-height: 1.5; margin-bottom: .7rem; }
  .work.is-live .panel__tags { display: none; }
  .work.is-live .panel__quote { font-size: 1rem; margin-bottom: .7rem; }
  .work.is-live .panel__stats { margin-bottom: .8rem; }
  .work.is-live .panel__stats div { padding-top: .5rem; }
  .work.is-live .panel__stats dd { font-size: 1.6rem; }
}

/* The phone stays in front (2026-10-14, Paul: "the phone keeps hiding behind the actual website screen"). work.js raises
   each new screenshot's z-index (2, 4, 6 ...); the frame wasn't its own stacking context at rest, so those screenshots
   climbed above the phone, and only came back under it while the frame's tilt animation ran. */
.frame { isolation: isolate; }
.phone { z-index: 2; }

/* Craft type for the showcase (2026-10-14), matching jaraf.css. */
.panel h3 { text-transform: none; font-weight: 600; letter-spacing: -.02em; font-variation-settings: "SOFT" 100, "WONK" 1; }
.panel__stats dd { font-weight: 600; font-variant-numeric: lining-nums tabular-nums; font-variation-settings: "SOFT" 60; }
.panel__quote { font-style: normal; font-weight: 500; font-variation-settings: "SOFT" 100, "WONK" 1; }
.panel__link { font-family: var(--sans); font-weight: 700; letter-spacing: .08em; }
.rail a, .panel__kind, .panel__tags li, .panel__quote span, .panel__stats dt { font-weight: 700; letter-spacing: .04em; }