/* ============================================================================
   REFINED — unified typography & image-ratio layer
   Applies to creative templates: 23 syakira · 24 linda · 29 cassandra ·
   30 chitra · 31 insan · 33 serlyn · 38 olan · 39 syanin · 42 nadya

   This file is loaded LAST and overrides exclusive-*.css where they disagree.

   Design rules
   ------------
   1. Headings render in Instrument Serif (weight 400 — the face has no bold;
      synthetic bold is disabled on purpose).
   2. Body copy renders in Plus Jakarta Sans.
   3. One type scale in every template:
        display  names & cover titles     clamp(38px, 10vw, 44px) / 50px ≥1024px
        section  section titles           clamp(28px, 7.5vw, 32px) / 34px ≥1024px
        card     item titles & dates      22px / 24px ≥1024px
        label    small captions           18px
   4. Body copy is Plus Jakarta Sans at 16px everywhere.
   5. Photos crop (object-fit: cover) instead of stretching; QR codes use
      contain so they never distort.

   Functional numerals keep their designed sizes: countdown numbers
   (.count-*), bank account numbers/names and the "&" separator.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. Typography tokens — one body size, one heading face
--------------------------------------------------------------------------- */
body.syakira,
body.linda,
body.cassandra,
body.chitra,
body.insan,
body.serlyn,
body.olan,
body.syanin,
body.nadya {
    --heading-family: 'Instrument Serif', serif;
    --headings-text-family: 'Instrument Serif', serif;
    --body-text-family: 'Plus Jakarta Sans', sans-serif;
    --body-text-size: 16px;
}

/* 30 maps its heading token through --instrumen; point it at the real face */
body.chitra {
    --instrumen: 'Instrument Serif', serif;
}

/* 24 derives heading/body sizes from --fs-* tokens */
body.linda {
    --fs-content: 16px;
}

/* 33 derives body copy from --fs-content as well */
body.serlyn {
    --fs-content: 16px;
}

/* ---------------------------------------------------------------------------
   2. Heading face & weight — Instrument Serif everywhere
--------------------------------------------------------------------------- */
body.syakira h1, body.syakira h2, body.syakira h3,
body.syakira h4, body.syakira h5, body.syakira h6,
body.linda h1, body.linda h2, body.linda h3,
body.linda h4, body.linda h5, body.linda h6,
body.cassandra h1, body.cassandra h2, body.cassandra h3,
body.cassandra h4, body.cassandra h5, body.cassandra h6,
body.chitra h1, body.chitra h2, body.chitra h3,
body.chitra h4, body.chitra h5, body.chitra h6,
body.insan h1, body.insan h2, body.insan h3,
body.insan h4, body.insan h5, body.insan h6,
body.serlyn h1, body.serlyn h2, body.serlyn h3,
body.serlyn h4, body.serlyn h5, body.serlyn h6,
body.olan h1, body.olan h2, body.olan h3,
body.olan h4, body.olan h5, body.olan h6,
body.syanin h1, body.syanin h2, body.syanin h3,
body.syanin h4, body.syanin h5, body.syanin h6,
body.nadya h1, body.nadya h2, body.nadya h3,
body.nadya h4, body.nadya h5, body.nadya h6 {
    font-family: 'Instrument Serif', serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
}

/* ---------------------------------------------------------------------------
   3. Type scale — roles beat raw tags, so component classes stay predictable.
   Tag-level rules carry !important because several templates size unclassed
   headings (hero names, gallery titles) with high-specificity legacy rules.
   Countdown numerals are excluded via :where (zero specificity) — they are data, not titles.
--------------------------------------------------------------------------- */

/* Fallback scale for headings without a role class */
body.syakira h1, body.linda h1, body.cassandra h1, body.chitra h1,
body.insan h1, body.serlyn h1, body.olan h1, body.syanin h1, body.nadya h1 {
    font-size: clamp(28px, 7.5vw, 32px) !important;
    line-height: 1.2;
}

body.syakira h2:not(:where(.count-num,.count-day,.count-hour,.count-minute,.count-second)),
body.linda h2:not(:where(.count-num,.count-day,.count-hour,.count-minute,.count-second)),
body.cassandra h2:not(:where(.count-num,.count-day,.count-hour,.count-minute,.count-second)),
body.chitra h2:not(:where(.count-num,.count-day,.count-hour,.count-minute,.count-second)),
body.insan h2:not(:where(.count-num,.count-day,.count-hour,.count-minute,.count-second)),
body.serlyn h2:not(:where(.count-num,.count-day,.count-hour,.count-minute,.count-second)),
body.olan h2:not(:where(.count-num,.count-day,.count-hour,.count-minute,.count-second)),
body.syanin h2:not(:where(.count-num,.count-day,.count-hour,.count-minute,.count-second)),
body.nadya h2:not(:where(.count-num,.count-day,.count-hour,.count-minute,.count-second)) {
    font-size: clamp(26px, 7vw, 30px) !important;
    line-height: 1.25;
}

