@font-face {
  font-family: "Gathenia";
  src: url("images/Gathenia.otf") format("opentype");
  font-display: swap;
}

@font-face {
  font-family: "Brushy";
  src: url("images/Brushy Strokes.ttf") format("truetype");
  font-display: swap;
}

:root {
  --ink: #003488;
  --paper: #f4f0e8;
  --acid: #d7ec45;
  --line: rgba(20, 32, 32, 0.35);
  /* Studio_Medium.png intrinsic size - hotspots are measured against this grid */
  --plate-w: 1920;
  --plate-h: 1072;
  --stage-h: max(100svh, 520px);
  --screen-grey: #231f20;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: "Trebuchet MS", sans-serif;
  overflow: hidden;
}

button { font: inherit; }

.gallery-shell {
  display: grid;
  min-height: 100svh;
  place-items: center;
  overflow: hidden;
}

.stage {
  position: relative;
  width: 100vw;
  height: var(--stage-h);
  overflow: hidden;
  isolation: isolate;
  background: #dadbd4;
}

/* Keeps the plate's exact aspect ratio while covering the stage, so every
   hotspot percentage below stays locked to the painted canvases and screens. */
.studio {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: calc(100vw * var(--plate-h) / var(--plate-w));
  min-width: calc(var(--stage-h) * var(--plate-w) / var(--plate-h));
  min-height: var(--stage-h);
  transform: translate(-50%, -50%);
  background: url("Studio_Medium.png") center center / 100% 100% no-repeat;
}

.studio::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, rgba(12, 25, 25, 0.18), transparent 30%, transparent 70%, rgba(12, 25, 25, 0.2));
  pointer-events: none;
}

/* Painted backing plate for one run of text - a run being a whole field,
   <br> breaks included, not a single line. The stroke sits 20% proud of the
   text on three sides and 40% proud on the right, where the brush fades out
   into speckle. z-index -1 keeps it under the glyphs; `isolation` pins that
   negative layer to this element so it can never sink behind an ancestor. */
.brush {
  position: relative;
  display: inline-block;
  isolation: isolate;
  white-space: nowrap;
}

/* The source PNGs spend their right-hand ~40% on speckle that is too sparse to
   sit text on, so the image is blown up to 160% and left-anchored: the box keeps
   the exact 20%/20%/20%/40% geometry, but only the stroke's solid core plus the
   first of its fray lands inside it, and the sparse tail is clipped away. */
.brush::before {
  position: absolute;
  z-index: -1;
  top: -20%;
  left: -20%;
  width: 160%;
  height: 140%;
  content: "";
  background-image: url("images/long stroke.png");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 160% 100%;
  opacity: 0.5;
  pointer-events: none;
}

.masthead {
  position: absolute;
  z-index: 4;
  top: 5.4%;
  /* Far enough in that the widest run's 20% left overhang stays on screen. */
  left: 3.4%;
  max-width: 230px;
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.38);
  pointer-events: none;
}

