/* ==========================================================================
   Collection: Experience (match history), Projects (collection grid +
   detail), Journal (store tiles), and the client hextech button.
   Loaded after styles.css, so same-specificity rules here win.
   ========================================================================== */

/* ===== Hextech button =====
   The client's primary button: a 2px gold gradient frame, a dark hairline,
   then a deep teal fill that glows blue from inside on hover while a light
   sweep crosses it. The frame colors are registered so the gradient can
   transition instead of snapping. The hero's .cta-btn shares the look. */
@property --hx-edge-a { syntax: "<color>"; inherits: false; initial-value: #C8AA6E; }
@property --hx-edge-b { syntax: "<color>"; inherits: false; initial-value: #785A28; }

.hx-btn,
.cta-btn {
  --hx-edge-a: var(--gold-text);
  --hx-edge-b: var(--gold-muted);
  --hx-fill: color-mix(in srgb, var(--cyan) 7%, var(--bg-panel));
  --hx-fill-deep: color-mix(in srgb, var(--cyan) 3%, var(--bg-deep));
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 2.75rem;
  padding: 0 var(--sp-4);
  border: 2px solid transparent;
  border-radius: 0;
  background:
    linear-gradient(180deg, var(--hx-fill) 0%, var(--hx-fill-deep) 100%) padding-box,
    linear-gradient(180deg, var(--hx-edge-a) 0%, var(--hx-edge-b) 100%) border-box;
  box-shadow:
    inset 0 0 0 1px rgba(1, 10, 19, 0.9),
    inset 0 -10px 16px -12px rgba(11, 196, 227, 0.35),
    0 2px 6px rgba(0, 0, 0, 0.45);
  color: var(--gold-text);
  font-family: "BeaufortLoL", "Cinzel", serif;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    --hx-edge-a 180ms ease-out,
    --hx-edge-b 180ms ease-out,
    color 180ms ease-out,
    box-shadow 220ms ease-out;
}
.hx-btn svg,
.cta-btn svg { flex: none; }

/* Light sweep: parked off the left edge, crosses once per hover. */
.hx-btn::before,
.cta-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  width: auto; height: auto;
  background: linear-gradient(105deg,
    transparent 30%,
    rgba(240, 230, 210, 0.16) 46%,
    rgba(240, 230, 210, 0.28) 50%,
    rgba(240, 230, 210, 0.16) 54%,
    transparent 70%);
  clip-path: none;
  transform: translateX(-110%);
  pointer-events: none;
}
/* The old hero button drew corner notches with ::after - not in the client. */
.cta-btn::after { content: none; }

.hx-btn:hover,
.cta-btn:hover {
  --hx-edge-a: var(--gold-bright);
  --hx-edge-b: var(--gold-text);
  color: var(--gold-bright);
  background:
    linear-gradient(180deg, var(--hx-fill) 0%, var(--hx-fill-deep) 100%) padding-box,
    linear-gradient(180deg, var(--hx-edge-a) 0%, var(--hx-edge-b) 100%) border-box;
  box-shadow:
    inset 0 0 0 1px rgba(1, 10, 19, 0.9),
    inset 0 0 18px rgba(11, 196, 227, 0.32),
    inset 0 -12px 18px -10px rgba(11, 196, 227, 0.5),
    0 4px 14px rgba(0, 0, 0, 0.55);
}
.hx-btn:hover::before,
.cta-btn:hover::before {
  transform: translateX(110%);
  transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

.hx-btn:active,
.cta-btn:active {
  --hx-edge-a: var(--gold-muted);
  --hx-edge-b: color-mix(in srgb, var(--gold-muted) 55%, var(--bg-deep));
  color: var(--gold-muted);
  box-shadow:
    inset 0 0 0 1px rgba(1, 10, 19, 0.9),
    inset 0 2px 10px rgba(0, 0, 0, 0.6);
  transition-duration: 60ms;
}

.hx-btn:focus-visible,
.cta-btn:focus-visible {
  outline: 1px solid var(--cyan);
  outline-offset: 3px;
}

.hx-btn:disabled,
.hx-btn[aria-disabled="true"] {
  --hx-edge-a: var(--divider-strong);
  --hx-edge-b: var(--divider);
  color: var(--text-3);
  box-shadow: inset 0 0 0 1px rgba(1, 10, 19, 0.9);
  cursor: default;
  pointer-events: none;
}

.hx-btn-lg { min-height: 3.25rem; padding: 0 var(--sp-5); font-size: 1rem; }
.hx-btn-sm { min-height: 2.25rem; min-width: 6.5rem; padding: 0 var(--sp-3); font-size: 0.75rem; }

/* Hero CTA keeps its slightly roomier proportions. */
.cta-btn { min-height: 3rem; letter-spacing: 0.16em; }

@media (prefers-reduced-motion: reduce) {
  .hx-btn::before,
  .cta-btn::before { display: none; }
}

/* ===== Experience: match history =====
   One row per job, laid out like the client's match history: square
   "champion" icon (company logo), title/queue/summary, dates top right.
   Breakpoints are container queries so the row adapts to the main column,
   not the viewport. */
.mh { container-type: inline-size; }

.match-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.match-row {
  position: relative;
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  grid-template-areas: "icon main";
  align-items: start;
  column-gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-3);
  border: 1px solid var(--divider);
  background: rgba(10, 20, 40, 0.6);
  transition: border-color 180ms ease-out, background-color 180ms ease-out;
}
.match-row:hover {
  border-color: var(--gold-muted);
  background-color: rgba(14, 28, 52, 0.75);
}
/* Dates sit in the row's top-right corner, out of the grid, so the summary
   can use the full row width. */
.mh-date {
  position: absolute;
  top: calc(var(--sp-3) + 0.25rem);
  right: var(--sp-4);
  font-size: 0.8125rem;
  white-space: nowrap;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

.mh-icon {
  grid-area: icon;
  align-self: center; /* equal space above and below the logo */
  position: relative;
  width: 4rem;
  height: 4rem;
  padding: 2px;
  background: linear-gradient(180deg, var(--gold-text), var(--gold-muted));
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}
.mh-icon img,
.mh-monogram {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  box-shadow: inset 0 0 0 1px rgba(1, 10, 19, 0.9);
}
/* Company logos sit whole on the dark tile rather than cropped. */
.mh-icon img {
  object-fit: contain;
  padding: 16%;
  background: radial-gradient(circle at 50% 35%, var(--bg-panel) 0%, var(--bg-deep) 80%);
}
.mh-monogram {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--cyan) 14%, var(--bg-panel)) 0%, var(--bg-deep) 78%);
  font-family: "BeaufortLoL", "Cinzel", serif;
  font-weight: 700;
  font-size: 1.875rem;
  line-height: 1;
  color: var(--gold-text);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

