/* =====================================================================
   Ragnar Origins — design system
   Ported from the Next.js scaffold's globals.css + Tailwind utilities
   to plain CSS so the site is hand-editable static HTML.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Fellix — self-hosted, matching the ragnardigital.art main site
   --------------------------------------------------------------------- */
@font-face { font-family: "Fellix"; src: url("../fonts/Fellix-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Fellix"; src: url("../fonts/Fellix-LightItalic.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Fellix"; src: url("../fonts/Fellix-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Fellix"; src: url("../fonts/Fellix-RegularItalic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Fellix"; src: url("../fonts/Fellix-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Fellix"; src: url("../fonts/Fellix-MediumItalic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Fellix"; src: url("../fonts/Fellix-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Fellix"; src: url("../fonts/Fellix-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Fellix"; src: url("../fonts/Fellix-ExtraBold.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Fellix"; src: url("../fonts/Fellix-Black.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }

:root {
  /* Canvas — warm black, never pure */
  --color-canvas: #0b0b0a;
  --color-canvas-raised: #131210;
  --color-canvas-sunken: #060605;

  /* Type — bone, not stark white */
  --color-bone: #e8e2d5;
  --color-bone-dim: #b8b2a4;
  --color-bone-faint: #6e6a60;

  /* Hairlines + structure */
  --color-rule: #2a2823;
  --color-rule-bright: #3a3833;

  /* Phosphor accent — used sparingly */
  --color-phosphor: #b6ff3a;
  --color-phosphor-deep: #76a824;

  /* Type stack */
  --font-display: "Fellix", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Fellix", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Fellix", "Helvetica Neue", Arial, sans-serif;
}

/* ---------------------------------------------------------------------
   Reset / base
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--color-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-canvas);
  color: var(--color-bone);
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.005em;
}

main { flex: 1 1 auto; }

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }

::selection {
  background: var(--color-phosphor);
  color: var(--color-canvas);
}

/* Subtle grain overlay */
.grain-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------------------------------------------------------------------
   Layout primitives
   --------------------------------------------------------------------- */
.container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
@media (min-width: 768px) {
  .container { padding: 0 2.5rem; }
}

.rule-bottom { border-bottom: 1px solid var(--color-rule); }
.rule-top    { border-top: 1px solid var(--color-rule); }

/* ---------------------------------------------------------------------
   Typography utilities
   --------------------------------------------------------------------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-bone-dim);
}

.eyebrow-phosphor {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-phosphor);
}

.section-mark {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-phosphor);
}

.display-title {
  font-family: var(--font-display);
  font-weight: 360;
  font-variation-settings: "opsz" 144, "SOFT" 30;
  line-height: 0.98;
  letter-spacing: -0.025em;
  font-size: clamp(2.6rem, 7vw, 6.4rem);
  color: var(--color-bone);
  margin: 0;
}

.work-title {
  font-family: var(--font-display);
  font-weight: 380;
  font-variation-settings: "opsz" 96, "SOFT" 50;
  font-style: italic;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--color-bone);
  margin: 0;
}

.text-dim   { color: var(--color-bone-dim); }
.text-faint { color: var(--color-bone-faint); }

/* ---------------------------------------------------------------------
   Buttons & links
   --------------------------------------------------------------------- */
.btn-phosphor {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.2rem;
  border: 1px solid var(--color-phosphor);
  color: var(--color-phosphor);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: transparent;
  transition: all 0.35s ease;
  cursor: pointer;
}
.btn-phosphor:hover {
  background: var(--color-phosphor);
  color: var(--color-canvas);
  box-shadow: 0 0 28px rgba(182, 255, 58, 0.32);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.2rem;
  border: 1px solid var(--color-rule-bright);
  color: var(--color-bone);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: transparent;
  transition: all 0.35s ease;
  cursor: pointer;
}
.btn-ghost:hover {
  border-color: var(--color-bone);
  background: var(--color-canvas-raised);
}

.phosphor-link {
  position: relative;
  display: inline-block;
}
.phosphor-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 1px;
  width: 100%;
  background: var(--color-phosphor);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.42s cubic-bezier(0.2, 0.7, 0.1, 1);
}
.phosphor-link:hover::after { transform: scaleX(1); }

/* ---------------------------------------------------------------------
   Header & footer
   --------------------------------------------------------------------- */
.site-header {
  position: relative;
  z-index: 10;
  border-bottom: 1px solid var(--color-rule);
}
.site-header .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}
@media (min-width: 768px) {
  .site-nav { gap: 2.25rem; }
}
.site-nav a {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-bone-dim);
  transition: color 0.3s ease;
}
.site-nav a:hover { color: var(--color-bone); }
.site-nav a[aria-current="page"] { color: var(--color-phosphor); }

.wordmark {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.wordmark .name {
  display: flex;
  align-items: baseline;
  gap: 0.15em;
}
.wordmark .name .ragnar {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--color-bone);
  font-size: 18px;
  letter-spacing: -0.015em;
  font-variation-settings: "opsz" 96, "SOFT" 40;
}
.wordmark .name .origins {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-bone);
  font-size: 18px;
  font-weight: 380;
  letter-spacing: -0.005em;
  font-variation-settings: "opsz" 96, "SOFT" 80;
}

.site-footer {
  position: relative;
  z-index: 10;
  margin-top: 8rem;
  border-top: 1px solid var(--color-rule);
}
.site-footer .top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}
@media (min-width: 768px) {
  .site-footer .top {
    grid-template-columns: 5fr 7fr;
  }
  .site-footer .right { text-align: right; }
}
.site-footer .brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.site-footer .brand .label {
  font-family: var(--font-display);
  color: var(--color-bone);
  font-size: 1.25rem;
  letter-spacing: -0.01em;
}
.site-footer .brand .label em {
  font-style: italic;
  font-family: var(--font-display);
}
.site-footer .bottom {
  border-top: 1px solid var(--color-rule);
}
.site-footer .bottom .inner {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.site-footer .copyright {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-bone-faint);
}

/* ---------------------------------------------------------------------
   Home — hero + works grid
   --------------------------------------------------------------------- */
.home-hero {
  border-bottom: 1px solid var(--color-rule);
}
.home-hero .inner {
  text-align: center;
  padding-top: 5rem;
  padding-bottom: 4rem;
}
@media (min-width: 768px) {
  .home-hero .inner {
    padding-top: 7rem;
    padding-bottom: 5rem;
  }
}
.home-hero .lede {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-bone-dim);
  margin: 1.5rem auto 0;
  max-width: 48rem;
  font-size: clamp(1.1rem, 1.4vw, 1.4rem);
  line-height: 1.4;
}

/* Origins ellipsis animation */
.origin-dots {
  display: inline-flex;
  gap: 0.04em;
  margin-left: 0.06em;
  color: var(--color-phosphor);
  text-shadow: 0 0 14px rgba(182, 255, 58, 0.32);
}
.origin-dots > span {
  opacity: 0;
  animation-duration: 14s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
.origin-dots > span:nth-child(1) { animation-name: origin-dot-1; }
.origin-dots > span:nth-child(2) { animation-name: origin-dot-2; }
.origin-dots > span:nth-child(3) { animation-name: origin-dot-3; }
@keyframes origin-dot-1 {
  0%   { opacity: 0; }
  18%  { opacity: 1; }
  78%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes origin-dot-2 {
  0%, 18%  { opacity: 0; }
  36%      { opacity: 1; }
  78%      { opacity: 1; }
  100%     { opacity: 0; }
}
@keyframes origin-dot-3 {
  0%, 36%  { opacity: 0; }
  54%      { opacity: 1; }
  78%      { opacity: 1; }
  100%     { opacity: 0; }
}

.works-grid-section {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
@media (min-width: 768px) {
  .works-grid-section {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}
.works-grid {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 2rem;
  row-gap: 5rem;
}
@media (min-width: 768px) { .works-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .works-grid { grid-template-columns: 1fr 1fr 1fr; } }

.catalog-item { display: block; }
.catalog-item .meta-top {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 0.75rem;
}
.catalog-item .plate {
  aspect-ratio: 4 / 5;
}
.catalog-item .plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.9;
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.catalog-item:hover .plate img {
  opacity: 1;
  transform: scale(1.015);
}
.catalog-item .meta {
  margin-top: 1.25rem;
}
.catalog-item .meta .eyebrow { margin-bottom: 0.5rem; }
.catalog-item .meta .work-title {
  font-size: 1.5rem;
  transition: color 0.5s ease;
}
.catalog-item:hover .meta .work-title { color: var(--color-phosphor); }
.catalog-item .meta .blurb {
  font-family: var(--font-serif);
  color: var(--color-bone-dim);
  font-size: 14px;
  line-height: 1.6;
  margin-top: 0.75rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Status pill */
.status-pill {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border: 1px solid;
  padding: 0.25rem 0.5rem;
  display: inline-block;
}
.status-pill.available { color: var(--color-phosphor); border-color: var(--color-phosphor); }
.status-pill.reserved  { color: var(--color-bone-dim); border-color: var(--color-rule-bright); }
.status-pill.placed    { color: var(--color-bone-faint); border-color: var(--color-rule); }

/* ---------------------------------------------------------------------
   Plate (image frame, museum-catalog feel)
   --------------------------------------------------------------------- */
.plate {
  position: relative;
  background: var(--color-canvas-sunken);
  outline: 1px solid var(--color-rule);
  outline-offset: 0;
  overflow: hidden;
}
.plate::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    180deg,
    transparent 0,
    transparent 3px,
    rgba(0, 0, 0, 0.18) 3px,
    rgba(0, 0, 0, 0.18) 4px
  );
  z-index: 2;
  mix-blend-mode: overlay;
  opacity: 0.5;
}

/* ---------------------------------------------------------------------
   Work detail page
   --------------------------------------------------------------------- */
.crumb-bar {
  border-bottom: 1px solid var(--color-rule);
}
.crumb-bar .inner {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.crumb-bar a {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-bone-dim);
  transition: color 0.3s ease;
}
.crumb-bar a:hover { color: var(--color-phosphor); }

.work-hero {
  border-bottom: 1px solid var(--color-rule);
}
.work-hero .inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding-top: 3rem;
  padding-bottom: 3rem;
}
@media (min-width: 768px) {
  .work-hero .inner {
    gap: 3rem;
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}
@media (min-width: 1024px) {
  .work-hero .inner {
    grid-template-columns: 7fr 5fr;
  }
}
.work-hero .plate {
  /* No aspect-ratio constraint — image dictates height at its true ratio */
}
.work-hero .plate img {
  display: block;
  width: 100%;
  height: auto;
}
.work-hero .ident { }
@media (min-width: 1024px) {
  .work-hero .ident { position: sticky; top: 2rem; align-self: start; }
}
.work-hero .ident .artist {
  margin-bottom: 0.75rem;
}
.work-hero .ident .work-title {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  margin-top: 0;
}
.work-hero .ident .yearline {
  margin-top: 0.75rem;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--color-bone-dim);
}
.work-hero .ident .blurb {
  font-family: var(--font-serif);
  color: var(--color-bone);
  font-size: 16px;
  line-height: 1.7;
  margin-top: 2rem;
  max-width: 28rem;
}
.work-hero .ident .cta {
  margin-top: 2.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Catalog metadata key/value pairs — museum wall-label feel */
.cat-list {
  margin-top: 2.5rem;
  padding-top: 0.5rem;
}
.cat-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 1.5rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--color-rule);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
}
.cat-row dt {
  color: var(--color-bone-faint);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 10.5px;
  padding-top: 1px;
  margin: 0;
}
.cat-row dd {
  color: var(--color-bone);
  margin: 0;
}
.cat-row dd .line { display: block; line-height: 1.6; }
.cat-row dd .line + .line { margin-top: 0.15rem; }
.cat-row dd .line.italic { font-style: italic; }

/* Essay */
.essay-section {
  border-bottom: 1px solid var(--color-rule);
}
.essay-section:last-of-type { border-bottom: none; }
.essay-section .inner {
  padding-top: 6rem;
  padding-bottom: 6rem;
}
@media (min-width: 768px) {
  .essay-section .inner {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }
}
.essay-section .essay-body {
  max-width: 44rem;
  margin: 0 auto;
}
.essay-body p {
  font-family: var(--font-serif);
  color: var(--color-bone);
  font-size: 18px;
  line-height: 1.7;
  margin: 0 0 1.75rem 0;
}
.essay-body p:first-of-type::first-letter {
  font-family: var(--font-display);
  color: var(--color-phosphor);
  font-size: 3.75rem;
  float: left;
  line-height: 0.85;
  margin-right: 0.75rem;
  margin-top: 0.25rem;
}

.pull-quote {
  margin: 3.5rem 0;
  border-left: 2px solid var(--color-phosphor);
  padding-left: 1.75rem;
}
.pull-quote p {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-bone);
  font-size: clamp(1.4rem, 2vw, 1.85rem);
  line-height: 1.3;
  font-variation-settings: "opsz" 96, "SOFT" 80;
  margin: 0;
}
.pull-quote cite {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-bone-faint);
  margin-top: 1rem;
  display: block;
}

/* Stub disclaimer banner */
.stub-banner {
  border-bottom: 1px solid var(--color-rule);
  background: var(--color-canvas-raised);
}
.stub-banner .inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.stub-banner .tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-phosphor);
}
.stub-banner .body {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-bone-dim);
}

/* ---------------------------------------------------------------------
   Inquire page
   --------------------------------------------------------------------- */
.inquire-hero {
  border-bottom: 1px solid var(--color-rule);
}
.inquire-hero .inner {
  padding-top: 5rem;
  padding-bottom: 4rem;
}
@media (min-width: 768px) {
  .inquire-hero .inner {
    padding-top: 8rem;
    padding-bottom: 5rem;
  }
}
.inquire-hero .lede {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-bone-dim);
  margin: 1.5rem 0 0 0;
  max-width: 48rem;
  font-size: clamp(1.05rem, 1.4vw, 1.35rem);
  line-height: 1.4;
}

