*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --cream:#F4EFE6;
  --cream2:#EDE5D8;
  --ink:#2A2320;
  --ink2:#3A322E;
  --red:#A4625D;
  --gold:#B38B5A;
  --steel:#8A7E74;
  --mist:#B8AFA5;
  --dark:#2E2622;
  --darker:#231C19;
  --gold-deep:#977146;
  --music-bg-a:#C8A882;
  --music-bg-b:#B79063;
  --music-ink:#241D1A;
  --music-ink-soft:rgba(36,29,26,.72);
  --music-surface:rgba(26,23,20,.08);
  --music-border:rgba(26,23,20,.16);
  --music-control:rgba(36,29,26,.14);
  --music-control-hover:rgba(36,29,26,.22);
  --music-control-border:rgba(36,29,26,.3);
  --music-primary:#241D1A;
  --music-primary-hover:#181310;
  --music-primary-contrast:#F4EFE6;
  --font-body:'Syne',sans-serif;
  --font-display:'Alan Sans',sans-serif;
  --font-mono:'JetBrains Mono',monospace;
  --r:20px;
  --gap:13px;
  --bento-top-offset:66px;
}

:root[data-theme='monochrome']{
  --cream:#F1F0EC;
  --cream2:#E3E0DA;
  --ink:#242424;
  --ink2:#3A3A3A;
  --red:#6D6D6D;
  --gold:#9A9A9A;
  --steel:#818181;
  --mist:#B9B9B9;
  --dark:#2B2B2B;
  --darker:#1B1B1B;
  --gold-deep:#747474;
  --music-bg-a:#C5C5C5;
  --music-bg-b:#8E8E8E;
  --music-ink:#1E1E1E;
  --music-ink-soft:rgba(30,30,30,.72);
  --music-surface:rgba(24,24,24,.08);
  --music-border:rgba(24,24,24,.16);
  --music-control:rgba(30,30,30,.14);
  --music-control-hover:rgba(30,30,30,.22);
  --music-control-border:rgba(30,30,30,.28);
  --music-primary:#232323;
  --music-primary-hover:#161616;
  --music-primary-contrast:#F1F0EC;
}

:root[data-theme='alabaster']{
  --cream:#F8F7F4;
  --cream2:#EEECE8;
  --ink:#282828;
  --ink2:#3E3E3E;
  --red:#727272;
  --gold:#8C8C8C;
  --steel:#7D7D7D;
  --mist:#B4B4B4;
  --dark:#2C2C2C;
  --darker:#1E1E1E;
  --gold-deep:#6E6E6E;
  --music-bg-a:#D5D5D3;
  --music-bg-b:#B4B4B1;
  --music-ink:#232323;
  --music-ink-soft:rgba(35,35,35,.72);
  --music-surface:rgba(25,25,25,.08);
  --music-border:rgba(25,25,25,.16);
  --music-control:rgba(35,35,35,.14);
  --music-control-hover:rgba(35,35,35,.22);
  --music-control-border:rgba(35,35,35,.28);
  --music-primary:#272727;
  --music-primary-hover:#181818;
  --music-primary-contrast:#F8F7F4;
}

:root[data-theme='graphite']{
  --cream:#ECEBE9;
  --cream2:#DBD9D6;
  --ink:#202022;
  --ink2:#313136;
  --red:#5E6369;
  --gold:#7C8289;
  --steel:#6F747B;
  --mist:#A8ADB4;
  --dark:#2A2D31;
  --darker:#1D2024;
  --gold-deep:#636970;
  --music-bg-a:#A8AEB5;
  --music-bg-b:#7E848B;
  --music-ink:#1C2024;
  --music-ink-soft:rgba(28,32,36,.72);
  --music-surface:rgba(20,23,27,.1);
  --music-border:rgba(20,23,27,.18);
  --music-control:rgba(28,32,36,.14);
  --music-control-hover:rgba(28,32,36,.24);
  --music-control-border:rgba(28,32,36,.32);
  --music-primary:#1F2328;
  --music-primary-hover:#14181C;
  --music-primary-contrast:#ECEBE9;
}

:root[data-theme='stone']{
  --cream:#F1ECE4;
  --cream2:#E4DDD2;
  --ink:#2F2A26;
  --ink2:#48413B;
  --red:#8B6F61;
  --gold:#A49079;
  --steel:#8A8178;
  --mist:#B2A89E;
  --dark:#312B27;
  --darker:#24201D;
  --gold-deep:#7C6B58;
  --music-bg-a:#C7B7A7;
  --music-bg-b:#A58E79;
  --music-ink:#221D19;
  --music-ink-soft:rgba(34,29,25,.72);
  --music-surface:rgba(24,20,18,.08);
  --music-border:rgba(24,20,18,.16);
  --music-control:rgba(34,29,25,.14);
  --music-control-hover:rgba(34,29,25,.22);
  --music-control-border:rgba(34,29,25,.28);
  --music-primary:#29211C;
  --music-primary-hover:#1B1613;
  --music-primary-contrast:#F1ECE4;
}

:root[data-theme='sage']{
  --cream:#F2F0E6;
  --cream2:#E6E4D7;
  --ink:#24302A;
  --ink2:#33443C;
  --red:#85715D;
  --gold:#9C8E5D;
  --gold-deep:#7F744A;
  --steel:#7E8678;
  --mist:#A8B2A0;
  --dark:#26322C;
  --darker:#1F2924;
  --music-bg-a:#B4B89C;
  --music-bg-b:#8E9776;
  --music-ink:#1F2924;
  --music-ink-soft:rgba(31,41,36,.72);
  --music-surface:rgba(20,29,25,.1);
  --music-border:rgba(20,29,25,.18);
  --music-control:rgba(31,41,36,.14);
  --music-control-hover:rgba(31,41,36,.22);
  --music-control-border:rgba(31,41,36,.34);
  --music-primary:#1F2924;
  --music-primary-hover:#151C19;
  --music-primary-contrast:#F2F0E6;
}

