:root {
color-scheme: light;
--ground: #f0f2ee; --paper: #fbfcfa;
--ink: #15211b; --ink-soft: #435049;
--ink-faint: #5d6862;
--rule: #d4dad3;
--rule-strong: #8a948e; --prau: #1d4433; --prau-deep: #163527;
--prau-ink: #ecf1ec;
--prau-soft: #aac1b2;
--prau-rule: rgba(236, 241, 236, 0.16);
--prau-line: rgba(236, 241, 236, 0.34);
--mar: #14384d; --mar-deep: #0f2c3d;
--mar-ink: #e7eff3;
--mar-soft: #a3bccb;
--mar-shore: #d6e5ec;
--mar-rule: rgba(231, 239, 243, 0.16);
--senal: #f2c230; --senal-deep: #d9a913;
--senal-ink: #241c00;
--blanco-marca: #ffffff;
--post: #4a5650; --shadow: 0 18px 40px -18px rgba(21, 33, 27, 0.35);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
--sans: "Barlow", "Segoe UI", "Helvetica Neue", Arial, sans-serif; --t-cap: 0.8125rem;
--t-sm: 0.9375rem;
--t-body: 1.0625rem;
--t-lead: 1.25rem;
--t-h4: 1.5rem;
--t-h3: 2rem;
--t-h2: clamp(2.25rem, 4.2vw, 3.5rem);
--t-h1: clamp(3.25rem, 6.6vw, 6.4rem);
--gutter: max(16px, env(safe-area-inset-left, 0px));
--gutter-r: max(16px, env(safe-area-inset-right, 0px));
--wrap: 1320px;
--head-h: 64px;
--section: clamp(56px, 8vw, 112px); --i-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");
--i-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
} *, *::before, *::after { box-sizing: border-box; margin: 0; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 16px); }
body {
background: var(--ground);
color: var(--ink);
font-family: var(--sans);
font-size: var(--t-body);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: clip;
accent-color: var(--prau);
}
body::before {
content: "";
position: fixed;
inset: 0 0 auto;
height: env(safe-area-inset-top, 0px);
z-index: 60;
background: var(--ground);
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
input { caret-color: var(--prau); }
a { color: inherit; text-decoration: none; }
abbr[title] { text-decoration: none; cursor: help; }
ul, ol { list-style: none; padding: 0; }
p { text-wrap: pretty; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; line-height: 1; letter-spacing: -0.005em; text-wrap: balance; }
::selection { background: var(--senal); color: var(--senal-ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
.band :focus-visible, .coast-band :focus-visible, .site-foot :focus-visible { outline-color: var(--senal); } .wrap {
width: 100%;
max-width: calc(var(--wrap) + 64px);
margin-inline: auto;
padding-left: var(--gutter);
padding-right: var(--gutter-r);
}
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
position: fixed; top: -100px; left: var(--gutter); z-index: 100;
padding: 10px 16px; background: var(--senal); color: var(--senal-ink); font-weight: 600;
}
.skip-link:focus { top: calc(env(safe-area-inset-top, 0px) + 8px); }  .more {
display: inline-flex; align-items: center; gap: 8px;
font-weight: 600; font-size: var(--t-sm);
border-bottom: 2px solid var(--ink);
padding-bottom: 2px;
white-space: nowrap;
}
.more::after {
content: ""; flex: none; width: 1em; height: 1em;
background: currentColor;
-webkit-mask: var(--i-arrow) center / contain no-repeat;
mask: var(--i-arrow) center / contain no-repeat;
transition: transform .25s var(--ease-out);
}
.more:hover { border-bottom-color: var(--senal-deep); }
.more:hover::after { transform: translateX(3px); }
.band .more, .coast-band .more, .site-foot .more { border-bottom-color: var(--senal); }
.band .more:hover, .coast-band .more:hover { color: var(--senal); } .waymark {
display: inline-block; flex: none;
width: 20px; height: 13px;
background: linear-gradient(var(--blanco-marca) 0 42%, transparent 42% 58%, var(--senal) 58% 100%);
border-radius: 1px;
} .sec-head {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: end;
gap: 8px 32px;
margin-bottom: clamp(28px, 4vw, 48px);
}
.sec-head h2 { font-size: var(--t-h2); grid-column: 1; }
.sec-head p { grid-column: 1; max-width: 58ch; color: var(--ink-soft); margin-top: 10px; }
.sec-head .more { grid-column: 2; grid-row: 1 / span 2; align-self: end; }
.band-prau .sec-head p { color: var(--prau-soft); } .search { position: relative; }
.search-field {
display: flex; align-items: stretch;
background: var(--paper);
border: 2px solid var(--ink);
border-radius: 4px;
}
.search-field svg { width: 20px; height: 20px; margin: auto 0 auto 14px; flex: none; color: var(--ink-faint); }
.search input {
flex: 1; min-width: 0;
border: 0; background: transparent;
padding: 14px 12px;
font-size: var(--t-body);
}
.search input::placeholder { color: var(--ink-faint); opacity: 1; }
.search input::-webkit-search-cancel-button {
-webkit-appearance: none; appearance: none;
width: 16px; height: 16px; margin-left: 8px; cursor: pointer;
background: var(--ink-soft);
-webkit-mask: var(--i-x) center / contain no-repeat;
mask: var(--i-x) center / contain no-repeat;
}
.search input:focus { outline: none; }
.search-field:focus-within { box-shadow: 0 0 0 3px var(--senal); }
.search button[type="submit"] {
flex: none;
padding: 0 20px;
background: var(--ink); color: var(--paper);
font-weight: 600;
border-radius: 0 1px 1px 0;
}
.search button[type="submit"]:hover { background: var(--prau); }
.search-results {
position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30;
background: var(--paper);
border: 1px solid var(--rule);
border-radius: 4px;
box-shadow: var(--shadow);
padding: 6px;
max-height: min(420px, 60vh);
overflow-y: auto;
scrollbar-color: var(--rule-strong) transparent;
}
.search-results a {
display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: baseline;
padding: 10px 12px; border-radius: 3px;
}
.search-results a .r-cat { font-size: var(--t-cap); color: var(--ink-faint); white-space: nowrap; }
.search-results a[aria-selected="true"], .search-results a:hover { background: var(--ground); }
.search-results mark { background: none; color: inherit; font-weight: 600; box-shadow: inset 0 -0.35em 0 rgba(242, 194, 48, 0.55); }
.search-results .r-all { color: var(--ink-soft); }
.search-results li + li .r-all { border-top: 1px solid var(--rule); margin-top: 4px; padding-top: 12px; } .site-head {
position: sticky;
top: env(safe-area-inset-top, 0px);
z-index: 50;
background: var(--ground);
border-bottom: 1px solid transparent;
transition: border-color .2s ease;
}
.site-head.is-scrolled, .site-head.is-open { border-bottom-color: var(--rule); }
.head-row { display: flex; align-items: center; gap: 24px; height: var(--head-h); }
.brand { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.brand img { width: 34px; height: 34px; }
.brand span {
font-family: var(--display); font-weight: 700; font-size: 1.6rem; letter-spacing: -0.01em; line-height: 1;
}
.main-nav { margin-left: auto; }
.main-nav ul { display: flex; gap: 4px; }
.main-nav a {
display: block; padding: 8px 10px; font-size: var(--t-sm);
border-radius: 3px;
}
.main-nav a:hover { background: rgba(21, 33, 27, 0.06); }
.main-nav a[aria-current] { font-weight: 600; box-shadow: inset 0 -3px 0 var(--senal); border-radius: 3px 3px 0 0; }
.head-tools { display: flex; gap: 6px; margin-left: 8px; }
.head-btn {
display: inline-flex; align-items: center; gap: 8px;
min-height: 40px; padding: 8px 12px; font-weight: 600; font-size: var(--t-sm);
border: 1px solid var(--rule-strong); border-radius: 3px; background: var(--paper);
}
.head-btn svg { width: 18px; height: 18px; }
.head-btn:hover { border-color: var(--ink); }
.head-btn.is-current { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.index-panel {
border-top: 1px solid var(--rule);
background: var(--paper);
max-height: calc(100vh - var(--head-h) - env(safe-area-inset-top, 0px));
max-height: calc(100dvh - var(--head-h) - env(safe-area-inset-top, 0px));
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-color: var(--rule-strong) transparent;
box-shadow: var(--shadow);
}
.index-inner { padding-block: 28px 40px; display: grid; gap: 32px; }
.index-top { display: grid; grid-template-columns: minmax(0, 560px) auto; justify-content: space-between; gap: 16px; align-items: start; }
.index-close {
display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
font-weight: 600; font-size: var(--t-sm); padding: 10px 12px; border-radius: 3px;
}
.index-close svg { width: 18px; height: 18px; }
.index-close:hover { background: var(--ground); }
.index-cols { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 28px 24px; }
.index-cols h2 {
font-size: 1.25rem; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 2px solid var(--senal);
}
.index-cols a { display: block; padding: 5px 0; font-size: var(--t-sm); color: var(--ink-soft); }
.index-cols a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--senal-deep); text-decoration-thickness: 2px; text-underline-offset: 3px; }  .hero { padding-block: clamp(24px, 3.5vw, 44px) clamp(40px, 5vw, 64px); }
.hero-grid {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
column-gap: 24px;
row-gap: clamp(24px, 3vw, 40px);
}
.hero h1 {
grid-column: 1 / span 7; align-self: end;
font-size: var(--t-h1); line-height: 0.92; letter-spacing: -0.015em;
}
.hero-intro { grid-column: 8 / span 5; align-self: end; display: grid; gap: 20px; padding-bottom: 6px; }
.hero .lead { font-size: var(--t-lead); color: var(--ink-soft); max-width: 36ch; line-height: 1.45; }
.quick { display: none; }
.hero-photo { grid-column: 1 / span 8; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.hero-photo .frame { position: relative; aspect-ratio: 2.3 / 1; overflow: hidden; border-radius: 4px; background: var(--rule); }
.hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 58%; }
.hero-photo figcaption { font-size: var(--t-cap); color: var(--ink-faint); }
.hero-photo figcaption a { text-decoration: underline; text-underline-offset: 2px; } .signpost { grid-column: 9 / span 4; position: relative; min-width: 0; padding-top: 2px; }
.signpost::before { content: ""; position: absolute; left: 26px; top: 0; bottom: 28px; width: 12px;
background: var(--post); border-radius: 2px 2px 0 0;
}
.season { position: relative; }
.sign-place {
display: inline-block;
padding: 10px 16px 11px;
background: var(--ink); color: var(--paper);
font-size: 1.25rem; line-height: 1;
border-radius: 2px;
box-shadow: 0 6px 10px -4px rgba(21, 33, 27, 0.35);
}
.signs { display: grid; gap: 10px; margin-top: 12px; filter: drop-shadow(0 7px 7px rgba(21, 33, 27, 0.2)); }
.sign { display: block; border-radius: 2px; }
.sign-plate {
position: relative;
display: grid; gap: 3px;
padding: 12px 64px 13px 18px;
background: var(--prau); color: var(--prau-ink);
clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 0 100%);
transition: transform .35s var(--ease-out), background-color .2s ease;
}
.sign-plate::after { content: ""; position: absolute; right: 36px; top: 50%;
width: 18px; height: 12px; margin-top: -6px;
background: linear-gradient(var(--blanco-marca) 0 42%, transparent 42% 58%, var(--senal) 58% 100%);
}
.sign-t { font-family: var(--display); font-weight: 600; font-size: 1.45rem; line-height: 1.05; }
.sign-m { font-size: var(--t-sm); color: var(--prau-soft); line-height: 1.3; }
.sign:hover .sign-plate { transform: translateX(6px); background: var(--prau-deep); }
.sign:focus-visible { outline-offset: 4px; } .coast-band { color: var(--mar-ink); }
.coast-sea { background: var(--mar); padding-top: clamp(48px, 6vw, 88px); }
.coast-head { margin-bottom: 0; }
.coast-top { position: relative; }
.coast-head h2 { color: var(--mar-ink); }
.coast-head p { color: var(--mar-soft); }
.coast-map { position: relative; aspect-ratio: 1000 / 300; }
.coast-map svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.coast-map .land { fill: var(--prau); }
.coast-map .shore { fill: none; stroke: var(--mar-shore); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.coast-map .lead { fill: none; stroke: var(--prau-line); stroke-width: 1; vector-effect: non-scaling-stroke; transition: stroke .2s ease; }
.coast-map .lead.is-hot { stroke: var(--senal); stroke-width: 2; }
.coast-map .pin { fill: var(--senal); stroke: var(--mar-deep); stroke-width: 2.5; vector-effect: non-scaling-stroke; transition: r .25s var(--ease-out), fill .2s ease; }
.coast-map .pin.is-hot { r: 9; fill: var(--blanco-marca); }
.coast-map .geo { fill: var(--mar-soft); font-family: var(--sans); font-size: 13px; font-style: italic; }
.coast-map .geo-sea { font-size: 14px; letter-spacing: 0.32em; font-style: normal; text-transform: uppercase; fill: var(--mar-soft); opacity: 0.8; } .coast-map.is-drawn .shore { animation: draw-coast 2s var(--ease-out) both; }
.coast-map.is-drawn .pin { animation: pin-in .5s var(--ease-out) both; }
.coast-map.is-drawn .pin:nth-child(1) { animation-delay: .35s; }
.coast-map.is-drawn .pin:nth-child(2) { animation-delay: .5s; }
.coast-map.is-drawn .pin:nth-child(3) { animation-delay: .6s; }
.coast-map.is-drawn .pin:nth-child(4) { animation-delay: .7s; }
.coast-map.is-drawn .pin:nth-child(5) { animation-delay: .8s; }
.coast-map.is-drawn .pin:nth-child(6) { animation-delay: .95s; }
.coast-map.is-drawn .pin:nth-child(7) { animation-delay: 1.05s; }
.coast-map.is-drawn .pin:nth-child(8) { animation-delay: 1.2s; }
.coast-map.is-drawn .pin:nth-child(9) { animation-delay: 1.4s; }
@keyframes draw-coast { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }
@keyframes pin-in { from { opacity: 0; } to { opacity: 1; } }
.coast-land { background: var(--prau); color: var(--prau-ink); padding-bottom: clamp(56px, 7vw, 96px); }
.stops { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); }
.stop {
display: flex; flex-direction: column; gap: 8px; min-width: 0;
padding: 14px 14px 0 12px;
border-left: 1px solid var(--prau-line);
transition: border-color .2s ease;
}
.stop h3 { font-size: 1.5rem; line-height: 1.05; transition: color .2s ease; }
.stop .beaches { font-weight: 600; font-size: var(--t-sm); line-height: 1.35; }
.stop .note { font-size: 0.875rem; line-height: 1.45; color: var(--prau-soft); }
.stop .more {
display: inline; margin-top: auto; padding: 6px 0 0; white-space: normal; font-size: 0.875rem; line-height: 1.6;
border-bottom: 0; text-decoration: underline; text-decoration-color: var(--senal); text-decoration-thickness: 2px; text-underline-offset: 5px;
}
.stop .more::after { display: inline-block; vertical-align: -2px; margin-left: 6px; }
@media (min-width: 1181px) { .stop .more::after { display: none; } }
.stop.is-hot { border-left-color: var(--senal); }
.stop.is-hot h3 { color: var(--senal); } .band { padding-block: var(--section); }
.band-prau { background: var(--prau); color: var(--prau-ink); }
.coast-band + .band-prau { padding-top: 0; }
.coast-band + .band-prau > .wrap { border-top: 1px solid var(--prau-rule); padding-top: clamp(48px, 6vw, 80px); } .routes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); }
.route { display: grid; grid-template-rows: auto 1fr; background: var(--prau-deep); border-radius: 4px; overflow: hidden; min-width: 0; }
.route-img { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.route-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.route-img:hover img { transform: scale(1.03); }
.route-body { padding: clamp(20px, 2.4vw, 32px); display: flex; flex-direction: column; gap: 14px; }
.route h3 { font-size: var(--t-h3); }
.route h3 a:hover { text-decoration: underline; text-decoration-color: var(--senal); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.route-place { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; font-size: var(--t-sm); color: var(--prau-soft); margin-top: -4px; }
.route-place .waymark { margin-right: 10px; }
.route-place abbr { color: var(--prau-ink); font-weight: 600; margin-right: 0.3em; }
.route-data {
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
border-top: 1px solid var(--prau-rule); border-bottom: 1px solid var(--prau-rule);
}
.route-data > div { padding: 12px 12px 12px 0; min-width: 0; }
.route-data > div + div { padding-left: 12px; border-left: 1px solid var(--prau-rule); }
.route-data dt { font-size: var(--t-cap); color: var(--prau-soft); }
.route-data dd {
font-family: var(--display); font-weight: 600; font-size: 1.6rem; line-height: 1.1;
font-variant-numeric: tabular-nums; color: var(--senal);
overflow-wrap: anywhere;
}
.route-data dd small { display: block; font-family: var(--sans); font-weight: 400; font-size: var(--t-cap); color: var(--prau-soft); }
.route-body > p:last-child { color: var(--prau-ink); opacity: 0.86; font-size: var(--t-sm); max-width: 60ch; }
.parks { margin-top: clamp(48px, 6vw, 72px); }
.parks h3 { font-size: var(--t-h4); margin-bottom: 18px; }
.parks-groups { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 3fr)); gap: 24px 32px; border-top: 1px solid var(--prau-rule); padding-top: 18px; }
.parks h4 { font-family: var(--sans); font-weight: 600; font-size: var(--t-cap); color: var(--prau-soft); line-height: 1.3; margin-bottom: 6px; }
.parks a { display: block; padding: 7px 0; font-weight: 600; }
.parks a:hover { color: var(--senal); } .sec { padding-block: var(--section); }
.museos-layout { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.museos-layout .sec-head { grid-template-columns: 1fr; position: sticky; top: calc(var(--head-h) + 32px); }
.museos-layout .sec-head .more { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 14px; }
.orbayu { font-style: italic; }
.museum-list li + li { border-top: 1px solid var(--rule); }
.museum-list a {
display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 24px; align-items: center;
padding-block: 18px;
}
.museum-list img { width: 168px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; }
.museum-list h3 { font-size: 1.75rem; }
.museum-list .m-place { font-size: var(--t-sm); color: var(--ink-faint); margin: 4px 0 8px; }
.museum-list p { color: var(--ink-soft); font-size: var(--t-sm); max-width: 62ch; }
.museum-list a:hover h3 { text-decoration: underline; text-decoration-color: var(--senal-deep); text-decoration-thickness: 3px; text-underline-offset: 4px; } .sec-paper { background: var(--paper); border-block: 1px solid var(--rule); }
.carta { --carta-cols: 120px minmax(0, 5fr) minmax(0, 7fr) 20px; }
.carta-head {
display: grid; grid-template-columns: var(--carta-cols); column-gap: 28px;
font-size: var(--t-cap); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint);
padding-bottom: 10px; border-bottom: 2px solid var(--ink);
}
.carta-head span:first-child { grid-column: 1 / span 2; }
.carta li { border-bottom: 1px solid var(--rule); }
.carta a {
display: grid; grid-template-columns: var(--carta-cols); column-gap: 28px; align-items: center;
padding-block: 16px;
}
.carta a::after {
content: ""; width: 20px; height: 20px; justify-self: end;
background: var(--ink-faint);
-webkit-mask: var(--i-arrow) center / contain no-repeat;
mask: var(--i-arrow) center / contain no-repeat;
transition: transform .25s var(--ease-out), background-color .2s ease;
}
.carta a:hover::after { transform: translateX(4px); background: var(--ink); }
.carta img { width: 120px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; }
.c-name h3 { font-size: 1.5rem; line-height: 1.05; }
.c-where { font-size: var(--t-sm); color: var(--ink-soft); margin-top: 4px; }
.c-dish { font-family: var(--display); font-weight: 600; font-size: clamp(1.35rem, 1.9vw, 1.8rem); line-height: 1.15; }
.carta a:hover .c-dish { text-decoration: underline; text-decoration-color: var(--senal-deep); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.recipes { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 24px 40px; }
.recipes-head h3 { font-size: var(--t-h4); }
.recipes-head p { color: var(--ink-soft); font-size: var(--t-sm); margin-top: 6px; max-width: 30ch; }
.recipes ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.recipes a { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: center; }
.recipes img { width: 96px; aspect-ratio: 1; object-fit: cover; border-radius: 3px; }
.recipes .r-name { font-family: var(--display); font-weight: 600; font-size: 1.3rem; line-height: 1.05; display: block; }
.recipes .r-sub { display: block; font-size: var(--t-sm); line-height: 1.4; color: var(--ink-soft); margin-top: 4px; }
.recipes a:hover .r-name { text-decoration: underline; text-decoration-color: var(--senal-deep); text-decoration-thickness: 3px; text-underline-offset: 4px; } .calendar { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); border-top: 2px solid var(--ink); }
.month { min-width: 0; padding: 0 10px 16px; border-left: 1px solid var(--rule); min-height: 220px; }
.month:first-child { border-left: 0; padding-left: 0; }
.m-name {
display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px;
font-family: var(--display); font-weight: 600; font-size: 1.15rem; text-transform: capitalize;
padding: 12px 0 14px;
}
.month.is-empty .m-name { color: var(--ink-faint); }
.month.is-now { background: linear-gradient(var(--senal), var(--senal)) top / 100% 5px no-repeat; }
.now-tag {
font-family: var(--sans); font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
background: var(--senal); color: var(--senal-ink); padding: 2px 5px; border-radius: 2px;
}
.events { display: flex; flex-direction: column; gap: 14px; }
.events a { display: block; }
.events .ev-name { display: block; font-weight: 600; font-size: var(--t-sm); line-height: 1.25; }
.events .ev-where { display: block; font-size: var(--t-cap); color: var(--ink-faint); line-height: 1.3; margin-top: 2px; }
.events a:hover .ev-name { text-decoration: underline; text-decoration-color: var(--senal-deep); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.events img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; margin-bottom: 8px; } .site-foot { background: var(--ink); color: var(--prau-ink); padding-block: clamp(48px, 6vw, 80px) 32px; }
.site-foot a:hover { color: var(--senal); }
.news { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 20px 56px; align-items: end; padding-bottom: clamp(40px, 5vw, 64px); border-bottom: 1px solid var(--prau-rule); }
.news h2 { font-size: var(--t-h3); }
.news > div > p { color: var(--prau-soft); margin-top: 12px; max-width: 46ch; }
.news-form { display: grid; gap: 10px; }
.news-form label { font-size: var(--t-sm); color: var(--prau-soft); }
.news-row { display: flex; gap: 8px; }
.news-row input {
flex: 1; min-width: 0;
padding: 14px 14px; border-radius: 4px; border: 1px solid rgba(236, 241, 236, 0.5);
background: rgba(236, 241, 236, 0.06); color: var(--prau-ink);
caret-color: var(--senal);
}
.news-row input::placeholder { color: var(--prau-soft); opacity: 0.85; }
.news-row input:focus { outline: none; border-color: var(--senal); box-shadow: 0 0 0 3px rgba(242, 194, 48, 0.3); }
.news-row button { padding: 0 22px; border-radius: 4px; background: var(--senal); color: var(--senal-ink); font-weight: 600; }
.news-row button:hover { background: var(--senal-deep); }
.news-form .fine { font-size: var(--t-cap); color: var(--prau-soft); }
.news-form .fine a { text-decoration: underline; text-underline-offset: 2px; }
.news-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-msg { font-size: var(--t-sm); color: var(--senal); }
.foot-index { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px 24px; padding-block: 40px; border-bottom: 1px solid var(--prau-rule); }
.foot-index h2 { font-size: 1.15rem; margin-bottom: 10px; color: var(--prau-ink); }
.foot-index a { display: block; padding: 5px 0; font-size: var(--t-sm); color: var(--prau-soft); }
.foot-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding-top: 28px; }
.foot-brand { display: flex; align-items: center; gap: 12px; }
.foot-brand img { width: 30px; height: 30px; }
.foot-brand strong { font-family: var(--display); font-size: 1.35rem; font-weight: 700; }
.foot-brand span { font-size: var(--t-sm); color: var(--prau-soft); }
.foot-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; font-size: var(--t-sm); color: var(--prau-soft); }
.foot-links a { padding-block: 12px; }
.foot-note { margin-top: 24px; font-size: var(--t-cap); color: var(--prau-soft); max-width: 62ch; }
.foot-note a { text-decoration: underline; text-underline-offset: 2px; } @media (min-width: 720px) {
.wrap { padding-left: max(32px, env(safe-area-inset-left, 0px)); padding-right: max(32px, env(safe-area-inset-right, 0px)); }
}
@media (max-width: 1180px) {
.main-nav { display: none; }
.head-tools { margin-left: auto; }
.index-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.quick { display: flex; flex-wrap: wrap; gap: 8px; grid-column: 1 / -1; }
.quick a {
display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px;
font-weight: 600; font-size: var(--t-sm);
background: var(--paper); border: 1px solid var(--rule-strong); border-radius: 3px;
}
.quick a:hover { border-color: var(--ink); }
.calendar { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.month:nth-child(7) { border-left: 0; padding-left: 0; }
.month:nth-child(n + 7) { border-top: 1px solid var(--rule); }
.month { min-height: 0; }
.foot-index { grid-template-columns: repeat(3, minmax(0, 1fr)); } .coast-map .leads { display: none; } .coast-map { aspect-ratio: 1000 / 228; overflow-x: visible; overflow-y: clip; }
.coast-land { padding-top: clamp(16px, 3vw, 28px); }
.stops { display: block; position: relative; }
.stops::before {
content: ""; position: absolute; left: 8px; top: 8px; bottom: 24px; width: 3px;
background: var(--senal); border-radius: 2px;
}
.stop { position: relative; border-left: 0; padding: 0 0 28px 40px; }
.stop::before {
content: ""; position: absolute; left: 0; top: 4px; width: 19px; height: 19px;
border-radius: 50%; background: var(--prau); border: 3px solid var(--senal);
}
.stop:last-child { padding-bottom: 0; }
.stop:last-child::after { content: ""; position: absolute; left: 6px; top: 24px; bottom: -32px; width: 7px; background: var(--prau);
}
.stop .more { margin-top: 2px; }
.parks-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 641px) and (max-width: 1180px) {
.stop { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: 32px; row-gap: 6px; align-items: start; }
.stop h3, .stop .beaches, .stop .more { grid-column: 1; }
.stop .note { grid-column: 2; grid-row: 1 / span 3; font-size: var(--t-sm); padding-top: 4px; max-width: 52ch; }
.stop .more { justify-self: start; margin-top: 4px; }
}
@media (max-width: 980px) {
.hero-grid { grid-template-columns: minmax(0, 1fr); }
.hero h1, .hero-intro, .hero-photo, .signpost { grid-column: 1; }
.hero h1 { max-width: none; }
.hero-photo .frame { aspect-ratio: 3 / 2; }
.signpost { max-width: 460px; padding-bottom: 8px; }
.signpost::before { bottom: 0; }
.coast-map .shore { stroke-width: 3; }
.routes { grid-template-columns: 1fr; }
.museos-layout { grid-template-columns: 1fr; }
.museos-layout .sec-head { position: static; }
.carta { --carta-cols: 104px minmax(0, 1fr) minmax(0, 1fr) 20px; }
.recipes { grid-template-columns: 1fr; }
.news { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
.coast-map .geo { display: none; }
.coast-map .pin { r: 10; stroke-width: 2; }
}
@media (max-width: 640px) {
:root { --head-h: 58px; }
.brand span { font-size: 1.4rem; }
.brand img { width: 30px; height: 30px; }
.head-btn { padding: 8px 10px; }
.head-btn.btn-search .lbl { display: none; }
.index-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sec-head { grid-template-columns: 1fr; }
.sec-head .more { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 12px; }
.hero .lead { font-size: 1.125rem; }
.sign-t { font-size: 1.3rem; }
.coast-map .shore { stroke-width: 5; }
.coast-map .pin { r: 15; }
.route-data { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.route-data > div:nth-child(3) { padding-left: 0; border-left: 0; }
.route-data > div:nth-child(n + 3) { border-top: 1px solid var(--prau-rule); }
.parks-groups { grid-template-columns: 1fr; gap: 20px; }
.museum-list a { grid-template-columns: 104px minmax(0, 1fr); gap: 16px; align-items: start; }
.museum-list img { width: 104px; }
.museum-list h3 { font-size: 1.4rem; }
.carta-head { display: none; }
.carta a { grid-template-columns: 88px minmax(0, 1fr); column-gap: 16px; row-gap: 10px; }
.carta a::after { display: none; }
.carta img { width: 88px; }
.c-dish { grid-column: 1 / -1; font-size: 1.3rem; }
.recipes ul { grid-template-columns: 1fr; }
.calendar { grid-template-columns: 1fr; }
.month, .month:first-child, .month:nth-child(7) {
display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px;
padding: 0; border-left: 0; border-top: 1px solid var(--rule);
}
.month:first-child { border-top: 0; }
.month.is-empty { display: none; }
.month.is-now.is-empty { display: grid; }
.month.is-now { background: linear-gradient(var(--senal), var(--senal)) top / 100% 4px no-repeat; }
.m-name { flex-direction: column; align-items: flex-start; gap: 4px; }
.events { padding-block: 12px 14px; }
.events img { display: none; }
.news-row { flex-direction: column; }
.news-row button { padding: 14px 22px; }
.foot-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
} @media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.route-img img, .sign-plate { transition: none; }
.coast-map.is-drawn .shore, .coast-map.is-drawn .pin { animation: none; }
}  .admin-bar .site-head { top: 32px; }
.admin-bar .museos-layout .sec-head { top: calc(var(--head-h) + 64px); }
@media (max-width: 782px) { .admin-bar .site-head { top: 46px; } }
@media (max-width: 600px) { .admin-bar .site-head { top: 0; } } .form-msg .mc4wp-alert p { margin: 0; }
.form-msg .mc4wp-error { color: #ffb4a8; }