.mh-main { grid-area: main; min-width: 0; }
.mh-org {
  margin: 0;
  padding-right: 7rem; /* clear of the date */
  font-family: "BeaufortLoL", "Cinzel", serif;
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: 0.04em;
  line-height: 1.2;
  color: var(--gold-bright);
}
.mh-queue {
  margin-top: 0.25rem;
  font-family: "BeaufortLoL", "Cinzel", serif;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.mh-desc {
  margin: var(--sp-2) 0 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text-2);
}

/* Phone: smaller icon, tighter padding. */
@container (max-width: 34rem) {
  .match-row {
    grid-template-columns: 3.5rem minmax(0, 1fr);
    padding: var(--sp-3);
  }
  .mh-icon { width: 3.5rem; height: 3.5rem; }
  .mh-monogram { font-size: 1.5rem; }
  .mh-date { right: var(--sp-3); }
}

/* ===== Projects: collection grid ===== */
.proj-page { max-width: 80rem; }

/* Tiles */
.proj-grid-tiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(10.5rem, 100%), 1fr));
  gap: var(--sp-3);
}
.proj-tile-cell { display: flex; min-width: 0; }
.proj-tile {
  --tile-edge: color-mix(in srgb, var(--gold-muted) 60%, var(--bg-deep));
  position: relative;
  appearance: none;
  width: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--tile-edge);
  background: var(--bg-deep);
  color: inherit;
  font: inherit;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  transition:
    transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 180ms ease-out,
    box-shadow 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