:root[data-theme='terracotta']{
  --cream:#F4EFE6;
  --cream2:#EDE5D8;
  --ink:#2A2320;
  --ink2:#3A322E;
  --red:#A4625D;
  --gold:#B38B5A;
  --steel:#8A7E74;
  --mist:#B8AFA5;
  --dark:#2E2622;
  --darker:#231C19;
  --gold-deep:#977146;
  --music-bg-a:#C8A882;
  --music-bg-b:#B79063;
  --music-ink:#241D1A;
  --music-ink-soft:rgba(36,29,26,.72);
  --music-surface:rgba(26,23,20,.08);
  --music-border:rgba(26,23,20,.16);
  --music-control:rgba(36,29,26,.14);
  --music-control-hover:rgba(36,29,26,.22);
  --music-control-border:rgba(36,29,26,.3);
  --music-primary:#241D1A;
  --music-primary-hover:#181310;
  --music-primary-contrast:#F4EFE6;
}

:root[data-theme='rosewood']{
  --cream:#F5ECE8;
  --cream2:#E9DDD7;
  --ink:#322427;
  --ink2:#49353A;
  --red:#A26B71;
  --gold:#B18D74;
  --steel:#8B7678;
  --mist:#C2AEB0;
  --dark:#3A2A2E;
  --darker:#281D20;
  --gold-deep:#8F705B;
  --music-bg-a:#CFA3A3;
  --music-bg-b:#B18186;
  --music-ink:#2A1F22;
  --music-ink-soft:rgba(42,31,34,.72);
  --music-surface:rgba(29,20,23,.1);
  --music-border:rgba(29,20,23,.18);
  --music-control:rgba(42,31,34,.14);
  --music-control-hover:rgba(42,31,34,.24);
  --music-control-border:rgba(42,31,34,.32);
  --music-primary:#2F2327;
  --music-primary-hover:#1F171A;
  --music-primary-contrast:#F5ECE8;
}

:root[data-theme='forest']{
  --cream:#EEF2E8;
  --cream2:#E0E8D8;
  --ink:#1F3128;
  --ink2:#2D473A;
  --red:#6C7F5E;
  --gold:#8AA06A;
  --steel:#71856C;
  --mist:#9FB095;
  --dark:#24382D;
  --darker:#1A291F;
  --gold-deep:#6B8150;
  --music-bg-a:#9FB290;
  --music-bg-b:#748A60;
  --music-ink:#1A291F;
  --music-ink-soft:rgba(26,41,31,.72);
  --music-surface:rgba(16,28,21,.1);
  --music-border:rgba(16,28,21,.18);
  --music-control:rgba(26,41,31,.14);
  --music-control-hover:rgba(26,41,31,.24);
  --music-control-border:rgba(26,41,31,.32);
  --music-primary:#1E3025;
  --music-primary-hover:#131F18;
  --music-primary-contrast:#EEF2E8;
}

:root[data-theme='dusk']{
  --cream:#F5ECE7;
  --cream2:#E9D8D2;
  --ink:#332630;
  --ink2:#4A3946;
  --red:#B86A72;
  --gold:#8E79A6;
  --steel:#92808F;
  --mist:#C2B0BC;
  --dark:#382B35;
  --darker:#271D27;
  --gold-deep:#6F5F83;
  --music-bg-a:#D49AA5;
  --music-bg-b:#9A799F;
  --music-ink:#261D28;
  --music-ink-soft:rgba(38,29,40,.72);
  --music-surface:rgba(29,21,31,.1);
  --music-border:rgba(29,21,31,.18);
  --music-control:rgba(38,29,40,.14);
  --music-control-hover:rgba(38,29,40,.22);
  --music-control-border:rgba(38,29,40,.34);
  --music-primary:#2A202D;
  --music-primary-hover:#1B151D;
  --music-primary-contrast:#F5ECE7;
}

:root[data-theme='sunset']{
  --cream:#FFF0E3;
  --cream2:#FFD9C0;
  --ink:#3A2A2F;
  --ink2:#574048;
  --red:#EA6A52;
  --gold:#DE954F;
  --steel:#93706F;
  --mist:#C7A1A0;
  --dark:#4A3239;
  --darker:#342329;
  --gold-deep:#B8753D;
  --music-bg-a:#FFAB6B;
  --music-bg-b:#F07753;
  --music-ink:#342329;
  --music-ink-soft:rgba(52,35,41,.72);
  --music-surface:rgba(33,20,25,.1);
  --music-border:rgba(33,20,25,.18);
  --music-control:rgba(52,35,41,.14);
  --music-control-hover:rgba(52,35,41,.24);
  --music-control-border:rgba(52,35,41,.32);
  --music-primary:#3B272E;
  --music-primary-hover:#271A1F;
  --music-primary-contrast:#FFF0E3;
}

:root[data-theme='coastal']{
  --cream:#F2F8FA;
  --cream2:#DDEFF2;
  --ink:#143042;
  --ink2:#1E465C;
  --red:#F06A4A;
  --gold:#2A9D8F;
  --gold-deep:#1D746A;
  --steel:#5E8190;
  --mist:#8FB0BC;
  --dark:#1B4963;
  --darker:#123548;
  --music-bg-a:#7CC6DA;
  --music-bg-b:#4B96B8;
  --music-ink:#0F2E41;
  --music-ink-soft:rgba(15,46,65,.72);
  --music-surface:rgba(8,33,48,.1);
  --music-border:rgba(8,33,48,.2);
  --music-control:rgba(15,46,65,.14);
  --music-control-hover:rgba(15,46,65,.24);
  --music-control-border:rgba(15,46,65,.34);
  --music-primary:#0F2E41;
  --music-primary-hover:#0A2230;
  --music-primary-contrast:#F2F8FA;
}

