/* =========================================================
   BASE
========================================================= */

:root {
  --red: #d93825;
  --red-dark: #b82a1c;

  --ink: #161916;
  --ink-soft: #292d27;

  --paper: #e8e2ca;
  --paper-light: #f1ecd9;
  --paper-dark: #cec6a9;

  --green: #405544;
  --green-dark: #27372d;

  --line: rgba(22, 25, 22, 0.75);

  --sans: "Manrope", Arial, sans-serif;
  --serif: "Playfair Display", Georgia, serif;

  --container: 1240px;
}


* {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {
  margin: 0;

  color: var(--ink);
  background: var(--paper);

  font-family: var(--sans);

  overflow-x: hidden;
}


body.locked {
  overflow: hidden;
}


img {
  display: block;
  width: 100%;
}


button,
input,
textarea,
select {
  font: inherit;
}


button,
a {
  -webkit-tap-highlight-color: transparent;
}


a {
  color: inherit;
}


::selection {
  color: var(--paper);
  background: var(--red);
}


/* =========================================================
   PAPER TEXTURE
========================================================= */

body::before {
  content: "";

  position: fixed;
  inset: 0;

  pointer-events: none;

  z-index: 100;

  opacity: 0.13;

  background-image:
    radial-gradient(
      rgba(20, 20, 15, 0.35) 0.55px,
      transparent 0.8px
    );

  background-size: 5px 5px;

  mix-blend-mode: multiply;
}


.paper-texture {
  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 3px,
      rgba(0, 0, 0, 0.018) 4px
    );
}


/* =========================================================
   OPENING
========================================================= */

.opening {
  position: fixed;

  inset: 0;

  z-index: 1000;

  min-height: 100dvh;

  overflow: hidden;

  background: var(--red);

  color: var(--paper-light);

  transition:
    transform 1.1s cubic-bezier(.76, 0, .24, 1),
    opacity 0.7s ease;
}


.opening.is-opening {
  transform: translateY(-105%);
}


.opening__paper-noise {
  position: absolute;

  inset: 0;

  opacity: 0.23;

  pointer-events: none;

  background:
    repeating-radial-gradient(
      circle at 10% 20%,
      transparent 0,
      transparent 3px,
      rgba(0, 0, 0, 0.22) 4px,
      transparent 5px
    );

  mix-blend-mode: multiply;
}


.opening__giant-type {
  position: absolute;

  top: -8vw;
  left: -2vw;

  font-family: serif;

  font-size: clamp(170px, 35vw, 560px);

  font-weight: 900;

  line-height: 0.8;

  letter-spacing: -0.12em;

  color: var(--paper);

  opacity: 0.9;

  white-space: nowrap;
}


.opening__top {
  position: absolute;

  z-index: 4;

  top: max(22px, env(safe-area-inset-top));
  left: 28px;
  right: 28px;

  display: flex;
  justify-content: space-between;

  padding-bottom: 10px;

  border-bottom: 1px solid rgba(239, 234, 215, 0.7);

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 0.2em;
}


.opening__number {
  position: absolute;

  z-index: 5;

  right: 28px;
  top: 72px;

  writing-mode: vertical-rl;

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 0.2em;
}


.opening__portrait {
  position: absolute;

  z-index: 2;

  width: min(62vw, 620px);

  left: 50%;
  top: 49%;

  transform: translate(-50%, -50%);
}


.opening__portrait-frame {
  position: relative;

  aspect-ratio: 0.78;

  overflow: hidden;

  background: var(--green);
}


.opening__portrait img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  filter:
    saturate(0.75)
    contrast(1.12)
    sepia(0.15);
}


.opening__halftone {
  position: absolute;

  inset: 0;

  opacity: 0.18;

  background-image:
    radial-gradient(
      var(--ink) 0.8px,
      transparent 0.8px
    );

  background-size: 4px 4px;

  mix-blend-mode: multiply;
}


.opening__copy {
  position: absolute;

  z-index: 4;

  left: clamp(22px, 6vw, 90px);
  bottom: 115px;
}