body.syakira h3, body.linda h3, body.cassandra h3, body.chitra h3,
body.insan h3, body.serlyn h3, body.olan h3, body.syanin h3, body.nadya h3 {
    font-size: 22px !important;
    line-height: 1.3;
}

body.syakira h4, body.linda h4, body.cassandra h4, body.chitra h4,
body.insan h4, body.serlyn h4, body.olan h4, body.syanin h4, body.nadya h4,
body.syakira h5, body.linda h5, body.cassandra h5, body.chitra h5,
body.insan h5, body.serlyn h5, body.olan h5, body.syanin h5, body.nadya h5,
body.syakira h6, body.linda h6, body.cassandra h6, body.chitra h6,
body.insan h6, body.serlyn h6, body.olan h6, body.syanin h6, body.nadya h6 {
    font-size: 18px !important;
    line-height: 1.35;
}

/* Hero covers render the couple's names in unclassed h1/h2 nodes inside
   .details wrappers — promote them to the display step of the scale. */
body.syakira .primary-pane .inner .details h1,
body.linda .primary-pane .inner .details h1,
body.cassandra .primary-pane .inner .details h1,
body.chitra .primary-pane .inner .details h1,
body.insan .primary-pane .inner .details h1,
body.serlyn .primary-pane .inner .details h1,
body.olan .primary-pane .inner .details h1,
body.syanin .primary-pane .inner .details h1,
body.nadya .primary-pane .inner .details h1,
body.syakira .top-cover .inner .details h1,
body.linda .top-cover .inner .details h1,
body.cassandra .top-cover .inner .details h1,
body.chitra .top-cover .inner .details h1,
body.insan .top-cover .inner .details h1,
body.serlyn .top-cover .inner .details h1,
body.olan .top-cover .inner .details h1,
body.syanin .top-cover .inner .details h1,
body.nadya .top-cover .inner .details h1,
body.syanin .cover>.inner>.cover-couple>h1,
body.cassandra .cover>.inner>.head h1,
body.chitra .gallery-head h2 {
    font-size: clamp(38px, 10vw, 44px) !important;
    line-height: 1.12 !important;
}

@media only screen and (min-width: 1024px) {

    body.syakira .primary-pane .inner .details h1,
    body.linda .primary-pane .inner .details h1,
    body.cassandra .primary-pane .inner .details h1,
    body.chitra .primary-pane .inner .details h1,
    body.insan .primary-pane .inner .details h1,
    body.serlyn .primary-pane .inner .details h1,
    body.olan .primary-pane .inner .details h1,
    body.syanin .primary-pane .inner .details h1,
    body.nadya .primary-pane .inner .details h1,
    body.syakira .top-cover .inner .details h1,
    body.linda .top-cover .inner .details h1,
    body.cassandra .top-cover .inner .details h1,
    body.chitra .top-cover .inner .details h1,
    body.insan .top-cover .inner .details h1,
    body.serlyn .top-cover .inner .details h1,
    body.olan .top-cover .inner .details h1,
    body.syanin .top-cover .inner .details h1,
    body.nadya .top-cover .inner .details h1,
    body.syanin .cover>.inner>.cover-couple>h1,
    body.cassandra .cover>.inner>.head h1,
    body.chitra .gallery-head h2 {
        font-size: 50px !important;
        line-height: 1.1 !important;
    }
}

/* Display — couple names, cover & footer titles */
body.syakira .title,
body.syakira .prime-title,
body.syakira .couple-name,
body.syakira .footnote-title,
body.linda .title,
body.linda .prime-title,
body.linda .couple-name,
body.linda .footnote-title,
body.cassandra .title,
body.cassandra .prime-title,
body.cassandra .couple-name,
body.cassandra .footnote-title,
body.chitra .title,
body.chitra .prime-title,
body.chitra .couple-name,
body.chitra .footnote-title,
body.insan .title,
body.insan .prime-title,
body.insan .couple-name,
body.insan .footnote-title,
body.serlyn .title,
body.serlyn .prime-title,
body.serlyn .couple-name,
body.serlyn .footnote-title,
body.olan .title,
body.olan .prime-title,
body.olan .couple-name,
body.olan .footnote-title,
body.syanin .title,
body.syanin .prime-title,
body.syanin .couple-name,
body.syanin .footnote-title,
body.nadya .title,
body.nadya .prime-title,
body.nadya .couple-name,
body.nadya .bride-name,
body.nadya .groom-name,
body.nadya .footnote-title {
    font-size: clamp(38px, 10vw, 44px) !important;
    line-height: 1.12 !important;
}

