/*
Theme Name: E28 — Skylab Child
Theme URI: https://epic28.com
Description: Independent motorsport photojournalists. Editorial marketplace layout, light theme.
Author: E28
Version: 0.18.9
Template: skylab
Text Domain: skylab-epic28
*/

/* ============================================================
   E28 — v0.9.0
   Light marketplace layout matching the Affinity mockup.
   ============================================================ */

:root {
  --e28-ink: #0A0A0A;
  --e28-paper: #FFFFFF;
  --e28-paper-2: #F4F4F2;
  --e28-rule: #E6E6E4;
  --e28-rule-strong: #0A0A0A;
  --e28-muted: #8A8682;
  --e28-accent: #0A0A0A;
  --e28-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --e28-display: "Inter", "Söhne", -apple-system, BlinkMacSystemFont, sans-serif;
  --e28-serif:   "Cormorant Garamond", Georgia, serif;
  --e28-maxw: 1280px;
  --e28-gutter: clamp(1rem, 2.5vw, 2rem);
}

/* ---------- Base reset over parent (hardened specificity) ---------- */
html body.e28,
html body.e28 .site,
html body.e28 .site-content,
html body.e28 #page,
html body.e28 #content,
html body.e28 .main-content,
html body.e28 main,
html body.e28 .container,
html body.e28 .container-fluid {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  color: #0A0A0A !important;
  font-family: var(--e28-sans) !important;
  margin: 0 !important; padding: 0 !important;
  max-width: none !important;
}
html body.e28 { min-height: 100vh; }
body.e28 {
  font-weight: 400; letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  font-size: 15px;
}
body.e28 .site-header, body.e28 .top-bar, body.e28 .header-wrap, body.e28 .skylab-header, body.e28 #header,
body.e28 .site-footer, body.e28 .footer-wrap, body.e28 .footer-widgets, body.e28 .sidebar,
body.e28 .breadcrumbs, body.e28 .page-title-wrap { display: none !important; }
body.e28 .vc_row, body.e28 .wpb_wrapper, body.e28 .wpb_content_element,
body.e28 .vc_column-inner, body.e28 .wpb_column > .vc_column-inner {
  margin: 0 !important; padding: 0 !important; background: transparent !important;
}
body.e28 a { color: inherit; text-decoration: none; transition: color 160ms; }
body.e28 a:hover { color: var(--e28-muted); }
body.e28 img { max-width: 100%; height: auto; display: block; }

/* ---------- Display type ---------- */
.e28 h1, .e28 h2, .e28 h3, .e28 .display {
  font-family: var(--e28-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.92;
  color: var(--e28-ink);
  margin: 0;
  text-transform: uppercase;
}
.e28 h1 { font-size: clamp(2.25rem, 5vw, 4rem); }
.e28 h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
.e28 h3 { font-size: clamp(1rem, 1.4vw, 1.15rem); line-height: 1; }
.e28 p { font-size: 0.95rem; line-height: 1.6; margin: 0 0 0.75rem; max-width: 62ch; }

.e28 .eyebrow,
.e28 .section-label {
  font-family: var(--e28-display);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--e28-ink);
  display: inline-block;
}

.e28-shell {
  max-width: var(--e28-maxw);
  margin: 0 auto;
  padding: 0 var(--e28-gutter);
}

/* ============================================================
   HEADER
   ============================================================ */

.e28-topbar {
  position: sticky; top: 0; z-index: 50;
  background: #FFFFFF !important;
  border-bottom: 1px solid var(--e28-rule) !important;
  padding: 0 !important;
  width: 100%;
}
.e28-topbar__inner {
  max-width: var(--e28-maxw);
  margin: 0 auto;
  padding: 1.1rem var(--e28-gutter);
  display: grid;
  grid-template-columns: auto 1fr auto auto auto auto;
  gap: clamp(0.75rem, 1.8vw, 1.75rem);
  align-items: center;
}
.e28-topbar__inner > .e28-nav,
.e28-topbar__inner > .e28-search,
.e28-topbar__inner > .e28-view-toggle,
.e28-topbar__inner > .e28-social { justify-self: end; }
@media (max-width: 1100px) {
  .e28-topbar__inner { grid-template-columns: auto 1fr auto auto auto; }
  .e28-nav, .e28-search { display: none; }
}

.e28-lb-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: var(--e28-ink); }
.e28-lb-icon svg { width: 16px; height: 16px; display: block; }
.e28-lb-icon:hover { color: var(--e28-muted); }
.e28-lb-badge {
  position: absolute; top: -4px; right: -6px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px;
  background: var(--e28-ink); color: #FFFFFF;
  font-family: var(--e28-display); font-weight: 800;
  font-size: 0.65rem; letter-spacing: 0;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}

.e28-social { display: inline-flex; gap: 0.6rem; align-items: center; }

/* Hamburger button (mobile) */
.e28-hamburger {
  display: none;
  background: transparent; border: 0; cursor: pointer;
  width: 40px; height: 40px; padding: 0;
  flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  justify-self: end;
}
.e28-hamburger span {
  display: block; width: 22px; height: 2px; background: var(--e28-ink);
  transition: transform 200ms, opacity 200ms;
}
body.e28-menu-open .e28-hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.e28-menu-open .e28-hamburger span:nth-child(2) { opacity: 0; }
body.e28-menu-open .e28-hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu drawer */
.e28-mobile-menu {
  position: fixed; inset: 0; z-index: 100;
  background: #fff;
  padding: clamp(5rem, 12vw, 8rem) 2rem 3rem;
  opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity 260ms ease;
  overflow-y: auto;
}
body.e28-menu-open .e28-mobile-menu {
  opacity: 1; pointer-events: auto; visibility: visible;
}
.e28-mobile-menu nav ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.25rem; }
.e28-mobile-menu nav a {
  display: block;
  font-family: var(--e28-display); font-weight: 800;
  font-size: clamp(1.5rem, 6vw, 2.25rem);
  letter-spacing: -0.025em; text-transform: uppercase;
  color: var(--e28-ink) !important;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--e28-rule);
}
.e28-mobile-menu__search { margin-top: 2rem; }
.e28-mobile-menu__search input {
  width: 100%; background: transparent !important;
  border: 0 !important; border-bottom: 1px solid var(--e28-ink) !important;
  padding: 0.9rem 0 !important; font-size: 1rem !important;
  color: var(--e28-ink) !important;
}
.e28-mobile-menu__social {
  display: flex; gap: 1.5rem; margin-top: 2rem;
  font-family: var(--e28-display); font-weight: 700;
  font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase;
}
.e28-mobile-menu__social a { color: var(--e28-muted); }

body.e28-menu-open { overflow: hidden; }

@media (max-width: 1100px) {
  .e28-hamburger { display: inline-flex; }
}

/* ============================================================
   GLOBAL MOBILE POLISH
   ============================================================ */
