/* =============================================================
   Japan, October 2026 — trip guide
   Mobile-first. White cream + charcoal + rust accent.
   ============================================================= */

:root{
  --bg:#fafaf7;
  --bg-soft:#f3efe5;
  --ink:#1a1a1a;
  --ink-soft:#5c5650;
  --ink-faint:#9a948a;
  --accent:#a8401a;
  --accent-soft:#c66631;
  --rule:#e5e0d4;
  --rule-soft:#efeae0;
  --display:"Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:-apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  scroll-padding-top:60px;
  overflow-x:hidden;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; height:auto; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* =============================================================
   Sticky nav — horizontally scrollable city chips on mobile
   ============================================================= */
.nav{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(250,250,247,0.94);
  -webkit-backdrop-filter:saturate(180%) blur(10px);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--rule);
}
.nav__inner{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 16px;
  max-width:1180px;
  margin:0 auto;
}
.nav__brand{
  flex-shrink:0;
  font-family:var(--display);
  font-weight:600;
  font-size:15px;
  letter-spacing:-0.01em;
  color:var(--ink);
  line-height:1.2;
}
.nav__brand .year{ color:var(--accent); }
.nav__list{
  display:flex;
  gap:2px;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  -ms-overflow-style:none;
  margin:0;
  padding:2px 0;
  list-style:none;
  -webkit-overflow-scrolling:touch;
  mask-image:linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 24px), transparent 100%);
}
.nav__list::-webkit-scrollbar{ display:none; }
.nav__list li{ flex-shrink:0; }
.nav__list a{
  display:inline-block;
  font-family:var(--sans);
  font-size:13px;
  font-weight:500;
  color:var(--ink-soft);
  padding:7px 11px;
  border-radius:4px;
  white-space:nowrap;
  transition:color 0.15s;
}
.nav__list a:hover,
.nav__list a:focus{
  color:var(--accent);
  text-decoration:none;
  background:rgba(168,64,26,0.06);
}

/* =============================================================
   Cover
   ============================================================= */
.cover{
  max-width:780px;
  margin:0 auto;
  padding:64px 20px 56px;
}
.cover__kicker{
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:600;
  margin-bottom:18px;
}
.cover__title{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(40px, 10vw, 72px);
  line-height:1.02;
  letter-spacing:-0.025em;
  margin:0 0 16px;
  color:var(--ink);
}
.cover__title .accent{ color:var(--accent); }
.cover__sub{
  font-family:var(--display);
  font-style:italic;
  font-weight:400;
  font-size:clamp(20px, 5vw, 26px);
  line-height:1.35;
  color:var(--ink-soft);
  margin:0 0 32px;
  max-width:32ch;
}
.cover__route{
  font-family:var(--sans);
  font-size:13px;
  letter-spacing:0.04em;
  color:var(--ink-soft);
  border-top:1px solid var(--rule);
  padding-top:20px;
  line-height:1.55;
}
.cover__route .arrow{ color:var(--accent); margin:0 6px; }
.cover__route strong{ color:var(--ink); font-weight:600; }

/* =============================================================
   City sections
   ============================================================= */
.city{
  margin-bottom:72px;
  scroll-margin-top:64px;
}
.city__hero{
  width:100%;
  aspect-ratio:16/11;
  object-fit:cover;
  background:var(--rule);
  margin-bottom:32px;
}
.city__hero.is-tall{ aspect-ratio:4/5; }
.city__body{
  max-width:780px;
  margin:0 auto;
  padding:0 20px;
}
.city__meta{
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--accent);
  margin-bottom:10px;
}
.city__meta .sep{ color:var(--ink-faint); margin:0 6px; }
.city__name{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(36px, 9vw, 56px);
  line-height:1;
  letter-spacing:-0.022em;
  margin:0;
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:14px;
}
.city__name .ja{
  font-family:var(--display);
  font-weight:400;
  font-style:normal;
  font-size:0.52em;
  color:var(--ink-faint);
  letter-spacing:0;
}
.city__intro{
  font-size:17px;
  line-height:1.65;
  color:var(--ink);
  margin:22px 0 28px;
  max-width:62ch;
}

