/* =========================================================
   VICTOR HAMMER PHOTOGRAPHY - EASY DREAMWEAVER CSS
   Change the values in SECTION 1 for the fastest edits.
   ========================================================= */

/* SECTION 1: QUICK SETTINGS */
:root {
  --page-bg: #101010;
  --panel-bg: #191919;
  --text: #f3f1ec;
  --muted: #b9b5ad;
  --accent: #caa66b;
  --border: #353535;
  --content-width: 1500px;
  --gallery-gap: 8px; /* Space between photographs on all sides */
  --corner-radius: 2px;
  --body-font: Arial, Helvetica, sans-serif;
  --heading-font: Georgia, "Times New Roman", serif;
}

/* SECTION 2: BASIC PAGE */
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--page-bg);
  color: var(--text);
  font-family: var(--body-font);
  line-height: 1.55;
}
a {
  color: inherit;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
.container {
  width: min(calc(100% - 32px), var(--content-width));
  margin: 0 auto;
}

/* SECTION 3: HEADER AND NAVIGATION */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(16, 16, 16, 0.96);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
/* Brand logo and name: logo appears to the left of the name on every page. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  font-family: Helvetica, Arial, sans-serif;
  font-size: clamp(22px, 3vw, 36px);
  letter-spacing: 0.04em;
  line-height: 1.05;
}
.brand-logo {
  width: clamp(96px, 11vw, 136px);
  height: clamp(92px, 10.5vw, 130px);
  object-fit: contain;
  flex: 0 0 auto;
}
.brand-name {
  display: inline-block;
}
.main-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}
.main-nav a {
  text-decoration: none;
  color: var(--muted);
}
.main-nav a:hover,
.main-nav a:focus {
  color: var(--accent);
}

/* SECTION 4: HERO */
.hero {
  min-height: 62vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 70px 0;
  background:
    linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.65)),
    url("../images/categories/category-01.svg") center/cover no-repeat;
}
.hero h1 {
  font-family: var(--heading-font);
  font-size: clamp(42px, 8vw, 92px);
  margin: 0 0 12px;
}
.hero p {
  max-width: 760px;
  margin: 0 auto 26px;
  color: #eee;
  font-size: 18px;
}
.button {
  display: inline-block;
  padding: 12px 18px;
  border: 1px solid var(--accent);
  color: var(--text);
  background: transparent;
  text-decoration: none;
  border-radius: var(--corner-radius);
}
.button:hover,
.button:focus {
  background: var(--accent);
  color: #111;
}

/* SECTION 5: PAGE HEADINGS */
.page-intro {
  padding: 64px 0 32px;
  text-align: center;
}
.page-intro h1,
.section-title {
  font-family: var(--heading-font);
  font-size: clamp(34px, 5vw, 62px);
  margin: 0 0 12px;
}
.page-intro p {
  color: var(--muted);
  max-width: 760px;
  margin: 0 auto;
}

/* SECTION 6: HOME GALLERY CARDS */
.gallery-menu {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 20px 0 54px;
}
.gallery-card {
  position: relative;
  min-height: 180px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--panel-bg);
  text-decoration: none;
  border-radius: var(--corner-radius);
}
.gallery-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}
.gallery-card:hover img {
  transform: scale(1.025);
}
.gallery-card span {
  position: absolute;
  inset: auto 0 0;
  padding: 24px 14px 13px;
  font-family: var(--heading-font);
  font-size: 20px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
}
.gallery-card.empty {
  display: grid;
  place-items: center;
  color: var(--muted);
  min-height: 180px;
  padding: 18px;
  text-align: center;
}
.gallery-menu > .gallery-card .gallery-menu > .gallery-card.gallery-card-wide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 110px !important;
  min-height: 0 !important;
  object-fit: cover;
}
/* SECTION 7: FLEXIBLE MASONRY PHOTO GALLERIES
   Each gallery page controls its own number of columns with:
   style="--gallery-columns: 3;"

   Each photograph can be sized independently in js/photo-catalog.js:
   gallerySize: "small"   (about 75% of one column)
   gallerySize: "normal"  (one full column)
   gallerySize: "large"   (spans two columns)

   The JavaScript renderer calculates the masonry row height after each
   image loads, preserving the photograph's original aspect ratio. */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(var(--gallery-columns, 3), minmax(0, 1fr));
  grid-auto-rows: 8px;
  grid-auto-flow: dense;
  gap: var(--gallery-gap);
  padding: var(--gallery-gap) 0 70px;
  align-items: start;
}

.photo-card {
  width: 100%;
  min-width: 0;
  align-self: start;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--corner-radius);
  overflow: hidden;
}

.photo-card.size-small {
  width: 75%;
  justify-self: center;
}

.photo-card.size-normal {
  grid-column: span 1;
}

.photo-card.size-large {
  grid-column: span 2;
}

.photo-link {
  display: block;
  line-height: 0;
  background: #0a0a0a;
}
.photo-link img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  aspect-ratio: auto;
}

.photo-info {
  padding: 16px;
}
.photo-info h2 {
  font-family: var(--heading-font);
  font-size: 24px;
  margin: 0 0 8px;
}
.photo-info p {
  margin: 0 0 10px;
  color: var(--muted);
}
.edition {
  color: var(--accent) !important;
}
.purchase-options {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}
.buy-button {
  display: block;
  text-align: center;
  text-decoration: none;
  border: 1px solid var(--accent);
  padding: 10px 12px;
  border-radius: var(--corner-radius);
}
.buy-button:hover,
.buy-button:focus {
  background: var(--accent);
  color: #111;
}

/* SECTION 8: TEXT PAGES */
.content-page {
  max-width: 880px;
  margin: 0 auto;
  padding: 58px 20px 80px;
}
.content-page h1,
.content-page h2 {
  font-family: var(--heading-font);
}
.note {
  border-left: 4px solid var(--accent);
  background: var(--panel-bg);
  padding: 16px 18px;
}

/* SECTION 9: FOOTER */
.site-footer {
  border-top: 1px solid var(--border);
  color: var(--muted);
  padding: 32px 0;
  text-align: center;
}

/* SECTION 10: RESPONSIVE */
@media (max-width: 980px) {
  .photo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .gallery-menu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .gallery-card {
    min-height: 165px;
  }
}
@media (max-width: 680px) {
  .photo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
  .photo-card.size-large {
    grid-column: span 1;
  }
  .photo-card.size-small {
    width: 88%;
  }
  .header-inner {
    align-items: flex-start;
    flex-direction: column;
    padding: 18px 0;
  }
  .gallery-menu {
    grid-template-columns: 1fr;
  }
  .gallery-card,
  .gallery-card.empty {
    min-height: 160px;
  }
}

/* SECTION 11: CLEAN GALLERY CARDS */
.view-details {
  margin: 4px 0 0 !important;
  color: var(--accent) !important;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.photo-card:hover,
.photo-card:focus-within {
  border-color: var(--accent);
}

/* SECTION 12: INDIVIDUAL PRICING PAGES */
.pricing-page {
  padding-bottom: 80px;
}
.pricing-heading {
  padding: 58px 0 28px;
  text-align: center;
}
.pricing-heading .eyebrow {
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0 0 8px;
}
.pricing-heading h1 {
  font-family: var(--heading-font);
  font-size: clamp(34px, 5vw, 62px);
  margin: 0 0 10px;
}
.pricing-heading > p:last-child {
  color: var(--muted);
  margin: 0 auto;
}
.pricing-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
  gap: 42px;
  align-items: start;
}
.pricing-image-wrap {
  background: #090909;
  border: 1px solid var(--border);
  padding: 12px;
}
.pricing-image-wrap img {
  width: 100%;
  height: auto;
}
.image-note {
  color: var(--muted);
  text-align: center;
  font-size: 13px;
  margin: 10px 0 0;
}
.pricing-details {
  display: grid;
  gap: 18px;
}
.detail-block {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  padding: 22px;
}
.detail-block h2 {
  font-family: var(--heading-font);
  margin: 0 0 16px;
  font-size: 27px;
}
.print-specs {
  margin: 0;
}
.print-specs > div {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.print-specs > div:last-child {
  border-bottom: 0;
}
.print-specs dt {
  color: var(--muted);
}
.print-specs dd {
  margin: 0;
}
.price-row {
  border-top: 1px solid var(--border);
  padding: 16px 0;
}
.price-row:first-of-type {
  border-top: 0;
  padding-top: 0;
}
.price-row > div {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 6px;
}
.price-row span {
  color: var(--accent);
  font-weight: bold;
}
.purchase-note p {
  color: var(--muted);
  margin-bottom: 0;
}
.back-link {
  color: var(--accent);
  text-decoration: none;
}
.back-link:hover,
.back-link:focus {
  text-decoration: underline;
}
@media (max-width: 900px) {
  .pricing-layout {
    grid-template-columns: 1fr;
  }
}

/* SECTION 13: FULL-IMAGE PAGES WITH NAVIGATION */
.full-image-page {
  min-height: 100vh;
}
.full-image-view {
  padding: 30px 0 70px;
}
.full-image-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 8px 0 22px;
}
.full-image-toolbar h1 {
  margin: 0;
  font-family: var(--heading-font);
  font-size: clamp(24px, 3vw, 40px);
  text-align: right;
}
.full-image-frame {
  margin: 0;
  border: 1px solid var(--border);
  background: #080808;
  padding: 14px;
}
.full-image-frame img {
  width: auto;
  max-width: 100%;
  max-height: calc(100vh - 210px);
  margin: 0 auto;
  object-fit: contain;
}
.full-image-frame figcaption {
  padding-top: 12px;
  color: var(--muted);
  text-align: center;
}
.full-image-return {
  margin: 24px 0 0;
  text-align: center;
}
@media (max-width: 680px) {
  .full-image-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }
  .full-image-toolbar h1 {
    text-align: left;
  }
  .full-image-frame img {
    max-height: none;
  }
}

/* SECTION 14: RESPONSIVE FULL-IMAGE VIEW AND PRINT-DETAIL LINK */
.pricing-image-link {
  display: block;
  position: relative;
  cursor: zoom-in;
  text-decoration: none;
  outline-offset: 4px;
}
.pricing-image-link::after {
  content: "View Large";
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--corner-radius);
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.pricing-image-link:hover::after,
.pricing-image-link:focus::after {
  background: var(--accent);
  color: #111;
}
.full-image-actions,
.full-image-return {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.full-image-toolbar .full-image-actions {
  justify-content: flex-start;
}
.full-image-back {
  background: var(--accent);
  color: #fff;
  font-weight: 700;
}
.full-image-home {
  background: #242424;
  border-color: #777;
}
.full-image-frame {
  display: grid;
  place-items: center;
  min-height: 0;
}
.full-image-frame img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100dvh - 220px);
}

/* Phones and narrow portrait tablets */
@media (max-width: 680px) {
  .container {
    width: min(calc(100% - 20px), var(--content-width));
  }
  .site-header {
    position: sticky;
  }
  .header-inner {

  }
  .main-nav {
    gap: 10px 14px;
    font-size: 15px;
  }
  .pricing-heading {
    padding: 34px 0 20px;
  }
  .pricing-layout {
    gap: 24px;
  }
  .pricing-image-wrap {
    padding: 6px;
  }
  .detail-block {
    padding: 17px;
  }
  .print-specs > div {
    grid-template-columns: 86px 1fr;

  }
  .full-image-view {
    padding: 14px 0 34px;
  }
  .full-image-toolbar {
    gap: 14px;
    padding-bottom: 14px;
  }
  .full-image-actions {
    width: 100%;
  }
  .full-image-actions .button,
  .full-image-return .button {
    flex: 1 1 145px;
    text-align: center;
  }
  .full-image-frame {
    padding: 6px;
  }
  .full-image-frame img {
    max-height: calc(100dvh - 250px);
  }
}