.eyebrow, .instruction, .footer-note, .slot-label {
  font-size: clamp(11px, 0.9vw, 15px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.eyebrow {
  margin: 0 0 10px;
  line-height: 1.45;
  font-weight: 700;
}

h1 {
  margin: 0;
  font-family: "Gathenia", Georgia, serif;
  font-size: clamp(39px, 4.25vw, 82px);
  font-weight: 400;
  line-height: 0.8;
  letter-spacing: 0;
}

.instruction { margin: 20px 0 0; line-height: 1.45; }

.instruction-touch { display: none; }

@media (hover: none), (pointer: coarse) {
  .instruction-hover { display: none; }
  .instruction-touch { display: inline-block; }
}

/* Centered above each row of hotspots, on the same plate-relative grid. */
.section-heading {
  position: absolute;
  z-index: 3;
  left: 0;
  width: 100%;
  margin: 0;
  color: var(--ink);
  font-family: "Gathenia", Georgia, serif;
  font-weight: 400;
  /* Roomy enough that the stroke clears Gathenia's ascenders and descenders. */
  line-height: 1.2;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.38);
  pointer-events: none;
}

/* Sits in the gap above the canvas row (which starts at top: 15.9515%) -
   raised a touch so the brush's 10% overhang still clears the canvases. */
.section-heading--art {
  top: 10.5%;
  font-size: clamp(19px, 2.2vw, 39px);
}

/* Sits in the narrower gap between the canvas row (bottom: 36.6605%) and
   the monitor row (top: ~45.15%) - nudged down, off the canvases. */
.section-heading--design {
  top: 41%;
  font-size: clamp(14px, 1.4vw, 26px);
}

.hotspot-layer { position: absolute; z-index: 2; inset: 0; }

.hotspot {
  position: absolute;
  display: block;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: transparent;
  cursor: zoom-in;
  transition: filter 220ms ease;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

.hotspot img {
  display: block;
  width: 100%;
  height: 100%;
  transition: transform 220ms ease;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
}

.hotspot:hover, .hotspot:focus-visible { z-index: 5; filter: saturate(1.12); }
.hotspot:hover img, .hotspot:focus-visible img { transform: scale(1.04); }
.hotspot:focus-visible { outline: 2px solid var(--acid); outline-offset: 5px; }

/* Painted canvas fronts: 222 x 222 px on the plate, top edge at y=171. */
.canvas-slot {
  top: 15.9515%;
  width: 11.5625%;
  height: 20.7090%;
  box-shadow: 0 9px 16px rgba(21, 26, 23, 0.18);
}

.canvas-slot img {
  object-fit: cover;
  background: #f9f8f3;
}

.canvas-slot:nth-child(1) { left: 14.9479%; }
.canvas-slot:nth-child(2) { left: 29.6354%; }
.canvas-slot:nth-child(3) { left: 44.3229%; }
.canvas-slot:nth-child(4) { left: 59.0104%; }
.canvas-slot:nth-child(5) { left: 73.7500%; }

/* Monitor glass: 214 x 121 px on the plate, measured screen by screen. */
.monitor-slot {
  width: 11.1458%;
  height: 11.2873%;
}

.monitor-slot img {
  object-fit: contain;
  background: var(--screen-grey);
}

.monitor-slot::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.02) 45%, rgba(0, 0, 0, 0.06));
  box-shadow: inset 0 0 9px rgba(8, 12, 14, 0.25);
  pointer-events: none;
}

.monitor-slot:nth-child(6) { top: 45.3358%; left: 13.5938%; }
.monitor-slot:nth-child(7) { top: 45.3358%; left: 28.9583%; }
.monitor-slot:nth-child(8) { top: 45.3358%; left: 44.5313%; }
.monitor-slot:nth-child(9) { top: 45.2425%; left: 60.1042%; }
.monitor-slot:nth-child(10) { top: 45.1493%; left: 75.7813%; }

.slot-label {
  position: absolute;
  right: 7px;
  bottom: 6px;
  padding: 3px 5px;
  color: var(--paper);
  background: rgba(20, 32, 32, 0.8);
  opacity: 0;
  transition: opacity 180ms ease;
}

.hotspot:hover .slot-label, .hotspot:focus-visible .slot-label { opacity: 1; }

.footer-note {
  position: absolute;
  z-index: 4;
  right: 4.2%;
  bottom: 3.3%;
  left: 4.2%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--ink);
  font-weight: 700;
  line-height: 1.5;
  pointer-events: none;
}

/* Wide enough that one link's frayed tail does not run into the next. */
.footer-links {
  display: flex;
  align-items: center;
  gap: 44px;
  pointer-events: auto;
}

.footer-links a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 180ms ease, border-color 180ms ease;
}

/* The acid accent used to signal hover is invisible on the yellow brush, so the
   stroke carries the state instead: a half-lit thick dab at rest, swapping to
   the full-strength long stroke on hover. */
