/* The Work page (card 1d). Tokens only (CONTRACT.md): font-size through var(--fs-N), yellow only on .btn-primary, no raw colours.
   Direction: "one sample, shown properly": the blueprint panel (the kit's notch, used once) holds Hollowbrook on a code-drawn laptop
   and phone; below it the making-of reads as evidence (four stills, one before/after, six 3D frames), each labelled and plain. */

img[hidden] { display: none; }   /* site.css gives every img display:block, which would beat the hidden attribute an onerror sets */

/* ---------- page top ---------- */
.work-top { padding-top: var(--space-8); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.work-top .lead { max-width: 34ch; }

/* ---------- 1. Hollowbrook, big (the notched panel, once) ---------- */
.work-hb { margin-top: var(--space-7); }
.work-hb-panel { display: grid; grid-template-columns: minmax(0, 1fr); }
.work-hb-notch { padding-top: var(--space-6); gap: var(--space-4); justify-self: start; }
.work-hb-line { font-size: var(--fs-5); line-height: 1.4; color: var(--text-soft); max-width: 30ch; }
.work-hb-open { align-self: flex-start; }
.work-hb-note { max-width: 46ch; font-size: var(--fs-8); line-height: 1.5; color: var(--muted-dark); }

.work-hb-stage { padding: var(--space-6) var(--space-6) var(--space-6); }
.devices { display: grid; grid-template-columns: minmax(0, 760px) auto; align-items: end; max-width: 100%; width: max-content; }
.dev { margin: 0; }
/* the code-drawn frames: one 4 px stroke, radii on the 4 px grid, nothing past the edge of what it frames */
.dev-screen { border: 4px solid var(--ink); background: var(--slate); overflow: hidden; }
.dev-screen img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.dev-laptop .dev-screen { aspect-ratio: 16 / 10; border-radius: 16px; }
.dev-base { display: block; width: 100%; height: 4px; margin-top: var(--space-2); border-radius: 4px; background: var(--ink); }
.dev-phone { position: relative; z-index: 1; width: 150px; margin-left: -32px; }   /* 180 and -40 from 980 up (VISUAL-PLAN spot 2) */
.dev-phone .dev-screen { aspect-ratio: 9 / 19.5; border-radius: 16px; box-shadow: 0 0 0 8px var(--blueprint); }   /* a paper-coloured cut where it crosses the laptop */

.work-hb-facts { display: flex; flex-direction: column; gap: var(--space-4); padding: 0 var(--space-6) var(--space-6); }
.work-hb-facts-title { font-family: var(--font-display); font-size: var(--fs-4); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; }
.work-hb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.work-hb-list li { position: relative; padding-left: var(--space-5); font-size: var(--fs-7); line-height: 1.45; }
.work-hb-list li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
.work-hb-speed { font-size: var(--fs-8); line-height: 1.45; color: var(--slate); }

@media (min-width: 980px) {   /* the title and what is on it side by side; the devices centred below, across the whole panel */
  .work-hb-panel { grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); grid-template-areas: "notch facts" "stage stage"; }
  .work-hb-notch { grid-area: notch; }
  .work-hb-stage { grid-area: stage; }
  .work-hb-facts { grid-area: facts; align-self: start; padding: var(--space-6) var(--space-6) 0 var(--space-6); }
  .devices { margin-inline: auto; }
  .dev-phone { width: 180px; margin-left: -40px; }
}

/* phone: the panel runs edge to edge so the laptop screenshot can use the whole width (at least 288 px at 320); the phone frame sits below it */
@media (max-width: 639.98px) {
  .work-hb { margin-top: var(--space-6); }
  .work-hb-panel { margin-inline: calc(-1 * var(--gutter)); border-radius: 0; }
  .work-hb-notch { padding: var(--space-5) var(--space-5) var(--space-5) var(--gutter); }
  .work-hb-notch::after { display: none; }   /* the panel starts at the screen edge, so the inverse corner under the notch would leave a dark wedge: the edge below the notch is square */
  .work-hb-line { max-width: none; }
  .work-hb-stage { padding: var(--space-4) var(--space-2) var(--space-5); }
  .devices { grid-template-columns: minmax(0, 1fr); width: 100%; justify-items: center; }
  .dev-laptop { width: 100%; }
  .dev-phone { width: 180px; margin: var(--space-6) 0 0; }
  .work-hb-facts { padding: 0 var(--gutter) var(--space-6); }
}

/* ---------- 2. How it was made ---------- */
.work-made { display: flex; flex-direction: column; gap: var(--space-5); }
.work-made-intro { max-width: 58ch; color: var(--text-soft); }

.made-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); }
.made-item { display: flex; flex-direction: column; gap: var(--space-2); }
/* a graphite mat, one tone step from the ground, instead of an outline: a still never melts into the page, and no thin rules (tells.md) */
.made-still { aspect-ratio: 16 / 10; padding: 6px; border-radius: var(--r-inner); background: var(--graphite); overflow: hidden; margin-bottom: var(--space-1); }
.made-still img { width: 100%; height: 100%; border-radius: 8px; object-fit: cover; object-position: 50% 0; }
.made-label { color: var(--paper); }
.made-line { font-size: var(--fs-8); line-height: 1.5; color: var(--text-soft); max-width: 36ch; }
.made-strip:focus-visible { outline: 3px solid var(--focus); outline-offset: 6px; border-radius: var(--r-inner); }

