/* Vellum Hour site styles. Brand fonts are self-hosted (same-origin WOFF2, SIL OFL 1.1, Latin subset; licences in
   /assets/fonts/OFL-*.txt). Every asset is same-origin. */

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-500.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-500-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/montserrat-400.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/montserrat-600.woff2") format("woff2");
}

:root {
  --ivory: #FAF6F0;
  --plum: #3B3140;
  --night: #2A2330;
  --champagne: #C3A877;
  --blush: #D8B4A6;
  --terracotta: #9A5E4E;
  --sage: #A7B29C;
  --serif: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --gutter: 1rem;
  --target: 2.75rem;
  color-scheme: light;
}

@media (min-width: 40rem) { :root { --gutter: 2rem; } }
@media (min-width: 64rem) { :root { --gutter: 3rem; } }

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

html { scroll-padding-top: 1.5rem; }

body {
  margin: 0;
  background: var(--ivory);
  color: var(--plum);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.15;
}

p, ol, ul { margin: 0; }
img { display: block; height: auto; }
b, strong { font-weight: 600; }

a {
  color: var(--terracotta);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--plum);
  outline-offset: 3px;
}
a[href], summary { scroll-margin-block: 1.5rem; }

::selection { background: var(--blush); color: var(--plum); }

/* Skip link: hidden until focused, then shown in the page flow */
.skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: pre;
}
.skip-link:focus {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  min-height: var(--target);
  margin: 0;
  padding: 0.5rem 1rem;
  overflow: visible;
  clip-path: none;
  background: var(--night);
  color: var(--ivory);
  font-weight: 600;
  outline: 3px solid var(--ivory);
  outline-offset: -6px;
}

/* Layout */
.container {
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.narrow { max-width: 48rem; }

.section { padding-block: 4rem; }
@media (min-width: 48rem) { .section { padding-block: 5rem; } }

.band-blush { background: var(--blush); }
.band-sage { background: var(--sage); color: var(--night); }
.band-sage a { color: var(--night); }
.band-sage :focus-visible { outline-color: var(--night); }

/* Header */
.site-header { border-bottom: 1px solid var(--champagne); }
.site-header .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: 1rem 0.5rem;
}
.brand { display: block; }
.brand img { width: 12.5rem; }
@media (min-width: 64rem) { .brand img { width: 14rem; } }

.site-nav ul {
  padding: 0;
  list-style: none;
  text-align: center;
}
.site-nav li { display: inline-block; }
.site-nav a {
  display: inline-block;
  min-width: var(--target);
  min-height: var(--target);
  padding: 0 0.75rem;
  line-height: var(--target);
  color: var(--plum);
  font-size: 0.875rem;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: pre;
}
.site-nav a:hover { text-decoration: underline; text-decoration-thickness: 1px; }

/* Shared ornaments and labels */
.label,
.status,
.suite-status {
  color: var(--terracotta);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.section-head {
  max-width: 40rem;
  margin: 0 auto 2.5rem;
  text-align: center;
}
.section-head::before {
  content: "";
  display: block;
  width: 1.25rem;
  height: 1.625rem;
  margin: 0 auto 1.25rem;
  border: 1px solid var(--champagne);
  border-radius: 999rem 999rem 0 0;
}
.band-blush .section-head::before,
.band-sage .section-head::before { border-color: var(--ivory); }
.section-head h2 { font-size: 2.125rem; }
@media (min-width: 48rem) { .section-head h2 { font-size: 2.75rem; } }
.section-head p { margin-top: 1rem; }

/* Hero */
.hero {
  padding-block: 3.5rem 4rem;
  text-align: center;
}
@media (min-width: 48rem) { .hero { padding-block: 5rem 5.5rem; } }
.hero .container::before {
  content: "";
  display: block;
  width: 3.5rem;
  height: 4.5rem;
  margin: 0 auto 2rem;
  border: 1px solid var(--champagne);
  border-radius: 999rem 999rem 0 0;
  box-shadow: inset 0 0 0 0.375rem var(--ivory), inset 0 0 0 calc(0.375rem + 1px) var(--champagne);
}
.hero h1 {
  font-size: 2.25rem;
  line-height: 1.08;
}
.hero h1 span {
  display: block;
  font-style: italic;
}
@media (min-width: 30rem) { .hero h1 { font-size: 2.75rem; } }
@media (min-width: 40rem) { .hero h1 { font-size: 3.5rem; } }
@media (min-width: 64rem) { .hero h1 { font-size: 4.25rem; } }

.lede {
  max-width: 36rem;
  margin: 1.5rem auto 0;
  font-size: 1.1875rem;
}
.lede strong {
  display: block;
  margin-top: 0.75rem;
}

.status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;
  margin-top: 2rem;
}
@media (min-width: 30rem) {
  .status::before,
  .status::after {
    content: "";
    width: 2.5rem;
    border-top: 1px solid var(--champagne);
  }
}