:root[data-theme='electric']{
  --cream:#FFF4E8;
  --cream2:#FFE2C7;
  --ink:#20233B;
  --ink2:#31355A;
  --red:#FF6B3D;
  --gold:#13B6A4;
  --steel:#6A7393;
  --mist:#A6ADD0;
  --dark:#263057;
  --darker:#18203D;
  --gold-deep:#0E897B;
  --music-bg-a:#FFB24B;
  --music-bg-b:#FF6B3D;
  --music-ink:#1F2541;
  --music-ink-soft:rgba(31,37,65,.72);
  --music-surface:rgba(21,27,47,.1);
  --music-border:rgba(21,27,47,.18);
  --music-control:rgba(31,37,65,.14);
  --music-control-hover:rgba(31,37,65,.24);
  --music-control-border:rgba(31,37,65,.34);
  --music-primary:#1D2340;
  --music-primary-hover:#14192E;
  --music-primary-contrast:#FFF4E8;
}

:root[data-theme='aurora']{
  --cream:#F5FFF6;
  --cream2:#D9FFF0;
  --ink:#1D2C44;
  --ink2:#2B4366;
  --red:#FF4F88;
  --gold:#00BFA6;
  --steel:#6A86A5;
  --mist:#9DB7D2;
  --dark:#243C63;
  --darker:#172846;
  --gold-deep:#008D7A;
  --music-bg-a:#5DE0D0;
  --music-bg-b:#3C8DFF;
  --music-ink:#15263F;
  --music-ink-soft:rgba(21,38,63,.72);
  --music-surface:rgba(16,30,50,.1);
  --music-border:rgba(16,30,50,.2);
  --music-control:rgba(21,38,63,.14);
  --music-control-hover:rgba(21,38,63,.24);
  --music-control-border:rgba(21,38,63,.34);
  --music-primary:#1A3152;
  --music-primary-hover:#122239;
  --music-primary-contrast:#F5FFF6;
}

:root[data-font='editorial']{
  --font-body:'Syne',sans-serif;
  --font-display:'Alan Sans',sans-serif;
  --font-mono:'JetBrains Mono',monospace;
}

:root[data-font='quiet-serif']{
  --font-body:'Manrope',sans-serif;
  --font-display:'Cormorant Garamond',serif;
  --font-mono:'IBM Plex Mono',monospace;
}

:root[data-font='modernist']{
  --font-body:'Instrument Sans',sans-serif;
  --font-display:'Fraunces',serif;
  --font-mono:'IBM Plex Mono',monospace;
}

:root[data-font='tech-grid']{
  --font-body:'Manrope',sans-serif;
  --font-display:'Space Grotesk',sans-serif;
  --font-mono:'JetBrains Mono',monospace;
}

:root[data-font='neo-humanist']{
  --font-body:'Plus Jakarta Sans',sans-serif;
  --font-display:'Outfit',sans-serif;
  --font-mono:'IBM Plex Mono',monospace;
}

:root[data-font='literary']{
  --font-body:'Source Serif 4',serif;
  --font-display:'Playfair Display',serif;
  --font-mono:'JetBrains Mono',monospace;
}

:root[data-font='geometric']{
  --font-body:'DM Sans',sans-serif;
  --font-display:'Sora',sans-serif;
  --font-mono:'IBM Plex Mono',monospace;
}

:root[data-font='friendly']{
  --font-body:'Nunito Sans',sans-serif;
  --font-display:'Rubik',sans-serif;
  --font-mono:'JetBrains Mono',monospace;
}

html{scroll-behavior:smooth}
body{
  background:var(--cream2);
  color:var(--ink);
  font-family:var(--font-body);
  min-height:100vh;
  padding:var(--gap);
  overflow-x:hidden;
}

.bento{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-template-rows:190px 186px 218px auto;
  grid-template-areas:
    "hero hero hero capital"
    "hero hero hero landmark"
    "cuisine culture culture history"
    "phrases regions regions economy";
  gap:var(--gap);
  max-width:1380px;
  margin:var(--bento-top-offset) auto 0;
}

/* Slightly tighten the middle content band by reducing internal content heights. */

.tile{
  border-radius:var(--r);
  padding:26px;
  position:relative;
  overflow:hidden;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease;
  cursor:default;
  will-change:transform;
}
.tile:hover{transform:translateY(-5px);box-shadow:0 24px 60px rgba(0,0,0,.14)}
.t-cream{background:var(--cream)}
.t-dark{background:var(--dark);color:#F4EFE6}
.t-darker{background:var(--darker);color:#F4EFE6}
.t-red{background:var(--red);color:#F4EFE6}

.modal-trigger{cursor:pointer}
.modal-trigger:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
}

.eyebrow{
  font-size:10px;
  letter-spacing:2.5px;
  text-transform:uppercase;
  color:var(--steel);
  margin-bottom:5px;
  font-weight:700;
}
.eyebrow-light{color:rgba(255,255,255,.45)}
.heading{font-family:var(--font-display);font-weight:600;line-height:1.05}
.heading-18{font-size:18px;font-weight:700}
.heading-24{font-size:24px;font-weight:800}
.heading-28{font-size:28px;font-weight:800}
.heading-light{color:#F4EFE6}

.tile-hero{
  grid-area:hero;
  background:var(--darker);
  color:#F4EFE6;
  padding:0;
}
.hero-gallery{
  position:absolute;
  inset:0;
  z-index:0;
}
.hero-gallery::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(21,18,16,.82) 0%,rgba(21,18,16,.35) 52%,rgba(21,18,16,.18) 100%);
  z-index:3;
  pointer-events:none;
}
.hero-slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .9s ease;
}
.hero-slide.is-active{opacity:1}
.hero-slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(1.07) contrast(1.04);
}
.hero-slide-meta{
  position:absolute;
  top:16px;
  left:16px;
  z-index:4;
  background:rgba(0,0,0,.34);
  border:1px solid rgba(255,255,255,.2);
  border-radius:12px;
  backdrop-filter:blur(6px);
  padding:9px 11px;
}
.hero-meta-location{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:1.1px;
  text-transform:uppercase;
  color:var(--gold);
}
.hero-meta-feature{
  margin-top:2px;
  font-size:12px;
  color:#fff;
  font-weight:700;
}
.hero-gallery-controls{
  position:absolute;
  right:18px;
  bottom:18px;
  display:flex;
  align-items:center;
  gap:10px;
  z-index:12;
  pointer-events:auto;
}
.hero-nav{
  width:42px;
  height:25px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.38);
  background:rgba(0,0,0,.25);
  color:#fff;
  font-size:15px;
  line-height:1;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.hero-nav:hover{background:rgba(0,0,0,.46)}
