@layer foundation, site, reading;
@layer site {
/* Cancun Hostels: coastal notebook. System fonts, no remote assets or scripts. */
:root:root {
  --paper: #f8f1e3;
  --ink: #123d3c;
  --muted: #4c615b;
  --panel: #eee6d5;
  --line: #b9c5b8;
  --heading: Georgia, 'Times New Roman', serif;
  --gap: 4rem;
  font-size: 17px;
  line-height: 1.7;
  background: var(--paper);
  color: var(--ink);
}
html body { background: var(--paper); }
html .wrap { width: min(1240px, calc(100% - 5rem)); }
html .preview-notice { background: #123d3c; color: #f8f1e3; }
html .site-header { align-items: flex-start; padding-block: 1.6rem; gap: 2.4rem; border-bottom: 2px solid var(--ink); }
html .brand { font-size: 1.9rem; letter-spacing: -.055em; white-space: nowrap; }
html .site-header .brand::before { content: ''; display: inline-block; width: .7rem; height: .7rem; border: 2px solid #a13d2f; border-radius: 50%; margin-right: .6rem; }
html .site-header nav { max-width: 45rem; }
html .site-header nav ul { justify-content: flex-end; gap: .1rem 1.6rem; font-size: .79rem; font-weight: 700; }
html .site-header nav a { min-height: 44px; padding: .5rem 0; }
html .eyebrow { color: #875033; letter-spacing: .15em; font-size: .71rem; }
html .page-header { max-width: none; padding: 3.5rem 0 2.6rem; }
html h1 { max-width: 19ch; font-size: clamp(2.55rem, 5.5vw, 5.1rem); line-height: 1.06; letter-spacing: -.045em; }
html .intro { max-width: 61ch; font-size: 1.16rem; }
html .byline { font-size: .75rem; }
html .breadcrumbs { font-size: .75rem; }
html .archetype-home { display: grid; grid-template-columns: 1.05fr .95fr; column-gap: 3.4rem; }
html .archetype-home > .page-header { grid-column: 1; grid-row: 1; padding-block: 4rem 3rem; align-self: center; }
html .archetype-home h1 { max-width: 13ch; font-size: clamp(3rem, 5.6vw, 5.2rem); }
html .archetype-home > .hero-image { grid-column: 2; grid-row: 1; align-self: center; margin-block: 3.2rem; }
html .archetype-home > .hero-image img { aspect-ratio: 4/3; object-fit: cover; border-radius: 48% 48% 2px 2px; }
html .archetype-home > .hero-image figcaption { font-size: .66rem; line-height: 1.5; margin: .8rem .7rem 0; }
html .archetype-home > :not(.page-header):not(.hero-image) { grid-column: 1 / -1; }
html .archetype-home .feature-list { grid-template-columns: 1fr 3fr; padding-top: 2.3rem; border-top: 2px solid var(--ink); }
html .feature-list h2 { font-size: 2rem; }
html .curated-links { gap: 0 2rem; }
html .curated-item { border-top: 1px solid var(--line); padding-block: 1.5rem; gap: 1rem; }
html .curated-item h3 { font-size: 1.45rem; line-height: 1.25; }
html .curated-item h3 a { text-decoration: none; }
html .curated-item h3 a:hover { text-decoration: underline; }
html .curated-item p { font-size: .9rem; color: var(--muted); }
html .item-number { color: #8b4431; border: 1px solid #bba88e; border-radius: 50%; width: 1.85rem; height: 1.85rem; display: flex; justify-content: center; align-items: center; flex-shrink: 0; padding: 0; margin-top: .15rem; font: .7rem monospace; }
html .archetype-home > .prose { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; max-width: none; padding-block: 2rem; }
html .archetype-home > .prose section { border-top: 1px solid var(--ink); padding-top: 1.6rem; }
html .prose { max-width: 75ch; }
html .prose section { margin-bottom: 3rem; }
html .prose p { max-width: 70ch; }
html h2 { font-size: clamp(1.6rem, 3vw, 2.35rem); }
html h3 { font-size: 1.35rem; }
html .on-this-page { background: #e4e9dc; padding: 1.8rem 2rem; border: 1px solid #b9c5b8; border-radius: 1rem; }
html .on-this-page a { line-height: 1.9; }
html .hero-image img { max-height: 560px; object-fit: contain; background: #e4e9dc; }
html figcaption { font-size: .74rem; }
html .table-scroll { border: 1px solid var(--line); border-radius: .6rem; background: #fffaf0; }
html table { margin: 0; }
html th { background: #123d3c; color: #f8f1e3; }
html td { vertical-align: top; }
html th, html td { padding: 1.2rem; }
html tbody tr:nth-child(even) { background: #ecefdf; }
html caption { text-align: left; padding: 1.2rem; background: #e4e9dc; color: var(--ink); }
html .table-hint { font-size: .8rem; }
html .route { background: #e4e9dc; border: 1px solid #b9c5b8; border-radius: 1.2rem; padding: 2.3rem; margin-bottom: 3rem; max-width: 88ch; }
html .route ol { padding-left: 1.6rem; }
html .route li { padding: .5rem 0 1rem 1rem; }
html .route li::marker { color: #875033; font-family: monospace; font-weight: bold; }
html .route li p { max-width: 66ch; }
html .research-method { border-radius: 1rem; background: #e4e9dc; border: 1px solid var(--line); }
html .button { background: #075754; color: #fffdf5; border-radius: .3rem; min-height: 46px; padding: .75rem 1.2rem; }
html .button:hover { background: #123d3c; }
html .merchant-section { max-width: 88ch; }
html .merchant { padding: 1.5rem 0; }
html .merchant h3 { font-size: 1.5rem; }
html .site-footer { border-top: 2px solid var(--ink); padding: 2rem 0 3rem; margin-top: 4rem; }
html .site-footer p:not(.brand) { max-width: 88ch; color: var(--muted); font-size: .8rem; }
html .prose blockquote { border: 1px solid var(--line); background: #fffaf0; padding: 1.3rem; margin-inline: 0; border-radius: .5rem; }
html :focus-visible { outline: 3px solid #a13d2f; outline-offset: 5px; }
@media (max-width: 1000px) {
  html .site-header { display: block; }
  html .site-header nav { max-width: none; margin-top: 1rem; }
  html .site-header nav ul { justify-content: flex-start; }
  html .archetype-home { column-gap: 2rem; }
  html .archetype-home .feature-list { grid-template-columns: 1fr 2fr; gap: 2rem; }
}
@media (max-width: 760px) {
  html .wrap { width: calc(100% - 2.5rem); }
  html .site-header { padding-top: 1.3rem; }
  html .brand { font-size: 1.7rem; }
  html .site-header nav ul { gap: .15rem 1.25rem; font-size: .75rem; }
  html .page-header { padding-block: 2.2rem 2rem; }
  html .archetype-home { display: block; }
  html .archetype-home > .page-header { padding-block: 2.5rem 1rem; }
  html .archetype-home h1 { font-size: clamp(2.65rem, 12vw, 4.3rem); max-width: 13ch; }
  html .archetype-home > .hero-image { margin-block: 1.5rem 2.5rem; }
  html .archetype-home > .hero-image img { border-radius: .8rem; }
  html .archetype-home .feature-list { display: block; }
  html .archetype-home > .prose { display: block; padding: 0; }
  html .curated-links { display: block; }
  html .intro { font-size: 1.07rem; }
  html .route { padding: 1.5rem 1.2rem; }
  html .route li { padding-left: .3rem; }
  html .on-this-page { padding: 1.4rem; }
  html th, html td { padding: .9rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media print {
  html body { background: white; }
  html .archetype-home { display: block; }
  html .archetype-home > .hero-image { max-width: 14cm; }
  html .button { background: white; color: black; }
  html .table-scroll { overflow: visible; }
  html th, html td { color: black; background: white; }
}

}