@media (max-width: 860px) {
  :root { --e28-gutter: 1.25rem; }

  /* Tighter header */
  .e28-topbar__inner { padding: 0.9rem var(--e28-gutter); gap: 0.75rem; }
  .e28-logo img, .e28-logo svg, .e28-logo * svg { height: 40px !important; max-height: 40px !important; }
  .e28-lb-icon, .e28-social a { width: 36px; height: 36px; }

  /* Cart / dashboard tables → horizontal scroll if they'd overflow */
  .e28-cart { display: block; overflow-x: auto; }
  .e28-checkout-grid { grid-template-columns: 1fr; gap: 1.5rem; }

  /* Lightbox */
  .e28-lightbox__close { top: 0.75rem; right: 0.75rem; }
  .e28-lightbox__headline { font-size: clamp(1.35rem, 5.5vw, 2rem); }
  .e28-lightbox__caption { font-size: 0.9rem; }

  /* Avatar editor: stack + shrink source */
  .e28-avatar-editor { gap: 1rem; }
  .e28-avatar-editor__source { width: 100%; height: auto; aspect-ratio: 3/2; max-width: 420px; }
  .e28-avatar-editor__preview { width: 100px; height: 100px; }

  /* Dashboard nav scroll horizontally if needed */
  .e28-dash-nav { flex-wrap: nowrap; overflow-x: auto; gap: 1rem; }
  .e28-dash-nav a { white-space: nowrap; }

  /* Buy page meta */
  .e28-single-meta li { grid-template-columns: 110px 1fr; gap: 0.75rem; }
  .e28-exif { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 560px) {
  /* Even tighter for phones */
  .e28-topbar__inner { padding: 0.75rem 1rem; }
  .e28-lb-icon svg, .e28-social svg { width: 15px; height: 15px; }

  .e28-pagination { flex-wrap: wrap; }
  .e28-pagination a, .e28-pagination span { padding: 0.45rem 0.7rem; font-size: 0.66rem; }

  .e28-lb-grid { grid-template-columns: repeat(2, 1fr) !important; }

  .e28-lightbox__stage { max-height: 100%; }
  .e28-lightbox__img { max-height: 80vh; }

  .e28-page__prose { font-size: 1rem; }

  /* Headline block — smaller margins */
  .e28-headline { padding: 1rem 0 0.5rem; }
}

/* Prevent horizontal body scroll anywhere */
html, body { overflow-x: hidden; }
.e28-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  color: var(--e28-ink);
  border: 1px solid transparent;
  transition: color 180ms, border-color 180ms;
}
.e28-social a:hover { color: var(--e28-muted); }
.e28-social svg { width: 17px; height: 17px; display: block; }
.e28-logo { display: inline-flex !important; align-items: center; gap: 0; max-height: 64px; }
.e28-logo img,
.e28-logo svg,
.e28-logo * svg {
  height: 56px !important; max-height: 56px !important;
  width: auto !important; max-width: 120px !important;
  display: block !important;
  filter: invert(1) !important;
}
.e28-logo__tag {
  display: inline-block;
  font-family: var(--e28-display);
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--e28-ink);
  max-width: 14ch;
  white-space: normal;
}
.e28-nav ul { list-style: none; display: flex; gap: clamp(1rem, 2vw, 2rem); margin: 0; padding: 0; }
.e28-nav li { margin: 0; padding: 0; }
.e28-nav a {
  font-family: var(--e28-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--e28-ink) !important;
}
.e28-search { display: flex; align-items: center; }
.e28-search label {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--e28-display);
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700;
  color: var(--e28-ink);
}
.e28-search input {
  border: 0 !important;
  border-bottom: 1px solid var(--e28-ink) !important;
  padding: 0.3rem 0 !important;
  min-width: 140px; max-width: 180px;
  background: transparent !important;
  background-color: transparent !important;
  color: var(--e28-ink) !important;
  font-family: var(--e28-sans) !important;
  font-size: 0.85rem !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.e28-search input:focus { outline: none; }
.e28-view-toggle { display: flex; gap: 0.25rem; }
.e28-view-toggle button {
  width: 26px; height: 26px; border: 1px solid var(--e28-ink);
  background: transparent; cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.e28-view-toggle button.is-active { background: var(--e28-ink); color: var(--e28-paper); }
.e28-view-toggle svg { width: 12px; height: 12px; display: block; }
@media (max-width: 1100px) {
  .e28-topbar { grid-template-columns: auto 1fr auto; }
  .e28-nav, .e28-search, .e28-view-toggle { display: none; }
}

/* ============================================================
   HEADLINE — site tagline as page h1
   ============================================================ */
.e28-headline {
  padding: clamp(1.25rem, 2.5vw, 2rem) 0 clamp(0.75rem, 1.5vw, 1.25rem);
  width: 100%;
}
.e28-headline h1 {
  font-family: var(--e28-display);
  font-weight: 900;
  font-size: clamp(2rem, 8.5vw, 7rem);
  line-height: 0.88;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  color: var(--e28-ink);
  margin: 0;
  width: 100%;
  max-width: none;
  display: block;
  white-space: nowrap;
  overflow: hidden;
}
.e28-headline__kicker {
  margin: 0 0 clamp(0.5rem, 1vw, 1rem);
  font-family: var(--e28-display);
  font-weight: 700;
  font-size: clamp(0.85rem, 1.1vw, 1.05rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--e28-ink);
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
}
.e28-headline__kicker::before {
  content: ""; display: inline-block;
  width: 36px; height: 1px; background: var(--e28-ink);
}
.e28-headline__lead {
  margin: clamp(1rem, 2vw, 1.75rem) 0 0;
  max-width: 52ch;
  font-family: var(--e28-sans);
  font-weight: 400;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--e28-ink);
  text-transform: none;
}

/* ============================================================
   SECTION SHELL (label + arrows + scrolling rail)
   ============================================================ */

.e28-section {
  padding: clamp(0.5rem, 1vw, 1rem) 0;
  position: relative;
}
.e28-section__head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 0.5rem;
}

/* Horizontal rails with native scroll + snap */
.e28-rail {
  position: relative;
  padding: 0 clamp(2rem, 4vw, 3.5rem);
}
.e28-rail__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--col);
  gap: clamp(0.5rem, 1vw, 0.75rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.e28-rail__track::-webkit-scrollbar { display: none; }
.e28-rail__track > * { scroll-snap-align: start; }
.e28-rail__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 28px; height: 100%; max-height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: var(--e28-paper);
  border: 0; cursor: pointer; z-index: 5;
  font-family: var(--e28-display); font-weight: 700; font-size: 1rem;
  color: var(--e28-ink);
}
.e28-rail__arrow.prev { left: 0; }
.e28-rail__arrow.next { right: 0; }
.e28-rail__arrow:hover { color: var(--e28-muted); }

/* ---------- LATEST rail — uniform 3:2 landscape tiles ----------
   Every tile is the same size. Portrait images get cropped to the landscape
   aspect via object-fit + the photographer's focal point, so there's never a
   blank box beside an upright image. */
.rail-latest {
  --h: clamp(100px, 9vw, 130px);
  --w: calc(var(--h) * 1.5);           /* 3:2 landscape — same for every tile */
  display: flex !important;
  grid-auto-flow: unset !important;
  grid-auto-columns: unset !important;
}
.rail-latest .card {
  flex: 0 0 auto;
  display: block; cursor: pointer;
  width: var(--w);
  scroll-snap-align: start;
}
.rail-latest .card .thumb {
  width: var(--w);
  height: var(--h);
  overflow: hidden;
  background: var(--e28-paper-2);
  display: block;
}
.rail-latest .card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--e28-focal, 50% 50%);
  display: block;
  transition: transform 600ms ease;
}
.rail-latest .card:hover .thumb img { transform: scale(1.04); }
.rail-latest .card { color: #A8A5A1 !important; }
.rail-latest .card .title {
  margin-top: 0.55rem;
  font-family: var(--e28-display);
  font-weight: 600;
  font-size: 0.58rem;
  letter-spacing: 0.02em;
  line-height: 1.15;
  text-transform: uppercase;
  color: #A8A5A1 !important;
  width: var(--w);
  max-width: var(--w);
  overflow: hidden;
}
.rail-latest .card .title small {
  display: block; font-weight: 500;
  color: #BFBCB8 !important;           /* even lighter for secondary line */
  letter-spacing: 0.04em; font-size: 0.56rem; margin-top: 0.1rem;
}
.rail-latest .card:hover { color: var(--e28-ink) !important; }
.rail-latest .card:hover .title,
.rail-latest .card:hover .title small { color: var(--e28-ink) !important; }

/* ---------- FEATURED — large single image with overlay ---------- */
.e28-featured {
  position: relative;
  aspect-ratio: 4 / 3;
  max-height: 88vh;
  overflow: hidden;
  background: #0a0a0a;
  /* prev */ 
  background: var(--e28-paper-2);
  margin: 1.25rem 0 2rem;
}
.e28-featured img {
  width: 100%; height: 100%; object-fit: contain;
  transition: transform 1400ms cubic-bezier(.2,.6,.2,1);
}
.e28-featured:hover img { transform: none; }
.e28-featured__body {
  position: absolute; left: clamp(1.5rem, 3vw, 3rem); bottom: clamp(1.5rem, 3vw, 3rem);
  color: var(--e28-paper);
  text-shadow: 0 2px 20px rgba(0,0,0,0.5);
}
.e28-featured__body h2 {
  font-size: clamp(2rem, 5vw, 4.5rem);
  color: var(--e28-paper);
  line-height: 0.9;
}
.e28-featured__body .sub {
  margin-top: 0.5rem;
  font-family: var(--e28-display);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--e28-paper);
}

/* ---------- FEATURED carousel — show FULL image, caption below ---------- */
.e28-featured-rotator {
  position: relative;
  margin: 0.5rem 0 0.75rem;
  isolation: isolate;
}
.e28-featured-stage {
  background: #0a0a0a;
  position: relative;
  width: 100%;
  aspect-ratio: var(--e28-feat-ratio, 4 / 3);   /* responsive: wider on desktop, taller on small screens */
  max-height: 88vh;
  background: #F4F2EE;
  overflow: hidden;
}
.e28-featured-slide {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity 900ms ease;
  padding: 0;
}
.e28-featured-slide.is-active { opacity: 1; visibility: visible; z-index: 1; }
.e28-featured-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;             /* never crop — fit the whole image */
  object-position: var(--e28-focal, 50% 50%);
  display: block;
}

