@import url('./arabic-fonts.css');

/* Arabic typography and reading order; the cake, record, and 3D controls keep
   their physical coordinate systems so gestures still match the visuals. */
:root{--sans:'Tajawal',Arial,sans-serif;--serif:'Noto Naskh Arabic',Georgia,serif}
body{font-size:16px;line-height:1.9}
h1,h2,h3,em,.handwritten{font-style:normal;letter-spacing:0}
h1{font-size:clamp(54px,5.5vw,84px);line-height:1.45;white-space:normal;letter-spacing:0;margin:18px 0}
.hero h1 em{font-style:normal}
.hero-copy{text-align:right}
.title-spark{right:auto;left:12%;top:20px}
.wordmark{letter-spacing:0;font-size:17px;gap:10px}
.wordmark b,.box-monogram,.vinyl-label small{direction:ltr;unicode-bidi:isolate}
.header-date{letter-spacing:0;font-size:11px}
.made-for{font-size:12px;letter-spacing:0}
.eyebrow{font-size:12px;letter-spacing:0;font-weight:500}
.hero-description{font-size:16px;line-height:2}
.button{font-size:14px;letter-spacing:0;min-height:52px;line-height:1.8}
.button[data-unlock]>span,.hero-copy .button>span,.next-song>span{transform:scaleX(-1)}
.micro{font-size:12px;letter-spacing:0}
.hero-micro{font-size:12px}
.hero-micro span{margin-right:0;margin-left:5px}
.hero-bottom{font-size:11px;letter-spacing:0}
.gift-scene,.cake-canvas,.turntable,.constellation,.jewelry-viewer{direction:ltr}
.scene-caption,.gift-tag,.gift-annotation i,.turntable-brand{direction:rtl}
.scene-caption{font-size:19px;left:25%;top:-3px;font-style:normal}
.gift-annotation i{font-size:17px;font-style:normal}
.gift-annotation>span{direction:ltr;unicode-bidi:isolate}
.gift-annotation>span{font-size:11px;letter-spacing:0}
.gift-tag{font-size:21px;white-space:nowrap}
.invitation-note h2{font-size:36px;line-height:1.7}
.invitation-note p{font-size:16px;line-height:2}
.journey-caption{font-size:11px;letter-spacing:0}
.journey-caption span:last-child{letter-spacing:0}
.chapter-links button{min-height:46px;gap:8px}
.chapter-links b{font-size:13px;white-space:normal;line-height:1.7}
.chapter-links button>span{font-size:11px}
.chapter-links i{margin-left:0;margin-right:auto}
.chapter-heading .eyebrow{font-size:12px;letter-spacing:0}
.chapter-heading .eyebrow span{font-size:11px}
.chapter-heading h2{font-size:clamp(43px,4.5vw,66px);line-height:1.5;letter-spacing:0;margin:20px 0}
.chapter-heading>p:last-child{font-size:15px;line-height:2}
.interaction-label{font-size:14px;letter-spacing:0;direction:rtl}
.reveal-note p{font-size:29px;line-height:1.9}
.text-button,.text-link{font-size:13px;line-height:1.9}
.parchment{text-align:right}
.parchment:before{right:auto;left:18px}
.parchment .eyebrow{font-size:10px;letter-spacing:0;padding-left:22px}
.parchment h3{font-size:32px;line-height:1.7}
.parchment>p:not(.eyebrow){font-size:15px;line-height:2}
.episode-progress>span{font-size:13px}
.episode-progress small,.royal-answer small{font-size:12px;line-height:1.9}
.handwritten{font-size:25px;line-height:1.8}
.song-card h3{font-size:45px;line-height:1.6}
.artist{font-size:16px}
.song-card>p:not(.eyebrow,.artist,.micro){font-size:15px;line-height:2}
.song-card .text-link{font-size:12px}
.next-song span{display:inline-block;margin-left:0;margin-right:15px}
.turntable-brand{font-size:19px;top:11px}
.turntable-speed{letter-spacing:0;font-size:9px}
.vinyl-label span{letter-spacing:0;font-size:10px}
.star-button span{letter-spacing:0;font-size:11px}
.wish-message{direction:rtl;min-height:140px}
.wish-message>span{font-size:12px;letter-spacing:0}
.wish-message p{font-size:32px;line-height:1.9}
.final-gift-cover p{font-size:28px}
.model-status{direction:rtl;font-size:15px}
.model-fallback{direction:rtl}
.model-fallback h3{font-size:35px;line-height:1.8}
.model-fallback p{font-size:15px;line-height:2}
.viewer-controls{font-size:12px;text-align:right}
.final-message h3{font-size:43px;line-height:1.7}
.final-message p{font-size:15px;line-height:2}
.final-message .handwritten{font-size:27px}
.finale .eyebrow{font-size:11px;letter-spacing:0}
.finale h2{font-size:clamp(45px,5.8vw,78px);line-height:1.65;letter-spacing:0}
.finale>p:not(.eyebrow,.micro){font-size:16px;line-height:2}
footer .wordmark{font-size:15px;letter-spacing:0}
footer p{font-size:23px;font-style:normal}
footer>span{font-size:10px;letter-spacing:0}
.skip-link{left:auto;right:20px}

