:root { --bg:#fbfaf7; --ink:#121212; --muted:#777773; --line:rgba(18,18,18,.14); --blue:#007cff; --max:1200px; --tc-han:"Noto Sans TC","PingFang TC","Microsoft JhengHei","Heiti TC","MingLiU",sans-serif; }
* { box-sizing:border-box; }
html { overflow-x:hidden; scroll-behavior:smooth; }
body { margin:0; overflow-x:hidden; color:var(--ink); background:var(--bg); font-family:var(--tc-han); font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; }
body:has(dialog[open]) { overflow:hidden; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
::selection { color:#fff; background:var(--blue); }
.shell { width:min(calc(100% - 48px),var(--max)); margin-inline:auto; }
.header { position:sticky; top:0; z-index:20; background:rgba(251,250,247,.88); backdrop-filter:blur(18px); }
.nav { height:72px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:11px; font-weight:650; letter-spacing:-.02em; }
.brand-dot { width:10px; height:10px; border-radius:50%; background:var(--blue); box-shadow:0 0 0 4px rgba(0,124,255,.1); }
.nav-links { display:flex; gap:clamp(16px,2.6vw,32px); color:var(--muted); font-size:.86rem; }
.nav-links a:hover,.nav-links a:focus-visible,.nav-links a[aria-current="page"] { color:var(--ink); }
.eyebrow { margin:0 0 22px; color:var(--muted); font-family:"Segoe Print","Bradley Hand","Comic Sans MS",cursive; font-size:.88rem; font-weight:600; letter-spacing:.055em; }
h1,h2,.dialog-title { font-family:var(--tc-han); font-weight:500; }
h1 { margin:0; font-size:clamp(3.8rem,8vw,7.4rem); line-height:.94; letter-spacing:-.065em; }
h2 { margin:0; font-size:clamp(2.7rem,5vw,4.8rem); line-height:1; letter-spacing:-.055em; }
:focus-visible { outline:2px solid var(--blue); outline-offset:4px; }

.home-hero { min-height:56svh; display:grid; grid-template-columns:1.15fr .85fr; gap:80px; align-items:end; padding-block:clamp(90px,13vw,165px) 72px; }
.home-copy { margin:0; max-width:420px; color:var(--muted); font-size:1.07rem; }
.home-copy strong { color:var(--ink); font-weight:550; }
.about-section { padding:110px 0; border-top:1px solid var(--line); }
.about-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(56px,9vw,130px); align-items:start; }
.profile-list { border-top:1px solid var(--line); }
.profile-row { display:grid; grid-template-columns:110px 1fr; gap:24px; padding:23px 0; border-bottom:1px solid var(--line); }
.profile-row span { padding-top:4px; color:var(--muted); font-family:"Segoe Print","Bradley Hand","Comic Sans MS",cursive; font-size:.78rem; letter-spacing:.04em; }
.profile-row p { margin:0; font-size:clamp(1.05rem,2vw,1.4rem); letter-spacing:-.025em; }
.category-section { padding:78px 0 112px; border-top:1px solid var(--line); }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:32px; margin-bottom:42px; }
.section-note { margin:0; max-width:390px; color:var(--muted); }
.category-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.category-link { position:relative; aspect-ratio:1; display:flex; flex-direction:column; justify-content:space-between; padding:clamp(24px,4vw,42px); border:1px solid var(--line); overflow:hidden; transition:color .35s ease,border-color .35s ease; }
.category-link::before { content:""; position:absolute; inset:0; z-index:-1; opacity:0; transition:opacity .35s ease; }
.category-link:hover { color:#fff; border-color:transparent; }
.category-link:hover::before { opacity:1; }
.category-link.game::before { background:linear-gradient(145deg,#0a0d12,#164b88 65%,#8dc6ff); }
.category-link.gear::before { background:linear-gradient(145deg,#202326,#7f898f 66%,#e0e2e0); }
.category-link.drink::before { background:linear-gradient(145deg,#170f08,#765026 68%,#dfbd83); }
.category-link.music::before { background:linear-gradient(145deg,#071a2a,#007cff 58%,#00d8ff); }
.category-link.travel::before { background:linear-gradient(145deg,#0a2ca8,#2457ff 58%,#8cabff); }
.category-link.movie::before { background:linear-gradient(145deg,#35105f,#7a22c9 58%,#b7ff00); }
.category-number { color:var(--muted); font-family:"Segoe Print","Bradley Hand","Comic Sans MS",cursive; font-size:.82rem; }
.category-link:hover .category-number,.category-link:hover .category-desc { color:rgba(255,255,255,.72); }
.category-name { margin:0 0 8px; font-family:var(--tc-han); font-size:clamp(2.4rem,5vw,5.2rem); font-weight:500; line-height:1; letter-spacing:-.055em; }
.category-desc { margin:0; color:var(--muted); transition:color .35s ease; }
.contact { padding:110px 0 40px; border-top:1px solid var(--line); }
.contact-lead { max-width:850px; margin:0; font-family:"Iowan Old Style","Songti SC","STSong",Georgia,serif; font-size:clamp(2.8rem,6vw,6.2rem); line-height:1.03; letter-spacing:-.055em; }
.contact-lead a { color:var(--blue); }
.contact-links { display:flex; flex-wrap:wrap; gap:18px 36px; margin-top:58px; color:var(--muted); }
.contact-links a:hover { color:var(--ink); }
.contact-pending { cursor:default; }
.music-dock { position:fixed; right:20px; bottom:20px; z-index:40; display:flex; align-items:center; gap:12px; padding:9px 12px; color:var(--ink); background:rgba(251,250,247,.88); border:1px solid var(--line); backdrop-filter:blur(16px); }
.collection-page .music-dock { color:var(--page-ink); background:color-mix(in srgb,var(--page-bg) 88%,transparent); border-color:var(--page-line); }
.music-toggle { padding:0; color:inherit; background:none; border:0; cursor:pointer; }
.music-toggle { display:flex; align-items:center; gap:8px; font-family:"Segoe Print","Bradley Hand","Comic Sans MS",cursive; font-size:.76rem; }
.music-dot { width:7px; height:7px; border-radius:50%; background:currentColor; opacity:.28; }
.music-dock.is-playing .music-dot { opacity:1; box-shadow:0 0 0 4px rgba(0,124,255,.12); animation:music-pulse 1.5s ease-in-out infinite; }
@keyframes music-pulse { 50% { transform:scale(.65); opacity:.5; } }
.footer { display:flex; justify-content:space-between; gap:24px; margin-top:96px; color:var(--muted); font-size:.78rem; }

.back { display:flex; align-items:center; gap:9px; color:var(--muted); font-size:.86rem; }
.back:hover { color:var(--ink); }
.gallery-hero { display:grid; grid-template-columns:1fr .72fr; gap:80px; align-items:end; padding-block:clamp(85px,12vw,150px) 68px; }
.gallery-intro { margin:0; max-width:430px; color:var(--muted); }
.gallery-section { padding:74px 0 110px; border-top:1px solid var(--line); }
.gallery-head { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:42px; }
.gallery-count { color:var(--muted); font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.76rem; }
.gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:54px 22px; }
.post-card { width:100%; min-width:0; padding:0; color:inherit; text-align:left; background:none; border:0; cursor:pointer; }
.post-card:first-child { grid-column:span 2; }
.post-card:first-child .post-cover { aspect-ratio:2/1; }
.post-cover { position:relative; display:block; width:100%; aspect-ratio:4/3; overflow:hidden; background:#ecece8; }
.post-cover::before { content:""; position:absolute; inset:0; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.post-cover.has-image::before { background:var(--post-image) center/cover no-repeat; }
.post-card:hover .post-cover::before { transform:scale(1.035); }
.theme-game .cover-1::before { background:radial-gradient(circle at 68% 30%,#4ea1ff 0 8%,transparent 9%),linear-gradient(145deg,#0a0d12 5%,#1b3156 56%,#b4d7ff); }
.theme-game .cover-2::before { background:linear-gradient(135deg,#d9e9f7 0 48%,#101722 48% 52%,#658bb0 52%); }
.theme-game .cover-3::before { background:repeating-linear-gradient(0deg,transparent 0 11%,rgba(255,255,255,.09) 11% 12%),linear-gradient(145deg,#071421,#0e639e); }
.theme-gear .cover-1::before { background:linear-gradient(120deg,#d9dde0 0 38%,#8c949b 38% 40%,#f2f3f1 40% 62%,#222 62% 65%,#707a83 65%); }
.theme-gear .cover-2::before { background:radial-gradient(circle at 38% 45%,#202124 0 16%,transparent 17%),linear-gradient(140deg,#f1f1ef,#9fa7ad); }
.theme-gear .cover-3::before { background:repeating-linear-gradient(90deg,#151617 0 7%,#a6acb0 7% 8%,#e7e7e4 8% 16%); }
.theme-drink .cover-1::before { background:radial-gradient(circle at 50% 44%,rgba(255,221,135,.9) 0 12%,rgba(151,87,20,.75) 13% 24%,transparent 25%),linear-gradient(150deg,#130f0a,#6f4b22 68%,#e1c18d); }
.theme-drink .cover-2::before { background:linear-gradient(90deg,#14100b 0 30%,#bc8c52 30% 32%,#ead7bb 32% 67%,#6d321f 67%); }
.theme-drink .cover-3::before { background:radial-gradient(ellipse at 50% 100%,#d69b51 0 28%,transparent 29%),linear-gradient(145deg,#23160d,#8c6039); }
.theme-music .cover-1::before { background:repeating-linear-gradient(90deg,transparent 0 7%,rgba(255,255,255,.16) 7% 7.5%),linear-gradient(150deg,#061b2c,#007cff 52%,#00d8ff); }
.theme-music .cover-2::before { background:radial-gradient(circle at center,#fff 0 4%,#1c1c1c 5% 21%,#007cff 22% 24%,transparent 25%),linear-gradient(135deg,#d9d9d5,#92928f); }
.theme-music .cover-3::before { background:repeating-linear-gradient(0deg,#0c0e12 0 9%,#252a37 9% 11%),linear-gradient(140deg,#0c0e12,#007cff); }
.theme-movie .cover-1::before { background:linear-gradient(90deg,transparent 0 8%,#f5efdf 8% 10%,transparent 10% 90%,#f5efdf 90% 92%,transparent 92%),radial-gradient(circle at 64% 40%,#ff405d 0 9%,transparent 10%),linear-gradient(145deg,#12050d,#57122e); }
.theme-movie .cover-2::before { background:repeating-linear-gradient(90deg,#111 0 8%,#e8ff52 8% 10%),linear-gradient(145deg,#371059,#0b0710); }
.theme-movie .cover-3::before { background:radial-gradient(circle at center,#e8ff52 0 4%,#151018 5% 20%,#ff405d 21% 23%,transparent 24%),linear-gradient(145deg,#2c0b1c,#080608); }
.cover-label { position:absolute; left:20px; bottom:16px; z-index:1; color:#fff; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; }
.cover-label,.gallery-count,.post-date { font-family:"Segoe Print","Bradley Hand","Comic Sans MS",cursive; letter-spacing:.025em; }
.post-info { display:grid; grid-template-columns:1fr auto; gap:16px; padding-top:15px; }
.post-title { margin:0; font-size:1.06rem; font-weight:560; letter-spacing:-.025em; }
.post-date { color:var(--muted); font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.72rem; }
.gallery-more { margin:72px 0 0; padding-top:24px; color:var(--muted); border-top:1px solid var(--line); }

dialog { width:min(920px,calc(100% - 32px)); max-height:calc(100svh - 32px); margin:auto; padding:0; color:var(--ink); background:var(--bg); border:0; box-shadow:0 22px 80px rgba(0,0,0,.22); }
dialog::backdrop { background:rgba(10,10,10,.55); backdrop-filter:blur(5px); }
.dialog-close { position:sticky; top:0; z-index:2; display:block; width:46px; height:46px; margin:16px 16px 0 auto; background:rgba(251,250,247,.9); border:1px solid var(--line); border-radius:50%; cursor:pointer; }
.dialog-body { padding:10px clamp(24px,7vw,76px) 72px; }
.dialog-kicker { margin:0 0 18px; color:var(--blue); font-size:.8rem; font-weight:650; }
.dialog-title { margin:0; max-width:730px; font-size:clamp(2.7rem,6vw,5.4rem); line-height:1; letter-spacing:-.055em; }
.dialog-summary { margin:24px 0 44px; max-width:610px; color:var(--muted); font-size:1.06rem; }
.dialog-cover { aspect-ratio:16/8; margin-bottom:40px; }
.dialog-meta { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding-block:22px; border-block:1px solid var(--line); }
.meta-label { display:block; margin-bottom:5px; color:var(--muted); font-size:.75rem; }
.meta-value { font-size:.95rem; }
.review { max-width:680px; padding-top:46px; }
.review h3 { margin:0 0 12px; font-size:1rem; font-weight:650; }
.review p { margin:0 0 34px; color:#3e3e3b; font-size:1.04rem; line-height:1.9; }

@media (max-width:820px) {
  .shell { width:min(calc(100% - 32px),var(--max)); }
  .home-hero,.gallery-hero { grid-template-columns:1fr; gap:42px; padding-block:85px 62px; }
  .section-heading,.gallery-head { align-items:start; flex-direction:column; }
  .gallery { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .post-card:first-child { grid-column:span 2; }
  .about-grid { grid-template-columns:1fr; }
}
@media (max-width:560px) {
  .nav { height:64px; }
  .nav-links { gap:13px; font-size:.78rem; }
  .nav-links a:nth-child(3) { display:none; }
  .collection-page .nav-links a:not([aria-current="page"]) { display:none; }
  .collection-page .nav-links a[aria-current="page"] { display:block; }
  h1 { font-size:clamp(3.4rem,17vw,5.2rem); }
  .category-grid,.gallery { grid-template-columns:1fr; }
  .category-link { aspect-ratio:1.1; }
  .post-card:first-child { grid-column:span 1; }
  .post-card:first-child .post-cover,.post-cover { aspect-ratio:4/3; }
  .dialog-meta { grid-template-columns:1fr; }
  .profile-row { grid-template-columns:82px 1fr; gap:15px; }
  .footer { flex-direction:column; margin-top:70px; }
  .music-dock { right:12px; bottom:12px; }
}

/* Collection pages — one category, one atmosphere */
.collection-page {
  --page-bg:#f7f7f4;
  --page-ink:#111;
  --page-muted:#6d6d68;
  --page-line:rgba(17,17,17,.16);
  --page-accent:#007cff;
  color:var(--page-ink);
  background:var(--page-bg);
}
.collection-page .header { color:var(--page-ink); background:color-mix(in srgb,var(--page-bg) 88%,transparent); }
.collection-page .nav { border-color:var(--page-line); }
.collection-page .nav-links,.collection-page .back,.collection-page .eyebrow { color:var(--page-muted); }
.collection-page .nav-links a:hover,.collection-page .nav-links a:focus-visible,.collection-page .nav-links a[aria-current="page"],.collection-page .back:hover { color:var(--page-ink); }
.collection-page ::selection { background:var(--page-accent); }
.collection-hero { min-height:calc(100svh - 72px); display:grid; grid-template-columns:72px minmax(0,1fr) minmax(310px,.72fr); gap:clamp(32px,6vw,90px); align-items:center; padding-block:clamp(64px,8vw,108px); }
.collection-code { align-self:stretch; display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding-block:6px; color:var(--page-muted); font:600 .78rem/1 "Segoe Print","Bradley Hand","Comic Sans MS",cursive; letter-spacing:.06em; writing-mode:vertical-rl; transform:rotate(180deg); border-right:1px solid var(--page-line); }
.collection-heading h1 { margin-bottom:34px; color:var(--page-ink); font-size:clamp(4.6rem,9.6vw,9.4rem); line-height:.82; letter-spacing:-.075em; }
.collection-heading .eyebrow { margin-bottom:32px; }
.collection-heading .gallery-intro { max-width:500px; color:var(--page-muted); font-size:1.02rem; }
.hero-jump { display:inline-block; margin-top:36px; padding-bottom:5px; color:var(--page-ink); font-size:.82rem; letter-spacing:.04em; border-bottom:1px solid currentColor; }
.hero-art { position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--page-ink); }
.hero-art span,.hero-art b { position:absolute; display:block; }
.hero-art b { left:8%; bottom:7%; z-index:2; color:#fff; font:500 clamp(2.2rem,4.5vw,5.1rem)/.82 ui-sans-serif,system-ui,sans-serif; letter-spacing:-.075em; }
.collection-page .gallery-section { padding:clamp(80px,10vw,130px) 0 90px; color:var(--page-ink); background:var(--page-bg); border-color:var(--page-line); }
.collection-page .gallery-head { align-items:end; margin-bottom:clamp(42px,6vw,72px); }
.collection-page .gallery-head h2 { color:var(--page-ink); }
.gallery-head-note { width:min(100%,410px); margin:0; color:var(--page-muted); }
.collection-page .gallery { gap:clamp(38px,5vw,70px) clamp(18px,2.2vw,30px); }
.collection-page .post-card { color:var(--page-ink); }
.collection-page .post-cover { background:color-mix(in srgb,var(--page-ink) 8%,var(--page-bg)); }
.cover-number { position:absolute; top:17px; right:19px; z-index:2; color:rgba(255,255,255,.72); font:600 .78rem/1 "Segoe Print","Bradley Hand","Comic Sans MS",cursive; }
.collection-page .cover-label { left:19px; bottom:17px; }
.collection-page .post-info { grid-template-columns:minmax(0,1fr) auto; padding-top:19px; border-top:1px solid transparent; }
.post-copy { display:block; }
.collection-page .post-title { display:block; color:var(--page-ink); font-size:1.18rem; }
.post-summary { display:block; max-width:34rem; margin-top:5px; color:var(--page-muted); font-size:.86rem; }
.post-side { display:flex; flex-direction:column; align-items:end; justify-content:space-between; gap:12px; }
.collection-page .post-date { color:var(--page-muted); }
.post-arrow { display:block; font-size:1.15rem; transition:transform .25s ease; }
.post-card:hover .post-arrow { transform:translate(3px,-3px); }
.collection-page .gallery-more { color:var(--page-muted); border-color:var(--page-line); font:600 .78rem/1.6 "Segoe Print","Bradley Hand","Comic Sans MS",cursive; letter-spacing:.025em; }
.collection-page dialog { color:var(--page-ink); background:var(--page-bg); }
.collection-page .dialog-close { color:var(--page-ink); background:color-mix(in srgb,var(--page-bg) 90%,transparent); border-color:var(--page-line); }
.collection-page .dialog-kicker { color:var(--page-accent); }
.collection-page .dialog-summary,.collection-page .meta-label,.collection-page .review p { color:var(--page-muted); }
.collection-page .dialog-meta { border-color:var(--page-line); }

/* Games — cinematic save archive */
.theme-game { --page-bg:#090c11; --page-ink:#f2f6fb; --page-muted:#8996a8; --page-line:rgba(203,222,245,.16); --page-accent:#51a7ff; }
.theme-game .hero-art { background:radial-gradient(circle at 64% 34%,#7fc5ff 0 3%,#1460b2 4% 8%,transparent 25%),radial-gradient(circle at 62% 35%,rgba(47,143,255,.44),transparent 43%),linear-gradient(145deg,#111b2c,#020306 72%); border:1px solid var(--page-line); }
.theme-game .hero-art::before { content:""; position:absolute; inset:10%; border:1px solid rgba(139,194,255,.28); box-shadow:0 0 50px rgba(23,126,255,.22); }
.theme-game .hero-art span:first-child { width:76%; aspect-ratio:1; left:28%; top:12%; border:1px solid rgba(139,194,255,.34); border-radius:50%; }
.theme-game .hero-art span:nth-child(2) { inset:auto 10% 19%; height:1px; background:linear-gradient(90deg,transparent,#5faeff,transparent); box-shadow:0 -55px rgba(95,174,255,.3),0 -110px rgba(95,174,255,.18); }
.theme-game .gallery { grid-template-columns:repeat(12,1fr); }
.theme-game .post-card { grid-column:span 5; }
.theme-game .post-card:first-child { grid-column:span 7; }
.theme-game .post-card:first-child .post-cover,.theme-game .post-cover { aspect-ratio:16/10; }
.theme-game .post-card:nth-child(3) { grid-column:5/span 6; }
.theme-game .post-card:hover .post-info { border-color:#51a7ff; }

/* Gear — precise product index */
.theme-gear { --page-bg:#edf0f1; --page-ink:#121516; --page-muted:#677074; --page-line:rgba(20,25,27,.18); --page-accent:#ff552f; }
.theme-gear .collection-heading h1,.theme-gear h2 { font-family:var(--tc-han); font-weight:720; letter-spacing:-.075em; }
.theme-gear .hero-art { background:linear-gradient(135deg,#d6dbdd 0 49.6%,#171a1b 50% 50.6%,#f8f8f5 51%); border:1px solid var(--page-line); }
.theme-gear .hero-art::before { content:""; position:absolute; width:58%; aspect-ratio:1; left:21%; top:17%; border:clamp(18px,4vw,52px) solid #252a2d; border-radius:50%; box-shadow:0 28px 60px rgba(0,0,0,.2); }
.theme-gear .hero-art span:first-child { width:20%; aspect-ratio:1; left:40%; top:36%; background:#ff552f; border-radius:50%; }
.theme-gear .hero-art span:nth-child(2) { inset:7%; border:1px solid rgba(20,25,27,.3); }
.theme-gear .hero-art b { color:#151819; font:650 clamp(1.9rem,3.4vw,3.8rem)/.85 ui-monospace,SFMono-Regular,Consolas,monospace; }
.theme-gear .gallery { grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
.theme-gear .post-card,.theme-gear .post-card:first-child { grid-column:auto; padding:18px; border:1px solid var(--page-line); transition:background .25s ease; }
.theme-gear .post-card:first-child .post-cover,.theme-gear .post-cover { aspect-ratio:4/3; }
.theme-gear .post-card:hover { background:rgba(255,255,255,.62); }
.theme-gear .post-card:nth-child(3) { grid-column:2; }
.theme-gear .cover-number { color:#202629; }
.theme-gear .cover-label { padding:4px 7px; color:#fff; background:#181c1e; }

/* Drinks — quiet tasting journal */
.theme-drink { --page-bg:#f1e7d8; --page-ink:#301b15; --page-muted:#7f665a; --page-line:rgba(67,35,25,.2); --page-accent:#9c2d22; }
.theme-drink .header { background:rgba(241,231,216,.9); }
.theme-drink .hero-art { background:linear-gradient(154deg,#491814,#160b09 68%); border-radius:50% 50% 5px 5px; }
.theme-drink .hero-art::before { content:""; position:absolute; width:42%; height:66%; left:29%; top:16%; border:1px solid rgba(250,218,168,.56); border-radius:50% 50% 42% 42%; background:linear-gradient(180deg,transparent 44%,rgba(186,101,39,.62) 45%); box-shadow:0 0 55px rgba(255,169,61,.18); }
.theme-drink .hero-art span:first-child { width:1px; height:48%; left:50%; top:0; background:rgba(250,218,168,.52); }
.theme-drink .hero-art span:nth-child(2) { width:42%; height:1px; left:29%; top:68%; background:rgba(250,218,168,.5); }
.theme-drink .hero-art b { color:#f6dfba; font-family:"Iowan Old Style",Georgia,serif; font-weight:400; }
.theme-drink .gallery { grid-template-columns:repeat(3,minmax(0,1fr)); align-items:start; }
.theme-drink .post-card,.theme-drink .post-card:first-child { grid-column:auto; }
.theme-drink .post-card:first-child .post-cover,.theme-drink .post-cover { aspect-ratio:3/4; }
.theme-drink .post-card:nth-child(2) { margin-top:90px; }
.theme-drink .post-card:nth-child(3) { margin-top:180px; }
.theme-drink .post-title { font-family:var(--tc-han); font-size:1.42rem; font-weight:500; }

/* Music — album wall */
.theme-music { --page-bg:#061626; --page-ink:#f1fbff; --page-muted:#81a2bb; --page-line:rgba(149,211,244,.18); --page-accent:#00d9ff; }
.theme-music .hero-art { background:linear-gradient(145deg,#00d9ff,#006cff 52%,#17004d); }
.theme-music .hero-art::before { content:""; position:absolute; width:72%; aspect-ratio:1; left:14%; top:14%; background:repeating-radial-gradient(circle,#061626 0 5%,#172c42 5.5% 6%); border-radius:50%; box-shadow:0 35px 70px rgba(0,0,0,.36); }
.theme-music .hero-art::after { content:""; position:absolute; width:13%; aspect-ratio:1; left:43.5%; top:43.5%; background:#00d9ff; border:7px solid #ecfbff; border-radius:50%; }
.theme-music .hero-art span:first-child { inset:0; background:linear-gradient(90deg,transparent 49.7%,rgba(255,255,255,.3) 50%,transparent 50.3%); }
.theme-music .hero-art span:nth-child(2) { inset:0; background:linear-gradient(0deg,transparent 49.7%,rgba(255,255,255,.18) 50%,transparent 50.3%); }
.theme-music .hero-art b { color:#fff; mix-blend-mode:difference; }
.theme-music .gallery { grid-template-columns:repeat(3,minmax(0,1fr)); }
.theme-music .post-card,.theme-music .post-card:first-child { grid-column:auto; }
.theme-music .post-card:first-child .post-cover,.theme-music .post-cover { aspect-ratio:1; }
.theme-music .post-cover { box-shadow:0 26px 46px rgba(0,0,0,.24); }
.theme-music .post-card:hover .post-cover { box-shadow:0 30px 64px rgba(0,216,255,.16); }

/* Movies — torn-ticket screening room */
.theme-movie { --page-bg:#11070d; --page-ink:#fff7ec; --page-muted:#bd8da4; --page-line:rgba(255,231,241,.16); --page-accent:#e8ff52; }
.theme-movie .hero-art { background:linear-gradient(145deg,#ff405d,#6e1744 54%,#12050d); border:1px solid var(--page-line); }
.theme-movie .hero-art::before { content:""; position:absolute; inset:8%; background:repeating-linear-gradient(90deg,transparent 0 11%,rgba(255,247,236,.18) 11% 12%),linear-gradient(180deg,transparent 0 45%,rgba(17,7,13,.7) 45% 58%,transparent 58%); border:2px solid rgba(255,247,236,.5); transform:rotate(-3deg); }
.theme-movie .hero-art::after { content:"06 / NOW SHOWING"; position:absolute; right:-7%; top:14%; padding:7px 13px 4px; color:#111; background:#e8ff52; font:900 .86rem/1 Impact,"Arial Black",sans-serif; letter-spacing:.08em; transform:rotate(8deg); }
.theme-movie .hero-art span:first-child { width:30%; aspect-ratio:1; left:13%; top:19%; border:10px solid #fff7ec; border-radius:50%; opacity:.75; }
.theme-movie .hero-art span:nth-child(2) { width:18%; aspect-ratio:1; right:17%; bottom:21%; background:#e8ff52; border-radius:50%; mix-blend-mode:screen; }
.theme-movie .hero-art b { color:#fff7ec; text-shadow:5px 5px 0 #111; transform:rotate(-2deg); }
.theme-movie .gallery { grid-template-columns:repeat(3,minmax(0,1fr)); }
.theme-movie .post-card,.theme-movie .post-card:first-child { grid-column:auto; }
.theme-movie .post-card:first-child .post-cover,.theme-movie .post-cover { aspect-ratio:2/3; }
.theme-movie .cover-label { padding:4px 7px; color:#111; background:#e8ff52; }

@media (max-width:900px) {
  .collection-hero { grid-template-columns:42px minmax(0,1fr) minmax(250px,.7fr); gap:32px; }
  .collection-heading h1 { font-size:clamp(4.2rem,10.8vw,7.2rem); }
}
@media (max-width:700px) {
  .collection-hero { min-height:auto; grid-template-columns:1fr; padding-block:64px 74px; }
  .collection-code { display:none; }
  .collection-heading { order:1; }
  .hero-art { order:2; width:min(88%,430px); margin:8px 0 0 auto; }
  .collection-heading h1 { font-size:clamp(4.4rem,20vw,7rem); }
  .collection-page .gallery-head { align-items:start; }
  .theme-game .gallery,.theme-gear .gallery,.theme-drink .gallery,.theme-music .gallery,.theme-movie .gallery { grid-template-columns:1fr; }
  .theme-game .post-card,.theme-game .post-card:first-child,.theme-game .post-card:nth-child(3),.theme-gear .post-card,.theme-gear .post-card:first-child,.theme-gear .post-card:nth-child(3),.theme-drink .post-card,.theme-drink .post-card:first-child,.theme-music .post-card,.theme-music .post-card:first-child,.theme-movie .post-card,.theme-movie .post-card:first-child { grid-column:1; }
  .theme-drink .post-card:nth-child(2),.theme-drink .post-card:nth-child(3) { margin-top:0; }
  .theme-drink .post-card:first-child .post-cover,.theme-drink .post-cover { aspect-ratio:4/3; }
  .post-summary { max-width:23rem; }
}

/* Punk collage category grid */
.category-section { position:relative; overflow:hidden; color:#111; background:#e9e4d3; }
.category-section::before { content:"NO FUTURE / MAKE YOUR OWN ARCHIVE"; position:absolute; left:-3vw; top:38%; color:rgba(17,17,17,.045); font:900 clamp(5rem,14vw,14rem)/.75 Impact,"Arial Black",sans-serif; white-space:nowrap; transform:rotate(-7deg); pointer-events:none; }
.category-section .section-heading { position:relative; z-index:2; }
.heading-en { display:block; width:max-content; margin-top:13px; padding:4px 10px; color:#fff; background:#111; font:800 clamp(.95rem,1.8vw,1.35rem)/1 "Arial Narrow",Impact,sans-serif; letter-spacing:.075em; text-transform:uppercase; transform:rotate(-2deg); }
.category-grid { position:relative; z-index:2; gap:34px; padding:10px 10px 24px 0; }
.category-link { aspect-ratio:1; isolation:isolate; padding:clamp(24px,4vw,44px); color:#111; background:#f2ecdc; border:5px solid #111; box-shadow:10px 10px 0 #111; overflow:visible; transition:transform .2s ease,box-shadow .2s ease; }
.category-link:nth-child(1) { transform:rotate(-1.1deg); }
.category-link:nth-child(2) { transform:rotate(1deg); }
.category-link:nth-child(3) { transform:rotate(.65deg); }
.category-link:nth-child(4) { transform:rotate(-.8deg); }
.category-link:nth-child(5) { transform:rotate(1.2deg); }
.category-link:nth-child(6) { transform:rotate(-.45deg); }
.category-link:hover { color:#111; border-color:#111; box-shadow:4px 4px 0 #111; transform:translate(6px,6px) rotate(0); }
.category-link::before { z-index:-2; opacity:1; transition:none; clip-path:polygon(0 2%,4% 0,9% 2%,15% 0,21% 1%,28% 0,35% 2%,42% 0,49% 1%,58% 0,66% 2%,74% 0,82% 1%,91% 0,100% 2%,98% 15%,100% 24%,98% 34%,100% 44%,98% 55%,100% 66%,98% 78%,100% 89%,98% 100%,88% 98%,78% 100%,67% 98%,57% 100%,47% 98%,36% 100%,25% 98%,15% 100%,3% 98%,1% 87%,3% 76%,1% 65%,3% 53%,1% 42%,3% 29%,1% 16%); }
.category-link::after { content:""; position:absolute; z-index:-1; width:42%; height:20px; top:-13px; left:29%; background:rgba(235,228,202,.82); border:1px solid rgba(17,17,17,.28); transform:rotate(-3deg); }
.category-link.game::before { background:#f3e900; }
.category-link.gear::before { background:#111; }
.category-link.drink::before { background:#ef2383; }
.category-link.music::before { background:#080b17; }
.category-link.travel::before { background:#2457ff; }
.category-link.movie::before { background:#b7ff00; }
.category-link > * { position:relative; z-index:1; }
.category-number { width:max-content; padding:4px 9px; color:#fff; background:#111; font-family:"Segoe Print","Bradley Hand",cursive; font-weight:800; transform:rotate(-3deg); }
.category-link.drink .category-number { color:#111; background:#f3e900; }
.category-name { display:flex; align-items:end; gap:clamp(10px,2vw,22px); margin:0 0 28px; font-family:inherit; }
.category-cn { font-family:var(--tc-han); font-size:clamp(3.8rem,8vw,8rem); font-weight:900; line-height:.82; letter-spacing:-.08em; }
.category-en { display:inline-block; padding:6px 10px 3px; color:#fff; background:#111; font:900 clamp(1.25rem,3vw,2.8rem)/.92 Impact,"Arial Black",sans-serif; letter-spacing:.035em; transform:rotate(-5deg); }
.category-link.gear .category-en { color:#111; background:#00d9ff; transform:rotate(4deg); }
.category-link.drink .category-cn { color:#111; }
.category-link.drink .category-en { color:#111; background:#fff; }
.category-link.gear .category-cn,.category-link.music .category-cn,.category-link.travel .category-cn { color:#fff; }
.category-link.music .category-en { color:#111; background:#ff6a00; transform:rotate(3deg); }
.category-link.travel .category-en { color:#111; background:#b7ff00; transform:rotate(-3deg); }
.category-link.travel .category-cn { font-size:clamp(3rem,7vw,6.6rem); }
.category-link.movie .category-en { color:#fff; background:#5b1bb0; transform:rotate(4deg); }
.category-desc { position:relative; display:grid; grid-template-columns:1fr auto; gap:5px 18px; align-items:end; color:#111; }
.category-desc span { font-weight:650; }
.category-desc b { grid-column:1; width:max-content; padding:3px 7px; color:#fff; background:#111; font:800 .78rem/1.15 "Arial Narrow",Impact,sans-serif; letter-spacing:.07em; transform:rotate(-1deg); }
.category-desc i { grid-column:2; grid-row:1/3; font:900 clamp(2rem,4vw,3.8rem)/1 Impact,sans-serif; font-style:normal; transition:transform .2s ease; }
.category-link:hover .category-number,.category-link:hover .category-desc { color:inherit; }
.category-link:hover .category-desc i { transform:translate(5px,-5px) rotate(8deg); }
.category-link.drink .category-desc { color:#111; }
.category-link.drink .category-desc b { color:#111; background:#fff; }
.category-link.gear .category-desc,.category-link.music .category-desc,.category-link.travel .category-desc { color:#fff; }
.category-link.gear .category-desc b { color:#111; background:#00d9ff; }
.category-link.music .category-desc b { color:#111; background:#ff6a00; }
.category-link.travel .category-desc b { color:#111; background:#b7ff00; }
.category-link.movie .category-desc b { color:#fff; background:#5b1bb0; }
.category-link.gear .category-number { color:#111; background:#00d9ff; }
.category-link.drink .category-number { color:#111; background:#fff; }
.category-link.music .category-number { color:#111; background:#ff6a00; }
.category-link.travel .category-number { color:#111; background:#b7ff00; }
.category-link.movie .category-number { color:#fff; background:#5b1bb0; }
.category-link::after { display:none; }

@media (max-width:700px) {
  .category-grid { gap:28px; padding-right:8px; }
  .category-link { aspect-ratio:1.04; box-shadow:7px 7px 0 #111; }
  .category-name { align-items:start; flex-direction:column; }
  .category-cn { font-size:clamp(4.4rem,22vw,7rem); }
  .category-en { font-size:clamp(1.5rem,9vw,2.6rem); }
  .category-desc { gap:6px 14px; }
}

/* Site-wide English language: punk cut-and-paste typography */
.brand,.home-hero h1,.about-grid h2,.profile-row p,.contact-lead,.contact-links,.footer,.hero-art b {
  font-family:Impact,"Arial Black","Arial Narrow",sans-serif;
}
.brand { padding:3px 7px 2px; color:#fff; background:#111; font-size:.92rem; letter-spacing:.025em; text-transform:uppercase; transform:rotate(-1deg); }
.brand-dot { background:#f3e900; box-shadow:none; }
.home-hero h1 { width:max-content; max-width:100%; padding:0 .08em; color:#111; background:linear-gradient(transparent 68%,#ef2383 68%); letter-spacing:-.035em; text-transform:uppercase; transform:rotate(-1deg); }
.home-copy strong { display:inline-block; padding:0 5px; color:#111; background:#f3e900; font-family:Impact,"Arial Black",sans-serif; font-weight:900; letter-spacing:.035em; transform:rotate(-2deg); }
.about-grid h2 { text-transform:uppercase; letter-spacing:-.035em; }
.profile-row span,.profile-row p { text-transform:uppercase; }
.profile-row span { display:flex; align-self:stretch; align-items:center; justify-content:center; width:max-content; padding:3px 7px; color:#fff; background:#111; font-family:Impact,"Arial Black",sans-serif; letter-spacing:.06em; transform:rotate(-2deg); }
.profile-row:nth-child(2) span { color:#111; background:#f3e900; transform:rotate(2deg); }
.profile-row:nth-child(3) span { background:#ef2383; transform:rotate(-1deg); }
.profile-row:nth-child(4) span { color:#111; background:#f3e900; transform:rotate(1deg); }
.profile-row p { font-family:"Arial Narrow","Helvetica Neue",Arial,sans-serif; font-weight:800; letter-spacing:.025em; }
.profile-links { display:flex; flex-wrap:wrap; align-items:center; gap:10px 13px; }
.profile-links a { --link-tilt:-1.5deg; display:inline-block; padding:5px 9px 3px; color:#fff; background:#111; text-decoration:none; transform:rotate(var(--link-tilt)); transform-origin:center; }
.profile-links a:nth-child(3n+2) { --link-tilt:1.5deg; color:#111; background:#f3e900; }
.profile-links a:nth-child(3n) { --link-tilt:-.7deg; color:#fff; background:#ef2383; }
.profile-links a:hover { animation:cutout-shiver .34s steps(2,end) infinite; }
.profile-links a:focus-visible { outline:3px solid #00d9ff; outline-offset:3px; }
@keyframes cutout-shiver {
  0%,100% { transform:translate(0,0) rotate(var(--link-tilt)); }
  25% { transform:translate(-1px,1px) rotate(calc(var(--link-tilt) - 1deg)); }
  50% { transform:translate(1px,-1px) rotate(calc(var(--link-tilt) + 1deg)); }
  75% { transform:translate(1px,1px) rotate(calc(var(--link-tilt) - .5deg)); }
}
@media (prefers-reduced-motion:reduce) {
  .profile-links a:hover,.contact-links a:hover { animation:none; }
}
.politics-open { padding:0; color:inherit; background:none; border:0; font:inherit; letter-spacing:inherit; text-align:left; text-transform:inherit; cursor:pointer; }
.politics-open b { display:inline-block; margin-left:.35em; padding:3px 7px 2px; color:#111; background:#f3e900; font:900 .72em/1 Impact,"Arial Black",sans-serif; letter-spacing:.06em; transform:rotate(-1deg); }
.politics-open:hover b,.politics-open:focus-visible b { color:#fff; background:#111; }
.contact-lead { font-weight:900; letter-spacing:-.035em; text-transform:uppercase; }
.contact-lead a { display:inline-block; padding:0 .12em; color:#111; background:#f3e900; transform:rotate(-2deg); }
.contact-links { align-items:center; font-weight:900; letter-spacing:.06em; text-transform:uppercase; }
.contact-links a { --link-tilt:-2deg; padding:5px 9px 3px; color:#fff; background:#111; transform:rotate(var(--link-tilt)); transform-origin:center; }
.contact-links a:nth-child(2n) { --link-tilt:2deg; color:#111; background:#f3e900; }
.contact-links a:nth-child(3n) { --link-tilt:-1deg; color:#fff; background:#ef2383; }
.contact-links a:hover { color:#fff; animation:cutout-shiver .34s steps(2,end) infinite; }
.contact-links a:nth-child(2n):hover { color:#111; }
.footer { font-family:"Arial Narrow",Impact,sans-serif; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.eyebrow,.category-number,.gallery-count,.cover-label,.cover-number,.post-date,.profile-row span,.collection-code,.gallery-more,.dialog-kicker,.music-toggle {
  font-family:Impact,"Arial Black","Arial Narrow",sans-serif;
  font-style:normal;
  font-weight:900;
  letter-spacing:.065em;
  text-transform:uppercase;
}
.eyebrow { display:inline-block; width:max-content; max-width:100%; padding:4px 8px 2px; color:#fff; background:#111; transform:rotate(-1.5deg); }
.collection-page .eyebrow { color:var(--page-bg); background:var(--page-ink); }
.collection-page .collection-code { font-family:Impact,"Arial Black",sans-serif; }
.collection-page .hero-art b { font-family:Impact,"Arial Black",sans-serif; font-weight:900; }
.cover-label { padding:3px 7px 2px; color:#fff; background:#111; }
.dialog-kicker { display:inline-block; width:max-content; padding:4px 8px 2px; color:#111; background:var(--page-accent,#f3e900); transform:rotate(-1deg); }
.music-toggle { font-size:.76rem; }
.music-state { display:inline-block; padding:1px 4px; }
.music-dock.is-playing .music-state { color:#111; background:#f3e900; transform:rotate(-1deg); }
.nav { gap:clamp(12px,2vw,28px); }
.nav .brand { margin-right:auto; }
.nav .music-dock { position:static; right:auto; bottom:auto; flex:0 0 auto; padding:6px 9px; box-shadow:none; }

/* Quiet monochrome image fields for the first and third home screens. */
.home-hero { position:relative; isolation:isolate; }
.home-hero::before {
  content:"";
  position:absolute;
  inset:0 50%;
  z-index:-1;
  width:100vw;
  transform:translateX(-50%);
  background:
    linear-gradient(rgba(251,250,247,.76),rgba(251,250,247,.84)),
    url("assets/home-first-bg.png") center 42%/cover no-repeat;
  pointer-events:none;
}
.contact { position:relative; isolation:isolate; min-height:72svh; display:flex; align-items:center; overflow:hidden; }
.contact::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(rgba(251,250,247,.78),rgba(251,250,247,.86)),
    url("assets/home-third-bg.png") center 45%/cover no-repeat;
  pointer-events:none;
}
.about-grid > div:first-child { padding-left:clamp(18px,3vw,40px); }
.contact > .shell { width:min(calc(100% - 88px),var(--max)); transform:translateX(20px); }

/* Keep every English label legible when the first collection tile moves on hover. */
.category-link.game:hover .category-en,
.category-link.game:focus-visible .category-en,
.category-link.game:hover .category-number,
.category-link.game:focus-visible .category-number,
.category-link.game:hover .category-desc b,
.category-link.game:focus-visible .category-desc b {
  color:#fff;
  background:#111;
  opacity:1;
  visibility:visible;
}

/* Political archive dialog */
.politics-dialog { width:min(920px,calc(100% - 40px)); max-height:calc(100svh - 40px); padding:0; color:#111; background:#f3e900; border:5px solid #111; box-shadow:14px 14px 0 #111; }
.politics-dialog::backdrop { background:rgba(10,10,10,.68); backdrop-filter:blur(7px); }
.politics-panel { padding:clamp(24px,4vw,46px); }
.politics-head { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; padding-bottom:24px; border-bottom:4px solid #111; }
.politics-head h2 { margin-top:18px; max-width:700px; font-family:var(--tc-han); font-size:clamp(2.5rem,6vw,5rem); font-weight:900; letter-spacing:-.07em; }
.politics-close { flex:0 0 auto; width:44px; height:44px; color:#fff; background:#111; border:0; font:900 1.1rem/1 Impact,sans-serif; cursor:pointer; transform:rotate(2deg); }
.politics-disclaimer { max-width:720px; margin:22px 0; font-size:.9rem; line-height:1.75; }
.politics-messages { max-height:34svh; overflow:auto; display:flex; flex-direction:column; gap:16px; padding:4px 4px 20px; }
.politics-message { max-width:82%; padding:14px 16px; border:3px solid #111; box-shadow:5px 5px 0 #111; }
.politics-message span { display:block; margin-bottom:6px; font:900 .72rem/1 Impact,"Arial Black",sans-serif; letter-spacing:.08em; }
.politics-message p { margin:0; line-height:1.72; }
.politics-message.is-ai { align-self:flex-start; background:#fff; }
.politics-message.is-user { align-self:flex-end; color:#fff; background:#111; box-shadow:5px 5px 0 #ef2383; }
.politics-form { padding-top:22px; border-top:4px solid #111; }
.politics-form label { display:block; margin-bottom:8px; font:900 .8rem/1 Impact,"Arial Black",sans-serif; letter-spacing:.08em; }
.politics-form textarea { width:100%; resize:vertical; min-height:84px; padding:13px 14px; color:#111; background:#fff; border:3px solid #111; border-radius:0; font:inherit; line-height:1.55; }
.politics-form > div { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:12px; }
.politics-form small { max-width:560px; color:#4e4a00; line-height:1.45; }
.politics-form button { flex:0 0 auto; padding:11px 16px 8px; color:#fff; background:#111; border:0; font:900 .86rem/1 Impact,"Arial Black",sans-serif; letter-spacing:.06em; cursor:pointer; transform:rotate(-1deg); }
.politics-form button:disabled { cursor:wait; opacity:.62; transform:none; }

@media (max-width:560px) {
  .brand { font-size:.78rem; }
  .home-hero h1 { width:auto; }
  .about-grid > div:first-child { padding-left:18px; }
  .contact > .shell { width:calc(100% - 64px); transform:translateX(16px); }
  .contact-links { gap:16px 18px; }
  .nav .music-dock { padding:5px 7px; }
  .nav .music-toggle { font-size:.65rem; }
  .politics-open b { display:block; width:max-content; margin:8px 0 0; }
  .politics-dialog { width:calc(100% - 24px); max-height:calc(100svh - 24px); box-shadow:7px 7px 0 #111; }
  .politics-panel { padding:20px 17px 22px; }
  .politics-message { max-width:92%; }
  .politics-form > div { align-items:flex-start; flex-direction:column; }
  .politics-form button { align-self:flex-end; }
}

/* Uploaded covers always win over the decorative category placeholders. */
.collection-page .post-cover.has-image::before,
.theme-game .post-cover.has-image::before,
.theme-gear .post-cover.has-image::before,
.theme-drink .post-cover.has-image::before,
.theme-music .post-cover.has-image::before,
.theme-movie .post-cover.has-image::before {
  background:var(--post-image) center/cover no-repeat;
}

/* Travel — interactive punk atlas */
.theme-travel { --page-bg:#e9e4d3; --page-ink:#111; --page-muted:#58564f; --page-line:rgba(17,17,17,.2); --page-accent:#2457ff; }
.theme-travel .header { background:rgba(233,228,211,.9); }
.travel-hero { min-height:62svh; display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(42px,8vw,120px); align-items:end; padding-block:clamp(90px,13vw,155px) 76px; }
.travel-hero h1 { width:max-content; max-width:100%; padding:0 .08em; font-family:var(--tc-han); font-size:clamp(4rem,9vw,8.5rem); font-weight:900; line-height:.78; letter-spacing:-.09em; background:linear-gradient(transparent 66%,#2457ff 66%); transform:rotate(-1deg); }
.travel-intro { max-width:480px; margin:0 0 30px; font-size:1.08rem; font-weight:650; }
.grade-legend { display:flex; flex-wrap:wrap; gap:10px; }
.grade-legend span,.travel-grade { display:grid; place-items:center; width:44px; aspect-ratio:1; color:#111; border:3px solid #111; box-shadow:4px 4px 0 #111; font:900 1.25rem/1 Impact,"Arial Black",sans-serif; transform:rotate(-2deg); }
.grade-legend span:nth-child(2n) { transform:rotate(2deg); }
.grade-A { --grade:#f3e900; }
.grade-B { --grade:#00d9ff; }
.grade-C { --grade:#ef2383; }
.grade-D { --grade:#f7f3e8; }
.grade-F { --grade:#ff3b30; }
.grade-legend span,.travel-grade,.city-chip b { background:var(--grade); }
.map-section { padding:86px 0 120px; color:#f8f5ec; background:#0a0a0a; }
.map-head { display:flex; align-items:end; justify-content:space-between; gap:42px; margin-bottom:34px; }
.map-head h2 { color:#fff; font-family:var(--tc-han); font-weight:900; }
.map-head > p { width:min(100%,430px); margin:0; color:#aaa69d; }
.map-section .eyebrow { color:#111; background:#f3e900; }
.map-filters { display:flex; flex-wrap:wrap; gap:9px; margin-bottom:22px; }
.map-filters button { padding:7px 11px 5px; color:#fff; background:transparent; border:2px solid #57544e; font:900 .78rem/1 Impact,"Arial Black",sans-serif; letter-spacing:.07em; cursor:pointer; }
.map-filters button:hover,.map-filters button:focus-visible,.map-filters button.is-active { color:#111; background:#f3e900; border-color:#f3e900; }
.world-map-wrap { position:relative; overflow:hidden; background:#101010; border:4px solid #f8f5ec; box-shadow:10px 10px 0 #2457ff; }
.world-map { width:100%; height:clamp(430px,62vw,720px); background:#d9d9d4; }
.world-map.leaflet-container { font-family:var(--tc-han); }
.world-map .leaflet-tile-pane { filter:saturate(.72) contrast(1.04); }
.world-map .map-marker { cursor:pointer; filter:drop-shadow(2px 2px 0 #111); transition:stroke-width .15s ease,filter .15s ease; }
.world-map .map-marker:hover,.world-map .map-marker:focus { stroke-width:4; filter:drop-shadow(3px 3px 0 #111); }
.world-map .leaflet-control-zoom { border:3px solid #111; border-radius:0; box-shadow:4px 4px 0 #111; }
.world-map .leaflet-control-zoom a { color:#fff; background:#111; border-color:#383838; border-radius:0; font-family:Impact,"Arial Black",sans-serif; }
.world-map .leaflet-control-zoom a:hover { color:#111; background:#f3e900; }
.world-map .leaflet-control-attribution { padding:2px 5px; color:#111; background:rgba(255,255,255,.9); font-size:10px; }
.world-map .leaflet-control-attribution a { color:#1347d7; text-decoration:underline; }
.city-map-tooltip { padding:5px 8px 3px; color:#fff; background:#111; border:0; border-radius:0; box-shadow:4px 4px 0 #f3e900; font-weight:800; }
.leaflet-tooltip-top.city-map-tooltip::before { border-top-color:#111; }
.map-hint { position:absolute; left:16px; bottom:8px; margin:0; padding:3px 7px; color:#111; background:#f3e900; font-size:.72rem; font-weight:800; transform:rotate(-1deg); }
.city-index { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:44px; }
.city-chip { display:grid; grid-template-columns:40px 1fr; gap:0 11px; align-items:center; min-width:0; padding:11px; color:#fff; text-align:left; background:#171717; border:2px solid #44413c; cursor:pointer; }
.city-chip:hover,.city-chip:focus-visible { border-color:var(--grade); transform:translateY(-2px) rotate(-.35deg); }
.city-chip b { grid-row:1/3; display:grid; place-items:center; width:36px; aspect-ratio:1; color:#111; font:900 1rem/1 Impact,"Arial Black",sans-serif; }
.city-chip span { min-width:0; overflow:hidden; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
.city-chip small { color:#8f8b83; font-size:.72rem; }
.travel-dialog-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; }
.travel-dialog .travel-grade { flex:0 0 64px; width:64px; font-size:2rem; }
.travel-dialog .dialog-meta { grid-template-columns:repeat(3,1fr); }
@media (max-width:900px) {
  .city-index { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:700px) {
  .travel-hero { grid-template-columns:1fr; align-items:start; min-height:auto; padding-block:76px 60px; }
  .travel-hero h1 { font-size:clamp(3.6rem,17vw,5.6rem); }
  .map-head { align-items:start; flex-direction:column; }
  .world-map { height:520px; }
  .city-index { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:460px) {
  .city-index { grid-template-columns:1fr; }
  .travel-dialog .dialog-meta { grid-template-columns:1fr; }
}