/* Desktop layout for the public guide. Mobile remains the default. */
.desktop-header-nav {
  display: none;
}

@media (min-width: 900px) {
  html {
    scroll-padding-top: 82px;
  }

  body {
    background:
      radial-gradient(circle at 4% 8%, rgba(255, 150, 76, .08), transparent 28%),
      radial-gradient(circle at 96% 24%, rgba(143, 61, 32, .06), transparent 30%),
      #e7ebe7;
  }

  .page {
    width: min(calc(100% - 40px), 1200px);
    overflow: clip;
    box-shadow: 0 18px 54px rgba(16, 38, 28, .1);
  }

  .site-header {
    grid-template-columns: minmax(290px, auto) 1fr auto;
    min-height: 76px;
    padding: 12px 34px;
  }

  .brand-mark,
  .brand-mark img {
    width: 42px;
    height: 42px;
  }

  .brand-copy small {
    font-size: 12px;
  }

  .brand-copy strong {
    font-size: 17px;
  }

  .desktop-header-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
  }

  .desktop-header-nav a {
    padding: 9px 12px;
    color: var(--ink);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    transition: color .18s ease, background-color .18s ease;
  }

  .desktop-header-nav a:hover,
  .desktop-header-nav a:focus-visible {
    color: var(--orange);
    background: var(--green-light);
  }

  .header-menu-toggle {
    min-height: 42px;
    padding-inline: 15px;
  }

  .header-menu-panel {
    width: 300px;
  }

  .breadcrumb,
  .guide-breadcrumb {
    padding: 12px 40px;
    font-size: 13px;
  }

  .guide-page-head,
  .guide-hero {
    padding: 44px 48px 40px;
  }

  .guide-page-head h1,
  .guide-hero h1 {
    max-width: 860px;
    font-size: 40px;
  }

  .guide-page-head > p,
  .guide-hero > p {
    max-width: 820px;
    font-size: 16px;
  }

  .guide-section,
  .section-band,
  .gallery-band {
    padding: 44px 48px;
  }

  .guide-section--first {
    padding-top: 38px;
  }

  .section-band--compact-top {
    padding-top: 36px;
  }

  .guide-section-head,
  .section-heading,
  .sources-head {
    margin-bottom: 26px;
  }

  .guide-section-head h1,
  .guide-section-head h2,
  .section-heading h2,
  .sources-head h2,
  .gallery-band h2 {
    font-size: 29px;
  }

  .guide-section-head p,
  .section-heading p,
  .sources-head p,
  .gallery-band p {
    max-width: 820px;
    font-size: 15px;
  }

  .spot-list,
  .article-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }

  .article-list--single {
    grid-template-columns: minmax(0, 860px);
  }

  .article-list--single .article-card {
    display: grid;
    grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr);
    align-items: stretch;
  }

  .article-list--single .article-card img {
    width: 100%;
    height: 100%;
    min-height: 220px;
    aspect-ratio: auto;
    object-fit: cover;
  }

  .guide-spot-card {
    display: block;
    min-width: 0;
  }

  .guide-spot-card > img,
  .guide-spot-card > .guide-image-placeholder {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
  }

  .guide-spot-card .card-copy,
  .guide-article-card .card-copy,
  .spot-card .card-copy,
  .article-card .card-copy {
    padding: 17px 18px 19px;
  }

  .guide-spot-card,
  .guide-article-card,
  .spot-card,
  .article-card,
  .municipality-guide-card,
  .guide-tag-card {
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  }

  .guide-spot-card:hover,
  .guide-article-card:hover,
  .spot-card:hover,
  .article-card:hover,
  .municipality-guide-card:hover,
  .guide-tag-card:hover {
    border-color: rgba(143, 61, 32, .28);
    box-shadow: 0 12px 28px rgba(23, 37, 31, .1);
    transform: translateY(-3px);
  }

  .guide-card-image {
    aspect-ratio: 16 / 10;
  }

  .guide-photo-discovery-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
  }

  .guide-tag-grid,
  .tag-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
  }

  .guide-tag-grid > :only-child,
  .tag-grid > :only-child {
    width: min(100%, 360px);
  }

  .guide-tag-card,
  .tag-card {
    min-height: 176px;
    padding: 17px;
  }

  .guide-tag-card-name,
  .tag-card > span {
    font-size: 18px;
  }

  .municipality-guide-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
  }

  .municipality-guide-card {
    border-radius: 16px;
  }

  .guide-more {
    width: fit-content;
    min-width: 300px;
    margin: 24px auto 0;
    padding-inline: 24px;
  }

  .guide-result-view-switch-wrap {
    padding-inline: 48px;
  }

  .guide-pagination-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 760px;
    gap: 10px;
  }

  .guide-pagination-summary__item--total {
    grid-column: auto;
  }

  .guide-pagination-summary__item {
    min-height: 70px;
    padding: 10px 13px;
  }

  .spot-guide-map-section {
    padding-block: 36px;
  }

  .spot-guide-map-card {
    grid-template-columns: minmax(330px, .8fr) minmax(0, 1.2fr);
    gap: 34px;
    padding: 28px 34px;
    border-radius: 24px;
  }

  .spot-guide-map-card__visual .mie-area-map {
    max-width: 310px;
  }

  .spot-guide-map-choices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .spot-guide-map-choice {
    min-height: 72px;
    padding: 10px 13px;
  }

  .spot-guide-map-choice strong {
    font-size: 15px;
  }

  .area-guide-city-chips,
  .guide-category-tabs {
    max-width: 960px;
  }

  /* Home */
  .home-intro {
    padding: 18px 48px 38px;
  }

  .home-intro__lead-layout {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(460px, 1.08fr);
    align-items: center;
    gap: 38px;
  }

  .home-intro__visual {
    margin-top: 0;
    aspect-ratio: 16 / 10;
    border-radius: 26px;
  }

  .home-intro__eyebrow {
    font-size: 14px;
  }

  .home-intro h1 {
    font-size: 42px;
    line-height: 1.4;
  }

  .home-intro__lead {
    max-width: 760px;
    font-size: 16px;
  }

  .home-path-nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 28px;
  }

  .home-path-nav a {
    grid-template-columns: 42px minmax(0, 1fr);
    min-height: 84px;
    padding: 14px 16px;
  }

  .home-path-nav .guide-icon {
    width: 34px;
    height: 34px;
  }

  .home-path-nav strong {
    font-size: 15px;
  }

  .home-path-nav small {
    font-size: 12px;
  }

  .home-guide .guide-section {
    padding-block: 44px;
  }

  .home-guide .guide-section--first {
    padding-top: 42px;
  }

  .home-section-head {
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 15px;
    margin-bottom: 26px;
  }

  .home-section-icon {
    width: 54px;
    height: 54px;
    border-radius: 16px;
  }

  .home-section-head h2 {
    font-size: 29px;
  }

  .home-section-head p {
    max-width: 780px;
    font-size: 15px;
  }

  .home-map-card {
    grid-template-columns: minmax(270px, .72fr) minmax(0, 1.28fr);
    gap: 24px;
    padding: 18px 24px;
    border-radius: 24px;
  }

  .home-map-card__visual .mie-area-map {
    max-width: 265px;
  }

  .home-map-choices {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .home-map-choice {
    min-height: 78px;
    padding: 12px 14px;
  }

  .home-map-choice__copy strong {
    font-size: 16px;
  }

  .home-map-choice__tagline,
  .home-map-choice__copy small {
    font-size: 12px;
  }

  .home-featured-tags .guide-tag-card:first-child {
    grid-column: span 2;
    min-height: 176px;
  }

  .home-featured-tags {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .home-featured-tags .guide-tag-card:nth-child(n + 10) {
    display: flex;
  }

  .guide-photo-discovery-grid--home .guide-photo-discovery-card:nth-child(n + 10) {
    display: block;
  }

  .home-guide .spot-list,
  .home-guide .article-list {
    gap: 20px;
  }

  .home-popular-article-list .guide-article-card:not(:first-child),
  .top-latest-articles .guide-article-card {
    display: block;
  }

  .home-popular-article-list .guide-article-card:not(:first-child) .guide-card-image,
  .top-latest-articles .guide-article-card .guide-card-image {
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 10;
  }

  .home-popular-article-list .guide-article-card:not(:first-child) .card-copy,
  .top-latest-articles .guide-article-card .card-copy {
    padding: 17px 18px 19px;
  }

  .home-popular-article-list .guide-article-card:not(:first-child) h3,
  .top-latest-articles .guide-article-card h3 {
    font-size: 18px;
    -webkit-line-clamp: 2;
  }

  .home-popular-article-list .guide-article-card:not(:first-child) .card-copy > p,
  .top-latest-articles .guide-article-card .card-copy > p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .home-photo-library {
    padding-inline: 48px;
  }

  .home-photo-library__head {
    grid-template-columns: 68px minmax(0, 760px);
    justify-content: center;
    gap: 20px;
  }

  .home-photo-library__icon {
    width: 68px;
    height: 68px;
  }

  .home-photo-library__grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-top: 26px;
  }

  .home-photo-library__card {
    border-radius: 15px;
  }

  .home-photo-library__card strong {
    right: 12px;
    bottom: 11px;
    left: 12px;
    font-size: 13px;
  }

  .home-photo-library__cta {
    display: flex;
    width: fit-content;
    margin: 22px auto 0;
  }

  /* Spot detail */
  .hero--with-media {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(400px, .95fr);
    grid-template-rows: auto auto 1fr;
    align-items: start;
    background: var(--surface);
  }

  .hero--with-media .hero-slider {
    grid-column: 1;
    grid-row: 1;
  }

  .hero--with-media .hero-slides {
    aspect-ratio: 16 / 10;
  }

  .hero--with-media .hero-excerpt {
    grid-column: 1;
    grid-row: 2;
    padding: 12px 22px 7px;
  }

  .hero--with-media .hero-thumbnails {
    grid-column: 1;
    grid-row: 3;
    grid-auto-columns: 90px;
    margin: 4px 22px 18px;
  }

  .hero--with-media .hero-copy {
    grid-column: 2;
    grid-row: 1 / span 3;
    padding: 30px 30px 24px;
  }

  .hero-copy:not(.hero--with-media .hero-copy) {
    padding: 38px 48px 34px;
  }

  .hero-copy h1 {
    margin-bottom: 11px;
    font-size: 34px;
  }

  .hero--with-media .description,
  .hero--with-media .charm-lead {
    font-size: 14px;
  }

  .hero--with-media .charm-lead {
    margin-bottom: 14px;
  }

  .hero--with-media .quick-facts {
    gap: 6px;
    margin-bottom: 14px;
  }

  .hero--with-media .quick-facts div {
    padding-block: 9px;
  }

  .quick-facts div {
    grid-template-columns: 82px minmax(0, 1fr);
  }

  .quick-facts dd {
    font-size: 16px;
  }

  .story-list {
    gap: 38px;
  }

  .story {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(320px, .82fr);
    column-gap: 34px;
    align-items: start;
    padding-bottom: 38px;
  }

  .story img {
    grid-column: 1;
    grid-row: 1 / span 20;
    margin: 0;
  }

  .story h3,
  .story p {
    grid-column: 2;
  }

  .story h3 {
    margin-top: 4px;
    font-size: 24px;
  }

  .story p {
    font-size: 16px;
  }

  .story:nth-child(even) {
    grid-template-columns: minmax(320px, .82fr) minmax(0, 1.18fr);
  }

  .story:nth-child(even) img {
    grid-column: 2;
  }

  .story:nth-child(even) h3,
  .story:nth-child(even) p {
    grid-column: 1;
  }

  #visit-info {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(380px, .95fr);
    align-items: start;
    gap: 0 34px;
  }

  #visit-info .section-heading {
    grid-column: 1 / -1;
  }

  #visit-info .visit-map-panel {
    grid-column: 1;
    grid-row: 2;
    margin-bottom: 0;
  }

  #visit-info .map-frame iframe {
    height: 430px;
  }

  #visit-info .visit-fact-panels {
    grid-column: 2;
    grid-row: 2;
  }

  #visit-info .visit-fact-group {
    padding: 15px 17px 10px;
    background: rgba(255, 253, 248, .72);
    border: 1px solid var(--line);
    border-radius: 16px;
  }

  #visit-info .visit-fact-group h3 {
    margin-bottom: 6px;
    font-size: 17px;
  }

  #visit-info .facts div {
    padding-block: 10px;
  }

  #visit-info .visit-fact-group--facilities .facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
  }

  #visit-info .visit-fact-group--facilities .facts div {
    grid-template-columns: 1fr;
    align-content: start;
    gap: 2px;
  }

  .nearby-spot-list .spot-card {
    display: block;
  }

  .nearby-spot-list .spot-card img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
  }

  .gallery-band {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 1.05fr);
    gap: 0 34px;
  }

  .gallery-band h2,
  .gallery-band p,
  .gallery-band .gallery-action {
    grid-column: 1;
  }

  .gallery-band .gallery-grid {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: center;
    margin: 0;
  }

  .gallery-band .gallery-action {
    align-self: end;
    max-width: 410px;
  }

  .sources {
    max-width: 900px;
  }

  /* Article */
  .guide-main > article {
    max-width: 860px;
    margin: 40px auto 64px;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 24px;
    box-shadow: 0 16px 38px rgba(23, 37, 31, .08);
  }

  .guide-article-header {
    padding: 34px 42px 30px;
  }

  .guide-article-header h1 {
    font-size: 34px;
    line-height: 1.5;
  }

  .guide-article-hero img {
    aspect-ratio: 16 / 9;
  }

  .guide-lead,
  .guide-toc,
  .guide-article-body {
    padding-inline: 48px;
  }

  .guide-lead {
    padding-block: 28px;
    font-size: 17px;
  }

  .guide-toc {
    padding-block: 28px;
  }

  .guide-toc ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
  }

  .guide-article-body {
    padding-block: 30px 54px;
    font-size: 17px;
    line-height: 2.05;
  }

  .guide-article-body h2 {
    font-size: 27px;
  }

  .guide-article-body h3 {
    font-size: 22px;
  }

  .guide-article-inline-spot .guide-spot-card {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .guide-article-inline-spot .guide-spot-card > img,
  .guide-article-inline-spot .guide-spot-card > .guide-image-placeholder {
    height: 100%;
    aspect-ratio: 1;
  }

  /* Advanced search and footer */
  .advanced-search {
    padding: 52px 48px;
  }

  .advanced-search-head {
    max-width: 780px;
    margin: 0 auto 28px;
  }

  .advanced-search-form {
    max-width: 980px;
    margin: 0 auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 14px;
  }

  .advanced-search-more,
  .advanced-search-keyword {
    height: fit-content;
  }

  .advanced-search-more:nth-of-type(1),
  .advanced-search-municipalities,
  .advanced-search-submit {
    grid-column: 1 / -1;
  }

  .advanced-search-city-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .advanced-search-keyword {
    grid-column: 1 / -1;
  }

  .advanced-search-submit {
    width: min(100%, 420px);
    margin: 8px auto 0;
  }

  .guide-search-result-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .official-socials {
    padding: 54px 48px;
  }

  .official-socials__card {
    max-width: 1040px;
    margin: 0 auto;
    grid-template-columns: 220px minmax(0, 1fr) 255px;
    align-items: center;
    gap: 30px;
    padding: 28px;
    border-radius: 28px;
  }

  .official-socials__photo {
    aspect-ratio: 1;
    border-radius: 22px;
  }

  .official-socials__copy h2 {
    font-size: 28px;
  }

  .official-socials__highlight {
    font-size: 16px;
  }

  .official-socials__copy > p:last-of-type {
    font-size: 14px;
  }

  .official-socials__links {
    grid-template-columns: 1fr;
  }

  .official-socials__link {
    min-height: 70px;
  }

  .official-socials__link strong {
    font-size: 14px;
  }

  .official-socials__link small {
    font-size: 11px;
  }

  .footer {
    display: grid;
    grid-template-columns: 310px minmax(0, 1fr);
    gap: 22px 46px;
    padding: 42px 48px 34px;
  }

  .footer-links {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 34px;
    margin-top: 0;
  }

  .footer-nav-group:last-child {
    grid-column: auto;
  }

  .footer-nav-group:last-child .footer-nav-group__links {
    grid-template-columns: 1fr;
  }

  .footer-nav-group h2 {
    margin-bottom: 10px;
    font-size: 12px;
  }

  .footer-nav-group__links a {
    padding: 8px 0;
    font-size: 13px;
    transition: color .18s ease, padding-left .18s ease;
  }

  .footer-nav-group__links a:hover,
  .footer-nav-group__links a:focus-visible {
    padding-left: 4px;
    color: #fff;
  }

  .copyright {
    grid-column: 1 / -1;
    margin-top: 4px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, .14);
  }

  .guide-static,
  .editor-profile {
    max-width: 920px;
    margin-inline: auto;
  }

  /* Error pages */
  .error-page {
    min-height: calc(100vh - 76px);
    padding: 54px 48px 64px;
  }

  .error-page__hero {
    display: grid;
    max-width: 980px;
    margin: 0 auto;
    grid-template-columns: 330px minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    gap: 0 48px;
    align-items: center;
    padding: 42px 48px 40px;
    text-align: left;
  }

  .error-page__code {
    grid-column: 2;
    justify-self: start;
    margin-bottom: 12px;
  }

  .error-page__character-area {
    grid-column: 1;
    grid-row: 1 / -1;
    margin: 0;
  }

  .error-page__character {
    width: 220px;
  }

  .error-page__speech {
    margin-top: 2px;
    text-align: center;
  }

  .error-page__content {
    grid-column: 2;
    margin-bottom: 22px;
  }

  .error-page__content h1 {
    font-size: 32px;
  }

  .error-page__description {
    font-size: 15px;
  }

  .error-page__actions,
  .error-page__home-link {
    grid-column: 2;
  }

  .error-page__actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .error-page__home-link {
    justify-self: start;
  }
}

@media (min-width: 1180px) {
  .page {
    width: min(calc(100% - 64px), 1200px);
  }

  .guide-section,
  .section-band,
  .gallery-band {
    padding-inline: 56px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .guide-spot-card,
  .guide-article-card,
  .spot-card,
  .article-card,
  .municipality-guide-card,
  .guide-tag-card {
    transition: none;
  }
}