.hero-dots{
  display:flex;
  gap:7px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.18);
}
.hero-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  border:none;
  cursor:pointer;
  background:rgba(255,255,255,.45);
  position:relative;
  overflow:hidden;
}
.hero-dot.is-active{
  width:24px;
  border-radius:999px;
  background:rgba(255,255,255,.24);
}
.hero-dot.is-active::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:rgba(255,255,255,.9);
  transform-origin:left center;
  transform:scaleX(0);
  will-change:transform;
  animation:heroDotLoader var(--hero-auto-duration, 5000ms) cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes heroDotLoader{
  to{transform:scaleX(1)}
}
#sakura{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:4;
}
.hero-body{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  z-index:6;
  padding:28px 30px;
  background:linear-gradient(to top,rgba(21,18,16,.96) 0%,rgba(21,18,16,0) 100%);
}
.hero-tag{
  display:inline-block;
  font-size:10px;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:700;
  margin-bottom:10px;
}
.hero-title{
  font-family:var(--font-display);
  font-size:clamp(52px,6.5vw,96px);
  font-weight:600;
  line-height:.9;
  letter-spacing:-2px;
  margin-bottom:18px;
}
.hero-stats{
  display:flex;
  gap:26px;
  flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.12);
  padding-top:14px;
  padding-right:236px;
}
.hs-val{
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:500;
  color:#fff;
}
.hs-lbl{
  font-size:9px;
  color:var(--mist);
  letter-spacing:1.3px;
  text-transform:uppercase;
  margin-top:1px;
}

