/* Chapter links as one compact cluster. At the cover it sits centred along the foot of the artwork;
   once the reader scrolls past, it pins into the site row between Back and About, unchanged. */
html:has(.pf-reading-nav) { scroll-padding-top: calc(var(--pf-site-height,56px) + 16px); }
body.pf-system.pf-unified[data-portfolio] .skip-link { position: fixed; top: -100px; left: 12px; z-index: 100; padding: 12px 20px; border-radius: var(--pf-control-radius); font: 500 16px/1.5 var(--pf-font) !important; text-decoration: none !important; }
body.pf-system.pf-unified[data-portfolio] .skip-link:focus { position: fixed !important; top: 12px !important; left: 12px !important; z-index: 100 !important; }
body.pf-system.pf-unified[data-portfolio] .pf-reading-slot { position: relative; width: 100%; height: var(--pf-reading-height,56px); margin-top: calc(-1 * var(--pf-reading-height,56px)); z-index: 90; pointer-events: none; }
body.pf-system.pf-unified[data-portfolio] .pf-reading-nav {
  --reading-ink: #fff; --reading-muted: #d2d7d5;
  --reading-line: rgba(255,255,255,.14); --reading-accent: var(--project-pale,#fff);
  --reading-solid: color-mix(in srgb,var(--project-dark,#07090c) 96%,#000);
  position: relative; box-sizing: border-box; width: 100%; min-height: var(--pf-reading-height,56px); padding: 0;
  color: var(--reading-ink); background: color-mix(in srgb,var(--project-dark,#07090c) 96%,transparent); border: 0; pointer-events: none;
}
body.pf-system.pf-unified[data-portfolio] .pf-reading-nav[data-stuck='true'] { position: fixed; inset: 0 0 auto; background: transparent; }
body.pf-system.pf-unified[data-portfolio] .pf-reading-inner {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 0;
  min-height: var(--pf-reading-height,56px); padding: 0 120px; max-width: none; margin: 0; background: transparent; border: 0;
}
body.pf-system.pf-unified[data-portfolio] .pf-reading-heading { flex: 0 0 auto; margin-right: 14px; pointer-events: auto; }
body.pf-system.pf-unified[data-portfolio] .pf-reading-brand { display: flex; align-items: center; min-height: var(--pf-control-height); color: var(--reading-ink) !important; text-decoration: none !important; }
body.pf-system.pf-unified[data-portfolio] .pf-reading-identity { display: none; }
body.pf-system.pf-unified[data-portfolio] .pf-reading-orbit { position: relative; display: grid; place-items: center; width: 22px; height: 22px; flex: 0 0 22px; opacity: 0; transition: opacity .35s ease; }
body.pf-system.pf-unified[data-portfolio] .pf-reading-nav[data-stuck='true'] .pf-reading-orbit { opacity: 1; }
body.pf-system.pf-unified[data-portfolio] .pf-reading-orbit svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); fill: none; stroke-width: 2.5; }
body.pf-system.pf-unified[data-portfolio] .pf-orbit-base { stroke: rgba(255,255,255,.18); }
body.pf-system.pf-unified[data-portfolio] .pf-orbit-fill { stroke: var(--reading-accent); stroke-dasharray: 100; stroke-dashoffset: calc(100px - var(--reading-progress,0) * 100px); stroke-linecap: round; transition: stroke-dashoffset .2s linear; }
body.pf-system.pf-unified[data-portfolio] :is(.pf-reading-rail,.pf-reading-arrow,.pf-reading-label,.pf-reading-glider) { display: none; }
body.pf-system.pf-unified[data-portfolio] .pf-reading-track { position: relative; flex: 0 1 auto; min-width: 0; pointer-events: auto; }
body.pf-system.pf-unified[data-portfolio] .pf-reading-track ol { position: relative; display: flex; justify-content: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
body.pf-system.pf-unified[data-portfolio] .pf-reading-track li { margin: 0; padding: 0; }
body.pf-system.pf-unified[data-portfolio] .pf-reading-track a {
  position: relative; display: flex; align-items: center; justify-content: center; min-height: var(--pf-control-height);
  padding: 8px 11px; border: 0; border-radius: 0;
  color: var(--reading-muted) !important; background: transparent !important;
  font: 500 16px/1.3 var(--pf-font) !important; letter-spacing: -.005em;
  text-decoration: none !important; white-space: nowrap; transition: color .22s;
}
body.pf-system.pf-unified[data-portfolio] .pf-reading-topic { color: inherit !important; white-space: nowrap; }
body.pf-system.pf-unified[data-portfolio] .pf-reading-track a:is(:hover,:focus-visible) { color: #fff !important; }
body.pf-system.pf-unified[data-portfolio] .pf-reading-track a[aria-current='location'] { color: #fff !important; font-weight: 600 !important; text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 6px; text-shadow: none; }
body.pf-system.pf-unified[data-portfolio] .pf-reading-nav :is(a,button):focus-visible { outline: var(--pf-focus-width) solid var(--reading-accent) !important; outline-offset: 3px; }
body.pf-system.pf-unified[data-portfolio] .pf-reading-toggle { display: none; }
body.pf-system.pf-unified[data-portfolio] .pf-reading-progress { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; clip-path: inset(50%); overflow: hidden; }
body.pf-system.pf-unified[data-portfolio] :is(.pf-chapter,.pf-subchapter) { scroll-margin-top: 16px !important; }
body.pf-system.pf-unified[data-portfolio] .pf-cover-hero { scroll-margin-top: 0 !important; }
body.pf-system.pf-unified[data-portfolio] .pf-reading-slot + .pf-chapter { scroll-margin-top: -16px !important; }

/* Once pinned, the site row becomes a dark glass strip that carries Back, the chapters, and About together. */
body[data-portfolio]:has(.pf-reading-nav) .pf-site-nav[data-solid='true'] {
  color: #fff !important; background: color-mix(in srgb,var(--project-dark,#07090c) 96%,transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.1); backdrop-filter: blur(20px) saturate(1.1);
  border-bottom: 0;
}
body[data-portfolio]:has(.pf-reading-nav) .pf-site-nav[data-solid='true'] a.pf-site-link:hover { color: var(--project-pale,#fff) !important; }

@media(max-width:1180px) {
  body.pf-system.pf-unified[data-portfolio] .pf-reading-track a { padding-inline: 8px; font-size: 16px !important; }
}
@media(max-width:1000px) {
  body.pf-system.pf-unified[data-portfolio] .pf-reading-inner { padding: 0 100px; }
  body.pf-system.pf-unified[data-portfolio] .pf-reading-toggle { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 4px 8px !important; border: 0 !important; border-radius: var(--pf-control-radius) !important; background: transparent !important; color: var(--reading-ink) !important; cursor: pointer; pointer-events: auto; }
  body.pf-system.pf-unified[data-portfolio] .pf-reading-toggle-copy { display: grid; gap: 1px; text-align: left; }
  body.pf-system.pf-unified[data-portfolio] .pf-reading-toggle .pf-reading-label { display: block; color: var(--reading-muted) !important; font: 400 var(--pf-type-label)/1.4 var(--pf-mono) !important; text-transform: uppercase; letter-spacing: .07em; white-space: nowrap; }
  body.pf-system.pf-unified[data-portfolio] .pf-reading-now { color: var(--reading-accent) !important; font: 500 16px/1.3 var(--pf-font) !important; white-space: nowrap; }
  body.pf-system.pf-unified[data-portfolio] .pf-reading-chevron { position: relative; flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--reading-line); transition: transform .25s; }
  body.pf-system.pf-unified[data-portfolio] .pf-reading-chevron::before, body.pf-system.pf-unified[data-portfolio] .pf-reading-chevron::after { content: ''; position: absolute; top: 11px; left: 6px; width: 10px; height: 1.5px; background: var(--reading-accent); }
  body.pf-system.pf-unified[data-portfolio] .pf-reading-chevron::after { transform: rotate(90deg); }
  body.pf-system.pf-unified[data-portfolio] .pf-reading-toggle[aria-expanded='true'] .pf-reading-chevron { transform: rotate(45deg); }
  body.pf-system.pf-unified[data-portfolio] .pf-reading-track { display: none; position: absolute; inset: calc(100% + 4px) 12px auto; padding: 10px; background: var(--reading-solid); border: 1px solid var(--reading-line); border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,.35); max-height: calc(100dvh - var(--pf-site-height,56px) - 20px); overflow-y: auto; }
  body.pf-system.pf-unified[data-portfolio] .pf-reading-nav[data-expanded='true'] .pf-reading-track { display: block; animation: pf-dock-open .2s ease-out; }
  body.pf-system.pf-unified[data-portfolio] .pf-reading-track ol { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 2px; }
  body.pf-system.pf-unified[data-portfolio] .pf-reading-track a { justify-content: flex-start; padding: 13px 12px; min-height: 48px; font-size: 17px !important; border-radius: var(--pf-control-radius); }
  body.pf-system.pf-unified[data-portfolio] .pf-reading-track a[aria-current='location'] { text-shadow: none; }
  body.pf-system.pf-unified[data-portfolio] .pf-reading-slot:not([data-ready]) { height: auto; margin-top: 0; }
  body.pf-system.pf-unified[data-portfolio] .pf-reading-slot:not([data-ready]) .pf-reading-inner { flex-wrap: wrap; }
  body.pf-system.pf-unified[data-portfolio] .pf-reading-slot:not([data-ready]) .pf-reading-track { display: block; position: static; flex-basis: 100%; border: 0; box-shadow: none; max-height: none; }
  body.pf-system.pf-unified[data-portfolio] .pf-reading-slot:not([data-ready]) .pf-reading-toggle { display: none; }
}
@media(max-width:600px) {
  body.pf-system.pf-unified[data-portfolio] .pf-reading-inner { padding: 0 84px 0 90px; }
  body.pf-system.pf-unified[data-portfolio] .pf-reading-track { inset-inline: 8px; }
  body.pf-system.pf-unified[data-portfolio] .pf-reading-track ol { grid-template-columns: repeat(2,minmax(0,1fr)); }
  body.pf-system.pf-unified[data-portfolio] .pf-reading-now { font-size: 15px !important; }
  body.pf-system.pf-unified[data-portfolio] .pf-reading-toggle .pf-reading-label { display: none; }
  body.pf-system.pf-unified[data-portfolio] .pf-reading-toggle { gap: 6px; padding-inline: 4px !important; }
  body.pf-system.pf-unified[data-portfolio] .pf-reading-track a { font-size: 16px !important; padding-inline: 8px; }
}
@media(max-width:360px) {
  body.pf-system.pf-unified[data-portfolio] .pf-reading-inner { padding: 0 72px 0 80px; }
  body.pf-system.pf-unified[data-portfolio] .pf-reading-now { font-size: 14px !important; }
  body.pf-system.pf-unified[data-portfolio] .pf-reading-chevron { width: 20px; height: 20px; flex-basis: 20px; }
  body.pf-system.pf-unified[data-portfolio] .pf-reading-chevron::before,body.pf-system.pf-unified[data-portfolio] .pf-reading-chevron::after { top: 9px; left: 4px; }
}
@keyframes pf-dock-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media(prefers-reduced-motion:reduce) {
  html:has(.pf-reading-nav) { scroll-behavior: auto !important; }
  body.pf-system.pf-unified[data-portfolio] .pf-reading-nav,body.pf-system.pf-unified[data-portfolio] .pf-reading-nav * { transition: none !important; animation: none !important; }
}