/* Site chrome (header, menu, footer) for pages that host the memory-viewer bundle.
   The full template stylesheets carry global element rules and class names that collide
   with the bundle's own UI, so this file scopes every rule to the chrome elements. */

.site-header,.navigation,.nav-backdrop,#menu-atmosphere,.social-links,.page-join{
  --black:#030303;--red100:#E61E22;--red60:rgb(230 30 34 / 60%);--red20:rgb(230 30 34 / 20%);
  --serif:"GT Sectra",Georgia,serif;--mono:"Favorit Mono","IBM Plex Mono",monospace;
  --label-sm:10px;--button-text-size:14px;--button-text-spacing:.035em;
  font-family:var(--serif);-webkit-font-smoothing:antialiased;font-synthesis:none;
}
.svg-library{position:absolute;width:0;height:0;overflow:hidden}
.site-header .hidden,.nav-backdrop.hidden{display:none!important}

/* Element defaults the template relied on, limited to the chrome. */
.site-header button,.navigation button{font:inherit;color:inherit;cursor:pointer;background:none;padding:0;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.site-header button:not(.icon-button),.navigation button{border:0}
.site-header a,.navigation a,.social-links a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.site-header svg,.navigation svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.site-header :is(a,button),.navigation :is(a,button),.social-links a{outline:none;box-shadow:none}
.site-header :is(a,button):focus-visible,.navigation :is(a,button):focus-visible,.social-links a:focus-visible{text-decoration:none;background-color:rgb(230 30 34 / 16%)}
body.menu-open .navigation :is(a,button):focus-visible{background-color:rgb(0 0 0 / 14%)}

/* Header */
.site-header{position:fixed;top:38px;left:40px;right:40px;height:48px;display:flex;align-items:center;justify-content:space-between;z-index:30;pointer-events:none;color:var(--red100)}
.site-header>*{pointer-events:auto}
.header-left{display:flex;align-items:center;gap:12px}
.brand{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;color:var(--red100);transition:color .3s}
.brand:hover{color:var(--red60)}
.brand svg{display:block;width:81px;height:12px;fill:currentColor;stroke:none}
body.menu-story-open .brand{color:#080404}
.site-header .icon-button{width:48px;height:48px;min-width:48px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--red20);border-radius:50%;background:transparent;transition:background .2s,border-color .2s,color .2s}
.site-header .icon-button svg{width:16px;height:16px;stroke-width:3}
#menu-toggle,#back-button{--menu-ink:var(--red100);--menu-stroke:var(--red20);--menu-hover-stroke:var(--red60);color:var(--menu-ink);border-color:var(--menu-stroke);background:transparent;transition:color .6s ease,border-color .6s ease}
#menu-toggle:is(:hover,:focus-visible,:active),#back-button:is(:hover,:focus-visible,:active){color:var(--menu-ink);border-color:var(--menu-hover-stroke);background:transparent}
#menu-toggle:focus-visible,#back-button:focus-visible{background-color:rgb(230 30 34 / 16%)}
body.menu-open #menu-toggle,body.menu-open #back-button{--menu-ink:#000;--menu-stroke:rgb(0 0 0 / 20%);--menu-hover-stroke:rgb(0 0 0 / 60%)}
body.menu-open #menu-toggle:focus-visible,body.menu-open #back-button:focus-visible{background-color:rgb(0 0 0 / 14%)}
body.menu-open #back-button{opacity:0;pointer-events:none;visibility:hidden}
:is(.site-header .join-pill,.page-join.join-pill){position:relative;isolation:isolate;overflow:hidden;height:48px;min-height:48px;min-width:124px;width:max-content;display:inline-flex;align-items:center;justify-content:center;gap:14px;padding:0 22px 4px;border-radius:40px;background:var(--red100);color:var(--black);text-shadow:none;text-transform:none;box-shadow:none;font:italic 400 var(--button-text-size)/1.2 var(--serif);letter-spacing:var(--button-text-spacing);flex-shrink:0;transition:opacity .2s ease,visibility .2s,transform .25s}
:is(.site-header .join-pill,.page-join.join-pill):hover{transform:none}
:is(.site-header .join-pill,.page-join.join-pill):active{transform:scale(.975)}
:is(.site-header .join-pill,.page-join.join-pill)>svg{display:block;flex:0 0 54px;width:54px;height:8px;fill:currentColor;stroke:none;filter:none;transform:translateY(2px)}
:is(.site-header .join-pill,.page-join.join-pill)[data-context-hidden="true"]{opacity:0;visibility:hidden;pointer-events:none}
.flow-button-canvas{position:absolute;inset:0;z-index:-1;display:block;width:100%;height:100%;border-radius:inherit;pointer-events:none}

/* Menu. The atmosphere and backdrop sit above the bundle's own layers (which reach z-index 20). */
#menu-atmosphere{position:fixed;inset:0;width:100%;height:100%;z-index:21;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .8s ease,visibility 0s .8s}
#menu-atmosphere:not(.is-shader){background:radial-gradient(ellipse at 0 18%,#e61e22f5,transparent 70%),radial-gradient(ellipse at 0 100%,#92929288,transparent 55%);background-size:100% 100%;background-repeat:no-repeat;transition:opacity .8s ease,visibility 0s .8s,background-size 1.4s cubic-bezier(.2,.7,.2,1)}
#menu-atmosphere.is-shader{background:none}
body.menu-open #menu-atmosphere{opacity:1;visibility:visible;transition:opacity .8s ease,visibility 0s}
body.menu-open #menu-atmosphere:not(.is-shader){transition:opacity .8s ease,visibility 0s,background-size 1.4s cubic-bezier(.2,.7,.2,1)}
body.menu-story-open #menu-atmosphere:not(.is-shader){background-size:380% 130%}
.nav-backdrop{position:fixed;inset:0;z-index:21;background:none;cursor:default}
.navigation{position:fixed;inset:0;z-index:22;width:100%;display:block;padding:0;border:0;background:none;color:var(--red100);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s,visibility 0s .6s}
.navigation.open{opacity:1;visibility:visible;transition:opacity .7s .1s,visibility 0s}
body.menu-open .navigation{color:#160607}
.nav-index{position:absolute;top:clamp(126px,20vh,200px);left:40px;width:min(360px,calc(100vw - 80px));display:flex;align-items:flex-start;flex-direction:column;opacity:0;transform:translateY(14px);visibility:hidden;pointer-events:none;transition:opacity .35s,transform .65s cubic-bezier(.2,.8,.2,1),visibility 0s .65s}
.navigation.open:not(.reading-story) .nav-index{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;transition-delay:.3s,.18s,0s}
.nav-index>.eyebrow{display:block;margin:0 0 10px;color:inherit;font:400 var(--label-sm)/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.nav-index>a{display:flex;align-items:center;min-height:48px;padding:0;font:italic 400 clamp(30px,3vw,42px)/1 var(--serif);letter-spacing:-.025em;transform:translateX(-10px);opacity:0;transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .4s,color .25s}
.navigation.open:not(.reading-story) .nav-index>a{opacity:1;transform:translateX(0)}
.navigation.open:not(.reading-story) .nav-index>a:nth-of-type(1){transition-delay:.22s}
.navigation.open:not(.reading-story) .nav-index>a:nth-of-type(2){transition-delay:.29s}
.navigation.open:not(.reading-story) .nav-index>a:nth-of-type(3){transition-delay:.36s}
.navigation.open:not(.reading-story) .nav-index>a:nth-of-type(4){transition-delay:.43s}
.navigation.open:not(.reading-story) .nav-index>a:nth-of-type(5){transition-delay:.5s}
.navigation.open:not(.reading-story) .nav-index>a:hover{transform:translateX(6px);color:#000;transition-delay:0s}
.navigation.reading-story .nav-index{transform:translateY(-12px)}
.menu-story{position:absolute;left:clamp(40px,10vw,180px);top:clamp(126px,23vh,260px);bottom:70px;width:min(660px,64vw);overflow-y:auto;scrollbar-width:thin;scrollbar-color:#0003 transparent;padding:8px 8px 36px;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(25px);filter:blur(6px);transition:opacity .32s,transform .65s,filter .5s,visibility 0s .65s;color:#130706}
.navigation.open.reading-story .menu-story{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);filter:blur(0);transition:opacity .9s .3s,transform 1.1s .25s cubic-bezier(.16,1,.3,1),filter .9s .25s,visibility 0s}
.menu-story-topline{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:34px}
.menu-story .eyebrow{display:block;color:#0009;font:400 var(--label-sm)/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.menu-story h2{margin:0;max-width:650px;font:400 clamp(48px,5.8vw,88px)/.98 var(--serif);letter-spacing:-.045em;color:#170807bf}
.menu-story h2 i{font-style:italic;font-weight:400;color:#080404}
.menu-story h2:focus{outline:none}
.menu-story>p{max-width:480px;margin:30px 0 0;font:normal 400 clamp(21px,2vw,27px)/1.3 var(--serif);color:rgb(16 5 5 / 60%);text-transform:lowercase}
.menu-story>p.keep-case{text-transform:none}
.menu-story>p :is(i,em){font-style:italic;font-weight:400;color:rgb(16 5 5 / 100%)}
.menu-story .menu-story-action{display:inline-flex;align-items:center;gap:10px;min-height:48px;margin-top:32px;padding:0 0 4px;color:#080404;font:italic 400 var(--button-text-size)/1.2 var(--serif);letter-spacing:var(--button-text-spacing);text-transform:lowercase;text-decoration:underline;text-underline-offset:7px;text-decoration-color:#0003;transition:text-decoration-color .3s}
.menu-story .menu-story-action:hover{color:#080404;text-decoration-color:#0009}

/* Footer */
.social-links{position:fixed;right:28px;bottom:20px;z-index:25;display:flex;align-items:center;gap:0;color:var(--red100);transition:color .9s}
.social-links a{height:48px;width:48px;display:grid;place-items:center;border-radius:50%;border:1px solid transparent;transition:border-color .25s}
.social-links a:hover{border-color:var(--red60)}
.social-links svg{display:block;width:16px;height:16px;fill:currentColor;stroke:none}
.social-links .social-outline{fill:none;stroke:currentColor;stroke-width:3}
body.menu-story-open .social-links{color:#080404}
body.menu-story-open .social-links a:hover{border-color:#0009}

@media (max-width:750px){
  .site-header{top:20px;left:20px;right:20px}
  .header-left{gap:8px}
  .brand svg{width:72px;height:10.6667px}
  :is(.site-header .join-pill,.page-join.join-pill){min-width:108px;padding:0 15px 4px;gap:9px}
  .nav-index{left:24px;top:132px;width:calc(100vw - 48px)}
  .nav-index>a{font-size:34px}
  .menu-story{left:20px;width:calc(100vw - 40px);top:122px;bottom:80px}
  .menu-story-topline{margin-bottom:25px}
  .menu-story h2{font-size:clamp(43px,9vw,66px)}
  .menu-story>p{font-size:23px;max-width:440px;margin-top:24px}
  .social-links{right:8px;bottom:12px}
  /* The viewer's own bottom hint spans the width on phones; keep it legible. */
  body[data-page="memory"] .social-links{display:none}
}
@media (max-width:380px){
  .brand svg{width:60px;height:auto}
  :is(.site-header .join-pill,.page-join.join-pill){min-width:94px;padding:0 12px 4px}
  .header-left{gap:4px}
}
@media (max-height:600px) and (min-width:751px){
  .menu-story{top:108px;bottom:30px}
}
@media (prefers-reduced-motion:reduce){
  :is(.site-header .join-pill,.page-join.join-pill),.brand,.site-header .icon-button,.navigation,.nav-index,.nav-index>a,.menu-story,.social-links,#menu-atmosphere{transition:none;filter:none}
}

/* The menu is one isolated layer; only the scene remains behind it. */
body.menu-open > main,
body.menu-open #app > :not(#memory-canvas),
body.menu-open .site-header .brand,
body.menu-open .page-join { visibility:hidden!important; pointer-events:none!important; }
body.menu-open .nav-backdrop { z-index:20; background:rgb(3 3 3 / 86%); }
body.menu-open .navigation :is(a,button):focus-visible { outline:2px solid currentColor; outline-offset:3px; }
.menu-footer { position:absolute; left:40px; right:40px; bottom:max(24px,env(safe-area-inset-bottom)); display:flex; align-items:center; justify-content:space-between; gap:16px; pointer-events:auto; }
.navigation .social-links { position:static; display:flex; color:inherit; }
.menu-legal { display:flex; gap:24px; }
.menu-legal a { display:flex; align-items:center; min-height:44px; font:400 10px/1.5 var(--mono); letter-spacing:.06em; text-transform:uppercase; }
.navigation.reading-story .menu-footer { visibility:hidden; pointer-events:none; }
.menu-story { bottom:40px; }

/* Conversion visibility follows the active scene. */
.page-join[hidden], .orb-leaving .page-join, .orb-arriving .page-join { display:none!important; }
.page-join:focus-visible { outline:2px solid #E61E22; outline-offset:4px; }
.journey-skip { position:fixed; top:100px; right:40px; z-index:5; min-height:44px; padding:0 8px; font:400 10px/1.5 var(--mono); letter-spacing:.06em; text-transform:uppercase; }
.journey-skip[hidden] { display:none; }
#profile-page .profile-explorer { bottom:90px; }
@media (max-width:750px) {
  .menu-footer { left:24px; right:24px; bottom:max(12px,env(safe-area-inset-bottom)); flex-direction:column; align-items:flex-start; gap:0; }
  .menu-legal { gap:20px; }
  .menu-legal a { font-size:9px; }
  .menu-story { bottom:24px; }
  .journey-skip { top:80px; right:20px; }
  #profile-page .profile-view-controls { bottom:78px; }
  #profile-page .profile-explorer { bottom:140px; }
}
@media (max-height:500px) {
  .site-header { top:12px; }
  .navigation .nav-index { top:78px; bottom:100px; overflow-y:auto; }
  .navigation .nav-index>a { font-size:28px; min-height:40px; flex-shrink:0; }
  .navigation .nav-index>.eyebrow { margin-bottom:4px; }
  .menu-story { top:78px; bottom:16px; }
  .menu-story-topline { margin-bottom:16px; }
  .journey-skip { top:68px; }
}
/* Footer links remain legible across the dark side of the backdrop. */
.navigation .menu-footer { color:#e7d8d6; }
.navigation .menu-footer a:hover { color:#fff; }
.navigation [hidden] { display:none!important; }
body .navigation .social-links { display:flex; }
@media (max-height:500px) and (min-width:500px) and (max-width:750px) {
  #profile-page .profile-view-controls { bottom:16px; }
  #profile-page .profile-explorer { bottom:80px; }
}