/* ============================================
   Sky Relics — magazine.css
   Editorial / portfolio component layer, on top of screen.css.

   Visual language deliberately mirrors the /tools/ page (the house style):
   centered .page-header, white→black gradient-border glass panels, muted
   letter-spaced type, .btn CTAs, background slideshow behind everything.

   screen.css already provides: base palette, .page-header, .section-title,
   .photo-grid + lightbox, .btn, .page-footer, light-mode + reduced-motion.
   This file adds the header nav row, page hero, long-form editorial prose
   and the interactive components (figures, before/after, viewer embeds,
   pull-quote, tech-specs, work-cards). Tunables live in --mag-* below.
   ============================================ */

:root {
  --mag-measure: 66ch;          /* readable prose width            */
  --mag-wide: 960px;            /* matches the tools page rails     */
  --mag-gap: 1.2rem;
  --mag-radius: 8px;

  --mag-panel-bg: rgba(0, 0, 0, 0.15);
  --mag-panel-bg-soft: rgba(0, 0, 0, 0.1);
  --mag-blur: blur(8px);

  --mag-ink: #ccc;              /* body copy        */
  --mag-ink-soft: #999;         /* secondary copy   */
  --mag-ink-faint: #777;        /* captions, meta   */
  --mag-heading: #fff;
  --mag-rule: rgba(255, 255, 255, 0.12);
  --mag-accent: #5a8a5a;        /* the tools-page green dot/accent  */

  /* Default background-slideshow tuning for magazine pages. Project
     and case-study pages get this quiet 0.3 by default; the showcase
     hub pages (Photography / Video / 3D / about / contact / archive)
     opt in to a bolder 0.4 inline. Pages that need a totally custom
     look (e.g. Freshspring's always-difference 0.25) can still
     override both. */
  --bg-slide-opacity: 0.3;
  --bg-slide-blend: normal;
}

/* ============================================
   Gradient border (shared with the tools page) — a 1px white→black edge
   that gives glass panels a subtle top-lit rim. Apply to any panel.
   ============================================ */
/* Applied to the explicit utility class AND the standard panels, so every
   glass panel gets the tools-page rim without extra classes in the markup. */
.gradient-border,
.capability,
.cta-band,
.tech-specs,
.work-card,
.embed-frame {
  position: relative;
  border: 1px solid transparent;
}
.gradient-border::before,
.capability::before,
.cta-band::before,
.tech-specs::before,
.work-card::before,
.embed-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.25), rgba(0,0,0,0.25));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
}
/* Once the embed is activated (button clicked, viewer mounting/mounted),
   drop the gradient border so the model/splat/pano reads as floating on
   the page rather than sitting in a framed box. */
.embed.is-active .embed-frame::before { content: none; }

/* ============================================
   Header trail + nav row (inside screen.css .page-header)
   .page-header gives us the centred logo + spacing; we add the
   "SKY RELICS / Page" trail and a quiet inline nav row beneath it.
   ============================================ */
.page-header .header-logo { width: 80px; margin-bottom: 0; }

.page-header .page-trail {
  margin-top: 0.7rem;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
}
.page-header .page-trail a { color: inherit; text-decoration: none; }
.page-header .page-trail a:hover { color: var(--mag-heading); }