.inquire-section {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  padding-top: 4rem;
  padding-bottom: 4rem;
}
@media (min-width: 768px) {
  .inquire-section {
    grid-template-columns: 3fr 9fr;
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}
.inquire-section .marker {
  align-self: start;
}
.inquire-section .subject-block {
  margin-top: 1.5rem;
  border-left: 2px solid var(--color-phosphor);
  padding-left: 1rem;
}
.inquire-section .subject-block .label { margin-bottom: 0.25rem; }
.inquire-section .subject-block .title {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-bone);
  font-size: 1.25rem;
  line-height: 1.05;
}
.inquire-section .subject-block .sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-bone-dim);
  margin-top: 0.25rem;
}

/* Form */
.inquire-form { display: grid; gap: 2rem; }
.field {
  display: block;
}
.field .label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.field .label .req { color: var(--color-phosphor); }
.field input,
.field textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-rule-bright);
  color: var(--color-bone);
  font-family: var(--font-serif);
  font-size: 17px;
  padding: 0.75rem 0;
  outline: none;
  transition: border-color 0.25s ease;
}
.field input:focus,
.field textarea:focus { border-color: var(--color-phosphor); }
.field input::placeholder,
.field textarea::placeholder { color: var(--color-bone-faint); }
.field textarea {
  border: 1px solid var(--color-rule-bright);
  padding: 1rem;
  resize: vertical;
  font-size: 16px;
  line-height: 1.6;
}
.form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-top: 1rem;
}