.opening__jp {
  margin: 0 0 6px;

  font-family: serif;

  font-size: 17px;

  letter-spacing: 0.15em;
}


.opening__copy h1 {
  margin: 0;

  max-width: 500px;

  font-size: clamp(50px, 9vw, 116px);

  line-height: 0.78;

  letter-spacing: -0.085em;

  font-weight: 800;
}


.opening__copy h1 span {
  display: inline-block;

  font-family: var(--serif);

  font-style: italic;

  font-weight: 600;
}


.opening__subtitle {
  margin: 18px 0 0;

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 0.35em;
}


.opening__side-copy {
  position: absolute;

  z-index: 4;

  right: 28px;
  bottom: 120px;

  display: flex;

  gap: 15px;

  writing-mode: vertical-rl;

  font-size: 9px;

  font-weight: 800;

  letter-spacing: 0.2em;
}


.opening__pull {
  position: absolute;

  z-index: 10;

  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));

  transform: translateX(-50%);

  display: flex;

  align-items: center;

  gap: 11px;

  cursor: grab;

  touch-action: none;

  user-select: none;
}


.opening__pull:active {
  cursor: grabbing;
}


.opening__pull-line {
  width: 34px;
  height: 1px;

  background: currentColor;
}


.opening__pull-handle {
  display: grid;

  place-items: center;

  width: 42px;
  height: 42px;

  color: var(--red);

  background: var(--paper);

  border: 1px solid var(--paper);

  font-size: 20px;

  transition:
    transform 0.25s ease,
    background 0.25s ease;
}


.opening__pull span {
  font-size: 8px;

  font-weight: 800;

  letter-spacing: 0.17em;

  white-space: nowrap;
}


/* =========================================================
   COMMON
========================================================= */

.site {
  overflow: hidden;
}


.section {
  position: relative;

  padding:
    clamp(80px, 11vw, 150px)
    max(24px, calc((100vw - var(--container)) / 2));
}


.eyebrow,
.issue-label {
  margin: 0;

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 0.25em;
}


.jp-label {
  margin: 0;

  font-family: serif;

  font-size: 14px;

  letter-spacing: 0.12em;
}


.reveal {
  opacity: 0;

  transform: translateY(35px);

  transition:
    opacity 0.8s ease,
    transform 0.8s cubic-bezier(.2, .7, .2, 1);
}


.reveal.is-visible {
  opacity: 1;

  transform: translateY(0);
}


/* =========================================================
   HERO
========================================================= */

.hero {
  min-height: 100svh;

  padding-top: 26px;

  background: var(--paper);
}


.hero__header {
  position: relative;

  z-index: 2;

  display: flex;

  justify-content: space-between;

  padding-bottom: 12px;

  border-bottom: 2px solid var(--ink);

  font-size: 9px;

  font-weight: 800;

  letter-spacing: 0.2em;
}


.hero__layout {
  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0, 0.8fr)
    minmax(300px, 1.25fr)
    minmax(200px, 0.7fr);

  align-items: center;

  gap: clamp(20px, 4vw, 60px);

  min-height: 76svh;

  padding: 50px 0 70px;
}


.hero__left {
  position: relative;

  z-index: 4;
}


.hero__names {
  position: relative;

  z-index: 3;

  margin: 15px -90px 30px 0;

  font-size: clamp(72px, 10vw, 150px);

  line-height: 0.73;

  letter-spacing: -0.085em;

  text-transform: uppercase;
}


.hero__names em {
  display: block;

  margin-left: 0.5em;

  color: var(--red);

  font-family: var(--serif);

  font-size: 0.62em;

  font-weight: 600;

  text-transform: none;
}


.hero__date {
  display: flex;

  align-items: center;

  gap: 20px;
}


.hero__date strong {
  font-size: 15px;
}


.hero__date span {
  font-size: 9px;

  font-weight: 700;

  letter-spacing: 0.2em;
}


.hero__image {
  position: relative;

  margin: 0;

  transform: rotate(-1.3deg);
}


