/* Machu Picchu Planner — site styles (derived from the fleet field-guide shell).
 * Universal reset, full-width nav, editorial hero, cards, footer and responsive shell.
 * v11 — separate accessible mobile panel.
 */

/* tokens.css is loaded once in the entry head. */

/* ═══════════════════════ RESET ═══════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: var(--text-0);
  line-height: 1.6;
  color: var(--color-ink);
  background: var(--color-paper);
}

/* ═══════════════════════ SKIP LINK ═══════════════════════ */
.skip-link {
  position: absolute; top: 0; left: var(--space-sm);
  padding: var(--space-2xs) var(--space-sm);
  background: var(--color-accent); color: var(--color-accent-ink);
  font-size: var(--text--1); font-weight: 600; text-decoration: none;
  border-radius: var(--radius-sm); z-index: 1000;
  transform: translateY(-120%);
  transition: transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus { transform: translateY(var(--space-2xs)); }

/* ═══════════════════════ SITE NAV ═══════════════════════ */
.site-nav {
  position: sticky; top: 0; z-index: 100; width: 100%;
  min-height: 70px; background: var(--color-navy);
  border-bottom: 1px solid rgba(245,243,233,.16);
}

.wordmark {
  font-family: var(--font-wordmark);
  font-size: var(--text--1); font-weight: 700;
  color: var(--color-ink); text-decoration: none;
  letter-spacing: -0.02em; white-space: nowrap;
}

.nav-links {
  display: flex; align-items: center; gap: var(--space-xs);
  list-style: none; padding: 0; margin: 0;
}
.breadcrumbs ol {
  list-style: none; padding: 0; margin: 0;
}
.breadcrumbs li {
  display: inline;
}
.nav-links a {
  color: var(--color-paper); text-decoration: none;
  font-size: var(--text--1); font-weight: 500;
  padding: var(--space-3xs) var(--space-2xs);
  border-radius: var(--radius-sm);
  transition: color var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.nav-links a:hover, .nav-links a:focus-visible { color: var(--color-ochre); }
.nav-links a:focus-visible {
  outline: 2px solid var(--color-focus); outline-offset: 2px;
}

/* ═══════════════════════ HERO ═══════════════════════ */
.hero {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  align-items: center; text-align: center;
  min-height: 60vh;
  padding: var(--space-3xl) var(--space-xl) var(--space-2xl);
  padding-top: var(--space-3xl);
}

.hero-img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
}

.hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.55) 100%);
}

.hero-inner {
  position: relative; z-index: 2;
  max-width: 48rem; width: 100%;
}

.hero .eyebrow {
  font-family: var(--font-wordmark);
  font-size: var(--text--1); font-weight: 600;
  color: oklch(85% 0.06 192); letter-spacing: 0.06em;
  text-transform: uppercase; margin-bottom: var(--space-sm);
  text-shadow: 0 1px 7px oklch(8% 0.01 210 / 0.7);
}

.hero h1 {
  font-family: var(--font-display);
  font-size: var(--text-5); font-weight: 700;
  line-height: 1.15; letter-spacing: -0.025em;
  color: oklch(97% 0.005 195);
  text-shadow: 0 2px 16px oklch(8% 0.01 210 / 0.5);
  max-width: var(--content-wide); margin: 0 auto;
}

.hero .byline {
  font-size: var(--text-1); color: oklch(90% 0.01 195);
  margin-top: var(--space-md); max-width: 42rem;
  text-shadow: 0 1px 8px oklch(8% 0.01 210 / 0.35);
}

/* ═══════════════════════ CONTENT ═══════════════════════ */
.content-section {
  max-width: var(--measure); margin: 0 auto;
  padding: var(--space-2xl) var(--space-md);
}

.content-section h2 {
  font-family: var(--font-display); font-size: var(--text-3);
  font-weight: 600; letter-spacing: -0.02em;
  color: var(--color-ink); margin-bottom: var(--space-sm);
}

.content-section h2::after {
  content: ""; display: block;
  width: var(--space-lg); height: var(--rule-thick);
  background: var(--color-accent); margin-top: var(--space-2xs);
  margin-bottom: var(--space-sm);
}

.content-section p {
  margin-bottom: var(--space-xs); line-height: 1.7;
  color: var(--color-ink-soft);
}