.proj-tile:hover,
.proj-tile:focus-visible {
  z-index: 1;
  border-color: var(--gold);
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.6),
    0 0 18px color-mix(in srgb, var(--gold) 30%, transparent);
}
.proj-tile:focus-visible { outline: 1px solid var(--cyan); outline-offset: 3px; }
.proj-tile:active { transform: scale(0.99); transition-duration: 80ms; }

.proj-tile-art {
  container-type: inline-size;
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--bg-panel);
}
.proj-art-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center top;
  filter: saturate(0.85) brightness(0.8);
  transition: filter 260ms ease-out, transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.proj-tile:hover .proj-art-img,
.proj-tile:focus-visible .proj-art-img { filter: none; transform: scale(1.05); }
/* Shade into the plate + a hairline inner frame. */
.proj-tile-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(1, 10, 19, 0.85) 0%, rgba(1, 10, 19, 0) 36%);
  box-shadow: inset 0 0 0 1px rgba(1, 10, 19, 0.6), inset 0 0 40px rgba(1, 10, 19, 0.35);
  pointer-events: none;
}

.proj-tile-flag {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 1;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--gold);
  background: rgba(1, 10, 19, 0.88);
  font-family: "BeaufortLoL", "Cinzel", serif;
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-bright);
}

.proj-tile-plate {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.75rem 0.5rem 0.8125rem;
  border-top: 1px solid var(--gold-muted);
  background: linear-gradient(180deg, var(--bg-panel) 0%, var(--bg-deep) 100%);
  transition: border-color 180ms ease-out;
}
/* Jewel on the seam between art and plate. */
.proj-tile-plate::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  width: 8px;
  height: 8px;
  border: 1px solid var(--gold-muted);
  background: var(--bg-deep);
  transform: translateX(-50%) rotate(45deg);
  transition: border-color 180ms ease-out, background-color 180ms ease-out;
}
.proj-tile:hover .proj-tile-plate,
.proj-tile:focus-visible .proj-tile-plate { border-top-color: var(--gold); }
.proj-tile:hover .proj-tile-plate::before,
.proj-tile:focus-visible .proj-tile-plate::before { border-color: var(--gold-bright); background: var(--gold-muted); }
.proj-tile-name {
  font-family: "BeaufortLoL", "Cinzel", serif;
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.05em;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--gold-bright);
  text-wrap: balance;
}
/* One-line tagline under the name ("Laser tag on phones"). */
.proj-tile-tagline {
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--text-2);
}

/* Drawn fallback art: hex lattice, a framed hexagon, the initials. The
   lattice is a mask over the accent color so it follows the theme. */
.proj-crest {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 44%,
      color-mix(in srgb, var(--cyan) 16%, var(--bg-panel)) 0%,
      var(--bg-panel) 42%,
      var(--bg-deep) 100%);
}
.proj-crest::before {
  --hex-lattice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cpath fill-rule='evenodd' d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/svg%3E");
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold);
  opacity: 0.1;
  -webkit-mask: var(--hex-lattice) 0 0 / 28px 49px repeat;
  mask: var(--hex-lattice) 0 0 / 28px 49px repeat;
}
.proj-crest-hex {
  position: absolute;
  top: 44%;
  left: 50%;
  width: 62%;
  transform: translate(-50%, -50%);
  overflow: visible;
}
.proj-crest-hex polygon:first-child {
  fill: rgba(1, 10, 19, 0.6);
  stroke: var(--gold);
  stroke-width: 1.5;
}
.proj-crest-hex polygon:last-child {
  fill: none;
  stroke: var(--gold-muted);
  stroke-width: 1;
}
.proj-crest-mark {
  position: absolute;
  top: 44%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "BeaufortLoL", "Cinzel", serif;
  font-weight: 700;
  font-size: 19cqi;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--gold-text);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
}
.proj-tile:hover .proj-crest-mark { color: var(--gold-bright); }

