/* ─── Contenteditable affordances (used inside template renders) ─── */
[contenteditable]:empty::before {
  content: attr(data-placeholder);
  opacity: 0.35;
  pointer-events: none;
}

[contenteditable] {
  border-bottom: 1.5px dashed var(--color-divider);
  border-radius: 0;
  transition: background 0.15s;
}

@media (hover: hover) {
  [contenteditable]:hover {
    background: var(--color-surface);
    outline: 1px dashed var(--color-muted);
    outline-offset: 3px;
    border-radius: 0;
    border-bottom-color: transparent;
  }
}

[contenteditable]:focus {
  outline: 2px dashed var(--color-ink);
  outline-offset: 4px;
  border-radius: 0;
  border-bottom-color: transparent;
  background: var(--color-surface);
}

/* iOS Safari auto-zooms on inputs <16px. Scoped to coarse pointer so desktop layout is untouched. */
@media (pointer: coarse) {
  input:not([type="hidden"]),
  textarea,
  select,
  [contenteditable] {
    font-size: 16px !important;
  }
}

/* ─── Moment Editor — visual overhaul (April 2026) ─── */
.me {
  --me-ink:           var(--color-ink);
  --me-surface:       var(--color-paper);
  --me-label:         var(--color-label);
  --me-muted:         var(--color-muted);
  --me-divider:       var(--color-divider);
  --me-soft-panel:    var(--color-surface);
  --me-hairline:      var(--color-divider);
  --me-input-line:    var(--color-divider);
  --me-quiet-border:  var(--color-label);

  background: var(--me-surface);
  color: var(--me-ink);
  max-width: 640px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* Top bar */
.me__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0 22px;
  gap: 12px;
}

.me__back {
  font-family: var(--font-brand-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--me-ink);
  opacity: 0.6;
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.me__back:hover { opacity: 1; }

.me__pills {
  display: flex;
  gap: 8px;
  align-items: center;
}

.me__pill {
  font-family: var(--font-brand-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  color: var(--me-ink);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
}

.me__pill--draft     { background: var(--color-surface); color: var(--me-ink); }
.me__pill--paid      { background: var(--color-surface); color: var(--me-ink); }
.me__pill--live      { background: var(--color-success-bg); color: var(--color-success-text); }
.me__pill--unpaid    { background: var(--color-surface); color: var(--me-label); opacity: 0.7; }
.me__pill--expired   { background: var(--color-surface); color: var(--me-muted); opacity: 0.7; }

.me__pill-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--me-ink);
}

.me__pill--live .me__pill-dot { background: var(--color-success-dot); }


.me__autosave {
  font-family: var(--font-brand-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--me-ink);
  opacity: 0.5;
  text-transform: uppercase;
  align-self: center;
}

/* Page header */
.me__header {
  padding: 4px 0 28px;
  border-bottom: 1px solid var(--me-hairline);
}

.me__kicker {
  font-family: var(--font-brand-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--me-label);
  margin-bottom: 10px;
}

.me__title {
  font-family: var(--font-brand-display);
  font-size: clamp(28px, 7vw, 36px);
  line-height: 0.95;
  letter-spacing: -0.01em;
  color: var(--me-ink);
  margin: 0 0 18px;
  text-transform: uppercase;
}
.me__title em {
  font-family: var(--font-brand-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.me__actions {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}

/* Quiet text-link row for all moment actions (publish/unpublish/preview/delete).
   Replaces the older 3-pill row that read as cluttered. */
.me__actions--publish {
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
}

.me__action-links {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
}

.me__textlink-sep {
  font-family: var(--font-brand-mono);
  font-size: 11px;
  color: var(--me-ink);
  opacity: 0.3;
}

.me__textlink {
  font-family: var(--font-brand-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--me-ink);
  opacity: 0.6;
  text-decoration: none;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: opacity 0.15s ease, color 0.15s ease;
  border-bottom: 1px solid transparent;
}
.me__textlink:hover { opacity: 1; border-bottom-color: var(--me-ink); }
.me__textlink:focus-visible {
  outline: 2px solid var(--me-ink);
  outline-offset: 4px;
  border-radius: 2px;
  opacity: 1;
}
.me__textlink--danger { color: var(--color-danger); opacity: 0.85; }
.me__textlink--danger:hover { opacity: 1; border-bottom-color: var(--color-danger); }

/* Subtle emphasis for the primary action in the row (Publish / Unpublish) —
   keeps the same text-link language but reads as the action of the row. */
.me__textlink--accent {
  color: var(--me-ink);
  opacity: 1;
  border-bottom-color: var(--me-ink);
}
.me__textlink--accent:hover { border-bottom-color: var(--me-ink); opacity: 1; }
.me__textlink.is-disabled,
.me__textlink:disabled {
  opacity: 0.35;
  pointer-events: none;
  cursor: not-allowed;
  border-bottom-color: transparent;
}

.me__required {
  margin-left: 3px;
  color: var(--me-ink);
  opacity: 0.55;
}

.me__btn {
  font-family: var(--font-brand-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--me-ink);
  border-radius: 999px;
  padding: 8px 18px;
  border: 1px solid var(--me-ink);
  background: var(--me-surface);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  box-shadow: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.me__btn:hover { background: var(--color-surface); }

.me__btn--primary {
  background: var(--me-ink);
  color: var(--color-paper);
  border-color: var(--me-ink);
  flex: 1 1 auto;
}
.me__btn--primary:hover { background: var(--color-ink-secondary); color: var(--color-paper); border-color: var(--color-ink-secondary); }

.me__btn--ghost {
  background: transparent;
  flex: 0 0 auto;
}
.me__btn--ghost:hover { background: var(--color-surface); }

.me__btn--quiet {
  border-color: var(--me-divider);
}

.me__btn--disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.me__btn--unpublish {
  background: var(--me-surface);
  color: var(--me-ink);
  border-color: var(--me-ink);
  flex: 1 1 auto;
}
.me__btn--unpublish:hover { background: var(--color-surface); }

.me__chip {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  padding: 9px 16px 9px 18px;
  background: transparent;
  border: 1px solid var(--me-divider);
  border-radius: 999px;
  color: var(--me-ink);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.me__chip:hover {
  background: var(--color-surface);
  border-color: var(--me-label);
}

.me__chip-label {
  font-family: var(--font-brand-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--me-ink);
  opacity: 0.62;
}

.me__chip-count {
  position: relative;
  padding-left: 14px;
  font-family: var(--font-brand-display);
  font-size: 18px;
  line-height: 1;
  letter-spacing: -0.01em;
  font-feature-settings: "tnum", "lnum";
  color: var(--me-ink);
}
.me__chip-count::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 16px;
  background: currentColor;
  opacity: 0.18;
  transform: translateY(-50%);
}

.me__chip-arrow {
  font-family: var(--font-brand-mono);
  font-size: 13px;
  line-height: 1;
  opacity: 0.5;
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.me__chip:hover .me__chip-arrow {
  transform: translateX(2px);
  opacity: 1;
}

.me__share {
  margin-top: 14px;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 10px;
  width: 100%;
}

.me__url-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 0;
  min-width: 0;
  padding: 4px 6px 4px 12px;
  border: 1px solid var(--me-divider);
  border-radius: 999px;
  background: var(--color-surface);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.me__url-row:focus-within {
  border-color: var(--me-ink);
  background: var(--me-surface);
}

.me__url-input {
  flex: 1;
  min-width: 0;
  font-family: var(--font-brand-mono);
  font-size: 12px;
  letter-spacing: 0.01em;
  border: 0;
  background: transparent;
  padding: 8px 2px;
  color: var(--me-ink);
  outline: none;
  cursor: pointer;
  text-overflow: ellipsis;
}

.me__copy-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: var(--me-ink);
  opacity: 0.55;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: opacity 0.15s ease, background 0.15s ease;
}
.me__copy-icon:hover { opacity: 1; background: var(--color-surface); }
.me__copy-icon:focus-visible {
  outline: 2px solid var(--me-ink);
  outline-offset: 2px;
  opacity: 1;
}
.me__copy-icon[data-copied="true"]::after {
  content: "Copied";
  position: absolute;
  top: 50%;
  right: calc(100% + 8px);
  transform: translateY(-50%);
  font-family: var(--font-brand-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--me-ink);
  background: var(--color-surface);
  padding: 4px 8px;
  border-radius: 999px;
  white-space: nowrap;
  pointer-events: none;
}
.me__copy-icon[data-copied="true"] svg { opacity: 0; }
.me__copy-icon[data-copied="true"]::before {
  content: "";
  position: absolute;
  inset: 8px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8.5l3 3 7-7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8.5l3 3 7-7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
}

/* Live-page CTA — pairs with .me__url-row at identical height/radius so the
   row reads as a unified "copy + visit" group. Dark fill carries the action
   weight; the URL pill stays quiet as data. */
.me__share-cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--me-ink);
  color: var(--me-surface);
  font-family: var(--font-brand-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease, transform 0.12s ease;
}
.me__share-cta:hover {
  background: var(--color-ink-secondary);
  color: var(--color-paper);
}
.me__share-cta:focus-visible {
  outline: 2px solid var(--me-ink);
  outline-offset: 3px;
}

.me__share-cta-arrow {
  font-size: 13px;
  line-height: 1;
  transition: transform 0.18s ease;
}
.me__share-cta:hover .me__share-cta-arrow { transform: translateX(3px); }

/* Tiny phones: stack the action below the URL so neither pill has to shrink */
@media (max-width: 380px) {
  .me__share { flex-wrap: wrap; }
  .me__share-cta { width: 100%; justify-content: center; }
}

/* Expiration line — editorial annotation beneath the URL row */
.me__expires {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0 0;
  color: var(--me-ink);
}

.me__expires-label {
  font-family: var(--font-brand-display);
  font-style: italic;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.005em;
  opacity: 0.5;
}

.me__expires-rule {
  display: inline-block;
  width: 22px;
  height: 1px;
  background: currentColor;
  opacity: 0.22;
}

.me__expires-date {
  font-family: var(--font-brand-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-feature-settings: "tnum", "lnum";
}

.me__expires-meta {
  font-family: var(--font-brand-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  opacity: 0.55;
}

.me__expires[data-state="past"] .me__expires-label {
  color: var(--color-danger);
  opacity: 0.85;
}
.me__expires[data-state="past"] .me__expires-date {
  color: var(--color-danger);
}

/* Sections */
.me__section {
  padding: 30px 0;
  border-top: 1px solid var(--me-hairline);
}
.me__section:first-of-type { border-top: 0; }

.me__section-num {
  font-family: var(--font-brand-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--me-label);
  margin-bottom: 6px;
}

.me__section-title {
  font-family: var(--font-brand-display);
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--me-ink);
  margin: 0 0 22px;
}

/* Consolidated Details section — sub-blocks divided by hairline rules */
.me__details-rule {
  height: 1px;
  background: var(--me-hairline);
  margin: 28px 0 24px;
}

.me__details-block {
  /* semantic wrapper; spacing handled by rule + subkicker */
}
.me__details-block + .me__details-block {
  margin-top: 28px;
}

.me__subkicker {
  font-family: var(--font-brand-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--me-ink);
  opacity: 0.55;
  margin: 0 0 14px;
}

/* Template picker, when nested inside Details, drops its standalone border/padding */
.me__section--details .me__templates {
  border-top: 0;
  padding: 0;
}

/* Gift link inputs sit directly under the toggle row when shown */
.me__details-giftlinks {
  margin-top: 18px;
}

/* Inside Details, the checkbox row no longer needs trailing margin —
   the rule below handles separation. */
.me__section--details .me__check-row {
  margin-bottom: 0;
}

/* Sharing sub-section — separated from the photo field above by a hairline,
   matching the rhythm of the Details section. */
.me__sharing-block {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--me-hairline);
}
.me__sharing-block .me__check-row {
  margin-bottom: 0;
}

/* Form fields */
.me__field {
  display: flex;
  flex-direction: column;
  margin-bottom: 22px;
}
.me__field:last-child { margin-bottom: 0; }

.me__field-row {
  display: grid;
  grid-template-columns: 1fr 110px;
  gap: 1.5rem;
  margin-bottom: 22px;
}

.me__field-row.me__field-row--name {
  grid-template-columns: 1fr 2fr;
}

.me__label {
  font-family: var(--font-brand-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--me-ink);
  opacity: 0.5;
  margin-bottom: 8px;
}

.me__input {
  font-family: var(--font-brand-body);
  font-size: 15px;
  border: 0;
  border-bottom: 1px solid var(--me-input-line);
  background: transparent;
  padding: 0 0 8px;
  color: var(--me-ink);
  border-radius: 0;
  outline: none;
  width: 100%;
  transition: border-bottom-color 0.15s ease;
}
.me__input:focus { border-bottom-color: var(--me-ink); }
.me__input::placeholder { color: var(--me-ink); opacity: 0.3; }

.me__textarea {
  font-family: var(--font-brand-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  border: 0;
  border-bottom: 1px solid var(--me-input-line);
  background: transparent;
  padding: 0 0 12px;
  color: var(--me-ink);
  border-radius: 0;
  outline: none;
  width: 100%;
  resize: vertical;
  min-height: 64px;
  transition: border-bottom-color 0.15s ease;
}
.me__textarea:focus { border-bottom-color: var(--me-ink); }
.me__textarea::placeholder {
  color: var(--me-ink);
  opacity: 0.3;
  font-style: italic;
}

/* "Need ideas?" — read-only inspiration panel beneath the message textarea */
.message-examples-toggle {
  align-self: flex-start;
  margin-top: 10px;
  padding: 4px 0;
  background: none;
  border: 0;
  font-family: var(--font-brand-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-label);
  cursor: pointer;
  transition: color 0.15s ease;
}
.message-examples-toggle:hover,
.message-examples-toggle:focus-visible {
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.message-examples-toggle__arrow {
  display: inline-block;
  transition: transform 0.2s ease;
}
.message-examples-toggle.is-open .message-examples-toggle__arrow {
  transform: rotate(90deg);
}

.message-examples-panel {
  margin-top: 14px;
  padding: 22px;
  background: var(--color-surface);
  border-radius: 12px;
}
.message-examples-panel[hidden] { display: none; }

.message-examples-intro {
  font-family: var(--font-brand-body);
  font-size: 13px;
  line-height: 1.4;
  color: var(--color-ink-secondary);
  margin: 0 0 14px;
}

.message-examples-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.message-examples-list li {
  margin: 0 0 6px;
}
.message-examples-list li:last-child { margin-bottom: 0; }

.message-example {
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--font-brand-serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-ink);
  background: transparent;
  border: 0;
  padding: 8px 10px;
  margin: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.message-example:hover,
.message-example:focus-visible {
  background: var(--color-paper, #fff);
  outline: none;
}
.message-example:active {
  background: var(--color-surface-warm, var(--color-paper, #fff));
}

/* Photo */
.me__photo-row {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 14px;
}

.me__photo-thumb {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--me-divider);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.me__photo-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.me__photo-thumb img.hidden { display: none; }
.me__photo-thumb-initials {
  font-family: var(--font-brand-display);
  font-size: 22px;
  color: var(--me-ink);
  letter-spacing: -0.02em;
}

.me__photo-controls {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  min-width: 0;
}

.me__photo-replace {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 20px;
  border-radius: 999px;
  border: 1px solid var(--me-divider);
  background: var(--me-surface);
  font-family: var(--font-brand-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--me-ink);
  cursor: pointer;
  white-space: nowrap;
  flex: 1 1 0;
  min-width: 0;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.me__photo-replace:hover {
  background: var(--color-surface);
  border-color: var(--me-label);
}
.me__photo-replace input { display: none; }

.me__photo-replace--locked {
  opacity: 0.45;
  cursor: not-allowed;
  border-color: var(--me-divider);
}

.me__photo-toggle {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  padding: 3px;
  border-radius: 999px;
  border: 1px solid var(--me-divider);
  background: var(--me-surface);
}

.me__photo-toggle-opt {
  position: relative;
  padding: 9px 14px;
  border: 0;
  background: transparent;
  border-radius: 999px;
  font-family: var(--font-brand-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--me-label);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.18s ease, background 0.18s ease;
}
.me__photo-toggle-opt:hover {
  color: var(--me-ink);
}
.me__photo-toggle-opt[data-active="true"] {
  background: var(--me-ink);
  color: var(--color-paper);
}
.me__photo-toggle-opt[data-active="true"]:hover {
  color: var(--color-paper);
}

/* On narrow viewports trim the chrome so all three controls stay on a
   single row without wrapping. */
@media (max-width: 400px) {
  .me__photo-replace {
    padding: 11px 12px;
    letter-spacing: 0.08em;
  }
  .me__photo-toggle-opt {
    padding: 8px 10px;
    letter-spacing: 0.08em;
  }
  .me__photo-controls { gap: 6px; }
}

.me__photo-progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 64px;
  height: 64px;
  border-radius: 12px;
  background: rgba(10, 10, 10, 0.55);
  color: var(--color-paper);
  font-family: var(--font-brand-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: none;
}
.me__photo-progress:not(.hidden) {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Custom checkbox */
.me__check-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  margin-bottom: 14px;
}
.me__check-row .me__check { margin-bottom: 0; }

.me__check {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-brand-body);
  font-size: 15px;
  color: var(--me-ink);
  margin-bottom: 14px;
  cursor: pointer;
  position: relative;
}
.me__check input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 22px;
  height: 22px;
  margin: 0;
  cursor: pointer;
}
.me__check-box {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1.5px solid var(--me-divider);
  background: var(--me-surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  transition: background 0.15s, border-color 0.15s;
}
.me__check-box svg { display: none; }
.me__check-box::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 11px;
  border-right: 2.5px solid var(--color-paper);
  border-bottom: 2.5px solid var(--color-paper);
  transform: translate(-50%, -60%) rotate(45deg);
  opacity: 0;
  transition: opacity 0.12s ease;
}
.me__check:hover .me__check-box { border-color: var(--me-label); }
.me__check input[type="checkbox"]:checked + .me__check-box,
.me__check:has(input[type="checkbox"]:checked) .me__check-box {
  background: var(--me-ink) !important;
  border-color: var(--me-ink) !important;
}
.me__check input[type="checkbox"]:checked + .me__check-box::after,
.me__check:has(input[type="checkbox"]:checked) .me__check-box::after {
  opacity: 1 !important;
}
.me__check input[type="checkbox"]:focus-visible + .me__check-box {
  outline: 2px solid var(--me-ink);
  outline-offset: 3px;
}

/* Template panel */
.me__template-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--color-surface);
  border-radius: 12px;
  gap: 12px;
}
.me__template-panel-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.me__template-panel-label {
  font-family: var(--font-brand-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--me-ink);
  opacity: 0.55;
  margin-bottom: 4px;
}
.me__template-panel-name {
  font-family: var(--font-brand-display);
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--me-ink);
  line-height: 1;
}
.me__template-panel-cta {
  font-family: var(--font-brand-body);
  font-size: 13px;
  text-decoration: none;
  color: var(--me-ink);
  border: 1px solid var(--me-ink);
  background: var(--me-surface);
  padding: 8px 16px;
  border-radius: 999px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  transition: background 0.15s ease;
}
.me__template-panel-cta:hover { background: var(--color-surface); }

/* Page lede paragraph (under .me__title) */
.me__lede {
  font-family: var(--font-brand-serif);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--me-ink);
  opacity: 0.7;
  margin: 0 0 18px;
  max-width: 44ch;
}

/* List of moments (index page) — tappable cards */
.me__list {
  list-style: none;
  margin: 24px 0 60px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.me__list > li { margin: 0; display: flex; flex-direction: column; }

.me__row {
  --row-pad: 16px;
  position: relative;
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: 18px;
  padding: var(--row-pad);
  background: var(--me-surface);
  border: 1px solid var(--me-hairline);
  border-radius: 14px;
  text-decoration: none;
  color: var(--me-ink);
  overflow: hidden;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.22s ease,
    background 0.18s ease;
}

/* Left accent bar — appears on hover/focus to signal interactivity */
.me__row::before {
  content: "";
  position: absolute;
  left: 0; top: 12px; bottom: 12px;
  width: 3px;
  background: var(--me-ink);
  border-radius: 0 3px 3px 0;
  opacity: 0;
  transform: translateX(-3px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.me__row:hover,
.me__row:focus-visible {
  border-color: var(--me-label);
  background: var(--color-surface-warm);
  outline: none;
}
.me__row:hover::before,
.me__row:focus-visible::before {
  opacity: 1;
  transform: translateX(0);
}

.me__row:focus-visible {
  outline: 2px solid var(--me-ink);
  outline-offset: 3px;
}

/* Thumbnail (photo or initials) */
.me__row-thumb {
  width: 64px;
  aspect-ratio: 2 / 3;
  border-radius: 6px;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--me-divider);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.22s ease;
}
.me__row:hover .me__row-thumb { transform: scale(1.02); }

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

.me__row-thumb-initials {
  font-family: var(--font-brand-display);
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--me-ink);
}

/* Body — eyebrow row, name, meta */
.me__row-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.me__row-eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.me__chip--inline {
  margin-top: 0;
  gap: 8px;
  padding: 4px 10px 4px 12px;
  line-height: 1;
}
.me__chip--inline .me__chip-label {
  line-height: 1;
}
.me__chip--inline .me__chip-count {
  padding-left: 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.me__chip--inline .me__chip-count::before {
  height: 10px;
}
.me__row:hover .me__chip--inline {
  background: var(--me-surface);
  border-color: var(--me-label);
}

.me__row-name {
  font-family: var(--font-brand-display);
  font-size: 22px;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--me-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.me__row-meta {
  font-family: var(--font-brand-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--me-ink);
  opacity: 0.55;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* CTA — clear "Open →" affordance */
.me__row-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.me__row-cta-label {
  font-family: var(--font-brand-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--me-ink);
  opacity: 0.75;
}

.me__row-cta-arrow {
  display: inline-block;
  vertical-align: middle;
  width: 28px;
  height: auto;
  flex-shrink: 0;
  color: var(--me-ink);
  transition: transform 0.22s ease;
}

.me__view-live-arrow {
  display: inline-block;
  vertical-align: middle;
  width: 22px;
  height: auto;
  margin-left: 0.4em;
  flex-shrink: 0;
  transform: rotate(-45deg);
}

.me__row:hover .me__row-cta-label { opacity: 1; }
.me__row:hover .me__row-cta-arrow { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .me__row,
  .me__row::before,
  .me__row-thumb,
  .me__row-cta,
  .me__row-cta-arrow {
    transition: none;
  }
  .me__row:hover { transform: none; }
}

/* Empty state (no moments yet) */
.me__empty {
  padding: 40px 0 60px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.me__empty-title {
  font-family: var(--font-brand-display);
  font-size: clamp(28px, 7vw, 36px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--me-ink);
  margin: 0 0 6px;
}
.me__empty-title em {
  font-family: var(--font-brand-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* Live preview card */
.me__preview {
  padding: 30px 0 0;
  border-top: 1px solid var(--me-hairline);
}
.me__preview .me__kicker {
  margin-bottom: 0;
}
.me__preview-card {
  margin-top: 12px;
  border-radius: 14px;
  padding: 28px 22px;
  background: var(--color-surface);
  border: 1px solid var(--me-divider);
  color: var(--me-ink);
  position: relative;
  overflow: hidden;
  min-height: 140px;
}
.me__preview-class {
  font-family: var(--font-brand-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--me-ink);
  opacity: 0.7;
  margin-bottom: 22px;
}
.me__preview-name {
  font-family: var(--font-brand-display);
  font-size: clamp(30px, 8vw, 38px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--me-ink);
  margin-bottom: 10px;
  word-break: break-word;
}
.me__preview-name em {
  font-family: var(--font-brand-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.me__preview-school {
  font-family: var(--font-brand-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--me-ink);
  opacity: 0.7;
}

/* Flash messages */
.moments-flash {
  font-family: var(--font-brand-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 10px 16px;
  margin: 10px auto;
  max-width: 640px;
  border-radius: 8px;
}
.moments-flash--notice { background: var(--color-surface); color: var(--color-ink); }
.moments-flash--alert  { background: var(--color-surface); color: var(--color-danger); }

/* Responsive */
@media (max-width: 480px) {
  .me { padding: 0 1rem; }
  .me__field-row { grid-template-columns: 1fr 90px; gap: 1rem; }
  .me__field-row.me__field-row--name { grid-template-columns: 1fr 2fr; }

  .me__row {
    grid-template-columns: 56px 1fr auto;
    gap: 14px;
    padding: 14px;
  }
  .me__row-thumb { width: 56px; }
  .me__row-name { font-size: 19px; }
  .me__row-cta { gap: 4px; }
  .me__row-cta-label { display: none; }
  .me__row-cta-arrow { width: 24px; }
}

/* ─── Photo zoom toolbar (used during owner-editing on the actual card preview) ─── */
.photo-edit-toolbar {
  display: flex;
  justify-content: center;
  margin: 0.875rem auto 0;
}

.photo-zoom-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 6px 14px;
  border-radius: 999px;
  pointer-events: auto;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.photo-zoom-icon {
  display: inline-flex;
  align-items: center;
  opacity: 0.85;
}

.photo-zoom-control input[type="range"] {
  width: 140px;
  margin: 0;
  accent-color: #fff;
  cursor: pointer;
}

/* Pan-to-position hint overlay */
.photo-pan-hint.photo-pan-hint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: auto;
  height: auto;
  padding: 0.5rem 0.875rem;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-family: var(--font-brand-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  pointer-events: none;
  z-index: 5;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: opacity 0.25s ease;
  white-space: nowrap;
}

.photo-pan-hint--hidden { opacity: 0; }

/* iOS long-press on an <img> opens a native share/save sheet — disable on editable photos. */
.mono-page--editing .mono-photo,
.sb__card--editing .sb__photo,
.ink__card--editing .ink__photo,
.so__card--editing .so__photo {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  touch-action: none;
}

/* ─── Preview-mode toolbar (owner-only, /preview page) ─── */
.preview-toolbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.625rem 1rem;
  background: var(--color-ink);
  border-bottom: 1px solid var(--color-paper);
  font-family: var(--font-brand-mono);
}

.preview-toolbar__back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-brand-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-paper);
  text-decoration: none;
  transition: color 0.15s ease;
}

.preview-toolbar__back:hover {
  color: var(--color-paper);
  opacity: 0.75;
}

.preview-toolbar__label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-brand-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-paper);
}

.preview-toolbar__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-success-dot);
}

/* ─── Auth pages (sign-in, sign-up) — reuse the moment editor language ─── */
.me--auth {
  padding-top: 28px;
  padding-bottom: 56px;
  min-height: calc(100vh - 80px);
}

.me__form {
  display: block;
  margin-top: 8px;
}

.me--auth .me__actions {
  margin-top: 8px;
  margin-bottom: 0;
}

.me--auth .me__btn--primary {
  width: 100%;
}

/* When the auth form uses the home page brand CTA (.gm-btn .gm-btn--primary
   .home-hero__cta) instead of .me__btn, center it under the field column
   so the fixed-width pill reads as the closing action rather than a stray
   left-aligned button. */
.me--auth .me__actions--cta {
  justify-content: center;
  margin-top: 18px;
}

.me__alert {
  font-family: var(--font-brand-mono);
  font-size: 12px;
  line-height: 1.55;
  letter-spacing: 0.01em;
  color: var(--color-danger);
  border-left: 2px solid var(--color-danger);
  padding: 10px 0 10px 14px;
  margin-bottom: 22px;
}

.me__alert-list {
  margin: 0;
  padding: 0 0 0 16px;
  list-style: disc;
}

.me__auth-foot {
  margin: 28px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--me-hairline);
  font-family: var(--font-brand-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--me-ink);
  opacity: 0.7;
  text-align: center;
}

.me__auth-link {
  color: var(--me-ink);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: opacity 0.15s ease;
}
.me__auth-link:hover { opacity: 0.75; }

.me__check--terms {
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.5;
}
.me__check--terms .me__check-box {
  margin-top: 1px;
}
.me__check--terms .me__check-text {
  flex: 1;
}

/* ─── Account settings sections ─── */
.me__notice {
  font-family: var(--font-brand-mono);
  font-size: 12px;
  line-height: 1.55;
  letter-spacing: 0.01em;
  color: var(--color-success-text);
  border-left: 2px solid var(--color-success-dot);
  padding: 10px 0 10px 14px;
  margin-bottom: 22px;
}

.me__section {
  margin-top: 10px;
  padding-top: 28px;
  border-top: 1px solid var(--me-hairline);
}
.me__section:first-of-type {
  margin-top: 24px;
  padding-top: 0;
  border-top: 0;
}

.me__section-title {
  font-family: var(--font-brand-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--me-ink);
  opacity: 0.55;
  margin: 0 0 18px;
}

.me__section--danger .me__section-title {
  color: var(--color-danger);
  opacity: 1;
}

.me__danger-copy {
  font-family: var(--font-brand-mono);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: var(--me-ink);
  opacity: 0.7;
  margin: 0 0 18px;
}

/* ─── Guestbook list page (used by guestbook_entries#index) ─── */
.gb-section { font-family: var(--font-brand-body); background-color: var(--color-paper); }
.gb-divider { width: 48px; height: 1px; background-color: var(--color-warm-gray); opacity: 0.3; }
.gb-card { background: white; border: 1px solid var(--color-border); }
.gb-form-box { background: white; border: 1px solid var(--color-border); box-shadow: 0 4px 16px rgba(0,0,0,0.04); }
.gb-letterpress { text-shadow: 0 1px 0 rgba(255,255,255,0.5); }

/* ─── Inline template row (replaces .me__template-panel + choose_template link) ─── */
.me__templates {
  border-top: 1px solid var(--me-hairline);
  padding: 18px 0 24px;
}

.me__templates .me__kicker {
  margin-bottom: 12px;
}

.me__templates-host {
  display: contents;
}

.me__templates-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.me__templates-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-brand-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--me-ink);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}

.me__templates-host[data-overflows="true"]:not([data-scrolled="true"]) .me__templates-hint {
  opacity: 0.55;
  transform: translateX(0);
}

.me__templates-hint-arrow {
  display: inline-block;
  animation: meHintNudge 1.8s ease-in-out infinite;
}

@keyframes meHintNudge {
  0%, 60%, 100% { transform: translateX(0); }
  30%           { transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
  .me__templates-hint,
  .me__templates-hint-arrow {
    animation: none;
    transition: none;
  }
}

.me__templates-row {
  --fade-start: 0;
  --fade-end: 0;
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  margin: 0 -1.25rem;
  padding: 4px 1.25rem 8px;
  scroll-padding-inline: 1.25rem;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 calc(var(--fade-start) * 28px),
    #000 calc(100% - var(--fade-end) * 28px),
    transparent 100%
  );
          mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 calc(var(--fade-start) * 28px),
    #000 calc(100% - var(--fade-end) * 28px),
    transparent 100%
  );
  transition: -webkit-mask-image 0.2s ease, mask-image 0.2s ease;
}

.me__templates-row::-webkit-scrollbar { display: none; }

.me__template-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  margin: 0;
}

