/* Classic: the editorial invitation (research/templates.md archetype 2, "Editorial", with the offset photo of
   Lenoix). Script names beside an offset picture that bleeds off the right edge, the essentials set in three
   columns between hairlines like a printed suite, one accent rule in the couple's 10 colour. Not centred
   everything: the names sit left, the picture right, the sections run down one page. */
@layer reset, tokens, base, layouts, components, themes, utilities;

@layer themes {
  html[data-style="classic"] { scroll-padding-block-start: 5rem; } /* anchors and focus land below the sticky bar */
  .w-site[data-style="classic"] .cx-bar {
    position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 1.5rem;
    padding: 0.6rem var(--gutter); background: var(--c-bg); border-bottom: 1px solid var(--c-line);
  }
  .w-site .cx-mono { font-family: var(--f-script); font-style: var(--f-script-style, normal); font-weight: var(--f-script-weight, 400); font-size: calc(2.1rem * var(--f-script-scale, 1)); line-height: 1; color: var(--c-head); text-decoration: none; margin-right: auto; padding-block: 0.25rem; }
  .cx-menu { display: flex; flex-wrap: wrap; gap: 0 1.75rem; margin: 0; padding: 0; list-style: none; }
  .w-site .cx-menu a { display: inline-flex; align-items: center; min-height: 2.75rem; font: 600 0.74rem/1 var(--f-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-ink); text-decoration: none; }
  .cx-menu a:hover { color: var(--c-link); text-decoration: underline; }
  .cx-bar__rsvp { padding: 0.75rem 1.4rem; min-block-size: 2.75rem; }
  @media (max-width: 64rem) { .cx-bar nav { display: none; } }

  .cx-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: min(92svh, 62rem); align-items: stretch; }
  .cx-hero--plain { grid-template-columns: 1fr; }
  .cx-hero__text { align-self: center; padding: clamp(3rem, 8vw, 7rem) var(--gutter); display: grid; gap: 1.1rem; justify-items: start; }
  .cx-kicker { margin: 0; font-family: var(--f-head); font-style: italic; font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem); color: var(--c-soft); max-width: 30ch; }
  .w-site .cx-names { margin: 0; font-family: var(--f-script); font-style: var(--f-script-style, normal); font-weight: var(--f-script-weight, 400); line-height: 0.95;
    font-size: calc(clamp(4.2rem, 2rem + 9vw, 10.5rem) * var(--f-script-scale, 1)); color: var(--c-head); display: grid; }
  .cx-names span { display: block; }
  .cx-and { font-size: 0.55em; color: var(--c-link); padding-inline-start: 1.2em; line-height: 1.1; }
  .cx-rule { display: block; width: 5rem; height: 2px; background: var(--p10); margin-block: 0.4rem; }
  .cx-date { margin: 0; font: 600 0.9rem/1.4 var(--f-label); letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-ink); }
  .cx-city { margin: 0; font-family: var(--f-head); font-style: italic; font-size: 1.35rem; }
  .cx-count { margin: 0; font: 500 0.8rem/1.4 var(--f-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-soft); }
  .cx-hero__pic { margin: 0; display: grid; grid-template-rows: 1fr auto; min-height: 100%; }
  .cx-hero__pic img { width: 100%; height: 100%; object-fit: cover; min-height: 24rem; }
  .cx-hero__pic .w-pic__credit { padding: 0.5rem var(--gutter) 0 0; text-align: end; }
  @media (max-width: 56rem) {
    .cx-hero { grid-template-columns: 1fr; min-height: 0; }
    .cx-hero__pic img { min-height: 0; height: auto; aspect-ratio: 4 / 3; }
    .cx-hero__pic .w-pic__credit { padding-inline: var(--gutter); }
  }

  .cx-details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 76rem; margin: clamp(2rem, 5vw, 4rem) auto 0; padding-inline: var(--gutter); }
  .cx-details__col { padding: 2rem clamp(1rem, 3vw, 2.5rem); border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
  .cx-details__col + .cx-details__col { border-left: 1px solid var(--c-line); }
  .cx-details__col p { margin: 0.35rem 0 0; }
  .w-site .cx-label { margin: 0 0 0.75rem; font: 600 0.74rem/1.2 var(--f-label); letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-soft); }
  .cx-big { font-family: var(--f-head); font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.9rem); line-height: 1.2; color: var(--c-head); }
  @media (max-width: 48rem) {
    .cx-details { grid-template-columns: 1fr; }
    .cx-details__col + .cx-details__col { border-left: 0; border-top: 0; }
  }

  [data-style="classic"] .w-story .w-story__part:first-child p:first-of-type::first-letter {
    float: left; font-family: var(--f-head); font-size: 3.6em; line-height: 0.8; padding: 0.08em 0.1em 0 0; color: var(--c-link);
  }
  [data-style="classic"] .w-head { display: grid; gap: 0.3rem; }
  [data-style="classic"] .w-head h2 { font-style: italic; }
  /* a hairline between sections, as wide as the text column */
  [data-style="classic"] .w-section + .w-section:not(.w-rsvp) { background: linear-gradient(var(--c-line), var(--c-line)) top center / calc(100% - 2 * var(--gutter)) 1px no-repeat; }
  /* the gallery: the first picture large, the rest around it */
  @media (min-width: 48rem) {
    [data-style="classic"] .w-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    [data-style="classic"] .w-grid .w-pic:first-child { grid-column: span 2; grid-row: span 2; }
    [data-style="classic"] .w-grid .w-pic:first-child img { aspect-ratio: auto; height: calc(100% - 2rem); }
  }
}