/* First paragraph after heading or section intro — larger, sets tone */
.content-section h2 + p,
.content-section h2::after + p {
  font-size: var(--text-1); line-height: 1.6;
  color: var(--color-ink); margin-bottom: var(--space-sm);
}

/* Idea-break: more space between paragraph groups */
.content-section p + p {
  margin-top: 0;
}

/* Spacer between distinct thought groups */
.content-section br + br { display: none; }

/* ═══════════════════════ REGION GRID ═══════════════════════ */
.region-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: var(--space-md);
  max-width: var(--content-wide); margin: 0 auto;
  padding: 0 var(--space-md) var(--space-xl);
}

.region-card {
  background: var(--color-paper-dim);
  border: var(--rule-thin) solid var(--color-rule);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
  text-decoration: none; color: inherit; display: block;
}
.region-card:hover {
  border-color: var(--color-accent-glow);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px var(--color-shadow);
}

.region-card-img {
  width: 100%; height: 180px; object-fit: cover;
  display: block;
}

.region-card > :not(.region-card-img) {
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}
.region-card .region-tag { margin-top: var(--space-md); }
.region-card .region-link { margin-bottom: var(--space-md); }

.region-tag {
  display: inline-block; font-size: var(--text--2);
  font-weight: 600; color: var(--color-accent);
  text-transform: uppercase; letter-spacing: 0.04em;
  margin-bottom: var(--space-xs);
}

.region-card h3 {
  font-family: var(--font-display); font-size: var(--text-1);
  font-weight: 600; margin-bottom: var(--space-xs);
  color: var(--color-ink);
}

.region-card p {
  font-size: var(--text--1); color: var(--color-ink-soft);
  margin-bottom: var(--space-sm); line-height: 1.6;
}

.region-link {
  display: inline-block; font-size: var(--text--1); font-weight: 600;
  color: var(--color-accent); text-decoration: none;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.region-link:hover { opacity: 0.8; }
.region-link:focus-visible {
  outline: 2px solid var(--color-focus); outline-offset: 2px;
}

/* ═══════════════════════ PRODUCT CARD ═══════════════════════ */
.product-card {
  max-width: var(--content-narrow); margin: 0 auto var(--space-2xl);
  background: var(--color-paper-dim);
  border: var(--rule-thin) solid var(--color-rule);
  border-radius: var(--radius-lg); overflow: hidden;
}

.product-card img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 16/9; object-fit: cover;
}

.product-card-body {
  padding: var(--space-md);
}

.product-card-body h3 {
  font-family: var(--font-display); font-size: var(--text-2);
  font-weight: 600; margin-bottom: var(--space-2xs);
  color: var(--color-ink);
}

.product-card-body .rating {
  font-size: var(--text--1); color: var(--color-ink-soft);
  margin-bottom: var(--space-sm);
}

.product-card-body p {
  font-size: var(--text-0); color: var(--color-ink-soft);
  line-height: 1.6; margin-bottom: var(--space-sm);
}

.product-card-body .cta {
  display: inline-block; padding: var(--space-2xs) var(--space-md);
  background: var(--color-ochre); color: var(--color-ink);
  font-size: var(--text--1); font-weight: 600; text-decoration: none;
  border-radius: var(--radius-full);
  transition: opacity var(--dur-fast) var(--ease-out);
}
.product-card-body .cta:hover { opacity: 0.9; }
.product-card-body .cta:focus-visible {
  outline: 2px solid var(--color-focus); outline-offset: 2px;
}

.booking-note {
  font-size: var(--text--2); color: var(--color-ink-soft);
  margin-top: var(--space-2xs); font-style: italic;
}

/* ═══════════════════════ FT5 STATEMENT FOOTER ═══════════════════════ */
.site-footer {
  text-align: center;
  padding: var(--space-2xl) var(--space-md);
  border-top: var(--rule-thin) solid var(--color-rule);
  margin-top: var(--space-2xl);
}

.footer-wordmark {
  font-family: var(--font-wordmark); font-size: var(--text-1);
  font-weight: 700; color: var(--color-ink);
  margin-bottom: var(--space-sm);
}

.site-footer p, .site-footer a {
  font-size: var(--text--1); color: var(--color-ink-soft);
  line-height: 1.6;
}

.site-footer a {
  text-decoration: none; transition: color var(--dur-fast) var(--ease-out);
}
.site-footer a:hover { color: var(--color-accent); }
.site-footer a:focus-visible {
  outline: 2px solid var(--color-focus); outline-offset: 2px;
}