.tile-capital{
  grid-area:capital;
  background:var(--cream);
  color:var(--ink);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.tile-capital::before{
  content:'';
  position:absolute;
  top:12px;
  right:12px;
  width:122px;
  height:122px;
  background-image:url('../country/japan/tokyo-japan.svg');
  background-repeat:no-repeat;
  background-position:top right;
  background-size:contain;
  opacity:1;
  pointer-events:none;
  z-index:0;
}
.tile-capital > *{position:relative;z-index:1}
.cap-flag{
  position:absolute;
  top:14px;
  right:14px;
  width:28px;
  height:20px;
  border-radius:5px;
  background:#fff;
  border:1px solid rgba(0,0,0,.1);
  box-shadow:0 2px 8px rgba(0,0,0,.08);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:3;
}
.cap-flag-disc{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#BC002D;
}
.cap-kana{
  font-family:var(--font-display);
  font-size:66px;
  font-weight:600;
  opacity:.1;
  position:absolute;
  bottom:12px;
  right:16px;
  color:var(--ink);
  line-height:1;
  pointer-events:none;
}
.cap-name{
  font-family:var(--font-display);
  font-size:40px;
  font-weight:600;
  color:var(--ink);
  line-height:1;
  margin-top:6px;
}
.cap-pop{
  font-family:var(--font-mono);
  font-size:10px;
  font-weight:600;
  color:var(--mist);
  letter-spacing:1.2px;
}
.cap-pop-row{
  margin-top:8px;
  display:flex;
  align-items:baseline;
  gap:8px;
}
.cap-pop-lbl{
  font-size:10px;
  color:var(--steel);
  letter-spacing:1.5px;
  text-transform:uppercase;
}
.cap-time-row{
  margin-top:4px;
}
.cap-time{
  font-family:var(--font-mono);
  font-size:30px;
  font-weight:600;
  color:var(--gold);
  line-height:1;
}
.cap-timezone{
  margin-top:4px;
  font-size:10px;
  color:var(--steel);
  letter-spacing:1.5px;
  text-transform:uppercase;
}

.tile-music{
  grid-area:landmark;
  background:linear-gradient(145deg,var(--music-bg-a),var(--music-bg-b));
  color:var(--music-ink);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.tile-music .eyebrow-light{color:color-mix(in srgb, var(--music-ink) 58%, transparent)}
.music-embed-container{
  margin-top:14px;
  border-radius:12px;
  overflow:hidden;
  background:var(--music-surface);
  border:1px solid var(--music-border);
  padding:0;
}
.music-embed-container iframe{
  width:100%;
  display:block;
  border:none;
}
.music-controls-panel{
  margin-top:14px;
  border-radius:12px;
  background:transparent;
  border:none;
  padding:11px 11px 14px;
  position:relative;
  overflow:visible;
}
.music-control-row{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
}
.music-btn{
  border:1px solid var(--music-control-border);
  background:var(--music-control);
  color:var(--music-ink);
  border-radius:50%;
  width:36px;
  height:36px;
  padding:0;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  transition:all .2s ease;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.music-btn:hover{background:var(--music-control-hover)}
.music-btn-primary{
  background:var(--music-primary);
  color:var(--music-primary-contrast);
  border-color:color-mix(in srgb, var(--music-primary) 70%, transparent);
  width:50px;
  height:50px;
}
.music-btn-primary:hover{background:var(--music-primary-hover)}
.music-btn-icon{
  line-height:1;
}
#yt-toggle .music-btn-icon{transform:translateX(1.5px)}
#yt-toggle.is-playing .music-btn-icon{transform:translateX(-0.5px)}
.music-playback-row{
  margin-top:10px;
  display:grid;
  grid-template-columns:minmax(0,4fr) minmax(0,1fr);
  align-items:center;
  gap:10px;
}
.music-timeline-wrap{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:6px;
  max-width:92%;
  margin:0 auto;
}
.music-time{
  font-family:var(--font-mono);
  font-size:10px;
  color:var(--music-ink-soft);
}
.music-timeline{
  width:100%;
  appearance:none;
  height:4px;
  border-radius:999px;
  background:color-mix(in srgb, var(--music-ink) 22%, transparent);
  outline:none;
}
.music-timeline::-webkit-slider-thumb{
  appearance:none;
  width:11px;
  height:11px;
  border-radius:50%;
  background:var(--music-primary);
  border:none;
}
.music-timeline::-moz-range-thumb{
  width:11px;
  height:11px;
  border-radius:50%;
  background:var(--music-primary);
  border:none;
}
.music-volume-wrap{
  display:flex;
  align-items:center;
  gap:4px;
}
.music-meta-grid{
  margin-top:10px;
  display:flex;
  justify-content:center;
}
.music-now-line{
  margin:0;
  font-size:12px;
  color:var(--music-ink);
  text-align:center;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  line-height:1.35;
  overflow-wrap:anywhere;
  max-width:100%;
}
.music-volume-label{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:16px;
}
.music-volume-icon{
  font-size:14px;
  color:var(--music-ink-soft);
}
.music-volume{
  width:100%;
  appearance:none;
  height:5px;
  border-radius:999px;
  background:color-mix(in srgb, var(--music-ink) 22%, transparent);
  outline:none;
}
.music-volume::-webkit-slider-thumb{
  appearance:none;
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--music-primary);
  border:none;
}
.music-volume::-moz-range-thumb{
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--music-primary);
  border:none;
}
.visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.yt-audio-host{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
  overflow:hidden;
}
.music-embed-audio{
  height:96px;
  overflow:hidden;
  border-radius:12px;
  position:relative;
}
.music-embed-audio iframe{
  height:186px;
  transform:translateY(-90px);
}
.music-embed-audio::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:44px;
  background:linear-gradient(180deg,color-mix(in srgb, var(--music-primary) 92%, black 8%) 0%,color-mix(in srgb, var(--music-primary) 82%, transparent) 55%,transparent 100%);
  pointer-events:none;
  z-index:1;
}
.music-attribution{
  margin-top:14px;
}
.music-alt-text{
  font-size:11px;
  color:var(--mist);
  margin:0;
  font-style:italic;
  letter-spacing:.4px;
}

.tile-cuisine{grid-area:cuisine}
.cuisine-gallery{
  margin-top:14px;
  overflow:hidden;
  border-radius:16px;
  position:relative;
}
.cuisine-gallery::before,
.cuisine-gallery::after{
  content:'';
  position:absolute;
  top:0;
  bottom:0;
  width:32px;
  z-index:3;
  pointer-events:none;
}
.cuisine-gallery::before{
  left:0;
  background:linear-gradient(to right,var(--cream),rgba(244,239,230,0));
}
.cuisine-gallery::after{
  right:0;
  background:linear-gradient(to left,var(--cream),rgba(244,239,230,0));
}
.cuisine-track{
  display:flex;
  gap:10px;
  width:max-content;
  animation:cuisineGalleryScroll 40s linear infinite;
  will-change:transform;
  touch-action:pan-y;
}
.cuisine-gallery.is-interacting .cuisine-track{cursor:grabbing}
.cuisine-card{
  width:224px;
  height:154px;
  border-radius:14px;
  position:relative;
  overflow:hidden;
  flex-shrink:0;
  cursor:grab;
}
.cuisine-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .35s ease;
}
.cuisine-card:active{cursor:grabbing}
.cuisine-card::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.62),rgba(0,0,0,0) 58%);
}
.cuisine-card:hover img{transform:scale(1.08)}
.cuisine-trigger{
  position:absolute;
  left:10px;
  right:10px;
  bottom:10px;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  pointer-events:none;
}
.cuisine-label{
  color:#fff;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:1.2px;
  text-transform:uppercase;
  font-weight:500;
  pointer-events:auto;
  cursor:pointer;
}
.cuisine-expand-icon{
  width:22px;
  height:22px;
  border-radius:999px;
  background:rgba(0,0,0,.4);
  border:1px solid rgba(255,255,255,.45);
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  pointer-events:auto;
  cursor:pointer;
}
.cuisine-expand-icon svg{
  width:12px;
  height:12px;
  display:block;
}
@keyframes cuisineGalleryScroll{
  to{transform:translateX(calc(-50% - 5px))}
}

