/*
 * components.css — kitchen-sink component styling for the preview workspace.
 * MUST only reference tokens from tokens.css. No raw hex or px outside of
 * positioning/border-width specifics where pixel-perfection is intended.
 * Variants re-skin this by overriding token values, never by replacing rules.
 */

/* =====================================================================
   Layout shell
   ===================================================================== */

.shell {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--space-page-gutter);
}

@media (max-width: 768px) {
  .shell {
    padding: 0 var(--space-page-gutter-sm);
  }
}

.section {
  padding: var(--space-section-gap) 0;
}

.section--tight {
  padding: var(--space-7) 0;
}

.eyebrow {
  font-family: var(--font-eyebrow);
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  font-weight: var(--fw-ui-medium);
  text-transform: uppercase;
  color: var(--accent);
}

.lede {
  font-family: var(--font-lede);
  font-size: var(--fs-lede);
  line-height: var(--lh-lede);
  letter-spacing: var(--ls-lede);
  color: var(--ink-on-page);
}

.lede--center {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.small {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  letter-spacing: var(--ls-small);
  color: var(--ink-on-page-soft);
}

/* =====================================================================
   Language selector
   A small inline pill of three short codes (IT · EN · DE). Renders inside
   headers (site/admin) and as a floating top-right pill on pages without
   a header. Two visual modes: light (default) for ivory surfaces, on-deep
   for the bottle-green site header.
   ===================================================================== */

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px 10px;
  background-color: var(--surface-card);
  border: var(--border-hairline);
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  font-weight: var(--fw-ui-medium);
  text-transform: uppercase;
  line-height: 1;
  box-shadow: var(--shadow-card);
}

.lang-switch__opt {
  color: var(--ink-on-page-soft);
  text-decoration: none;
  padding: 2px 6px;
  border-radius: var(--radius-pill);
  transition: color var(--dur-base) var(--ease-default),
              background-color var(--dur-base) var(--ease-default);
}

.lang-switch__opt:hover {
  color: var(--accent);
}

.lang-switch__opt--active {
  color: var(--c-ivory);
  background-color: var(--accent);
}

.lang-switch__opt--active:hover {
  color: var(--c-ivory);
}

.lang-switch__sep {
  color: var(--rule-color);
  user-select: none;
}

/* On bottle-green surfaces (site header, page-deep), invert the chrome. */
.lang-switch--on-deep {
  background-color: rgba(251, 248, 241, 0.10);
  border-color: rgba(251, 248, 241, 0.35);
  box-shadow: none;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.lang-switch--on-deep .lang-switch__opt {
  color: rgba(251, 248, 241, 0.75);
}

.lang-switch--on-deep .lang-switch__opt:hover {
  color: var(--c-ivory);
}

.lang-switch--on-deep .lang-switch__opt--active {
  background-color: var(--c-ivory);
  color: var(--c-bottle-green);
}

.lang-switch--on-deep .lang-switch__sep {
  color: rgba(251, 248, 241, 0.35);
}

/* Floating placement for pages without a header. */
.lang-switch--floating {
  position: fixed;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 95;
}

@media (max-width: 600px) {
  .lang-switch--floating {
    top: var(--space-2);
    right: var(--space-2);
  }
  .lang-switch {
    padding: 3px 8px;
    gap: var(--space-1);
  }
  .lang-switch__opt {
    padding: 2px 5px;
  }
}

/* =====================================================================
   Variant toolbar (preview workspace chrome)
   ===================================================================== */

.toolbar {
  position: fixed;
  top: var(--space-3);
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  background-color: var(--surface-card);
  border: var(--border-hairline);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-card);
  max-width: calc(100% - var(--space-7));
  flex-wrap: wrap;
  justify-content: center;
}

.toolbar__label {
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  font-weight: var(--fw-ui-medium);
  text-transform: uppercase;
  color: var(--ink-on-page-soft);
}

.toolbar__link {
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  font-weight: var(--fw-ui-medium);
  letter-spacing: var(--ls-small);
  text-decoration: none;
  color: var(--accent);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  transition: background-color var(--dur-base) var(--ease-default);
}

.toolbar__link:hover {
  background-color: var(--c-lace);
}

.toolbar__link--active {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
}

.toolbar__link--active:hover {
  background-color: var(--btn-primary-bg-hover);
}

/* =====================================================================
   Hero
   ===================================================================== */

.hero {
  position: relative;
  background-color: var(--surface-deep);
  color: var(--ink-on-deep);
  padding: var(--space-10) var(--space-page-gutter);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}

.hero__texture {
  position: absolute;
  inset: 0;
  background-image: image-set(url('/static/design-assets/texture-hero-1024.webp') type('image/webp'), url('/static/design-assets/texture-hero-1024.png') type('image/png'));
  background-size: var(--texture-hero-tile);
  background-repeat: repeat;
  opacity: var(--texture-hero-opacity);
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 0;
}

.hero__frame {
  position: absolute;
  inset: var(--space-3);
  border: 1px solid var(--c-ivory);
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
}

.hero__inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}

.hero__eyebrow {
  font-family: var(--font-eyebrow);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  font-weight: var(--fw-ui-medium);
  text-transform: uppercase;
  color: var(--hero-accent, var(--c-lemon-soft));
}

.hero__monogram {
  width: 120px;
  height: auto;
}

.hero__title {
  font-family: var(--font-hero);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-weight: var(--fw-display);
  text-transform: uppercase;
  color: var(--c-ivory);
  margin: 0;
}

.hero__subtitle {
  font-family: var(--font-subhead);
  font-size: var(--fs-lede);
  line-height: var(--lh-lede);
  font-style: italic;
  color: var(--c-ivory);
  opacity: 0.92;
  padding-inline: var(--space-2);
}

.hero__branch {
  width: var(--ornament-branch-width);
  max-width: 80%;
  height: auto;
  margin-top: var(--space-2);
}

.hero__cta {
  margin-top: var(--space-4);
}

/* =====================================================================
   Dividers
   ===================================================================== */

