@font-face{font-family:"Lilita One";src:url("./assets/lilita-one.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"Rubik";src:url("./assets/rubik-400.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"Rubik";src:url("./assets/rubik-600.ttf") format("truetype");font-style:normal;font-weight:600;font-display:swap}
@font-face{font-family:"Rubik";src:url("./assets/rubik-700.ttf") format("truetype");font-style:normal;font-weight:700;font-display:swap}

:root{color-scheme:light;--cream:#fffeec;--coral:#f25944;--display:"Lilita One","Arial Rounded MT Bold",sans-serif;--body:"Rubik",Arial,sans-serif;--gutter:clamp(1rem,3.5vw,4.35rem);--max:96rem;--ease:cubic-bezier(.59,.35,.22,1)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-width:0;background:var(--cream);color:var(--coral);font-family:var(--body);line-height:1.45}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
.skip-link{position:fixed;z-index:100;top:.5rem;left:.5rem;padding:.75rem 1rem;border-radius:1rem;background:var(--coral);color:var(--cream);transform:translateY(-160%)}
.skip-link:focus{transform:translateY(0)}
:focus-visible{outline:4px solid currentColor;outline-offset:4px}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.shell{width:min(100%,var(--max));margin-inline:auto;padding-inline:var(--gutter)}
.masthead{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1rem;min-height:5rem}
.brand{width:max-content;font-family:var(--display);font-size:clamp(1.5rem,2.1vw,2rem);line-height:1;text-decoration:none}
.languages{display:flex;gap:clamp(.1rem,1vw,.7rem);font-size:.76rem;font-weight:700}
.languages a{display:grid;min-width:2.75rem;min-height:2.75rem;place-items:center;border:2px solid transparent;border-radius:999px;text-decoration:none}
.languages a:hover,.languages a[aria-current="page"]{border-color:var(--coral)}

.poster-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(25rem,.95fr);gap:clamp(2rem,4.6vw,4.5rem);align-items:center;padding-block:.25rem clamp(1.5rem,3vw,2.75rem)}
.hero-copy{position:relative;min-width:0;padding-bottom:clamp(.5rem,2vw,1.5rem)}
h1,h2,p{margin-top:0}
h1{max-width:9.4ch;margin-bottom:1.1rem;font-family:var(--display);font-size:clamp(4rem,6.45vw,6.4rem);font-weight:400;letter-spacing:-.04em;line-height:.91;text-wrap:balance}
.lead{max-width:31rem;margin-bottom:1rem;font-size:clamp(1.2rem,1.65vw,1.55rem);font-weight:700;line-height:1.2}
.body-copy{max-width:35rem;margin-bottom:1.25rem;padding-right:clamp(0rem,8vw,8rem);font-size:clamp(.98rem,1.25vw,1.13rem);line-height:1.42}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.5rem}
.cta{display:inline-flex;min-width:14rem;min-height:3.25rem;align-items:center;justify-content:center;padding:.75rem 1.35rem;border:3px solid var(--coral);border-radius:999px;background:var(--coral);color:var(--cream);font-size:1.03rem;font-weight:700;text-decoration:none;transition:background 180ms var(--ease),color 180ms var(--ease)}
.cta:hover{background:var(--cream);color:var(--coral)}
.inline-email{display:inline-flex;align-items:center;gap:.7rem;font-size:.98rem;font-weight:600;text-underline-offset:.2em}
.inline-email::before{width:1.8rem;height:1.4rem;flex:0 0 auto;background:url("./assets/envelope-doodle.svg") center/contain no-repeat;content:""}
.portrait{position:relative;min-width:0;margin:0}
.portrait picture{display:block;aspect-ratio:1.05/1;overflow:hidden;border-radius:clamp(2.5rem,4vw,4rem);background:#e6c58f}
.portrait picture img{width:100%;height:100%;object-fit:cover;object-position:50% 53%}
.doodle{position:absolute;z-index:2;right:calc(100% + 1.25rem);bottom:.5rem;width:clamp(9rem,16vw,15rem);height:auto;transform:rotate(-6deg)}

.mail-band{display:flex;min-height:clamp(5.5rem,8vw,6.4rem);align-items:center;justify-content:center;gap:clamp(.7rem,2vw,1.5rem);margin-bottom:clamp(1.3rem,2.4vw,2.4rem);padding:.8rem 1.25rem;border:3px solid var(--coral);border-radius:1.35rem;font-family:var(--display);font-size:clamp(2rem,4.3vw,4.1rem);letter-spacing:.01em;line-height:1;text-align:center;text-decoration:none;transition:background 180ms var(--ease),color 180ms var(--ease)}
.mail-band::before{width:clamp(2.2rem,4.4vw,4.2rem);height:clamp(1.7rem,3.4vw,3.3rem);flex:0 0 auto;background:url("./assets/envelope-doodle.svg") center/contain no-repeat;content:""}
.mail-band:hover{background:var(--coral);color:var(--cream)}
.mail-band:hover::before{filter:brightness(0) invert(1)}
.process{padding-bottom:clamp(2.25rem,4vw,3.5rem)}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0}
.fact{display:grid;grid-template-columns:clamp(4.5rem,7vw,6.5rem) minmax(0,1fr);gap:clamp(.75rem,1.8vw,1.5rem);align-items:center;min-height:7rem;padding-inline:clamp(.8rem,2.8vw,2.75rem);border-right:2px dotted var(--coral)}
.fact:first-child{padding-left:clamp(.25rem,1vw,1rem)}
.fact:last-child{padding-right:0;border-right:0}
.fact img{width:100%;max-height:6rem;object-fit:contain}
.fact p{margin:0;font-size:clamp(.93rem,1.22vw,1.12rem);font-weight:600;line-height:1.32}
.footer-wrap{position:relative;padding-top:clamp(2.25rem,3.5vw,3.5rem)}
.wave{position:absolute;top:0;right:0;left:0;width:100%;height:clamp(2.25rem,3.5vw,3.5rem);color:var(--coral);transform:translateY(-1px)}
.footer{background:var(--coral);color:var(--cream)}
.footer-inner{display:grid;grid-template-columns:auto 1fr auto;gap:1.5rem 3rem;align-items:center;min-height:4.75rem;padding-block:.8rem}
.footer-mark{font-family:var(--display);font-size:1.35rem;line-height:1;text-decoration:none}
.footer-contact{display:flex;min-width:0;flex-wrap:wrap;align-items:center;justify-content:center;gap:.15rem 1.25rem;justify-self:center}
.footer-email{font-size:.92rem;text-underline-offset:.25em}
.footer-tiktok{display:inline-flex;min-height:2.75rem;align-items:center;gap:.48rem;font-size:.88rem;font-weight:700;text-decoration:none;text-underline-offset:.25em}
.footer-tiktok::before{width:1.05rem;height:1.05rem;flex:0 0 auto;background:url("./assets/tiktok.svg") center/contain no-repeat;content:"";filter:brightness(0) invert(1)}
.footer-tiktok:hover{text-decoration:underline}
.footer-languages{display:flex;flex-wrap:wrap;gap:.3rem 1.15rem;font-size:.78rem;font-weight:700}
.footer-languages a{display:inline-flex;min-height:2.75rem;align-items:center}