/* Submitted confirmation */
.inquire-ack {
  border: 1px solid var(--color-phosphor);
  padding: 2.5rem;
}
.inquire-ack .headline {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-bone);
  font-size: clamp(1.4rem, 2vw, 1.85rem);
  line-height: 1.3;
  margin: 1rem 0 0 0;
}
.inquire-ack .small {
  font-family: var(--font-serif);
  color: var(--color-bone-dim);
  font-size: 15px;
  line-height: 1.6;
  margin-top: 1.5rem;
}

/* ---------------------------------------------------------------------
   Page-load reveal
   --------------------------------------------------------------------- */
@keyframes reveal-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.reveal {
  animation: reveal-up 0.85s cubic-bezier(0.2, 0.7, 0.1, 1) both;
}
.reveal.delay-1 { animation-delay: 120ms; }

/* ---------------------------------------------------------------------
   Lightbox — click work-hero image to view full-size
   --------------------------------------------------------------------- */
.work-hero .plate img {
  cursor: zoom-in;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  background: rgba(6, 6, 5, 0.92);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  cursor: zoom-out;
}
.lightbox[data-open="true"] {
  opacity: 1;
  pointer-events: auto;
}
.lightbox .lb-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  outline: 1px solid var(--color-rule);
  background: var(--color-canvas-sunken);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
  transform: scale(0.985);
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.1, 1);
}
.lightbox[data-open="true"] .lb-image {
  transform: scale(1);
}
.lightbox .lb-caption {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-bone-dim);
  text-align: center;
  max-width: calc(100% - 4rem);
}
.lightbox .lb-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--color-rule-bright);
  color: var(--color-bone);
  font-family: var(--font-mono);
  font-size: 18px;
  cursor: pointer;
  transition: all 0.25s ease;
}
.lightbox .lb-close:hover {
  border-color: var(--color-phosphor);
  color: var(--color-phosphor);
}
body.lb-open {
  overflow: hidden;
}
@media (max-width: 600px) {
  .lightbox { padding: 1rem; }
  .lightbox .lb-close { top: 0.75rem; right: 0.75rem; }
}