.me__template-thumb {
  flex: 0 0 auto;
  width: 96px;
  aspect-ratio: 2 / 3;
  scroll-snap-align: start;
  border-radius: 6px;
  overflow: hidden;
  border: 1.5px solid var(--me-hairline);
  background: #fff;
  cursor: pointer;
  padding: 0;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  display: block;
}

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

@media (hover: hover) {
  .me__template-thumb:hover {
    transform: translateY(-2px);
    border-color: var(--me-quiet-border);
  }
}

.me__template-thumb[aria-checked="true"] {
  border-color: var(--me-ink);
  box-shadow: 0 0 0 2px var(--me-ink);
}

.me__template-thumb-label {
  font-family: var(--font-brand-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--me-ink);
  opacity: 0.7;
}

.me__template-thumb[aria-checked="true"] + .me__template-thumb-label,
.me__template-item:has(.me__template-thumb[aria-checked="true"]) .me__template-thumb-label {
  opacity: 1;
  color: var(--me-ink);
}

/* ─── Card crossfade on template/intro swap (View Transitions API) ─── */
#moment-card-preview {
  view-transition-name: moment-card;
}

::view-transition-old(moment-card),
::view-transition-new(moment-card) {
  animation-duration: 220ms;
  animation-timing-function: cubic-bezier(0.2, 0.6, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(moment-card),
  ::view-transition-new(moment-card) {
    animation: none;
  }
}

:root {
  --color-warm-gray: #3a3632;
  --color-border: #e8e6e1;
  --color-accent: #1a1816;
}

.is-grayscale {
  filter: grayscale(100%) contrast(1.05);
}

html, body {
  overflow-x: hidden;
  overflow-x: clip;
  overscroll-behavior: none;
  min-height:100%;
}

body {
  /* overscroll-behavior-y: none; */
}

/* ─── Site Navigation ──────────────────────────────────────────── */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-paper);
  border-bottom: 1px solid var(--color-ink);
}

.site-nav-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: 44px;
  padding: 10px 1.25rem;
}

.site-nav__brand {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-decoration: none;
  color: var(--color-ink);
  display: flex;
  align-items: center;
}

.site-nav__brand-image {
  display: block;
  height: clamp(20px, 3.5vw, 28px);
  width: auto;
}

/* ─── Hamburger ─── */
.nav-hamburger {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  /* Pushes the hamburger to the right edge of the nav inner row. The
     wordmark is absolutely-positioned center, so nothing else competes
     for horizontal space on this row. */
  margin-left: auto;
  margin-right: -8px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

/* Two bars at slightly different widths — the shorter top bar reads as
   a deliberate editorial mark rather than a generic three-line icon. */
.nav-hamburger-bar {
  display: block;
  height: 2px;
  background: var(--color-ink);
  transition: transform 0.25s ease, opacity 0.25s ease, width 0.25s ease;
}

.nav-hamburger-bar:first-child { width: 16px; }
.nav-hamburger-bar:last-child  { width: 22px; }

.nav-hamburger:hover .nav-hamburger-bar:first-child { width: 22px; }

/* ─── Overlay ─── */
.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 8, 6, 0.35);
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.nav-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* ─── Drawer ───
   Slides in from the right; spine is the LEFT edge of the drawer when
   open. Hairline border + soft outboard shadow give that edge weight
   without a heavy frame. */
.nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(340px, 88vw);
  background: var(--color-paper);
  border-left: 1px solid var(--color-ink);
  box-shadow: -18px 0 40px -24px rgba(10, 8, 6, 0.25);
  z-index: 70;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  flex-direction: column;
}

.nav-drawer.is-open {
  transform: translateX(0);
}

.nav-drawer-open {
  overflow: hidden;
}

.nav-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 56px;
  padding: 0 1.25rem;
  border-bottom: 1px solid var(--color-ink);
  flex-shrink: 0;
}

.nav-drawer-eyebrow {
  font-family: var(--font-brand-mono);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-ink);
  opacity: 0.65;
}

.nav-drawer-close {
  background: none;
  border: none;
  cursor: pointer;
  width: 36px;
  height: 36px;
  margin-right: -8px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  transition: transform 0.25s ease;
}

.nav-drawer-close:hover { transform: rotate(90deg); }

.nav-drawer-close-bar {
  display: block;
  width: 18px;
  height: 1px;
  background: var(--color-ink);
  position: absolute;
}

.nav-drawer-close-bar:first-child { transform: rotate(45deg); }
.nav-drawer-close-bar:last-child  { transform: rotate(-45deg); }

/* ─── Drawer links ─── */
.nav-drawer-links {
  padding: 1.25rem 1.75rem 2rem;
  display: flex;
  flex-direction: column;
}

.nav-drawer-links form {
  margin: 0;
  padding: 0;
}

.nav-drawer-link,
.nav-drawer-btn {
  font-family: var(--font-brand-display);
  font-size: 1.75rem;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--color-ink);
  text-decoration: none;
  background: none;
  border: none;
  border-bottom: 1px solid var(--color-ink);
  padding: 1rem 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  transition: color 0.18s ease, transform 0.18s ease;
}

.nav-drawer-link:last-child,
.nav-drawer-links form:last-child .nav-drawer-btn { border-bottom: none; }

.nav-drawer-link__index {
  font-family: var(--font-brand-mono);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-ink);
  opacity: 0.4;
  /* Fixed column so labels align regardless of digit count. */
  flex-shrink: 0;
  width: 1.8em;
  transform: translateY(-0.2em);
  transition: opacity 0.18s ease, color 0.18s ease;
}

.nav-drawer-link__label {
  display: inline-block;
}

.nav-drawer-link:hover,
.nav-drawer-btn:hover {
  color: var(--color-ink-secondary);
  transform: translateX(6px);
}

.nav-drawer-link:hover .nav-drawer-link__index,
.nav-drawer-btn:hover .nav-drawer-link__index {
  opacity: 1;
  color: var(--color-ink-secondary);
}

@media (prefers-reduced-motion: reduce) {
  .nav-drawer,
  .nav-drawer-close,
  .nav-drawer-link,
  .nav-drawer-btn { transition: none; }
}

body {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Prevent iOS Safari from zooming on input focus — requires font-size >= 16px */
@media screen and (max-width: 768px) {
  input, textarea, select {
    font-size: 16px !important;
  }
}

/* ─── Card Section Design Standard ───────────────────────────────
   All announcement card sections must target:
   • Natural height: ~1100px at 600px max-width
   • Photo aspect-ratio: 4/5 (portrait)
   • Full-page min-height: 100svh
   • Preview at 0.32 scale = ~352px visible in /announcements/new picker
   ────────────────────────────────────────────────────────────────── */

/* ─── Shared announcement section layout ─── */
.moment-section-inner {
  max-width: 600px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

@media (min-width: 640px) {
  .moment-section-inner { padding: 0 1.5rem; }
}

.moment-message-text {
  font-style: italic;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--color-ink-secondary);
}
/* ── GradMoment brand system ── used by nav, footer, dividers, guestbook, gifting.
   Per-template card and message styles do NOT use these classes. ── */

/* Keyframes */
@keyframes gmSpin { to { transform: rotate(360deg); } }
@keyframes gmMarquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@keyframes gmMarqueeRev { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } }

/* Selection — brand-wide */
::selection { background: var(--color-sun); color: var(--color-ink); }

/* ── Wordmark lockup ─────────────────────────────────────────── */
.gm-wordmark {
  font-family: var(--font-brand-display);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--color-ink);
  text-decoration: none;
  white-space: nowrap;
  display: inline-block;
}

.gm-wordmark__moment {
  font-family: var(--font-brand-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
  text-transform: lowercase;
}

.gm-wordmark__period { color: var(--color-ink); }

/* ── Buttons (brand) ─────────────────────────────────────────────
   Chrome buttons are flat: solid fill, pill shape, no shadow, no
   translate. Hover/active darken or lighten subtly — never shift hue. */
.gm-btn {
  font-family: var(--font-brand-body);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
  padding: 12px 28px;
  border-radius: 999px;
  background: var(--color-ink);
  color: var(--color-paper);
  border: 1px solid var(--color-ink);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease, opacity .15s ease;
  -webkit-appearance: none;
  appearance: none;
}
.gm-btn:hover { background: var(--color-ink-secondary); border-color: var(--color-ink-secondary); color: var(--color-paper); }
.gm-btn:active { background: var(--color-ink); border-color: var(--color-ink); }

.gm-btn--primary { background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink); }
.gm-btn--primary:hover { background: var(--color-ink-secondary); border-color: var(--color-ink-secondary); }

.gm-btn--secondary {
  background: var(--color-paper);
  color: var(--color-ink);
  border-color: var(--color-ink);
}
.gm-btn--secondary:hover { background: var(--color-surface); color: var(--color-ink); border-color: var(--color-ink); }

.gm-btn--tertiary {
  background: var(--color-paper);
  color: var(--color-ink);
  border-color: var(--color-ink);
}
.gm-btn--tertiary:hover { background: var(--color-surface); color: var(--color-ink); border-color: var(--color-ink); }

/* Compact size — used inside the moment editor where chunky brand padding
   would dominate. Same flat language, smaller footprint. */
.gm-btn--sm {
  font-size: 13px;
  padding: 9px 18px;
}
.gm-btn--sm .gm-btn__arrow { width: 22px; margin-left: 0.4em; }

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

.gm-btn--ghost {
  background: transparent;
  color: var(--color-ink);
  border: none;
  border-radius: 0;
  padding: 12px 0;
  font-family: var(--font-brand-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.gm-btn--ghost:hover { background: transparent; color: var(--color-ink-secondary); border-color: transparent; }

/* Light variants for placements over a dark card (gifting). All flat ink. */
.gm-btn--on-paper {
  background: var(--color-ink);
  color: var(--color-paper);
  border-color: var(--color-ink);
}
.gm-btn--on-paper:hover { background: var(--color-ink-secondary); border-color: var(--color-ink-secondary); }

.gm-btn--on-ink-paper {
  background: var(--color-paper);
  color: var(--color-ink);
  border-color: var(--color-paper);
}
.gm-btn--on-ink-paper:hover { background: var(--color-surface); color: var(--color-ink); border-color: var(--color-surface); }

.gm-btn--on-ink-sun {
  background: var(--color-paper);
  color: var(--color-ink);
  border-color: var(--color-paper);
}
.gm-btn--on-ink-sun:hover { background: var(--color-surface); color: var(--color-ink); border-color: var(--color-surface); }

/* Squiggle arrow inside a .gm-btn — inherits the button's text color via
   currentColor on the SVG strokes, so it adapts to every button variant. */
.gm-btn__arrow {
  display: inline-block;
  vertical-align: middle;
  width: 28px;
  height: auto;
  margin-left: 0.5em;
  flex-shrink: 0;
}

/* ── Inputs ──────────────────────────────────────────────────── */
.gm-input {
  font-family: var(--font-brand-body);
  font-size: 15px;
  padding: 12px 0;
  background: transparent;
  color: var(--color-ink);
  border: none;
  border-bottom: 1px solid var(--color-divider);
  border-radius: 0;
  width: 100%;
  resize: vertical;
  outline: none;
  transition: border-color .15s ease;
}
.gm-input:focus {
  border-bottom-color: var(--color-ink);
}
.gm-input--dark {
  background: transparent;
  color: var(--color-paper);
  border-color: var(--color-paper);
  border-bottom-color: rgba(255, 255, 255, 0.3);
}
.gm-input--dark:focus { border-bottom-color: var(--color-paper); }
.gm-input::placeholder { color: var(--color-muted); opacity: 1; }

/* ── Chips ───────────────────────────────────────────────────── */
.gm-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid var(--color-ink);
  font-family: var(--font-brand-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--color-paper);
  color: var(--color-ink);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.gm-chip:hover { background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink); }
.gm-chip--cobalt { background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink); }
.gm-chip--sun    { background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink); }