/* ===== Projects: detail view =====
   Covers the main panel (portaled into .main) so the top bar, section nav
   and social panel stay put, like the client's champion details. The opening reveal of
   the framed art is the page's one authored motion. */
.proj-detail {
  position: absolute;
  /* Under the translucent left nav (desktop) or below the phone tab row
     (shell.css), so the nav stays visible and usable over the art. */
  inset: var(--nav-row-h, 0px) 0 0 0;
  z-index: 20;
  overflow: hidden;
  background: var(--bg-deep);
  animation: pd-fade 220ms ease-out both;
}
.proj-detail.is-fixed { position: fixed; inset: 0; z-index: 9000; }
@keyframes pd-fade { from { opacity: 0; } }

/* The art's own colors, blown out behind everything. */
.pd-backdrop {
  position: absolute;
  inset: -12%;
  background:
    radial-gradient(ellipse at 30% 40%, color-mix(in srgb, var(--cyan) 14%, transparent), transparent 60%),
    var(--bg-panel);
  background-size: cover;
  background-position: center;
  filter: blur(56px) saturate(1.3);
  opacity: 0.4;
  pointer-events: none;
  animation: pd-fade 600ms ease-out both;
}
.proj-detail::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(1, 10, 19, 0.35) 0%, rgba(1, 10, 19, 0.8) 55%, rgba(1, 10, 19, 0.9) 100%),
    linear-gradient(to top, rgba(1, 10, 19, 0.85) 0%, transparent 40%);
  pointer-events: none;
}

.pd-close {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  z-index: 3;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 50%;
  background:
    linear-gradient(var(--bg-deep), var(--bg-deep)) padding-box,
    linear-gradient(180deg, var(--gold-text), var(--gold-muted)) border-box;
  color: var(--gold-text);
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(1, 10, 19, 0.9), 0 2px 6px rgba(0, 0, 0, 0.5);
  transition: color 150ms ease-out, box-shadow 200ms ease-out;
}
.pd-close:hover {
  color: var(--gold-bright);
  box-shadow: inset 0 0 0 1px rgba(1, 10, 19, 0.9), inset 0 0 12px rgba(11, 196, 227, 0.4), 0 2px 8px rgba(0, 0, 0, 0.6);
}
.pd-close:active { color: var(--gold-muted); }
.pd-close:focus-visible { outline: 1px solid var(--cyan); outline-offset: 3px; }

.pd-scroll {
  container-type: inline-size;
  position: absolute;
  /* Content starts right of the left nav; the art backdrop runs under it. */
  inset: 0 0 0 var(--nav-w, 0px);
  z-index: 2;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  padding: clamp(3.5rem, 6vh, 5rem) var(--page-gutter-x) var(--sp-4);
  scrollbar-width: thin;
  scrollbar-color: var(--gold-muted) transparent;
}
.pd-scroll::-webkit-scrollbar { width: 8px; }
.pd-scroll::-webkit-scrollbar-thumb { background: var(--gold-muted); }

.pd-body {
  flex: 1 0 auto;
  display: grid;
  grid-template-columns: minmax(12rem, 21rem) minmax(0, 36rem);
  justify-content: center;
  align-items: center;
  gap: clamp(1.75rem, 4vw, 4rem);
}

