/* Wanderdew's site, in the game's own look (app/Wanderdew/Theme.swift): cream paper, warm brown ink and lines, leaf
   green for what can be pressed, butter for what is new, round corners, soft shadows only under cards. Titles in Jua,
   the game's title face, served from this site and cut by make_copy.py to the letters the titles use; the rest in the
   system's rounded fonts. Nothing is loaded from elsewhere. Written for a phone first; wider screens come at the end. */
/* Jua is one weight, declared for all of them so that bold titles are not thickened by the browser. Its Latin is
   preloaded by every page; its Hangul loads only where Korean titles are on the page. Jua has no kana or kanji, so
   Japanese titles stay in the rounded system font. Until Jua arrives, titles show in that font. */
@font-face{font-family:Jua;src:url(/fonts/jua-latin.woff2?v=38ddf32f) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0020-007E,U+00A0,U+201C-201D}
@font-face{font-family:Jua;src:url(/fonts/jua-ko.woff2?v=1fd35b37) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+1100-11FF,U+3130-318F,U+AC00-D7A3}
:root{--paper:#fff7e8;--deep:#f6e8cc;--card:#fffcf4;--ink:#5a4232;--soft:#7e6650;--line:#d9c3a0;--line2:#b8976e;
  --leaf:#7db65a;--leafdeep:#4e8a3a;--link:#3f7530;--butter:#ffd86b;--sepia:#c9b08a;
  --font:ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Segoe UI",Roboto,"Noto Sans KR",sans-serif;
  --font-ja:ui-rounded,"SF Pro Rounded","Hiragino Maru Gothic ProN","Hiragino Sans",-apple-system,"Yu Gothic","Noto Sans JP",sans-serif;
  --title:Jua,var(--font);
  color-scheme:light}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--paper)}
body{margin:0;color:var(--ink);font:16px/1.7 var(--font);-webkit-font-smoothing:antialiased;
  background:var(--paper) radial-gradient(rgba(184,151,110,.09) 1px,transparent 1.4px) 0 0/7px 7px}
:lang(ja){font-family:var(--font-ja);font-synthesis-weight:auto;line-break:strict}
[hidden]{display:none!important}
[id]{scroll-margin-top:14px}
a{color:var(--link)}
img{max-width:100%}
:lang(ko) :is(p,li,h1,h2,h3,td,figcaption,span,b){word-break:keep-all}
/* Titles in Jua. In Japanese, :lang(ja) above outranks the bare h1–h3, so only the name keeps Jua there. */
h1,h2,h3,.home h1,.brand,main>header a,.closing .name{font-family:var(--title);font-synthesis-weight:none}

