/* Standard Serial Project only. Composition variables remain frontend-owned. */
.project-page { margin:0; color:#222; background:#f3f3f3; font:14px/1.4 Arial,Helvetica,sans-serif; color-scheme:light; }
.project-page *, .project-page *::before, .project-page *::after { box-sizing:border-box; }
.project-page [hidden] { display:none !important; }
.project-page a { color:inherit; text-decoration:none; }
.project-page a:hover { text-decoration:underline; }
.project-page :focus-visible { outline:2px solid #222; outline-offset:4px; }
.project-page button, .project-page a { touch-action:manipulation; }
.project-page button { font:inherit; color:inherit; background:white; border:1px solid #777; border-radius:0; padding:8px 14px; min-height:44px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.project-skip { position:fixed; top:-80px; left:16px; padding:12px; z-index:5; background:white; }
.project-skip:focus { top:8px; }
.project-head { position:sticky; top:0; z-index:2; background:#f3f3f3; min-height:80px; display:grid; grid-template-columns:minmax(44px,1fr) minmax(0,3fr) minmax(44px,1fr); gap:16px; align-items:center; padding:12px 40px; }
.project-head a { display:inline-flex; align-items:center; min-width:44px; min-height:44px; justify-self:start; }
.project-head #info-open { justify-self:end; justify-content:end; }
.project-orientation { text-align:center; min-width:0; overflow-wrap:anywhere; }
.project-orientation h1 { font:inherit; font-weight:400; margin:0 0 4px; }
#serial-counter { font-size:12px; font-variant-numeric:tabular-nums; }
#viewer:focus-visible { outline-offset:-5px; }
.serial-stage { list-style:none; padding:0; margin:16px 0; height:max(200px, calc(100svh - 224px)); display:grid; place-items:center; }
.serial-stage li { min-width:0; }
.serial-stage figure { margin:0; }
.serial-stage img { display:block; width:min(78vw, calc(max(200px, 100svh - 224px) * var(--photo-ratio)), var(--photo-width)); height:auto; }
.serial-controls { display:flex; justify-content:center; align-items:center; gap:48px; min-height:64px; }
.serial-controls a { display:inline-flex; min-width:96px; min-height:48px; align-items:center; justify-content:center; }
.serial-controls [aria-disabled=true] { color:#666; text-decoration:none; }
.serial-feedback { text-align:center; min-height:48px; padding:0 16px 12px; }
#serial-status { margin:0; font-size:12px; }
#serial-retry { margin-top:8px; }
.serial-empty { min-height:200px; display:grid; place-items:center; padding:24px; text-align:center; }
#project-info { margin:40px auto; padding:28px; width:640px; max-width:calc(100% - 32px); overflow-wrap:anywhere; }
#project-info h2 { font-size:22px; font-weight:400; }
#project-info p { line-height:1.7; }
#info-close-link { display:inline-flex; align-items:center; min-height:44px; }
.project-page.info-open { overflow:hidden; }
.project-info-dialog { border:0; padding:0; margin:16px 16px 16px auto; width:440px; max-width:calc(100vw - 32px); max-height:calc(100svh - 32px); color:inherit; background:white; overflow:auto; }
.project-info-dialog #project-info { margin:0; width:auto; max-width:none; }
.project-info-dialog button { margin:24px 28px 0; }
.project-info-dialog::backdrop { background:rgb(0 0 0 / .16); }
/* Native modality ends immediately on close; optional top-layer pixels may fade. */
.project-info-dialog { opacity:0; transition:opacity 160ms cubic-bezier(.2,0,.2,1), display 160ms allow-discrete, overlay 160ms allow-discrete; }
.project-info-dialog[open] { opacity:1; }
.project-info-dialog::backdrop { opacity:0; transition:opacity 160ms cubic-bezier(.2,0,.2,1), display 160ms allow-discrete, overlay 160ms allow-discrete; }
.project-info-dialog[open]::backdrop { opacity:1; }
@starting-style { .project-info-dialog[open], .project-info-dialog[open]::backdrop { opacity:0; } }
.project-info-dialog:not([open]), .project-info-dialog:not([open])::backdrop { pointer-events:none; }
@media(max-width:700px) {
    .project-page { font-size:13px; }
    .project-head { min-height:72px; padding:12px 16px; gap:8px; }
    .serial-stage { height:max(200px, calc(100svh - 216px)); }
    .serial-stage img { width:min(calc(100vw - 32px), calc(max(200px, 100svh - 216px) * var(--photo-ratio)), var(--photo-width)); }
    .project-info-dialog { margin:16px; width:calc(100vw - 32px); }
}
@media(prefers-reduced-motion:reduce) {
    .project-page *, .project-page *::before, .project-page *::after { scroll-behavior:auto !important; animation:none !important; transition:none !important; }
    .project-info-dialog, .project-info-dialog::backdrop { transition:none; }
}