.hero__image::before {
  content: "";

  position: absolute;

  z-index: -1;

  inset: 12px -12px -12px 12px;

  background: var(--red);
}


.hero__image img {
  aspect-ratio: 0.78;

  object-fit: cover;

  filter:
    saturate(0.8)
    contrast(1.07)
    sepia(0.08);
}


.hero__image figcaption {
  position: absolute;

  left: -18px;
  bottom: 28px;

  padding: 7px 10px;

  color: var(--paper);

  background: var(--ink);

  font-size: 8px;

  font-weight: 800;

  letter-spacing: 0.14em;
}


.hero__right {
  align-self: end;

  padding-bottom: 60px;
}


.hero__right > p {
  max-width: 240px;

  margin: 22px 0 0;

  font-family: var(--serif);

  font-size: 17px;

  line-height: 1.55;
}


.speech {
  position: relative;

  display: inline-block;

  padding: 24px 27px;

  background: var(--paper-light);

  border: 3px solid var(--ink);

  transform: rotate(3deg);

  box-shadow: 7px 7px 0 var(--ink);
}


.speech::after {
  content: "";

  position: absolute;

  left: 20px;
  bottom: -24px;

  width: 25px;
  height: 25px;

  background: var(--paper-light);

  border-left: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);

  transform: skewY(-40deg);
}


.speech__small {
  display: block;

  color: var(--red);

  font-size: 9px;

  font-weight: 800;

  letter-spacing: 0.2em;
}


.speech strong {
  display: block;

  margin-top: 5px;

  font-size: 29px;

  line-height: 0.95;

  text-transform: uppercase;
}


.hero__vertical-text {
  position: absolute;

  right: 9px;
  top: 130px;

  writing-mode: vertical-rl;

  font-family: serif;

  font-size: 12px;

  letter-spacing: 0.18em;
}


.hero__ticker {
  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  overflow: hidden;

  padding: 12px 0;

  color: var(--paper);

  background: var(--ink);

  white-space: nowrap;
}


.hero__ticker-track {
  width: max-content;

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 0.2em;

  animation: ticker 22s linear infinite;
}


@keyframes ticker {
  to {
    transform: translateX(-50%);
  }
}


/* =========================================================
   INTRO
========================================================= */

.intro {
  background: var(--green-dark);

  color: var(--paper-light);
}


.section-number {
  position: absolute;

  right: 4vw;
  top: 30px;

  color: rgba(239, 234, 215, 0.12);

  font-size: clamp(120px, 20vw, 280px);

  font-weight: 800;

  line-height: 1;
}


.intro__grid {
  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns: 1.1fr 0.9fr;

  gap: 10vw;
}


.intro__title h2 {
  margin: 20px 0 0;

  max-width: 690px;

  font-size: clamp(55px, 8vw, 115px);

  line-height: 0.87;

  letter-spacing: -0.07em;

  text-transform: uppercase;
}


.intro__title em {
  color: var(--red);

  font-family: var(--serif);

  font-weight: 600;

  text-transform: none;
}


.intro__copy {
  align-self: end;

  max-width: 450px;

  font-family: var(--serif);

  font-size: 17px;

  line-height: 1.65;
}


.intro__lead {
  font-size: 26px;

  line-height: 1.3;
}


/* =========================================================
   STORY
========================================================= */

.story {
  background: var(--paper-light);
}


.story__heading {
  display: grid;

  grid-template-columns: auto 1fr auto;

  align-items: end;

  gap: 25px;

  margin-bottom: 55px;

  border-bottom: 3px solid var(--ink);
}


.story__heading > span:first-child {
  padding-bottom: 16px;

  font-size: 9px;

  font-weight: 800;

  letter-spacing: 0.2em;
}


.story__heading h2 {
  margin: 0;

  font-size: clamp(70px, 11vw, 160px);

  line-height: 0.68;

  letter-spacing: -0.08em;
}


.story__jp {
  padding-bottom: 14px;

  font-family: serif;

  font-size: 25px;
}