/* under 1100: the stills scroll sideways inside their own box (the box runs to the screen edges; the page itself never widens) */
@media (max-width: 1099.98px) {
  .made-strip { margin-inline: calc(-1 * var(--gutter)); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); padding-bottom: var(--space-3); }
  .made-strip:focus-visible { outline-offset: -4px; }
  /* a grid of fixed tracks, not a flex row: its width comes from the tracks, so WebKit and Chromium agree where the strip ends */
  .made-list { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(340px, 80vw); gap: var(--space-4); padding-inline: var(--gutter); width: max-content; }
  .made-item { scroll-snap-align: start; }
}

.made-3d { margin-top: var(--space-7); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 720px); gap: var(--space-7); align-items: start; }
.made-3d-text { display: flex; flex-direction: column; gap: var(--space-3); max-width: 44ch; padding-top: var(--space-2); }
.made-3d-text p:not(.small) { color: var(--text-soft); }
/* side by side only from 1200: below it the text column would be a sliver beside a 720 px slider (76 px wide at 900), so the text sits above the slider */
@media (max-width: 1199.98px) { .made-3d { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); margin-top: var(--space-6); } .made-3d .cmp { max-width: 720px; } }

/* the before/after slider: two plain panes without script; one panel with a draggable line when work.js has started it */
.cmp { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); --pos: 50%; }
.cmp-pane { position: relative; margin: 0; border-radius: var(--r-card); overflow: hidden; background: var(--graphite); aspect-ratio: 4 / 3; }
.cmp-pane img { width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; user-select: none; }
.cmp-label {
  position: absolute; left: var(--space-3); bottom: var(--space-3); z-index: 2;
  padding: 6px 12px; border-radius: var(--r-pill); background: var(--ink); color: var(--paper);
  font-size: var(--fs-8); font-weight: 600; line-height: 1.2; white-space: nowrap;
}
.cmp-label-r { left: auto; right: var(--space-3); }
.cmp-sm { display: none; }
@media (max-width: 519.98px) { .cmp-lg { display: none; } .cmp-sm { display: inline; } }
@media (min-width: 640px) and (max-width: 1199.98px) { .cmp:not(.is-live) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cmp-handle { display: none; }
.cmp-hint { display: none; }   /* only said when the line is there: work.js marks the block cmp-ready */
.cmp-ready .cmp-hint { display: inline; }

.cmp.is-live { display: block; position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-card); overflow: hidden; background: var(--graphite); touch-action: pan-y; cursor: ew-resize; user-select: none; -webkit-user-select: none; }
.cmp.is-live .cmp-pane { position: absolute; inset: 0; border-radius: 0; aspect-ratio: auto; background: transparent; }   /* transparent: the after pane lies over the before pane */
.cmp.is-live .cmp-after img { clip-path: inset(0 0 0 var(--pos)); }
.cmp.is-live .cmp-handle {
  display: block; position: absolute; z-index: 3; top: 0; bottom: 0; left: var(--pos); width: 44px; margin-left: -22px;
  cursor: ew-resize; touch-action: pan-y;
}
.cmp-handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; margin-left: -1.5px; background: var(--paper); box-shadow: 0 0 0 1px var(--ink); }
.cmp-knob {
  position: absolute; left: 0; top: 50%; width: 44px; height: 44px; margin-top: -22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--paper); box-shadow: 0 0 0 3px var(--paper);
  transition: transform var(--t-press) var(--ease-out);
}
.cmp.is-drag .cmp-knob { transform: scale(1.08); }
.cmp-handle:focus-visible { outline: none; }
.cmp-handle:focus-visible .cmp-knob { outline: 3px solid var(--paper); outline-offset: 7px; }
/* one picture only (the other missing or failed): shown still, no handle */
.cmp.is-single { display: block; aspect-ratio: auto; cursor: auto; touch-action: auto; }
.cmp.is-single .cmp-pane { position: relative; inset: auto; aspect-ratio: 4 / 3; border-radius: var(--r-card); }
.cmp.is-single .cmp-pane.is-empty { display: none; }
.cmp.is-single .cmp-after img { clip-path: none; }
.cmp.is-single .cmp-handle { display: none; }

.made-seq { margin-top: var(--space-7); display: flex; flex-direction: column; gap: var(--space-3); }
.made-seq-line { color: var(--text-soft); max-width: 56ch; }
.seq-grid { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); }
.seq-item figure { margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.seq-tile { aspect-ratio: 3 / 2; padding: 4px; border-radius: var(--r-inner); background: var(--graphite); overflow: hidden; }
.seq-tile img { width: 100%; height: 100%; border-radius: 10px; object-fit: cover; }
.seq-item figcaption { font-size: var(--fs-8); line-height: 1.35; color: var(--text-soft); }
@media (min-width: 600px) { .seq-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .seq-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* ---------- 3. Coming later (the Pro slot): a quiet tone-step panel, no dashes ---------- */
.later-panel { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-7) var(--space-6); border-radius: var(--r-card); background: var(--graphite); }
.later-panel p:not(.eyebrow) { max-width: 46ch; color: var(--text-soft); }
@media (max-width: 639.98px) { .later-panel { padding: var(--space-6) var(--space-5); } }

/* ---------- 4. Closing ---------- */
.work-close { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-5) var(--space-6); }