/* BASE */

:root {
  --color-white: #fff;
  --color-black: #000;
  --color-text: #1f2937;
  --color-text-strong: #111827;
  --color-text-body: #374151;
  --color-text-secondary: #4b5563;
  --color-text-muted: #6b7280;
  --color-border: #e5e7eb;
  --color-border-strong: #d1d5db;
  --color-surface: #fff;
  --color-surface-subtle: #f9fafb;
  --color-surface-muted: #f3f4f6;
  --color-surface-dark: #111827;
  --color-accent-soft: #bfdbfe;
  --color-accent-light: #60a5fa;
  --color-accent: #2563eb;
  --color-accent-strong: #1d4ed8;
  --color-accent-dark: #1e40af;
  --color-success: #16a34a;
  --color-success-dark: #15803d;
  --color-danger: #dc2626;
  --color-danger-dark: #b91c1c;
  --color-overlay: rgb(0 0 0 / 0.55);
  --color-overlay-strong: rgb(0 0 0 / 0.88);
  --color-overlay-control: rgb(0 0 0 / 0.65);
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-size-small: 0.875rem;
  --font-size-base: 1rem;
  --font-size-large: 1.125rem;
  --font-size-heading-small: 1.25rem;
  --font-size-heading-medium: 1.5rem;
  --font-size-heading-large: 1.875rem;
  --font-size-heading-xl: 2.25rem;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-tight: 1.25;
  --line-height-base: 1.6;
  --line-height-relaxed: 1.75;
  --space-hairline: 0.125rem;
  --space-xs: 0.25rem;
  --space-small: 0.5rem;
  --space-compact: 0.75rem;
  --space-medium: 1rem;
  --space-large: 1.5rem;
  --space-xl: 2rem;
  --space-3xl: 3rem;
  --space-4xl: 4rem;
  --radius-small: 0.25rem;
  --radius-large: 0.5rem;
  --radius-round: 9999px;
  --shadow-subtle: 0 1px 2px rgb(0 0 0 / 0.05);
  --shadow-default: 0 1px 3px rgb(0 0 0 / 0.1);
  --shadow-hover: 0 4px 8px rgb(0 0 0 / 0.12);
  --content-narrow: 36rem;
  --content-medium: 42rem;
  --content-wide: 56rem;
  --content-extra-wide: 72rem;
  --size-page-minimum: 20rem;
  --size-menu: 22rem;
  --size-hero: 12rem;
  --size-video-minimum: 16rem;
  --size-gallery: 75rem;
  --size-gallery-offset: 7rem;
  --size-control: 2.75rem;
  --size-control-large: 2.5rem;
  --hamburger-shift: 0.375rem;
  --transition-fast: 150ms ease;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  text-size-adjust: 100%;
}