.comic-grid {
  display: grid;

  grid-template-columns: 1.2fr 0.75fr 0.8fr;

  grid-template-rows: auto auto;

  gap: 10px;
}


.comic-panel {
  position: relative;

  margin: 0;

  overflow: hidden;

  min-height: 310px;

  border: 3px solid var(--ink);

  background: var(--paper);
}


.comic-panel img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  filter:
    grayscale(0.25)
    contrast(1.12)
    saturate(0.7);
}


.comic-panel::after {
  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  opacity: 0.16;

  background-image:
    radial-gradient(
      var(--ink) 0.75px,
      transparent 0.75px
    );

  background-size: 4px 4px;
}


.comic-panel--large {
  grid-row: span 2;

  min-height: 640px;
}


.comic-panel--wide {
  grid-column: span 2;

  min-height: 320px;
}


.comic-panel figcaption,
.comic-panel__caption {
  position: absolute;

  z-index: 3;

  left: 12px;
  bottom: 12px;

  padding: 6px 9px;

  color: var(--paper);

  background: var(--ink);

  font-size: 8px;

  font-weight: 800;

  letter-spacing: 0.16em;
}


.comic-panel--text {
  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  padding: 30px;

  background: var(--red);

  color: var(--paper);
}


.comic-panel--text::after,
.comic-panel--bubble::after {
  display: none;
}


.comic-panel__jp {
  position: absolute;

  right: 18px;
  top: 18px;

  writing-mode: vertical-rl;

  font-family: serif;

  font-size: 21px;
}


.comic-panel--text strong {
  font-size: clamp(40px, 5vw, 70px);

  line-height: 0.9;

  text-transform: uppercase;
}


.comic-panel--text p {
  max-width: 280px;

  font-family: var(--serif);

  line-height: 1.45;
}


.comic-panel--bubble {
  display: grid;

  place-items: center;

  padding: 25px;

  background: var(--paper);
}


.comic-bubble {
  position: relative;

  padding: 35px 28px;

  border: 3px solid var(--ink);

  border-radius: 50%;

  background: var(--paper-light);

  text-align: center;

  font-weight: 800;

  font-size: 23px;

  line-height: 1.05;

  transform: rotate(-5deg);
}


/* =========================================================
   DATE
========================================================= */

.date-section {
  min-height: 90svh;

  display: grid;

  place-items: center;

  color: var(--paper);

  background: var(--red);

  overflow: hidden;
}


.date-section__jp {
  position: absolute;

  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);

  color: rgba(239, 234, 215, 0.1);

  font-family: serif;

  font-size: clamp(180px, 45vw, 650px);

  white-space: nowrap;
}


.date-section__content {
  position: relative;

  z-index: 2;

  text-align: center;
}


.date-section__number {
  margin-top: 15px;

  font-size: clamp(180px, 35vw, 500px);

  font-weight: 800;

  line-height: 0.72;

  letter-spacing: -0.1em;
}


.date-section h2 {
  margin: 10px 0 0;

  font-size: clamp(50px, 10vw, 120px);

  line-height: 0.9;
}


.date-section__year {
  margin-top: 10px;

  font-family: var(--serif);

  font-size: clamp(32px, 5vw, 60px);

  font-style: italic;
}


.date-section__line {
  width: 1px;
  height: 60px;

  margin: 25px auto;

  background: currentColor;
}


.date-section__text {
  margin: 0;

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 0.3em;
}


/* =========================================================
   COUNTDOWN
========================================================= */

.countdown-section {
  display: grid;

  grid-template-columns: 0.9fr 1.1fr;

  align-items: end;

  gap: 7vw;

  background: var(--paper);
}


.countdown-section__title span {
  font-family: serif;

  font-size: 17px;
}


.countdown-section__title h2 {
  margin: 12px 0 0;

  font-size: clamp(60px, 9vw, 120px);

  line-height: 0.82;

  letter-spacing: -0.07em;

  text-transform: uppercase;
}