/* Dynamic aspect ratios for smaller viewports — keeps portraits + landscapes legible */
@media (max-width: 1100px) {
  .e28-featured-stage { --e28-feat-ratio: 4 / 3; max-height: 72vh; }
}
@media (max-width: 720px) {
  .e28-featured-stage { --e28-feat-ratio: 5 / 4; max-height: 62vh; }
}
@media (max-width: 480px) {
  .e28-featured-stage { --e28-feat-ratio: 1 / 1; max-height: 55vh; }
}
.e28-featured-slide .e28-featured__body {
  position: absolute;
  left: clamp(1rem, 3vw, 3rem);
  right: clamp(1rem, 3vw, 3rem);
  bottom: clamp(1rem, 3vw, 3rem);
  z-index: 2;
  max-width: none;
  background: transparent;
  padding: 0;
  color: #FFFFFF;
  text-shadow: none;
  mix-blend-mode: difference;
  isolation: auto;
}
.e28-featured-slide { isolation: isolate; }
.e28-featured-slide h2 {
  font-family: var(--e28-display);
  font-weight: 800;
  font-size: clamp(1.25rem, 2.2vw, 2rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  margin: 0;
  text-transform: uppercase;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: min(32ch, 80vw);
  text-shadow: none;
}
.e28-featured-slide .sub {
  margin-top: 0.4rem;
  font-family: var(--e28-display);
  font-weight: 600;
  font-size: clamp(0.72rem, 0.9vw, 0.84rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #FFFFFF;
  opacity: 0.92;
  text-shadow: none;
}
.e28-featured-slide .cap {
  margin-top: 0.5rem;
  font-family: var(--e28-sans);
  font-weight: 400;
  font-size: clamp(0.72rem, 0.82vw, 0.82rem);
  line-height: 1.35;
  color: #FFFFFF;
  opacity: 0.82;
  text-shadow: none;
  max-width: min(58ch, 80vw);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.e28-featured-slide .cred {
  margin-top: 0.45rem;
  font-family: var(--e28-display);
  font-weight: 600;
  font-size: clamp(0.62rem, 0.72vw, 0.72rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #FFFFFF;
  opacity: 0.7;
  text-shadow: none;
}

/* Dot indicators live in the section margin, under the stage */
.e28-featured-dots {
  display: flex; gap: 0.4rem; justify-content: center;
  margin-top: 1rem;
}
.e28-featured-dots button {
  width: 28px; height: 3px;
  padding: 0; border: 0;
  background: var(--e28-rule);
  cursor: pointer;
  transition: background 200ms;
}
.e28-featured-dots button:hover    { background: var(--e28-muted); }
.e28-featured-dots button.is-active { background: var(--e28-ink); }

/* ---------- EVENTS / PHOTOGRAPHERS rails — 5-up card, TITLE ABOVE thumb ---------- */
.rail-events, .rail-photogs { --col: clamp(180px, 18vw, 240px); }
.rail-events .card, .rail-photogs .card {
  display: block; cursor: pointer;
}
.rail-events .card .title, .rail-photogs .card .title {
  font-family: var(--e28-display);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  line-height: 1.1;
  text-transform: uppercase;
  margin-top: 0.65rem;
  margin-bottom: 0;
}
.rail-photogs .card .title { margin-top: 0.65rem; margin-bottom: 0.65rem; min-height: 2.4em; }
.rail-events .card .title small,
.rail-photogs .card .title small {
  display: block; font-weight: 600; color: var(--e28-muted);
  letter-spacing: 0.05em; font-size: 0.78rem; margin-top: 0.15rem;
}
.rail-events .card .thumb,
.rail-photogs .card .thumb {
  aspect-ratio: 1 / 1;
  background: var(--e28-paper-2);
  overflow: hidden;
}
.rail-events .card .thumb img,
.rail-photogs .card .thumb img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: var(--e28-focal, 50% 50%);
  transition: transform 600ms ease;
}
.rail-events .card:hover .thumb img,
.rail-photogs .card:hover .thumb img { transform: scale(1.04); }
.rail-photogs .card.is-hover .title,
.rail-photogs .card:hover .title { color: var(--e28-ink); }

/* ---------- Event / photographer tile grid (archive pages) ---------- */
.e28-event-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 1.5vw, 1.5rem);
  padding: 1.5rem 0 4rem;
}
.e28-event-tile {
  display: block;
  background: var(--e28-paper);
  border-bottom: 2px solid var(--e28-ink);
  transition: transform 260ms ease;
}
.e28-event-tile:hover { transform: translateY(-3px); }
.e28-event-tile .thumb {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--e28-paper-2);
}
.e28-event-tile .thumb img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: var(--e28-focal, 50% 50%);
  transition: transform 700ms cubic-bezier(.2,.6,.2,1);
}
.e28-event-tile:hover .thumb img { transform: scale(1.03); }
.e28-event-tile .body {
  padding: 0.9rem 0 1rem;
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
}
.e28-event-tile .title {
  font-family: var(--e28-display); font-weight: 800;
  font-size: clamp(1rem, 1.5vw, 1.3rem);
  letter-spacing: -0.02em; line-height: 1;
  text-transform: uppercase;
}
.e28-event-tile .title small {
  font-weight: 600; color: var(--e28-muted);
  font-size: 0.78em; letter-spacing: 0;
}
.e28-event-tile .meta {
  font-family: var(--e28-display); font-weight: 600;
  font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--e28-muted);
}
@media (max-width: 900px) { .e28-event-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .e28-event-grid { grid-template-columns: 1fr; } }

