/* Public KEY: one destination name, mark, order, and grouping everywhere. */
.site-key {
  position: relative;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  color: var(--ink, var(--reader-ink, #23211e));
  font-family: var(--font-grotesque, var(--font-body, system-ui, sans-serif));
}
.site-key__panel {
  display: grid;
  flex: 1;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  padding: 13px 0 14px;
  border-bottom: 1px solid var(--reader-line, rgba(35, 33, 30, .14));
}
.site-key__group-label {
  margin: 0 0 7px;
  color: var(--muted, var(--reader-muted, #69645c));
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .13em;
  line-height: 1;
  text-transform: uppercase;
}
.site-key__panel > .site-key__group-label { display: none; }
.site-key__wordmark { display: inline-flex; align-items: center; color: inherit; font: 400 clamp(1.15rem, 1.6vw, 1.55rem)/1 var(--font-display, Didot, Georgia, serif); text-decoration: none; white-space: nowrap; }
.site-key__wordmark:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.site-key__list {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 6px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-key__link {
  display: grid;
  grid-template-columns: 1.1em auto;
  column-gap: 5px;
  align-content: start;
  color: inherit;
  font-size: .79rem;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
}
.site-key__mark { color: var(--accent-text, var(--reader-clay, #8f5330)); text-align: center; }
.site-key__name { white-space: nowrap; }
.site-key__meta {
  grid-column: 2;
  max-width: 20ch;
  color: var(--muted, var(--reader-muted, #69645c));
  font-size: .67rem;
  font-weight: 500;
}
.site-key__link:hover .site-key__name,
.site-key__link[aria-current="page"] .site-key__name { color: var(--accent-text, var(--reader-clay, #8f5330)); }
.site-key__link:focus-visible { outline: 2px solid var(--accent-text, var(--reader-clay, #8f5330)); outline-offset: 3px; }
.site-key__group--utility .site-key__list { gap: 6px 12px; }
.site-key__group--utility .site-key__link { font-size: .72rem; font-weight: 650; }
.site-key__group--primary .site-key__group-label, .site-key__group--utility .site-key__group-label { display: none; }
.ssr-crumbs {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  padding-top: 1.25rem;
  color: var(--muted, var(--reader-muted, #69645c));
  font: 700 .72rem/1.5 var(--font-mono, ui-monospace, monospace);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.ssr-crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; }
.learn-local-tools { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 1.5rem; }
.learn-local-tools a { color: inherit; font-weight: 700; text-underline-offset: .2em; }

.hub-menu__trigger { display: none; }
.js .site-key.hub-menu .hub-menu__trigger { display: none; }

@media (max-width: 767px) {
  .js .site-key.hub-menu {
    display: block;
    position: fixed;
    top: max(12px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
    width: 44px;
    margin: 0;
    z-index: 110;
  }
  .js .site-key.hub-menu .site-key__wordmark { display: none; }
  .js .site-key.hub-menu .hub-menu__trigger {
    display: inline-flex;
    border: 1px solid var(--reader-line, rgba(35, 33, 30, .14));
    background: color-mix(in srgb, var(--ground, var(--reader-ground, #e7e4dd)) 94%, transparent);
    box-shadow: 0 14px 34px -24px rgba(0, 0, 0, .55);
  }
  .js .site-key.hub-menu .site-key__panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    display: block;
    width: min(340px, calc(100vw - 24px));
    max-height: calc(100dvh - 80px);
    overflow-y: auto;
    padding: 14px;
    border: 1px solid var(--reader-line, rgba(35, 33, 30, .14));
    border-radius: 14px;
    background: color-mix(in srgb, var(--ground, var(--reader-ground, #e7e4dd)) 98%, transparent);
    box-shadow: 0 18px 38px -24px rgba(0, 0, 0, .55);
  }
  .site-key__wordmark { min-height: 48px; max-width: calc(100% - 64px); }
  .js .site-key.hub-menu .site-key__panel[hidden] { display: none; }
  .js .site-key.hub-menu .site-key__group + .site-key__group { margin-top: 15px; }
  .js .site-key.hub-menu .site-key__list { display: grid; gap: 0; }
  .js .site-key.hub-menu .site-key__link { padding: 8px 0; border-bottom: 1px solid var(--reader-line, rgba(35, 33, 30, .14)); }
  .js .site-key.hub-menu .site-key__list li:last-child .site-key__link { border-bottom: 0; }
}

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

/* Phase 2: a quieter hierarchy shared by static, SSR, and learner chrome. */
.site-key__link { grid-template-columns: auto; padding: .4rem .55rem; border-radius: 999px; }
.site-key__meta { grid-column: 1; }
.site-key__link[aria-current="page"] { background: color-mix(in srgb, var(--ink, var(--reader-ink, #23211e)) 8%, transparent); }
.site-key__link:hover { background: color-mix(in srgb, var(--ink, var(--reader-ink, #23211e)) 6%, transparent); }
.site-key__group--utility { border-left: 1px solid var(--reader-line, rgba(35,33,30,.14)); padding-left: 1rem; }
@media (max-width: 767px) { .site-key__group--utility { border-left: 0; padding-left: 0; border-top: 1px solid var(--reader-line, rgba(35,33,30,.14)); padding-top: .9rem; } }

.destination-card {
  display: block;
  overflow: hidden;
  border: 1px solid var(--reader-line, rgba(35,33,30,.14));
  border-radius: var(--r-card, 16px);
  background: var(--ground, var(--reader-ground, #fbfaf7));
  color: var(--ink, var(--reader-ink, #23211e));
  text-decoration: none;
  box-shadow: var(--shadow-card, 0 12px 32px -8px rgba(12,35,64,.1));
  transition: transform .2s ease, box-shadow .2s ease;
}
.destination-card__visual { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ground-alt, #f2efe9); }
.destination-card__visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.destination-card--packshot .destination-card__visual img { object-fit: cover; background: var(--ground-alt, #f2efe9); }
.destination-card--ambient .destination-card__visual { display: grid; place-items: center; background: radial-gradient(circle at 52% 46%, color-mix(in srgb, var(--accent, #9c8a5a) 15%, transparent), transparent 60%), var(--ground-alt, #f2efe9); }
.destination-card__monogram { font: 500 clamp(3rem, 9vw, 6rem)/1 var(--font-display, Didot, Georgia, serif); color: var(--ink, #23211e); opacity: .64; }
.destination-card__copy { display: flex; align-items: end; justify-content: space-between; gap: 1rem; min-height: 5rem; padding: 1rem 1.2rem; }
.destination-card__copy strong { font: 700 clamp(1rem, 2vw, 1.35rem)/1.25 var(--font-grotesque, system-ui, sans-serif); color: var(--ink, #23211e); }
.destination-card__cue { flex: none; color: var(--ink, #23211e); font: 700 .78rem/1.2 var(--font-grotesque, system-ui, sans-serif); text-decoration: underline; text-underline-offset: .25em; }
.destination-card:hover { transform: translateY(-3px); box-shadow: 0 18px 38px -14px rgba(12,35,64,.22); }
.destination-card:focus-visible, .next-steps a:focus-visible, .page-contents a:focus-visible, .ssr-footer a:focus-visible { outline: 3px solid var(--ink, #23211e); outline-offset: 4px; }
.home-destination-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.7rem, 2vw, 1.5rem); width: min(1180px, calc(100% - 32px)); margin: 2rem auto 3rem; }
.home-destination-grid .destination-card__visual { aspect-ratio: 4 / 3; }
.home-editorial-note__naked { margin-top: 1rem; }
.home-editorial-note__naked a { color: inherit; font-weight: 700; text-underline-offset: .2em; }
.answer-story-door { margin-block: 1.5rem; }
.answer-story-door .destination-card { max-width: 36rem; }
@media (max-width: 767px) { .home-introduction > .home-editorial-note { order: 0; margin-top: 0; } .home-introduction > .home-destination-grid { order: 1; } .home-introduction > .home-directory { order: 2; } }
body.public-editorial .learn-track .destination-card { max-width: 46rem; margin-block: 1rem 1.5rem; }
body.public-editorial .ssr-faq .destination-card { margin-bottom: 1rem; }
body.public-editorial .product-category > h2 .destination-card { font-size: 1rem; }
body.public-editorial .product-category > h2 .destination-card__visual { aspect-ratio: 16 / 8; }
body.public-editorial .product-category > h2 .destination-card__copy strong { text-transform: none; letter-spacing: normal; }
.next-steps { margin-block: clamp(2rem, 5vw, 4rem); padding-block: 1.75rem; border-top: 1px solid var(--reader-line, rgba(35,33,30,.14)); }
.next-steps__primary { display: flex; justify-content: space-between; gap: 1rem; padding: 1.2rem 1.4rem; border-radius: var(--r-card, 16px); background: var(--ink, #23211e); color: var(--ground, #fbfaf7); font: 700 clamp(1rem, 2vw, 1.4rem)/1.3 var(--font-grotesque, system-ui, sans-serif); text-decoration: none; }
.next-steps__primary:hover { text-decoration: underline; text-underline-offset: .2em; }
.next-steps__groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.next-steps__group h3 { margin: 0 0 .5rem; font: 700 .75rem/1.3 var(--font-grotesque, system-ui, sans-serif); text-transform: uppercase; letter-spacing: .1em; }
.next-steps__group ul { list-style: none; margin: 0; padding: 0; }
.next-steps__group a { display: flex; justify-content: space-between; gap: .5rem; padding: .55rem 0; border-bottom: 1px solid var(--reader-line, rgba(35,33,30,.14)); color: var(--ink, #23211e); text-decoration: none; }
.next-steps__group a:hover { text-decoration: underline; text-underline-offset: .2em; }
.page-contents { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin-block: 1.4rem; padding: 1rem 1.2rem; border-left: 2px solid var(--accent, #9c8a5a); background: var(--ground-alt, #f2efe9); font: 650 .82rem/1.4 var(--font-grotesque, system-ui, sans-serif); }
.page-contents strong { width: 100%; }
.page-contents a { color: var(--ink, #23211e); text-decoration-style: dotted; text-underline-offset: .25em; }
.ssr-footer-relationship, .footer-relationship { font-size: .8rem; }
.site-footer .footnote { color: var(--reader-ink-soft, #67635c); }
.site-footer .footnote a { color: inherit; }
[data-theme="dark"] .site-footer .footnote { color: var(--reader-ink-soft, #b7b1a4); }
.guided-reader-note { display: flex; flex-wrap: wrap; gap: .3rem .7rem; align-items: baseline; margin-block: 1.5rem; color: var(--reader-ink-soft, #67635c); font-size: .85rem; }
.guided-reader-note span { color: var(--reader-ink, #23211e); }
.guided-reader-note a { color: var(--ink, var(--reader-ink, #23211e)); font-weight: 700; text-underline-offset: .22em; }
.guided-reader-note a:focus-visible { outline: 3px solid var(--ink, #23211e); outline-offset: 3px; }
[data-theme="dark"] .guided-reader-note { color: var(--reader-ink-soft, #c8c4bb); }
[data-theme="dark"] .guided-reader-note span { color: var(--reader-ink-soft, #b7b1a4); }
@media (max-width: 767px) { .home-destination-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .next-steps__groups { grid-template-columns: 1fr; } }
@media (max-width: 430px) { .home-destination-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .destination-card { transition: none; } .destination-card:hover { transform: none; } }
@media (prefers-reduced-transparency: reduce) { .destination-card { background: var(--ground, #fbfaf7); } }