.divider {
  display: flex;
  justify-content: center;
  padding: var(--space-8) 0;
}

.divider__img {
  width: var(--ornament-divider-width);
  max-width: 80%;
  aspect-ratio: 1524 / 196;
  background-image: var(--asset-divider);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.7;
}

.divider--ornate .divider__img {
  width: var(--ornament-divider-ornate-width);
  aspect-ratio: 1774 / 354;
  background-image: var(--asset-divider-ornate);
  opacity: 0.85;
}

/* =====================================================================
   Buttons
   ===================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: var(--fw-ui-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 28px;
  border: 1px solid transparent;
  border-radius: var(--radius-button);
  cursor: pointer;
  transition:
    background-color var(--dur-base) var(--ease-default),
    color var(--dur-base) var(--ease-default),
    box-shadow var(--dur-hover) var(--ease-default),
    transform var(--dur-hover) var(--ease-default);
}

.btn--primary {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
}

.btn--primary:hover {
  background-color: var(--btn-primary-bg-hover);
  box-shadow: var(--shadow-button-hover);
  transform: translateY(-2px);
}

.btn--secondary {
  background-color: transparent;
  border-color: var(--btn-secondary-border);
  color: var(--btn-secondary-fg);
  border-radius: var(--radius-button-flat);
}

.btn--secondary:hover {
  background-color: var(--btn-secondary-bg-hover);
}

.btn--ghost {
  background-color: transparent;
  color: var(--accent);
  border-radius: var(--radius-button-flat);
  padding: 8px 12px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.btn--ghost:hover {
  color: var(--btn-primary-bg-hover);
  text-decoration-color: var(--c-lemon-rind);
}

.btn--on-deep {
  background-color: var(--c-ivory);
  color: var(--c-bottle-green);
}

.btn--on-deep:hover {
  background-color: var(--c-lemon-soft);
}

.btn[disabled],
.btn--disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* =====================================================================
   Section heading
   ===================================================================== */

.section-head {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-7);
}

.section-head__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  font-weight: var(--fw-heading);
  text-transform: uppercase;
  color: var(--ink-on-page);
}

.gallery-filter {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: transparent;
  border: 1px solid rgba(8, 27, 6, 0.35);
  color: var(--c-bottle-deep);
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  font-weight: var(--fw-ui-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: var(--radius-button-flat);
  cursor: pointer;
  transition: background-color var(--dur-base) var(--ease-default),
              color var(--dur-base) var(--ease-default),
              border-color var(--dur-base) var(--ease-default);
}
.gallery-filter:hover {
  background-color: rgba(8, 27, 6, 0.08);
  border-color: var(--c-bottle-deep);
}
.gallery-filter[aria-pressed="true"] {
  background-color: var(--c-bottle-deep);
  color: var(--c-ivory);
  border-color: var(--c-bottle-deep);
}
.gallery-filter__sep { opacity: 0.6; }

/* =====================================================================
   Featured photo strip (arched cards)
   ===================================================================== */

.featured {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

@media (max-width: 768px) {
  .featured {
    grid-template-columns: 1fr;
  }
}

.arch-card {
  display: flex;
  flex-direction: column;
  background-color: var(--surface-card);
  overflow: hidden;
  transition: transform var(--dur-hover) var(--ease-default),
              box-shadow var(--dur-hover) var(--ease-default);
}

.arch-card:hover {
  transform: scale(1.015);
  box-shadow: var(--shadow-photo-hover);
}

.arch-card__media {
  aspect-ratio: 4 / 5;
  border-top-left-radius: var(--arch-radius);
  border-top-right-radius: var(--arch-radius);
  border-bottom-left-radius: var(--radius-photo);
  border-bottom-right-radius: var(--radius-photo);
  background: linear-gradient(160deg, var(--c-leaf), var(--c-bottle-green) 70%);
  position: relative;
}

.arch-card__media--lemon {
  background: linear-gradient(160deg, var(--c-lemon-soft), var(--c-lemon-rind));
}

.arch-card__media--lace {
  background: linear-gradient(160deg, var(--c-lace), var(--c-rule));
}

.arch-card__caption {
  padding: var(--space-3) var(--space-2) 0;
  text-align: center;
}

.arch-card__title {
  font-family: var(--font-subhead);
  font-size: 18px;
  font-style: italic;
  color: var(--ink-on-page);
}

.arch-card__meta {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--ink-on-page-soft);
  margin-top: var(--space-1);
}

/* =====================================================================
   Gallery grid (masonry-ish)
   ===================================================================== */

.gallery {
  --gallery-gap: 2px;
  --gallery-row-h: 180px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gallery-gap);
  background-color: var(--c-ivory);
}

@media (max-width: 1024px) {
  .gallery { --gallery-row-h: 160px; }
}

@media (max-width: 600px) {
  .gallery { --gallery-row-h: 130px; }
}

.gallery__tile {
  display: block;
  /* width / height are set inline by the justified-rows layout in event.js */
  width: var(--gallery-row-h);
  height: var(--gallery-row-h);
  transition: transform var(--dur-hover) var(--ease-default),
              box-shadow var(--dur-hover) var(--ease-default);
}

#gallery-sentinel {
  width: 100%;
  height: 1px;
  margin-top: var(--space-6);
}

.gallery__tile:hover {
  transform: scale(1.015);
  box-shadow: var(--shadow-photo-hover);
}

.gallery__tile--tall   { aspect-ratio: 3 / 4; }
.gallery__tile--square { aspect-ratio: 1 / 1; }
.gallery__tile--wide   { aspect-ratio: 4 / 3; }

