@font-face{font-family:"Forum";font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/forum-cyrillic-400.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Forum";font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/forum-latin-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant";font-style:italic;font-weight:500;font-display:swap;src:url(assets/fonts/cormorant-cyrillic-500i.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Cormorant";font-style:italic;font-weight:500;font-display:swap;src:url(assets/fonts/cormorant-latin-500i.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Jost";font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/jost-cyrillic-400.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Jost";font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/jost-latin-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Jost";font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/jost-cyrillic-500.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Jost";font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/jost-latin-500.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --lilac:#efe7f3;
  --ink:#2a1836;
  --wine:#7a1f4a;
  --night:#1b0f28;
  --brass:#a98653;
  --brass-light:#e3cb9c;
  --ivory:#f8f1e4;
  --hair:rgba(169,134,83,.42);
  --hair-light:rgba(248,241,228,.2);
  --radius:6px;
  --display:"Forum","Times New Roman",serif;
  --accent:"Cormorant",Georgia,serif;
  --sans:"Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --gutter:clamp(16px,3.4vw,40px);
  --header:4.5rem;
  --wrap:clamp(1200px,82vw,1760px);
  --edge:max(var(--gutter),calc((100% - var(--wrap))/2));
  --hero-h:clamp(540px,40vw,960px);
  --photo-w:clamp(440px,39vw,940px);
}

*,*::before,*::after{box-sizing:border-box}
/* Above 1440px the whole page scales with the screen, so block proportions stay the same */
html{font-size:clamp(100%,calc(8.5px + .52vw),125%);-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--header) + 8px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--lilac);color:var(--ink);font:400 1rem/1.5 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg{display:block}
img{max-width:100%;height:auto}
ul{list-style:none;margin:0;padding:0}
h1,h2,h3,p,figure{margin:0}
h1,h2,h3{font-weight:400}
a{color:inherit}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}

