/*
 * Luro — Editorial Fashion, per docs/adr/0001-editorial-design-system-scope.md
 *
 * One stylesheet for all three pages. Keeping it in a single file rather than
 * inline per page is the point: three copies of this system would drift apart,
 * which is the inconsistency it exists to prevent.
 *
 * The tokens below are copied verbatim from the storefront widget
 * (extensions/try-on-widget/assets/try-on-widget.js, :root block) so the
 * marketing site and the try-on modal are the same object. Changing one
 * without the other breaks the contract the ADR describes.
 *
 * No webfonts and no CSS framework on purpose:
 *  - The ADR's 2026-07-27 amendment dropped Playfair/Inter from the widget;
 *    the site follows so both surfaces render the same faces.
 *  - Dropping fonts.googleapis.com also removes a third-party request
 *    carrying the visitor's IP.
 *  - cdn.tailwindcss.com is a development-only CDN that compiles in the
 *    browser; it has no place on a production page.
 *
 * The Editorial character comes from what's free: the serif/sans split, the
 * wide-tracked uppercase eyebrows, hairline rules, generous spacing, and the
 * ink/ivory palette. There is deliberately no accent colour — the palette is
 * monochrome, which is both the ADR's "neutral luxe base" and the convention
 * of the luxury fashion houses this page is selling to.
 */

/* ── Tokens ─────────────────────────────────────────────────────────────── */

:root {
  --luro-ink: #0a0a0a;
  --luro-ivory: #faf8f4;
  --luro-paper: #ffffff;
  --luro-text: #3a3632;
  --luro-muted: #8a827a;
  --luro-faint: #b4aca2;
  --luro-hairline: #e5e0d8;
  --luro-radius: 2px;

  --luro-serif: ui-serif, Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", "Times New Roman", serif;
  --luro-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --gutter: 28px;
  --measure: 1180px;
}

/* ── Base ───────────────────────────────────────────────────────────────── */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--luro-ivory);
  color: var(--luro-text);
  font-family: var(--luro-sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--luro-ink); color: #fff; }

img { display: block; max-width: 100%; }

a { color: inherit; }

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--luro-ink);
  outline-offset: 3px;
}

/* ── Primitives ─────────────────────────────────────────────────────────
   The three treatments the widget is built from. Sizes match the widget's
   .ai-tryon-eyebrow (9px/0.2em), .ai-tryon-title (serif/0.06em) and
   .ai-tryon-btn (11px/0.16em) so both surfaces feel identical. */

.eyebrow {
  display: block;
  font-family: var(--luro-sans);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--luro-muted);
  line-height: 1;
  margin: 0;
}

.display {
  font-family: var(--luro-serif);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--luro-ink);
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}

/* Capped lower than a one-line hero would allow: this headline is a sentence,
   and at 74px it broke into five lines and pushed the lede below the fold. */
.d-hero { font-size: clamp(34px, 4.4vw, 56px); }
.d-page { font-size: clamp(34px, 5vw, 56px); }
.d-sect { font-size: clamp(28px, 3.9vw, 44px); }
.d-sub  { font-size: clamp(19px, 1.7vw, 23px); letter-spacing: 0.04em; }
.d-min  { font-size: 17px; letter-spacing: 0.04em; line-height: 1.3; }