.gallery__tile--g1 { background: linear-gradient(150deg, var(--c-leaf), var(--c-bottle-deep)); }
.gallery__tile--g2 { background: linear-gradient(150deg, var(--c-lemon-soft), var(--c-lemon-rind)); }
.gallery__tile--g3 { background: linear-gradient(150deg, var(--c-lace), var(--c-rule)); }
.gallery__tile--g4 { background: linear-gradient(150deg, var(--c-bottle-green), var(--c-leaf)); }
.gallery__tile--g5 { background: linear-gradient(150deg, var(--c-ivory), var(--c-lemon-soft)); }
.gallery__tile--g6 { background: linear-gradient(150deg, var(--c-leaf), var(--c-lemon-rind)); }
.gallery__tile--g7 { background: linear-gradient(150deg, var(--c-bottle-deep), var(--c-leaf)); }
.gallery__tile--g8 { background: linear-gradient(150deg, var(--c-rule), var(--c-ink-soft)); }

/* =====================================================================
   Album chips (pill buttons)
   ===================================================================== */

.chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

.chip {
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  font-weight: var(--fw-ui-medium);
  letter-spacing: var(--ls-small);
  text-decoration: none;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background-color: var(--chip-bg);
  color: var(--chip-fg);
  border: 1px solid transparent;
  transition: background-color var(--dur-base) var(--ease-default);
  cursor: pointer;
}

.chip:hover {
  background-color: var(--chip-bg-hover);
}

.chip--neutral {
  background-color: transparent;
  border-color: var(--chip-neutral-border);
  color: var(--chip-neutral-fg);
}

.chip--neutral:hover {
  background-color: var(--c-lace);
}

/* =====================================================================
   Upload card
   ===================================================================== */

.upload-card {
  background-color: var(--surface-card);
  border: var(--border-hairline);
  border-radius: var(--radius-card);
  padding: var(--space-7);
  box-shadow: var(--shadow-card);
  max-width: 760px;
  margin: 0 auto;
}

.dropzone {
  border: 1.5px dashed var(--accent-soft);
  background-color: var(--surface-card);
  border-top-left-radius: var(--arch-radius-tight);
  border-top-right-radius: var(--arch-radius-tight);
  border-bottom-left-radius: var(--radius-card);
  border-bottom-right-radius: var(--radius-card);
  padding: var(--space-9) var(--space-7) var(--space-7);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
  transition: background-color var(--dur-base) var(--ease-default),
              border-color var(--dur-base) var(--ease-default);
}

.dropzone:hover {
  border-color: var(--accent);
}

.dropzone__title {
  font-family: var(--font-eyebrow);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  font-weight: var(--fw-ui-medium);
  text-transform: uppercase;
  color: var(--accent);
}

.dropzone__help {
  font-family: var(--font-subhead);
  font-size: var(--fs-lede);
  font-style: italic;
  color: var(--ink-on-page-soft);
}

.dropzone__ornament {
  width: 80px;
  aspect-ratio: 1243 / 851;
  margin-top: var(--space-2);
  background-image: var(--asset-dropzone-branch);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.85;
}

.staged {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-5);
}

@media (max-width: 600px) {
  .staged { grid-template-columns: 1fr; }
}

.staged__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background-color: var(--c-ivory);
  border: var(--border-hairline);
  border-radius: var(--radius-card);
}

.staged__thumb {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-photo);
  background: linear-gradient(150deg, var(--c-leaf), var(--c-bottle-green));
  flex-shrink: 0;
}

.staged__thumb--alt {
  background: linear-gradient(150deg, var(--c-lemon-soft), var(--c-lemon-rind));
}

.staged__name {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--ink-on-page);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.badge--ready {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background-color: var(--c-lemon-soft);
  color: var(--c-ink);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: var(--fw-ui-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}

.badge__lemon {
  width: var(--ornament-lemon-pill);
  height: var(--ornament-lemon-pill);
  display: inline-block;
}

/* =====================================================================
   Form card
   ===================================================================== */

.form-card {
  background-color: var(--surface-card);
  border: var(--border-hairline);
  border-radius: var(--radius-card);
  padding: var(--space-7);
  box-shadow: var(--shadow-card);
  max-width: 480px;
  margin: 0 auto;
  text-align: center;
}

.form-card__eyebrow {
  font-family: var(--font-eyebrow);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  font-weight: var(--fw-ui-medium);
  text-transform: uppercase;
  color: var(--accent);
}

.form-card__title {
  font-family: var(--font-subhead);
  font-size: var(--fs-h3);
  font-style: italic;
  color: var(--ink-on-page);
  margin-top: var(--space-2);
  margin-bottom: var(--space-2);
}

.form-card__lede {
  font-family: var(--font-lede);
  font-size: var(--fs-lede);
  line-height: var(--lh-lede);
  color: var(--ink-on-page-soft);
  margin-bottom: var(--space-5);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-align: left;
  margin-bottom: var(--space-4);
}

.form-field__label {
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  font-weight: var(--fw-ui-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.form-field__input {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--ink-on-page);
  background-color: var(--surface-card);
  border: 1px solid var(--rule-color);
  border-radius: var(--radius-input);
  padding: 12px 14px;
  transition: border-color var(--dur-base) var(--ease-default),
              box-shadow var(--dur-base) var(--ease-default);
}

.form-field__input:focus {
  outline: none;
  border-color: var(--accent);
  border-width: 1.5px;
  box-shadow: 0 0 0 3px var(--c-lemon-soft);
}

.form-field__hint {
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  color: var(--ink-on-page-soft);
}

.form-actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  margin-top: var(--space-5);
}

/* =====================================================================
   Button matrix
   ===================================================================== */

.btn-matrix {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
  align-items: center;
  justify-items: start;
}

.btn-matrix__row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.btn-matrix__label {
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  font-weight: var(--fw-ui-medium);
  text-transform: uppercase;
  color: var(--ink-on-page-soft);
}

/* =====================================================================
   Featured card with lace corner ornament
   ===================================================================== */

.feature-card {
  position: relative;
  background-color: var(--surface-card);
  border: var(--border-hairline);
  border-radius: var(--radius-card);
  padding: var(--space-8) var(--space-7);
  box-shadow: var(--shadow-card);
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  overflow: hidden;
}

.feature-card__corner {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--ornament-corner-size);
  aspect-ratio: 1136 / 1193;
  background-image: var(--asset-corner-tl);
  background-repeat: no-repeat;
  background-position: top left;
  background-size: contain;
  opacity: 0.55;
  pointer-events: none;
}

