/* Mobile first refinement of the original cream, gold and Atlantic palette. */
:root { --stone: #64665f; --sand-dim: #4e514b; }
html { scroll-padding-top: 92px; }
body { overflow-wrap: break-word; }
main, section, .wrap, .head, .seal-card > div { min-width: 0; }
.wrap { padding-inline: 20px; }
section, section.tight { padding-block: 64px; }
.head { margin-bottom: 32px; }
.head p { color: var(--sand-dim); line-height: 1.75; }
.head h2 { font-size: clamp(1.9rem, 6vw, 2.7rem); }
.eyebrow { display: inline-block; font-size: 11px; line-height: 1.6; letter-spacing: .15em; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 13px 20px; white-space: normal; text-align: center; line-height: 1.5; letter-spacing: .035em; }
a, button, [role="button"] { -webkit-tap-highlight-color: rgba(140,101,38,.15); }
a:focus-visible, button:focus-visible, [role="button"]:focus-visible { outline: 3px solid var(--atlantik); outline-offset: 5px; }
.skip-link { position: fixed; top: 10px; left: 16px; z-index: 300; padding: 12px 18px; color: #2f3437; background: #fcfaf5; transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }
/* Stable, legible navigation on the photograph and the article page. */
#nav, #nav.scrolled { padding: 12px 16px; background: rgba(252,250,245,.97); border-bottom: 1px solid rgba(47,52,55,.12); backdrop-filter: blur(12px); }
#nav .mark, #nav.scrolled .mark { color: #2f3437; font-size: 16px; }
#nav .worlds a, #nav.scrolled .worlds a { color: #4e514b; }
#nav .nav-right { gap: 10px; }
#nav .burger { display: flex; width: 44px; height: 44px; border-color: rgba(47,52,55,.25); }
#nav .burger span, #nav .burger span::before, #nav .burger span::after { background: #2f3437; }
#nav .lang-switch a, #nav.scrolled .lang-switch a { color: #4e514b; min-height: 44px; min-width: 40px; opacity: 1; }
#nav .lang-switch a.active { color: #2f3437; }
#nav .lang-switch a:not(.active) { display: none; }
#nav .worlds { display: none; }
#mobile-nav { padding: 88px 24px 36px; overflow-y: auto; overscroll-behavior: contain; }
#mobile-nav .mnav-link { display: block; min-height: 44px; padding-block: 8px; font-size: 17px; }
#mobile-nav .close { top: 18px; right: 18px; min-height: 44px; padding-inline: 12px; }
#mobile-nav .lang-switch { flex-wrap: wrap; gap: 8px 16px; }
#mobile-nav .lang-switch a { min-height: 44px; }
body.menu-open { overflow: hidden; }
/* Original photo: full-width portrait on mobile; text below the person. */
#hero { display: block; min-height: 0; padding-top: 68px; background: #11171b; }
#hero .hero-photo { position: relative; width: 100%; height: clamp(390px, 65svh, 720px); object-fit: cover; object-position: 50% 56%; }
#hero .content { width: 100%; padding: 34px 20px 40px; text-align: left; background: #11171b; }
#hero h1 { font-size: clamp(2.35rem, 9.5vw, 3.8rem); line-height: 1.06; }
#hero h1 em { display: block; }
#hero .sub { margin-top: 18px; color: #e6ddca; font-size: 1.2rem; }
#hero .lede { margin: 18px 0 0; max-width: 440px; color: #d0d4d0; line-height: 1.7; }
#hero .ctas { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 26px; }
#hero .btn { color: #f7f4ec; border-color: rgba(247,244,236,.45); }
#hero .btn.solid { color: #11171b; background: #c9a24b; border-color: #c9a24b; }
/* Thematic backgrounds rather than repeated decorative photos. */
#geschichte, #peregrino, #wer-darf, #community { background: #fcfaf5; }
#warum-pilgern, #philosophie, #gemeinden { background: #f1eada; }
#warum, #saeulen, #siegel, #medien, #faq { background: #f7f4ec; }
#warum-portugal, #weg, #kraftorte, #pilger, #unterstuetzer { background: #edf1ed; }
#erstbegehung { --ink: #173239; --ink-2: #203d43; --panel: #173239; --sand: #f7f4ec; --sand-dim: #e0e6df; --stone: #d0dcd5; --gold: #dfbf72; --gold-dim: #dfbf72; background: #173239; color: var(--sand); }
#erstbegehung .btn.solid { color: #173239; background: #dfbf72; border-color: #dfbf72; }
#erstbegehung .head:last-child { margin-bottom: 0; }
#erstbegehung .head h3 { font-size: clamp(1.55rem, 5.5vw, 2.05rem); line-height: 1.25; }
#erstbegehung .head .btn { margin-top: 26px; }
#erstbegehung .date-block { display: block; margin-bottom: 32px; }
#erstbegehung .date-block .big { font-size: clamp(2rem, 7vw, 3.25rem); }
#erstbegehung .date-block .small { max-width: 540px; margin-top: 12px; line-height: 1.8; color: var(--stone); }
#metaphorik, #heimkehr, footer { --stone: #b6c0b8; }
section:not(#erstbegehung):not(#metaphorik):not(#heimkehr) { border-top: 1px solid rgba(47,52,55,.08); }
.story-body p { font-size: 16px; color: #4e514b; line-height: 1.85; margin-bottom: 22px; }
.origin-credit { opacity: 1; line-height: 1.8; }
.story-lede { font-size: clamp(1.55rem, 5vw, 2rem); }
#warum .node { min-width: 0; width: 100%; max-width: 380px; }
#warum .caption { line-height: 1.8; }
.portugal-grid, .saeulen-grid, .kraftort-grid, .pilger-grid { gap: 16px; border: 0; background: transparent; grid-template-columns: 1fr; }
.portugal-card, .saeule-card, .kraftort, .pilger-item { background: #fcfaf5; border: 1px solid rgba(47,52,55,.12); padding: 26px 22px; }
.portugal-card p, .saeule-card .sf p, .kraftort p, .pilger-item p { font-size: 15px; line-height: 1.8; color: #4e514b; }
.kraftort { justify-content: flex-start; min-height: 0; }
#philosophie .layout { gap: 30px; grid-template-columns: 1fr; }
#philosophie .grund p { font-size: 15px; line-height: 1.8; }
#weg .stats { gap: 12px; border: 0; background: transparent; margin-bottom: 32px; grid-template-columns: repeat(2,minmax(0,1fr)); }
#weg .stat { background: #fcfaf5; padding: 22px 14px; border: 1px solid rgba(47,52,55,.12); }
#weg .stat .lab { font-size: 10px; letter-spacing: .06em; }
.map-frame { padding: 8px; background: #fcfaf5; }
.map-caption { line-height: 1.8; }
.seal-card { grid-template-columns: 1fr; gap: 14px; padding: 30px 0; }
.seal-card .glyph { justify-content: flex-start; flex-direction: row; padding: 0; }
.seal-card .glyph .idx { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid rgba(140,101,38,.25); border-radius: 50%; }
.seal-card .grid2 { grid-template-columns: 1fr; gap: 20px; }
.seal-card .ort { line-height: 1.7; }
.seal-card .grid2 p { line-height: 1.8; }
.meta-grid { grid-template-columns: 1fr; gap: 12px; }
.meta-chip .t { min-height: 44px; display: flex; align-items: center; }
.meta-chip .d { line-height: 1.8; }
.faq-q { min-height: 56px; line-height: 1.5; }
.faq-a p { line-height: 1.85; }
#heimkehr { min-height: 0; padding-block: 64px; }
#heimkehr .in-wrap { padding-inline: 20px; max-width: 720px; }
#heimkehr .stage p { line-height: 1.85; }
#heimkehr .btn { margin-top: 30px; border-color: rgba(247,244,236,.35); }
.voices { grid-template-columns: 1fr; gap: 16px; }
.voice { border: 1px solid rgba(47,52,55,.12); padding: 26px 22px; }
.voice .who { line-height: 1.8; }
footer { padding: 56px 0 32px; }
.foot-grid { grid-template-columns: 1fr 1fr; gap: 30px 20px; }
.foot-col:first-child { grid-column: 1 / -1; }
.foot-col a { display: block; min-height: 40px; padding-block: 6px; line-height: 1.6; }
.foot-bottom { align-items: flex-start; gap: 24px; }
.socials { flex-wrap: wrap; gap: 10px 18px; }
.socials a { min-height: 40px; display: inline-flex; align-items: center; }
#cookie-banner { padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); max-height: 45svh; overflow-y: auto; }
#cookie-banner .cb-inner { gap: 12px; }
#cookie-banner .cb-text { font-size: 13px; line-height: 1.6; }
#cookie-banner .cb-actions { width: 100%; }
#cookie-banner .cb-actions .btn { width: 100%; }
/* The report remains continuous, unabridged text. */
.report-page { background: #fcfaf5; padding-top: 112px; }
.report-header { border-bottom: 1px solid rgba(140,101,38,.25); padding-bottom: 32px; }
.report-header h1 { font-size: clamp(2rem, 7vw, 3.6rem); margin-top: 16px; }
.report-author { color: #64665f; }
.report-body { color: #383e3e; font-size: 17px; line-height: 1.9; }
.report-wrap { max-width: 780px; }
.report-back { min-height: 44px; line-height: 1.6; }
/* Progressive enhancement: long content is readable even without JavaScript. */
.reveal { opacity: 1; transform: none; }
@media (min-width: 700px) {
  .wrap { padding-inline: 32px; }
  section, section.tight { padding-block: 88px; }
  .head { margin-bottom: 44px; }
  .portugal-grid, .kraftort-grid, .pilger-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .saeulen-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .meta-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .voices { grid-template-columns: repeat(3,minmax(0,1fr)); }
  #nav .lang-switch a:not(.active) { display: flex; }
  #nav .nav-right { gap: 20px; }
  .report-page { padding-top: 136px; }
}
@media (min-width: 1000px) {
  #nav, #nav.scrolled { padding-inline: 32px; }
  #nav .worlds { display: flex; gap: 24px; }
  #nav .burger { display: none; }
  #hero { position: relative; min-height: 760px; min-height: min(950px,100svh); display: flex; align-items: center; padding-top: 88px; }
  #hero .hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-position: 50% 55%; }
  #hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,rgba(17,23,27,.91) 0%,rgba(17,23,27,.7) 32%,rgba(17,23,27,.12) 62%,rgba(17,23,27,.06) 100%); }
  #hero .content { width: 51%; padding: 72px max(40px,calc((100vw - 1180px)/2)) 72px; padding-right: 36px; background: transparent; }
  #hero h1 { font-size: clamp(3.2rem,4.2vw,5rem); }
  #hero .ctas { display: flex; justify-content: flex-start; gap: 12px; }
  #hero .ctas .btn { min-width: 0; }
  section, section.tight { padding-block: 104px; }
  .portugal-grid, .kraftort-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .pilger-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .saeulen-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  #philosophie .layout { grid-template-columns: 280px minmax(0,1fr); gap: 70px; }
  #weg .stats { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .seal-card { grid-template-columns: 70px minmax(0,1fr); gap: 32px; }
  .seal-card .grid2 { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 32px; }
  .meta-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .foot-grid { grid-template-columns: 1.3fr repeat(3,1fr); gap: 40px; }
  .foot-col:first-child { grid-column: auto; }
  #cookie-banner .cb-actions { width: auto; }
  #cookie-banner .cb-actions .btn { width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}