/* ============================================================
   MOBILE FLOW — vertical experience for phones / portrait.
   Loaded only when (max-width:820px) or (orientation:portrait),
   so it never blocks or affects the desktop cinematic stage.
   ============================================================ */

/* hide the fixed cinematic stage + scroll spacer + desktop scroll-hints on mobile */
.viewport,.spacer,.scroll-progress,#mmHintArrow,#mmHintText,.mm-hint-arrow,.mm-hint-text{display:none!important}
html,body{height:auto;overflow-x:hidden}
body{overflow-y:auto}

/* mobile container (hidden by default in style.css; shown here) */
#mobile{display:block;position:relative;z-index:2;background:#0d0f10;color:#faf2e3;font-family:'Manrope',sans-serif;-webkit-text-size-adjust:100%}

/* ---- header: swap desktop links for a hamburger ---- */
.menu{background:linear-gradient(180deg,rgba(13,15,16,.95),rgba(13,15,16,0))}
.menu .links{display:none!important}
.mob-burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;background:none;border:none;cursor:pointer;padding:10px;margin-left:auto}
.mob-burger span{display:block;height:2px;width:100%;background:#faf2e3;border-radius:2px;transition:.25s}
.mob-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.mob-burger.open span:nth-child(2){opacity:0}
.mob-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mob-panel{position:fixed;top:0;right:0;bottom:0;width:min(80vw,320px);z-index:9600;background:#12161a;transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;padding:82px 26px 26px;box-shadow:-20px 0 60px rgba(0,0,0,.55)}
.mob-panel.open{transform:translateX(0)}
.mob-panel a{font-family:'Marcellus SC',serif;font-size:22px;letter-spacing:.04em;color:#faf2e3;padding:15px 0;border-bottom:1px solid rgba(250,242,227,.08);cursor:pointer}
.mob-panel a:active{color:#C8923C}
.mob-langs{display:flex;gap:8px;margin-top:24px}
.mob-langs button{flex:1;padding:10px 0;background:#1a1f24;border:1px solid #2a3138;border-radius:6px;color:#8a949c;font-family:'Manrope',sans-serif;font-weight:700;font-size:12px;cursor:pointer}
.mob-langs button.on{background:#9BC4B4;border-color:#9BC4B4;color:#10201c}
.mob-scrim{position:fixed;inset:0;z-index:9550;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:.3s}
.mob-scrim.open{opacity:1;pointer-events:auto}

/* ---- hero ---- */
.mh-hero{position:relative;min-height:90vh;min-height:90svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow:hidden;padding:0 26px}
.mh-hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.mh-hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(13,15,16,.4),rgba(13,15,16,.35) 42%,rgba(13,15,16,.9))}
.mh-hero-in{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:12px}
.mh-hero-in img{width:92px;height:auto;filter:drop-shadow(0 2px 14px rgba(0,0,0,.55))}
.mh-eyebrow{font-family:'Manrope',sans-serif;font-weight:600;font-size:12px;letter-spacing:.34em;color:#faf2e3;opacity:.85}
.mh-hero-in h1{font-family:'Marcellus SC',serif;font-weight:400;font-size:clamp(34px,10vw,52px);color:#fff;line-height:1.05;margin:0}
.mh-role{font-family:'Caveat',cursive;font-size:27px;color:#9BC4B4;line-height:1}
.mh-loc{font-family:'Manrope',sans-serif;font-size:13px;letter-spacing:.06em;color:#c9bfae;opacity:.8}
.mh-cue{position:absolute;bottom:24px;z-index:2;font-family:'Manrope',sans-serif;font-size:11px;letter-spacing:.22em;color:#faf2e3;opacity:.7;animation:mhBob 2s ease-in-out infinite}
@keyframes mhBob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@media (prefers-reduced-motion:reduce){.mh-cue{animation:none}}

/* ---- sections ---- */
.mh-sec{padding:60px 26px;max-width:640px;margin:0 auto;border-top:1px solid rgba(250,242,227,.06)}
.mh-k{font-family:'Manrope',sans-serif;font-weight:700;font-size:12px;letter-spacing:.28em;color:#C8923C;margin-bottom:10px}
.mh-lead{font-family:'Caveat',cursive;font-size:42px;color:#9BC4B4;line-height:1;margin-bottom:18px}
.mh-sub{font-family:'Caveat',cursive;font-size:30px;color:#9BC4B4;margin:28px 0 10px}
.mh-p{font-family:'Manrope',sans-serif;font-size:16px;line-height:1.7;color:#d8cfc0;white-space:pre-line;margin-bottom:16px}
.mh-list{font-family:'Manrope',sans-serif;font-size:15px;line-height:2;color:#d8cfc0;white-space:pre-line}
.mh-quote{font-family:'Caveat',cursive;font-size:25px;line-height:1.35;color:#e9dfce;border-left:2px solid #C8923C;padding-left:16px;margin:18px 0}

/* ---- work / project cards ---- */
.mh-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:24px 0 8px}
.mh-card{position:relative;border-radius:8px;overflow:hidden;background:#161a1e;border:1px solid rgba(250,242,227,.08);cursor:pointer;aspect-ratio:4/3}
.mh-card img{width:100%;height:100%;object-fit:cover;display:block}
.mh-card .cap{position:absolute;left:0;right:0;bottom:0;padding:18px 10px 8px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.82));font-family:'Manrope',sans-serif;font-weight:600;font-size:12px;color:#fff}
.mh-btn{display:block;width:100%;margin-top:14px;padding:15px 26px;background:#C8923C;color:#241a0b;font-family:'Manrope',sans-serif;font-weight:700;font-size:14px;letter-spacing:.04em;border:none;border-radius:999px;cursor:pointer;text-align:center}
.mh-btn:active{background:#b3812f}
.mh-hint{font-family:'Manrope',sans-serif;font-size:12px;color:#6b7278;text-align:center;margin-top:12px}

/* ---- contact ---- */
.mh-contact{text-align:center}
.mh-contact .ps{font-family:'Special Elite',monospace;font-size:14px;letter-spacing:.2em;color:#C8923C}
.mh-contact .big{font-family:'Special Elite',monospace;font-size:25px;line-height:1.35;color:#fff;margin:12px 0 24px;white-space:pre-line}
.mh-contact a{display:inline-block;font-family:'Manrope',sans-serif;font-size:16px;color:#9BC4B4;padding:11px 20px;border:1px solid rgba(155,196,180,.3);border-radius:999px;margin:6px}
.mh-contact a:active{border-color:#9BC4B4}
.mh-foot{font-family:'Manrope',sans-serif;font-size:12px;color:#6b7278;padding:28px 26px 42px;text-align:center}

/* ---- Mac interface sits above the mobile flow when booted ---- */
.mac-os{z-index:9500}
/* menu bar: File/Edit/View/Special are decorative — hide them + the clock on
   narrow screens so the ⏏ Exit button is always reachable (else it overflows
   off-screen on ~375px and the user is trapped in the Mac). */
.mac-menubar [data-macmenu]{display:none!important}
.mac-menu-clock{display:none!important}
.mac-menu-exit{font-size:13px;padding:0 12px}