.facts {
  display: grid;
  gap: 1.5rem;
  max-width: 60rem;
  margin: 3rem auto 0;
  padding: 2rem 0 0;
  border-top: 1px solid var(--champagne);
  list-style: none;
}
@media (min-width: 48rem) {
  .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
}
.facts .label {
  display: block;
  margin-bottom: 0.25rem;
}

/* The three suites */
.suites {
  display: grid;
  gap: 3.5rem;
}
@media (min-width: 48rem) {
  .suites { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
}
@media (min-width: 64rem) { .suites { gap: 2.5rem; } }
.suite {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.suite h3 {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 12rem;
  height: 14.5rem;
  margin: 0 auto;
  padding: 0 1rem 2rem;
  border-radius: 999rem 999rem 0 0;
  font-size: 1.875rem;
  font-style: italic;
  line-height: 1.1;
}
@media (min-width: 64rem) {
  .suite h3 { width: 13.5rem; height: 16.5rem; font-size: 2rem; }
}
.suite-linea h3 {
  border: 1px solid var(--plum);
  background: var(--ivory);
  box-shadow: inset 0 0 0 0.5rem var(--ivory), inset 0 0 0 calc(0.5rem + 1px) var(--champagne);
}
.suite-sage h3 {
  background: var(--sage);
  color: var(--night);
  box-shadow: inset 0 0 0 0.5rem var(--sage), inset 0 0 0 calc(0.5rem + 1px) var(--ivory);
}
.suite-arch h3 {
  /* Modern Arch, drawn in the suite's own palette (assets/wedding-suites/modern-arch v1.2, canva-spec.json):
     paper #F7F3EC, arch panel (soft) #E9DFD2, accent/line #3F6E6B deep teal, ink #23302F. No brand plum.
     Like the template: a thin teal arch outline, a paper gap, then the sand arch panel, with ink lettering. */
  --ma-paper: #F7F3EC;
  --ma-panel: #E9DFD2;
  --ma-line: #3F6E6B;
  --ma-ink: #23302F;
  border: 2px solid var(--ma-line);
  background: var(--ma-panel);
  color: var(--ma-ink);
  box-shadow: inset 0 0 0 0.5rem var(--ma-paper);
}
.suite p {
  max-width: 21rem;
  margin: 1.5rem 0 1.25rem;
}
.suite .suite-status {
  margin: auto 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--champagne);
}

/* What's in each suite */
.included {
  max-width: 64rem;
  margin-inline: auto;
}
.included h3 {
  margin-bottom: 0.75rem;
  font-size: 1.625rem;
}
.included ul { margin-top: 0; }
.included h3 + ul,
.included h3 + ol { margin-top: 0.5rem; }
.included ol + h3 { margin-top: 3rem; }

.pieces,
.extras { padding-left: 2.5rem; }
.pieces { list-style: decimal-leading-zero; }
@media (min-width: 48rem) {
  .pieces { columns: 2; column-gap: 4.5rem; }
  .extras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 3rem; }
}
@media (min-width: 64rem) { .extras { column-gap: 4.5rem; } }
.pieces li,
.extras li {
  break-inside: avoid;
  padding: 0.75rem 0 0.8rem 0.25rem;
  border-bottom: 1px solid var(--champagne);
}
.pieces li::marker,
.extras li::marker {
  color: var(--terracotta);
  font-family: var(--serif);
}
.piece {
  display: block;
  font-family: var(--serif);
  font-size: 1.1875rem;
  line-height: 1.3;
}
.sizes {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.9375rem;
}

/* How it works */
.steps {
  display: grid;
  gap: 2.25rem;
  max-width: 64rem;
  margin-inline: auto;
  padding-left: 2.5rem;
}
@media (min-width: 48rem) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3.5rem; row-gap: 2.75rem; }
}
@media (min-width: 72rem) {
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.steps li::marker {
  color: var(--plum);
  font-family: var(--serif);
  font-size: 1.5rem;
  font-style: italic;
}
.steps h3 {
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
}

/* FAQ */
.faq {
  max-width: 46rem;
  margin-inline: auto;
  border-bottom: 1px solid var(--champagne);
}
.faq details { border-top: 1px solid var(--champagne); }
.faq summary {
  position: relative;
  display: block;
  min-height: var(--target);
  padding: 1.1rem 3rem 1.1rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.35;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--terracotta); }