body { min-width: var(--size-page-minimum); margin: 0; background: var(--color-surface); }
body, h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin-block-start: 0; }
img, svg, video, iframe { display: block; max-width: 100%; }
img, video { height: auto; }
button, input, select, textarea { color: inherit; font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
[hidden] { display: none; }
:focus-visible { outline: var(--space-hairline) solid var(--color-accent); outline-offset: var(--space-hairline); }

nav ul,
nav ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* LAYOUT */

.layout-fixed { position: fixed; }
.layout-absolute { position: absolute; }
.layout-relative { position: relative; }
.layout-sticky { position: sticky; }
.stretch-horizontal { right: 0; left: 0; }
.dock-top { top: 0; }
.dock-bottom { bottom: 0; }
.offset-left-medium { left: var(--space-large); }
.offset-left-large { left: var(--space-xl); }
.layer-header { z-index: 40; }
.layer-overlay { z-index: 50; }
.layout-flex { display: flex; }
.layout-inline-flex { display: inline-flex; }
.layout-grid { display: grid; }
.is-hidden { display: none; }
.direction-column { flex-direction: column; }
.wrap-content { flex-wrap: wrap; }
.align-start { align-items: flex-start; }
.align-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.grid-single-column { grid-template-columns: minmax(0, 1fr); }
.gap-small { gap: var(--space-small); }
.gap-medium { gap: var(--space-medium); }
.gap-large { gap: var(--space-large); }
.centered { margin-inline: auto; }
.content-width-narrow { max-width: var(--content-narrow); }
.content-width-medium { max-width: var(--content-medium); }
.content-width-wide { max-width: var(--content-wide); }
.content-width-extra-wide { max-width: var(--content-extra-wide); }
.height-icon-small { height: var(--space-medium); }
.height-icon-medium { height: var(--font-size-heading-small); }
.width-hairline { width: var(--space-hairline); }
.width-icon-small { width: var(--space-medium); }
.width-icon-medium { width: var(--font-size-heading-small); }
.smooth-scroll { scroll-behavior: smooth; }
.margin-inline-small { margin-inline: var(--space-small); }
.margin-left-small { margin-left: var(--space-small); }
.margin-left-4xl { margin-left: var(--space-4xl); }
.margin-right-small { margin-right: var(--space-small); }
.margin-top-medium { margin-top: var(--space-medium); }
.margin-top-xl { margin-top: var(--space-xl); }
.margin-top-3xl { margin-top: var(--space-3xl); }
.margin-bottom-small { margin-bottom: var(--space-small); }
.margin-bottom-compact { margin-bottom: var(--space-compact); }
.margin-bottom-medium { margin-bottom: var(--space-medium); }
.margin-bottom-xl { margin-bottom: var(--space-xl); }
.margin-bottom-3xl { margin-bottom: var(--space-3xl); }
.padding-medium { padding: var(--space-medium); }
.padding-large { padding: var(--space-large); }
.padding-inline-compact { padding-inline: var(--space-compact); }
.padding-inline-medium { padding-inline: var(--space-medium); }
.padding-inline-large { padding-inline: var(--space-large); }
.padding-block-small { padding-block: var(--space-small); }
.padding-block-compact { padding-block: var(--space-compact); }
.padding-block-medium { padding-block: var(--space-medium); }
.padding-block-xl { padding-block: var(--space-xl); }
.padding-block-3xl { padding-block: var(--space-3xl); }
.padding-block-4xl { padding-block: var(--space-4xl); }
.padding-top-xl { padding-top: var(--space-xl); }
.vertical-spacing-small > :not([hidden]) ~ :not([hidden]) { margin-top: var(--space-small); }
.vertical-spacing-medium > :not([hidden]) ~ :not([hidden]) { margin-top: var(--space-medium); }
.vertical-spacing-xl > :not([hidden]) ~ :not([hidden]) { margin-top: var(--space-xl); }
.horizontal-spacing-large > :not([hidden]) ~ :not([hidden]) { margin-left: var(--space-large); }

/* COMPONENTS */

.skip-link { position: fixed; top: 0; left: var(--space-medium); z-index: 2000; padding: var(--space-compact) var(--space-medium); color: var(--color-white); background: var(--color-black); transform: translateY(-120%); }
.skip-link:focus { transform: translateY(0); }
.surface-white { background-color: var(--color-white); }
.surface-subtle { background-color: var(--color-surface-subtle); }
.surface-muted { background-color: var(--color-surface-muted); }
.surface-dark { background-color: var(--color-surface-dark); }
.surface-accent-soft { background-color: var(--color-accent-soft); }
.surface-accent { background-color: var(--color-accent); }
.surface-success { background-color: var(--color-success); }
.surface-danger { background-color: var(--color-danger); }
.text-inverse { color: var(--color-white); }
.text-accent-soft { color: var(--color-accent-light); }
.text-accent { color: var(--color-accent); }
.text-accent-strong { color: var(--color-accent-strong); }
.text-muted { color: var(--color-text-muted); }
.text-secondary { color: var(--color-text-secondary); }
.text-body { color: var(--color-text-body); }
.text-default { color: var(--color-text); }
.text-strong { color: var(--color-text-strong); }
.text-centered { text-align: center; }
.text-small { font-size: var(--font-size-small); }
.text-large { font-size: var(--font-size-large); }
.text-heading-medium { font-size: var(--font-size-heading-small); }
.text-heading-large { font-size: var(--font-size-heading-large); line-height: var(--line-height-tight); }
.text-heading-xl { font-size: var(--font-size-heading-xl); line-height: var(--line-height-tight); }
.weight-medium { font-weight: var(--font-weight-medium); }
.weight-semibold { font-weight: var(--font-weight-semibold); }
.weight-bold { font-weight: var(--font-weight-bold); }
.leading-relaxed { line-height: var(--line-height-relaxed); }
.is-underlined { text-decoration: underline; }
.text-antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.has-border { border: 1px solid var(--color-border); }
.has-border-top { border-top: 1px solid var(--color-border); }
.has-border-bottom { border-bottom: 1px solid var(--color-border); }
.border-width-heavy { border-width: var(--space-xs); }
.border-neutral { border-color: var(--color-border); }
.border-inverse { border-color: var(--color-white); }
.corner-small { border-radius: var(--radius-small); }
.corner-large { border-radius: var(--radius-large); }
.corner-round { border-radius: var(--radius-round); }
.elevated { box-shadow: var(--shadow-default); }
.elevated-subtle { box-shadow: var(--shadow-subtle); }
.animate-colors { transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast); }
.animate-shadow { transition: box-shadow var(--transition-fast); }
.hover-elevated:hover { box-shadow: var(--shadow-hover); }
.hover-surface-accent:hover { background-color: var(--color-accent-strong); }
.hover-surface-muted:hover { background-color: var(--color-border); }
.hover-surface-success:hover { background-color: var(--color-success-dark); }
.hover-surface-danger:hover { background-color: var(--color-danger-dark); }
.hover-text-accent-soft:hover { color: var(--color-accent-soft); }
.hover-text-accent:hover { color: var(--color-accent); }
.hover-text-accent-strong:hover { color: var(--color-accent-strong); }
.hover-text-accent-dark:hover { color: var(--color-accent-dark); }
.hover-underlined:hover { text-decoration: underline; }
.link-visited:visited { color: var(--color-accent); }
.link-visited-hover:visited:hover { color: var(--color-accent-strong); }
.focus-clean:focus { outline-color: transparent; }
.focus-ring:focus-visible { outline-color: var(--color-accent); }
.focus-ring-accent:focus-visible, .focus-ring-accent-strong:focus-visible { outline-color: var(--color-accent); }
.focus-ring-success:focus-visible { outline-color: var(--color-success); }
.focus-ring-danger:focus-visible { outline-color: var(--color-danger); }
.focus-ring-offset:focus-visible { outline-offset: var(--space-xs); }

