:root { font-family: Arial, sans-serif; color: #21352d; background: #f3f0e8; font-synthesis: none; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
.app { min-height: 100vh; background: var(--surface, #f3f0e8); color: var(--ink, #21352d); --surface: #f3f0e8; --ink: #21352d; --line: rgba(33,53,45,.14); --muted: #69756d; --display: Georgia, serif; }
.theme-urbex { --surface: #111; --ink: #f3f0e8; --line: rgba(243,240,232,.18); --muted: #a0a09b; background: #111; }
.site-header { position: absolute; z-index: 10; top: 0; width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 28px clamp(20px, 5vw, 76px); color: #f7f2e8; }
.brand { border: 0; background: transparent; color: inherit; display: flex; gap: 12px; align-items: center; letter-spacing: .09em; font: 500 11px 'DM Mono', monospace; padding: 0; }
.brand-mark { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid currentColor; border-radius: 50%; font-size: 9px; }
.main-nav { display: flex; align-items: center; gap: clamp(18px, 3vw, 42px); }
.main-nav a, .main-nav button { color: inherit; text-decoration: none; background: none; border: 0; font: 500 11px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .08em; padding: 7px 0; }
.main-nav a:hover, .main-nav button:hover { color: var(--accent, #ee6c39); }
.menu-button { display: none; border: 0; background: none; color: inherit; font-size: 25px; }
.hero { position: relative; min-height: min(760px, 92vh); color: #f7f2e8; display: flex; align-items: flex-end; padding: clamp(140px, 25vh, 240px) clamp(20px, 10vw, 150px) clamp(70px, 10vh, 105px); overflow: hidden; }
.hero-image { position: absolute; inset: 0; background: center/cover url('/packages/content/src/assets/nature-mountain.svg'); transform: scale(1.03); animation: floatImage 18s ease-in-out infinite alternate; }
.hero-urbex .hero-image { background-image: url('/packages/content/src/assets/urbex-factory.svg'); filter: grayscale(.25) contrast(1.2); }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,24,18,.73), rgba(11,24,18,.15) 75%), linear-gradient(0deg, rgba(9,17,13,.7), transparent 58%); }
.hero-urbex .hero-overlay { background: linear-gradient(90deg, rgba(8,8,8,.84), rgba(8,8,8,.22) 75%), linear-gradient(0deg, rgba(8,8,8,.88), transparent 60%); }
.hero-content { z-index: 1; max-width: 800px; }
.eyebrow, .section-kicker { font: 500 10px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .13em; }
.eyebrow { display: flex; gap: 12px; align-items: center; margin: 0 0 25px; color: #d6ddd5; }
.demo-pill { display: inline-block; border: 1px solid currentColor; padding: 5px 7px; font: 500 9px 'DM Mono', monospace; letter-spacing: .11em; opacity: .86; }
.hero h1 { max-width: 850px; margin: 0; font: 500 clamp(56px, 9vw, 126px)/.91 var(--display); letter-spacing: -.055em; }
.hero-text { max-width: 360px; margin: 30px 0 27px; color: #d5ddd6; font-size: 16px; line-height: 1.55; }
.button { border: 0; padding: 15px 18px; font: 500 11px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .08em; }
.button-primary { background: var(--accent, #ee6c39); color: #17231d; }.theme-urbex .button-primary { color: #111; }
.button-primary span, .text-link span, .clear-button span { margin-left: 22px; font-size: 15px; }
.hero-index { position: absolute; bottom: 40px; right: clamp(20px, 5vw, 76px); display: flex; gap: 12px; align-items: center; font: 10px 'DM Mono', monospace; }.index-line { width: 70px; height: 1px; background: currentColor; opacity: .55; }
.hero-note { position: absolute; left: clamp(20px, 5vw, 76px); bottom: 42px; font: 10px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .1em; color: #cdd5ce; }.scroll-dot { display: inline-block; width: 6px; height: 6px; margin-right: 7px; background: var(--accent); border-radius: 50%; }
.search-panel { position: relative; z-index: 2; margin: -1px auto 0; max-width: 1240px; padding: 58px clamp(20px, 4vw, 64px) 35px; background: var(--surface); }.search-title { display: flex; gap: 22px; align-items: baseline; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 26px; }.search-title .section-kicker { color: var(--accent); }.search-title h2, .collection-heading h2, .about-section h2 { margin: 0; font: 500 clamp(26px, 3.3vw, 44px)/1.1 var(--display); letter-spacing: -.04em; }.search-title p { margin: 0 0 0 auto; max-width: 250px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.filters { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 20px; padding: 26px 0 20px; }.filters label { position: relative; display: flex; flex-direction: column; gap: 9px; border-bottom: 1px solid var(--line); padding-bottom: 7px; }.filters label > span { color: var(--muted); font: 9px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .1em; }.filters input, .filters select { width: 100%; color: var(--ink); background: transparent; border: 0; outline: 0; font-size: 14px; appearance: none; }.filters select { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='m1 1 4 4 4-4' fill='none' stroke='%2369756d'/%3E%3C/svg%3E") right center/10px no-repeat; }.search-field .icon { position: absolute; right: 0; bottom: 5px; font-size: 19px; }.filter-foot { display: flex; justify-content: space-between; align-items: center; }.result-count { color: var(--muted); font: 10px 'DM Mono', monospace; }.clear-button, .text-link { border: 0; padding: 0; color: var(--ink); background: transparent; font: 500 10px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .08em; }.clear-button:hover, .text-link:hover { color: var(--accent); }
.collection { max-width: 1240px; margin: auto; padding: 65px clamp(20px, 4vw, 64px) 105px; }.collection-heading { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 32px; }.collection-heading .section-kicker, .reel-copy .section-kicker, .about-section .section-kicker, .detail-story .section-kicker, .aside-card .section-kicker { color: var(--accent); }.collection-count { font: 50px var(--display); letter-spacing: -.08em; }.collection-count small { font: 10px 'DM Mono', monospace; letter-spacing: 0; color: var(--muted); }.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }.route-card { min-width: 0; }.card-image-button { position: relative; display: block; width: 100%; height: 360px; overflow: hidden; border: 0; padding: 0; background: #777; text-align: left; }.card-image-button img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease, filter .6s; }.card-image-button:hover img { transform: scale(1.05); filter: saturate(1.1); }.card-number, .card-arrow { position: absolute; top: 18px; color: white; font: 10px 'DM Mono', monospace; }.card-number { left: 18px; }.card-arrow { right: 18px; display: grid; place-items: center; border: 1px solid #fff; border-radius: 50%; width: 30px; height: 30px; font-size: 16px; }.card-body { padding: 18px 0; border-bottom: 1px solid var(--line); }.card-meta { display: flex; justify-content: space-between; color: var(--card-accent); font: 9px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .08em; }.card-body h3 { margin: 9px 0 8px; font: 500 26px var(--display); letter-spacing: -.03em; }.card-body p { min-height: 42px; margin: 0 0 20px; color: var(--muted); font-size: 13px; line-height: 1.45; }.card-data { display: flex; gap: 15px; flex-wrap: wrap; color: var(--muted); font: 9px 'DM Mono', monospace; text-transform: uppercase; }.card-data .icon { margin-right: 5px; color: var(--card-accent); }.empty-state { border: 1px solid var(--line); padding: 70px 20px; text-align: center; }.empty-state > span { color: var(--accent); font-size: 35px; }.empty-state h3 { margin: 10px 0; font: 500 27px var(--display); }.empty-state p { color: var(--muted); }
.reel-section { max-width: 1240px; margin: auto; padding: 0 clamp(20px, 4vw, 64px) 120px; display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(30px, 8vw, 120px); align-items: center; }.reel-copy h2 { max-width: 390px; margin: 14px 0 16px; font: 500 clamp(35px, 4vw, 58px)/.98 var(--display); letter-spacing: -.055em; }.reel-copy p { max-width: 310px; color: var(--muted); line-height: 1.55; font-size: 14px; }.reel-copy .text-link { margin-top: 20px; }.reel-card { position: relative; min-height: 540px; overflow: hidden; background: #777; }.reel-card img { width: 100%; height: 100%; min-height: 540px; object-fit: cover; }.reel-shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,.75)); }.reel-status { position: absolute; top: 20px; left: 20px; display: flex; gap: 10px; align-items: center; color: #fff; font: 9px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .08em; }.play-icon { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #fff; border-radius: 50%; font-size: 9px; }.reel-caption { position: absolute; left: 24px; right: 24px; bottom: 25px; display: flex; flex-direction: column; color: #fff; }.reel-caption span { color: var(--accent); font: 10px 'DM Mono', monospace; }.reel-caption strong { margin-top: 6px; font: 500 32px var(--display); }
.about-section { max-width: 1240px; margin: auto; padding: 80px clamp(20px, 4vw, 64px); border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 40px; align-items: start; }.about-mark { font: 500 60px var(--display); letter-spacing: -.1em; }.about-mark span { display: inline-block; margin-left: 8px; color: var(--accent); font: 25px 'DM Mono'; }.about-section h2 { max-width: 560px; margin: 12px 0 15px; font-size: clamp(30px, 4vw, 52px); }.about-section p { max-width: 400px; color: var(--muted); line-height: 1.55; }.about-stat { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }.about-stat strong { font: 500 78px var(--display); letter-spacing: -.1em; }.about-stat span { color: var(--muted); font: 10px 'DM Mono', monospace; text-transform: uppercase; line-height: 1.5; }.app footer { max-width: 1240px; margin: auto; padding: 22px clamp(20px, 4vw, 64px) 30px; display: flex; justify-content: space-between; color: var(--muted); font: 9px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .06em; }
.theme-urbex .search-panel, .theme-urbex .collection, .theme-urbex .reel-section, .theme-urbex .about-section, .theme-urbex footer { background: #111; }.theme-urbex .card-image-button { filter: saturate(.7) contrast(1.1); }.theme-urbex .card-body h3, .theme-urbex .about-section h2 { font-style: italic; }.theme-urbex .route-card:nth-child(2) .card-image-button { height: 430px; }.theme-urbex .route-card:nth-child(3) .card-image-button { height: 300px; }
.detail-view { padding-top: 100px; }.back-button { display: block; margin: 0 auto 25px; max-width: 1240px; width: calc(100% - 40px); border: 0; background: none; color: var(--muted); text-align: left; font: 10px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .08em; }.detail-hero { position: relative; max-width: 1240px; height: min(62vh, 620px); min-height: 430px; margin: auto; overflow: hidden; color: #fff; }.detail-hero > img { width: 100%; height: 100%; object-fit: cover; }.detail-overlay { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.77), transparent 70%); }.detail-heading { position: absolute; left: clamp(22px, 5vw, 70px); bottom: 52px; }.detail-heading h1 { margin: 18px 0 8px; font: 500 clamp(46px, 7vw, 100px)/.9 var(--display); letter-spacing: -.06em; }.detail-heading p { margin: 0; font: 11px 'DM Mono', monospace; color: #e1e3df; }.detail-content { max-width: 1100px; margin: auto; display: grid; grid-template-columns: 1.65fr .8fr; gap: clamp(40px, 8vw, 120px); padding: 70px 20px 120px; }.detail-lead { margin: 0 0 45px; font: 500 clamp(23px, 3vw, 38px)/1.15 var(--display); letter-spacing: -.04em; }.detail-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 18px 0; gap: 12px; }.detail-stats span { color: var(--muted); font: 10px 'DM Mono', monospace; text-transform: uppercase; line-height: 1.4; }.detail-stats b { display: block; color: var(--ink); font-weight: 500; margin-bottom: 8px; }.detail-story { padding: 80px 0 20px; }.detail-story h2 { max-width: 480px; margin: 14px 0; font: 500 clamp(28px, 3.8vw, 48px)/1 var(--display); letter-spacing: -.05em; }.detail-story p { max-width: 550px; color: var(--muted); line-height: 1.7; font-size: 15px; }.map-placeholder { position: relative; height: 275px; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; border: 1px solid var(--line); background-color: #e1e0d8; background-image: linear-gradient(33deg, transparent 48%, rgba(33,53,45,.1) 49%, transparent 51%), linear-gradient(-42deg, transparent 48%, rgba(33,53,45,.08) 49%, transparent 51%); color: #53665b; text-align: center; }.theme-urbex .map-placeholder { background-color: #20231f; color: #bbc5a9; }.map-placeholder > span { font: 9px 'DM Mono', monospace; letter-spacing: .12em; }.map-placeholder small { font-size: 11px; }.map-pin { display: grid; place-items: center; width: 35px; height: 35px; border: 1px solid currentColor; border-radius: 50%; font: 20px var(--display); }.aside-card { margin-top: 25px; padding: 25px; border: 1px solid var(--line); }.aside-card h3 { margin: 16px 0; font: 500 25px/1 var(--display); }.aside-card ul { list-style: none; padding: 0; margin: 0; }.aside-card li { display: flex; gap: 10px; padding: 11px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; line-height: 1.4; }.aside-card li span { color: var(--accent); }.wikiloc-button { width: 100%; margin-top: 25px; padding: 15px; background: var(--accent); border: 0; text-align: left; font: 500 10px 'DM Mono', monospace; text-transform: uppercase; }.wikiloc-button span { float: right; font-size: 16px; }.wikiloc-button small { display: block; margin-top: 10px; font: 9px 'DM Mono', monospace; opacity: .7; }.gallery { margin-top: 80px; }.gallery-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 20px; }.gallery-heading h2 { margin: 0; font: 500 30px var(--display); }.gallery-heading span { color: var(--muted); font: 9px 'DM Mono', monospace; }.gallery-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 12px; }.gallery-grid figure { margin: 0; }.gallery-grid figure:first-child { grid-row: span 2; }.gallery-grid img { width: 100%; height: 230px; display: block; object-fit: cover; }.gallery-grid figure:first-child img { height: 472px; }.gallery-grid figcaption { padding-top: 7px; color: var(--muted); font: 8px 'DM Mono', monospace; }
@keyframes floatImage { to { transform: scale(1.08); } }
@media (max-width: 760px) { .site-header { padding: 20px; }.brand { font-size: 9px; }.main-nav { display: none; position: absolute; top: 65px; left: 20px; right: 20px; padding: 14px; flex-direction: column; align-items: flex-start; gap: 2px; background: rgba(10,17,13,.94); border: 1px solid rgba(255,255,255,.25); }.main-nav.is-open { display: flex; }.menu-button { display: block; }.hero { min-height: 720px; padding: 150px 20px 92px; align-items: center; }.hero h1 { font-size: clamp(52px, 16vw, 86px); }.hero-text { font-size: 14px; }.hero-note { left: 20px; bottom: 37px; }.hero-index { right: 20px; bottom: 37px; }.search-panel { padding: 48px 20px 30px; }.search-title { display: block; }.search-title h2 { margin: 13px 0; }.search-title p { max-width: 280px; }.filters { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 14px; }.filters .search-field { grid-column: span 2; }.collection { padding: 50px 20px 80px; }.collection-heading { align-items: end; }.collection-heading h2 { max-width: 230px; font-size: 32px; }.collection-count { font-size: 38px; }.card-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin-right: -20px; padding-right: 20px; gap: 14px; }.route-card { min-width: 82vw; max-width: 340px; scroll-snap-align: start; }.card-image-button, .theme-urbex .route-card:nth-child(2) .card-image-button, .theme-urbex .route-card:nth-child(3) .card-image-button { height: 380px; }.reel-section { display: flex; flex-direction: column; align-items: stretch; padding: 0 20px 80px; gap: 30px; }.reel-copy h2 { font-size: 43px; }.reel-card, .reel-card img { min-height: 470px; }.about-section { display: block; padding: 60px 20px; }.about-mark { margin-bottom: 45px; }.about-stat { align-items: flex-start; text-align: left; margin-top: 40px; }.app footer { flex-direction: column; gap: 9px; padding: 22px 20px 30px; }.detail-view { padding-top: 75px; }.detail-hero { height: 550px; min-height: 0; }.back-button { width: calc(100% - 40px); margin-bottom: 20px; }.detail-heading { left: 20px; bottom: 30px; }.detail-heading h1 { font-size: 56px; }.detail-content { display: flex; flex-direction: column; padding: 50px 20px 80px; gap: 20px; }.detail-stats { grid-template-columns: 1fr 1fr; gap: 20px 10px; }.detail-story { padding-top: 55px; }.detail-aside { display: contents; }.map-placeholder { order: -1; }.gallery { margin-top: 55px; }.gallery-heading { display: block; }.gallery-heading span { display: block; margin-top: 8px; }.gallery-grid { grid-template-columns: 1fr 1fr; }.gallery-grid figure:first-child { grid-column: span 2; grid-row: auto; }.gallery-grid img, .gallery-grid figure:first-child img { height: 180px; }.gallery-grid figure:first-child img { height: 260px; } }

/* Iteration 2: editorial modules shared by both identities. */
.hero-byline { margin: 18px 0 0; color: rgba(235,241,233,.7); font: 9px 'DM Mono', monospace; letter-spacing: .04em; text-transform: uppercase; }
.card-demo { position: absolute; left: 18px; bottom: 16px; color: rgba(255,255,255,.82); font: 9px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .08em; }
.creator-preview { max-width: 1240px; margin: 0 auto; padding: 95px clamp(20px, 4vw, 64px); border-top: 1px solid var(--line); display: grid; grid-template-columns: .75fr 1.35fr .75fr; gap: clamp(30px, 6vw, 90px); align-items: center; }
.creator-photo { position: relative; height: 315px; overflow: hidden; background: #d4d1c5; }
.creator-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.creator-photo > span { position: absolute; left: 15px; bottom: 15px; color: #fff; }
.creator-copy h2 { margin: 13px 0 17px; font: 500 clamp(34px, 4.5vw, 60px)/.98 var(--display); letter-spacing: -.055em; }
.creator-copy h2 em { color: var(--accent); font-style: italic; }
.creator-copy p { max-width: 410px; color: var(--muted); line-height: 1.6; font-size: 14px; }
.creator-meta { display: flex; flex-direction: column; gap: 5px; margin: 28px 0 22px; font: 10px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .05em; }
.creator-meta span { color: var(--muted); }
.creator-note { padding: 22px; border: 1px solid var(--line); align-self: end; }
.quote-mark { display: block; color: var(--accent); font: 54px/0.6 var(--display); }
.creator-note p { margin: 18px 0 18px; font: 500 21px/1.2 var(--display); }
.creator-note small, .pending-note { color: var(--muted); font: 9px/1.45 'DM Mono', monospace; text-transform: uppercase; }
.detail-labels { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.safety-pill { display: inline-block; border: 1px solid #d3ff3f; color: #d3ff3f; padding: 5px 7px; font: 500 9px 'DM Mono', monospace; letter-spacing: .11em; }
.detail-section { padding-top: 72px; }
.section-heading h2 { margin: 12px 0 24px; font: 500 clamp(29px, 3.5vw, 46px)/1 var(--display); letter-spacing: -.045em; }
.detail-reel-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.reel-card-compact, .reel-card-compact img { min-height: 300px; }
.detail-reels .pending-note { margin: 14px 0 0; }
.experience-card { display: grid; grid-template-columns: 1fr 1.3fr; gap: 24px; padding: 26px; border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 88%, var(--accent-soft)); }
.experience-person { display: flex; align-items: center; gap: 14px; }
.experience-person img { width: 54px; height: 54px; object-fit: cover; border-radius: 50%; }
.experience-person strong, .experience-person span { display: block; }
.experience-person strong { font: 500 18px var(--display); }
.experience-person span { margin-top: 4px; color: var(--muted); font: 9px 'DM Mono', monospace; }
.experience-quote { min-width: 0; }
.experience-quote .demo-pill { color: var(--accent); }
.experience-quote p { margin: 15px 0 0; font: 500 21px/1.2 var(--display); }
.experience-facts { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-top: 20px; border-top: 1px solid var(--line); }
.experience-facts div { display: flex; flex-direction: column; gap: 8px; }
.experience-facts small, .aside-fact small { color: var(--muted); font: 9px 'DM Mono', monospace; text-transform: uppercase; }
.experience-facts strong { font: 500 15px/1.3 var(--display); }
.instagram-button { grid-column: 1 / -1; width: max-content; padding: 11px 14px; border: 1px solid var(--line); color: var(--muted); background: transparent; font: 9px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .06em; }
.instagram-button span { margin-left: 13px; color: var(--accent); }
.curiosities { margin-top: 32px; padding: 22px 0 0; border-top: 1px solid var(--line); }
.curiosities h3 { margin: 0 0 14px; font: 500 20px var(--display); }
.curiosities ul { display: grid; gap: 10px; padding: 0; margin: 0; list-style: none; }
.curiosities li { display: flex; gap: 10px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.curiosities .icon { color: var(--accent); }
.aside-fact { padding: 0 0 18px; margin: 17px 0 8px; border-bottom: 1px solid var(--line); }
.aside-fact p { margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.map-place { background-color: #252725; color: #bbc5a9; }
.theme-naturaleza .map-place { background-color: #e1e0d8; color: #53665b; }
.wikiloc-button:disabled { cursor: default; opacity: .75; }
.safety-note { margin-top: 25px; padding: 20px; border: 1px solid var(--line); }
.safety-note strong { font: 500 18px var(--display); }
.safety-note p { margin: 10px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.related-section { max-width: 1100px; margin: 0 auto; padding: 0 20px 120px; }
.related-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.related-grid .card-image-button { height: 270px; }
.related-grid .card-body p { min-height: 0; }

@media (max-width: 760px) {
  .hero-byline { max-width: 290px; line-height: 1.5; }
  .creator-preview { display: block; padding: 65px 20px; }
  .creator-photo { height: 275px; margin-bottom: 38px; }
  .creator-note { margin-top: 42px; }
  .detail-reel-grid, .related-grid { grid-template-columns: 1fr; }
  .reel-card-compact, .reel-card-compact img { min-height: 390px; }
  .experience-card { display: flex; flex-direction: column; padding: 20px; }
  .experience-facts { grid-template-columns: 1fr; }
  .instagram-button { width: 100%; text-align: left; }
  .related-section { padding: 0 20px 80px; }
  .related-grid .card-image-button { height: 320px; }
}

/* Imported draft links keep the approved visual language while remaining explicit about review status. */
.reel-open { margin-top: 13px; color: var(--accent); font: 9px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .08em; text-decoration: none; }
.wikiloc-button { box-sizing: border-box; display: block; color: inherit; text-decoration: none; }

/* Keyboard and touch affordances shared by both editions. */
:where(a, button, input, select):focus-visible { outline: 3px solid var(--accent, #ee6c39); outline-offset: 4px; }
@media (max-width: 760px) {
  .main-nav a, .main-nav button { min-height: 44px; display: flex; align-items: center; }
  .button, .clear-button, .text-link, .back-button { min-height: 44px; }
  .filters input, .filters select { min-height: 44px; font-size: 16px; }
  .detail-heading h1 { overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

.visitor-guide { margin: 55px 0; padding: 35px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.visitor-guide-copy { margin-top: 18px; color: var(--muted); font: 14px/1.75 var(--body); overflow-wrap: anywhere; }.visitor-guide-copy a { color: var(--accent); }

.detail-heading .image-credit{display:block;margin-top:1rem;color:rgba(255,255,255,.82);font-size:.75rem;line-height:1.4}.detail-heading .image-credit a{color:inherit;text-decoration:underline;text-underline-offset:2px}.visitor-guide-copy h3{margin:1.5rem 0 .5rem;font-size:1.1rem}.visitor-guide-copy p{margin:.5rem 0 1rem}.visitor-guide-copy ul{padding-left:1.25rem}