.page-nav {
  display: inline-flex;            /* hug the links so the pill centres */
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3rem 1.3rem;
  margin-top: 1.3rem;
  padding: 0.55rem 1.6rem;
  border-radius: 30px;
  background: rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 0 22px rgba(90, 138, 90, 0.12);  /* faint accent glow */
}
.page-nav a {
  position: relative;
  z-index: 0;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c4c4c4;
  text-decoration: none;
  padding: 0.32rem 0.1rem;
  border-bottom: 1px solid transparent;
  transition: color 0.2s, text-shadow 0.2s;
}
.page-nav a::before {
  content: '';
  position: absolute;
  left: -0.8rem;
  right: -0.8rem;
  top: -0.55rem;
  bottom: -0.55rem;
  background: rgba(255,255,255,0.08);
  border-left: 1px solid rgba(255,255,255,0.12);
  border-right: 1px solid rgba(255,255,255,0.12);
  opacity: 0;
  transform: skewX(-19deg) scaleX(0.82);
  transition: opacity 0.2s, transform 0.2s;
  z-index: -1;
}
.page-nav a::after {
  content: none;
}
.page-nav a:hover,
.page-nav a:focus-visible {
  color: var(--mag-heading);
  text-shadow: 0 0 14px rgba(255,255,255,0.22);
  outline: none;
}
.page-nav a:hover::before,
.page-nav a:focus-visible::before {
  opacity: 1;
  transform: skewX(-19deg) scaleX(1);
}
.page-nav a[aria-current="page"] {
  color: var(--mag-heading);
  border-bottom-color: transparent;
}
.page-nav a[aria-current="page"]::before {
  opacity: 1;
  transform: skewX(-19deg) scaleX(1);
}
.page-nav:has(a:hover) a[aria-current="page"]:not(:hover)::before,
.page-nav:has(a:focus-visible) a[aria-current="page"]:not(:focus-visible)::before {
  opacity: 0;
  transform: skewX(-19deg) scaleX(0.82);
}

/* Below ~700px the 6 nav links wrap and the pill becomes effectively
   viewport-wide — its rounded corners, glass background and shadow stop
   reading as a pill and start looking like a stuck-on bar against the
   screen edge. Instead of trying to make the pill look right at full
   width, we let it dissolve: transparent bg, no shadow, no rounding,
   no blur. The .nav-glass-band parent still provides the wider glass
   rail; the inner nav just contributes the text. */
@media (max-width: 700px) {
  .page-nav {
    display: flex;        /* stretch to fill the band, not hug the links */
    width: 100%;
    padding: 0.3rem 0.5rem;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* Full-width fading glass rail behind the pill nav. */
.nav-glass-band {
  position: relative;
  width: 100vw;
  margin: 1.15rem calc(50% - 50vw) 0;
  padding: 0.4rem 0;
  overflow: hidden;
}
.nav-glass-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(0,0,0,0),
    rgba(0,0,0,0.16) 18%,
    rgba(0,0,0,0.16) 82%,
    rgba(0,0,0,0)
  );
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  pointer-events: none;
}
.nav-glass-band::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(255,255,255,0),
    rgba(255,255,255,0.07) 18%,
    rgba(255,255,255,0.07) 82%,
    rgba(255,255,255,0)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) top / 100% 1px no-repeat,
    linear-gradient(#000 0 0) bottom / 100% 1px no-repeat;
  mask:
    linear-gradient(#000 0 0) top / 100% 1px no-repeat,
    linear-gradient(#000 0 0) bottom / 100% 1px no-repeat;
  pointer-events: none;
}
.nav-glass-band .page-nav {
  position: relative;
  z-index: 1;
  margin-top: 0;
  margin-bottom: 0;
  overflow: hidden;
}

/* In the footer, the nav band needs clearance from the copyright/url lines. */
.page-footer .nav-glass-band { margin-bottom: 1.6rem; }

/* ============================================
   Page hero (service pages + case studies) — kept restrained, in line
   with the tools-page header scale. Optional background via .has-image.
   ============================================ */
.page-hero {
  position: relative;
  max-width: var(--mag-wide);
  width: 100%;
  margin: 0 auto;
  padding: 1rem 1.5rem 0;
  text-align: center;
}
.page-hero.has-image {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(3rem, 8vw, 5rem) 1.5rem;
  margin-top: 1.5rem;
  /* Corners scale with the viewport gutter: 0 when the hero spans full screen
     width (≤ --mag-wide viewports), up to --mag-radius once there's room to
     either side. The −8px buffer keeps corners from popping in the very
     instant the viewport widens past --mag-wide. */
  border-radius: clamp(
    0px,
    calc((100vw - var(--mag-wide)) / 2 - 8px),
    var(--mag-radius)
  );
  overflow: hidden;
  background-image:
    linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.6)),
    var(--hero-img, none);
  background-size: cover;
  background-position: center;
}
.page-hero .eyebrow {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--mag-ink-faint);
  margin-bottom: 0.9rem;
}
.page-hero h1 {
  font-size: clamp(1.8rem, 4.5vw, 2.4rem);
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mag-heading);
  line-height: 1.2;
}
.page-hero .lede {
  max-width: 48ch;
  margin: 1.1rem auto 0;
  color: var(--mag-ink-soft);
  font-size: 0.98rem;
  line-height: 1.7;
}
.page-hero.has-image .eyebrow,
.page-hero.has-image h1,
.page-hero.has-image .lede { color: #fff; }
.page-hero .hero-meta {
  margin-top: 1.2rem;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mag-ink-faint);
}
.page-hero.has-image .hero-meta { color: rgba(255,255,255,0.85); }

