/* OPDUBS.COM — project pages (QiMD first). Bob, V3, 2026-10-23.
   Loaded after site.css. Colour hierarchy (Oliver, 2026-10-23, for every project page):
   gold = small labels (section + meta labels), their dashes, numbers (18, 5.0).
   red  = page title (h1), the lead highlight in headlines, meta side bar. Big type / graphics only.
   blue = breadcrumb ("sitemap") + its dash, secondary headline highlights (First / Last), list dashes, hover.
   No cream labels, no small red text. */

:root {
  --gold: #D9A53A;        /* also in site.css (shared token); repeated so this file stands alone */
  --red-brand: #C8202F;   /* rules / bars and 24px+ type only */
  --blue-id: #4A8AE8;
  --ui: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body2: #D9D4CA;
  --mute2: #9A978F;
  --qbrown: rgba(101, 83, 79, .93);
  --qcream: #E3DAC9;
}

.proj h1, .proj h2 { font-family: var(--text); font-weight: 400; letter-spacing: 0; text-wrap: balance; }
.proj .gold { color: var(--gold); }
.proj .blue { color: var(--blue-id); }
.proj .red, .proj h1 { color: var(--red-brand); }

/* small caps labels */
.k { font: 600 11px/1.3 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--mute2); margin: 0; }
.k-crumb { color: var(--blue-id); display: flex; align-items: center; gap: 12px; }
.k-crumb::before { content: ""; width: 32px; height: 2px; background: var(--blue-id); flex: none; }
.k-sec { color: var(--gold); display: flex; align-items: center; gap: 10px; font-size: 13px; letter-spacing: .12em; }
.k-sec::before { content: ""; width: 24px; height: 2px; background: var(--gold); flex: none; }
@media (min-width: 900px) {
  .k { font-size: 12px; }
  .k-sec { font-size: 15px; gap: 12px; }
  .k-sec::before { width: 32px; }
}

.proj-rule { height: 1px; background: var(--rule); border: 0; margin: 0 var(--pad); }
@media (min-width: 900px) { .proj-rule { max-width: calc(var(--max)); margin: 0 auto; width: calc(100% - 2 * var(--pad)); } }

/* ---------- Hero ---------- */
.p-hero { display: flex; flex-direction: column; }
.p-hero .photo { order: -1; position: relative; overflow: hidden; height: min(560px, 144vw); }
.photo img.bg { width: 100%; height: 100%; object-fit: cover; }
.p-hero .logo { position: absolute; width: 96px; right: 24px; top: 26px; height: auto; }
.p-hero .txt { padding: 26px var(--pad) 0; }
.p-hero h1 { font-size: 52px; line-height: 1; margin: 10px 0 14px; }
.p-hero .lede { font-size: 17px; line-height: 1.45; margin: 0; }

.meta-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 22px 0 0;
  border-left: 2px solid var(--red-brand); padding-left: 14px;
  font: 13px/1.4 var(--ui); color: var(--cream);
}
.meta-grid .k { margin-bottom: 4px; color: var(--gold); }
.meta-grid .m-role { grid-column: 1; grid-row: 1; }
.meta-grid .m-rate { grid-column: 2; grid-row: 1; }
.meta-grid .m-eps { grid-column: 1; grid-row: 2; }
.meta-grid .links { grid-column: 2; grid-row: 2; align-self: end; }
.apple { width: 13px; height: 13px; vertical-align: -1px; margin-right: 5px; fill: currentColor; }
.y-long { display: none; }

.links { display: flex; gap: 12px; align-items: center; margin: 0; padding: 0; list-style: none; }
.ico {
  width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid #3A3A44;
  display: inline-flex; align-items: center; justify-content: center; color: var(--cream); text-decoration: none;
  transition: border-color .15s, color .15s;
}
.ico svg { width: 21px; height: 21px; fill: currentColor; }
.ico:hover, .ico:focus-visible { border-color: var(--blue-id); color: var(--blue-id); }
.links-note { font: 12px var(--ui); color: var(--mute2); margin-left: 6px; display: none; }