@media only screen and (min-width: 1024px) {

    body.syakira .title,
    body.syakira .prime-title,
    body.syakira .couple-name,
    body.syakira .footnote-title,
    body.linda .title,
    body.linda .prime-title,
    body.linda .couple-name,
    body.linda .footnote-title,
    body.cassandra .title,
    body.cassandra .prime-title,
    body.cassandra .couple-name,
    body.cassandra .footnote-title,
    body.chitra .title,
    body.chitra .prime-title,
    body.chitra .couple-name,
    body.chitra .footnote-title,
    body.insan .title,
    body.insan .prime-title,
    body.insan .couple-name,
    body.insan .footnote-title,
    body.serlyn .title,
    body.serlyn .prime-title,
    body.serlyn .couple-name,
    body.serlyn .footnote-title,
    body.olan .title,
    body.olan .prime-title,
    body.olan .couple-name,
    body.olan .footnote-title,
    body.syanin .title,
    body.syanin .prime-title,
    body.syanin .couple-name,
    body.syanin .footnote-title,
    body.nadya .title,
    body.nadya .prime-title,
    body.nadya .couple-name,
    body.nadya .bride-name,
    body.nadya .groom-name,
    body.nadya .footnote-title {
        font-size: 50px !important;
        line-height: 1.1 !important;
    }
}

/* Section — the recurring section titles */
body.syakira .couple-title,
body.syakira .photo-title,
body.syakira .save-date-title,
body.syakira .wedding-gift-title,
body.syakira .guestbook-title,
body.syakira .agenda-title,
body.linda .couple-title,
body.linda .photo-title,
body.linda .save-date-title,
body.linda .wedding-gift-title,
body.linda .guestbook-title,
body.linda .agenda-title,
body.linda .story-title,
body.cassandra .couple-title,
body.cassandra .photo-title,
body.cassandra .save-date-title,
body.cassandra .wedding-gift-title,
body.cassandra .guestbook-title,
body.cassandra .agenda-title,
body.chitra .couple-title,
body.chitra .photo-title,
body.chitra .save-date-title,
body.chitra .wedding-gift-title,
body.chitra .guestbook-title,
body.chitra .agenda-title,
body.insan .couple-title,
body.insan .photo-title,
body.insan .wedding-gift-title,
body.insan .guestbook-title,
body.insan .agenda-title,
body.serlyn .couple-title,
body.serlyn .photo-title,
body.serlyn .save-date-title,
body.serlyn .wedding-gift-title,
body.serlyn .guestbook-title,
body.serlyn .agenda-title,
body.olan .couple-title,
body.olan .photo-title,
body.olan .love-story-title,
body.olan .save-date-title,
body.olan .wedding-gift-title,
body.olan .guestbook-title,
body.olan .agenda-title,
body.syanin .couple-title,
body.syanin .photo-title,
body.syanin .wedding-gift-title,
body.syanin .guestbook-title,
body.syanin .agenda-title,
body.nadya .couple-title,
body.nadya .photo-title,
body.nadya .wedding-gift-title,
body.nadya .guestbook-title,
body.nadya .agenda-title,
body.syakira .rsvp-title,
body.linda .rsvp-title,
body.cassandra .rsvp-title,
body.chitra .rsvp-title,
body.insan .rsvp-title,
body.serlyn .rsvp-title,
body.olan .rsvp-title,
body.syanin .rsvp-title,
body.nadya .rsvp-title {
    font-size: clamp(28px, 7.5vw, 32px) !important;
    line-height: 1.2 !important;
}