/* ============================================
   Editorial prose
   ============================================ */
.editorial {
  max-width: var(--mag-measure);
  width: 100%;
  margin: 2.5rem auto;
  padding: 0 1.5rem;
  color: var(--mag-ink-soft);
  font-size: 0.98rem;
  line-height: 1.85;
}
.editorial > * + * { margin-top: 1.1rem; }
.editorial h2 {
  margin-top: 2.4rem;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mag-heading);
}
.editorial h3 {
  margin-top: 1.6rem;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--mag-heading);
}
.editorial a { color: inherit; text-decoration-color: var(--mag-accent); text-underline-offset: 0.2em; }
.editorial strong { color: var(--mag-ink); }
.editorial ul, .editorial ol { padding-left: 1.4rem; }
.editorial li + li { margin-top: 0.4rem; }

.bleed { max-width: var(--mag-wide); width: 100%; margin: 2.5rem auto; padding: 0 1.5rem; }

/* ============================================
   Captioned figure
   ============================================ */
.figure { margin: 2.5rem auto; max-width: var(--mag-wide); width: 100%; padding: 0 1.5rem; }
.figure img, .figure video {
  display: block; width: 100%; height: auto;
  border-radius: var(--mag-radius); background: rgba(0,0,0,0.35);
}
.figure figcaption {
  margin-top: 0.7rem; font-size: 0.8rem; line-height: 1.6;
  color: var(--mag-ink-faint); text-align: center;
}
.figure.narrow { max-width: var(--mag-measure); }

/* Two videos side by side (stack on mobile) */
.video-pair {
  max-width: var(--mag-wide);
  width: 100%;
  margin: 1.5rem auto;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--mag-gap);
}
.video-pair figure { margin: 0; }
.video-pair figcaption {
  margin-top: 0.7rem;
  font-size: 0.8rem;
  color: var(--mag-ink-faint);
  text-align: center;
}
@media (max-width: 700px) { .video-pair { grid-template-columns: 1fr; } }

/* ============================================
   Before / after slider — behaviour in magazine.js
   ============================================ */
.before-after {
  position: relative; max-width: var(--mag-wide); width: 100%;
  margin: 0 auto; border-radius: var(--mag-radius); overflow: hidden;
  user-select: none; touch-action: pan-y; line-height: 0; cursor: ew-resize;
}
.before-after img { display: block; width: 100%; height: auto; }
.before-after .ba-after {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; clip-path: inset(0 0 0 var(--ba-pos, 50%));
}
.before-after .ba-handle {
  position: absolute; top: 0; bottom: 0; left: var(--ba-pos, 50%);
  width: 2px; margin-left: -1px; background: rgba(255,255,255,0.85);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.3);
}
.before-after .ba-handle::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 38px; height: 38px; transform: translate(-50%, -50%);
  border-radius: 50%; background: rgba(255,255,255,0.9);
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.before-after .ba-label {
  position: absolute; bottom: 0.7rem; font-size: 0.64rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: #fff;
  background: rgba(0,0,0,0.55); padding: 0.25rem 0.6rem; border-radius: 4px; line-height: 1.2;
}
.before-after .ba-label-before { left: 0.7rem; }
.before-after .ba-label-after { right: 0.7rem; }