/* ── Mono kicker ─────────────────────────────────────────────── */
.gm-kicker {
  font-family: var(--font-brand-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-label);
}
.gm-kicker--muted { color: var(--color-muted); }

/* ── Star glyph ──────────────────────────────────────────────── */
.gm-star { display: inline-block; flex-shrink: 0; vertical-align: middle; }

@media (prefers-reduced-motion: reduce) {
  .gm-btn, .gm-input, .gm-chip { transition: none; }
}
.gm-footer {
  background: var(--color-surface);
  margin-top: 80px;
  padding: 30px 1.25rem;
  text-align: center;
}

@media (min-width: 768px) {
  .gm-footer {
    margin-top: 120px;
    padding: 64px 1.25rem;
  }
}

/* Anchor the footer to the viewport bottom on short pages.
   body is a flex column exactly one small-viewport tall; main grows to
   fill remaining space and pushes its last child (.gm-footer, when
   present) down via margin-top: auto. svh is used (vs dvh) so the
   footer position doesn't jump when iOS Safari's URL bar collapses. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.gm-footer {
  margin-top: auto;
}

.gm-footer__credit {
  font-family: var(--font-brand-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
  text-decoration: none;
  transition: color 0.18s ease;
}

.gm-footer__credit:hover {
  color: var(--color-ink-secondary);
}

.gm-footer__legal {
  margin-top: 3px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  line-height: 1.6;
}

.gm-footer__legal-link {
  font-family: var(--font-brand-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
  text-decoration: none;
  transition: color 0.18s ease;
}

.gm-footer__legal-link:hover {
  color: var(--color-ink-secondary);
}

.gm-footer__legal-sep {
  font-family: var(--font-brand-mono);
  font-size: 10px;
  color: var(--color-muted);
}
/* ── Brand-controlled gifting section ── */

.gm-gifting {
  background: var(--color-paper);
  color: var(--color-ink);
  padding: clamp(48px, 8vw, 96px) 1.25rem;
  display: flex;
  justify-content: center;
}

.gm-gifting__inner {
  width: 100%;
  max-width: 880px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  text-align: center;
}

.gm-gifting__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.gm-gifting__heading {
  font-family: var(--moment-section-heading-font, var(--font-brand-display));
  font-weight: var(--moment-section-heading-weight, 900);
  font-size: clamp(1.25rem, 6vw, 2.25rem);
  line-height: 0.95;
  letter-spacing: var(--moment-section-heading-tracking, -0.025em);
  text-transform: var(--moment-section-heading-transform, uppercase);
  color: var(--color-ink);
  margin: 0;
}

.gm-gifting__heading-accent {
  position: relative;
  display: inline-block;
  z-index: 0;
  padding: 0 0.1em;
}

.gm-gifting__heading-accent::before {
  content: "";
  position: absolute;
  left: -0.05em;
  right: -0.05em;
  top: 18%;
  bottom: 6%;
  background: var(--color-surface);
  border-radius: 12px 6px 16px 8px / 50%;
  transform: rotate(-1.5deg);
  z-index: -1;
  opacity: 0.9;
}


.gm-gifting__buttons {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 5px;
}

@media (max-width: 480px) {
  .gm-gifting .gm-btn {
    padding: 10px 16px;
    font-size: 13px;
  }
  .gm-gifting .gm-btn__arrow {
    width: 22px;
    margin-left: 0.35em;
  }
}

.gm-gifting__empty {
  font-family: var(--font-brand-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink);
  opacity: 0.55;
  margin: 0;
}
/* ── Brand-controlled guestbook section ── */

.gm-guestbook {
  background: var(--color-paper);
  color: var(--color-ink);
  padding: clamp(48px, 8vw, 96px) 1.25rem;
  display: flex;
  justify-content: center;
}

.gm-guestbook__inner {
  width: 100%;
  max-width: 540px;
  padding: clamp(20px, 4vw, 32px);
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 4vw, 28px);
}

.gm-guestbook__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}

.gm-guestbook__heading {
  font-family: var(--moment-section-heading-font, var(--font-brand-display));
  font-weight: var(--moment-section-heading-weight, 900);
  font-size: clamp(1.25rem, 6vw, 2.25rem);
  line-height: 0.95;
  letter-spacing: var(--moment-section-heading-tracking, -0.01em);
  text-transform: var(--moment-section-heading-transform, uppercase);
  color: var(--color-ink);
  margin: 0;
}

.gm-guestbook__heading-accent {
  position: relative;
  display: inline-block;
  z-index: 0;
  padding: 0 0.1em;
}

.gm-guestbook__heading-accent::before {
  content: "";
  position: absolute;
  left: -0.05em;
  right: -0.05em;
  top: 18%;
  bottom: 6%;
  background: var(--color-surface);
  border-radius: 12px 6px 16px 8px / 50%;
  transform: rotate(-1.5deg);
  z-index: -1;
  opacity: 0.9;
}

.gm-guestbook__subtitle {
  font-family: var(--font-brand-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--color-ink);
  opacity: 0.6;
  margin: 0;
}

.gm-guestbook__card-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.gm-guestbook__action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.gm-guestbook__hint {
  font-family: var(--font-brand-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink);
  opacity: 0.6;
  margin: 0;
}

.gm-guestbook__error {
  font-family: var(--font-brand-body);
  font-size: 0.85rem;
  color: var(--color-danger);
  background: var(--color-surface);
  padding: 6px 10px;
  margin: 0;
  border: 1px solid var(--color-danger);
}

/* Sent confirmation */
.gm-guestbook__sent {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 220px;
  opacity: 0;
  transform: translateY(16px);
}

.gm-guestbook__sent.notecard-sent-animate {
  animation: gmGuestbookSentIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
}

.gm-guestbook__sent-inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.gm-guestbook__sent-heading {
  font-family: var(--font-brand-display);
  font-size: 2rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  margin: 0;
}

.gm-guestbook__sent-body {
  font-family: var(--font-brand-serif);
  font-style: italic;
  font-size: 1.0625rem;
  color: var(--color-ink);
  margin: 0;
}

@keyframes gmGuestbookSentIn {
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .gm-guestbook__sent.notecard-sent-animate {
    animation: none;
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Legacy classes — still referenced by templates' card/message CSS ── */

.guestbook-section {
  font-family: var(--font-brand-body);
  background-color: var(--color-paper);
}

.guestbook-entry-card {
  background: white;
  border: 1px solid var(--color-border);
  transition: box-shadow 0.2s ease;
}

.guestbook-entry-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.guestbook-divider {
  width: 48px;
  height: 1px;
  background-color: var(--color-ink);
  opacity: 0.3;
}

.guestbook-form {
  background: white;
  border: 1px solid var(--color-border);
}

.guestbook-letterpress {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

@keyframes gmPageTurn {
  0%   { transform: rotateY(0deg)    rotateX(0deg); }
  20%  { transform: rotateY(-30deg)  rotateX(-10deg); }
  55%  { transform: rotateY(-105deg) rotateX(-4deg); }
  100% { transform: rotateY(-186deg) rotateX(-1deg); }
}

/* ============================================================
   NOTECARD — brand-styled card. Used as the public send form,
   the graduate's guestbook entries view, and the admin preview.
   ============================================================ */

.notecard-scene {
  flex-shrink: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 42px 0 0;
}

.notecard {
  position: relative;
  width: 100%;
  max-width: 460px;
  background: var(--color-paper);
  color: var(--color-ink);
  border: 1px solid rgba(14, 14, 16, 0.06);
  border-radius: 18px;
  padding: clamp(22px, 5vw, 32px) clamp(20px, 5vw, 30px);
  display: flex;
  flex-direction: column;
  gap: 22px;
  box-sizing: border-box;
  overflow: visible;
  isolation: isolate;
  box-shadow:
    0 1px 2px rgba(14, 14, 16, 0.04),
    0 8px 24px rgba(14, 14, 16, 0.08),
    0 24px 48px rgba(14, 14, 16, 0.06);
}

.notecard--sun  { background: var(--color-sun); }
.notecard--rose { background: var(--color-rose); }

.notecard--admin { max-width: 100%; }

.notecard__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}

.notecard__label {
  font-family: var(--font-brand-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink);
  opacity: 0.55;
}

.notecard__label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.notecard__counter {
  font-family: var(--font-brand-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--color-ink);
  opacity: 0.45;
  font-variant-numeric: tabular-nums;
  transition: color 0.15s ease, opacity 0.15s ease;
}

.notecard__counter--warn {
  color: var(--color-danger);
  opacity: 1;
}

.notecard__rule {
  display: block;
  height: 1px;
  background: rgba(14, 14, 16, 0.12);
  margin-top: 4px;
}

.notecard__name {
  font-family: var(--font-brand-display);
  font-size: clamp(1.5rem, 5vw, 1.875rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  margin: 0;
  background: transparent;
  border: none;
  padding: 2px 0;
  outline: none;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
}

.notecard__name::placeholder {
  font-family: var(--font-brand-display);
  color: var(--color-ink);
  opacity: 0.3;
}

.notecard__message {
  font-family: var(--font-brand-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1rem, 3.5vw, 1.125rem);
  line-height: 1.45;
  color: var(--color-ink);
  margin: 0;
  background: transparent;
  border: none;
  resize: none;
  outline: none;
  width: 100%;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
}

.notecard__message::placeholder {
  font-family: var(--font-brand-serif);
  font-style: italic;
  color: var(--color-ink);
  opacity: 0.4;
}

.notecard__divider {
  height: 1px;
  background: rgba(14, 14, 16, 0.12);
  margin: 4px 0 0;
}

.notecard__signature {
  font-family: var(--font-brand-display);
  font-size: clamp(1.125rem, 4vw, 1.375rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  margin: 14px 0 0;
}

.notecard__field--sign { gap: 10px; }

.notecard__sign-pad {
  position: relative;
  width: 100%;
  height: 96px;
  border: 1.5px dashed rgba(14, 14, 16, 0.22);
  border-radius: 12px;
  background: rgba(14, 14, 16, 0.015);
  overflow: hidden;
}

.notecard__sign-canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: crosshair;
}

.notecard__sign-clear {
  position: absolute;
  top: 6px;
  right: 8px;
  background: transparent;
  border: none;
  padding: 2px 4px;
  font-family: var(--font-brand-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink);
  opacity: 0.45;
  cursor: pointer;
  transition: opacity 0.15s;
}

.notecard__sign-clear:hover { opacity: 1; }

.notecard__sign-hint {
  font-family: var(--font-brand-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink);
  opacity: 0.5;
}

/* Submit button — uses .gm-btn .gm-btn--primary for visuals; this scopes
   notecard-specific layout (sit centered under the divider). */
.notecard__submit {
  align-self: center;
  margin-top: 4px;
}

.notecard__submit:disabled,
.notecard__submit[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.notecard__submit:disabled:hover,
.notecard__submit[aria-disabled="true"]:hover {
  transform: none;
}

.notecard--locked .notecard__sign-canvas {
  pointer-events: none;
  cursor: default;
}

@media (max-width: 480px) {
  .notecard { max-width: 100%; padding: 22px 20px; gap: 18px; }
  .notecard__submit.gm-btn { padding: 10px 16px; font-size: 13px; }
  .notecard__submit .gm-btn__arrow { width: 22px; margin-left: 0.35em; }
}

/* Reset inline tilt while the card is being flown off-screen by the JS — the
   controller writes its own transform and our rotate() would conflict. */
.notecard.notecard-flying { transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  .notecard,
  .guestbook-entry-card {
    transition: none;
  }
  .notecard[style*="rotate"] { transform: none !important; }

  @keyframes gmPageTurn {
    0%, 100% { transform: none; }
  }
}

/* ============================================================
   GUESTBOOK ENTRIES — graduate's wall (index page)

   The graduate's signatures render as pages in an open book. One
   entry per page; prev/next nav, swipe, and arrow-keys turn pages.
   The .gb-page wrapper is the "desk" the book rests on.
   ============================================================ */

.gb-page {
  background: var(--color-surface);
  min-height: 100vh;
  color: var(--color-ink);
}

.gb-page-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 2.5rem) 5rem;
}

.gb-page-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-brand-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink);
  text-decoration: none;
  opacity: 0.7;
  margin-bottom: 2rem;
  transition: opacity 0.15s ease;
}

.gb-page-back:hover { opacity: 1; }

.gb-page-flash {
  background: var(--color-success-bg);
  border: 1px solid var(--color-success-text);
  font-family: var(--font-brand-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-success-text);
  padding: 0.75rem 1rem;
  margin-bottom: 2rem;
}

/* ── Page header — Anton title + Fraunces italic subtitle.
   Mirrors the .me__title pattern used elsewhere in the editor; the
   Caveat numeral inside the subtitle is the page's keepsake accent. ── */

.guestbook-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
}

.guestbook-title {
  font-family: var(--font-brand-display);
  font-weight: 400;
  font-size: clamp(28px, 7vw, 36px);
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--color-ink);
  margin: 0;
}

.guestbook-subtitle {
  font-family: var(--font-brand-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  line-height: 1.3;
  color: var(--color-label);
  margin: 0;
}

.guestbook-subtitle em {
  font-style: italic;
  font-weight: 500;
}

.guestbook-count-number {
  display: inline-block;
  font-family: var(--font-brand-script);
  font-style: normal;
  font-weight: 600;
  font-size: 1.5em;
  line-height: 0.9;
  letter-spacing: 0;
  color: var(--color-ink);
  padding: 0 0.05em;
  transform: translateY(0.05em);
}

/* ── The book ──
   An open volume sitting on the desk. The spread is a 2-column grid:
   left (verso) page bleeds past the .gb-page-inner padding so it
   reads as "going off the page"; the right (recto) page holds the
   active entry. Each pane stacks all entries absolutely on top of
   each other; the controller toggles data-visible. */

/* The book is offset to the LEFT by the width of the verso (left) page,
   so the recto (right) page sits inside .gb-page-inner's content area
   and the verso page extends off into the page padding / off-screen.
   --gb-verso-width is the single source of truth for the offset and the
   grid track — change it in one place. */
.guestbook-book {
  --gb-verso-width: clamp(7rem, 32vw, 18rem);

  position: relative;
  outline: none;
  margin-left: calc(-1 * var(--gb-verso-width));
}

.guestbook-book:focus-visible .guestbook-book__spread {
  box-shadow:
    0 0 0 2px var(--color-paper),
    0 0 0 4px var(--color-ink),
    0 22px 48px rgba(10, 10, 10, 0.14);
}

.guestbook-book__spread {
  position: relative;
  display: grid;
  /* Verso (left) takes a fixed-ish width; recto (right) fills the
     remainder — which, paired with the negative margin above, ends up
     exactly equal to .gb-page-inner's content width. */
  grid-template-columns: var(--gb-verso-width) 1fr;
  background: var(--color-surface-warm);
  border-radius: 6px;
  overflow: hidden;
  box-shadow:
    0 1px 1px rgba(10, 10, 10, 0.05),
    0 6px 18px rgba(10, 10, 10, 0.10),
    0 22px 48px rgba(10, 10, 10, 0.12);
  /* Faint vignette on both outer edges so the corners read as worn. */
  background-image:
    radial-gradient(120% 100% at 0% 50%,
      rgba(10, 10, 10, 0.05) 0,
      transparent 28%),
    radial-gradient(120% 100% at 100% 50%,
      rgba(10, 10, 10, 0.04) 0,
      transparent 28%);
  background-color: var(--color-surface-warm);
}

/* ── Spine / gutter ──
   A soft inner shadow that sits exactly over the verso/recto column
   boundary, reading as the binding of an open book. */
.guestbook-book__spine {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--gb-verso-width);
  width: 32px;
  transform: translateX(-50%);
  background: linear-gradient(
    to right,
    rgba(10, 10, 10, 0) 0%,
    rgba(10, 10, 10, 0.06) 25%,
    rgba(10, 10, 10, 0.22) 50%,
    rgba(10, 10, 10, 0.06) 75%,
    rgba(10, 10, 10, 0) 100%
  );
  pointer-events: none;
  z-index: 3;
}

/* ── Verso (left) page ──
   Decorative. Faded paper tint suggesting a page that's been turned.
   No entry content lives here; the right pane carries the narrative. */
.guestbook-book__pane--left {
  position: relative;
  background: rgba(10, 10, 10, 0.04);
  /* Subtle horizontal ruling so it reads as a journal page even when
     mostly off-screen — the lines disappear behind the spine gradient. */
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 31px,
    rgba(10, 10, 10, 0.05) 31px,
    rgba(10, 10, 10, 0.05) 32px
  );
  background-position: 0 64px;
  background-repeat: repeat;
  opacity: 0.85;
}

.guestbook-book__prev-name {
  /* Faint Caveat snippet near the bottom-right of the verso (closest
     to the spine), suggesting "this is where the previous signature
     would sit". JS leaves it blank when on the first entry. */
  position: absolute;
  right: clamp(16px, 2.5vw, 32px);
  bottom: clamp(40px, 5vw, 56px);
  max-width: 70%;
  font-family: var(--font-brand-script);
  font-weight: 600;
  font-size: clamp(1.25rem, 2.2vw, 1.625rem);
  line-height: 1;
  color: var(--color-ink);
  opacity: 0.32;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Recto (right) pane ──
   Holds all entry pages stacked absolutely. JS sets data-visible on
   the active one. JS also sets min-height to the tallest page. */
.guestbook-book__pane--right {
  position: relative;
  min-height: 360px;
}

/* ── A single page (one entry) ── */

.guestbook-book__page {
  /* Fill the pane completely so the signature + page number anchor to
     the bottom regardless of message length. */
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 4vw, 48px) clamp(24px, 4vw, 48px)
           clamp(48px, 5.5vw, 64px) clamp(28px, 4.5vw, 56px);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.guestbook-book__page[data-visible="true"] {
  opacity: 1;
  pointer-events: auto;
}

/* ── Page header — date + day of week, journal-style ── */

.guestbook-book__page-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-divider);
  margin-bottom: 22px;
}

.guestbook-book__page-date {
  font-family: var(--font-brand-mono);
  font-size: clamp(10px, 1vw, 12px);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-label);
  font-variant-numeric: tabular-nums;
}

/* ── The message ── */