.feature-card__eyebrow {
  font-family: var(--font-eyebrow);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  font-weight: var(--fw-ui-medium);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-3);
}

.feature-card__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  letter-spacing: var(--ls-h2);
  font-weight: var(--fw-heading);
  text-transform: uppercase;
  color: var(--ink-on-page);
  margin-bottom: var(--space-3);
}

.feature-card__body {
  font-family: var(--font-lede);
  font-size: var(--fs-lede);
  line-height: var(--lh-lede);
  color: var(--ink-on-page);
  max-width: 540px;
  margin: 0 auto;
}

/* =====================================================================
   Footer
   ===================================================================== */

.footer {
  background-color: var(--surface-deeper);
  color: var(--ink-on-deep);
  padding: var(--space-8) var(--space-page-gutter) var(--space-6);
  text-align: center;
}

.footer__ornament {
  width: 180px;
  height: auto;
  margin: 0 auto var(--space-4);
  opacity: 0.85;
}

.footer__rule {
  width: 80%;
  max-width: 600px;
  height: 1px;
  background-color: var(--c-ivory);
  opacity: 0.3;
  margin: 0 auto var(--space-5);
}

.footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, max-content));
  justify-content: center;
  gap: var(--space-8);
  max-width: var(--content-max);
  margin: 0 auto;
  text-align: left;
}

@media (max-width: 768px) {
  .footer__cols { grid-template-columns: 1fr; text-align: center; }
}

.footer__col-title {
  font-family: var(--font-eyebrow);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  font-weight: var(--fw-ui-medium);
  text-transform: uppercase;
  color: var(--c-lemon-soft);
  margin-bottom: var(--space-3);
}

.footer__col-body {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--c-ivory);
  opacity: 0.85;
}

.footer__copy {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--c-ivory);
  opacity: 0.7;
  margin-top: var(--space-6);
}

/* =====================================================================
   Production-page additions
   site shells, admin chrome, real photo tiles, qr card, upload progress,
   admin media grid, token table, empty/notice states, deep page wrap.
   ===================================================================== */

/* ---------- Site header (public pages) ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background-color: var(--surface-deep);
  color: var(--ink-on-deep);
  height: 72px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.site-header__frame {
  position: absolute;
  inset: var(--space-3);
  border: 1px solid var(--c-ivory);
  opacity: 0.35;
  pointer-events: none;
}

.site-header__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--space-7);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

@media (max-width: 768px) {
  .site-header__inner { padding: 0 var(--space-5); }
}

.site-header__brand {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.site-header__monogram {
  height: 40px;
  width: auto;
  display: block;
}

.site-header__title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-heading);
  font-size: 16px;
  letter-spacing: 0.18em;
  font-weight: var(--fw-heading);
  text-transform: uppercase;
  color: var(--c-ivory);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 50%;
  pointer-events: none;
}

.site-header__lang {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}

@media (max-width: 600px) {
  /* Title becomes secondary on small screens to make room for brand + lang. */
  .site-header__title { display: none; }
}

/* ---------- Admin header (utility chrome) ---------- */
.admin-header {
  background-color: var(--surface-page);
  border-bottom: var(--border-hairline);
}

.admin-header__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-4) var(--space-7);
  display: flex;
  align-items: baseline;
  gap: var(--space-6);
}

@media (max-width: 768px) {
  .admin-header__inner { padding: var(--space-4) var(--space-5); gap: var(--space-4); flex-wrap: wrap; }
}

.admin-header__brand {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-3);
  text-decoration: none;
  color: inherit;
}

.admin-header__eyebrow {
  font-family: var(--font-heading);
  font-size: 14px;
  letter-spacing: 0.18em;
  font-weight: var(--fw-heading);
  text-transform: uppercase;
  color: var(--c-bottle-green);
}

.admin-header__role {
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  font-weight: var(--fw-ui-medium);
  text-transform: uppercase;
  color: var(--ink-on-page-soft);
}

.admin-header__title {
  font-family: var(--font-subhead);
  font-style: italic;
  font-size: var(--fs-lede);
  color: var(--ink-on-page);
  margin-left: auto;
}

.admin-header__lang {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.admin-header__title + .admin-header__lang { margin-left: var(--space-4); }
.admin-header__brand + .admin-header__lang { margin-left: auto; }

/* ---------- Real-photo gallery tiles ---------- */
/* These properties extend the existing .gallery__tile rule above. */
.gallery__tile {
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}

.gallery__tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: var(--c-ivory);
}

.gallery__no-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: var(--c-bottle-deep);
  color: var(--c-ivory);
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-small);
  text-transform: uppercase;
  opacity: 0.85;
}

/* ---------- Video overlays ---------- */
.video-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 44px;
  color: var(--c-ivory);
  text-shadow: 0 0 12px rgba(0, 0, 0, 0.55);
  pointer-events: none;
  line-height: 1;
}

.video-duration {
  position: absolute;
  bottom: var(--space-2);
  right: var(--space-2);
  background-color: rgba(20, 64, 15, 0.78);
  color: var(--c-ivory);
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: var(--radius-pill);
  pointer-events: none;
}

/* ---------- Dropzone drag-over state ---------- */
.dropzone--dragover {
  border-style: solid;
  border-color: var(--accent);
  background-color: color-mix(in srgb, var(--c-lemon-soft) 25%, var(--surface-card));
}

/* ---------- Upload progress rows ---------- */
.upload-summary {
  margin: var(--space-4) 0 0;
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  color: var(--ink-on-page-soft);
  text-align: center;
}

.upload-summary--done { color: var(--c-success); }
.upload-summary--has-failed { color: var(--c-error); }

.upload-progress {
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.upload-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background-color: var(--surface-card);
  border: var(--border-hairline);
  border-radius: var(--radius-card);
  font-family: var(--font-ui);
  font-size: var(--fs-small);
}

.upload-row__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-on-page);
}