.countdown {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  border-top: 3px solid var(--ink);
  border-left: 3px solid var(--ink);
}


.countdown > div {
  padding: 30px 22px;

  border-right: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
}


.countdown strong {
  display: block;

  color: var(--red);

  font-size: clamp(55px, 7vw, 90px);

  line-height: 0.85;

  letter-spacing: -0.08em;
}


.countdown span {
  display: block;

  margin-top: 10px;

  font-size: 9px;

  font-weight: 800;

  letter-spacing: 0.15em;

  text-transform: uppercase;
}


/* =========================================================
   TIMELINE
========================================================= */

.timeline-section {
  color: var(--paper);

  background: var(--ink);
}


.section-heading {
  display: grid;

  grid-template-columns: auto 1fr auto;

  align-items: end;

  gap: 25px;

  padding-bottom: 30px;

  border-bottom: 1px solid rgba(239, 234, 215, 0.4);
}


.section-heading > span {
  font-size: 9px;

  font-weight: 800;

  letter-spacing: 0.2em;
}


.section-heading h2 {
  margin: 0;

  color: var(--paper);

  font-size: clamp(70px, 10vw, 130px);

  line-height: 0.75;

  letter-spacing: -0.07em;

  text-transform: uppercase;
}


.timeline {
  margin-top: 40px;
}


.timeline__item {
  display: grid;

  grid-template-columns: 0.25fr 0.8fr 1fr;

  gap: 30px;

  align-items: start;

  padding: 35px 0;

  border-bottom: 1px solid rgba(239, 234, 215, 0.28);
}


.timeline__index {
  color: var(--red);

  font-size: 11px;

  font-weight: 800;
}


.timeline__time {
  font-size: clamp(38px, 5vw, 65px);

  line-height: 0.9;

  letter-spacing: -0.05em;
}


.timeline__copy h3 {
  margin: 0 0 8px;

  font-size: 19px;

  text-transform: uppercase;
}


.timeline__copy p {
  max-width: 450px;

  margin: 0;

  color: rgba(239, 234, 215, 0.72);

  font-family: var(--serif);

  line-height: 1.5;
}


/* =========================================================
   LOCATION
========================================================= */

.location-section {
  display: grid;

  grid-template-columns: 1.25fr 0.75fr;

  gap: 0;

  padding: 0;

  background: var(--paper-light);
}


.location-section__image {
  position: relative;

  min-height: 780px;

  overflow: hidden;
}


.location-section__image img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  filter:
    saturate(0.7)
    contrast(1.08);
}


.location-section__image::after {
  content: "";

  position: absolute;

  inset: 0;

  opacity: 0.12;

  background-image:
    radial-gradient(
      var(--ink) 0.7px,
      transparent 0.7px
    );

  background-size: 4px 4px;
}


.location-section__image span {
  position: absolute;

  z-index: 3;

  left: 20px;
  top: 20px;

  padding: 8px 10px;

  color: var(--paper);

  background: var(--ink);

  font-size: 8px;

  font-weight: 800;

  letter-spacing: 0.15em;
}


.location-section__info {
  display: flex;

  flex-direction: column;

  justify-content: center;

  padding: clamp(50px, 7vw, 110px);
}


.location-section__info h2 {
  margin: 15px 0 20px;

  font-size: clamp(55px, 7vw, 100px);

  line-height: 0.82;

  letter-spacing: -0.07em;

  text-transform: uppercase;
}


.location-section__info > p:not(.eyebrow) {
  font-family: var(--serif);

  font-size: 18px;
}


.comic-button {
  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 20px;

  width: 100%;

  max-width: 340px;

  margin-top: 30px;

  padding: 17px 18px;

  color: var(--paper);

  background: var(--red);

  border: 2px solid var(--ink);

  box-shadow: 5px 5px 0 var(--ink);

  text-decoration: none;

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 0.15em;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}


.comic-button:hover {
  transform: translate(3px, 3px);

  box-shadow: 2px 2px 0 var(--ink);
}


