/* MOGEOSH V4 / Mobile product shell — intentionally not a scaled desktop layout.
   Progressive enhancement: if JS fails the original header & menu remain available. */
.m4-appbar,.m4-tabbar,.m4-sheet,.m4-segment,.m4-shelf-progress{display:none}
@media(max-width:860px){
  :root{--m4-safe-top:env(safe-area-inset-top,0px);--m4-safe-bottom:env(safe-area-inset-bottom,0px);--m4-rose:#d4adb8;--m4-night:#282c29}
  html{scroll-padding-top:calc(78px + var(--m4-safe-top));overscroll-behavior-y:auto}
  body{padding-bottom:calc(81px + var(--m4-safe-bottom));-webkit-tap-highlight-color:transparent}
  body.m4-sheet-open{overflow:hidden}
  .m4-ready .site-header{display:none!important}
  .m4-appbar{position:sticky;top:0;z-index:110;display:flex;align-items:center;gap:12px;min-height:calc(64px + var(--m4-safe-top));padding:calc(8px + var(--m4-safe-top)) max(18px,env(safe-area-inset-right,0px)) 8px max(18px,env(safe-area-inset-left,0px));background:rgba(246,242,237,.94);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid rgba(52,49,49,.09)}
  .m4-appbar-brand{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
  .m4-appbar-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:14px 12px 16px 11px;background:var(--m4-night);color:#efc6d3;font-size:22px;flex:none;animation:m4-mark-breathe 9s ease-in-out infinite alternate}
  .m4-appbar-label{display:flex;flex-direction:column;line-height:1.18;min-width:0}
  .m4-appbar-label strong{font-size:14px;letter-spacing:-.045em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .m4-appbar-label small{margin-top:4px;color:#89847f;font-size:9px;letter-spacing:.12em;font-weight:700;text-transform:uppercase}
  .m4-appbar-back,.m4-appbar-action{flex:none;width:40px;height:40px;display:grid;place-items:center;border:1px solid #4a4b441c;border-radius:14px;background:#fff7;color:#30332f;font-size:19px;touch-action:manipulation}
  .m4-appbar-action svg,.m4-tab svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .m4-appbar-action:active,.m4-appbar-back:active{transform:scale(.94)}
  .m4-tabbar{position:fixed;z-index:120;bottom:0;left:0;right:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch;padding:8px max(9px,env(safe-area-inset-left,0px)) calc(8px + var(--m4-safe-bottom));min-height:calc(74px + var(--m4-safe-bottom));background:rgba(248,244,239,.97);border-top:1px solid rgba(48,49,46,.1);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 -5px 25px #2b292618}
  .m4-tab{position:relative;color:#84847d;display:flex;flex-direction:column;gap:4px;justify-content:center;align-items:center;min-width:0;min-height:57px;padding:5px 0;border:0;background:none;touch-action:manipulation}
  .m4-tab span{font-size:10px;letter-spacing:-.025em;white-space:nowrap}
  .m4-tab svg{width:20px;height:20px;transition:transform .45s cubic-bezier(.2,1.6,.25,1)}
  .m4-tab[aria-current="page"],.m4-tab[aria-expanded="true"]{color:#333630;font-weight:700}
  .m4-tab[aria-current="page"]::before,.m4-tab[aria-expanded="true"]::before{content:"";position:absolute;top:0;width:38px;height:29px;z-index:-1;border-radius:45% 54% 40% 56%/55% 48% 52% 45%;background:#e8ccd4;animation:m4-pill-morph 7s ease-in-out infinite alternate}
  .m4-tab:active svg{transform:scale(.78) rotate(-12deg)}
  .m4-sheet[hidden]{display:none!important}
  .m4-sheet{position:fixed;inset:0;z-index:150;display:flex;align-items:flex-end;justify-content:center}
  .m4-sheet-backdrop{position:absolute;inset:0;background:rgba(25,27,25,.42);border:0;width:100%;height:100%}
  .m4-sheet-panel{position:relative;z-index:1;width:min(100%,620px);max-height:calc(90dvh - env(safe-area-inset-top,0px));overflow:auto;overscroll-behavior:contain;background:#f3eee8;border-radius:32px 32px 0 0;padding:10px 21px calc(30px + var(--m4-safe-bottom));box-shadow:0 -16px 80px #12151238;animation:m4-sheet-in .38s cubic-bezier(.18,1.1,.25,1) both}
  .m4-sheet-handle{width:38px;height:5px;background:#d1c7c3;border-radius:15px;margin:0 auto 22px}
  .m4-sheet-title{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:24px}
  .m4-sheet-title small{display:block;color:#897c80;font-size:10px;letter-spacing:.12em;margin-bottom:5px}
  .m4-sheet-title h2{font-family:Georgia,serif;font-size:38px;font-weight:400;letter-spacing:-.06em;line-height:1.1;margin:0}
  .m4-sheet-close{width:42px;height:42px;border:1px solid #282c2929;background:#fff8;border-radius:50%;font-size:22px;flex:none}
  .m4-link-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .m4-link{position:relative;min-height:118px;display:flex;flex-direction:column;justify-content:space-between;padding:17px;border-radius:20px;background:#fff9;border:1px solid #4c454519;overflow:hidden}
  .m4-link b{font-size:15px;letter-spacing:-.035em}
  .m4-link small{font-size:9px;letter-spacing:.07em;color:#676963}
  .m4-link:after{content:"↗";position:absolute;right:16px;top:13px;font-size:20px}
  .m4-link:nth-child(1){background:#303833;color:#e7f1e5}.m4-link:nth-child(1) small{color:#a9c7af}
  .m4-link:nth-child(2){background:#e0d0da}.m4-link:nth-child(3){background:#f2e7e0}.m4-link:nth-child(4){background:#dedcd1}
  .m4-sheet-utilities{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
  .m4-sheet-utilities button,.m4-sheet-utilities a{display:inline-flex;align-items:center;justify-content:center;min-height:43px;padding:9px 15px;background:#eee3e0;border:1px solid #57504922;border-radius:99px;font-size:12px;font-weight:600}
  .m4-sheet-utilities button{cursor:pointer}
  .m4-ready .scroll-indicator{z-index:125;height:2px}
  .m4-ready :is(.pill-button,.lab-button,.filter-chip,.mood-button,.stance,.atrium-task,.portal-trigger){touch-action:manipulation}
  .m4-segment{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;padding:10px 18px 17px;position:relative}
  .m4-segment::-webkit-scrollbar{display:none}
  .m4-segment a{display:grid;place-items:center;white-space:nowrap;min-height:41px;min-width:96px;padding:8px 17px;font-size:12px;border-radius:99px;background:#fff9;color:#444840;border:1px solid #494d4631}
  .m4-segment a:first-child{background:#313832;color:#fff}
  .m4-segment a:active,.m4-link:active{transform:scale(.98)}
  .site-footer{padding-bottom:45px}
}
@media(max-width:600px){
  /* Mobile story arc: living preview -> concise meaning -> swipeable worlds. */
  .page-home .hero{display:flex;flex-direction:column;gap:0;padding:13px 15px 34px;overflow:visible;min-height:0}
  .page-home .hero-art{order:0;width:100%;height:clamp(235px,37svh,360px);min-height:235px;border-radius:24px 24px 37px 11px;overflow:hidden}
  .page-home .hero-content{order:1;min-height:0;padding:27px 8px 0}
  .page-home .hero h1{font-size:clamp(37px,9.8vw,59px);line-height:1.02;letter-spacing:-.076em;white-space:normal;overflow-wrap:normal}
  .page-home .hero .eyebrow{margin:0 0 18px;letter-spacing:.11em}
  .page-home .hero-lede{margin-top:18px;font-size:14px;line-height:1.62;max-width:38ch}
  .page-home .hero-actions{margin-top:22px;gap:12px}
  .page-home .hero-index{display:none}
  .page-home .hero .pill-button{min-height:50px}
  .page-home .art-top{top:21px;left:20px;right:20px;font-size:8px;letter-spacing:.07em}
  .page-home .art-bottom{bottom:18px;left:20px;right:20px;font-size:7px;letter-spacing:.06em}
  .page-home .art-interaction-note{left:auto;right:20px;bottom:68px;font-size:7px;letter-spacing:.08em}
  .page-home .art-interaction-note span{margin-left:5px}
  .page-home .art-label{transform:none;max-width:45%;font-size:11px}
  .page-home .art-label-top{top:28%;left:20px}
  .page-home .art-label-bottom{bottom:68px;left:20px}
  .page-home .art-label-mid{right:20px;top:50%}
  .page-home .art-core{transform:translate(calc(-50% + var(--field-x)),calc(-50% + var(--field-y))) scale(.8)}
  .page-home .signal-tape{border-radius:0}
  .page-home .projects-section{padding:60px 0 72px;overflow:hidden}
  .page-home .projects-section .section-heading{padding:0 20px;margin:0 0 23px}
  .page-home .projects-section .section-heading h2{font-size:clamp(38px,9.4vw,58px)}
  .page-home .projects-section .section-heading>p{font-size:13px;line-height:1.6}
  .page-home .filter-bar{margin:0 0 20px!important;padding:0 20px 8px;display:flex;flex-wrap:nowrap;white-space:nowrap;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity}
  .page-home .filter-bar::-webkit-scrollbar{display:none}
  .page-home .filter-bar .filter-chip{flex:none;scroll-snap-align:start;min-height:41px}
  .page-home .project-stack{display:flex;flex-wrap:nowrap;gap:12px;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:none;scroll-snap-type:x mandatory;scroll-padding-inline:20px;padding:4px 20px 18px;-webkit-overflow-scrolling:touch}
  .page-home .project-stack::-webkit-scrollbar{display:none}
  .page-home .project-card:not([hidden]){display:flex;flex-direction:column-reverse;flex:0 0 min(84vw,358px);width:min(84vw,358px);min-width:0;min-height:0;scroll-snap-align:start;border-radius:25px 25px 31px 13px;overflow:hidden}
  .page-home .project-card[hidden]{display:none!important}
  .page-home .project-visual{height:215px;min-height:215px;flex:none}
  .page-home .project-card-copy{padding:22px;min-height:267px;flex:1;gap:12px}
  .page-home .project-card h3{font-size:clamp(35px,9vw,48px);line-height:1.1;overflow-wrap:anywhere}
  .page-home .project-card-copy>div>p{font-size:12px;line-height:1.55}
  .page-home .project-ordinal{font-size:9px}
  .page-home .project-card-bottom{margin-top:10px}
  .page-home .m4-shelf-progress{display:flex;align-items:center;gap:6px;padding:0 20px;color:#85817d;font-size:10px;letter-spacing:.07em}
  .page-home .m4-shelf-progress strong{color:#30332f;font-size:12px;font-weight:700}
  .page-home .m4-shelf-track{height:3px;background:#d8d2cb;flex:1;margin-left:10px;border-radius:10px;overflow:hidden}
  .page-home .m4-shelf-fill{width:25%;height:100%;background:#b98294;transform-origin:left;transition:width .3s ease}
  .page-home .anomaly-section,.page-home .specimen-section,.page-home .living-lab{padding-top:70px;padding-bottom:70px}
  .page-home .anomaly-stage{min-height:340px}
  .page-home .specimen-card,.page-home .specimen-card:last-child{min-height:360px}
  .page-home .specimen-art{bottom:137px}
  .page-home .specimen-label{min-height:143px}
  .page-home .hero-footnote{display:none}
  .detail-hero{display:flex;flex-direction:column;gap:0;padding:13px 15px 8px!important;min-height:0}
  .detail-hero-art{order:-1;width:100%;min-height:245px;height:clamp(240px,34svh,330px);border-radius:25px 25px 33px 11px;overflow:hidden}
  .detail-head{padding:25px 5px 5px}
  .detail-head h1{font-size:clamp(41px,10.2vw,65px);line-height:1.02;overflow-wrap:break-word;letter-spacing:-.064em;margin:18px 0!important}
  .detail-head>p{font-size:14px;line-height:1.64}
  .detail-main{padding:55px 20px}
  .detail-lead{padding-bottom:44px}
  .detail-section{padding:48px 0}
  .detail-facts{padding-bottom:32px}
  .experience{padding:50px 16px 65px}
  .experience-heading{margin:18px 0 24px}
  .experience-heading h2{font-size:clamp(38px,9vw,60px)}
  .sophidea-theatre,.atrium-console{border-radius:22px 22px 33px 11px}
  .void-console{border-radius:22px}
  .back-link{display:none}
  #m4-experience,#about{scroll-margin-top:calc(80px + var(--m4-safe-top))}
}
@media(max-width:370px){
  .m4-appbar{padding-left:max(12px,env(safe-area-inset-left,0px));padding-right:max(12px,env(safe-area-inset-right,0px))}
  .m4-appbar-label strong{font-size:13px}
  .m4-tab span{font-size:9px}
  .m4-link-grid{gap:7px}
  .page-home .hero h1{font-size:clamp(35px,9.4vw,44px)}
}
@media(max-height:460px) and (orientation:landscape){
  .m4-tabbar{min-height:53px;padding-top:1px;padding-bottom:calc(3px + var(--m4-safe-bottom))}
  .m4-tab{min-height:45px;gap:0}
  .m4-tab svg{width:17px;height:17px}
  .m4-sheet-panel{max-height:95dvh}
}
@media(prefers-reduced-motion:reduce){
  .m4-appbar-mark,.m4-tab::before,.m4-sheet-panel{animation:none!important}
  .m4-tab svg,.m4-shelf-fill{transition:none!important}
}
@keyframes m4-sheet-in{from{transform:translateY(28px);opacity:.7}to{transform:translateY(0);opacity:1}}
@keyframes m4-mark-breathe{to{border-radius:11px 16px 10px 18px;transform:rotate(-9deg)}}
@keyframes m4-pill-morph{to{border-radius:30% 67% 42% 63%/59% 34% 66% 46%;transform:translateX(2px)}}

@media(max-width:600px){.page-home .m4-shelf-fill{display:block}.page-home .m4-shelf-progress[hidden]{display:none!important}}
@media(max-width:860px){.m4-appbar,.m4-tabbar,.m4-sheet-title,.m4-link,.m4-segment{-webkit-user-select:none;user-select:none}}

/* User-selected motion OFF has priority over decorative shell physics. */
html[data-motion="off"] .m4-appbar-mark,
html[data-motion="off"] .m4-tab::before,
html[data-motion="off"] .m4-sheet-panel{animation:none!important}
html[data-motion="off"] .m4-tab svg,
html[data-motion="off"] .m4-shelf-fill{transition:none!important}


/* V4.1 mobile legibility / Safari fixes — the desktop design is unchanged. */
@media (max-width:860px) {
  /* In a normal browser the browser owns the top system chrome. Do not add it twice. */
  :root { --m4-safe-top:0px; }
  html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
  body { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans",Arial,sans-serif; }
  .m4-appbar {
    min-height:62px;
    padding:8px max(18px,env(safe-area-inset-right,0px)) 8px max(18px,env(safe-area-inset-left,0px));
    font-family:inherit;
  }
  .m4-appbar-mark { font-size:0; }
  .m4-appbar-mark svg {
    display:block;width:21px;height:21px;
    stroke:#efc6d3;fill:none;stroke-width:1.65;
    stroke-linecap:round;stroke-linejoin:round;
  }
  /* Safari may auto-detect and recolor generated links. Own our chrome explicitly. */
  :is(.m4-appbar-brand,.m4-appbar-back,.m4-tab,.m4-link,.m4-segment a,.m4-sheet-utilities a),
  :is(.m4-appbar-brand,.m4-appbar-back,.m4-tab,.m4-link,.m4-segment a,.m4-sheet-utilities a):any-link,
  :is(.m4-appbar-brand,.m4-appbar-back,.m4-tab,.m4-link,.m4-segment a,.m4-sheet-utilities a):visited {
    text-decoration:none!important;
    -webkit-text-decoration:none!important;
    font-family:inherit;
    -webkit-tap-highlight-color:transparent;
  }
  .m4-appbar-brand,.m4-appbar-brand:any-link,.m4-appbar-brand:visited,
  .m4-appbar-back,.m4-appbar-back:any-link,.m4-appbar-back:visited {
    color:var(--ink)!important;-webkit-text-fill-color:currentColor;
  }
  .m4-tab,.m4-tab:any-link,.m4-tab:visited {
    color:var(--muted)!important;-webkit-text-fill-color:currentColor;
  }
  .m4-tab[aria-current="page"],.m4-tab[aria-current="page"]:any-link {
    color:var(--ink)!important;
  }
  .m4-link,.m4-link:any-link,.m4-link:visited {color:var(--ink)!important;}
  .m4-link:nth-child(1),.m4-link:nth-child(1):any-link,.m4-link:nth-child(1):visited {color:var(--ink)!important;}
  .m4-link::after {
    content:"";height:10px;width:10px;top:17px;right:17px;
    border-top:2px solid currentColor;border-right:2px solid currentColor;
    transform:none;
  }
  .m4-segment a,.m4-segment a:any-link,.m4-segment a:visited {
    color:#444840!important;
  }
  .m4-segment a:first-child,.m4-segment a:first-child:any-link {
    color:#fff!important;
  }
  .m4-sheet-utilities a,.m4-sheet-utilities a:any-link,.m4-sheet-utilities a:visited {
    color:var(--ink)!important;
  }
}
@media (max-width:860px) and (display-mode:standalone),
       (max-width:860px) and (display-mode:fullscreen) {
  /* Installed PWA does occupy the status-bar area. */
  :root { --m4-safe-top:env(safe-area-inset-top,0px); }
  .m4-appbar {
    padding-top:calc(8px + var(--m4-safe-top));
    min-height:calc(62px + var(--m4-safe-top));
  }
}
@media (max-width:600px) {
  /* Avoid condensed, colliding Cyrillic glyphs on iOS/Android font fallbacks. */
  .page-home .hero h1,
  .detail-head h1,
  .page-home .section-heading h2,
  .page-home .manifest-copy h2,
  .page-home .principles-intro h2,
  .page-home .closing-section h2,
  .page-home .anomaly-copy h2,
  .page-home .atlas-header h2,
  .experience-heading h2,
  .detail-lead h2,
  .detail-section h2 {
    letter-spacing:-.025em;
    word-spacing:.035em;
    line-height:1.12;
    overflow-wrap:break-word;
    hyphens:manual;
    -webkit-hyphens:manual;
  }
  .page-home .hero h1 {
    font-size:clamp(35px,8.8vw,50px);
    font-weight:650;
    line-height:1.14;
    letter-spacing:-.022em;
    margin-bottom:0;
  }
  .page-home .hero h1 .serif-accent {letter-spacing:-.02em;}
  .detail-head h1 {
    font-size:clamp(36px,9vw,53px);
    font-weight:630;
    line-height:1.13;
    letter-spacing:-.025em;
  }
  .page-home .section-heading h2,
  .page-home .manifest-copy h2,
  .page-home .anomaly-copy h2,
  .page-home .atlas-header h2,
  .experience-heading h2 {
    font-size:clamp(34px,8.5vw,52px);
  }
  .page-home .closing-section h2 {font-size:clamp(42px,10vw,72px);}
  .page-home .principles-intro h2 {font-size:clamp(38px,9vw,58px);}
  .detail-head h1 em,.experience-heading h2 em,.page-home .hero h1 em {
    letter-spacing:-.018em;
  }
  .detail-head {padding-top:18px;}
  .page-home .hero-content {padding-top:22px;}
  .m4-appbar-label strong {letter-spacing:0;font-weight:700;}
}

/* iOS Data Detectors and visited-link colors must not restyle editorial UI. */
@media(max-width:860px){
  a[x-apple-data-detectors],
  a[href^="tel:"],a[href^="mailto:"] {
    color:inherit!important;
    text-decoration:none!important;
    -webkit-text-decoration:none!important;
    border-bottom:0;
    font:inherit;
  }
  .page-home .hero-actions a,
  .detail-head .pill-button,
  .site-footer a {
    text-decoration:none!important;
    -webkit-text-decoration:none!important;
  }
}


/* V4.2 / iOS: pin the selected tab's liquid capsule to the icon's actual centre.
   The previous :before had no horizontal anchor; the old keyframes also
   animated transform independently, causing a jump on WebKit. */
@media(max-width:860px) {
  .m4-tab {
    isolation:isolate;
    -webkit-appearance:none;
    appearance:none;
  }
  .m4-tab[aria-current="page"]::before,
  .m4-tab[aria-expanded="true"]::before {
    left:50%;
    top:4px;
    width:44px;
    height:32px;
    z-index:0;
    pointer-events:none;
    transform:translateX(-50%);
    transform-origin:50% 50%;
    animation:m4-pill-morph-centered 7s ease-in-out infinite alternate;
  }
  .m4-tab > svg,
  .m4-tab > span {
    position:relative;
    z-index:1;
  }

  /* These are buttons, not hyperlinks. iOS native button tint is blue
     unless the site explicitly supplies its own text color. */
  .anomaly-modes .mood-button {
    -webkit-appearance:none;
    appearance:none;
    color:#30352f!important;
    -webkit-text-fill-color:currentColor;
    font-family:inherit;
    text-decoration:none!important;
    -webkit-text-decoration:none!important;
    -webkit-tap-highlight-color:transparent;
  }
  .anomaly-modes .mood-button span {
    color:#8a6877!important;
    -webkit-text-fill-color:currentColor;
    font-variant-emoji:text;
  }
  .anomaly-modes .mood-button:focus-visible {
    outline:2px solid #8a6877;
    outline-offset:3px;
  }
}
@keyframes m4-pill-morph-centered {
  from {
    border-radius:45% 54% 40% 56%/55% 48% 52% 45%;
    transform:translateX(-50%) rotate(-2deg);
  }
  to {
    border-radius:33% 64% 46% 62%/61% 37% 63% 43%;
    transform:translateX(-50%) rotate(3deg);
  }
}
/* Animate neither the capsule nor labels when the visitor wants quiet UI. */
html[data-motion="off"] .m4-tab[aria-current="page"]::before,
html[data-motion="off"] .m4-tab[aria-expanded="true"]::before {
  animation:none!important;
  transform:translateX(-50%)!important;
}
@media(prefers-reduced-motion:reduce) {
  .m4-tab[aria-current="page"]::before,
  .m4-tab[aria-expanded="true"]::before {
    animation:none!important;
    transform:translateX(-50%)!important;
  }
}