/* Project and breakdown pages (e.g. cursebreaker.html, cursebreaker-breakdown.html): the work on the site itself.
   Reading layout: the level up top, text at a comfortable measure, images wider, the site's colours and type. No 3D world. */

.project-page {
  background:
    radial-gradient(120% 60% at 50% 0%, #241238 0%, rgba(11,9,18,0) 60%),
    var(--bg);
  background-attachment: fixed;
}
/* the home page's nav blends over the 3D scene; here it sits on screenshots, so it gets a solid backing instead */
.project-page .nav {
  mix-blend-mode: normal;
  background: linear-gradient(rgba(11,9,18,.94), rgba(11,9,18,.82));
  border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}

.pp {
  --text: 38rem;         /* reading measure: about 75 characters at 17px */
  --wide: 70rem;         /* images */
  padding: 104px var(--pad) 64px;
}
.pp > * { max-width: var(--text); margin-left: auto; margin-right: auto; }
.pp p { color: #ddd6e6; margin: 0 0 16px; font-size: 17px; line-height: 1.65; }

/* ---------- title block ---------- */
.pp-back {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  color: var(--muted); font-size: var(--fs-meta); text-decoration: none;
}
.pp-back:hover { color: var(--ink); }

/* Project / Breakdown switcher: the two pages of one piece of work */
.pp-switch { display: flex; gap: 4px; margin: 6px 0 18px; border-bottom: 1px solid var(--line); }
.pp-switch a, .pp-switch-off {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; margin-bottom: -1px;
  border-bottom: 2px solid transparent; font: 500 14px var(--sans); text-decoration: none; color: var(--muted);
  transition: color .25s, border-color .25s;
}
.pp-switch a:first-child, .pp-switch-off:first-child { padding-left: 0; }
.pp-switch a:hover { color: var(--ink); }
.pp-switch a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }
.pp-switch-off { color: var(--muted); font-weight: 400; font-style: italic; cursor: default; }

.pp-head h1 { font: 700 clamp(34px, 4.8vw, 56px)/1.05 var(--serif); margin: 0 0 12px; letter-spacing: .01em; text-wrap: balance; }
.pp .pp-meta { color: var(--muted); font-size: var(--fs-meta); font-variant-numeric: tabular-nums; margin-bottom: 6px; line-height: 1.5; }
.pp .pp-role { color: var(--accent); font-size: var(--fs-meta); line-height: 1.5; margin-bottom: 0; }

/* ---------- hero: the level, in the first screen ---------- */
.pp > .pp-hero { max-width: var(--wide); margin: 28px auto 8px; }
.pp-hero img { display: block; width: 100%; height: auto; border-radius: var(--r); border: 1px solid var(--line); background: #000; }
.pp-hero figcaption { max-width: var(--text); margin: 10px auto 0; color: var(--muted); font-size: var(--fs-small); }

/* ---------- intro: what it is, my part ---------- */
.pp-intro { padding-top: 28px; }
.pp .pp-lede { font-size: clamp(18px, 1.6vw, 20px); line-height: 1.6; color: #e5dfee; }
.pp .pp-part { padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 22px 0 16px; }
.pp-part strong { color: var(--ink); }
.pp-intro .pp-mini, .pp-toc .pp-mini { font: 600 12px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 24px 0 8px; }
.pp-facts { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.pp-facts li { font-size: var(--fs-meta); color: var(--muted); white-space: nowrap; }
.pp-facts li:not(:last-child)::after { content: "·"; margin-left: 10px; }
.pp-actions { margin-top: 24px; }

/* ---------- section bar (breakdowns): sticks under the nav, marks the section you're in (project.js) ---------- */
.pp-toc {
  position: sticky; top: var(--nav-h, 78px); z-index: 5;
  display: flex; align-items: center; gap: 22px; margin-top: 32px;
  /* the backing runs the full width of the screen while the links stay on the text column */
  background: rgba(11,9,18,.92);
  box-shadow: 0 0 0 100vmax rgba(11,9,18,.92), 0 1px 0 100vmax rgba(255,255,255,.08);
  clip-path: inset(0 -100vmax -1px);
}
.pp-toc .pp-mini { margin: 0; flex: none; }
.pp-toc ul { display: flex; gap: 0 22px; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.pp-toc ul::-webkit-scrollbar { display: none; }
.pp-toc li { flex: none; }
.pp-toc a {
  display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); font-size: 15px; text-decoration: none;
  border-bottom: 2px solid transparent; transition: color .25s, border-color .25s;
}
.pp-toc a:hover { color: var(--ink); }
.pp-toc a[aria-current] { color: var(--ink); border-bottom-color: var(--accent); }
.pp h2[id] { scroll-margin-top: 136px; }   /* nav + section bar */
.pp h2[id]:focus { outline: none; }

/* ---------- sections ---------- */
.pp section { padding-left: 0; padding-right: 0; }   /* the main stylesheet pads every section; .pp already does */
.pp-part-block { padding-top: 64px; }
.pp-part-block h2 { font: 700 clamp(26px, 3.2vw, 38px)/1.15 var(--serif); margin: 0 0 8px; }
.pp-part-block h3 { font: 600 20px/1.3 var(--sans); margin: 40px 0 10px; color: var(--ink); }
.pp-list { margin: 0 0 16px; padding-left: 20px; color: #ddd6e6; font-size: 17px; line-height: 1.6; }
.pp-list li { margin: 4px 0; }

/* figures break out wider than the text column on large screens */
.pp-fig { margin: 22px 0 8px; }
@media (min-width: 900px) {
  .pp { --bleed: min(var(--wide), calc(100vw - 2 * var(--pad) - 16px)); }   /* 16px leaves room for the scrollbar */
  .pp-fig:not(.pp-fig-narrow) { width: var(--bleed); margin-left: calc((100% - var(--bleed)) / 2); }
}
.pp-fig img { display: block; width: 100%; height: auto; border-radius: var(--r); border: 1px solid var(--line); background: #000; }
.pp-fig figcaption { max-width: var(--text); margin: 10px auto 0; color: var(--muted); font-size: var(--fs-small); }
/* tall charts and maps stay within one screen; --ar (set on each image from its size) keeps the space reserved before it loads */
.pp-fig-narrow img { width: 100%; max-width: min(100%, calc(80vh * var(--ar, 1))); height: auto; margin: 0 auto; }

/* click to enlarge (project.js wraps each image in this button) */
.pp-zoom { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--r); }
.pp-zoom:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.pp-zoom img { transition: border-color .25s; }
.pp-zoom:hover img { border-color: rgba(255,122,47,.6); }

/* video embeds and self-hosted videos keep a 16:9 frame */
.pp-video iframe, .pp-video video { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 1px solid var(--line); border-radius: var(--r); background: #000; }
.pp-video video { object-fit: contain; }

/* GIF: a still frame with a play button; the 10 MB GIF loads only when pressed (project.js) */
.pp-gif { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; color: var(--ink); }
.pp-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 18px;
  border-radius: var(--r); background: rgba(11,9,18,.82); border: 1px solid rgba(255,255,255,.25); font: 500 14px var(--sans);
  transition: border-color .25s, background .25s;
}
.pp-gif:hover .pp-play { border-color: var(--accent); }
.pp-gif.playing .pp-play { display: none; }
.pp-gif:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--r); }
.pp-gif img { aspect-ratio: 710 / 400; }   /* holds its space before the still frame loads */

/* screenshots: two columns on wide screens, the first one full width */
.pp-grid { display: grid; grid-template-columns: 1fr; gap: 8px 24px; }
@media (min-width: 900px) {
  .pp-grid { width: var(--bleed); margin-left: calc((100% - var(--bleed)) / 2); grid-template-columns: 1fr 1fr; }
  .pp-grid .pp-fig { width: auto; margin-left: 0; }
  .pp-grid .pp-fig:first-child { grid-column: 1 / -1; }
}

/* ---------- image viewer ---------- */
.pp-lightbox {
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgba(8,6,13,.96); color: var(--ink); overflow: auto; overscroll-behavior: contain;
}
.pp-lightbox::backdrop { background: rgba(8,6,13,.7); }
html.pp-lb-open { overflow: hidden; }
.pp-lb-stage { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 64px var(--pad) 48px; box-sizing: border-box; }
.pp-lb-stage img { display: block; max-width: 100%; max-height: calc(100dvh - 112px); width: auto; height: auto; border-radius: var(--r); cursor: zoom-in; }
.pp-lightbox.actual .pp-lb-stage { display: block; width: max-content; min-width: 100%; }
.pp-lightbox.actual .pp-lb-stage img { max-width: none; max-height: none; margin: 0 auto; cursor: zoom-out; }
.pp-lb-close {
  position: fixed; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); z-index: 1;
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border: 1px solid rgba(255,255,255,.25); border-radius: var(--r); background: rgba(11,9,18,.85); color: var(--ink); cursor: pointer; font-size: 18px;
}
.pp-lb-close:hover { border-color: var(--accent); }
.pp-lb-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.ico-close { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M4 4l8 8M12 4l-8 8'/%3E%3C/svg%3E"); }
.pp-lb-hint { position: fixed; left: 0; right: 0; bottom: max(12px, env(safe-area-inset-bottom)); margin: 0; text-align: center; color: var(--muted); font-size: var(--fs-label); pointer-events: none; }
.pp-lightbox .pp-lb-caption { position: fixed; left: 0; right: 0; bottom: calc(max(12px, env(safe-area-inset-bottom)) + 22px); margin: 0 auto; padding: 0 var(--pad); max-width: 44rem; text-align: center; color: var(--ink); font-size: var(--fs-small); line-height: 1.45; pointer-events: none; }
.pp-lightbox:has(.pp-lb-caption:not([hidden])) .pp-lb-stage { padding-bottom: 96px; }
.pp-lightbox:has(.pp-lb-caption:not([hidden])) .pp-lb-stage img { max-height: calc(100dvh - 160px); }
.pp-lightbox.actual .pp-lb-hint, .pp-lightbox.actual .pp-lb-caption { display: none; }   /* actual size: nothing on top of the pixels */

/* ---------- footer: what's next ---------- */
.pp .pp-foot { position: static; font-size: inherit; color: inherit; margin-top: 80px; padding-top: 28px; border-top: 1px solid var(--line); }   /* style.css pins the home page's footer; this one flows */
.pp-next {
  display: grid; grid-template-columns: 220px 1fr auto; align-items: center; gap: 24px;
  margin-bottom: 28px; padding: 12px; border: 1px solid rgba(255,255,255,.14); border-radius: var(--r);
  background: rgba(255,255,255,.035);
  color: var(--ink); text-decoration: none; transition: border-color .25s, background .25s;
}
.pp-next:hover { border-color: rgba(255,122,47,.7); background: rgba(255,122,47,.06); }
.pp-next:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.pp-next img { display: block; width: 220px; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 2px; }
.pp-next-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pp-next-label { font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pp-next-title { font: 700 clamp(20px, 2.4vw, 28px)/1.15 var(--serif); }
.pp-next > .ico { font-size: 20px; color: var(--accent); margin-right: 8px; transition: transform .25s; }
.pp-next:hover > .ico { transform: translateX(4px); }
.pp-foot p { color: var(--muted); font-size: var(--fs-small); margin: 18px 0 0; }
.pp-foot a:not(.btn):not(.pp-next) { color: var(--ink); text-underline-offset: 4px; }
.pp-foot a:not(.btn):not(.pp-next):hover { color: var(--accent); }
.pp .pp-copy { font-size: var(--fs-label); margin-top: 28px; }

/* laptops and desktops: title, role and the whole main image fit in the first screen.
   The image is cropped to the space left (clicking it shows the full frame); videos shrink instead of cropping. */
@media (min-width: 900px) {
  .pp { padding-top: 92px; }
  .pp-switch { margin: 2px 0 14px; }
  .pp-head h1 { margin-bottom: 10px; }
  .pp > .pp-hero { margin-top: 24px; }
  .pp > .pp-hero img { max-height: max(340px, calc(100svh - 400px)); object-fit: cover; }
  .pp > .pp-hero.pp-video { max-width: min(var(--wide), calc(max(340px, 100svh - 400px) * 16 / 9)); }
  .pp > .pp-hero:has(figcaption) img { max-height: max(320px, calc(100svh - 440px)); }   /* leave room for the caption */
  .pp > .pp-hero.pp-video:has(figcaption) { max-width: min(var(--wide), calc(max(320px, 100svh - 440px) * 16 / 9)); }
}

@media (max-width: 640px) {
  .pp-toc .pp-mini { display: none; }   /* phones: just the scrolling row of sections */
  .pp-toc ul { gap: 0 18px; }
}

@media (max-width: 520px) {
  .pp { padding-top: 84px; }
  .pp > .pp-hero { margin-top: 20px; }
  .pp-next { grid-template-columns: 112px 1fr; gap: 14px; padding: 10px; }
  .pp-next img { width: 112px; }
  .pp-next > .ico { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pp-next > .ico, .pp-zoom img, .pp-switch a { transition: none; }
}