/* Project pages stay in the studio. Ömür is at his desk (a small loop of the real character, with stills
   from scripts/render-work-room.mjs as fallback); the page writes the work's name on the wall above him and what he says about it
   in bubbles beside him, as the home page does. The films are bubbles too. */
:root {
  color-scheme:dark;
  --wall:#3d5957; --cream:#f1e7d5; --ink:#1d3335; --ink-soft:#587072; --brass:#d2a567; --night:#152a2e;
  --bubble:linear-gradient(#f6eddd,#ebdfca); --lift:inset 0 1px 0 #fff9,0 14px 26px -16px #0a1e1ee6;
  --serif:'Cormorant Garamond',Georgia,serif; --sans:'DM Sans',system-ui,sans-serif;
  /* The room picture (16:10) covers the screen from its top left corner: this is its size there. */
  --room-w:max(100vw,160svh); --room-h:max(100svh,62.5vw);
}
* { box-sizing:border-box; }
html { background:var(--wall); scroll-behavior:smooth; }
body { margin:0; min-height:100svh; color:var(--cream); font:400 16px/1.6 var(--sans); -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
img { display:block; max-width:100%; height:auto; }
[hidden] { display:none!important; }
::selection { background:var(--brass); color:var(--night); }
:focus-visible { outline:2px solid var(--brass); outline-offset:4px; border-radius:8px; }
.skip-link { position:fixed; left:24px; top:16px; z-index:10; padding:12px 20px; border-radius:999px; background:var(--cream); color:var(--ink); transform:translateY(-250%); }
.skip-link:focus { transform:none; }

.room { position:fixed; inset:0; z-index:0; background:url('/cinematic/work/room/room.webp') 0 0 / cover no-repeat; }
.room-live { position:fixed; top:0; left:0; width:calc(var(--room-w) * .5); height:var(--room-h); z-index:0; overflow:hidden; pointer-events:none; opacity:0; -webkit-mask-image:linear-gradient(90deg,#000 76%,#0000 100%); mask-image:linear-gradient(90deg,#000 76%,#0000 100%); }
.room-live[data-state='ready'] { opacity:1; }
.room-live canvas { display:block; width:100%; height:100%; }
.room-character { position:absolute; left:30%; top:26%; width:48%; height:61%; pointer-events:auto; cursor:pointer; background:none; border:0; border-radius:45%; touch-action:pan-y; }
.room-character span { position:absolute; bottom:2%; left:50%; transform:translateX(-50%); white-space:nowrap; padding:5px 12px; border-radius:999px; background:#152a2ecc; font-size:12px; opacity:0; transition:opacity .2s; }
.room-character:hover span,.room-character:focus-visible span { opacity:1; }
/* Keep keyboard focus on the visible label, not the character-sized hit area. */
.room-character:focus-visible { outline:none; }
.room-character:focus-visible span { outline:2px solid var(--brass); outline-offset:4px; }
.room-response { position:absolute; top:46%; left:70%; padding:6px 12px; border-radius:14px 14px 14px 2px; background:var(--cream); color:var(--ink); font-size:14px; }
.room-response:empty { display:none; }
.room-motion-toggle { position:fixed; bottom:max(20px,env(safe-area-inset-bottom)); left:max(24px,env(safe-area-inset-left)); z-index:6; display:grid; place-items:center; width:44px; height:44px; border:1px solid #f1e7d557; border-radius:50%; background:#0508094d; color:var(--cream); cursor:pointer; transition:border-color .25s; }
.room-motion-toggle:hover { border-color:var(--brass); }
.room-motion-toggle svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.room-motion-toggle .play-mark,.room-motion-toggle[aria-pressed='true'] .pause-mark { display:none; }
.room-motion-toggle[aria-pressed='true'] .play-mark { display:block; }
/* As on the home page: no bar, the way back and "Say hello". */
.nav { position:fixed; inset:max(22px,env(safe-area-inset-top)) max(28px,env(safe-area-inset-right)) auto max(28px,env(safe-area-inset-left)); z-index:5; display:flex; justify-content:space-between; align-items:center; pointer-events:none; font-size:14.5px; }
.nav a { pointer-events:auto; display:inline-flex; align-items:center; gap:12px; min-height:42px; color:var(--cream); font-weight:500; letter-spacing:.02em; text-shadow:0 1px 12px #0d2424cc; transition:color .25s; }
.nav a:hover { color:#dcbb94; }

/* The work's name, in the wall's own lettering, above his head: it ends where what he says begins. */
.wall { position:fixed; z-index:1; left:calc(var(--room-w) * .262); top:calc(var(--room-h) * .062); width:calc(var(--room-w) * .29); transform:translateX(-50%); text-align:center; }
.wall p { margin:0; }
/* One recipe for every small label on the page. */
.wall-kicker,.wall-detail,.award,.part-mark p,.index p { font:500 12px/1.4 var(--sans); letter-spacing:.24em; text-transform:uppercase; }
.wall-kicker { color:var(--brass); }
h1 { margin:10px 0 14px; font:300 clamp(40px,calc(var(--room-w) * .047),76px)/1 var(--serif); letter-spacing:.02em; color:#eadfc9; overflow-wrap:anywhere; text-wrap:balance; }
/* The name keeps to one line above his head: longer names are set smaller. */
h1.mid-title { font-size:clamp(34px,calc(var(--room-w) * .036),58px); }
h1.long-title { font-size:clamp(27px,calc(var(--room-w) * .026),42px); letter-spacing:.01em; }
.wall-detail { color:#d9cfbb; text-wrap:balance; }
.award { display:inline-flex; align-items:center; gap:8px; color:var(--brass); }
.award svg { width:18px; height:18px; }

/* What he says, beside him: where the room picture is out of focus. */
.thread { position:relative; z-index:1; display:grid; gap:16px; justify-items:start; max-width:880px; margin:0 5vw 0 max(48vw,calc(var(--room-w) * .41)); padding:96px 0 64px; }
.say { position:relative; max-width:min(100%,620px); margin:0; padding:17px 24px 18px; border-radius:26px 26px 26px 8px; background:var(--bubble); color:var(--ink); font-size:18.5px; line-height:1.45; box-shadow:var(--lift); transform-origin:0 100%; transition:opacity .5s ease,transform .7s cubic-bezier(.16,1,.3,1); }
/* Not yet said: set by project.js on the bubbles still below the screen. */
.wait { opacity:0; transform:translateY(18px) scale(.97); }

/* A film is a bubble he sends: it plays where it is. */
.film { width:100%; max-width:none; padding:10px 10px 13px; }
/* An upright film on a page of its own: the bubble is as wide as the film, and the film fits between what he says above it and the chat dock below. */
@media (min-width:700px) and (min-aspect-ratio:5/4) { .thread > .film:has(.stage[data-shape='portrait']) { width:min(100%,max(250px,calc((100svh - 440px) * 9 / 16 + 20px))); } }

/* Several films: a list of them all, then each in a part of its own under its number and the name they share.
   Wide films take the full width; upright ones stand side by side (their names keep to one line, so the films stay level). */
.index { width:100%; max-width:none; padding:15px 16px 16px; }
.index p { margin:0 8px 11px; color:var(--ink-soft); }
.index ol { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); gap:6px; margin:0; padding:0; list-style:none; }
.index a { display:flex; align-items:center; gap:12px; padding:7px 14px 7px 7px; border-radius:16px; transition:background-color .25s; }
.index a:hover { background:#1d33351a; }
.index img { flex:none; width:46px; height:46px; border-radius:12px; object-fit:cover; background:#05090a; }
.index b { display:block; font-size:15.5px; font-weight:600; line-height:1.25; }
.index small { display:block; color:var(--ink-soft); font-size:13px; font-variant-numeric:tabular-nums; }
.parts { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); column-gap:14px; row-gap:36px; width:100%; margin-top:14px; }
.part { grid-column:1 / -1; display:grid; align-content:start; justify-items:start; gap:12px; min-width:0; scroll-margin-top:84px; }
.part-tall { grid-column:auto; }
.part-mark { min-width:0; max-width:100%; padding:0 14px 2px; }
.part-mark p { margin:0; color:var(--brass); }
.part-mark h2 { margin:6px 0 0; font:400 clamp(27px,2.4vw,36px)/1.08 var(--serif); letter-spacing:.01em; color:#eadfc9; text-wrap:balance; }
.part-tall .part-mark h2 { font-size:25px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.part-tall .play-disc { width:60px; height:60px; }
.part-tall .play-disc svg { width:22px; height:22px; }
.stage { position:relative; isolation:isolate; overflow:hidden; width:100%; aspect-ratio:16/9; border-radius:18px; background:#05090a; }
.stage[data-shape='portrait'] { aspect-ratio:9/16; }
.stage-embed,.stage-cover { position:absolute; inset:0; }
.stage-embed iframe { display:block; width:100%; height:100%; border:0; background:#05090a; }
.stage-cover { z-index:1; transition:opacity .45s ease,visibility 0s linear .45s; }
.stage-poster { width:100%; height:100%; object-fit:cover; }
.stage-cover::after { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 55%,#0000 34%,#0000004d 100%); pointer-events:none; }
.stage-play { position:absolute; inset:0; z-index:1; display:grid; place-items:center; width:100%; border:0; background:none; cursor:pointer; }
.play-disc { display:grid; place-items:center; width:74px; height:74px; border:1px solid var(--brass); border-radius:50%; background:#0b151699; color:var(--cream); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transition:transform .35s cubic-bezier(.16,1,.3,1),background-color .3s,color .3s; }
.play-disc svg { width:26px; height:26px; margin-left:4px; }
.stage:hover .play-disc,.stage-play:focus-visible .play-disc { transform:scale(1.06); background:var(--brass); color:var(--night); }
/* The Drive player sits ready under the poster: a click falls through to it, so the film starts at once. */
.stage[data-state='armed'] .stage-cover { pointer-events:none; }
.stage[data-state='playing'] .stage-cover { opacity:0; visibility:hidden; pointer-events:none; }
.stage[data-state='waiting'] .play-disc { animation:stage-wait 1.1s ease-in-out infinite; }
@keyframes stage-wait { 50% { transform:scale(.9); opacity:.6; } }
.film-line { display:flex; align-items:baseline; flex-wrap:wrap; gap:2px 12px; margin:11px 12px 0; color:var(--ink-soft); font-size:15px; font-variant-numeric:tabular-nums; }
.drive-link { margin-left:auto; display:inline-flex; align-items:center; gap:7px; color:var(--ink); font-weight:500; }
.say .ring { --ring-size:20px; }

/* Frames from the work, sent together. */
.frames { display:grid; grid-template-columns:1fr 1fr; align-items:start; gap:8px; width:100%; max-width:none; padding:10px; }
.frame { margin:0; min-width:0; }
.frame-full { grid-column:1 / -1; }
/* Upright frames stand four in a row; two where the room is narrow (an upright film's own column, a phone). */
.frames-tall { grid-template-columns:repeat(4,1fr); }
.part-tall .frames-tall { grid-template-columns:1fr 1fr; }
@media (max-width:699px), (max-aspect-ratio:5/4) { .frames-tall { grid-template-columns:1fr 1fr; } }
.frame img { width:100%; border-radius:14px; background:#05090a; }

/* A piece of work told in pictures (an app). Each message is one bubble, as a chat sends a picture: what he
   shows, and under it what he says about it. */
.post { display:grid; gap:10px; width:100%; max-width:none; padding:10px; overflow:hidden; }
.post > * { min-width:0; }
.caption { margin:0; padding:2px 14px 6px; }
.caption a { display:inline-flex; align-items:center; gap:7px; margin-left:6px; color:var(--ink); font-weight:500; white-space:nowrap; vertical-align:baseline; }
/* Its mark, in cream on its own colour. */
.mark { display:grid; place-items:center; aspect-ratio:5/2; border-radius:16px; background:radial-gradient(120% 130% at 50% 12%,var(--ground),var(--ground-deep)); }
.mark img { width:42%; height:auto; }
/* Its screens, three abreast as its store listing shows them. */
.screens,.clips { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:start; gap:8px; }
.screens .frame img,.picture img { border-radius:16px; background:#efe6d6; }
/* Its line drawings, edge to edge: the line runs on from one into the next, right across the bubble. */
.lines { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:-4px -10px 0; }
.lines img { width:100%; }
/* Its own films, upright and side by side. The site serves them: the poster steps aside for the browser's player. */
.clip { margin:0; min-width:0; }
.clips > .clip:only-child { grid-column:1 / -1; flex-basis:100%; }
.clip .stage { border-radius:16px; }
.stage video { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; background:#05090a; }
.clip .play-disc { width:54px; height:54px; }
.clip .play-disc svg { width:20px; height:20px; margin-left:3px; }
.clip figcaption { display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin:10px 4px 0; color:var(--ink-soft); font-size:14.5px; line-height:1.3; font-variant-numeric:tabular-nums; }
.clip figcaption b { font-weight:500; color:var(--ink); }
/* One wide picture: with an address, it opens it. */
.picture { display:block; }
.picture img { width:100%; }
/* Where it can be had: the ways follow what he says, as a message's buttons do. */

/* The visitor's side of it. */
.me { justify-self:end; display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:10px 30px; margin-top:20px; transition:opacity .5s ease,transform .7s cubic-bezier(.16,1,.3,1); }
.me a { display:inline-flex; align-items:center; min-height:44px; color:var(--cream); font:500 14.5px/1.3 var(--sans); letter-spacing:.02em; text-shadow:0 1px 12px #0d2424cc; white-space:nowrap; transition:color .25s; }
.me a:hover { color:#dcbb94; }
.me-mail span { padding-bottom:4px; background:linear-gradient(currentColor,currentColor) 0 100% / 100% 1px no-repeat; }
.me-next { gap:14px; text-align:right; --ring-size:44px; --ring-arrow:40%; }
.me-next > span { display:grid; gap:3px; }
.me small { color:#d9cfbb; font-size:13px; font-weight:400; letter-spacing:0; }

/* The conversation's look. His bubbles are messages as a chat app sends them: they keep to his side and are no
   wider than what they hold, the first of a run has the tail and the rest follow close, a picture fills its
   bubble with what he says under it, and each carries the time it came (project.js, which also shows him
   typing before a message arrives). The chat's own bubbles (chat/chat.css) are given the same shape here. */
.thread { gap:14px; }
.say,.thread.project-conversation .chat-bubble { position:relative; max-width:min(80%,560px); padding:10px 15px 9px; border-radius:18px; font-size:17px; line-height:1.42; box-shadow:0 1px 1px #0a1e1e33,0 12px 24px -20px #0a1e1ecc; transform-origin:0 0; }
.say + .say { margin-top:-9px; }
.say:not(.say + .say),.thread.project-conversation .chat-bubble:not(.chat-you),.thread .chat-typing { border-top-left-radius:4px; }
.thread.project-conversation .chat-you { border-top-right-radius:4px; }
.say:not(.say + .say)::before,.thread.project-conversation .chat-bubble::before,.thread .chat-typing::before { content:''; position:absolute; top:0; left:-7px; width:8px; height:12px; background:#f6eddd; clip-path:polygon(0 0,100% 0,100% 100%); }
.thread.project-conversation .chat-you::before { left:auto; right:-7px; background:#1c3838; clip-path:polygon(0 0,100% 0,0 100%); }
.thread > .post,.thread > .film,.thread > .frames { width:88%; max-width:none; }
.post,.film,.frames { padding:5px; overflow:visible; }
.post { gap:6px; }
.film { padding-bottom:8px; }
.frames,.screens,.clips { gap:4px; }
.stage,.frame img,.mark,.screens .frame img,.picture img,.clip .stage { border-radius:13px; }
.film-line { margin:8px 9px 0; font-size:14px; }
.clip figcaption { margin:7px 5px 0; font-size:13.5px; }
.caption { position:relative; padding:3px 10px 4px; }
.lines { margin:-2px -5px 0; }
/* The time it came, in the corner where the last line ends: the line leaves room for it. */
.at { position:absolute; right:12px; bottom:8px; color:var(--ink-soft); font-size:11px; line-height:1; font-variant-numeric:tabular-nums; }
.caption .at { right:7px; bottom:5px; }
.timed::after { content:''; display:inline-block; width:40px; }
/* He is typing: where the next message will be. */
.thread .chat-typing { position:relative; padding:13px 14px; border-radius:4px 18px 18px 18px; background:#f6eddd; box-shadow:0 1px 1px #0a1e1e33; }
.thread .chat-typing > span { width:6px; height:6px; }
.thread .chat-typing { gap:5px; }
/* It stands in for a message that follows others: no tail of its own. */
.thread .chat-typing.arriving { position:absolute; z-index:2; border-radius:18px; pointer-events:none; }
.thread .chat-typing.arriving::before { content:none; }
/* What stands between messages: a note in the middle. */
.thread .chat-story-label { justify-self:center; margin:0; padding:5px 12px; border-radius:9px; background:#152a2e99; color:#dfd6c4; font-size:11.5px; letter-spacing:.02em; }
/* The ways to have it are the message's own buttons, under what he says. */
.links { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr)); gap:0; margin:2px -5px -5px; padding:0; border-top:1px solid #1d33351f; border-radius:0 0 18px 18px; overflow:hidden; }
/* Each cell draws the line to its right and under it: the last ones' fall outside and are cut off. */
.links a { display:flex; align-items:center; justify-content:space-between; gap:10px; min-width:0; min-height:60px; padding:9px 14px; color:var(--ink); font-size:16px; white-space:normal; box-shadow:1px 0 0 #1d33351f,0 1px 0 #1d33351f; --ring-size:26px; transition:background-color .25s; }
.links .store-icon { flex:0 0 26px; width:26px; height:30px; }
.links .link-copy { display:grid; flex:1; gap:3px; line-height:1.2; }
.links small { color:var(--ink-soft); font-size:11px; font-weight:400; }
.links strong { font-size:17px; font-weight:500; }
.links a:hover { background:#1d33350d; }

/* Where the visitor writes, as a chat app has it: a field and a round button beside it, with no box around
   them. Messages going by underneath fade into the room before they reach it. What the visitor is told about the
   chat (chat/disclosure.ts: the only place it is said) stays under the field, on one quiet line. */
.thread .project-chat-dock { display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline; gap:0 7px; padding:0; border:0; border-radius:0; background:none; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; isolation:isolate; }
.thread .project-chat-dock { margin-top:12px; }
/* The fade keeps to the gaps around the field: at the foot of the page it must not lie over what stands above and below. */
.thread .project-chat-dock::before { content:''; position:absolute; z-index:-1; inset:-22px -26px -12px; background:linear-gradient(#35514f00,#35514f8c 22px,#33504eeb 70px,#304b49); -webkit-mask-image:linear-gradient(90deg,#0000,#000 26px,#000 calc(100% - 26px),#0000); mask-image:linear-gradient(90deg,#0000,#000 26px,#000 calc(100% - 26px),#0000); pointer-events:none; }
.thread .project-chat-dock > .chat-feedback,.thread .project-chat-dock > .chat-form { flex:0 0 100%; }
.thread .chat-compose,.thread .chat-compose:focus-within { gap:8px; padding:0; border:0; border-radius:0; background:none; box-shadow:none; }
.thread .project-chat-dock textarea { min-height:48px; height:48px; padding:12px 20px; border-radius:24px; background:#f6eddd; box-shadow:0 1px 1px #0a1e1e33,0 12px 24px -18px #0a1e1e; transition:box-shadow .2s; }
.thread .project-chat-dock textarea:focus { box-shadow:0 0 0 2px var(--brass),0 12px 24px -18px #0a1e1e; }
.thread .project-chat-dock .chat-send { width:48px; height:48px; padding:13px; border:1px solid var(--brass); background:var(--brass); color:var(--night); transition:transform .25s cubic-bezier(.16,1,.3,1),background-color .2s,color .2s; }
.thread .project-chat-dock .chat-send svg { width:22px; height:22px; }
.thread .project-chat-dock .chat-send:disabled { background:#152a2e80; color:var(--brass); opacity:1; }
/* What the visitor might say: their own bubbles, not yet sent, so drawn in outline. */
.thread .chat-suggestions button { min-height:36px; padding:7px 15px; border:1px solid #f1e7d566; border-radius:999px; background:none; color:var(--cream); font-size:13.5px; text-shadow:0 1px 10px #0d2424b3; transition:border-color .25s,color .25s; }
.thread .chat-suggestions button:hover { border-color:var(--brass); background:none; color:#fff7ea; }
@media (pointer:coarse) { .thread .chat-suggestions button { min-height:44px; } }
.thread .project-chat-dock .chat-send:not(:disabled):hover { transform:scale(1.06); }
.thread .project-chat-dock .chat-notice,.thread .project-chat-dock .chat-privacy { margin:9px 0 0; color:#cfd8cd; font-size:11.5px; line-height:1.4; text-align:center; }
.thread .project-chat-dock .chat-privacy summary { color:var(--cream); text-decoration:none; border-bottom:1px solid #f1e7d566; transition:border-color .2s; }
.thread .project-chat-dock .chat-privacy summary:hover { border-color:var(--cream); }
.thread .project-chat-dock .chat-privacy[open] { flex:0 0 100%; }
.thread .project-chat-dock .chat-privacy[open] p { margin:8px 0 0; padding:11px 14px; border-radius:14px; background:#152a2e; color:#dfe6dc; font-size:12px; line-height:1.5; text-align:left; }

/* Recognition, as he would send it: the award is an attachment with his line under it, the reporting is the
   links themselves with their previews. Both are no wider than what they hold. */
.thread > .recognition { width:auto; max-width:min(80%,470px); }
.attachment,.preview { display:flex; align-items:center; gap:12px; padding:9px 14px 9px 9px; border-radius:13px; background:#1d33350f; }
.attachment-mark { flex:none; display:grid; place-items:center; width:44px; height:44px; border-radius:11px; background:#8a5a2224; color:#8a5a22; }
.attachment-mark svg { width:26px; height:26px; }
.attachment p { margin:0; min-width:0; }
.attachment b,.preview b { display:block; font-size:16px; font-weight:600; line-height:1.3; text-wrap:balance; }
.attachment span:not(.attachment-mark),.preview > span { display:block; margin-top:1px; color:var(--ink-soft); font-size:13.5px; line-height:1.4; }
.preview { display:grid; gap:0; padding:10px 14px 9px; transition:background-color .2s; }
.preview:hover,.preview:focus-visible { background:#1d33351c; }
.preview time { white-space:nowrap; font-variant-numeric:tabular-nums; }
.preview small { display:inline-flex; align-items:center; gap:7px; margin-top:6px; color:var(--ink); font-size:13px; font-weight:500; line-height:1.3; --ring-size:18px; }

/* Phones, and any screen too upright for him and the bubbles to sit side by side: he is above, the room behind is out of focus. */
@media (max-width:699px), (max-aspect-ratio:5/4) {
  .room { background-image:url('/cinematic/work/room/room-soft.webp'); background-position:50% 50%; }
  .nav { position:absolute; inset:max(14px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) auto max(16px,env(safe-area-inset-left)); font-size:13.5px; }
  .nav a { min-height:44px; gap:9px; --ring-size:30px; }
  .wall { position:relative; left:auto; top:auto; width:auto; transform:none; padding:calc(min(100vw,56svh) + 14px) 6vw 0; }
  .wall::before { content:''; position:absolute; inset:0 0 auto; height:min(100vw,56svh); background:url('/cinematic/work/room/room-top.webp') 50% 18% / cover; -webkit-mask-image:linear-gradient(#000 80%,#0000); mask-image:linear-gradient(#000 80%,#0000); }
  .room-live { position:absolute; inset:0 0 auto; width:100%; height:min(100vw,56svh); z-index:2; -webkit-mask-image:linear-gradient(#000 80%,#0000); mask-image:linear-gradient(#000 80%,#0000); }
  .room-character { left:20%; top:9%; width:60%; height:68%; }
  .room-response { top:42%; left:74%; }
  body[data-room-live-ready='on'] .wall::before { opacity:0; }
  .room-motion-toggle { left:max(16px,env(safe-area-inset-left)); bottom:max(16px,env(safe-area-inset-bottom)); }
  h1 { font-size:clamp(38px,11.5vw,64px); }
  h1.mid-title { font-size:clamp(36px,10vw,58px); }
  h1.long-title { font-size:clamp(32px,8.6vw,52px); }
  .thread { width:min(92vw,620px); max-width:none; margin:0 auto; padding:30px 0 56px; gap:14px; }
  .say { font-size:17px; padding:15px 20px 16px; }
  .film { padding:8px 8px 12px; }
  .stage { border-radius:16px; }
  .stage[data-shape='portrait'] { width:min(100%,calc(72svh * 9 / 16)); margin:0 auto; }
  .parts { grid-template-columns:minmax(0,1fr); row-gap:30px; }
  .part { justify-items:stretch; }
  .part-mark h2,.part-tall .part-mark h2 { font-size:27px; white-space:normal; }
  .play-disc { width:64px; height:64px; }
  /* Too narrow for three abreast: they go by under the thumb, one at a time, and the drawn line with them. */
  .screens,.clips,.lines { display:flex; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:none; }
  .screens::-webkit-scrollbar,.clips::-webkit-scrollbar,.lines::-webkit-scrollbar { display:none; }
  .post { gap:8px; padding:8px; }
  .caption { padding:2px 12px 6px; }
  .lines { margin:-2px -8px 0; }
  .screens .frame,.clip { flex:0 0 64%; scroll-snap-align:center; }
  .lines img { flex:0 0 82%; width:82%; scroll-snap-align:center; }
  .clip .stage[data-shape='portrait'] { width:100%; margin:0; }
  .me { justify-self:stretch; justify-content:space-between; }
  .say,.thread.project-conversation .chat-bubble { max-width:86%; padding:9px 13px 8px; font-size:16.5px; }
  .thread > .post,.thread > .film,.thread > .frames { width:94%; }
  .thread > .recognition { max-width:90%; }
  /* The fade stays inside the screen (wider, it would make the page scroll sideways); the note takes two lines here. */
  .thread .project-chat-dock::before { inset:-22px -12px -8px; -webkit-mask-image:linear-gradient(90deg,#0000,#000 12px,#000 calc(100% - 12px),#0000); mask-image:linear-gradient(90deg,#0000,#000 12px,#000 calc(100% - 12px),#0000); }
  .thread .project-chat-dock .chat-notice { margin-top:8px; font-size:11px; }
  .thread .project-chat-dock .chat-privacy { margin-top:3px; font-size:11px; }
  .post,.film,.frames { padding:4px; }
  /* One under the other: side by side there is no room for a name and its ring. */
  .links { grid-template-columns:1fr; margin:2px -4px -4px; }
  .links a { min-height:56px; }
  .post { gap:5px; }
  .film { padding-bottom:7px; }
  .caption { padding:3px 9px 4px; }
  .lines { margin:-2px -4px 0; }
  .stage { border-radius:13px; }
}
@media (pointer:coarse) {
  .nav a { min-height:44px; }
  .drive-link { display:inline-flex; align-items:center; min-height:44px; }
}
/* A wide screen with no height to spare (a phone on its side): the name goes at the head of what he says. */
@media (min-width:700px) and (min-aspect-ratio:5/4) and (max-height:560px) {
  .wall { position:relative; left:auto; top:auto; width:auto; max-width:880px; transform:none; margin:0 5vw 0 max(48vw,calc(var(--room-w) * .41)); padding-top:76px; text-align:left; }
  .wall-kicker { justify-content:flex-start; }
  .thread { padding-top:22px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none!important; animation:none!important; } }

/* The other language is a word beside "Say hello" (language.css), set like it but with no pill of its own. */
.nav-actions { display:flex; align-items:center; gap:2px; pointer-events:auto; }
.nav .language-switch { position:static; flex-shrink:0; font-size:inherit; letter-spacing:0; }
.nav .language-switch a { min-height:42px; margin:0; padding:0 14px; color:var(--cream); opacity:.9; text-shadow:0 1px 10px #0d2424cc; }
.nav .language-switch a:hover { color:var(--brass); opacity:1; }
@media (max-width:699px), (max-aspect-ratio:5/4) { .nav .language-switch a { min-height:44px; padding:0 11px; } }
@media(max-width:420px) { .nav { inset:max(12px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) auto max(10px,env(safe-area-inset-left)); gap:8px; font-size:12px; } .nav a { gap:7px; --ring-size:26px; } .nav-actions { gap:0; } .nav .language-switch a { padding:0 8px; } }