/* ---------- Lightbox — full-screen, dark bg, IPTC overlay ---------- */
.e28-lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(10,10,10,0.94);
  display: none;
  align-items: center; justify-content: center;
  padding: clamp(1rem, 3vw, 3rem);
}
.e28-lightbox.is-open { display: flex; }
.e28-lightbox__close {
  position: absolute; top: 1.25rem; right: 1.5rem;
  width: 44px; height: 44px;
  background: transparent; border: 0;
  color: #fff; font-size: 2rem; line-height: 1; cursor: pointer;
  font-family: var(--e28-display); font-weight: 300;
}
.e28-lightbox__close:hover { opacity: 0.7; }
.e28-lightbox__stage {
  position: relative;
  max-width: 100%; max-height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.e28-lightbox__img {
  max-width: 100%; max-height: 90vh;
  width: auto; height: auto;
  display: block;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
.e28-lightbox__stage { isolation: isolate; }
.e28-lightbox__overlay {
  position: absolute; left: clamp(1rem, 2vw, 2rem); bottom: clamp(1rem, 2vw, 2rem);
  max-width: calc(100% - 3rem);
  color: #FFFFFF;
  text-shadow: none;
  pointer-events: none;
  mix-blend-mode: difference;
}
.e28-lightbox__headline {
  font-family: var(--e28-display);
  font-weight: 900;
  font-size: clamp(1.5rem, 3vw, 2.75rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.e28-lightbox__meta {
  display: flex; gap: 1.25rem;
  margin-top: 0.5rem;
  font-family: var(--e28-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.92;
}
.e28-lightbox__meta span:empty { display: none; }
.e28-lightbox__caption {
  margin-top: 0.75rem;
  font-family: var(--e28-display);
  font-weight: 600;
  font-size: clamp(0.9rem, 1.1vw, 1.05rem);
  max-width: 62ch;
  line-height: 1.35;
}
.e28-lightbox__credit {
  margin-top: 0.6rem;
  font-family: var(--e28-display);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.8;
}

/* ---------- Default page layout (About, Commission, Licensing, Legal…) ---------- */
.e28-page { padding: clamp(2rem, 5vw, 4rem) 0 clamp(4rem, 8vw, 6rem); }
.e28-page__head {
  max-width: 72ch; margin: 0 auto clamp(2rem, 4vw, 3rem);
  text-align: left;
  border-bottom: 2px solid var(--e28-ink);
  padding-bottom: 1.25rem;
}
.e28-page__head .eyebrow { display: block; margin-bottom: 0.75rem; color: var(--e28-muted); }
.e28-page__title {
  font-family: var(--e28-display); font-weight: 900;
  font-size: clamp(2.5rem, 6vw, 5.5rem);
  line-height: 0.9; letter-spacing: -0.035em;
  text-transform: uppercase;
  margin: 0;
}
.e28-page__prose {
  max-width: 68ch; margin: 0 auto;
  font-size: 1.05rem; line-height: 1.65;
}
.e28-page__prose > * + * { margin-top: 1rem; }
.e28-page__prose h2 {
  font-family: var(--e28-display); font-weight: 800;
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: clamp(2.5rem, 4vw, 3.5rem) 0 0.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--e28-rule);
}
.e28-page__prose h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.e28-page__prose h3 {
  font-family: var(--e28-display); font-weight: 700;
  font-size: 1.05rem; letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 1.75rem 0 0.5rem;
}
.e28-page__prose p { max-width: none; }
.e28-page__prose p.has-large-font-size {
  font-family: var(--e28-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin-bottom: 1.75rem;
}
.e28-page__prose ul, .e28-page__prose ol {
  padding-left: 1.2rem; margin: 0.5rem 0 1rem;
}
.e28-page__prose li { margin: 0.35rem 0; }
.e28-page__prose a { color: var(--e28-ink); border-bottom: 1px solid var(--e28-ink); padding-bottom: 1px; }
.e28-page__prose a:hover { color: var(--e28-muted); border-bottom-color: var(--e28-muted); }
.e28-page__prose strong { font-weight: 700; }
.e28-page__prose hr { border: 0; border-top: 1px solid var(--e28-rule); margin: 2rem 0; }

/* ---------- Journal (blog single) ---------- */
.e28-journal { padding: clamp(2rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem); }
.e28-journal__head { max-width: 72ch; margin: 0 auto 2rem; text-align: center; }
.e28-journal__title {
  font-family: var(--e28-display); font-weight: 900;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 0.95; letter-spacing: -0.03em;
  text-transform: uppercase;
  margin: 0.75rem 0 0.75rem;
}
.e28-journal__byline {
  color: var(--e28-muted);
  font-family: var(--e28-display); font-weight: 700;
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
}
.e28-journal__hero { margin: 2rem 0 3rem; }
.e28-journal__hero img { width: 100%; height: auto; display: block; }
.e28-journal__prose {
  max-width: 66ch; margin: 0 auto;
  font-size: 1.05rem; line-height: 1.65;
}
.e28-journal__prose h2 { font-size: 1.75rem; margin: 2rem 0 0.75rem; text-transform: none; }
.e28-journal__prose h3 { font-size: 1.25rem; margin: 1.5rem 0 0.5rem; text-transform: none; }
.e28-journal__prose img { width: 100%; height: auto; margin: 1.5rem 0; }
.e28-journal__prose blockquote {
  margin: 2rem 0; padding: 0.5rem 0 0.5rem 1.5rem;
  border-left: 3px solid var(--e28-ink);
  font-family: var(--e28-display); font-weight: 600;
  font-size: 1.2rem; line-height: 1.4;
}

/* ---------- E28 buttons (front-end safe — overrides parent theme + WP defaults) ---------- */
.e28-btn-row { display: inline-flex; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; }
.e28-btn-row form { display: inline-flex; margin: 0; }
.e28-btn {
  display: inline-flex !important; align-items: center; justify-content: center;
  padding: 0.65rem 1.1rem !important;
  font-family: var(--e28-display) !important;
  font-weight: 700 !important;
  font-size: 0.74rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  border: 1px solid var(--e28-ink) !important;
  background: var(--e28-ink) !important;
  color: #FFFFFF !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: opacity 160ms, background 160ms, color 160ms;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.e28-btn:hover { opacity: 0.85; }
.e28-btn--ghost {
  background: transparent !important;
  color: var(--e28-ink) !important;
}
.e28-btn--ghost:hover { background: var(--e28-ink) !important; color: #FFFFFF !important; opacity: 1; }
.e28-btn--solid { background: var(--e28-ink) !important; color: #FFFFFF !important; }
.e28-btn--danger {
  background: #FFFFFF !important;
  border-color: #C84B3A !important;
  color: #C84B3A !important;
}
.e28-btn--danger:hover { background: #C84B3A !important; color: #FFFFFF !important; opacity: 1; }

/* ---------- Lightbox header layout ---------- */
.e28-lb-head {
  display: flex !important;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.e28-lb-head .e28-btn-row { align-items: stretch; }
.e28-lb-head .e28-btn-row form { display: inline-flex; }
.e28-lb-head .e28-btn { min-height: 44px; }

/* ---------- Lightbox tile grid ---------- */
.e28-lb-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  margin: 1.25rem 0 3rem;
}
.e28-lb-tile {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--e28-paper-2);
  isolation: isolate;
}
.e28-lb-tile__link { display: block; width: 100%; height: 100%; }
.e28-lb-tile img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
  transition: transform 600ms cubic-bezier(.2,.6,.2,1);
}
.e28-lb-tile:hover img { transform: scale(1.03); }
.e28-lb-tile__remove {
  position: absolute; top: 8px; right: 8px; z-index: 3;
}
.e28-lb-tile__remove button {
  width: 30px; height: 30px;
  background: rgba(255,255,255,0.92);
  border: 0; border-radius: 50%;
  cursor: pointer;
  font-family: var(--e28-display);
  font-weight: 700; font-size: 1.1rem;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background 180ms;
}
.e28-lb-tile__remove button:hover { background: #FFFFFF; }
.e28-lb-tile__tier {
  position: absolute; left: clamp(0.75rem, 1.2vw, 1.1rem); bottom: clamp(0.75rem, 1.2vw, 1.1rem);
  z-index: 2;
  color: #FFFFFF;
  font-family: var(--e28-display);
  font-weight: 800;
  font-size: clamp(0.85rem, 1.1vw, 1.1rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  mix-blend-mode: difference;
  pointer-events: none;
}
@media (max-width: 1024px) { .e28-lb-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .e28-lb-grid { grid-template-columns: 1fr; } }

/* ---------- Admin edit badge (appears on tiles for logged-in editors) ---------- */
.e28-edit-badge {
  position: absolute; top: 6px; right: 6px; z-index: 5;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.92); color: var(--e28-ink) !important;
  border: 0 !important;
  font-family: var(--e28-display); font-weight: 700;
  font-size: 14px; line-height: 1;
  text-decoration: none !important;
  opacity: 0; transform: translateY(-4px);
  transition: opacity 160ms, transform 160ms, background 160ms;
  border-radius: 0;
}
.e28-feedgrid__tile:hover .e28-edit-badge,
.rail-latest .card:hover .e28-edit-badge,
.rail-events .card:hover .e28-edit-badge,
.rail-photogs .card:hover .e28-edit-badge,
.e28-event-tile:hover .e28-edit-badge,
.ce:hover .e28-edit-badge,
.card-uniform:hover .e28-edit-badge { opacity: 1; transform: none; }
.e28-edit-badge:hover { background: var(--e28-ink); color: #fff !important; }

/* Tiles need relative positioning so the badge anchors correctly */
.rail-latest .card,
.rail-events .card,
.rail-photogs .card,
.e28-event-tile,
.card-uniform { position: relative; }

/* ---------- Lazy-load grid loader ---------- */
.e28-lazygrid__loader {
  text-align: center;
  padding: 2rem 1rem 3rem;
  font-family: var(--e28-display); font-weight: 700;
  font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--e28-muted);
}

/* ---------- Instagram-style feed grid (6×8) ---------- */
.e28-feedgrid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
  margin: 0.5rem 0 2rem;
}
.e28-feedgrid__tile {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: transparent;
  position: relative;
  line-height: 0;
  font-size: 0;
}
.e28-feedgrid__tile img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: var(--e28-focal, 50% 50%) !important;
  transition: transform 600ms cubic-bezier(.2,.6,.2,1), opacity 200ms ease;
}
.e28-feedgrid__tile:hover img { transform: scale(1.04); opacity: 0.9; }
@media (max-width: 1024px) { .e28-feedgrid { grid-template-columns: repeat(4, 1fr) !important; } }
@media (max-width: 720px)  { .e28-feedgrid { grid-template-columns: repeat(3, 1fr) !important; gap: 2px !important; } }
@media (max-width: 420px)  { .e28-feedgrid { grid-template-columns: repeat(3, 1fr) !important; gap: 1px !important; } }

/* ============================================================
   FOOTER — black bar
   ============================================================ */

.e28-footer {
  background: var(--e28-ink);
  color: var(--e28-paper);
  padding: 0;
  width: 100%;
  font-size: 0.85rem;
  margin-top: clamp(3rem, 6vw, 5rem);
}
.e28-footer__inner {
  max-width: var(--e28-maxw);
  margin: 0 auto;
  padding: clamp(3rem, 6vw, 5rem) var(--e28-gutter);
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
}
.e28-footer p { color: var(--e28-paper); max-width: none; margin: 0 0 0.5rem; }
.e28-footer a { color: var(--e28-paper); }
.e28-footer a:hover { color: var(--e28-muted); }
.e28-footer small { color: var(--e28-muted); font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; }
.e28-footer .e28-newsletter input[type=email] {
  background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,0.3);
  color: var(--e28-paper); padding: 0.5rem 0; width: 100%; max-width: 360px;
}
.e28-footer .eyebrow { color: var(--e28-muted); }
@media (max-width: 900px) { .e28-footer__inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .e28-footer__inner { grid-template-columns: 1fr; } }

/* ============================================================
   PAGES BEYOND HOMEPAGE (archives, singles, dashboard)
   — keep light theme, preserve existing markup
   ============================================================ */

.e28-archive-head, .e28-event-head {
  padding: clamp(2.5rem, 5vw, 4rem) 0 1.5rem;
  max-width: 100%;
  border-bottom: 1px solid var(--e28-rule);
}
.e28-archive-head h1, .e28-event-head h1 { margin-bottom: 0.75rem; }
.e28-archive-head > p, .e28-archive-head > nav, .e28-event-head > p, .e28-event-head > div { max-width: 72ch; }
/* Headline wraps to the grid width at any viewport (no horizontal overflow). */
.e28-archive-head h1.display {
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
  max-width: 100%;
}
.e28-event-meta { color: var(--e28-muted); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; }
.e28-event-intro { margin-top: 1.5rem; }

.e28-facets {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin-top: 1.5rem; padding-top: 1rem;
}
.e28-facets a {
  display: inline-block; padding: 0.45rem 1rem;
  border: 1px solid var(--e28-rule);
  font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700;
  color: var(--e28-ink);
  transition: all 160ms;
}
.e28-facets a:hover { border-color: var(--e28-ink); }
.e28-facets a.is-active { color: var(--e28-paper); background: var(--e28-ink); border-color: var(--e28-ink); }

/* Uniform grid (archives) */
.grid-uniform {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  padding: 2rem 0 4rem;
}
.card-uniform { display: block; cursor: pointer; }
.card-uniform .img {
  aspect-ratio: 1 / 1;
  overflow: hidden; background: var(--e28-paper-2);
}
.card-uniform .img img { width: 100%; height: 100%; object-fit: cover; object-position: var(--e28-focal, 50% 50%); transition: transform 600ms ease; }
.card-uniform:hover .img img { transform: scale(1.03); }
.card-uniform .placard {
  margin-top: 0.65rem;
  font-family: var(--e28-display); font-weight: 800;
  font-size: 0.85rem; letter-spacing: -0.01em; line-height: 1.15;
  text-transform: uppercase;
}
.card-uniform .placard .meta {
  display: block; margin-top: 0.15rem;
  font-weight: 600; color: var(--e28-muted);
  letter-spacing: 0.05em; font-size: 0.7rem; text-transform: uppercase;
}
@media (max-width: 1024px) { .grid-uniform { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .grid-uniform { grid-template-columns: repeat(2, 1fr); } }

/* Editorial mixed (event archive) */
.grid-editorial {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(0.75rem, 1.2vw, 1.25rem);
  padding: 2rem 0 4rem;
}
.ce { position: relative; overflow: hidden; cursor: pointer; display: block; background: var(--e28-paper-2); }
.ce img { width: 100%; height: 100%; object-fit: cover; transition: transform 800ms ease; }
.ce:hover img { transform: scale(1.02); }
.ce .placard {
  position: absolute; left: 1rem; bottom: 1rem;
  background: rgba(255,255,255,0.92);
  padding: 0.5rem 0.75rem;
  max-width: calc(100% - 2rem);
}
.ce .placard .title { font-family: var(--e28-display); font-weight: 800; font-size: 0.85rem; text-transform: uppercase; letter-spacing: -0.01em; display: block; }
.ce .placard .meta  { font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--e28-muted); font-weight: 600; }
.ce-hero { grid-column: span 4; aspect-ratio: 16/9; }
.ce-tall { grid-column: span 2; aspect-ratio: 3/4; }
.ce-med  { grid-column: span 3; aspect-ratio: 4/3; }
.ce-sq   { grid-column: span 2; aspect-ratio: 1/1; }
.ce-wide { grid-column: span 4; aspect-ratio: 16/9; }
@media (max-width: 900px) {
  .ce-hero, .ce-wide { grid-column: 1 / -1; }
  .ce-tall, .ce-med, .ce-sq { grid-column: span 3; }
}

/* Pagination */
.e28-pagination { display: flex; gap: 0.5rem; justify-content: center; padding: 2rem 0 4rem; }
.e28-pagination a, .e28-pagination span {
  padding: 0.5rem 0.85rem; border: 1px solid var(--e28-rule);
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700;
  color: var(--e28-ink);
}
.e28-pagination .current { background: var(--e28-ink); color: var(--e28-paper); border-color: var(--e28-ink); }

/* ---------- Single image: clean hero, no overlay ---------- */
.e28-single-hero {
  position: relative;
  width: 100%;
  background: var(--e28-paper-2);
  display: flex; align-items: center; justify-content: center;
  min-height: 50vh;
  max-height: 88vh;
  overflow: hidden;
}
.e28-single-hero img {
  max-width: 100%; max-height: 88vh;
  width: auto; height: auto; display: block;
}
.e28-single-hero { isolation: isolate; }
.e28-single-hero__overlay {
  position: absolute; left: clamp(1.5rem, 3vw, 3rem); bottom: clamp(1.5rem, 3vw, 3rem);
  color: #FFFFFF;
  text-shadow: none;
  mix-blend-mode: difference;
}
.e28-single-hero__headline {
  display: block;
  font-family: var(--e28-display);
  font-weight: 900;
  font-size: clamp(2rem, 5vw, 4.5rem);
  line-height: 0.9;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: #FFFFFF;
}
.e28-single-hero__headline:hover { color: #FFFFFF; opacity: 0.85; }
.e28-single-hero__meta {
  display: flex; gap: 1.25rem; margin-top: 0.6rem;
  font-family: var(--e28-display); font-weight: 700;
  font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase;
}
.e28-single-hero__meta span:empty { display: none; }
.e28-single-hero__credit {
  display: inline-block; margin-top: 0.7rem;
  font-family: var(--e28-display); font-weight: 700;
  font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
  opacity: 0.9; color: #FFFFFF;
}

.e28-single-grid {
  display: grid; grid-template-columns: 2fr 1fr; gap: 3rem;
  padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem);
  align-items: start;
}
.e28-single-body .eyebrow { display: block; margin-bottom: 0.75rem; color: var(--e28-muted); }
.e28-single-body .eyebrow a { color: inherit; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.e28-single-body .eyebrow a:hover { color: var(--e28-ink); }
/* Higher specificity than `.e28 h1` so the buy-page caption actually stays small. */
body.e28 h1.e28-single-title,
.e28-single-title {
  font-family: var(--e28-sans); font-weight: 500;
  /* Compact editorial caption on the image-detail page */
  font-size: clamp(0.9rem, 1vw, 1.05rem);
  letter-spacing: 0; line-height: 1.5;
  text-transform: none;
  margin: 0 0 1.25rem;
  overflow-wrap: break-word;
  word-break: break-word;
  color: var(--e28-ink);
}
/* Keep the eyebrow (headline) compact on the buy page. */
body.e28 .e28-single-body .eyebrow,
body.e28 .e28-single-body .eyebrow a {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  line-height: 1.4;
}
.e28-single-meta {
  list-style: none; padding: 0; margin: 0 0 1.5rem;
  border-top: 1px solid var(--e28-rule);
}
.e28-single-meta li {
  display: grid; grid-template-columns: 140px 1fr;
  gap: 1rem; padding: 0.7rem 0;
  border-bottom: 1px solid var(--e28-rule);
}
.e28-single-meta .lbl {
  font-family: var(--e28-display); font-weight: 700;
  font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--e28-muted);
}
.e28-single-meta .val {
  font-family: var(--e28-sans); font-size: 0.95rem;
}
.e28-single-meta .val a { color: var(--e28-ink); border-bottom: 1px solid var(--e28-ink); padding-bottom: 1px; }
.e28-single-body .e28-prose { max-width: 62ch; margin: 1.5rem 0; font-size: 0.95rem; line-height: 1.55; }
@media (max-width: 960px) {
  .e28-single-grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* Legacy (still used by some templates) */
.e28-image-wrap { padding: 2rem 0 1.5rem; }
.e28-image-hero { width: 100%; height: auto; display: block; }
.e28-image-grid {
  display: grid; grid-template-columns: 2fr 1fr; gap: 3rem;
  padding: 1.5rem 0 4rem; align-items: start;
}
.e28-image-placard h1 { margin: 0.5rem 0 1rem; }
.e28-byline { color: var(--e28-muted); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; margin-bottom: 1.5rem; }
.e28-exif { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; padding: 1.25rem 0; border-top: 1px solid var(--e28-rule); border-bottom: 1px solid var(--e28-rule); margin: 1rem 0; }
.e28-exif dt { font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--e28-muted); font-weight: 700; margin-bottom: 0.2rem; }
.e28-exif dd { margin: 0; font-family: var(--e28-display); font-weight: 700; font-size: 1rem; }

.e28-image-buy { position: sticky; top: 100px; border: 1px solid var(--e28-ink); padding: 1.5rem; }
.e28-license-picker { display: grid; gap: 0.75rem; margin-top: 1rem; }
.e28-license-picker label {
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto;
  gap: 0.1rem 1rem; padding: 0.9rem; border: 1px solid var(--e28-rule);
  cursor: pointer; transition: border-color 160ms;
}
.e28-license-picker label:hover { border-color: var(--e28-ink); }
.e28-license-picker input[type=radio] { display: none; }
.e28-license-picker label:has(input:checked) { border-color: var(--e28-ink); background: var(--e28-paper-2); }
.e28-license-picker .tier-label { font-family: var(--e28-display); font-weight: 800; font-size: 0.9rem; text-transform: uppercase; }
.e28-license-picker .tier-price { font-family: var(--e28-display); font-weight: 800; font-size: 1rem; text-align: right; }
.e28-license-picker .tier-note  { grid-column: 1 / -1; font-size: 0.72rem; color: var(--e28-muted); text-transform: none; letter-spacing: 0.02em; line-height: 1.4; font-weight: 400; }
.e28-buy-btn {
  margin-top: 1rem; padding: 0.9rem;
  background: var(--e28-ink); color: var(--e28-paper);
  border: 0; font-family: var(--e28-display); font-weight: 700;
  font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase;
  cursor: pointer; transition: opacity 160ms;
}
.e28-buy-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.e28-fine { margin-top: 1rem; color: var(--e28-muted); }
@media (max-width: 960px) {
  .e28-image-grid { grid-template-columns: 1fr; gap: 2rem; }
  .e28-image-buy { position: static; }
  .e28-exif { grid-template-columns: repeat(2, 1fr); }
}

/* Cart / checkout */
.e28-cart { width: 100%; border-collapse: collapse; margin: 1.5rem 0; }
.e28-cart td { padding: 1rem 0.75rem; border-bottom: 1px solid var(--e28-rule); vertical-align: middle; }
.e28-cart td.e28-cart-thumb { width: 80px; }
.e28-cart td.e28-cart-thumb img { width: 80px; height: 60px; object-fit: cover; }
.e28-cart td .meta { font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--e28-muted); font-weight: 600; margin-top: 0.2rem; }
.e28-cart td.e28-cart-price { font-family: var(--e28-display); font-weight: 800; font-size: 1.05rem; text-align: right; }
.e28-cart tr.e28-cart-total td { border-bottom: 0; border-top: 2px solid var(--e28-ink); padding-top: 1.25rem; font-family: var(--e28-display); font-size: 1.15rem; font-weight: 800; }

.e28-link-btn { background: none; border: 0; color: var(--e28-ink); font-family: var(--e28-display); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; cursor: pointer; text-decoration: underline; }
.e28-link-btn:hover { color: var(--e28-muted); }

.e28-checkout-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; padding: 1.5rem 0 4rem; align-items: start; }
.e28-checkout-items { list-style: none; padding: 0; margin: 0; }
.e28-checkout-items li { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 0.1rem 1rem; padding: 0.9rem 0; border-bottom: 1px solid var(--e28-rule); }
.e28-checkout-items li .meta { grid-column: 1; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--e28-muted); font-weight: 600; }
.e28-checkout-items li .price { grid-column: 2; grid-row: 1 / 3; font-family: var(--e28-display); font-weight: 800; font-size: 1.05rem; align-self: center; }
.e28-payment { border: 1px solid var(--e28-ink); padding: 1.5rem; }
@media (max-width: 960px) { .e28-checkout-grid { grid-template-columns: 1fr; gap: 2rem; } }

/* Auth pages */
.e28-auth { max-width: 480px; margin: 0 auto; padding: clamp(3rem, 7vw, 6rem) 0; }
.e28-auth .eyebrow { display: block; margin-bottom: 0.75rem; }
.e28-auth h1 {
  margin-bottom: 1.25rem;
  font-family: var(--e28-display); font-weight: 900;
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: -0.03em; line-height: 1;
  text-transform: uppercase;
}
.e28-auth p { max-width: none; }
.e28-auth form { display: grid; gap: 1rem; margin-top: 1.5rem; }
.e28-auth form input {
  width: 100%; background: transparent !important; color: var(--e28-ink) !important;
  border: 0; border-bottom: 1px solid var(--e28-ink) !important;
  padding: 0.75rem 0 !important; font-family: var(--e28-sans); font-size: 1rem;
  border-radius: 0 !important;
}
.e28-auth form input::placeholder { color: var(--e28-muted); }
.e28-auth form input:focus { outline: none; border-bottom-color: var(--e28-accent); }
.e28-auth form button {
  justify-self: start;
  margin-top: 0.75rem; padding: 0.9rem 2rem;
  background: var(--e28-ink); color: var(--e28-paper); border: 0;
  font-family: var(--e28-display); font-weight: 700;
  font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase;
  cursor: pointer;
}
.e28-auth form button:hover { opacity: 0.85; }
.e28-err { color: #A63030; font-size: 0.85rem; }
.e28-ok  { color: #2E7D32; font-size: 0.85rem; }

.e28-role-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 2rem; }
.e28-role-card {
  border: 1px solid var(--e28-rule); padding: 1.5rem;
  display: block; transition: border-color 180ms;
}
.e28-role-card:hover { border-color: var(--e28-ink); }
.e28-role-card h3 { margin: 0.5rem 0; }
@media (max-width: 860px) { .e28-role-cards { grid-template-columns: 1fr; } }

/* Dashboard */
.e28-dash { padding: 1.5rem 0 4rem; }
.e28-dash-nav {
  display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap;
  padding: 1rem 0 1.25rem;
  border-bottom: 1px solid var(--e28-rule);
  font-family: var(--e28-display); font-weight: 700;
  font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase;
}
.e28-dash-nav a { color: var(--e28-muted) !important; }
.e28-dash-nav a:hover { color: var(--e28-ink) !important; }
.e28-dash-head { padding: 2rem 0 1.25rem; }
.e28-dash-head h1 {
  margin: 0.5rem 0 0;
  font-family: var(--e28-display); font-weight: 900;
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: -0.03em; line-height: 0.95;
  text-transform: uppercase;
}
.e28-dash-head .eyebrow { display: block; }

.e28-upload-card { border: 1px solid var(--e28-ink); padding: 1.5rem; margin: 1.5rem 0 2rem; }
.e28-upload-card h3 { margin: 0 0 1rem; }
.e28-upload-card form { display: grid; gap: 1rem; max-width: 600px; }
.e28-upload-card input[type=file],
.e28-upload-card input[type=text], .e28-upload-card input[type=email],
.e28-upload-card select, .e28-upload-card textarea {
  width: 100%; background: transparent; color: var(--e28-ink);
  border: 0; border-bottom: 1px solid var(--e28-ink);
  padding: 0.6rem 0; font-family: var(--e28-sans); font-size: 0.95rem;
}
.e28-upload-card button {
  justify-self: start; margin-top: 0.5rem; padding: 0.75rem 1.5rem;
  background: var(--e28-ink); color: var(--e28-paper); border: 0;
  font-family: var(--e28-display); font-weight: 700;
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  cursor: pointer;
}

/* Roster (photographers directory page) */
.e28-roster {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
  padding: 1.5rem 0 4rem;
}
.e28-photog-card {
  display: block; border: 1px solid var(--e28-rule); padding: 1.5rem;
  transition: border-color 180ms;
}
.e28-photog-card:hover { border-color: var(--e28-ink); }
.e28-photog-card h3 { margin: 0.5rem 0; }
.e28-photog-portrait {
  width: 96px; height: 96px; border-radius: 50%;
  overflow: hidden; background: var(--e28-paper-2); margin-bottom: 1rem;
}
.e28-photog-portrait img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) { .e28-roster { grid-template-columns: 1fr; } }
.e28-photog-head .e28-photog-portrait { width: 140px; height: 140px; }

/* Avatar editor (source drag + round preview) */
.e28-avatar-editor {
  display: inline-flex; gap: 1.5rem; align-items: center; flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
.e28-avatar-editor__source {
  position: relative;
  width: 260px; height: 260px;
  background: var(--e28-paper-2) center/cover no-repeat;
  cursor: crosshair; user-select: none;
  border: 1px solid var(--e28-rule);
}
.e28-avatar-editor__dot {
  position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px;
  border: 2px solid #fff; background: rgba(0,0,0,0.25); border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.6); pointer-events: none;
}
.e28-avatar-editor__preview {
  width: 140px; height: 140px; border-radius: 50%;
  background-size: cover; background-repeat: no-repeat;
  background-color: var(--e28-paper-2);
  border: 1px solid var(--e28-rule);
}

/* Photographer profile contact + image picker grid */
.e28-photog-contact {
  list-style: none; padding: 0; margin: 1rem 0 0;
  border-top: 1px solid var(--e28-rule);
  display: grid; gap: 0;
}
.e28-photog-contact li {
  display: grid; grid-template-columns: 110px 1fr; gap: 1rem;
  padding: 0.55rem 0; border-bottom: 1px solid var(--e28-rule);
  font-size: 0.9rem;
}
.e28-photog-contact .lbl {
  font-family: var(--e28-display); font-weight: 700;
  font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--e28-muted);
}
.e28-photog-contact a { border-bottom: 1px solid var(--e28-ink); padding-bottom: 1px; }

.e28-pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 6px;
  margin-top: 0.5rem;
  max-height: 360px; overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--e28-rule);
}
.e28-pick {
  position: relative;
  aspect-ratio: 1/1;
  cursor: pointer;
  display: block;
  background: var(--e28-paper-2);
  overflow: hidden;
}
.e28-pick input { position: absolute; opacity: 0; pointer-events: none; }
.e28-pick img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 180ms; opacity: 0.55; }
.e28-pick:hover img { opacity: 0.85; }
.e28-pick.is-checked img,
.e28-pick:has(input:checked) img { opacity: 1; }
.e28-pick.is-checked::after,
.e28-pick:has(input:checked)::after {
  content: "✓";
  position: absolute; top: 4px; right: 4px;
  background: var(--e28-ink); color: #fff;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--e28-display); font-weight: 800; font-size: 0.85rem;
  border-radius: 50%;
}

