/* ===========================================================
   Gidi Abramovich — professional site
   Brand: navy/charcoal ink, warm brown accent, orange highlight
   (colors drawn from /Logos brand marks)
   =========================================================== */

:root {
  --color-ink: #14110d;
  --color-navy: #0f2138;
  --color-navy-2: #17335a;
  --color-brown: #a8783c;
  --color-accent: #ff4d1c;
  --color-bg: #f1ece1;
  --color-surface: #fffaf2;
  --color-surface-alt: #e9e0cf;
  --color-text: #1e1a14;
  --color-text-muted: #5b5346;
  --color-border: #cabfa8;

  --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Source Serif 4", Georgia, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --max-width: 1120px;
  --radius: 10px;
}

:root[data-theme="dark"] {
  --color-bg: #0d0b08;
  --color-surface: #161310;
  --color-surface-alt: #1c1812;
  --color-text: #efe8db;
  --color-text-muted: #a89d8a;
  --color-border: #332c22;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #0d0b08;
    --color-surface: #161310;
    --color-surface-alt: #1c1812;
    --color-text: #efe8db;
    --color-text-muted: #a89d8a;
    --color-border: #332c22;
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* The page never scrolls between floors (wheel, keys, touch do nothing);
   floors change only through the nav. A floor whose content is taller than
   the screen scrolls inside itself. */
html.js { overflow: hidden; }

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background-color .3s ease, color .3s ease;
}

[dir="rtl"] {
  font-family: var(--font-sans);
}

[dir="rtl"] .eyebrow,
[dir="rtl"] .work-meta,
[dir="rtl"] .section-index,
[dir="rtl"] .blueprint-titleblock span {
  letter-spacing: 0;
}

img { max-width: 100%; display: block; }

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.skip-link {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  background: var(--color-accent);
  color: #fff;
  padding: 10px 16px;
  z-index: 1000;
}
.skip-link:focus { inset-inline-start: 16px; top: 16px; }

/* ---------- Header ---------- */

/* The header is the cabin's top bar (the transom above the doors). */
.site-header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 20px;
  height: 72px;
  padding: 0 28px;
  background: var(--color-navy);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
}
.js .site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--transom);
}

.brand { display: block; }
.brand-mark { height: 40px; width: auto; }

.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* ---------- Theme switch (light-switch toggle) ---------- */

.theme-switch {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
}