/* ============================================
   Interactive media embed (3D / splat / point cloud / 360 / video)
   Poster + play affordance; magazine.js swaps in the /media_viewers/
   iframe on click. data-viewer-file + data-viewer-type drive the URL.
   ============================================ */
.embed { max-width: var(--mag-wide); width: 100%; margin: 2.5rem auto; padding: 0 1.5rem; }
.embed-frame {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--mag-radius);
  overflow: hidden; background: #111;
}
.embed-frame img.embed-poster { width: 100%; height: 100%; object-fit: cover; display: block; }
.embed-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* When SkyViewer mounts directly into the frame (no-iframe path) it stamps
   the .sky-viewer class onto the frame, which carries a #111 background in
   viewer.css. Override so the page bg shows through the transparent canvas
   around the model/splat. The loading overlay gets a translucent dim so
   the spinner stays readable. */
.embed-frame.sky-viewer { background: transparent; }
.embed-frame .sky-viewer-loading:not(.hud) {
  background: rgba(17, 17, 17, 0.45);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
/* SkyViewer's canvas is position:static by default; pin it to the frame so
   it stacks above the poster img (same fix as the 360 lightbox). */
.embed-frame > canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.embed-activate {
  position: absolute; inset: 0; margin: auto; width: max-content; height: max-content;
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.8rem 1.5rem; background: rgba(0,0,0,0.5);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.4); border-radius: 40px;
  color: #fff; font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none;  /* strip default <a> underline */
  cursor: pointer; transition: background 0.2s, border-color 0.2s, transform 0.12s;
}
.embed-activate::before {
  content: ""; width: 0; height: 0; border-style: solid;
  border-width: 6px 0 6px 11px; border-color: transparent transparent transparent #fff;
}
.embed-activate:hover { background: rgba(0,0,0,0.68); border-color: #fff; transform: scale(1.03); }
.embed.is-active .embed-activate, .embed.is-active .embed-poster { display: none; }
.embed figcaption {
  margin-top: 0.7rem; font-size: 0.8rem; color: var(--mag-ink-faint);
  text-align: center;
}

/* ============================================
   Pull quote
   ============================================ */
.pull-quote {
  max-width: 32ch; margin: 2.6rem auto; padding: 0 1.5rem; text-align: center;
  font-size: clamp(1.3rem, 3vw, 1.8rem); font-weight: 300; line-height: 1.45;
  color: var(--mag-heading);
}
.pull-quote cite {
  display: block; margin-top: 1rem; font-size: 0.74rem; font-style: normal;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--mag-ink-faint);
}

/* ============================================
   Side-note / aside
   ============================================ */
.side-note {
  max-width: var(--mag-measure); margin: 2rem auto; padding: 1.2rem 1.4rem;
  border-left: 2px solid var(--mag-accent); border-radius: 0 var(--mag-radius) var(--mag-radius) 0;
  background: var(--mag-panel-bg); -webkit-backdrop-filter: var(--mag-blur); backdrop-filter: var(--mag-blur);
  color: var(--mag-ink-soft); font-size: 0.9rem; line-height: 1.7;
}
.side-note h3 {
  font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--mag-heading); margin-bottom: 0.5rem;
}

/* ============================================
   Tech-spec box
   ============================================ */
.tech-specs {
  max-width: var(--mag-measure); margin: 2.5rem auto; padding: 1.4rem 1.6rem;
  border-radius: var(--mag-radius); background: var(--mag-panel-bg-soft);
  -webkit-backdrop-filter: var(--mag-blur); backdrop-filter: var(--mag-blur);
}
.tech-specs h3 {
  font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--mag-ink-soft); margin-bottom: 1rem;
}
.tech-specs dl { display: grid; grid-template-columns: minmax(7rem, auto) 1fr; gap: 0.55rem 1.2rem; font-size: 0.88rem; }
.tech-specs dt {
  color: var(--mag-ink-faint); letter-spacing: 0.06em; text-transform: uppercase;
  font-size: 0.72rem; align-self: center;
}
.tech-specs dd { color: var(--mag-ink); }

