/* Belunie Seating Planner — landing page.

   Palette and type follow the Belunie wedding site: Cormorant Garamond for
   display, DM Sans for text, ivory ground, sage accent, gold reserved for the
   small letterspaced marks.

   Motion thesis
   -------------
   Focal moment: the seating plan assembles itself once, on load. The ring
   scribes in, seats arrive around it in ring order, initials land last. That
   geometry belongs to this product and nothing else on the page competes
   with it — the venue photo is the stage, not a second performance.
   Continuity: major sections arrive once as the page is read. Feedback:
   150–200ms on anything you can click. Motion is loaded as a progressive
   enhancement; the full page stays visible if it cannot load. */

:root {
  --paper: #faf8f3;
  --card: #ffffff;
  --ink: #2c2c2c;
  --ink-2: #57514c;
  --ink-3: #6f6963;
  --rule: #e8e3da;
  --rule-soft: #f0ece4;
  --sage: #7a8b6e;
  --sage-deep: #65755a;
  --sage-dark: #526148;
  --sage-pale: #e8ede5;
  --gold: #a98a2c;
  --gold-ink: #756018;
  --shadow-soft: 0 10px 40px -10px rgba(44, 44, 44, 0.09);
  --shadow-lift: 0 18px 50px -14px rgba(44, 44, 44, 0.16);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-color: var(--sage) var(--paper);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Browser surfaces belong to the design too. */
::selection { background: var(--sage-pale); color: var(--ink); }
:focus-visible { outline: 2px solid var(--sage); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3 {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

p { margin: 0; }
a { color: inherit; }

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

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: var(--gutter);
  top: 0.75rem;
  z-index: 20;
  padding: 0.6rem 0.9rem;
  border-radius: 999px;
  background: var(--card);
  box-shadow: var(--shadow-soft);
}

/* --- wordmark + header ---------------------------------------------------- */

.wordmark {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.28rem;
  font-weight: 400;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.wordmark--small { font-size: 1rem; letter-spacing: 0.3em; }

.site-header {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 4vw, 3rem);
  padding: 1.5rem var(--gutter);
}

.site-header nav { display: flex; gap: 1.75rem; margin-right: auto; }

.site-header nav a {
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-2);
  transition: color 0.18s ease;
}
.site-header nav a:hover { color: var(--ink); }

/* --- buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 1.55rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease,
    box-shadow 0.18s ease, transform 0.18s var(--ease-out);
}

.btn--primary {
  background: var(--sage-deep);
  border-color: var(--sage-deep);
  color: #fff;
  box-shadow: 0 12px 26px -14px rgba(101, 117, 90, 0.9);
}
.btn--primary:hover {
  background: var(--sage-dark);
  border-color: var(--sage-dark);
  transform: translateY(-2px);
  box-shadow: 0 20px 34px -16px rgba(101, 117, 90, 0.95);
}

.btn--ghost {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(44, 44, 44, 0.14);
  color: var(--ink);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover { background: #fff; border-color: var(--sage); color: var(--sage-deep); }

.btn--quiet {
  min-height: 40px;
  padding: 0 1.1rem;
  border-color: rgba(44, 44, 44, 0.16);
  background: rgba(255, 255, 255, 0.78);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  backdrop-filter: blur(6px);
}
.btn--quiet:hover { border-color: var(--sage); color: var(--sage-deep); background: #fff; }

/* --- hero: the venue is the stage ----------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  margin-top: -88px;
  padding: calc(88px + clamp(2.5rem, 7vw, 5.5rem)) 0 clamp(1rem, 3vw, 2rem);
  overflow: hidden;
}

.hero__stage { position: absolute; inset: 0; z-index: -2; overflow: hidden; }

.hero__stage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
}

/* Ivory wash so Cormorant at 300 stays readable over stone and sky. */
.hero__wash {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(250, 248, 243, 0.97) 0%, rgba(250, 248, 243, 0.9) 34%,
      rgba(250, 248, 243, 0.52) 58%, rgba(250, 248, 243, 0.34) 100%),
    linear-gradient(to bottom, rgba(250, 248, 243, 0.6) 0%, rgba(250, 248, 243, 0) 22%,
      rgba(250, 248, 243, 0) 72%, var(--paper) 100%);
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
  max-width: 1260px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.hero h1 {
  font-size: clamp(2.5rem, 5.4vw, 4.5rem);
  max-width: 15ch;
}

/* Each word is masked and rises into its own line box. */
.word { display: inline-block; overflow: hidden; vertical-align: bottom; }
.word > span {
  display: inline-block;
}

.rule {
  width: min(210px, 42%);
  height: 1px;
  margin: 1.5rem 0 0;
  background: linear-gradient(to right, var(--gold), rgba(169, 138, 44, 0));
  transform-origin: left center;
}

.lede {
  max-width: 44ch;
  margin-top: 1.4rem;
  color: var(--ink-2);
  font-size: clamp(1rem, 1.5vw, 1.12rem);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

/* --- the focal moment: the arrangement assembling ------------------------- */

.plan {
  margin: 0;
  padding: clamp(0.6rem, 1.2vw, 0.85rem);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.66);
  box-shadow: var(--shadow-lift);
  backdrop-filter: blur(14px) saturate(1.1);
}

.plan svg { display: block; width: 100%; height: auto; }

/* The planner's own canvas: faint grid inside a soft room boundary. */
/* No stroke: the card edge is already the room boundary, and two frames
   read as a mistake. */
.plan__room { opacity: 1; }

/* SVG needs an explicit box to scale about; fill-box centres on each shape. */
.plan__table,
.plan__seat { transform-box: fill-box; transform-origin: center; }

.plan__ring {
  fill: none;
  stroke: rgba(44, 44, 44, 0.17);
  stroke-width: 1;
  stroke-dasharray: var(--circ);
  stroke-dashoffset: 0;
}

.plan__table {
  fill: #fff;
  stroke: rgba(44, 44, 44, 0.18);
  stroke-width: 1.1;
}

.plan__name,
.plan__count {
  text-anchor: middle;
}
.plan__name { font-family: "Cormorant Garamond", Georgia, serif; font-size: 12.5px; fill: var(--ink); }
.plan__count { font-size: 7px; font-weight: 700; letter-spacing: 0.08em; fill: var(--ink-3); }

/* Seats arrive table by table, then around each ring in order. */
.plan__seat {
  opacity: 1;
}
.plan__seat circle { fill: var(--sage-deep); }
.plan__seat text {
  fill: #fff;
  font-size: 7.4px;
  font-weight: 700;
  text-anchor: middle;
  letter-spacing: 0.01em;
}
.plan__seat.is-empty circle { fill: #fff; stroke: rgba(44, 44, 44, 0.16); stroke-width: 1; }

/* Dietary reads as an offset ring, the same mark the printed plan uses. */
.plan__halo { fill: none; stroke: var(--sage); stroke-width: 1.1; opacity: 0.75; }

.plan figcaption {
  margin-top: 0.75rem;
  margin-bottom: 0.25rem;
  color: var(--ink-2);
  font-size: 0.76rem;
  text-align: center;
}

/* --- purchase assurances ------------------------------------------------- */

.benefits {
  border-block: 1px solid var(--rule);
  background: color-mix(in srgb, var(--paper) 80%, white);
}

.benefits__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 1260px;
  margin: 0 auto;
  padding: clamp(2.4rem, 5vw, 4rem) var(--gutter);
  list-style: none;
}

.benefit {
  min-width: 0;
  padding: 0 clamp(1.1rem, 2.6vw, 2.3rem);
}

.benefit:first-child { padding-left: 0; }
.benefit:last-child { padding-right: 0; }
.benefit + .benefit { border-left: 1px solid var(--rule); }

.benefit__icon {
  display: block;
  width: clamp(3.5rem, 5vw, 4.5rem);
  height: clamp(3.5rem, 5vw, 4.5rem);
  margin-bottom: 1.2rem;
  color: var(--sage);
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.benefit__accent { stroke: var(--gold); }

.benefit h3 {
  font-size: clamp(1.35rem, 2vw, 1.65rem);
  font-weight: 400;
}

.benefit p {
  max-width: 24ch;
  margin-top: 0.45rem;
  color: var(--ink-2);
  font-size: 0.84rem;
  line-height: 1.55;
}

/* --- section rhythm ------------------------------------------------------- */

.section {
  max-width: 1180px;
  margin-inline: auto;
  padding: clamp(3.5rem, 8vw, 6rem) var(--gutter);
}

.demo h2,
.steps h2,
.closing h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  text-align: center;
}

.demo__intro {
  max-width: 58ch;
  margin: 0.9rem auto 0;
  color: var(--ink-2);
  font-size: clamp(0.96rem, 1.5vw, 1.06rem);
  text-align: center;
}

/* --- video ---------------------------------------------------------------- */

.video { margin: clamp(1.75rem, 4vw, 2.75rem) 0 0; }

.video__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 16px;
  background: #efece5;
  box-shadow: var(--shadow-lift);
}