/* Phones and tablets held landscape */
@media (max-height: 620px) and (orientation: landscape) {
  .site-header {
    position: static;
  }
  .header-inner {
    min-height: 58px;
  }
  .brand {
    font-size: 22px;
    gap: 9px;
  }
  .brand-logo {
    width: 88px;
    height: 84px;
  }
  .full-image-view {
    padding: 10px 0 22px;
  }
  .full-image-toolbar {
    padding: 0 0 10px;
  }
  .full-image-toolbar h1 {
    font-size: 22px;
  }
  .full-image-frame {
    padding: 5px;
  }
  .full-image-frame img {
    max-height: calc(100dvh - 145px);
  }
  .full-image-frame figcaption {
    display: none;
  }
  .full-image-return {
    margin-top: 10px;
  }
}

/* Larger tablets */
@media (min-width: 681px) and (max-width: 1100px) {
  .pricing-layout {
    grid-template-columns: 1fr;
  }
  .full-image-frame img {
    max-height: calc(100dvh - 230px);
  }
}

/* SECTION 15: INTERACTIVE FULL-IMAGE ZOOM */
.zoom-stage {
  position: relative;
  overflow: hidden;
  min-height: min(72dvh, 760px);
  touch-action: none;
  user-select: none;
  overscroll-behavior: contain;
  cursor: zoom-in;
}
.zoom-stage.is-zoomed {
  cursor: grab;
}
.zoom-stage.is-zoomed:active {
  cursor: grabbing;
}
.zoom-stage img {
  transform-origin: center center;
  transition: transform 120ms ease-out;
  will-change: transform;
  -webkit-user-drag: none;
  user-select: none;
}
.zoom-stage.is-zoomed img {
  transition: none;
}
.image-zoom-controls {
  position: absolute;
  z-index: 5;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 6px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(7px);
}
.zoom-button {
  min-width: 42px;
  min-height: 42px;
  padding: 7px 11px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  background: #171717;
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.zoom-button:hover,
.zoom-button:focus-visible {
  background: var(--accent);
  color: #111;
}
.zoom-button:disabled {
  opacity: 0.38;
  cursor: default;
}
.zoom-status {
  min-width: 70px;
}
.image-zoom-hint {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 24px);
  margin: 0;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.76);
  color: #fff;
  font-size: 13px;
  text-align: center;
  pointer-events: none;
}
@media (max-width: 680px) {
  .zoom-stage {
    min-height: calc(100dvh - 220px);
  }
  .image-zoom-controls {
    top: 7px;
    right: 7px;
  }
  .zoom-button {
    min-width: 40px;
    min-height: 40px;
  }
  .image-zoom-hint {
    bottom: 7px;
    font-size: 12px;
  }
}
@media (max-height: 620px) and (orientation: landscape) {
  .zoom-stage {
    min-height: calc(100dvh - 130px);
  }
  .image-zoom-hint {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .zoom-stage img {
    transition: none;
  }
}


/* =============================================================
   HOMEPAGE FILM-STRIP CAROUSEL
   Responsive mixed-orientation carousel with a heavily weathered
   vintage film look. Image titles are printed on the film strip
   itself instead of overlaying the photographs.
   ============================================================= */

.home-carousel {
  position: relative;
  padding: 14px 0 52px;
  overflow: hidden;
  background:
    radial-gradient(circle at top, rgba(160, 0, 0, 0.15), transparent 34%),
    linear-gradient(180deg, #0a0a0a 0%, #050505 100%);
  border-top: 1px solid #171717;
  border-bottom: 1px solid #222;
}
.carousel-heading {
  width: min(640px, calc(100vw - 32px));
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 8px;
}
.carousel-heading h1 {
  margin: 2px 0 0;
  font-family: var(--heading-font);
  font-size: clamp(27px, 3vw, 42px);
  font-weight: 400;
  line-height: 1.05;
}
.carousel-kicker {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.carousel-instruction {
  margin: 0 0 2px;
  color: #d0d0d0;
  font-size: 14px;
  text-align: right;
}
.carousel-stage {
  --film-width: min(1280px, calc(100vw - 32px));
  --film-edge-height: 0px;
  --frame-height: clamp(125px, 12.5vw, 180px);
  --title-band-height: 22px;
  position: relative;
  display: block;
  width: min(100%, var(--film-width));
  margin: 0 auto;
  padding: calc(var(--film-edge-height) + 12px) 22px calc(var(--film-edge-height) + 2px);
  background:
    radial-gradient(circle at 12% 22%, rgba(154, 104, 48, 0.055) 0 2px, transparent 3px),
    radial-gradient(circle at 76% 72%, rgba(154, 104, 48, 0.045) 0 2px, transparent 3px),
    repeating-linear-gradient(92deg, transparent 0 26px, rgba(255,255,255,0.018) 26px 27px, transparent 27px 58px),
    linear-gradient(180deg, #090909 0%, #030303 48%, #080808 100%);
  border-radius: 8px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 216, 155, 0.14),
    inset 0 26px 54px rgba(225, 146, 37, 0.12),
    inset 0 -28px 54px rgba(225, 146, 37, 0.14),
    inset 0 0 42px rgba(0, 0, 0, 0.34),
    0 24px 44px rgba(0, 0, 0, 0.54);
  overflow: hidden;
}
.carousel-stage::before,
.carousel-stage::after {
  content: none !important;
  display: none !important;
}
.carousel-stage::before {
  top: 0;
}
.carousel-stage::after {
  bottom: 0;
}
.carousel-stage-patina {
  position: absolute;
  inset: var(--film-edge-height) 0 var(--film-edge-height) 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.72;
  background:
    repeating-linear-gradient(103deg, rgba(255, 233, 190, 0) 0 18px, rgba(255, 233, 190, 0.05) 18px 19px, rgba(0, 0, 0, 0) 19px 42px),
    repeating-linear-gradient(89deg, rgba(0,0,0,0) 0 11px, rgba(255,220,165,0.045) 11px 12px, rgba(0,0,0,0) 12px 34px),
    radial-gradient(circle at 7% 17%, rgba(255, 232, 192, 0.28) 0 2px, transparent 3px),
    radial-gradient(circle at 12% 62%, rgba(0, 0, 0, 0.16) 0 30px, transparent 31px),
    radial-gradient(circle at 22% 78%, rgba(255, 235, 205, 0.24) 0 1px, transparent 2px),
    radial-gradient(circle at 41% 24%, rgba(0, 0, 0, 0.2) 0 44px, transparent 45px),
    radial-gradient(circle at 55% 50%, rgba(255, 220, 160, 0.08) 0 90px, transparent 92px),
    radial-gradient(circle at 68% 72%, rgba(0, 0, 0, 0.18) 0 58px, transparent 59px),
    radial-gradient(circle at 82% 31%, rgba(255, 220, 160, 0.16) 0 2px, transparent 3px),
    radial-gradient(circle at 90% 58%, rgba(255, 235, 205, 0.18) 0 1px, transparent 2px),
    radial-gradient(circle at 94% 76%, rgba(0, 0, 0, 0.24) 0 44px, transparent 45px);
  mix-blend-mode: screen;
}
.carousel-stage-patina::before,
.carousel-stage-patina::after {
  content: "";
  position: absolute;
  inset: 0;
}
.carousel-stage-patina::before {
  background:
    linear-gradient(96deg, transparent 9%, rgba(255, 231, 198, 0.09) 9.2%, transparent 9.7%),
    linear-gradient(82deg, transparent 27%, rgba(255, 231, 198, 0.07) 27.15%, transparent 27.45%),
    linear-gradient(104deg, transparent 46%, rgba(255, 231, 198, 0.06) 46.15%, transparent 46.4%),
    linear-gradient(101deg, transparent 73%, rgba(255, 231, 198, 0.07) 73.15%, transparent 73.45%),
    linear-gradient(88deg, transparent 86%, rgba(255, 231, 198, 0.05) 86.15%, transparent 86.35%);
  opacity: 1;
}
.carousel-stage-patina::after {
  background:
    radial-gradient(circle at 14% 58%, rgba(0, 0, 0, 0.24) 0 72px, transparent 73px),
    radial-gradient(circle at 33% 14%, rgba(255, 229, 193, 0.08) 0 36px, transparent 37px),
    radial-gradient(circle at 58% 84%, rgba(0, 0, 0, 0.16) 0 62px, transparent 63px),
    radial-gradient(circle at 78% 18%, rgba(0, 0, 0, 0.14) 0 40px, transparent 41px),
    radial-gradient(circle at 88% 82%, rgba(0, 0, 0, 0.24) 0 65px, transparent 66px);
  mix-blend-mode: multiply;
}
.carousel-film-stock {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  color: #e9b45c;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-shadow: 0 0 6px rgba(255, 180, 80, 0.16);
}
.carousel-film-stock--left {
  display: none;
}
.carousel-film-stock--title {
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(10px, 1vw, 15px);
  white-space: nowrap;
}

.carousel-viewport {
  position: relative;
  z-index: 3;
  width: 100%;
  height: calc(var(--frame-height) + var(--title-band-height));
  overflow: hidden;
}
.carousel-track {
  display: flex;
  align-items: stretch;
  gap: 14px;
  width: max-content;
  height: calc(var(--frame-height) + var(--title-band-height));
  will-change: transform;
}
.carousel-loop-marker {
  flex: 0 0 0;
  width: 0;
  height: 1px;
}
.carousel-panel {
  position: relative;
  min-width: 0;
  min-height: 0;
  flex: 0 0 var(--panel-width, 300px);
  width: var(--panel-width, 300px);
  height: var(--frame-height);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-decoration: none;
  color: #fff;
  z-index: 3;
  transition: transform 0.22s ease, filter 0.22s ease;
}
.carousel-panel::before {
  content: none;
}
.carousel-panel:hover,
.carousel-panel:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.04);
  outline: none;
}
.carousel-frame {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 18px;
  background: #f8f7f2;
  box-shadow:
    inset 0 0 0 2px rgba(60, 42, 14, 0.88),
    inset 0 0 0 5px rgba(255, 248, 236, 0.95),
    0 0 0 1px rgba(0, 0, 0, 0.55),
    inset 0 0 24px rgba(0, 0, 0, 0.12);
}
.carousel-frame::before {
  content: none;
}
.carousel-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 -16px 22px rgba(0, 0, 0, 0.12);
}
.carousel-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
  opacity: 1;
  transition: opacity 0.32s ease, transform 0.32s ease;
}
.carousel-panel:hover .carousel-image,
.carousel-panel:focus-visible .carousel-image {
  transform: scale(1.018);
}
.carousel-image.is-changing { opacity: 0.2; }
.carousel-panel-copy {
  position: absolute;
  left: 4px;
  right: 4px;
  top: calc(100% + 3px);
  bottom: auto;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 0;
  background: none;
  border: 0;
}
.carousel-panel-title {
  display: block;
  width: 100%;
  text-align: center;
  color: #f3d3a2;
  font-size: clamp(9px, 0.85vw, 12px);
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.05;
  text-transform: uppercase;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: none;
}
.carousel-controls {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  gap: 8px;
}
.carousel-controls button {
  min-width: 48px;
  min-height: 40px;
  padding: 7px 14px;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.76);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.carousel-controls button:hover,
