/* Enhancements: flexible media, congratulations modal and saved-message slider. */
@media (min-width: 701px) {
  html, body {
    height: auto !important;
    min-height: 100%;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  /* Horizontal layout: the WHOLE timeline, including years and scrollbar,
     is at most 40% of the viewport height. Equal automatic margins center
     it between the intro and the bottom navigation, not in the viewport.
     Flex-shrink leaves both neighbours visible on short screens. */
  .page {
    --timeline-height-limit: 40vh;
    --timeline-block-gap: clamp(12px, 2vh, 24px);
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0;
    row-gap: var(--timeline-block-gap);
  }

  @supports (height: 100dvh) {
    .page {
      --timeline-height-limit: 40dvh;
      --timeline-block-gap: clamp(12px, 2dvh, 24px);
    }
  }

  #history-page > .timeline-shell {
    flex: 0 1 var(--timeline-height-limit);
    height: var(--timeline-height-limit);
    max-height: var(--timeline-height-limit);
    min-height: 0;
    margin-block: auto;
  }

  #history-page > .bottom-nav {
    /* Shared row-gap supplies the space above the navigation. */
    padding-top: 0;
  }

  .event-card {
    gap: 18px !important;
  }

  .event-copy {
    flex: 0 1 auto;
    min-height: 0;
    max-height: calc(100% - 116px);
    overflow-y: auto !important;
    overflow-x: hidden;
  }

  .media-slot {
    flex: 1 1 auto !important;
    width: 100%;
    height: auto !important;
    min-height: 98px !important;
    margin-top: 0 !important;
  }

  .media-top .media-slot {
    order: -1;
  }
}

@media (min-width: 701px) and (max-height: 800px) {
  .event-card { gap: 14px !important; }
  .event-copy { max-height: calc(100% - 88px); }
  .media-slot { min-height: 74px !important; }
}

/* The 40vh rail leaves less room on landscape / short screens.
   Reduce only internal spacing and the media minimum; never collapse the
   scrollable text to zero. Font sizes and horizontal card widths are unchanged. */
@media (min-width: 701px) and (max-height: 650px) {
  .timeline-track { --heading-space: 56px; }
  .event-card, .interlude-card { padding: 12px; gap: 10px !important; }
  .event-copy { max-height: calc(100% - min(42px, 30%) - 10px); }
  .media-slot { min-height: min(42px, 30%) !important; }
}

@media (max-width: 700px) {
  .event-card { gap: 20px !important; }
  .media-slot {
    margin-top: 0 !important;
    flex: none !important;
  }
}

.celebration-card {
  background:
    radial-gradient(circle at 82% 18%, rgba(255,255,255,.18), transparent 28%),
    linear-gradient(145deg, rgba(77,104,255,.34), rgba(255,255,255,.035));
  border-color: rgba(255,255,255,.2);
}

.celebration-card .event-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.event-kicker {
  display: inline-block;
  margin-bottom: 10px;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
}

.celebration-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
}

.primary-action,
.secondary-action,
.modal-submit,
.modal-close,
.greetings-arrow {
  appearance: none;
  border: 0;
  font: inherit;
  cursor: pointer;
}

.primary-action,
.modal-submit {
  min-height: 42px;
  padding: 10px 16px;
  border-radius: 999px;
  background: #fff;
  color: #000648;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 600;
  transition: transform .18s ease, background-color .18s ease;
}

.primary-action:hover,
.modal-submit:hover {
  transform: translateY(-1px);
  background: #eef1ff;
}

