/* Art page round 1 (art-develop/a1-gallery). Built on the Projects page: the same header
   (faint orchid, "Personal work" kicker, Italianno title), dock, status bar and cursor paws.
   Four gallery styles share this file, each scoped by a class on the section:
   .g-clean (A1), .g-framed (A2), .g-hall (A3), .g-salon (A4).
   html[data-wall] switches the wall colour (the switch is for comparing only). */

/* ---------- Page and header ---------- */
.page-art .section.art { padding-top: 150px; padding-bottom: 200px; }
.page-art .section-head { margin-bottom: clamp(64px, 9vw, 112px); }
.page-art .t-orchid { opacity: var(--orchid-op, 0.6); }
body.page-art { transition: background-color 0.4s ease; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.page-art figure { margin: 0; }
.page-art .art img { display: block; max-width: 100%; height: auto; }

/* ---------- Wall colours ---------- */
html[data-wall="green"] {
  --bg: #2E4532; --ink: #F7F2E8; --text: #DCE3D4; --soft: #A9B8A0; --kicker: #F4B9A0;
  --line: rgba(255, 255, 255, 0.14); --status-bg: rgba(46, 69, 50, 0.88);
  --label-bg: rgba(255, 255, 255, 0.06); --orchid-op: 0.08; --light: rgba(255, 238, 205, 0.16); --floor: rgba(0, 0, 0, 0.18);
}
html[data-wall="charcoal"] {
  --bg: #2B2927; --ink: #F6F0E8; --text: #DDD6CC; --soft: #A8A097; --kicker: #EBB1BE;
  --line: rgba(255, 255, 255, 0.13); --status-bg: rgba(43, 41, 39, 0.88);
  --label-bg: rgba(255, 255, 255, 0.05); --orchid-op: 0.07; --light: rgba(255, 238, 205, 0.15); --floor: rgba(0, 0, 0, 0.22);
}
html[data-wall="terracotta"] {
  --bg: #8A4634; --ink: #FFF5EC; --text: #F7DED2; --soft: #E3B9A6; --kicker: #FFD9C4;
  --line: rgba(255, 255, 255, 0.18); --status-bg: rgba(138, 70, 52, 0.88);
  --label-bg: rgba(255, 255, 255, 0.08); --orchid-op: 0.1; --light: rgba(255, 228, 200, 0.18); --floor: rgba(0, 0, 0, 0.16);
}
html[data-wall="grey"] {
  --bg: #E6E3DE; --line: #D3CEC6; --status-bg: rgba(230, 227, 222, 0.88);
  --orchid-op: 0.45; --floor: rgba(0, 0, 0, 0.05);
}

/* On the dark walls the embossed orchid only adds light (its shading would look like a dark
   blob), and the dock keeps its usual dark labels on its light glass */
html[data-wall="green"] .t-orchid, html[data-wall="charcoal"] .t-orchid, html[data-wall="terracotta"] .t-orchid { mix-blend-mode: screen; opacity: 0.16; }
html[data-wall] .dock { --ink: #262A22; --text: #575C51; --soft: #9C9F95; }

/* ---------- Wall switch (round 1 only) ---------- */
.wall-switch {
  position: fixed; top: 62px; right: var(--gutter); z-index: 40;
  display: flex; align-items: center; gap: 6px; padding: 6px 8px 6px 12px; border-radius: 999px;
  background: rgba(255, 253, 248, 0.9); backdrop-filter: blur(8px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 4px 14px rgba(0, 0, 0, 0.1);
}
.wall-switch-label { margin-right: 2px; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #8C8F85; }
.wall-switch button {
  display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%;
  background: none; cursor: pointer;
}
.wall-switch button i { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18); }
.wall-switch [data-wall="site"] i { background: #FBF8F3; }
.wall-switch [data-wall="green"] i { background: #2E4532; }
.wall-switch [data-wall="charcoal"] i { background: #2B2927; }
.wall-switch [data-wall="terracotta"] i { background: #8A4634; }
.wall-switch [data-wall="grey"] i { background: #E6E3DE; }
.wall-switch button[aria-pressed="true"] { box-shadow: 0 0 0 2px #4E6B48; }
.wall-switch button:focus-visible { outline: 2px solid #4E6B48; outline-offset: 2px; }

/* ---------- Labels (title + date) ---------- */
.g-label b { display: block; font-family: var(--font-head); font-size: 21px; font-weight: 400; line-height: 1.15; color: var(--ink); }
.g-label span { display: block; margin-top: 4px; font-size: 13px; letter-spacing: 0.04em; color: var(--soft); }
.g-card { padding: 14px 18px; border-radius: 4px; background: var(--label-bg, #FFFFFF); box-shadow: inset 0 0 0 1px var(--line); }

/* The art itself: a soft shadow so each piece sits on the wall */
.g-clean img, .g-hall img { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16), 0 12px 30px rgba(0, 0, 0, 0.12); }

/* ---------- A1 · Clean white gallery ---------- */
.clean-walls { display: grid; gap: clamp(96px, 14vw, 180px); max-width: 1080px; margin: 0 auto; }
.clean-wall { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: clamp(24px, 4vw, 48px); align-items: end; }
.clean-wall img { justify-self: start; width: auto; max-height: min(76vh, 680px); }
.clean-wall .g-card { width: 100%; }
.clean-wall.is-flip { grid-template-columns: 220px minmax(0, 1fr); }
.clean-wall.is-flip img { grid-column: 2; grid-row: 1; justify-self: end; }
.clean-wall.is-flip .g-card { grid-column: 1; grid-row: 1; text-align: right; }
@media (max-width: 720px) {
  .clean-wall, .clean-wall.is-flip { grid-template-columns: 1fr; gap: 16px; }
  .clean-wall.is-flip img, .clean-wall.is-flip .g-card { grid-column: 1; grid-row: auto; justify-self: start; text-align: left; }
  .clean-wall img { max-height: none; }
  .clean-wall .g-card { width: auto; justify-self: start; }
}

/* ---------- A2 · Classic framed ---------- */
/* The spotlights are wider than their frames, so they're clipped at the page edge */
.section.g-framed { overflow-x: clip; }
.framed-wall {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center;
  gap: clamp(64px, 8vw, 96px) clamp(40px, 5vw, 64px); max-width: 1180px; margin: 0 auto;
}
.framed { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; }
.framed-light {
  position: absolute; z-index: -1; top: -130px; left: 50%; width: 150%; height: 100%; translate: -50% 0;
  background: radial-gradient(ellipse 46% 52% at 50% 38%, var(--light, rgba(255, 244, 222, 0.85)), transparent 72%);
  pointer-events: none;
}
.framed-frame {
  display: block; padding: clamp(14px, 2vw, 26px); background: #FBFAF6;
  border: clamp(9px, 1vw, 13px) solid #4A3324; border-color: #5E412E #432E21 #36251A #4A3324;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1), inset 0 2px 6px rgba(0, 0, 0, 0.12),
    0 2px 3px rgba(0, 0, 0, 0.28), 0 18px 36px rgba(0, 0, 0, 0.2);
}
.g-framed .framed img { width: auto; height: clamp(200px, 24vw, 320px); max-width: none; outline: 1px solid rgba(0, 0, 0, 0.12); }
.g-plaque {
  margin-top: 20px; padding: 7px 16px 8px; border-radius: 2px; text-align: center;
  background: linear-gradient(180deg, #EEDFBC, #CDB384); box-shadow: inset 0 0 0 1px rgba(90, 66, 28, 0.35), 0 1px 3px rgba(0, 0, 0, 0.3);
}
.g-plaque b { font-size: 16px; color: #3B2C14; }
.g-plaque span { margin-top: 1px; font-size: 11.5px; color: #5E4A2A; }
@media (max-width: 720px) {
  .framed { width: 100%; }
  .framed-frame { max-width: 100%; }
  .g-framed .framed img { width: 100%; height: auto; max-width: 100%; }
}

/* ---------- A3 · Walk-through hallway ----------
   Without the walking effect (no JS, phones, reduced motion) the wall is a sideways strip
   you swipe or scroll. With it (.is-walk), the wall sticks to the screen and scrolling down
   walks you along it. */
.g-hall .hall { position: relative; margin: 0 calc(-1 * var(--gutter)); }
.hall-stick { position: relative; display: flex; flex-direction: column; justify-content: center; }
.hall-hint { margin: 0 var(--gutter) 28px; font-size: 13px; letter-spacing: 0.06em; color: var(--soft); text-align: center; }
.hall-hint span { display: inline-block; animation: hall-nudge 1.6s ease-in-out infinite; }
@keyframes hall-nudge { 50% { transform: translateX(6px); } }
.hall-track {
  position: relative; z-index: 1; display: flex; align-items: flex-end; gap: clamp(80px, 10vw, 140px);
  padding: 12px max(var(--gutter), 8vw) 40px; overflow-x: auto; scroll-snap-type: x mandatory;
}
.hall-piece { display: flex; flex: none; align-items: flex-end; gap: 20px; scroll-snap-align: center; }
.g-hall .hall-piece img { width: auto; height: min(52vh, 460px); max-width: none; }
.hall-piece .g-card { flex: none; width: 170px; margin-bottom: 0; }
.hall-end { flex: none; align-self: center; margin: 0; font-family: var(--font-head); font-size: 24px; font-style: italic; color: var(--soft); white-space: nowrap; }
.hall-floor {
  position: absolute; z-index: 0; right: 0; bottom: 0; left: 0; height: 22%;
  background: linear-gradient(180deg, var(--floor, rgba(0, 0, 0, 0.05)), transparent);
  border-top: 1px solid var(--line);
}
.hall.is-walk .hall-stick { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.hall.is-walk .hall-track { width: max-content; overflow: visible; scroll-snap-type: none; will-change: transform; }
/* Lift the pieces off the floor so they hang on the wall rather than stand on the floor line */
.hall.is-walk .hall-track { margin-bottom: 12vh; }
@media (max-width: 720px) {
  .hall-piece { flex-direction: column; align-items: flex-start; }
  .g-hall .hall-piece img { height: 46vh; }
  .hall-hint span { animation: none; }
}
@media (prefers-reduced-motion: reduce) { .hall-hint span { animation: none; } }

/* ---------- A4 · Salon wall ----------
   A 12-column wall with 8px rows; art.js sets how many rows each piece takes so they pack
   close together like a masonry wall. Each piece spans --span columns. */
.salon-wall {
  position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 8px;
  grid-auto-flow: row dense; column-gap: 20px; max-width: 1120px; margin: 0 auto; padding: 44px clamp(16px, 3vw, 40px) 20px;
}
/* The picture rail along the top of the wall */
.salon-wall::before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 7px; border-radius: 2px; background: linear-gradient(180deg, rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.06)); }
.salon { grid-column: span var(--span); align-self: start; display: flex; flex-direction: column; align-items: center; }
.salon-frame { display: block; width: 100%; }
.g-salon .salon img { width: 100%; }
.salon-frame { box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25), 0 14px 28px rgba(0, 0, 0, 0.18); }
.f-gilt .salon-frame {
  padding: clamp(8px, 1vw, 12px);
  background: linear-gradient(135deg, #E9D18F, #B28B3F 38%, #F2DEA6 58%, #9D7633);
}
.f-gilt img { box-shadow: 0 0 0 3px rgba(70, 48, 12, 0.4); }
.f-black .salon-frame { padding: clamp(10px, 1.4vw, 18px); background: #FBFAF6; border: 6px solid #1C1B1A; }
.f-walnut .salon-frame { border: clamp(8px, 1vw, 12px) solid #4A3324; border-color: #5E412E #432E21 #36251A #4A3324; }
.f-white .salon-frame { border: clamp(7px, 0.9vw, 10px) solid #F8F5EF; }
.g-tiny { margin-top: 10px; text-align: center; }
.g-tiny b { font-size: 16px; }
.g-tiny span { margin-top: 2px; font-size: 11.5px; }
@media (max-width: 720px) {
  .salon-wall { column-gap: 14px; padding-top: 32px; }
  .salon { grid-column: span 6; }
}
@media (max-width: 420px) {
  .salon { grid-column: span 12; }
}