/* Each project has a native horizontal reading surface inside its dialog. */
html { scrollbar-gutter:stable; }
html.project-is-open { overflow:hidden; }
.project-view {
  position:fixed; inset:0; width:100%; max-width:none; height:100%; max-height:none;
  margin:0; padding:0; border:0; background:var(--bg); color:var(--ink); overflow:hidden;
}
.project-view[open] { display:flex; flex-direction:column; }
.project-view::backdrop { background:transparent; }
.project-view-header {
  flex:none; display:flex; justify-content:space-between; align-items:center;
  gap:20px; min-height:100px; margin:0 4vw; border-bottom:1px solid var(--line);
}
.project-view-header > span { color:var(--muted); font-size:10px; font-weight:700; letter-spacing:.16em; }
.project-close { display:grid; place-items:center; flex:none; width:48px; height:48px; border:0; border-radius:50%; padding:0; background:none; color:var(--ink); cursor:pointer; transition:color .25s,background .25s; }
.project-close:hover { color:var(--orange); background:var(--line); }
.project-view-content { flex:1; min-height:0; width:100%; overflow-x:auto; overflow-y:hidden; overscroll-behavior:contain; scrollbar-width:none; }
.project-view-content::-webkit-scrollbar { display:none; }
.project-view-content:focus-visible { outline:1px solid var(--orange); outline-offset:-4px; }
.project-panel { display:flex; align-items:stretch; width:max-content; height:100%; gap:clamp(35px,6vw,100px); padding:40px 8vw 30px 4vw; }
.project-panel[hidden] { display:none; }
.project-intro,.project-story { display:contents; }
.project-copy,.project-visual,.panel-narrative,.panel-details { flex:none; width:min(44vw,620px); min-width:0; margin:0; align-self:center; max-height:100%; overflow-y:auto; overscroll-behavior-y:contain; }
.project-copy,.panel-narrative,.panel-details { padding:8px 12px 8px 0; }
.panel-title { font:600 clamp(50px,6vw,94px)/1 var(--display); letter-spacing:-.065em; margin:24px 0 30px; overflow-wrap:anywhere; }
.panel-description { color:#d4e0e4; font-size:clamp(16px,1.55vw,20px); line-height:1.65; }
.panel-role { display:grid; gap:6px; margin-top:32px; }
.panel-role strong { font-size:16px; }
.project-visual { width:min(52vw,740px); }
.project-visual img { display:block; width:100%; height:clamp(200px,55vh,560px); max-height:calc(100dvh - 250px); object-fit:cover; border-radius:18px; background:#243c51; }
.project-visual figcaption { margin-top:12px; color:#b3c4d0; font-size:9px; font-weight:700; letter-spacing:.12em; line-height:1.5; }
.panel-narrative { width:min(45vw,640px); }
.panel-narrative h3 { font:600 clamp(32px,3.8vw,52px)/1.1 var(--display); letter-spacing:-.055em; margin:16px 0 18px; }
.panel-narrative p,.panel-tech p { color:#d4e0e4; font-size:16px; line-height:1.8; }
.panel-tech { margin-top:35px; }
.panel-responsibilities { display:grid; gap:14px; margin:18px 0 0; padding:0; list-style:none; }
.panel-responsibilities li { display:flex; align-items:baseline; gap:12px; font-size:15px; line-height:1.65; }
.panel-responsibilities li::before { content:'↗'; color:var(--orange); font-size:17px; flex:none; }
.panel-tech p { margin:12px 0 0; font-size:14px; }
@media(max-width:768px) {
  .project-view-header { min-height:80px; margin:0 20px; gap:12px; }
  .project-view-header > span { font-size:9px; }
  .project-panel { padding:25px 28px 25px 20px; gap:28px; }
  .project-copy,.project-visual,.panel-narrative,.panel-details { width:calc(100vw - 56px); }
  .panel-title { font-size:clamp(44px,12vw,80px); }
  .project-visual img { height:clamp(220px,55vh,500px); }
  .panel-narrative h3 { font-size:36px; }
}
@media(prefers-reduced-motion:reduce) {
  .project-close { transition:none; }
}