/* Photographer profile + masonry (author.php) */
.e28-photog-profile {
  display: grid; grid-template-columns: 280px 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  border-bottom: 1px solid var(--e28-rule);
  align-items: start;
}
.e28-photog-profile__portrait {
  width: 280px; aspect-ratio: 1/1;
  background: var(--e28-paper-2); overflow: hidden;
  border-radius: 50%;                                         /* round like the admin picker */
}
.e28-photog-profile__portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.e28-photog-name {
  font-family: var(--e28-display); font-weight: 900;
  font-size: clamp(2.5rem, 6vw, 5.5rem);
  line-height: 0.88; letter-spacing: -0.045em;
  text-transform: uppercase;
  margin: 0.75rem 0 1rem;
  color: var(--e28-ink);
  display: block;
}
.e28-photog-name small {
  display: block;
  font-family: var(--e28-display); font-weight: 600;
  font-size: clamp(0.95rem, 1.5vw, 1.4rem);
  letter-spacing: 0.06em;
  color: var(--e28-muted);
  margin-top: 0.45rem;
  line-height: 1;
}
.e28-photog-acc { font-size: 0.85rem; color: var(--e28-muted); }
.e28-photog-acc .eyebrow { margin-right: 0.5rem; color: var(--e28-ink); }
.e28-photog-bio { margin: 1rem 0; max-width: 60ch; }
.e28-photog-count { margin-top: 1.25rem; font-family: var(--e28-display); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--e28-muted); }
.e28-photog-count strong { color: var(--e28-ink); font-weight: 800; font-size: 1rem; margin-right: 0.4rem; }
@media (max-width: 860px) {
  .e28-photog-profile { grid-template-columns: 1fr; }
  .e28-photog-profile__portrait { width: 180px; }
}

