/* The biography (/about/) is a project page's room and conversation: Ömür at his desk, his name on the wall, what he
   says in the messages beside him (src/cinematic/about-page.ts; the look is work/project.css, shared with every
   project page). Only what is its own is here. */
/* Everything he says about himself is there when the page opens: nothing waits to be scrolled to, and he is not
   shown typing what is already said (project.js brings a project's later messages in one by one). */
.about-page .wait { opacity:1; transform:none; }
.about-page .thread .chat-typing.arriving { display:none; }
/* His work as one message: a picture large enough to know the piece by, its name, what kind of work it is. */
.about-page .works ol { grid-template-columns:1fr; gap:2px; }
.about-page .works a { gap:14px; padding:7px 16px 7px 7px; }
.about-page .works img { width:104px; height:65px; border-radius:11px; }
.about-page .works b { font-size:16.5px; }
@media (max-width:420px) { .about-page .works img { width:84px; height:53px; } }

/* The biography remains ordinary HTML without JavaScript. Enhancement bounds just the conversation. */
.about-chat-scroll { display:grid; align-content:start; justify-items:start; gap:14px; width:100%; min-width:0; }
.about-chat-head { display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; padding:0 12px 18px; border-bottom:1px solid #f1e7d524; }
.about-chat-head p { margin:0 0 5px; color:#d9cfbb; font-size:11px; letter-spacing:.08em; }
.about-chat-head h2 { margin:0; color:var(--cream); font:400 32px/1.1 var(--serif); }
.about-chat-close { display:none; }
.about-chat-close,.about-chat-launch,.chat-new-reply { align-items:center; justify-content:center; gap:10px; min-height:44px; border:1px solid #d2a56780; border-radius:999px; padding:10px 18px; background:#1c3838; color:var(--cream); font:500 14px/1.3 var(--sans); cursor:pointer; }
.about-chat-launch { display:none; }
.about-chat-launch svg,.about-chat-close svg,.chat-new-reply svg { width:20px; height:20px; }
.chat-new-reply { display:inline-flex; align-self:flex-end; flex:none; margin:5px 12px 8px; font-size:12px; }
.about-page [hidden],.about-chat-modal [hidden] { display:none !important; }
.about-page .nav-actions { gap:clamp(14px,2vw,28px); }
.about-page .thread .project-chat-dock,.about-chat-modal .thread .project-chat-dock { position:static; flex:none; margin:0; width:100%; box-sizing:border-box; padding:16px 12px 10px; border:0; background:none; }
.about-page .thread .project-chat-dock::before,.about-chat-modal .thread .project-chat-dock::before { content:none; }
.about-page .chat-compose,.about-chat-modal .chat-compose { align-items:flex-end; }
.about-page .thread .project-chat-dock .chat-privacy[open] p,.about-chat-modal .thread .project-chat-dock .chat-privacy[open] p { max-height:140px; overflow-y:auto; overscroll-behavior:contain; }
.about-chat-scroll:focus-visible { outline:1px solid var(--brass); outline-offset:-1px; border-radius:8px; }
.about-chat-launch:focus-visible,.about-chat-close:focus-visible,.chat-new-reply:focus-visible { outline:2px solid var(--brass); outline-offset:4px; }

@media (min-width:700px) and (min-aspect-ratio:5/4) {
  .about-page[data-chat-layout='ready'] main .thread { position:fixed; inset:100px 5vw 24px max(48vw,calc(var(--room-w) * .41)); display:flex; flex-direction:column; gap:0; margin:0; padding:0; max-width:880px; }
  .about-page[data-chat-layout='ready'] main .about-chat-scroll { flex:1; min-height:0; padding:22px 12px; box-sizing:border-box; overflow-y:auto; overscroll-behavior-y:contain; scrollbar-width:thin; scrollbar-color:#d2a56766 transparent; overflow-anchor:none; }
  .about-page[data-chat-layout='ready'] main .about-chat-close,.about-page[data-chat-layout='ready'] main .about-chat-launch { display:none; }
}

/* On phones, only the introduction belongs to the page. Its chat is a native modal with its own reader. */
@media (max-width:699px), (max-aspect-ratio:5/4) {
  .about-page .nav { font-size:12px; }
  .about-page .nav-actions { gap:12px; }
  .about-page[data-chat-layout='ready'] main .about-chat-head,.about-page[data-chat-layout='ready'] main .project-chat-dock,.about-page[data-chat-layout='ready'] main .chat-new-reply,.about-page[data-chat-layout='ready'] main .chat-messages { display:none; }
  .about-page[data-chat-layout='ready'] main .about-chat-launch { display:inline-flex; justify-self:start; margin-top:12px; background:var(--cream); color:var(--ink); border-color:var(--cream); }
  .about-page .about-chat-scroll { overflow:visible; }
}
.about-chat-modal { position:fixed; inset:var(--chat-top,0px) 0 auto; width:100%; max-width:none; height:var(--chat-height,100dvh); max-height:none; box-sizing:border-box; margin:0; padding:0; border:0; background:var(--wall); color:var(--cream); font:400 16px/1.45 var(--sans); overflow:hidden; }
.about-chat-modal::backdrop { background:#152a2eb3; }
.about-chat-modal .thread { position:relative; display:flex; flex-direction:column; gap:0; width:100%; height:100%; max-width:760px; box-sizing:border-box; margin:0 auto; padding:0; }
.about-chat-modal .about-chat-head { flex:none; box-sizing:border-box; padding:calc(16px + env(safe-area-inset-top)) 20px 16px; }
.about-chat-modal .about-chat-head h2 { font-size:30px; }
.about-chat-modal .about-chat-close { display:inline-flex; flex:none; width:44px; padding:10px; background:none; }
.about-chat-modal .about-chat-launch { display:none; }
.about-chat-modal .about-chat-scroll { flex:1; min-height:0; box-sizing:border-box; padding:20px; overflow-y:auto; overscroll-behavior-y:contain; scrollbar-width:thin; overflow-anchor:none; }
.about-chat-modal .thread .project-chat-dock { padding:12px 16px max(12px,env(safe-area-inset-bottom)); }
.about-chat-modal .works ol { grid-template-columns:1fr; }
.about-chat-modal .works img { width:78px; height:49px; }
.about-chat-modal .works b { font-size:15px; }
.about-chat-modal .chat-messages { display:grid; }
.about-chat-modal .chat-messages:empty { display:none; }
@media (max-height:500px) {
  .about-chat-modal .about-chat-head { padding:8px 16px; }
  .about-chat-modal .about-chat-head p { display:none; }
  .about-chat-modal .about-chat-head h2 { font-size:24px; }
}
.about-chat-modal[data-compact] .about-chat-head { padding:8px 16px; }
.about-chat-modal[data-compact] .about-chat-head p { display:none; }
.about-chat-modal[data-compact] .about-chat-head h2 { font-size:24px; }
.about-chat-modal[data-compact] .about-chat-scroll { padding:12px 20px; }
.about-chat-modal[data-compact] .thread .project-chat-dock textarea { max-height:84px; }
.about-chat-modal[data-compact] .thread .project-chat-dock .chat-privacy[open] p { max-height:64px; }