.guestbook-book__page-message {
  flex: 1;
  font-family: var(--font-brand-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  line-height: 1.55;
  color: var(--color-ink);
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  hyphens: auto;
  text-align: center;
}

/* ── The signature ── */

.guestbook-book__page-signoff {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

.guestbook-book__page-signature {
  font-family: var(--font-brand-script);
  font-weight: 600;
  font-size: clamp(1.625rem, 3vw, 2.125rem);
  line-height: 1;
  letter-spacing: 0.005em;
  color: var(--color-ink);
  text-shadow: 0 0.5px 0 rgba(10, 10, 10, 0.04);
  word-break: break-word;
}

/* ── Remove control — quiet, only on the visible right page on hover ── */

.guestbook-book__page-remove-form { margin: 0; }

.guestbook-book__page-remove {
  position: absolute;
  top: 14px;
  right: 14px;
  background: none;
  border: none;
  padding: 4px 8px;
  cursor: pointer;
  font-family: var(--font-brand-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
  opacity: 0;
  transition: color 0.15s ease, opacity 0.15s ease;
}

.guestbook-book__page[data-visible="true"]:hover .guestbook-book__page-remove,
.guestbook-book__page-remove:focus-visible {
  opacity: 1;
}

.guestbook-book__page-remove:hover { color: var(--color-danger); }

@media (hover: none) {
  .guestbook-book__page[data-visible="true"] .guestbook-book__page-remove {
    opacity: 0.55;
  }
}

/* ── Navigation row ── */

.guestbook-book__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: clamp(1.5rem, 3vw, 2rem);
}

.guestbook-book__nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--color-paper);
  border: 1px solid var(--color-divider);
  border-radius: 999px;
  cursor: pointer;
  color: var(--color-ink);
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.guestbook-book__nav-btn:hover:not(:disabled) {
  border-color: var(--color-ink);
}

.guestbook-book__nav-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.guestbook-book__counter {
  font-family: var(--font-brand-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-label);
  min-width: 5ch;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.guestbook-book__counter-sep {
  margin: 0 4px;
  color: var(--color-muted);
}

/* ── Empty state — just text, no book ── */

.guestbook-empty {
  padding: clamp(3rem, 8vw, 5rem) 1rem;
  text-align: center;
}

.guestbook-empty-message {
  font-family: var(--font-brand-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.125rem, 2vw, 1.25rem);
  line-height: 1.5;
  color: var(--color-label);
  margin: 0 auto;
  max-width: 38ch;
}

/* ── Narrow viewports ──
   On phones the verso bleed gets cramped — pull the prev-name closer
   to the spine and tighten the verso tint so it doesn't crowd the
   active page. */
@media (max-width: 639px) {
  .guestbook-book {
    --gb-verso-width: clamp(4rem, 22vw, 8rem);
  }
  .guestbook-book__prev-name {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .guestbook-book__page {
    transition: opacity 0.15s ease;
  }
}
/* ─── iPhone Mockup ─────────────────────────────────────────────
   Pure-CSS phone frame for marketing pages. Pass any moment-shaped
   object into the partial; the embedded template card renders inside
   the screen area. Variables defined on the element so the component
   works wherever it's dropped.
   ─────────────────────────────────────────────────────────────── */

.iphone-mockup {
  --ipm-bezel:        #1a1a1c;
  --ipm-bezel-inner:  #2a2a2c;
  --ipm-screen-bg:    #ffffff;
  --ipm-statusbar-fg: #000000;
  --ipm-button:       #2a2a2c;

  position: relative;
  width: 100%;
  max-width: clamp(280px, 38vw, 380px);
  aspect-ratio: 9 / 19.5;
  margin: 0 auto;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.18));
}

/* ─── Confetti burst — canvas cannon, matches the public-moment intro ─── */
/* Animated by iphone_confetti_controller.js. Sized larger than the phone
   so pieces have room to fly before being clipped. */
.iphone-mockup__confetti {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 170%;
  height: 120%;
  transform: translate(-50%, -50%);
  display: none;
  background: transparent;
  pointer-events: none;
  z-index: 5;
}

.iphone-mockup__frame {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--ipm-bezel);
  border-radius: 14% / 6.5%;
  padding: 2.6%;
  box-sizing: border-box;
  box-shadow:
    inset 0 0 0 2px var(--ipm-bezel-inner),
    inset 0 0 0 4px #0a0a0c;
}

.iphone-mockup__screen {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--ipm-screen-bg);
  border-radius: 11% / 5.2%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.iphone-mockup__notch {
  position: absolute;
  top: 1.4%;
  left: 50%;
  transform: translateX(-50%);
  width: 30%;
  height: 4.2%;
  background: #000;
  border-radius: 999px;
  z-index: 2;
}

.iphone-mockup__statusbar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.6% 8% 0.8%;
  font-family: var(--font-brand-mono), ui-monospace, monospace;
  font-size: clamp(8px, 1.05vw, 11px);
  font-weight: 600;
  color: var(--ipm-statusbar-fg);
  flex-shrink: 0;
}

.iphone-mockup__time {
  letter-spacing: 0.02em;
}

.iphone-mockup__icons {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
}

.iphone-mockup__icons svg {
  display: block;
  height: 1em;
  width: auto;
}

.iphone-mockup__viewport {
  position: relative;
  flex: 1;
  width: 100%;
  overflow: hidden;
}

/* The card image renders with the template's natural aspect ratio and
   width 100%. Inside the phone screen the image fills width; the bottom
   is clipped by the viewport's overflow:hidden, which gives the
   "scrolled-near-the-top" effect from the reference. */
.iphone-mockup__viewport > * {
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.iphone-mockup__card-image {
  display: block;
  width: 100%;
  height: auto;
}

/* Tighten the message section inside the small mockup viewport so the
   oversized open quote doesn't dwarf the body text. */
.iphone-mockup__viewport .gm-msg {
  padding: 1rem 1rem 1.25rem;
}

.iphone-mockup__viewport .gm-msg__quote {
  font-size: clamp(2.25rem, 16%, 3.5rem);
  line-height: 0.6;
}

.iphone-mockup__viewport .gm-msg__body {
  font-size: clamp(0.7rem, 3.6%, 0.95rem);
  line-height: 1.4;
  margin-top: -0.25rem;
  margin-bottom: 4px;
}

/* ─── Side buttons (cosmetic) ─── */
.iphone-mockup__btn {
  position: absolute;
  background: var(--ipm-button);
  border-radius: 2px;
  pointer-events: none;
}

.iphone-mockup__btn--silence {
  left: -0.4%;
  top: 14%;
  width: 0.8%;
  height: 3.2%;
}

.iphone-mockup__btn--volup {
  left: -0.4%;
  top: 20%;
  width: 0.8%;
  height: 6.5%;
}

.iphone-mockup__btn--voldown {
  left: -0.4%;
  top: 28%;
  width: 0.8%;
  height: 6.5%;
}

.iphone-mockup__btn--power {
  right: -0.4%;
  top: 22%;
  width: 0.8%;
  height: 9%;
}
/* ── Brand-controlled message section (shared across templates) ──
   Matches the guestbook + gifting brand pattern: mono kicker, display
   heading with italic Fraunces accent, then the message body in
   Fraunces italic. No per-template overrides. */

.gm-msg {
  background: #ffffff;
  color: var(--color-ink);
  padding: clamp(48px, 8vw, 96px) 1.25rem;
  display: flex;
  justify-content: center;
}

[data-template] .gm-msg { background: #ffffff; }

.gm-msg__inner {
  width: 100%;
  max-width: 880px;
  display: flex;
  flex-direction: column;
}

.gm-msg__quote {
  display: block;
  font-family: var(--font-brand-display);
  font-size: clamp(5rem, 14vw, 9rem);
  line-height: 0.7;
  letter-spacing: -0.04em;
  color: var(--color-ink);
}

.gm-msg__quote--open  { text-align: left; }
.gm-msg__quote--close { text-align: right; }

.gm-msg__body {
  font-family: var(--font-brand-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.15rem, 2.6vw, 1.5rem);
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: var(--color-ink);
  margin: 0 0 12px;
  text-align: left;
}
/* ─── Phone Fan ─────────────────────────────────────────────────
   Five overlapping iPhone-style frames stacked behind a frontmost
   center phone. All phones are upright — flanking phones scale down
   and step back so the eye lands cleanly on the middle, like cards
   layered in a deck rather than splayed in a hand. Each phone's
   screen is a pre-rendered screenshot of /mockups/:view_key. Static
   images keep the hero light; regenerate them from the mockup route
   when a template changes.
   ─────────────────────────────────────────────────────────────── */

.phone-fan {
  --pf-phone-w: clamp(140px, 22vw, 260px);
  /* Negative margin pulls each phone inward so its neighbor partially
     hides behind it. Resolved against --pf-phone-w directly because
     margin-% would resolve against the parent. */
  --pf-overlap: calc(var(--pf-phone-w) * -0.22);

  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: clamp(2rem, 4vw, 3.5rem) 0 0;
  isolation: isolate;
}

.phone-fan__phone {
  flex: 0 0 auto;
  position: relative;
  width: var(--pf-phone-w);
  aspect-ratio: 9 / 19.5;
  margin: 0 var(--pf-overlap);
  /* Anchor scaling at the bottom-center so every phone sits on the
     same baseline as it shrinks — depth comes from size, not from
     phones sliding down the page. */
  transform-origin: 50% 100%;
  will-change: transform;
}

/* Frontmost center, then two rings stepping back in size + a hair
   upward to read as receding depth. Scale steps: 1.0 → 0.85 → 0.72.
   Only the center phone carries a real drop-shadow — applying shadows
   to all five would compound under the fan and read as a continuous
   dark band that visually boxes the hero off from the section below. */
.phone-fan__phone--center {
  z-index: 5;
  filter: drop-shadow(0 16px 28px rgba(14, 14, 16, 0.16))
          drop-shadow(0 4px 8px rgba(14, 14, 16, 0.10));
}
.phone-fan__phone--inner-left,
.phone-fan__phone--inner-right { z-index: 4; transform: translateY(-2%) scale(0.85); }
.phone-fan__phone--outer-left,
.phone-fan__phone--outer-right { z-index: 3; transform: translateY(-5%) scale(0.72); }

.phone-fan__frame {
  position: relative;
  width: 100%;
  height: 100%;
  background: #1a1a1c;
  border-radius: 14% / 6.5%;
  padding: 2.6%;
  box-sizing: border-box;
  box-shadow:
    inset 0 0 0 2px #2a2a2c,
    inset 0 0 0 4px #0a0a0c;
}

.phone-fan__notch {
  position: absolute;
  top: 1.4%;
  left: 50%;
  transform: translateX(-50%);
  width: 30%;
  height: 4.2%;
  background: #000;
  border-radius: 999px;
  z-index: 2;
}

/* Screen holds the template preview image, clipped to the rounded
   inner-screen radius so the corners match a real phone. */
.phone-fan__screen {
  position: relative;
  width: 100%;
  height: 100%;
  background: #ffffff;
  border-radius: 11% / 5.2%;
  overflow: hidden;
}

.phone-fan__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  /* Decorative — the fan is aria-hidden. */
  pointer-events: none;
}
.moment-signoff-section {
  margin-top: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: transparent;
}

.moment-signoff-thanks {
  font-family: var(--font-brand-serif);
  /* font-style: italic; */
  font-weight: 400;
  font-size: clamp(1.125rem, 2.4vw, 1.25rem);
  line-height: 1.4;
  color: var(--color-ink);
  max-width: 480px;
  margin: 0 auto;
}

.moment-signoff-signature {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.moment-signoff-intro {
  font-family: var(--font-brand-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1rem, 2vw, 1.125rem);
  line-height: 1.4;
  margin: 0 0 10px;
}

.moment-signoff-name {
  font-family: var(--font-brand-script);
  font-weight: 600;
  font-size: clamp(2.25rem, 5.5vw, 3.25rem);
  line-height: 1;
  color: var(--color-ink);
  margin-bottom: 50px;
}

@media (min-width: 768px) {
  .moment-signoff-section {
    padding: 96px 1.25rem;
  }
}

@media (min-width: 1024px) {
  .moment-signoff-section {
    padding: 120px 1.25rem;
  }
}
/* ── Brand divider (marquee) — between sections on every grad page ── */

.gm-divider {
  position: relative;
  width: 100%;
  background: var(--moment-divider-bg, var(--color-ink));
  color: var(--moment-divider-color, var(--color-paper));
  border-top: var(--moment-divider-border-width, 1px) solid var(--moment-divider-border-color, var(--color-ink));
  border-bottom: var(--moment-divider-border-width, 1px) solid var(--moment-divider-border-color, var(--color-ink));
  /* Padding-based height so the bar is just tall enough to give the text
     comfortable breathing room. Anchors text to the bar instead of
     floating it in a tall band. */
  padding: 9px 0;
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* Edge fades — overlay strips that blend the marquee into the page
   background. Done with pseudo-elements instead of `mask-image` so we
   don't force the bar into a separate compositing layer (which produced
   a visible halo against the GPU-accelerated animated track). Call sites
   can set --moment-divider-fade to match the surrounding background. */
.gm-divider::before,
.gm-divider::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 8%;
  pointer-events: none;
  z-index: 2;
}

.gm-divider__track {
  display: flex;
  width: max-content;
  /* Default cadence for mobile — desktop overridden below. */
  animation: gmMarquee 50s linear infinite;
  /* GPU layer hints — keep sub-pixel rendering crisp during scroll. */
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.gm-divider__row {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  padding-right: 22px;
  flex-shrink: 0;
}

.gm-divider__phrase {
  font-family: var(--moment-divider-font, var(--font-brand-mono));
  font-weight: var(--moment-divider-weight, 600);
  font-size: 13px;
  line-height: 1;
  letter-spacing: var(--moment-divider-tracking, 0.06em);
  text-transform: uppercase;
  white-space: nowrap;
}

/* Stars now sized to match cap-height, vertically anchored on the
   text's optical center. Uppercase mono sits slightly above the
   line-box center, so a tiny upward nudge lines the star up with
   the cap-height middle. */
.gm-divider .gm-star {
  flex-shrink: 0;
  transform: translateY(-1px);
}

@media (min-width: 768px) {
  .gm-divider { padding: 10px 0; }
  .gm-divider__track { animation-duration: 40s; }
  .gm-divider__phrase { font-size: 14px; letter-spacing: 0.05em; }
  .gm-divider__row { gap: 26px; padding-right: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .gm-divider__track { animation: none; }
}

/* ── Legacy ticker class kept for any unrelated usages.
   Only `.ticker-divider` callers outside the public moment use this. ── */
.ticker-divider {
  width: 100%;
  background: var(--color-ink);
  color: var(--color-paper);
  overflow: hidden;
  border-top: 1px solid var(--color-ink);
  border-bottom: 1px solid var(--color-ink);
}

.ticker-track { display: flex; overflow: hidden; padding: 0.75rem 0; }

.ticker-inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  white-space: nowrap;
  animation: gmMarquee 50s linear infinite;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  font-family: var(--font-brand-mono);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ticker-sep {
  font-size: 1rem;
  color: var(--color-paper);
  opacity: 0.6;
}

@media (prefers-reduced-motion: reduce) {
  .ticker-inner { animation: none; }
}
/* ── Brand wavy divider ── */

.gm-wavy {
  color: var(--color-ink);
  padding: clamp(8px, 2vw, 24px) 0;
  display: block;
  line-height: 0;
}

.gm-wavy__svg {
  display: block;
  width: 100%;
  height: clamp(28px, 4vw, 44px);
  overflow: visible;
}
/* ── Arrival intro — confetti fires on landing, name fades up through it ── */

.gm-intro--arrival {
  --arr-bg:     var(--color-paper);
  --arr-fg:     var(--color-ink);
  --arr-accent: var(--color-rose);
  background:
    radial-gradient(circle at 22% 18%, color-mix(in srgb, var(--color-sun) 35%, transparent) 0%, transparent 38%),
    radial-gradient(circle at 78% 82%, color-mix(in srgb, var(--color-rose) 28%, transparent) 0%, transparent 42%),
    var(--arr-bg);
  color: var(--arr-fg);
}

.gm-intro--arrival .gm-arrival__confetti {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.gm-intro--arrival .gm-arrival__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 2rem;
  text-align: center;
}

.gm-intro--arrival .gm-arrival__eyebrow {
  margin: 0 0 1.2rem;
  font-family: var(--font-brand-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--arr-fg) 55%, transparent);
  opacity: 0;
  animation: gmArrFadeUp 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}

.gm-intro--arrival .gm-arrival__name {
  margin: 0;
  font-family: var(--font-brand-display);
  font-size: clamp(3.2rem, 13vw, 7.5rem);
  line-height: 0.95;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  opacity: 0;
  animation: gmArrPop 0.75s cubic-bezier(0.22, 1.4, 0.36, 1) 0.35s both;
}

.gm-intro--arrival .gm-arrival__name::after {
  content: "";
  display: block;
  width: 38%;
  height: 6px;
  margin: 0.65rem auto 0;
  background: var(--arr-accent);
  border-radius: 999px;
  transform-origin: center;
  opacity: 0;
  animation: gmArrUnderline 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.85s both;
}

.gm-intro--arrival .gm-arrival__classof {
  margin: 1.25rem 0 0;
  font-family: var(--font-brand-serif);
  font-style: italic;
  font-size: clamp(1.1rem, 4vw, 1.7rem);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--arr-fg) 78%, transparent);
  opacity: 0;
  animation: gmArrFadeUp 0.55s ease 1.05s both;
}

.gm-intro--arrival .gm-arrival__btn {
  margin-top: 2.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.95rem 1.6rem;
  font-family: var(--font-brand-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--arr-bg);
  background: var(--arr-fg);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  opacity: 0;
  transform: translateY(8px);
  animation: gmArrFadeUp 0.5s ease 1.35s both;
  transition: transform 0.25s ease, background 0.25s ease;
}

.gm-intro--arrival .gm-arrival__btn:hover,
.gm-intro--arrival .gm-arrival__btn:focus-visible {
  transform: translateY(-2px);
  background: var(--arr-accent);
  color: var(--arr-bg);
}

