/* Alison Events concept: the shared stroke of the æ becomes the flight line.
   The flat page (reduced motion, or no JavaScript) is the default; .motion (boot.js) and .gs (main.js) add the moves. */

@font-face {
  font-family: "Nixie One";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(vendor/fonts/NixieOne-normal-400.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(vendor/fonts/NunitoSans-normal-300-700.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --stone: #e0e0db;
  --mat: #eeeeea;
  --ink: #424242;
  --pale: #5c5c58;
  --indigo: #0d004d;
  --white: #fff;
  --head: 64px;
  --gut: clamp(20px, 4.4vw, 64px);
  --display: "Nixie One", "Courier New", serif;
  --body: "Nunito Sans", "Helvetica Neue", Arial, sans-serif;
  --out: cubic-bezier(0.215, 0.61, 0.355, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--stone); color: var(--ink); -webkit-text-size-adjust: 100%; scroll-padding-top: var(--head); }
body { margin: 0; font: 300 17px/1.6 var(--body); overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--indigo); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--indigo); outline-offset: 4px; }
section:focus, main:focus { outline: none; }
h1, h2, h3, p, figure, blockquote, ol, ul { margin: 0; }
cite { font-style: italic; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.eyebrow { display: block; font: 700 12px/1.4 var(--body); letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink); }

.skip { position: fixed; left: 12px; top: -60px; z-index: 50; padding: 10px 16px; background: var(--indigo); color: var(--white); font: 700 14px var(--body); text-decoration: none; }
.skip:focus { top: 12px; }

/* ---------- header: always solid, so nothing slides under it ---------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 20; height: var(--head);
  display: flex; align-items: center; gap: 32px; padding: 0 var(--gut);
  background: var(--stone); border-bottom: 1px solid rgba(66, 66, 66, 0.16);
}
.nav__mark { display: flex; align-items: center; gap: 12px; color: var(--indigo); text-decoration: none; margin-right: auto; }
.mark { height: 30px; width: auto; fill: var(--indigo); display: block; }
.nav__word { font: 700 11px/1 var(--body); letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink); }
.nav__links { display: flex; gap: 28px; }
.nav__links a, .nav__contact { font: 600 13px/1 var(--body); letter-spacing: 0.08em; color: var(--ink); text-decoration: none; padding: 8px 0; }
.nav__links a:hover, .nav__contact:hover { color: var(--indigo); text-decoration: underline; }
.nav__contact { color: var(--indigo); }

/* ---------- 1. hero ---------- */
.hero { min-height: 100vh; min-height: 100svh; padding: calc(var(--head) + 6vh) var(--gut) 8vh; display: flex; flex-direction: column; justify-content: flex-end; gap: 7vh; position: relative; }
.hero__logo { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.ae { width: min(44vw, 440px); height: auto; fill: var(--indigo); overflow: visible; display: block; }
.hero__pd { font: 400 13px/1 var(--body); letter-spacing: 0.42em; text-transform: uppercase; color: var(--ink); margin-left: 0.42em; }
.hero__title { font: 400 clamp(36px, 6vw, 96px)/1.08 var(--display); color: var(--ink); max-width: 20ch; letter-spacing: 0.005em; }
.hero__line { position: relative; height: 14px; margin-top: 4vh; }
.hero__rule { position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: var(--indigo); transform-origin: 0 50%; }
.hero__ball { position: absolute; right: -7px; top: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--indigo); }
.hero__where { display: flex; justify-content: space-between; align-items: baseline; flex-direction: row-reverse; gap: 24px; margin-top: 14px; }
.hero__where > span:first-child { font: 700 13px/1 var(--body); letter-spacing: 0.32em; text-transform: uppercase; color: var(--indigo); margin-right: -0.32em; }
.hero__sub { font-size: 15px; color: var(--ink); }

.motion .hero__logo { position: absolute; inset: var(--head) 0 0; justify-content: center; pointer-events: none; }
.motion .hero { justify-content: flex-end; }
/* the intro states; if main.js never runs, a failsafe shows everything after 3 s */
.motion:not(.is-run) .hero__title,
.motion:not(.is-run) .hero__where,
.motion:not(.is-run) .hero__ball,
.motion:not(.is-run) .nav > * { opacity: 0; animation: failsafe 0.01s 3s both; }
.motion:not(.is-run) .hero__rule { transform: scaleX(0); animation: failrule 0.01s 3s both; }
@keyframes failsafe { to { opacity: 1; } }
@keyframes failrule { to { transform: none; } }
.is-ready .hero__logo { visibility: hidden; }

