/* chris-weber.org Studio: shared styles for the landing and the interim worlds */
@font-face{font-family:'Cormorant Garamond';src:url('/fonts/CormorantGaramond-Light.woff') format('woff');font-weight:300;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url('/fonts/CormorantGaramond-Medium.woff') format('woff');font-weight:500;font-display:swap}
@font-face{font-family:Jost;src:url('/fonts/Jost-Light.woff') format('woff');font-weight:300;font-display:swap}
@font-face{font-family:Jost;src:url('/fonts/Jost-Regular.woff') format('woff');font-weight:400;font-display:swap}
@font-face{font-family:Jost;src:url('/fonts/Jost-Medium.woff') format('woff');font-weight:500;font-display:swap}
:root{
  --p900:#1f1230;--p800:#341f4d;--p700:#4d2f70;--p300:#c9a9dd;--p200:#e3d1f0;--p100:#f2e8fa;
  --glass:rgba(31,18,48,.32);--edge:rgba(255,255,255,.16);
  --ease:cubic-bezier(.2,.8,.2,1);--t-open:340ms;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{font-family:Jost,sans-serif;background:var(--p900);color:#fff;-webkit-font-smoothing:antialiased}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--p200);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* the world: the same swirl and spin as the homepage */
.world{position:fixed;inset:0;overflow:hidden;z-index:0}
.swirl{position:absolute;top:50%;left:50%;width:150vmax;height:150vmax;transform:translate(-50%,-50%);background:url('/img/bg/spiral-low.jpg') center/cover;animation:spin 87s linear infinite;backface-visibility:hidden}
.shade{position:absolute;inset:0;background:linear-gradient(rgba(31,18,48,.5),rgba(52,31,77,.68))}
.still .swirl{animation-play-state:paused}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.glass{background:var(--glass);-webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%);border:1px solid var(--edge);box-shadow:0 10px 36px rgba(20,10,34,.38)}

/* landing */
.stage{position:relative;z-index:1;min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:76px 16px 84px}
.land{position:relative;width:min(820px,100%);border-radius:22px;padding:clamp(30px,5vw,56px) clamp(20px,5vw,56px) clamp(24px,3.6vw,40px);text-align:center;transition:transform var(--t-open) var(--ease),opacity var(--t-open) var(--ease),filter var(--t-open) var(--ease)}
.land.away{transform:scale(.96);opacity:0;filter:blur(6px);pointer-events:none}
.eyebrow{margin:0;font-size:.78rem;letter-spacing:.32em;text-transform:uppercase;color:var(--p100)}
.land h1{font:300 clamp(3rem,7.6vw,5.8rem)/1 'Cormorant Garamond',serif;margin:.16em 0 .14em}
.land h1 i{font-style:normal;color:var(--p200)}
.lede{text-wrap:balance;margin:0 auto 1.9em;max-width:40ch;font-weight:300;font-size:clamp(1.04rem,1.6vw,1.16rem);line-height:1.6;color:#f1e9f9}
.doors{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,2vw,18px)}
.door{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;padding:22px 16px 20px;border:1px solid rgba(255,255,255,.85);background:rgba(255,255,255,.04);text-decoration:none;color:#fff;transition:background .3s,color .3s,transform .3s var(--ease),box-shadow .3s;min-height:44px;-webkit-tap-highlight-color:transparent}
.door:hover{background:#fff;color:var(--p700);transform:translateY(-4px);box-shadow:0 10px 26px rgba(31,18,48,.4)}
.door:active{transform:translateY(-1px) scale(.985);transition-duration:60ms}
.door .txt{display:contents}
.door b{font-weight:400;font-size:1.12rem;letter-spacing:.05em}
.door small{font-size:.86rem;line-height:1.4;color:inherit;opacity:.88;text-wrap:balance}
.door .last{position:absolute;top:10px;right:12px;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;padding:3px 8px;border-radius:999px;background:rgba(227,209,240,.18);border:1px solid rgba(227,209,240,.4);color:var(--p100)}
.door .last[hidden]{display:none}
.door:hover .last{background:var(--p100);color:var(--p700);border-color:var(--p300)}
.mini{width:124px;height:78px;flex:none}
.mini svg{width:100%;height:100%;overflow:visible}
.mini .s{stroke:currentColor;fill:none;stroke-width:1.3}
.mini .f{fill:currentColor;opacity:.22}
.mini .win,.mini .ph1,.mini .ph2{transition:transform .45s var(--ease);transform-origin:50% 100%}
.door:hover .mini .win,.door.hint .mini .win{transform:translate(6px,-4px)}
.door:hover .mini .ph1,.door.hint .mini .ph1{transform:translateX(-6px) rotate(-3deg)}
.door:hover .mini .ph2,.door.hint .mini .ph2{transform:translateX(10px) rotate(4deg)}
.foot{margin:1.4em 0 0;font-size:.88rem;color:var(--p100)}
.foot a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;color:#fff;text-underline-offset:4px;text-decoration-thickness:1px}

/* pills: the way back (top left) and Pause motion (bottom left, same as the homepage) */
.pill{position:fixed;z-index:30;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--edge);background:rgba(31,18,48,.42);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:.88rem;letter-spacing:.05em;text-decoration:none;color:#fff;transition:opacity .9s ease,background .2s}
.pill:hover{background:rgba(31,18,48,.62)}
.pill svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.toprac{top:16px;left:16px}
.motion{bottom:16px;left:16px}
.motion[hidden]{display:none}
.motion.rest{opacity:.55}
.motion:hover,.motion:focus-visible{opacity:1}
.motion .mg{display:none;fill:#fff;stroke:none}
.motion[aria-pressed="true"] .mp{display:none}.motion[aria-pressed="true"] .mg{display:block}
.leaving .toprac,.leaving .motion{visibility:hidden}

/* the hand-off: a glass layer opens out of the door (clip-path keeps edges crisp and can reverse mid-way) */
.portal{position:fixed;z-index:20;inset:0;pointer-events:none;opacity:0;background:rgba(52,31,77,.38);-webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%);clip-path:inset(50% 50% 50% 50% round 0);will-change:clip-path}
.portal.run{transition:clip-path var(--t-open) var(--ease),opacity 160ms ease}
.portal:after{content:"";position:absolute;inset:0;clip-path:inherit;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}

/* interim worlds (/studio/web/, /studio/apps/): a top bar and a plain list until the desktop and phones are built */
.wbar{position:fixed;z-index:10;top:0;left:0;right:0;height:56px;display:flex;align-items:center;gap:12px;padding:0 12px 0 18px;background:rgba(31,18,48,.38);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid var(--edge)}
.wbar .brand{font:500 1.18rem 'Cormorant Garamond',serif;text-decoration:none;display:inline-flex;align-items:baseline;padding:12px 0}
.wbar .brand span{font:300 .78rem Jost,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--p100);margin-left:8px}
.wbar .sp{flex:1}
.wbar .tostudio{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:10px;border:1px solid var(--edge);background:rgba(255,255,255,.06);text-decoration:none}
.wbar .tostudio:hover{background:rgba(255,255,255,.12)}
.wbar .tostudio svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.wmain{position:relative;z-index:1;min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:88px 16px 84px}
.wbox{width:min(720px,100%);border-radius:22px;padding:clamp(26px,4vw,44px) clamp(20px,4vw,44px) clamp(20px,3vw,32px)}
.wbox h1{font:300 clamp(2.4rem,5vw,3.6rem)/1.05 'Cormorant Garamond',serif;margin:0 0 .25em}
.wbox h1:focus{outline:none}
/* headings that only scripts move focus to (tabindex -1, never reached by Tab) show no ring */
h1[tabindex="-1"]:focus{outline:none}
.wbox p{margin:0 0 1.2em;font-weight:300;line-height:1.6;color:#f1e9f9}
.plist{margin:0;padding:0;list-style:none;border-top:1px solid var(--edge)}
.plist li{border-bottom:1px solid var(--edge)}
.plist a,.plist .soon{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:56px;padding:6px 4px;text-decoration:none}
.plist a:hover{background:rgba(255,255,255,.05)}
.plist b{font-weight:400}
.plist span{color:var(--p100);font-size:.84rem;text-align:right}
.note{margin:1.2em 0 0!important;font-size:.84rem!important;color:var(--p100)!important}
.arrive .wmain,.arrive .wbar{opacity:0;transform:translateY(8px)}
.arrived .wmain,.arrived .wbar{transition:opacity 220ms var(--ease),transform 220ms var(--ease)}

/* phones */
@media (max-width:1100px){.land{width:min(760px,100%)}}
@media (max-width:620px){
  .stage{place-items:start center}
  .land{padding:28px 18px 18px;border-radius:20px}
  .land h1{font-size:3.1rem}
  .lede{margin-bottom:1.4em}
  .doors{grid-template-columns:1fr;gap:10px}
  .door{flex-direction:row;text-align:left;gap:14px;padding:12px 16px 12px 12px}
  .door:hover{transform:none}
  .door .txt{display:flex;flex-direction:column;gap:2px}
  .mini{width:84px;height:56px}
  .door .last{top:8px;right:10px}
  .wbar .brand span{display:none}
  .plist a{flex-direction:column;align-items:flex-start;gap:2px;justify-content:center}
  .plist span{text-align:left}
}

/* reduced motion: no spin, no grow, no movement; a quick fade */
@media (prefers-reduced-motion:reduce){
  .swirl{animation:none}
  .motion{display:none}
  .land,.door,.mini .win,.mini .ph1,.mini .ph2{transition-duration:120ms}
  .door:hover,.door:active{transform:none}
  .land.away{transform:none;filter:none}
  .arrive .wmain,.arrive .wbar{transform:none}
  .arrived .wmain,.arrived .wbar{transition-duration:120ms}
}
/* the glass a world starts under when it was opened from a landing door */
.arrive .portal{opacity:1;clip-path:none}
.arrived .portal{opacity:0;clip-path:none;transition:opacity 220ms ease}
/* coming back from a world: the landing starts under full glass, then it closes into the door */
.returning .portal{opacity:1;clip-path:none}
.returning .land{opacity:0}

/* narrow phones: Pause motion rests below the card, in the space kept under it, so it never sits on the card */
@media (max-width:480px){body:has(>.motion){position:relative}.motion{position:absolute}}