.video__frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #10251b;
}

.video__launch {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  color: var(--sage-deep);
  cursor: pointer;
  text-decoration: none;
}

.video__launch:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -7px;
  border-radius: 14px;
}

.video__poster {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.48s var(--ease-out), filter 0.48s var(--ease-out);
}

.video__play {
  position: absolute;
  top: 50%;
  left: 70%;
  display: grid;
  width: clamp(3.9rem, 7vw, 5.5rem);
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  background: rgba(250, 248, 243, 0.96);
  box-shadow: 0 18px 42px -12px rgba(16, 37, 27, 0.68);
  transform: translate(-50%, -50%);
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.3s var(--ease-out);
}

.video__play svg {
  width: 46%;
  height: 46%;
  margin-left: 0.16em;
}

.video__launch:hover .video__poster {
  filter: brightness(0.94);
  transform: scale(1.012);
}

.video__launch:hover .video__play {
  background: #fff;
  color: var(--sage-dark);
  transform: translate(-50%, -50%) scale(1.07);
}

.video figcaption {
  margin-top: 1rem;
  color: var(--ink-3);
  font-size: 0.84rem;
  text-align: center;
}

.video figcaption a {
  color: var(--sage-deep);
  text-decoration-color: rgba(101, 117, 90, 0.45);
  text-underline-offset: 0.2em;
}

