/* Catalogue product pages and index entries: the few rules the shared project styles do not already provide. */
/* Phone-sized pictures reuse the Crossweek introduction band. */
.project-body .phone-intro{margin-top:0}
.project-body .phone-intro p,.phone-intro p{margin-bottom:0}
/* A numbered ledger, for rows that happen in order. */
.ledger.steps{counter-reset:step}.ledger.steps .row{counter-increment:step}
.ledger.steps dt:before{content:counter(step);display:inline-block;min-width:1.7em;color:var(--muted);font-variant-numeric:tabular-nums}
.game-gallery>h2+p{max-width:70ch;margin-bottom:26px}
/* Portrait screens of different heights share one frame height, so their captions line up. */
.gallery.portraits figure{display:flex;flex-direction:column}.gallery.portraits figure>a{flex:1;display:flex;align-items:center;justify-content:center}
.game-overview .ledger{margin:0}.game-overview .ledger a,.project-body .ledger a{text-underline-offset:4px}
/* Recorded command-line output, set as text on a dark sheet. Two columns, one below the other on a phone. */
.project-body .frame.transcript{display:grid;grid-template-columns:1fr 1fr;padding:0;background:#1b211e;color:#c9d1c5;border:0}
.transcript .pane{min-width:0;padding:clamp(20px,3.4vw,48px)}.transcript .pane+.pane{border-left:1px solid #3c463d}
.transcript .pane-title{font-size:15px;line-height:1.5;color:#a9b3a6;margin:0 0 20px;max-width:none}
.transcript pre{margin:0;font:clamp(13px,1.15vw,16px)/1.8 "SF Mono",SFMono-Regular,Menlo,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere}
.transcript pre b{font-weight:400;color:#fff}
/* On the dark theme the sheet goes one step deeper than the page, as the availability band does. */
html[data-theme=dark] .project-body .frame.transcript,html[data-scheme=dark] .project-body .frame.transcript{background:#0e120f}
@media(prefers-color-scheme:dark){html:not([data-theme=light]) .project-body .frame.transcript{background:#0e120f}}
@media(max-width:760px){.project-body .frame.transcript{grid-template-columns:1fr}.transcript .pane+.pane{border-left:0;border-top:1px solid #3c463d}}
/* Index pages: the contents line sits directly on the first rule of the list. */
.collection-heading+.page-contents{border-bottom:0}
/* The featured game shows its whole picture: a cover crop cut through the title bar. */
.more-playable .featured-picture img{aspect-ratio:auto;height:auto}
.other-games .phone-shot .clear-image{padding:14px}.other-games .phone-shot .clear-image img{object-fit:contain;max-height:300px}
/* Prototype pictures share one shape, so a study plate is never cropped. */
.directory-section .directory-picture img{aspect-ratio:1.6}
.directory-section{padding-top:64px}.directory-section .directory-row:last-child{border-bottom:0}
@media(min-width:1001px){.directory-section .directory-row{grid-template-columns:240px minmax(0,1fr) auto;align-items:center}.directory-section .directory-row .project-actions{margin-top:0}.directory-section .directory-row .details-link{white-space:nowrap}}
.directory-row h3{font-weight:500;letter-spacing:-.04em}.directory-row h3 a{text-decoration:none}.directory-row h3 a:hover{text-decoration:underline}
/* Try it: a small local example on the page. Nothing is saved or sent. */
.try-stage{max-width:720px;margin-top:28px;padding:clamp(20px,3vw,34px);background:var(--surface);border:1px solid var(--line)}
.try-stage .try-title{font-size:clamp(22px,2.2vw,28px);font-weight:500;letter-spacing:-.025em;line-height:1.25;margin:0 0 6px;max-width:none}
.try-stage .try-meta{font-size:15px;color:var(--muted);margin:0 0 12px;max-width:none}
/* The changing line sits below the controls, so a longer message never moves a button. */
.try-stage .try-note{font-size:17px;min-height:3.2em;margin:22px 0 0;max-width:52ch}.try-stage .finding{min-height:4.8em}.row-stage .try-note{min-height:0}
.try-stage .try-result{display:flex;align-items:baseline;gap:12px;margin:22px 0 0}
.try-result strong{font-size:68px;font-weight:500;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.try-controls{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.try-controls button{font:inherit;font-size:16px;line-height:1.4;color:var(--ink);background:transparent;border:1px solid var(--ink);border-radius:0;padding:9px 16px;min-height:44px;cursor:pointer;transition:background-color .3s var(--sh-ease),color .3s var(--sh-ease)}
.try-controls button:hover:not(:disabled){background:var(--ink);color:var(--page)}
.try-controls button:active:not(:disabled){transform:translateY(1px)}
.try-controls button:disabled{border-color:var(--line);color:var(--muted);cursor:default}
.try-stage button:focus-visible{outline:3px solid var(--focus,#b43771);outline-offset:4px}
.portion-marks{display:flex;gap:12px;margin-top:18px}
.portion-marks i{width:26px;height:26px;border:1px solid var(--ink);border-radius:50%;background:var(--ink);transition:background-color .3s var(--sh-ease),transform .3s var(--sh-ease)}
.portion-marks i.used{background:transparent;transform:scale(.72)}
.row-count{display:block;width:100%;margin:0;padding:14px 0 16px;background:transparent;border:0;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);border-radius:0;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.row-count span{display:block;font-size:clamp(76px,11vw,116px);font-weight:500;letter-spacing:-.06em;line-height:1;font-variant-numeric:tabular-nums}
.row-count small{display:block;margin-top:8px;font-size:15px;color:var(--muted)}
.row-count:disabled{cursor:default}
.source-pair{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:16px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--line)}
.try-stage .source-pair p{font-size:15px;color:var(--muted);margin:0;max-width:none}
.source-pair strong{display:block;margin:4px 0;font-size:clamp(25px,3vw,38px);font-weight:500;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.try-stage .finding{border-left:3px solid var(--ink-block);padding-left:16px}
.bus-states{list-style:none;display:flex;margin:20px 0 0;padding:0;border-top:1px solid var(--line)}
.bus-states li{flex:1;margin-top:-1px;padding:10px 0 0;border-top:3px solid transparent;font-size:15px;color:var(--muted);transition:color .3s var(--sh-ease),border-color .3s var(--sh-ease)}
.bus-states li[aria-current]{color:var(--ink);font-weight:500;border-top-color:var(--ink-block)}
@media(max-width:600px){.directory-section{padding-top:44px}.try-result strong{font-size:56px}.source-pair{gap:16px}}
@media(prefers-reduced-motion:reduce){.try-controls button,.portion-marks i,.bus-states li{transition:none}}