.comic-button b {
  font-size: 22px;
}


/* =========================================================
   DETAILS
========================================================= */

.details {
  background: var(--paper);
}


.details__heading {
  display: flex;

  align-items: flex-end;

  gap: 25px;

  margin-bottom: 50px;
}


.details__heading > span {
  color: var(--red);

  font-size: 14px;

  font-weight: 800;
}


.details__heading h2 {
  margin: 0;

  font-size: clamp(65px, 9vw, 120px);

  line-height: 0.82;

  letter-spacing: -0.07em;

  text-transform: uppercase;
}


.details__grid {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 10px;
}


.detail-card {
  position: relative;

  min-height: 430px;

  padding: 30px;

  border: 3px solid var(--ink);

  background: var(--paper-light);
}


.detail-card__number {
  display: block;

  margin-bottom: 80px;

  color: var(--red);

  font-size: 11px;

  font-weight: 800;
}


.detail-card h3 {
  margin: 10px 0 20px;

  font-size: 37px;

  line-height: 0.95;

  text-transform: uppercase;
}


.detail-card > p:last-of-type {
  max-width: 330px;

  font-family: var(--serif);

  font-size: 17px;

  line-height: 1.55;
}


.detail-card--dark {
  color: var(--paper);

  background: var(--green-dark);
}


.detail-card--red {
  color: var(--paper);

  background: var(--red);
}


.detail-card--red .detail-card__number {
  color: var(--ink);
}


.palette {
  display: flex;

  gap: 8px;

  margin-top: 30px;
}


.palette span {
  width: 36px;
  height: 36px;

  border-radius: 50%;

  border: 1px solid var(--ink);
}


.palette span:nth-child(1) {
  background: #232a24;
}


.palette span:nth-child(2) {
  background: #5f6853;
}


.palette span:nth-child(3) {
  background: #c6b79c;
}


.palette span:nth-child(4) {
  background: #8c3b2d;
}


/* =========================================================
   RSVP
========================================================= */

.rsvp {
  display: grid;

  grid-template-columns: 0.8fr 1.2fr;

  gap: 8vw;

  color: var(--paper);

  background: var(--red);

  overflow: hidden;
}


.rsvp__graphic {
  position: absolute;

  left: -3vw;
  bottom: -5vw;

  color: rgba(239, 234, 215, 0.08);

  font-size: clamp(180px, 34vw, 500px);

  font-weight: 800;

  line-height: 0.7;

  letter-spacing: -0.12em;

  pointer-events: none;
}


.rsvp__heading,
.rsvp-form {
  position: relative;

  z-index: 2;
}


.rsvp__heading > span {
  display: block;

  margin-top: 12px;

  font-size: 9px;

  font-weight: 800;

  letter-spacing: 0.2em;
}


.rsvp__heading h2 {
  margin: 25px 0;

  font-size: clamp(75px, 10vw, 135px);

  line-height: 0.75;

  letter-spacing: -0.08em;

  text-transform: uppercase;
}


.rsvp__heading > p:last-child {
  max-width: 350px;

  font-family: var(--serif);

  font-size: 18px;

  line-height: 1.55;
}


.rsvp-form {
  padding: clamp(25px, 5vw, 60px);

  color: var(--ink);

  background: var(--paper-light);

  border: 3px solid var(--ink);

  box-shadow: 10px 10px 0 var(--ink);
}


.form-field {
  margin: 0 0 27px;

  padding: 0;

  border: 0;
}


.form-field label,
.form-field legend {
  display: block;

  margin-bottom: 9px;

  font-size: 9px;

  font-weight: 800;

  letter-spacing: 0.15em;

  text-transform: uppercase;
}


.form-field input,
.form-field textarea,
.form-field select {
  width: 100%;

  padding: 14px 0;

  color: var(--ink);

  background: transparent;

  border: 0;
  border-bottom: 2px solid var(--ink);

  border-radius: 0;

  outline: 0;
}


.form-field textarea {
  resize: vertical;
}


.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  border-color: var(--red);
}


