:root { --site-header:72px; --chapter-nav:60px; }
:root:has(rm-site-header[space-entry]) { --site-header:100px; }
@media(max-width:760px) { :root:has(rm-site-header[space-entry]) { --site-header:92px; } }
html { scroll-padding-top:var(--site-header); }
.cabinet-story { background:var(--rm-paper); color:var(--rm-ink); }
.story-wrap { max-width:1360px; margin-inline:auto; padding-inline:64px; }
.cabinet-story h2 { font-size:clamp(58px,6.7vw,96px); line-height:.98; letter-spacing:-.065em; font-weight:800; }
.cabinet-story h3 { font-size:36px; font-weight:800; line-height:1.05; letter-spacing:-.05em; }
.story-subtitle { font-size:22px; letter-spacing:-.025em; color:var(--rm-muted); margin-top:18px; }
.story-link { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:52px; font-size:17px; font-weight:700; border-block:1px solid currentColor; padding-block:14px; text-align:left; background:transparent; color:inherit; }
.story-nav { position:sticky; top:var(--site-header); z-index:30; background:var(--rm-paper); color:var(--rm-ink); height:var(--chapter-nav); }
.story-nav>div { display:flex; justify-content:space-between; align-items:stretch; height:100%; border-bottom:1px solid var(--rm-rule); gap:20px; }
.story-nav a { min-width:20%; display:flex; align-items:center; font-size:15px; position:relative; }
.story-nav a[aria-current] { font-weight:800; }
.story-nav a[aria-current]::after { content:''; position:absolute; bottom:10px; left:0; width:32px; height:2px; background:currentColor; }
.fit-track { background:var(--rm-blue); color:var(--rm-paper); height:260svh; position:relative; scroll-margin-top:var(--chapter-nav); }
.fit-scene { position:sticky; top:calc(var(--site-header) + var(--chapter-nav)); height:calc(100svh - var(--site-header) - var(--chapter-nav)); min-height:530px; display:grid; grid-template-columns:.9fr 1.1fr; grid-template-rows:1fr auto auto; gap:24px 28px; padding-block:45px 30px; }
.fit-heading { align-self:center; }
.fit-heading>p { font-size:22px; margin-top:20px; }
.fit-object { grid-column:2; grid-row:1/4; position:relative; display:grid; place-items:center; min-height:0; }
.fit-object img { width:100%; height:100%; max-height:calc(100svh - 190px); object-fit:contain; grid-area:1/1; filter:drop-shadow(8px 16px 12px #0017553d); }
.fit-object img[hidden] { display:none; }
.fit-caption { min-height:88px; }
.fit-caption p { margin-top:12px; font-size:17px; }
.fit-controls { display:flex; justify-content:space-between; border-top:1px solid #ffffff8c; gap:12px; }
.fit-controls button { border:0; background:none; color:inherit; font-size:13px; padding:15px 0 10px; min-height:48px; border-bottom:3px solid transparent; }
.fit-controls button[aria-pressed=true] { border-bottom-color:currentColor; font-weight:800; }
.fit-controls button:focus-visible { outline:3px solid white; outline-offset:4px; }
.sample-note { color:var(--rm-muted); font-size:12px; line-height:1.5; }
.chapter-bridge { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:20px; border-block:1px solid var(--rm-rule); padding-block:30px; font-size:32px; font-weight:800; letter-spacing:-.05em; }
.chapter-bridge .icon { width:30px; height:30px; }
.profile-chapter { padding-block:75px 65px; display:grid; grid-template-columns:.8fr 1.2fr; gap:30px 75px; scroll-margin-top:var(--chapter-nav); }
.profile-examples { display:grid; grid-template-columns:1fr 1fr; gap:30px; }
.profile-examples figure { position:relative; }
.profile-marker { display:grid; place-items:center; position:absolute; top:45%; left:calc(50% - 17px); width:34px; height:34px; border-radius:50%; background:var(--rm-blue); color:white; font-size:17px; font-weight:800; }
.profile-explanations { grid-column:1; grid-row:2; align-self:start; }
.profile-explanations>div { display:flex; gap:22px; padding-block:20px; border-bottom:1px solid var(--rm-rule); }
.profile-explanations>div>span { flex:none; display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--rm-blue); color:white; font-weight:800; }
.profile-explanations h3 { font-size:23px; }
.profile-explanations p { font-size:14px; color:var(--rm-muted); margin-top:8px; }
.profile-examples img { width:100%; height:340px; object-fit:contain; }
.profile-examples figcaption { font-size:13px; margin-block:14px 24px; text-align:center; }
.profile-examples strong { display:block; font-size:20px; letter-spacing:-.04em; margin-bottom:8px; }
.profile-examples p { font-size:14px; color:var(--rm-muted); }
.profile-note { font-size:13px; grid-column:2; color:var(--rm-muted); }
.families-chapter { border-top:1px solid var(--rm-rule); padding:54px 48px 55px; display:grid; grid-template-columns:minmax(0,1fr); gap:28px; scroll-margin-top:var(--chapter-nav); }
.families-chapter h2 { font-size:clamp(42px,5.6vw,80px); line-height:1.05; letter-spacing:-.055em; }
.families-chapter .story-subtitle { color:var(--rm-ink); font-size:clamp(20px,1.8vw,26px); margin-top:12px; }
.family-note { font-size:18px; margin-top:45px; }
.families-chapter .sample-note { margin-top:20px; }
#story-doors { display:block; min-height:479px; }
.families-project { grid-column:1/-1; }
.project h2 { font-weight:800; }
.project-selection { margin-top:25px; }
.project-doors img { width:115px; height:156px; }
.material-selection { border-top:1px solid #ffffff80; padding-top:12px; margin-block:16px; }
.material-selection p { margin-top:6px; }
.material-selection a,.material-selection button { font-size:12px; min-height:44px; margin-right:16px; display:inline-flex; align-items:center; }
.work-tabs { top:var(--site-header)!important; }
.fit-track[data-static=true] { height:auto; }
.fit-track[data-static=true] .fit-scene { position:relative; top:auto; height:auto; min-height:650px; }
@media(min-width:761px) and (max-height:700px) { .fit-scene { grid-template-columns:1fr 1fr; } .fit-heading h2 { font-size:58px; } }
@media(max-width:760px) {
  :root { --site-header:64px; --chapter-nav:56px; }
  .story-wrap { padding-inline:28px; }
  .cabinet-story h2 { font-size:clamp(46px,13.4vw,72px); }
  .cabinet-story h3 { font-size:29px; }
  .story-link { font-size:15px; }
  .story-nav a { font-size:14px; min-width:24%; }
  .fit-scene { height:calc(100svh - var(--site-header) - var(--chapter-nav) - 66px); min-height:0; display:flex; flex-direction:column; align-items:stretch; gap:0; padding-block:24px 18px; }
  .fit-heading { align-self:stretch; }
  .fit-heading h2 { font-size:clamp(44px,12.6vw,68px); }
  .fit-heading>p { font-size:17px; margin-top:14px; }
  .fit-object { flex:1; min-height:0; margin:4px -5% 10px; }
  .fit-object img { width:100%; height:100%; max-height:100%; }
  .fit-caption { min-height:70px; }
  .fit-caption p { font-size:14px; margin-top:8px; }
  .fit-controls { margin-top:12px; }
  .fit-controls button { font-size:12px; padding:12px 0 6px; min-height:44px; }
  .story-subtitle { font-size:18px; margin-top:14px; }
  .chapter-bridge { font-size:25px; padding-block:22px; margin-top:12px; }
  .profile-chapter { display:block; padding-block:34px; }
  .profile-examples { gap:22px; margin-top:26px; }
  .profile-examples img { height:225px; }
  .profile-examples figcaption { margin-block:10px 18px; font-size:11px; }
  .profile-examples strong { font-size:17px; }
  .profile-examples p { font-size:12px; }
  .profile-note { margin-top:24px; font-size:12px; }
  .profile-explanations>div { gap:18px; padding-block:15px; }
  .profile-explanations h3 { font-size:19px; }
  .profile-explanations p { font-size:13px; margin-top:6px; }
  .profile-chapter { padding-block:24px 18px; }
  .project { padding-block:34px 45px; }
  .project-intro>p { font-size:16px; margin-top:18px; }
  .project-selection { margin-top:22px; padding-top:18px; margin-bottom:24px; }
  .project-doors { margin-block:18px 12px; }
  .families-chapter { display:block; padding:24px 28px 44px; }
  .family-note { display:none; }
  .families-chapter h2 { font-size:clamp(38px,10.7vw,58px); }
  .families-chapter .story-subtitle { font-size:17px; margin-top:10px; }
  #story-doors { margin-top:20px; min-height:442px; }
  .families-project { margin-top:26px; }
  .fit-track[data-static=true] .fit-scene { min-height:650px; }
  .fit-track[data-static=true] .fit-object { flex:none; height:340px; }
}
@media(prefers-reduced-motion:reduce) { .fit-track { height:auto; } .fit-scene { position:relative; top:auto; height:auto; min-height:650px; } .fit-object { min-height:340px; } }

/* Three actual cabinet views travel around one horizontal orbit. */
.fit-track[data-orbit=true] { height:auto; }
.fit-track[data-orbit=true] .fit-scene { position:relative; top:auto; height:auto; min-height:660px; grid-template-rows:1fr auto auto; }
.fit-track[data-orbit=true] .fit-object { display:block; height:460px; align-self:center; isolation:isolate; touch-action:pan-y; cursor:grab; user-select:none; }
.fit-object.dragging { cursor:grabbing; }
.fit-object:focus-visible { outline:2px solid white; outline-offset:6px; }
.fit-orbit-item { position:absolute; left:50%; top:46%; width:65%; height:82%; padding:0; border:0; background:none; color:inherit; cursor:inherit; transform-origin:center; }
.fit-track[data-orbit=true] .fit-orbit-item img { display:block; width:100%; height:100%; max-height:none; object-fit:contain; pointer-events:none; }
.fit-orbit-ring { position:absolute; left:0; top:46%; width:100%; height:30%; border:1px solid #ffffffa8; border-radius:50%; pointer-events:none; }
.fit-orbit-hint { grid-column:2; grid-row:3; text-align:center; align-self:end; font-size:14px; opacity:.85; }
.fit-track[data-orbit=true] .fit-caption { grid-column:1; grid-row:2; }
.fit-track[data-orbit=true] .fit-controls { grid-column:1; grid-row:3; }
@media(max-width:760px) {
  .fit-track[data-orbit=true] .fit-scene { height:calc(100svh - var(--site-header) - var(--chapter-nav) - 66px); min-height:620px; padding-block:22px 18px; }
  .fit-track[data-orbit=true] .fit-object { flex:1; width:calc(100% + 36px); height:auto; min-height:235px; margin:10px -18px 0; align-self:auto; }
  .fit-track[data-orbit=true] .fit-heading h2 { font-size:clamp(42px,12vw,58px); }
  .fit-track[data-orbit=true] .fit-heading>p { margin-top:12px; }
  .fit-orbit-item { width:65%; height:94%; top:44%; }
  .fit-orbit-ring { top:46%; height:28%; }
  .fit-orbit-hint { flex:none; align-self:stretch; font-size:12px; margin:0 0 16px; }
  .fit-track[data-orbit=true] .fit-caption { text-align:center; min-height:64px; }
  .fit-track[data-orbit=true] .fit-caption p { margin-top:8px; }
  .fit-track[data-orbit=true] .fit-controls { flex:none; margin-top:14px; }
}
.fit-controls { position:relative; }
.fit-track[data-orbit=true] .fit-controls button { border-bottom-color:transparent; transition:opacity 240ms,color 240ms; }
.fit-control-indicator { position:absolute; bottom:0; left:0; height:3px; background:currentColor; pointer-events:none; transition:transform 500ms cubic-bezier(.2,.7,.2,1),width 500ms cubic-bezier(.2,.7,.2,1); }
.fit-enlarge { color:inherit; background:none; border:0; display:inline-flex; align-items:center; gap:7px; min-height:44px; font:inherit; font-size:14px; text-decoration:underline; text-underline-offset:4px; cursor:pointer; }
.fit-enlarge .icon,.fit-zoom-close .icon { display:block; width:22px; height:22px; background:currentColor; mask:var(--icon) center/contain no-repeat; }
.fit-zoom { position:fixed; inset:0; margin:auto; width:min(92vw,850px); max-width:none; height:min(90svh,900px); max-height:none; padding:48px 24px 28px; border:0; background:var(--rm-blue); color:var(--rm-paper); text-align:center; overflow:auto; }
.fit-zoom::backdrop { background:#071339bc; }
.fit-zoom[open] { display:flex; flex-direction:column; align-items:center; }
.fit-zoom-close { position:absolute; top:12px; right:12px; width:44px; height:44px; display:grid; place-items:center; border:1px solid #ffffff70; border-radius:50%; background:transparent; color:inherit; cursor:pointer; }
.fit-zoom-image { display:block; flex:1; min-height:0; width:100%; object-fit:contain; }
.fit-zoom h2 { font-size:clamp(26px,5vw,40px); margin:14px 0 8px; }
.fit-zoom p { font-size:15px; line-height:1.4; }
.fit-zoom button:focus-visible,.fit-enlarge:focus-visible { outline:3px solid white; outline-offset:3px; }
@media(max-width:760px) {
  /* The screen height is a floor, not a cap: a short phone grows the chapter instead of hiding its options. */
  .fit-track[data-orbit=true] .fit-scene { height:auto; min-height:max(560px, calc(100svh - var(--site-header) - var(--chapter-nav) - 66px)); }
  .fit-track[data-orbit=true] .fit-object { min-height:210px; }
  .fit-orbit-hint { margin-bottom:8px; }
  .fit-track[data-orbit=true] .fit-caption { min-height:100px; }
  .fit-track[data-orbit=true] .fit-controls { margin-top:4px; }
  .fit-zoom { width:100vw; height:100svh; padding:58px 16px 32px; }
}
.fit-motion-reduced .fit-control-indicator { transition:none; }
@media(prefers-reduced-motion:reduce) { .fit-control-indicator,.fit-controls button { transition:none!important; } }
.fit-actions { display:flex; align-items:center; gap:22px; }
.fit-save-status:empty { display:none; }
.fit-save-status { font-size:12px!important; }
.fit-save[aria-pressed=true] { font-weight:750; }
@media(max-width:760px) { .fit-actions { justify-content:center; gap:20px; } }
/* rm-catalog-entry styles itself inside its shadow root (non-blocking). Until that applies, hold its
   measured height: 552px from 1100px wide, 552-621px from 761px; on phones 820px (it ends at 819-934px,
   below the first screen either way). */
@media(scripting:enabled) { rm-catalog-entry:not([data-styled]) { display:block; height:clamp(552px, calc(763px - 20.3vw), 621px); overflow:hidden; visibility:hidden; } }
@media(scripting:enabled) and (max-width:760px) { rm-catalog-entry:not([data-styled]) { height:820px; } }
