:root {
  --cream: #fffaf1;
  --cream-deep: #f7ead8;
  --apricot: #f5d6b6;
  --terracotta: #c75a2b;
  --terracotta-deep: #a84423;
  --coffee: #3d2922;
  --muted: #806b60;
  --mist: #dcebf1;
  --mist-deep: #7d9dac;
  --mist-ink: #496978;
  --line: rgba(179, 103, 61, .23);
  --shadow: 0 24px 60px rgba(95, 66, 45, .12);
  --serif: "Noto Serif TC", "Songti TC", "PMingLiU", serif;
  --sans: "Noto Sans TC", "Microsoft JhengHei", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100svh;
  overflow-x: hidden;
  color: var(--coffee);
  background:
    radial-gradient(circle at 10% 12%, rgba(245, 194, 145, .18), transparent 24rem),
    radial-gradient(circle at 91% 8%, rgba(212, 230, 237, .35), transparent 27rem),
    linear-gradient(160deg, #fffdf8 0%, var(--cream) 57%, #f8efe2 100%);
  font-family: var(--serif);
}

button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; font: inherit; }
a { color: inherit; }
button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 3px solid rgba(62, 111, 137, .55);
  outline-offset: 4px;
}
.skip-link {
  position: fixed;
  z-index: 100;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--coffee);
  color: #fff;
  transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }

.site-shell {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  padding: 28px clamp(24px, 4.3vw, 76px) 150px;
  overflow: hidden;
}
.site-shell::before, .site-shell::after {
  position: absolute;
  z-index: -2;
  content: "";
  width: 360px;
  height: 170px;
  border: 2px dashed rgba(217, 116, 52, .42);
  border-color: rgba(217, 116, 52, .42) transparent transparent transparent;
  border-radius: 50%;
  pointer-events: none;
}
.site-shell::before { left: -130px; top: 150px; transform: rotate(19deg); }
.site-shell::after { right: -120px; top: 230px; transform: rotate(-24deg); }