.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.w > span { display: inline-block; }

/* ---------- 2. how a room feels ---------- */
.room { padding: 18vh var(--gut) 16vh; }
.room__lead { font: 300 clamp(20px, 1.8vw, 26px)/1.5 var(--body); max-width: 36ch; }
.room__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; margin-top: 10vh; align-items: start; }
.room__fig { display: flex; flex-direction: column; gap: 22px; }
.room__fig--look { margin-top: 24vh; }
.room__words { font: 400 clamp(40px, 5.4vw, 88px)/1.04 var(--display); color: var(--ink); }
.room__fig--look .room__words { text-align: right; }
.room__fig img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--mat); }
.room__fig figcaption, .day__credit, .card__credit { font: 400 13px/1.45 var(--body); color: var(--ink); }

/* ---------- 3. the flight ---------- */
.flight { padding: 14vh 0 0; }
.flight__intro { padding: 0 var(--gut) 8vh; display: grid; grid-template-columns: 1fr 1fr; gap: 4vw; align-items: end; }
.flight__intro .eyebrow { grid-column: 1 / -1; }
.flight__title { font: 400 clamp(34px, 3.8vw, 60px)/1.12 var(--display); max-width: 18ch; }
.flight__note { max-width: 40ch; font-size: 17px; }

.atlas { padding: 0 var(--gut); }
.atlas__world { position: relative; }
.atlas__svg { width: 100%; height: auto; display: block; overflow: visible; }
.atlas__name { font: 400 28px var(--display); fill: var(--pale); }
.atlas__stopname { font: 400 40px var(--display); fill: var(--ink); transition: fill 0.6s var(--out); }
.atlas__stopplace { font: 700 13px var(--body); letter-spacing: 0.24em; fill: var(--ink); }
.atlas__stop circle, .atlas__home circle { fill: var(--ink); transition: fill 0.6s var(--out); }
.atlas__home circle, .atlas__home .atlas__stopname { fill: var(--indigo); }
.atlas__stop.is-landed circle, .atlas__stop.is-landed .atlas__stopname { fill: var(--indigo); }
.atlas__leg { fill: none; stroke: var(--indigo); stroke-width: 2.2; stroke-linecap: round; }
.atlas__tip { fill: var(--indigo); }
.atlas__farname { font: 400 70px var(--display); fill: var(--pale); }
.atlas__farstop { font: 400 92px var(--display); fill: var(--indigo); }
.atlas__far { display: none; }
.atlas__flat { font: 700 92px var(--body); letter-spacing: 0.08em; fill: var(--indigo); }

/* flat atlas: the whole world fits the width, route drawn, the five stops named */
.atlas__names, .atlas__stopname, .atlas__stopplace, .atlas__tip, .atlas__home circle { display: none; }
.atlas__leg { vector-effect: non-scaling-stroke; }
.atlas__svg circle { r: 22px; }
.atlas__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 40px 28px; margin-top: 8vh; padding-bottom: 12vh; }
.card { margin: 0; background: var(--white); padding: 10px 10px 14px; }
.card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--mat); }
.card__cap { margin-top: 12px; font: 400 14px/1.45 var(--body); }
.card__n { font: 700 12px var(--body); letter-spacing: 0.2em; color: var(--indigo); }
.card__name { font-weight: 700; }
.card__note, .card__credit { display: block; }

