.home-page {
  --tactile-surface: #182125;
  --tactile-shade: rgba(0, 0, 0, .45);
  --tactile-highlight: rgba(255, 255, 255, .07);
  --tactile-raised: 3px 3px 7px var(--tactile-shade), -2px -2px 5px var(--tactile-highlight);
  --tactile-pressed: inset 3px 3px 6px var(--tactile-shade), inset -2px -2px 5px var(--tactile-highlight);
}
:root[data-theme="light"] .home-page {
  --tactile-surface: #edf1f3;
  --tactile-shade: rgba(43, 62, 72, .18);
  --tactile-highlight: rgba(255, 255, 255, .95);
}

.home-page :where(.button, .flight-icon-button) {
  border-radius: 10px;
  background-image: linear-gradient(145deg, rgba(255, 255, 255, .06), rgba(0, 0, 0, .04));
  box-shadow: var(--tactile-raised);
  transition: box-shadow 150ms ease, border-color 150ms ease;
}
.home-page .home-hero .button.secondary {
  background-color: #182125;
  border-color: #9da5a9;
}
.home-page .home-planner .planner-card,
.home-page .flight-dialog {
  border-radius: 10px;
  box-shadow: var(--tactile-raised);
}
.home-page :where(.theme-control, .home-planner input, .home-planner select, .flight-form input:not([type="checkbox"]), .flight-form select) {
  border-radius: 10px;
  box-shadow: inset 2px 2px 4px var(--tactile-shade), inset -1px -1px 3px var(--tactile-highlight);
}
.home-page .flight-form input:not([type="checkbox"]), .home-page .flight-form select { border-radius: 10px; }
.home-page .airport-suggestions { border-radius: 10px; }
.home-page .airport-option { border-radius: 6px; overflow-wrap: anywhere; }
.home-page .airport-option[aria-selected="true"] { box-shadow: var(--tactile-pressed); }

.home-page .routes-section, .home-page .post-grid {
  gap: 16px;
  background: transparent;
  border: 0;
}
.home-page .routes-section article,
.home-page .routes-section article:last-child,
.home-page .post-card,
.home-page .post-card:last-child {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--tactile-surface);
  box-shadow: var(--tactile-raised);
  padding: 24px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.home-page .post-card { transition: box-shadow 150ms ease, border-color 150ms ease; }
.home-page .post-card h3 { line-height: 1.35; }
.home-page .post-card p { line-height: 1.6; }

@media (hover: hover) {
  .home-page :where(.button, .flight-icon-button, .post-card):not(:disabled):hover { border-color: var(--blue); }
}
.home-page :where(.button, .flight-icon-button, .post-card):not(:disabled):active { background-image: none; box-shadow: var(--tactile-pressed); }
.home-page :where(.button, .flight-icon-button, .post-card, .airport-option):focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.home-page :where(.button, .flight-icon-button):disabled { box-shadow: none; background-image: none; cursor: not-allowed; }

@media (max-width: 600px) {
  .home-page .routes-section article, .home-page .routes-section article:last-child,
  .home-page .post-card, .home-page .post-card:last-child { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-page :where(.button, .flight-icon-button, .post-card) { transition: none; }
}