.desktop-navigation { display: flex; }
.hamburger { display: none; }
.js-enabled .desktop-navigation { display: none; }
.js-enabled .hamburger { display: block; }
.mobile-menu-overlay { position: fixed; inset: 0; z-index: 50; visibility: hidden; background: var(--color-overlay); opacity: 0; transition: opacity var(--transition-fast), visibility var(--transition-fast); }
.mobile-menu-overlay.open { visibility: visible; opacity: 1; }
.mobile-menu { position: fixed; top: 0; right: 0; z-index: 60; width: min(var(--size-menu), 100vw); height: 100vh; padding: var(--space-large); color: var(--color-white); background: var(--color-surface-dark); box-shadow: var(--shadow-hover); transform: translateX(100%); transition: transform var(--transition-fast); }
.mobile-menu.open { transform: translateX(0); }
.mobile-menu-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-xl); }
.mobile-menu-close, .hamburger { padding: var(--space-small); border: 0; background: transparent; }
.mobile-menu-close { color: var(--color-white); }
.hamburger-line { width: var(--space-large); height: var(--space-hairline); margin-block: var(--space-xs); background: currentColor; transition: transform var(--transition-fast), opacity var(--transition-fast); }
.hamburger.active .hamburger-line:nth-child(1) { transform: translateY(var(--hamburger-shift)) rotate(45deg); }
.hamburger.active .hamburger-line:nth-child(2) { opacity: 0; }
.hamburger.active .hamburger-line:nth-child(3) { transform: translateY(calc(-1 * var(--hamburger-shift))) rotate(-45deg); }
.mobile-menu-nav { display: grid; gap: var(--space-small); }
.mobile-menu-nav a { display: block; padding: var(--space-compact); color: var(--color-white); border-radius: var(--radius-small); text-decoration: none; }
.mobile-menu-nav a:hover, .mobile-menu-nav a:focus-visible { background: var(--color-accent-dark); }