@keyframes gmArrFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes gmArrPop {
  0%   { opacity: 0; transform: translateY(40px) scale(0.94); }
  60%  { opacity: 1; transform: translateY(-4px) scale(1.02); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes gmArrUnderline {
  from { opacity: 0; transform: scaleX(0); }
  to   { opacity: 1; transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .gm-intro--arrival .gm-arrival__confetti { display: none; }
  .gm-intro--arrival .gm-arrival__eyebrow,
  .gm-intro--arrival .gm-arrival__name,
  .gm-intro--arrival .gm-arrival__name::after,
  .gm-intro--arrival .gm-arrival__classof,
  .gm-intro--arrival .gm-arrival__btn {
    animation: gmFadeIn 0.4s ease both !important;
    transform: none !important;
  }
}
/* ── Intro overlay base — shared structure for all intro variants ── */

.gm-intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  background: #ffffff;
  color-scheme: light;
}

@keyframes gmFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* ── Drop intro variant — CSS-animated confetti drop ── */

.gm-intro--drop {
  --drop-bg: var(--color-paper);
  --drop-fg: var(--color-ink);
  background: var(--drop-bg);
}

.gm-intro--drop .gm-drop__confetti {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.gm-intro--drop .gm-drop__piece {
  transform-box: fill-box;
  transform-origin: center;
  animation: gmDropFall 4s linear infinite;
  opacity: 0.95;
}

.gm-intro--drop .gm-drop__piece:nth-child(1)  { fill: #FFD700; animation-delay: 0.0s; animation-duration: 3.6s; }
.gm-intro--drop .gm-drop__piece:nth-child(2)  { fill: #FF4081; animation-delay: 0.4s; animation-duration: 4.2s; }
.gm-intro--drop .gm-drop__piece:nth-child(3)  { fill: #7C4DFF; animation-delay: 0.8s; animation-duration: 3.9s; }
.gm-intro--drop .gm-drop__piece:nth-child(4)  { fill: #00E5FF; animation-delay: 0.2s; animation-duration: 4.5s; }
.gm-intro--drop .gm-drop__piece:nth-child(5)  { fill: #69F0AE; animation-delay: 1.1s; animation-duration: 3.7s; }
.gm-intro--drop .gm-drop__piece:nth-child(6)  { fill: #FF6B6B; animation-delay: 0.6s; animation-duration: 4.0s; }
.gm-intro--drop .gm-drop__piece:nth-child(7)  { fill: #FFCA28; animation-delay: 1.4s; animation-duration: 4.3s; }
.gm-intro--drop .gm-drop__piece:nth-child(8)  { fill: #E91E63; animation-delay: 0.3s; animation-duration: 3.8s; }
.gm-intro--drop .gm-drop__piece:nth-child(9)  { fill: #00BCD4; animation-delay: 0.9s; animation-duration: 4.1s; }
.gm-intro--drop .gm-drop__piece:nth-child(10) { fill: #76FF03; animation-delay: 1.7s; animation-duration: 3.5s; }
.gm-intro--drop .gm-drop__piece:nth-child(11) { fill: #FF9100; animation-delay: 0.5s; animation-duration: 4.4s; }
.gm-intro--drop .gm-drop__piece:nth-child(12) { fill: #B388FF; animation-delay: 1.2s; animation-duration: 3.9s; }
.gm-intro--drop .gm-drop__piece:nth-child(13) { fill: #FFAB00; animation-delay: 2.0s; animation-duration: 4.0s; }
.gm-intro--drop .gm-drop__piece:nth-child(14) { fill: #18FFFF; animation-delay: 1.6s; animation-duration: 4.2s; }

.gm-intro--drop .gm-drop__inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 2rem;
  text-align: center;
  color: var(--drop-fg);
}

.gm-intro--drop .gm-drop__name {
  margin: 0;
  font-family: var(--font-brand-display);
  font-size: clamp(3rem, 12vw, 6rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  opacity: 0;
  animation: gmDropFadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}

.gm-intro--drop .gm-drop__classof {
  margin: 0.5rem 0 0;
  font-family: var(--font-brand-mono);
  font-size: clamp(0.85rem, 3vw, 1.1rem);
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  opacity: 0;
  animation: gmDropFadeUp 0.7s ease 0.7s both;
}

.gm-intro--drop .gm-drop__btn {
  margin-top: 2.5rem;
  padding: 0.9rem 1.5rem;
  font-family: var(--font-brand-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--drop-fg);
  background: transparent;
  border: 1px solid var(--drop-fg);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  opacity: 0;
  animation: gmDropFadeUp 0.5s ease 1.2s both;
}

.gm-intro--drop .gm-drop__btn:hover,
.gm-intro--drop .gm-drop__btn:focus-visible {
  color: var(--drop-bg);
  background: var(--drop-fg);
}

@keyframes gmDropFall {
  0%   { transform: translateY(0) rotate(0deg);     opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateY(120vh) rotate(540deg); opacity: 0.4; }
}

@keyframes gmDropFadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .gm-intro--drop .gm-drop__piece    { animation: none !important; opacity: 0; }
  .gm-intro--drop .gm-drop__name,
  .gm-intro--drop .gm-drop__classof,
  .gm-intro--drop .gm-drop__btn      { animation: gmFadeIn 0.4s ease both !important; }
}
/* ── Marquee intro variant ── */

.gm-intro--marquee {
  --mq-bg:       var(--color-paper);
  --mq-band-bg:  var(--color-ink);
  --mq-band-fg:  var(--color-sun);
  --mq-fg:       var(--color-ink);
  background: var(--mq-bg);
}

.gm-intro--marquee .gm-mq__band {
  position: absolute;
  top: 18%;
  left: 0;
  right: 0;
  height: clamp(48px, 9vh, 84px);
  background: var(--mq-band-bg);
  overflow: hidden;
  display: flex;
  align-items: center;
  opacity: 0;
  animation: gmMqBandIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

.gm-intro--marquee .gm-mq__scroll {
  display: flex;
  width: max-content;
  animation: gmMqScroll 18s linear infinite;
  will-change: transform;
}

.gm-intro--marquee .gm-mq__scroll-track {
  display: inline-block;
  white-space: nowrap;
  padding-right: 1.5rem;
  color: var(--mq-band-fg);
  font-family: var(--font-brand-mono);
  font-weight: 700;
  font-size: clamp(1.4rem, 4.5vw, 2.4rem);
  letter-spacing: 0.18em;
  line-height: 1;
}

.gm-intro--marquee .gm-mq__inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding-top: 12vh;
  color: var(--mq-fg);
  text-align: center;
}

.gm-intro--marquee .gm-mq__classof {
  margin: 0;
  font-family: var(--font-brand-display);
  font-style: italic;
  font-size: clamp(2rem, 7vw, 3.5rem);
  letter-spacing: -0.01em;
  opacity: 0;
  animation: gmMqRise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both;
}

.gm-intro--marquee .gm-mq__year {
  margin: 0;
  font-family: var(--font-brand-display);
  font-size: clamp(4.5rem, 18vw, 9rem);
  line-height: 1;
  letter-spacing: -0.04em;
  opacity: 0;
  animation: gmMqRise 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.75s both;
}

.gm-intro--marquee .gm-mq__btn {
  margin-top: 2.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.9rem 1.5rem;
  font-family: var(--font-brand-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--mq-fg);
  background: transparent;
  border: 1px solid var(--mq-fg);
  border-radius: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  opacity: 0;
  animation: gmMqRise 0.5s ease 1.2s both;
}

.gm-intro--marquee .gm-mq__btn:hover,
.gm-intro--marquee .gm-mq__btn:focus-visible {
  color: var(--mq-bg);
  background: var(--mq-fg);
}

@keyframes gmMqScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes gmMqBandIn {
  from { opacity: 0; transform: scaleY(0.2); }
  to   { opacity: 1; transform: scaleY(1); }
}

@keyframes gmMqRise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .gm-intro--marquee .gm-mq__scroll       { animation: none !important; }
  .gm-intro--marquee .gm-mq__band,
  .gm-intro--marquee .gm-mq__classof,
  .gm-intro--marquee .gm-mq__year,
  .gm-intro--marquee .gm-mq__btn          { animation: gmFadeIn 0.4s ease both !important; }
}
/* ── Signature intro — handwritten name reveal on parchment ── */

.gm-intro--signature {
  --sig-paper:  #f6efe1;
  --sig-ink:    var(--color-ink);
  --sig-accent: var(--color-cobalt);
  --sig-stamp:  color-mix(in srgb, var(--color-rose) 70%, var(--color-ink));
  color: var(--sig-ink);
  background: var(--sig-paper);
}

.gm-intro--signature .gm-sig__paper {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 10% 12%, rgba(0,0,0,0.045) 0.6px, transparent 1.4px),
    radial-gradient(circle at 78% 64%, rgba(0,0,0,0.04) 0.5px, transparent 1.3px),
    radial-gradient(circle at 42% 88%, rgba(0,0,0,0.05) 0.6px, transparent 1.4px),
    radial-gradient(ellipse at 50% 50%, transparent 35%, rgba(80,55,30,0.08) 100%);
  background-size: 220px 220px, 190px 190px, 240px 240px, 100% 100%;
  pointer-events: none;
}

.gm-intro--signature .gm-sig__postmark {
  position: absolute;
  top: clamp(1.25rem, 4vh, 2.5rem);
  right: clamp(1rem, 5vw, 3rem);
  width: 130px;
  height: 130px;
  border: 2.5px solid var(--sig-stamp);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  font-family: var(--font-brand-mono);
  color: var(--sig-stamp);
  transform: rotate(-12deg);
  opacity: 0;
  animation: gmSigStamp 0.45s cubic-bezier(0.22, 1.5, 0.36, 1) 1.85s both;
  user-select: none;
  pointer-events: none;
}

.gm-intro--signature .gm-sig__postmark::before,
.gm-intro--signature .gm-sig__postmark::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  height: 2px;
  background: var(--sig-stamp);
}

.gm-intro--signature .gm-sig__postmark::before { top: 22%; }
.gm-intro--signature .gm-sig__postmark::after  { bottom: 22%; }

.gm-intro--signature .gm-sig__postmark-top,
.gm-intro--signature .gm-sig__postmark-bot {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.gm-intro--signature .gm-sig__postmark-mid {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.gm-intro--signature .gm-sig__inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
}

.gm-intro--signature .gm-sig__eyebrow {
  margin: 0 0 1.5rem;
  font-family: var(--font-brand-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1rem, 3vw, 1.3rem);
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--sig-ink) 60%, transparent);
  opacity: 0;
  animation: gmSigFadeIn 0.6s ease 0.2s both;
}

.gm-intro--signature .gm-sig__name-wrap {
  position: relative;
  display: inline-block;
  padding-bottom: 0.4rem;
}

.gm-intro--signature .gm-sig__name {
  margin: 0;
  font-family: "Permanent Marker", cursive;
  font-weight: 400;
  font-size: clamp(3.5rem, 14vw, 8rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  color: var(--sig-accent);
  white-space: nowrap;
  clip-path: inset(0 100% 0 0);
  animation: gmSigInk 1.6s cubic-bezier(0.65, 0, 0.4, 1) 0.55s both;
  transform: rotate(-2deg);
  text-shadow: 0 1px 0 rgba(0,0,0,0.06);
}

.gm-intro--signature .gm-sig__flourish {
  display: block;
  width: 86%;
  margin: 0.25rem auto 0;
  color: var(--sig-accent);
}

.gm-intro--signature .gm-sig__flourish path {
  stroke-dasharray: 480;
  stroke-dashoffset: 480;
  animation: gmSigDraw 1.1s cubic-bezier(0.6, 0, 0.4, 1) 1.7s forwards;
}

.gm-intro--signature .gm-sig__flourish path + path {
  animation-delay: 2.25s;
  animation-duration: 0.6s;
}

.gm-intro--signature .gm-sig__classof {
  margin: 1.8rem 0 0;
  font-family: var(--font-brand-display);
  font-size: clamp(1.1rem, 4vw, 1.7rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sig-ink);
  opacity: 0;
  animation: gmSigFadeIn 0.6s ease 2.5s both;
}

.gm-intro--signature .gm-sig__year {
  display: inline-block;
  font-weight: 800;
  margin-left: 0.4em;
  color: var(--sig-accent);
}

.gm-intro--signature .gm-sig__btn {
  margin-top: 2rem;
  padding: 0.95rem 1.7rem;
  font-family: var(--font-brand-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--sig-paper);
  background: var(--sig-ink);
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  opacity: 0;
  animation: gmSigFadeIn 0.5s ease 2.85s both;
  transition: transform 0.2s ease, background 0.2s ease;
}

.gm-intro--signature .gm-sig__btn:hover,
.gm-intro--signature .gm-sig__btn:focus-visible {
  background: var(--sig-accent);
  transform: translateY(-2px);
}

@keyframes gmSigFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes gmSigInk {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

@keyframes gmSigDraw {
  to { stroke-dashoffset: 0; }
}

@keyframes gmSigStamp {
  0%   { opacity: 0; transform: rotate(-12deg) scale(2.2); }
  60%  { opacity: 1; transform: rotate(-12deg) scale(0.92); }
  100% { opacity: 0.88; transform: rotate(-12deg) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .gm-intro--signature .gm-sig__name { clip-path: none !important; animation: gmFadeIn 0.4s ease both !important; }
  .gm-intro--signature .gm-sig__flourish path { stroke-dashoffset: 0; animation: none !important; }
  .gm-intro--signature .gm-sig__eyebrow,
  .gm-intro--signature .gm-sig__classof,
  .gm-intro--signature .gm-sig__btn,
  .gm-intro--signature .gm-sig__postmark {
    animation: gmFadeIn 0.4s ease both !important;
    transform: rotate(-12deg) !important;
  }
}
/* ── Spotlight intro — full-bleed photo, Ken Burns, cinematic name reveal ── */

.gm-intro--spotlight {
  background: #0a0a0a;
  color: #fff;
}

.gm-intro--spotlight .gm-spot__confetti {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  pointer-events: none;
  display: none;
}

.gm-intro--spotlight .gm-spot__stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
}

.gm-intro--spotlight.is-photo-ready .gm-spot__stage {
  animation: gmSpotStageFade 0.5s ease both;
}

.gm-intro--spotlight .gm-spot__photo {
  position: absolute;
  inset: -4%;
  width: 108%;
  height: 108%;
  object-fit: cover;
  object-position: center 30%;
  transform: scale(1.18) translate(-1%, 2%);
  filter: saturate(0.92) contrast(1.04);
}

.gm-intro--spotlight.is-photo-ready .gm-spot__photo {
  animation: gmSpotKenBurns 18s ease-out 0.1s both;
}

.gm-intro--spotlight .gm-spot__photo.is-grayscale {
  filter: grayscale(100%) contrast(1.05);
}

.gm-intro--spotlight .gm-spot__photo--placeholder {
  background-image:
    linear-gradient(135deg, #2a2622 0%, #4a3f36 100%);
}

.gm-intro--spotlight .gm-spot__scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 30%, transparent 0%, rgba(0,0,0,0.4) 70%, rgba(0,0,0,0.9) 100%),
    linear-gradient(to bottom,
      rgba(0,0,0,0.4) 0%,
      rgba(0,0,0,0) 22%,
      rgba(0,0,0,0) 38%,
      rgba(0,0,0,0.55) 62%,
      rgba(0,0,0,0.85) 82%,
      rgba(0,0,0,0.95) 100%);
  opacity: 0;
}

.gm-intro--spotlight.is-photo-ready .gm-spot__scrim {
  animation: gmSpotScrimIn 1.2s ease 0.05s both;
}

.gm-intro--spotlight .gm-spot__grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.18;
  mix-blend-mode: overlay;
  background-image:
    radial-gradient(circle at 13% 22%, rgba(255,255,255,0.4) 0.5px, transparent 1.5px),
    radial-gradient(circle at 71% 64%, rgba(255,255,255,0.3) 0.4px, transparent 1.4px),
    radial-gradient(circle at 41% 89%, rgba(255,255,255,0.35) 0.5px, transparent 1.5px),
    radial-gradient(circle at 88% 12%, rgba(255,255,255,0.3) 0.4px, transparent 1.3px);
  background-size: 180px 180px, 220px 220px, 160px 160px, 200px 200px;
}

.gm-intro--spotlight .gm-spot__inner {
  visibility: hidden;
}

.gm-intro--spotlight.is-photo-ready .gm-spot__inner {
  visibility: visible;
}

.gm-intro--spotlight .gm-spot__grad-mark {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0) + clamp(1rem, 5vh, 3.5rem));
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-family: var(--font-brand-display);
  font-size: clamp(6rem, 38vmin, 22rem);
  line-height: 1;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 2px rgba(255,255,255,0.38);
  opacity: 0;
  user-select: none;
  pointer-events: none;
}

.gm-intro--spotlight.is-photo-ready .gm-spot__grad-mark {
  animation: gmSpotMarkIn 1.8s ease 0.4s both;
}

.gm-intro--spotlight .gm-spot__inner {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding:
    calc(env(safe-area-inset-top, 0) + 2.25rem)
    calc(env(safe-area-inset-right, 0) + clamp(1.25rem, 6vw, 3rem))
    calc(env(safe-area-inset-bottom, 0) + clamp(2.25rem, 8vh, 4rem))
    calc(env(safe-area-inset-left, 0) + clamp(1.25rem, 6vw, 3rem));
  text-align: left;
}

.gm-intro--spotlight .gm-spot__eyebrow {
  margin: 0 0 0.9rem;
  font-family: var(--font-brand-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  text-shadow: 0 1px 6px rgba(0,0,0,0.65), 0 0 14px rgba(0,0,0,0.4);
  position: relative;
  padding-left: 2.6rem;
  opacity: 0;
}

.gm-intro--spotlight.is-photo-ready .gm-spot__eyebrow {
  animation: gmSpotSlideRight 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.7s both;
}

.gm-intro--spotlight .gm-spot__eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 2rem;
  height: 1px;
  background: #fff;
  transform-origin: left center;
  transform: scaleX(0);
}

.gm-intro--spotlight.is-photo-ready .gm-spot__eyebrow::before {
  animation: gmSpotDashIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.55s both;
}

.gm-intro--spotlight .gm-spot__name {
  display: block;
  margin: 0;
  font-family: var(--font-brand-display);
  font-size: clamp(3rem, 13vw, 8rem);
  line-height: 0.92;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0,0,0,0.45);
  overflow: hidden;
  clip-path: inset(0 100% 0 0);
}

.gm-intro--spotlight.is-photo-ready .gm-spot__name {
  animation: gmSpotReveal 1.1s cubic-bezier(0.7, 0, 0.3, 1) 0.85s both;
}

.gm-intro--spotlight .gm-spot__meta {
  margin: 1.1rem 0 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75em;
  font-family: var(--font-brand-mono);
  font-size: clamp(0.72rem, 2.3vw, 0.9rem);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.88);
  text-shadow: 0 1px 6px rgba(0,0,0,0.65), 0 0 14px rgba(0,0,0,0.4);
  opacity: 0;
}

.gm-intro--spotlight.is-photo-ready .gm-spot__meta {
  animation: gmSpotFade 0.6s ease 1.6s both;
}

.gm-intro--spotlight .gm-spot__dot {
  color: #fff;
  font-size: 1.3em;
  line-height: 0;
}

.gm-intro--spotlight .gm-spot__btn {
  margin-top: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.95rem 1.7rem;
  font-family: var(--font-brand-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #0a0a0a;
  background: #fff;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  outline: none;
  opacity: 0;
  transition: background 0.2s ease, color 0.2s ease;
}

.gm-intro--spotlight.is-photo-ready .gm-spot__btn {
  animation: gmSpotFade 0.5s ease 1.95s both;
}

.gm-intro--spotlight .gm-spot__btn:hover,
.gm-intro--spotlight .gm-spot__btn:focus-visible {
  background: #0a0a0a;
  color: #fff;
}

@keyframes gmSpotStageFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes gmSpotKenBurns {
  from { transform: scale(1.18) translate(-1%, 2%); }
  to   { transform: scale(1.0)  translate(0,    0); }
}

@keyframes gmSpotScrimIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes gmSpotMarkIn {
  0%   { opacity: 0; transform: translateX(-50%) translateY(20px); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes gmSpotSlideRight {
  from { opacity: 0; transform: translateX(-18px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes gmSpotDashIn {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes gmSpotReveal {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

@keyframes gmSpotFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .gm-intro--spotlight.is-photo-ready .gm-spot__photo,
  .gm-intro--spotlight.is-photo-ready .gm-spot__scrim,
  .gm-intro--spotlight.is-photo-ready .gm-spot__name,
  .gm-intro--spotlight.is-photo-ready .gm-spot__grad-mark,
  .gm-intro--spotlight.is-photo-ready .gm-spot__eyebrow,
  .gm-intro--spotlight.is-photo-ready .gm-spot__eyebrow::before,
  .gm-intro--spotlight.is-photo-ready .gm-spot__meta,
  .gm-intro--spotlight.is-photo-ready .gm-spot__btn {
    animation: gmFadeIn 0.4s ease both !important;
    transform: none !important;
    clip-path: none !important;
  }
}
/* ── Stadium intro — dark room, light beams sweep, flash reveals name ── */

.gm-intro--stadium {
  --stad-bg:     #050505;
  --stad-fg:     #f6f6f4;
  --stad-accent: var(--color-sun);
  --stad-glow:   color-mix(in srgb, var(--color-sun) 60%, white);
  background: var(--stad-bg);
  color: var(--stad-fg);
}

.gm-intro--stadium .gm-stad__stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.gm-intro--stadium .gm-stad__beam {
  position: absolute;
  top: -20%;
  width: 80vmax;
  height: 80vmax;
  background:
    conic-gradient(from 180deg at 50% 0%,
      transparent 0deg,
      transparent 73deg,
      rgba(246,200,74,0.0) 74deg,
      rgba(246,200,74,0.35) 80deg,
      rgba(255,235,170,0.55) 86deg,
      rgba(246,200,74,0.35) 92deg,
      transparent 98deg,
      transparent 360deg);
  transform-origin: 50% 0%;
  filter: blur(8px);
  opacity: 0;
  mix-blend-mode: screen;
}

.gm-intro--stadium .gm-stad__beam--left {
  left: -30%;
  transform: rotate(-55deg) translateY(-10%);
  animation: gmStadBeamLeft 2.6s cubic-bezier(0.5, 0, 0.3, 1) 0.1s both;
}

.gm-intro--stadium .gm-stad__beam--right {
  right: -30%;
  transform: rotate(55deg) translateY(-10%);
  animation: gmStadBeamRight 2.6s cubic-bezier(0.5, 0, 0.3, 1) 0.1s both;
}

.gm-intro--stadium .gm-stad__flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 55%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0) 50%);
  opacity: 0;
  animation: gmStadFlash 0.5s ease 1.95s both;
}

.gm-intro--stadium .gm-stad__floor {
  position: absolute;
  inset: 62% 0 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(246,200,74,0.4) 0%, rgba(246,200,74,0.06) 25%, transparent 60%),
    linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 100%);
  opacity: 0;
  animation: gmStadFloor 0.9s ease 2.05s both;
}

.gm-intro--stadium .gm-stad__dust {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 22% 78%, rgba(255,255,255,0.5) 0.6px, transparent 1.4px),
    radial-gradient(circle at 64% 28%, rgba(255,255,255,0.35) 0.5px, transparent 1.4px),
    radial-gradient(circle at 81% 91%, rgba(255,255,255,0.4) 0.55px, transparent 1.4px),
    radial-gradient(circle at 12% 41%, rgba(255,255,255,0.3) 0.5px, transparent 1.3px);
  background-size: 230px 230px, 280px 280px, 210px 210px, 260px 260px;
  opacity: 0;
  animation: gmStadDust 8s ease-in-out 2.4s infinite alternate;
}

.gm-intro--stadium .gm-stad__inner {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
}

.gm-intro--stadium .gm-stad__eyebrow {
  margin: 0 0 1.5rem;
  font-family: var(--font-brand-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.55em;
  text-transform: uppercase;
  color: rgba(246,246,244,0.7);
  position: relative;
  padding: 0 2rem;
  opacity: 0;
  animation: gmStadFade 0.5s ease 2.25s both;
}

.gm-intro--stadium .gm-stad__eyebrow::before,
.gm-intro--stadium .gm-stad__eyebrow::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 1.2rem;
  height: 1px;
  background: rgba(246,200,74,0.7);
}

.gm-intro--stadium .gm-stad__eyebrow::before { left: 0; }
.gm-intro--stadium .gm-stad__eyebrow::after  { right: 0; }

.gm-intro--stadium .gm-stad__name {
  margin: 0;
  font-family: var(--font-brand-display);
  font-size: clamp(3.5rem, 14vw, 8.5rem);
  line-height: 0.92;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  background: linear-gradient(180deg,
    #fff7d6 0%,
    var(--stad-glow) 28%,
    var(--stad-accent) 55%,
    #b8861a 85%,
    #f2d27a 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 4px 30px rgba(246,200,74,0.25);
  opacity: 0;
  transform: translateY(20px) scale(0.96);
  animation: gmStadNameIn 0.85s cubic-bezier(0.18, 1.1, 0.32, 1) 2.0s both;
}

.gm-intro--stadium .gm-stad__year {
  margin: 1.4rem 0 0;
  font-family: var(--font-brand-mono);
  font-size: clamp(0.85rem, 2.8vw, 1.05rem);
  font-weight: 500;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(246,200,74,0.92);
  opacity: 0;
  animation: gmStadFade 0.5s ease 2.55s both;
}

.gm-intro--stadium .gm-stad__btn {
  margin-top: 2.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  padding: 1rem 1.7rem;
  font-family: var(--font-brand-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--stad-bg);
  background: var(--stad-accent);
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  opacity: 0;
  animation: gmStadFade 0.5s ease 2.8s both;
  transition: background 0.2s ease, transform 0.2s ease;
}

.gm-intro--stadium .gm-stad__btn:hover,
.gm-intro--stadium .gm-stad__btn:focus-visible {
  background: var(--stad-glow);
  transform: translateY(-2px);
}

.gm-intro--stadium .gm-stad__btn-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--stad-bg);
  box-shadow: 0 0 0 4px rgba(0,0,0,0.25);
  animation: gmStadPulse 1.6s ease-in-out infinite;
}

@keyframes gmStadBeamLeft {
  0%   { opacity: 0; transform: rotate(-90deg) translateY(-10%); }
  35%  { opacity: 0.65; }
  60%  { opacity: 0.8; transform: rotate(-55deg) translateY(-10%); }
  100% { opacity: 0.55; transform: rotate(-45deg) translateY(-10%); }
}

@keyframes gmStadBeamRight {
  0%   { opacity: 0; transform: rotate(90deg) translateY(-10%); }
  35%  { opacity: 0.65; }
  60%  { opacity: 0.8; transform: rotate(55deg) translateY(-10%); }
  100% { opacity: 0.55; transform: rotate(45deg) translateY(-10%); }
}

@keyframes gmStadFlash {
  0%   { opacity: 0; }
  35%  { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes gmStadFloor {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes gmStadDust {
  from { opacity: 0.3; transform: translateY(0); }
  to   { opacity: 0.55; transform: translateY(-8px); }
}

@keyframes gmStadFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes gmStadNameIn {
  0%   { opacity: 0; transform: translateY(28px) scale(0.94); }
  65%  { opacity: 1; transform: translateY(-3px) scale(1.02); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes gmStadPulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(0.5); opacity: 0.7; }
}

@media (prefers-reduced-motion: reduce) {
  .gm-intro--stadium .gm-stad__beam,
  .gm-intro--stadium .gm-stad__flash,
  .gm-intro--stadium .gm-stad__floor,
  .gm-intro--stadium .gm-stad__dust { animation: gmFadeIn 0.5s ease both !important; transform: none !important; }
  .gm-intro--stadium .gm-stad__eyebrow,
  .gm-intro--stadium .gm-stad__name,
  .gm-intro--stadium .gm-stad__year,
  .gm-intro--stadium .gm-stad__btn { animation: gmFadeIn 0.4s ease both !important; transform: none !important; }
}
/* ── Stars intro variant ── */

.gm-intro--stars .gm-stars__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 2rem;
}

.gm-intro--stars .gm-stars__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.gm-intro--stars .gm-stars__name-wrap {
  position: relative;
  overflow: hidden;
}

.gm-intro--stars .gm-stars__typewriter {
  font-family: var(--font-brand-display);
  color: var(--color-ink);
  line-height: 1.0;
  margin: 0;
  width: max-content;
  max-width: 90vw;
}

.gm-intro--stars .gm-stars__name-line {
  display: block;
  text-align: left;
  font-size: clamp(3.5rem, 16vw, 9rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
}

.gm-intro--stars .gm-stars__decoration {
  display: inline-block;
  vertical-align: top;
  margin-left: 0.08em;
  margin-top: -0.05em;
  width: 0.55em;
  pointer-events: none;
  opacity: 1;
  animation: gmStarsPulse 2.6s ease-in-out 1.35s infinite;
}

.gm-intro--stars .gm-stars__classof {
  font-family: var(--font-brand-display);
  font-size: clamp(1.25rem, 5vw, 3rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: justify;
  text-align-last: justify;
  color: var(--color-ink);
  margin: 0.25rem 0 0.75rem;
  opacity: 0;
}

.gm-intro--stars .gm-stars__btn {
  display: inline-block;
  padding: 0.875rem 1.25rem;
  font-family: var(--font-brand-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-ink);
  background: transparent;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  margin-top: 0.5rem;
  opacity: 0;
}

.gm-intro--stars .gm-stars__arrow {
  display: inline-block;
  vertical-align: middle;
  width: 36px;
  margin-left: 0.5em;
  color: var(--color-lavender);
}

.gm-intro--stars .gm-stars__confetti {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  pointer-events: none;
  display: none;
}

@keyframes gmStarsSlideDown {
  from { opacity: 0; transform: translateY(-40px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes gmStarsSlideUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes gmStarsPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .gm-intro--stars .gm-stars__name-line,
  .gm-intro--stars .gm-stars__decoration,
  .gm-intro--stars .gm-stars__classof,
  .gm-intro--stars .gm-stars__btn {
    animation: gmFadeIn 0.4s ease both !important;
  }
}
/* ── Yearbook intro — stacked pages flip in, land on graduate's page ── */

.gm-intro--yearbook {
  --yb-desk:   #2d2620;
  --yb-paper:  #f5ead4;
  --yb-paper-2:#ede0c4;
  --yb-paper-3:#e3d3b1;
  --yb-ink:    #1f1a14;
  --yb-accent: var(--color-cobalt);
  --yb-stamp:  color-mix(in srgb, var(--color-rose) 60%, var(--yb-ink));
  background: var(--yb-desk);
  color: var(--yb-ink);
}

.gm-intro--yearbook .gm-yb__desk {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.55) 0%, transparent 60%),
    repeating-linear-gradient(115deg,
      rgba(0,0,0,0.0) 0px, rgba(0,0,0,0.0) 11px,
      rgba(255,255,255,0.025) 11px, rgba(255,255,255,0.025) 12px);
}

.gm-intro--yearbook .gm-yb__stack {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  perspective: 1400px;
}

.gm-intro--yearbook .gm-yb__page {
  position: absolute;
  width: min(86vw, 480px);
  aspect-ratio: 3/4;
  border-radius: 3px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.5) inset,
    0 18px 40px rgba(0,0,0,0.5),
    0 4px 12px rgba(0,0,0,0.35);
  transform-origin: 50% 50%;
  backface-visibility: hidden;
}

.gm-intro--yearbook .gm-yb__page--back {
  background: var(--yb-paper-3);
  background-image:
    radial-gradient(circle at 30% 25%, rgba(0,0,0,0.04) 0.5px, transparent 1.3px),
    radial-gradient(circle at 72% 68%, rgba(0,0,0,0.04) 0.5px, transparent 1.4px);
  background-size: 200px 200px, 170px 170px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-brand-display);
  color: color-mix(in srgb, var(--yb-ink) 65%, transparent);
  transform: rotate(-9deg) translate(-8%, 6%) scale(0.94);
  animation: gmYbPageBack 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}

.gm-intro--yearbook .gm-yb__back-year {
  font-weight: 800;
  font-size: clamp(1.3rem, 5vw, 2.4rem);
  letter-spacing: -0.01em;
  margin-bottom: 0.7rem;
}

.gm-intro--yearbook .gm-yb__back-crest {
  font-size: clamp(3rem, 12vw, 5.5rem);
  line-height: 1;
  color: var(--yb-stamp);
}

.gm-intro--yearbook .gm-yb__page--middle {
  background: var(--yb-paper-2);
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  transform: rotate(5deg) translate(7%, -4%) scale(0.97);
  animation: gmYbPageMiddle 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both;
}

.gm-intro--yearbook .gm-yb__mid-label {
  font-family: var(--font-brand-display);
  font-style: italic;
  font-size: clamp(1.15rem, 4.5vw, 1.6rem);
  letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--yb-ink) 75%, transparent);
}

.gm-intro--yearbook .gm-yb__mid-thumbs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  width: 75%;
}

.gm-intro--yearbook .gm-yb__mid-thumbs span {
  display: block;
  aspect-ratio: 3/4;
  background:
    linear-gradient(135deg, #b9a079 0%, #75614a 100%);
  border-radius: 2px;
  box-shadow: inset 0 0 0 3px var(--yb-paper-2), 0 1px 3px rgba(0,0,0,0.2);
  opacity: 0.85;
}

.gm-intro--yearbook .gm-yb__mid-thumbs span:nth-child(2) {
  background: linear-gradient(135deg, #a78b65 0%, #5a4736 100%);
}
.gm-intro--yearbook .gm-yb__mid-thumbs span:nth-child(3) {
  background: linear-gradient(135deg, #c2a87f 0%, #7b6448 100%);
}
.gm-intro--yearbook .gm-yb__mid-thumbs span:nth-child(5) {
  background: linear-gradient(135deg, #a89071 0%, #695440 100%);
}
.gm-intro--yearbook .gm-yb__mid-thumbs span:nth-child(6) {
  background: linear-gradient(135deg, #b6996e 0%, #6e573f 100%);
}

.gm-intro--yearbook .gm-yb__page--front {
  background: var(--yb-paper);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 2rem 1.5rem 1.5rem;
  gap: 0.65rem;
  text-align: center;
  transform: translate(0, 60%) rotate(2deg);
  opacity: 0;
  animation: gmYbPageFront 0.95s cubic-bezier(0.18, 1.05, 0.32, 1) 0.85s both;
}

.gm-intro--yearbook .gm-yb__binding {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 22px;
  background:
    linear-gradient(to right,
      rgba(0,0,0,0.18) 0%,
      rgba(0,0,0,0.05) 60%,
      transparent 100%);
  border-right: 1px dashed rgba(0,0,0,0.12);
}

.gm-intro--yearbook .gm-yb__eyebrow {
  margin: 0;
  font-family: var(--font-brand-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--yb-stamp);
}

.gm-intro--yearbook .gm-yb__photo-frame {
  position: relative;
  width: 62%;
  aspect-ratio: 4/5;
  margin: 0.4rem 0 0.5rem;
  background: #d8c6a4;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}

.gm-intro--yearbook .gm-yb__photo {
  position: absolute;
  inset: 4%;
  background-size: cover;
  background-position: center 30%;
  filter: sepia(0.18) saturate(0.9) contrast(1.05);
}

.gm-intro--yearbook .gm-yb__photo.is-grayscale {
  filter: grayscale(100%) contrast(1.05);
}

.gm-intro--yearbook .gm-yb__photo--placeholder {
  background: linear-gradient(160deg, #8c7a5f 0%, #4a3e2c 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.55);
  font-family: var(--font-brand-mono);
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.gm-intro--yearbook .gm-yb__photo-tape {
  position: absolute;
  width: 50px;
  height: 16px;
  background: rgba(255, 250, 220, 0.78);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.gm-intro--yearbook .gm-yb__photo-tape--tl {
  top: -7px;
  left: -10px;
  transform: rotate(-22deg);
}

.gm-intro--yearbook .gm-yb__photo-tape--br {
  bottom: -7px;
  right: -10px;
  transform: rotate(-22deg);
}

.gm-intro--yearbook .gm-yb__name {
  margin: 0.25rem 0 0.1rem;
  font-family: var(--font-brand-display);
  font-size: clamp(1.75rem, 7vw, 2.8rem);
  line-height: 1;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--yb-ink);
}

.gm-intro--yearbook .gm-yb__meta {
  margin: 0;
  font-family: var(--font-brand-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--yb-ink) 70%, transparent);
}

.gm-intro--yearbook .gm-yb__quote {
  margin: 0.5rem 0 0;
  max-width: 80%;
  font-family: var(--font-brand-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(0.85rem, 2.8vw, 1rem);
  line-height: 1.35;
  color: color-mix(in srgb, var(--yb-ink) 80%, transparent);
}

.gm-intro--yearbook .gm-yb__btn {
  margin-top: 1rem;
  padding: 0.85rem 1.5rem;
  font-family: var(--font-brand-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--yb-paper);
  background: var(--yb-ink);
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  opacity: 0;
  animation: gmYbFadeIn 0.45s ease 2.0s both;
  transition: background 0.2s ease, transform 0.2s ease;
}

.gm-intro--yearbook .gm-yb__btn:hover,
.gm-intro--yearbook .gm-yb__btn:focus-visible {
  background: var(--yb-accent);
  transform: translateY(-2px);
}

@keyframes gmYbPageBack {
  from { opacity: 0; transform: rotate(-30deg) translate(-30%, 20%) scale(0.7); }
  to   { opacity: 1; transform: rotate(-9deg)  translate(-8%, 6%)   scale(0.94); }
}

@keyframes gmYbPageMiddle {
  from { opacity: 0; transform: rotate(28deg) translate(35%, 25%) scale(0.7); }
  to   { opacity: 1; transform: rotate(5deg)  translate(7%, -4%)  scale(0.97); }
}

@keyframes gmYbPageFront {
  0%   { opacity: 0; transform: translate(0, 80%)  rotate(8deg)  scale(0.94); }
  60%  { opacity: 1; transform: translate(0, -2%)  rotate(-1deg) scale(1.01); }
  100% { opacity: 1; transform: translate(0, 0)    rotate(0)     scale(1); }
}

@keyframes gmYbFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .gm-intro--yearbook .gm-yb__page,
  .gm-intro--yearbook .gm-yb__btn {
    animation: gmFadeIn 0.4s ease both !important;
    transform: none !important;
  }
}
.admin-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
}

.admin-heading {
  font-family: var(--font-brand-display);
  font-size: 2rem;
  color: var(--color-accent);
  margin-bottom: 0.25rem;
}

.admin-subheading {
  font-family: var(--font-brand-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-warm-gray);
  opacity: 0.6;
  margin-bottom: 2.5rem;
}

/* Tabs */
.admin-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--color-border);
  margin-bottom: 2.5rem;
}

.admin-tab {
  font-family: var(--font-brand-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-warm-gray);
  opacity: 0.5;
  text-decoration: none;
  padding: 0.625rem 1.25rem;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: opacity 0.15s, border-color 0.15s;
}

.admin-tab:hover { opacity: 0.8; }

.admin-tab--active {
  opacity: 1;
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

/* Template grid */
.admin-template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 2.5rem 2rem;
  align-items: start;
}

.admin-template-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.admin-template-preview {
  display: block;
  width: 100%;
  border-radius: 8px;
  box-shadow:
    0 2px 4px rgba(0,0,0,0.08),
    0 8px 20px rgba(0,0,0,0.14),
    0 20px 40px rgba(0,0,0,0.10),
    inset 0 0 0 1px rgba(255,255,255,0.6);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.admin-template-preview:hover {
  transform: translateY(-4px);
  box-shadow:
    0 4px 8px rgba(0,0,0,0.10),
    0 16px 40px rgba(0,0,0,0.18),
    0 32px 60px rgba(0,0,0,0.12),
    inset 0 0 0 1px rgba(255,255,255,0.8);
}

.admin-template-preview-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
}

.admin-template-meta {
  margin-top: 0.875rem;
  text-align: center;
  width: 100%;
}

.admin-template-label {
  font-family: var(--font-brand-display);
  font-size: 1rem;
  color: var(--color-accent);
  display: block;
}

.admin-template-slug {
  font-family: var(--font-brand-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: var(--color-warm-gray);
  opacity: 0.55;
  display: block;
  margin-top: 0.2rem;
}

.admin-badge {
  display: inline-block;
  font-family: var(--font-brand-mono);
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border-radius: 2px;
  margin-top: 0.4rem;
}

.admin-badge--active   { background: var(--color-success-bg); color: var(--color-success-text); }
.admin-badge--inactive { background: var(--color-surface); color: var(--color-label); }
.admin-badge--foil     { background: var(--color-surface); color: var(--color-ink); margin-left: 0.3rem; }

/* Notecard grid */
.admin-notecard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(460px, 1fr));
  gap: 2.5rem 2rem;
}

.admin-notecard-item {
  display: flex;
  flex-direction: column;
}

.admin-notecard-meta {
  margin-top: 0.875rem;
}

.admin-notecard-label {
  font-family: var(--font-brand-display);
  font-size: 1rem;
  color: var(--color-accent);
  display: block;
}

.admin-notecard-id {
  font-family: var(--font-brand-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: var(--color-warm-gray);
  opacity: 0.55;
  display: block;
  margin-top: 0.2rem;
}

.admin-set-heading {
  font-family: var(--font-brand-mono);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-warm-gray);
  opacity: 0.5;
  margin-bottom: 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-border);
}
/* ── Choose-template page (brand) ─────────────────────────────── */

.ct-page {
  background: var(--color-paper);
  min-height: 100vh;
  color: var(--color-ink);
}

.ct-page-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 5rem;
}

.ct-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-brand-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink);
  text-decoration: none;
  opacity: 0.7;
  margin-bottom: 1.5rem;
  transition: opacity 0.15s ease, color 0.15s ease;
}

.ct-back:hover { opacity: 1; color: var(--color-ink-secondary); }

.ct-header {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  border-bottom: 1px solid var(--color-ink);
  padding-bottom: 1.5rem;
  margin-bottom: 3rem;
}

.ct-kicker {
  font-family: var(--font-brand-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink);
  opacity: 0.55;
}

.ct-title {
  font-family: var(--font-brand-display);
  font-size: clamp(2.5rem, 7vw, 4rem);
  line-height: 0.95;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--color-ink);
  margin: 0;
}

.ct-subtitle {
  font-family: var(--font-brand-serif);
  font-style: italic;
  font-size: 1.0625rem;
  font-weight: 400;
  color: var(--color-ink);
  opacity: 0.75;
  margin: 0;
}

.ct-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem 1.5rem;
}

@media (min-width: 768px) {
  .ct-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem 2.5rem;
  }
}

.ct-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.875rem;
  margin: 0;
}

.ct-card {
  background: var(--color-paper);
  border: 1px solid var(--color-ink);
  border-radius: 6px;
  cursor: pointer;
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  padding: 0;
  overflow: hidden;
  transition: border-color 0.2s ease;
}

.ct-card:hover {
  border-color: var(--color-ink-secondary);
}

.ct-card:focus {
  outline: 2px solid var(--color-ink);
  outline-offset: 3px;
}

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

.ct-label {
  font-family: var(--font-brand-display);
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-ink);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .ct-card { transition: none; }
}
/* ─── Home Page (refined editorial) ──────────────────────────────
   Scoped to .home wrapper. Mirrors the .me__* language used in
   /moments and /moments/:id so the public landing reads as one
   continuous experience with the rest of the app.
   ─────────────────────────────────────────────────────────────── */

.home {
  --home-ink:        var(--color-ink);
  --home-surface:    var(--color-paper);
  --home-accent:     var(--color-ink);
  --home-hairline:   var(--color-divider);
  --home-quiet:      var(--color-label);
  --home-soft:       var(--color-surface);

  background: var(--home-surface);
  color: var(--home-ink);
  font-family: var(--font-brand-body);
}

/* ─── HERO ─────────────────────────────────────────────────────── */

.home-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(2.5rem, 8vw, 5rem) 1.25rem clamp(3rem, 8vw, 5rem);
}