.e28-masonry {
  column-count: 3;
  column-gap: clamp(0.75rem, 1.5vw, 1.25rem);
  padding: 1rem 0 4rem;
}
.e28-masonry__item {
  break-inside: avoid; display: block;
  margin: 0 0 clamp(0.75rem, 1.5vw, 1.25rem);
  position: relative; overflow: hidden; background: var(--e28-paper-2);
}
.e28-masonry__item img { width: 100%; height: auto; display: block; transition: transform 700ms cubic-bezier(.2,.6,.2,1); }
.e28-masonry__item:hover img { transform: scale(1.025); }
.e28-masonry__cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1rem;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.72) 100%);
  color: var(--e28-paper);
  opacity: 0; transform: translateY(6px); transition: opacity 300ms, transform 300ms;
}
.e28-masonry__item:hover .e28-masonry__cap { opacity: 1; transform: translateY(0); }
.e28-masonry__cap .title { display: block; font-family: var(--e28-display); font-weight: 800; font-size: 0.92rem; letter-spacing: -0.01em; text-transform: uppercase; }
.e28-masonry__cap .meta  { display: block; font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(244,242,238,0.7); margin-top: 0.15rem; }
@media (max-width: 1024px) { .e28-masonry { column-count: 2; } }
@media (max-width: 600px)  { .e28-masonry { column-count: 1; } }

