/* Two refinement passes, October 2026: orientation, rhythm and clear actions. */
.elsewhere-next{--control-focus:#e4edbf}
.elsewhere-next button,.elsewhere-next a{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.elsewhere-next button:focus-visible,.elsewhere-next a:focus-visible,.elsewhere-next input:focus-visible,.elsewhere-next textarea:focus-visible{outline:2px solid var(--control-focus);outline-offset:4px}
.elsewhere-next dialog:not(.world-map):not(.selection-room){--control-focus:#345b48}
.ew-header .map-label{font:11px var(--body);letter-spacing:0}
.elsewhere-next .arrival-invitation{max-width:350px}
.elsewhere-next .arrival-invitation>p{text-wrap:balance;line-height:1.65;text-shadow:0 2px 18px #071020}
.elsewhere-next .arrival-work-links{display:grid;grid-template-columns:1fr 1fr;gap:5px 22px;margin-top:20px}
.elsewhere-next .arrival-work-links button{font-size:12px;text-align:left;min-height:42px;border-color:#f7f5e332}

.elsewhere-next .arrival-invitation>button{min-height:48px}
.elsewhere-next .scene-source{color:#d0dbd5;text-shadow:0 1px 8px #071020}
/* The index has four works on the left and five on the right. */
.selection-room{width:1040px;padding:40px;max-height:calc(100dvh - 48px)}
.selection-room h2{font-size:clamp(38px,4.3vw,62px);line-height:1;max-width:850px;margin-bottom:35px;letter-spacing:-.02em}
.selection-columns{grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:25px 56px}
.selection-resonant{grid-area:1/1}.selection-make{grid-area:2/1}.selection-comics{grid-area:1/2/3/3}
.selection-columns h3{font-size:12px;margin:0 0 13px;color:#dceab3}
.selection-item{display:grid;grid-template-columns:52px minmax(0,1fr) 18px;grid-template-rows:auto auto;gap:6px 17px;align-content:center;padding:16px 0;min-height:82px;transition:background .2s}
.selection-item>img{grid-row:1/3;width:52px;height:52px;object-fit:cover;align-self:center;filter:saturate(.8);border:1px solid #e8edcc22}
.selection-item>span{grid-column:2;font-size:27px;line-height:1.05;align-self:end}.selection-item>small{grid-column:2;font-size:11px;line-height:1.4;align-self:start}
.selection-item>b{position:static;grid-column:3;grid-row:1/3;align-self:center;font-size:17px;color:#c4d3bd;transition:transform .2s}
.selection-item:hover>b{transform:translate(2px,-2px)}.selection-item:hover>img{filter:saturate(1)}
.selection-room>footer{font-size:11px;line-height:1.6;align-items:baseline;margin-top:25px}
/* Keep a way out within reach when the paper itself scrolls. */
.elsewhere dialog{--dialog-surface:#e9efdb}
.dialog-tools{position:sticky;top:34px;height:0;display:flex;justify-content:flex-end;z-index:20;pointer-events:none}
.dialog-tools>.dialog-close{position:relative!important;inset:auto!important;flex-shrink:0;transform:translate(15px,-23px);pointer-events:auto;box-shadow:0 0 0 7px var(--dialog-surface,var(--paper))}
.world-map .dialog-tools>.dialog-close,.selection-room .dialog-tools>.dialog-close{background:#142331;color:#f8f5df;box-shadow:0 0 0 7px #142331}
.world-map>header,.selection-room>header{padding-right:52px}
.map-place[aria-current=location]>img{border-color:#e7efb8;box-shadow:0 0 0 3px #e7efb81a}.map-place[aria-current=location]>span{color:#e7efb8}
.project-notes .notes-context{font-size:16px;line-height:1.7}

.contact-address{width:fit-content;font-size:clamp(18px,2.7vw,28px);white-space:nowrap;letter-spacing:-.045em}
/* Shared transport details stay quiet, with useful hit areas. */
.media-transport svg{display:block;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.media-transport button{width:40px;height:40px;min-height:40px}.media-transport{gap:12px}
.media-slot .film-surface{cursor:pointer;transition:box-shadow .25s}.media-slot .film-surface:focus-visible{outline:1px solid #e5efc3;outline-offset:5px}
@media(hover:hover){.media-slot .film-surface:hover{box-shadow:0 8px 80px #b5dbb924}}
.reaction-button[aria-pressed=true] small{color:#e1ebba}.reaction-take a{min-height:32px;display:inline-flex;align-items:center}
@media(max-width:1050px) and (min-width:761px){.selection-columns{gap:22px 36px}.selection-item>span{font-size:25px}.selection-room{padding:32px}.arrival-invitation{right:5%}}
@media(max-width:760px){
 .elsewhere-next .ew-header{display:grid;grid-template-columns:minmax(0,1fr) 40px auto;gap:13px;align-items:center;padding:14px 22px;height:77px}
 .elsewhere-next .ew-header .map-toggle{display:flex;align-items:center;justify-content:center;width:40px;height:40px;min-height:40px;padding:0;border:1px solid #e8efce66;border-radius:50%}
 .elsewhere-next .ew-header .map-toggle .map-label{display:none}.elsewhere-next .ew-header .map-symbol{font-size:25px;line-height:1}.elsewhere-next .selected-toggle{min-height:40px;font-size:10px}.elsewhere-next .ew-name{font-size:10px;text-align:left}.elsewhere-next .ew-name>span{font-size:8px;line-height:1.6}
 .project-chrome{top:80px;height:56px;left:22px;right:22px;grid-template-columns:minmax(0,1fr) minmax(75px,1.1fr) minmax(0,1fr);gap:9px}
 .project-chrome button{font-size:10px;min-height:32px;line-height:1.45}.project-chrome h2{font-size:12px;line-height:1.4;letter-spacing:0}.project-actions{gap:0}.project-actions button,.project-chrome .project-actions button:last-child{font-size:9px;min-height:28px;line-height:1.4}
 .experience-stage{top:160px}.visit-guide{top:148px;font-size:9px;gap:12px}.visit-guide button{font-size:9px;min-height:30px}.has-visit .experience-stage{top:190px}
 .elsewhere-next .arrival-work-links{gap:3px 22px;margin-top:13px;max-width:335px}.elsewhere-next .arrival-work-links button{font-size:11px;min-height:36px}.elsewhere-next .arrival-invitation>p{font-size:14px;line-height:1.6}.elsewhere-next .arrival-invitation>button{font-size:12px;min-height:44px;margin-top:12px}
 .selection-room{padding:34px 25px 25px;max-height:calc(100dvh - 20px)}.selection-room h2{font-size:40px;max-width:260px;margin:16px 0 28px;line-height:1.04}.selection-columns{display:flex;flex-direction:column;gap:26px}.selection-item{grid-template-columns:46px minmax(0,1fr) 16px;gap:5px 13px;padding:14px 0;min-height:77px}.selection-item>img{width:46px;height:46px}.selection-item>span{font-size:25px}.selection-item>small{font-size:11px}.selection-room>footer{font-size:10px;line-height:1.7}.selection-room>footer a{white-space:normal}
 .dialog-tools{top:30px}.dialog-tools>.dialog-close{transform:translate(10px,-18px);width:38px;height:38px;min-height:38px;box-shadow:0 0 0 5px var(--dialog-surface,var(--paper))}.world-map .dialog-tools>.dialog-close,.selection-room .dialog-tools>.dialog-close{box-shadow:0 0 0 5px #142331}.world-map>header,.selection-room>header{padding-right:40px}
 .elsewhere-next .world-map{height:fit-content;max-height:calc(100dvh - 20px)}.map-place small{font-size:8px;line-height:1.4;max-width:160px}
 .project-notes{padding:38px 25px 28px}.project-notes h2{font-size:34px;margin:22px 0}.project-notes .notes-context{font-size:14px;line-height:1.75}.notes-status{font-size:11px}.contact-address{font-size:20px;letter-spacing:-.045em}
 .media-transport{height:42px;gap:10px}.media-transport button{width:36px;height:36px;min-height:36px}.media-transport output{font-size:10px}.media-slot .work-film figcaption{font-size:9px;line-height:1.5}.artifact-caption{font-size:9px;line-height:1.5}.arena-caption span,.counter-caption span{font-size:8px;line-height:1.5}.arena-caption a,.counter-caption a,.finished-link{font-size:10px;line-height:1.5}.arena-path button{font-size:11px;min-height:50px}.arena-path button span{font-size:8px}.arena-caption{max-width:48%}
 .counter-host{bottom:145px;opacity:.22;left:-20%;height:40%}.counter-choices button{min-height:65px}.counter-choices small{font-size:8px}.counter-caption{padding-top:2px}
 .comic-controls{gap:5px}.comic-progress{gap:4px}.comic-progress button{width:34px;height:34px;min-height:34px;font-size:10px}.comic-controls>button{min-width:30px;min-height:40px}.comic-controls [data-comic-whole]{font-size:10px;max-width:73px;min-width:0;margin-left:3px}.comic-hint,.comic-afterword{font-size:9px;line-height:1.6}.comic-title nav button{font-size:11px;min-height:34px}
 .record-touch{font-size:10px}.listening-credit{font-size:8px;line-height:1.6}.record-shelf nav button{font-size:12px}.record-shelf nav small{font-size:9px}
 .reaction-take{gap:23px;font-size:10px;margin-top:3px}.reaction-button small{font-size:9px;line-height:1.6}.reaction-cast{gap:18px;scrollbar-width:thin}.reaction-room>.artifact-caption{font-size:8px;max-width:180px}
}
@media(max-width:360px){.elsewhere-next .ew-header{padding:14px 18px;gap:9px;grid-template-columns:minmax(0,1fr) 36px auto}.elsewhere-next .ew-header .map-toggle{width:36px;height:36px;min-height:36px}.elsewhere-next .selected-toggle{font-size:9px}.elsewhere-next .ew-name>span{font-size:7px}.project-chrome{left:18px;right:18px;gap:6px}.project-chrome h2{font-size:11px}.project-chrome button{font-size:9px}.project-actions button,.project-chrome .project-actions button:last-child{font-size:8.5px}.contact-address{font-size:17px;letter-spacing:-.045em}.comic-progress button{width:29px;height:34px}.comic-controls [data-comic-whole]{font-size:9px;max-width:64px}}
@media(max-width:760px) and (max-height:650px){.experience-stage{top:157px}.has-visit .experience-stage{top:189px}.elsewhere-next .arrival-invitation>p{font-size:12px;line-height:1.5}.elsewhere-next .arrival-work-links{margin-top:5px}.elsewhere-next .arrival-work-links button{min-height:31px;font-size:10px}.elsewhere-next .arrival-invitation>button{min-height:34px;margin-top:7px}.elsewhere-next .arrival-invitation{bottom:24%}}
@media(prefers-reduced-motion:reduce){.selection-item,.selection-item>b,.media-slot .film-surface{transition:none}}

/* One portfolio, with a connected making room. */
.portfolio-links{display:flex;align-items:center;gap:28px}.making-toggle{font-size:12px;min-height:44px;display:flex;align-items:center;color:#e5efb3}.arrival-work-links>a{font-size:12px;min-height:44px;display:flex;align-items:center}.map-foot>a{font-size:12px;min-height:44px;display:flex;align-items:center}.selection-item{display:grid;text-decoration:none}.reaction-make{position:absolute;bottom:9%;right:6%;font-size:12px;text-decoration:underline;text-underline-offset:5px}.flight-finish>div{display:flex;flex-direction:column;gap:9px}
@media(max-width:760px){.portfolio-links{gap:14px}.making-toggle{font-size:10px}.elsewhere-next .arrival-work-links>a{font-size:10px}.reaction-make{position:static;margin:0 25px 25px;display:block;line-height:1.6}.elsewhere-next .map-foot>a{font-size:10px}}
@media(max-width:360px){.portfolio-links{gap:10px}.making-toggle{font-size:9px}.elsewhere-next .ew-header{padding-left:18px;padding-right:18px}}
@media(max-width:360px){.elsewhere-next .ew-name{white-space:nowrap;font-size:9px;letter-spacing:.06em;flex-shrink:0}.elsewhere-next .ew-name>span{display:none}.elsewhere-next .arrival-type h2{font-size:104px}}

/* Launch polish: header About, legible arrival, clear café chip, quieter phone layering. */
.elsewhere-next .about-toggle{font-size:11px;padding:0;min-height:40px}
.elsewhere-next .arrival-invitation{isolation:isolate}
.elsewhere-next .arrival-invitation::before{content:'';position:absolute;inset:-44px -56px -30px;background:radial-gradient(closest-side,#0b1224c7 40%,#0b122400);z-index:-1;pointer-events:none}
.elsewhere-next .arrival-work-links>*{white-space:nowrap}
.selection-room .selection-columns{padding-right:54px}

@media(min-width:761px){
 .elsewhere-next .place-cafe .cafe-open{left:7%;top:58%}
}
@media(max-width:760px){
 .elsewhere-next .ew-header .making-toggle{display:none}
 .elsewhere-next .about-toggle{font-size:10px}
 .selection-room .selection-columns{padding-right:40px}
 .counter .counter-host{display:none}
 .reaction-room .reaction-make{position:static;display:block;margin:0 25px 18px;text-align:left;inset:auto;transform:none}
 
}
@media(max-width:360px){
 .elsewhere-next .about-toggle{font-size:9px}
}
.contact-dialog .contact-actions,.about-dialog .about-actions{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin:22px 0 6px}
.contact-dialog .contact-actions button,.contact-dialog .contact-actions a,.about-dialog .about-actions>a{font:500 14px var(--body);color:inherit;background:none;border:0;padding:0;min-height:44px;display:inline-flex;align-items:center;cursor:pointer;text-decoration:underline;text-underline-offset:5px}
.contact-dialog .contact-actions button{font-weight:600}

/* Phone text floor: nothing a visitor reads is smaller than 12 px (checked by qa/text-floor.mjs).
   These are the site's small labels, captions and chrome; !important lets the floor win over the
   many per-room size rules without touching anything set larger. */
@media(max-width:760px){
 .elsewhere-next :is(small,figcaption,label,output,legend,.micro,.eyebrow,.artifact-caption,.scene-source,.scene-whisper,.notes-status,.notes-credit){font-size:12px!important;line-height:1.4}
 .elsewhere-next :is(.ew-name,.ew-name>span,.selected-toggle,.about-toggle,.route-onward,.current-place span,.journal-toggle){font-size:12px!important}
 .elsewhere-next .ew-name>span{letter-spacing:0;margin-top:4px}
 .elsewhere-next :is(.location-type,.arrival-type)>span{font-size:12px!important;letter-spacing:.1em}
 .elsewhere-next :is(.world-hotspot span,.signal-caption,.listen-label,.scene-side-link,.arrival-work-links button,.arrival-work-links a,.arrival-invitation>button){font-size:12px!important}
 .elsewhere-next :is(.map-foot a,.map-foot button,.selection-room footer a,.selection-room footer p){font-size:12px!important}
 .elsewhere-next :is(.project-chrome button,.visit-guide span,.visit-guide button){font-size:12px!important}
 .elsewhere-next :is(.arena-path button,.arena-path button span,.counter-choices small,.comic-title nav button,.comic-controls button,.record-touch){font-size:12px!important}
 .elsewhere-next :is(.arena-caption a,.arena-caption span,.counter-caption a,.counter-caption span,.finished-link,.character-next a,.character-next button,.record-shelf a,.reaction-take a,.reaction-button small span,.cinema-aside p){font-size:12px!important}
}

/* Phone stickers: each sticker's links sit under its own name, with a divider before the next one. */
@media(max-width:760px){
 .reaction-cast figure{margin:0;padding:0 0 18px;border-bottom:1px solid #f8f5df1f;max-height:none;min-height:auto}
 .reaction-cast{grid-auto-rows:auto}
 .reaction-cast figure:last-child{border-bottom:0}
 .reaction-take{max-width:320px;margin:0 auto;padding-left:170px;display:flex;flex-direction:column;align-items:flex-start;gap:0}
 .reaction-take a{white-space:nowrap;min-height:34px}
 /* With the text floor, keep the header and room bar on single lines. */
 .elsewhere-next .ew-header{column-gap:10px}
 .elsewhere-next .portfolio-links{gap:12px}
 .elsewhere-next .ew-name>span{white-space:nowrap}
 .elsewhere-next .project-chrome [data-leave-work]{white-space:nowrap}
 .elsewhere-next .back-full{display:none}
 .elsewhere-next .back-short{display:inline}
}
@media(min-width:761px){.elsewhere-next .back-short{display:none}}

/* One set of controls. View switchers share one style: a small number above the name in the text
   face, the current view in lime. Every close is the round ×. Main actions are cream pills, like
   the site's other rounded controls. */
.elsewhere-next .counter-choices small{font:10px var(--body);letter-spacing:.1em;color:#cbbda4;margin-bottom:8px}
.elsewhere-next .counter-choices span{font:500 15px/1.3 var(--body);text-transform:none;letter-spacing:0;color:#d9cfbd}
.elsewhere-next .counter-choices button[aria-current=true] span{color:#eef3c4}
.elsewhere-next .counter-choices button[aria-current=true]{border-top-color:#eef3c4}
.elsewhere-next .visit-guide [data-visit-leave]{width:32px;height:32px;min-height:32px;border:1px solid #f8f5df66;border-radius:50%;display:grid;place-items:center;padding:0}
.elsewhere-next .about-dialog .action{border-radius:999px;padding:13px 24px}
@media(max-width:760px){.elsewhere-next .counter-choices span{font-size:14px}}

/* The arrival has one main action, the short tour, as a cream pill; a game and the making room are
   one quiet line ("Walk toward the city" was the footer's Next a second time). */
.elsewhere-next .arrival-invitation>.arrival-tour{display:inline-flex;align-items:center;gap:22px;background:#f8f5df;color:#0b1224;border:0;border-radius:999px;padding:13px 24px;min-height:48px;margin-top:22px;font:500 13px var(--body)}
.elsewhere-next .arrival-invitation>.arrival-tour>span{font-size:18px}
.elsewhere-next .arrival-invitation>.arrival-tour:hover{background:#ddf1a4}
.elsewhere-next .arrival-work-links{display:flex;gap:26px;margin-top:16px}
.elsewhere-next .arrival-work-links>*{border-bottom:1px solid #f7f5e340;min-height:38px;display:inline-flex;align-items:center}
@media(min-width:761px) and (max-width:1050px){.elsewhere-next .arrival-invitation{max-width:320px}}
/* On phones the arrival stacks between the header and the place credit instead of being placed by
   shares of the height, so its pieces never meet on a short screen (Safari's toolbars make every
   phone shorter than its spec). The wordmark takes the height that is left. */
@media(max-width:760px){
 .elsewhere-next .place-moon{display:flex;flex-direction:column;padding:max(80px,12dvh) 25px 146px}
 .elsewhere-next .place-moon>:is(.moon-note,.arrival-type,.arrival-invitation){position:relative;inset:auto;margin:0;transform:none;max-width:none}
 .elsewhere-next .place-moon>.moon-note{order:0;align-self:flex-end;flex:none}
 .elsewhere-next .place-moon>.arrival-type{order:1;align-self:flex-start;margin-top:clamp(8px,4dvh,36px);flex:none}
 .elsewhere-next .place-moon>.arrival-invitation{order:2;margin-top:auto;padding-top:16px;flex:none}
 .elsewhere-next .place-moon .arrival-type h2{font-size:clamp(66px,calc((100dvh - 511px) / 1.46),29vw)}
 .elsewhere-next .arrival-invitation>.arrival-tour{margin-top:16px}
 .elsewhere-next .arrival-work-links{margin-top:10px}
}
@media(max-width:760px) and (max-height:720px){
 .elsewhere-next .place-moon .arrival-invitation>p{font-size:12px;line-height:1.5}
 .elsewhere-next .arrival-invitation>.arrival-tour{min-height:42px;padding-top:10px;padding-bottom:10px;margin-top:12px}
 .elsewhere-next .arrival-work-links{margin-top:6px}.elsewhere-next .arrival-work-links>*{min-height:34px}
}
/* The shortest phones (an iPhone SE in Safari): "You are here" steps aside for the wordmark. */
@media(max-width:760px) and (max-height:600px){
 .elsewhere-next .place-moon .arrival-type>span{display:none}
 .elsewhere-next .place-moon .arrival-type h2{font-size:clamp(66px,calc((100dvh - 460px) / 1.46),29vw)}
}

/* One headline style in every room: the rooms' condensed capitals in cream. Brew Blitz and Small Problems
   had plain mixed case, Meet Cat a tan tint and Window Seat a small label; sizes still follow each room's
   staging. */
.elsewhere-next .counter-title h3,.elsewhere-next .closing-time .counter-title h3{font:600 54px/.92 var(--condensed);text-transform:uppercase;letter-spacing:-.015em;color:#f8f5df;margin:14px 0 10px}
.elsewhere-next .comic-title h3{font:600 50px/.92 var(--condensed);text-transform:uppercase;letter-spacing:-.015em;color:#f8f5df}
.elsewhere-next .character-cinema .cinema-word{color:#f8f5df}
.elsewhere-next .window-cinema .cinema-word{font:600 clamp(64px,7vw,112px)/.85 var(--condensed);letter-spacing:-.015em;top:6%;bottom:auto;left:0;color:#f8f5df}
@media(max-width:760px){
 .elsewhere-next .counter-title h3,.elsewhere-next .closing-time .counter-title h3{font-size:36px;margin:8px 0 0}
 .elsewhere-next .comic-title h3{font-size:34px}
 .elsewhere-next .cinema .cinema-word,.elsewhere-next .window-cinema .cinema-word,.elsewhere-next .character-cinema .cinema-word{display:block;position:static;font:600 36px/.92 var(--condensed);letter-spacing:-.015em;color:#f8f5df;margin:4px 0 14px}
 .elsewhere-next .cinema-word br{display:none}
 .elsewhere-next .cinema{grid-template-rows:auto minmax(0,1fr) 85px}.elsewhere-next .character-cinema{grid-template-rows:auto minmax(0,1fr) 108px}
}
@media(min-width:761px) and (max-height:790px){.elsewhere-next .counter-title h3,.elsewhere-next .closing-time .counter-title h3{font-size:42px;margin:10px 0 6px}.elsewhere-next .counter:not(.closing-time) .counter-host{height:60%}}