.hero-section { display: flex; flex-direction: column; align-items: center; max-width: var(--content-extra-wide); margin-inline: auto; padding: var(--space-3xl) var(--space-medium); gap: var(--space-large); text-align: center; }
.hero-image { width: var(--size-hero); height: var(--size-hero); flex: 0 0 auto; border-radius: 50%; object-fit: cover; }
.breadcrumb { padding: var(--space-medium); background: var(--color-surface-subtle); border-bottom: 1px solid var(--color-border); }
.breadcrumb nav { max-width: var(--content-wide); margin-inline: auto; }
.breadcrumb-list { display: flex; flex-wrap: wrap; gap: var(--space-small); margin: 0; padding: 0; list-style: none; font-size: var(--font-size-small); }
.breadcrumb-item { color: var(--color-text-muted); }
.breadcrumb-separator { color: var(--color-border-strong); }
.breadcrumb a { color: var(--color-accent); }
.breadcrumb a:hover { color: var(--color-accent-strong); }

.article-content, .legal-content { max-width: var(--content-wide); margin-inline: auto; padding: var(--space-xl) var(--space-medium) var(--space-4xl); }
.article-header { margin-bottom: var(--space-xl); padding-bottom: var(--space-large); border-bottom: 1px solid var(--color-border); }
.article-title { margin-bottom: var(--space-medium); color: var(--color-text-strong); font-size: var(--font-size-heading-xl); line-height: var(--line-height-tight); }
.article-meta { display: flex; flex-wrap: wrap; gap: var(--space-small); color: var(--color-text-muted); font-size: var(--font-size-small); }
.article-tags, .archive-tags { display: flex; flex-wrap: wrap; gap: var(--space-small); margin-top: var(--space-medium); }
.article-tag, .archive-tag { padding: var(--space-xs) var(--space-compact); color: var(--color-accent-dark); background: var(--color-accent-soft); border-radius: var(--radius-round); font-size: var(--font-size-small); }
.article-prose { color: var(--color-text-body); font-size: var(--font-size-large); line-height: var(--line-height-relaxed); }
.article-prose p { margin-bottom: var(--space-large); }
.article-prose h2, .article-prose h3 { margin-top: var(--space-xl); margin-bottom: var(--space-medium); color: var(--color-text-strong); line-height: var(--line-height-tight); }
.article-prose h2 { font-size: var(--font-size-heading-medium); }
.article-prose h3 { font-size: var(--font-size-heading-small); }
.article-prose a { color: var(--color-accent); text-decoration: underline; }
.article-prose a:hover { color: var(--color-accent-strong); }

.video-container { position: relative; width: 100%; margin-block: var(--space-xl); aspect-ratio: 16 / 9; overflow: hidden; background: var(--color-surface-muted); }
.video-container iframe { width: 100%; height: 100%; border: 0; }
.video-consent { display: grid; min-height: var(--size-video-minimum); place-content: center; gap: var(--space-medium); padding: var(--space-xl); text-align: center; border: 1px solid var(--color-border-strong); }
.video-consent-button, .button-primary { display: inline-flex; justify-content: center; padding: var(--space-small) var(--space-medium); color: var(--color-white); background: var(--color-accent); border: 0; border-radius: var(--radius-small); font-weight: var(--font-weight-semibold); }
.video-consent-button { justify-self: center; }

.gallery-section { margin-top: var(--space-3xl); padding-top: var(--space-xl); border-top: 1px solid var(--color-border); }
.gallery-title { margin-bottom: var(--space-large); color: var(--color-text-strong); font-size: var(--font-size-heading-medium); }
.gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-medium); }
.gallery-item { overflow: hidden; border-radius: var(--radius-small); box-shadow: var(--shadow-subtle); }
.gallery-item img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform var(--transition-fast); }
.gallery-item:hover img { transform: scale(1.04); }
.modal-open { overflow: hidden; }
.gallery-dialog { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: var(--space-medium); background: var(--color-overlay-strong); }
.gallery-dialog[hidden] { display: none; }
.gallery-dialog-panel { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; width: min(100%, var(--size-gallery)); max-height: calc(100vh - var(--space-xl)); }
.gallery-dialog-figure { display: grid; gap: var(--space-compact); justify-items: center; margin: 0; }
.gallery-dialog-image { max-height: calc(100vh - var(--size-gallery-offset)); object-fit: contain; }
.gallery-dialog-caption { color: var(--color-white); text-align: center; }
.gallery-dialog-close, .gallery-dialog-previous, .gallery-dialog-next { color: var(--color-white); background: var(--color-overlay-control); border: 1px solid var(--color-white); border-radius: var(--radius-small); }
.gallery-dialog-close { position: absolute; top: 0; right: 0; z-index: 1; width: var(--size-control); height: var(--size-control); font-size: var(--font-size-heading-xl); }
.gallery-dialog-previous, .gallery-dialog-next { width: var(--size-control); height: var(--space-4xl); margin: var(--space-small); font-size: var(--size-control-large); }