.footer-links {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--space-sm); list-style: none; padding: 0;
  margin: var(--space-sm) 0;
}

.affiliate-disclosure {
  max-width: var(--content-narrow); margin: var(--space-md) auto 0;
  font-size: var(--text--2); opacity: 0.7;
}

/* ═══════════════════════ RESPONSIVE ═══════════════════════ */
@media (max-width: 768px) {
  .hero { min-height: 50vh; padding-top: var(--space-2xl); }
  .hero h1 { font-size: var(--text-4); }
  .region-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ═══════════════════════ ACCESSIBILITY ═══════════════════════ */
:focus-visible {
  outline: 2px solid var(--color-focus); outline-offset: 2px;
  transition: none;
}

/* h1 long-word safety (gate 51) */
h1, h2 { overflow-wrap: anywhere; min-width: 0; }

/* inline-figure responsive — prevents mobile overflow */
figure.inline-figure img { max-width: 100%; height: auto; }

/* t_55913791: visually-hidden utility — card rating anchors carry a hidden proper noun (" on Viator") for the inline_link_auditor specificity gate */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); border: 0; white-space: nowrap; }

/* Detached field-guide shell: readable guide pages, reachable mobile navigation. */
.nav-inner {display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);width:min(100% - 2rem,70rem);min-height:70px;margin:auto}
.nav-logo {color:var(--color-paper);font-weight:800;letter-spacing:-.035em}
.nav-toggle {display:none;align-items:center;justify-content:center;flex-direction:column;border:0;background:transparent;color:var(--color-paper);min-width:48px;min-height:48px;cursor:pointer}
.nav-toggle span {display:block;width:24px;height:2px;margin:3px;background:currentColor;border-radius:2px;transition:transform .2s ease,opacity .2s ease}
.nav-toggle[aria-expanded="true"] span:first-child {transform:translateY(8px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2) {opacity:0}
.nav-toggle[aria-expanded="true"] span:last-child {transform:translateY(-8px) rotate(-45deg)}
.nav-scrim {display:none}
.nav-links {gap:var(--space-xs)}
.site-nav a {text-underline-offset:.2em}
.site-nav a[aria-current="page"] {color:var(--color-ochre);text-decoration:underline}
.hero--full-bleed .hero-img {object-position:50% 43%}
.hero .hero-inner {padding:var(--space-sm)}
.hero .eyebrow {color:var(--color-ochre)}
.hero h1 {text-wrap:balance}
.hero--text-only,.hero--text {min-height:clamp(330px,43vh,510px);padding-top:var(--space-3xl)}
.hero--text-only h1,.hero--text h1 {color:var(--color-paper);text-shadow:none}
.hero--text-only .byline,.hero--text .byline {color:var(--color-paper);text-shadow:none}
.hero--text-only .eyebrow,.hero--text .eyebrow {color:var(--color-ochre-soft);text-shadow:none}
.hero--text-only .hero-overlay,.hero--text .hero-overlay {display:none}
/* Parity: home hero action + author row, About lead portrait, anchor offset (v12). */
.hero-cta {display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2xs);margin-top:var(--space-lg);padding:var(--space-xs) var(--space-xl);background:var(--color-ochre);color:var(--color-navy);font-size:var(--text--1);font-weight:750;text-decoration:none;border-radius:var(--radius-full);min-height:44px;transition:opacity var(--dur-fast) var(--ease-out)}
.hero-cta:hover,.hero-cta:focus-visible {opacity:.9}
.hero-author {display:flex;align-items:center;justify-content:center;gap:var(--space-sm);flex-wrap:wrap;margin-top:var(--space-lg)}
.hero-author img {width:48px;height:48px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 1px 10px rgba(4,20,28,.5)}
.hero-author p {margin:0;font-size:var(--text--1);line-height:1.45;color:oklch(92% 0.01 195);text-shadow:0 1px 8px oklch(8% 0.01 210 / .45)}
.hero-author strong {color:oklch(97% 0.005 195)}
.about-portrait {display:block;width:112px;height:112px;object-fit:cover;margin:0 0 var(--space-md)}
#departure-areas {scroll-margin-top:5.5rem}
.region-card {border-radius:0;border-top:3px solid var(--color-accent)}
.region-card:focus-visible {outline:3px solid var(--color-focus);outline-offset:3px}
.content-section {max-width:var(--content-narrow)}
.content-section--wide {max-width:var(--content-wide)}
.content-section a {text-decoration-thickness:1px;text-underline-offset:.2em;color:var(--color-accent)}
.content-section ul,.content-section ol {padding-left:1.5em;margin:0 0 var(--space-md)}
.content-section li {margin:.5rem 0}
.section-kicker {color:var(--color-accent);font-size:var(--text--1);font-weight:750;letter-spacing:.08em;text-transform:uppercase}
.region-grid--compact {padding-top:var(--space-sm)}
.written-from {max-width:var(--content-narrow);margin:var(--space-md) auto;padding:var(--space-sm) var(--space-md);border-left:3px solid var(--color-accent);background:var(--color-paper-dim);font-size:var(--text--1)}
.author-block {max-width:var(--content-narrow);margin:var(--space-lg) auto;padding:var(--space-md);display:flex;align-items:center;gap:var(--space-md);border-top:1px solid var(--color-rule)}
.author-block img {width:70px;height:70px;border-radius:50%;object-fit:cover;flex:none}
.author-block p {font-size:var(--text--1);margin:.15rem 0;color:var(--color-ink-soft)}
.author-block .author-name {font-weight:750;color:var(--color-ink)}
.site-footer {background:var(--color-navy);color:var(--color-paper);padding:var(--space-2xl) var(--space-md);margin-top:var(--space-2xl)}
.site-footer .footer-wordmark,.site-footer p,.site-footer a {color:var(--color-paper)}
.site-footer a:hover {color:var(--color-ochre)}
.site-footer .affiliate-disclosure {opacity:1;color:var(--color-paper-dim)}
@media (max-width:820px) {
  .site-nav,.nav-inner {min-height:64px}
  .nav-toggle {display:flex}
  .nav-links {position:fixed;top:64px;left:0;right:0;z-index:102;display:none;flex-direction:column;align-items:stretch;gap:0;padding:.5rem 1.25rem 1rem;max-height:calc(100vh - 64px);overflow-y:auto;background:var(--color-navy);border-top:1px solid rgba(245,243,233,.16)}
  .nav-links.is-open {display:flex}
  .nav-links li,.nav-links a {display:block;width:100%}
  .nav-links a {padding:.75rem .3rem;min-height:48px;border-bottom:1px solid rgba(245,243,233,.16)}
  .nav-scrim {position:fixed;z-index:90;inset:64px 0 0;display:block;background:rgba(4,20,28,.58);opacity:0;pointer-events:none}
  .nav-scrim.open {opacity:1;pointer-events:auto}
  .hero {padding-inline:var(--space-md)}
  .author-block,.written-from {margin-left:var(--space-md);margin-right:var(--space-md)}
}