.island-header {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: 64px 1fr 180px;
  align-items: center;
  min-height: 66px;
}
.menu-toggle {
  display: grid;
  place-content: center;
  gap: 5px;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 1px solid rgba(199, 90, 43, .24);
  border-radius: 50%;
  background: rgba(255, 251, 244, .88);
  box-shadow: 0 10px 26px rgba(103, 70, 50, .1);
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
.menu-toggle:hover { transform: translateY(-2px); box-shadow: 0 13px 30px rgba(103, 70, 50, .15); }
.menu-toggle span { display: block; width: 20px; height: 2px; border-radius: 9px; background: var(--terracotta); }
.brand-capsule {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 66px;
  padding: 6px 22px 6px 7px;
  border: 1px solid rgba(199, 90, 43, .22);
  border-radius: 999px;
  background: rgba(255, 248, 237, .9);
  box-shadow: 0 12px 30px rgba(103, 70, 50, .1);
  text-decoration: none;
}
.brand-capsule img { display: block; width: 54px; height: 54px; object-fit: contain; }
.brand-capsule span { display: grid; gap: 3px; }
.brand-capsule strong { font-size: 21px; letter-spacing: .15em; line-height: 1; }
.brand-capsule small { font: 700 8px/1 var(--sans); letter-spacing: .22em; color: #69554c; }
.traveler-link {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 20px;
  border: 1px solid rgba(199, 90, 43, .3);
  border-radius: 999px;
  color: var(--terracotta-deep);
  background: rgba(255, 250, 242, .82);
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(103, 70, 50, .08);
}
.traveler-icon {
  width: 23px;
  height: 23px;
  flex: 0 0 23px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.welcome-hero { max-width: 850px; margin: clamp(52px, 7vw, 92px) auto 32px; text-align: center; }
.eyebrow { display: flex; align-items: center; justify-content: center; gap: 15px; margin: 0 0 16px; color: #9a6f55; font: 700 11px/1 var(--sans); letter-spacing: .24em; }
.eyebrow span { width: 48px; height: 1px; background: rgba(199, 90, 43, .45); }
.welcome-hero h1 { margin: 0; font-size: clamp(42px, 5.1vw, 72px); font-weight: 700; letter-spacing: .11em; line-height: 1.18; }
.welcome-hero > p:last-child { margin: 15px 0 0; font-size: clamp(19px, 2vw, 27px); letter-spacing: .12em; }
.hero-route { display: flex; align-items: center; justify-content: center; gap: 13px; height: 34px; color: var(--terracotta); }
.hero-route i { width: 34px; height: 1px; background: rgba(199, 90, 43, .48); }
.hero-route b { font-size: 24px; font-weight: 400; }

.destination-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  max-width: 1410px;
  margin: 0 auto;
}
.destination-card {
  position: relative;
  min-height: 292px;
  padding: clamp(34px, 4vw, 54px);
  overflow: hidden;
  border: 1px solid rgba(174, 101, 59, .25);
  border-radius: 30px;
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.48), var(--shadow);
}
.destination-minagi { background: linear-gradient(145deg, rgba(255,253,246,.96), rgba(250,229,204,.88)); }
.destination-cards { background: linear-gradient(145deg, rgba(249,253,254,.98), rgba(214,234,241,.94)); border-color: rgba(92, 135, 154, .3); }
.destination-copy { position: relative; z-index: 2; max-width: 72%; margin-left: 24%; }
.card-kicker { margin: 0 0 8px; color: #9c715a; font: 700 10px/1.3 var(--sans); letter-spacing: .19em; }
.destination-cards .card-kicker { color: var(--mist-ink); }
.destination-card h2 { margin: 0; font-size: clamp(34px, 3vw, 49px); line-height: 1.12; }
.card-subtitle { margin: 7px 0 0; font-size: clamp(16px, 1.5vw, 21px); letter-spacing: .08em; }
.short-rule { display: block; width: 34px; height: 2px; margin: 17px 0; background: var(--terracotta); }
.destination-cards .short-rule { background: var(--mist-deep); }
.card-description { margin: 0 0 25px; color: #594840; font-size: 17px; line-height: 1.8; }
.destination-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  min-width: 220px;
  min-height: 54px;
  padding: 0 26px;
  border-radius: 999px;
  font: 700 17px/1 var(--sans);
  letter-spacing: .08em;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.destination-button:hover { transform: translateY(-2px); }
.button-warm { color: #fff; background: linear-gradient(135deg, #d97138, #b94b26); box-shadow: 0 13px 25px rgba(180, 75, 36, .22); }
.button-blue { color: #fff; background: linear-gradient(135deg, #83a9ba, #587f91); box-shadow: 0 13px 25px rgba(79, 120, 139, .22); }
.plant-mark { position: absolute; left: 8%; bottom: 50px; width: 105px; height: 145px; transform: rotate(-3deg); opacity: .72; }
.plant-mark::before { position: absolute; content: ""; left: 48px; bottom: 0; width: 2px; height: 136px; background: #716633; transform: rotate(13deg); transform-origin: bottom; }
.plant-mark i { position: absolute; width: 52px; height: 24px; border: 2px solid #716633; border-radius: 100% 0 100% 0; transform: rotate(25deg); }
.plant-mark i:nth-child(1) { left: 48px; top: 8px; }
.plant-mark i:nth-child(2) { left: 12px; top: 45px; transform: scaleX(-1) rotate(18deg); }
.plant-mark i:nth-child(3) { left: 50px; top: 74px; transform: rotate(16deg) scale(.82); }
.plant-mark i:nth-child(4) { left: 22px; top: 101px; transform: scaleX(-1) rotate(19deg) scale(.7); }
.paper-hills, .mist-hills { position: absolute; inset: auto -6% -58px -5%; height: 135px; border-radius: 50% 50% 0 0; transform: rotate(-1deg); opacity: .5; }
.paper-hills { background: linear-gradient(135deg, rgba(239,175,118,.35), rgba(255,247,230,.2)); }
.mist-hills { background: linear-gradient(135deg, rgba(115,165,188,.26), rgba(227,242,247,.55)); }
.guide-mark { position: absolute; right: 8%; top: 68px; width: 116px; height: 116px; color: #66899a; opacity: .82; }
.guide-mark::before, .guide-mark::after { position: absolute; content: ""; border-radius: 50%; }
.guide-mark::before { inset: 9px; border: 2px solid currentColor; background: rgba(255,255,255,.2); }
.guide-mark::after { inset: 23px; border: 1px dashed rgba(73, 105, 120, .55); }
.guide-mark span, .guide-mark i { position: absolute; z-index: 1; left: 57px; top: 24px; width: 2px; height: 68px; border-radius: 999px; background: currentColor; transform-origin: 50% 50%; }
.guide-mark i { transform: rotate(90deg); }
.guide-mark b { position: absolute; z-index: 2; left: 41px; top: 38px; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(73,105,120,.55); border-radius: 50%; color: var(--mist-ink); background: rgba(247,252,254,.85); font-size: 19px; font-weight: 400; }

.island-notes { display: grid; grid-template-columns: minmax(280px, .36fr) minmax(0, 1fr); gap: 22px; max-width: 1410px; margin: 22px auto 0; }
.today-light, .island-letters {
  position: relative;
  min-height: 262px;
  border: 1px solid rgba(174, 101, 59, .23);
  border-radius: 28px;
  background: rgba(255, 251, 243, .88);
  box-shadow: 0 18px 48px rgba(95, 66, 45, .09);
}
.today-light { display: block; width: 100%; padding: 30px 34px; overflow: hidden; text-align: left; cursor: pointer; }
.today-light::after { position: absolute; content: ""; inset: auto -15% -55px -15%; height: 125px; border-radius: 50% 55% 0 0; background: rgba(243, 199, 153, .3); }
.sun-mark { display: block; margin-bottom: 10px; color: #d87a30; font: 40px/1 var(--serif); }
.section-label { display: block; font-size: 25px; font-weight: 700; letter-spacing: .08em; }
.today-light blockquote { margin: 24px 0 30px; max-width: 330px; font-size: 18px; line-height: 1.8; }
.today-light .text-link { position: relative; z-index: 1; color: var(--terracotta-deep); font: 700 15px/1 var(--sans); }
.sprout { position: absolute; z-index: 1; right: 26px; bottom: 16px; width: 58px; height: 72px; }
.sprout::before { position: absolute; content: ""; left: 27px; bottom: 0; width: 2px; height: 65px; background: #7a6b39; transform: rotate(7deg); }
.sprout::after { position: absolute; content: ""; left: 3px; top: 12px; width: 34px; height: 18px; border: 2px solid #7a6b39; border-radius: 100% 0; transform: rotate(28deg); }
.island-letters { padding: 26px 34px 24px; }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 25px; padding-bottom: 17px; border-bottom: 1px solid rgba(157, 105, 73, .18); }
.section-eyebrow { margin: 0 0 5px; color: #a2755e; font: 700 9px/1 var(--sans); letter-spacing: .18em; }
.section-heading h2 { margin: 0; font-size: 27px; letter-spacing: .08em; }
.section-heading p:last-child { margin: 5px 0 0; color: var(--muted); font-size: 14px; }
.text-button { flex: 0 0 auto; padding: 6px 0; border: 0; border-bottom: 1px solid currentColor; color: var(--terracotta-deep); background: none; font: 700 14px/1.4 var(--sans); cursor: pointer; }
.letter-list article { display: grid; grid-template-columns: 62px var(--letter-tag-width, 128px) minmax(0, 1fr); align-items: center; gap: 12px; min-height: 54px; border-bottom: 1px solid rgba(157, 105, 73, .15); }
.letter-list article:last-child { border-bottom: 0; }
.letter-list time { color: #a17660; font: 700 12px/1 var(--sans); }
.letter-list span { justify-self: start; padding: 6px 12px; border-radius: 999px; background: #f8e5d1; color: #7f5a46; font-size: 13px; }
.letter-list article[data-kind=explore] > span { background: #e5eff3; color: var(--mist-ink); }
.letter-list h3 { margin: 0; font-size: 16px; font-weight: 500; }

.island-mailbox { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 18px; max-width: 1410px; margin: 25px auto 0; padding: 18px 22px; }
.mail-icon { position: relative; display: inline-block; width: 28px; height: 20px; border: 2px solid currentColor; border-radius: 3px; }
.mail-icon::before, .mail-icon::after { position: absolute; content: ""; top: 2px; width: 16px; height: 2px; background: currentColor; }
.mail-icon::before { left: 1px; transform: rotate(34deg); transform-origin: left; }
.mail-icon::after { right: 1px; transform: rotate(-34deg); transform-origin: right; }
.island-mailbox p { display: flex; gap: 12px; margin: 0; }
.island-mailbox p span { color: var(--muted); }
.island-mailbox button { border: 0; border-bottom: 1px solid currentColor; color: var(--terracotta-deep); background: transparent; font-weight: 700; cursor: pointer; }

.coast-decoration { position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 150px; pointer-events: none; }
.shore { position: absolute; left: -5%; width: 110%; border-radius: 50% 50% 0 0; }
.shore-one { bottom: -62px; height: 145px; background: rgba(241, 197, 154, .48); transform: rotate(-1deg); }
.shore-two { right: -8%; bottom: -88px; height: 155px; background: rgba(233, 212, 179, .58); transform: rotate(1.5deg); }
.wave { position: absolute; left: -5%; width: 110%; height: 45px; border-top: 5px solid rgba(104, 164, 192, .55); border-radius: 50%; }
.wave-one { bottom: 34px; transform: rotate(.6deg); }
.wave-two { bottom: 13px; left: 5%; border-top-width: 3px; opacity: .62; transform: rotate(-.8deg); }
.lighthouse { position: absolute; right: 9%; bottom: 24px; width: 44px; height: 84px; }
.lighthouse i { position: absolute; left: 9px; bottom: 0; width: 27px; height: 58px; border: 2px solid #8e654e; border-radius: 4px 4px 1px 1px; background: repeating-linear-gradient(155deg, #fff8e9 0 14px, #d7773e 15px 24px); transform: perspective(70px) rotateX(-7deg); }
.lighthouse b { position: absolute; left: 5px; top: 14px; width: 35px; height: 15px; border: 2px solid #8e654e; border-radius: 4px; background: #f4c26d; }
.lighthouse span { position: absolute; left: 1px; top: 7px; width: 43px; height: 10px; border-top: 3px solid #8e654e; border-radius: 50%; }

.menu-backdrop { position: fixed; z-index: 40; inset: 0; border: 0; background: rgba(48, 37, 31, .32); backdrop-filter: blur(4px); }
.island-menu {
  display: flex;
  flex-direction: column;
  position: fixed;
  z-index: 50;
  inset: 0 auto 0 0;
  width: min(430px, 92vw);
  padding: 28px;
  overflow-y: auto;
  border-right: 1px solid rgba(177, 105, 67, .2);
  background: #fffaf1;
  box-shadow: 24px 0 70px rgba(47, 33, 26, .18);
  transform: translateX(-105%);
  transition: transform .28s ease;
}
.island-menu.is-open { transform: translateX(0); }
.menu-top { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 25px; }
.menu-top p { margin: 0 0 6px; color: #a1735c; font: 700 10px/1 var(--sans); letter-spacing: .18em; }
.menu-top h2 { margin: 0; font-size: 28px; }
.menu-top button, .dialog-close { width: 42px; height: 42px; padding: 0; border: 1px solid rgba(161, 94, 56, .22); border-radius: 50%; background: #fff; font: 26px/1 var(--sans); cursor: pointer; }
.island-menu nav { display: grid; }
.island-menu nav a, .island-menu nav button { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 11px; width: 100%; padding: 15px 3px; border: 0; border-bottom: 1px solid rgba(157, 105, 73, .16); background: none; text-align: left; text-decoration: none; cursor: pointer; }
.island-menu nav span { grid-row: 1 / 3; align-self: center; color: #ad7b63; font: 700 11px/1 var(--sans); }
.island-menu nav strong { font-size: 17px; }
.island-menu nav small { margin-top: 4px; color: var(--muted); font-size: 12px; }
.island-menu > .menu-top, .island-menu > nav, .island-menu > .menu-contact { flex-shrink: 0; }
.menu-contact { margin-top: auto; padding: 32px 3px 4px; font-family: var(--sans); }
.menu-contact-heading { margin: 0 0 12px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.menu-contact-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.menu-contact-links a { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; color: var(--terracotta-deep); font-size: 14px; line-height: 1.5; text-decoration: none; border-radius: 8px; }
.menu-contact-links a:hover { color: var(--coffee); }
.menu-contact-links svg { flex: 0 0 21px; width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.menu-contact-links .menu-contact-dot { fill: currentColor; stroke: none; }
.menu-contact-email { margin: 10px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.concept-archive { margin-top: 18px; padding: 16px 18px; border: 1px solid rgba(157, 105, 73, .17); border-radius: 18px; background: rgba(255,255,255,.5); }
.concept-archive summary { display: flex; justify-content: space-between; gap: 12px; font-weight: 700; cursor: pointer; }
.concept-archive summary::marker { display: none; }
.concept-archive p { color: var(--muted); font-size: 13px; line-height: 1.7; }
.concept-archive ul { margin: 13px 0 0; padding: 0; list-style: none; columns: 2; column-gap: 20px; }
.concept-archive li { break-inside: avoid; margin-bottom: 9px; color: #655148; font-size: 12px; line-height: 1.5; }

.island-dialog {
  width: min(670px, calc(100% - 32px));
  max-height: min(86svh, 780px);
  padding: clamp(30px, 5vw, 54px);
  overflow-y: auto;
  border: 1px solid rgba(168, 98, 60, .24);
  border-radius: 30px;
  color: var(--coffee);
  background: #fffaf1;
  box-shadow: 0 30px 90px rgba(48, 34, 27, .25);
}
.island-dialog::backdrop { background: rgba(48, 37, 31, .34); backdrop-filter: blur(5px); }
.dialog-close { position: absolute; top: 18px; right: 18px; }
.dialog-eyebrow { margin: 0 0 9px; color: #a1735c; font: 700 10px/1 var(--sans); letter-spacing: .2em; }
.island-dialog h2 { margin: 0 0 22px; font-size: 34px; }
.island-dialog > blockquote { margin: 0 0 26px; padding: 20px 24px; border-left: 3px solid var(--terracotta); border-radius: 0 18px 18px 0; background: rgba(247, 225, 200, .48); font-size: 22px; line-height: 1.75; }
.daily-details { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.daily-details section { padding: 16px; border-radius: 16px; background: #f5ecdf; }
.daily-details span { color: #9b705a; font: 700 11px/1 var(--sans); }
.daily-details p { margin: 10px 0 0; font-size: 14px; line-height: 1.6; }
.daily-details p i { display: inline-block; width: 11px; height: 11px; margin-right: 7px; border-radius: 50%; background: var(--terracotta); }
.dialog-note, .dialog-intro { color: var(--muted); font-size: 14px; line-height: 1.75; }
.dialog-letter-list { display: grid; gap: 12px; margin-top: 20px; }
.dialog-letter-list article { padding: 19px 20px; border-radius: 18px; background: #f7eddf; }
.dialog-letter-list time { color: #a1735c; font: 700 11px/1 var(--sans); }
.dialog-letter-list h3 { margin: 7px 0; font-size: 18px; }
.dialog-letter-list p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.mail-action { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 17px; padding: 22px; border: 1px solid rgba(168, 98, 60, .18); border-radius: 20px; background: #f7eddf; text-decoration: none; }
.mail-action span:nth-child(2) { display: grid; gap: 5px; }
.mail-action small { color: var(--muted); }

@media (max-width: 950px) {
  .site-shell { padding-inline: 24px; }
  .destination-copy { max-width: 78%; margin-left: 18%; }
  .destination-card { padding-inline: 32px; }
  .letter-list article { grid-template-columns: 52px var(--letter-tag-width, 128px) minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .site-shell { padding: 18px 15px 125px; }
  .island-header { grid-template-columns: 48px 1fr auto; min-height: 54px; gap: 8px; }
  .menu-toggle { width: 46px; height: 46px; }
  .brand-capsule { min-height: 52px; padding: 5px 11px 5px 5px; gap: 7px; }
  .brand-capsule img { width: 42px; height: 42px; }
  .brand-capsule strong { font-size: 16px; }
  .brand-capsule small { font-size: 6px; }
  .traveler-link { min-height: 44px; padding: 0 12px; }
  .traveler-link > span:last-child { display: none; }
  .welcome-hero { margin: 48px auto 27px; }
  .welcome-hero h1 { font-size: clamp(37px, 11vw, 52px); letter-spacing: .05em; }
  .welcome-hero > p:last-child { font-size: 18px; letter-spacing: .05em; }
  .eyebrow { font-size: 8px; letter-spacing: .17em; }
  .destination-grid, .island-notes { grid-template-columns: 1fr; }
  .destination-card { min-height: 315px; padding: 34px 26px; }
  .destination-copy { max-width: 100%; margin-left: 0; padding-right: 74px; }
  .destination-card h2 { font-size: 37px; }
  .guide-mark { right: 20px; top: 32px; transform: scale(.7); transform-origin: top right; }
  .plant-mark { right: 14px; left: auto; bottom: 20px; transform: rotate(-3deg) scale(.72); transform-origin: bottom right; }
  .destination-button { min-width: 0; width: 100%; }
  .island-notes { margin-top: 16px; gap: 16px; }
  .today-light, .island-letters { min-height: 0; }
  .today-light { padding: 28px 26px; }
  .island-letters { padding: 25px 22px 15px; }
  .section-heading { align-items: flex-end; }
  .section-heading p:last-child { display: none; }
  .letter-list article { grid-template-columns: 48px 1fr; gap: 7px 10px; padding: 14px 0; }
  .letter-list span { grid-column: 2; grid-row: 1; }
  .letter-list h3 { grid-column: 1 / -1; grid-row: 2; font-size: 15px; }
  .island-mailbox { align-items: flex-start; justify-content: flex-start; gap: 12px; padding-inline: 8px; }
  .island-mailbox p { display: grid; gap: 4px; flex: 1; }
  .island-mailbox button { align-self: center; white-space: nowrap; }
  .lighthouse { right: 10%; transform: scale(.8); transform-origin: bottom; }
  .daily-details { grid-template-columns: 1fr; }
  .island-dialog { padding: 48px 24px 28px; border-radius: 24px; }
  .concept-archive ul { columns: 1; }
}

@media (max-width: 390px) {
  .brand-capsule { justify-self: center; padding-right: 5px; }
  .brand-capsule span { display: none; }
  .destination-copy { padding-right: 0; }
  .guide-mark, .plant-mark { opacity: .28; }
  .island-mailbox button span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

/* Product announcements use the existing island-letter list and archive. */
.letter-list article{padding-block:10px;min-width:0}
.letter-list h3{min-width:0;line-height:1.7}
.letter-list h3 a,.dialog-letter-list h3 a{color:inherit;text-decoration:none}
.letter-list h3 a:hover,.dialog-letter-list h3 a:hover{color:var(--terracotta-deep)}
.letter-list a:focus-visible,.dialog-letter-list a:focus-visible{outline:2px solid var(--terracotta);outline-offset:4px;border-radius:3px}
.letter-list article[data-kind=update]>span{background:#edf0e5;color:#5e7254}
.dialog-letter-list .letter-entry-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.letter-entry-meta>span{font:500 12px/1.5 var(--sans);color:var(--terracotta-deep)}
.dialog-letter-list article[data-kind=update] .letter-entry-meta>span{color:#5e7254}
.dialog-letter-list .letter-product-link{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:12px;color:var(--terracotta-deep);font:500 14px/1.6 var(--sans);text-underline-offset:5px}

/* The summary and full letter list share the same badge dimensions. */
.letter-list,.dialog-letter-list{--letter-tag-width:128px}
.letter-list article>span,.dialog-letter-list .letter-entry-meta>span{
  display:inline-flex;align-items:center;justify-content:center;
  inline-size:var(--letter-tag-width);flex:0 0 var(--letter-tag-width);
  min-block-size:32px;box-sizing:border-box;padding:6px 12px;
  border-radius:999px;background:#f8e5d1;color:#7f5a46;
  font:500 13px/1.5 var(--sans);text-align:center;white-space:nowrap;
}
.dialog-letter-list .letter-entry-meta>time{flex:0 0 86px}
.dialog-letter-list article[data-kind=update] .letter-entry-meta>span{background:#edf0e5;color:#5e7254}
.dialog-letter-list article[data-kind=explore] .letter-entry-meta>span{background:#e5eff3;color:var(--mist-ink)}

/* Hide the archive scrollbar while retaining native scrolling. */
.letters-dialog{scrollbar-width:none;-ms-overflow-style:none}
.letters-dialog::-webkit-scrollbar{display:none;width:0;height:0}

/* Letter archive: stable header, aligned metadata and a clear reading order. */
.letters-dialog{width:min(740px,calc(100% - 32px));max-height:min(88svh,860px);padding:38px 34px 28px;overflow:hidden}
.letters-dialog[open]{display:flex;flex-direction:column}
.letters-dialog>.dialog-eyebrow{flex:none;margin:0 52px 10px 0;font-size:10px;line-height:1.5}
.letters-dialog>h2{flex:none;margin:0 52px 12px 0;font-size:32px;line-height:1.45}
.letters-dialog>.dialog-intro{flex:none;margin:0 0 24px;font:400 14px/1.9 var(--sans);color:#806b60}
.letters-dialog>.dialog-close{top:22px;right:22px;flex:none}
.letters-dialog .dialog-letter-list{display:grid;align-content:start;gap:16px;min-height:0;margin:0;padding:2px 4px 4px 2px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;-ms-overflow-style:none}
.letters-dialog .dialog-letter-list::-webkit-scrollbar{display:none;width:0;height:0}
.letters-dialog .dialog-letter-list:focus-visible{outline:2px solid #c8ab8c;outline-offset:2px;border-radius:8px}
.letters-dialog .dialog-letter-list article{min-width:0;padding:23px 24px 17px;border:1px solid #eadbca;border-radius:18px;background:#fffdf8}
.letters-dialog .letter-entry-meta{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:nowrap;margin:0 0 16px}
.letters-dialog .letter-entry-meta>time{flex:0 0 auto;color:#9a7a62;font:500 12px/1.5 var(--sans);font-variant-numeric:tabular-nums}
.letters-dialog .letter-entry-meta>span{min-block-size:30px;font-size:12px;padding:5px 12px}
.letters-dialog .dialog-letter-list .letter-entry-product{margin:0 0 6px;color:#8b7765;font:500 13px/1.8 var(--sans);overflow-wrap:anywhere}
.letters-dialog .dialog-letter-list h3{margin:0 0 10px;font:600 20px/1.65 var(--serif);overflow-wrap:anywhere}
.letters-dialog .dialog-letter-list .letter-entry-summary{margin:0;color:#806b60;font:400 14px/1.9 var(--sans);overflow-wrap:anywhere}
.letters-dialog .letter-entry-footer{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px 24px;margin-top:18px;padding-top:9px;border-top:1px solid #eee3d5}
.letters-dialog .letter-product-link{gap:12px;min-height:40px;margin:0;padding:0 2px;font-size:13px;text-decoration:none}
.letters-dialog .letter-product-link:hover{text-decoration:underline;text-underline-offset:5px}
@media(max-width:480px){
 .letters-dialog{width:calc(100% - 24px);max-height:90svh;padding:30px 18px 18px;border-radius:22px}
 .letters-dialog>.dialog-close{top:17px;right:17px}
 .letters-dialog>h2{font-size:28px}
 .letters-dialog>.dialog-intro{font-size:13px;margin-bottom:18px}
 .letters-dialog .dialog-letter-list{--letter-tag-width:112px;gap:12px}
 .letters-dialog .dialog-letter-list article{padding:18px 17px 12px;border-radius:15px}
 .letters-dialog .letter-entry-meta{gap:10px;margin-bottom:14px}
 .letters-dialog .dialog-letter-list h3{font-size:18px;line-height:1.7}
 .letters-dialog .dialog-letter-list .letter-entry-product{font-size:12px}
 .letters-dialog .dialog-letter-list .letter-entry-summary{font-size:13px}
 .letters-dialog .letter-entry-footer{margin-top:15px}
}