.upload-row__bar {
  width: 140px;
  height: 6px;
  border-radius: var(--radius-pill);
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--c-lace);
  overflow: hidden;
}

.upload-row__bar::-webkit-progress-bar {
  background-color: var(--c-lace);
  border-radius: var(--radius-pill);
}

.upload-row__bar::-webkit-progress-value {
  background-color: var(--accent);
  border-radius: var(--radius-pill);
  transition: width var(--dur-base) var(--ease-default);
}

.upload-row__bar::-moz-progress-bar {
  background-color: var(--accent);
  border-radius: var(--radius-pill);
}

.upload-row__status {
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  font-weight: var(--fw-ui-medium);
  text-transform: uppercase;
  color: var(--ink-on-page-soft);
  min-width: 60px;
  text-align: right;
}

.upload-row--error {
  border-color: var(--c-error);
}

.upload-row--error .upload-row__status {
  color: var(--c-error);
}

/* ---------- QR card (admin dashboard) ---------- */
.qr-card {
  background-color: var(--surface-card);
  border: var(--border-hairline);
  border-radius: var(--radius-card);
  padding: var(--space-7);
  box-shadow: var(--shadow-card);
  max-width: 480px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.qr-card__svg {
  width: 100%;
  max-width: 280px;
  height: auto;
  background-color: var(--c-white);
  padding: var(--space-3);
  border-radius: var(--radius-card);
}

.qr-card__svg svg {
  display: block;
  width: 100%;
  height: auto;
}

.qr-card__url {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: var(--fs-small);
  color: var(--ink-on-page);
  background-color: var(--c-lace);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-input);
  word-break: break-all;
  text-align: center;
  max-width: 100%;
}

.qr-card__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  width: 100%;
}

/* ---------- Countdown pill ---------- */
.countdown {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px 12px;
  background-color: var(--c-lemon-soft);
  color: var(--c-ink);
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  font-weight: var(--fw-ui-medium);
  letter-spacing: 0.04em;
}

/* ---------- Empty state ---------- */
.empty-state {
  text-align: center;
  padding: var(--space-9) var(--space-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.empty-state__ornament {
  width: 240px;
  aspect-ratio: 1243 / 851;
  background-image: var(--asset-dropzone-branch);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.7;
}

.empty-state__text {
  font-family: var(--font-subhead);
  font-style: italic;
  font-size: var(--fs-lede);
  color: var(--ink-on-page-soft);
}

/* ---------- Admin media grid ---------- */
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-4);
  list-style: none;
  padding: 0;
  margin: 0;
}

.media-grid__item {
  display: flex;
  flex-direction: column;
  background-color: var(--surface-card);
  border: var(--border-hairline);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.media-grid__thumb {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  background-color: var(--c-lace);
}

.media-grid__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-grid__no-thumb {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--c-bottle-deep);
  color: var(--c-ivory);
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: var(--ls-small);
}

.media-grid__meta {
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  color: var(--ink-on-page-soft);
  flex: 1;
}

.media-grid__meta-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.media-grid__meta-line--strong {
  color: var(--ink-on-page);
  font-weight: var(--fw-ui-medium);
}

.media-grid__actions {
  padding: 0 var(--space-3) var(--space-3);
}

.media-grid__actions form { margin: 0; }
.media-grid__actions .btn { width: 100%; }

/* ---------- Token table ---------- */
.token-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  background-color: var(--surface-card);
  border: var(--border-hairline);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.token-table th,
.token-table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--rule-color);
  vertical-align: middle;
}

.token-table tbody tr:last-child td { border-bottom: 0; }

.token-table th {
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  font-weight: var(--fw-ui-medium);
  text-transform: uppercase;
  color: var(--accent);
  background-color: var(--c-lace);
}

.token-table td code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 12px;
  color: var(--ink-on-page);
  background-color: var(--c-lace);
  padding: 2px 6px;
  border-radius: var(--radius-input);
}

.token-table__status {
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  font-weight: var(--fw-ui-medium);
  text-transform: uppercase;
}

.token-table__status--active    { color: var(--c-success); }
.token-table__status--scheduled { color: var(--c-success); }
.token-table__status--inactive  { color: var(--ink-on-page-soft); }
.token-table__status--expired   { color: var(--ink-on-page-soft); }
.token-table__status--revoked   { color: var(--c-error); }

.token-table__row--inactive td:not(:last-child) { opacity: 0.65; }

/* ---------- Unified access-cards table ---------- */
.token-table-wrap { overflow-x: auto; }

.card-toolbar {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-5);
}

.token-table--unified .token-table__col-card { width: 32%; }

.card-cell {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.card-cell__qr {
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  background-color: var(--c-white);
  padding: 4px;
  border-radius: var(--radius-input);
  border: var(--border-hairline);
}

.card-cell__qr svg {
  display: block;
  width: 100%;
  height: 100%;
}

.card-cell__meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.card-cell__token {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 12px;
  color: var(--ink-on-page);
  background-color: var(--c-lace);
  padding: 2px 6px;
  border-radius: var(--radius-input);
}

.card-cell__url {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px;
  color: var(--ink-on-page-soft);
  word-break: break-all;
  text-decoration: none;
  max-width: 100%;
}

.card-cell__url:hover { color: var(--accent); text-decoration: underline; }

.token-table__window {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px;
  color: var(--ink-on-page-soft);
  white-space: nowrap;
}

.countdown--inline {
  margin-top: var(--space-2);
  font-size: 11px;
  padding: 2px 8px;
}

.token-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 220px;
}

.token-actions__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.activate-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
}

.activate-form__field {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--ink-on-page-soft);
}

