/* ============================================================================
   Modes (public) — what's on your mind, the ten rooms index, and a full room
   for each mode. The page takes each mode's hue as you pass through it.
   ========================================================================== */
.m-hero { padding-top: clamp(120px, 14vw, 170px); padding-bottom: clamp(30px, 5vw, 50px); }
.m-hero .display { max-width: 13ch; }
.m-hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px, 5vw, 70px); align-items: end; }
.m-hero__grid .mind { margin-top: 0; padding: clamp(20px, 2.4vw, 28px); }
@media (max-width: 900px) { .m-hero__grid { grid-template-columns: 1fr; } }
.mind { display: grid; gap: 14px; margin-top: 30px; }
.mind__q { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.mind__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mind__chips button {
  border: 1px solid var(--hair); background: rgba(255,255,255,.05); color: var(--ink); cursor: pointer;
  padding: 10px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; transition: all .35s var(--ease-soft);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.mind__chips button:hover { border-color: color-mix(in srgb, var(--c) 50%, transparent); }
.mind__chips button[aria-pressed="true"] { background: color-mix(in srgb, var(--c) 24%, rgba(255,255,255,.05)); border-color: color-mix(in srgb, var(--c) 60%, transparent); box-shadow: 0 0 24px -8px var(--c); }
.mind__out { min-height: 1.6em; font-size: 15px; color: var(--ink-2); }
.mind__out a { color: var(--ink); font-weight: 650; text-decoration: none; border-bottom: 1px solid var(--accent-line); margin-right: 10px; }

.rooms { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 26px; }
.room-tile {
  --c: var(--accent);
  display: grid; gap: 8px; align-content: start; padding: 16px; border-radius: 20px; text-decoration: none; color: var(--ink); min-height: 132px;
  background: linear-gradient(170deg, color-mix(in srgb, var(--c) 14%, rgba(255,255,255,.05)), rgba(255,255,255,.02));
  border: 1px solid color-mix(in srgb, var(--c) 22%, var(--glass-edge));
  transition: transform .6s var(--ease-spring), border-color .3s, box-shadow .4s, opacity .4s;
}
.room-tile:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--c) 60%, transparent); }
.room-tile i { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 18%, transparent); }
.room-tile i svg { width: 19px; height: 19px; }
.room-tile b { font-size: 15px; }
.room-tile span { font-size: 12.5px; color: var(--ink-3); line-height: 1.4; }
.rooms.is-filtering .room-tile:not(.is-match) { opacity: .35; }
.rooms .room-tile.is-match { box-shadow: 0 0 0 1.5px var(--c), 0 20px 40px -20px var(--c); }
@media (max-width: 980px) { .rooms { grid-template-columns: repeat(2, 1fr); } }

.room-rail { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 72px); z-index: 20; display: flex; justify-content: center; margin-top: 20px; pointer-events: none; }
.room-rail__glass { pointer-events: auto; display: flex; gap: 2px; padding: 5px; border-radius: 999px; overflow-x: auto; max-width: calc(100vw - 24px); scrollbar-width: none;
  background: rgba(10,14,16,.42); border: 1px solid var(--glass-edge); -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5); }
.room-rail__glass::-webkit-scrollbar { display: none; }
.room-rail a { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; text-decoration: none; font-size: 12.5px; font-weight: 650; color: var(--ink-2); transition: color .3s, background .4s; }
.room-rail a svg { width: 15px; height: 15px; color: var(--c); }
.room-rail a.is-on { color: var(--on-accent); background: var(--c); }
.room-rail a.is-on svg { color: var(--on-accent); }

.mroom { position: relative; padding-block: clamp(56px, 7vw, 100px); scroll-margin-top: 110px; overflow-x: clip; }
.mroom__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 80px); align-items: center; }
.mroom:nth-of-type(even) .mroom__vis { order: -1; }
.mroom__copy { display: grid; gap: 18px; }
.mroom__n { display: flex; gap: 12px; align-items: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.mroom__n i { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line); }
.mroom__n i svg { width: 22px; height: 22px; }
.mroom .display { max-width: 14ch; }
.mroom ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mroom li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 15.5px; color: var(--ink-2); line-height: 1.5; }
.mroom li svg { width: 18px; height: 18px; color: var(--accent); margin-top: 3px; }
.mroom__tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.mroom__tabs span { font-size: 12px; font-weight: 650; padding: 6px 12px; border-radius: 999px; color: var(--ink-3); border: 1px solid var(--hair); }
.mroom__tabs span.is-mode { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.mroom__vis { position: relative; display: grid; place-items: center; min-height: min(540px, calc(100vh - 190px)); }
.mroom__vis .phone { --w: min(270px, 62vw, calc((100vh - 300px) * .46)); --w: min(270px, 62vw, calc((100svh - 300px) * .46)); position: absolute; transition: transform .2s linear; }
.mroom__vis .phone--front { z-index: 2; transform: translate3d(calc(var(--side, 1) * 40px), calc((.5 - var(--p, .5)) * 60px), 0) rotate(calc(var(--side, 1) * 3deg)); }
.mroom__vis .phone--back { z-index: 1; opacity: .75; transform: translate3d(calc(var(--side, 1) * -80px), calc((.5 - var(--p, .5)) * -40px + 30px), 0) rotate(calc(var(--side, 1) * -5deg)) scale(.9); filter: saturate(.85); }
.mroom__halo { position: absolute; inset: 10% 0; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%); filter: blur(30px); }
@media (max-width: 860px) {
  .mroom__grid { grid-template-columns: 1fr; }
  .mroom:nth-of-type(even) .mroom__vis { order: 0; }
  .mroom__vis { min-height: 480px; }
  .mroom__vis .phone { --w: 220px; }
}
.m-hero .lede { margin-top: 22px; }