.secondary-action {
  min-height: 42px;
  padding: 10px 4px;
  background: transparent;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.celebration-media {
  position: relative;
  display: grid;
  place-content: center;
  isolation: isolate;
  color: #fff;
  background:
    linear-gradient(rgba(0,6,72,.2), rgba(0,6,72,.58)),
    radial-gradient(circle at 35% 30%, #5a73ff 0 12%, transparent 13%),
    linear-gradient(135deg, #1f36bd, #0c166c 62%, #000648);
}

.celebration-media::before,
.celebration-media::after {
  content: '';
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.23);
}

.celebration-media::before {
  width: 150px;
  height: 150px;
}

.celebration-media::after {
  width: 210px;
  height: 210px;
  opacity: .55;
}

.celebration-number {
  font-size: clamp(58px, 7vw, 100px);
  line-height: .9;
  font-weight: 600;
  letter-spacing: -.07em;
}

.celebration-caption {
  margin-top: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-align: center;
}

/* Saved congratulations section below the timeline. */
.greetings-section {
  position: relative;
  z-index: 1;
  min-height: 520px;
  padding: 72px 20px 84px;
  color: #fff;
  background:
    radial-gradient(circle at 90% 15%, rgba(73,98,255,.2), transparent 32%),
    #040a58;
  border-top: 1px solid rgba(255,255,255,.12);
}

.greetings-inner {
  width: min(1600px, 100%);
  margin: 0 auto;
}

.greetings-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
}

.greetings-eyebrow {
  display: block;
  margin-bottom: 10px;
  color: rgba(255,255,255,.62);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.greetings-header h2 {
  margin: 0;
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1;
  letter-spacing: -.045em;
  font-weight: 600;
}

.greetings-header p {
  max-width: 560px;
  margin: 14px 0 0;
  color: rgba(255,255,255,.72);
  font-size: 15px;
  line-height: 1.55;
}

.greetings-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.greetings-arrow {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 50%;
  color: #fff;
  background: transparent;
  font-size: 21px;
  transition: background-color .18s ease, opacity .18s ease;
}

.greetings-arrow:hover:not(:disabled) {
  background: rgba(255,255,255,.12);
}

.greetings-arrow:disabled {
  opacity: .3;
  cursor: default;
}

.greetings-viewport {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
  cursor: grab;
  user-select: none;
}

.greetings-viewport::-webkit-scrollbar { display: none; }
.greetings-viewport.is-dragging { cursor: grabbing; }

.greetings-track {
  display: flex;
  align-items: stretch;
  gap: 16px;
  width: max-content;
  min-width: 100%;
  padding: 4px 0 12px;
}

.greeting-card {
  flex: 0 0 clamp(280px, 28vw, 420px);
  min-height: 430px;
  scroll-snap-align: start;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 12px;
  background: rgba(255,255,255,.045);
}

.greeting-media {
  flex: 1 1 auto;
  min-height: 220px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 76% 22%, rgba(255,255,255,.16), transparent 28%),
    linear-gradient(140deg, #314de0, #111d83 68%, #060b51);
}

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

.greeting-media-placeholder {
  font-size: 54px;
  font-weight: 600;
  letter-spacing: -.06em;
  opacity: .9;
}

.greeting-copy {
  flex: 0 0 auto;
  padding: 22px;
  background: rgba(0,6,72,.68);
  backdrop-filter: blur(10px);
}

.greeting-name {
  margin: 0 0 10px;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 600;
}

.greeting-message {
  margin: 0;
  color: rgba(255,255,255,.82);
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.greetings-empty {
  display: grid;
  min-height: 300px;
  place-items: center;
  border: 1px dashed rgba(255,255,255,.22);
  border-radius: 12px;
  color: rgba(255,255,255,.65);
  text-align: center;
  padding: 36px;
}

.greetings-empty[hidden] { display: none; }

/* Modal */
.congrats-modal[hidden] { display: none; }

.congrats-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 20px;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,2,36,.78);
  backdrop-filter: blur(9px);
}

.modal-panel {
  position: relative;
  z-index: 1;
  width: min(620px, 100%);
  max-height: min(860px, calc(100dvh - 40px));
  overflow-y: auto;
  padding: 34px;
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 16px;
  color: #fff;
  background: #090f68;
  box-shadow: 0 40px 120px rgba(0,0,0,.48);
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 50%;
  color: #fff;
  background: transparent;
  font-size: 24px;
  line-height: 1;
}

.modal-panel h2 {
  margin: 8px 50px 10px 0;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.04;
  letter-spacing: -.04em;
  font-weight: 600;
}

.modal-intro {
  margin: 0 0 26px;
  color: rgba(255,255,255,.7);
  font-size: 14px;
  line-height: 1.5;
}

.congrats-form {
  display: grid;
  gap: 18px;
}

.form-field {
  display: grid;
  gap: 8px;
}

.form-field label,
.file-field-label {
  font-size: 13px;
  line-height: 1.2;
  font-weight: 600;
}

.form-field input[type='text'],
.form-field textarea {
  width: 100%;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 9px;
  padding: 13px 14px;
  color: #fff;
  background: rgba(255,255,255,.06);
  font: inherit;
  font-size: 15px;
  outline: none;
}

.form-field textarea {
  min-height: 132px;
  resize: vertical;
  line-height: 1.48;
}

.form-field input:focus,
.form-field textarea:focus {
  border-color: rgba(255,255,255,.72);
  box-shadow: 0 0 0 3px rgba(255,255,255,.08);
}

.field-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: rgba(255,255,255,.56);
  font-size: 11px;
}

.file-field {
  position: relative;
  display: grid;
  gap: 9px;
}

.file-field input[type='file'] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.file-drop {
  min-height: 112px;
  display: grid;
  place-items: center;
  padding: 18px;
  border: 1px dashed rgba(255,255,255,.3);
  border-radius: 10px;
  color: rgba(255,255,255,.72);
  background: rgba(255,255,255,.035);
  text-align: center;
  cursor: pointer;
}

.file-drop:hover { background: rgba(255,255,255,.065); }

.file-preview {
  overflow: hidden;
  border-radius: 10px;
  background: rgba(0,0,0,.18);
}

.file-preview[hidden] { display: none; }
.file-preview img,
.file-preview video {
  width: 100%;
  max-height: 240px;
  object-fit: contain;
  display: block;
}

.form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.form-status {
  min-height: 20px;
  margin: 0;
  color: rgba(255,255,255,.75);
  font-size: 13px;
}