/* ============================================================
   MOBILE RESPONSIVE HARDENING (v0.17.3)
   Prevent horizontal overflow, wrap headline/lead copy, scale
   featured overlay & rail chrome down for narrow viewports.
   ============================================================ */
html, body.e28 { overflow-x: hidden; }
body.e28 * { min-width: 0; }
/* Shell must never EXCEED the viewport on small screens (scoped to mobile
   so desktop can still respect --e28-maxw). */
@media (max-width: 720px) {
  body.e28 .e28-shell { max-width: 100%; }
}

/* Headline: never clip; always wrap; size down on small screens */
.e28-headline h1 {
  white-space: normal !important;
  overflow: visible !important;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}
.e28-headline__lead {
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
}

@media (max-width: 720px) {
  .e28-headline h1  { font-size: clamp(1.85rem, 10vw, 3rem); line-height: 0.9; }
  .e28-headline__lead { font-size: 0.95rem; line-height: 1.45; }
  .e28-headline__kicker { font-size: 0.72rem; letter-spacing: 0.18em; }

  /* Rails: tighter chrome so thumbs don't crowd the viewport edge */
  .e28-rail { padding: 0 1.5rem; }
  .e28-rail__arrow { width: 22px; }

  /* Events & photographers rail cards smaller so ~2.2 fit */
  .rail-events, .rail-photogs { --col: clamp(140px, 46vw, 180px); }
  .rail-events .card .title,
  .rail-photogs .card .title { font-size: 0.82rem; }

  /* Featured-carousel overlay: don't blow past stage width, shrink text */
  .e28-featured-slide .e28-featured__body {
    left: 1rem; right: 1rem; bottom: 1rem;
  }
  .e28-featured-slide h2 {
    font-size: clamp(1.1rem, 5vw, 1.5rem);
    -webkit-line-clamp: 2;
    max-width: 100%;
  }
  .e28-featured-slide .sub  { font-size: 0.7rem; letter-spacing: 0.14em; }
  .e28-featured-slide .cap  { font-size: 0.7rem; -webkit-line-clamp: 2; max-width: 100%; }
  .e28-featured-slide .cred { font-size: 0.6rem; }

  /* Latest rail: smaller thumbs, cap landscape width so 3 fit */
  .rail-latest { --h: 90px; }
  .rail-latest .card .thumb img { max-width: calc(var(--h) * 2); }
  .rail-latest .card .title { font-size: 0.56rem; max-width: calc(var(--h) * 1.8); }

  /* Section heads flush to gutter, same as shell */
  .e28-section__head { padding: 0; }
}

@media (max-width: 420px) {
  .e28-headline h1 { font-size: clamp(1.65rem, 11vw, 2.4rem); }
  .e28-rail { padding: 0 1.1rem; }
  .e28-rail__arrow { width: 18px; font-size: 0.9rem; }
  .rail-events, .rail-photogs { --col: clamp(130px, 48vw, 170px); }
}