.lede {
  font-size: clamp(16px, 1.25vw, 18px);
  color: var(--luro-text);
  margin: 0;
  max-width: 46ch;
  text-wrap: pretty;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 26px;
  background: var(--luro-ink);
  color: #fff;
  border: 1px solid var(--luro-ink);
  border-radius: var(--luro-radius);
  font-family: var(--luro-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.btn:hover { background: transparent; color: var(--luro-ink); }

.btn-quiet {
  background: transparent;
  color: var(--luro-ink);
  border-color: var(--luro-hairline);
}
.btn-quiet:hover { background: var(--luro-ink); color: #fff; border-color: var(--luro-ink); }

/* Inline links in running prose: a hairline underline rather than a colour,
   since the palette has no accent to spend. */
.link {
  color: var(--luro-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--luro-faint);
  transition: border-color 0.2s;
}
.link:hover { border-bottom-color: var(--luro-ink); }

/* ── Structure ──────────────────────────────────────────────────────────
   Sections are separated by a single hairline, not by stacked background
   blocks and shadows. Vertical padding lives only on .band so no two rules
   fight over the same spacing. */

.wrap {
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.band { padding: clamp(64px, 9vw, 118px) 0; }
.band-tight { padding: clamp(48px, 6vw, 76px) 0; }
.band-rule { border-top: 1px solid var(--luro-hairline); }
.band-paper { background: var(--luro-paper); }
.band-ink { background: var(--luro-ink); }

.band-ink .display,
.band-ink .d-sub { color: #fff; }
.band-ink .lede { color: #cfc8bf; }
.band-ink .eyebrow { color: var(--luro-faint); }

/* ── Masthead ───────────────────────────────────────────────────────────── */

.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 248, 244, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--luro-hairline);
}

.masthead-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px var(--gutter);
  max-width: var(--measure);
  margin: 0 auto;
}

.wordmark {
  font-family: var(--luro-serif);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--luro-ink);
  text-decoration: none;
}
.wordmark-sm { font-size: 16px; }

.mast-nav { display: flex; align-items: center; gap: 28px; }

.mast-link {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--luro-muted);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.mast-link:hover { color: var(--luro-ink); border-bottom-color: var(--luro-ink); }
.mast-link[aria-current="page"] { color: var(--luro-ink); border-bottom-color: var(--luro-ink); }

.mast-cta { padding: 11px 20px; }

/* The masthead is sticky, so an anchor jump would otherwise land the target
   heading underneath it. Applies to every linkable target on the site. */
:target,
section[id],
.clause[id] { scroll-margin-top: 96px; }

@media (max-width: 720px) {
  .mast-nav-links { display: none; }
}

/* ── Page head (interior pages) ─────────────────────────────────────────── */

.pagehead > * + * { margin-top: 20px; }
.pagehead .lede { max-width: 62ch; }

/* ── Hero (index) ───────────────────────────────────────────────────────── */

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 5vw, 68px);
  align-items: center;
}

@media (min-width: 900px) {
  /* Even split: the plate is the argument, not an illustration beside it. */
  .hero-grid { grid-template-columns: 1fr 1fr; }
}

.hero-copy > * + * { margin-top: 26px; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* The signature: two plates butted together on a single hairline seam, with
   the widget's own chip treatment. It states the product's whole proposition —
   the garment, then the garment on you — without a caption explaining it. */
.plate {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--luro-paper);
  border: 1px solid var(--luro-hairline);
  border-radius: var(--luro-radius);
  overflow: hidden;
}

/* The two source photos have different aspect ratios (the AI returns its own
   canvas), so a shared box with plain `cover` crops them by different amounts
   and the same woman comes out at two different sizes — which is exactly the
   claim the plate is making. A tall box plus a per-half object-position keeps
   both figures at a comparable scale with their heads at the same height. */
.plate-half { position: relative; aspect-ratio: 2 / 3; }
.plate-half + .plate-half { border-left: 1px solid var(--luro-hairline); }
.plate-half img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.plate-half-before img { object-position: 50% 18%; }
.plate-half-after img { object-position: 50% 6%; }

/* Matches .ai-tryon-chip in the widget. */
.chip {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 9px;
  background: rgba(10, 10, 10, 0.55);
  color: #fff;
  font-family: var(--luro-sans);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: var(--luro-radius);
}

.plate-caption {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 12px;
}

/* ── Steps (index) ──────────────────────────────────────────────────────── */

.steps {
  display: grid;
  grid-template-columns: 1fr;
  margin: 54px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--luro-hairline);
}

@media (min-width: 820px) {
  .steps { grid-template-columns: repeat(3, 1fr); }
  .step + .step { border-left: 1px solid var(--luro-hairline); }
  .step { padding: 34px 30px 0; }
  .step:first-child { padding-left: 0; }
  .step:last-child { padding-right: 0; }
}