.theme-switch-plate {
  display: block;
  width: 30px;
  height: 52px;
  padding: 4px;
  border-radius: 6px;
  background: linear-gradient(180deg, #efe9df, #cfc4b0);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.2),
    0 2px 5px rgba(0, 0, 0, 0.35);
  position: relative;
}

.theme-switch-toggle {
  display: block;
  position: absolute;
  left: 4px;
  right: 4px;
  top: 4px;
  height: 44%;
  border-radius: 4px;
  background: linear-gradient(180deg, #fffdf9, #d8cfc0);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transition: transform 0.18s cubic-bezier(0.5, 0, 0.5, 1.6), background 0.2s ease;
}

.theme-switch[aria-checked="true"] .theme-switch-toggle {
  transform: translateY(108%);
  background: linear-gradient(180deg, #46403a, #211d1a);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* ---------- Gears (decorative mechanical motif) ---------- */

.gear {
  fill: currentColor;
  color: var(--color-accent);
  display: block;
}

.gear--hero {
  position: absolute;
  top: -70px;
  inset-inline-end: -70px;
  width: 320px;
  height: 320px;
  opacity: 0.08;
}

.gear--sm {
  width: 30px;
  height: 30px;
  color: var(--color-brown);
  opacity: 0.55;
}

.gear--btn {
  width: 18px;
  height: 18px;
  color: currentColor;
  opacity: 0.9;
  margin-inline-end: 8px;
  vertical-align: -3px;
}

.gear-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 0;
}
.gear-divider .gear--sm:last-child { margin-inline-start: -6px; }

.spin-slow { animation: gear-spin 26s linear infinite; }
.spin-slow-rev { animation: gear-spin-rev 20s linear infinite; }

@keyframes gear-spin { to { transform: rotate(360deg); } }
@keyframes gear-spin-rev { to { transform: rotate(-360deg); } }

@media (prefers-reduced-motion: reduce) {
  .spin-slow, .spin-slow-rev { animation: none; }
}

/* ---------- Rooms (full-screen floor backgrounds) ---------- */

.room {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  background-color: #efe7dc;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.room--g { background-image: url("../images/floors/g-lobby.jpg"); }

/* ---------- Frosted glass panel (content over a room) ---------- */
/* Hidden state is gated on .js so the content stays visible without JS.
   The panel sits on the physical side named in its modifier, matching
   an object in the room, so it doesn't flip with RTL. */

.glass-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: max(33.333%, 360px);
  background: rgba(255, 250, 242, 0.68);
  -webkit-backdrop-filter: blur(30px) saturate(1.15);
  backdrop-filter: blur(30px) saturate(1.15);
  box-shadow: 0 0 40px rgba(60, 40, 20, 0.12);
  transition: transform 0.42s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.glass-panel--left {
  left: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.7);
}
.js .glass-panel--left:not(.is-open) { transform: translateX(-100%); }

.glass-panel-body {
  height: 100%;
  overflow-y: auto;
  padding: 56px clamp(24px, 3vw, 48px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  color: var(--color-ink);
}

.glass-tab {
  position: absolute;
  top: 50%;
  width: 28px;
  height: 64px;
  margin-top: -32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: rgba(255, 250, 242, 0.72);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--color-ink);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(60, 40, 20, 0.15);
}
.glass-tab:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.glass-tab svg { transition: transform 0.3s ease; }

.glass-panel--left .glass-tab {
  right: -28px;
  border-left: none;
  border-radius: 0 8px 8px 0;
}
.glass-panel--left:not(.is-open) .glass-tab svg { transform: scaleX(-1); }

@media (max-width: 720px) {
  .glass-panel { width: calc(100% - 28px); }
}

@media (prefers-reduced-motion: reduce) {
  .glass-panel, .glass-tab svg { transition: none; }
}

/* ---------- Hero (floor G) ---------- */

.hero .eyebrow, #heroPanelBody .eyebrow,
.hero .section-index, #heroPanelBody .section-index { color: #b8340f; }

.hero-name {
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin: 0 0 12px;
  color: #8a4f2a;               /* the lobby's terracotta pot, deepened */
}

.eyebrow {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--color-accent);
  margin: 0 0 20px;
}

.hero h1, :where(#heroPanelBody) h1 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.55rem, 1.95vw, 2.3rem);
  line-height: 1.14;
  letter-spacing: -0.01em;
  margin: 0 0 22px;
  text-wrap: balance;
}

.hero-lede {
  font-size: 1.02rem;
  color: #3d362c;
  margin: 0 0 30px;
}

.btn {
  display: inline-block;
  padding: 13px 26px;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  font-size: 0.95rem;
  transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  border: 1.5px solid transparent;
}
.btn:hover { transform: translateY(-1px); }

.btn-primary {
  background: var(--color-accent);
  color: #fff;
}
.btn-primary:hover { background: #d63d10; }

.btn-ghost {
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}
.btn-ghost:hover { border-color: #fff; }

/* ---------- Sections ---------- */

.section {
  padding: 84px 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: safe center;
}
.js .section {
  height: 100vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.section-alt { background: var(--color-surface-alt); }

.section h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  font-weight: 600;
  margin: 0 0 32px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.section-index {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--color-accent);
  letter-spacing: 0.04em;
}

.section-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  color: var(--color-brown);
}

/* ---------- Per-section topic texture (light touch) ---------- */

#about .section-body {
  padding-top: 18px;
  border-top: 2px double var(--color-border);
  max-width: 72ch;
}

.section-body p {
  max-width: 72ch;
  color: var(--color-text-muted);
  font-size: 1.05rem;
}

/* ---------- Capability / Work grids ---------- */

.capability-grid,
.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

.capability-card,
.work-card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 2px;
  padding: 28px;
}

.capability-card::before,
.capability-card::after,
.work-card::before,
.work-card::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border: 1.5px solid var(--color-brown);
  opacity: 0.6;
}
.capability-card::before,
.work-card::before {
  top: -1px;
  inset-inline-start: -1px;
  border-inline-end: none;
  border-bottom: none;
}
.capability-card::after,
.work-card::after {
  bottom: -1px;
  inset-inline-end: -1px;
  border-inline-start: none;
  border-top: none;
}

