/* The page uses a 4px base, shared columns and border-inclusive text insets.
   The grid stays invisible and reflows with the available screen width. */
:root {
  --grid-unit: .25rem;
  --space-1: var(--grid-unit);
  --space-2: calc(var(--grid-unit) * 2);
  --space-3: calc(var(--grid-unit) * 3);
  --space-4: calc(var(--grid-unit) * 4);
  --space-6: calc(var(--grid-unit) * 6);
  --space-8: calc(var(--grid-unit) * 8);
  --page-gutter: var(--space-8);
  --page-width: 71rem;
  --panel-inset: var(--space-4);
  --control-size: 2.75rem;
}
html { scroll-padding-top: 11rem; }
.grid-site main [id] { scroll-margin-top: var(--space-4); }

.grid-site :is(.masthead, main, main.extra-page, .site-nav, footer) {
  width: min(var(--page-width), calc(100% - var(--page-gutter) * 2));
  max-width: var(--page-width);
  margin-inline: auto;
}
.grid-site main {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-4);
  padding-block: var(--space-4) var(--space-6);
}
.grid-site main > * { grid-column: 1 / -1; min-width: 0; }
.grid-site main > :is(section, nav, form, details, div, p),
.grid-site main > #explore-more { margin-block: 0; }

/* All panel text starts the same distance from its outer edge, whether
   the edge is the thin or the thick stroke. */
.grid-site :is(.masthead, .place-card, .explore-card, .plan-card, .saved-card,
  .finder-card, .sale-card, .tool-card, .resource-card, .deal-card, .finder,
  .finder-panel, .shopping-controls, .plan-controls, .explore-form,
  .outing-panel, .creator-letter, .welcome-how, .welcome-directory > a,
  .browse-further, .editorial-strip, .support-section, .support-card,
  .deals-section, .empty-board, .empty-state, .no-results, dialog) {
  --surface-stroke: var(--stroke-thin);
  border-width: var(--surface-stroke);
  padding: calc(var(--panel-inset) - var(--surface-stroke));
}
.grid-site :is(.masthead, .outing-panel, dialog) {
  --surface-stroke: var(--stroke-thick);
}
.grid-site .masthead {
  margin-top: var(--space-4);
  min-height: 5rem;
  gap: var(--space-4);
}
.grid-site .masthead .wordmark { font-size: 2.5rem; line-height: 3rem; }
.grid-site .masthead-brand {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  align-items: center;
  gap: .75rem;
  min-width: 0;
  max-width: 100%;
}
.grid-site .masthead .masthead-note {
  display: block;
  margin: 0;
  min-width: 0;
  max-width: 100%;
  font-size: .875rem;
  line-height: 1.25rem;
  white-space: normal;
}
.grid-site .masthead-note > span { display: block; }
.grid-site .colour-mode { margin-left: auto; padding: calc(var(--space-1) - var(--stroke-thin)); gap: var(--space-2); }

/* Navigation tiles share the same column boundaries as the content cards. */
html .grid-site .site-nav {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-4);
  padding: 0;
  border: 0;
}
html .grid-site .site-nav a {
  grid-column: span 2;
  margin: 0;
  text-align: left;
  align-items: flex-start;
  justify-content: flex-start;
}
html .grid-site .site-nav a:nth-child(n+7) { grid-column: span 4; }