@media (max-width: 819px) {
  .step { padding: 32px 0 4px; }
  .step + .step { border-top: 1px solid var(--luro-hairline); padding-top: 30px; }
}

/* Numerals set in the serif at display size: the three steps are a real
   sequence a shopper moves through, so the order carries information. */
.step-num {
  font-family: var(--luro-serif);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--luro-faint);
  line-height: 1;
  display: block;
  margin-bottom: 20px;
}

.step h3 { margin: 0 0 10px; }
.step p { margin: 0; color: var(--luro-text); max-width: 34ch; }

/* ── Claims (index) ─────────────────────────────────────────────────────── */

.claims-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 5vw, 72px);
  align-items: start;
}
@media (min-width: 900px) {
  .claims-grid { grid-template-columns: 1fr 1fr; }
}

.claim-list { margin: 0; padding: 0; list-style: none; }

.claim { padding: 26px 0; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.claim:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
/* h3, not h4: the document went h2 → h4 here, which is a skipped level for
   anything reading the outline. The visual size is unchanged. */
.claim h3,
.claim-h3 {
  font-family: var(--luro-serif);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #fff;
  margin: 0 0 8px;
}
.claim p { margin: 0; color: #cfc8bf; max-width: 42ch; }

/* ── Price list (index) ─────────────────────────────────────────────────── */

.packs {
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--luro-hairline);
}

.pack {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 24px;
  align-items: baseline;
  padding: 24px 0;
  border-bottom: 1px solid var(--luro-hairline);
}

/* Narrow: the quantity and its price belong on the same line — that is the
   comparison being made. The per-generation rate drops underneath. */
@media (max-width: 759px) {
  .pack-qty { grid-column: 1; grid-row: 1; }
  .pack-price { grid-column: 2; grid-row: 1; }
  .pack-rate { grid-column: 1 / -1; grid-row: 2; }
}

@media (min-width: 760px) {
  /* One shared set of columns for the whole list. Each row stays its own box
     for the hairline underneath it, so the list owns the columns and the rows
     inherit them via subgrid — without that, every row sizes its `auto`
     columns independently and the figures come out ragged down the page. */
  .packs {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
  }
  .pack {
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    gap: 32px;
    align-items: center;
  }
  .pack-rate { text-align: right; }
}

.pack-qty {
  font-family: var(--luro-serif);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--luro-ink);
  line-height: 1.1;
}
.pack-qty span {
  display: block;
  font-family: var(--luro-sans);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--luro-muted);
  margin-top: 7px;
}

.pack-rate {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--luro-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.pack-price {
  font-family: var(--luro-serif);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--luro-ink);
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.price-note { margin: 26px 0 0; font-size: 13px; color: var(--luro-muted); max-width: 62ch; }

/* ── Closing (index) ────────────────────────────────────────────────────── */

.closer { text-align: center; }
.closer > * + * { margin-top: 26px; }
.closer .lede { margin-left: auto; margin-right: auto; }
.closer .display { margin-left: auto; margin-right: auto; }

/* ── Contact ────────────────────────────────────────────────────────────── */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(44px, 5vw, 76px);
  align-items: start;
}
@media (min-width: 900px) {
  .contact-grid { grid-template-columns: 1fr 0.85fr; }
}

/* A definition list is what this content actually is: a term and its value.
   Rows on hairlines, values aligned right — the same list treatment as the
   price table, so the two pages share a rhythm. */
.deflist { margin: 0; padding: 0; border-top: 1px solid var(--luro-hairline); }

.defrow {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 24px;
  align-items: baseline;
  padding: 20px 0;
  border-bottom: 1px solid var(--luro-hairline);
}

.defrow dt { margin: 0; }
.defrow dd {
  margin: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--luro-ink);
}
.defrow dd small {
  display: block;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--luro-faint);
  margin-top: 4px;
}

@media (max-width: 560px) {
  .defrow { grid-template-columns: 1fr; }
  .defrow dd { text-align: left; }
}