.sprite{position:absolute;width:0;height:0;overflow:hidden}
.wrap{width:100%;max-width:calc(var(--wrap) + 2*var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.icon{width:1.125rem;height:1.125rem;flex:none}
.title{font:400 clamp(2rem,3.5vw,2.875rem)/1.1 var(--display);letter-spacing:.09em;text-transform:uppercase}

/* Header */
.site-header{position:sticky;top:0;z-index:20;background:rgba(239,231,243,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--hair)}
.header-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;min-height:var(--header)}
.brand{display:inline-flex;align-items:center;gap:.625rem;justify-self:start;min-height:44px;color:var(--ink);text-decoration:none;font:400 1.5rem/1 var(--display);letter-spacing:.24em;text-transform:uppercase}
.brand-mark{width:2.375rem;height:2.375rem;color:var(--brass);flex:none}
.site-nav{display:flex;gap:clamp(18px,3vw,44px)}
.site-nav a,.lang>*{position:relative;display:flex;align-items:center;min-height:44px;font-size:.8125rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.site-nav a::after,.lang>*::after{content:"";position:absolute;left:50%;right:50%;bottom:8px;height:1px;background:var(--wine);transition:left .2s ease,right .2s ease}
.site-nav a:focus-visible::after{left:0;right:0}
.header-cta{display:flex;align-items:center;gap:8px;justify-self:end}
.lang{display:flex}
.lang>*{justify-content:center;min-width:2.25rem;padding-left:.16em}
.lang [aria-current]::after,.lang a:focus-visible::after{left:.4rem;right:.4rem}

/* Buttons */
.actions{display:flex;flex-wrap:wrap;gap:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.625rem;min-height:3.25rem;padding:0 1.75rem;border:1px solid transparent;border-radius:var(--radius);font-size:.8125rem;font-weight:500;line-height:1;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;white-space:nowrap;transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.btn-sm{min-height:2.75rem;padding:0 1.125rem}
.btn-icon{width:2.75rem;min-width:44px;min-height:2.75rem;padding:0}
.btn-main{background:var(--wine);color:var(--ivory)}
.btn-line{border-color:var(--ink);color:var(--ink)}
.btn-ivory{background:var(--ivory);color:var(--night)}
.btn-ghost{border-color:rgba(248,241,228,.62);color:var(--ivory)}

/* Hero */
.hero{position:relative;isolation:isolate;overflow:hidden;min-height:var(--hero-h);margin-top:calc(-1*var(--header) - 1px);padding-top:var(--header)}
.hero-bg{position:absolute;inset:0;z-index:-3;background:radial-gradient(46% 62% at 4% 100%,rgba(122,31,74,.17),transparent 72%),radial-gradient(44% 58% at 50% 0,rgba(126,86,206,.17),transparent 72%),radial-gradient(34% 56% at 58% 100%,rgba(214,120,92,.15),transparent 72%),linear-gradient(100deg,#f5eff8 0,var(--lilac) 52%,#ddd0e8 100%)}
.hero-photo{position:absolute;top:0;right:0;bottom:0;z-index:-2;width:var(--photo-w);overflow:hidden;background:#d5cfd8;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%);mask-image:linear-gradient(90deg,transparent 0,#000 30%)}
.hero-canvas{position:absolute;left:3px;right:0;top:calc(var(--header) + 8px - var(--photo-w)*.117);aspect-ratio:2/3}
.hero-canvas::after{content:"";position:absolute;inset:0;background:linear-gradient(205deg,rgba(176,142,214,.42),rgba(122,31,74,.18));mix-blend-mode:soft-light}
.hero-canvas img{width:100%;height:100%;object-fit:cover}
.flame{position:absolute;z-index:1;width:30%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,219,150,.85),rgba(255,184,102,.26) 34%,transparent 68%);mix-blend-mode:screen;transform:translate(-50%,-50%);animation:flicker 4.2s ease-in-out infinite}
.f1{left:65.8%;top:41%}
.f2{left:82.9%;top:38.2%;animation-delay:-1.3s}
.f3{left:99%;top:41%;animation-delay:-2.4s}
@keyframes flicker{0%,100%{opacity:.72}22%{opacity:1}41%{opacity:.8}63%{opacity:.98}82%{opacity:.7}}
.hero-roses{position:absolute;right:calc(var(--photo-w)*.76);bottom:-3.5rem;z-index:-3;width:clamp(190px,19vw,400px);mix-blend-mode:multiply;opacity:.9;filter:saturate(1.35);-webkit-mask-image:radial-gradient(closest-side,#000 62%,transparent);mask-image:radial-gradient(closest-side,#000 62%,transparent);pointer-events:none}
.mote{display:none}
.hero-body{display:flex;align-items:center;min-height:calc(var(--hero-h) - var(--header));padding:24px var(--edge) 40px}
.hero-copy{width:calc(100% - var(--photo-w)*.62);max-width:44rem}
.kicker{font-size:.75rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase}
h1{margin:.25rem 0 .125rem -.04em;font:400 clamp(4.25rem,10.4vw,10rem)/1 var(--display);letter-spacing:.09em;text-transform:uppercase}
.hero-sub{font:italic 500 clamp(1.5rem,2.3vw,2.25rem)/1.15 var(--accent);text-wrap:balance}
.lead{max-width:50ch;margin-top:.875rem;font-size:1.03rem;line-height:1.5}
.hero-copy .actions{margin-top:1.375rem}

/* Practices: three real tarot cards choose what the text next to them says, the block takes the colour of the choice. Works without scripts */
.practices{position:relative;isolation:isolate;overflow:clip;padding-block:clamp(36px,3.6vw,68px) clamp(40px,4.2vw,80px);background:var(--night);color:var(--ivory)}
.title-row{display:flex;align-items:center;gap:clamp(14px,2vw,32px);margin-bottom:clamp(20px,2.2vw,40px)}
.rule{flex:1;display:flex;align-items:center;gap:clamp(8px,1vw,16px);min-width:0;color:var(--brass-light)}
.rule::before,.rule::after{content:"";flex:1;height:1px;background:rgba(227,203,156,.42)}
.rule svg{flex:none;width:3.25rem;height:.8125rem}
.deck-input{position:fixed;top:50%;left:0;width:1px;height:1px;opacity:0;pointer-events:none}
.deck-glows{position:absolute;inset:0;z-index:-1;overflow:hidden}
.deck-glows::after{content:"";position:absolute;inset:0;background:rgba(27,15,40,.64)}
.deck-glow{position:absolute;inset:-90px;background-position:50% 90%;background-size:cover;filter:blur(44px) saturate(1.2);opacity:0;transition:opacity .6s ease}
.glow-taro{background-image:url(assets/glow-taro.webp)}
.glow-love{background-image:url(assets/glow-love.webp)}
.glow-money{background-image:url(assets/glow-money.webp)}
#deck-taro:checked~.deck-glows .glow-taro,#deck-love:checked~.deck-glows .glow-love,#deck-money:checked~.deck-glows .glow-money{opacity:1}
.deck{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);align-items:start;gap:clamp(24px,4vw,72px)}
.deck-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:clamp(8px,1.4vw,24px);padding-top:clamp(10px,1.2vw,18px)}
.pick{display:grid;justify-items:center;gap:.625rem;cursor:pointer;text-align:center;-webkit-tap-highlight-color:transparent}
.pick-art{width:100%;border-radius:clamp(4px,.5vw,8px);box-shadow:0 14px 26px -12px rgba(0,0,0,.85);opacity:.82;filter:saturate(.8);transition:transform .35s cubic-bezier(.2,.75,.25,1),opacity .35s ease,filter .35s ease,box-shadow .35s ease}
.pick span{padding-bottom:.25rem;border-bottom:1px solid transparent;font:400 clamp(.8125rem,1.14vw,1.0625rem)/1.2 var(--display);letter-spacing:.07em;text-transform:uppercase;transition:color .35s ease,border-color .35s ease}
#deck-taro:checked~.wrap .pick-taro .pick-art,#deck-love:checked~.wrap .pick-love .pick-art,#deck-money:checked~.wrap .pick-money .pick-art{opacity:1;filter:none;transform:translateY(clamp(-14px,-1vw,-8px));box-shadow:0 0 0 1px rgba(227,203,156,.7),0 18px 34px -12px rgba(227,203,156,.42)}
#deck-taro:checked~.wrap .pick-taro span,#deck-love:checked~.wrap .pick-love span,#deck-money:checked~.wrap .pick-money span{color:var(--brass-light);border-color:var(--brass-light)}
#deck-taro:focus-visible~.wrap .pick-taro .pick-art,#deck-love:focus-visible~.wrap .pick-love .pick-art,#deck-money:focus-visible~.wrap .pick-money .pick-art{outline:2px solid var(--ivory);outline-offset:3px}
.deck-panels{display:grid}
.deck-panel{grid-area:1/1;visibility:hidden;opacity:0;transform:translateY(10px);transition:opacity .35s ease,transform .35s ease,visibility 0s .35s}
#deck-taro:checked~.wrap .panel-taro,#deck-love:checked~.wrap .panel-love,#deck-money:checked~.wrap .panel-money{visibility:visible;opacity:1;transform:none;transition:opacity .35s ease .05s,transform .35s ease .05s}
.deck-panel h3{font:400 clamp(1.625rem,2.5vw,2.5rem)/1.1 var(--display);letter-spacing:.07em;text-transform:uppercase}
.deck-panel p{margin-top:.625rem;font-size:1.1875rem;line-height:1.35;text-wrap:balance}
.list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.875rem clamp(16px,2vw,32px);margin-block:1.125rem 1.5rem;font-size:1rem;line-height:1.3}
.list li{padding-top:.625rem;border-top:1px solid var(--hair-light)}

/* About: arch window with branches growing around it */
.about{overflow:clip;padding-block:clamp(40px,4vw,76px);background:linear-gradient(112deg,#ebe2f2,#f0e6ef 48%,#e2d6ec)}
.about-grid{display:grid;grid-template-columns:minmax(0,19.5rem) minmax(0,1fr) minmax(0,17.25rem);align-items:center;gap:clamp(24px,3.4vw,64px)}
.arch{position:relative;justify-self:center;width:min(100%,15.625rem);margin:.75rem 1.875rem}
.arch-frame{padding:.4375rem;border:1px solid var(--brass);border-radius:999px 999px 6px 6px}
.arch-window{aspect-ratio:3/4;overflow:hidden;border-radius:999px 999px 3px 3px}
.arch-window img{width:100%;height:100%;object-fit:cover;object-position:62% 12%;transform:scale(1.14);transform-origin:62% 18%}
.vine{position:absolute;bottom:-.75rem;width:62%;height:auto;overflow:visible;pointer-events:none}
.vine-l{left:-12%}
.vine-r{right:-12%;transform:scaleX(-1)}
.stem,.leaf{stroke:var(--brass);stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round}
.stem{fill:none}
.leaf{fill:rgba(169,134,83,.2)}
.spark{position:absolute;color:var(--brass)}
.s1{width:1.125rem;height:1.125rem;left:-1.375rem;top:2%}
.s2{width:.75rem;height:.75rem;right:-1.125rem;top:9%}
.s3{width:.5625rem;height:.5625rem;left:46%;top:-5%}
.role{margin-top:.25rem;margin-bottom:.875rem;font:italic 500 1.4375rem/1.2 var(--accent);text-wrap:balance}
.about-copy p:not(.role){max-width:62ch;line-height:1.5}
.about-copy p:not(.role) + p{margin-top:.625rem}
.perks{display:grid;gap:.75rem;padding-left:clamp(20px,2.6vw,48px);border-left:1px solid var(--hair)}
.perks li{display:grid;grid-template-columns:3.125rem minmax(0,1fr);align-items:center;gap:.75rem;font:italic 500 1.25rem/1.1 var(--accent)}
.perk-ic{display:grid;place-items:center;width:3.125rem;height:3.125rem;border:1px solid var(--brass);border-radius:50%;color:var(--wine);background:rgba(255,255,255,.34)}
.perk-ic svg{width:1.875rem;height:1.875rem}
.perk-num{font:400 1.3125rem/1 var(--display);letter-spacing:.04em}

/* Footer */
.site-footer{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(180deg,rgba(27,15,40,.5),rgba(27,15,40,.86)),url(assets/sky-stars.webp) center/cover,var(--night);color:var(--ivory)}
.footer-moon{position:absolute;z-index:-1;right:calc(var(--edge) - 40px);top:50%;width:clamp(240px,25vw,500px);height:auto;mix-blend-mode:screen;filter:brightness(1.35) saturate(1.2);-webkit-mask-image:radial-gradient(closest-side,#000 88%,transparent);mask-image:radial-gradient(closest-side,#000 88%,transparent);transform:translateY(-50%) rotate(-14deg)}
.footer-row{display:grid;justify-items:start;gap:1.125rem;padding-block:clamp(44px,4.6vw,88px) clamp(24px,2.2vw,40px)}
.footer-copy{margin-top:.875rem;font-size:.8125rem}
.falling-star{display:none}

/* Only devices with a real pointer get hover, so a tap on a phone leaves nothing stuck */
@media (hover:hover){
  .site-nav a:hover::after{left:0;right:0}
  .lang a:hover::after{left:.4rem;right:.4rem}
  .btn-main:hover{background:var(--ink)}
  .btn-line:hover{background:var(--ink);color:var(--ivory)}
  .btn-ivory:hover{background:var(--brass-light)}
  .btn-ghost:hover{border-color:var(--ivory);background:var(--ivory);color:var(--night)}
  .pick:hover .pick-art{opacity:1;filter:none}
}

/* Narrow desktop */
@media (max-width:1180px){
  .about-grid{grid-template-columns:minmax(0,19.5rem) minmax(0,1fr)}
  .perks{grid-column:1/-1;grid-template-columns:repeat(4,auto);justify-content:space-between;padding-left:0;padding-top:1.125rem;border-left:0;border-top:1px solid var(--hair)}
  .perks li{grid-template-columns:2.75rem auto;gap:.5625rem;font-size:1.125rem}
  .perk-ic{width:2.75rem;height:2.75rem}
}

/* The Telegram button shrinks to its icon, so the menu stays in the middle with the language pair added */
@media (max-width:990px){
  .header-cta .btn-sm{width:2.75rem;min-width:44px;padding:0}
  .header-cta .btn span{display:none}
}

/* Tablet: the text moves under the cards and takes only the height it needs */
@media (max-width:900px){
  :root{--photo-w:clamp(330px,50vw,450px);--hero-h:clamp(500px,62vw,560px)}
  .hero-copy{width:calc(100% - var(--photo-w)*.8)}
  h1{font-size:clamp(4.25rem,10vw,6rem)}
  .deck{grid-template-columns:minmax(0,1fr)}
  .deck-cards{max-width:34rem;width:100%;margin-inline:auto}
  .deck-panels{display:block}
  .deck-panel{display:none;visibility:visible;opacity:1;transform:none;transition:none}
  #deck-taro:checked~.wrap .panel-taro,#deck-love:checked~.wrap .panel-love,#deck-money:checked~.wrap .panel-money{display:block;transition:none}
  .about-grid{grid-template-columns:minmax(0,17rem) minmax(0,1fr)}
  .arch{width:min(100%,12.5rem)}
  .perks{grid-template-columns:repeat(2,minmax(0,1fr));justify-content:stretch;gap:.875rem}
  .hero-roses{display:none}
}

/* Small tablet: compact solid header */
@media (max-width:760px){
  :root{--header:3.25rem}
  .site-header{background:var(--lilac);-webkit-backdrop-filter:none;backdrop-filter:none}
  .header-row{gap:12px}
  .brand{font-size:1.25rem;letter-spacing:.2em}
  .brand-mark{width:2rem;height:2rem}
  .site-nav{gap:clamp(12px,2.6vw,24px)}
  .site-nav a,.lang>*{font-size:.75rem;letter-spacing:.12em}
  .header-cta{gap:.25rem}
  /* Both languages stay visible in the width of one link; a tap anywhere switches */
  .lang{position:relative;gap:.5rem;min-width:44px;justify-content:center}
  .lang>*{min-width:0;padding-left:0;letter-spacing:.06em}
  .lang [aria-current]::after,.lang a:focus-visible::after{left:0;right:0}
  .lang a{position:static}
  .lang a::before{content:"";position:absolute;inset:0;z-index:1}
  .hero{margin-top:0;padding-top:0}
  .hero-canvas{top:8px}
  .hero-body{min-height:var(--hero-h)}
  .footer-moon{right:-34px;top:-34px;width:190px;transform:rotate(-14deg)}
  .footer-row{padding-top:112px}
}

/* Phone: photo on top, one column, the first screen is one complete composition */
@media (max-width:640px){
  .brand{min-width:44px}
  .brand span,.site-nav a:last-child,.header-cta .btn-icon{display:none}
  .site-nav{gap:clamp(14px,5vw,28px)}
  .header-cta{gap:0}
  .header-cta .btn{width:2.75rem;min-width:44px;margin-right:-.5rem;padding:0;border:0;color:var(--wine)}
  .header-cta .icon{width:1.625rem;height:1.625rem}
  .hero{display:flex;flex-direction:column;min-height:calc(100vh - var(--header));min-height:calc(100svh - var(--header))}
  .hero-photo{position:relative;top:auto;right:auto;bottom:auto;flex:1 1 auto;width:100%;min-height:clamp(210px,58vw,400px);max-height:150vw;-webkit-mask-image:linear-gradient(0deg,transparent 0,#000 3rem);mask-image:linear-gradient(0deg,transparent 0,#000 3rem)}
  .hero-canvas{top:0;left:0;right:0}
  .hero-body{display:block;flex:none;min-height:0;margin-top:-.25rem;padding:0 var(--gutter) 1.5rem}
  .hero-copy{width:auto;max-width:35rem}
  .kicker{font-size:clamp(.6875rem,3.05vw,.8125rem);letter-spacing:.11em;white-space:nowrap}
  h1{margin-top:.125rem;font-size:min(calc((100vw - 2*var(--gutter))*.28),7.5rem)}
  .hero-sub{font-size:clamp(1.375rem,5.6vw,2rem)}
  .lead{margin-top:.625rem;font-size:1rem;line-height:1.45}
  .hero-copy .actions{margin-top:1rem}
  .title{font-size:clamp(1.75rem,8vw,2.25rem)}
  .deck{gap:1.125rem}
  .deck-cards{padding-top:.875rem}
  .pick span{font-size:clamp(.75rem,3.5vw,.9375rem);letter-spacing:.05em}
  .deck-panel h3{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .deck-panel p{margin-top:0}
  .deck-cta{width:100%}
  .about-grid{grid-template-columns:minmax(0,1fr);gap:1.75rem}
  .arch{width:13.125rem}
  .about-copy{max-width:37.5rem}
}

/* Short phones (iPhone SE and similar): buttons go before the text so they stay in the first screen */
@media (max-width:640px) and (max-height:620px){
  .hero-copy{display:flex;flex-direction:column}
  .hero-copy .actions{order:1}
  .lead{order:2;margin-top:.875rem}
}

@media (min-width:641px) and (max-height:480px){
  .hero{min-height:0}
  .hero-body{min-height:0;padding-block:10px 16px}
  .hero-copy{max-width:30rem}
  h1{font-size:3.75rem}
  .hero-sub{font-size:1.375rem}
  .lead{margin-top:.375rem;font-size:.9375rem;line-height:1.35}
  .hero-copy .actions{margin-top:.625rem}
}

@media (max-width:560px){
  .btn{padding-inline:.75rem}
  .hero-copy .actions,.site-footer .actions{display:grid;grid-template-columns:minmax(0,1fr) auto auto;width:100%}
  .perks li{grid-template-columns:minmax(0,1fr);justify-items:center;align-content:start;gap:.375rem;text-align:center}
}

@media (max-width:392px){
  .header-row{gap:8px}
  .site-nav{gap:12px}
  .site-nav a{letter-spacing:.06em}
}

@media (max-width:359px){
  .header-row{gap:6px}
  .site-nav{gap:10px}
  .site-nav a,.lang>*{font-size:.6875rem}
  .lang{gap:.25rem;min-width:36px}
  .header-cta .btn{margin-right:-.75rem}
}

@media (max-width:339px){
  .site-nav{gap:8px}
  .site-nav a{letter-spacing:.02em}
  .pick span{letter-spacing:.02em}
  .arch{width:11.25rem}
  .perks{column-gap:.5rem}
  .perks li{font-size:1.0625rem}
}

/* Where three buttons with words don't fit in a row, Instagram and WhatsApp become icons */
@media (max-width:1180px){
  .btn-alt{width:3.25rem;padding:0}
  .btn-alt span{display:none}
}

/* Animation. Everything is visible by default: hidden starts apply only when scripts run and motion is welcome */
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes settle{from{transform:scale(1.05)}to{transform:none}}
@keyframes dealIn{from{opacity:0;transform:translate(-14px,-40px) rotate(-16deg) scale(1.08)}}
@keyframes nudge{0%,27%,100%{transform:none}13%{transform:translateY(var(--hop))}}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes sprout{from{opacity:0;transform:scale(.1)}to{opacity:1;transform:none}}
@keyframes twinkle{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.1)}}
@keyframes moonrise{from{opacity:0;translate:0 44px}to{opacity:1;translate:0 0}}
@keyframes drift{0%{opacity:0;transform:translate(0,0) scale(.6)}18%{opacity:1}100%{opacity:0;transform:translate(var(--dx),-170%) scale(1.15)}}
@keyframes starfall{0%{opacity:0;transform:rotate(-26deg) translateX(0)}2%{opacity:1}9%{opacity:.9}12%,100%{opacity:0;transform:rotate(-26deg) translateX(calc(var(--run)*-1))}}

@media (prefers-reduced-motion:no-preference){
  .hero-copy > *{animation:rise .8s cubic-bezier(.2,.7,.2,1) backwards}
  .hero-copy > :nth-child(2){animation-delay:.08s}
  .hero-copy > :nth-child(3){animation-delay:.18s}
  .hero-copy > :nth-child(4){animation-delay:.28s}
  .hero-copy > :nth-child(5){animation-delay:.38s}
  .hero-canvas img{animation:settle 2.4s cubic-bezier(.2,.7,.2,1) backwards}

  .mote{--dx:12%;display:block;position:absolute;z-index:1;width:2.2%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fff3cf,rgba(255,206,128,.7) 42%,transparent 72%);mix-blend-mode:screen;animation:drift 7s ease-out infinite backwards}
  .m1{left:64%;top:36%}
  .m2{--dx:-34%;left:72%;top:38%;animation-delay:-1.8s;animation-duration:8.5s}
  .m3{left:81%;top:33%;width:1.6%;animation-delay:-3.1s}
  .m4{--dx:-20%;left:87%;top:37%;animation-delay:-4.6s;animation-duration:9s}
  .m5{--dx:26%;left:92%;top:34%;width:1.8%;animation-delay:-5.7s}
  .m6{--dx:-12%;left:58%;top:40%;width:1.5%;animation-delay:-2.5s;animation-duration:10s}

  .js .deck:not(.in) .pick-art{opacity:0!important}
  .js .deck:not(.in) .deck-panels{opacity:0}
  .js .deck.in .pick-art{animation:dealIn .75s cubic-bezier(.2,.75,.25,1) backwards}
  .js .deck.in .pick-love .pick-art{animation-delay:.12s}
  .js .deck.in .pick-money .pick-art{animation-delay:.24s}
  .js .deck.in .deck-panels{animation:rise .7s cubic-bezier(.2,.7,.2,1) .3s backwards}
  /* All three keep one rhythm for good; the open card just stays still */
  .js .deck.in .pick{--hop:-9px;animation:nudge 3.5s ease 1.9s infinite}
  .js .deck.in .pick-love{animation-delay:2.2s}
  .js .deck.in .pick-money{animation-delay:2.5s}
  .js #deck-taro:checked~.wrap .deck.in .pick-taro,.js #deck-love:checked~.wrap .deck.in .pick-love,.js #deck-money:checked~.wrap .deck.in .pick-money{--hop:0px}

  .js .arch:not(.in) .arch-frame,.js .arch:not(.in) .stem,.js .arch:not(.in) .leaf,.js .arch:not(.in) .spark{opacity:0}
  .js .arch.in .arch-frame{animation:rise .8s cubic-bezier(.2,.7,.2,1) backwards}
  .js .arch.in .stem{stroke-dasharray:1;animation:draw 2.1s cubic-bezier(.35,.1,.3,1) .25s backwards}
  .js .arch.in .leaf{animation:sprout .55s cubic-bezier(.2,.8,.3,1.25) calc(var(--d) + .25s) backwards}
  .js .arch.in .spark{animation:twinkle 4.5s ease-in-out 2.2s infinite backwards}
  .js .arch.in .s2{animation-delay:3s}
  .js .arch.in .s3{animation-delay:3.7s}

  .js .about-copy:not(.in),.js .perks:not(.in) li,.js .site-footer:not(.in) .footer-moon{opacity:0}
  .js .about-copy.in{animation:rise .8s cubic-bezier(.2,.7,.2,1) .1s backwards}
  .js .perks.in li{animation:rise .6s cubic-bezier(.2,.7,.2,1) backwards}
  .js .perks.in li:nth-child(2){animation-delay:.12s}
  .js .perks.in li:nth-child(3){animation-delay:.24s}
  .js .perks.in li:nth-child(4){animation-delay:.36s}
  .js .site-footer.in .footer-moon{animation:moonrise 1.5s cubic-bezier(.2,.7,.2,1) backwards}

  /* One star roughly every 2 s, in the free part of the footer so none crosses the text */
  .falling-star{--run:clamp(200px,22vw,480px);display:block;position:absolute;z-index:-1;width:clamp(64px,7vw,130px);height:2px;border-radius:2px;background:linear-gradient(90deg,#fff3cf,rgba(255,206,128,.5) 35%,transparent);filter:drop-shadow(0 0 3px rgba(255,220,160,.8));opacity:0;pointer-events:none}
  .site-footer.in .falling-star{animation:starfall 10s linear .5s infinite}
  .site-footer.in .f1{left:70%;top:4%}
  .site-footer.in .f2{left:88%;top:-2%;animation-delay:2.5s;animation-duration:11s}
  .site-footer.in .f3{left:72%;top:22%;animation-delay:4.4s;animation-duration:9s}
  .site-footer.in .f4{left:98%;top:26%;animation-delay:6.5s;animation-duration:12s}
  .site-footer.in .f5{left:80%;top:8%;animation-delay:8.3s}
}

@media (max-width:900px) and (prefers-reduced-motion:no-preference){
  .deck-panel{animation:rise .45s cubic-bezier(.2,.7,.2,1) backwards}
  .site-footer.in .f1{left:76%;top:2%}
}

@media (max-width:760px) and (prefers-reduced-motion:no-preference){
  .falling-star{--run:180px}
  .site-footer.in .f1{left:52%;top:6px}
  .site-footer.in .f2{left:100%;top:0}
  .site-footer.in .f3{left:68%;top:14px}
  .site-footer.in .f4{left:90%;top:12px}
  .site-footer.in .f5{left:80%;top:2px}
}

@media (prefers-reduced-motion:reduce){
  .flame{animation:none}
  .btn,.pick-art,.pick span,.deck-glow,.deck-panel{transition:none}
}