/* Project page (owner redesign, 2026-10-19): a page of the site built from the home's own geometry — the record
   disc, the Research triangle, the pill cards, the special card's half-circle cut and the emblem's ink dots. Same
   tokens as src/home-v3/style.css: dark ground, paper, ink, Geist light display type; works black and white until
   they are the one in view; orange only for the "you are here" numbers. Scoped to the host-owned reader. */
.pd-dialog { --pd-bg:#222223; --pd-paper:#ecebe6; --pd-ink:#1d1e1f; --pd-mute:#8f8e89; --pd-mute-paper:#66655f; --pd-line:#d5d4cf; --pd-accent:#c6471d;
 position:fixed; inset:0; width:100%; height:100svh; max-width:none; max-height:none; margin:0; padding:0; border:0; border-radius:0;
 overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; background:var(--pd-bg); color:var(--pd-paper); color-scheme:dark;
 font:400 15px/1.5 Geist,Arial,sans-serif; transition:clip-path 760ms cubic-bezier(.22,1,.36,1); z-index:2147482000; }
.pd-dialog:not(.is-open) { transition-duration:520ms; transition-timing-function:cubic-bezier(.64,0,.78,0); }
.pd-dialog::backdrop { background:transparent; }
.pd-dialog * { box-sizing:border-box; }
.pd-dialog :where(button,a) { font:inherit; color:inherit; }
.pd-dialog :is(button,a,video):focus-visible { outline:2px solid var(--pd-paper); outline-offset:4px; }
.pd-dialog img { -webkit-user-drag:none; }