.home-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
}

/* Title block — stacked uppercase display type with a sparkle cluster
   hovering at the top-right of the headline. The wrap is inline-block
   so its width tracks the headline's max-content, then the parent
   centers it. Stars are absolutely positioned so they tuck behind the
   top-right corner without participating in the inline flow. */
.home-hero__title-wrap {
  position: relative;
  display: inline-block;
  max-width: 100%;
  text-align: center;
}

.home-hero__stars {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(60%, -45%);
  width: clamp(48px, 9vw, 90px);
  height: auto;
  pointer-events: none;
  z-index: 2;
}

.home-hero__title {
  font-family: var(--font-brand-display);
  /* Sized to support — not compete with — the phone fan below. The fan
     is the hero's visual anchor; the headline reads as the editorial
     tag above it. Anton's condensed display weight holds the top of the
     page at this scale without overpowering. */
  font-size: clamp(2.25rem, 11.5vw, 9.5rem);
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--color-ink);
  margin: 0;
}

.home-hero__title em {
  font-family: var(--font-brand-serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: -0.03em;
}

.home-hero__title-line {
  display: block;
  text-align: center;
  /* Each line is a single phrase — never break "the moment" across two
     visual rows. The clamp on font-size keeps both lines fitting at
     mobile widths so nowrap doesn't push past the viewport. */
  white-space: nowrap;
}

/* Subheadline — single tight line in brand mono so the supporting copy
   reads as UI/label voice rather than a second display headline. Normal
   letter-spacing keeps it as one confident phrase, not spaced-out stamps. */
.home-hero__sub {
  font-family: var(--font-brand-mono);
  font-weight: 500;
  font-size: clamp(0.75rem, 2.5vw, 2rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-ink);
  margin: clamp(0.75rem, 1.2vw, 1rem) 0 0;
}

.home-hero__cta {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  /* Refined width — sits in the 240–280px band so it reads as a
     considered invitation, not a heavy bar across the page. */
  padding-inline: clamp(1.5rem, 5vw, 2.25rem);
  min-width: 240px;
  max-width: 280px;
  background: var(--color-ink);
  color: var(--color-paper);
  box-shadow: none;
}

.home-hero__cta:hover,
.home-hero__cta:active {
  box-shadow: none;
}

/* ─── Phone wrapper ─── */

.home-hero__phone {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: clamp(2rem, 5vw, 4rem);
  isolation: isolate;
}

/* Live cannon-burst canvas — fires once on connect via
   iphone_confetti_controller. Sits in front of every phone so confetti
   bursts toward the viewer, like the original moment intro. The
   controller flips display:block while the animation runs and back to
   none when the pieces have fallen off-canvas. */
.home-hero__burst {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 132%;
  height: 112%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 5;
  display: none;
}

.home-hero__phone .phone-fan { z-index: 1; }

.home-hero__cta-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.875rem;
  margin-top: clamp(2rem, 3vw, 2.5rem);
}