/* --- steps ---------------------------------------------------------------- */

.steps ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 4vw, 3.25rem);
  margin: clamp(2rem, 5vw, 3.25rem) 0 0;
  padding: 0;
  list-style: none;
}

.steps li { padding-top: 1.1rem; border-top: 1px solid var(--ink); }

.steps__n {
  display: block;
  margin-bottom: 0.7rem;
  color: var(--gold-ink);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
}

.steps h3 { font-size: 1.55rem; font-weight: 400; }

.steps p {
  max-width: 34ch;
  margin-top: 0.6rem;
  color: var(--ink-2);
  font-size: 0.92rem;
}

/* --- closing + footer ----------------------------------------------------- */

.closing {
  display: grid;
  justify-items: center;
  gap: 1.75rem;
  padding-bottom: clamp(4rem, 9vw, 7rem);
  border-top: 1px solid var(--rule-soft);
}

.closing__note {
  max-width: 58ch;
  color: var(--ink-3);
  font-size: 0.82rem;
  text-align: center;
}

.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1.75rem var(--gutter) 2.25rem;
  border-top: 1px solid var(--rule-soft);
  color: var(--ink-3);
  font-size: 0.8rem;
}

.site-footer__brand,
.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.site-footer__brand { gap: 0.7rem 1.25rem; }
.site-footer__links { gap: 0.65rem 1.25rem; }

.site-footer__links a {
  color: var(--ink-2);
  text-decoration-color: rgba(122, 139, 110, 0.5);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.24em;
}

.site-footer__links a:hover,
.site-footer__links a[aria-current="page"] { color: var(--sage-deep); }

/* --- legal and policy pages ---------------------------------------------- */

.policy-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.site-header--subpage {
  border-bottom: 1px solid var(--rule-soft);
  background: rgba(250, 248, 243, 0.92);
}

.policy-shell {
  width: min(100%, 900px);
  margin-inline: auto;
  padding: clamp(3rem, 8vw, 6.5rem) var(--gutter) clamp(4rem, 10vw, 8rem);
}

.policy { max-width: 760px; }

.policy__back {
  display: inline-block;
  margin-bottom: clamp(2rem, 5vw, 3.75rem);
  color: var(--ink-2);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
}

.policy__back:hover { color: var(--sage-deep); }

.policy h1 { font-size: clamp(2.6rem, 7vw, 4.6rem); }

.policy__meta {
  margin-top: 1rem;
  color: var(--ink-3);
  font-size: 0.8rem;
}

.policy__intro {
  max-width: 62ch;
  margin-top: clamp(1.5rem, 4vw, 2.25rem);
  color: var(--ink-2);
  font-size: clamp(1.05rem, 2.2vw, 1.2rem);
  line-height: 1.7;
}