.activate-form__label {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.activate-form__hours {
  width: 4.5em;
  font: inherit;
  font-size: 12px;
  padding: 3px 5px;
  border: 1px solid var(--rule-color);
  border-radius: var(--radius-input);
  background-color: var(--surface-card);
}

.activate-form__schedule { font-size: 11px; }
.activate-form__schedule summary {
  cursor: pointer;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.activate-form__start {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  padding: 3px 5px;
  border: 1px solid var(--rule-color);
  border-radius: var(--radius-input);
  background-color: var(--surface-card);
}

.btn--xs {
  padding: 6px 12px;
  font-size: 11px;
  letter-spacing: 0.05em;
}

@media (max-width: 700px) {
  .card-cell { flex-direction: column; }
  .card-cell__qr { width: 120px; height: 120px; }
  .token-actions { min-width: 0; }
  .token-table--unified th,
  .token-table--unified td { padding: var(--space-3); }
}

/* ---------- Access cards (per-card layout) ---------- */
.access-tznote {
  color: var(--ink-on-page-soft);
  font-style: italic;
}

/* Create-a-card disclosure */
.access-create {
  border: var(--border-hairline);
  border-radius: var(--radius-card);
  background-color: var(--surface-card);
  margin-bottom: var(--space-5);
  overflow: hidden;
}
.access-create__summary {
  cursor: pointer;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  font-weight: var(--fw-ui-medium);
  color: var(--accent);
}
.access-create__form {
  padding: 0 var(--space-4) var(--space-4);
  border-top: 1px solid var(--rule-color);
  margin: 0;
}

/* Permission checkbox grid (create + per-card editor) */
.perm-grid {
  border: 0;
  margin: 0;
  padding: var(--space-3) 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-2) var(--space-4);
}
.perm-grid__legend {
  padding: 0;
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ink-on-page-soft);
}
.perm-check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-small);
  color: var(--ink-on-page);
  cursor: pointer;
}
.perm-check input { flex: 0 0 auto; }
.perm-check__label { line-height: 1.2; }

/* The list of cards */
.access-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.access-card {
  border: var(--border-hairline);
  border-radius: var(--radius-card);
  background-color: var(--surface-card);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
/* A live (active/scheduled) card gets an accent edge so it stands out. */
.access-card--active,
.access-card--scheduled { border-left: 3px solid var(--c-success); }
.access-card--revoked,
.access-card--expired,
.access-card--inactive { opacity: 0.92; }

.access-card__top {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}
.access-card__qr {
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  background-color: var(--c-white);
  padding: 4px;
  border-radius: var(--radius-input);
  border: var(--border-hairline);
}
.access-card__qr svg { display: block; width: 100%; height: 100%; }
.access-card__head {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.access-card__statusline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

/* Human window, in the event's timezone */
.access-card__window {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  font-size: var(--fs-small);
  color: var(--ink-on-page);
  margin: 0;
}
.access-card__window--none { color: var(--ink-on-page-soft); font-style: italic; }
.access-card__window-key {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
  margin-right: 4px;
}
.access-card__window-dur { color: var(--ink-on-page-soft); }

/* Permission pills — at-a-glance summary of what the card grants */
.perm-pills {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.perm-pill {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.perm-pill--on {
  color: var(--c-success);
  border-color: var(--c-success);
  background-color: color-mix(in srgb, var(--c-success) 10%, transparent);
}
.perm-pill--off {
  color: var(--ink-on-page-soft);
  border-color: var(--rule-color);
  text-decoration: line-through;
  opacity: 0.7;
}

.access-card__link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

/* Controls block (schedule + permission editor + secondary actions) */
.access-card__controls {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--rule-color);
}

.schedule-form { margin: 0; display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); }
.schedule-form__fields {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.schedule-form__field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
  color: var(--ink-on-page-soft);
}
.schedule-form__label {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.schedule-form__input {
  font: inherit;
  font-size: 12px;
  padding: 5px 7px;
  border: 1px solid var(--rule-color);
  border-radius: var(--radius-input);
  background-color: var(--surface-card);
  color: var(--ink-on-page);
}

.perm-edit { font-size: var(--fs-small); }
.perm-edit__summary {
  cursor: pointer;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11px;
}
.perm-edit__form { margin: var(--space-2) 0 0; }

@media (max-width: 700px) {
  .access-card__top { flex-direction: column; }
  .access-card__qr { width: 120px; height: 120px; }
  .schedule-form__field { flex: 1; min-width: 140px; }
  .schedule-form__input { width: 100%; }
}

/* ---------- Notices ---------- */
.notice {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-card);
  background-color: var(--c-lace);
  border: var(--border-hairline);
  border-left: 3px solid var(--accent);
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  color: var(--ink-on-page);
  margin-bottom: var(--space-4);
}

.notice--error {
  border-left-color: var(--c-error);
  color: var(--c-error);
}

/* ---------- Stack helper (vertical rhythm) ---------- */
.stack > * + * { margin-top: var(--space-5); }
.stack--tight > * + * { margin-top: var(--space-3); }
.stack--loose > * + * { margin-top: var(--space-7); }

/* ---------- Deep-page wrap (expired / error) ---------- */
.page-deep {
  min-height: 100vh;
  background-color: var(--surface-deep);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-7);
  color: var(--ink-on-deep);
  overflow: hidden;
}

.page-deep::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: image-set(url('/static/design-assets/texture-hero-1024.webp') type('image/webp'), url('/static/design-assets/texture-hero-1024.png') type('image/png'));
  background-size: var(--texture-hero-tile);
  background-repeat: repeat;
  opacity: var(--texture-hero-opacity);
  mix-blend-mode: overlay;
  pointer-events: none;
}

.page-deep__card {
  position: relative;
  z-index: 1;
  background-color: var(--surface-card);
  border-radius: var(--radius-card);
  border: var(--border-hairline);
  padding: var(--space-8) var(--space-7);
  text-align: center;
  max-width: 480px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  box-shadow: var(--shadow-card);
  color: var(--ink-on-page);
}

.page-deep__ornament {
  width: 200px;
  aspect-ratio: 1243 / 851;
  background-image: var(--asset-dropzone-branch);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.85;
}

.page-deep__eyebrow {
  font-family: var(--font-eyebrow);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  font-weight: var(--fw-ui-medium);
  text-transform: uppercase;
  color: var(--accent);
}

.page-deep__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  letter-spacing: var(--ls-h2);
  text-transform: uppercase;
  color: var(--ink-on-page);
}