.attendance-options {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 8px;
}


.attendance-options label {
  margin: 0;

  cursor: pointer;
}


.attendance-options input {
  position: absolute;

  opacity: 0;

  pointer-events: none;
}


.attendance-options span {
  display: grid;

  place-items: center;

  min-height: 48px;

  border: 2px solid var(--ink);

  transition:
    background 0.2s ease,
    color 0.2s ease;
}


.attendance-options input:checked + span {
  color: var(--paper);

  background: var(--ink);
}


.website-field {
  position: absolute !important;

  left: -10000px !important;

  width: 1px !important;
  height: 1px !important;

  overflow: hidden !important;
}


.submit-button {
  display: flex;

  align-items: center;

  justify-content: space-between;

  width: 100%;

  margin-top: 15px;

  padding: 17px 18px;

  color: var(--paper);

  background: var(--ink);

  border: 0;

  cursor: pointer;

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 0.15em;

  transition:
    background 0.2s ease,
    transform 0.2s ease;
}


.submit-button:hover {
  background: var(--green-dark);
}


.submit-button:active {
  transform: scale(0.985);
}


.submit-button:disabled {
  opacity: 0.55;

  cursor: wait;
}


.submit-button b {
  font-size: 22px;
}


.form-message {
  min-height: 24px;

  margin-top: 18px;

  font-size: 13px;

  font-weight: 700;
}


.form-message.is-success {
  color: #355f39;
}


.form-message.is-error {
  color: var(--red-dark);
}


/* =========================================================
   ENDING
========================================================= */

.ending {
  position: relative;

  min-height: 80svh;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  padding: 100px 24px;

  text-align: center;

  color: var(--paper);

  background: var(--ink);

  overflow: hidden;
}


.ending__jp {
  position: absolute;

  color: rgba(239, 234, 215, 0.055);

  font-family: serif;

  font-size: clamp(130px, 30vw, 450px);

  white-space: nowrap;
}


.ending > *:not(.ending__jp) {
  position: relative;

  z-index: 2;
}


.ending > p {
  margin: 0 0 30px;

  color: var(--red);

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 0.25em;
}


.ending h2 {
  margin: 0;

  font-size: clamp(60px, 9vw, 120px);

  line-height: 0.82;

  letter-spacing: -0.07em;

  text-transform: uppercase;
}


.ending h2 em {
  color: var(--red);

  font-family: var(--serif);

  font-weight: 600;

  text-transform: none;
}


.ending__names {
  margin-top: 45px;

  font-size: 15px;

  font-weight: 800;

  letter-spacing: 0.22em;
}