.archive-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-large); max-width: var(--content-extra-wide); margin-inline: auto; padding: var(--space-large) var(--space-medium) var(--space-4xl); }
.archive-item { padding: var(--space-large); background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-large); box-shadow: var(--shadow-subtle); }
.archive-item:hover { box-shadow: var(--shadow-hover); }
.archive-item h2 { margin-bottom: var(--space-small); font-size: var(--font-size-heading-small); }
.archive-item h2 a { color: var(--color-text-strong); text-decoration: none; }
.archive-item h2 a:hover { color: var(--color-accent); }
.archive-meta { color: var(--color-text-muted); font-size: var(--font-size-small); }
.archive-excerpt { color: var(--color-text-body); }
.featured-post { border-left: var(--space-xs) solid var(--color-accent); }
.travel-highlight { border-left: var(--space-xs) solid var(--color-success); }
.filter-btn { padding: var(--space-small) var(--space-medium); color: var(--color-text-body); background: var(--color-white); border: 1px solid var(--color-border-strong); border-radius: var(--radius-round); }
.filter-btn:hover, .filter-btn.active { color: var(--color-white); background: var(--color-accent); border-color: var(--color-accent); }
.fade-in { animation: fade-in var(--transition-fast); }
.count, .separator { color: var(--color-text-muted); }

.legal-content h1 { color: var(--color-text-strong); font-size: var(--font-size-heading-xl); }
.legal-content h2 { margin-top: var(--space-xl); color: var(--color-text-strong); font-size: var(--font-size-heading-medium); }
.legal-content h3 { margin-top: var(--space-large); color: var(--color-text-strong); font-size: var(--font-size-heading-small); }
.legal-content a { color: var(--color-accent); }
.contact-card, .disclaimer { margin-block: var(--space-large); padding: var(--space-large); background: var(--color-surface-subtle); border: 1px solid var(--color-border); border-radius: var(--radius-large); }
.contact-info { font-style: normal; }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

@media (min-width: 640px) {
  .small-grid-two-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .small-direction-row { flex-direction: row; }
  .small-horizontal-spacing > :not([hidden]) ~ :not([hidden]) { margin-left: var(--space-large); }
  .small-no-vertical-spacing > :not([hidden]) ~ :not([hidden]) { margin-top: 0; }
  .small-padding-inline-large { padding-inline: var(--space-large); }
  .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .medium-layout-flex { display: flex; }
  .medium-is-hidden { display: none; }
  .desktop-navigation, .js-enabled .desktop-navigation { display: flex; }
  .hamburger, .js-enabled .hamburger { display: none; }
  .hero-section { flex-direction: row; gap: var(--space-3xl); padding-block: var(--space-4xl); text-align: left; }
  .article-content, .legal-content { padding-inline: var(--space-xl); }
  .archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .large-grid-three-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .large-padding-inline-xl { padding-inline: var(--space-xl); }
  .archive-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gallery-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .animate-colors, .animate-shadow, .hamburger-line, .mobile-menu, .mobile-menu-overlay, .gallery-item img { transition-duration: 0.01ms; }
  .fade-in { animation-duration: 0.01ms; animation-iteration-count: 1; }
}

@media print {
  .mobile-menu, .mobile-menu-overlay, .hamburger, .desktop-navigation, .filter-btn, .gallery-dialog { display: none; }
  body { color: var(--color-black); background: var(--color-white); }
  a { color: var(--color-black); text-decoration: underline; }
  .article-content, .legal-content { max-width: none; padding: 0; }
}