.work-card {
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}

.capability-card h3,
.work-card h3 {
  margin: 0 0 10px;
  font-size: 1.1rem;
  color: var(--color-navy);
}

:root[data-theme="dark"] .capability-card h3,
:root[data-theme="dark"] .work-card h3 { color: var(--color-accent); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .capability-card h3,
  :root:not([data-theme="light"]) .work-card h3 { color: var(--color-accent); }
}

.capability-card p,
.work-card p {
  color: var(--color-text-muted);
  margin: 0;
  font-size: 0.98rem;
}

.work-meta {
  text-transform: uppercase;
  font-size: 0.75rem !important;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--color-accent) !important;
  margin: 0 0 10px !important;
}

/* ---------- Timeline ---------- */

.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.timeline li {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 24px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--color-border);
}
.timeline li:last-child { border-bottom: none; padding-bottom: 0; }

.timeline-when {
  font-weight: 700;
  color: var(--color-navy);
}
:root[data-theme="dark"] .timeline-when { color: var(--color-accent); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .timeline-when { color: var(--color-accent); }
}

.timeline-what h3 { margin: 0 0 6px; font-size: 1.05rem; }
.timeline-what p { margin: 0; color: var(--color-text-muted); }

/* ---------- Résumé blueprint reveal ---------- */

.section-body-lead {
  color: var(--color-text-muted);
  max-width: 60ch;
  margin: 0 0 24px;
  font-size: 1.05rem;
}

.resume-trigger {
  display: inline-flex;
  align-items: center;
  border: none;
  cursor: pointer;
  font: inherit;
}

.blueprint-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.6s cubic-bezier(0.65, 0, 0.35, 1);
  margin-top: 28px;
}
.blueprint-panel.is-open { grid-template-rows: 1fr; }

.blueprint-sheet-wrap { overflow: hidden; min-height: 0; }