.carousel-controls button:focus-visible {
  background: #fff;
  color: #111;
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
@media (max-width: 1180px) {
  .carousel-stage {
    --frame-height: clamp(120px, 15vw, 170px);

  }
}
@media (max-width: 900px) and (orientation: portrait) {
  .carousel-stage {
    --frame-height: clamp(125px, 22vw, 175px);

  }
}
@media (max-width: 760px) {
  .carousel-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }
  .carousel-instruction { text-align: left; }
  .carousel-stage {
    padding-left: 18px;
    padding-right: 18px;

  }
}
@media (max-width: 600px) {
  .home-carousel { padding-bottom: 48px; }
  .carousel-stage {
    --frame-height: clamp(115px, 32vw, 155px);
    padding: calc(var(--film-edge-height) + 10px) 12px calc(var(--film-edge-height) + 2px);

  }
  .carousel-panel-copy {
    left: 3px;
    right: 3px;
    bottom: calc(var(--film-edge-height) * -1 + 8px);
  }
  .carousel-panel-title { font-size: 9px; }
  .carousel-film-stock--title {
    font-size: 9px;
    letter-spacing: 0.12em;
  }
}
@media (orientation: landscape) and (max-width: 950px) and (max-height: 500px) {
  .carousel-stage {
    --frame-height: 118px;

  }
}
@media (prefers-reduced-motion: reduce) {
  .carousel-image, .carousel-panel { transition: none; }
}


/* Continuous-scroll spacing */
@media (max-width: 1180px) {
  .carousel-track { gap: 12px; }
}
@media (max-width: 760px) {
  .carousel-track { gap: 9px; }
}
@media (max-width: 600px) {
  .carousel-track { gap: 7px; }
  .carousel-panel { --panel-width: min(var(--panel-width), 80vw); }
}

/* ================================================================
   HEADER BRANDING UPDATE
   Large logo at left, centered light-weight title, bold red continuous underline.
   These rules intentionally appear last so they override earlier
   header rules without changing any page HTML.
   ================================================================ */
.header-inner {
  position: relative;
  min-height: 150px;
}

.brand {
  flex: 0 0 auto;
  gap: 0;
}

.brand-logo {
  width: clamp(110px, 12vw, 160px);
  height: clamp(106px, 11.5vw, 154px);
}

.brand-name {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: max-content;
  max-width: 52%;
  padding: 0 8px 14px;
  text-align: center;
  font-family: Helvetica, Arial, sans-serif;
  font-size: clamp(20px, 2.4vw, 34px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: 0.02em;
  white-space: normal;
}

.brand-name::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  background: #e00000;
}

.main-nav {
  position: relative;
  z-index: 2;
  justify-content: flex-end;
}

@media (max-width: 1100px) {
  .header-inner {
    min-height: 148px;
    padding-bottom: 46px;
  }

  .brand-logo {
    width: clamp(102px, 16vw, 140px);
    height: clamp(98px, 15vw, 136px);
  }

  .brand-name {
    top: 42%;
    max-width: 58%;
    font-size: clamp(19px, 3vw, 29px);
  }

  .main-nav {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12px;
    justify-content: center;
  }
}

@media (max-width: 680px) {
  .header-inner {
    min-height: 180px;
    padding: 8px 0 48px;
    align-items: flex-start;
  }

  .brand-logo {
    width: 96px;
    height: 92px;
  }

  .brand-name {
    top: 58px;
    left: calc(50% + 34px);
    max-width: calc(100% - 122px);
    padding-bottom: 11px;
    font-size: clamp(17px, 4.9vw, 23px);
  }

  .brand-name::after {
    height: 5px;
  }
}

@media (max-width: 430px) {
  .header-inner {
    min-height: 202px;
    padding-bottom: 52px;
  }

  .brand {
    width: 100%;
    justify-content: center;
  }

  .brand-logo {
    width: 90px;
    height: 87px;
  }

  .brand-name {
    top: 108px;
    left: 50%;
    width: calc(100% - 20px);
    max-width: none;
    font-size: 19px;
  }
}

@media (max-height: 620px) and (orientation: landscape) {
  .header-inner {
    min-height: 108px;
    padding-bottom: 38px;
  }

  .brand-logo {
    width: 82px;
    height: 80px;
  }

  .brand-name {
    top: 41%;
    left: 50%;
    max-width: 58%;
    font-size: 19px;
    padding-bottom: 9px;
  }

  .brand-name::after {
    height: 4px;
  }

  .main-nav {
    bottom: 7px;
  }
}

/* ================================================================
   FINAL RESPONSIVE LAYOUT - ACTIVE GALLERIES ONLY
   Keeps the whole site comfortable on desktop, iPad and iPhone,
   in both portrait and landscape orientations.
   ================================================================ */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.container {
  width: min(calc(100% - 32px), var(--content-width));
}

/* Home page: six active galleries = balanced 3 x 2 grid on desktop. */
.gallery-menu {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.3vw, 18px);
  padding: 20px 0 54px;
}

.gallery-card {
  min-width: 0;
  min-height: 0;
  aspect-ratio: 4 / 3;
}

.gallery-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-card span {
  z-index: 1;
  font-size: clamp(18px, 1.55vw, 24px);
  line-height: 1.15;
}

/* General responsive safety for every page. */
.photo-grid,
.pricing-layout,
.full-image-view,
.full-image-frame,
.pricing-image-wrap,
.pricing-details {
  min-width: 0;
  max-width: 100%;
}

.pricing-image-wrap img,
.full-image-frame img,
.photo-card img {
  max-width: 100%;
  height: auto;
}

.main-nav {
  max-width: 100%;
}