.ending > span:last-child {
  margin-top: 14px;

  color: rgba(239, 234, 215, 0.5);

  font-size: 8px;

  font-weight: 700;

  letter-spacing: 0.17em;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

  .hero__layout {
    grid-template-columns: 0.85fr 1.15fr;
  }


  .hero__right {
    grid-column: 1 / -1;

    display: flex;

    align-items: center;

    gap: 40px;

    padding-bottom: 30px;
  }


  .intro__grid,
  .countdown-section,
  .rsvp {
    grid-template-columns: 1fr;
  }


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


  .comic-panel--large {
    grid-row: auto;

    min-height: 500px;
  }


  .comic-panel--wide {
    grid-column: span 2;
  }


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


  .detail-card {
    min-height: 320px;
  }


  .detail-card__number {
    margin-bottom: 45px;
  }


  .location-section {
    grid-template-columns: 1fr;
  }


  .location-section__image {
    min-height: 70svh;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

  .section {
    padding:
      78px
      18px;
  }


  /* opening */

  .opening__top {
    left: 18px;
    right: 18px;
  }


  .opening__portrait {
    width: 78vw;

    top: 46%;
  }


  .opening__copy {
    left: 18px;
    bottom: 105px;
  }


  .opening__copy h1 {
    font-size: clamp(52px, 17vw, 80px);
  }


  .opening__side-copy {
    right: 14px;
    bottom: 110px;
  }


  .opening__pull {
    gap: 7px;
  }


  .opening__pull-line {
    display: none;
  }


  .opening__pull span {
    font-size: 7px;
  }


  /* hero */

  .hero {
    padding-top: 18px;
  }


  .hero__layout {
    display: block;

    min-height: auto;

    padding-top: 45px;
  }


  .hero__left {
    position: relative;

    z-index: 4;
  }


  .hero__names {
    
    /* margin: 10px 0 -15px; */

    font-size: clamp(68px, 22vw, 105px);
  }


  .hero__image {
    width: 88%;

    margin-left: auto;

    transform: rotate(-1deg);
  }


  .hero__image img {
    aspect-ratio: 0.78;
  }


  .hero__right {
    display: block;

    margin-top: 42px;

    padding: 0 0 45px;
  }


  .speech {
    margin-left: 8px;
  }


  .hero__vertical-text {
    display: none;
  }


  .hero__ticker {
    position: relative;

    margin:
      0
      -18px
      -78px;

    width: calc(100% + 36px);
  }


  /* intro */

  .intro__grid {
    gap: 55px;
  }


  .intro__title h2 {
    font-size: clamp(55px, 17vw, 84px);
  }


  .intro__lead {
    font-size: 22px;
  }


  /* story */

  .story__heading {
    grid-template-columns: 1fr auto;

    gap: 10px;
  }


  .story__heading > span:first-child {
    grid-column: 1 / -1;
  }


  .story__heading h2 {
    font-size: clamp(66px, 20vw, 100px);
  }


  .story__jp {
    font-size: 17px;
  }


  .comic-grid {
    grid-template-columns: 1fr 1fr;

    gap: 6px;
  }


  .comic-panel {
    min-height: 220px;
  }


  .comic-panel--large {
    grid-column: span 2;

    min-height: 530px;
  }


  .comic-panel--text {
    padding: 18px;
  }


  .comic-panel--text strong {
    font-size: 18px;
  }


  .comic-panel--text p {
    font-size: 13px;
  }


  .comic-bubble {
    padding: 25px 15px;

    font-size: 17px;
  }


  .comic-panel--wide {
    min-height: 280px;
  }


  /* date */

  .date-section {
    min-height: 80svh;
  }


  .date-section__number {
    font-size: 53vw;
  }


  .date-section h2 {
    font-size: 16vw;
  }


  /* countdown */

  .countdown-section {
    gap: 50px;
  }


  .countdown-section__title h2 {
    font-size: 17vw;
  }


  .countdown strong {
    font-size: 16vw;
  }


  /* timeline */

  .section-heading {
    grid-template-columns: 1fr auto;
  }


  .section-heading > span {
    grid-column: 1 / -1;
  }


  .section-heading h2 {
    font-size: 18vw;
  }


  .timeline__item {
    grid-template-columns: 42px 1fr;

    gap: 10px 15px;

    padding: 28px 0;
  }


  .timeline__index {
    grid-row: span 2;
  }


  .timeline__time {
    font-size: 42px;
  }


  .timeline__copy {
    grid-column: 2;
  }


  /* location */

  .location-section__image {
    min-height: 62svh;
  }


  .location-section__info {
    padding: 70px 20px;
  }


  .location-section__info h2 {
    font-size: 16vw;
  }


  /* details */

  .details__heading {
    align-items: flex-start;
  }


  .details__heading h2 {
    font-size: 14vw;
  }


  .detail-card {
    min-height: 360px;
  }


  /* rsvp */

  .rsvp {
    gap: 55px;
  }


  .rsvp__heading h2 {
    font-size: 21vw;
  }


  .rsvp-form {
    padding: 28px 20px;

    box-shadow: 6px 6px 0 var(--ink);
  }


  .attendance-options {
    grid-template-columns: 1fr;
  }


  /* ending */

  .ending {
    min-height: 90svh;
  }


  .ending h2 {
    font-size: 16vw;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;

    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;

    transition-duration: 0.01ms !important;
  }

}