/* ============================================
   Capability grid (service pages)
   ============================================ */
.capability-grid {
  max-width: var(--mag-wide); width: 100%; margin: 1.5rem auto; padding: 0 1.5rem;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--mag-gap);
}
@media (max-width: 760px) { .capability-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .capability-grid { grid-template-columns: 1fr; } }
.capability {
  padding: 1.4rem; border-radius: 6px; background: var(--mag-panel-bg-soft);
  -webkit-backdrop-filter: var(--mag-blur); backdrop-filter: var(--mag-blur);
}
.capability h3 {
  font-size: 0.85rem; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--mag-heading); margin-bottom: 0.6rem;
}
.capability p { font-size: 0.85rem; line-height: 1.6; color: var(--mag-ink-faint); }

/* ============================================
   Work-card grid (index + service examples + related) — magazine.js
   ============================================ */
.work-grid {
  max-width: var(--mag-wide); width: 100%; margin: 1.5rem auto; padding: 0 1.5rem;
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--mag-gap);
}
.work-card {
  display: flex; flex-direction: column; border-radius: 6px; overflow: hidden;
  flex: 1 1 280px; max-width: 340px;
  background: var(--mag-panel-bg); -webkit-backdrop-filter: var(--mag-blur); backdrop-filter: var(--mag-blur);
  text-decoration: none; color: inherit; transition: background 0.25s, transform 0.25s;
}
.work-card:hover { background: rgba(0,0,0,0.28); transform: translateY(-3px); }
.work-card-media { aspect-ratio: 3 / 2; overflow: hidden; background: rgba(0,0,0,0.3); line-height: 0; }
.work-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.work-card:hover .work-card-media img { transform: scale(1.04); }
.work-card-body { padding: 1.1rem 1.2rem 1.3rem; }
.work-card h3 {
  font-size: 0.92rem; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mag-heading);
}
.work-card .work-card-meta {
  margin-top: 0.35rem; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mag-ink-faint);
}
.work-card p { margin-top: 0.7rem; font-size: 0.86rem; line-height: 1.6; color: var(--mag-ink-soft); }

.tag-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.9rem; }
.tag {
  font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mag-ink-soft);
  border: 1px solid var(--mag-rule); border-radius: 4px; padding: 0.2rem 0.5rem;
}

.work-empty {
  max-width: var(--mag-measure); margin: 1.5rem auto; padding: 0 1.5rem;
  text-align: center; color: var(--mag-ink-faint); font-size: 0.9rem;
}

/* ============================================
   Product page — /sculpture/{slug}/
   ============================================ */
.product {
  max-width: var(--mag-wide);
  width: 100%;
  margin: 2rem auto;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 2.5rem;
  align-items: start;
}
@media (max-width: 760px) { .product { grid-template-columns: 1fr; gap: 1.5rem; } }

.product-media .photo-grid { max-width: none; padding: 0; gap: 10px; grid-template-columns: 1fr 1fr; }
.product-media .photo-grid-item img { aspect-ratio: 4 / 5; }

.product-info h1 {
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mag-heading);
  line-height: 1.2;
}
.product-info .price {
  margin-top: 0.6rem;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  color: var(--mag-ink);
}
.product-info .product-desc {
  margin-top: 1.2rem;
  color: var(--mag-ink-soft);
  line-height: 1.7;
  font-size: 0.95rem;
}
.option-group { margin-top: 1.5rem; }
.option-group h3 {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mag-ink-faint);
  margin-bottom: 0.6rem;
}
.option-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.option-row .option {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--mag-ink);
  border: 1px solid var(--mag-rule);
  border-radius: 6px;
  padding: 0.4rem 0.8rem;
}
.option-row .swatch {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--mag-rule);
  display: inline-block;
}
.product-buy { margin-top: 1.8rem; }
.product-note { margin-top: 0.7rem; font-size: 0.78rem; color: var(--mag-ink-faint); }

