/* Paper Village · قريتي الصغيرة — the website. One light theme on purpose: every colour is a token from the app's
   lib/core/palette.dart, set explicitly. Mobile first; RTL by default (logical properties), English mirrors it. */

@font-face{font-family:"Handjet";src:url(/assets/fonts/Handjet-SemiBold.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Handjet";src:url(/assets/fonts/Handjet-Bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Arabic";src:url(/assets/fonts/IBMPlexSansArabic-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Arabic";src:url(/assets/fonts/IBMPlexSansArabic-SemiBold.woff2) format("woff2");font-weight:600 700;font-style:normal;font-display:swap}

:root{
  color-scheme:light;
  --navy:#1E3A5F;--navy-deep:#13243B;--navy-soft:#2E4B73;
  --cream:#F6ECD9;--paper:#FBF5E8;--white:#FFFBF2;--bg:#F3E8D3;
  --sage:#8CA68C;--sage-deep:#5F7D5F;--sage-light:#E3ECDD;
  --pink:#D79BA7;--pink-light:#E9BBC4;--rare:#B76F80;
  --sky:#8FA7C7;--sky-light:#CFE0EE;
  --gold:#D3A13F;--gold-deep:#B9861F;
  --ink:#B8405C;--ink-deep:#8E2C44;--ink2:#5D6B7E;
  --polaroid:#FFFFFF;
  --hard:rgba(30,58,95,.28);
  --px:"Handjet","Plex Arabic",system-ui,sans-serif;
  --body:"Plex Arabic",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;
  --gut:16px;--max:1120px;
  --speckle:radial-gradient(rgba(30,58,95,.045) .6px,transparent .9px) 0 0/6px 6px,radial-gradient(rgba(185,134,31,.04) .7px,transparent 1px) 3px 3px/9px 9px;
}
@media (min-width:768px){:root{--gut:28px}}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--paper);color:var(--navy);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--speckle),var(--paper);color:var(--navy);font:400 17px/1.8 var(--body);font-synthesis:none;overflow-wrap:break-word}
html[lang=en] body{line-height:1.65}
img,svg,video{max-width:100%}
img{height:auto}
h1,h2,h3{font-family:var(--px);font-weight:700;line-height:1.05;letter-spacing:0;margin:0;color:inherit}
h2{font-size:clamp(36px,8.6vw,58px);margin-bottom:14px;text-wrap:balance}
h1,h3{text-wrap:balance}
p{margin:0 0 14px}
a{color:var(--navy);text-decoration-thickness:2px;text-underline-offset:4px;text-decoration-color:var(--pink)}
a:hover{color:var(--ink-deep)}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.top :focus-visible,.band :focus-visible,.foot :focus-visible{outline-color:var(--gold)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.px-ic{width:24px;height:24px;fill:currentColor;flex:0 0 auto;display:block}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.wrap-narrow{max-width:760px;margin-inline:auto;padding-inline:var(--gut)}
.skip{position:absolute;top:-80px;inset-inline-start:12px;z-index:50;background:var(--cream);color:var(--navy);padding:10px 16px;font:700 20px/1 var(--px);border:2px solid var(--navy)}
.skip:focus{top:12px}

/* ---------------------------------------------------------------- top bar */
.top{background:var(--navy);color:var(--cream);border-bottom:2px solid var(--navy-soft)}
.top-in{display:flex;align-items:center;gap:12px;min-height:64px}
.brand{display:flex;align-items:center;gap:10px;color:var(--cream);text-decoration:none;font:700 26px/1 var(--px);min-height:44px;margin-inline-end:auto}
.brand:hover{color:var(--white)}
.mark{width:30px;height:30px;flex:0 0 auto}
.mark .mk-i{fill:var(--cream)}.mark .mk-l{fill:var(--gold)}
.top-nav{display:none}
.top-nav ul{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.top-nav a{display:block;padding:8px 12px;color:var(--cream);text-decoration:none;font:600 21px/28px var(--px)}
.top-nav a:hover{color:var(--gold)}
.lang{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:4px 14px;border:2px solid var(--cream);color:var(--cream);text-decoration:none;font:700 20px/1 var(--px)}
.lang .px-ic{width:18px;height:18px}
.lang:hover{background:var(--cream);color:var(--navy)}
@media (min-width:900px){.top-nav{display:block}}

/* ---------------------------------------------------------------- hero
   The key art is painted with the cottage on the physical left and open sky on the right, so the card sits on the
   physical right in both languages (margin-left:auto), and the picture is never mirrored. */
.hero{position:relative;overflow:hidden;background:radial-gradient(rgba(246,236,217,.13) 1.2px,transparent 1.7px) 0 0/26px 26px,var(--navy)}
.hero-art{position:relative;aspect-ratio:5/4;overflow:hidden;background:var(--navy-soft)}
.hero-art picture,.hero-still,.hero-clip{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-still,.hero-clip{object-fit:cover;object-position:22% 62%}
.hero-clip{opacity:0;transition:opacity .6s}
.hero-clip.on{opacity:1}
.hero-btn{bottom:auto;top:14px;left:auto;right:14px;translate:none}
.hero-in{position:relative;z-index:2;padding-bottom:30px}
.hero-card{position:relative;margin-top:-26px;max-width:540px;margin-left:auto;background:var(--speckle),var(--paper);color:var(--navy);border:2px solid var(--navy);box-shadow:6px 6px 0 var(--navy-deep);padding:30px 20px 22px}
.hero-card .tape{left:auto;right:28px;transform:rotate(4deg)}
.hero-stk{position:absolute;top:-30px;left:14px;width:64px;height:auto;transform:rotate(-10deg);filter:drop-shadow(3px 3px 0 rgba(19,36,59,.35))}
.app-icon{display:block;width:68px;height:68px;border-radius:22.37%;border:3px solid var(--navy);box-shadow:4px 4px 0 var(--sage);transform:rotate(-3deg)}
.eyebrow{font:600 22px/1.2 var(--px);color:var(--ink);margin:18px 0 6px}
.hero h1{margin:0}
.h-name{display:block;font-size:clamp(54px,15vw,96px);line-height:.95}
.h-wm{display:block;font-size:clamp(20px,5.2vw,28px);letter-spacing:.14em;color:var(--ink2);margin-top:10px}
.h-wm:lang(ar){letter-spacing:0}
.lead{font-size:18px;max-width:31em;margin:16px 0 22px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.cta{display:inline-flex;align-items:center;gap:10px;min-height:54px;padding:8px 22px;border:2px dashed var(--navy);color:var(--navy);font:700 23px/1.1 var(--px);text-decoration:none}
.cta-ic{width:22px;height:22px;fill:var(--ink)}
a.cta{border-style:solid;background:var(--navy);color:var(--cream);box-shadow:0 5px 0 var(--sage)}
a.cta .cta-ic{fill:var(--pink-light)}
a.cta:hover{background:var(--navy-soft);color:var(--cream)}
a.cta:active{transform:translateY(3px);box-shadow:0 2px 0 var(--sage)}
.facts{display:flex;flex-wrap:wrap;gap:6px 18px;list-style:none;padding:0;margin:18px 0 0;font-size:15px;color:var(--ink2)}
.facts li{display:flex;align-items:center;gap:8px}
.facts li::before{content:"";width:7px;height:7px;background:var(--gold);flex:0 0 auto}
.ground{height:22px;background:var(--navy-soft);border-top:3px solid var(--cream);position:relative;z-index:2}
@media (min-width:768px){
  .hero{display:grid;min-height:clamp(600px,calc(100vh - 66px),820px);background:var(--navy-soft)}
  .hero-art{position:absolute;inset:0 0 22px;aspect-ratio:auto}
  .hero-still,.hero-clip{object-position:30% 50%}
  .hero-btn{top:auto;bottom:22px;right:auto;left:22px}
  .hero-in{display:flex;align-items:center;width:100%;padding-block:48px 70px}
  .hero-card{margin-top:0;width:min(470px,58%);padding:34px 30px 26px}
  .app-icon{width:84px;height:84px}
  .hero-card .h-name{font-size:clamp(60px,7vw,92px)}
  .ground{position:absolute;left:0;right:0;bottom:0}
}
@media (min-width:1100px){.hero-card{margin-right:3%}}

/* the four stickers around the home clip */
.day-media{position:relative;padding-block:12px}
.stickers img{position:absolute;width:auto;height:62px;filter:drop-shadow(3px 3px 0 rgba(30,58,95,.3));z-index:3}
.stk1{top:5%;inset-inline-start:4%;transform:rotate(-12deg)}
.stk2{top:24%;inset-inline-end:2%;transform:rotate(10deg)}
.stk3{top:54%;inset-inline-start:0;transform:rotate(8deg)}
.stk4{top:72%;inset-inline-end:4%;transform:rotate(-9deg)}
@media (min-width:900px){.stickers img{height:78px}.stk1{inset-inline-start:10%}.stk3{inset-inline-start:6%}.stk2{inset-inline-end:8%}.stk4{inset-inline-end:12%}}

/* ---------------------------------------------------------------- phones and pictures */
.phone{position:relative;margin:0;width:min(280px,74vw);padding:9px;background:var(--navy-deep);border-radius:46px;box-shadow:8px 8px 0 var(--hard)}
.screen{position:relative;aspect-ratio:393/852;border-radius:37px;overflow:hidden;background:var(--navy-soft)}
.screen::after{content:"";position:absolute;top:11px;left:50%;transform:translateX(-50%);width:28%;height:21px;border-radius:12px;background:var(--navy-deep);z-index:2}
.clip{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.clip-btn{position:absolute;bottom:22px;left:50%;translate:-50% 0;z-index:3;width:44px;height:44px;padding:0;display:grid;place-items:center;border:2px solid var(--navy);background:var(--cream);color:var(--navy);box-shadow:0 3px 0 var(--navy);cursor:pointer}
.clip-btn .px-ic{width:20px;height:20px}
.clip-btn .i-play{display:none}
.clip-btn[data-state=paused] .i-pause{display:none}
.clip-btn[data-state=paused] .i-play{display:block}
.clip-btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--navy)}
.polaroid{position:relative;margin:0;background:var(--polaroid);padding:8px 8px 36px;box-shadow:4px 5px 0 var(--hard)}
.polaroid img{display:block;width:100%}
.polaroid figcaption{position:absolute;left:0;right:0;bottom:6px;text-align:center;font:600 19px/1.2 var(--px);color:var(--navy)}

/* ---------------------------------------------------------------- sections */
.sec{padding-block:72px}
.sec-head{max-width:46em;margin-bottom:34px}
.copy p{max-width:36em}
.mini-h{font-size:30px;margin:30px 0 14px}
.two{display:grid;gap:44px}
.media{display:grid;place-items:center}
@media (min-width:900px){
  .sec{padding-block:104px}
  .two{grid-template-columns:1fr 1fr;align-items:center;gap:64px}
}
.card{background:var(--white);border:2px solid var(--navy);box-shadow:6px 6px 0 var(--navy)}
.tape{position:absolute;top:-13px;left:50%;width:96px;height:24px;transform:translateX(-50%) rotate(-3deg);background:repeating-linear-gradient(135deg,rgba(215,155,167,.82) 0 6px,rgba(233,187,196,.82) 6px 12px);box-shadow:0 1px 0 rgba(30,58,95,.12)}
.tape-sage{background:repeating-linear-gradient(135deg,rgba(140,166,140,.85) 0 6px,rgba(227,236,221,.85) 6px 12px)}
.tape-sky{background:repeating-linear-gradient(135deg,rgba(143,167,199,.85) 0 6px,rgba(207,224,238,.85) 6px 12px)}
.tape-gold{background:repeating-linear-gradient(135deg,rgba(211,161,63,.8) 0 6px,rgba(246,236,217,.8) 6px 12px)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:8px 20px;background:var(--navy);color:var(--cream);border:2px solid var(--navy);box-shadow:0 4px 0 var(--sage);font:700 22px/1 var(--px);text-decoration:none;cursor:pointer;border-radius:0}
.btn:hover{background:var(--navy-soft);color:var(--cream)}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--sage)}
.btn .px-ic{width:22px;height:22px}
.link-arrow{font:700 22px/1.4 var(--px)}
.hint{font-size:14px;color:var(--ink2);margin:14px 0 0}
.rar{display:inline-block;font:700 14px/1.45 var(--px);padding:0 7px;border:1.5px solid;white-space:nowrap}
.rar-c{background:var(--sage-light);color:var(--navy);border-color:var(--sage-deep)}
.rar-r{background:var(--pink-light);color:var(--ink-deep);border-color:var(--rare)}
.rar-l{background:var(--gold);color:var(--navy);border-color:var(--gold-deep)}
input[type=text]{width:100%;min-height:50px;padding:8px 14px;border:2px solid var(--navy);border-radius:0;background:var(--white);color:var(--navy);font:400 18px/1.4 var(--body);box-shadow:inset 3px 3px 0 rgba(30,58,95,.1)}
input[type=text]::placeholder{color:var(--ink2);opacity:1}
fieldset{border:0;margin:0;padding:0;min-width:0}
.ctl-label{display:block;font:700 22px/1.2 var(--px);margin:18px 0 10px;padding:0}

/* ---------------------------------------------------------------- a day */
.loop{list-style:none;padding:0;margin:0;display:grid;gap:34px 22px}
.note{position:relative;background:var(--white);border:2px solid var(--navy);box-shadow:5px 5px 0 var(--navy);padding:28px 20px 18px}
.note-ic .px-ic{width:34px;height:34px}
.note h3{font-size:31px;margin:10px 0 6px}
.note p{margin:0;font-size:16px}
.aside{display:flex;gap:12px;align-items:center;margin:34px 0 0;color:var(--ink2)}
.aside .px-ic{color:var(--gold-deep)}
@media (min-width:600px){.loop{grid-template-columns:1fr 1fr}}
.day-in .copy p{max-width:40em}

/* ---------------------------------------------------------------- dress-up */
.sec-res{background:var(--speckle),var(--bg)}
.dress{display:grid;overflow:hidden}
.stage{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--sky-light);border-bottom:2px solid var(--navy)}
.stage-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.who{position:absolute;bottom:6%;left:50%;translate:-50% 0;height:66%;width:auto;max-width:none;transform-origin:50% 100%}
.pet{position:absolute;bottom:6%;left:13%;height:23%;width:auto;max-width:none;transform-origin:50% 100%}
.stage-tag{position:absolute;top:12px;inset-inline-start:12px;margin:0;max-width:calc(100% - 24px);background:var(--cream);border:2px solid var(--navy);box-shadow:2px 2px 0 var(--navy);padding:2px 10px;font:600 15px/1.6 var(--body)}
.controls{padding:18px 18px 22px}
.controls .looks,.controls .cats{margin-top:8px}
.seg{display:inline-flex;border:2px solid var(--navy);box-shadow:3px 3px 0 var(--navy);background:var(--cream)}
.seg label{position:relative;display:block;cursor:pointer}
.seg input,.tile input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.seg span{display:block;min-width:80px;min-height:46px;padding:4px 18px;font:700 25px/38px var(--px);text-align:center}
.seg label+label span{border-inline-start:2px solid var(--navy)}
.seg input:checked+span{background:var(--navy);color:var(--cream)}
.seg input:focus-visible+span,.tile input:focus-visible+.tile-in{outline:3px solid var(--ink);outline-offset:3px;position:relative;z-index:1}
.tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.tile{position:relative;display:block;cursor:pointer;min-width:44px}
.tile-in{display:block;border:2px solid var(--navy);background:var(--cream);box-shadow:2px 2px 0 var(--hard);transition:transform .12s}
.tile-face .tile-in,.tile-cat .tile-in{aspect-ratio:1;overflow:hidden}
.tile-in img{display:block;width:100%;height:100%;object-fit:cover}
.tile-cat img{object-fit:contain;padding:4px}
.tile:hover .tile-in{transform:translateY(-2px)}
.tile input:checked+.tile-in{background:var(--pink-light);box-shadow:inset 0 0 0 2px var(--navy),3px 3px 0 var(--navy)}
.cats .tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
.who.hop,.pet.hop{animation:hop .38s cubic-bezier(.3,1.5,.5,1)}
@keyframes hop{0%{transform:none}35%{transform:translateY(-7%) scale(.97,1.04)}70%{transform:scale(1.03,.96)}100%{transform:none}}
@media (min-width:720px){
  .dress{grid-template-columns:1fr 1fr}
  .stage{aspect-ratio:auto;min-height:440px;border-bottom:0;border-inline-end:2px solid var(--navy)}
}
@media (min-width:900px){
  .sec-res .two{grid-template-columns:.75fr 1.25fr}
  .cats .tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ---------------------------------------------------------------- room + village */
.road{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(98px,1fr));gap:10px}
.road li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;background:var(--white);border:2px solid var(--navy);box-shadow:3px 3px 0 var(--hard);padding:10px 6px 8px}
.road img{height:58px;width:auto;max-width:100%;object-fit:contain;margin-bottom:4px}
.road .lv{font:700 16px/1.2 var(--px);color:var(--sage-deep)}
.road .nm{font-size:13px;line-height:1.35}
.places-wrap{margin-top:56px}
.places-wrap>p{max-width:40em}
.places{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:14px}
.ticket{display:grid;grid-template-columns:auto 1fr;gap:2px 14px;align-items:center;background:var(--cream);border:2px solid var(--navy);padding:12px 16px;box-shadow:3px 3px 0 var(--hard)}
.ticket .lv{grid-row:span 2;align-self:stretch;display:grid;place-items:center;width:96px;font:700 19px/1.1 var(--px);background:var(--navy);color:var(--cream);padding:6px 8px;text-align:center}
.ticket b{font:700 26px/1.1 var(--px)}
.ticket span:last-child{font-size:15px;line-height:1.55}
@media (min-width:700px){.places{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.places{grid-template-columns:repeat(3,1fr)}}

/* ---------------------------------------------------------------- pond + focus */
.sec-pond{background:var(--speckle),var(--sky-light)}
.duo{display:flex;align-items:flex-end;justify-content:center}
.duo .phone{width:min(250px,58vw);flex:0 0 auto}
.pol-focus{width:min(196px,40vw);flex:0 0 auto;margin-inline-start:-46px;margin-bottom:-14px;transform:rotate(4deg);z-index:2}
.fish{list-style:none;padding:0;margin:6px 0 22px;display:flex;flex-wrap:wrap;gap:12px 10px}
.fish li{display:flex;flex-direction:column;align-items:center;gap:3px;width:86px;text-align:center;font-size:13px;line-height:1.3}
.fish img{height:62px;width:auto;filter:drop-shadow(2px 2px 0 rgba(30,58,95,.22))}
@media (min-width:900px){.sec-pond .two{grid-template-columns:1fr 1fr}}

/* ---------------------------------------------------------------- stamps */
.stamp-grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 10px}
.stamp-grid li{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.stamp-grid img{width:100%;max-width:86px;filter:drop-shadow(2px 3px 0 rgba(30,58,95,.24));transform:rotate(-3deg)}
.stamp-grid li:nth-child(even) img{transform:rotate(3deg)}
.stamp-grid li:nth-child(3n) img{transform:rotate(-1deg)}
.st-n{font-size:14px;line-height:1.3}
@media (min-width:700px){.stamp-grid{grid-template-columns:repeat(8,minmax(0,1fr))}}
.line-moment{display:grid;gap:34px;margin-top:64px;align-items:center}
.line-moment>*,.two>*,.hero-in>*,.dress>*,.cover-tool>*{min-width:0}
.line-row input{min-width:0}
.diary-page{position:relative;min-height:320px;padding:30px 22px 22px;border:2px solid var(--navy);box-shadow:6px 6px 0 var(--navy);
  background:repeating-linear-gradient(to bottom,transparent 0 34px,rgba(30,58,95,.16) 34px 36px) 0 104px/100% calc(100% - 104px) no-repeat,var(--white)}
.diary-page .tape{left:auto;inset-inline-end:26px;transform:rotate(4deg)}
.pg-date{font:600 19px/1.2 var(--px);color:var(--ink2);margin:0}
.pg-title{font:700 32px/1.1 var(--px);margin:4px 0 20px}
.pg-line{font-size:18px;line-height:36px;margin:0;min-height:72px;max-width:30em}
.pg-stamps{position:absolute;left:0;right:0;bottom:0;height:52%;pointer-events:none}
.pg-stamp{position:absolute;width:88px;height:auto;transform:rotate(var(--r,0deg));filter:drop-shadow(2px 3px 0 rgba(30,58,95,.26))}
.pg-stamp.s0{left:64%;top:22%;--r:8deg}
.line-form label{display:block;font-weight:600;margin-bottom:8px}
.line-form .mini-h{margin-top:0}
.line-row{display:flex;flex-wrap:wrap;gap:12px}
.line-row input{flex:1 1 220px;width:auto}
.status{min-height:1.8em;margin:12px 0 0;color:var(--ink2);font-size:15px}
@media (min-width:900px){.line-moment{grid-template-columns:1.05fr .95fr;gap:64px}}

/* ---------------------------------------------------------------- book */
.sec-book{background:var(--speckle),var(--bg)}
.cover-tool{display:grid;overflow:hidden}
.cover-stage{display:grid;place-items:center;padding:30px 20px;border-bottom:2px solid var(--navy);background:radial-gradient(rgba(30,58,95,.08) 2px,transparent 2.6px) 0 0/22px 22px,var(--cream)}
.cover-box{position:relative;width:min(236px,62vw)}
.cover-img{display:block;width:100%;filter:drop-shadow(8px 9px 0 rgba(30,58,95,.32))}
.cover-title{position:absolute;left:27%;top:14%;width:46%;height:13%;display:flex;align-items:center;justify-content:center;color:var(--navy);font:700 22px/1 var(--px);letter-spacing:0;pointer-events:none}
.cover-title span{display:block;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:center}
.cover-box.swap{animation:settle .34s cubic-bezier(.3,1.4,.5,1)}
@keyframes settle{0%{transform:rotate(-4deg) scale(.95)}100%{transform:none}}
.covers .tiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.tile-cover .tile-in{background:transparent;border:0;box-shadow:none;padding:4px 4px 0;text-align:center}
.tile-cover img{height:auto;object-fit:contain;filter:drop-shadow(2px 2px 0 var(--hard))}
.tile-cover .lv{display:block;font:700 14px/1.6 var(--px);color:var(--ink2)}
.tile-cover input:checked+.tile-in{background:var(--pink-light);box-shadow:inset 0 0 0 2px var(--navy)}
@media (min-width:720px){
  .cover-tool{grid-template-columns:1fr 1fr}
  .cover-stage{border-bottom:0;border-inline-end:2px solid var(--navy)}
}
@media (min-width:900px){.sec-book .two{grid-template-columns:.8fr 1.2fr}.sec-book .copy{order:0}}

/* ---------------------------------------------------------------- privacy band + end */
.band{color:var(--cream);background:radial-gradient(rgba(246,236,217,.1) 1.2px,transparent 1.7px) 0 0/26px 26px,var(--navy)}
.band h2{color:var(--cream)}
.band a{color:var(--gold)}
.band a:hover{color:var(--cream)}
.band-in{display:grid;gap:30px;align-items:center}
.band-art{display:flex;align-items:flex-end;justify-content:center;gap:10px}
.rubber{display:grid;place-items:center;width:156px;height:156px;border:4px solid var(--pink-light);border-radius:50%;color:var(--pink-light);transform:rotate(-12deg);box-shadow:inset 0 0 0 5px var(--navy),inset 0 0 0 8px var(--pink-light);text-align:center;font:700 27px/1.05 var(--px)}
.band-cat{width:150px;height:auto;margin-inline-start:-18px}
@media (min-width:900px){.band-in{grid-template-columns:1.4fr .6fr;gap:56px}.rubber{width:180px;height:180px;font-size:31px}}
.sec-end{text-align:center}
.end-in{display:flex;flex-direction:column;align-items:center}
.end-icon{width:112px;height:112px;border-radius:22.37%;border:3px solid var(--navy);box-shadow:5px 5px 0 var(--sage);margin-bottom:22px;transform:rotate(3deg)}
.sec-end h2 span{display:block}
.sec-end .h-wm{color:var(--ink2);font-size:24px;margin:6px 0 24px}
.sec-end .cta{color:var(--navy)}
.sec-end a.cta{background:var(--navy);color:var(--cream);border-color:var(--navy)}
.sec-end .cta-row{justify-content:center;margin-bottom:18px}
.sec-end p{color:var(--ink2)}

/* ---------------------------------------------------------------- footer */
.foot{background:var(--navy-deep);color:var(--cream);padding-block:40px 34px}
.foot-in{display:grid;gap:14px}
.foot-brand{display:flex;align-items:center;gap:10px;margin:0;font:700 24px/1.2 var(--px)}
.foot-nav ul{display:flex;flex-wrap:wrap;gap:2px 8px;list-style:none;margin:0;padding:0}
.foot-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;color:var(--cream);font:600 20px/1 var(--px);text-decoration:none}
.foot-nav li:first-child a{padding-inline-start:0}
.foot-nav a:hover{color:var(--gold)}
.foot-small{margin:0;font-size:13px;line-height:1.7;color:var(--sky-light)}
.foot-small a{color:var(--sky-light)}