@media (min-width: 900px) {
  .p-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 480px); gap: 64px; align-items: end; padding-block: 40px 80px; }
  .p-hero .photo { order: 0; height: 720px; border-radius: 4px; }
  .p-hero .logo { width: 118px; right: 34px; top: 38px; }
  .p-hero .txt { padding: 0; }
  .p-hero h1 { font-size: 88px; margin: 16px 0 22px; }
  .p-hero .lede { font-size: 22px; max-width: 540px; }
  .meta-grid { grid-template-columns: repeat(3, auto); justify-content: start; gap: 30px; margin: 34px 0 32px; padding-left: 18px; font-size: 14px; }
  .meta-grid .m-role, .meta-grid .m-rate, .meta-grid .m-eps { grid-row: 1; }
  .meta-grid .m-role { grid-column: 1; } .meta-grid .m-eps { grid-column: 2; } .meta-grid .m-rate { grid-column: 3; }
  .meta-grid .k { margin-bottom: 6px; }
  .meta-grid .links { display: none; }
  .links.desk { display: flex; gap: 14px; }
  .links-note { display: inline; }
  .y-long { display: inline; } .y-short { display: none; }
}
.links.desk { display: none; }
@media (min-width: 900px) { .links.desk { display: flex; } }

/* ---------- My Role ---------- */
.p-role { padding-block: 48px; }
.p-role .photo { height: min(470px, 120vw); overflow: hidden; }
.p-role .photo img { object-position: 30% 50%; }
.p-role .txt { padding: 24px var(--pad) 0; }
.p-role h2 { font-size: 28px; line-height: 1.2; margin: 10px 0 14px; }
.p-role p:not(.k) { font-size: 16px; line-height: 1.55; color: var(--body2); margin: 0 0 12px; }
.p-role ul { font: 15px/1.85 var(--ui); color: #C9C4BA; margin: 6px 0 0; }
.p-role li .blue { margin-right: 4px; }
@media (min-width: 900px) {
  .p-role { display: grid; grid-template-columns: minmax(320px, 480px) minmax(0, 1fr); gap: 72px; align-items: center; padding-block: 88px; }
  .p-role .photo { height: 640px; border-radius: 4px; }
  .p-role .txt { padding: 0; }
  .p-role h2 { font-size: 42px; line-height: 1.15; margin: 14px 0 20px; }
  .p-role p:not(.k) { font-size: 19px; line-height: 1.6; margin-bottom: 16px; }
  .p-role ul { font-size: 17px; margin-top: 8px; }
}

/* ---------- Clips ---------- */
.p-clips { padding-block: 48px; }
.p-clips h2 { font-size: 28px; margin-top: 8px; }
.clips-head .cap2 { font: 12px var(--ui); color: var(--mute2); margin: 8px 0 0; }
.cap2 svg { width: 13px; height: 13px; vertical-align: -2px; fill: currentColor; }
.cap-desk { display: none; }
.clips {
  display: flex; gap: 12px; margin: 18px 0 0; padding: 0 var(--pad); list-style: none;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--pad);
  scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
}
.clips::-webkit-scrollbar { display: none; }
.clips > li { flex: 0 0 210px; scroll-snap-align: start; }
.clip { position: relative; aspect-ratio: 9 / 16; border-radius: 10px; overflow: hidden; background: #2A2321; isolation: isolate; }
.clip video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.clip-hit {
  position: absolute; inset: 0; z-index: 1; width: 100%; padding: 0; margin: 0; border: 0; background: none;
  color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: 10px;
}
.clip-hit:focus-visible { outline: 2px solid var(--blue-id); outline-offset: -2px; }
.veil {
  position: absolute; inset: 0; background: var(--qbrown);
  display: flex; flex-direction: column; justify-content: space-between; padding: 16px 14px;
  transition: opacity .35s ease-out;
}
.veil img { width: 40px; height: auto; }
.veil .t { display: block; font-family: var(--text); font-size: 18px; line-height: 1.25; color: var(--qcream); }
.veil .t i { font-style: normal; opacity: .6; }
.veil .g { display: block; font: 11px var(--ui); color: #CDBFB2; margin-top: 6px; }
.play {
  width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--qcream);
  display: flex; align-items: center; justify-content: center; color: var(--qcream);
}
.play svg { width: 12px; height: 12px; fill: currentColor; margin-left: 2px; }
.clip.on .veil { opacity: 0; }
.spk {
  position: absolute; z-index: 2; right: 8px; bottom: 8px; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%; background: rgba(10, 10, 14, .72); color: var(--cream);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  opacity: 0; transition: opacity .25s;
}
.spk svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.spk .w { display: none; } .spk[aria-pressed="true"] .w { display: inline; } .spk[aria-pressed="true"] .x { display: none; }
.spk[aria-pressed="true"] { color: var(--blue-id); }
.clip.on .spk, .spk:focus-visible, .spk[aria-pressed="true"] { opacity: 1; }
.spk:focus-visible { outline: 2px solid var(--blue-id); outline-offset: 2px; }
.clip-dots { display: flex; gap: 2px; justify-content: center; margin-top: 10px; }
.clip-dots button { width: 22px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.clip-dots button::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #44444F; }
.clip-dots button[aria-current="true"]::before { background: var(--cream); }
@media (hover: hover) and (pointer: fine) { .clip:hover .spk { opacity: 1; } }
@media (min-width: 900px) {
  .p-clips { padding-block: 88px; }
  .clips-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
  .p-clips h2 { font-size: 40px; margin-top: 12px; }
  .cap-desk { display: block; font-size: 13px; } .cap-phone { display: none; }
  .clips { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-top: 30px; padding: 0; overflow: visible; }
  .clip-dots { display: none; }
  .veil { padding: 18px 16px; }
  .veil img { width: 46px; }
  .veil .t { font-size: 19px; }
  .veil .g { font-size: 12px; margin-top: 8px; }
  .play { width: 38px; height: 38px; }
  .spk { right: 10px; bottom: 10px; }
}
@media (min-width: 900px) and (max-width: 1180px) { .veil .t { font-size: 16px; } }

/* ---------- Behind the Scenes ---------- */
.p-bts { padding-block: 48px 10px; }
.p-bts .k-sec { margin: 0 0 14px; }
.p-bts .photo { height: min(290px, 74vw); overflow: hidden; }
.p-bts .photo img { object-position: 50% 45%; }
.p-bts .cap3 { font: 12px var(--ui); color: var(--mute2); margin: 8px 0 0; display: none; }
@media (min-width: 900px) {
  .p-bts { padding-block: 88px; }
  .p-bts .k-sec { margin-bottom: 20px; }
  .p-bts .photo { height: 640px; border-radius: 4px; }
  .p-bts .cap3 { display: block; font-size: 13px; margin-top: 10px; }
}

/* ---------- Next project ---------- */
.p-next { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 24px; padding-block: 32px 44px; }
.p-next a { text-decoration: none; color: var(--cream); }
.p-next .nxt { display: block; }
.p-next .nxt .k { margin-bottom: 8px; color: var(--gold); }
.p-next .nxt span:last-child { font-family: var(--text); font-size: 36px; line-height: 1.1; display: inline-block; }
.p-next .nxt:hover span:last-child, .p-next .nxt:focus-visible span:last-child { color: var(--blue-id); }
.p-next .back { font: 13px var(--ui); color: var(--mute2); display: inline-flex; align-items: center; min-height: 44px; }
.p-next .back:hover { color: var(--blue-id); }
@media (min-width: 900px) {
  .p-next { padding-block: 56px 72px; align-items: center; }
  .p-next .nxt span:last-child { font-size: 56px; }
}

/* phone: hero + photos full-bleed, text padded */
@media (max-width: 899px) {
  .proj .wrap.bleed { padding-left: 0; padding-right: 0; }
  .p-clips .clips-head, .p-bts .k-sec, .p-next { padding-left: var(--pad); padding-right: var(--pad); }
}

@media (prefers-reduced-motion: reduce) {
  .veil, .spk, .ico { transition: none; }
  .clips { scroll-behavior: auto; }
}
@media print {
  .clip video, .spk, .clip-dots { display: none !important; }
  .veil { background: #65534F; }
}

/* ==================================================================
   V7 additions (Bob, 2026-10-25): shared components for every project page
   (AI Projects, Behaiya, Mystic Medicine, QiMD, Spyhop, Personal Collection).
   Same tokens as above: gold small labels, red/blue big type only, splashes not boxes.
   ================================================================== */
:root {
  --splash: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(74,138,232,.50), rgba(43,70,120,.30) 45%, rgba(10,10,14,0) 100%);
  --splash-soft: radial-gradient(ellipse 52% 50% at 50% 50%, rgba(74,138,232,.30), rgba(36,49,73,.20) 50%, rgba(10,10,14,0) 100%);
}
.proj h3 { font-family: var(--text); font-weight: 400; letter-spacing: 0; text-wrap: balance; }
/* splashes may bleed past the content edge; clip them at the viewport, never scroll sideways */
main.proj { overflow-x: clip; }
/* clip pips: taller hit area (44px) without changing the look */
.clip-dots button { height: 44px; }

/* ---------- Hero variants: sq = square image (QiMD cover, AI Projects); cmp = device composition ---------- */
.p-hero.sq .photo, .p-hero.cmp .photo { height: auto; border-radius: 0; }
.p-hero.sq .photo { aspect-ratio: 1 / 1; }
.p-hero.cmp .photo { aspect-ratio: 100 / 85; overflow: visible; background: var(--splash); margin: 8px 6px 0; }
.p-hero.cmp .photo.c-mm { aspect-ratio: 100 / 74; }
/* Mystic/Behaiya: the devices cover most of the comp, so the splash sits on a larger layer behind them (Sal V7 review) */
.p-hero.cmp .photo.c-mm { background: none; isolation: isolate; }
.p-hero.cmp .photo.c-mm::before { content: ""; position: absolute; z-index: -1; inset: -12% -8%; background: radial-gradient(ellipse 50% 50% at 50% 54%, rgba(74,138,232,.88), rgba(43,70,120,.52) 48%, rgba(10,10,14,0) 100%); pointer-events: none; }
@media (min-width: 900px) {
  .p-hero.sq, .p-hero.cmp { align-items: center; padding-top: 16px; }
  .p-hero.sq { grid-template-columns: minmax(0, 1fr) 520px; }
  .p-hero.cmp { grid-template-columns: minmax(0, 1fr) 580px; }
  .p-hero.sq .photo { height: auto; border-radius: 4px; }
  .p-hero.cmp .photo { height: auto; margin: 0; }
}
.comp > * { position: absolute; }
.comp .c-wm { left: 3.5%; top: 4.1%; width: 57%; height: auto; filter: drop-shadow(0 0 24px rgba(168,214,255,.18)); }
.c-tab { padding: 2.1%; background: #101116; border-radius: 4.5% / 7%; box-shadow: 0 0 0 1.5px #2c3a55, 0 30px 60px rgba(0,0,0,.5); }
.c-tab img, .c-tab .frost { display: block; width: 100%; height: auto; border-radius: 1.2%; }
.c-ph { padding: 1.1%; background: #000; border-radius: 15% / 7%; box-shadow: 0 0 0 1.5px #3a4a6a, 0 30px 60px rgba(0,0,0,.55); }
.c-ph img, .c-ph .frost { display: block; width: 100%; height: auto; border-radius: 13% / 6%; }
/* Spyhop Hero V5 positions (Oliver approved) */
.c-spy .c-tab { left: 2%; top: 32.9%; width: 70%; }
.c-spy .c-ph { right: 4%; top: 12.9%; width: 31%; }
/* Mystic Medicine + Behaiya: desktop screen behind, phone in front */
.c-mm .c-tab { left: 2%; top: 9%; width: 78%; }
.c-mm .c-ph { right: 3%; top: 21%; width: 25%; }

.pill {
  display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 22px;
  font: 600 14px/1 var(--ui); letter-spacing: .02em; color: var(--blue-id); text-decoration: none;
  border: 1.5px solid var(--blue-id); border-radius: 999px; background: transparent; transition: background .15s, color .15s;
}
.pill:hover, .pill:focus-visible { background: var(--blue-id); color: var(--night); }
.p-hero .pill { margin: 22px 0 8px; }
@media (min-width: 900px) { .p-hero .pill { margin: 0; } }

/* ---------- Generic project sections ---------- */
.p-sec { padding-block: 48px; }
.p-sec h2 { font-size: 28px; line-height: 1.2; margin: 10px 0 14px; }
.p-sec .body, .p-split .body { font-size: 16px; line-height: 1.55; color: var(--body2); margin: 0 0 12px; }
.dash-list { font: 15px/1.85 var(--ui); color: #C9C4BA; margin: 6px 0 0; }
.dash-list .blue { margin-right: 4px; }
@media (min-width: 900px) {
  .p-sec { padding-block: 88px; }
  .p-sec h2 { font-size: 42px; line-height: 1.15; margin: 14px 0 20px; }
  .p-sec .body, .p-split .body { font-size: 19px; line-height: 1.6; margin-bottom: 16px; }
  .dash-list { font-size: 17px; margin-top: 8px; }
}
.p-split { display: grid; gap: 4px; }
@media (min-width: 900px) { .p-split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; align-items: start; } .p-split .body:first-child { margin-top: 14px; } }

/* My Role with a splash stage instead of a photo */
.p-role .photo.stage { overflow: visible; display: flex; align-items: center; justify-content: center; background: var(--splash); }
.frame-ph { width: min(250px, 56%); padding: 8px; border-radius: 40px; background: #000; box-shadow: 0 0 0 1.5px #3a4a6a, 0 30px 60px rgba(0,0,0,.5); }
.frame-ph img, .frame-ph .frost { display: block; width: 100%; height: auto; border-radius: 32px; }
.frame-tab { width: min(360px, 72%); padding: 10px; border-radius: 24px; background: #101116; box-shadow: 0 0 0 1.5px #2c3a55, 0 30px 60px rgba(0,0,0,.5); }
.frame-tab img, .frame-tab .frost { display: block; width: 100%; height: auto; border-radius: 14px; }
@media (min-width: 900px) { .frame-ph { width: 270px; } .frame-tab { width: 380px; } }

/* Numbered three-up (The Work / The Problem) */
.three { display: grid; gap: 0; margin: 28px 0 0; padding: 0; list-style: none; }
.three li { border-top: 1px solid var(--rule); padding: 20px 0 24px; }
.three .n { font: 600 13px var(--ui); letter-spacing: .1em; color: var(--gold); }
.three h3 { font-size: 22px; line-height: 1.25; margin: 8px 0 10px; }
.three p { font: 15px/1.6 var(--ui); color: #BDB8AE; margin: 0; }
@media (min-width: 900px) { .three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 48px; } .three h3 { font-size: 24px; } .three p { font-size: 16px; } }

/* Screens rows: Desktop / Tablet / Phone. Swap an image by replacing the file of the same name. */
.dev-row { margin-top: 30px; }
.dev-row > .k { color: var(--gold); margin: 0 0 4px; }
.shots {
  display: flex; gap: 14px; list-style: none; margin: 0 calc(-1 * var(--pad)); padding: 22px var(--pad) 26px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--pad); scrollbar-width: none; background: var(--splash-soft);
}
.shots::-webkit-scrollbar { display: none; }
.shots > li { flex: 0 0 auto; scroll-snap-align: start; }
.shots.desk > li { width: min(80vw, 520px); }
.shots.tab > li { width: min(54vw, 300px); }
.shots.ph > li { width: min(44vw, 220px); }
.shots.mixed > li:nth-child(1) { width: min(80vw, 520px); } .shots.mixed > li:nth-child(2) { width: min(54vw, 300px); } .shots.mixed > li:nth-child(3) { width: min(40vw, 200px); }
.shots img, .shots .frost { display: block; width: 100%; height: auto; border-radius: 8px; box-shadow: 0 0 0 1px #2c3a55, 0 20px 40px rgba(0,0,0,.45); }
.shots.ph img, .shots .frost.r-ph { border-radius: 22px; }
.shots figure { margin: 0; }
.shots figcaption { font: 12px var(--ui); color: var(--mute2); margin-top: 10px; }
@media (min-width: 900px) {
  .shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin: 0; padding: 40px 32px 44px; overflow: visible; }
  .shots > li, .shots.desk > li, .shots.tab > li, .shots.ph > li, .shots.mixed > li:nth-child(n) { width: auto; }
  .shots.tab { padding-inline: 10%; } .shots.ph { padding-inline: 16%; }
  .shots.mixed { grid-template-columns: 2.4fr 1fr .62fr; align-items: end; }
  .shots figcaption { font-size: 13px; }
}

/* Frosted placeholder (Behaiya): a blurred, unreadable page shape under a heavy dark frost. */
.frost { position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; justify-content: center; background: #17121A; }
.frost.r-desk { aspect-ratio: 16 / 10; } .frost.r-tab { aspect-ratio: 3 / 4; } .frost.r-ph { aspect-ratio: 9 / 18; }
.frost .ghost { position: absolute; inset: -8%; z-index: -2; display: flex; flex-direction: column; gap: 5%; padding: 10% 12%; filter: blur(12px); }
.ghost i { display: block; border-radius: 6px; }
.ghost .g-nav { flex: 0 0 6%; background: linear-gradient(90deg, #E9DCCB 0 24%, transparent 24% 58%, #7A2E3A 58% 100%); }
.ghost .g-hero { flex: 0 0 32%; background: linear-gradient(120deg, #6E2533, #8A3B45 50%, #5E7A57); }
.ghost .g-l1 { flex: 0 0 5%; width: 70%; background: #E9DCCB; }
.ghost .g-l2 { flex: 0 0 5%; width: 48%; background: #C9B9A6; }
.ghost .g-cards { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6%; }
.ghost .g-cards b { display: block; border-radius: 6px; background: #5E7A57; }
.frost::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(12, 12, 16, .88); }
/* wins over the frame rules above (which set display:block on images) so the label stays centred */
div.frost.frost { display: flex; align-items: center; justify-content: center; }
.frost-label { padding: 0 10%; font: 600 12px/1.45 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); text-align: center; }
.frost.r-ph .frost-label, .c-ph .frost-label { font-size: 9px; letter-spacing: .1em; padding: 0 8%; }
@media (min-width: 900px) { .frost-label { font-size: 13px; } }

/* ---------- AI Projects: numbered project rows ---------- */
.ap-list { list-style: none; margin: 8px 0 0; padding: 0; }
.ap { display: grid; gap: 22px; border-top: 1px solid var(--rule); padding: 34px 0 42px; }
.ap .n { font: 600 13px var(--ui); letter-spacing: .1em; color: var(--gold); margin: 0; }
.ap h3 { font-size: 28px; line-height: 1.15; margin: 8px 0 12px; }
.ap .line { font-size: 19px; line-height: 1.45; margin: 0 0 12px; }
.ap .body { font-size: 16px; line-height: 1.55; color: var(--body2); margin: 0 0 12px; }
.ap .pill { margin-top: 10px; }
.ap-media { position: relative; }
.stage-soft { display: flex; align-items: center; justify-content: center; padding: 8% 5%; background: var(--splash-soft); }
.shot-img { display: block; width: 100%; height: auto; border-radius: 8px; box-shadow: 0 0 0 1px #2c3a55, 0 30px 60px rgba(0,0,0,.5); }
.stage-soft .frame-ph { width: min(260px, 62%); }
.comp.c-sheet { position: relative; aspect-ratio: 100 / 66; background: var(--splash-soft); }
.c-sheet .c-tab { left: 0; top: 7%; width: 80%; }
.c-sheet .c-ph { right: 1%; top: 0; width: 25%; }
.bocci-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; list-style: none; margin: 14px 0 0; padding: 0; }
.bocci-row a { display: block; text-decoration: none; color: var(--mute2); }
.bocci-row img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: #F8F6F1; border-radius: 6px; }
.bocci-row span { display: block; font: 12px var(--ui); margin-top: 8px; }
.bocci-row a:hover span, .bocci-row a:focus-visible span { color: var(--blue-id); }
.uses { list-style: none; margin: 0; padding: 0; width: 100%; max-width: 560px; }
.uses li { display: grid; grid-template-columns: 44px 1fr; align-items: baseline; padding: 14px 0; border-top: 1px solid rgba(255,255,255,.12); font-size: 20px; line-height: 1.3; }
.uses li:last-child { border-bottom: 1px solid rgba(255,255,255,.12); }
.uses .n { font: 600 13px var(--ui); letter-spacing: .1em; color: var(--gold); }
@media (min-width: 900px) {
  .ap { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; padding: 64px 0 72px; }
  .ap h3 { font-size: 40px; } .ap .line { font-size: 22px; } .ap .body { font-size: 18px; }
  .ap-wide { grid-column: 1 / -1; }
  .ap.flip .ap-txt { order: 2; } .ap.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .bocci-row { gap: 14px; margin-top: 16px; }
  .uses li { font-size: 26px; padding: 18px 0; }
}
.p-close { padding-block: 40px 4px; }
.p-close p { font-size: 17px; line-height: 1.55; color: var(--body2); max-width: 36em; margin: 0; }
.p-close a { color: var(--blue-id); }
.p-close a:hover { color: var(--cream); }
.disc { font: 13px/1.6 var(--ui); color: var(--mute2); max-width: 760px; margin: 0; }

/* ---------- Personal Collection gallery (built from assets/collection/collection.json) ---------- */
.p-head { padding-block: 32px 8px; }
.p-head h1 { font-size: 52px; line-height: 1; margin: 10px 0 14px; }
.p-head .lede { font-size: 17px; line-height: 1.45; margin: 0; max-width: 34em; }
@media (min-width: 900px) { .p-head { padding-block: 64px 16px; } .p-head h1 { font-size: 88px; margin: 16px 0 22px; } .p-head .lede { font-size: 22px; } }
.gallery { list-style: none; margin: 0; padding: 0; columns: 1; column-gap: 16px; }
.gallery li { break-inside: avoid; margin: 0 0 16px; }
.gallery a { display: block; }
.gallery img { display: block; width: 100%; height: auto; border-radius: 4px; }
@media (min-width: 700px) { .gallery { columns: 2; column-gap: 20px; } .gallery li { margin-bottom: 20px; } }
@media (min-width: 1100px) { .gallery { columns: 3; column-gap: 24px; } .gallery li { margin-bottom: 24px; } }

@media (max-width: 899px) {
  .proj .p-sec.wrap, .proj .p-close.wrap { padding-left: var(--pad); padding-right: var(--pad); }
}
@media (prefers-reduced-motion: reduce) { .pill { transition: none; } }
@media print {
  .p-hero.cmp .photo, .shots, .stage-soft, .p-role .photo.stage, .comp.c-sheet { background: none !important; }
  .frost::after { background: rgba(255,255,255,.85); }
}

/* V16: centre the closing invitation, with less space above and more below. */
.page-ai .p-close { padding-block: 16px 48px; text-align: center; }
.page-ai .p-close p { margin-inline: auto; }
.page-ai #work { padding-bottom: 16px; }
/* V17: retain the complete brain artwork; remove square matte corners. */
.page-ai .p-hero.sq .photo { border-radius: 50%; clip-path: circle(50% at 50% 50%); background: transparent; }
.page-ai .p-hero.sq .photo img { object-fit: contain; }


/* V23.1F polish (Bob): same curve and durations as the rest of the site; 44px pips; press state. Timing sits in no-preference so reduced motion still means none. */
.clip-dots { gap: 0; }
.clip-dots button { width: 44px; }   /* was 22x44: the 5 pips on the QiMD phone layout are now 44x44 targets */
@media (prefers-reduced-motion: no-preference) {
  .ico { transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
  .pill { transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
  .veil { transition: opacity var(--t-med) var(--ease); }
  .spk { transition: opacity var(--t-med) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
  .clip-dots button::before { transition: background-color var(--t-fast) var(--ease); }
}
.pill:active, .ico:active, .spk:active { transform: translateY(1px); }
.clip-dots button:focus-visible { outline: 2px solid var(--blue-id); outline-offset: -4px; border-radius: 8px; }
.p-next .back:is(:hover, :focus-visible) { color: var(--blue-id); }
.p-close a:is(:hover, :focus-visible) { color: var(--cream); }