.pd-art {
  container-type: inline-size;
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid var(--gold);
  background: var(--bg-panel);
  box-shadow:
    0 0 0 4px rgba(1, 10, 19, 0.9),
    0 0 0 5px var(--gold-muted),
    0 24px 48px rgba(0, 0, 0, 0.65);
  animation: pd-art-in 680ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.pd-art .proj-art-img { filter: none; }
@keyframes pd-art-in {
  from {
    opacity: 0.25;
    transform: translateY(12px) scale(0.97);
    filter: blur(6px);
    clip-path: inset(10% 0 10% 0);
  }
  to { opacity: 1; transform: none; filter: blur(0); clip-path: inset(0); }
}

.pd-info { min-width: 0; }
.pd-info > * { animation: pd-info-in 560ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.pd-info > :nth-child(2) { animation-delay: 40ms; }
.pd-info > :nth-child(3) { animation-delay: 80ms; }
.pd-info > :nth-child(4) { animation-delay: 120ms; }
.pd-info > :nth-child(5) { animation-delay: 160ms; }
@keyframes pd-info-in { from { opacity: 0.2; transform: translateX(14px); } }

.pd-name {
  margin: 0;
  font-family: "BeaufortLoL", "Cinzel", serif;
  font-weight: 700;
  font-size: clamp(2.25rem, 5cqi, 3.75rem);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--gold-bright);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
  text-wrap: balance;
}
.pd-tagline {
  margin-top: var(--sp-2);
  font-size: 1rem;
  color: var(--gold-text);
}
.pd-desc {
  margin: var(--sp-4) 0 0;
  max-width: 62ch;
  font-size: 1rem;
  line-height: 1.65;
  color: color-mix(in srgb, var(--text-1) 70%, var(--text-2));
}
.pd-tech { margin-top: var(--sp-5); }
.pd-tech-title {
  display: flex;
  align-items: center;
  gap: var(--sp-2h);
  margin: 0 0 var(--sp-2h);
  font-family: "BeaufortLoL", "Cinzel", serif;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.pd-tech-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--gold-muted), transparent);
}
.pd-tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.pd-tag {
  padding: 0.375rem 0.625rem;
  border: 1px solid var(--divider-strong);
  background: rgba(1, 10, 19, 0.65);
  font-size: 0.8125rem;
  color: var(--text-1);
}
.pd-link { margin-top: var(--sp-5); }

.pd-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding-top: var(--sp-5);
}
.pd-step {
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--gold-text);
  cursor: pointer;
  transition: color 150ms ease-out;
}
.pd-step::before {
  content: "";
  position: absolute;
  inset: 0.5rem;
  border: 1px solid var(--gold-muted);
  background: rgba(1, 10, 19, 0.85);
  transform: rotate(45deg);
  transition: border-color 150ms ease-out, box-shadow 200ms ease-out;
}
.pd-step svg { position: relative; }
.pd-step:hover { color: var(--gold-bright); }
.pd-step:hover::before { border-color: var(--gold-text); box-shadow: inset 0 0 10px rgba(11, 196, 227, 0.4); }
.pd-step:active { color: var(--gold-muted); }
.pd-step:focus-visible { outline: 1px solid var(--cyan); outline-offset: 2px; }
.pd-pos {
  min-width: 4.5rem;
  text-align: center;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
}
.pd-pos .n { color: var(--gold-bright); font-weight: 600; }

/* Laptop widths: a smaller art column leaves the info column room for the
   one-line description. */
@container (42rem < width <= 64rem) {
  .pd-body {
    grid-template-columns: minmax(10rem, 14rem) minmax(0, 36rem);
    gap: 1.75rem;
  }
}

/* Narrow main panel: art above, info below. */
/* 42rem: with the left nav beside it, the detail is ~45rem wide in a
   1280px window and still has room for art + info side by side. */
@container (max-width: 42rem) {
  .pd-body {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    justify-items: stretch;
    gap: var(--sp-4);
  }
  .pd-art { justify-self: center; width: min(15rem, 70%); }
  .pd-name { font-size: clamp(2rem, 10cqi, 2.75rem); }
  .pd-tech, .pd-link { margin-top: var(--sp-4); }
}

/* Reduced motion: keep the fades that say "this opened", drop the travel,
   blur, clip reveal and hover zoom. */
@media (prefers-reduced-motion: reduce) {
  .pd-art, .pd-info > * { animation: pd-fade 200ms ease-out both; }
  .proj-tile:hover, .proj-tile:focus-visible, .proj-tile:active { transform: none; }
  .proj-tile:hover .proj-art-img,
  .proj-tile:focus-visible .proj-art-img { transform: none; }
}

/* ===== Journal: store tiles =====
   Photo on top, dark name plate with the caption below; the frame turns
   gold on hover like the client store's item tiles. */