/* ---------------------------------------------------------------- privacy and support pages */
.doc{padding-block:36px 80px}
.crumb{margin:0 0 6px}
.crumb a{font:600 20px/1.4 var(--px)}
.doc h1{font-size:clamp(48px,12vw,72px);line-height:1;margin:6px 0 10px}
.meta{color:var(--ink2);font-size:15px;margin:0 0 22px}
.intro{font-size:19px;max-width:38em}
.doc section{padding-top:28px;margin-top:28px;background:linear-gradient(90deg,var(--navy) 50%,transparent 0) top left/6px 2px repeat-x}
.doc section h2{font-size:clamp(28px,6vw,36px);line-height:1.15;margin:0 0 10px}
.doc section p{max-width:38em}
.toc{padding:16px 22px 10px;margin:26px 0 6px}
.toc ol{margin:0;padding-inline-start:24px}
.toc li{margin-bottom:6px}
.toc a{text-decoration-color:var(--sky)}
.doc .contact{margin-top:48px;padding:24px 22px 20px;background:var(--white)}
.doc .contact h2{font-size:34px}
.addr span{display:inline-block;padding:4px 12px;background:var(--cream);border:2px dashed var(--navy);font:600 19px/1.5 var(--body);-webkit-user-select:all;user-select:all}
.cross{margin-top:30px}

/* ---------------------------------------------------------------- 404 */
.nf{padding-block:48px 80px;text-align:center}
.nf-code{font:700 clamp(110px,34vw,190px)/.9 var(--px);margin:0}
.nf-cat{display:block;width:210px;margin:0 auto 18px}
.nf h1{font-size:clamp(36px,9vw,52px);margin-bottom:10px}
.nf-en{margin-top:44px;padding-top:26px;background:linear-gradient(90deg,var(--navy) 50%,transparent 0) top left/6px 2px repeat-x}
.nf-en h2{font-size:30px;margin-bottom:8px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}