/* Atelier Next — a reading room for work in motion. */
:root{--next-ink:#202527;--next-muted:#626b70;--next-rule:#dce0e2;--next-ease:cubic-bezier(.22,1,.36,1)}
::selection{background:#dce6ef;color:#18212a}
.reading-project [data-section]{scroll-margin-top:90px}

/* Keep raised section titles clear of the slideshow's bottom progress track. */
main .project-page:not(.about-page):not(.contact-page) bodycopy gallery-slideshow:has(+ .copy){margin-bottom:clamp(16px,1.5rem,24px)}

/* A film remains a useful link with JavaScript unavailable. */
media-item[data-film]{width:100%!important;display:block;margin:0!important}
.film-stage{aspect-ratio:var(--ratio,1.777778);position:relative;background:#171b1c;overflow:hidden;isolation:isolate}
.film-stage>.film-poster{display:block;width:100%;height:100%;object-fit:cover;opacity:.72;transition:opacity 500ms ease,transform 900ms var(--next-ease)}
.film-stage:has(.film-play:hover)>.film-poster{opacity:.85;transform:scale(1.018)}
.film-play{position:absolute;inset:0;width:100%;border:0;background:linear-gradient(transparent 40%,#0008);color:white;display:flex;align-items:center;justify-content:center;gap:14px;font:400 15px/1.3 var(--portfolio-font)!important;letter-spacing:.015em}
.film-play[hidden]{display:none}
.film-play-icon{width:56px;height:56px;border:1px solid #ffffffa0;border-radius:50%;display:grid;place-items:center;font:24px/1 Arial!important;padding-left:3px;transition:background 250ms ease}
.film-play:hover .film-play-icon{background:#ffffff20}
.film-play:focus-visible{outline:2px solid white;outline-offset:-7px}
.film-stage>iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#111}
.film-external{display:flex;justify-content:flex-end;align-items:center;gap:12px;min-height:40px;font:400 11px/1.4 var(--portfolio-font)!important;letter-spacing:normal;word-spacing:normal;color:var(--next-muted);text-decoration:none!important}
.film-external span{font:inherit!important}
.film-external:hover{color:#121a20}
media-item[data-loop] video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;opacity:0}
media-item[data-loop].is-playing video{opacity:1}
.loop-enlarge{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;border:0;background:none;cursor:zoom-in}
.loop-enlarge:focus-visible{outline:2px solid #6f8caf;outline-offset:4px}
.loop-toggle{position:absolute;bottom:10px;right:10px;z-index:2;min-height:36px;padding:8px 12px;border:1px solid #ffffff80;border-radius:2px;background:#182126bb;color:white;font:11px/1.2 var(--portfolio-font)!important}
.loop-toggle[hidden]{display:none}

/* Native scroll, section links and URL history; no scroll interception. */
.project-reader{position:fixed;z-index:18;top:0;left:40%;width:60%;height:52px;padding:0 clamp(32px,3.3vw,64px);display:flex;align-items:center;justify-content:space-between;gap:24px;background:#fff;border-bottom:1px solid var(--next-rule);opacity:0;visibility:hidden;transform:translateY(-5px);transition:opacity 200ms ease,transform 250ms var(--next-ease),visibility 200ms}
.project-reader.is-visible{visibility:visible;opacity:1;transform:none}
.project-reader[hidden]{display:none}
.reader-title{font:400 13px/1.3 var(--portfolio-font)!important;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0;color:#363f45;text-decoration:none}
.reader-contents{flex-shrink:0;position:relative;font:400 12px/1.5 var(--portfolio-font)!important}
.reader-contents summary{list-style:none;cursor:pointer;min-height:44px;display:flex;align-items:center;gap:14px;font:inherit!important}
.reader-contents summary::-webkit-details-marker{display:none}
.reader-contents summary span{font:inherit!important;font-size:15px!important;transition:transform .2s ease}
.reader-contents[open] summary span{transform:rotate(45deg)}
.reader-contents ol{position:absolute;right:0;top:46px;width:260px;max-height:min(65vh,460px);overflow:auto;background:#fff;padding:12px 16px;list-style:none;border:1px solid var(--next-rule);box-shadow:0 12px 24px #1020300b}
.reader-contents li{margin:0;font:inherit!important}
.reader-contents a{display:block;padding:10px 0;font:400 14px/1.5 var(--portfolio-font)!important;color:#515d65;border-bottom:1px solid #edf0f2;text-decoration:none}
.project-reader :is(a,summary):focus-visible{outline:2px solid #6f8caf;outline-offset:3px}
.reader-contents li:last-child a{border:0}
.reader-contents a:hover{color:#10171d}
.reader-progress{position:absolute;inset:auto 0 -1px;height:1px;background:transparent;pointer-events:none}
.reader-progress span{display:block;width:100%;height:100%;background:#6f8caf;transform:scaleX(var(--reading-progress,0));transform-origin:left}
.project-neighbors{display:grid;grid-template-columns:1fr 1fr;gap:28px;border-top:1px solid var(--next-rule);margin-top:32px;padding-top:24px}
.project-neighbors a{min-width:0;text-decoration:none!important;padding:10px 0 24px}
.neighbor-label{display:flex;align-items:center;gap:14px;font:400 11px/1.4 var(--portfolio-font)!important;color:var(--next-muted);margin-bottom:14px}
.neighbor-label span{font:inherit!important}
.neighbor-name{display:block;font:400 clamp(18px,1.6vw,25px)/1.25 var(--portfolio-font)!important;letter-spacing:-.025em;color:var(--next-ink);transition:color 200ms ease}
.project-neighbors a:hover .neighbor-name{color:#657f9b}

@media(max-width:800px){
  .reading-project [data-section]{scroll-margin-top:145px}
  .film-play{font-size:13px!important;gap:10px}
  .film-play-icon{width:44px;height:44px;font-size:21px!important}
  .loop-toggle{min-height:44px;bottom:7px;right:7px}
  .project-reader{top:66px;left:0;width:100%;height:48px;padding:0 20px;gap:16px;z-index:19}
  .reader-title{font-size:12px!important}
  .reader-contents summary{font-size:12px!important;gap:8px}
  .reader-contents ol{width:min(280px,calc(100vw - 40px));max-height:55vh;top:45px}
  .reader-contents a{min-height:44px}
  .project-neighbors{gap:20px;margin-top:28px;padding-top:18px}
  .neighbor-name{font-size:18px!important}
  .neighbor-label{font-size:10px!important;gap:8px}
}
@media(prefers-reduced-motion:reduce){
  .film-stage>.film-poster,.project-reader,.reader-contents summary span{transition:none;transform:none}
}