.policy h2 {
  margin-top: clamp(2.75rem, 7vw, 4.25rem);
  padding-top: 1.05rem;
  border-top: 1px solid var(--rule);
  font-size: clamp(1.65rem, 4vw, 2.1rem);
  font-weight: 400;
}

.policy h3 {
  margin-top: 1.8rem;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.policy h2 + p,
.policy h3 + p,
.policy p + p,
.policy p + ul,
.policy ul + p { margin-top: 0.8rem; }

.policy p,
.policy li,
.policy dd {
  color: var(--ink-2);
  font-size: 0.94rem;
}

.policy ul { margin-bottom: 0; padding-left: 1.35rem; }
.policy li + li { margin-top: 0.45rem; }

.policy a {
  color: var(--sage-deep);
  text-decoration-color: rgba(101, 117, 90, 0.45);
  text-underline-offset: 0.2em;
}

.policy a:hover { text-decoration-color: currentColor; }

.policy-note {
  margin-top: clamp(2rem, 5vw, 3rem);
  padding: 1rem 0;
  border-block: 1px solid var(--rule);
  color: var(--ink-2);
  font-size: 0.88rem;
}

.policy-details { margin: 1.25rem 0 0; }

.policy-details div {
  display: grid;
  grid-template-columns: minmax(10rem, 0.7fr) minmax(0, 1.3fr);
  gap: 1rem 2rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--rule-soft);
}

.policy-details dt {
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 700;
}

.policy-details dd { min-width: 0; margin: 0; }

.policy code {
  padding: 0.15em 0.3em;
  border-radius: 3px;
  background: var(--rule-soft);
  color: var(--ink);
  font-size: 0.82em;
  overflow-wrap: anywhere;
}

.policy-page .site-footer { margin-top: auto; }

/* --- reduced motion ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .plan { max-width: 560px; }

  .btn { transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
  .btn--primary:hover { transform: none; }
  .video__poster,
  .video__play { transition: none; }
  .video__launch:hover .video__poster { transform: none; }
  .video__launch:hover .video__play { transform: translate(-50%, -50%); }
}

/* --- responsive ----------------------------------------------------------- */

@media (max-width: 960px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr); gap: 2.75rem; }
  .hero h1 { max-width: 17ch; }
  .hero__stage img { object-position: 50% 58%; }
  .hero__wash {
    background:
      linear-gradient(to bottom, rgba(250, 248, 243, 0.95) 0%, rgba(250, 248, 243, 0.86) 42%,
        rgba(250, 248, 243, 0.62) 68%, var(--paper) 100%);
  }
  .plan { max-width: 520px; margin-inline: auto; }
  .benefits__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .benefit { padding: 2rem clamp(1.25rem, 4vw, 2rem); }
  .benefit:nth-child(-n + 2) { padding-top: 0; }
  .benefit:nth-child(n + 3) { border-top: 1px solid var(--rule); }
  .benefit:nth-child(odd) { padding-left: 0; border-left: 0; }
  .benefit:nth-child(even) { padding-right: 0; border-left: 1px solid var(--rule); }
  .benefit:nth-child(n + 3) { padding-bottom: 0; }
  .steps ol { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .steps p { max-width: 52ch; }
}

@media (max-width: 620px) {
  /* The whole SVG scales down to the card, so bump the type in user units to
     keep table labels and initials legible on a phone. */
  .plan__name { font-size: 16px; }
  .plan__count { font-size: 8.4px; }
  .plan__seat text { font-size: 8.6px; }

  .site-header { flex-wrap: wrap; gap: 0.75rem 1.25rem; }
  .site-header nav { order: 3; width: 100%; margin-right: 0; gap: 1.25rem; }
  .btn--quiet { margin-left: auto; }
  .hero__actions .btn { flex: 1 1 auto; }
  .benefits__list { grid-template-columns: minmax(0, 1fr); }
  .benefit,
  .benefit:nth-child(n) {
    padding: 1.6rem 0;
    border-left: 0;
    border-top: 1px solid var(--rule);
  }
  .benefit:first-child { padding-top: 0; border-top: 0; }
  .benefit:last-child { padding-bottom: 0; }
  .benefit p { max-width: 36ch; }
  .video__play { left: 72%; width: 3.5rem; }
  .site-footer { align-items: flex-start; }
  .site-footer__brand,
  .site-footer__links { width: 100%; }
  .policy-details div { grid-template-columns: minmax(0, 1fr); gap: 0.35rem; }
}