.footer-links a:hover, .footer-links a:focus-visible {
  color: var(--ink);
  border-color: currentColor;
}

.footer-links a::before {
  background-image: url("images/Thick brush Cyan Bright.png");
  transition: opacity 180ms ease;
}

.footer-links a:hover::before, .footer-links a:focus-visible::before {
  background-image: url("images/long stroke Cyan Deep.png");
  opacity: 1;
}

.lightbox {
  position: fixed;
  z-index: 20;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 5vh 6vw;
  background: rgba(10, 19, 18, 0.95);
  animation: appear 180ms ease-out;
  touch-action: pinch-zoom;
}

.lightbox[hidden] { display: none; }

.lightbox-figure {
  display: grid;
  gap: 14px;
  width: min(92vw, 1400px);
  height: min(88vh, 900px);
  min-height: 0;
  margin: 0;
  place-items: center;
}

.lightbox-figure img {
  display: block;
  width: auto;
  height: auto;
  max-width: 92vw;
  max-height: calc(88vh - 48px);
  object-fit: contain;
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.4);
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
}

.lightbox-figure figcaption {
  color: var(--acid);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.close-button {
  position: absolute;
  top: 2.8vh;
  right: 3vw;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(215, 236, 69, 0.7);
  border-radius: 50%;
  color: var(--acid);
  background: transparent;
  font-size: 35px;
  font-weight: 200;
  line-height: 35px;
  cursor: pointer;
  transition: color 180ms ease, background 180ms ease, transform 180ms ease;
  -webkit-tap-highlight-color: transparent;
}

.lightbox-nav {
  position: absolute;
  z-index: 1;
  top: 50%;
  width: 0;
  height: 0;
  padding: 0;
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent;
  background: transparent;
  cursor: pointer;
  transform: translateY(-50%);
  -webkit-tap-highlight-color: transparent;
}

.lightbox-nav--previous {
  left: 3vw;
  border-right: 22px solid var(--acid);
}

.lightbox-nav--next {
  right: 3vw;
  border-left: 22px solid var(--acid);
}

.lightbox-nav:hover, .lightbox-nav:focus-visible {
  filter: brightness(1.35);
  outline: none;
}

.close-button:hover, .close-button:focus-visible {
  color: var(--ink);
  background: var(--acid);
  transform: rotate(90deg);
}

@keyframes appear { from { opacity: 0; } to { opacity: 1; } }

/* Portrait-ish viewports: letterbox the whole plate instead of cropping it,
   so all ten works stay on screen and stay aligned. */
@media (max-aspect-ratio: 6 / 5) {
  .stage { background: var(--ink); }

  .studio {
    width: 100vw;
    height: calc(100vw * var(--plate-h) / var(--plate-w));
    min-width: 0;
    min-height: 0;
  }

  .masthead, .footer-note {
    color: var(--paper);
    text-shadow: none;
  }

  /* Paper-on-yellow is unreadable - anything sitting on a stroke keeps the ink. */
  .masthead .brush, .footer-note .brush { color: var(--ink); }

  /* Out here the stroke lies on flat ink, not the photo: there is no noise left
     to soften, and half-strength yellow over blue goes olive and kills the
     contrast, so these strokes paint at full opacity. */
  .masthead .brush::before, .footer-note .brush::before { opacity: 1; }
}

@media (max-width: 700px) {
  .masthead { top: 4%; left: 5%; max-width: 180px; }
  .instruction { margin-top: 14px; }
  .slot-label { display: none; }
  .section-heading--art { font-size: 15px; }
  .section-heading--design { font-size: 13px; }
  /* Brushed runs cannot wrap mid-line, so the footer stacks rather than
     pushing the nav off the right edge. */
  .footer-note {
    bottom: 4%;
    flex-direction: column;
    align-items: flex-start;
    row-gap: 10px;
  }

  .footer-links { flex-wrap: wrap; gap: 10px 26px; }
}