/* The ParkSyde painting (art.js) and the gallery frame it hangs in.
 *
 * Added 29 October 2026 for the front door, the staff sign-in, the guest
 * workbook and the Career Profile. The painting's colours live here, so the
 * same scene is a golden late afternoon in light mode and a dusk in dark
 * mode, and art.js names no colour of its own.
 *
 * It hangs like a framed print: a thin frame, a paper mat, the painting, and
 * a gallery label under it. Text never sits on the painting itself, so every
 * word keeps the course's contrast. Motion is one slow shimmer on the water,
 * and it stops for anyone who has asked for less motion. */

:root {
  --art-sky-1: #3d6f8f; --art-sky-2: #c88d92; --art-sky-3: #efb36c; --art-sky-4: #fbe1a8;
  --art-sun: #fff6dc; --art-sun-glow: #ffd48a; --art-cloud: #fde4c7; --art-bird: #3b2f3f;
  --art-range-1: #b9919a; --art-range-2: #93708a; --art-range-3: #604c66;
  --art-water-1: #efc08c; --art-water-2: #4f5d78; --art-glint: #fff4d2; --art-ripple: #fde9c9;
  --art-near-1: #423c30; --art-near-2: #1d221d; --art-silhouette: #222920; --art-grass: #1a201b;
  --art-path-1: #e3bb83; --art-path-2: #f8dfb0;
  --art-wren: #3f90e8; --art-wren-band: #0d1218; --art-wren-wing: #5a4636; --art-wren-belly: #cfc1ae; --art-rim: #ffe2a8;
  --art-paper: #fbf6ec; --art-paper-edge: #e4d8c4; --art-frame: #2b2620; --art-ink: #1f241f; --art-ink-soft: #57605a; --art-gold: #a77a2e;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --art-sky-1: #0b1530; --art-sky-2: #2e2b58; --art-sky-3: #8c4b66; --art-sky-4: #e38b62;
    --art-sun: #ffdcaa; --art-sun-glow: #ff9563; --art-cloud: #6f5175; --art-bird: #f0d8e8;
    --art-range-1: #4b3b60; --art-range-2: #352a4d; --art-range-3: #231c36;
    --art-water-1: #7a4c63; --art-water-2: #0c1222; --art-glint: #ffc890; --art-ripple: #b07f90;
    --art-near-1: #15181a; --art-near-2: #07090a; --art-silhouette: #0b0e0d; --art-grass: #090c0b;
    --art-path-1: #8e6e52; --art-path-2: #c99b72;
    --art-wren: #5aa6ff; --art-wren-band: #05080c; --art-wren-wing: #3c2f25; --art-wren-belly: #9a8f84; --art-rim: #ffb27a;
    --art-paper: #1a1f1c; --art-paper-edge: #303a33; --art-frame: #0c0f0d; --art-ink: #eef1ec; --art-ink-soft: #b8c1ba; --art-gold: #d8ad62;
  }
}

/* The canvas: the painting fills it. */
.art-canvas { position: absolute; inset: 0; overflow: hidden; }
.art-canvas .art-scene { width: 100%; height: 100%; display: block; }
.art-glint { animation: art-shimmer 6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes art-shimmer { 0%, 100% { opacity: 1; transform: scaleX(1); } 50% { opacity: .45; transform: scaleX(.8); } }
@media (prefers-reduced-motion: reduce) { .art-glint { animation: none; } }

/* The framed print: frame → mat → painting, with the label under it. */
.art-frame { margin: 0; }
.art-frame .mount { background: linear-gradient(135deg, color-mix(in srgb, var(--art-frame) 70%, #8a6a45), var(--art-frame) 45%, color-mix(in srgb, var(--art-frame) 80%, #6b5236)); padding: 4px; border-radius: 4px;
  box-shadow: 0 2px 0 rgba(255, 255, 255, .08) inset, 0 28px 50px -30px rgba(20, 16, 10, .75), 0 6px 14px -8px rgba(20, 16, 10, .45); }
.art-frame .mat { background: var(--art-paper); padding: clamp(14px, 3.4vw, 34px); border-radius: 2px;
  box-shadow: inset 0 0 0 1px var(--art-paper-edge), inset 0 3px 8px -4px rgba(0, 0, 0, .25); }
.art-frame .work { position: relative; aspect-ratio: 16 / 8.2; overflow: hidden; border-radius: 1px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .18), 0 1px 3px rgba(0, 0, 0, .3); }
.art-frame.band .work { aspect-ratio: 16 / 5.4; }
.art-frame.tall .work { aspect-ratio: 4 / 3; }
@media (max-width: 560px) { .art-frame .work { aspect-ratio: 4 / 3.4; } .art-frame.band .work { aspect-ratio: 16 / 8; } }

/* The gallery label: title, the maker, and a line about the work. */
.art-label { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; margin: 22px 4px 0; color: var(--art-ink); }
.art-label .seal { width: 56px; height: 56px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px var(--art-paper), 0 0 0 4px var(--art-paper-edge); }
.art-label .kicker { font: 600 12px/1.3 "IBM Plex Sans", system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--art-gold); }
.art-label h1, .art-label h2 { font-family: "Bitter", Georgia, serif; font-weight: 800; letter-spacing: -.012em; margin: 4px 0 4px; line-height: 1.05; color: var(--art-ink); }
.art-label h1 { font-size: clamp(32px, 6.2vw, 58px); }
.art-label h2, .art-label h1.sm { font-size: clamp(24px, 4.4vw, 34px); }
.art-label p { margin: 0; color: var(--art-ink-soft); font: italic 16.5px/1.5 "Bitter", Georgia, serif; }
.art-rule { height: 1px; border: 0; margin: 26px 0 6px; background: linear-gradient(90deg, transparent, var(--art-paper-edge) 12%, var(--art-gold) 50%, var(--art-paper-edge) 88%, transparent); }

/* Gallery doors: the course's .door on paper, with a painted roundel. */
.gallery .door { border-radius: 14px; border: 1px solid var(--art-paper-edge); background: var(--art-paper); color: var(--art-ink); min-height: 84px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.gallery .door:hover, .gallery .door:focus-visible { transform: translateY(-2px); box-shadow: 0 16px 28px -20px rgba(20, 16, 10, .7); border-color: var(--art-gold); }
.gallery .door .ic { width: 50px; height: 50px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 22px;
  background: radial-gradient(circle at 50% 38%, var(--art-sun) 0 14%, var(--art-sky-3) 34%, var(--art-sky-2) 62%, var(--art-range-3) 100%);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55), 0 2px 6px rgba(0, 0, 0, .18); }
.gallery .door small { color: var(--art-ink-soft); }
.gallery-h { font: 600 12.5px/1.2 "IBM Plex Sans", system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--art-gold); margin: 30px 2px 12px; }
@media (prefers-reduced-motion: reduce) { .gallery .door { transition: none; } .gallery .door:hover { transform: none; } }

@media print { .art-frame .mount { box-shadow: none; } .art-canvas { display: none; } .art-frame .work { aspect-ratio: auto; height: 0; } }