/* Good Tyms: privacy, feedback and 404 pages. */
:root {
  color-scheme: light;
  --sky: #39bdfa;
  --sky-deep: #1a8fe0;
  --blue-ink: #0b5fc4;
  --sun: #fad639;
  --cream: #fcf5e3;
  --ink: #0b1733;
  --muted: #45506b;
  --line: #e6dcc0;
  --white: #ffffff;
  --round: "Fredoka", "SF Pro Rounded", "Nunito", system-ui, sans-serif;
  --body: "Nunito", "SF Pro Text", system-ui, sans-serif;
  --slab: "Dela Gothic One", "Arial Black", Impact, sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--cream); }
body { margin: 0; font-family: var(--body); color: var(--ink); background: var(--cream); line-height: 1.6; }
img { display: block; max-width: 100%; }
a { color: var(--blue-ink); }
:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--sun); color: var(--ink); font-weight: 900; padding: .7rem 1rem; border-radius: 10px; text-decoration: none; }
.skip:focus { top: 1rem; }

.page-top { position: relative; overflow: hidden; isolation: isolate; color: var(--white); background: linear-gradient(180deg, #2fb0f5 0%, #6fd0f8 60%, #bfe7e9 100%); padding: env(safe-area-inset-top, 0px) max(16px, 4vw) 0; }
.tri-field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.page-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1rem; max-width: 1100px; margin: 0 auto; }
.page-nav img { height: 28px; width: auto; }
.page-nav-end { display: flex; align-items: center; gap: .6rem; }
.lang-pill { color: #fff; }
.pill { background: var(--sun); color: var(--ink); font-weight: 900; font-size: .92rem; padding: .55rem 1.05rem; border-radius: 999px; text-decoration: none; box-shadow: 0 5px 0 #c98f00; }
.page-title { max-width: 1100px; margin: 0 auto; padding-block: 3rem 3.4rem; }
.kicker { margin: 0 0 .4rem; font-weight: 900; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; }
.page-title h1 { margin: 0; font-family: var(--round); font-weight: 700; font-size: clamp(2.6rem, 7vw, 5.4rem); line-height: .95; text-shadow: 0 .06em 0 var(--sky-deep); text-wrap: balance; }

.page-body { max-width: 760px; margin: 0 auto; padding: 3rem max(16px, 4vw) 4rem; }
.page-body h2 { font-family: var(--round); font-weight: 700; font-size: 1.7rem; line-height: 1.15; margin: 2.6rem 0 .6rem; }
.page-body h3 { font-family: var(--round); font-weight: 600; font-size: 1.2rem; margin: 1.6rem 0 .3rem; }
.page-body p, .page-body li { font-size: 1.04rem; color: var(--muted); }
.page-body strong { color: var(--ink); }
.page-body ul { padding-left: 1.2rem; }
.page-body li { margin-block: .3rem; }
.page-body .updated { display: inline-block; background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: .35rem .8rem; font-weight: 800; font-size: .85rem; color: var(--ink); }

/* feedback */
.ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; margin-top: 1.4rem; }
.way { display: grid; gap: .4rem; align-content: start; background: var(--white); border-radius: 22px; padding: 1.3rem; box-shadow: 0 6px 0 rgba(11,23,51,.08); text-decoration: none; color: var(--ink); transition: transform .25s cubic-bezier(.3,1.6,.5,1); }
a.way:hover { transform: translateY(-4px) rotate(-.6deg); }
.way .tri { width: 34px; height: 30px; }
.way b { font-family: var(--round); font-size: 1.3rem; line-height: 1.1; }
.way span { color: var(--muted); font-weight: 700; font-size: .95rem; line-height: 1.45; }
.way .go { color: var(--blue-ink); font-weight: 900; }
.copy { display: inline-flex; gap: .4rem; align-items: center; justify-self: start; border: 0; background: var(--ink); color: var(--white); font: 800 .9rem var(--body); padding: .5rem .8rem; border-radius: 10px; cursor: pointer; margin-top: .3rem; }
details { background: var(--white); border-radius: 18px; padding: 1rem 1.2rem; margin-top: .7rem; }
details summary { cursor: pointer; font-family: var(--round); font-weight: 600; font-size: 1.12rem; }
details p { margin: .6rem 0 0; }

/* 404 */
.lost { text-align: center; }
.lost .big { font-family: var(--slab); font-size: clamp(4rem, 18vw, 9rem); line-height: 1; color: var(--sky-deep); margin: 0; }
.open-card-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .7rem; justify-content: center; }
.lost.open-card .btn-quiet { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.lost.open-card [hidden] { display: none; }
.open-card-hint { font-size: .92rem; opacity: .75; }
.lost .btn { display: inline-block; margin-top: 1.4rem; background: var(--ink); color: var(--white); font-weight: 900; padding: .8rem 1.3rem; border-radius: 14px; text-decoration: none; }

.page-foot { background: var(--ink); color: #c6d3ee; display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; padding: 2rem max(16px, 4vw) calc(2rem + env(safe-area-inset-bottom, 0px)); font-weight: 700; font-size: .88rem; }
.page-foot img { height: 24px; width: auto; }
.page-foot nav { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; }
.page-foot a { color: inherit; text-decoration: none; }
.page-foot nav a:hover { color: var(--sun); }

/* Shared with site.css: language pill, per-language type, right-to-left. */
  /* ---------- language pill ---------- */
.lang { position: relative; }
.lang-pill { display: inline-flex; align-items: center; gap: .4rem; font: inherit; cursor: pointer; background: rgba(255,255,255,.16); border: 1.5px solid rgba(255,255,255,.5); color: var(--white); border-radius: 999px; padding: .42rem .75rem; font-weight: 800; font-size: .85rem; backdrop-filter: blur(8px); white-space: nowrap; }
.lang-pill:hover, .lang.open .lang-pill { border-color: var(--sun); }
.lang-globe { width: 16px; height: 16px; flex: none; }
.lang-caret { width: 10px; height: 6px; flex: none; transition: transform .2s; }
.lang.open .lang-caret { transform: rotate(180deg); }
.lang-word { display: inline-block; min-width: 4.6em; height: 1.25em; line-height: 1.25em; overflow: hidden; text-align: start; }
.lang-word > span { display: inline-block; }
.lang-word .entering { animation: langIn .45s cubic-bezier(.2,1.4,.4,1); }
@keyframes langIn { from { transform: translateY(100%); opacity: 0; } }
.lang-menu { position: absolute; top: calc(100% + .5rem); inset-inline-end: 0; z-index: 80; min-width: 220px; max-height: 70vh; overflow: auto; display: grid; padding: .5rem; border-radius: 18px; background: var(--white); color: var(--ink); box-shadow: 0 20px 50px rgba(11,23,51,.35); }
.lang-menu[hidden] { display: none; }
.lang-menu p { margin: 0; padding: .45rem .7rem .3rem; font-size: .7rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: #6a7390; }
.lang-menu a { padding: .55rem .7rem; border-radius: 10px; text-decoration: none; font-weight: 800; }
.lang-menu a:hover, .lang-menu a:focus-visible { background: #eaf6fd; outline: none; }
.lang-menu a[aria-current] { background: var(--sun); }
@media (max-width: 560px) {
    .lang-word { display: none; } .lang-pill { padding: .5rem .6rem; }
    .lang-menu { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 4.2rem); left: 16px; right: 16px; min-width: 0; grid-template-columns: 1fr 1fr; }
    .lang-menu p { grid-column: 1 / -1; }
  }

/* ---------- per-language type ---------- */
html[data-lang="hi"] { --round: "Baloo 2", "Fredoka", sans-serif; --body: "Baloo 2", "Nunito", sans-serif; --slab: "Baloo 2", sans-serif; }
html[data-lang="ar"] { --round: "Baloo Bhaijaan 2", "Fredoka", sans-serif; --body: "Baloo Bhaijaan 2", "Nunito", sans-serif; --slab: "Baloo Bhaijaan 2", sans-serif; }
html[data-lang="ja"] { --round: "Fredoka", "Dela Gothic One", "Hiragino Sans", sans-serif; --slab: "Dela Gothic One", "Hiragino Sans", sans-serif; --body: "Nunito", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", sans-serif; }
html[data-lang="ko"] { --round: "Fredoka", "Jua", "Apple SD Gothic Neo", sans-serif; --slab: "Dela Gothic One", "Jua", sans-serif; --body: "Nunito", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif; }
html[data-lang="zh"] { --round: "Fredoka", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif; --slab: "Dela Gothic One", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif; --body: "Nunito", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif; }
html:is([data-lang="hi"], [data-lang="ar"]) :is(h1, h2, h3, .band-track, .live b, .tri-tile.word, .way h3, .bx h3, .view-card h3) { font-weight: 800; }
html[data-lang="zh"] :is(h1, h2, h3, .band-track, .tri-tile.word) { font-weight: 900; }
/* Scripts that join or have no case: no negative tracking, no forced capitals. */
html:is([data-lang="hi"], [data-lang="ar"], [data-lang="ja"], [data-lang="ko"], [data-lang="zh"]) :is(h1, h2, h3, .band-track, .tri-tile.word, .eyebrow) { letter-spacing: 0; }
html[data-lang="ko"] :is(h1, h2, h3, p) { word-break: keep-all; }
html:is([data-lang="hi"], [data-lang="ar"]) :is(.hero h1, .cta h2) { line-height: 1.15; }
html:is([data-lang="hi"], [data-lang="ar"]) .half h2 { line-height: 1.05; }

/* ---------- right-to-left ---------- */
[dir="rtl"] .band-track { direction: ltr; }
[dir="rtl"] .band-track span, [dir="rtl"] .tri-tile.word span { direction: rtl; unicode-bidi: isolate; }
[dir="rtl"] .share-arrow { rotate: 180deg; }
[dir="rtl"] .tap-hint { left: auto; right: calc(50% + clamp(170px,24vw,290px)/2 - 40px); }