/* Heirloom (style id "scroll"): the traditional scrolling site, in the couple's colours as bands in 60-30-10
   (research/templates.md archetype 6, "Colour field", on the classic long scroll). Playfair Display for headings,
   Great Vibes once, large, for the names (the "one script, once" rule), Hanken Grotesk for reading. Bands: the 30
   colour for the names and the RSVP, the 10 colour only for the countdown strip and the dots of the timeline, the
   60 colour and a tint of it for everything else. */
@layer reset, tokens, base, layouts, components, themes, utilities;

@layer themes {
  /* the names on a band of the 30 colour, a wide picture under it */
  .hl-hero { background: var(--c-band); color: var(--c-band-ink); }
  .hl-hero__band { display: grid; justify-items: center; text-align: center; gap: 0.9rem; padding: clamp(4rem, 9vw, 8rem) var(--gutter) clamp(3rem, 6vw, 5rem); }
  .hl-hero__band p { margin: 0; }
  .hl-kicker { font-family: var(--f-head); font-style: italic; font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem); max-width: 36ch; }
  .w-site .hl-names { margin: 0; color: var(--c-band-ink); font: 400 calc(clamp(4rem, 2rem + 8.5vw, 9.5rem) * var(--f-script-scale, 1))/1 var(--f-script); font-style: var(--f-script-style, normal); }
  .hl-and { font-size: 0.6em; padding-inline: 0.15em; }
  .hl-ornament { display: flex; align-items: center; gap: 0.6rem; }
  .hl-ornament span { display: block; width: 3.5rem; height: 1px; background: currentColor; }
  .hl-ornament span:nth-child(2) { width: 0.55rem; height: 0.55rem; background: var(--p10); transform: rotate(45deg); }
  .hl-date { font: 600 0.88rem/1.4 var(--f-label); letter-spacing: 0.24em; text-transform: uppercase; }
  .hl-city { font-family: var(--f-head); font-style: italic; font-size: 1.3rem; }
  .hl-hero__pic { margin: 0; }
  .hl-hero__pic img { width: 100%; height: clamp(16rem, 48vw, 34rem); object-fit: cover; }
  .w-site .hl-hero__pic .w-pic__credit { margin: 0; padding: 0.5rem var(--gutter); color: var(--c-band-ink); text-align: end; }

  /* the sticky menu: a row of links; on phones a disclosure (no script). Anchors and focus land below it (2.4.11) */
  html[data-style="scroll"] { scroll-padding-block-start: 4rem; }
  .hl-nav { position: sticky; top: 0; z-index: 5; background: var(--c-bg); border-bottom: 1px solid var(--c-line); padding: 0 var(--gutter); }
  .hl-nav ul { margin: 0; padding: 0; list-style: none; }
  .hl-nav__list { display: flex; justify-content: center; flex-wrap: wrap; gap: 0 2rem; }
  .w-site .hl-nav a { display: inline-flex; align-items: center; min-height: 3.25rem; color: var(--c-ink); text-decoration: none; font: 600 0.76rem/1 var(--f-label); letter-spacing: 0.16em; text-transform: uppercase; }
  .w-site .hl-nav a:hover { color: var(--c-link); text-decoration: underline; }
  .w-site .hl-nav .hl-nav__rsvp { color: var(--c-link); }
  .hl-nav__more { display: none; border: 0; padding: 0; margin: 0; }
  .hl-nav__more summary { min-height: 3.25rem; display: flex; align-items: center; cursor: pointer; font: 600 0.8rem/1 var(--f-label); letter-spacing: 0.16em; text-transform: uppercase; }
  .hl-nav__more ul { display: grid; padding-bottom: 0.75rem; max-height: calc(100svh - 4rem); overflow-y: auto; }
  @media (max-width: 52rem) {
    .hl-nav__list { display: none; }
    .hl-nav__more { display: block; }
    .w-site .hl-nav__more a { min-height: 2.75rem; }
  }

  /* the 10 colour, once, as a strip */
  .hl-count { margin: 0; padding: 1.1rem var(--gutter); background: var(--c-btn); color: var(--c-btn-ink); text-align: center; font: 600 0.82rem/1.4 var(--f-label); letter-spacing: 0.22em; text-transform: uppercase; max-width: none; }
  .hl-count__n { font: italic 400 1.5rem/1 var(--f-head); letter-spacing: 0; text-transform: none; margin-inline-end: 0.3rem; }

  /* sections alternate the 60 colour and a tint of it, full width */
  [data-style="scroll"] .w-section { max-width: none; padding-inline: max(var(--gutter), calc((100% - 68rem) / 2)); }
  [data-style="scroll"] main > .w-section:nth-of-type(even):not(.w-rsvp) { background: var(--c-tint); }
  [data-style="scroll"] .w-head { text-align: center; }
  [data-style="scroll"] .w-head h2 { font-weight: 500; }
  [data-style="scroll"] .w-section > p { margin-inline: auto; }

  /* the story in chapters, picture and words alternating */
  .hl-chapter { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
  .hl-chapter + .hl-chapter { margin-top: clamp(3rem, 7vw, 6rem); }
  .hl-chapter:nth-of-type(even) .w-pic { order: 2; }
  .hl-chapter .w-pic img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
  .hl-chapter h3 { font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem); margin-bottom: 1rem; }
  .hl-chapter:not(:has(.w-pic)) { grid-template-columns: 1fr; max-width: 44rem; margin-inline: auto; }
  @media (max-width: 48rem) {
    .hl-chapter { grid-template-columns: 1fr; }
    .hl-chapter:nth-of-type(even) .w-pic { order: 0; }
  }

  /* the day as a timeline: a line of the 30 colour, a dot of the 10 at each event */
  [data-style="scroll"] .w-events { border: 0; position: relative; max-width: 46rem; margin-inline: auto; }
  [data-style="scroll"] .w-events::before { content: ""; position: absolute; left: 0.45rem; top: 0.5rem; bottom: 0.5rem; width: 2px; background: var(--c-head); }
  [data-style="scroll"] .w-event { grid-template-columns: 1fr; gap: 0.25rem; border: 0; padding: 0 0 2.25rem 2.5rem; position: relative; }
  [data-style="scroll"] .w-event::before { content: ""; position: absolute; left: 0; top: 0.3rem; width: 1rem; height: 1rem; border-radius: 50%; background: var(--p10); border: 3px solid var(--c-bg); box-shadow: 0 0 0 2px var(--c-head); }
  [data-style="scroll"] .w-event__time { padding: 0; }
  [data-style="scroll"] .w-event h3 { font-size: 1.6rem; }

  [data-style="scroll"] .w-venue__grid, [data-style="scroll"] .w-cards, [data-style="scroll"] .w-people, [data-style="scroll"] .w-faqs { max-width: 68rem; margin-inline: auto; }
  [data-style="scroll"] .w-card { background: var(--c-bg); border-color: var(--c-line); }
  [data-style="scroll"] .w-people { text-align: center; }
  [data-style="scroll"] .w-pills { justify-content: center; }
  [data-style="scroll"] .w-faqs { max-width: 46rem; }

  .hl-columns { columns: 3 16rem; column-gap: 1.25rem; }
  .hl-columns .w-pic { break-inside: avoid; margin-bottom: 1.25rem; }
  .hl-columns .w-pic img { width: 100%; height: auto; }

  [data-style="scroll"] .w-footer { background: var(--c-band); color: var(--c-band-ink); border: 0; }
  [data-style="scroll"] .w-footer :is(.w-footer__mono, .w-footer__credits, .w-footer__made) { color: var(--c-band-ink); }
}
@layer themes {
  [data-style="scroll"] .w-head p { margin-inline: auto; }
  [data-style="scroll"] .w-event__place { font-weight: 500; }
}