/* Lookbook: the full-viewport slider (research/templates.md archetype 1). Pictures edge to edge under the couple's
   names in a huge Bodoni italic, a quiet grotesk for everything else, the couple's 30 colour as a full-height panel
   beside the story, big numerals for the countdown. Words over a picture sit on a dark scrim of at least 0.58 black
   wherever there is text (the top 16% for the bar and the credit, from 44% down for the names and the controls):
   white over a white pixel under 0.58 black is 4.9:1. Credits on the other pictures sit on a 0.72 strip. */
@layer reset, tokens, base, layouts, components, themes, utilities;

@layer themes {
  html[data-style="lookbook"] { scroll-snap-type: y proximity; }
  [data-style="lookbook"] .w-site, [data-style="lookbook"] body { font-size: var(--f-body-size); }
  [data-style="lookbook"] .w-preview { position: relative; z-index: 3; }

  /* the hero: pictures underneath, the names fixed over them */
  .lb-hero { position: relative; height: 100svh; min-height: 34rem; overflow: hidden; background: var(--c-band); color: #fff; scroll-snap-align: start; isolation: isolate; }
  .lb-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(to bottom, rgb(0 0 0 / 0.62), rgb(0 0 0 / 0.58) 16%, rgb(0 0 0 / 0.12) 26%, rgb(0 0 0 / 0.12) 34%, rgb(0 0 0 / 0.58) 44%, rgb(0 0 0 / 0.72)); }
  .lb-hero--plain::after { display: none; }
  .lb-hero--plain, .w-site .lb-hero--plain :is(.lb-mono, .lb-menu a, .lb-bar__rsvp) { color: var(--c-band-ink); border-color: currentColor; }
  .lb-track { position: relative; display: flex; height: 100%; margin: 0; padding: 0; list-style: none; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
  .lb-track::-webkit-scrollbar { display: none; }
  /* white ring with a dark ring inside it, visible on any picture */
  .lb-track:focus-visible { outline: 3px solid #fff; outline-offset: -6px; box-shadow: inset 0 0 0 9px rgb(0 0 0 / 0.65); }
  .lb-slide { flex: 0 0 100%; height: 100%; scroll-snap-align: start; position: relative; }
  .lb-slide .w-pic { height: 100%; margin: 0; }
  .lb-slide img { width: 100%; height: 100%; object-fit: cover; }
  .w-site .lb-slide .w-pic__credit { position: absolute; z-index: 2; left: var(--gutter); top: 4.75rem; margin: 0; color: #fff; max-width: 40ch; font-size: 0.75rem; }

  .lb-bar { position: absolute; z-index: 2; inset: 0 0 auto 0; display: flex; align-items: center; gap: 1.5rem; padding: 1rem var(--gutter); }
  .w-site .lb-mono { margin-right: auto; color: #fff; text-decoration: none; font: italic 400 1.6rem/1 var(--f-head); }
  .lb-menu { display: flex; flex-wrap: wrap; gap: 0 1.6rem; margin: 0; padding: 0; list-style: none; }
  .w-site .lb-menu a, .w-site .lb-bar__rsvp { display: inline-flex; align-items: center; min-height: 2.75rem; color: #fff; text-decoration: none; font: 600 0.74rem/1 var(--f-label); letter-spacing: 0.18em; text-transform: uppercase; }
  .w-site .lb-menu a:hover { text-decoration: underline; }
  .w-site .lb-bar__rsvp { border: 1px solid #fff; padding-inline: 1.1rem; }
  @media (max-width: 64rem) { .lb-bar nav { display: none; } }

  .lb-words { position: absolute; z-index: 2; left: var(--gutter); right: var(--gutter); bottom: clamp(5.5rem, 12vh, 8rem); display: grid; gap: 0.75rem; justify-items: start; pointer-events: none; }
  .lb-words a { pointer-events: auto; }
  .lb-words p { margin: 0; }
  .lb-kicker, .lb-place { font: 600 0.82rem/1.4 var(--f-label); letter-spacing: 0.24em; text-transform: uppercase; }
  .w-site .lb-names { margin: 0; color: inherit; font: italic 400 clamp(2.6rem, 1.2rem + 9vw, 10.5rem)/0.9 var(--f-head); letter-spacing: -0.02em; overflow-wrap: anywhere; }
  .lb-and { font-style: normal; font-weight: 300; font-size: 0.55em; vertical-align: 0.35em; padding-inline: 0.1em; }
  .w-site .lb-cta { display: inline-flex; align-items: center; min-height: 2.75rem; margin-top: 0.5rem; padding: 0 1.5rem; background: var(--c-btn); color: var(--c-btn-ink); text-decoration: none; font: 600 0.78rem/1 var(--f-label); letter-spacing: 0.16em; text-transform: uppercase; }
  .w-site .lb-cta:hover { background: #fff; color: #141414; }

  .lb-controls { position: absolute; z-index: 2; right: var(--gutter); bottom: 1.5rem; display: flex; align-items: center; gap: 0.5rem; }
  .lb-count { margin: 0 0.75rem 0 0; font: 400 0.85rem/1 var(--f-label); letter-spacing: 0.1em; }
  .lb-count b { font-weight: 700; }
  .w-site :is(.lb-step, .lb-pause) { min-width: 2.75rem; min-height: 2.75rem; padding: 0 0.9rem; background: transparent; color: #fff; border: 1px solid rgb(255 255 255 / 0.85); font: 600 0.8rem/1 var(--f-label); letter-spacing: 0.1em; cursor: pointer; }
  .w-site :is(.lb-step, .lb-pause):hover { background: #fff; color: #141414; }
  .w-site :is(.lb-step, .lb-pause):focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

  /* the story beside a full-height picture, on the couple's 30 colour */
  .lb-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100svh; scroll-snap-align: start; background: var(--c-band); color: var(--c-band-ink); }
  .lb-split--plain { grid-template-columns: 1fr; }
  .lb-split .w-pic { margin: 0; position: relative; }
  .lb-split .w-pic img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
  .w-site .lb-split .w-pic__credit { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; margin: 0; padding: 0.5rem 1.25rem; color: #fff; background: rgb(0 0 0 / 0.72); }
  .lb-split .w-story { align-self: center; max-width: 40rem; margin: 0; padding: clamp(3rem, 7vw, 7rem) clamp(1.5rem, 5vw, 5rem); }
  .lb-split .w-story__cols { grid-template-columns: 1fr; gap: 2rem; }
  .w-site .lb-split :is(h2, h3, .w-eyebrow, a) { color: var(--c-band-ink); }
  @media (max-width: 56rem) {
    .lb-split { grid-template-columns: 1fr; min-height: 0; }
    .lb-split .w-pic { aspect-ratio: 4 / 3; }
  }

  .lb-days { min-height: 70svh; display: grid; place-items: center; padding: var(--gutter); text-align: center; scroll-snap-align: start; }
  .lb-days p { margin: 0; display: grid; gap: 0.5rem; }
  .lb-days__n { font: italic 400 clamp(6rem, 3rem + 16vw, 16rem)/0.85 var(--f-head); color: var(--c-head); letter-spacing: -0.04em; }
  .lb-days__label { font: 600 0.85rem/1.4 var(--f-label); letter-spacing: 0.24em; text-transform: uppercase; color: var(--c-soft); }

  .lb-interlude { height: 100svh; scroll-snap-align: start; }
  .lb-interlude .w-pic { height: 100%; margin: 0; position: relative; }
  .lb-interlude img { width: 100%; height: 100%; object-fit: cover; }
  .w-site .lb-interlude .w-pic__credit { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 0.5rem var(--gutter); color: #fff; background: rgb(0 0 0 / 0.72); }

  /* the rest: big type, generous space, one screen each where it fits */
  [data-style="lookbook"] .w-section { scroll-snap-align: start; }
  [data-style="lookbook"] .w-site h2, [data-style="lookbook"] h2 { font-style: italic; font-weight: 400; letter-spacing: -0.02em; font-size: clamp(2.8rem, 1.8rem + 4vw, 5.5rem); }
  [data-style="lookbook"] .w-event { grid-template-columns: minmax(9rem, 16rem) 1fr; padding-block: 1.75rem; }
  [data-style="lookbook"] .w-event h3 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem); font-weight: 400; }
  [data-style="lookbook"] .w-events { border-top-color: var(--c-head); }
  [data-style="lookbook"] .w-card { border: 0; border-top: 2px solid var(--c-head); padding-inline: 0; }
  [data-style="lookbook"] .w-footer__mono { font-family: var(--f-head); font-style: italic; }
}