.tile-culture{
  grid-area:culture;
  background:var(--red);
  color:#F4EFE6;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}
.tile-culture .eyebrow{position:relative;z-index:4}
.culture-marquee{
  margin-top:10px;
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:8px;
  position:relative;
  z-index:2;
}
.culture-row{
  overflow:hidden;
  position:relative;
  mask-image:linear-gradient(to right,transparent,black 8%,black 92%,transparent);
}
.culture-track{
  display:flex;
  gap:9px;
  width:max-content;
  animation:cultureMarqueeLeft 28s linear infinite;
  will-change:transform;
}
.culture-row-reverse .culture-track{animation-name:cultureMarqueeRight}
.pill{
  background:rgba(255,255,255,.16);
  border-radius:100px;
  padding:7px 14px;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.3px;
  transition:all .2s ease;
  display:flex;
  align-items:center;
  gap:7px;
}
.culture-row-reverse .pill{
  padding:6px 13px;
}
.pill:hover{background:rgba(255,255,255,.32);transform:scale(1.06)}
.pill-icon{
  width:16px;
  height:16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.pill-icon svg{
  width:16px;
  height:16px;
  display:block;
}

@keyframes cultureMarqueeLeft{
  to{transform:translateX(calc(-50% - 4.5px))}
}
@keyframes cultureMarqueeRight{
  from{transform:translateX(calc(-50% - 4.5px))}
  to{transform:translateX(0)}
}

.tile-history{grid-area:history;background:var(--darker);display:flex;flex-direction:column}
.tile-history::before{
  content:'';
  position:absolute;
  top:44px;
  left:0;
  right:0;
  height:34px;
  background:linear-gradient(to bottom,var(--darker),transparent);
  z-index:2;
  pointer-events:none;
}
.tile-history::after{
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:46px;
  background:linear-gradient(to top,var(--darker),transparent);
  z-index:2;
  pointer-events:none;
}
.timeline{
  margin-top:12px;
  display:flex;
  flex-direction:column;
  gap:2px;
  overflow-y:auto;
  scrollbar-gutter:stable;
  flex:1;
  min-height:0;
  padding-right:6px;
}
.timeline::-webkit-scrollbar{width:9px}
.timeline::-webkit-scrollbar-track{
  background:rgba(255,255,255,.08);
  border-radius:999px;
}
.timeline::-webkit-scrollbar-track-piece{
  border-radius:999px;
}
.timeline::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--gold),var(--gold-deep));
  border-radius:12px;
  border:2px solid rgba(0,0,0,0);
  background-clip:padding-box;
  margin:6px 0;
}
.timeline{
  scrollbar-width:thin;
  scrollbar-color:var(--gold) rgba(255,255,255,.08);
}
.tl-item{
  display:grid;
  grid-template-columns:36px 8px 1fr;
  align-items:start;
  gap:8px;
  padding:7px 8px;
  border-radius:10px;
  transition:background .18s;
}
.tl-item:hover{background:rgba(255,255,255,.06)}
.tl-yr{
  font-family:var(--font-mono);
  font-size:10px;
  color:var(--gold);
  padding-top:4px;
  font-weight:500;
}
.tl-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--gold);
  margin-top:5px;
  flex-shrink:0;
}
.tl-event{font-size:12px;color:var(--mist);line-height:1.45}
.tl-item:hover .tl-event{color:#F4EFE6}

.tile-phrases{
  grid-area:phrases;
  display:flex;
  flex-direction:column;
}
.phrase-category-wrap{
  margin-top:auto;
  padding-top:16px;
}
.phrase-category-select{
  width:100%;
  appearance:none;
  border:1px solid rgba(26,23,20,.12);
  background:rgba(237,229,216,.96);
  color:var(--ink);
  border-radius:12px;
  padding:11px 38px 11px 14px;
  font-family:var(--font-body);
  font-size:13px;
  font-weight:700;
  line-height:1.2;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(0,0,0,.05);
}
.phrase-category-wrap{position:relative}
.phrase-category-wrap::after{
  content:'▾';
  position:absolute;
  right:14px;
  top:calc(50% + 6px);
  transform:translateY(-50%);
  color:var(--steel);
  pointer-events:none;
  font-size:14px;
}
.phrase-category-select:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
}
.flashcard-grid{
  margin-top:56px;
  position:relative;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  min-height:212px;
  flex:1;
  perspective:1200px;
}
.flashcard{
  position:absolute;
  width:100%;
  max-width:220px;
  min-height:152px;
  border:none;
  border-radius:14px;
  background:transparent;
  perspective:800px;
  cursor:grab;
  user-select:none;
  outline:none;
}
.flashcard:active{
  cursor:grabbing;
}
.flashcard-face{
  position:absolute;
  inset:0;
  border-radius:14px;
  padding:14px 12px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  backface-visibility:hidden;
  transition:transform .5s cubic-bezier(.22,.61,.36,1),box-shadow .3s ease;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}
