/* Access is a practical reading surface within the existing atlas. */
.access-toolbar { display: flex; align-items: center; gap: 20px; justify-content: space-between; border-block: 1px solid var(--line); padding-block: 16px; margin-block: 24px; }
.access-toolbar p { margin: 0; }
.access-toolbar button { flex: none; }
.access-explainer { color: var(--muted); font-size: 14px; line-height: 1.65; }
.access-jump { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 24px; }
.access-jump a { padding-block: 6px; text-underline-offset: 4px; }
.access-beach { border-top: 1px solid var(--line); padding-block: 20px 16px; scroll-margin-top: 100px; }
.access-beach-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.guide .access-beach h3 { font-size: 24px; margin: 0 0 16px; }
.access-report { border-left: 3px solid var(--line); padding: 10px 16px; background: var(--panel-2); margin-block: 12px; }
.access-report b, .access-report span { display: block; }
.access-report b { font-size: 16px; }
.access-report span { font-size: 13px; color: var(--muted); margin-top: 5px; line-height: 1.5; }
.access-report[data-state="open"], .access-report[data-state="spaces"] { border-color: var(--good); }
.access-report[data-state="full"] { border-color: var(--poor); }
.access-report[data-state="seasonal"] { border-color: var(--mares); }
.access-route { margin-block: 20px; max-width: 850px; }
.access-route > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 20px; margin-top: 12px; font-size: 14px; line-height: 1.65; }
.access-route dt { color: var(--muted); }
.access-route dd { margin: 0; }
.access-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; font-size: 14px; }
.access-faq { border-top: 1px solid var(--line); padding-block: 16px; }
.access-faq summary { cursor: pointer; font-weight: 500; line-height: 1.5; }
.access-faq p { padding-left: 18px; font-size: 15px; line-height: 1.65; }
.access-beach:target { animation: access-arrive 1s ease-out; }
@keyframes access-arrive { from { background: var(--sea-soft); } to { background: transparent; } }
@media (max-width: 600px) {
  .access-toolbar { align-items: flex-start; flex-direction: column; gap: 12px; }
  .access-route > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .access-jump { gap: 8px 18px; }
}
@media (prefers-reduced-motion: reduce) { .access-beach:target { animation: none; } }