.form-status.is-error { color: #ffb2b2; }
.form-status.is-success { color: #b9ffc7; }

body.modal-is-open { overflow: hidden !important; }

@media (max-width: 700px) {
  .greetings-section { padding: 48px 20px 60px; }
  .greetings-header { align-items: flex-start; flex-direction: column; }
  .greetings-controls { width: 100%; justify-content: flex-end; }
  .greeting-card { flex-basis: calc(100vw - 48px); min-height: 390px; }
  .greeting-media { min-height: 190px; }
  .modal-panel { padding: 26px 20px; border-radius: 12px; }
  .form-actions { align-items: stretch; flex-direction: column-reverse; }
  .modal-submit { width: 100%; }
}


/* Site-wide typography update: all text is 70% of its previous size (-30%).
   Only font-size is overridden. The slider's 40dvh limit, card dimensions,
   media fill, spacing, controls and responsive breakpoints stay unchanged.
   Keep this block last so it also overrides the timeline's inline stylesheet.
   Text without an explicit size (empty state, file label, arrows) inherits 70%.
   No zoom/transform and no scaling of nested elements a second time. */
body { font-size: 70%; }
.intro h1 { font-size: clamp(29.4px, 3.01vw, 43.4px); }
.intro p { font-size: 14.7px; }
.year-heading > p { font-size: 12.6px; }
.year-title h2 { font-size: 43.4px; }
.event-copy h3 { font-size: 16.8px; }
.event-subtitle { font-size: 10.5px; }
.event-description { font-size: 9.8px; }
.media-label { font-size: 7px; }
.interlude-kicker { font-size: 7.7px; }
.interlude-card h3 { font-size: 19.6px; }
.interlude-card p { font-size: 9.8px; }
.interlude-tag { font-size: 7.7px; }
.year-button { font-size: 9.8px; }
@media (min-width: 701px) and (max-width: 1099px) {
  .intro h1 { font-size: 32.2px; }
  .year-title h2 { font-size: 36.4px; }
  .interlude-card h3 { font-size: 16.8px; }
}
@media (min-width: 701px) and (max-height: 800px) {
  .intro h1 { font-size: 30.8px; }
  .intro p { font-size: 12.6px; }
  .year-title h2 { font-size: 33.6px; }
  .year-heading > p { font-size: 11.2px; }
}
@media (min-width: 701px) and (max-height: 600px) {
  .intro h1 { font-size: 23.8px; }
  .intro p { font-size: 11.2px; }
  .year-heading > p { font-size: 9.8px; }
  .year-title h2 { font-size: 25.2px; }
  .event-copy h3 { font-size: 14px; }
}
@media (max-width: 700px) {
  .intro h1 { font-size: 26.6px; }
  .intro p { font-size: 11.2px; }
  .year-heading > p { font-size: 11.2px; }
  .year-title h2 { font-size: 29.4px; }
  .event-copy h3 { font-size: 15.4px; }
  .event-description, .interlude-card p { font-size: 9.1px; }
  .interlude-card h3 { font-size: 16.8px; }
}
@media (min-width: 701px) {
  .intro h1 { font-size: clamp(28px, 2.66vw, 37.8px); }
  .intro p { font-size: 12.6px; }
  .year-heading > p { font-size: 11.2px; }
  .year-title h2 { font-size: 35px; }
}
@media (min-width: 701px) and (max-width: 1099px) {
  .intro h1 { font-size: 29.4px; }
  .year-title h2 { font-size: 32.2px; }
}
@media (min-width: 701px) and (max-height: 820px) {
  .intro h1 { font-size: 25.2px; }
  .intro p { font-size: 10.5px; }
  .year-heading > p { font-size: 9.1px; }
  .year-title h2 { font-size: 25.2px; }
  .event-copy h3 { font-size: 14px; }
  .event-subtitle { font-size: 9.1px; }
  .event-description, .interlude-card p { font-size: 9.1px; }
}

.event-kicker { font-size: 7.7px; }
.primary-action, .modal-submit { font-size: 9.8px; }
.secondary-action { font-size: 9.1px; }
.celebration-number { font-size: clamp(40.6px, 4.9vw, 70px); }
.celebration-caption { font-size: 7.7px; }
.greetings-eyebrow { font-size: 8.4px; }
.greetings-header h2 { font-size: clamp(23.8px, 2.8vw, 39.2px); }
.greetings-header p { font-size: 10.5px; }
.greetings-arrow { font-size: 14.7px; }
.greeting-media-placeholder { font-size: 37.8px; }
.greeting-name { font-size: 12.6px; }
.greeting-message { font-size: 9.8px; }
.modal-close { font-size: 16.8px; }
.modal-panel h2 { font-size: clamp(21px, 2.8vw, 30.8px); }
.modal-intro { font-size: 9.8px; }
.form-field label, .file-field-label { font-size: 9.1px; }
.form-field input[type="text"], .form-field textarea { font-size: 10.5px; }
.field-meta { font-size: 7.7px; }
.form-status { font-size: 9.1px; }