/* iPad landscape and medium desktop widths. */
@media (min-width: 769px) and (max-width: 1180px) {
  .container {
    width: min(calc(100% - 36px), var(--content-width));
  }

  .gallery-menu {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .gallery-card span {
    font-size: clamp(18px, 2vw, 22px);
  }

  .photo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* iPad portrait and small tablets. */
@media (min-width: 601px) and (max-width: 768px) {
  .container {
    width: min(calc(100% - 28px), var(--content-width));
  }

  .gallery-menu {
    grid-template-columns: repeat(2, minmax(0, 1fr));

  }

  .gallery-card {
    aspect-ratio: 4 / 3;
  }

  .gallery-card span {
    font-size: 20px;
  }

  .photo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pricing-layout {
    grid-template-columns: 1fr;
    gap: 26px;
  }
}

/* iPhone portrait. */
@media (max-width: 600px) and (orientation: portrait) {
  .container {
    width: calc(100% - 24px);
  }

  .page-intro {
    padding: 38px 0 22px;
  }

  .page-intro h1,
  .section-title {
    font-size: clamp(30px, 10vw, 44px);
  }

  .gallery-menu {
    grid-template-columns: 1fr;

    padding-top: 12px;
  }

  .gallery-card {
    aspect-ratio: 16 / 10;
  }

  .gallery-card span {
    padding: 28px 14px 13px;
    font-size: 21px;
  }

  .photo-grid {
    grid-template-columns: 1fr;
  }

  .photo-card.size-small {
    width: 100%;
  }

  .pricing-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .detail-block {
    padding: 18px;
  }

  .print-specs > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .price-row > div {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .buy-button,
  .button {
    width: 100%;
    text-align: center;
  }

  .full-image-toolbar,
  .full-image-actions,
  .full-image-return {
    width: 100%;
  }

  .full-image-actions,
  .full-image-return {
    display: grid;

  }
}

/* iPhone landscape: two gallery cards across without crowding. */
@media (max-width: 900px) and (max-height: 520px) and (orientation: landscape) {
  .container {
    width: calc(100% - 28px);
  }

  .gallery-menu {
    grid-template-columns: repeat(2, minmax(0, 1fr));

  }

  .gallery-card {
    aspect-ratio: 16 / 9;
  }

  .gallery-card span {
    padding: 22px 12px 10px;
    font-size: 18px;
  }

  .page-intro {
    padding: 28px 0 18px;
  }

  .photo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pricing-layout {
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
    gap: 24px;
  }
}

/* Very narrow phones. */
@media (max-width: 390px) {
  .container {
    width: calc(100% - 18px);
  }

  .main-nav {

    font-size: 14px;
  }

  .gallery-card span {
    font-size: 19px;
  }
}


/* =============================================================
   CONTINUOUS FILM CAROUSEL — RESPONSIVE ORIENTATION TUNING
   Keeps the compact film-strip proportions on desktop, tablets,
   iPads and phones in both portrait and landscape orientations.
   ============================================================= */

/* Medium desktop / iPad landscape */
@media (min-width: 901px) and (max-width: 1180px) {
  .home-carousel {
    padding-top: 20px;
    padding-bottom: 64px;
  }

  .carousel-stage {
    --film-edge-height: clamp(36px, 3.4vw, 44px);
    --frame-height: clamp(230px, 27vw, 310px);
    width: min(calc(100% - 30px), 1120px);
    padding-left: 20px;
    padding-right: 20px;
  }

  .carousel-panel-title {
    font-size: clamp(10px, 1.2vw, 13px);
  }
}

/* iPad/tablet portrait */
@media (min-width: 601px) and (max-width: 900px) and (orientation: portrait) {
  .home-carousel {
    padding-top: 18px;
    padding-bottom: 60px;
  }

  .carousel-heading {
    margin-bottom: 12px;
  }

  .carousel-stage {
    --film-edge-height: clamp(34px, 4.5vw, 42px);
    --frame-height: clamp(210px, 35vw, 285px);
    width: calc(100% - 24px);
    padding-left: 14px;
    padding-right: 14px;
  }

  .carousel-track {
    gap: 10px;
  }

  .carousel-panel {
    --panel-width: min(var(--panel-width), 58vw);
  }

  .carousel-panel-title {
    font-size: clamp(9px, 1.45vw, 12px);
    line-height: 1.08;
  }

  .carousel-film-stock--title {
    font-size: clamp(9px, 1.4vw, 12px);
  }
}

/* Tablet / large-phone landscape */
@media (max-width: 900px) and (orientation: landscape) {
  .home-carousel {
    padding-top: 12px;
    padding-bottom: 54px;
  }

  .carousel-heading {
    margin-bottom: 9px;
  }

  .carousel-heading h1 {
    font-size: clamp(24px, 4vw, 34px);
  }

  .carousel-stage {
    --film-edge-height: clamp(30px, 5vh, 38px);
    --frame-height: clamp(150px, 31vh, 220px);
    width: calc(100% - 20px);
    padding: calc(var(--film-edge-height) + 14px) 12px calc(var(--film-edge-height) + 4px);
  }

  .carousel-track {
    gap: 8px;
  }

  .carousel-panel {
    --panel-width: min(var(--panel-width), 52vw);
  }

  .carousel-panel-title {
    font-size: clamp(8px, 1.4vw, 11px);
    line-height: 1.05;
  }

  .carousel-film-stock--title {
    top: 8px;
    font-size: clamp(8px, 1.5vw, 11px);
  }
}

/* Phone portrait */
@media (max-width: 600px) and (orientation: portrait) {
  .home-carousel {
    padding-top: 14px;
    padding-bottom: 56px;
  }

  .carousel-heading {
    margin-bottom: 10px;
  }

  .carousel-heading h1 {
    font-size: clamp(26px, 8.5vw, 36px);
  }

  .carousel-instruction {
    font-size: 12px;
  }

  .carousel-stage {
    --film-edge-height: clamp(30px, 9vw, 38px);
    --frame-height: clamp(180px, 54vw, 245px);
    width: calc(100% - 14px);
    padding: calc(var(--film-edge-height) + 14px) 8px calc(var(--film-edge-height) + 3px);
  }

  .carousel-track {
    gap: 7px;
  }

  .carousel-panel {
    --panel-width: min(var(--panel-width), 78vw);
  }

  .carousel-panel-title {
    font-size: clamp(8px, 2.8vw, 10px);
    line-height: 1.05;
  }

  .carousel-film-stock--title {
    top: 8px;
    font-size: clamp(8px, 2.6vw, 10px);
    letter-spacing: 0.09em;
  }

  .carousel-controls button {
    min-height: 36px;
    padding: 6px 12px;
    font-size: 13px;
  }
}

/* Very narrow phones */
@media (max-width: 390px) and (orientation: portrait) {
  .carousel-stage {
    --frame-height: clamp(165px, 55vw, 215px);
    width: calc(100% - 8px);
    padding-left: 5px;
    padding-right: 5px;
  }

  .carousel-panel {
    --panel-width: min(var(--panel-width), 82vw);
  }

  .carousel-track {
    gap: 6px;
  }
}




/* =============================================================
   PHONE CAROUSEL — COMPACT MOBILE VERSION
   Keep the film strip visible on phones, but scale it down.
   ============================================================= */
@media (max-width: 600px) and (orientation: portrait) {
  .home-carousel {
    display: block !important;
    padding-top: 10px;
    padding-bottom: 46px;
  }

  .carousel-heading {
    margin-bottom: 7px;
  }

  .carousel-heading h1 {
    font-size: clamp(22px, 7vw, 30px);
  }

  .carousel-kicker {
    font-size: 9px;
    letter-spacing: 0.13em;
  }

  .carousel-instruction {
    font-size: 10px;
  }

  .carousel-stage {
    --film-edge-height: clamp(25px, 7vw, 31px);
    --frame-height: clamp(135px, 43vw, 185px);
    width: calc(100% - 10px);
    padding: calc(var(--film-edge-height) + 10px) 6px calc(var(--film-edge-height) + 2px);
  }

  .carousel-track {
    gap: 5px;
  }

  .carousel-panel {
    --panel-width: min(var(--panel-width), 72vw);
  }

  .carousel-panel-title {
    font-size: clamp(7px, 2.2vw, 9px);
    line-height: 1.02;
  }

  .carousel-film-stock--title {
    top: 6px;
    font-size: clamp(7px, 2.15vw, 9px);
    letter-spacing: 0.08em;
  }

  .carousel-controls {
    bottom: 6px;
  }

  .carousel-controls button {
    min-height: 30px;
    min-width: 42px;
    padding: 4px 10px;
    font-size: 11px;
  }
}

@media (orientation: landscape) and (max-width: 950px) and (max-height: 500px) {
  .home-carousel {
    display: block !important;
    padding-top: 8px;
    padding-bottom: 42px;
  }

  .carousel-heading {
    margin-bottom: 6px;
  }

  .carousel-heading h1 {
    font-size: clamp(20px, 3.5vw, 28px);
  }

  .carousel-stage {
    --film-edge-height: clamp(23px, 5vh, 29px);
    --frame-height: clamp(105px, 25vh, 145px);
    width: calc(100% - 12px);
    padding: calc(var(--film-edge-height) + 8px) 7px calc(var(--film-edge-height) + 2px);
  }

  .carousel-track {
    gap: 5px;
  }

  .carousel-panel {
    --panel-width: min(var(--panel-width), 46vw);
  }

  .carousel-panel-title {
    font-size: clamp(7px, 1.2vw, 9px);
  }

  .carousel-film-stock--title {
    top: 6px;
    font-size: clamp(7px, 1.25vw, 9px);
  }
}


/* Lightbulb carousel frame: preserve the entire vertical composition. */
.carousel-panel--show-full-image .carousel-image {
  object-fit: contain;
  object-position: center center;
  background: #050505;
}

/* Critique update: plain compact carousel, no sprockets or photo titles */
.carousel-panel-copy, .carousel-panel-title { display:none !important; }
.carousel-film-stock--title, .carousel-film-stock--left { display:none !important; }
.carousel-stage { padding-top: 8px !important; padding-bottom: 8px !important; }
.carousel-track, .carousel-viewport { padding-bottom:0 !important; margin-bottom:0 !important; }

/* Home carousel critique update: keep the instruction compact after removing the two headings. */
.home-carousel .carousel-heading {
  justify-content: flex-end;
  margin-bottom: 4px;
}


/* =============================================================
   HOME PAGE GALLERY HEADING — TRUE VIEWPORT CENTER
   Centers "Explore the Galleries" across the full browser window.
   ============================================================= */
.home-carousel + main .page-intro {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding-top: 18px;
  padding-bottom: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.home-carousel + main .page-intro .section-title {
  display: block;
  font-family: Helvetica, Arial, sans-serif;
  font-size: clamp(32px, 3.4vw, 46px);
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.05;
  margin: 0;
  padding: 0;
  text-align: center;
}
.home-carousel + main .page-intro .section-title::after {
  content: none !important;
  display: none !important;
}
.home-carousel + main .gallery-menu {
  padding-top: 8px;
}

@media (max-width: 900px) {
  .home-carousel + main .page-intro {
    padding-top: 14px;
    padding-bottom: 10px;
  }
  .home-carousel + main .page-intro .section-title {
    font-size: clamp(28px, 6vw, 38px);
    padding-bottom: 10px;
  }
  .home-carousel + main .gallery-menu {
    padding-top: 6px;
  }
}

@media (max-width: 900px) {
  .home-carousel + main .page-intro {
    padding-top: 10px;
    padding-bottom: 4px;
  }
  .home-carousel + main .page-intro .section-title {
    font-size: clamp(22px, 5vw, 30px);
    padding-bottom: 8px;
  }
  .home-carousel + main .gallery-menu {
    padding-top: 4px;
  }
}


/* =============================================================
   HOME PAGE — SEAMLESS BLACK SECTIONS
   Removes divider lines/edge rules so header, carousel and gallery
   area blend into one continuous black background.
   ============================================================= */
.home-page {
  background: #000;
}
.home-page .site-header {
  background: rgba(0, 0, 0, 0.98);
  border-bottom: 0 !important;
  box-shadow: none !important;
}
.home-page .home-carousel {
  background: #000 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}
.home-page .carousel-stage {
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}
.home-page main,
.home-page .page-intro,
.home-page .gallery-menu {
  background: #000;
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}
.home-page .home-carousel + main {
  border-top: 0 !important;
}

@media (max-width: 900px) {
  .home-carousel + main .page-intro .section-title::after {
    width: min(72%, 280px);
    height: 3px;
  }
}

/* =============================================================
   HOME PAGE — EXPLORE HEADING VERTICALLY CENTERED IN GAP
   Places the heading midway between carousel and gallery cards.
   ============================================================= */
.home-carousel + main .page-intro {
  transform: translateY(-46px);
  position: relative;
  z-index: 5;
}
@media (max-width: 900px) {
  .home-carousel + main .page-intro {
    transform: translateY(-28px);
  }
}
@media (max-width: 600px) {
  .home-carousel + main .page-intro {
    transform: translateY(-20px);
  }
}


/* =============================================================
   FINAL RESPONSIVE PASS — ALL SCREEN SIZES / ORIENTATIONS
   Keeps the current visual design while making the header,
   carousel, Explore heading and gallery cards adapt cleanly.
   ============================================================= */

/* Fluid safety for browser resizing and all touch devices. */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}
.home-page main,
.home-page .home-carousel,
.home-page .carousel-stage,
.home-page .gallery-menu {
  max-width: 100%;
}

/* Large desktop / wide browser windows. */
@media (min-width: 1181px) {
  .header-inner { min-height: 96px; }
  .gallery-menu { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .carousel-panel {
    flex-basis: min(var(--panel-width, 300px), 58vw);
    width: min(var(--panel-width, 300px), 58vw);
  }
}

/* Laptop / iPad landscape / medium browser. */
@media (min-width: 901px) and (max-width: 1180px) {
  .header-inner {
    min-height: 82px;
    gap: 18px;
  }
  .brand { font-size: clamp(22px, 2.5vw, 31px); }
  .brand-logo {
    width: clamp(78px, 9vw, 108px);
    height: clamp(74px, 8.7vw, 104px);
  }
  .main-nav { gap: 14px; }
  .gallery-menu { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .carousel-panel {
    flex-basis: min(var(--panel-width, 300px), 56vw);
    width: min(var(--panel-width, 300px), 56vw);
  }
  .home-carousel + main .page-intro { transform: translateY(-38px); }
}

/* iPad / tablet portrait. */
@media (min-width: 601px) and (max-width: 900px) and (orientation: portrait) {
  .header-inner {
    min-height: 74px;
    gap: 14px;
  }
  .brand {
    font-size: clamp(20px, 3.2vw, 27px);
    gap: 9px;
  }
  .brand-logo {
    width: clamp(66px, 9vw, 84px);
    height: clamp(64px, 8.8vw, 82px);
  }
  .main-nav {
    gap: 11px;
    font-size: 15px;
  }
  .carousel-stage {
    --frame-height: clamp(155px, 24vw, 205px) !important;
    width: calc(100% - 22px) !important;
  }
  .carousel-panel {
    flex-basis: min(var(--panel-width, 300px), 62vw);
    width: min(var(--panel-width, 300px), 62vw);
  }
  .carousel-track { gap: 8px; }
  .home-carousel + main .page-intro {
    transform: translateY(-24px);
    padding-top: 8px;
    padding-bottom: 6px;
  }
  .home-carousel + main .page-intro .section-title {
    font-size: clamp(26px, 5vw, 36px);
    white-space: normal;
  }
  .gallery-menu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }
}

/* Tablet / large-phone landscape. */
@media (max-width: 900px) and (orientation: landscape) {
  .site-header { position: relative; }
  .header-inner {
    min-height: 58px;
    flex-direction: row;
    align-items: center;
    padding: 5px 0;
    gap: 12px;
  }
  .brand {
    font-size: clamp(17px, 2.7vw, 24px);
    gap: 7px;
    min-width: 0;
  }
  .brand-logo {
    width: clamp(48px, 7vw, 66px);
    height: clamp(46px, 6.8vw, 64px);
  }
  .brand-name { white-space: nowrap; }
  .main-nav {
    margin-left: auto;
    gap: clamp(8px, 1.6vw, 14px);
    font-size: clamp(12px, 1.8vw, 15px);
    flex-wrap: nowrap;
  }
  .home-carousel { padding-top: 6px !important; padding-bottom: 28px !important; }
  .carousel-heading { margin-bottom: 3px !important; }
  .carousel-instruction { font-size: 10px; }
  .carousel-stage {
    --frame-height: clamp(100px, 26vh, 145px) !important;
    width: calc(100% - 14px) !important;
    padding: 5px 7px !important;
  }
  .carousel-panel {
    flex-basis: min(var(--panel-width, 300px), 48vw);
    width: min(var(--panel-width, 300px), 48vw);
  }
  .carousel-track { gap: 6px; }
  .home-carousel + main .page-intro {
    transform: translateY(-16px);
    padding: 4px 0 2px;
  }
  .home-carousel + main .page-intro .section-title {
    font-size: clamp(22px, 4.2vw, 32px);
  }
  .gallery-menu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding-top: 2px;
  }
}

/* Phone portrait — compact but fully usable. */
@media (max-width: 600px) and (orientation: portrait) {
  .site-header { position: relative; }
  .header-inner {
    min-height: 0;
    align-items: center;
    flex-direction: column;
    gap: 7px;
    padding: 8px 0 9px;
    text-align: center;
  }
  .brand {
    justify-content: center;
    gap: 7px;
    font-size: clamp(18px, 5.2vw, 23px);
    width: 100%;
  }
  .brand-logo {
    width: clamp(54px, 17vw, 70px);
    height: clamp(52px, 16vw, 68px);
  }
  .brand-name {
    max-width: min(72vw, 280px);
    text-align: left;
  }
  .main-nav {
    justify-content: center;
    width: 100%;
    gap: clamp(9px, 4vw, 17px);
    font-size: clamp(13px, 3.8vw, 15px);
  }
  .home-carousel {
    padding-top: 6px !important;
    padding-bottom: 28px !important;
  }
  .carousel-heading {
    justify-content: center !important;
    margin-bottom: 3px !important;
  }
  .carousel-instruction {
    width: 100%;
    text-align: center;
    font-size: clamp(9px, 2.7vw, 11px);
    line-height: 1.2;
  }
  .carousel-stage {
    --frame-height: clamp(112px, 34vw, 150px) !important;
    width: calc(100% - 10px) !important;
    padding: 4px 5px !important;
  }
  .carousel-panel {
    flex-basis: min(var(--panel-width, 300px), 76vw);
    width: min(var(--panel-width, 300px), 76vw);
  }
  .carousel-panel--show-full-image {
    max-width: 42vw;
  }
  .carousel-track { gap: 5px; }
  .home-carousel + main .page-intro {
    transform: translateY(-13px);
    padding: 2px 0 3px;
  }
  .home-carousel + main .page-intro .section-title {
    font-size: clamp(23px, 7vw, 31px);
    letter-spacing: 0.02em;
    line-height: 1.05;
  }
  .gallery-menu {
    grid-template-columns: 1fr;
    gap: 8px;
    padding-top: 2px;
    padding-bottom: 34px;
  }
  .gallery-card {
    aspect-ratio: 16 / 10;
    min-height: 0;
  }
  .gallery-card span {
    font-size: clamp(18px, 5.2vw, 21px);
  }
}

/* Very narrow phones. */
@media (max-width: 390px) and (orientation: portrait) {
  .container { width: calc(100% - 14px); }
  .brand { font-size: clamp(16px, 5vw, 20px); }
  .brand-logo { width: 50px; height: 48px; }
  .main-nav { gap: 9px; font-size: 12px; }
  .carousel-stage {
    --frame-height: clamp(100px, 33vw, 126px) !important;
    width: calc(100% - 6px) !important;
  }
  .carousel-panel {
    flex-basis: min(var(--panel-width, 300px), 80vw);
    width: min(var(--panel-width, 300px), 80vw);
  }
  .home-carousel + main .page-intro .section-title {
    font-size: clamp(21px, 7vw, 27px);
  }
}

/* Short-height landscape phones: prioritize content height. */
@media (max-width: 950px) and (max-height: 430px) and (orientation: landscape) {
  .brand-logo { width: 42px; height: 40px; }
  .header-inner { min-height: 48px; padding: 3px 0; }
  .home-carousel { padding-bottom: 20px !important; }
  .carousel-stage {
    --frame-height: clamp(82px, 24vh, 108px) !important;
  }
  .home-carousel + main .page-intro {
    transform: translateY(-10px);
  }
  .home-carousel + main .page-intro .section-title {
    font-size: clamp(19px, 4vw, 27px);
  }
}

/* =============================================================
   RESPONSIVE OVERLAP FIX — FINAL OVERRIDES
   Prevents header/nav/heading collisions at intermediate widths.
   ============================================================= */
.home-page .header-inner,
.header-inner {
  flex-wrap: wrap;
}
.brand,
.brand-name,
.main-nav,
.main-nav a,
.carousel-instruction,
.home-carousel + main .page-intro .section-title {
  min-width: 0;
}
.brand-name {
  overflow-wrap: normal;
  word-break: normal;
}
.main-nav {
  row-gap: 8px;
}
.carousel-heading {
  max-width: 100%;
}
.carousel-instruction {
  white-space: normal;
  line-height: 1.25;
}

/* Medium desktop / tablet landscape: allow the navigation to drop
   beneath the brand before either starts colliding. */
@media (max-width: 1040px) and (min-width: 761px) {
  .header-inner {
    justify-content: center;
    align-items: center;
    gap: 8px 18px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .brand {
    flex: 1 1 100%;
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  .brand-name {
    white-space: normal !important;
    text-align: center;
    max-width: calc(100vw - 150px);
    line-height: 1.08;
  }
  .main-nav {
    flex: 1 1 100%;
    width: 100%;
    margin-left: 0 !important;
    justify-content: center;
    flex-wrap: wrap !important;
  }
  .home-carousel + main .page-intro {
    transform: none !important;
    margin-top: 18px !important;
    margin-bottom: 18px !important;
    padding: 0 !important;
  }
}

/* Narrow tablet / large phone widths. */
@media (max-width: 760px) {
  .header-inner {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 8px 0 10px !important;
  }
  .brand {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 8px !important;
  }
  .brand-name {
    white-space: normal !important;
    max-width: calc(100vw - 110px) !important;
    text-align: center !important;
    line-height: 1.08 !important;
  }
  .main-nav {
    width: 100% !important;
    margin-left: 0 !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 7px 14px !important;
  }
  .main-nav a {
    white-space: nowrap;
  }
  .carousel-heading {
    width: calc(100% - 20px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .carousel-instruction {
    width: 100% !important;
    text-align: center !important;
  }
  .home-carousel + main .page-intro {
    transform: none !important;
    margin: 14px 0 16px !important;
    padding: 0 !important;
  }
  .home-carousel + main .page-intro .section-title {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 8px !important;
    white-space: normal !important;
    text-align: center !important;
    line-height: 1.08 !important;
  }
}

/* Phones portrait: stack cleanly and keep all text inside viewport. */
@media (max-width: 600px) and (orientation: portrait) {
  .brand-logo {
    flex: 0 0 auto;
  }
  .brand-name {
    max-width: calc(100vw - 96px) !important;
    font-size: clamp(17px, 5vw, 22px) !important;
  }
  .main-nav {
    font-size: clamp(12px, 3.7vw, 15px) !important;
  }
  .home-carousel {
    padding-bottom: 12px !important;
  }
  .home-carousel + main .page-intro {
    margin-top: 12px !important;
    margin-bottom: 14px !important;
  }
  .home-carousel + main .page-intro .section-title {
    font-size: clamp(22px, 7vw, 30px) !important;
  }
}

/* Very narrow phones. */
@media (max-width: 420px) {
  .brand {
    gap: 6px !important;
  }
  .brand-logo {
    width: 46px !important;
    height: 44px !important;
  }
  .brand-name {
    max-width: calc(100vw - 76px) !important;
    font-size: clamp(15px, 4.8vw, 19px) !important;
  }
  .main-nav {
    gap: 6px 10px !important;
    font-size: 12px !important;
  }
  .carousel-instruction {
    font-size: 10px !important;
  }
}

/* Landscape phones: use two-row header instead of forcing brand + nav
   into one horizontal line. */
@media (max-width: 900px) and (orientation: landscape) {
  .header-inner {
    flex-direction: column !important;
    justify-content: center !important;
    gap: 3px !important;
    padding: 4px 0 6px !important;
  }
  .brand {
    width: 100% !important;
    justify-content: center !important;
    font-size: clamp(15px, 2.5vw, 21px) !important;
  }
  .brand-logo {
    width: clamp(38px, 6vw, 52px) !important;
    height: clamp(36px, 5.8vw, 50px) !important;
  }
  .brand-name {
    white-space: normal !important;
    max-width: 70vw !important;
    text-align: center !important;
  }
  .main-nav {
    width: 100% !important;
    margin-left: 0 !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 4px 12px !important;
  }
  .home-carousel + main .page-intro {
    transform: none !important;
    margin: 8px 0 10px !important;
    padding: 0 !important;
  }
  .home-carousel + main .page-intro .section-title {
    line-height: 1.05 !important;
    text-align: center !important;
    white-space: normal !important;
  }
}

/* =============================================================
   HARD HEADER REFLOW FIX — prevents all title/navigation overlap
   at resized desktop, tablet and phone widths.
   ============================================================= */
@media (max-width: 1120px) {
  .site-header .header-inner {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-height: 0 !important;
    height: auto !important;
    gap: 8px !important;
    padding: 10px 0 10px !important;
    border-bottom: 5px solid #e00000 !important;
  }

  .site-header .brand {
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 3px !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
  }

  .site-header .brand-logo {
    position: static !important;
    display: block !important;
    flex: 0 0 auto !important;
    width: clamp(66px, 8vw, 92px) !important;
    height: auto !important;
    max-height: 88px !important;
    margin: 0 auto !important;
  }

  .site-header .brand-name {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    display: block !important;
    width: 100% !important;
    max-width: calc(100% - 24px) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center !important;
    white-space: normal !important;
    font-size: clamp(24px, 3.6vw, 34px) !important;
    line-height: 1.08 !important;
  }

  .site-header .brand-name::after {
    display: none !important;
    content: none !important;
  }

  .site-header .main-nav {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 8px !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 5px 22px !important;
    font-size: clamp(15px, 2vw, 20px) !important;
    line-height: 1.25 !important;
  }

  .site-header .main-nav a {
    display: inline-block !important;
    white-space: nowrap !important;
    line-height: 1.25 !important;
  }
}

@media (max-width: 700px) {
  .site-header .header-inner {
    gap: 5px !important;
    padding: 7px 0 8px !important;
    border-bottom-width: 4px !important;
  }
  .site-header .brand-logo {
    width: clamp(50px, 12vw, 72px) !important;
    max-height: 68px !important;
  }
  .site-header .brand-name {
    max-width: calc(100% - 16px) !important;
    font-size: clamp(20px, 5.5vw, 27px) !important;
    line-height: 1.08 !important;
  }
  .site-header .main-nav {
    gap: 4px 14px !important;
    font-size: clamp(13px, 3.8vw, 17px) !important;
  }
}

@media (max-width: 430px) {
  .site-header .brand-logo {
    width: 48px !important;
    max-height: 46px !important;
  }
  .site-header .brand-name {
    font-size: clamp(18px, 5.7vw, 23px) !important;
  }
  .site-header .main-nav {
    gap: 3px 10px !important;
    font-size: 13px !important;
  }
}

@media (orientation: landscape) and (max-height: 560px) and (max-width: 1000px) {
  .site-header .header-inner {
    gap: 2px !important;
    padding: 3px 0 5px !important;
  }
  .site-header .brand {
    flex-direction: row !important;
    gap: 8px !important;
  }
  .site-header .brand-logo {
    width: 40px !important;
    max-height: 38px !important;
    margin: 0 !important;
  }
  .site-header .brand-name {
    width: auto !important;
    max-width: calc(100% - 60px) !important;
    margin: 0 !important;
    font-size: clamp(17px, 3vw, 23px) !important;
    white-space: nowrap !important;
  }
  .site-header .main-nav {
    gap: 2px 14px !important;
    font-size: 13px !important;
  }
}


/* 2026-09-27 CROSS-BROWSER STATIC GALLERY FIX
   Gallery cards are already present in each HTML file.
   Use ordinary CSS Grid with natural row heights so Chrome, Firefox, and Safari
   do not depend on JavaScript masonry calculations when opened via file://. */
.photo-grid[data-static-gallery="true"] {
  display: grid !important;
  grid-template-columns: repeat(var(--gallery-columns, 3), minmax(0, 1fr)) !important;
  grid-auto-rows: auto !important;
  grid-auto-flow: row !important;
  align-items: start !important;
}
.photo-grid[data-static-gallery="true"] .photo-card {
  grid-row: auto !important;
  height: auto !important;
}
.photo-grid[data-static-gallery="true"] .photo-link,
.photo-grid[data-static-gallery="true"] .photo-link img {
  height: auto !important;
}
@media (max-width: 900px) {
  .photo-grid[data-static-gallery="true"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .photo-grid[data-static-gallery="true"] .photo-card.size-large {
    grid-column: span 2 !important;
  }
}
@media (max-width: 620px) {
  .photo-grid[data-static-gallery="true"] {
    grid-template-columns: 1fr !important;
  }
  .photo-grid[data-static-gallery="true"] .photo-card.size-large {
    grid-column: span 1 !important;
  }
  .photo-grid[data-static-gallery="true"] .photo-card.size-small {
    width: 100% !important;
  }
}

/* 2026-09-27 STATIC GALLERY PACKED MASONRY FIX
   Keep gallery cards in the HTML for file:// browser compatibility, but pack
   mixed portrait/landscape photographs tightly using measured CSS-grid rows.
   The companion static-gallery-masonry.js only changes grid-row spans; it
   never creates, removes, hides, or rewrites photographs. */
.photo-grid[data-static-gallery="true"] {
  display: grid !important;
  grid-template-columns: repeat(var(--gallery-columns, 3), minmax(0, 1fr)) !important;
  grid-auto-rows: 8px !important;
  grid-auto-flow: dense !important;
  gap: var(--gallery-gap) !important;
  align-items: start !important;
}

.photo-grid[data-static-gallery="true"] .photo-card {
  width: 100% !important;
  height: auto !important;
  align-self: start !important;
  margin: 0 !important;
}

.photo-grid[data-static-gallery="true"] .photo-card.size-small {
  width: 75% !important;
  justify-self: center !important;
}

.photo-grid[data-static-gallery="true"] .photo-card.size-normal {
  grid-column: span 1 !important;
}

.photo-grid[data-static-gallery="true"] .photo-card.size-large {
  grid-column: span 2 !important;
}

.photo-grid[data-static-gallery="true"] .photo-link,
.photo-grid[data-static-gallery="true"] .photo-link img {
  height: auto !important;
}

@media (max-width: 900px) {
  .photo-grid[data-static-gallery="true"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 620px) {
  .photo-grid[data-static-gallery="true"] {
    grid-template-columns: 1fr !important;
  }
  .photo-grid[data-static-gallery="true"] .photo-card.size-large {
    grid-column: span 1 !important;
  }
  .photo-grid[data-static-gallery="true"] .photo-card.size-small {
    width: 100% !important;
  }
}

/* 2026-09-27 FINAL CROSS-BROWSER GALLERY LAYOUT
   Pure CSS columns: no JavaScript masonry, no absolute positioning, no grid-row spans.
   This keeps mixed portrait/landscape photographs tightly packed in Chrome, Firefox,
   and Safari when the website is opened directly from Finder with file://. */
.photo-grid[data-static-gallery="true"] {
  display: block !important;
  columns: var(--gallery-columns, 3) !important;
  column-gap: var(--gallery-gap, 8px) !important;
  width: 100% !important;
}

.photo-grid[data-static-gallery="true"] .photo-card,
.photo-grid[data-static-gallery="true"] .photo-card.size-small,
.photo-grid[data-static-gallery="true"] .photo-card.size-normal,
.photo-grid[data-static-gallery="true"] .photo-card.size-large {
  display: inline-block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 0 var(--gallery-gap, 8px) 0 !important;
  break-inside: avoid !important;
  -webkit-column-break-inside: avoid !important;
  page-break-inside: avoid !important;
  grid-column: auto !important;
  grid-row: auto !important;
  position: relative !important;
  vertical-align: top !important;
}

.photo-grid[data-static-gallery="true"] .photo-link {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

.photo-grid[data-static-gallery="true"] .photo-link img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  position: static !important;
  object-fit: contain !important;
}

@media (max-width: 900px) {
  .photo-grid[data-static-gallery="true"] {
    columns: 2 !important;
  }
}

@media (max-width: 620px) {
  .photo-grid[data-static-gallery="true"] {
    columns: 1 !important;
  }
}


/* === CATALOG-DRIVEN GALLERY REBUILD 2026-09-27 ===
   Keep the proven cross-browser CSS-column layout while allowing the cards themselves
   to be rebuilt automatically from photo-catalog.js. No JavaScript masonry is used. */
.photo-grid[data-catalog-rebuild="true"] {
  display: block !important;
  columns: var(--gallery-columns, 3) !important;
  column-gap: var(--gallery-gap, 8px) !important;
  width: 100% !important;
}

.photo-grid[data-catalog-rebuild="true"] .photo-card,
.photo-grid[data-catalog-rebuild="true"] .photo-card.size-small,
.photo-grid[data-catalog-rebuild="true"] .photo-card.size-normal,
.photo-grid[data-catalog-rebuild="true"] .photo-card.size-large {
  display: inline-block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 var(--gallery-gap, 8px) !important;
  break-inside: avoid !important;
  -webkit-column-break-inside: avoid !important;
  grid-column: auto !important;
  grid-row: auto !important;
  vertical-align: top !important;
}

.photo-grid[data-catalog-rebuild="true"] .photo-link,
.photo-grid[data-catalog-rebuild="true"] .photo-link img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

@media (max-width: 900px) {
  .photo-grid[data-catalog-rebuild="true"] {
    columns: 2 !important;
  }
}

@media (max-width: 620px) {
  .photo-grid[data-catalog-rebuild="true"] {
    columns: 1 !important;
  }
}

/* =============================================================
   POLISHED CONCEPT v1 — 2026-09-28
   Visual-only refinement layer. Intentionally appended AFTER all
   catalog, static-gallery, and cross-browser layout fixes.
   No gallery architecture or catalog logic is changed here.
   ============================================================= */
:root {
  --page-bg: #0b0b0c;
  --panel-bg: #141416;
  --text: #f5f2eb;
  --muted: #aaa6a0;
  --accent: #d0aa6a;
  --accent-soft: #e8d4aa;
  --brand-red: #a8191f;
  --border: #2a2928;
  --content-width: 1560px;
  --corner-radius: 5px;
  --gallery-gap: 12px;
  --shadow-soft: 0 18px 48px rgba(0,0,0,.34);
  --shadow-deep: 0 28px 70px rgba(0,0,0,.48);
}

body {
  background:
    radial-gradient(circle at 50% -10%, rgba(142, 104, 48, .07), transparent 28rem),
    linear-gradient(180deg, #0d0d0f 0%, #09090a 56%, #0c0b0b 100%);
  letter-spacing: .008em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: rgba(208,170,106,.34); color: #fff; }

a { transition: color .2s ease, opacity .2s ease, border-color .2s ease, background .2s ease; }

/* HEADER — compact, gallery-like, dimensional */
.site-header {
  background: rgba(10,10,11,.88) !important;
  border-bottom: 0 !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.035), 0 14px 44px rgba(0,0,0,.20);
  backdrop-filter: blur(18px) saturate(125%);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
}
.site-header .header-inner {
  min-height: 126px !important;
  padding-top: 8px !important;
  padding-bottom: 23px !important;
}
.site-header .header-inner::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  height: 4px;
  background: linear-gradient(90deg, transparent 0%, var(--brand-red) 9%, #dd3439 50%, var(--brand-red) 91%, transparent 100%);
  box-shadow: 0 0 22px rgba(184, 27, 32, .20);
}
.site-header .brand-logo {
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.32));
  transition: transform .3s ease, filter .3s ease;
}
.site-header .brand:hover .brand-logo { transform: translateY(-1px) scale(1.015); }
.site-header .brand-name {
  color: #f2eee7 !important;
  font-weight: 300 !important;
  letter-spacing: .055em !important;
  text-shadow: 0 1px 18px rgba(255,255,255,.025);
}
.site-header .brand-name::after { display: none !important; }
.site-header .main-nav {
  gap: clamp(14px, 1.7vw, 28px) !important;
}
.site-header .main-nav a {
  position: relative;
  color: #c4c0b8 !important;
  font-size: 14px;
  letter-spacing: .11em;
  text-transform: uppercase;
  padding: 5px 1px 7px;
}
.site-header .main-nav a::after {
  content: "";
  position: absolute;
  left: 50%; right: 50%; bottom: 0;
  height: 1px;
  background: var(--accent);
  transition: left .22s ease, right .22s ease;
}
.site-header .main-nav a:hover,
.site-header .main-nav a:focus-visible { color: #fff !important; }
.site-header .main-nav a:hover::after,
.site-header .main-nav a:focus-visible::after { left: 0; right: 0; }

/* HOME CAROUSEL — featured exhibition wall */
.home-carousel {
  padding-top: 24px !important;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(169,25,31,.10), transparent 43%),
    radial-gradient(ellipse at 50% 100%, rgba(208,170,106,.06), transparent 46%),
    linear-gradient(180deg, #08080a, #0c0c0e 72%, #09090a) !important;
  border-top: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.055) !important;
}
.carousel-heading { margin-bottom: 13px !important; }
.carousel-instruction {
  color: #a7a29a !important;
  font-size: 12px !important;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.carousel-stage {
  border-radius: 14px !important;
  background:
    linear-gradient(115deg, rgba(255,255,255,.025), transparent 28%),
    radial-gradient(circle at 50% 0%, rgba(216,171,96,.07), transparent 38%),
    #070708 !important;
  box-shadow:
    inset 0 0 0 1px rgba(235,210,168,.13),
    inset 0 1px 0 rgba(255,255,255,.04),
    0 30px 70px rgba(0,0,0,.56) !important;
}
.carousel-stage-patina { opacity: .32 !important; }
.carousel-frame {
  border-radius: 7px !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.16),
    0 10px 24px rgba(0,0,0,.44),
    inset 0 0 0 5px rgba(247,244,235,.93) !important;
}
.carousel-panel { transition: transform .28s cubic-bezier(.2,.8,.2,1), filter .28s ease !important; }
.carousel-panel:hover,
.carousel-panel:focus-visible { transform: translateY(-6px) scale(1.012) !important; filter: brightness(1.08) saturate(1.04) !important; }
.carousel-image { transition: opacity .32s ease, transform .55s cubic-bezier(.2,.8,.2,1) !important; }
.carousel-panel:hover .carousel-image,
.carousel-panel:focus-visible .carousel-image { transform: scale(1.045) !important; }
.carousel-panel-title {
  color: #e2cfaa !important;
  letter-spacing: .075em !important;
  font-weight: 600 !important;
}

/* SECTION TITLES */
.page-intro { position: relative; padding-top: 72px; padding-bottom: 36px; }
.page-intro::before {
  content: "CURATED PHOTOGRAPHY";
  display: block;
  margin-bottom: 11px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .28em;
}
.home-page .page-intro::before { content: "SELECTED COLLECTIONS"; }
.page-intro h1,
.section-title {
  color: #f4f0e8;
  font-weight: 400;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.page-intro p {
  color: #aaa59d;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.8;
}
.home-page .section-title { position: relative; display: inline-block; }
.home-page .page-intro::after {
  content: "";
  display: block;
  width: 58px;
  height: 1px;
  margin: 20px auto 0;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

/* HOME COLLECTION CARDS — editorial, tactile, more playful */
.gallery-menu { gap: clamp(14px, 1.55vw, 24px) !important; padding-bottom: 82px !important; }
.gallery-card {
  border: 1px solid rgba(255,255,255,.11) !important;
  border-radius: 8px !important;
  background: #101012 !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.26);
  isolation: isolate;
  transform: translateZ(0);
  transition: transform .38s cubic-bezier(.2,.8,.2,1), box-shadow .38s ease, border-color .25s ease !important;
}
.gallery-card::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.00) 42%, rgba(5,5,6,.18) 59%, rgba(5,5,6,.88) 100%),
    linear-gradient(125deg, rgba(255,255,255,.06), transparent 27%);
  transition: opacity .35s ease;
}
.gallery-card::after {
  content: "VIEW COLLECTION  →";
  position: absolute;
  z-index: 3;
  left: 18px;
  bottom: 15px;
  color: var(--accent-soft);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  opacity: 0;
  transform: translateY(7px);
  transition: opacity .25s ease, transform .25s ease;
}
.gallery-card img { transition: transform .7s cubic-bezier(.2,.8,.2,1), filter .45s ease !important; }
.gallery-card span {
  z-index: 2 !important;
  inset: auto 0 0 !important;
  padding: 60px 18px 18px !important;
  background: none !important;
  color: #fff;
  font-weight: 400;
  letter-spacing: .015em;
  text-shadow: 0 2px 14px rgba(0,0,0,.55);
  transition: transform .3s ease, padding .3s ease;
}
.gallery-card:hover,
.gallery-card:focus-visible {
  transform: translateY(-7px) !important;
  border-color: rgba(208,170,106,.55) !important;
  box-shadow: 0 24px 54px rgba(0,0,0,.46), 0 0 0 1px rgba(208,170,106,.06) inset !important;
  outline: none;
}
.gallery-card:hover img,
.gallery-card:focus-visible img { transform: scale(1.055) !important; filter: saturate(1.06) contrast(1.025) brightness(.94); }
.gallery-card:hover span,
.gallery-card:focus-visible span { transform: translateY(-17px); }
.gallery-card:hover::after,
.gallery-card:focus-visible::after { opacity: 1; transform: translateY(0); }

/* GALLERY PAGES — prints floating on dark gallery walls */
.photo-card {
  border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: 6px !important;
  background: #121214 !important;
  box-shadow: 0 10px 32px rgba(0,0,0,.22);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .25s ease !important;
}
.photo-card:hover,
.photo-card:focus-within {
  transform: translateY(-4px);
  border-color: rgba(208,170,106,.44) !important;
  box-shadow: 0 20px 44px rgba(0,0,0,.38);
}
.photo-link { overflow: hidden; background: #080809 !important; }
.photo-link img { transition: transform .48s cubic-bezier(.2,.8,.2,1), filter .3s ease; }
.photo-card:hover .photo-link img { transform: scale(1.018); filter: brightness(1.025); }
.photo-info { padding: 15px 17px 16px !important; border-top: 1px solid rgba(255,255,255,.05); }
.photo-info h2 {
  margin-bottom: 7px !important;
  color: #eeeae2;
  font-size: clamp(18px, 1.45vw, 23px) !important;
  font-weight: 400;
  line-height: 1.18;
}
.view-details {
  color: #bda477 !important;
  font-size: 10px !important;
  font-weight: 700;
  letter-spacing: .18em !important;
}

/* PRICING — collector's-room presentation */
.pricing-heading .eyebrow { color: var(--accent) !important; letter-spacing: .22em !important; font-size: 11px; }
.pricing-image-wrap,
.detail-block {
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 7px;
  background: linear-gradient(145deg, rgba(255,255,255,.025), transparent 45%), #111113 !important;
  box-shadow: var(--shadow-soft);
}
.pricing-image-wrap { padding: clamp(8px, 1vw, 14px) !important; }
.detail-block h2 { color: #f1ede5; font-weight: 400; }
.price-row span { color: #e0bc80 !important; }
.buy-button,
.button {
  border-radius: 999px !important;
  border-color: rgba(208,170,106,.72) !important;
  background: rgba(208,170,106,.045);
  letter-spacing: .06em;
  transition: transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}
.buy-button:hover,
.buy-button:focus-visible,
.button:hover,
.button:focus-visible {
  background: var(--accent) !important;
  color: #111 !important;
  box-shadow: 0 8px 24px rgba(208,170,106,.18);
  transform: translateY(-1px);
}

/* FULL IMAGE VIEW */
.full-image-frame {
  border-color: rgba(255,255,255,.10) !important;
  border-radius: 8px;
  background: #070708 !important;
  box-shadow: var(--shadow-deep);
}
.full-image-frame img { box-shadow: 0 8px 32px rgba(0,0,0,.28); }

/* ABOUT / CONTACT — intentional instead of placeholder-like */
.content-page {
  max-width: 920px !important;
  padding-top: clamp(58px, 8vw, 110px) !important;
  min-height: 58vh;
}
.content-page::before {
  content: "VICTOR HAMMER · FINE ART PHOTOGRAPHY";
  display: block;
  margin-bottom: 14px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .26em;
}
.content-page h1 {
  margin: 0 0 34px;
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.035em;
}
.content-page h2 { color: #ded9d0; font-size: 25px; font-weight: 400; }
.content-page p { color: #b1ada5; font-size: 17px; line-height: 1.85; }

/* FOOTER */
.site-footer {
  position: relative;
  border-top: 1px solid rgba(255,255,255,.06) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.012), transparent);
  color: #89857e !important;
  padding: 42px 0 46px !important;
  font-size: 12px;
  letter-spacing: .095em;
  text-transform: uppercase;
}
.site-footer::before {
  content: "";
  display: block;
  width: 46px;
  height: 1px;
  margin: 0 auto 20px;
  background: var(--accent);
  opacity: .6;
}

/* POLISH FOR KEYBOARD / ACCESSIBILITY */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* RESPONSIVE REFINEMENT — architecture remains unchanged */
@media (max-width: 700px) {
  .site-header .header-inner { min-height: 108px !important; padding-bottom: 18px !important; }
  .site-header .header-inner::after { bottom: 7px; height: 3px; }
  .site-header .main-nav a { font-size: 12px !important; letter-spacing: .08em; }
  .page-intro { padding-top: 48px !important; }
  .gallery-menu { gap: 14px !important; padding-bottom: 58px !important; }
  .gallery-card span { padding: 52px 16px 16px !important; }
  .gallery-card::after { left: 16px; bottom: 13px; font-size: 9px; }
  .content-page::before { letter-spacing: .16em; }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-card,
  .gallery-card img,
  .gallery-card span,
  .gallery-card::after,
  .photo-card,
  .photo-link img { transition: none !important; transform: none !important; }
}

/* =============================================================
   POLISHED CONCEPT v1.1 — ALIGNMENT / OVERLAP CORRECTION
   Cosmetic-only overrides. Catalog, gallery rendering and links
   are intentionally untouched.
   ============================================================= */

/* Header: give the brand and navigation their own centered rows.
   This removes every desktop-width collision while keeping the
   existing branding and navigation content unchanged. */
.site-header .header-inner {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  justify-items: center !important;
  align-items: center !important;
  gap: 11px !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 20px 0 26px !important;
}
.site-header .brand {
  position: static !important;
  display: flex !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 16px !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  transform: none !important;
}
.site-header .brand-name {
  position: static !important;
  display: block !important;
  width: auto !important;
  max-width: calc(100vw - 190px) !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  white-space: nowrap !important;
  text-align: center !important;
  font-size: clamp(31px, 3.05vw, 54px) !important;
  line-height: 1.08 !important;
}
.site-header .main-nav {
  position: static !important;
  display: flex !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 18px !important;
  transform: none !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px clamp(18px, 2.4vw, 42px) !important;
}
.site-header .main-nav a {
  white-space: nowrap !important;
}
.site-header .header-inner::after {
  left: 8% !important;
  right: 8% !important;
}

/* Home carousel: keep both the instruction and exhibition wall
   optically centered and clip every moving frame to its wall. */
.home-page .carousel-heading {
  width: min(calc(100% - 32px), var(--content-width)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}
.home-page .carousel-instruction {
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}
.home-page .carousel-stage {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  overflow: hidden !important;
}
.home-page .carousel-viewport {
  overflow: hidden !important;
}

/* Home section heading: make the eyebrow and title a centered,
   two-line composition instead of letting legacy transforms place
   them beside one another or outside the viewport. */
.home-carousel + main .page-intro,
.home-page .page-intro {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 100% !important;
  transform: none !important;
  margin: 0 auto !important;
  padding: 34px 16px 30px !important;
  text-align: center !important;
  overflow: visible !important;
}
.home-page .page-intro::before {
  position: static !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  text-align: center !important;
  transform: none !important;
  line-height: 1.2 !important;
}
.home-carousel + main .page-intro .section-title,
.home-page .page-intro .section-title {
  position: static !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  text-align: center !important;
  transform: none !important;
  white-space: normal !important;
  font-size: clamp(38px, 4.1vw, 62px) !important;
  line-height: 1.05 !important;
}
.home-page .page-intro::after {
  margin: 18px auto 0 !important;
}
.home-page .gallery-menu {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Tablet and phone refinements for the new centered header. */
@media (max-width: 900px) {
  .site-header .header-inner {
    gap: 7px !important;
    padding: 12px 0 18px !important;
  }
  .site-header .brand {
    padding: 0 10px !important;
  }
  .site-header .brand-name {
    max-width: calc(100vw - 120px) !important;
    white-space: normal !important;
    font-size: clamp(24px, 5vw, 36px) !important;
  }
  .site-header .main-nav {
    padding: 0 10px !important;
    gap: 5px 18px !important;
  }
  .home-carousel + main .page-intro,
  .home-page .page-intro {
    padding: 26px 12px 24px !important;
  }
  .home-carousel + main .page-intro .section-title,
  .home-page .page-intro .section-title {
    font-size: clamp(31px, 7vw, 46px) !important;
  }
}

@media (max-width: 600px) {
  .site-header .header-inner {
    padding: 9px 0 14px !important;
  }
  .site-header .brand {
    flex-direction: column !important;
    gap: 3px !important;
  }
  .site-header .brand-name {
    max-width: calc(100vw - 24px) !important;
    font-size: clamp(21px, 6.3vw, 29px) !important;
  }
  .site-header .main-nav {
    gap: 4px 13px !important;
  }
  .home-page .carousel-heading {
    width: calc(100% - 20px) !important;
  }
  .home-page .page-intro::before {
    font-size: 10px !important;
    letter-spacing: .20em !important;
  }
  .home-carousel + main .page-intro .section-title,
  .home-page .page-intro .section-title {
    font-size: clamp(28px, 8vw, 38px) !important;
  }
}

/* =============================================================
   POLISHED CONCEPT v1.2 — iPAD MINI / SMALL-SCREEN CAROUSEL
   Compact the home film ribbon on iPad mini-size viewports and
   smaller without changing desktop or larger-tablet presentation.
   ============================================================= */
@media (max-width: 768px) {
  .home-page .carousel-stage {
    width: calc(100% - 44px) !important;
  }
}

@media (min-width: 601px) and (max-width: 768px) and (orientation: portrait) {
  .home-page .carousel-stage {
    --frame-height: clamp(122px, 19vw, 154px) !important;
    padding: 5px 6px !important;
  }
  .home-page .carousel-panel {
    flex-basis: min(var(--panel-width, 300px), 58vw) !important;
    width: min(var(--panel-width, 300px), 58vw) !important;
  }
  .home-page .carousel-track {
    gap: 7px !important;
  }
}

@media (max-width: 768px) and (orientation: landscape) {
  .home-page .carousel-stage {
    --frame-height: clamp(86px, 20vh, 116px) !important;
    width: calc(100% - 36px) !important;
    padding: 4px 6px !important;
  }
}

@media (max-width: 600px) and (orientation: portrait) {
  .home-page .carousel-stage {
    --frame-height: clamp(94px, 28vw, 122px) !important;
    width: calc(100% - 24px) !important;
    padding: 4px !important;
  }
  .home-page .carousel-panel {
    flex-basis: min(var(--panel-width, 300px), 72vw) !important;
    width: min(var(--panel-width, 300px), 72vw) !important;
  }
}

@media (max-width: 390px) and (orientation: portrait) {
  .home-page .carousel-stage {
    --frame-height: clamp(84px, 27vw, 108px) !important;
    width: calc(100% - 18px) !important;
  }
}

/* === FEATURED GALLERY IMAGE SIZING — 2026-09-29 ===
   Keeps the catalog-driven CSS-column architecture intact.
   gallerySize:"large" creates a centered two-column-scale feature;
   gallerySpan:"all" creates a true full-gallery-width feature. */
.photo-grid[data-catalog-rebuild="true"] .photo-card.size-large {
  display: block !important;
  column-span: all !important;
  -webkit-column-span: all !important;
  width: calc(66.666% - 3px) !important;
  margin: 0 auto var(--gallery-gap, 8px) !important;
}
.photo-grid[data-catalog-rebuild="true"] .photo-card.span-all {
  display: block !important;
  column-span: all !important;
  -webkit-column-span: all !important;
  width: 100% !important;
  margin: 0 0 var(--gallery-gap, 8px) !important;
}
@media (max-width: 900px) {
  .photo-grid[data-catalog-rebuild="true"] .photo-card.size-large,
  .photo-grid[data-catalog-rebuild="true"] .photo-card.span-all {
    width: 100% !important;
  }
}

/* === ROUNDABOUTS SHOWCASE + THREE-COLUMN RETURN — 2026-09-29 ===
   The seven gallery-show selections stay first at two-across size. Taj Mahal is
   intentionally used as one regular-photo filler to balance the end of that section.
   All remaining Roundabouts photographs then return to the normal three-column
   masonry flow, preventing a large black transition gap. */
.photo-grid[data-catalog-gallery="roundabouts"] {
  display: block !important;
  columns: auto !important;
  column-gap: 0 !important;
  width: 100% !important;
}

.photo-grid[data-catalog-gallery="roundabouts"] .roundabouts-showcase-stage {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: var(--gallery-gap, 8px) !important;
  align-items: start !important;
  width: 100% !important;
  margin: 0 0 var(--gallery-gap, 8px) !important;
}

.photo-grid[data-catalog-gallery="roundabouts"] .roundabouts-showcase-column {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--gallery-gap, 8px) !important;
  min-width: 0 !important;
}

.photo-grid[data-catalog-gallery="roundabouts"] .roundabouts-showcase-column .photo-card,
.photo-grid[data-catalog-gallery="roundabouts"] .roundabouts-showcase-column .photo-card.size-small,
.photo-grid[data-catalog-gallery="roundabouts"] .roundabouts-showcase-column .photo-card.size-normal,
.photo-grid[data-catalog-gallery="roundabouts"] .roundabouts-showcase-column .photo-card.size-large {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  break-inside: avoid !important;
  column-span: none !important;
  -webkit-column-span: none !important;
  grid-column: auto !important;
  grid-row: auto !important;
  vertical-align: top !important;
}

.photo-grid[data-catalog-gallery="roundabouts"] .roundabouts-regular-grid {
  display: block !important;
  columns: 3 !important;
  column-gap: var(--gallery-gap, 8px) !important;
  width: 100% !important;
  margin: 0 !important;
}

.photo-grid[data-catalog-gallery="roundabouts"] .roundabouts-regular-grid .photo-card,
.photo-grid[data-catalog-gallery="roundabouts"] .roundabouts-regular-grid .photo-card.size-small,
.photo-grid[data-catalog-gallery="roundabouts"] .roundabouts-regular-grid .photo-card.size-normal,
.photo-grid[data-catalog-gallery="roundabouts"] .roundabouts-regular-grid .photo-card.size-large {
  display: inline-block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 var(--gallery-gap, 8px) !important;
  break-inside: avoid !important;
  column-span: none !important;
  -webkit-column-span: none !important;
  vertical-align: top !important;
}

@media (max-width: 900px) {
  .photo-grid[data-catalog-gallery="roundabouts"] .roundabouts-regular-grid {
    columns: 2 !important;
  }
}

@media (max-width: 620px) {
  .photo-grid[data-catalog-gallery="roundabouts"] .roundabouts-showcase-stage {
    grid-template-columns: 1fr !important;
  }
  .photo-grid[data-catalog-gallery="roundabouts"] .roundabouts-regular-grid {
    columns: 1 !important;
  }
}


/* =============================================================
   CONTACT PAGE — 2026-09-29
   Click-to-email, click-to-call, social links and downloadable vCard.
   ============================================================= */
.contact-page .contact-content {
  width: min(1080px, calc(100% - 40px));
  margin: 0 auto;
  padding: clamp(46px, 7vw, 90px) 0 clamp(70px, 8vw, 110px);
}

.contact-page .contact-hero {
  text-align: center;
  max-width: 800px;
  margin: 0 auto clamp(34px, 5vw, 58px);
}

.contact-page .contact-kicker {
  margin: 0 0 12px;
  color: #c8a96b;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .28em;
}

.contact-page .contact-hero h1 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(40px, 6.2vw, 72px);
  line-height: 1.04;
  letter-spacing: -.02em;
}

.contact-page .contact-intro {
  max-width: 690px;
  margin: 22px auto 0;
  color: #b8b5b0;
  font-size: clamp(16px, 1.8vw, 20px);
  line-height: 1.65;
}

.contact-page .contact-card {
  overflow: hidden;
  border: 1px solid rgba(200, 169, 107, .27);
  border-radius: 18px;
  background:
    radial-gradient(circle at 0 0, rgba(200, 169, 107, .10), transparent 36%),
    linear-gradient(145deg, rgba(25, 25, 26, .98), rgba(12, 12, 13, .99));
  box-shadow: 0 26px 70px rgba(0, 0, 0, .34);
}

.contact-page .contact-card-main {
  padding: clamp(28px, 4vw, 48px);
  border-bottom: 1px solid rgba(255, 255, 255, .075);
}

.contact-page .contact-card-main h2 {
  margin: 0 0 8px;
  color: #f2efea;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 400;
}

.contact-page .contact-role,
.contact-page .contact-location {
  margin: 4px 0 0;
  color: #aaa7a2;
  font-size: 15px;
  letter-spacing: .035em;
}

.contact-page .contact-links {
  display: block;
}

.contact-page .contact-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 22px clamp(24px, 4vw, 48px);
  color: #eeeae4;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  transition: background .2s ease, color .2s ease, padding-left .2s ease;
}

.contact-page .contact-row:hover,
.contact-page .contact-row:focus-visible {
  background: rgba(200, 169, 107, .08);
  color: #fff;
}

.contact-page .contact-label {
  color: #c8a96b;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.contact-page .contact-value {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: clamp(16px, 2vw, 20px);
}

.contact-page .contact-action {
  color: #8f8b86;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.contact-page .contact-save {
  padding: clamp(26px, 4vw, 42px) clamp(24px, 4vw, 48px);
  text-align: center;
}

.contact-page .contact-save-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 24px;
  border: 1px solid #c8a96b;
  border-radius: 999px;
  color: #111;
  background: #c8a96b;
  text-decoration: none;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.contact-page .contact-save-button:hover,
.contact-page .contact-save-button:focus-visible {
  transform: translateY(-2px);
  background: #dbc28c;
  box-shadow: 0 9px 24px rgba(200, 169, 107, .18);
}

.contact-page .contact-save p {
  max-width: 650px;
  margin: 16px auto 0;
  color: #8f8b86;
  font-size: 13px;
  line-height: 1.55;
}

@media (max-width: 640px) {
  .contact-page .contact-content {
    width: min(100% - 24px, 1080px);
    padding-top: 34px;
  }
  .contact-page .contact-row {
    grid-template-columns: 1fr auto;
    gap: 7px 12px;
    padding: 19px 20px;
  }
  .contact-page .contact-label {
    grid-column: 1 / -1;
  }
  .contact-page .contact-action {
    align-self: center;
  }
}/* Keep Back to Print Details visible at all times */
.full-image-page .full-image-back,
.full-image-page .full-image-back:link,
.full-image-page .full-image-back:visited,
.full-image-page .full-image-back:hover,
.full-image-page .full-image-back:focus,
.full-image-page .full-image-back:active {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    opacity: 1 !important;
}
/* =========================================================
   PHOTO TITLE LINKS — CLICKABLE FIX
   ========================================================= */


/* PHOTO TITLE LINKS — ENSURE CLICKABLE */
.photo-info {
    position: relative !important;
    z-index: 20 !important;
    pointer-events: auto !important;
}

.photo-title-link {
    position: relative !important;
    z-index: 21 !important;
    display: block !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    color: inherit !important;
    text-decoration: none !important;
}

.photo-title-link h2 {
    position: relative !important;
    z-index: 22 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* CUSTOM PRINT SIZE CONTROLS */
.custom-size-pricing input[type="number"] {
  width: 110px;
  min-height: 48px;
  padding: 8px 12px;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  border-radius: 6px;
}

.custom-size-pricing label {
  display: block;
  font-size: 18px;
  margin-top: 16px;
  margin-bottom: 6px;
}

.custom-size-pricing label:first-child {
  margin-top: 0;
}

.custom-size-pricing input[type="number"],
.custom-size-pricing select {
  display: block;
  margin-bottom: 14px;
}

.custom-size-pricing select {
  min-height: 42px;
  padding: 6px 10px;
  font-size: 18px;
  border-radius: 6px;
}
.custom-size-pricing {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.custom-size-pricing .buy-button {
  align-self: stretch;
  width: 100%;
  box-sizing: border-box;
}
.custom-matte-preview {
  width: 100%;
  margin: 18px 0 8px;
  display: flex;
  justify-content: center;
}

.custom-matte-paper {
  width: 100%;
  max-width: 420px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.pricing-main-matte-preview {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}
.custom-matte-image {
  display: block;
  object-fit: contain;
}
.custom-size-output {
  font-size: 18px;
  line-height: 1.5;
  margin-top: 10px;
}
.edition-note {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.4;
}

/* =============================================================
   2026-10-08 AROUND THE WORLD - iPHONE SAFARI COLUMN PAINT FIX
   Scope: Around the World gallery only, narrow phones only.
   Safari can mispaint the first card when a one-column gallery is
   still using the CSS multi-column engine. Disable multi-column
   layout at phone width and use ordinary document flow instead.
   ============================================================= */
@media (max-width: 620px) {
  .photo-grid[data-catalog-gallery="around-the-world"][data-catalog-rebuild="true"] {
    display: block !important;
    columns: auto !important;
    column-count: auto !important;
    column-width: auto !important;
  }

  .photo-grid[data-catalog-gallery="around-the-world"][data-catalog-rebuild="true"] .photo-card,
  .photo-grid[data-catalog-gallery="around-the-world"][data-catalog-rebuild="true"] .photo-card.size-small,
  .photo-grid[data-catalog-gallery="around-the-world"][data-catalog-rebuild="true"] .photo-card.size-normal,
  .photo-grid[data-catalog-gallery="around-the-world"][data-catalog-rebuild="true"] .photo-card.size-large {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 var(--gallery-gap, 8px) 0 !important;
    break-inside: auto !important;
    -webkit-column-break-inside: auto !important;
    page-break-inside: auto !important;
  }
}