.blueprint-sheet {
  position: relative;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 28px),
    linear-gradient(160deg, #17335a, #0d2340);
  color: #dce9f7;
  border-radius: var(--radius);
  padding: 48px clamp(20px, 4vw, 48px) 28px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.blueprint-close {
  position: absolute;
  top: 14px;
  inset-inline-end: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #dce9f7;
  border: 1px solid rgba(255, 255, 255, 0.25);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}
.blueprint-close:hover { background: rgba(255, 255, 255, 0.18); }

.blueprint-timeline .timeline-when { color: var(--color-accent) !important; font-family: var(--font-sans); }
.blueprint-timeline li { border-bottom-color: rgba(255, 255, 255, 0.15); }
.blueprint-timeline .timeline-what h3 { color: #fff; }
.blueprint-timeline .timeline-what p { color: #b9cbe0; }

.blueprint-titleblock {
  margin-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  padding-top: 16px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.blueprint-titleblock span {
  display: block;
  text-transform: uppercase;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: #8fa8c4;
}
.blueprint-titleblock strong { color: #fff; font-weight: 600; font-size: 0.92rem; }

@media (max-width: 600px) {
  .blueprint-titleblock { grid-template-columns: 1fr; }
}

/* ---------- Contact ---------- */

.contact-section {
  background: var(--color-navy);
  color: #fff;
  text-align: center;
}

.contact-section h2 {
  justify-content: center;
  color: #fff;
}

.contact-section > .wrap > p {
  max-width: 56ch;
  margin: 0 auto 32px;
  color: #d8d2c6;
}

.contact-form {
  max-width: 620px;
  margin: 0 auto;
  text-align: left;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.field-group { margin-bottom: 18px; }

.field-group label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: #d8d2c6;
}

.field-group input {
  width: 100%;
  font: inherit;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.field-group input::placeholder,
.field-group textarea::placeholder { color: #9aa4b5; }

.field-group input:focus,
.field-group textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  background: rgba(255, 255, 255, 0.1);
}

.textarea-shell {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.06);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.textarea-shell:focus-within {
  border-color: var(--color-accent);
  background: rgba(255, 255, 255, 0.1);
}

.textarea-shell textarea {
  display: block;
  width: 100%;
  font: inherit;
  line-height: 1.6;
  padding: 12px 14px;
  border: none;
  background: transparent;
  color: #fff;
  resize: vertical;
}
.textarea-shell textarea:focus { outline: none; }

.letter-rain {
  display: none;
  position: absolute;
  inset: 0;
  padding: 12px 14px;
  font: inherit;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  color: #fff;
  pointer-events: none;
}
.letter-rain.is-gathering { display: block; }
.letter-rain .letter {
  display: inline-block;
  animation: letter-gather 700ms cubic-bezier(0.55, 0, 0.85, 0.35) forwards;
}

@keyframes letter-gather {
  0% { transform: scale(1) translateY(0); opacity: 1; }
  100% { transform: scale(0.15) translateY(-45%); opacity: 0; }
}

.pigeon-rig {
  position: relative;
  height: 60px;
  margin: -6px 0 20px;
}

.pipe-svg { width: 100%; height: 100%; display: block; overflow: visible; }

.pigeon-bundle {
  fill: var(--color-accent);
}

.pigeon {
  color: var(--color-ink);
  opacity: 0;
}
.pigeon-rig.is-flying .pigeon { opacity: 1; }

.success-bubble {
  position: absolute;
  inset-inline-end: 2%;
  top: -10px;
  max-width: 220px;
  background: #fff;
  color: var(--color-navy);
  border-radius: 14px;
  padding: 10px 16px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.3;
  opacity: 0;
  transform: translateY(-8px) scale(0.85);
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}
.success-bubble.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.success-bubble::after {
  content: "";
  position: absolute;
  inset-inline-start: 22px;
  bottom: -6px;
  width: 12px;
  height: 12px;
  background: inherit;
  transform: rotate(45deg);
}

.form-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.contact-alt {
  margin-top: 28px !important;
  font-size: 0.9rem;
}
.contact-alt a { color: var(--color-accent); }

@media (max-width: 640px) {
  .form-row { grid-template-columns: 1fr; }
  .success-bubble { inset-inline-end: 0; max-width: 68vw; }
}

@media (prefers-reduced-motion: reduce) {
  .letter-rain .letter { animation: none; opacity: 0; }
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--color-ink);
  color: #b9b0a4;
  padding: 32px 0;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-mark {
  height: 24px;
  width: auto;
  filter: brightness(0) invert(1) opacity(0.85);
}

.footer-inner p { margin: 0; font-size: 0.85rem; }

@media (max-width: 640px) {
  .timeline li {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/* ---------- Language toggle ---------- */

.lang-toggle {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: #ece7de;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.lang-toggle:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.4);
}

/* ---------- Floor navigation (top bar) ---------- */

.floor-nav { flex: 1; display: flex; justify-content: center; }

.floor-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 4px;
}

.floor-nav-list a {
  display: block;
  padding: 7px 12px;
  border-radius: 999px;
  color: #d8d2c6;
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}
.floor-nav-list a:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.floor-nav-list a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.floor-nav-list a.is-active { background: var(--color-accent); color: #fff; }

.floor-nav-toggle {
  display: none;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: #ece7de;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  padding: 6px 16px;
  cursor: pointer;
}

@media (max-width: 1100px) {
  .floor-nav { justify-content: flex-end; margin-inline-end: 12px; }
  .floor-nav-toggle { display: block; }
  .floor-nav-list {
    display: none;
    position: absolute;
    top: 100%;
    inset-inline-end: 12px;
    flex-direction: column;
    min-width: 200px;
    padding: 8px;
    background: var(--color-navy);
    border-radius: 0 0 12px 12px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  }
  .floor-nav-list.is-open { display: flex; }
  .floor-nav-list a { border-radius: 8px; padding: 10px 14px; }
}

/* ---------- Elevator: the building and the cabin ---------- */
/* The rooms stack on a track inside the shaft; the car (top bar, walls,
   glass doors) stays put and the track slides behind it. Positioning is
   gated on .js so without JS the floors are plain stacked sections. */

:root {
  --transom: 72px;
  --jamb: 22px;
  --sill: 18px;
  --door-rail: #161412;      /* door frames: black, so they stand apart from the navy bar (Gidi) */
  --wall: #5f837c;           /* cabin walls: painted panelling, the sunroom's own blue-green (Gidi's pick) */
  --wall-shade: #4b6a64;
  --door-ms: 650ms;
  /* The door opening never gets wider than this (width / height), so the
     3:2 rooms are barely cropped; extra screen width becomes cabin wall.
     To undo, set it to 99 (opening fills the screen again). */
  --max-ratio: 1.5;          /* same shape as the rooms: nothing cut (Gidi) */
  --wall-min: 0px;           /* narrowest side wall; raised on computer screens so the wall can carry text */
  --open-w: min(calc(100vw - 2 * var(--jamb)), calc(100vw - 2 * var(--wall-min)), calc((100vh - var(--transom) - var(--sill)) * var(--max-ratio)));
  --open-x: calc((100vw - var(--open-w)) / 2);
}

.js body { background: #efe6d8; }

.js .shaft {
  position: fixed;
  z-index: 0;
  top: var(--transom);
  left: var(--open-x);
  width: var(--open-w);
  bottom: var(--sill);
  overflow: hidden;
  background: #efe6d8;
}

.js .track { position: absolute; inset: 0 0 auto 0; will-change: transform; }

.js .track > .room {
  position: absolute;
  left: 0;
  right: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.js .track > .room:focus { outline: none; }

/* Which part of each room to keep when the screen crops it (0% top, 100% bottom). */
.track > .room--g  { background-image: url("../images/floors/g-lobby.jpg"); background-position: center 60%; }
.track > .room--b1 { background-image: url("../images/floors/b1-about.jpg"); background-position: center 65%; }
.track > .room--b2 { background-image: url("../images/floors/b2-how-i-think.jpg"); background-position: center 55%; }
.track > .room--b3 { background-image: url("../images/floors/b3-what-i-do.jpg"); background-position: center 55%; }
.track > .room--b4 { background-image: url("../images/floors/b4-ai-workflow.jpg"); background-position: center 100%; }
.track > .room--b5 { background-image: url("../images/floors/b5-selected-work.jpg"); background-position: center 50%; }
.track > .room--b6 { background-image: url("../images/floors/b6-experience.jpg"); background-position: center 70%; }
.track > .room--b7 { background-image: url("../images/floors/b7-contact.jpg"); background-position: center 60%; }

/* The gear dividers have no place between rooms; the slabs replace them. */
.js .track > .gear-divider { display: none; }

/* Between two floors: the cut edge of a real floor, in light colours.
   Skirting where the room above ends, a light concrete slab with a brass
   floor number, a cornice where the room below begins. */
.slab {
  position: absolute;
  left: 0;
  right: 0;
  background:
    linear-gradient(180deg,
      #f4ede1 0 10%,                    /* skirting of the room above */
      #b9ab95 10% 11%,
      #efe6d8 11% 26%,                  /* plaster */
      #9d927f 26% 27%,
      #d3cbbd 27% 73%,                  /* concrete slab */
      #9d927f 73% 74%,
      #efe6d8 74% 88%,                  /* plaster */
      #b9ab95 88% 89%,
      #f7f1e7 89% 100%);                /* cornice of the room below */
  box-shadow: inset 0 10px 14px -10px rgba(80, 60, 30, 0.35), inset 0 -10px 14px -10px rgba(80, 60, 30, 0.35);
}

.slab-label {
  position: absolute;
  right: 7%;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(26px, 5.5vh, 58px);
  letter-spacing: 0.1em;
  color: #b0843f;
  text-shadow: 0 1px 0 rgba(255, 240, 210, 0.7), 0 2px 3px rgba(60, 40, 10, 0.35);
}

/* The car: everything that moves with the passenger. */

.car > .doors, .car > .enclosure, .car > .jamb, .car > .sill { display: none; }

.js .car { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
.js .car > * { pointer-events: auto; }
.js .car > .doors, .js .car > .enclosure, .js .car > .jamb, .js .car > .sill { display: block; }
.js .car > .doors, .js .car > .enclosure { pointer-events: none; }

.doors {
  position: absolute;
  top: var(--transom);
  left: var(--open-x);
  width: var(--open-w);
  bottom: var(--sill);
  overflow: hidden;
}

.door {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  transition: transform var(--door-ms) cubic-bezier(0.45, 0, 0.2, 1);
}
.door--l { left: 0; transform: translateX(-100%); }
.door--r { right: 0; transform: translateX(100%); }
.doors.is-closed .door { transform: translateX(0); }

/* Frame rails around the glass: dark metal, darker than the glass. */
.door {
  border-top: 14px solid var(--door-rail);
  border-bottom: 16px solid var(--door-rail);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.door--l { border-left: 8px solid var(--door-rail); border-right: 6px solid #0b0a09; }
.door--r { border-right: 8px solid var(--door-rail); border-left: 6px solid #0b0a09; }

/* Transparent glass: a faint tint plus reflections. The reflections stay
   still while the building slides behind them, which is what sells the
   movement. */
.glass {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(112deg,
      transparent 0 18%,
      rgba(255, 255, 255, 0.16) 21%, rgba(255, 255, 255, 0.05) 27%,
      transparent 31% 58%,
      rgba(255, 255, 255, 0.11) 61%, transparent 66%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 30%, transparent 75%, rgba(0, 0, 0, 0.06)),
    rgba(170, 196, 204, 0.07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.door--r .glass {
  background:
    linear-gradient(112deg,
      transparent 0 8%,
      rgba(255, 255, 255, 0.10) 11%, transparent 16% 44%,
      rgba(255, 255, 255, 0.15) 47%, rgba(255, 255, 255, 0.04) 53%, transparent 57%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 30%, transparent 75%, rgba(0, 0, 0, 0.06)),
    rgba(170, 196, 204, 0.07);
}

/* Soft shading at the edges of the opening: you're in a box. */
.enclosure {
  position: absolute;
  top: var(--transom);
  left: var(--open-x);
  width: var(--open-w);
  bottom: var(--sill);
  box-shadow: inset 0 0 60px rgba(80, 60, 30, 0.18), inset 0 16px 24px -16px rgba(15, 33, 56, 0.35);
}

.jamb, .sill {
  position: absolute;
  background: linear-gradient(180deg, var(--wall), var(--wall-shade));
}
.jamb { top: var(--transom); bottom: var(--sill); width: var(--open-x); }

/* On wide screens the jambs become cabin side walls: panel seams and a
   brass handrail. */
.car.has-walls .jamb {
  background:
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(0, 0, 0, 0.18) 46px 47px, rgba(255, 255, 255, 0.2) 47px 48px),
    linear-gradient(180deg, var(--wall), var(--wall-shade));
}
.car.has-walls .jamb::after {
  content: "";
  position: absolute;
  top: 60%;
  left: 20px;
  right: 20px;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(180deg, #e2bd86, #a8783c 55%, #6f4f27);
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.35);
}
.jamb--l { left: 0; box-shadow: inset -2px 0 0 var(--color-brown); }
.jamb--r { right: 0; box-shadow: inset 2px 0 0 var(--color-brown); }

.sill {
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--sill);
  box-shadow: inset 0 2px 0 var(--color-brown);
}

/* Floor display in the top bar: orange code centred, the arrow sits in the
   left margin and shows only while moving. */
.indicator {
  position: relative;
  min-width: 84px;
  padding: 6px 24px;
  border-radius: 6px;
  background: #081427;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 2px 8px rgba(0, 0, 0, 0.6);
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 500;
  text-align: center;
  text-shadow: 0 0 8px rgba(255, 77, 28, 0.55);
  font-variant-numeric: tabular-nums;
}
.indicator-arrow { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 0.8em; opacity: 0; transition: opacity 0.2s; }
.indicator.is-moving .indicator-arrow { opacity: 1; }

/* The panel snaps shut (no slide) when its floor is left. */
.glass-panel.is-instant { transition: none; }

/* The text fades away gently while the doors close, gone just before they meet (DOOR_MS 650). */
.glass-panel.is-leaving { opacity: 0; transition: opacity 0.6s ease-in-out; }

/* The panel text never scrolls: main.js lowers --fit (a zoom on each
   child) until everything fits the panel's height. */
.js .glass-panel-body { overflow: hidden; }
.glass-panel-body > * { zoom: var(--fit, 1); }

/* On wide screens the room's text hangs on the cabin's left wall as a
   mounted plaque, so the room itself stays uncovered. */
.glass-panel--wall {
  top: calc(var(--transom) + 20px);
  bottom: calc(var(--sill) + 20px);
  left: 20px;
  width: calc(var(--open-x) - 40px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 6px;
  background: rgba(255, 250, 242, 0.94);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}
.js .glass-panel--wall:not(.is-open) { transform: translateX(calc(-100% - 24px)); }
.glass-panel--wall .glass-tab { display: none; }
.glass-panel--wall .glass-panel-body { padding: 26px 24px; font-size: 16px; }
.glass-panel--wall .eyebrow { font-size: 0.74em; margin-bottom: 1.1em; }
.glass-panel--wall .hero-name { font-size: 1.85em; margin-bottom: 0.5em; }
.glass-panel--wall h1 { font-size: 1.75em; margin-bottom: 0.7em; }
.glass-panel--wall .hero-lede { font-size: 0.98em; margin-bottom: 1.5em; }
.glass-panel--wall .btn { font-size: 0.92em; padding: 0.8em 1.6em; }

/* Large and 4K screens: scale the top bar up so it doesn't look tiny. */
@media (min-width: 2200px) {
  :root { --transom: 96px; --jamb: 30px; --sill: 24px; }
  .brand-mark { height: 54px; }
  .floor-nav-list a { font-size: 1.15rem; padding: 9px 16px; }
  .indicator { font-size: 1.35rem; min-width: 110px; }
  .glass-panel--wall .glass-panel-body { font-size: 20px; padding: 34px 30px; }
}
@media (min-width: 3200px) {
  :root { --transom: 136px; --jamb: 42px; --sill: 34px; }
  .brand-mark { height: 76px; }
  .floor-nav-list a { font-size: 1.6rem; padding: 12px 22px; }
  .indicator { font-size: 1.9rem; min-width: 150px; }
  .glass-panel--wall .glass-panel-body { font-size: 28px; padding: 48px 42px; }
}

/* Computer screens: the side walls are always wide enough for the room's
   text, even if the doorway has to narrow a little. */
@media (min-width: 1024px) and (min-height: 501px) {
  :root { --wall-min: 280px; }
}

/* Very short screens (phone on its side): no side walls, thin frame. */
@media (max-height: 500px) {
  :root { --max-ratio: 99; --transom: 52px; --jamb: 8px; --sill: 8px; }
  .brand-mark { height: 28px; }
}

/* Phones: thinner frame so the room gets the screen. */
@media (max-width: 640px) {
  :root { --transom: 60px; --jamb: 8px; --sill: 10px; }
  .site-header { gap: 10px; padding: 0 12px; }
  .brand-mark { height: 30px; }
  .indicator { min-width: 64px; padding: 4px 18px; font-size: 0.9rem; }
  .door--l, .door--r { border-top-width: 8px; border-bottom-width: 10px; }
}