/* motion atlas: the world at 1:1, pinned, panned by main.js */
.gs .atlas { position: relative; height: 100vh; height: 100svh; overflow: hidden; padding: 0; }
.gs .atlas__world { position: absolute; left: 0; top: 0; width: 7308px; height: 1848px; transform-origin: 0 0; will-change: transform; }
.gs .atlas__svg { width: 7308px; height: 1848px; }
.gs .atlas__names, .gs .atlas__stopname, .gs .atlas__stopplace, .gs .atlas__tip, .gs .atlas__home circle { display: inline; }
.gs .atlas__flat { display: none; }
.gs .atlas__leg { vector-effect: none; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.gs .atlas__svg circle { r: 5px; }
.gs .atlas__svg .atlas__tip { r: 7px; }
.gs .atlas__cards { position: absolute; inset: 0; display: block; margin: 0; padding: 0; pointer-events: none; }
.gs .atlas__far { display: inline; opacity: 0; transition: opacity 0.4s; }
.gs .atlas__names { transition: opacity 0.4s; }
.gs .is-far .atlas__far { opacity: 1; }
.gs .is-far .atlas__names, .gs .is-far .atlas__stop text, .gs .is-far .atlas__home text { opacity: 0; }
.gs .card {
  position: absolute; left: 0; top: 0; width: 460px;
  clip-path: inset(100% 0 0 0); visibility: hidden;
  transition: clip-path 0.6s var(--out), visibility 0s 0.6s; pointer-events: auto;
  box-shadow: 0 1px 0 rgba(66, 66, 66, 0.12);
}
.gs .card.is-open { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path 0.6s var(--out), visibility 0s; }

/* phone flight: the same five stops, the line drawn down the screen by the thumb */
.route { display: none; position: relative; padding: 0 var(--gut) 12vh; }
.route__svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.route__path { fill: none; stroke: var(--indigo); stroke-width: 2; stroke-linecap: round; }
.route__tip { fill: var(--indigo); display: none; }
.route__legs { list-style: none; padding: 0; position: relative; }
.leg { position: relative; padding-top: 22vh; }
.leg--home { padding-top: 2vh; }
.leg__head { position: relative; padding-top: 26px; display: flex; flex-direction: column; align-items: flex-start; }
.leg--r .leg__head { align-items: flex-end; }
.leg__dot { position: absolute; top: 0; left: var(--sx); width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--indigo); }
.leg__name, .leg__place { background: var(--stone); padding: 0 6px; margin: 0 -6px; }
.leg__name { font: 400 34px/1.15 var(--display); color: var(--indigo); }
.leg__place { font: 700 11px/2 var(--body); letter-spacing: 0.24em; text-transform: uppercase; }
.leg__card { margin-top: 18px; background: var(--white); padding: 8px 8px 12px; position: relative; }
.leg__card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--mat); }
.leg__card figcaption { margin-top: 10px; font: 400 13px/1.45 var(--body); }
.leg__note { font-weight: 700; }
.route__more { margin-top: 10vh; font: 700 13px var(--body); letter-spacing: 0.12em; text-transform: uppercase; }
.gs .leg__card { clip-path: inset(0 0 100% 0); transition: clip-path 0.6s var(--out); }
.gs .leg.is-open .leg__card { clip-path: inset(0 0 0 0); }
.gs .route__tip { display: inline; }

/* ---------- 4. one wedding, in order ---------- */
.day { padding: 14vh var(--gut); }
.day__track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 28px; }
.day__intro { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 18px; max-width: 46ch; margin-bottom: 4vh; }
.day__title { font: 400 clamp(34px, 3.6vw, 56px)/1.1 var(--display); }
.day__note { font-size: 19px; }
.day__fig img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: var(--mat); }
.day__fig figcaption { margin-top: 12px; font: 700 12px var(--body); letter-spacing: 0.24em; text-transform: uppercase; }

@media (min-width: 761px) {
  .gs .day { padding: 0; position: relative; }
  .gs .day__sticky { position: sticky; top: var(--head); height: calc(100vh - var(--head)); height: calc(100svh - var(--head)); overflow: hidden; display: flex; align-items: center; }
  .gs .day__track { display: flex; align-items: center; gap: 4vw; padding: 0 8vw 0 var(--gut); will-change: transform; }
  .gs .day__intro { flex: 0 0 min(30vw, 420px); margin: 0; }
  .gs .day__fig { flex: 0 0 auto; }
  .gs .day__fig img { height: min(60vh, 640px); width: auto; }
  .gs .day__fig:nth-of-type(even) { margin-top: 12vh; }
}

/* ---------- 5. everywhere ---------- */
.every { padding: 16vh var(--gut); }
.every__head { display: grid; grid-template-columns: 1fr 1fr; gap: 4vw; align-items: end; margin-bottom: 8vh; }
.every__head .eyebrow { grid-column: 1 / -1; }
.every__title { font: 400 clamp(34px, 3.6vw, 56px)/1.1 var(--display); max-width: 18ch; }
.every__list { list-style: none; padding: 0; border-bottom: 1px solid rgba(66, 66, 66, 0.28); }
.row { border-top: 1px solid rgba(66, 66, 66, 0.28); }
.row__link { display: grid; grid-template-columns: minmax(180px, 22%) 1fr 120px; align-items: center; gap: 24px; padding: 16px 0; color: var(--ink); text-decoration: none; }
.row__place { font: 700 12px/1.4 var(--body); letter-spacing: 0.24em; text-transform: uppercase; }
.row__venue { font: 400 clamp(28px, 2.4vw, 38px)/1.15 var(--display); transition: color 0.2s; }
.row__arc { width: 120px; height: 40px; overflow: visible; }
.row__arc circle { fill: var(--pale); }
.row__arc path { fill: none; stroke: var(--indigo); stroke-width: 1.6; stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.6s var(--out); }
.row__arc .row__end { fill: var(--indigo); opacity: 0; transition: opacity 0.2s 0.4s; }
.row__link:hover .row__venue, .row__link:focus-visible .row__venue { color: var(--indigo); }
.row__link:hover path, .row__link:focus-visible path { stroke-dashoffset: 0; }
.row__link:hover .row__end, .row__link:focus-visible .row__end { opacity: 1; }