/* ---------- Front-end admin: Delete image button on single-e28_image ---------- */
.e28-admin-delete { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--e28-rule); }
.e28-admin-delete__btn {
  background: transparent; color: #B00020;
  border: 1px solid #B00020;
  padding: 0.5rem 1rem;
  font-family: var(--e28-display); font-weight: 700; font-size: 0.7rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  cursor: pointer; transition: background 160ms, color 160ms;
}
.e28-admin-delete__btn:hover { background: #B00020; color: #FFFFFF; }

/* ---------- Owner toolbar on single-e28_image (front-end management) ---------- */
.e28-owner-toolbar {
  margin-top: 1.5rem; padding-top: 1.5rem;
  border-top: 1px solid var(--e28-rule);
  display: flex; flex-direction: column; gap: 0.75rem;
  align-items: flex-start;
}
.e28-owner-toolbar .eyebrow { margin: 0 0 0.25rem; }
.e28-owner-toolbar form { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; }
.e28-owner-btn {
  background: transparent; color: var(--e28-ink);
  border: 1px solid var(--e28-ink);
  padding: 0.45rem 0.9rem;
  font-family: var(--e28-display); font-weight: 700; font-size: 0.65rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  cursor: pointer; transition: background 160ms, color 160ms;
}
.e28-owner-btn:hover { background: var(--e28-ink); color: var(--e28-paper); }
.e28-owner-btn--danger { color: #B00020; border-color: #B00020; }
.e28-owner-btn--danger:hover { background: #B00020; color: #FFFFFF; }
.e28-owner-msg {
  margin: 0; padding: 0.4rem 0; font-size: 0.78rem; color: #336633;
  font-family: var(--e28-display); font-weight: 600; letter-spacing: 0.04em;
}

/* ---------- Stripe checkout — line items with thumbnail ---------- */
.e28-checkout-items { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.e28-checkout-item {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 1rem; align-items: center;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--e28-rule);
}
.e28-checkout-item .thumb {
  width: 64px; height: 64px; object-fit: cover; display: block;
  background: var(--e28-paper-2);
}
.e28-checkout-item .body { min-width: 0; }
.e28-checkout-item .hd {
  font-family: var(--e28-display); font-weight: 700;
  font-size: 0.65rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--e28-muted);
  margin-bottom: 0.2rem;
}
.e28-checkout-item .cap {
  font-size: 0.85rem; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.e28-checkout-item .meta {
  margin-top: 0.25rem;
  font-family: var(--e28-display); font-weight: 600;
  font-size: 0.62rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--e28-muted);
}
.e28-checkout-item .price {
  font-family: var(--e28-display); font-weight: 800;
  font-size: 1rem; white-space: nowrap;
}

/* ---------- Checkout / done page tweaks ---------- */
/* body.e28 a { color: inherit } overrode our solid-button colour, making
   white-on-black text invisible. Lift specificity. */
body.e28 a.e28-buy-btn,
body.e28 a.e28-buy-btn:visited { color: var(--e28-paper); }
body.e28 a.e28-buy-btn:hover   { color: var(--e28-paper); opacity: 0.9; }

/* Larger, more readable line items on the success / dashboard pages */
.e28-checkout-item { grid-template-columns: 110px 1fr auto; gap: 1.25rem; }
.e28-checkout-item .thumb { width: 110px; height: 110px; }
.e28-checkout-item .cap   { font-size: 0.95rem; -webkit-line-clamp: 3; }

/* Per-line "Download" anchor — give it room and a chevron */
.e28-checkout-item a.e28-owner-btn {
  min-width: 160px; padding: 0.65rem 1rem;
  text-align: center; white-space: nowrap;
  font-size: 0.7rem;
}

/* ZIP-all button: stand-alone, full width on small screens */
.e28-checkout-done-zip {
  display: inline-block;
  background: var(--e28-ink); color: var(--e28-paper);
  padding: 0.85rem 1.5rem;
  font-family: var(--e28-display); font-weight: 700;
  font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase;
  text-decoration: none;
  transition: opacity 160ms;
}
body.e28 a.e28-checkout-done-zip,
body.e28 a.e28-checkout-done-zip:visited { color: var(--e28-paper); }
body.e28 a.e28-checkout-done-zip:hover    { color: var(--e28-paper); opacity: 0.85; }

@media (max-width: 720px) {
  .e28-checkout-item { grid-template-columns: 80px 1fr; }
  .e28-checkout-item .thumb { width: 80px; height: 80px; }
  .e28-checkout-item a.e28-owner-btn { grid-column: 1 / -1; min-width: 100%; }
}

/* ---------- Contact form ---------- */
.e28-contact-form { display: grid; gap: 0.75rem; max-width: 560px; }
.e28-contact-form label { display: grid; gap: 0.25rem; font-size: 0.78rem; }
.e28-contact-form input[type="text"],
.e28-contact-form input[type="email"],
.e28-contact-form textarea {
  padding: 0.6rem 0.75rem; font: inherit;
  border: 1px solid var(--e28-rule); background: var(--e28-paper); color: var(--e28-ink);
}
.e28-contact-form textarea { resize: vertical; min-height: 140px; }
.e28-contact-form button { justify-self: start; margin-top: 0.5rem; }
.e28-contact-ok { padding: 0.6rem 0.9rem; background: #e9f7ef; border: 1px solid #6cba8a; color: #1c5b34; font-size: 0.85rem; }

/* ---------- "Already owned" notice on cart + checkout ---------- */
.e28-owned-notice {
  margin: 0 0 1.5rem;
  padding: 0.85rem 1rem;
  background: #F2F7F3;
  border-left: 3px solid #336633;
  color: #1c5b34;
  font-size: 0.88rem;
  line-height: 1.5;
}
body.e28 .e28-owned-notice a { color: #1c5b34; border-bottom: 1px solid currentColor; }
tr.is-owned { opacity: 0.75; }
tr.is-owned td:nth-child(2) a { color: #8A8682; }

/* ---------- Licence terms page ---------- */
.e28-terms-card {
  border: 1px solid var(--e28-rule);
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
}
.e28-terms-card .eyebrow { margin: 0 0 0.5rem; }
.e28-terms-body { font-size: 0.92rem; line-height: 1.55; max-height: 320px; overflow-y: auto; padding-right: 0.5rem; }
.e28-terms-body p { margin: 0 0 0.75rem; }
.e28-terms-body ul, .e28-terms-body ol { padding-left: 1.25rem; margin: 0 0 0.75rem; }
.e28-terms-agree {
  display: flex; align-items: flex-start; gap: 0.85rem;
  margin-top: 2rem; padding: 1.1rem 1.25rem;
  background: #FFFFFF;
  border: 2px solid #0A0A0A;          /* strong keyline around the whole row */
  font-weight: 600;
  cursor: pointer;
  transition: background 160ms ease;
}
.e28-terms-agree:hover { background: #FAFAF8; }
.e28-terms-agree:has(input:checked) { background: #F4F2EE; }
.e28-terms-agree__text { line-height: 1.4; }
/* Force the native checkbox visible — parent Skylab theme hides inputs
   across the site (body.input-style-1) for custom styling. */
/* Parent theme's script.js auto-adds .input-checkbox-custom (display:none) to
   every checkbox and overlays a custom SVG tick. Neutralise both here. */
.e28-terms-agree input[type="checkbox"],
.e28-owner-toolbar input[type="checkbox"],
.e28-contact-form input[type="checkbox"],
body.e28 .e28-terms-agree input.input-checkbox-custom,
body.e28 .e28-owner-toolbar input.input-checkbox-custom,
body.e28 .e28-contact-form input.input-checkbox-custom {
  display: inline-block !important;
  -webkit-appearance: checkbox !important;
  -moz-appearance: checkbox !important;
  appearance: checkbox !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  margin: 2px 0 0 !important;
  padding: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: static !important;
  clip: auto !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  border: 2px solid #0A0A0A !important;
  background: #FFFFFF !important;
  accent-color: #0A0A0A;
  cursor: pointer;
  box-shadow: none !important;
  transform: none !important;
}
.e28-terms-agree .checkbox-custom,
.e28-owner-toolbar .checkbox-custom,
.e28-contact-form .checkbox-custom { display: none !important; }

/* ---------- Single-image zoom: magnifier cursor → fills window on click ---------- */
.e28-zoom-trigger {
  display: block; width: 100%;
  background: transparent; border: 0; padding: 0; margin: 0;
  cursor: zoom-in;
}
.e28-zoom-trigger img { display: block; width: 100%; height: auto; cursor: zoom-in; }

.e28-zoom {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(10,10,10,0.96);
  display: none; align-items: center; justify-content: center;
  cursor: zoom-out;
}
.e28-zoom.is-open { display: flex; }
.e28-zoom img {
  max-width: 100vw; max-height: 100vh;
  object-fit: contain;
  display: block;
  user-select: none; -webkit-user-drag: none;
}