/* ==========================================================================
   Mind Museum — mobile build (≤760px)
   Loaded with media="(max-width:760px)", after every desktop rule, so the
   desktop composition is untouched. The phone gets its own reading order:
   name, directory, rooms, and a contact dock that is always one thumb away.
   ========================================================================== */

:root{
  --m-edge:20px;
  --m-safe:env(safe-area-inset-bottom,0px);
}

html{scroll-padding-top:72px}
body{font-size:16px}

/* ---------- header: one row, two links, nothing hidden ---------------- */
.hdr{
  flex-direction:row!important;align-items:center!important;gap:1rem!important;
  padding:0 var(--m-edge)!important;height:56px;
  padding-top:env(safe-area-inset-top,0px)!important;height:calc(56px + env(safe-area-inset-top,0px));
  background:rgba(243,237,207,.92)!important;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent!important;transition:border-color .25s}
.hdr.stuck{border-bottom-color:var(--line-soft)!important}
.hdr-mark{font-size:11px!important;letter-spacing:.14em!important;white-space:nowrap}
.hdr-nav.m{width:auto!important;overflow:visible!important;gap:0!important}
.hdr-nav.m a{
  min-height:44px;padding:0 0 0 1.1rem!important;
  font-size:11px!important;letter-spacing:.08em!important;color:var(--ink)!important;opacity:.72}
.hdr-nav.m a:active{opacity:1}

/* ---------- hero: one scene, the name sitting on the baseline ---------- */
.hero{
  min-height:100vh!important;min-height:100svh!important;
  display:flex!important;flex-direction:column!important;justify-content:flex-end!important;
  padding:calc(80px + env(safe-area-inset-top,0px)) var(--m-edge) calc(2.2rem + var(--m-safe))!important}
.hero::before{inset:-25% -60%}
.hero-place{font-size:11px!important;margin-bottom:.9rem!important}
.hero-owner-title{
  font-size:min(17vw,5.2rem)!important;line-height:.86!important;
  letter-spacing:-.06em!important;margin-left:-.04em;white-space:nowrap}
.hero-descriptor{
  font-size:12px!important;line-height:1.6!important;max-width:30ch!important;
  margin-top:1.15rem!important;opacity:.82}
.entrance-link{
  display:inline-flex;align-items:center;gap:.6rem;margin-top:1.4rem;min-height:44px;
  font-size:11px!important;opacity:.85}
.hero-cue{display:none!important}

/* ---------- index: a directory, not two posters ----------------------- */
.sec,.museum-index,.elsewhere-sec{padding-left:var(--m-edge)!important;padding-right:var(--m-edge)!important}
.museum-index{padding-top:3rem!important;padding-bottom:3.4rem!important}
.index-intro{gap:.9rem!important;margin-bottom:1.4rem!important}
.index-intro .statement{font-size:2.05rem!important;line-height:1;letter-spacing:-.045em}
.rule-label{font-size:11px!important;letter-spacing:.06em!important}
.rule-label::after{width:28px}

.primary-gates{border-bottom:0!important}
.primary-gate,.gate-work{
  min-height:0!important;margin:0!important;padding:1.35rem 2.6rem 1.4rem 0!important;
  display:grid!important;grid-template-columns:2.1rem minmax(0,1fr);column-gap:.4rem;align-items:baseline;
  border-right:0!important;border-bottom:1px solid var(--hair)!important;
  -webkit-tap-highlight-color:transparent}
.primary-gate:hover,.primary-gate:focus-visible{padding-left:0!important;background:none}
.primary-gate:active{background:rgba(14,14,12,.05)!important}
.primary-gate::before{display:none}
.gate-no{grid-column:1;grid-row:1;font-size:11px!important}
.gate-title,.gate-work .gate-title{
  grid-column:2;grid-row:1;margin:0!important;
  font-size:2.7rem!important;line-height:.95!important;letter-spacing:-.05em!important}
.gate-desc{grid-column:2;margin-top:.55rem!important;font-size:1rem!important;line-height:1.5!important;max-width:30ch}
.gate-meta{grid-column:2;margin-top:.7rem!important;font-size:10.5px!important;line-height:1.7!important}
.gate-arrow{right:.1rem!important;top:1.55rem!important;bottom:auto!important;font-size:1.5rem!important}

/* ---------- elsewhere: three rooms as a list you can read in one pass ---- */
.elsewhere-sec{padding-top:3.2rem!important;padding-bottom:3.6rem!important;border-top:1px solid var(--hair)}
.elsewhere-head{margin-bottom:1.6rem!important;gap:1rem!important}
.elsewhere-head .statement{font-size:2.05rem!important;line-height:1.02;letter-spacing:-.045em}
.elsewhere-note{font-size:1rem!important;line-height:1.6!important}
.elsewhere-grid{display:block!important;background:none!important;border:0!important;border-top:1px solid var(--hair)!important}
.else-card{
  min-height:0!important;padding:1.3rem 0 1.4rem!important;background:none!important;
  display:grid!important;grid-template-columns:minmax(0,1fr) auto;column-gap:1rem;align-items:baseline;
  border-bottom:1px solid var(--hair);-webkit-tap-highlight-color:transparent}
.else-card:active{background:rgba(14,14,12,.05)!important}
.else-index{grid-column:1/-1;font-size:11px!important;margin-bottom:.55rem}
.else-card strong{grid-column:1;margin:0!important;font-size:2.15rem!important;line-height:.95!important}
.else-card p{grid-column:1/-1;margin-top:.6rem!important;font-size:1rem!important;line-height:1.5!important;max-width:32ch}
.else-stack{display:none!important}
.else-go{
  grid-column:2;grid-row:2;margin:0!important;align-self:center;
  font-size:0!important;color:var(--red)!important}
.else-go::after{content:"→";font:300 1.5rem/1 var(--sans)}
.writing-card .else-go::after{content:"↗"}

/* ---------- footer: clears the dock ----------------------------------- */
.ftr{
  padding:2.2rem var(--m-edge) calc(2.6rem + var(--m-safe))!important;
  gap:1.4rem!important}
.ftr-line{font-size:11px!important;letter-spacing:.06em!important;line-height:1.9}
.ftr-links{gap:0 1.3rem!important}
.ftr-links a{font-size:11px!important;letter-spacing:.06em!important;min-height:44px;display:inline-flex;align-items:center}

@media (max-width:360px){
  .hdr-nav.m a{padding-left:.8rem!important}
  .gate-title,.gate-work .gate-title{font-size:2.35rem!important}
}