.faq summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.75rem;
  width: 0.625rem;
  height: 0.625rem;
  margin-top: -0.5rem;
  border-right: 2px solid var(--terracotta);
  border-bottom: 2px solid var(--terracotta);
  transform: rotate(45deg);
}
.faq details[open] > summary::after {
  margin-top: -0.1rem;
  transform: rotate(-135deg);
}
.answer {
  max-width: 40rem;
  padding-bottom: 1.5rem;
}
.answer p + p { margin-top: 0.75rem; }

.more {
  display: inline-block;
  min-height: var(--target);
  padding-block: 0.55rem;
}

/* About and AI disclosure */
.about-card {
  max-width: 46rem;
  margin-inline: auto;
  padding: 2.25rem 1.5rem;
  border: 1px solid var(--champagne);
  box-shadow: inset 0 0 0 0.4375rem var(--ivory), inset 0 0 0 calc(0.4375rem + 1px) var(--champagne);
}
@media (min-width: 40rem) { .about-card { padding: 3rem 3.5rem; } }
.about-card h3 {
  margin-bottom: 0.75rem;
  font-size: 1.75rem;
}

/* Contact */
.contact-grid {
  display: grid;
  gap: 2rem;
  max-width: 56rem;
  margin-inline: auto;
}
@media (min-width: 48rem) {
  .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; }
}
.contact-item {
  padding-top: 1.5rem;
  border-top: 1px solid var(--ivory);
}
.contact-item h3 {
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
}
.contact-item p + p { margin-top: 0.5rem; }
.email {
  display: inline-block;
  min-height: var(--target);
  padding-block: 0.45rem;
  font-family: var(--serif);
  font-size: 1.375rem;
  line-height: 1.3;
}
.note { font-size: 0.9375rem; }

/* Footer */
.site-footer {
  padding-block: 3rem 3.5rem;
  background: var(--night);
  color: var(--ivory);
  font-size: 0.9375rem;
  text-align: center;
}
.site-footer a { color: var(--ivory); }
.site-footer :focus-visible { outline-color: var(--ivory); }
.footer-logo {
  width: 11.25rem;
  margin-inline: auto;
}
.footer-nav ul {
  margin-top: 1rem;
  padding: 0;
  list-style: none;
}
.footer-nav li { display: inline-block; }
.footer-nav a {
  display: inline-block;
  min-height: var(--target);
  padding: 0 0.75rem;
  line-height: var(--target);
}
.footer-nav a[aria-current="page"] { text-decoration-thickness: 2px; }
.footer-legal {
  max-width: 36rem;
  margin: 1.25rem auto 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--champagne);
}
.footer-legal p + p { margin-top: 0.25rem; }

/* Privacy and terms */
.legal { padding-block: 3.5rem 4.5rem; }
.legal h1 { font-size: 2.5rem; }
@media (min-width: 40rem) { .legal h1 { font-size: 3.25rem; } }
.meta { margin-top: 1rem; font-size: 0.9375rem; }
.meta + .meta { margin-top: 0.25rem; }
.legal h2 {
  margin-top: 3rem;
  padding-top: 2.25rem;
  border-top: 1px solid var(--champagne);
  font-size: 2rem;
}
.legal h3 {
  margin-top: 2rem;
  font-size: 1.375rem;
}
.legal h2 + h3 { margin-top: 1.5rem; }
.legal p { margin-top: 0.75rem; }

/* 404 */
.notfound {
  padding-block: 4.5rem 5.5rem;
  text-align: center;
}
.notfound::before {
  content: "";
  display: block;
  width: 3rem;
  height: 3.875rem;
  margin: 0 auto 2rem;
  border: 1px solid var(--champagne);
  border-radius: 999rem 999rem 0 0;
}
.notfound h1 { font-size: 2.5rem; }
@media (min-width: 40rem) { .notfound h1 { font-size: 3.25rem; } }
.notfound p {
  max-width: 30rem;
  margin: 1.25rem auto 0;
}

/* Motion only for people who have not asked to reduce it */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .faq summary::after { transition: transform 0.2s ease, margin-top 0.2s ease; }
}

@media print {
  .skip-link,
  .site-nav,
  .footer-logo { display: none; }
  body,
  .band-blush,
  .band-sage,
  .site-footer { background: none; color: var(--plum); }
  .site-footer a { color: var(--plum); }
}

/* Approved legal text (privacy.html): lists in section 3A. */
.legal ul { margin-top: 0.75rem; padding-left: 1.5rem; }
.legal li + li { margin-top: 0.5rem; }
.about-card .label { display: block; margin-bottom: 0.5rem; }
.status-next {
  margin-top: 0.5rem;
  text-align: center;
}