.back-link { max-width: var(--mag-wide); margin: 1rem auto 0; padding: 0 1.5rem; text-align: center; }
.back-link a {
  font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--mag-ink-faint); text-decoration: none;
}
.back-link a:hover { color: var(--mag-heading); }

/* ============================================
   Call-to-action band
   ============================================ */
.cta-band {
  max-width: var(--mag-wide); width: 100%; margin: 3.5rem auto 0;
  padding: clamp(2rem, 5vw, 3rem) 1.5rem; text-align: center; border-radius: var(--mag-radius);
  background: var(--mag-panel-bg); -webkit-backdrop-filter: var(--mag-blur); backdrop-filter: var(--mag-blur);
}
.cta-band h2 {
  font-size: clamp(1.2rem, 3vw, 1.6rem); font-weight: 300; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--mag-heading); margin-bottom: 0.8rem;
}
.cta-band p { max-width: 46ch; margin: 0 auto 1.6rem; color: var(--mag-ink-soft); line-height: 1.7; }

/* ============================================
   Light mode
   ============================================ */
@media (prefers-color-scheme: light) {
  :root {
    --mag-panel-bg: rgba(255, 255, 255, 0.55);
    --mag-panel-bg-soft: rgba(255, 255, 255, 0.35);
    --mag-ink: #333;
    --mag-ink-soft: #555;
    --mag-ink-faint: #666;
    --mag-heading: #000;
    --mag-rule: rgba(0, 0, 0, 0.15);
    --bg-slide-blend: difference;   /* every magazine page wants this in light */
  }
  .work-card:hover { background: rgba(255,255,255,0.85); }
  .page-header .page-trail { color: #000; }
  .page-nav a { color: #333; }
  .page-nav {
    background: rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 22px rgba(90, 138, 90, 0.1);
  }
  .nav-glass-band::before {
    background: linear-gradient(
      to right,
      rgba(255,255,255,0),
      rgba(255,255,255,0.3) 18%,
      rgba(255,255,255,0.3) 82%,
      rgba(255,255,255,0)
    );
  }
  .nav-glass-band::after {
    background: linear-gradient(
      to right,
      rgba(0,0,0,0),
      rgba(0,0,0,0.07) 18%,
      rgba(0,0,0,0.07) 82%,
      rgba(0,0,0,0)
    );
  }
  .page-nav a::before {
    background: rgba(255,255,255,0.42);
    border-left-color: rgba(0,0,0,0.08);
    border-right-color: rgba(0,0,0,0.08);
  }
  .page-nav a:hover,
  .page-nav a:focus-visible {
    text-shadow: 0 0 12px rgba(0,0,0,0.12);
  }
}

/* ============================================
   Reduced motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  .work-card, .work-card:hover, .work-card-media img, .work-card:hover .work-card-media img,
  .embed-activate, .page-nav a {
    transition-duration: 0s !important;
    transform: none !important;
  }
}

/* Sculpture + Tools surfaces hidden while under construction. Remove rules to restore. */
.page-nav a[href$="/sculpture/"],
.page-nav a[href$="/tools/"] { display: none; }

/* Pseudo-fullscreen for media viewers — iOS Safari can't fullscreen a
   non-video element (any iOS version) and direct embeds can't reliably use
   the Fullscreen API either, so we toggle a class that pins the viewer
   element to viewport size via CSS. Works for both the legacy iframe
   path (parent expands the iframe element) and direct embed (the viewer
   toggles the class on its own host element). */
.embed iframe.sky-pseudo-fullscreen,
.embed .embed-frame.sky-pseudo-fullscreen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;      /* dynamic viewport height — keeps controls bar above the iOS URL bar */
  aspect-ratio: auto !important;  /* drop the embed-frame's 16:9 when full-screen */
  z-index: 9999 !important;
  background: #000 !important;
  border-radius: 0 !important;
}
html.sky-pseudo-fullscreen-host,
html.sky-pseudo-fullscreen-host body {
  overflow: hidden !important;
}