@media only screen and (min-width: 1024px) {

    body.syakira .couple-title,
    body.syakira .photo-title,
    body.syakira .save-date-title,
    body.syakira .wedding-gift-title,
    body.syakira .guestbook-title,
    body.syakira .agenda-title,
    body.linda .couple-title,
    body.linda .photo-title,
    body.linda .save-date-title,
    body.linda .wedding-gift-title,
    body.linda .guestbook-title,
    body.linda .agenda-title,
    body.linda .story-title,
    body.cassandra .couple-title,
    body.cassandra .photo-title,
    body.cassandra .save-date-title,
    body.cassandra .wedding-gift-title,
    body.cassandra .guestbook-title,
    body.cassandra .agenda-title,
    body.chitra .couple-title,
    body.chitra .photo-title,
    body.chitra .save-date-title,
    body.chitra .wedding-gift-title,
    body.chitra .guestbook-title,
    body.chitra .agenda-title,
    body.insan .couple-title,
    body.insan .photo-title,
    body.insan .wedding-gift-title,
    body.insan .guestbook-title,
    body.insan .agenda-title,
    body.serlyn .couple-title,
    body.serlyn .photo-title,
    body.serlyn .save-date-title,
    body.serlyn .wedding-gift-title,
    body.serlyn .guestbook-title,
    body.serlyn .agenda-title,
    body.olan .couple-title,
    body.olan .photo-title,
    body.olan .love-story-title,
    body.olan .save-date-title,
    body.olan .wedding-gift-title,
    body.olan .guestbook-title,
    body.olan .agenda-title,
    body.syanin .couple-title,
    body.syanin .photo-title,
    body.syanin .wedding-gift-title,
    body.syanin .guestbook-title,
    body.syanin .agenda-title,
    body.nadya .couple-title,
    body.nadya .photo-title,
    body.nadya .wedding-gift-title,
    body.nadya .guestbook-title,
    body.nadya .agenda-title,
    body.syakira .rsvp-title,
    body.linda .rsvp-title,
    body.cassandra .rsvp-title,
    body.chitra .rsvp-title,
    body.insan .rsvp-title,
    body.serlyn .rsvp-title,
    body.olan .rsvp-title,
    body.syanin .rsvp-title,
    body.nadya .rsvp-title {
        font-size: 34px !important;
        line-height: 1.2 !important;
    }
}

/* Card — item titles, dates, story headings */
body.syakira .activity-title,
body.syakira .event-date,
body.syakira .story-label,
body.syakira .story-details-title,
body.linda .activity-title,
body.linda .event-date,
body.linda .story-label,
body.linda .story-details-title,
body.cassandra .activity-title,
body.cassandra .event-date,
body.cassandra .story-label,
body.chitra .activity-title,
body.chitra .event-date,
body.chitra .story-label,
body.insan .activity-title,
body.insan .event-date,
body.insan .story-label,
body.serlyn .activity-title,
body.serlyn .event-date,
body.serlyn .story-label,
body.olan .activity-title,
body.olan .event-date,
body.olan .story-label,
body.olan .story-chitra__title,
body.syanin .activity-title,
body.syanin .event-date,
body.syanin .story-label,
body.nadya .activity-title,
body.nadya .event-date,
body.nadya .story-label {
    font-size: 22px !important;
    line-height: 1.3 !important;
}

@media only screen and (min-width: 1024px) {

    body.syakira .activity-title,
    body.syakira .event-date,
    body.syakira .story-label,
    body.syakira .story-details-title,
    body.linda .activity-title,
    body.linda .event-date,
    body.linda .story-label,
    body.linda .story-details-title,
    body.cassandra .activity-title,
    body.cassandra .event-date,
    body.cassandra .story-label,
    body.chitra .activity-title,
    body.chitra .event-date,
    body.chitra .story-label,
    body.insan .activity-title,
    body.insan .event-date,
    body.insan .story-label,
    body.serlyn .activity-title,
    body.serlyn .event-date,
    body.serlyn .story-label,
    body.olan .activity-title,
    body.olan .event-date,
    body.olan .story-label,
    body.olan .story-chitra__title,
    body.syanin .activity-title,
    body.syanin .event-date,
    body.syanin .story-label,
    body.nadya .activity-title,
    body.nadya .event-date,
    body.nadya .story-label {
        font-size: 24px !important;
    }
}

/* Label — small headings (day names, bank names) */
body.syakira .event-day,
body.syakira .bank-name,
body.linda .event-day,
body.linda .bank-name,
body.cassandra .event-day,
body.cassandra .bank-name,
body.chitra .event-day,
body.chitra .bank-name,
body.insan .event-day,
body.insan .bank-name,
body.serlyn .event-day,
body.serlyn .bank-name,
body.olan .event-day,
body.olan .bank-name,
body.syanin .event-day,
body.syanin .bank-name,
body.nadya .event-day,
body.nadya .bank-name {
    font-size: 18px !important;
    line-height: 1.35 !important;
}

/* Decorative separator keeps its role, gains the family scale balance.
   Italic returns here only — every other heading is set upright above. */
body.syakira .couple-separator,
body.linda .couple-separator,
body.cassandra .couple-separator,
body.chitra .couple-separator,
body.insan .couple-separator,
body.serlyn .couple-separator,
body.olan .couple-separator,
body.syanin .couple-separator,
body.nadya .couple-separator {
    font-size: clamp(30px, 8vw, 36px) !important;
    font-style: italic !important;
    line-height: 1 !important;
}