.grid-site :is(.places-grid, .plan-grid, .saved-grid, .resource-grid,
  .tools-grid, .discovery-grid, .deals-grid, .support-options) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: start;
}
.grid-site :is(.welcome-directory, .finder-results) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}
.grid-site :is(.place-card, .explore-card, .plan-card, .saved-card,
  .finder-card, .sale-card, .tool-card, .resource-card, .deal-card, .support-card,
  .card-body, .sale-card > div:not(.date-tile)) {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.grid-site :is(.place-card, .explore-card, .plan-card, .saved-card,
  .finder-card, .sale-card, .tool-card, .resource-card, .deal-card, .support-card,
  .card-body, .sale-card > div:not(.date-tile)) > * {
  margin-block: 0;
}
.grid-site :is(.row-actions, .card-bottom, .sale-actions, .detail-actions, .deal-links,
  .map-links, .location-actions, .type-filters, .pill-row, .follow-controls,
  .outing-controls, .card-meta, .facility-list) { gap: var(--space-2) var(--space-3); }
.grid-site :is(.card-bottom, .row-actions) { padding-top: var(--space-2); }
.grid-site :is(.finder-form, .explore-form, .filter-controls, .form-row) { gap: var(--space-3); }
.grid-site :is(.finder-form, .explore-form, .filter-controls) { align-items: end; }
.grid-site .finder { gap: var(--space-3); }
.grid-site .location-tools { gap: var(--space-2) var(--space-3); margin-bottom: var(--space-2); padding-bottom: var(--space-2); }
.grid-site .filter-controls { margin-top: var(--space-3); }
.grid-site .primary-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-site .primary-filters :is(input, select) { width: 100%; max-width: none; }
.grid-site .shopping-controls { gap: var(--space-3); }
.grid-site .sales-list { gap: var(--space-4); }

/* Nested cards share the same compact rhythm as cards with direct content. */
.grid-site :is(.atmosphere, .bundle-total) { padding: var(--space-2) var(--space-3); }
.grid-site :is(.plan-total, .sale-costs) { padding-block: var(--space-2); gap: var(--space-3); }
.grid-site :is(.place-card, .explore-card, .plan-card, .finder-card,
  .sale-card, .saved-card, .tool-card, .resource-card, .deal-card) details:not(.pick-award) > summary {
  min-height: var(--control-size);
  padding-block: var(--space-2);
  line-height: 1.5rem;
}
.grid-site .date-tile {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  max-width: 100%;
  padding: var(--space-1) var(--space-2);
}
.grid-site .date-tile strong { font-size: 1.5rem; line-height: 2rem; }
html .grid-site details.pick-award { margin-block: 0; }
html .grid-site .pick-award > summary { padding: 0; gap: var(--space-2); min-height: 3.25rem; }
.grid-site .pick-medal {
  flex-basis: 2.5rem;
  width: 2.5rem;
  min-height: 3.25rem;
  padding: var(--space-1) 0 var(--space-2);
  font-size: 1rem;
  line-height: 1rem;
}

/* Text baselines use 20/24/28/32/40/48px line boxes at normal text size. */
.grid-site { font-size: 1rem; line-height: 1.5rem; }
.grid-site :is(p, li, .order, .location-info, .filter-note, .support-small,
  .detail-footnote, .source-links, .welcome-notes p) { line-height: 1.5rem; }
.grid-site :is(.card-deck, .timing, .catch, .welcome-lead, .intro-copy,
  .page-heading p, .creator-letter, .creator-letter p, .detail-section p, .prose p) {
  font-size: 1rem;
  line-height: 1.5rem;
}
.grid-site :is(.fine-print, .source-date, .card-meta, .card-kind, .price-basis,
  .pick-caption, .pick-caption > span, .footer-note, .eyebrow, small, label) {
  font-size: .875rem;
  line-height: 1.25rem;
}
.grid-site :is(.intro, .page-heading, .home-opening, .welcome-sections) { padding: 0; }
.grid-site :is(.intro, .page-heading) { gap: var(--space-4); align-items: start; }
.grid-site :is(.home-opening, .welcome-intro) > * { margin-block: 0 var(--space-4); }
.grid-site :is(.home-opening, .welcome-intro) > :last-child { margin-bottom: 0; }
.grid-site :is(h1, .intro h1, .page-heading h1, .extra-page .page-heading h1,
  .home-opening h1, .welcome-intro h1) {
  font-size: 3rem;
  line-height: 3.5rem;
  font-weight: 600;
  letter-spacing: 0;
  margin: 0;
}
.grid-site :is(h2, .welcome-page h2, .section-heading h2, .section-lead h2,
  .place-card h2, .plan-card h2, .finder-card h2, .saved-card h2, .tool-card h2,
  .browse-further h2, .shopping-tips h2, .outing-panel > h2) {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 600;
  letter-spacing: 0;
}
.grid-site :is(h3, .welcome-page h3, .welcome-directory h3, .explore-card h3,
  .finder-card h3, .resource-card h3, .sale-card h3, .deal-card h3) {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 600;
}
.grid-site :is(.welcome-page h2, .section-heading h2, .section-lead h2,
  .browse-further h2, .shopping-tips h2, .outing-panel > h2) {
  font-size: 2rem;
  line-height: 2.5rem;
}
.grid-site :is(.section-heading, .section-lead, .results-heading, .list-heading) {
  align-items: start;
  gap: var(--space-4);
  padding: 0;
  margin: 0 0 var(--space-4);
}
.grid-site :is(.section-heading, .results-heading) > * { margin-block: 0; }
.grid-site .section-heading .row-actions { padding-top: 0; margin-top: 0; }
.grid-site :is(.price, .result-price, .plan-total strong, .saved-price) {
  font-size: 1.5rem;
  line-height: 2rem;
  font-variant-numeric: tabular-nums;
}
.grid-site :is(.price-row, .detail-price) {
  --surface-stroke: var(--stroke-thick);
  border-width: var(--surface-stroke);
  padding: calc(var(--space-3) - var(--surface-stroke));
  gap: var(--space-3);
}

/* Fixed text insets compensate for both border weights, avoiding jumps when
   a tab becomes active. Long labels can grow in whole line-height increments. */
html .grid-site :is(button, .site-nav a, .task-links a, .page-jumps a,
  .details-button, .pixel-button, .about-link, .section-heading > a,
  .row-actions > a, .map-links > a, .sale-actions > a,
  .section-heading .row-actions > a, .welcome-notes > a, footer a) {
  --surface-stroke: var(--stroke-thin);
  min-height: var(--control-size);
  min-width: var(--control-size);
  max-width: 100%;
  border-width: var(--surface-stroke);
  padding: calc(var(--space-3) - var(--surface-stroke));
  font-size: .875rem;
  line-height: 1.25rem;
  white-space: normal;
}
html .grid-site :is(a[aria-current=page], a[aria-current=true],
  button[aria-pressed=true], .type-filters button.active) {
  --surface-stroke: var(--stroke-thick);
}
html .grid-site :is(input:not([type=checkbox]):not([type=radio]), select, textarea) {
  min-height: var(--control-size);
  padding: calc((var(--control-size) - 1.5rem) / 2 - var(--stroke-thin)) calc(var(--space-3) - var(--stroke-thin));
  font-size: 1rem;
  line-height: 1.5rem;
}
html .grid-site select:not([multiple]):not([size]) { padding-right: var(--space-8); }
/* Native date/time fields must fit the same grid cells as the other controls. */
html .grid-site .finder-form :is(input, select) {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  text-align: left;
}
html .grid-site .finder-form :is(input[type=date], input[type=time]) {
  -webkit-appearance: none;
  appearance: none;
}
html .grid-site .finder-form input::-webkit-date-and-time-value {
  min-height: 1.5rem;
  margin: 0;
  text-align: left;
}
html .grid-site .finder-form input::-webkit-datetime-edit { padding: 0; }
html .grid-site .finder-form input::-webkit-datetime-edit-fields-wrapper { padding: 0; }
.grid-site :is(label, .home-location label) { gap: var(--space-2); }
.grid-site .home-location { max-width: 35rem; }
.grid-site .home-location .row-actions { margin-top: var(--space-2); padding-top: 0; }
.grid-site .home-location .row-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--space-2);
  align-items: stretch;
}
.grid-site .home-location input { width: 100%; min-width: 0; }
.grid-site .nearby-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  gap: var(--space-2);
  align-items: stretch;
}
html .grid-site .home-location button.current-location-button,
html .grid-site .nearby-actions button.current-location-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 0;
  min-height: var(--control-size);
  padding: .375rem .5rem;
  white-space: normal;
  color: var(--ink);
  background: var(--panel);
}
html .grid-site .current-location-button[aria-busy=true] {
  background: var(--blue);
  opacity: .65;
  cursor: progress;
}
.grid-site .task-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
html .grid-site :is(.task-links, .page-jumps, .quick-start) { gap: var(--space-3); }
.grid-site .task-links a { text-align: left; justify-content: flex-start; }
.grid-site .home-opening .task-links { margin-top: var(--space-4); }
.grid-site .welcome-notes { padding-top: var(--space-4); }
.grid-site footer { margin-top: 0; padding-block: var(--space-6) var(--space-8); gap: var(--space-4); }
.grid-site footer .footer-brand { font-size: 1.5rem; line-height: 2rem; }
.grid-site dialog { width: min(43rem, calc(100% - var(--page-gutter) * 2)); }
.grid-site .dialog-close { width: 3rem; padding: 0; margin: 0 0 var(--space-4) var(--space-4); font-size: 1.5rem; line-height: 2rem; }