/* Get Started CTAs — typography + arrow mirror the stars intro CELEBRATE
   button so the landing page hands off into the same visual language guests
   meet on the moment itself. Mono caps, generous tracking, no chrome — the
   blinking green squiggle is the only ornament. */
.home-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 1.25rem;
  font-family: var(--font-brand-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--home-ink);
  background: transparent;
  border: none;
  border-radius: 0;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.18s ease;
}

.home-cta:hover { color: var(--color-ink-secondary); }

.home-cta__arrow {
  display: inline-block;
  vertical-align: middle;
  width: 36px;
  height: auto;
  margin-left: 0.5em;
  color: var(--color-ink);
  flex-shrink: 0;
}

.home-hero__micro {
  font-family: var(--font-brand-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--home-ink);
  opacity: 0.5;
  margin: 0;
}

/* ─── WHY (message-block-styled marketing block) ───────────────── */

.home-why {
  background: var(--home-surface);
  padding: clamp(3.5rem, 9vw, 6rem) 1.25rem;
  display: flex;
  justify-content: center;
}

.home-why__inner {
  width: 100%;
  max-width: 540px;
  padding: clamp(20px, 4vw, 32px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 4vw, 28px);
  text-align: center;
}

.home-why__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}

.home-why__title {
  font-family: var(--font-brand-display);
  font-size: clamp(1.25rem, 6vw, 2.25rem);
  line-height: 0.95;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--color-ink);
  margin: 0;
}

.home-why__title-mark {
  position: relative;
  display: inline-block;
  z-index: 0;
  padding: 0 0.1em;
}

.home-why__title-mark em {
  font-family: var(--font-brand-serif);
  text-transform: lowercase;
}

.home-why__body {
  font-family: var(--font-brand-serif);
  font-weight: 400;
  font-size: clamp(1.1rem, 2.4vw, 1.4rem);
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: var(--color-ink);
  opacity: 0.8;
  margin: 0;
  max-width: 36ch;
}

/* ─── EDITORIAL CAPTION (above preview sections) ────────────────── */

.home-caption {
  background: var(--home-surface);
  font-family: var(--font-brand-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--home-ink);
  opacity: 0.55;
  text-align: center;
  margin: 0;
  padding: clamp(1.25rem, 3vw, 2rem) 1.5rem 0;
  max-width: 56ch;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.home-caption span {
  display: inline-block;
  margin-right: 0.3em;
  color: var(--home-accent);
  opacity: 0.9;
}

/* ─── PREVIEW SECTIONS (locked guestbook + non-functional gifting) ─ */

.home-guestbook-preview .notecard,
.home-guestbook-preview .notecard__name-input,
.home-guestbook-preview .notecard__message {
  cursor: default;
}

.home-guestbook-preview .notecard__submit[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ─── DEMO LINK (editorial endmark) ──────────────────────────────
   Closing section of the home page. Bookends the hero: same kicker →
   Anton display + Fraunces italic → single primary pill rhythm. The
   demo path is preserved as a quiet text alternate below the primary
   CTA so the signup remains the focal point. */

.home-demo-link {
  background: var(--home-surface);
  padding: clamp(3.5rem, 9vw, 6rem) 1.25rem clamp(3rem, 7vw, 5rem);
}

.home-demo-link__inner {
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  text-align: center;
}

.home-demo-link__title {
  margin: 0;
  font-family: var(--font-brand-display);
  font-size: clamp(2.5rem, 9vw, 4.5rem);
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--color-ink);
}

.home-demo-link__title em {
  font-family: var(--font-brand-serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: -0.015em;
  color: var(--color-ink-secondary);
}

.home-demo-link__primary {
  margin-top: clamp(0.25rem, 1vw, 0.75rem);
}

.home-demo-link__alt {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.25rem 0.5rem;
  font-family: var(--font-brand-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-label);
  text-decoration: none;
  transition: color 0.18s ease;
}

.home-demo-link__alt:hover {
  color: var(--color-ink);
}

.home-demo-link__alt-arrow {
  width: 18px;
  height: auto;
  flex-shrink: 0;
  transition: transform 0.18s ease;
}

.home-demo-link__alt:hover .home-demo-link__alt-arrow {
  transform: translateX(3px);
}

/* ─── DEMO PAGE BOTTOM CTA ───────────────────────────────────────
   Section structure + heading visuals come from .gm-gifting /
   .gm-gifting__heading-accent. This block only carries the
   supporting lede styling unique to the demo page. */

.demo-cta__lede {
  font-family: var(--font-brand-serif);
  font-style: italic;
  font-size: clamp(1rem, 2.4vw, 1.2rem);
  line-height: 1.5;
  color: var(--color-ink);
  opacity: 0.75;
  margin: 0 auto;
  max-width: 42ch;
}

/* Paragraph is already italic, so make the <em> stand out via weight
   alone — chrome decoration is neutral. */
.demo-cta__lede em {
  font-style: normal;
  font-weight: 600;
  color: var(--color-ink);
  padding: 0 0.1em;
}

/* ─── FOOTER (light) ──────────────────────────────────────────────
   On the now-white page, separation comes from a single ink hairline
   rather than a tonal wash. Padding tightened to a deliberate
   editorial endmark rhythm. */

.home-footer {
  background: var(--color-surface);
  border-top: 1px solid var(--home-hairline);
  padding: 3rem 1.25rem 2.5rem;
}

.home-footer__inner {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Each row is one editorial line: brand item on the left, meta on the right.
   Baselines match because both children sit on the row's center line. */
.home-footer__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.home-footer__brand {
  display: inline-block;
  margin: 0;
  color: var(--home-ink);
  text-decoration: none;
}

.home-footer__brand-image {
  display: block;
  height: clamp(22px, 3.5vw, 32px);
  width: auto;
}

.home-footer__sub {
  font-family: var(--font-brand-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--home-ink);
  opacity: 0.45;
  margin: 0;
}

.home-footer__legal {
  font-family: var(--font-brand-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--home-ink);
  opacity: 0.6;
  display: inline-flex;
  gap: 0.5rem;
  margin: 0;
  text-align: right;
  white-space: nowrap;
}

.home-footer__legal a {
  color: var(--home-ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease, opacity 0.15s ease;
}

.home-footer__legal a:hover {
  border-bottom-color: var(--home-accent);
  opacity: 1;
}

.home-footer__copy {
  font-family: var(--font-brand-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--home-ink);
  opacity: 0.4;
  margin: 0;
  text-align: right;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .home-footer__inner {
    gap: 0.75rem;
  }
}

/* ─── FLOATING CTA ──────────────────────────────────────────────── */
/* Positioning + show/hide animation only. Visual styling (blue fill,
   white type + arrow, uppercase tracking, hard-shadow lift) comes from
   the shared .gm-btn .gm-btn--primary .home-hero__cta classes so the
   floating pill reads as the same gesture as the hero CTA. */

.home-floating-cta {
  position: fixed;
  bottom: 1.25rem;
  left: 50%;
  /* Default off-screen position. Stacks with the hero CTA's gm-btn
     hard-shadow offset by leaving the translate to handle motion. */
  transform: translateX(-50%) translateY(calc(100% + 1rem));
  z-index: 100;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.35s ease,
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.home-floating-cta.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

/* The shared .gm-btn:hover rule translates the button up-left for a
   "lift"; that fights with the centering translate used here. Override
   so the floating pill stays horizontally centered on hover. */
.home-floating-cta:hover {
  transform: translateX(-50%) translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .home-floating-cta {
    transition: opacity 0.2s ease;
    transform: translateX(-50%) translateY(0);
  }
  .home-floating-cta:not(.is-visible) {
    opacity: 0;
    pointer-events: none;
  }
}

/* ─── Site nav + body overrides for the home route ──────────────── */

.home-page body {
  background: var(--color-paper) !important;
}

.home-page .site-nav {
  background: var(--color-paper);
  border-bottom-color: var(--color-divider);
}
/* ─── LEGAL PAGES (Terms, Privacy) ──────────────────────────────── */

.legal-page-body {
  background: var(--color-paper);
}

.legal-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 4rem 1.5rem 6rem;
  color: var(--color-warm-gray);
  font-family: var(--font-brand-mono);
  font-size: 14px;
  line-height: 1.7;
}

.legal-page__header {
  text-align: center;
  margin-bottom: 3rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--color-border);
}

.legal-page__eyebrow {
  font-family: var(--font-brand-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-warm-gray);
  opacity: 0.55;
  margin-bottom: 0.75rem;
}

.legal-page__title {
  font-family: var(--font-brand-display);
  font-size: clamp(2.25rem, 6vw, 3.5rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--color-accent);
  margin: 0;
}

.legal-page__updated {
  font-family: var(--font-brand-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-warm-gray);
  opacity: 0.5;
  margin-top: 0.75rem;
}

.legal-page__section {
  margin-bottom: 2.25rem;
}

.legal-page__section h2 {
  font-family: var(--font-brand-display);
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  letter-spacing: -0.01em;
  color: var(--color-accent);
  margin: 0 0 0.75rem;
}

.legal-page__section p,
.legal-page__section li {
  font-family: var(--font-brand-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--color-warm-gray);
  margin-bottom: 0.85rem;
}

.legal-page__section ul {
  list-style: disc;
  padding-left: 1.25rem;
  margin-bottom: 0.85rem;
}

.legal-page__section li {
  margin-bottom: 0.4rem;
}

.legal-page__section strong {
  color: var(--color-accent);
  font-weight: 500;
}

.legal-page__section a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.legal-page__section a:hover {
  color: var(--color-ink-secondary);
}

.legal-page__lead {
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-warm-gray);
}

@media (max-width: 640px) {
  .legal-page {
    padding: 2.5rem 1.25rem 4rem;
  }
  .legal-page__header {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
  }
  .legal-page__section {
    margin-bottom: 1.75rem;
  }
}
/* ── Editorial template (mg__) ── */

.mg__card {
  --mg-bg:    #ffffff;
  --mg-ink:   #000000;
  --mg-rule:  #000000;
  --mg-side:  6%;

  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  background: var(--mg-bg);
  color: var(--mg-ink);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 4.5% var(--mg-side) 4.5%;
  box-sizing: border-box;
  font-family: var(--font-mono);
  container-type: inline-size;
}

/* ── Masthead ── */
.mg__masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-shrink: 0;
}

.mg__wordmark {
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 10cqi, 4rem);
  line-height: 0.9;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.mg__issue {
  font-family: var(--font-mono);
  font-size: clamp(0.45rem, 1.6cqi, 0.7rem);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  opacity: 0.85;
}

.mg__issue-dot {
  opacity: 0.6;
}

.mg__masthead-rule {
  height: 2px;
  background: var(--mg-rule);
  margin: 0.55em 0 1.1em;
  flex-shrink: 0;
}

/* ── Photo ── */
.mg__photo-wrap {
  flex: 1 1 auto;
  position: relative;
  width: 100%;
  min-height: 0;
  overflow: hidden;
  background: #f3f3f3;
}

.mg__photo-wrap > div,
.mg__photo-wrap > div > div {
  width: 100%;
  height: 100%;
}

.mg__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  display: block;
}

.mg__photo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: #f0f0f0;
  gap: 0.5rem;
}

.mg__photo-label {
  display: block;
  position: relative;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.mg__card--editing .mg__photo {
  cursor: grab;
}

.mg__card--editing .mg__photo:active {
  cursor: grabbing;
}

.mg__photo-edit-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0);
  transition: background 0.2s;
  pointer-events: none;
}

.mg__photo-label:hover .mg__photo-edit-overlay {
  background: rgba(0, 0, 0, 0.35);
}

.mg__photo-label:hover .mg__photo-edit-overlay svg {
  opacity: 1;
}

.mg__photo-edit-overlay svg {
  opacity: 0;
  transition: opacity 0.2s;
  color: white;
}

/* ── Headline (graduate name) ── */
.mg__headline {
  margin: 0.55em 0 0.35em;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 9cqi, 4.2rem);
  line-height: 0.96;
  letter-spacing: -0.025em;
  text-align: center;
  color: var(--mg-ink);
  flex-shrink: 0;
  word-break: break-word;
}

/* ── Footer / colophon ── */
.mg__footer {
  display: flex;
  align-items: center;
  gap: 0.75em;
  flex-shrink: 0;
}

.mg__footer-rule {
  flex: 1 3 0;
  min-width: 1rem;
  height: 1px;
  background: var(--mg-rule);
  opacity: 0.55;
}

.mg__school {
  font-family: var(--font-mono);
  font-size: clamp(0.5rem, 1.7cqi, 0.75rem);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  word-spacing: 0.05em;
  line-height: 1.4;
  flex-shrink: 1;
  min-width: 0;
  max-width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mg__degree:empty { display: none; }
.mg__degree:not(:empty)::before { content: ", "; }

/* ── Animations ── */
.mg__fade {
  animation: mgIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  opacity: 0;
}

.mg__d0 { animation-delay: 0s; }
.mg__d1 { animation-delay: 0.12s; }
.mg__d2 { animation-delay: 0.24s; }
.mg__d3 { animation-delay: 0.4s; }
.mg__d4 { animation-delay: 0.55s; }

@keyframes mgIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .mg__fade { animation: none; opacity: 1; transform: none; }
}

/* ── Inline edit affordances ── */
.mg__editable {
  cursor: text;
  border-bottom: 1.5px dashed rgba(99, 102, 241, 0.35);
  border-radius: 1px;
  transition: background 0.15s;
  display: inline-block;
}

@media (hover: hover) {
  .mg__editable:hover {
    background: rgba(99, 102, 241, 0.05);
    outline: 1px dashed rgba(99, 102, 241, 0.4);
    outline-offset: 3px;
    border-bottom-color: transparent;
  }
}

.mg__editable:focus,
.mg__editable:focus-within {
  background: rgba(99, 102, 241, 0.05);
  outline: 2px dashed rgba(99, 102, 241, 0.5);
  outline-offset: 4px;
  border-bottom-color: transparent;
}

.mg__year-wrap {
  position: relative;
  display: inline-block;
}

.mg__year-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: text;
  border: none;
  outline: none;
  padding: 0;
  -moz-appearance: textfield;
}

.mg__year-input::-webkit-outer-spin-button,
.mg__year-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

[data-template="editorial"] .moment-section {
  background-color: #ffffff;
}
/* ── Ink template (ink__) ── */

.ink__card {
  --ink-text:       #15110a;
  --ink-photo-top: 18%;
  --ink-photo-bot: 19%;
  --ink-side:      11%;
  --ink-script:    "Loved by the King", cursive;
  --ink-marker:    "Permanent Marker", cursive;

  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  background: #ffffff;
  color: var(--ink-text);
  overflow: hidden;
  container-type: inline-size;
}

/* ── Handwritten heading "Class of YEAR" ── */
/* Sits with its bottom half overlapping the top of the photo. */
.ink__heading {
  position: absolute;
  top: 7%;
  left: 4%;
  right: 4%;
  z-index: 4;
  pointer-events: none;
  line-height: 1;
}

.ink__heading-img {
  display: block;
  width: 100%;
  height: auto;
  color: var(--ink-text);
  pointer-events: auto;
}

/* Fallback (only renders if the SVG is missing) */
.ink__heading-class,
.ink__heading-year {
  font-family: var(--font-notecard);
  font-size: clamp(2.6rem, 11.5vw, 5.6rem);
  font-weight: 400;
  color: var(--ink-text);
  line-height: 0.9;
  letter-spacing: -0.005em;
  pointer-events: auto;
}

.ink__heading-year {
  transform: rotate(-1deg);
  transform-origin: right center;
  position: relative;
}

/* tiny star perched on the year (matches screenshot's mark above '2') */
.ink__heading-year::before {
  content: "";
  position: absolute;
  top: -0.45em;
  left: 0.05em;
  width: 0.35em;
  height: 0.35em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='black' d='M50 5 L61 38 L96 38 L68 60 L78 95 L50 73 L22 95 L32 60 L4 38 L39 38 Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='black' d='M50 5 L61 38 L96 38 L68 60 L78 95 L50 73 L22 95 L32 60 L4 38 L39 38 Z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ── Vertical "CLASS OF YEAR" marker text on the right side of the photo ── */
/* Outer handles position + the fade-in animation (which animates `transform`,
   so the rotation must live on the inner element).
   font-size lives on the outer so the `em`-based `right` offset resolves
   here — that ties the overlap to the text width, not the card width, so
   overlap stays consistent as the card scales up on wide desktops. */
.ink__class-vertical {
  position: absolute;
  top: var(--ink-photo-top);
  bottom: var(--ink-photo-bot);
  /* Right edge sits 0.4em past the photo's right edge; vertical text is
     ~1em wide, so ~0.6em sits inside the photo. */
  right: calc(var(--ink-side) - 0.4em);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;

  font-family: var(--ink-marker);
  font-size: clamp(1.1rem, 7.8cqi, 8rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-text);
  line-height: 1;
}

.ink__class-vertical__text {
  font-weight: 400;
  white-space: nowrap;

  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

/* ── Photo zone ── */
.ink__photo-wrap {
  position: absolute;
  top: var(--ink-photo-top);
  left: var(--ink-side);
  right: var(--ink-side);
  bottom: var(--ink-photo-bot);
  z-index: 1;
  overflow: hidden;
}

.ink__photo-wrap > div,
.ink__photo-wrap > div > div {
  width: 100%;
  height: 100%;
}

.ink__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  display: block;
}

.ink__photo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: #efe9da;
  gap: 0.5rem;
}

.ink__photo-label {
  display: block;
  position: relative;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.ink__card--editing .ink__photo {
  cursor: grab;
}

.ink__card--editing .ink__photo:active {
  cursor: grabbing;
}

.ink__photo-edit-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0);
  transition: background 0.2s;
  pointer-events: none;
}

.ink__photo-label:hover .ink__photo-edit-overlay {
  background: rgba(0, 0, 0, 0.35);
}

.ink__photo-label:hover .ink__photo-edit-overlay svg {
  opacity: 1;
}

.ink__photo-edit-overlay svg {
  opacity: 0;
  transition: opacity 0.2s;
  color: white;
}

/* ── Caption: name + school ── */
.ink__caption {
  position: absolute;
  bottom: 5.5%;
  left: 6%;
  right: 6%;
  text-align: center;
  z-index: 3;
  container-type: inline-size;
}

/* Auto-shrink the graduate name so long names still fit on one line.
   --name-len is set inline from the view (character count of the name).
   Shrink-to-fit calc: container width / (chars * approx em-width per char).
   Clamped between a small minimum and the desired max. */
.ink__name {
  font-family: var(--ink-script);
  font-size: clamp(
    1.2rem,
    calc(120cqi / (max(var(--name-len, 12), 8) * 0.55)),
    2.4rem
  );
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-text);
  margin: 0 0 -0.3em;
  line-height: 2.05;
  white-space: nowrap;
  overflow: hidden;
  text-align: left;
  transform: rotate(-6deg);
}

.ink__school {
  font-family: var(--font-notecard);
  font-size: clamp(1rem, 3.6vw, 1.55rem);
  line-height: 1;
  color: var(--ink-text);
  margin: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transform: rotate(-10deg);
  text-align: left;
}

.ink__degree {
  font-family: var(--font-notecard);
  font-size: clamp(0.8rem, 2.6vw, 1.15rem);
  line-height: 1;
  color: var(--ink-text);
  margin: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transform: rotate(-10deg);
  text-align: left;
  opacity: 0.85;
}

.ink__degree:empty { display: none; }

/* ── Decorations ── */
.ink__deco {
  position: absolute;
  z-index: 2;
  color: var(--ink-text);
  pointer-events: none;
  display: block;
}