@media(max-width:69rem){
  .poster-hero{grid-template-columns:minmax(0,1fr) minmax(22rem,.92fr);gap:2.25rem}
  h1{font-size:clamp(3.65rem,6.2vw,5rem)}
  .body-copy{padding-right:4rem}
  .doodle{right:calc(100% + .5rem);width:10rem}
}
@media(max-width:55rem){
  .poster-hero{grid-template-columns:1fr;padding-bottom:3rem}
  .hero-copy{padding-bottom:0}
  h1{max-width:10ch;font-size:clamp(3.7rem,10vw,5.7rem)}
  .body-copy{max-width:41rem;padding-right:0}
  .portrait{width:min(42rem,92%);margin-left:auto}
  .portrait picture{aspect-ratio:1.12/1}
  .doodle{right:auto;bottom:-2rem;left:-4rem;width:clamp(9rem,24vw,13rem)}
  .facts{grid-template-columns:1fr}
  .fact{grid-template-columns:5.5rem minmax(0,1fr);min-height:6.8rem;padding:1rem .5rem;border-right:0;border-bottom:2px dotted var(--coral)}
  .fact:first-child{padding-left:.5rem}
  .fact:last-child{border-bottom:0}
  .fact img{width:5.5rem}
}
@media(max-width:45rem){
  :root{--gutter:clamp(1rem,5vw,1.5rem)}
  .masthead{min-height:5.5rem;align-items:start;padding-block:.8rem}
  .brand{padding-top:.55rem;font-size:1.65rem}
  .languages{display:grid;grid-template-columns:repeat(2,2.75rem);gap:0}
  .poster-hero{gap:2.25rem;padding-top:1rem}
  h1{font-size:clamp(3rem,14vw,4.5rem)}
  .lead{font-size:1.08rem}
  .body-copy{font-size:1rem}
  .actions{align-items:stretch;flex-direction:column}
  .cta{width:100%}
  .inline-email{justify-content:center;min-height:2.75rem}
  .portrait{width:100%}
  .portrait picture{aspect-ratio:4/5;border-radius:2.25rem}
  .portrait picture img{object-position:50% 50%}
  .doodle{bottom:-2.4rem;left:-.5rem;width:8.5rem}
  .mail-band{min-height:5rem;margin-bottom:1.25rem;padding:.8rem;font-family:var(--body);font-size:clamp(1rem,5.1vw,1.35rem);font-weight:700;letter-spacing:0}
  .mail-band::before{width:1.9rem;height:1.5rem}
  .footer-inner{grid-template-columns:1fr;gap:.25rem;justify-items:start;padding-block:1.5rem}
  .footer-contact{align-items:flex-start;justify-content:flex-start;justify-self:start}
}
@media(max-width:23rem){h1{font-size:2.8rem}.mail-band{font-size:.98rem}.feed-line h2{font-size:2rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition-duration:.01ms!important}}