.page-deep__body {
  font-family: var(--font-lede);
  font-size: var(--fs-lede);
  color: var(--ink-on-page-soft);
  line-height: var(--lh-lede);
}

/* ---------- Footer additions ---------- */
.footer__host-link {
  color: var(--c-lemon-soft);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.footer__host-link:hover { color: var(--c-lemon); }

/* ---------- Utility ---------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =====================================================================
   Lightbox — full-bleed dimmed bottle-deep overlay with hairline-bordered
   image, top-right chrome (close / info / download) and side nav chevrons.
   Per DesignStyle §5.3, the surface stays calm; controls are quiet ivory.
   ===================================================================== */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: var(--space-7);
  background-color: rgba(20, 64, 15, 0.86);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.lightbox[hidden] { display: none; }

.lightbox__stage {
  position: relative;
  width: 100%;
  max-width: var(--content-max);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.lightbox__media-wrap {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

.lightbox__media-wrap img,
.lightbox__media-wrap video {
  display: block;
  max-width: 100%;
  max-height: 100%;
  border: 1px solid var(--c-ivory);
  background-color: var(--c-bottle-deep);
}

.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  color: var(--c-ivory);
  font-family: var(--font-serif);
  font-size: 56px;
  line-height: 1;
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  opacity: 0.55;
  transition: opacity var(--dur-base) var(--ease-default);
  user-select: none;
}

.lightbox__nav:hover { opacity: 1; }
.lightbox__nav--prev { left: 0; }
.lightbox__nav--next { right: 0; }
.lightbox__nav[disabled] {
  opacity: 0.15;
  cursor: default;
  pointer-events: none;
}

.lightbox__chrome {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  color: var(--c-ivory);
  gap: var(--space-4);
}

.lightbox__counter {
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  opacity: 0.75;
}

.lightbox__actions {
  display: flex;
  gap: var(--space-2);
}

/* Holds the destructive Delete action in the bottom-left corner, kept well
   away from Close (bottom-right) so it can't be hit when dismissing a photo. */
.lightbox__chrome-side {
  display: flex;
  align-items: center;
}

.lightbox__action {
  background: transparent;
  border: 1px solid rgba(251, 248, 241, 0.4);
  color: var(--c-ivory);
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  font-weight: var(--fw-ui-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 14px;
  cursor: pointer;
  text-decoration: none;
  border-radius: var(--radius-button-flat);
  transition: background-color var(--dur-base) var(--ease-default),
              color var(--dur-base) var(--ease-default),
              border-color var(--dur-base) var(--ease-default),
              opacity var(--dur-base) var(--ease-default);
  display: inline-flex;
  align-items: center;
  position: relative; /* anchors the disabled-state tooltip */
}

/* The display rule above overrides the UA's [hidden] { display:none }, so the
   hidden attribute (used to drop Delete for no-delete cards) needs this guard
   or the button stays visible and clickable. */
.lightbox__action[hidden] {
  display: none;
}

.lightbox__action:not(.lightbox__action--disabled):hover {
  background-color: rgba(251, 248, 241, 0.12);
  border-color: var(--c-ivory);
}

.lightbox__action[aria-pressed="true"] {
  background-color: var(--c-ivory);
  color: var(--c-bottle-deep);
  border-color: var(--c-ivory);
}

.lightbox__action--delete:not(.lightbox__action--disabled):hover {
  background-color: var(--c-error);
  border-color: var(--c-error);
  color: var(--c-ivory);
}

/* Greyed-out action: the permission/ownership doesn't apply to this photo. */
.lightbox__action--disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Explanatory bubble, anchored above its action. Hidden until the action is
   hovered/focused (desktop) or tapped open (mobile, via .is-tip-open). */
.lightbox__tip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: max-content;
  max-width: 200px;
  padding: 8px 11px;
  background-color: rgba(8, 27, 6, 0.96);
  border: 1px solid rgba(251, 248, 241, 0.3);
  border-radius: var(--radius-button-flat);
  color: var(--c-ivory);
  font-size: var(--fs-small);
  font-weight: var(--fw-body);
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.35;
  text-align: center;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  z-index: 3;
  transition: opacity var(--dur-base) var(--ease-default),
              transform var(--dur-base) var(--ease-default),
              visibility var(--dur-base) var(--ease-default);
}

.lightbox__tip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgba(8, 27, 6, 0.96);
}

.lightbox__action--disabled:hover .lightbox__tip,
.lightbox__action--disabled:focus-visible .lightbox__tip,
.lightbox__action--disabled.is-tip-open .lightbox__tip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Delete lives at the left edge, so its tooltip aligns to the left instead of
   centering (which would clip past the viewport). */
.lightbox__action--delete .lightbox__tip {
  left: 0;
  transform: translateX(0) translateY(4px);
}

.lightbox__action--delete .lightbox__tip::after {
  left: 20px;
}

.lightbox__action--delete.lightbox__action--disabled:hover .lightbox__tip,
.lightbox__action--delete.lightbox__action--disabled:focus-visible .lightbox__tip,
.lightbox__action--delete.lightbox__action--disabled.is-tip-open .lightbox__tip {
  transform: translateX(0) translateY(0);
}

.lightbox__info {
  background-color: rgba(8, 27, 6, 0.7);
  border: 1px solid rgba(251, 248, 241, 0.2);
  border-radius: var(--radius-card);
  padding: var(--space-3) var(--space-4);
  color: var(--c-ivory);
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: var(--space-4);
  row-gap: var(--space-1);
  max-width: 540px;
  width: 100%;
}

.lightbox__info[hidden] { display: none; }

.lightbox__info dt {
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  font-weight: var(--fw-ui-medium);
  text-transform: uppercase;
  color: var(--c-lemon-soft);
  margin: 0;
}

.lightbox__info dd {
  margin: 0;
  color: var(--c-ivory);
  word-break: break-word;
}

@media (max-width: 600px) {
  .lightbox { padding: var(--space-4); }
  .lightbox__action { padding: 5px 10px; font-size: 11px; }
  .lightbox__nav { font-size: 40px; padding: var(--space-2); }
}

/* =====================================================================
   Danger zone — destructive admin actions (clear photos / delete event)
   ===================================================================== */

.eyebrow--danger { color: var(--c-error); }

.btn--danger {
  background-color: var(--c-error);
  color: var(--c-ivory);
  border-color: var(--c-error);
}

.btn--danger:hover {
  background-color: color-mix(in srgb, var(--c-error) 82%, #000);
  border-color: color-mix(in srgb, var(--c-error) 82%, #000);
  box-shadow: var(--shadow-button-hover);
  transform: translateY(-2px);
}

.danger-card {
  background-color: var(--surface-card);
  border: 1px solid var(--c-error);
  border-radius: var(--radius-card);
  padding: var(--space-7);
  box-shadow: var(--shadow-card);
  max-width: 480px;
  margin: 0 auto var(--space-5);
  text-align: center;
}

.danger-card:last-child { margin-bottom: 0; }

.danger-card__title {
  font-family: var(--font-subhead);
  font-style: italic;
  font-size: var(--fs-h3);
  color: var(--c-error);
  margin: 0 0 var(--space-2);
}

.danger-form { margin-top: var(--space-5); }
.danger-form .form-field:last-of-type { margin-bottom: 0; }

.danger-form code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-weight: var(--fw-ui-strong);
  color: var(--c-error);
}

/* Confirmation modal (second-stage danger confirm) */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
}

.modal[hidden] { display: none; }

.modal__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(20, 64, 15, 0.86);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.modal__panel {
  position: relative;
  z-index: 1;
  background-color: var(--surface-card);
  border: 1px solid var(--c-error);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-7);
  max-width: 460px;
  width: 100%;
  text-align: center;
}

