/* A compact exhibition spread; the photograph sets the scale of the chapter. */
.ordinary-chapter {
 position:relative;
 --chair-image-width:min(48vw,510px,calc((100svh - 250px)*.75));
 display:grid;
 grid-template-columns:max-content minmax(0,var(--chair-image-width));
 justify-content:center;
 align-items:center;
 column-gap:clamp(64px,7.5vw,112px);
 row-gap:0;
 width:min(1080px,calc(100% - var(--gutter)*2));
 padding:48px 0 72px;
}
.ordinary-chapter .chair-chapter {
 display:grid;
 grid-column:1;
 grid-row:1;
 grid-template-columns:max-content max-content;
 align-self:center;
 align-items:start;
 justify-content:start;
 gap:0 30px;
 margin:0 0 64px;
 padding:0;
}
.ordinary-chapter>.chair-eyebrow {
 position:absolute;
 top:28px;
 left:0;
 padding:0;
 margin:0;
 font-size:10px;
 line-height:1.6;
 letter-spacing:.08em;
 color:#666c60;
}
.ordinary-chapter .eyebrow>span { font-size:10px; margin-right:12px; }
.ordinary-chapter .chair-chapter h2 {
 grid-column:1;
 grid-row:1;
 align-self:start;
 margin:0;
 padding:0;
 writing-mode:vertical-rl;
 text-orientation:mixed;
 white-space:nowrap;
 font-family:'Songti SC','STSong','Noto Serif CJK SC',serif;
 font-size:clamp(30px,2.6vw,38px);
 font-weight:400;
 line-height:1.15;
 letter-spacing:.14em;
 color:#34412f;
}
.ordinary-chapter .chair-chapter>.chair-memory {
 grid-column:2;
 grid-row:1;
 justify-self:start;
 writing-mode:vertical-lr;
 text-orientation:upright;
 width:max-content;
 height:max-content;
 max-width:none;
 margin:0;
 padding:4px 0 0;
 font-size:14px;
 line-height:2.3;
 letter-spacing:.10em;
 color:#62685c;
 text-wrap:wrap;
}
.ordinary-chapter .chair-memory>span { display:block; white-space:nowrap; }
.ordinary-chapter .depth-capture-figure {
 grid-column:2;
 grid-row:1;
 justify-self:start;
 width:100%;
 min-width:0;
 max-width:none;
 margin:0;
}
.ordinary-chapter .depth-capture-stage { width:100%; margin:0; aspect-ratio:3/4; }
.ordinary-chapter .depth-capture-caption {
 display:flex;
 justify-content:space-between;
 align-items:center;
 flex-wrap:wrap;
 gap:0 16px;
 min-height:54px;
 padding:10px 0 0;
 margin:0;
 border:0;
 font-size:10px;
 line-height:1.6;
}
.ordinary-chapter #depth-capture-help {
 display:inline-block;
 padding:7px 10px;
 font-size:10px;
 line-height:1.6;
 font-weight:400;
 background:#914638;
 color:#faf8f0;
}
.ordinary-chapter .keyboard-hint { display:none; }
.ordinary-chapter .depth-capture-caption button {
 display:inline-flex;
 align-items:center;
 justify-content:flex-end;
 gap:9px;
 min-width:0;
 min-height:44px;
 margin-left:auto;
 padding:0;
 font-size:10px;
 line-height:1.6;
 color:#62685c;
}
.ordinary-chapter .depth-capture-caption button span { margin:0; font-size:15px; }
.ordinary-chapter .depth-capture-caption button:hover { color:var(--ink); }