/* Shared navigation and playful motion */
.masthead{position:relative;z-index:40}
.desktop-nav{display:flex;align-items:center;justify-content:flex-end;gap:clamp(1rem,2.2vw,2.25rem);min-width:0}
.page-links{display:flex;align-items:center;gap:clamp(.25rem,.8vw,.75rem);font-size:.78rem;font-weight:700}
.page-links a{display:inline-flex;min-height:2.75rem;align-items:center;padding:.2rem .75rem;border:2px solid transparent;border-radius:999px;text-decoration:none}
.page-links a:hover,.page-links a[aria-current="page"]{border-color:var(--coral)}
.mobile-menu{display:none}
.brand{transition:transform 220ms var(--ease)}
.brand:hover{transform:rotate(-1.5deg) scale(1.035)}
h1{animation:title-arrive 650ms var(--ease) both}
.portrait{animation:portrait-float 7.5s ease-in-out infinite}
.doodle{animation:doodle-swing 4.6s ease-in-out infinite}
.fact img{animation:doodle-float 4.8s ease-in-out infinite}
.fact:nth-child(2) img{animation-delay:-1.7s}.fact:nth-child(3) img{animation-delay:-3.1s}
.mail-band::before,.inline-email::before{animation:mail-wiggle 3.8s ease-in-out infinite}
.cta:hover{transform:translateY(-3px) rotate(-.35deg)}
@keyframes title-arrive{from{opacity:0;transform:translateY(1.25rem) rotate(.5deg)}to{opacity:1;transform:none}}
@keyframes portrait-float{0%,100%{transform:translateY(0) rotate(-.15deg)}50%{transform:translateY(-.45rem) rotate(.2deg)}}
@keyframes doodle-swing{0%,100%{transform:rotate(-8deg) translateY(0)}50%{transform:rotate(-3deg) translateY(-.45rem)}}
@keyframes doodle-float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-.5rem) rotate(1.5deg)}}
@keyframes mail-wiggle{0%,80%,100%{transform:rotate(0)}86%{transform:rotate(-8deg)}92%{transform:rotate(7deg)}}