/* ---------------------------------------------------------------------------
   4. Body copy — Plus Jakarta Sans, one readable size, comfortable leading.
   The face lands twice: on the body (inheritance baseline) and directly on
   common text elements, so hard-coded legacy faces cannot leak through.
--------------------------------------------------------------------------- */
body.syakira,
body.linda,
body.cassandra,
body.chitra,
body.insan,
body.serlyn,
body.olan,
body.syanin,
body.nadya {
    font-family: 'Plus Jakarta Sans', sans-serif;
}

body.syakira p,
body.linda p,
body.cassandra p,
body.chitra p,
body.insan p,
body.serlyn p,
body.olan p,
body.syanin p,
body.nadya p,
body.syakira li,
body.linda li,
body.cassandra li,
body.chitra li,
body.insan li,
body.serlyn li,
body.olan li,
body.syanin li,
body.nadya li,
body.syakira label,
body.linda label,
body.cassandra label,
body.chitra label,
body.insan label,
body.serlyn label,
body.olan label,
body.syanin label,
body.nadya label,
body.syakira small,
body.linda small,
body.cassandra small,
body.chitra small,
body.insan small,
body.serlyn small,
body.olan small,
body.syanin small,
body.nadya small {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 16px;
    line-height: 1.7;
    font-style: normal;
}

/* Legacy high-specificity copy rules need an equally strong hand */
body.syakira .couple-description,
body.linda .couple-description,
body.cassandra .couple-description,
body.chitra .couple-description,
body.insan .couple-description,
body.serlyn .couple-description,
body.olan .couple-description,
body.syanin .couple-description,
body.nadya .couple-description,
body.syakira .couple-parents,
body.linda .couple-parents,
body.cassandra .couple-parents,
body.chitra .couple-parents,
body.insan .couple-parents,
body.serlyn .couple-parents,
body.olan .couple-parents,
body.syanin .couple-parents,
body.nadya .couple-parents {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 16px !important;
    font-style: normal !important;
}

body.syanin .top-cover>.inner>.details p,
body.syanin section.top-cover .cover-free-text,
body.syanin .cover>.inner>.cover-couple>p,
body.insan .couple-info .couple-details p {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 16px !important;
    font-style: normal;
}

/* Form controls follow the body face as well */
body.syakira input,
body.syakira select,
body.syakira textarea,
body.syakira button,
body.linda input,
body.linda select,
body.linda textarea,
body.linda button,
body.cassandra input,
body.cassandra select,
body.cassandra textarea,
body.cassandra button,
body.chitra input,
body.chitra select,
body.chitra textarea,
body.chitra button,
body.insan input,
body.insan select,
body.insan textarea,
body.insan button,
body.serlyn input,
body.serlyn select,
body.serlyn textarea,
body.serlyn button,
body.olan input,
body.olan select,
body.olan textarea,
body.olan button,
body.syanin input,
body.syanin select,
body.syanin textarea,
body.syanin button,
body.nadya input,
body.nadya select,
body.nadya textarea,
body.nadya button {
    font-family: 'Plus Jakarta Sans', sans-serif;
}

/* ---------------------------------------------------------------------------
   5. Image ratio — crop, never squash
--------------------------------------------------------------------------- */
body.syakira .picture img,
body.linda .picture img,
body.cassandra .picture img,
body.chitra .picture img,
body.insan .picture img,
body.serlyn .picture img,
body.olan .picture img,
body.syanin .picture img,
body.nadya .picture img,
body.syakira .img-wrap img,
body.linda .img-wrap img,
body.cassandra .img-wrap img,
body.chitra .img-wrap img,
body.insan .img-wrap img,
body.serlyn .img-wrap img,
body.olan .img-wrap img,
body.syanin .img-wrap img,
body.nadya .img-wrap img,
body.serlyn .story-picture img,
body.serlyn .photo-box .photo-img {
    object-fit: cover;
    object-position: center;
}

/* 33 renders galleries/story shots full-width from mixed portrait +
   landscape sources; a stable ratio keeps every tile the same shape */
body.serlyn .story-picture img,
body.serlyn .photo-box .photo-img {
    aspect-ratio: 4 / 5;
}

/* QR codes must keep their exact geometry */
body.syakira .bank-img,
body.linda .bank-img,
body.cassandra .bank-img,
body.chitra .bank-img,
body.insan .bank-img,
body.serlyn .bank-img,
body.olan .bank-img,
body.syanin .bank-img,
body.nadya .bank-img {
    object-fit: contain;
}