@media (min-width: 1001px) {
  .grid-site .finder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-site .finder > .primary-filters { margin: 0; }
}
@media (max-width: 1000px) {
  html { scroll-padding-top: 16rem; }
  html .grid-site .site-nav a:nth-child(n) { grid-column: span 4; }
  .grid-site .task-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  html { scroll-padding-top: var(--space-4); }
  :root { --page-gutter: var(--space-4); --panel-inset: var(--space-3); }
  .grid-site main { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: var(--space-4); }
  .grid-site .masthead { margin-top: var(--space-4); gap: var(--space-3); }
  .grid-site .masthead .wordmark { font-size: clamp(1.25rem, 6.5vw, 1.75rem); line-height: 2.5rem; }
  .grid-site .masthead-brand { gap: .5rem; }
  .grid-site .colour-mode { margin: 0; }
  .grid-site :is(.places-grid, .plan-grid, .saved-grid, .resource-grid, .tools-grid,
    .discovery-grid, .deals-grid, .support-options, .finder-results, .welcome-directory) {
    grid-template-columns: minmax(0, 1fr);
  }
  .grid-site :is(h1, .intro h1, .page-heading h1, .extra-page .page-heading h1,
    .home-opening h1, .welcome-intro h1) { font-size: 2.25rem; line-height: 2.75rem; }
  .grid-site :is(.welcome-page h2, .section-heading h2, .section-lead h2,
    .browse-further h2, .shopping-tips h2, .outing-panel > h2) { font-size: 1.75rem; line-height: 2.25rem; }
  .grid-site .home-location { max-width: none; }
  .grid-site .home-location .row-actions > * { flex-basis: 100%; }
  .grid-site .home-location button { width: 100%; }
  .grid-site .home-location .row-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-site .home-location input { grid-column: 1 / -1; }
  html .grid-site .site-nav a { padding-inline: calc(var(--space-2) - var(--surface-stroke)); }
}
@media (max-width: 400px) {
  .grid-site :is(.task-links, .primary-filters, .explore-form, .finder-form) {
    grid-template-columns: minmax(0, 1fr);
  }
  .grid-site .explore-form > *, .grid-site .finder-form > * { grid-column: auto; }
}