/* Monogram · editorial-monogram — Atölye #8 (#414, Mina).
   Contract: docs/tasarim/v2/yon.md §2 row 8, §3 (sharp), §4 + §4.1. Selectors: [data-theme] + .inv-cover only.
   Initials: .inv-cover__monogram / .inv-intro__monogram (proposed page hook, see README) — without it the card,
   hairlines and names still carry the cover. */

[data-theme="editorial-monogram"] {
  /* yon.md §4.1 (1): this theme owns the whole cover composition; page.js sets <body data-cover="theme"> */
  --inv-cover-owned: 1;

  /* colour — contrast measured in README.md */
  --inv-bg: #F5F2EC;
  --inv-surface: #FFFFFF;
  --inv-text: #16161A;
  --inv-text-muted: #5A5A63;
  --inv-primary: #1F3A5F;
  --inv-on-primary: #FFFFFF;
  --inv-accent: #C6A15B;
  --inv-ornament: #1F3A5F;
  --inv-border: #E2DCD1;
  --inv-backdrop: #EDE7DC; /* page body behind the column; the linen desk art is darker (#E4DCCD) */
  --inv-danger: #B3261E;
  --inv-focus: var(--inv-primary);

  /* type: name / heading / body */
  --inv-font-script: 'Fraunces', Georgia, serif;
  --inv-font-display: 'Fraunces', Georgia, serif;
  --inv-font-body: 'Inter', system-ui, sans-serif;
  --inv-display-weight: 500;
  --inv-display-transform: uppercase;
  --inv-display-tracking: .14em;
  --inv-body-size: 1rem;
  --inv-radius: 0;

  /* motion: calm and exact (yon.md §3 column "Keskin" 2, 8) */
  --inv-motion-intro-total: 2200ms;
  --inv-motion-ease-open: cubic-bezier(.22, 1, .36, 1);
  --inv-motion-name-in: 700ms;
  --inv-motion-reveal: 500ms;
  --inv-motion-reveal-distance: 12px;
  --inv-motion-stagger: 60ms;
  --inv-motion-micro: 140ms;
  --inv-motion-ambient: none;

  /* art slots */
  --inv-art-backdrop: image-set(url("/themes/editorial-monogram/art/backdrop.webp") 1x, url("/themes/editorial-monogram/art/backdrop-2x.webp") 2x); /* #432 D-058: 256 CSS px tile, 512 px at dpr 2 */
  --inv-art-scene: url("/themes/editorial-monogram/art/desk-2x.webp");
  --inv-art-scene-1x: url("/themes/editorial-monogram/art/desk-1x.webp");
  --inv-art-flank-left: url("/themes/editorial-monogram/art/flank-left-2x.webp");
  --inv-art-flank-right: url("/themes/editorial-monogram/art/flank-right-2x.webp");
  --inv-art-divider: url("/themes/editorial-monogram/art/divider.svg");
  --inv-art-corner: url("/themes/editorial-monogram/art/corner.svg");
  --inv-art-icon-schedule: url("/themes/editorial-monogram/art/icon-schedule.svg");
  --inv-art-icon-rsvp: url("/themes/editorial-monogram/art/icon-rsvp.svg");
  --inv-art-icon-gift: url("/themes/editorial-monogram/art/icon-gift.svg");
  --inv-art-icon-gallery: url("/themes/editorial-monogram/art/icon-gallery.svg");
  --inv-art-icon-guestbook: url("/themes/editorial-monogram/art/icon-guestbook.svg");
  --inv-art-icon-share: url("/themes/editorial-monogram/art/icon-share.svg");
}