.flashcard-front{background:var(--cream2);border:1px solid rgba(0,0,0,.05);transform:rotateY(0)}
.flashcard-back{
  background:rgba(21,18,16,.85);
  color:#F4EFE6;
  border:1px solid rgba(255,255,255,.1);
  transform:rotateY(180deg);
}
.flashcard.is-flipped .flashcard-front{transform:rotateY(180deg)}
.flashcard.is-flipped .flashcard-back{transform:rotateY(360deg)}
.flashcard:hover .flashcard-front,
.flashcard:hover .flashcard-back{box-shadow:0 14px 28px rgba(0,0,0,.18)}
.flashcard:focus-visible .flashcard-front,
.flashcard:focus-visible .flashcard-back{box-shadow:0 0 0 3px rgba(179,139,90,.4)}
.ph-en{
  font-size:10px;
  color:var(--steel);
  letter-spacing:1.5px;
  text-transform:uppercase;
  margin-bottom:4px;
  font-weight:700;
}
.ph-jp{
  font-family:var(--font-display);
  font-size:18px;
  font-weight:600;
  line-height:1.1;
}
.ph-roma{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--gold);
  margin-top:4px;
}
.ph-roma-front{
  display:block;
  max-height:0;
  overflow:hidden;
  margin-top:0;
  opacity:0;
  transform:translateY(4px);
  transition:max-height .22s ease,margin-top .22s ease,opacity .2s ease,transform .2s ease;
  pointer-events:none;
}
.flashcard-front .ph-en,
.flashcard-front .ph-jp{
  transition:transform .22s ease;
}
.flashcard:hover .ph-roma-front,
.flashcard.show-pronunciation .ph-roma-front,
.flashcard:focus-visible .ph-roma-front{
  max-height:20px;
  margin-top:4px;
  opacity:1;
  transform:translateY(0);
}
.flashcard:hover .flashcard-front .ph-en,
.flashcard:hover .flashcard-front .ph-jp,
.flashcard.show-pronunciation .flashcard-front .ph-en,
.flashcard.show-pronunciation .flashcard-front .ph-jp,
.flashcard:focus-visible .flashcard-front .ph-en,
.flashcard:focus-visible .flashcard-front .ph-jp{
  transform:translateY(-5px);
}
.ph-hint{
  margin-top:6px;
  font-size:10px;
  color:rgba(255,255,255,.45);
  letter-spacing:1px;
  text-transform:uppercase;
}
.phrase-audio-btn{
  position:absolute;
  top:8px;
  right:8px;
  width:24px;
  height:24px;
  border-radius:50%;
  border:1px solid rgba(0,0,0,.14);
  background:rgba(255,255,255,.82);
  color:var(--ink);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:3;
}
.flashcard-back .phrase-audio-btn{
  border-color:rgba(255,255,255,.18);
  background:rgba(0,0,0,.3);
  color:#F4EFE6;
}
.phrase-audio-btn svg{
  width:12px;
  height:12px;
}

.tile-regions{grid-area:regions;min-height:250px}
.japan-map-min{
  position:absolute;
  inset:0;
  margin:0;
  border-radius:inherit;
  overflow:hidden;
  z-index:0;
}
.japan-map-min iframe{
  width:100%;
  height:100%;
  display:block;
  border:0;
  filter:grayscale(1) saturate(0) contrast(.9) brightness(1.04);
  opacity:.3;
}
.region-select-wrap{
  position:absolute;
  z-index:2;
  top:14px;
  right:14px;
  width:min(176px,48%);
  margin-top:0;
}
.region-select{
  width:100%;
  appearance:none;
  border:1px solid rgba(26,23,20,.12);
  background:rgba(237,229,216,.92);
  color:var(--ink);
  border-radius:12px;
  padding:12px 40px 12px 14px;
  font-family:var(--font-body);
  font-size:13px;
  font-weight:700;
  line-height:1.2;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
}
.region-select-wrap::after{
  content:'▾';
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  color:var(--steel);
  pointer-events:none;
  font-size:14px;
}
.region-select:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
}

.tile-economy{grid-area:economy;background:var(--dark)}
.eco-gdp{
  font-family:var(--font-display);
  font-size:46px;
  font-weight:600;
  line-height:1;
  color:var(--gold);
  margin-top:10px;
}
.eco-rank{
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--mist);
  margin-top:5px;
}
.eco-bars{margin-top:22px;display:flex;flex-direction:column;gap:9px}
.eco-row{display:flex;align-items:center;gap:9px}
.eco-lbl{font-size:10px;color:var(--mist);width:56px;flex-shrink:0}
.eco-pct{
  width:34px;
  text-align:right;
  font-family:var(--font-mono);
  font-size:10px;
  color:var(--gold);
  flex-shrink:0;
}
.eco-track{
  flex:1;
  height:3px;
  background:rgba(255,255,255,.1);
  border-radius:2px;
  overflow:hidden;
}
.eco-fill{
  height:100%;
  background:var(--gold);
  border-radius:2px;
  width:0;
  transition:width 2.2s cubic-bezier(.22,.61,.36,1) .9s;
}
.eco-stats-grid{
  margin-top:18px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.eco-stat-card{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  padding:10px;
}
.eco-stat-val{
  font-family:var(--font-mono);
  font-size:18px;
  color:var(--gold);
  font-weight:500;
}
.eco-stat-lbl{
  margin-top:3px;
  font-size:10px;
  color:var(--mist);
  letter-spacing:.7px;
  text-transform:uppercase;
  line-height:1.25;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.modal-overlay{
  position:fixed;
  inset:0;
  z-index:100;
  background:rgba(21,18,16,.7);
  backdrop-filter:blur(8px);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease;
  padding:20px;
}
.modal-overlay.active{opacity:1;pointer-events:all}
.modal-box{
  background:var(--cream);
  border-radius:24px;
  width:100%;
  max-width:520px;
  max-height:80vh;
  overflow-y:auto;
  padding:34px;
  transform:scale(.94) translateY(16px);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1);
  color:var(--ink);
}
.modal-overlay.active .modal-box{transform:scale(1) translateY(0)}
.modal-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:22px;
}
.modal-title{
  font-family:var(--font-display);
  font-size:32px;
  font-weight:600;
  line-height:1;
}
.modal-close{
  width:36px;
  height:36px;
  border-radius:50%;
  background:var(--cream2);
  border:none;
  cursor:pointer;
  font-size:18px;
  color:var(--steel);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  transition:all .2s;
}
.modal-close:hover{background:var(--ink);color:#F4EFE6}
.modal-body{font-size:14px;line-height:1.7;color:var(--ink2)}
.modal-body p+p{margin-top:12px}
.modal-photo{
  width:100%;
  border-radius:12px;
  display:block;
  margin:0 0 12px;
  aspect-ratio:16/9;
  object-fit:cover;
}
.modal-tag{
  display:inline-block;
  background:var(--red);
  color:#F4EFE6;
  border-radius:100px;
  padding:4px 12px;
  font-size:10px;
  letter-spacing:2px;
  text-transform:uppercase;
  font-weight:700;
  margin-bottom:14px;
}
.detail-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:18px;
}
.detail-card{background:var(--cream2);border-radius:14px;padding:14px}
.detail-val{
  font-family:var(--font-mono);
  font-size:22px;
  font-weight:500;
  color:var(--red);
}
.detail-lbl{
  font-size:10px;
  color:var(--steel);
  letter-spacing:1.5px;
  text-transform:uppercase;
  margin-top:3px;
  font-weight:700;
}