/* Subpages */
.subpage-main{min-height:calc(100svh - 9rem)}
.page-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(22rem,.95fr);gap:clamp(2rem,6vw,6rem);align-items:center;padding-block:clamp(2.5rem,6vw,6rem)}
.page-copy{min-width:0}
.page-copy h1{max-width:9ch;margin-bottom:1.4rem;font-size:clamp(4rem,7vw,7rem)}
.page-intro{max-width:35rem;margin-bottom:1.75rem;font-size:clamp(1.12rem,1.7vw,1.55rem);font-weight:600;line-height:1.38}
.page-visual{position:relative;display:grid;aspect-ratio:1.05/1;overflow:hidden;place-items:center;border:3px solid var(--coral);border-radius:clamp(2.75rem,5vw,4.5rem);background:var(--coral);color:var(--cream);animation:visual-rock 7s ease-in-out infinite}
.page-visual .page-doodle{width:min(58%,20rem);filter:brightness(0) invert(1)}
.play-mark{position:absolute;display:grid;width:clamp(5.5rem,9vw,8.5rem);aspect-ratio:1;place-items:center;border:3px solid currentColor;border-radius:50%;background:var(--coral);animation:play-pulse 2.8s ease-in-out infinite}
.play-mark svg{width:42%;margin-left:8%}
.photo-visual{background:#3b2719}
.photo-visual picture,.photo-visual .page-photo{width:100%;height:100%}
.photo-visual .page-photo{object-fit:cover;object-position:50% 52%}
.ramen-photo-visual .page-photo{object-position:50% 68%}
.video-player-visual{background:var(--coral);animation:none}
.video-player-visual::before,.video-player-visual::after{position:absolute;width:1.5rem;aspect-ratio:1;border:3px solid var(--cream);border-radius:50%;content:"";opacity:.72}
.video-player-visual::before{top:9%;left:8%}
.video-player-visual::after{right:8%;bottom:11%;width:2.25rem}
.video-player{position:relative;z-index:1;width:54%;height:100%;object-fit:cover;background:#211710}
.video-player:focus-visible{outline-color:var(--cream);outline-offset:-.5rem}
.review-visual::after{position:absolute;right:9%;bottom:8%;font-family:var(--display);font-size:clamp(1.3rem,2.5vw,2.4rem);content:var(--review-word,"ehrlich.");transform:rotate(-6deg)}
.review-rating-visual{align-content:center;gap:clamp(.6rem,2vw,1.2rem);padding:clamp(1.25rem,4vw,3.25rem)}
.rating-stars{display:grid;width:min(100%,31rem);grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(.2rem,.8vw,.65rem)}
.rating-star{display:block;width:100%;height:auto;color:var(--cream);fill:none;opacity:.38;stroke:currentColor;stroke-linejoin:round;stroke-width:3.5}
.rating-star.is-earned{fill:currentColor;opacity:1;animation:earned-star 3.2s ease-in-out infinite;transform-origin:50% 50%}
.rating-score{display:flex;align-items:baseline;justify-content:center;gap:.45rem;font-family:var(--display);line-height:1}
.rating-score strong{font-size:clamp(5rem,11vw,10rem);font-weight:400;letter-spacing:-.06em}
.rating-score span{font-size:clamp(1.5rem,3vw,2.75rem)}
.feed-section{padding-block:clamp(1rem,3vw,2rem) clamp(4.5rem,8vw,8rem)}
.feed-line{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(16rem,.8fr);gap:clamp(2rem,6vw,6rem);align-items:end;padding-block:clamp(2rem,4vw,3.5rem);border-block:3px solid var(--coral)}
.feed-line>*{min-width:0}
.feed-line h2{max-width:14ch;margin-bottom:1rem;font-family:var(--display);font-size:clamp(2.8rem,5vw,5rem);letter-spacing:-.04em;line-height:.92}
.feed-line p{max-width:42rem;margin-bottom:0;font-size:clamp(1rem,1.3vw,1.2rem)}
.scope-list{display:flex;flex-wrap:wrap;gap:.65rem;margin:0;padding:0;list-style:none}
.scope-list li{padding:.65rem 1rem;border:2px solid var(--coral);border-radius:999px;font-size:.92rem;font-weight:700}
.review-entry{align-items:center}
.review-copy p{margin-bottom:.9rem}
.review-copy p:last-of-type{margin-bottom:1.4rem}
.review-photo{position:relative;width:min(100%,23rem);margin:0;justify-self:end;overflow:hidden;border:3px solid var(--coral);border-radius:clamp(2rem,4vw,3.25rem);background:#3b2719;transform:rotate(1.4deg)}
.review-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 65%}
.review-photo figcaption{position:absolute;right:.75rem;bottom:.75rem;left:.75rem;padding:.55rem .8rem;border-radius:999px;background:var(--cream);font-size:.78rem;font-weight:700;text-align:center}
.watch-link{display:inline-flex;min-height:2.75rem;align-items:center;font-weight:700;text-underline-offset:.22em}
.motion-strip{overflow:hidden;padding-block:.9rem;border-top:2px solid rgba(242,89,68,.24);white-space:nowrap}
.motion-strip-inner{display:inline-block;min-width:max-content;font-family:var(--display);font-size:clamp(1rem,1.6vw,1.35rem);animation:strip-move 24s linear infinite}
.motion-strip-inner span{margin-right:3rem}
@keyframes visual-rock{0%,100%{transform:rotate(-.35deg) translateY(0)}50%{transform:rotate(.35deg) translateY(-.4rem)}}
@keyframes play-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08) rotate(2deg)}}
@keyframes strip-move{to{transform:translateX(-50%)}}
@keyframes earned-star{0%,72%,100%{transform:scale(1) rotate(0)}82%{transform:scale(1.13) rotate(-5deg)}91%{transform:scale(1.04) rotate(3deg)}}

