.home{-webkit-user-select:none;user-select:none;touch-action:manipulation;position:relative;min-height:calc(100svh - var(--home-nav-height,0px));padding-top:var(--home-nav-height,0px);display:grid;place-items:center;isolation:isolate;overflow:hidden}.home-controls{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;width:100%;margin:72px 0;padding-bottom:env(safe-area-inset-bottom)}.home-network{padding-bottom:env(safe-area-inset-bottom)}.bounce-stage{position:fixed;inset:0;overflow:hidden;pointer-events:none}.wordmark{position:absolute;left:0;top:0;width:max-content;min-height:0;appearance:none;border:0;padding:0;background:none;color:var(--san-buena-yellow);text-align:left;font-weight:400;pointer-events:auto;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;font-family:SanBuena,serif;font-size:clamp(5rem,12vw,12rem);line-height:1.05;will-change:transform;visibility:hidden}/* Stacked wordmark on the grid: each line box is a whole number of 16.8px rows (12px text at 1.4), 5 rows at 5rem up to 12 at 12rem. */
@supports (width:round(down,1px,1px)){.wordmark{font-size:calc(round(down,clamp(5rem,12vw,12rem)*1.05 + .5px,16.8px)/1.05)}}
.wordmark::selection{background:transparent}.wordmark:hover{background:none;color:var(--san-buena-yellow)}.wordmark:focus-visible{outline-offset:-4px}.wordmark:disabled{cursor:default;opacity:1}
/* Score and reset: one 12px IBM Plex Mono line at the bottom-left, mirroring the links at the top-left (same 14px edge, text 16.6px from the screen edge); reset is an action, so [ reset ], with a 44px tap box. */
.logo-game{position:fixed;left:14px;bottom:calc(2.4px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:3ch;z-index:3;pointer-events:none;user-select:none;font:400 12px/1.4 var(--mono)}.logo-score{margin:0}.logo-reset{display:block;min-width:44px;min-height:44px;padding:0;border:0;background:none;text-align:left;font:inherit;pointer-events:auto}.logo-reset::before{content:'[ '}.logo-reset::after{content:' ]'}.logo-reset:hover{background:none;color:inherit}
/* Functional overlays remain instruments, with no decorative frame. */
.home-network{position:sticky;top:0;z-index:5;padding:14px;pointer-events:none}
.home-network .network{margin:0;padding:0;max-width:none;font:400 12px/1.4 var(--mono);pointer-events:none}
.home-network .network a{display:inline-block;margin-right:1ch;pointer-events:auto}
.home-network .network p{margin:0 0 8px}
/* Navigation's bottom padding supplies a 14px gap after the last wrapped link. */
/* Panels sit on the character grid: 2ch padding, 52ch content (SWELL 36ch + 4x4ch gaps, TIDE 34ch + 3x6ch), 2ch scrollbar lane (iPhone's overlay scrollbar plus a clear character). */
.panel{font-size:12px;position:fixed;z-index:4;top:var(--home-nav-height,76px);left:0;right:0;bottom:auto;margin:0 auto;padding:2ch;width:min(calc(58ch + 2px),calc(100vw - 16px));height:min(740px,calc(100dvh - var(--home-nav-height,76px) - 14px - env(safe-area-inset-bottom)));max-height:calc(100dvh - var(--home-nav-height,76px) - 14px - env(safe-area-inset-bottom));color:var(--paper);background:var(--ink);border:1px solid var(--line);border-radius:0;overflow:hidden}
.panel[open]{display:flex;flex-direction:column}.panel-backdrop{position:fixed;z-index:3;inset:var(--home-nav-height,76px) 0 0;background:transparent}body:has(dialog[open]){overflow:hidden}
/* Homepages never scroll; only a panel's own scroll region moves (iPhone included). */
html:has(.home),html:has(.home) body{overflow:hidden;overscroll-behavior:none}
.panel-header{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:flex-start;gap:1ch;padding:0 8ch 0 0;min-height:44px;flex-shrink:0}.panel-header>div:first-child{min-width:0}.panel-title{font:inherit;margin:8px 0 0}.panel-subtitle{font-size:inherit;color:inherit;margin:0}.icon-button{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0;color:inherit}.icon-button:hover{background:none;color:var(--paper)}.icon-button:focus-visible{outline-offset:-4px}
.panel-scroll{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:0 2ch 0 0;scrollbar-width:thin;scrollbar-color:var(--paper) var(--ink)}.panel-scroll:focus-visible{outline-offset:-4px}.panel-footer{flex-shrink:1;max-height:25%;overflow:auto;padding:0;color:inherit;font-size:inherit}.panel-footer p{margin:0 0 12px}.message{padding:0 0}.retry{color:inherit}.loading,.notice{color:inherit;font-size:inherit;margin:16px 0}
.tide-day,.swell-day{margin:0 0 1em}.tide-day h3,.swell-day h2{margin:0 0 1em;text-transform:uppercase}.tide-event{padding:4px 0;font-size:inherit;font-variant-numeric:tabular-nums}.tide-type{display:inline-block;min-width:11ch;color:inherit}.tide-event strong{font:inherit;display:inline-block;margin-left:1ch}.data-notes{margin-top:1em;color:inherit;font-size:inherit}.data-notes details{margin-top:1em}.data-notes summary{min-height:44px;padding:8px 0;cursor:pointer}.notes{padding-top:16px}
.clothing-object,.teaser-object{padding:8px 0}.clothing-object h3,.teaser-object h3{font:inherit;margin:0 0 20px}.object-image{margin:1em 0}.object-image img{display:block;width:100%;height:auto;object-fit:contain}.image-pending,.teaser-note{color:inherit;font-size:inherit;margin:1em 0}

@media(prefers-reduced-motion:reduce){.wordmark{will-change:auto}}
/* The × (IBM Plex Mono U+00D7) sits in the last content column, on the header line; the 44px tap box extends left of it. */
.panel>.icon-button[data-close]{position:absolute;top:2ch;right:2ch;width:44px;justify-content:flex-end;padding-right:2ch;font-family:var(--mono)}
/* Safari marks autofocus on open as focus-visible: underline like a text link, not a box on every tap. */
.icon-button[data-close]:focus-visible{outline:none}html[data-input=key] .icon-button[data-close]:focus-visible{padding-right:1ch}html[data-input=key] .icon-button[data-close]:focus-visible::before{content:'['}html[data-input=key] .icon-button[data-close]:focus-visible::after{content:']'}
.wordmark:hover{text-decoration:none}

.tide-event{font:inherit;padding:0}.panel-footer{margin-top:1em}.data-notes,.panel-footer p{max-width:100ch}.panel-scroll p{max-width:100ch}.panel-title{margin:0}.panel-header{align-items:center}

/* Shared content tracks use the available field with equal gaps. */
#swell-body{scrollbar-gutter:stable}
#swell-body::-webkit-scrollbar{width:4px}#swell-body::-webkit-scrollbar-thumb{background:var(--muted)}
.swell-forecast{padding-right:0}
.swell-week{display:grid;grid-template-columns:minmax(max-content,9ch) minmax(2px,4ch) minmax(max-content,11ch) minmax(2px,4ch) minmax(max-content,5ch) minmax(2px,4ch) minmax(max-content,5ch) minmax(2px,4ch) minmax(max-content,6ch);justify-content:space-between;width:100%;font:inherit;font-variant-numeric:tabular-nums}.swell-week thead,.swell-day{display:grid;grid-template-columns:subgrid;grid-column:1/-1;margin:0}.swell-week tr{display:contents}.swell-week th,.swell-week td{font-weight:400;text-align:right;padding:0;line-height:22px;white-space:nowrap}.swell-week th[scope=rowgroup]{grid-column:1;grid-row:span 3}.swell-week thead th:nth-child(2),.swell-reading th[scope=row]{grid-column:3}.swell-week thead th:nth-child(3),.swell-reading td:nth-last-child(3){grid-column:5}.swell-week thead th:nth-child(4),.swell-reading td:nth-last-child(2){grid-column:7}.swell-week thead th:nth-child(5),.swell-reading td:last-child{grid-column:9}.swell-reading th{white-space:nowrap}.swell-week thead{position:sticky;top:0;background:var(--ink);color:var(--muted)}.swell-week th[scope=rowgroup]{text-align:left;vertical-align:top;padding-top:8px}.swell-largest{color:var(--san-buena-yellow)}
.buoy-observations{margin:24px 0}.buoy-observations h3{margin-bottom:12px;color:var(--muted)}.buoy-reading{margin-bottom:12px}.buoy-reading p{margin:0}.buoy-reading [data-reading]{margin-top:.5lh;font-variant-numeric:tabular-nums;display:grid;grid-template-columns:20ch 6ch auto;column-gap:1ch}.buoy-reading [data-reading] span{justify-self:end}.buoy-reading [data-reading] small{grid-column:1/-1}.buoy-reading small{display:block;font:inherit;color:var(--muted)}.reading-source{color:var(--muted);margin:12px 0}.buoy-time{color:var(--muted)}
#swell-body:not(:has(.swell-day)) #swell-message{min-height:160px;display:flex;flex-direction:column;justify-content:center}

.swell-bearing{display:inline-block;width:3ch;text-align:left}.swell-degrees{display:inline-block;width:7ch;text-align:right}

.swell-week thead th:first-child{text-align:left}.swell-day tr:first-child>*{padding-top:8px}

#swell-provenance{color:var(--muted);margin:0;overflow-wrap:normal}

/* Tide keeps the same compact readings and one persistent scroll region as Swell. */
#tide-scroll{overflow-x:hidden;overflow-y:auto;scrollbar-gutter:stable;padding-right:2ch}
#tide-scroll::-webkit-scrollbar{width:4px}#tide-scroll::-webkit-scrollbar-thumb{background:var(--muted)}
#tide-panel .panel-header{padding-bottom:8px}
#tide-subtitle{color:var(--muted);margin:0}
.tide-columns,.tide-day{display:grid;grid-template-columns:9ch minmax(1ch,6ch) 10ch minmax(1ch,6ch) 8ch minmax(1ch,6ch) 7ch;justify-content:space-between;line-height:22px;font-variant-numeric:tabular-nums}
.tide-columns{position:sticky;top:0;background:var(--ink);color:var(--muted)}
.tide-event{display:grid;grid-template-columns:subgrid;grid-column:2/-1}.tide-event>:nth-child(1){grid-column:2}.tide-event>:nth-child(2){grid-column:4}.tide-event>:nth-child(3){grid-column:6}.tide-columns>:nth-child(2){grid-column:3}.tide-columns>:nth-child(3){grid-column:5}.tide-columns>:nth-child(4){grid-column:7}.tide-past{color:var(--muted)}
.tide-columns span:nth-child(n+3),.tide-event>span:nth-child(2),.tide-event strong{text-align:right;white-space:nowrap}
#tide-body .tide-day{margin:0;padding-top:8px}
#tide-body .tide-day h3{font:inherit;text-transform:none;margin:0;grid-column:1;grid-row:span 12}
#tide-body .tide-type{min-width:0}
#tide-body .tide-event strong{margin:0;font-weight:400}
#tide-scroll .panel-footer{max-height:none;overflow:visible;color:var(--muted);margin-top:16px}