.ink__deco svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.ink__deco--1  { top: 11%;   left: 4%;   width: 5.2%;  transform: rotate(-12deg); }
.ink__deco--2  { top: 6%;    left: 22%;  width: 3.4%;  transform: rotate(8deg); }
.ink__deco--3  { top: 27%;   left: 2.5%; width: 3.6%;  transform: rotate(-6deg); }
.ink__deco--4  { top: 39%;   right: 3%;  width: 4.4%;  transform: rotate(15deg); }
.ink__deco--5  { top: 24%;   right: 4%;  width: 5.6%; }
.ink__deco--6  { top: 56%;   left: 3%;   width: 4.4%;  transform: rotate(-8deg); }
.ink__deco--7  { top: 60%;   right: 1.5%; width: 3.4%; }
.ink__deco--8  { bottom: 24%; right: 3%;  width: 15.2%;  transform: rotate(8deg); }
.ink__deco--9  { bottom: 28%; left: 7%;   width: 4.6%;  transform: rotate(-15deg); }
.ink__deco--10 { bottom: 19%; left: 50%;  width: 2.4%;  transform: translateX(-50%) rotate(20deg); }
.ink__deco--11 { top: 23%;    left: 3%;   width: 15.2%; transform: scaleX(-1) rotate(8deg); }

/* ── Animations ── */
.ink__fade {
  animation: inkIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  opacity: 0;
}

.ink__d0 { animation-delay: 0s; }
.ink__d1 { animation-delay: 0.12s; }
.ink__d2 { animation-delay: 0.28s; }
.ink__d3 { animation-delay: 0.42s; }

.ink__sparkle {
  animation: inkTwinkle 2.6s ease-in-out infinite;
  transform-origin: center;
}

.ink__sparkle--a { animation-delay: 0.0s; }
.ink__sparkle--b { animation-delay: 0.7s; }
.ink__sparkle--c { animation-delay: 1.4s; }

@keyframes inkIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes inkTwinkle {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

@media (prefers-reduced-motion: reduce) {
  .ink__sparkle { animation: none; }
  .ink__fade    { animation: none; opacity: 1; transform: none; }
}

/* ── Inline edit affordances (mirrors mono pattern) ── */
.ink__editable {
  cursor: text;
  border-bottom: 1.5px dashed rgba(99, 102, 241, 0.35);
  border-radius: 1px;
  transition: background 0.15s;
  display: inline-block;
}

@media (hover: hover) {
  .ink__editable:hover {
    background: rgba(99, 102, 241, 0.05);
    outline: 1px dashed rgba(99, 102, 241, 0.4);
    outline-offset: 3px;
    border-bottom-color: transparent;
  }
}

.ink__editable:focus,
.ink__editable:focus-within {
  background: rgba(99, 102, 241, 0.05);
  outline: 2px dashed rgba(99, 102, 241, 0.5);
  outline-offset: 4px;
  border-bottom-color: transparent;
}

.ink__year-wrap {
  position: relative;
  display: inline-block;
}

.ink__year-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: text;
  border: none;
  outline: none;
  padding: 0;
  -moz-appearance: textfield;
}

.ink__year-input::-webkit-outer-spin-button,
.ink__year-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

[data-template="ink"] .moment-section {
  background-color: var(--color-paper);
}

/* ── Script Box template (sb__) ── */

.sb__card {
  --sb-cream:        #ffffff;
  --sb-ink:          #1a1816;
  --sb-photo-border: #1a1816;
  --sb-side:         9%;

  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  background: var(--sb-cream);
  color: var(--sb-ink);
  overflow: hidden;
}

/* ── Top stack: name, script, school+year ── */
.sb__top {
  position: absolute;
  top: 8%;
  left: var(--sb-side);
  right: var(--sb-side);
  text-align: center;
  z-index: 3;
  container-type: inline-size;
}

/* Graduate name in small refined caps. */
.sb__name {
  font-family: var(--font-mono);
  font-size: clamp(
    0.6rem,
    calc(70cqi / (max(var(--name-len, 12), 8) * 0.7)),
    1rem
  );
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--sb-ink);
  margin: 0 0 0.4em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* "graduate" cursive SVG header — fills the card width. */
.sb__header {
  display: block;
  margin: 0 auto;
}

.sb__header-img {
  display: block;
  width: 80%;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  color: var(--sb-ink);
}

/* School + year row, separated by a thin vertical pipe. */
.sb__meta {
  font-family: var(--font-mono);
  font-size: clamp(0.6rem, 1.85cqi, 0.9rem);
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sb-ink);
  margin: 0.7em 0 0;
  line-height: 1.4;
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  max-width: 100%;
}

.sb__meta-pipe {
  display: inline-block;
  width: 1px;
  height: 0.85em;
  background: currentColor;
  opacity: 0.55;
  flex-shrink: 0;
}

.sb__meta-school,
.sb__meta-class {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sb__degree {
  font-family: var(--font-mono);
  font-size: clamp(0.55rem, 1.65cqi, 0.8rem);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sb-ink);
  margin: 0.4em 0 0;
  line-height: 1.4;
  text-align: center;
  opacity: 0.85;
}

/* ── Photo zone: thin-bordered rectangle, lower portion of card. ── */
/* The padding creates breathing room between the border and the photo. */
.sb__photo-wrap {
  position: absolute;
  top: 27%;
  left: var(--sb-side);
  right: var(--sb-side);
  bottom: 6%;
  border: 1.5px solid var(--sb-photo-border);
  padding: 10px;
  background: var(--sb-cream);
  overflow: hidden;
  z-index: 1;
}

.sb__photo-wrap > div,
.sb__photo-wrap > div > div {
  width: 100%;
  height: 100%;
}

.sb__photo,
.sb__photo-placeholder {
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.28);
}

.sb__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  display: block;
}

.sb__photo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: #efe9da;
  gap: 0.5rem;
}

.sb__photo-label {
  display: block;
  position: relative;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.sb__card--editing .sb__photo {
  cursor: grab;
}

.sb__card--editing .sb__photo:active {
  cursor: grabbing;
}

.sb__photo-edit-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0);
  transition: background 0.2s;
  pointer-events: none;
}

.sb__photo-label:hover .sb__photo-edit-overlay {
  background: rgba(0, 0, 0, 0.35);
}

.sb__photo-label:hover .sb__photo-edit-overlay svg {
  opacity: 1;
}

.sb__photo-edit-overlay svg {
  opacity: 0;
  transition: opacity 0.2s;
  color: white;
}

/* ── Animations ── */
.sb__fade {
  animation: sbIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  opacity: 0;
}

.sb__d0 { animation-delay: 0s; }
.sb__d1 { animation-delay: 0.14s; }
.sb__d2 { animation-delay: 0.28s; }

@keyframes sbIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .sb__fade { animation: none; opacity: 1; transform: none; }
}

/* ── Inline edit affordances ── */
.sb__editable {
  cursor: text;
  border-bottom: 1.5px dashed rgba(99, 102, 241, 0.35);
  border-radius: 1px;
  transition: background 0.15s;
  display: inline-block;
}

@media (hover: hover) {
  .sb__editable:hover {
    background: rgba(99, 102, 241, 0.05);
    outline: 1px dashed rgba(99, 102, 241, 0.4);
    outline-offset: 3px;
    border-bottom-color: transparent;
  }
}

.sb__editable:focus,
.sb__editable:focus-within {
  background: rgba(99, 102, 241, 0.05);
  outline: 2px dashed rgba(99, 102, 241, 0.5);
  outline-offset: 4px;
  border-bottom-color: transparent;
}

.sb__year-wrap {
  position: relative;
  display: inline-block;
}

.sb__year-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: text;
  border: none;
  outline: none;
  padding: 0;
  -moz-appearance: textfield;
}

.sb__year-input::-webkit-outer-spin-button,
.sb__year-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

[data-template="script_box"] {
  --sb-cream: #ffffff;
}

[data-template="script_box"] .moment-section {
  background-color: var(--sb-cream);
}
/* ── Script Overlay template (so__) ── */

.so__card {
  --so-bg:        #ffffff;
  --so-ink:       #1a1816;
  --so-overlay:   #ffffff;
  --so-side:      6%;

  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  background: var(--so-bg);
  color: var(--so-ink);
  overflow: hidden;
  container-type: inline-size;
}

/* ── Photo fills the card with a thin white frame ── */
.so__photo-wrap {
  position: absolute;
  top: var(--so-side);
  left: var(--so-side);
  right: var(--so-side);
  bottom: var(--so-side);
  background: var(--so-bg);
  overflow: hidden;
  z-index: 1;
}

.so__photo-wrap > div,
.so__photo-wrap > div > div {
  width: 100%;
  height: 100%;
}

.so__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  display: block;
}

.so__photo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: #efe9da;
  gap: 0.5rem;
}

.so__photo-label {
  display: block;
  position: relative;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.so__card--editing .so__photo {
  cursor: grab;
}

.so__card--editing .so__photo:active {
  cursor: grabbing;
}

.so__photo-edit-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0);
  transition: background 0.2s;
  pointer-events: none;
}

.so__photo-label:hover .so__photo-edit-overlay {
  background: rgba(0, 0, 0, 0.35);
}

.so__photo-label:hover .so__photo-edit-overlay svg {
  opacity: 1;
}

.so__photo-edit-overlay svg {
  opacity: 0;
  transition: opacity 0.2s;
  color: white;
}

/* ── Soft gradient at the bottom for legibility of the white text ── */
.so__gradient {
  position: absolute;
  left: var(--so-side);
  right: var(--so-side);
  bottom: var(--so-side);
  height: 55%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.18) 50%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
  z-index: 2;
}

/* ── Overlay text stack ── */
.so__overlay {
  position: absolute;
  left: var(--so-side);
  right: var(--so-side);
  bottom: calc(var(--so-side) + 15%);
  z-index: 3;
  text-align: center;
  color: var(--so-overlay);
  padding: 0 4%;
  /* Allow drag events to reach the photo underneath. The descendant
     selector below is required because pointer-events does not cascade
     — children default back to `auto` and would still capture events.
     `.so__editable` overrides this when inline editing is enabled. */
  pointer-events: none;
}

.so__overlay * {
  pointer-events: none;
}

/* "graduate" cursive SVG header — overlays the photo. */
.so__header {
  margin-top: 10px;
  display: block;
}

.so__header-img {
  display: block;
  width: 100%;
  height: auto;
  color: var(--so-overlay);
  filter: drop-shadow(0 1px 8px rgba(0, 0, 0, 0.25));
}

.so__header-fallback {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(2.6rem, 13cqi, 5.6rem);
  color: var(--so-overlay);
  line-height: 1;
}

/* Graduate name in large display serif. */
.so__name {
  font-family: var(--font-serif);
  font-size: clamp(
    1rem,
    calc(60cqi / (max(var(--name-len, 12), 8) * 0.8)),
    2.6rem
  );
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--so-overlay);
  margin: 0;
  line-height: 1.05;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* School + year row, italic display serif. */
.so__meta {
  font-family: var(--font-serif);
  font-size: clamp(0.65rem, 3.6cqi, 1rem);
  color: var(--so-overlay);
  margin: 0.6em 0 0;
  line-height: 1.4;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 0.4em;
}

/* When degree is present, "Class of YEAR" wraps onto its own line below */
.so__meta:has(.so__degree:not(:empty)) .so__meta-classof {
  flex-basis: 100%;
  text-align: center;
}

.so__degree:empty { display: none; }
.so__degree:not(:empty)::before { content: ", "; }

/* ── Animations ── */
.so__fade {
  animation: soIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  opacity: 0;
}

.so__d0 { animation-delay: 0s; }
.so__d1 { animation-delay: 0.18s; }

@keyframes soIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .so__fade { animation: none; opacity: 1; transform: none; }
}

/* ── Inline edit affordances (light variant for dark-photo overlay) ── */
.so__editable {
  cursor: text;
  border-bottom: 1.5px dashed rgba(255, 255, 255, 0.5);
  border-radius: 1px;
  transition: background 0.15s;
  display: inline-block;
  pointer-events: auto;
}

@media (hover: hover) {
  .so__editable:hover {
    background: rgba(255, 255, 255, 0.1);
    outline: 1px dashed rgba(255, 255, 255, 0.55);
    outline-offset: 3px;
    border-bottom-color: transparent;
  }
}

.so__editable:focus,
.so__editable:focus-within {
  background: rgba(255, 255, 255, 0.12);
  outline: 2px dashed rgba(255, 255, 255, 0.7);
  outline-offset: 4px;
  border-bottom-color: transparent;
}

.so__year-wrap {
  position: relative;
  display: inline-block;
}

.so__year-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: text;
  border: none;
  outline: none;
  padding: 0;
  -moz-appearance: textfield;
}

.so__year-input::-webkit-outer-spin-button,
.so__year-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

[data-template="script_overlay"] .moment-section {
  background-color: #ffffff;
}
/* ── Simple template (sm__) ── */

.sm__card {
  --sm-bg:    #ffffff;
  --sm-ink:   #111111;
  --sm-muted: #444444;
  --sm-frame: 5%;

  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  background: var(--sm-bg);
  color: var(--sm-ink);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: var(--sm-frame) var(--sm-frame) calc(var(--sm-frame) * 0.9);
  box-sizing: border-box;
  font-family: var(--font-mono);
  container-type: inline-size;
}

/* ── Photo ── */
.sm__photo-wrap {
  flex: 1 1 auto;
  position: relative;
  width: 100%;
  min-height: 0;
  overflow: hidden;
  background: #f3f3f3;
}

.sm__photo-wrap > div,
.sm__photo-wrap > div > div {
  width: 100%;
  height: 100%;
}

.sm__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  display: block;
}

.sm__photo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: #f0f0f0;
  gap: 0.5rem;
}

.sm__photo-label {
  display: block;
  position: relative;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.sm__card--editing .sm__photo {
  cursor: grab;
}

.sm__card--editing .sm__photo:active {
  cursor: grabbing;
}

.sm__photo-edit-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0);
  transition: background 0.2s;
  pointer-events: none;
}

.sm__photo-label:hover .sm__photo-edit-overlay {
  background: rgba(0, 0, 0, 0.35);
}

.sm__photo-label:hover .sm__photo-edit-overlay svg {
  opacity: 1;
}

.sm__photo-edit-overlay svg {
  opacity: 0;
  transition: opacity 0.2s;
  color: white;
}

/* ── Footer ── */
.sm__footer {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 1.4cqi;
  flex-shrink: 0;
  padding-top: 4.5%;
  font-family: var(--font-mono);
  color: var(--sm-ink);
  min-width: 0;
  overflow: hidden;
}

.sm__name {
  font-size: clamp(0.55rem, 3.6cqi, 1.45rem);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}

.sm__meta {
  display: flex;
  flex-direction: column;
  gap: 0.25em;
  flex: 1 1 0;
  min-width: 0;
  font-size: clamp(0.45rem, 3cqi, 1.2rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.25;
  color: var(--sm-muted);
  text-transform: lowercase;
  text-align: right;
  white-space: normal;
  overflow-wrap: anywhere;
}

.sm__school,
.sm__class {
  display: block;
  min-width: 0;
}

.sm__school {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sm__degree {
  font-family: var(--font-mono);
  font-size: clamp(0.45rem, 3cqi, 1.2rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.25;
  color: var(--sm-muted);
  text-transform: lowercase;
  text-align: right;
  padding-top: 0.5em;
  white-space: normal;
  overflow-wrap: anywhere;
  flex-shrink: 0;
}

.sm__degree:empty { display: none; }

/* ── Year input ── */
.sm__year-wrap {
  position: relative;
  display: inline-block;
}

.sm__year-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: text;
  border: none;
  outline: none;
  padding: 0;
  -moz-appearance: textfield;
}

.sm__year-input::-webkit-outer-spin-button,
.sm__year-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ── Animations ── */
.sm__fade {
  animation: smIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  opacity: 0;
}

.sm__d1 { animation-delay: 0.05s; }
.sm__d2 { animation-delay: 0.35s; }

@keyframes smIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .sm__fade { animation: none; opacity: 1; transform: none; }
}

/* ── Inline edit affordances ── */
.sm__editable {
  cursor: text;
  border-bottom: 1.5px dashed rgba(99, 102, 241, 0.35);
  border-radius: 1px;
  transition: background 0.15s;
  display: inline-block;
}

@media (hover: hover) {
  .sm__editable:hover {
    background: rgba(99, 102, 241, 0.05);
    outline: 1px dashed rgba(99, 102, 241, 0.4);
    outline-offset: 3px;
    border-bottom-color: transparent;
  }
}

.sm__editable:focus,
.sm__editable:focus-within {
  background: rgba(99, 102, 241, 0.05);
  outline: 2px dashed rgba(99, 102, 241, 0.5);
  outline-offset: 4px;
  border-bottom-color: transparent;
}

[data-template="simple"] .moment-section {
  background-color: #ffffff;
}
.yearbook-page {
  background: #ffffff;
  font-family: var(--font-body);
  color: #000000;
  width: 100%;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  position: relative;
}

.yearbook-page-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 5% 6% 4%;
  box-sizing: border-box;
  max-width: none;
  margin: 0;
}

/* ─── Header bar ─── */
.yearbook-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 0.625rem;
  border-bottom: 2px solid #000;
  font-size: clamp(0.6rem, 2vw, 1.5rem);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 0.375rem;
  flex-shrink: 0;
}

.yearbook-header span {
  white-space: nowrap;
}

.yearbook-degree:empty { display: none; }
.yearbook-degree:not(:empty)::before { content: " · "; }

/* ─── Graduate Name ─── */
.yearbook-name-text {
  font-size: clamp(2.75rem, 13vw, 6.5rem);
  font-weight: 900;
  line-height: 0.88;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  word-break: break-word;
  margin-bottom: 1.25rem;
}

/* ─── Class of label ─── */
.yearbook-class-of {
  margin-bottom: 3%;
  flex-shrink: 0;
}

/* ─── Photo + Info ─── */
.yearbook-grid {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 3%;
  min-height: 0;
}

/* Photo wrapper — chains flex: 1 down to the image. Clips the scaled
   photo so zooming doesn't bleed outside the photo frame. */
.yearbook-photo-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.yearbook-photo-wrap > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.yearbook-photo-wrap > div > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.yearbook-photo-label {
  flex: 1;
  height: 100%;
}

.yearbook-photo {
  display: block;
  width: 100%;
  height: 100%;
  flex: 1;
  object-fit: cover;
  object-position: 50% 0%;
}

.yearbook-page--editing .yearbook-photo {
  cursor: grab;
}

.yearbook-page--editing .yearbook-photo:active {
  cursor: grabbing;
}

/* ─── Year wrap ─── */
.yearbook-year-wrap {
  flex-shrink: 0;
  padding-bottom: 0.625rem;
  border-bottom: 2px solid #000;
}

/* ─── Year SVG ─── */
.yearbook-year-svg {
  width: 100%;
  display: block;
  overflow: visible;
}

/* ─── Year wrapper (edit mode) ─── */
.yearbook-year-wrapper {
  position: relative;
  cursor: text;
  border-bottom: 1.5px dashed rgba(99, 102, 241, 0.35);
  border-radius: 1px;
  transition: background 0.15s;
}

@media (hover: hover) {
  .yearbook-year-wrapper:hover {
    background: rgba(99, 102, 241, 0.05);
    outline: 1px dashed rgba(99, 102, 241, 0.4);
    outline-offset: 3px;
    border-radius: 2px;
    border-bottom-color: transparent;
  }
}

.yearbook-year-wrapper:focus-within {
  background: rgba(99, 102, 241, 0.05);
  outline: 2px dashed rgba(99, 102, 241, 0.5);
  outline-offset: 4px;
  border-radius: 2px;
  border-bottom-color: transparent;
}

/* Invisible overlay input — captures keyboard input, never seen */
.yearbook-year-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: text;
  border: none;
  outline: none;
  padding: 0;
  -moz-appearance: textfield;
}

.yearbook-year-input::-webkit-outer-spin-button,
.yearbook-year-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}


/* ─── Animations ─── */
.yearbook-fade {
  animation: yearbookIn 0.65s ease-out forwards;
  opacity: 0;
}

.yearbook-d0 { animation-delay: 0s; }
.yearbook-d1 { animation-delay: 0.1s; }
.yearbook-d2 { animation-delay: 0.2s; }
.yearbook-d3 { animation-delay: 0.35s; }
.yearbook-d4 { animation-delay: 0.5s; }
.yearbook-d5 { animation-delay: 0.65s; }

@keyframes yearbookIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Photo placeholder (edit mode) ─── */
.yearbook-photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  flex: 1;
  height: 100%;
  background: #f0f0f0;
  filter: none;
}

/* ─── Gift divider ticker ─── */
/* ─── Template-scoped section backgrounds ─── */
[data-template="yearbook"] .moment-section {
  background-color: #ffffff;
}

/* ─── Photo edit overlay ─── */
.yearbook-photo-edit-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0);
  transition: background 0.2s;
  pointer-events: none;
}

.yearbook-photo-label:hover .yearbook-photo-edit-overlay {
  background: rgba(0, 0, 0, 0.35);
}

.yearbook-photo-label:hover .yearbook-photo-edit-overlay svg {
  opacity: 1;
}

.yearbook-photo-edit-overlay svg {
  opacity: 0;
  transition: opacity 0.2s;
  color: white;
}

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */