/* Commissioned full-viewport edition: a fixed dark field with shared typography. */
body:has(.tide-pool) { margin: 0; background: #0a0a0a; }
.page-container:has(.tide-pool) { max-width: none; padding: 0; }
body:has(.tide-pool) .theme-toggle, body:has(.tide-pool) .theme-preferences { display: none; }
.tide-pool { position: relative; height: 100svh; min-height: 580px; overflow: hidden; color: #e5e5e5; --site-text: #e5e5e5; --site-border: #48444b; --site-link: #d4b9df; }
.tide-heading { position: absolute; z-index: 2; top: max(24px, env(safe-area-inset-top)); left: clamp(20px, 4vw, 64px); pointer-events: none; }
.tide-exit { pointer-events: auto; display: inline-flex; min-height: 44px; align-items: center; font-size: .8rem; }
.tide-pool a { color: #d3cbd6; text-underline-offset: .3em; text-decoration-color: #a58aad; }
.tide-heading h1 { margin: .45rem 0 .55rem; font: 400 clamp(2.6rem, 5.4vw, 5.7rem)/1.05 var(--site-font-display); letter-spacing: -.02em; }
.tide-heading p { margin: 0; color: #b0a9b5; font-size: .85rem; }
.tide-figure { position: absolute; inset: 0; margin: 0; }
.tide-stage { width: 100%; height: 100%; background: #0a0a0a; }
.tide-stage canvas, .tide-still { display: block; width: 100%; height: 100%; }
.tide-stage canvas { position: absolute; inset: 0; touch-action: pan-y; cursor: crosshair; }
.tide-stage [hidden] { display: none; }
.tide-stage canvas:focus-visible { outline: 2px solid #d4b9df; outline-offset: -7px; }
.tide-figure figcaption { position: absolute; bottom: 186px; left: 20px; right: 20px; text-align: center; color: #f0e7f3; font-size: clamp(.9rem, 1.5vw, 1.15rem); pointer-events: none; text-shadow: 0 2px 8px #000; }
.tide-figure figcaption span { display: block; color: #aaa1af; margin-top: .4rem; font-size: .78rem; }
.tide-controls { position: absolute; z-index: 2; left: 50%; bottom: max(35px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(560px, calc(100% - 40px)); }
.tide-controls button, #tide-describe { min-height: 46px; padding: .6rem .9rem; color: #ddd6e1; background: #0d0b10e8; border: 1px solid #48414d; font: inherit; font-size: .8rem; cursor: pointer; border-radius: 0; }
.tide-controls button:hover:not(:disabled), #tide-describe:hover { background: #28222e; }
.tide-pool :is(button, a, summary):focus-visible { outline: 2px solid #d4b9df; outline-offset: 3px; }
.tide-controls button:disabled, #tide-describe:disabled { opacity: .45; cursor: default; }
.tide-offering { display: flex; gap: .7rem; }
.tide-materials { display: flex; flex: 1; min-width: 0; }
.tide-materials button { display: flex; justify-content: center; align-items: center; gap: .5rem; flex: 1; }
.tide-materials button + button { border-left: 0; }
.tide-materials button[aria-pressed="true"] { color: #fff; box-shadow: inset 0 -2px #d4b9df; background: #211b28; }
.tide-swatch { width: 9px; height: 9px; flex-shrink: 0; background: #a6a4a6; }
.tide-shell { background: #e1d8e3; transform: rotate(30deg); }
.tide-brass { background: #b59b70; border-radius: 50%; }
#tide-drop { border-color: #c5a5d1; background: #d4b9df; color: #161019; min-width: 135px; }
#tide-drop:hover:not(:disabled) { background: #e7d1ef; }
.tide-playback { display: flex; margin-top: .6rem; gap: .35rem; }
.tide-playback button { border-color: transparent; background: #0b090de0; color: #b5abbc; }
.tide-playback button:last-child { margin-left: auto; }
.tide-playback button[aria-pressed="true"] { text-decoration: underline; text-underline-offset: .3em; color: #fff; }
.tide-status { position: absolute; left: 20px; right: 20px; bottom: 146px; text-align: center; margin: 0; font-size: .72rem; color: #c8b9ce; pointer-events: none; }
.tide-notes { position: absolute; z-index: 4; top: 30px; right: clamp(20px, 4vw, 64px); max-width: min(380px, calc(100% - 40px)); font-size: .8rem; color: #c7bdce; }
.tide-notes summary { display: block; min-height: 44px; padding: .7rem 0; box-sizing: border-box; cursor: pointer; text-align: right; }
.tide-notes[open] { padding: 0 1rem 1rem; background: #121016f5; border: 1px solid #48414d; max-height: calc(100svh - 70px); overflow-y: auto; }
.tide-notes[open] summary { margin-bottom: 1rem; }
.tide-notes p { line-height: 1.7; margin: .7rem 0; }
.tide-notes summary::after { content: ' +'; }
.tide-notes[open] summary::after { content: ' −'; }
#tide-description:empty { display: none; }
.tide-pool noscript { position: absolute; left: 20px; bottom: 240px; max-width: 300px; }
@media (max-width: 600px) {
 .tide-heading { top: max(12px, env(safe-area-inset-top)); }
 .tide-heading h1 { margin-top: .35rem; font-size: 2.8rem; }
 .tide-heading p { font-size: .75rem; }
 .tide-notes { top: 20px; right: 20px; }
 .tide-notes[open] { top: 12px; }
 .tide-controls { width: calc(100% - 28px); bottom: max(18px, env(safe-area-inset-bottom)); }
 .tide-materials button { padding: .5rem .4rem; font-size: .72rem; gap: .3rem; }
 #tide-drop { min-width: 105px; padding-inline: .6rem; font-size: .75rem; }
 .tide-playback button { font-size: .72rem; padding-inline: .6rem; }
 .tide-figure figcaption { bottom: 171px; font-size: .9rem; }
 .tide-status { bottom: 132px; font-size: .65rem; }
}
@media (max-height: 600px) and (min-width: 601px) {
 .tide-pool { min-height: 420px; }
 .tide-heading h1 { font-size: 2.5rem; }
 .tide-heading p { display: none; }
 .tide-controls { bottom: 8px; }
 .tide-figure figcaption { bottom: 148px; }
 .tide-status { bottom: 120px; }
}