/* Jersey 25 (SIL Open Font License, see jersey-25-LICENSE.txt), self-hosted, Latin subset, for the brand only. */
@font-face{font-family:"Jersey 25";font-style:normal;font-weight:400;font-display:swap;src:url("/jersey-25.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{color-scheme:light;--bg:#f3f6f7;--surface:#ffffff;--border:#d8e0e5;--text:#15232b;--muted:#5d6f7a;--accent:#137a62;--stage:#0b1216;--stage-text:#c6d5df;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:16px;background:var(--bg);color:var(--text)}
html{scroll-behavior:smooth}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}*{box-sizing:border-box}body{margin:0}a{color:inherit;text-underline-offset:4px}a:hover{color:var(--accent)}a:focus-visible,button:focus-visible,video:focus-visible,iframe:focus-visible{outline:3px solid var(--accent);outline-offset:4px}main{padding:28px 32px 32px;max-width:2000px;margin:auto}.camera-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.camera{min-width:0;background:var(--surface);border:1px solid var(--border);border-radius:0;overflow:hidden}.camera-screen{position:relative;aspect-ratio:16/9;background:var(--stage);overflow:hidden;touch-action:manipulation}.camera-screen video,.camera-screen iframe,.youtube-player{display:block;border:0;width:100%;height:100%;position:absolute;inset:0}.camera-screen video{object-fit:contain}.screen-message{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:12px;padding:32px;color:var(--stage-text);font-size:.9375rem;text-align:center;pointer-events:none}.screen-message[hidden]{display:none}footer{border-top:1px solid var(--border);padding:22px 32px;display:flex;justify-content:space-between;gap:14px 30px;color:var(--muted);font-size:.875rem;line-height:1.6;flex-wrap:wrap}footer a{color:var(--text)}@media(min-width:1800px){.camera-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:1100px){.camera-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:650px){main{padding:24px 14px}.camera-grid{grid-template-columns:1fr;gap:18px}footer{padding:20px 18px}}

.mjpeg-stream{display:block;width:100%;height:100%;object-fit:contain}.mjpeg-stream.is-empty{visibility:hidden}.camera[data-type="youtube"] .camera-screen{min-height:200px}
.camera-screen::before{content:"";position:absolute;inset:0;background:url("/turtle.png") center/72px auto no-repeat;opacity:.12;pointer-events:none}.camera-screen.is-live::before,.camera[data-type="youtube"] .camera-screen::before{display:none}

.camera-coasts{display:grid;gap:36px}.coast-heading{display:flex;align-items:baseline;gap:12px;margin:0 0 14px}.coast-heading h2{margin:0;font-size:1.4rem;font-weight:700;letter-spacing:-.025em;transition:color .3s}.coast-heading h2.is-highlighted{animation:heading-arrive 1.4s ease-out}@keyframes heading-arrive{0%,45%{color:var(--accent)}100%{color:var(--text)}}@media(prefers-reduced-motion:reduce){.coast-heading h2.is-highlighted{animation:none}}
.youtube-hover-surface{position:absolute;inset:0;z-index:1;background:transparent}

.camera:is(:fullscreen,:-webkit-full-screen,.is-expanded){display:flex;flex-direction:column;width:100vw;height:100vh;height:100dvh;border:0;border-radius:0;background:var(--surface);touch-action:pinch-zoom}.camera:is(:fullscreen,:-webkit-full-screen)::backdrop{background:var(--surface)}.camera:is(:fullscreen,:-webkit-full-screen,.is-expanded) .camera-screen{flex:1;min-height:0;aspect-ratio:auto;background:var(--surface)}.camera:is(:fullscreen,:-webkit-full-screen,.is-expanded) .mjpeg-stream{position:absolute;inset:0}.camera.is-expanded{position:fixed;inset:0;z-index:1000}.camera-expanded{overflow:hidden}

.site-header{max-width:2000px;margin:auto;padding:20px 32px 0}.header-menu{display:flex;align-items:center;justify-content:space-between;gap:16px}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:"Jersey 25",Inter,ui-sans-serif,sans-serif;font-weight:400;font-size:2.1rem;line-height:1;letter-spacing:.01em}.brand img{display:block;height:40px;width:auto;border-radius:6px}/* Region selector: the browser's own list, drawn as a quiet text control that belongs to the strip beside the coast links. */
.region-control{position:relative;display:flex;align-items:center}.region-sizer{position:absolute;left:0;top:0;visibility:hidden;white-space:nowrap;font-size:.9375rem;font-weight:600;line-height:1.2;pointer-events:none}@media(pointer:coarse){.region-sizer{font-size:1rem}}.region-control select{appearance:none;-webkit-appearance:none;font:inherit;font-size:.9375rem;font-weight:600;line-height:1.2;color:var(--text);background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d6f7a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center/14px 14px;border:0;border-radius:6px;min-height:40px;padding:0 30px 0 10px;max-width:100%;cursor:pointer;transition:background-color .15s}.region-control select:hover{background-color:#0000000a}.region-control select:active{background-color:#00000014}.region-control select:focus-visible{outline:2px solid var(--accent);outline-offset:0}@media(pointer:coarse){.region-control select{min-height:44px;font-size:1rem}}.coast-menu{position:sticky;top:0;z-index:30;background:var(--bg);transition:box-shadow .2s}.coast-menu.is-stuck{box-shadow:0 8px 18px -14px #0004}.coast-menu-inner{display:flex;align-items:center;gap:12px;max-width:2000px;margin:auto;padding:6px 32px}/* One row at every width: the links scroll sideways, with a fade on whichever edge hides more. */
.coast-links{--fade-l:0px;--fade-r:0px;display:flex;gap:0 20px;flex-wrap:nowrap;flex:1 1 auto;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:0 2px;mask-image:linear-gradient(90deg,transparent,#000 var(--fade-l),#000 calc(100% - var(--fade-r)),transparent)}.coast-links::-webkit-scrollbar{display:none}.coast-links.fade-left{--fade-l:28px}.coast-links.fade-right{--fade-r:28px}.coast-menu .region-control{flex-shrink:0}
.site-search{position:relative;display:flex;align-items:center;flex-shrink:0;margin-left:auto}.site-search>svg{position:absolute;left:10px;width:16px;height:16px;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;pointer-events:none}.site-search input{appearance:none;-webkit-appearance:none;width:170px;min-height:36px;padding:0 10px 0 32px;border:1px solid var(--border);border-radius:6px;background:var(--surface);font:inherit;font-size:.9375rem;color:var(--text);transition:border-color .15s,width .2s}.site-search input::placeholder{color:var(--muted)}.site-search input:hover{border-color:#aebbc4}.site-search input:focus{width:260px;outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}.site-search input::-webkit-search-cancel-button{-webkit-appearance:none}.search-results{position:absolute;top:calc(100% + 6px);right:0;z-index:40;width:320px;max-height:60vh;overflow-y:auto;margin:0;padding:6px;list-style:none;background:var(--surface);border:1px solid var(--border);border-radius:8px;box-shadow:0 12px 32px -12px #0004}.search-results a{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:8px 10px;border-radius:6px;color:var(--text);text-decoration:none}.search-results a:hover,.search-results [aria-selected="true"] a{background:#0000000a}.search-name{font-weight:600;font-size:.9375rem}.search-where{font-size:.8125rem;color:var(--muted)}.search-empty{padding:10px;font-size:.9375rem;color:var(--muted)}.search-open{display:none}.coast-links a{display:flex;align-items:center;min-height:40px;padding:0 2px;text-decoration:none;font-size:.9375rem;font-weight:500;color:var(--muted);white-space:nowrap;box-shadow:inset 0 -2px transparent;transition:color .15s,box-shadow .15s}.coast-links a:hover{color:var(--accent)}.coast-links a[aria-current]{color:var(--text);font-weight:700;box-shadow:inset 0 -2px var(--accent)}/* One turtle. The strip's mark sits exactly over the header turtle at the top of the page and shrinks
   into its slot as the header scrolls away; the slot and the links move with the scroll (see app.js).
   Without that script (reduced motion) the header turtle stays and the mark fades in when stuck. */
.coast-menu-inner{position:relative}.coast-slot{flex-shrink:0;width:0;margin-right:-12px}/* Laid out at the header size and scaled down, so the strip shows a crisp downscale rather than an enlarged raster. */
.coast-menu .coast-home{position:absolute;left:32px;top:calc(50% - 12px);display:block;width:60px;height:40px;padding:0;opacity:0;transform:scale(.6);transform-origin:0 0;transition:opacity .2s ease;pointer-events:none}.coast-menu .coast-home img{display:block;width:60px;height:40px}.coast-menu.is-stuck .coast-slot{width:36px;margin-right:4px}.coast-menu.is-stuck .coast-home{opacity:1;pointer-events:auto}html.turtle-travel .brand img{visibility:hidden}html.turtle-travel .coast-menu .coast-home{left:0;top:0;opacity:1;transition:none;pointer-events:auto;will-change:transform}html.turtle-travel .coast-slot{transition:none}.nav-pick{display:none}.coast-section,.camera{scroll-margin-top:calc(var(--strip-height,52px) + 12px)}.camera.is-highlighted{animation:card-arrive 1.8s ease-out}@keyframes card-arrive{0%,40%{box-shadow:0 0 0 3px var(--accent)}100%{box-shadow:0 0 0 3px transparent}}@media(prefers-reduced-motion:reduce){.camera.is-highlighted{animation:none;box-shadow:0 0 0 3px var(--accent)}}@media(pointer:coarse){.coast-links a{min-height:44px}}@media(max-width:650px){.coast-menu .coast-home{left:14px}.coast-slot{margin-right:-10px}.site-header{padding:16px 14px 0}.brand{font-size:1.75rem;gap:8px}.brand img{height:32px}.coast-menu-inner{padding:4px 14px;gap:10px}.coast-links,.coast-menu .region-control,.site-search{display:none}.search-open{display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;margin-left:auto;padding:0;border:0;border-radius:6px;background:transparent;color:var(--muted);cursor:pointer}.search-open svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}.search-open:active{background:#00000014}.search-open:focus-visible{outline:2px solid var(--accent);outline-offset:0}.nav-pick{display:flex;align-items:center;gap:4px;min-width:0;min-height:44px;padding:0 6px 0 8px;border:0;border-radius:6px;background:transparent;font:inherit;font-size:1rem;text-align:left;cursor:pointer}.nav-pick span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nav-pick svg{flex-shrink:0;width:18px;height:18px;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.nav-pick-region{flex:0 1 auto;font-weight:500;color:var(--muted)}.nav-pick-coast{flex:0 1 auto;font-weight:700;color:var(--text)}.nav-pick:active{background:#00000014}.nav-pick:focus-visible{outline:2px solid var(--accent);outline-offset:0}}
/* Phone navigation sheet: one plain list, regions or coasts, with the current entry marked. */
.nav-sheet{position:fixed;inset:auto 0 0 0;width:100%;max-width:100%;max-height:85dvh;margin:0;padding:0;border:0;border-radius:12px 12px 0 0;background:var(--surface);color:var(--text);box-shadow:0 -12px 40px #0003;overflow:hidden}.nav-sheet::backdrop{background:#0c141a66}.nav-sheet-inner{display:flex;flex-direction:column;max-height:85dvh}.nav-sheet-head{display:flex;align-items:center;justify-content:space-between;padding:12px 8px 4px 20px}.nav-sheet h2{margin:0;font-size:.8125rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}.nav-sheet-close{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:6px;background:transparent;color:var(--muted);cursor:pointer}.nav-sheet-close svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}.nav-list{list-style:none;margin:0;padding:4px 12px max(16px,env(safe-area-inset-bottom));overflow-y:auto}.nav-list a{display:flex;align-items:center;min-height:48px;padding:0 8px;border-radius:6px;color:var(--text);text-decoration:none;font-size:1.0625rem}.nav-list a:active{background:#00000010}.nav-list a[aria-current]{font-weight:700;color:var(--accent)}.nav-sheet.is-search{inset:0 0 auto 0;max-height:100dvh;border-radius:0 0 12px 12px;padding-top:env(safe-area-inset-top)}.nav-sheet-search{position:relative;display:flex;align-items:center;padding:4px 20px 10px}.nav-sheet-search svg{position:absolute;left:32px;width:18px;height:18px;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;pointer-events:none}.nav-sheet-search input{appearance:none;-webkit-appearance:none;width:100%;min-height:48px;padding:0 12px 0 42px;border:1px solid var(--border);border-radius:8px;background:var(--surface);font:inherit;font-size:1.0625rem;color:var(--text)}.nav-sheet-search input:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}.nav-sheet-search input::-webkit-search-cancel-button{-webkit-appearance:none}.nav-sheet.is-search .nav-list a{flex-direction:column;align-items:flex-start;gap:2px;min-height:56px;justify-content:center}.nav-sheet.is-search .search-name{font-weight:600}.nav-sheet.is-search .search-where{font-size:.875rem;color:var(--muted)}.nav-list a:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}body.sheet-open{overflow:hidden}

.source-only{flex-direction:column;pointer-events:auto}.source-only p{margin:0;line-height:1.5}.source-only a{display:inline-flex;align-items:center;min-height:44px;padding:10px 16px;border:1px solid #ffffff33;border-radius:6px;color:#9fe6cf;text-decoration:none}.source-only a:hover{background:#ffffff14;color:#c9f4e6}

/* Stable two-line footer: title, then status, with the favourite star spanning both lines at the
   right. The star's target overlaps the padding, so the footer keeps its height. Playback controls
   live on the picture. */
.camera-information{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:8px;row-gap:3px;align-items:center;padding:12px 12px 11px}
.camera-information h3,.camera-information .camera-text{grid-column:1}
.favourite-toggle{grid-column:2;grid-row:1/3;display:grid;place-items:center;width:36px;height:36px;margin:-4px -8px -4px 0;padding:0;border:0;border-radius:6px;background:transparent;color:var(--muted);cursor:pointer;touch-action:manipulation}
.favourite-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.favourite-toggle:hover,.favourite-toggle[aria-pressed="true"]{color:var(--accent)}
.favourite-toggle[aria-pressed="true"] svg{fill:currentColor}
.favourite-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(pointer:coarse){.favourite-toggle{width:44px;height:44px;margin:-8px -12px -8px 0}}
.camera h3{min-width:0;margin:0;font-size:.9375rem;font-weight:600;line-height:22px}
.camera-title-link{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-decoration:none}
.camera-title-link:hover{text-decoration:underline}
.camera-text{display:flex;align-items:center;gap:8px;min-width:0;min-height:18px;overflow:hidden}
.status{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.6875rem;line-height:18px;color:var(--muted)}
.status[data-state="playing"]::before{content:"";display:inline-block;width:5px;height:5px;margin-right:6px;vertical-align:2px;border-radius:50%;background:#2f9f7f}
.status[data-state="error"]{color:#b45a12}
.camera-title-link:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* One control cluster per tile, bottom-right of the picture, identical for video, YouTube and images.
   It appears on hover or keyboard focus, or on touch screens when the picture is tapped. */
/* The cluster is inset from the rendered picture, not the stage: app.js measures any letterbox. */
.player-controls{position:absolute;z-index:4;right:calc(max(12px,env(safe-area-inset-right)) + var(--letterbox-x,0px));bottom:calc(max(12px,env(safe-area-inset-bottom)) + var(--letterbox-y,0px));display:flex;gap:6px;opacity:0;transition:opacity .15s}
.player-controls button{display:grid;place-items:center;width:40px;height:38px;padding:0;border:1px solid #ffffff40;border-radius:6px;background:#0b1216d9;color:#fff;cursor:pointer;touch-action:manipulation}
.player-controls button:hover{background:#22483f}
.player-controls button:disabled{opacity:.4;cursor:wait}
.player-controls svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.player-controls button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(hover:hover){.camera-screen:hover .player-controls,.camera-screen:focus-within .player-controls,.camera:is(:fullscreen,:-webkit-full-screen,.is-expanded) .player-controls{opacity:1}}
/* Touch screens: hidden and untappable until the picture is tapped (see app.js), so nothing covers the view. */
@media(hover:none){.player-controls{pointer-events:none}.camera-screen.controls-visible .player-controls{opacity:1;pointer-events:auto}}
@media(pointer:coarse){.player-controls button{width:44px;height:44px}}
@media(prefers-reduced-motion:reduce){.player-controls{transition:none}}

.camera:is(:fullscreen,:-webkit-full-screen,.is-expanded) .camera-information{flex-shrink:0;padding-bottom:max(8px,env(safe-area-inset-bottom));padding-right:max(12px,env(safe-area-inset-right));padding-left:max(12px,env(safe-area-inset-left))}

/* Landscape touch fullscreen is picture-first: the footer is hidden and the control cluster remains. */
@media (orientation:landscape) and (hover:none) and (pointer:coarse){
  .camera:is(:fullscreen,:-webkit-full-screen,.is-expanded) .camera-information{display:none}
}

.camera-screen.has-poster video{opacity:.6}.camera[data-type="youtube"] .camera-screen{background-size:cover;background-position:center;background-repeat:no-repeat}

/* Favourites wall: the region beside each coast heading, a card un-starred in place, the empty wall,
   and the confirmation shown after a star is pressed. The phone coast button hides on an empty wall. */
.coast-region{color:var(--muted);font-size:.9375rem;font-weight:500}
.camera.is-unfavourited{opacity:.45;transition:opacity .2s}
.wall-empty{max-width:44ch;margin:48px auto;text-align:center;line-height:1.6;color:var(--muted)}.wall-empty a{color:var(--accent)}
.nav-pick[hidden]{display:none}
.toast{position:fixed;left:50%;bottom:max(20px,env(safe-area-inset-bottom));z-index:1100;max-width:calc(100% - 32px);padding:10px 16px;border-radius:8px;background:var(--stage);color:#fff;font-size:.9375rem;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 8px 24px #0004;opacity:0;visibility:hidden;transform:translate(-50%,8px);transition:opacity .2s,transform .2s,visibility .2s}
.toast.is-visible{opacity:1;visibility:visible;transform:translate(-50%,0)}
.toast a{color:#9fe6cf}
@media(prefers-reduced-motion:reduce){.camera.is-unfavourited,.toast{transition:none}}