/* Portrait screens read as one art plate: title rail, image, memory, controls. */
@media(orientation:portrait) {
 .ordinary-chapter {
  width:min(580px,calc(100% - var(--gutter)*2));
  grid-template-columns:36px minmax(0,1fr);
  align-items:start;
  column-gap:22px;
  row-gap:0;
  padding:38px 0 58px;
 }
 .ordinary-chapter .chair-chapter,.ordinary-chapter .depth-capture-figure { display:contents; }
 .ordinary-chapter>.chair-eyebrow { position:static; grid-column:1 / -1; grid-row:1; margin:0 0 24px; }
 .ordinary-chapter .chair-chapter h2 {
  grid-column:1;
  grid-row:2;
  justify-self:center;
  margin:24px 0 0;
  font-size:30px;
  line-height:1.15;
 }
 .ordinary-chapter .depth-capture-stage { grid-column:2; grid-row:2; width:100%; }
 .ordinary-chapter .chair-chapter>.chair-memory {
  grid-column:2;
  grid-row:3;
  width:100%;
  height:auto;
  margin:22px 0 0;
  padding:0;
  writing-mode:horizontal-tb;
  text-orientation:mixed;
  font-size:14px;
  line-height:1.95;
  letter-spacing:0;
  white-space:nowrap;
 }
 .ordinary-chapter .chair-memory>span { display:inline; white-space:nowrap; }
 .ordinary-chapter .depth-capture-caption {
  grid-column:2;
  grid-row:4;
  min-height:0;
  margin:16px 0 0;
  padding:12px 0 0;
  border-top:1px solid var(--line);
  flex-wrap:nowrap;
  gap:6px;
 }
 .ordinary-chapter #depth-capture-help { white-space:nowrap; }
 .ordinary-chapter .depth-capture-caption button { white-space:nowrap; }
}
@media(max-width:600px) and (orientation:portrait) {
 .ordinary-chapter {
  width:calc(100% - 40px);
  grid-template-columns:28px minmax(0,1fr);
  column-gap:14px;
  padding:28px 0 44px;
 }
 .ordinary-chapter>.chair-eyebrow { margin-bottom:20px; }
 .ordinary-chapter .chair-chapter h2 { margin-top:18px; font-size:27px; }
 .ordinary-chapter .chair-chapter>.chair-memory { margin-top:18px; font-size:clamp(10.5px,3.33vw,14px); line-height:1.9; }
 .ordinary-chapter .depth-capture-caption { grid-column:2; margin-top:16px; padding-top:8px; }
 .ordinary-chapter #depth-capture-help { font-size:10px; padding:7px; }
 .ordinary-chapter .depth-capture-caption button { font-size:10px; gap:5px; }
}
@media(max-width:600px) and (max-height:720px) and (orientation:portrait) {
 .ordinary-chapter { padding-top:16px; padding-bottom:36px; }
 .ordinary-chapter>.chair-eyebrow { margin-bottom:12px; }
 .ordinary-chapter .chair-chapter h2 { margin-top:14px; }
 .ordinary-chapter .chair-chapter>.chair-memory { margin-top:14px; line-height:1.8; }
 .ordinary-chapter .depth-capture-caption { margin-top:10px; padding-top:6px; }
}

/* Short landscape displays keep text and image side by side, with one control row. */
@media(max-height:600px) and (orientation:landscape) {
 .ordinary-chapter {
  --chair-image-width:clamp(135px,calc((100svh - 170px)*.75),300px);
  grid-template-columns:max-content var(--chair-image-width);
  column-gap:clamp(40px,8vw,96px);
  row-gap:10px;
  padding:10px 0 24px;
 }
 .ordinary-chapter .chair-chapter { margin:0; gap:18px 22px; align-self:center; }
 .ordinary-chapter>.chair-eyebrow { top:10px; }
 .ordinary-chapter .chair-chapter h2 { font-size:27px; }
 .ordinary-chapter .chair-chapter>.chair-memory { padding-top:2px; font-size:12px; line-height:2.15; letter-spacing:.05em; }
 .ordinary-chapter .depth-capture-figure { display:contents; }
 .ordinary-chapter .depth-capture-stage { grid-column:2; grid-row:1; }
 .ordinary-chapter .depth-capture-caption { grid-column:1 / -1; grid-row:2; min-height:44px; padding:0; }
}

/* Let the chair chapter begin after a deliberate pause from the tunnel image. */
#overview { margin-top:clamp(40px,5vw,72px); }