.geo-logo-btn{
  position:absolute;
  top:calc(var(--gap) + (var(--bento-top-offset) - 34px) / 2);
  left:max(var(--gap), calc((100vw - 1380px) / 2));
  min-width:34px;
  height:34px;
  padding:0 2px;
  border:none;
  background:none;
  cursor:pointer;
  z-index:50;
  color:var(--ink);
  opacity:.65;
  transition:opacity .2s ease;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
}
.geo-logo-btn:hover,.geo-logo-btn:focus-visible{opacity:1}
.geo-logo-btn:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:6px}
.geo-logo-svg{width:34px;height:34px;display:block;overflow:visible;flex-shrink:0}
.geo-logo-wordmark{
  font-family:var(--font-display);
  font-weight:600;
  font-size:22px;
  line-height:1;
  letter-spacing:.2px;
  color:var(--ink);
  text-transform:lowercase;
  white-space:nowrap;
}

.style-switcher{
  position:absolute;
  top:calc(var(--gap) + (var(--bento-top-offset) - 34px) / 2);
  right:max(var(--gap), calc((100vw - 1380px) / 2));
  z-index:50;
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.style-control{
  min-width:188px;
  display:flex;
  flex-direction:column;
  gap:5px;
}
.style-label{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:1.3px;
  text-transform:uppercase;
  color:var(--steel);
  font-weight:600;
}
.style-select-wrap{
  position:relative;
}
.style-select-wrap::after{
  content:'▾';
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  color:var(--steel);
  pointer-events:none;
  font-size:13px;
}
.style-select{
  width:100%;
  appearance:none;
  border:1px solid rgba(0,0,0,.12);
  background:rgba(244,239,230,.88);
  color:var(--ink);
  border-radius:14px;
  padding:10px 38px 10px 14px;
  font-family:var(--font-body);
  font-size:13px;
  font-weight:700;
  line-height:1.2;
  cursor:pointer;
  transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;
  box-shadow:0 10px 24px rgba(0,0,0,.08);
  backdrop-filter:blur(6px);
}
.style-select:hover{
  transform:translateY(-1px);
  border-color:rgba(0,0,0,.24);
}
.style-select:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
}

.tile{
  opacity:0;
  animation:tileIn .65s cubic-bezier(.34,1.56,.64,1) forwards;
  transform:translateY(22px);
}
@keyframes tileIn{to{opacity:1;transform:translateY(0)}}
.tile:nth-child(1){animation-delay:.04s}
.tile:nth-child(2){animation-delay:.1s}
.tile:nth-child(3){animation-delay:.16s}
.tile:nth-child(4){animation-delay:.22s}
.tile:nth-child(5){animation-delay:.28s}
.tile:nth-child(6){animation-delay:.34s}
.tile:nth-child(7){animation-delay:.4s}
.tile:nth-child(8){animation-delay:.46s}
.tile:nth-child(9){animation-delay:.52s}

.counter{display:inline}

@media (prefers-reduced-motion:reduce){
  .cuisine-track{animation:none}

  .hero-slide{transition:none}
  .culture-track{animation:none}
}

@media(max-width:960px){
  .bento{
    grid-template-columns:repeat(2,1fr);
    grid-template-rows:auto;
    grid-template-areas:
      "hero hero"
      "capital landmark"
      "cuisine culture"
      "history phrases"
      "regions regions"
      "economy economy";
  }
  .tile-hero{min-height:360px}
  .hero-stats{padding-right:0;gap:20px}
  .hero-body{padding-bottom:60px}
  .hero-gallery-controls{
    left:50%;
    right:auto;
    bottom:14px;
    transform:translateX(-50%);
    gap:8px;
  }
  .tile-regions{min-height:270px}
  .timeline{flex:none;max-height:210px}
}

@media(max-width:580px){
  :root{--gap:10px;--bento-top-offset:54px}
  .style-switcher{
    position:static;
    margin:0 var(--gap) 4px;
    justify-content:flex-start;
    flex-wrap:wrap;
  }
  .style-control{
    min-width:min(100%, 220px);
    flex:1 1 180px;
  }
  .bento{
    grid-template-columns:1fr;
    grid-template-areas:
      "hero"
      "capital"
      "landmark"
      "cuisine"
      "culture"
      "history"
      "phrases"
      "regions"
      "economy";
  }
  .tile{padding:22px}
  .tile-culture{justify-content:flex-start}
  .tile-hero{min-height:320px}
  .hero-body{padding-bottom:56px}
  .tile-regions{min-height:286px}
  .hero-gallery-controls{
    left:50%;
    right:auto;
    bottom:12px;
    transform:translateX(-50%);
  }
  .hero-title{font-size:clamp(40px,15vw,72px)}
  .cuisine-card{width:186px;height:130px}
  .cuisine-card{cursor:pointer}
  .cuisine-card:active{cursor:pointer}
  .timeline{flex:none;max-height:170px}
  .region-select-wrap{
    width:min(220px,78%);
  }
  .flashcard-grid{margin-top:50px;min-height:204px}
  .flashcard{max-width:240px;min-height:164px}
}