/* Gece Varağı · midnight-foil — Atölye #2 (#397, Mina).
   Contract: docs/tasarim/v2/yon.md §2 row 2, §3 (sharp), §4. Selectors: [data-theme] + .inv-cover only.
   Foil = gradient of palette tokens clipped to text (no text-shadow). */

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

  --inv-bg: #131A2E;
  --inv-surface: #1B2440;
  --inv-text: #F4EEDF;
  --inv-text-muted: #B9B3A3;
  --inv-primary: #D8B46A;
  --inv-on-primary: #131A2E;
  --inv-accent: #E9D3A0;
  --inv-ornament: #C9A15B;
  --inv-border: #34406A;
  --inv-backdrop: #0E1424;
  --inv-danger: #FF8A80;
  --inv-focus: var(--inv-text);

  --inv-font-script: 'Bodoni Moda', Georgia, serif; /* used italic 500 */
  --inv-font-display: 'Cinzel', Georgia, serif;
  --inv-font-body: 'Lora', Georgia, serif;
  /* yon.md §4.1/12: Cinzel's "1" reads as "I" → dates, counters, stepper and calendar leaf use Lora (lining by default) */
  --inv-font-numeric: 'Lora', Georgia, serif;
  --inv-display-weight: 500;
  --inv-display-transform: uppercase;
  --inv-display-tracking: .2em;
  --inv-body-size: 1.0625rem;
  --inv-radius: 0px;

  /* motion: sharp and luxurious (yon.md §3 column 2) */
  --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; /* foil glint on section dividers only */

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

/* ---- Cover: deco fan frame on ink, foil-stamped names inside the pointed arch ---- */
[data-theme="midnight-foil"] .inv-cover {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100svh;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--space-3);
  padding: 18svh var(--space-8) 18svh;
  text-align: center;
  color: var(--inv-text);
  background: var(--inv-bg);
}
[data-theme="midnight-foil"] .inv-cover__art {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--inv-art-scene) 50% 50% / cover no-repeat;
}
[data-theme="midnight-foil"] .inv-cover__eyebrow {
  margin: 0;
  font: var(--inv-display-weight) .875rem/1.4 var(--inv-font-display);
  letter-spacing: var(--inv-display-tracking);
  text-transform: var(--inv-display-transform);
  color: var(--inv-accent);
}
[data-theme="midnight-foil"] .inv-cover__names {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  column-gap: .2em;
  row-gap: .4em; /* italic script content boxes taller than 1.15 line: keep wrapped name lines apart (bekçi) */
  margin: 0;
  padding-inline: .1em;
  /* 52 → 88. The page sets --inv-name-word-chars (letters in the longest name word); the cap sizes that word to the cover
     column (~.6em per letter) so it never breaks mid-word, and is far above 88 for short names so they keep the full size.
     Under 1024 the column is the viewport minus both paddings; from 1024 it is the fixed 560 column (496 net). */
  font: italic 500 min(clamp(3.25rem, 2.4rem + 3.4vw, 5.5rem), calc((100vw - 2 * var(--space-8)) / (var(--inv-name-word-chars, 8) * .6)))/1.15 var(--inv-font-script);
  background: linear-gradient(100deg, var(--inv-ornament) 0%, var(--inv-accent) 32%, var(--inv-primary) 52%, var(--inv-accent) 74%, var(--inv-ornament) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
[data-theme="midnight-foil"] .inv-cover__amp { font-size: .6em; }
[data-theme="midnight-foil"] .inv-cover__date {
  margin: var(--space-2) 0 0;
  font: 400 .9375rem/1.4 var(--inv-font-numeric); /* §4.1/12 */
  font-variant-numeric: lining-nums;
  letter-spacing: clamp(.12em, .08em + .5vw, .2em);
  text-transform: var(--inv-display-transform);
  color: var(--inv-text);
}
[data-theme="midnight-foil"] .inv-cover__venue {
  margin: 0;
  font: 400 1rem/1.5 var(--inv-font-body);
  color: var(--inv-text-muted);
}
[data-theme="midnight-foil"] .inv-cover__scroll {
  /* Akışta durur: uzun tarih/mekân satırında kapak uzar, bağlantı üstlerine binmez (#607). */
  justify-self: center;
  margin-top: var(--space-6);
  font: var(--inv-display-weight) .875rem/1 var(--inv-font-display);
  color: var(--inv-accent);
}

/* §4.1 (1): page markup wraps the cover text in .inv-cover__content and splits the date into day + time.
   The wrapper is dissolved so the cover grid above places every line itself. */
[data-theme="midnight-foil"] .inv-cover__content { display: contents; }
[data-theme="midnight-foil"] .inv-cover__date time { display: block; }
[data-theme="midnight-foil"] .inv-cover__day { display: block; }
[data-theme="midnight-foil"] .inv-cover__time { display: block; margin-top: .3em; font-size: var(--inv-text-meta); color: var(--inv-text-muted); }
[data-theme="midnight-foil"] .inv-cover__guest, [data-theme="midnight-foil"] .inv-cover__badge { margin: 0; font: 400 1rem/1.4 var(--inv-font-body); color: var(--inv-text-muted); }

/* §4.1 (2): at >= 1024 the scene fills the 560 column only. The phone scene (390x844, slice) cropped the fan at 560x900,
   so the column gets its own composition drawn for 560x900 (art/scene-wide.svg): fan, arch and frame fully visible. */
@media (min-width: 1024px) {
  [data-theme="midnight-foil"] .inv-cover__art { background: url("art/scene-wide.svg") 50% 50% / cover no-repeat, var(--inv-bg); }
}
/* Page rules may still reach the cover until page.css scopes them to body:not([data-cover="theme"]) — keep the theme's own flow. */
[data-theme="midnight-foil"] .inv-cover__names { flex-direction: row; }
/* Long names / venue must wrap inside the 390 column instead of pushing past it. */
[data-theme="midnight-foil"] :is(.inv-cover__names, .inv-cover__venue, .inv-cover__date) { min-width: 0; max-width: 100%; overflow-wrap: break-word; }
@media (min-width: 1024px) {
  [data-theme="midnight-foil"] .inv-cover { width: auto; margin-inline: 0; }
  [data-theme="midnight-foil"] .inv-cover__names { font-size: min(clamp(3.25rem, 2.4rem + 3.4vw, 5.5rem), calc((560px - 2 * var(--space-8)) / (var(--inv-name-word-chars, 8) * .6))); }
}

/* 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="midnight-foil"] .inv-cover__names[data-name-long] { max-width: 100%; letter-spacing: -.045em; font-size: max(26px, calc((100vw - 2 * var(--space-6)) / (var(--inv-name-chars, 17) * .5))); }
  [data-theme="midnight-foil"] .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="midnight-foil"] .inv-cover__day { font-size: var(--inv-text-date); line-height: var(--inv-lh-date); letter-spacing: .03em; white-space: normal; }
[data-theme="midnight-foil"] .inv-cover__time { font-size: var(--inv-text-time-min); }
[data-theme="midnight-foil"] .inv-cover__date { font-size: var(--inv-text-date); line-height: var(--inv-lh-date); }