/* Support, privacy, terms: one column of paper, a part per language. */
main{max-width:760px;margin:0 auto;padding:max(24px,env(safe-area-inset-top)) 20px 48px}
main>header a{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-weight:800;font-size:21px}
main>header img{width:36px;height:36px;border-radius:9px;box-shadow:0 0 0 2px var(--line)}
.langs{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 0;padding:0;list-style:none}
.langs a{display:inline-block;padding:4px 14px;border-radius:999px;background:var(--card);box-shadow:0 0 0 2px var(--line);color:var(--ink);font-weight:700;font-size:14px;text-decoration:none}
.langs a[aria-current]{background:var(--leafdeep);box-shadow:none;color:#fff}
main h1{font-size:32px;line-height:1.2;letter-spacing:-.01em;margin:30px 0 4px}
.updated{color:var(--soft);font-size:14px;margin:0 0 18px}
main h2{font-size:21px;line-height:1.35;margin:36px 0 8px}
main h3{font-size:17px;line-height:1.4;margin:22px 0 4px}
main p,main li{font-size:16px}
.card{background:var(--card);border-radius:20px;box-shadow:0 0 0 2px var(--line);padding:14px 20px;margin:16px 0}
.card h3{margin-top:4px}
main ul{padding-left:22px}
table{width:100%;border-collapse:collapse;font-size:15px;margin:10px 0}
th,td{text-align:left;vertical-align:top;padding:10px;border-bottom:1.5px solid var(--line)}
th{font-size:13px;letter-spacing:.02em}
@media (max-width:600px){table,thead,tbody,tr,th,td{display:block}thead{display:none}tr{border-bottom:1.5px solid var(--line);padding:8px 0}
  td{border:0;padding:4px 0}td::before{content:attr(data-label);display:block;font-size:12px;font-weight:800;color:var(--soft)}}
hr{border:0;border-top:2px dashed var(--line);margin:52px 0}
main footer{margin-top:48px;padding-top:18px;border-top:2px dashed var(--line);font-size:13px;color:var(--soft);display:flex;gap:10px 16px;flex-wrap:wrap}
main footer a{color:var(--soft)}

/* Home: the header picture the CEO chose, fading into paper; the game in a phone; the store screenshots; then one
   panel per idea, each in the colour of its place on the island. */
.home .wrap{max-width:1080px;margin:0 auto;padding-left:18px;padding-right:18px}
.home .top{position:absolute;inset:0 0 auto;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:max(12px,env(safe-area-inset-top))}
.brand{display:inline-flex;align-items:center;gap:8px;padding:4px 14px 4px 4px;border-radius:999px;background:rgba(255,252,244,.92);box-shadow:0 0 0 2px var(--line);color:var(--ink);font-weight:800;font-size:17px;text-decoration:none}
.brand img{width:30px;height:30px;border-radius:8px}
.pick{display:flex;padding:3px;border-radius:999px;background:rgba(255,252,244,.92);box-shadow:0 0 0 2px var(--line);font-size:13px}
.pick button{font:inherit;font-weight:700;color:var(--ink);background:none;border:0;padding:4px 9px;border-radius:999px;cursor:pointer}
.pick button[aria-pressed=true]{background:var(--leafdeep);color:#fff}
.hero img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;-webkit-mask-image:linear-gradient(#000 64%,transparent 99%);mask-image:linear-gradient(#000 64%,transparent 99%)}
.stage{position:relative;display:grid;gap:30px;justify-items:center;margin-top:-22vw;padding-bottom:10px}
.intro{width:100%;text-align:center;background:rgba(255,252,244,.95);border-radius:30px;box-shadow:0 0 0 2px var(--line),0 14px 30px rgba(90,66,50,.12);padding:0 20px 26px}
.appicon{display:block;width:92px;height:92px;margin:-46px auto 0;border-radius:22px;box-shadow:0 0 0 3px var(--card),0 0 0 5px var(--line),0 10px 22px rgba(90,66,50,.25)}
.home h1{font-size:44px;line-height:1.05;letter-spacing:-.015em;font-weight:800;margin:14px 0 10px;
  text-shadow:0 3px 0 var(--deep)}
.sub{display:inline-block;margin:0;padding:5px 16px;border-radius:999px;background:var(--card);box-shadow:0 0 0 2px var(--line);color:var(--link);font-weight:800;font-size:16px;line-height:1.5}
.lead{font-size:17px;margin:16px auto 22px;max-width:30em}
.store{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:10px 26px;border-radius:999px;font-weight:800;font-size:17px;line-height:1.3;text-decoration:none}
a.store{background:var(--leafdeep);color:#fff;box-shadow:0 4px 0 #3b6b2b,0 10px 22px rgba(78,138,58,.28)}
a.store:active{transform:translateY(2px);box-shadow:0 2px 0 #3b6b2b}
.store.soon{background:var(--butter);color:var(--ink);box-shadow:0 4px 0 #d9ae42,0 10px 22px rgba(217,174,66,.25)}
.phone{width:min(290px,74vw);aspect-ratio:1206/2622;border-radius:44px;padding:9px;background:var(--card);box-shadow:0 0 0 2.5px var(--line2),0 22px 46px rgba(90,66,50,.26)}
.phone img,.phone video{display:block;width:100%;height:100%;object-fit:cover;border-radius:35px;background:var(--deep)}
.strip{overflow-x:auto;scroll-snap-type:x mandatory;padding:30px 0 36px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.strip-in{display:flex;gap:14px;width:max-content;margin:0 auto;padding:0 18px}
.strip img{display:block;width:min(200px,52vw);height:auto;aspect-ratio:480/1043;border-radius:20px;scroll-snap-align:center;background:var(--deep);box-shadow:0 0 0 2px var(--line),0 10px 22px rgba(90,66,50,.14)}
.strip:focus-visible{outline:3px solid var(--leaf);outline-offset:-3px}
.premise{display:grid;gap:22px;justify-items:center;text-align:center;padding-top:8px}
.premise .page{display:block;width:100%;max-width:420px;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 62%;border-radius:26px;border:5px solid var(--card);box-shadow:0 0 0 2px var(--line2),0 14px 30px rgba(90,66,50,.18)}
.premise .tale{max-width:30em}
.premise p{margin:0;font-size:17px}
.premise .intro-line{margin-bottom:14px;font-size:19px;line-height:1.65;font-weight:700}
.home h2{font-size:27px;line-height:1.25;letter-spacing:-.01em;font-weight:800;text-align:center;margin:56px 0 20px;text-wrap:balance}
.island{display:grid;gap:18px}
.scene{display:grid;gap:22px;justify-items:center;text-align:center;padding:26px 18px 28px;border-radius:28px}
.scene .copy{order:-1;width:100%}
.scene .num{display:inline-block;padding:1px 11px;border-radius:999px;background:var(--card);box-shadow:0 0 0 2px var(--line);color:var(--link);font-size:13px;font-weight:800;letter-spacing:.08em}
.scene .where{margin:10px 0 0;color:var(--link);font-weight:800;font-size:14px}
.scene h3{font-size:25px;line-height:1.25;letter-spacing:-.01em;font-weight:800;margin:10px 0 8px;text-wrap:balance}
.scene p{margin:0 auto;font-size:17px;max-width:32em}
.scene figure{margin:0}
.scene figcaption{font-weight:800;font-size:14px;margin-top:8px}
.win{display:block;width:100%;height:auto;border-radius:20px;border:3px solid var(--card);background:var(--deep);box-shadow:0 0 0 2px var(--line2),0 10px 22px rgba(90,66,50,.16)}
.map{background-color:#f6e8cc;background-image:linear-gradient(rgba(184,151,110,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(184,151,110,.15) 1px,transparent 1px);background-size:26px 26px;box-shadow:inset 0 0 0 2px rgba(217,195,160,.6)}
.pair{display:grid;grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr);align-items:center;gap:8px;width:100%;max-width:460px}
.pair .step{width:14px;height:14px;border-top:4px solid var(--line2);border-right:4px solid var(--line2);border-radius:2px;transform:rotate(45deg);margin-left:-4px}
.regions{background:#e6f1d8}
.trio{display:grid;gap:14px;width:100%;max-width:520px}
.trio figure{display:grid;grid-template-columns:116px minmax(0,1fr);gap:14px;align-items:start;text-align:left}
.trio figcaption{margin:0;font-weight:400;font-size:15px;line-height:1.5}
.trio figcaption b{display:block;font-size:18px;font-weight:800}
.book{background:var(--card);box-shadow:inset 0 0 0 2px var(--line)}
.stickers{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;width:100%;max-width:470px}
.stickers li{display:grid;justify-items:center;align-content:start;gap:2px;padding:6px 3px 8px;border-radius:14px;background:#fbf4e6;box-shadow:0 0 0 2px var(--line)}
.stickers img{display:block;width:100%;max-width:112px;height:auto}
.stickers span{font-size:12px;font-weight:800;line-height:1.3}
.folk{background:#fff0c4}
.towns{display:grid;gap:12px;width:100%}
.towns>div{background:var(--card);border-radius:20px;box-shadow:0 0 0 2px var(--line);padding:14px 18px;text-align:left}
.towns .where{margin:0}
.towns ul{list-style:none;padding:0;margin:6px 0 0;display:grid;gap:6px}
.towns li{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 10px}
.towns b{font-size:17px;line-height:1.4}
.towns span{font-size:14.5px;line-height:1.45;color:var(--soft)}
.skies{background:#e1f0f5}
.seasons{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;width:100%}
.seasons figure{width:calc((100% - 24px)/3);max-width:170px}
.say{width:100%;max-width:560px;text-align:left;background:var(--card);border-radius:20px;box-shadow:0 0 0 2px var(--line);padding:14px 20px}
.say b{color:var(--link);font-size:15px}
.say p{margin:2px 0 0;font-size:16px}
.say .how{margin-top:10px;padding-top:10px;border-top:2px dashed var(--line);color:var(--soft);font-size:15px}
.house{background:#fde5d6}
.house .tall{max-width:220px}
.rooms{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.rooms li{padding:2px 12px;border-radius:999px;background:var(--card);box-shadow:0 0 0 1.5px var(--line);font-weight:700;font-size:14px}
.scene .also{margin-top:14px}
.gifts{margin:18px auto 0!important;max-width:520px}
.gifts img{display:block;width:100%;height:auto;border-radius:16px;box-shadow:0 0 0 2px var(--line)}
.forwho{text-align:center}
.forwho h2{margin-top:46px}
.forwho ul{list-style:none;padding:0;margin:0 auto;display:grid;gap:10px;max-width:520px;text-align:left}
.forwho li{position:relative;padding-left:28px;font-size:17px}
.forwho li::before{content:"";position:absolute;left:4px;top:.5em;width:13px;height:13px;border-radius:0 100% 0 100%;background:var(--leaf)}
.finale{position:relative;margin-top:60px;overflow:hidden;background:linear-gradient(transparent,var(--deep) 55%)}
.finale::before{content:"";position:absolute;inset:0;background:url(/img/hero-m.jpg) center 70%/cover no-repeat;opacity:.3;-webkit-mask-image:linear-gradient(transparent,#000 35%,transparent);mask-image:linear-gradient(transparent,#000 35%,transparent)}
.finale>*{position:relative}
.closing{text-align:center;padding-top:60px;padding-bottom:30px}
.closing .appicon{margin:0 auto}
.closing .name{font-size:34px;font-weight:800;letter-spacing:-.015em;margin:14px 0 16px}
.closing .tongues{margin:16px 0 0;font-size:15px;color:var(--soft)}
.home footer{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;padding-top:18px;padding-bottom:max(28px,env(safe-area-inset-bottom));border-top:2px dashed var(--line);font-size:14px;color:var(--soft)}
.home footer a{color:var(--soft)}
:lang(ja) :is(.scene h3,.home h1) span{display:inline-block}
:lang(ja) .scene h3{font-size:23px}

@media (min-width:821px){
  .home .wrap{padding-left:24px;padding-right:24px}
  .brand{font-size:19px}
  .pick{font-size:14px}
  .hero img{aspect-ratio:auto;height:clamp(420px,46vw,600px);object-position:50% 45%;-webkit-mask-image:linear-gradient(#000 58%,transparent 98%);mask-image:linear-gradient(#000 58%,transparent 98%)}
  .stage{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:end;gap:44px;margin-top:-230px}
  .intro{text-align:left;padding:0 36px 34px;margin-bottom:40px}
  .appicon{width:104px;height:104px;border-radius:24px;margin:-52px 0 0}
  .home h1{font-size:60px}
  .lead{font-size:19px;margin-left:0}
  .phone{width:310px}
  .strip-in{gap:18px}
  .strip img{width:210px}
  /* .home .wrap's max-width outranks a bare .premise, so the narrower story column needs the same weight. */
  .home .premise{grid-template-columns:320px minmax(0,1fr);align-items:center;gap:44px;text-align:left;max-width:900px}
  .premise .page{aspect-ratio:auto;max-width:none}
  .premise p{font-size:18px}
  .premise .intro-line{font-size:21px}
  .home h2{font-size:34px;margin-top:70px}
  .scene{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;padding:42px 52px;text-align:left;justify-items:stretch;align-items:center;border-radius:32px}
  .scene .copy{order:0}
  .scene.flip>.art{order:2}
  .scene h3{font-size:32px}
  :lang(ja) .scene h3{font-size:28px}
  .scene p{margin:0;font-size:18px}
  .scene .art{justify-self:center}
  .scene.wide{grid-template-columns:minmax(0,1fr);gap:28px;text-align:center;justify-items:center}
  .scene.wide p{margin:0 auto}
  /* Dew's card keeps its own size and spacing: the two rules above would otherwise win over it. */
  .scene .say p{margin:2px 0 0;font-size:16px;max-width:none}
  .scene .say .how{margin-top:10px;font-size:15px}
  .trio{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none;gap:24px;align-items:start}
  .trio figure{display:block}
  .trio figcaption{margin-top:12px}
  .trio .win{aspect-ratio:4/5;object-fit:cover}
  .towns{grid-template-columns:repeat(3,minmax(0,1fr))}
  .towns li{display:block}
  .towns b,.towns span{display:block}
  .house .tall{max-width:300px}
  .seasons{flex-wrap:nowrap;gap:16px}
  .seasons figure{width:auto;flex:1;max-width:none}
  .rooms{justify-content:flex-start}
  .gifts{margin:20px 0 0!important}
  .house .art{align-self:start}
  .forwho h2{margin-top:60px}
  .finale::before{background-image:url(/img/hero.jpg)}
}