/* SPITAVIOUS // LOST MENU — a full-screen, motion-led personal hub.
   Design: approved dark-green Persona x analog-horror concept board. */
:root {
  color-scheme: dark;
  --void: #041305;
  --moss: #113810;
  --rot: #2A5224;
  --forest: #44683E;
  --sage: #7E917F;
  --signal: #D3CF09;
  --paper: #CFD5C9;
  --paper-lit: #D7E8A3;
  --menu: 'Barlow Condensed',Impact,'Arial Narrow',sans-serif;
  --dirt: 'Rubik Dirt',Impact,'Arial Black',sans-serif;
  --mono: 'IBM Plex Mono',Consolas,monospace;
  --grain: .21;
}
*,*::before,*::after { box-sizing:border-box }
html { min-height:100%; background:var(--void); scroll-behavior:smooth }
body { margin:0; min-width:320px; min-height:100%; overflow:hidden; background:var(--void); font-family:var(--mono); color:var(--paper); -webkit-font-smoothing:antialiased }
button,a { -webkit-tap-highlight-color:transparent }
button { font:inherit }
button:focus-visible,a:focus-visible { outline:3px dashed var(--paper-lit); outline-offset:6px }
a { color:inherit }
::selection { background:var(--paper-lit); color:var(--void) }
[hidden] { display:none!important }
.visually-hidden { position:absolute!important; width:1px;height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap;clip-path:inset(50%); }
.skip-link { position:fixed;z-index:9999; left:1rem;top:1rem; padding:.7rem 1rem;background:var(--paper-lit);color:var(--void);transform:translateY(-160%);font-weight:700 }
.skip-link:focus { transform:translateY(0) }
.site-grain,.site-scanlines,.screen-vignette { position:fixed;inset:0;pointer-events:none;z-index:101 }
.site-grain { opacity:var(--grain);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.95'/%3E%3C/svg%3E"); background-size:192px 192px;mix-blend-mode:screen }
.site-scanlines { opacity:.16;background:repeating-linear-gradient(180deg,transparent 0,transparent 3px,#000 3px,#000 4px);mix-blend-mode:multiply }
.screen-vignette { opacity:.7;z-index:100;background:radial-gradient(ellipse at 50% 45%,transparent 38%,rgba(0,0,0,.59) 100%) }

.app-frame { width:calc(100% - 20px);height:calc(100vh - 20px);height:calc(100svh - 20px);margin:10px;position:relative;isolation:isolate;overflow:hidden;border:1px solid rgba(177,198,168,.62);box-shadow:inset 0 0 0 1px rgba(17,56,16,.7),0 0 0 8px #010802;background:var(--void) }
.frame-ornament { position:absolute;width:34px;height:34px;z-index:80;pointer-events:none;opacity:.7 }
.frame-ornament--tl { left:9px;top:9px;border-left:2px solid var(--sage);border-top:2px solid var(--sage) }
.frame-ornament--br { right:9px;bottom:9px;border-right:2px solid var(--sage);border-bottom:2px solid var(--sage) }
.scene { position:absolute;inset:0;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse 60% 80% at 13% 50%,#1a3e17 0%,#0a250e 52%,transparent 90%),linear-gradient(105deg,#0d290d 0%,#031105 76%);opacity:1 }
.scene::before { content:"";position:absolute;inset:0;z-index:-1;opacity:.26;background:radial-gradient(ellipse at 58% 10%,#587950 0%,transparent 30%),radial-gradient(ellipse at 86% 64%,#244b20 0%,transparent 33%) }
.scene::after { content:"";position:absolute;inset:0;z-index:2;pointer-events:none;box-shadow:inset 0 0 85px 28px rgba(0,0,0,.55) }
.scene.is-active { animation:scene-arrive .42s ease-out both }
@keyframes scene-arrive { from{filter:brightness(.68);transform:scale(1.018)}to{filter:brightness(1);transform:scale(1)} }
.scene__environment { position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0 }
.scene__texture { position:absolute;inset:0;background:url('/lost-menu/assets/grit-tile.webp') repeat;background-size:470px 470px;opacity:.32;mix-blend-mode:screen }
.scene__crosshatch { position:absolute;inset:0;opacity:.33;background-image:linear-gradient(90deg,transparent 95%,rgba(157,186,150,.2) 95.3%,transparent 96%),linear-gradient(0deg,transparent 95%,rgba(157,186,150,.16) 95.3%,transparent 96%);background-size:134px 128px;mask-image:linear-gradient(to right,transparent 7%,transparent 27%,#000 78%) }
.scene__eye { position:absolute;right:11%;top:-6%;width:26%;opacity:.33;transform:rotate(-5deg);filter:contrast(1.6) grayscale(1) }
.scene__eye img { width:100%;height:auto }
.scene__goose { position:absolute;right:4.3%;top:32%;width:clamp(75px,8vw,145px);height:auto;opacity:.67;transform:rotate(10deg);filter:grayscale(.6) contrast(1.2) }
.scribble { position:absolute;font-family:var(--mono);font-weight:900;color:#acc5a9;line-height:1;opacity:.52;pointer-events:none;text-shadow:1px 1px #060b06;user-select:none }
.scribble--crown { left:57%;top:4%;font-size:clamp(32px,5.3vw,85px);transform:rotate(-15deg);opacity:.55 }
.scribble--x { right:9%;top:61%;font-size:clamp(70px,11vw,175px);transform:rotate(-17deg);color:#4b7b3d;opacity:.78 }
.scribble--plus { left:14%;top:15%;font-size:52px;transform:rotate(15deg) }
.scribble--dots { left:45%;top:64%;font-size:45px;letter-spacing:19px;opacity:.16;transform:rotate(17deg) }

/* ORIGINAL ARTWORK CROPPED FROM THE APPROVED DESIGN BOARD. */
.character { position:absolute;z-index:1;pointer-events:none;filter:contrast(1.22) saturate(.85) }
.character--home { left:-3%;top:-8%;height:115%;width:67%;overflow:hidden;mask-image:linear-gradient(to right,#000 0%,#000 72%,transparent 100%) }
.character--home img { position:absolute;height:100%;width:auto;max-width:none;left:0;top:0;filter:brightness(.88) contrast(1.15); transform:translate3d(var(--char-x,0px),var(--char-y,0px),0) scale(1.016);transition:transform .4s ease-out }
.character--home::after { content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 65%,#041305 100%);pointer-events:none }

/* CUT-AND-PASTED BRAND AT TOP RIGHT */
.home__heading { position:absolute;left:47.3%;right:5.6%;top:13.5%;z-index:8;transform:rotate(-5deg) }
.tiny-meta { font:700 clamp(8px,.7vw,11px)/1.2 var(--mono);letter-spacing:.2em;color:#9ab292 }
.home__lead { position:absolute;left:2%;top:-28px;opacity:.67;transform:rotate(5deg) }
.ransom-logo { margin:0;display:flex;align-items:center;letter-spacing:-.095em;white-space:nowrap;filter:drop-shadow(4px 5px 0 #061408) }
.ransom-logo span { display:inline-grid;place-items:center;position:relative;margin-left:-.025em;padding:0 .045em .04em;min-width:.42em;height:.99em;background:#afc2ae;color:#101e10;font-family:Georgia,serif;font-size:clamp(36px,5.7vw,108px);font-weight:900;line-height:1;text-shadow:1px 1px rgba(30,59,30,.25);clip-path:polygon(3% 0,98% 2%,100% 90%,93% 100%,0 96%,1% 15%);box-shadow:2px 3px #030903; transform:rotate(-3deg) translateY(3px) }
.ransom-logo span:nth-child(2n) { background:#d0d6cb;color:#152615;transform:rotate(4deg) translateY(-8px);font-style:italic }
.ransom-logo span:nth-child(3n) { background:#819a83;transform:rotate(-5deg) translateY(5px);font-style:normal }
.ransom-logo span:nth-child(5n) { background:#c9c5c5;transform:rotate(8deg) translateY(-12px) }
.ransom-logo span:nth-child(4n) { font-family:var(--menu);font-style:italic }
.ransom-logo span:first-child { font-size:clamp(44px,6.2vw,116px) }
.com-sticker { display:block;position:absolute;right:12%;top:94%;padding:.08em .36em;transform:rotate(4deg);background:#b6c4b3;color:#142214;clip-path:polygon(3% 3%,98% 0,100% 100%,1% 95%);box-shadow:3px 3px 0 #020802;font:900 clamp(19px,2.3vw,40px)/1.05 Georgia,serif;letter-spacing:.06em }

/* MAIN MENU — genuine buttons, with slanted torn highlight surfaces. */
.main-menu { position:absolute;left:50%;right:6%;top:41%;z-index:10;display:flex;flex-direction:column;gap:clamp(0px,.7vh,12px);transform:rotate(-7deg) }
.main-menu__shadow { position:absolute;font:700 10px var(--mono);letter-spacing:.25em;top:-33px;left:15%;color:#789777;opacity:.42 }
.main-menu__item { position:relative;z-index:1;display:flex;align-items:center;width:min(100%,760px);min-height:clamp(60px,11vh,112px);border:0;padding:0 .6em 0 .45em;background:transparent;color:#B9BDB8;opacity:.80;cursor:pointer;text-align:left;transform-origin:35% 50%;transition:transform .24s cubic-bezier(.2,1.35,.3,1),color .18s,opacity .18s;filter:drop-shadow(5px 6px 0 rgba(0,0,0,.55)) }
.main-menu__item::before { content:"";position:absolute;inset:7% -2% 5% 3%;z-index:-1;background:var(--paper-lit);clip-path:polygon(3% 16%,91% 0%,100% 25%,93% 91%,7% 100%,0% 80%);transform:scaleX(0);transform-origin:left;transition:transform .24s cubic-bezier(.23,.8,.2,1);filter:drop-shadow(0 0 2px #fff) }
.main-menu__item::after { content:"";position:absolute;left:12%;bottom:6px;width:65%;height:2px;opacity:.64;background:var(--sage);transform:skewX(-20deg) scaleX(.75);transform-origin:left }
.main-menu__word { font:italic 900 clamp(58px,7.7vw,150px)/.84 var(--menu);letter-spacing:-.03em;text-shadow:2px 3px 0 rgba(0,0,0,.4) }
.main-menu__arrow { width:.9em;flex:0 0 .9em;color:inherit;font-size:clamp(27px,3.1vw,56px);opacity:0;transform:translateX(-10px) scale(.8);transition:transform .24s,opacity .18s }
.main-menu__item.is-selected,.main-menu__item:focus-visible { transform:translateX(-.5%) scale(1.08);color:#0b170a;opacity:1 }
.main-menu__item.is-selected::before,.main-menu__item:focus-visible::before { transform:scaleX(1) }
.main-menu__item.is-selected::after { opacity:0 }
.main-menu__item.is-selected .main-menu__arrow,.main-menu__item:focus-visible .main-menu__arrow { opacity:1;transform:translateX(0) scale(1) }
.main-menu__item.is-selected .main-menu__word { text-shadow:none }

/* TINY HUD: readable controls without overwhelming the art. */
.screen-meta { position:absolute;z-index:11;bottom:4.5%;font:600 clamp(10px,.9vw,15px)/1.2 var(--mono);color:#c0cab9;letter-spacing:.04em;text-shadow:1px 2px #000 }
.screen-meta--left { left:2.4%;display:flex;flex-direction:column;gap:2px }
.screen-meta span { color:var(--sage) }
.control-hints { position:absolute;right:3.5%;bottom:4.5%;z-index:11;display:flex;align-items:center;justify-content:end;flex-wrap:wrap;gap:clamp(14px,1.6vw,35px);font:600 clamp(10px,.93vw,15px)/1 var(--mono);color:#c0c9bc;white-space:nowrap }
.control-hints>span { display:flex;align-items:center;gap:6px }
kbd { display:inline-flex;min-width:1.55em;min-height:1.5em;align-items:center;justify-content:center;padding:.15em .3em;border:1px solid #a7b8a1;border-radius:4px;color:#cdd8c7;background:rgba(13,39,16,.8);box-shadow:2px 2px 0 #000;font:700 .94em/1 var(--mono) }

/* INSIDE SCREENS */
.scene--inside { background:linear-gradient(108deg,#153818 0%,#071b0a 60%,#021003 100%) }
.scene--inside::before { background:radial-gradient(ellipse 45% 80% at 27% 55%,#406e3b 0%,transparent 80%);opacity:.36 }
.scene--inside .scene__crosshatch { mask-image:linear-gradient(to right,transparent 30%,#000 80%) }
.inside__header { position:absolute;left:6.4%;top:5.8%;z-index:10;max-width:55%; }
.micro-id { margin:0 0 12px;font:600 clamp(9px,.7vw,12px)/1.3 var(--mono);color:#b8c7af;letter-spacing:.08em;opacity:.9 }
.micro-id span { margin-left:2em;color:#7f987f }
.cutout-title { margin:0;display:flex;align-items:baseline;filter:drop-shadow(4px 6px 0 rgba(0,0,0,.6));transform:rotate(-4deg) }
.cutout-title span { display:block;padding:.02em .12em .1em;background:#c3c9bf;color:#132213;font:900 clamp(66px,7vw,154px)/.85 var(--dirt);letter-spacing:-.045em;clip-path:polygon(2% 2%,96% 0%,100% 97%,0% 100%) }
.cutout-title span:nth-child(2n) { background:#a1b49d;transform:rotate(4deg) translateY(4px); }
.cutout-title span:nth-child(3n) { background:#d0d2c7;transform:rotate(-2deg) translateY(-6px) }
.header-note { margin:24px 0 0 10px;font:600 clamp(8px,.8vw,13px)/1.4 var(--mono);letter-spacing:.08em;color:#9cb396;opacity:.8;transform:rotate(-3deg) }
.inside__art-wrap { position:absolute;left:2%;top:18%;bottom:-6%;width:53%;z-index:2;pointer-events:none;mask-image:linear-gradient(to right,#000 0%,#000 76%,transparent 99%) }
.inside__character { position:absolute;left:0;bottom:-5%;height:101%;max-width:none;width:auto;filter:brightness(.89) contrast(1.36) saturate(.82);transform-origin:45% 95%;animation:creep 11s ease-in-out infinite alternate }
@keyframes creep { from{transform:translateX(-1.5%) rotate(-1.2deg) scale(1.02)}to{transform:translateX(0) rotate(.5deg) scale(1.05)} }
.inside__torn-paper { position:absolute;inset:20% 7% 0 0;background:linear-gradient(115deg,transparent 65%,rgba(122,156,117,.17) 66%,transparent 71%);clip-path:polygon(2% 0,96% 0,99% 15%,92% 23%,100% 43%,89% 50%,100% 60%,93% 100%,0 100%) }
.inside__static-label { position:absolute;left:8%;bottom:10%;z-index:2;color:#becab8;font:600 clamp(8px,.8vw,12px) var(--mono);letter-spacing:.12em;transform:rotate(-9deg);opacity:.7 }
.inside__static-label span { color:var(--signal) }
.inside__options { position:absolute;right:7.5%;top:22%;width:43%;z-index:15 }
.scene__goose--right { top:39%;right:.6%;width:11%;transform:rotate(-11deg);opacity:.57 }
.scribble--stars { top:12%;right:10%;font-size:clamp(25px,3vw,56px);transform:rotate(-15deg) }
.scribble--social-x { right:1%;top:52%;font-size:120px;transform:rotate(-14deg);opacity:.24 }

/* Social rows mimic the stepped slanted panels from the approved design. */
.socials-list { display:flex;flex-direction:column;gap:clamp(4px,.7vh,11px) }
.social-row { position:relative;display:grid;grid-template-columns:clamp(29px,3.1vw,55px) 1fr 27px;gap:clamp(8px,1.3vw,22px);align-items:center;padding:0 clamp(11px,1.8vw,28px);width:100%;height:clamp(43px,6.8vh,72px);background:linear-gradient(95deg,rgba(5,21,6,.65),rgba(27,65,24,.7) 80%,transparent);color:#bbc6b8;text-decoration:none;transform:skewX(-6deg);transition:transform .25s cubic-bezier(.23,1.2,.32,1),color .18s,background .18s }
.social-row::before { content:"";position:absolute;inset:0 -4% 0 -2%;z-index:-1;background:linear-gradient(92deg,#ddebaf 0%,#d6e596 89%,#a3c072 100%);clip-path:polygon(0 17%,83% 0%,100% 19%,96% 82%,5% 100%,0 82%);transform-origin:left;transform:scaleX(0);transition:transform .23s ease-out }
.social-row::after { content:"";position:absolute;left:0;bottom:0;height:1px;width:84%;background:#386239;opacity:.75 }
.social-row>svg,.social-row>span { transform:skewX(6deg) }
.social-row .social-icon { width:100%;height:72%;max-height:43px;fill:none;filter:drop-shadow(1px 2px 0 rgba(0,0,0,.4)); }
.social-row>span:nth-of-type(1) { font:italic 900 clamp(27px,3.35vw,61px)/.9 var(--menu);letter-spacing:.008em;white-space:nowrap }
.social-row .row-arrow { font:900 clamp(16px,1.8vw,28px)/1 var(--mono);opacity:0;transform:skewX(6deg) translateX(-12px);transition:.18s }
.social-row.is-selected,.social-row:focus-visible { transform:skewX(-6deg) translateX(-12px) scale(1.035);color:#0d220d }
.social-row.is-selected::before,.social-row:focus-visible::before { transform:scaleX(1) }
.social-row.is-selected .row-arrow,.social-row:focus-visible .row-arrow { opacity:1;transform:skewX(6deg) translateX(0) }
.social-row.is-selected::after { opacity:0 }

/* CONTACT cards */
.inside__art-wrap--contact { top:20%;left:1%;width:51% }
.inside__art-wrap--contact .inside__character { height:105%;bottom:-12%;left:0 }
.scene--contact .inside__header { top:9% }
.scene--contact .inside__options { top:35%;right:6%;width:51% }
.scene--contact .cutout-title span { font-size:clamp(61px,7vw,143px) }
.contact-list { display:flex;flex-direction:column;gap:clamp(18px,3.6vh,36px) }
.email-card { position:relative;min-height:clamp(82px,11vh,136px);display:grid;align-items:center;grid-template-columns:clamp(26px,3.2vw,54px) minmax(0,1fr) clamp(43px,4.2vw,64px);gap:clamp(10px,1.5vw,22px);padding:clamp(12px,2vw,25px);color:#132713;background:#bdcbb4;clip-path:polygon(1% 7%,97% 0,100% 15%,98% 98%,3% 100%,0 86%);transform:skewX(-3deg);box-shadow:7px 9px rgba(0,0,0,.25);transition:transform .18s,background .18s }
.email-card:hover,.email-card.is-selected,.email-card:focus-within { transform:skewX(-3deg) translateX(-7px);background:#d4e4b8 }
.email-card__icon,.email-card__detail,.copy-button { transform:skewX(3deg) }
.email-card__icon svg { width:100%;height:auto;fill:none }
.email-card__detail { min-width:0;display:flex;flex-direction:column;gap:5px }
.email-card__label { color:#3c5137;font:800 clamp(9px,.9vw,13px)/1.1 var(--mono);letter-spacing:.045em }
.email-card__address { width:fit-content;max-width:100%;font:italic 800 clamp(16px,1.95vw,34px)/1 var(--menu);letter-spacing:.005em;white-space:nowrap;text-decoration:none;overflow-wrap:anywhere }
.email-card__address:hover { text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px }
.copy-button { display:grid;place-items:center;aspect-ratio:1;min-width:38px;max-width:60px;border:0;background:#0a210e;color:#c4d3bd;cursor:pointer;transition:transform .16s,background .16s }
.copy-button:hover,.copy-button:focus-visible { background:#31552b;transform:skewX(3deg) scale(1.08) }
.copy-button svg { height:60%;width:60%;fill:none }
.contact__footnote { margin:3px 0 0 10px;max-width:50ch;color:#a4b8a0;font:700 clamp(9px,.8vw,13px)/1.5 var(--mono);letter-spacing:.035em }
.contact__handwritten { position:absolute;left:11%;bottom:5%;font:italic 900 clamp(28px,4vw,68px)/1 var(--menu);transform:rotate(-14deg);color:#a4b69f;text-shadow:3px 3px 0 #09210b;opacity:.8 }
.scribble--contact-lines { right:2%;bottom:22%;font-size:80px;color:var(--sage);transform:rotate(23deg) }
.scribble--contact-x { left:48%;top:59%;font-size:170px;color:var(--forest);opacity:.28 }

/* ABOUT short and deliberately quiet */
.scene--about .inside__art-wrap { left:-4%;width:49%;top:0;bottom:-15%;opacity:.72 }
.scene--about .inside__art-wrap img { left:-18%;height:100% }
.scene--about .inside__options { top:39%;right:10%;width:43% }
.about-content { display:flex;flex-direction:column;gap:clamp(18px,3vh,35px) }
.about-content__tag { align-self:flex-start;background:#adc0a4;color:#132213;padding:.5em .8em;transform:rotate(-3deg);font:700 clamp(10px,1vw,14px)/1.1 var(--mono) }
.about-content__lead { margin:0;color:#d0dccd;font:italic 900 clamp(37px,4vw,74px)/.95 var(--menu);letter-spacing:.01em }
.about-content p:not(.about-content__lead):not(.about-content__tag) { margin:0;color:#b3c4ae;font:500 clamp(13px,1.22vw,18px)/1.7 var(--mono) }
.about-content__stamp { color:#859d83!important;font-size:clamp(10px,.8vw,13px)!important }
.about-content__cta { align-self:flex-start;border:0;padding:.55em .8em;background:var(--paper-lit);color:var(--void);font:italic 900 clamp(20px,2.4vw,36px)/1 var(--menu);cursor:pointer;transform:rotate(-3deg);transition:transform .15s }
.about-content__cta:hover { transform:rotate(-3deg) translateX(7px) }
.scribble--about-x { top:8%;right:6%;font-size:90px;transform:rotate(20deg) }

/* Persistent sound control: user gesture required before Web Audio can play. */
.audio-controls { position:absolute;left:3%;top:3.5%;z-index:40;display:flex;align-items:center;gap:8px }
.audio-controls .sound-toggle { position:relative;left:auto;top:auto;min-height:44px }
.music-toggle { min-width:116px;justify-content:center }
.sound-toggle { position:absolute;left:3%;top:3.5%;z-index:40;display:inline-flex;align-items:center;gap:.55em;min-height:38px;padding:.55em .85em;border:1px solid rgba(183,204,178,.65);background:rgba(3,19,6,.88);color:#bfd0ba;cursor:pointer;font:700 clamp(10px,.82vw,13px)/1 var(--mono);letter-spacing:.12em;transition:transform .18s,background .18s,color .18s }
.sound-toggle:hover,.sound-toggle:focus-visible { color:#132713;background:var(--paper-lit);transform:translateY(-2px) }
.sound-toggle[aria-pressed="false"] { opacity:.7 }
.sound-toggle__state { color:var(--signal) }
.sound-toggle:hover .sound-toggle__state,.sound-toggle:focus-visible .sound-toggle__state { color:var(--void) }
.sound-toggle:disabled { cursor:default;opacity:.45 }
.music-toggle .sound-toggle__state { display:inline-block;min-width:3ch;text-align:center }

/* Return is now a proper oversized, torn-paper menu selection, including focus. */
.back-button { position:absolute;top:4.2%;right:3%;z-index:30;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:.42em;min-width:clamp(148px,15vw,246px);min-height:clamp(48px,6.6vh,76px);padding:.55em 1.05em;border:0;background:rgba(8,33,11,.9);color:#d1ddcb;cursor:pointer;font:italic 900 clamp(21px,2.15vw,37px)/1 var(--menu);letter-spacing:.045em;filter:drop-shadow(4px 5px 0 rgba(0,0,0,.55));transform:rotate(-3deg);transition:transform .23s cubic-bezier(.2,1.35,.3,1),color .18s;clip-path:polygon(3% 12%,94% 0%,100% 22%,96% 96%,5% 100%,0% 78%) }
.back-button::before { content:"";position:absolute;inset:0;z-index:-1;background:var(--paper-lit);transform:scaleX(0);transform-origin:left;transition:transform .23s ease-out }
.back-button__arrow { font-style:normal;font-size:1.24em;line-height:.8;transition:transform .2s }
.back-button:hover,.back-button:focus-visible { color:#102410;transform:rotate(-3deg) translateX(-8px) scale(1.065) }
.back-button:hover::before,.back-button:focus-visible::before { transform:scaleX(1) }
.back-button:hover .back-button__arrow,.back-button:focus-visible .back-button__arrow { transform:translateX(-4px) }
.sr-status { position:absolute;bottom:12%;right:8%;z-index:30;min-height:1em;color:var(--paper-lit);font:700 12px var(--mono) }

/* SLASH TRANSITION: five independent jagged diagonal panels. */
.slash-wipe { position:absolute;inset:0;overflow:hidden;z-index:60;pointer-events:none;visibility:hidden }
.slash-wipe.is-playing { visibility:visible }
.slash-wipe__blade { position:absolute;top:-38%;left:-10%;height:178%;width:32%;clip-path:polygon(25% 0%,100% 0%,70% 100%,0% 100%);background:linear-gradient(90deg,#000 0%,#0d2a0f 12%,#d0dcc9 16%,#3d623b 20%,#d8e0cb 30%,#122d12 80%,#000 100%);box-shadow:0 0 55px #000;transform:translateX(-155vw) skewX(-19deg) }
.slash-wipe__blade:nth-child(even) { background:linear-gradient(90deg,#061909,#405b3a 18%,#d6e2cd 22%,#cdd1bd 37%,#08210b 84%);clip-path:polygon(15% 0,100% 0,66% 100%,0 100%) }
.slash-wipe__blade.blade-1 { left:-25%;width:29% }
.slash-wipe__blade.blade-2 { left:-5%;width:33% }
.slash-wipe__blade.blade-3 { left:18%;width:33% }
.slash-wipe__blade.blade-4 { left:41%;width:37% }
.slash-wipe__blade.blade-5 { left:69%;width:39% }
.slash-wipe.is-playing .blade-1 { animation:slash-cut .82s cubic-bezier(.17,.55,.4,1) both }
.slash-wipe.is-playing .blade-2 { animation:slash-cut .8s cubic-bezier(.17,.55,.4,1) .055s both }
.slash-wipe.is-playing .blade-3 { animation:slash-cut .78s cubic-bezier(.17,.55,.4,1) .025s both }
.slash-wipe.is-playing .blade-4 { animation:slash-cut .76s cubic-bezier(.17,.55,.4,1) .075s both }
.slash-wipe.is-playing .blade-5 { animation:slash-cut .84s cubic-bezier(.17,.55,.4,1) .045s both }
@keyframes slash-cut { 0%{transform:translateX(-155vw) skewX(-19deg)} 43%{transform:translateX(14vw) skewX(-19deg)} 100%{transform:translateX(185vw) skewX(-19deg)} }
.slash-wipe__eye { position:absolute;inset:0;background:url('/lost-menu/assets/eye-fragment.webp') center/48% auto no-repeat;filter:grayscale(1) contrast(2);mix-blend-mode:luminosity;opacity:0 }
.slash-wipe.is-playing .slash-wipe__eye { animation:eye-flash .78s step-end both }
@keyframes eye-flash { 0%,27%,39%,100%{opacity:0} 28%,38%{opacity:.65} }
.slash-wipe__word { position:absolute;top:47%;left:32%;font:italic 900 clamp(40px,7vw,132px)/1 var(--menu);letter-spacing:.03em;color:#e2e6d2;text-shadow:4px 5px #041305;transform:rotate(-13deg);opacity:0;white-space:nowrap }
.slash-wipe.is-playing .slash-wipe__word { animation:word-flash .82s steps(1,end) both }
@keyframes word-flash {0%,23%,43%,100%{opacity:0} 24%,42%{opacity:1}}

@media (min-width:1800px) { .main-menu__item { min-height:105px } .main-menu { top:41.5% } .social-row { height:6.8vh } }
@media (max-width:1150px) and (min-width:701px) {
  .home__heading { left:43.5%;right:3%;top:14% }
  .ransom-logo span { font-size:6.2vw }
  .main-menu { left:47%;right:3%;top:43% }
  .main-menu__word { font-size:8.3vw }
  .inside__options { right:4%;width:48% }
  .inside__header { left:5%;max-width:60% }
  .inside__art-wrap { left:-4%;width:56% }
  .social-row { height:6.65vh }
  .scene--contact .inside__options { right:3%;width:54% }
  .email-card__address { font-size:2.15vw }
}
/* Mobile retains the image as character art, but reduces its opacity under real controls. */
@media (max-width:700px) {
  body { overflow:auto }
  .app-frame { margin:5px;width:calc(100% - 10px);height:calc(100svh - 10px);min-height:600px }
  .frame-ornament { width:21px;height:21px }
  .scene__eye { top:0;right:-25%;width:67% }
  .scene__goose { width:21%;right:0;top:26%;opacity:.38 }
  .character--home { left:-25%;top:-5%;height:82%;width:130%;mask-image:linear-gradient(to bottom,#000 0%,#000 50%,transparent 96%) }
  .character--home img { height:100%; }
  .home__heading { left:18%;top:9%;right:3%;transform:rotate(-6deg) }
  .ransom-logo { filter:drop-shadow(3px 3px 0 #051006) }
  .ransom-logo span { font-size:clamp(23px,7.8vw,61px);min-width:.39em }
  .ransom-logo span:first-child { font-size:clamp(26px,8.4vw,70px) }
  .com-sticker { font-size:clamp(14px,4.5vw,26px);right:23%;top:114% }
  .home__lead { font-size:8px;top:-24px }
  .main-menu { top:auto;bottom:13.7%;left:8%;right:4%;gap:1px;transform:rotate(-7deg) }
  .main-menu__shadow { font-size:8px;top:-20px;left:15% }
  .main-menu__item { min-height:clamp(69px,10.5svh,95px);padding-left:8%;width:100% }
  .main-menu__word { font-size:clamp(55px,12.8vw,90px);line-height:.88 }
  .main-menu__arrow { font-size:clamp(28px,8vw,44px);flex-basis:.7em;width:.7em }
  .main-menu__item::before { inset:6% 0 5% 3% }
  .main-menu__item::after { bottom:2px }
  .screen-meta { font-size:9px;bottom:2.1%;left:4% }
  .control-hints { bottom:2.2%;right:3%;font-size:9px;gap:10px }
  .control-hints>span:nth-child(1) { display:none }
  kbd { border-radius:2px;box-shadow:none }
  .scene--inside .inside__header { left:5%;top:9.5%;max-width:90% }
  .scene--inside .micro-id { font-size:8px }
  .scene--inside .cutout-title span { font-size:clamp(48px,12vw,85px) }
  .header-note { display:none }
  .inside__art-wrap,.inside__art-wrap--contact { top:17%;left:-13%;bottom:16%;width:110%;opacity:.59;mask-image:linear-gradient(to bottom,#000 0%,#000 35%,transparent 95%) }
  .inside__character { height:100%;bottom:0;left:0 }
  .inside__static-label { display:none }
  .scene--inside .inside__options { left:10%;right:6%;top:38%;width:84% }
  .scene--socials .inside__options { top:34% }
  .socials-list { gap:5px }
  .social-row { height:clamp(42px,6.2svh,59px);grid-template-columns:26px 1fr 17px;gap:10px;padding:0 14px;background:linear-gradient(95deg,rgba(4,19,5,.87),rgba(20,56,20,.94)) }
  .social-row>span:nth-of-type(1) { font-size:clamp(26px,6.5vw,41px) }
  .social-row .row-arrow { font-size:16px }
  .scene--contact .inside__options { top:42%;left:5%;width:90% }
  .email-card { grid-template-columns:24px minmax(0,1fr) 40px;min-height:84px;gap:9px;padding:12px }
  .email-card__address { font-size:clamp(17px,4.8vw,28px) }
  .email-card__label { font-size:8px }
  .copy-button { min-width:35px }
  .contact__footnote { font-size:9px }
  .contact__handwritten { display:none }
  .scene--about .inside__art-wrap { width:120%;left:-30%;bottom:10%;opacity:.35 }
  .scene--about .inside__options { top:33%;left:8%;right:8%;width:84% }
  .about-content__lead { font-size:clamp(41px,9vw,61px) }
  .about-content p:not(.about-content__lead):not(.about-content__tag) { font-size:12px }
  .sound-toggle { top:2.4%;left:3%;min-height:38px;padding:.45em .6em;font-size:10px;gap:.4em }
  .audio-controls { top:2.4%;gap:6px }
  .audio-controls .sound-toggle { padding:.45em .5em;gap:.35em;font-size:10px;letter-spacing:.06em }
  .audio-controls .sound-toggle>span:first-child { display:none }
  .audio-controls .music-toggle { min-width:94px }
  .back-button { top:2.4%;right:3%;min-width:clamp(112px,32vw,160px);min-height:43px;padding:.45em .7em;font-size:clamp(17px,4.7vw,23px) }
  .slash-wipe__blade { width:62% }
  .slash-wipe__word { left:10%;font-size:15vw }
}
@media (max-width:390px) {
  .scene--inside .cutout-title span { font-size:11vw }
  .scene--inside .inside__options { top:37% }
  .scene--socials .inside__options { top:33% }
  .social-row { height:5.8svh;min-height:39px }
  .social-row>span:nth-of-type(1) { font-size:24px }
  .email-card__address { font-size:16px }
  .control-hints { gap:5px;font-size:8px }
}
@media (max-height:680px) and (min-width:701px) {
  .home__heading { top:9% }
  .main-menu { top:37% }
  .main-menu__item { min-height:17vh }
  .main-menu__word { font-size:min(8vw,16vh) }
  .inside__header { top:3.5% }
  .scene--inside .cutout-title span { font-size:min(7vw,15vh) }
  .scene--inside .inside__options { top:22% }
  .social-row { height:7.8vh;min-height:31px }
  .social-row>span:nth-of-type(1) { font-size:min(3vw,6.8vh) }
  .scene--contact .inside__options { top:36% }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important }
  .slash-wipe { display:none!important }
  .inside__character { transform:none }
}