@media(max-width:60rem){
  .desktop-nav{display:none}
  .mobile-menu{display:block;justify-self:end}
  .mobile-menu summary{display:flex;min-width:7rem;min-height:3.25rem;align-items:center;justify-content:center;gap:.8rem;padding:.65rem 1rem;border:2px solid var(--coral);border-radius:999px;background:var(--coral);color:var(--cream);font-size:.92rem;font-weight:700;cursor:pointer;list-style:none}
  .mobile-menu summary::-webkit-details-marker{display:none}
  .burger{position:relative;display:block;width:1.55rem;height:1rem}
  .burger span{position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:currentColor;transition:transform 220ms var(--ease),top 220ms var(--ease)}
  .burger span:first-child{top:.15rem}.burger span:last-child{top:.7rem}
  .mobile-menu[open] .burger span:first-child{top:.43rem;transform:rotate(45deg)}
  .mobile-menu[open] .burger span:last-child{top:.43rem;transform:rotate(-45deg)}
  .mobile-panel{position:absolute;z-index:30;top:calc(100% - .25rem);right:var(--gutter);left:var(--gutter);padding:1.25rem;border-radius:0 0 2.5rem 2.5rem;background:var(--coral);color:var(--cream);animation:menu-drop 280ms var(--ease) both}
  .mobile-pages{display:grid}
  .mobile-pages a{display:flex;min-height:4.15rem;align-items:center;border-bottom:2px solid rgba(255,254,236,.55);font-family:var(--display);font-size:clamp(1.75rem,6vw,2.65rem);line-height:1;text-decoration:none}
  .mobile-pages a[aria-current="page"]::after{margin-left:auto;content:"●";font-family:var(--body);font-size:.7rem}
  .mobile-languages{display:flex;gap:.4rem;margin-top:1rem}
  .mobile-languages a{display:grid;min-width:2.75rem;min-height:2.75rem;place-items:center;border:2px solid transparent;border-radius:50%;font-size:.8rem;font-weight:700;text-decoration:none}
  .mobile-languages a[aria-current="page"]{border-color:var(--cream)}
  @keyframes menu-drop{from{opacity:0;transform:translateY(-.75rem) rotate(-1deg)}to{opacity:1;transform:none}}
  .page-hero{grid-template-columns:1fr}
  .page-visual{width:min(38rem,88%);margin-left:auto}
  .feed-line{grid-template-columns:1fr;gap:1.75rem}
  .review-photo{width:min(100%,31rem);justify-self:start}
}
@media(max-width:45rem){
  .mobile-menu summary{min-width:6.5rem}
  .page-hero{gap:2.25rem;padding-block:2.5rem 4rem}
  .page-copy h1{font-size:clamp(3.4rem,15vw,5rem)}
  .page-intro{font-size:1.08rem}
  .page-visual{width:100%;border-radius:2.5rem}
  .feed-line{grid-template-columns:1fr;gap:1.75rem}
  .feed-line h2{font-size:clamp(2.15rem,10vw,3.8rem)}
}
@media(max-width:23rem){.page-copy h1{font-size:3rem}.feed-line h2{font-size:1.85rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important}}