/* HUES — two independent colour grids side by side.
   Columns I / II are reserved for what comes next; columns III / IV carry
   the colour run — blue into blue, breaking to orange. Each panel scrolls
   on its own vertical axis, so growing one never disturbs the other.
   Independent of FIELDS, LINES and the private Studio. The head and foot
   rules are restated here rather than pulled from lines.css, so this
   section stands alone and LINES can change without touching it. */

.lines-head { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:28px var(--pad); font-size:12px; letter-spacing:.13em; }
.lines-head a { padding:8px 0; }
a:focus-visible, button:focus-visible { outline:2px solid var(--paper); outline-offset:5px; }
.eyebrow { font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#a4a399; }
.madrid-foot { display:flex; justify-content:space-between; align-items:baseline; gap:20px; padding:0 var(--pad) 40px; font-size:12px; color:#a4a399; }
.madrid-foot a { display:inline-block; padding:12px 0; }
.rights { font-size:10px; letter-spacing:.12em; color:var(--dormant); white-space:nowrap; }

.hues {
  --cell-h: clamp(170px, 24vh, 280px);
  --cell-gap: clamp(8px, 1.2vw, 18px);
  padding:8px 0 40px;
}

.hue-columns {
  display:flex;
  align-items:flex-start;
  gap:clamp(16px,3vw,40px);
  padding:0 var(--pad) 26px;
}

.hue-panel {
  flex:1 1 0;
  min-width:0;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  grid-auto-rows:var(--cell-h);
  gap:var(--cell-gap);
  max-height:calc(3 * var(--cell-h) + 2 * var(--cell-gap));
  overflow-y:auto;
  overscroll-behavior-y:contain;
  scroll-snap-type:y proximity;
  scrollbar-width:thin;
  scrollbar-color:var(--rule) transparent;
  padding-right:2px;
}

.hue-panel:focus-visible { outline:2px solid var(--paper); outline-offset:4px; }

.hue-panel::-webkit-scrollbar { width:8px; }
.hue-panel::-webkit-scrollbar-thumb { background:var(--rule); }
.hue-panel::-webkit-scrollbar-track { background:transparent; }

.hue-cell {
  position:relative;
  margin:0;
  overflow:hidden;
  scroll-snap-align:start;
  background:#0d0f0b;
}

.hue-cell img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.hue-cell figcaption {
  position:absolute;
  left:0; right:0; bottom:0;
  z-index:2;
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:8px 10px;
  font-size:10px;
  letter-spacing:.06em;
  color:var(--paper);
  background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 70%);
}

.hue-cell.is-blank {
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px dashed var(--rule);
  color:var(--dormant);
}

.hue-cell.is-blank span {
  font-size:13px;
  letter-spacing:.1em;
}

@media (max-width:760px) {
  .hues { --cell-h: clamp(130px, 20vh, 210px); --cell-gap: 10px; }
  .hue-columns { gap:14px; }
}

@media (max-width:480px) {
  .hue-columns { flex-direction:column; }
  .hue-panel { max-height:calc(2 * var(--cell-h) + var(--cell-gap)); }
}

@media (prefers-reduced-motion:reduce) {
  .hue-panel { scroll-behavior:auto; }
}

/* Arrival: a band of the five palette hues (the same greens, blues, reds,
   yellows and purples the swatches use) sweeps across and off, like light
   splitting through a prism, uncovering the page as it passes — HUES' own
   arrival rather than LINES' plain dark wipe. Still one composited
   transform, so it stays off the main thread. */
@media (prefers-reduced-motion: no-preference) {
  .hues-page::before {
    content: "";
    position: fixed;
    top: 0;
    bottom: 0;
    left: -40%;
    width: 140%;
    z-index: 40;
    pointer-events: none;
    background: linear-gradient(
      90deg,
      transparent 0%,
      var(--night) 14%,
      var(--night) 24%,
      #6f9a5c 32%,
      #5c7fa8 40%,
      #a85c52 48%,
      #c9a548 56%,
      #8a6a96 64%,
      var(--night) 72%,
      var(--night) 82%,
      transparent 100%
    );
    animation: hues-arrive .95s cubic-bezier(.3, .7, .2, 1) both;
  }

  @keyframes hues-arrive {
    from { transform: translateX(0); }
    to   { transform: translateX(140%); }
  }
}

/* Colour-filter palette, top right of the header, left of the title. */
.hues-head-right { display:flex; align-items:center; gap:22px; }

.hue-palette { display:flex; align-items:center; gap:9px; }

.hue-swatch {
  width:15px;
  height:15px;
  padding:0;
  margin:0;
  border-radius:50%;
  border:1px solid rgba(236,233,223,.35);
  cursor:pointer;
  background:var(--swatch-color);
  transition:transform .2s var(--ease,ease), outline-offset .2s ease, box-shadow .2s ease;
}

.hue-swatch:hover { transform:scale(1.14); }

.hue-swatch[aria-pressed="true"] {
  outline:2px solid var(--paper);
  outline-offset:2px;
  box-shadow:0 0 0 1px rgba(0,0,0,.4);
}

.hue-swatch[data-color="green"]  { --swatch-color:#6f9a5c; }
.hue-swatch[data-color="blue"]   { --swatch-color:#5c7fa8; }
.hue-swatch[data-color="red"]    { --swatch-color:#a85c52; }
.hue-swatch[data-color="yellow"] { --swatch-color:#c9a548; }
.hue-swatch[data-color="purple"] { --swatch-color:#8a6a96; }

@media(max-width:760px) {
  .hues-head-right { gap:14px; }
  .hue-palette { gap:7px; }
  .hue-swatch { width:13px; height:13px; }
}

/* Filtering: a canvas overlay, per photo, isolates one hue across the
   WHOLE image — every pixel near the chosen colour keeps its saturation,
   every other pixel is pulled toward grayscale. Not a per-photo show/hide:
   a single "mostly yellow" photo and a photo with one yellow doorway both
   just show that doorway/wall once yellow is selected. The canvas sits
   directly over the <img> (same box, same object-fit:cover) and is only
   shown once its pixels are ready, so there's no flash of a blank frame. */
.hue-cell { position:relative; }

/* A true crossfade rather than a swap: the colour photo eases out while
   the isolated-hue canvas eases in, both on the same slow timing, so the
   non-selected colours read as draining away rather than popping off. */
.hue-cell img { transition:opacity 1.1s ease; }

.hue-filter-canvas {
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  pointer-events:none;
  transition:opacity 1.1s ease;
}

.hue-cell.is-hue-filtered img { opacity:0; }

.hue-cell.is-hue-filtered .hue-filter-canvas.is-ready {
  opacity:1;
  pointer-events:auto;
}

@media (prefers-reduced-motion:reduce) {
  .hue-cell img,
  .hue-filter-canvas { transition:none; }
}

/* Carousel viewer, shared across both panels. Every photo in the grid —
   I/II and III/IV alike — is one continuous sequence here, so the arrow
   buttons never stop at a panel edge. Four photos sit side by side at
   their full picture (contain-fit, not the grid's cropped cover), and the
   arrows step the strip one photo at a time. */
.hue-cell { cursor:zoom-in; }
.hue-cell:focus-visible { outline:2px solid var(--paper); outline-offset:3px; }

.hue-viewer {
  width:100vw; height:100dvh; max-width:100vw; max-height:100dvh;
  border:0; padding:0;
  background:#080906; color:var(--paper);
}
.hue-viewer::backdrop { background:rgba(0,0,0,.92); }
.hue-viewer[open] { display:flex; flex-direction:column; }

.hue-viewer .viewer-close {
  position:absolute; top:12px; right:24px; z-index:2;
  background:none; color:inherit; border:0; padding:8px;
  font:14px var(--sans); cursor:pointer;
}

.hue-carousel {
  flex:1 1 auto;
  min-height:0;
  display:flex;
  align-items:stretch;
  gap:8px;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  padding:64px 12px 8px;
}
.hue-carousel::-webkit-scrollbar { display:none; }
.hue-carousel:focus-visible { outline:2px solid var(--paper); outline-offset:-4px; }

.hue-carousel-item {
  flex:0 0 calc((100% - 3 * 8px) / 4);
  min-width:0;
  display:flex;
  flex-direction:column;
  scroll-snap-align:start;
}

.hue-carousel-figure {
  flex:1 1 auto;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.hue-carousel-item img {
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
}

.hue-carousel-item figcaption {
  flex:0 0 auto;
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-top:10px;
  font-size:11px;
  letter-spacing:.06em;
  color:rgba(236,233,223,.6);
}

.hue-viewer-nav {
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  padding:16px 24px 22px;
}
.hue-viewer-nav span { font-size:10px; letter-spacing:.08em; color:rgba(236,233,223,.5); }
.hue-viewer-nav button {
  width:40px; height:40px;
  border-radius:50%;
  border:1px solid rgba(236,233,223,.35);
  background:transparent;
  color:inherit;
  font-size:16px;
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease;
}
.hue-viewer-nav button:hover,
.hue-viewer-nav button:focus-visible {
  background:rgba(236,233,223,.1);
  border-color:rgba(236,233,223,.6);
}

html:has(.hue-viewer[open]) { overflow:hidden; }

@media(max-width:1000px) {
  .hue-carousel-item { flex-basis: calc((100% - 8px) / 2); }
}

@media(max-width:600px) {
  .hue-carousel { gap:10px; padding:56px 10px 8px; }
  .hue-carousel-item { flex-basis: 100%; }
}

@media (prefers-reduced-motion:reduce) {
  .hue-carousel { scroll-behavior:auto; }
}

/* =========================================================
   CONVERGENCE — Cmd/Ctrl-click any swatch

   Every colour, together, rather than one colour alone: instead of the
   per-photo pixel isolation above, this reaches the whole page — the
   filter sits on <body> so it paints over everything, photographs and
   type and chrome alike, easing in exactly like a single colour choice
   does, just at the scale of the page rather than one image.
   ========================================================= */

.hues-viewport {
  transition: filter 1.3s ease;
}

.hues-viewport.is-converged {
  filter: sepia(0.85) saturate(2.2) hue-rotate(-8deg) brightness(.88) contrast(1.05);
}

/* The quote sits OUTSIDE .hues-viewport on purpose, so the same filter that
   folds every photograph and swatch into brown never touches its own
   contrast — the one thing on the page that has to stay legible against
   whatever busy, brown-toned image happens to be behind it. */
.hues-converge-text {
  position: fixed;
  inset: 0;
  z-index: 20;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--pad, clamp(18px, 3.1vw, 50px));
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.3s ease;
}

.hues-converge-text span {
  display: inline-block;
  max-width: 44ch;
  background: rgba(8, 9, 6, .72);
  border: 1px solid rgba(236, 233, 223, .16);
  border-radius: 3px;
  padding: clamp(16px, 2.8vw, 28px) clamp(20px, 3.4vw, 38px);
  text-align: center;
  font-family: var(--serif, serif);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(19px, 3.1vw, 34px);
  line-height: 1.4;
  letter-spacing: .008em;
  color: #fbf8f2;
}

.hues-viewport.is-converged ~ .hues-converge-text {
  opacity: 1;
}

@media (prefers-reduced-motion:reduce) {
  .hues-viewport,
  .hues-converge-text {
    transition: none;
  }
}