/* The home's name strip, with the way back at its right end. */
.pd-strip { position:sticky; top:14px; z-index:5; display:grid; grid-template-columns:1fr 1fr auto; align-items:center; gap:12px; margin:14px 1.4vw 0; padding:0 0 0 6px; background:var(--pd-paper); color:var(--pd-ink); font-size:11px; font-weight:500; }
.pd-strip__mid { color:var(--pd-mute-paper); font-weight:400; }
.pd-close { display:flex; align-items:center; min-height:32px; padding:0 12px; border:0; background:var(--pd-ink); color:var(--pd-paper)!important; font-size:11px!important; font-weight:500; letter-spacing:.02em; cursor:pointer; transition:background 200ms ease; }
.pd-close:hover { background:#3a3a3b; }

.pd-page { padding:0 1.4vw 6vh; }
.pd-k { display:grid; grid-template-columns:24px 1fr; margin:0; font-size:10px; line-height:1.35; color:var(--pd-mute); } .pd-k span { grid-row:span 2; color:var(--pd-paper); } .pd-k em { font-style:normal; } .pd-k b { font-size:13px; font-weight:400; color:var(--pd-paper); }

/* 1 — Hero: the name, and the record disc with the work in its window. */
.pd-hero { display:grid; grid-template-columns:minmax(0,1fr) min(40vw,74vh); align-items:end; gap:2vw; min-height:calc(100svh - 60px); padding:4vh 0 3vh; }
.pd-hero__lead { display:flex; flex-direction:column; gap:3vh; padding-bottom:1vh; }
.pd-title { margin:0; font:300 clamp(64px,9.4vw,190px)/.82 Geist,Arial,sans-serif; letter-spacing:-.035em; color:var(--pd-paper); text-wrap:balance; }
.pd-subtitle { margin:0; max-width:30ch; font-size:clamp(18px,1.6vw,30px); line-height:1.05; letter-spacing:-.02em; color:var(--pd-mute); }
.pd-orb { position:relative; aspect-ratio:1; width:100%; border-radius:50%; background:var(--pd-paper); box-shadow:0 30px 60px -20px #000a; }
.pd-orb__ring { position:absolute; inset:0; border-radius:50%; overflow:hidden; will-change:transform; }
.pd-orb { overflow:hidden; } .pd-dialog { overflow-x:clip; }
.pd-orb__ring svg { display:block; width:100%; height:100%; }
.pd-orb__ring text { font:500 26px Geist,Arial,sans-serif; letter-spacing:2px; fill:var(--pd-ink); }
.pd-orb__win { position:absolute; inset:15%; border-radius:50%; overflow:hidden; background:#000; box-shadow:0 0 0 1px #1d1e1f30; }
.pd-orb__win img { width:100%; height:100%; object-fit:cover; object-position:50% 20%; animation:pd-develop 1.6s 500ms cubic-bezier(.22,1,.36,1) both; }
@keyframes pd-develop { from { filter:grayscale(1) contrast(1.05); transform:scale(1.08); } }
.pd-orb__dot { position:absolute; border-radius:50%; background:var(--pd-ink); }
.pd-orb__dot--a { width:6%; height:6%; left:13%; top:15%; } .pd-orb__dot--b { width:9%; height:9%; right:9%; bottom:14%; }

/* 2 — The Research triangle: the medium, shouted, pointing down at the work. */
.pd-tri { position:relative; width:min(62vw,1100px); aspect-ratio:1/.62; margin:6vh auto -4vh; color:var(--pd-ink); }
.pd-tri__shape { position:absolute; inset:0; } .pd-tri__shape svg { width:100%; height:100%; display:block; } .pd-tri__shape path { fill:var(--pd-paper); }
.pd-tri__band { position:absolute; left:4%; right:4%; top:5%; display:flex; align-items:center; justify-content:space-between; }
.pd-tri__band i { width:2.6vw; height:2.6vw; max-width:46px; max-height:46px; border-radius:50%; background:var(--pd-ink); }
.pd-tri__band b { font-weight:400; font-size:clamp(14px,1.2vw,20px); letter-spacing:.02em; }
.pd-tri__words { position:absolute; left:0; right:0; top:22%; display:flex; flex-direction:column; align-items:center; margin:0; font-size:clamp(28px,3.4vw,62px); line-height:.98; letter-spacing:-.03em; text-align:center; }
.pd-tri__n { margin-top:.2em; font-size:.62em; }

/* 3 — Stage, round thumbnails in a paper pill, and the counter. */
.pd-show { display:grid; grid-template-columns:minmax(0,1fr) 92px; grid-template-areas:"stage rail" "reading rail"; column-gap:1.4vw; align-items:start; padding-top:4vh; }
.pd-stage { grid-area:stage; position:relative; }
.pd-item { display:none; margin:0; }
.pd-item.is-active { display:block; animation:pd-in 640ms cubic-bezier(.22,1,.36,1); }
@keyframes pd-in { from { opacity:0; filter:blur(6px); } }
.pd-view { height:78vh; display:flex; align-items:center; justify-content:center; background:#1b1b1c; }
.pd-art { display:block; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
video.pd-art { width:100%; height:100%; background:#000; }
.pd-item[data-tall] .pd-view { display:block; overflow-y:auto; overscroll-behavior:contain; }
.pd-item[data-tall] .pd-art { width:100%; max-height:none; }
.pd-item figcaption { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.pd-bar { display:flex; align-items:center; gap:4px; height:18px; padding:0 8px; background:var(--pd-paper); border-bottom:1px solid var(--pd-line); }
.pd-bar i { width:6px; height:6px; border-radius:50%; background:#cfcec9; } .pd-bar b { margin-left:8px; font-size:10px; font-weight:400; color:var(--pd-mute-paper); }
.pd-item[data-site] .pd-view { height:calc(78vh - 18px); background:var(--pd-paper); }
.pd-item[data-site]:not([data-tall]) .pd-art { width:100%; height:100%; object-fit:cover; object-position:50% 0; }
.pd-error { margin:12px 0; padding:16px; background:#303132; font-size:13px; }
.pd-rail { grid-area:rail; position:sticky; top:72px; display:flex; flex-direction:column; align-items:center; gap:10px; padding:14px 0 20px; border-radius:999px; background:var(--pd-paper); }
.pd-thumb { position:relative; flex:none; width:64px; height:64px; padding:0; border:0; border-radius:50%; background:#cfcec9; cursor:pointer; transition:transform 320ms cubic-bezier(.22,1,.36,1); }
.pd-thumb img { display:block; width:100%; height:100%; border-radius:50%; object-fit:cover; filter:grayscale(1) contrast(1.05); transition:filter 500ms cubic-bezier(.22,1,.36,1); }
.pd-thumb b { position:absolute; right:-2px; top:-2px; display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:var(--pd-paper); color:var(--pd-mute-paper); font-size:9.5px; font-weight:500; }
.pd-thumb[aria-current="true"] { box-shadow:0 0 0 2px var(--pd-paper),0 0 0 3.5px var(--pd-ink); }
.pd-thumb[aria-current="true"] img { filter:none; }
.pd-thumb[aria-current="true"] b { color:var(--pd-accent); }
@media (hover:hover) { .pd-thumb:hover { transform:scale(1.08); } .pd-thumb:hover img { filter:none; } }
.pd-reading { grid-area:reading; display:flex; align-items:baseline; gap:14px; margin:18px 0 0; }
.pd-reading b { flex:none; font-size:11px; font-weight:500; letter-spacing:.02em; color:var(--pd-accent); }
.pd-reading span { font-size:clamp(20px,1.6vw,30px); line-height:1.05; letter-spacing:-.02em; }

/* 4 — The plate with the special card's half-circle cut, and the credits as paper pills. */
.pd-specs { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr); gap:1.4vw; align-items:start; margin-top:9vh; }
/* One or two people: the credits run as a row of pills under the plate instead of a mostly empty column. */
.pd-specs[data-solo] { display:flex; flex-direction:column; align-items:stretch; gap:12px; } .pd-specs[data-solo] .pd-people { flex-direction:row; flex-wrap:wrap; align-items:center; } .pd-specs[data-solo] .pd-people__k { flex-basis:100%; } .pd-specs[data-solo] .pd-person { min-width:280px; } .pd-specs[data-solo] .pd-website { margin:0 0 0 auto; gap:28px; }
.pd-plate { --cut:clamp(90px,9vw,170px); position:relative; padding:16px calc(var(--cut) + 24px) 26px 16px; background:var(--pd-paper); color:var(--pd-ink);
 -webkit-mask:radial-gradient(circle var(--cut) at 100% 50%,#0000 98%,#000 100%); mask:radial-gradient(circle var(--cut) at 100% 50%,#0000 98%,#000 100%); }
.pd-plate .pd-k { color:var(--pd-mute-paper); } .pd-plate .pd-k span,.pd-plate .pd-k b { color:var(--pd-ink); }
.pd-summary { max-width:34ch; margin:5vh 0 4vh; font-size:clamp(22px,1.9vw,34px); line-height:1.12; letter-spacing:-.02em; }
.pd-facts { display:grid; grid-template-columns:120px 1fr; gap:10px 10px; max-width:640px; margin:0 0 24px; font-size:13px; line-height:1.45; }
.pd-facts dt { font-weight:500; } .pd-facts dd { margin:0; color:var(--pd-mute-paper); }
.pd-description { max-width:62ch; margin:0; padding-top:18px; border-top:1px solid var(--pd-line); font-size:15px; line-height:1.6; }
.pd-people { display:flex; flex-direction:column; gap:8px; }
.pd-people__k { margin:0 0 4px; font-size:10px; font-weight:500; letter-spacing:.02em; color:var(--pd-mute); }
.pd-person { display:grid; grid-template-columns:34px 1fr; align-items:center; column-gap:12px; margin:0; padding:8px 20px 8px 8px; border-radius:999px; background:var(--pd-paper); color:var(--pd-ink); font-size:12px; line-height:1.35; }
.pd-person i { grid-row:span 2; width:34px; height:34px; border-radius:50%; background:var(--pd-ink); }
.pd-person:first-of-type i { background:radial-gradient(circle at 30% 30%,var(--pd-ink) 0 28%,transparent 29%),radial-gradient(circle at 66% 66%,var(--pd-ink) 0 36%,transparent 37%),#cfcec9; }
.pd-person b { font-weight:500; } .pd-person span { color:var(--pd-mute-paper); }
.pd-website { display:flex; justify-content:space-between; align-items:center; min-height:50px; margin-top:6px; padding:0 8px 0 22px; border-radius:999px; background:var(--pd-ink); color:var(--pd-paper)!important; box-shadow:inset 0 0 0 1px #4a4a4b; font-size:13px!important; font-weight:500; text-decoration:none; }
.pd-website i { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:var(--pd-paper); color:var(--pd-ink); font-style:normal; transition:transform 320ms cubic-bezier(.22,1,.36,1); }
.pd-website:hover i { transform:rotate(45deg); }

/* 5 — The way on: a pill card to the next project. */
.pd-next { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:2.4vw; width:100%; min-height:24vh; margin-top:10vh; padding:1.2vw 1.2vw 1.2vw 1.2vw; border:0; border-radius:999px; background:var(--pd-paper); color:var(--pd-ink); text-align:left; cursor:pointer; }
.pd-next__win { width:calc(24vh - 2.4vw); min-width:120px; aspect-ratio:1; border-radius:50%; overflow:hidden; background:#cfcec9; }
.pd-next__win img { width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.05); transition:filter 700ms cubic-bezier(.22,1,.36,1),transform 700ms cubic-bezier(.22,1,.36,1); }
.pd-next__t { display:flex; flex-direction:column; gap:10px; min-width:0; }
.pd-next__t em { font-style:normal; font-size:11px; font-weight:500; letter-spacing:.02em; color:var(--pd-mute-paper); }
.pd-next__t b { font-weight:300; font-size:clamp(40px,5.6vw,110px); line-height:.88; letter-spacing:-.035em; }
.pd-next__go { display:grid; place-items:center; width:calc(24vh - 2.4vw); min-width:120px; aspect-ratio:1; border-radius:50%; background:var(--pd-ink); color:var(--pd-paper); font-style:normal; font-size:clamp(30px,3vw,56px); transition:transform 420ms cubic-bezier(.22,1,.36,1); }
@media (hover:hover) { .pd-next:hover .pd-next__win img { filter:none; transform:scale(1.06); } .pd-next:hover .pd-next__go { transform:translateX(8px); } }

@media (max-width:767px) {
 .pd-strip { top:10px; margin:10px 16px 0; grid-template-columns:1fr auto; } .pd-strip__mid { display:none; }
 .pd-close { min-height:40px; }
 .pd-page { padding:0 16px 6vh; }
 .pd-hero { display:flex; flex-direction:column-reverse; align-items:stretch; gap:5vh; min-height:0; padding:5vh 0 2vh; }
 .pd-orb { width:86vw; align-self:center; }
 .pd-title { font-size:15vw; line-height:.86; }
 .pd-subtitle { font-size:20px; }
 .pd-tri { width:100%; margin:4vh 0 -2vh; } .pd-tri__words { font-size:7.4vw; top:24%; } .pd-tri__band i { width:6vw; height:6vw; } .pd-tri__band b { font-size:12px; }
 .pd-show { display:block; }
 .pd-view { height:auto; max-height:62svh; } .pd-art { max-height:62svh; } video.pd-art { height:auto; }
 .pd-item[data-tall] .pd-view,.pd-item[data-site] .pd-view { height:62svh; }
 .pd-rail { position:static; flex-direction:row; gap:8px; margin-top:12px; padding:8px 12px; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; }
 .pd-thumb { width:52px; height:52px; }
 .pd-reading { margin-top:10px; } .pd-reading span { font-size:19px; }
 .pd-specs { display:block; margin-top:6vh; }
 .pd-plate { --cut:56px; padding:16px 16px 24px; -webkit-mask:radial-gradient(circle var(--cut) at 100% 0,#0000 98%,#000 100%); mask:radial-gradient(circle var(--cut) at 100% 0,#0000 98%,#000 100%); }
 .pd-summary { margin:4vh 0 3vh; font-size:22px; }
 .pd-facts { grid-template-columns:90px 1fr; }
 .pd-people { margin-top:16px; } .pd-specs[data-solo] .pd-website { margin:0; width:100%; }
 .pd-next { grid-template-columns:auto 1fr; gap:14px; min-height:0; margin-top:6vh; padding:10px 22px 10px 10px; }
 .pd-next__win { width:88px; min-width:0; } .pd-next__go { display:none; } .pd-next__t b { font-size:9vw; }
}
.pd-dialog[data-reduced],.pd-dialog[data-reduced] * { transition:none!important; animation:none!important; }
@media (prefers-reduced-motion:reduce) { .pd-dialog,.pd-dialog * { transition:none!important; animation:none!important; } }