/* Question-and-answer variant: the answer is running prose, so it takes the
   wider column and reads left-aligned rather than sitting flush right like a
   price or an opening time. */
.defrow-qa { padding: 28px 0; align-items: start; }
.defrow-qa dd { text-align: left; color: var(--luro-text); max-width: 58ch; }

@media (min-width: 820px) {
  .defrow-qa { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 40px; }
}
@media (max-width: 819px) {
  .defrow-qa { grid-template-columns: 1fr; gap: 10px; }
}

.contact-figure {
  border: 1px solid var(--luro-hairline);
  border-radius: var(--luro-radius);
  overflow: hidden;
  background: var(--luro-paper);
}
.contact-figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* ── Policy ─────────────────────────────────────────────────────────────── */

.policy-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 5vw, 64px);
  align-items: start;
}
@media (min-width: 940px) {
  .policy-grid { grid-template-columns: 210px minmax(0, 1fr); }
}

.toc { position: static; }
@media (min-width: 940px) {
  .toc { position: sticky; top: 96px; }
}

.toc-list { margin: 14px 0 0; padding: 0; list-style: none; }
.toc-list li + li { margin-top: 2px; }

.toc-link {
  display: block;
  padding: 7px 0;
  font-size: 13px;
  color: var(--luro-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--luro-hairline);
  transition: color 0.2s;
}
.toc-link:hover { color: var(--luro-ink); }

/* Running legal prose. A narrow measure is the whole accessibility story on a
   page like this — nobody reads a privacy policy set to 120 characters. */
.prose { max-width: 68ch; }
.prose p { margin: 0 0 18px; }
.prose p:last-child { margin-bottom: 0; }
.prose > section + section { margin-top: 52px; }

.clause { padding-top: 34px; border-top: 1px solid var(--luro-hairline); margin-top: 34px; }
.clause:first-of-type { padding-top: 0; border-top: 0; margin-top: 26px; }

/* The clause number is set as a margin note in the serif, so the heading text
   starts on one clean left edge. Numbering here is real: these are cited
   clauses that people refer to by number. */
.clause-h {
  display: grid;
  grid-template-columns: 2.6ch 1fr;
  gap: 14px;
  align-items: baseline;
  margin: 0 0 12px;
}
.clause-h span {
  font-family: var(--luro-serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--luro-faint);
  font-variant-numeric: tabular-nums;
}

.eea-list { margin: 22px 0 0; padding: 0; list-style: none; }
.eea-list li {
  padding: 13px 0;
  border-bottom: 1px solid var(--luro-hairline);
  font-size: 15px;
}
.eea-list li:first-child { border-top: 1px solid var(--luro-hairline); }

.callout {
  margin-top: 56px;
  padding: 30px;
  background: var(--luro-paper);
  border: 1px solid var(--luro-hairline);
  border-radius: var(--luro-radius);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}
.callout p { margin: 8px 0 0; color: var(--luro-muted); max-width: 42ch; }

/* ── Colophon ───────────────────────────────────────────────────────────── */

.colophon {
  border-top: 1px solid var(--luro-hairline);
  padding: 40px 0;
  background: var(--luro-ivory);
}

.colophon-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.colophon-nav { display: flex; flex-wrap: wrap; gap: 24px; }

.colophon-link {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--luro-muted);
  text-decoration: none;
  transition: color 0.2s;
}
.colophon-link:hover { color: var(--luro-ink); }

.colophon-fine { font-size: 11px; letter-spacing: 0.06em; color: var(--luro-faint); margin: 8px 0 0; }

/* ── Motion ─────────────────────────────────────────────────────────────
   One orchestrated entrance, nothing else. Scattered hover effects would read
   as decoration; this reads as a page settling into place. */

.rise { opacity: 0; transform: translateY(14px); animation: rise 0.75s cubic-bezier(0.2, 0.7, 0.3, 1) forwards; }
.rise-2 { animation-delay: 0.09s; }
.rise-3 { animation-delay: 0.18s; }
.rise-4 { animation-delay: 0.27s; }

@keyframes rise { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise { animation: none; opacity: 1; transform: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}