/* Drawn scenes: the pier through time (ps2-) and the landing stage cross-section (td2-). */

/* ---------- the pier through time ---------- */
.ps2 { overflow: hidden; }
.ps2-g { transition: opacity .7s ease; }
.ps2-stop { transition: stop-color 1.2s ease; }
.ps2-clouds { transition: opacity 1.2s ease; }
.ps2-cloud ellipse { fill: #fff; opacity: .42; }
.ps2--dusk .ps2-cloud ellipse { fill: #f0a98e; opacity: .32; }

.ps2-farland { fill: #8e999e; opacity: .32; }
.ps2-farmast { stroke: #7d888e; stroke-width: 1; opacity: .42; fill: none; }
.ps2-farmast--crane { stroke-width: 1.6; }
.ps2--dusk .ps2-farland { fill: #3c4560; opacity: .85; }
.ps2--dusk .ps2-farmast { stroke: #3c4560; opacity: .9; }
.ps2-turbine { stroke: #b9c0cc; stroke-width: 1.3; fill: none; }
.ps2-turbine-b { fill: #c9ced8; }
.ps2-blades { animation: ps2-spin 8s linear infinite; }
@keyframes ps2-spin { to { transform: rotate(360deg); } }
.ps2-farsurf { stroke: rgba(255,255,255,.3); stroke-width: 1; fill: none; }

.ps2-rock { fill: #5e5953; opacity: .9; }
.ps2-fort { fill: #a36d55; }
.ps2-fort--dk { fill: #8d5b47; }
.ps2-fort--door { fill: #3b2b23; }
.ps2-lhcourse { stroke: #a39b8c; stroke-width: .5; fill: none; }
.ps2-lhdark { fill: #2a3236; }
.ps2-lhrail { stroke: #2a3236; stroke-width: 1; fill: none; }
.ps2--dusk .ps2-point { opacity: .9; }
.ps2--dusk .ps2-fort { fill: #6a4a46; }
.ps2--dusk .ps2-fort--dk { fill: #573c39; }
.ps2--dusk .ps2-lhtower { opacity: .6; }
.ps2--dusk .ps2-rock { fill: #2c2f38; }

.ps2-ripple { stroke: rgba(80,62,40,.32); stroke-width: 1; fill: none; }
.ps2-sandbank { fill: #c9b48a; }
.ps2-water { fill: url(#ps2-water); opacity: .9; }
.ps2-surf { stroke: rgba(255,255,255,.55); stroke-width: 1.2; fill: none; }
.ps2-glint { stroke: rgba(255,255,255,.32); stroke-width: 1.5; stroke-linecap: round; fill: none; }

.ps2-pile { stroke: #263031; stroke-width: 3.4; stroke-linecap: round; fill: none; }
.ps2-pile-hi { stroke: #64716f; stroke-width: .8; fill: none; }
.ps2-brace { stroke: #2d3738; stroke-width: 1.1; fill: none; }
.ps2-timber { stroke: #5b4426; stroke-width: 3.6; stroke-linecap: round; fill: none; }
.ps2-timber--thin { stroke-width: 1.3; }
.ps2-plank { fill: #6b4f2c; }
.ps2-boat { fill: #7a5a33; stroke: #3d2c18; stroke-width: .8; }
.ps2-oar { stroke: #8a6a40; stroke-width: 1.3; fill: none; }
.ps2-smoke circle { fill: #6d6a66; opacity: .3; }
.ps2-chain { stroke: #2a2f33; stroke-width: 1; fill: none; stroke-dasharray: 1.5 1; }
.ps2-name { font-family: var(--font-mono); font-size: 13px; letter-spacing: .06em; fill: #1f2a30; paint-order: stroke; stroke: rgba(242,244,239,.55); stroke-width: 3; }
.ps2-wake { stroke: rgba(255,255,255,.85); stroke-width: 1.6; fill: none; stroke-linecap: round; }

.ps2-pontoon { fill: #2a2f33; }
.ps2-strake { stroke: #c9a463; stroke-width: 1.2; opacity: .8; fill: none; }
.ps2-stagedeck { fill: #8c6f45; }
.ps2-shed { fill: #ece4d2; stroke: #3a4146; stroke-width: 1; }
.ps2-win { fill: #3f4a50; }
.ps2-roof { fill: #6f2f28; }
.ps2-roof--slate { fill: #4f5a62; }
.ps2-bollard { fill: #1d2226; }
.ps2-lampcol { stroke: #1e2a2b; stroke-width: 1.8; fill: none; }
.ps2-lampcol--thin { stroke-width: 1; }
.ps2-lantern { fill: #efe1b0; stroke: #1e2a2b; stroke-width: .6; }
.ps2-arc { stroke: #1f2a30; stroke-width: 1.3; stroke-dasharray: 3 4; fill: none; }
.ps2-quote { font-family: var(--font-body); font-style: italic; font-size: 17px; fill: #1f2a30; paint-order: stroke; stroke: rgba(242,244,239,.6); stroke-width: 3; }

.ps2-bridge-chord { stroke: #263031; stroke-width: 3.2; stroke-linecap: round; fill: none; }
.ps2-bridge-rail, .ps2-bridge-web { stroke: #263031; stroke-width: 1.1; fill: none; }
.ps2-hinge { fill: #c9a463; stroke: #263031; stroke-width: 1; }

.ps2-deck { fill: #2b2a28; }
.ps2-deckedge { stroke: #a88b5c; stroke-width: 1; fill: none; }
.ps2-chord { stroke: #263031; stroke-width: 2.2; fill: none; }
.ps2-web { stroke: #263031; stroke-width: 1.1; fill: none; }
.ps2-rail { stroke: #263031; stroke-width: 1.2; fill: none; }
.ps2-balusters { stroke: #263031; stroke-width: 9; stroke-dasharray: .8 3.2; fill: none; }
.ps2-kiosk { fill: #efe6d2; stroke: #263031; stroke-width: 1; }
.ps2-dome { fill: #4d7a6e; stroke: #263031; stroke-width: 1; }
.ps2-wall { fill: #efe6d2; stroke: #263031; stroke-width: 1.2; }
.ps2-cornice { fill: #d9cdb2; stroke: #263031; stroke-width: .8; }
.ps2-pennant { fill: #c43a2c; }
.ps2-arch { fill: #3f4a50; }

.ps2-grass { fill: #8f9a62; }
.ps2-dune { fill: #cbb98e; }
.ps2-tuft { stroke: #6f7a45; stroke-width: 1; fill: none; }
.ps2-grassedge { stroke: #6f7650; fill: none; stroke-width: 1.5; }
.ps2-house { fill: #e7dcc4; stroke: #6a6152; stroke-width: 1; }
.ps2-house--b { fill: #d6c3a2; }
.ps2-sash { fill: #4a5559; }
.ps2-chimney { fill: #8a5a44; }
.ps2-seawall { fill: #a39474; }
.ps2-course { stroke: rgba(60,50,35,.35); stroke-width: .8; fill: none; }
.ps2-coping { fill: #c9bc9c; }

.ps2-ghostline { fill: none; stroke: #263031; stroke-width: 1.6; stroke-dasharray: 5 5; opacity: .45; }
.ps2--dusk .ps2-ghostline { stroke: #f2e2d2; opacity: .4; }
.ps2-prop { fill: none; stroke: #c43a2c; stroke-width: 2.6; stroke-dasharray: 8 6; }
.ps2-ferry--ghost { opacity: .32; }
.ps2-q { font-family: var(--font-stencil); font-weight: 900; font-size: 150px; fill: rgba(196,58,44,.92); }

.ps2-gullpath { stroke: #2a3238; stroke-width: 1.6; fill: none; stroke-linecap: round; }
.ps2--dusk .ps2-gullpath { stroke: #f1e3d6; }
.ps2-gull { animation: ps2-drift 11s ease-in-out infinite alternate; }
@keyframes ps2-drift { from { transform: translate(-40px, 6px); } to { transform: translate(50px, -8px); } }

/* dusk, 2026: lights on along the front */
.ps2--dusk .ps2-house { fill: #5d5866; stroke: #3a3644; }
.ps2--dusk .ps2-house--b { fill: #4f4a58; }
.ps2--dusk .ps2-sash { fill: #f2c26b; }
.ps2--dusk .ps2-roof--slate { fill: #2f3240; }
.ps2--dusk .ps2-seawall { fill: #4f4a52; }
.ps2--dusk .ps2-coping { fill: #6a6470; }
.ps2--dusk .ps2-course { stroke: rgba(0,0,0,.35); }
.ps2--dusk .ps2-rail, .ps2--dusk .ps2-balusters, .ps2--dusk .ps2-lampcol { stroke: #1a1d26; }
.ps2--dusk .ps2-lantern { fill: #ffd98a; }
.ps2--dusk .ps2-name { fill: #f2f4ef; stroke: rgba(15,26,34,.5); }
.pierview.ps2-dark .pierview__year { color: rgba(242,244,239,.9); }

@media (prefers-reduced-motion: reduce) {
  .ps2-gull, .ps2-blades { animation: none; }
  .ps2-g, .ps2-stop, .ps2-clouds { transition: none; }
}

/* ---------- a landing stage in cross-section ---------- */
.td2-farpath { fill: #8a9aa0; opacity: .45; }
.td2-bedline { stroke: #4a4030; stroke-width: 1.4; fill: none; }
.td2-chain { stroke: #2b3135; stroke-width: 1.6; fill: none; stroke-dasharray: 2.4 1.4; }
.td2-anchor { fill: #2b3135; }
.td2-pile { fill: #6b5333; stroke: #4b3a22; stroke-width: .8; }
.td2-weed { stroke: #3f5a3a; stroke-width: 6; opacity: .55; }
.td2-brace { stroke: #5b4426; stroke-width: 2.2; fill: none; }
.td2-jettydeck { fill: #7a5f3c; stroke: #4b3a22; stroke-width: 1; }
.td2-plankline { stroke: #4b3a22; stroke-width: .7; }
.td2-rail { stroke: #4b3a22; stroke-width: 1.6; fill: none; }
.td2-ladder { stroke: #3a4146; stroke-width: 1.4; fill: none; }
.td2-note { font-family: var(--font-mono); font-size: 13px; fill: #13263a; paint-order: stroke; stroke: rgba(241,242,236,.85); stroke-width: 3px; stroke-linejoin: round; }
.td2-note--light { fill: #f2f4ef; stroke: rgba(40,34,22,.4); }
.td2-note--red { fill: #c43a2c; }
.td2-joint { stroke: rgba(50,42,28,.45); stroke-width: 1; }
.td2-algae { stroke: #3f5a3a; stroke-width: 3; opacity: .7; }
.td2-coping { fill: #c4b593; }
.td2-promrail { stroke: #22282c; stroke-width: 1.8; }
.td2-baluster { stroke: #22282c; stroke-width: 1; }
.td2-lamp { stroke: #22282c; stroke-width: 2.2; fill: none; }
.td2-lantern { fill: #f3e6b8; stroke: #22282c; stroke-width: 1; }
.td2-boardbg { fill: #f6f3ea; stroke: #22282c; stroke-width: .8; }
.td2-boardtick { fill: #1d2226; }
.td2-scale { font-family: var(--font-mono); font-size: 12px; fill: #f2f4ef; }
.td2-strake { stroke: #c49a45; stroke-width: 1.4; }
.td2-ponttop { fill: #a8865a; }
.td2-rivet { fill: #5a656b; }
.td2-fender { fill: #111; }
.td2-shed { fill: #ece4d2; stroke: #283036; stroke-width: 1.2; }
.td2-shedwin { fill: #3f4a50; }
.td2-shedroof { fill: #6f2f28; }
.td2-bollard { stroke: #111; stroke-width: 3; fill: none; }
.td2-waterover { fill: #2f5a66; opacity: .32; }
.td2-chord { stroke: #283036; stroke-width: 3.2; stroke-linecap: round; fill: none; }
.td2-chord--top { stroke-width: 2; }
.td2-web { stroke: #283036; stroke-width: 1.1; fill: none; }
.td2-handrail { stroke: #283036; stroke-width: 1.4; fill: none; }
.td2-pin { fill: #c49a45; stroke: #283036; stroke-width: 1.4; }
.td2-surface { fill: none; stroke: #eaf3f4; stroke-width: 2; }
.td2-shine { stroke: rgba(255,255,255,.4); stroke-width: 1.5; stroke-linecap: round; fill: none; }
.td2-gap { stroke: #c43a2c; stroke-width: 2; stroke-dasharray: 4 4; fill: none; }
.td2-gapg { transition: opacity .3s; }
.td2-mark { stroke: #13263a; stroke-width: .8; stroke-dasharray: 2 5; opacity: .35; }
.td2-marknote { font-family: var(--font-mono); font-size: 10px; fill: #13263a; opacity: .75; paint-order: stroke; stroke: rgba(241,242,236,.7); stroke-width: 3px; }