@media(min-width:761px) and (max-width:1100px){
  .site-header{gap:15px}.header-date{font-size:9px}.wordmark{font-size:15px}
  .hero h1{font-size:6.1vw;letter-spacing:0}.hero .title-spark{left:6%;right:auto}
  .chapter-links b{font-size:11px}.chapter-links{gap:9px}
  .hero-description{font-size:14px}.parchment>p:not(.eyebrow){font-size:14px}
}
@media(max-width:760px){
  .wordmark{font-size:15px}.made-for{font-size:11px}.site-header{gap:12px}
  .hero-copy{text-align:center}.hero-copy .eyebrow{font-size:11px;letter-spacing:0}
  h1,.hero h1{font-size:clamp(47px,11vw,72px);line-height:1.55;letter-spacing:0}
  .title-spark{left:6%;right:auto;top:18px}.hero-description{font-size:14px;line-height:2}
  .hero-micro{font-size:11px}.hero-bottom{font-size:9px;letter-spacing:0}
  .scene-caption{font-size:18px;left:21%}.gift-annotation i{font-size:16px}
  .invitation-note h2{font-size:29px}.invitation-note p{font-size:14px}
  .journey-caption{font-size:10px}.chapter-links b{font-size:10px;letter-spacing:0;min-height:34px}
  .chapter-links button>span{font-size:10px}.chapter-links button{gap:5px}
  .chapter-heading .eyebrow{font-size:10px;gap:10px;letter-spacing:0}
  .chapter-heading .eyebrow span{font-size:9px;letter-spacing:0}
  .chapter-heading h2{font-size:clamp(37px,9vw,55px);line-height:1.6;letter-spacing:0}
  .chapter-heading>p:last-child{font-size:14px}.interaction-label{font-size:12px;line-height:1.9}
  .reveal-note p{font-size:25px}.dragon-portrait .handwritten{font-size:23px}
  .parchment h3{font-size:30px}.parchment>p:not(.eyebrow){font-size:14px}
  .song-card h3{font-size:40px}.song-card>p:not(.eyebrow,.artist,.micro){font-size:14px}
  .wish-message>span{font-size:11px;letter-spacing:0}.wish-message p{font-size:26px}
  .star-button span{font-size:10px}.viewer-controls{font-size:10px;text-align:right}
  .viewer-controls .text-button{font-size:11px}.model-fallback h3{font-size:28px}
  .model-fallback p{font-size:13px}.final-message h3{font-size:35px}
  .final-message p{font-size:14px}.final-message .handwritten{font-size:25px}
  .finale .eyebrow{font-size:9px;letter-spacing:0}.finale h2{font-size:clamp(42px,11vw,60px);line-height:1.8}
  .finale>p:not(.eyebrow,.micro){font-size:14px}
  footer .wordmark{font-size:13px}footer p{font-size:20px}footer>span{font-size:9px;letter-spacing:0}
}
@media(max-width:360px){
  .made-for{font-size:10px}.wordmark{font-size:13px}
  .chapter-links b{font-size:9px}.chapter-heading .eyebrow span{font-size:8px}
  .hero h1{font-size:46px}.finale h2{font-size:40px}
}
.gift-switcher{display:flex;align-items:center;justify-content:center;gap:20px;margin:35px auto 0;flex-wrap:wrap}
.gift-switcher p{font-size:16px;min-width:220px;line-height:1.9}
.gift-switcher .button:disabled{opacity:.45;transform:none;box-shadow:none;cursor:default}
.jewelry-viewer canvas{animation:reveal .5s ease-out}
@media(max-width:760px){.gift-switcher{gap:10px}.gift-switcher p{width:100%;order:-1;font-size:15px}.gift-switcher .button{font-size:12px;padding:11px 15px}}