/* ---------- 6. Alison ---------- */
.alison { padding: 6vh var(--gut) 16vh; }
.quote { min-height: 78vh; min-height: 78svh; display: grid; place-items: center; text-align: center; }
.quote p { font: 400 clamp(40px, 6.2vw, 100px)/1.08 var(--display); max-width: 15ch; color: var(--ink); }
.alison__who { text-align: center; font: 700 12px var(--body); letter-spacing: 0.28em; text-transform: uppercase; }
.alison__small { display: grid; grid-template-columns: 1fr 1fr; gap: 4vw; margin: 14vh auto 0; max-width: 1100px; font-size: 16px; }
.alison__small .eyebrow { margin-bottom: 10px; }

/* ---------- 7. fly home ---------- */
.home { padding: 12vh var(--gut) 10vh; display: flex; flex-direction: column; align-items: center; text-align: center; }
.home__logo { position: relative; width: min(20vw, 230px); }
.home__arc { display: none; position: absolute; right: 52.3%; bottom: 25.3%; width: 46vw; height: 22vw; overflow: visible; }
.home__path { fill: none; stroke: var(--indigo); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.gs .home__arc { display: block; }
.ae--home { width: 100%; }
.home__title { font: 400 clamp(36px, 4.6vw, 72px)/1.1 var(--display); max-width: 22ch; margin-top: 6vh; }
.home__links { list-style: none; padding: 0; margin-top: 6vh; display: flex; flex-wrap: wrap; justify-content: center; gap: 28px 64px; }
.home__links li { display: flex; flex-direction: column; gap: 8px; }
.home__links a { font: 400 clamp(19px, 1.6vw, 24px) var(--body); }
.home__based { margin-top: 5vh; font-size: 15px; }

.foot { padding: 28px var(--gut) 40px; border-top: 1px solid rgba(66, 66, 66, 0.2); font-size: 13px; }

/* ---------- phone: a second composition ---------- */
@media (max-width: 760px) {
  :root { --head: 56px; }
  .nav { gap: 16px; }
  .nav__links { display: none; }
  .mark { height: 26px; }
  .hero { gap: 6vh; padding-bottom: 8vh; justify-content: center; }
  .motion .hero { justify-content: center; }
  .ae { width: min(64vw, 300px); }
  .hero__title { font-size: clamp(30px, 8.6vw, 40px); }
  .hero__where { flex-direction: column-reverse; align-items: flex-end; gap: 10px; }
  .hero__sub { font-size: 14px; text-align: right; max-width: 24ch; }

  .room { padding: 12vh var(--gut); }
  .room__pair { grid-template-columns: 1fr; gap: 9vh; margin-top: 7vh; }
  .room__fig--look { margin-top: 0; }
  .room__fig--look .room__words { text-align: left; }
  .room__words { font-size: 44px; }

  .flight { padding-top: 10vh; }
  .flight__intro { grid-template-columns: 1fr; gap: 18px; padding-bottom: 6vh; }
  .atlas { display: none; }
  .route { display: block; }

  .day { padding: 10vh var(--gut); }
  .day__track { grid-template-columns: 1fr; gap: 40px; }
  .day__fig--night { display: none; }

  .every { padding: 12vh var(--gut); }
  .every__head { grid-template-columns: 1fr; gap: 16px; }
  .row__link { grid-template-columns: 1fr 72px; gap: 4px 16px; }
  .row__place { grid-column: 1; }
  .row__venue { grid-column: 1; font-size: 28px; }
  .row__arc { grid-column: 2; grid-row: 1 / span 2; width: 72px; height: 24px; }

  .quote { min-height: 64svh; }
  .quote p { font-size: 40px; }
  .alison__small { grid-template-columns: 1fr; gap: 32px; margin-top: 8vh; }

  .home__logo { width: 52vw; }
  .home__arc { width: 80vw; height: 40vw; }
  .home__links { flex-direction: column; gap: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .row__arc path { stroke-dashoffset: 0; transition: none; }
  .row__arc .row__end { opacity: 1; }
}