.modal__title {
  font-family: var(--font-subhead);
  font-style: italic;
  font-size: var(--fs-h3);
  color: var(--c-error);
  margin: 0 0 var(--space-3);
}

.modal__body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-on-page);
  margin: 0 0 var(--space-5);
}

.modal__actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}

/* =====================================================================
   Admin · system health dashboard
   ===================================================================== */

.health-meta {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  color: var(--ink-on-page-soft);
  margin-top: var(--space-3);
}

.health-meta__error {
  display: none;
  color: var(--c-error);
}

.health--error .health-meta__error {
  display: inline;
}

.health-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.health-card {
  background: var(--surface-card);
  border: var(--border-hairline) solid var(--rule-color);
  border-radius: var(--radius-card);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
}

.health-card__title {
  font-family: var(--font-eyebrow);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--space-3);
}

.health-card__big {
  font-family: var(--font-heading);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  color: var(--ink-on-page);
  margin: 0 0 var(--space-2);
}

.gauge {
  height: 8px;
  width: 100%;
  background: var(--surface-inset);
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin-bottom: var(--space-4);
}

.gauge__fill {
  height: 100%;
  width: 0;
  background: var(--accent);
  border-radius: var(--radius-pill);
  transition: width var(--dur-base) var(--ease-default),
    background-color var(--dur-base) var(--ease-default);
}

.gauge__fill--warn { background: var(--c-lemon-rind); }
.gauge__fill--crit { background: var(--c-error); }

.health-stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-top: var(--border-hairline) solid var(--rule-color);
}

.health-stat:first-of-type {
  border-top: none;
}

.health-stat__label {
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  color: var(--ink-on-page-soft);
}

.health-stat__value {
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  font-weight: var(--fw-ui-strong);
  font-variant-numeric: tabular-nums;
  color: var(--ink-on-page);
  text-align: right;
}

.health-stat__value--lg {
  font-size: var(--fs-h3);
}

/* --- Time-series graphs --- */

.health-graphs__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
}

.health-windows {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  background: var(--surface-inset);
  border-radius: var(--radius-pill);
}

.health-window {
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  font-weight: var(--fw-ui-strong);
  color: var(--ink-on-page-soft);
  background: transparent;
  border: none;
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-3);
  cursor: pointer;
  transition: background-color var(--dur-base) var(--ease-default),
    color var(--dur-base) var(--ease-default);
}

.health-window:hover {
  color: var(--ink-on-page);
}

.health-window.is-active {
  background: var(--surface-card);
  color: var(--accent);
  box-shadow: var(--shadow-card);
}

.health-graph-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-4);
}

.health-chart {
  height: 180px;
  margin-bottom: var(--space-3);
}

.health-chart canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.health-legend {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.health-legend__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  color: var(--ink-on-page-soft);
}

.health-legend__swatch {
  width: 12px;
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--accent);
}

/* --- Issue log --- */

.health-issues__badge {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 1px var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--c-error);
  color: #fff;
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  font-weight: var(--fw-ui-strong);
  vertical-align: middle;
}

.health-issues__empty {
  color: var(--ink-on-page-soft);
  margin: 0;
}

.health-issues__list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 420px;
  overflow-y: auto;
}

.health-issue {
  padding: var(--space-3) 0;
  border-top: var(--border-hairline) solid var(--rule-color);
  border-left: 3px solid var(--ink-on-page-soft);
  padding-left: var(--space-3);
}

.health-issue:first-child {
  border-top: none;
}

.health-issue--error {
  border-left-color: var(--c-error);
}

.health-issue--warn {
  border-left-color: var(--c-lemon-rind);
}

.health-issue__meta {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-1);
}

.health-issue__sev {
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  font-weight: var(--fw-ui-strong);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
}

.health-issue--error .health-issue__sev { color: var(--c-error); }
.health-issue--warn .health-issue__sev { color: var(--c-lemon-rind); }

.health-issue__stage {
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  color: var(--ink-on-page);
  font-variant-numeric: tabular-nums;
}

.health-issue__time {
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  color: var(--ink-on-page-soft);
  margin-left: auto;
}

.health-issue__msg {
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  color: var(--ink-on-page);
}

.health-issue__detail {
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  color: var(--ink-on-page-soft);
  margin-top: var(--space-1);
  word-break: break-word;
}