/* ---- Cover: embossed cotton card on a linen desk; ringed monogram, hairline rules, names set like a masthead ---- */
[data-theme="editorial-monogram"] .inv-cover {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100svh;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--space-3);
  padding: 15svh var(--space-12) 15svh;
  text-align: center;
  color: var(--inv-text);
  background: var(--inv-backdrop);
}
[data-theme="editorial-monogram"] .inv-cover__art {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("art/card.svg") 50% 50% / cover no-repeat,
    image-set(var(--inv-art-scene-1x) 1x, var(--inv-art-scene) 2x) 50% 50% / cover no-repeat, var(--inv-backdrop);
}
[data-theme="editorial-monogram"] .inv-cover__content { display: contents; }
/* yon.md §4.1/10: the page hides the monogram hook by default; this theme opens it (display: grid below) unless it is empty */
[data-theme="editorial-monogram"] .inv-cover__monogram:empty { display: none; }
[data-theme="editorial-monogram"] .inv-cover__monogram {
  display: grid;
  place-items: center;
  width: 9.5rem;
  height: 9.5rem;
  margin: 0 0 var(--space-2);
  background: url("art/monogram-ring.svg") 50% 50% / contain no-repeat;
  font: 500 4rem/1 var(--inv-font-display);
  font-variation-settings: "opsz" 144;
  letter-spacing: -.04em;
  color: var(--inv-primary);
}
[data-theme="editorial-monogram"] .inv-cover__eyebrow {
  margin: 0;
  font: 500 .875rem/1.4 var(--inv-font-body);
  letter-spacing: var(--inv-display-tracking);
  text-transform: var(--inv-display-transform);
  color: var(--inv-text-muted);
}
[data-theme="editorial-monogram"] .inv-cover__names {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  column-gap: .22em;
  max-width: 17rem;
  margin: 0;
  font: 500 clamp(3.25rem, 2.6rem + 2.4vw, 4.5rem)/1.04 var(--inv-font-script); /* 48 → 72 */
  font-variation-settings: "opsz" 144;
  letter-spacing: -.015em;
  color: var(--inv-text);
}
[data-theme="editorial-monogram"] .inv-cover__name { font: inherit; letter-spacing: inherit; }
[data-theme="editorial-monogram"] .inv-cover__amp { font-style: italic; font-weight: 500; color: var(--inv-accent); }
[data-theme="editorial-monogram"] .inv-cover__date { margin: var(--space-2) 0 0; }
[data-theme="editorial-monogram"] .inv-cover__date time,
[data-theme="editorial-monogram"] .inv-cover__day { display: block; }
[data-theme="editorial-monogram"] .inv-cover__day {
  font: 500 .875rem/1.4 var(--inv-font-display); /* 14 px ≤ 18, lining; one line inside the card at 390 */
  font-variant-numeric: lining-nums;
  letter-spacing: .09em;
  white-space: nowrap;
  text-transform: uppercase;
  color: var(--inv-primary);
}
[data-theme="editorial-monogram"] .inv-cover__time {
  display: block;
  margin-top: .25em;
  font: 400 .875rem/1.4 var(--inv-font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--inv-text-muted);
}
[data-theme="editorial-monogram"] .inv-cover__venue { margin: 0; font: 400 .9375rem/1.5 var(--inv-font-body); color: var(--inv-text-muted); }
[data-theme="editorial-monogram"] .inv-cover__guest,
[data-theme="editorial-monogram"] .inv-cover__badge { margin: 0; font: 400 .9375rem/1.4 var(--inv-font-body); color: var(--inv-text-muted); }
[data-theme="editorial-monogram"] .inv-cover__scroll {
  position: absolute;
  left: 50%;
  bottom: 2svh;
  translate: -50% 0;
  margin: 0;
  padding: var(--space-2) var(--space-4);
  background: var(--inv-surface);
  font: 500 .875rem/1 var(--inv-font-body);
  color: var(--inv-text);
}
@media (min-width: 1024px) {
  [data-theme="editorial-monogram"] .inv-cover { width: auto; margin-inline: 0; padding-inline: var(--space-24); }
  [data-theme="editorial-monogram"] .inv-cover__art {
    background: url("art/card-wide.svg") 50% 50% / cover no-repeat, url("art/desk-wide-2x.webp") 50% 50% / cover no-repeat, var(--inv-backdrop);
  }
}

/* task 1421: at 1440 the centered group ended at 65% of the cover; a larger bottom padding lifts it into the 22-62% band. */
@media (min-width: 1024px) {
  [data-theme="editorial-monogram"] .inv-cover { padding-top: 13svh; padding-bottom: 15svh; } /* görev 1527: 32 px tarih bloğu uzattı; #1629: en kısa tarihte (tek satır) blok %64'te bitiyordu, en çok %60 */
}

/* #1492: at >= 1024 px a long event name stacked into five rows and pushed the venue out of the card; a 52 px name (the card leaves a 368 px names box) sets it in four. */
@media (min-width: 1024px) {
  [data-theme="editorial-monogram"] .inv-cover__names { font-size: 3.25rem; }
}

/* Görev 1527: uzun ad (≥ 22 karakter, sayfa data-name-long + --inv-name-chars yazar): her ad tek satıra sığacak boyuta iner, kutu kapak genişliğine açılır; "ad / & / ad" = 3 satır. */
@media (max-width: 47.99rem) {
  [data-theme="editorial-monogram"] .inv-cover__names[data-name-long] { max-width: 100%; font-size: max(26px, calc((100vw - 2 * var(--space-6)) / (var(--inv-name-chars, 17) * .5))); }
  [data-theme="editorial-monogram"] .inv-cover__names[data-name-long] .inv-cover__name { font-size: inherit; }
}

/* Görev 1527: tarih ve saat paylaşılan ölçü token'larında (390'da 28 / 16 px); kapak ile açılış aynı ölçüyü kullanır. */
[data-theme="editorial-monogram"] .inv-cover__day { font-size: var(--inv-text-date); line-height: var(--inv-lh-date); letter-spacing: .03em; white-space: normal; }
[data-theme="editorial-monogram"] .inv-cover__time { font-size: var(--inv-text-time-min); }
[data-theme="editorial-monogram"] .inv-cover__date { font-size: var(--inv-text-date); line-height: var(--inv-lh-date); }