.store-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
  gap: var(--sp-3);
}
.store-cell { display: flex; min-width: 0; }
.store-tile {
  --tile-edge: color-mix(in srgb, var(--gold-muted) 55%, var(--bg-deep));
  position: relative;
  appearance: none;
  width: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--tile-edge);
  background: var(--bg-deep);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  transition: border-color 180ms ease-out, box-shadow 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* Inner gold frame that appears on hover. */
.store-tile::after {
  content: "";
  position: absolute;
  inset: 3px;
  z-index: 1;
  border: 1px solid var(--gold);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease-out;
}
.store-tile:hover,
.store-tile:focus-visible {
  border-color: var(--gold);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.55),
    0 0 16px color-mix(in srgb, var(--gold) 25%, transparent);
}
.store-tile:hover::after,
.store-tile:focus-visible::after { opacity: 0.55; }
.store-tile:focus-visible { outline: 1px solid var(--cyan); outline-offset: 3px; }
.store-tile:active { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); }

.store-art {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--bg-panel);
}
.store-art img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: saturate(0.9) brightness(0.88);
  transition: filter 260ms ease-out, transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.store-tile:hover .store-art img,
.store-tile:focus-visible .store-art img { filter: none; transform: scale(1.04); }
.store-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(1, 10, 19, 0.7) 0%, rgba(1, 10, 19, 0) 30%);
  pointer-events: none;
}

.store-plate {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-height: 4.25rem;
  padding: 0.75rem 0.875rem 0.875rem;
  border-top: 1px solid var(--gold-muted);
  background: linear-gradient(180deg, var(--bg-panel) 0%, var(--bg-deep) 100%);
  transition: border-color 180ms ease-out;
}
.store-tile:hover .store-plate,
.store-tile:focus-visible .store-plate { border-top-color: var(--gold); }
.store-title {
  font-family: "BeaufortLoL", "Cinzel", serif;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-bright);
}
.store-caption {
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--text-1);
  text-wrap: pretty;
}

/* Lightbox chrome in the client's language: round gold close, Spiegel caption. */
.journal-lightbox .jl-close {
  border: 2px solid transparent;
  border-radius: 50%;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  background:
    linear-gradient(var(--bg-deep), var(--bg-deep)) padding-box,
    linear-gradient(180deg, var(--gold-text), var(--gold-muted)) border-box;
  color: var(--gold-text);
  box-shadow: inset 0 0 0 1px rgba(1, 10, 19, 0.9), 0 2px 6px rgba(0, 0, 0, 0.5);
  transition: color 150ms ease-out, box-shadow 200ms ease-out;
}
.journal-lightbox .jl-close:hover {
  background:
    linear-gradient(var(--bg-deep), var(--bg-deep)) padding-box,
    linear-gradient(180deg, var(--gold-text), var(--gold-muted)) border-box;
  color: var(--gold-bright);
  box-shadow: inset 0 0 0 1px rgba(1, 10, 19, 0.9), inset 0 0 12px rgba(11, 196, 227, 0.4), 0 2px 8px rgba(0, 0, 0, 0.6);
}
.journal-lightbox .jl-close:focus-visible { outline: 1px solid var(--cyan); outline-offset: 3px; }
.journal-lightbox .jl-img { border-color: var(--gold); }
.journal-lightbox .jl-caption {
  font-family: "Spiegel", "Source Sans 3", sans-serif;
  font-size: 0.9375rem;
  color: var(--text-1);
}

@media (prefers-reduced-motion: reduce) {
  .store-tile:hover .store-art img,
  .store-tile:focus-visible .store-art img { transform: none; }
}
/* Phones get one photo per row (feed-style); give the feed a little air. */
@media (max-width: 480px) { .store-grid { gap: var(--sp-4); } }

/* ===== Browser surfaces on these pages ===== */
.mh ::selection,
.proj-page ::selection,
.proj-detail ::selection,
.journal-page ::selection,
.journal-lightbox ::selection {
  background: color-mix(in srgb, var(--gold) 35%, transparent);
  color: var(--gold-bright);
}