/* Generated-page bridge: the article template has no .hero/.content-section wrapper. */
article > header {position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:clamp(400px,60vh,620px);padding:8rem var(--space-md) 3rem;background:var(--color-guide)}
article > header > .hero-img {position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover}
article > header:has(> .hero-img)::before {content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(30,14,20,.60),rgba(30,14,20,.86))}
article > header h1,article > header .byline {position:relative;z-index:2;max-width:50rem;margin-inline:auto;color:#fff}
article > header h1 {font-family:var(--font-display);font-size:clamp(2rem,5vw,3.9rem);line-height:1.15;text-wrap:balance}
article > header .byline {margin-top:var(--space-md);font-size:var(--text--1);text-shadow:0 1px 3px rgba(0,0,0,.75)}
article > header:has(> .hero-img) h1 {text-shadow:0 2px 8px rgba(0,0,0,.45)}
article > .affiliate-disclosure {max-width:var(--content-narrow);margin:var(--space-md) auto 0;padding:var(--space-sm) var(--space-md);border-left:3px solid var(--color-accent);background:var(--color-paper-dim);color:var(--color-ink);font-size:var(--text--1);opacity:1}
article > main,article > .faq {width:min(var(--content-narrow),calc(100% - 2rem));margin:var(--space-xl) auto}
article > main h2,article > .faq h2 {font-family:var(--font-display);font-size:var(--text-2);line-height:1.25;margin:var(--space-lg) 0 var(--space-sm)}
article > main h3,article > .faq h3 {font-size:var(--text-1);margin:var(--space-md) 0 var(--space-xs)}
article > main p,article > .faq p {margin-bottom:var(--space-sm)}
article > main ul {padding-left:1.5rem;margin-bottom:var(--space-md)}
.trust-badges {display:flex;flex-wrap:wrap;gap:var(--space-xs);padding:var(--space-sm);border-bottom:1px solid var(--color-rule);font-size:var(--text--1)}
.badge {color:var(--color-ink-soft)}
.product-card > h3,.product-card > p {padding-inline:var(--space-md);margin:var(--space-sm) 0}
.product-card > h3 {font-family:var(--font-display);font-size:var(--text-1);margin-top:var(--space-md)}
.product-card .card-rating,.product-card .card-duration {font-size:var(--text--1)}
.product-card .card-rating__link {color:var(--color-accent);text-decoration-thickness:1px}
.product-card .card-stars {color:var(--color-accent)}
.product-card .card-price {font-weight:750;font-size:var(--text-1)}
.product-card .card-best-for,.product-card .card-not-for {padding-block:var(--space-xs);background:var(--color-paper)}
.product-card .tour-card__cta {display:block;text-align:center;margin:var(--space-md);padding:var(--space-xs) var(--space-md);background:var(--color-ochre);color:var(--color-ink);text-decoration:none;font-weight:750;min-height:44px}
.product-card .tour-card__cta:hover,.product-card .tour-card__cta:focus-visible {background:var(--color-navy);color:#fff}
.product-card .booking-note {font-size:var(--text--1);margin-bottom:var(--space-md)}
.explore-more {margin:var(--space-xl) 0;padding:var(--space-md);background:var(--color-paper-dim);border-left:3px solid var(--color-accent)}
.explore-more h3 {margin-top:0}
.explore-more ul {list-style:none;padding:0;margin:var(--space-sm) 0 0}
.explore-more li {padding:var(--space-xs) 0;border-top:1px solid var(--color-rule)}
.explore-more a {color:var(--color-accent)}
article > .faq {padding-top:var(--space-md);border-top:1px solid var(--color-rule)}
article > .faq h3 {margin-bottom:var(--space-2xs)}
@media (max-width:820px) {
  article > header {min-height:clamp(380px,60vh,560px);padding:7rem var(--space-md) var(--space-xl)}
  article > .affiliate-disclosure {margin-inline:var(--space-md)}
}

@media (max-width:820px) {
  .hero-cta {padding-inline:var(--space-lg)}
}

@media (max-width:400px) {
  .hero-cta {padding-inline:var(--space-md)}
}

/* Revenue layer: top pick + homepage featured tours */
.top-pick {max-width:var(--content-narrow);margin:var(--space-md) auto 0;padding:var(--space-md);background:#fff;border:1px solid var(--color-rule);border-top:4px solid var(--color-ochre)}
.top-pick__label {font-size:var(--text--2);font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--color-ink-soft)}
.top-pick__title {font-family:var(--font-display);font-size:var(--text-1);line-height:1.25;margin-top:var(--space-3xs)}
.top-pick__meta {color:var(--color-ink-soft);font-size:var(--text--1);margin-top:var(--space-3xs)}
.top-pick__actions,.featured-tour__actions {display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-sm);margin-top:var(--space-sm)}
.top-pick__cta {display:inline-flex;align-items:center;gap:.4em;min-height:44px;padding:var(--space-2xs) var(--space-md);background:var(--color-ochre);color:var(--color-ink);font-weight:750;text-decoration:none}
.top-pick__cta:hover,.top-pick__cta:focus-visible {background:var(--color-navy);color:#fff}
.top-pick__jump {color:var(--color-accent);font-weight:600;min-height:44px;display:inline-flex;align-items:center}
.featured-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:var(--space-lg);max-width:var(--content-wide);margin:0 auto var(--space-xl);padding:0 var(--space-md)}
.featured-tour {background:#fff;border-top:3px solid var(--color-ochre);padding-bottom:var(--space-md)}
.featured-tour img {width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.featured-tour > :not(img) {padding:0 var(--space-md)}
.featured-tour h3 {font-family:var(--font-display);font-size:var(--text-1);margin-top:var(--space-2xs)}
.featured-tour__meta {color:var(--color-ink-soft);font-size:var(--text--1)}
.featured-tour .region-tag {margin-top:var(--space-sm)}