/* facts strip */
.facts-strip{
  display:flex;
  gap:0;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  margin:0 0 40px;
}
.facts-strip .fact{
  flex:1;
  padding:14px 10px;
  border-right:1px solid var(--rule);
  min-width:0;
}
.facts-strip .fact:last-child{ border-right:none; }
.facts-strip dt{
  font-family:var(--sans);
  font-size:10px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin:0 0 4px;
  font-weight:500;
}
.facts-strip dd{
  margin:0;
  font-family:var(--display);
  font-weight:500;
  font-size:16px;
  line-height:1.25;
  color:var(--ink);
  letter-spacing:-0.005em;
}

/* top 4 things */
.things__head{
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--accent);
  margin:0 0 24px;
  display:flex;
  align-items:center;
  gap:12px;
}
.things__head::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--rule);
}
.things__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:36px;
}
.thing{
  display:flex;
  flex-direction:column;
}
.thing img{
  width:100%;
  aspect-ratio:3/2;
  object-fit:cover;
  background:var(--rule);
  margin-bottom:14px;
}
.thing__num{
  font-family:var(--sans);
  font-size:10px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--ink-faint);
  font-weight:600;
  margin-bottom:6px;
}
.thing h3{
  font-family:var(--display);
  font-weight:600;
  font-size:22px;
  line-height:1.2;
  margin:0 0 8px;
  letter-spacing:-0.012em;
}
.thing p{
  margin:0;
  font-size:15.5px;
  line-height:1.6;
  color:var(--ink-soft);
}

/* =============================================================
   Footer
   ============================================================= */
footer{
  border-top:1px solid var(--rule);
  padding:56px 20px 64px;
  text-align:center;
  font-family:var(--sans);
  font-size:13px;
  color:var(--ink-faint);
  margin-top:48px;
}
footer .arigato{
  font-family:var(--display);
  font-size:28px;
  color:var(--accent);
  margin:0 0 10px;
  font-weight:500;
}
footer p{ margin:6px 0; }
footer a{ color:var(--accent); }

/* =============================================================
   Larger screens
   ============================================================= */
@media (min-width:720px){
  body{ font-size:18px; }
  .nav__inner{ padding:14px 32px; gap:24px; }
  .nav__brand{ font-size:16px; }
  .nav__list a{ font-size:14px; padding:7px 13px; }
  .cover{ padding:104px 32px 80px; }
  .city{ margin-bottom:120px; }
  .city__hero{ aspect-ratio:16/9; max-height:78vh; margin-bottom:40px; }
  .city__hero.is-tall{ aspect-ratio:4/3; max-height:78vh; }
  .city__body{ padding:0 32px; }
  .city__intro{ font-size:18.5px; line-height:1.7; }
  .facts-strip dd{ font-size:18px; }
  .things__grid{ grid-template-columns:1fr 1fr; gap:48px 40px; }
  .thing h3{ font-size:24px; }
  .thing p{ font-size:16px; }
}

@media (min-width:1100px){
  .city__body{ padding:0; max-width:820px; }
}

/* =============================================================
   Smaller refinements
   ============================================================= */
@media (max-width:420px){
  body{ font-size:16.5px; }
  .nav__inner{ padding:9px 14px; gap:10px; }
  .nav__brand{ font-size:14px; }
  .nav__list a{ font-size:12.5px; padding:6px 10px; }
  .cover{ padding:48px 18px 40px; }
  .cover__title{ font-size:clamp(36px, 11vw, 72px); }
  .cover__sub{ font-size:18px; }
  .city__body{ padding:0 18px; }
  .city__name{ font-size:36px; }
  .city__intro{ font-size:16.5px; }
  .facts-strip .fact{ padding:12px 8px; }
  .facts-strip dt{ font-size:9px; letter-spacing:0.14em; }
  .facts-strip dd{ font-size:15px; }
  .thing h3{ font-size:21px; }
  .thing p{ font-size:15px; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}