.nook {
    position: relative;
    display: grid;
    width: 100%;
    min-width: 0;
    max-width: 970px;
    margin: var(--home-space-8) auto;
    color: var(--home-text-muted);
    container-type: inline-size;
}
.nook__container { width: 100%; height: 250px; min-width: 0; }
.nook--content .nook__container { width: 100%; max-width: 320px; margin-inline: auto; }
.nook--strip .nook__container { height: 100px; }
.nook--header { margin: var(--home-space-6) 0 0; }
/* In the blog's mosaic a place is one tall tile of a column. */
.nook--tile { height: 100%; margin: 0; }
.nook--tile .nook__container { height: 100%; border-radius: 0.875rem; overflow: hidden; }
/* Beside the blog feed: a tall place that stays in view while the feed scrolls. */
.nook--aside { margin: 0; }
.nook--aside .nook__container { height: auto; max-height: 37.5rem; aspect-ratio: 1 / 2; border-radius: 1rem; overflow: hidden; }
/* On a course the same place stands under the topics, as tall as a 240×400 banner there, and on a
   narrow screen above the course as a band. */
@media (min-width: 75rem) { .blog-hub__start .nook--aside .nook__container { aspect-ratio: 3 / 5; } }
@media (max-width: 74.99rem) { .blog-hub__start .nook--aside .nook__container { height: 15.625rem; max-height: none; aspect-ratio: auto; } }
/* An article on a narrow screen opens with that band, so the strip under its cover would be a
   second advertisement before the first word: there it stands down. */
@media (max-width: 74.99rem) { .blog-hub--post .blog-post > .nook--strip { display: none; } }
.nook--header .nook__container { height: 100px; }
[data-places="preview"] .nook__container { outline: 1px dashed var(--color-line); background: var(--color-surface); }
[data-places="off"] .nook,
.nook[data-nook-state="disabled"] { display: none; }
/* Keep the reserved geometry when an auction is empty so the reader's text does not jump. */
.nook[data-nook-state="empty"] { visibility: hidden; }
.reading-result__heading { min-width: 0; }
@container (min-width: 728px) {
    .nook--content .nook__container { max-width: none; }
    .nook--content .nook__container { height: 100px; }
}
/* The text of a blog article is narrower than that on a computer and a tablet, yet a square
   there would stand alone in a wide column: between its chapters the place is a strip as wide
   as the text, as under the cover. A phone's column keeps the rectangle. */
@container (min-width: 37.5rem) {
    .blog-post__doc .nook--content .nook__container { max-width: none; height: 100px; }
}
@media (min-width: 1024px) {
    [data-places]:not([data-places="off"]) .reading-result__header:has(> .nook--header:not([data-nook-state="disabled"])) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); gap: var(--home-space-8); align-items: center; }
    .nook--header { margin: 0; }
    .nook--header .nook__container { height: 120px; }
}
@media (max-width: 767px) {
    .nook:not(.nook--header, .nook--tile, .nook--aside) { margin-block: var(--home-space-6); }
}

/* The site's own banners in the advertising places (WEB_ADVERTISING_NETWORK=house).
   A place holds a banner of its natural height; one the page has no banner for stays out of
   the way. Places for the site's own banners alone are hidden while the network fills the
   others. */
.nook[data-nook-house] { display: none; }
[data-places="house"] .nook[data-nook-house] { display: grid; }
[data-places="house"] .nook:not([data-invite]) { display: none; }
[data-places="house"] .nook__container { width: 100%; height: auto; max-width: none; }
[data-places="house"] .nook--tile .nook__container { height: 100%; }
[data-places="house"] .nook--aside .nook__container { max-height: none; aspect-ratio: auto; }
@media (min-width: 75rem) { [data-places="house"] .blog-hub__start .nook--aside .nook__container { aspect-ratio: auto; } }
@media (max-width: 74.99rem) { [data-places="house"] .blog-hub__start .nook--aside .nook__container { height: auto; } }
@media (min-width: 1024px) {
    [data-places="house"] .nook--header .nook__container { height: auto; }
}
@container (min-width: 728px) {
    [data-places="house"] .nook--content .nook__container { height: auto; }
}
@container (min-width: 37.5rem) {
    [data-places="house"] .blog-post__doc .nook--content .nook__container { height: auto; }
}
/* Between the parts of the article under a calculator stands a wide gap: the banner takes its middle,
   as much room above as below. A banner right before that article shares the article's opening gap the same way. */
.numerology-seo { --seo-gap: var(--home-section-gap); }
@media (max-width: 63.9375rem) { .numerology-seo { --seo-gap: calc(var(--home-section-gap) * 0.72); } }
@media (max-width: 47.9375rem) { .numerology-seo { --seo-gap: calc(var(--home-section-gap) * 0.55); } }
.numerology-seo > .nook { margin: calc(var(--seo-gap) * -0.5) auto calc(var(--seo-gap) * 0.5); }
.nook:has(+ .numerology-seo) { margin-block: calc(var(--home-section-gap) * 0.5) 0; }
.nook:has(+ .numerology-seo) + .numerology-seo { padding-block-start: calc(var(--seo-gap) * 0.5); }
@media (max-width: 63.9375rem) { .nook:has(+ .numerology-seo) { margin-block-start: calc(var(--home-section-gap) * 0.36); } }
@media (max-width: 47.9375rem) { .nook:has(+ .numerology-seo) { margin-block-start: calc(var(--home-section-gap) * 0.275); } }
/* The site's own banner keeps to the edges of the content it stands in, not to the network's 970 pixels. */
[data-places="house"] :is(.numerology-seo > .nook, .nook:has(+ .numerology-seo)) { max-width: none; }
/* Under the workspace of the readings the banner keeps its distance and the workspace's width. */
.reading-workspace + .nook:not(:has(+ .numerology-seo)) { margin-block: var(--home-space-20) 0; }
[data-places="house"] .reading-workspace + .nook { max-width: none; }
@media (max-width: 767px) { .reading-workspace + .nook:not(:has(+ .numerology-seo)) { margin-block-start: var(--home-space-12); } }
/* The card of the day's workspace keeps 40 pixels of its own under its last words: on a phone the banner under it takes them off. */
@media (max-width: 47.9375rem) { .daily-card-portal + .nook:has(+ .numerology-seo) { margin-block-start: calc(var(--home-section-gap) * 0.275 - 2.5rem); } }
/* A banner inside a reading stands between its parts as one of them. */
.numerology-answer-doc > .nook { margin: var(--home-space-6) 0; }

/* The site's own banners (HousePromoCatalog). Each looks its own — its layout, its colours,
   its button — so that two on one page are never taken for one, and each is bright against
   the dark page while keeping the site's quiet manner: no borders, no shadows, the site's
   serif in its plain weight with an italic half, small capitals over the heading. The colours
   are warm; a banner stands out by its picture and its colour, not by its noise. */
.invite {
    --promo-title-size: clamp(1.25rem, 0.95rem + 2.1cqi, 1.75rem);
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
    overflow: hidden;
    border-radius: var(--home-radius-surface);
    background: var(--promo-bg);
    color: var(--promo-title);
    font-family: var(--home-font);
    text-align: start;
    text-decoration: none;
}
a.invite:focus-visible { outline: 2px solid var(--promo-em); outline-offset: 3px; }
.invite__media { position: relative; flex: none; overflow: hidden; background: color-mix(in srgb, var(--promo-title) 10%, var(--promo-bg)); }
.invite__photo { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1); }
.invite__body { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; padding: 1.25rem; }
.invite__overline { color: var(--promo-overline); font-size: 0.6875rem; letter-spacing: 0.14em; line-height: 1.3; text-transform: uppercase; }
.invite__title { color: var(--promo-title); font-size: var(--promo-title-size); font-weight: 400; line-height: 1.12; letter-spacing: -0.01em; text-wrap: balance; }
.invite__title em { color: var(--promo-em); font-style: italic; }
/* A line under the heading is two lines at most: a banner is read at a glance. */
.invite__text { display: -webkit-box; max-width: 34em; overflow: hidden; color: var(--promo-text); font-size: 0.875rem; line-height: 1.5; text-wrap: pretty; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.invite__badge { position: absolute; z-index: 3; top: 0.875rem; left: 0.875rem; padding: 0.3125rem 0.625rem; border-radius: 999px; background: var(--promo-badge, var(--promo-button)); color: var(--promo-badge-ink, var(--promo-button-ink)); font-size: 0.625rem; letter-spacing: 0.12em; line-height: 1.2; text-transform: uppercase; }

/* The buttons: a filled pill; the blog's bar, its words at the start and its arrow at the far
   end; a translucent pill; an underlined link whose arrow is not underlined; a round arrow. */
.invite__cta { display: inline-flex; align-items: center; gap: 0.625rem; margin-block-start: 0.5rem; color: var(--promo-button-ink); font-family: inherit; font-size: 0.875rem; line-height: 1.2; transition: background-color 180ms ease, color 180ms ease; }
.invite__arrow { display: inline-block; transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1); }
.invite__cta--solid, .invite__cta--tint { min-height: 2.75rem; padding: 0 1.125rem 0 1.25rem; border-radius: 999px; background: var(--promo-button); }
.invite__cta--tint { background: color-mix(in srgb, var(--promo-title) 14%, transparent); color: var(--promo-title); }
.invite__cta--bar { justify-content: space-between; align-self: stretch; max-width: 20rem; min-height: 2.75rem; padding: 0 0.875rem 0 1.125rem; border-radius: 0.75rem; background: var(--promo-button); }
.invite__cta--link { display: inline; padding-block: 0.25rem; color: var(--promo-em); line-height: 1.5; }
.invite__cta--link .invite__arrow { margin-inline-start: 0.375rem; }
.invite__cta--link .invite__cta-text { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.35em; }
.invite__cta--round { justify-content: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--promo-button); font-size: 1.125rem; }
@media (hover: hover) {
    .invite:hover .invite__arrow { transform: translateX(0.25rem); }
    .invite:hover .invite__photo { transform: scale(1.04); }
    .invite:hover :is(.invite__cta--solid, .invite__cta--bar, .invite__cta--round) { background: color-mix(in srgb, var(--promo-button) 88%, var(--promo-title)); }
    .invite:hover .invite__cta--tint { background: color-mix(in srgb, var(--promo-title) 22%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
    .invite__photo, .invite__arrow, .invite__cta { transition: none; }
}

/* The colours of each banner: its ground, heading, italic half, words, small capitals and button. */
.invite--rose { --promo-bg: #120d14; --promo-title: #fff6f3; --promo-em: #f7b6c6; --promo-text: rgba(255, 246, 243, 0.82); --promo-overline: #f7b6c6; --promo-button: #fff1ec; --promo-button-ink: #5a1a2c; --promo-badge: #f7b6c6; --promo-badge-ink: #3d0f1d; }
.invite--dusk { --promo-bg: #1a100c; --promo-title: #fff4ea; --promo-em: #ffc79a; --promo-text: rgba(255, 244, 234, 0.84); --promo-overline: #ffc79a; --promo-button: #ffc79a; --promo-button-ink: #3d1d0c; }
.invite--candle { --promo-bg: #120b0a; --promo-title: #fbf1e4; --promo-em: #f1b96d; --promo-text: rgba(251, 241, 228, 0.82); --promo-overline: #f1b96d; --promo-button: #f1b96d; --promo-button-ink: #2a1606; --promo-badge: #f1b96d; --promo-badge-ink: #2a1606; --promo-field: rgba(255, 255, 255, 0.14); --promo-field-ink: #fbf1e4; }
.invite--gold { --promo-bg: #0b0b0e; --promo-title: #fbf3e2; --promo-em: #f0c477; --promo-text: rgba(251, 243, 226, 0.8); --promo-overline: #f0c477; --promo-button: #f0c477; --promo-button-ink: #1d1406; --promo-badge: #f0c477; --promo-badge-ink: #1d1406; }
.invite--dawn { --promo-bg: #15100c; --promo-title: #fff8ef; --promo-em: #ffd08a; --promo-text: rgba(255, 248, 239, 0.84); --promo-overline: #ffd08a; --promo-button: #fff8ef; --promo-button-ink: #4a2a10; --promo-badge: #ffd08a; --promo-badge-ink: #3a2008; }
.invite--crimson { --promo-bg: #1a0a0e; --promo-title: #fff4ef; --promo-em: #ffb9a8; --promo-text: rgba(255, 244, 239, 0.82); --promo-overline: #ffb9a8; --promo-button: #fff4ef; --promo-button-ink: #6b1426; --promo-badge: #ffb9a8; --promo-badge-ink: #4a0d1a; }
.invite--garnet { --promo-bg: #14080c; --promo-title: #fff2ee; --promo-em: #ff9f9a; --promo-text: rgba(255, 242, 238, 0.82); --promo-overline: #f1b96d; --promo-button: #f1b96d; --promo-button-ink: #3a0f12; --promo-badge: #f1b96d; --promo-badge-ink: #3a0f12; }
.invite--wine { --promo-bg: #4b1527; --promo-title: #fdecee; --promo-em: #f4a6ba; --promo-text: rgba(253, 236, 238, 0.78); --promo-overline: #f4a6ba; --promo-button: #f4a6ba; --promo-button-ink: #3a0d1b; --promo-field: rgba(255, 255, 255, 0.1); --promo-field-ink: #fdecee; }
.invite--coral { --promo-bg: #a9452f; --promo-title: #fff3ea; --promo-em: #ffd6bd; --promo-text: rgba(255, 243, 234, 0.86); --promo-overline: #ffd6bd; --promo-button: #fff3ea; --promo-button-ink: #8a3322; }
.invite--cocoa { --promo-bg: #2b1a13; --promo-title: #fbf0e4; --promo-em: #f1b96d; --promo-text: rgba(251, 240, 228, 0.78); --promo-overline: #f1b96d; --promo-button: #f1b96d; --promo-button-ink: #2b1a13; }
.invite--ivory { --promo-bg: #f3ece0; --promo-title: #24192e; --promo-em: #9a5b2a; --promo-text: rgba(36, 25, 46, 0.74); --promo-overline: #9a6a2f; --promo-button: #24192e; --promo-button-ink: #f3ece0; --promo-field: rgba(36, 25, 46, 0.07); --promo-field-ink: #24192e; --promo-alert: #a3291f; }
.invite--blush { --promo-bg: #f4dcd9; --promo-title: #3b1421; --promo-em: #a63c5c; --promo-text: rgba(59, 20, 33, 0.76); --promo-overline: #a63c5c; --promo-button: #3b1421; --promo-button-ink: #f4dcd9; }
.invite--peach { --promo-bg: #f6d9c6; --promo-title: #3a1c12; --promo-em: #b4472a; --promo-text: rgba(58, 28, 18, 0.76); --promo-overline: #b4472a; --promo-button: #3a1c12; --promo-button-ink: #f6d9c6; }
.invite--sand { --promo-bg: #eed9be; --promo-title: #392313; --promo-em: #b3522c; --promo-text: rgba(57, 35, 19, 0.76); --promo-overline: #b3522c; --promo-button: #392313; --promo-button-ink: #eed9be; --promo-field: rgba(57, 35, 19, 0.08); --promo-field-ink: #392313; --promo-alert: #a3291f; }
.invite--apricot { --promo-bg: #f5e1c4; --promo-title: #3a2414; --promo-em: #b4542d; --promo-text: rgba(58, 36, 20, 0.76); --promo-overline: #b4542d; --promo-button: #3a2414; --promo-button-ink: #f5e1c4; --promo-badge: #3a2414; --promo-badge-ink: #f5e1c4; }
.invite--forest { --promo-bg: #1e3a2e; --promo-title: #eef5ee; --promo-em: #a9dcbb; --promo-text: rgba(238, 245, 238, 0.78); --promo-overline: #a9dcbb; --promo-button: #a9dcbb; --promo-button-ink: #15291f; }

/* A poster: the picture whole, the words over its lower part under a dark shade, as a tile of the blog has them. */
.invite--poster { --promo-title-size: clamp(1.375rem, 0.9rem + 3cqi, 2.125rem); justify-content: flex-end; min-height: 22rem; }
.invite--poster .invite__media { position: absolute; inset: 0; }
.invite__veil { position: absolute; z-index: 1; inset: 0; background: linear-gradient(to top, rgba(5, 6, 10, 0.9), rgba(5, 6, 10, 0.55) 42%, rgba(5, 6, 10, 0) 72%); pointer-events: none; }
.invite--poster .invite__body { padding: 1.375rem; }
.invite--poster .invite__body > .invite__badge { position: static; margin-block-end: 0.25rem; }
/* A form over its picture keeps the shade deeper, so its field reads as well as its words. */
.invite--poster.invite--form .invite__media { aspect-ratio: auto; }
.invite--poster.invite--form .invite__veil { background: linear-gradient(to top, rgba(5, 6, 10, 0.94), rgba(5, 6, 10, 0.7) 50%, rgba(5, 6, 10, 0.1) 85%); }

/* A split: a coloured half beside the picture; on a narrow place the picture stands over the words. */
.invite--split .invite__media { aspect-ratio: 16 / 10; }
.invite--split .invite__body { flex: 1 1 auto; justify-content: center; }

/* A framed picture on light paper, the words under it or beside it. */
/* A note: the banner's words alone, for a product without a picture of its own. */
.invite--note { justify-content: center; border: 1px solid color-mix(in srgb, var(--promo-em) 28%, transparent); }
.invite--note .invite__body { gap: 0.625rem; padding: clamp(1.25rem, 4cqi, 2rem); }
.invite--note .invite__badge { position: static; align-self: flex-start; }
.invite--framed { padding: 0.625rem; }
.invite--framed .invite__media { aspect-ratio: 4 / 3; border-radius: calc(var(--home-radius-surface) - 0.5rem); }
.invite--framed .invite__body { flex: 1 1 auto; justify-content: center; padding: 1rem 0.75rem 0.75rem; }

/* A form: a birth date — or two — and the button that opens the reading with them. */
.invite--form .invite__media { aspect-ratio: 16 / 9; }
.invite--form .invite__body { flex: 1 1 auto; justify-content: center; }
.invite__fields { display: grid; gap: 0.5rem; width: 100%; margin-block-start: 0.25rem; }
/* One date needs no more room than a date takes. */
.invite__fields:has(> .invite__field:only-child) { max-width: 17rem; }
.invite__field { display: grid; gap: 0.25rem; }
.invite__label { color: var(--promo-text); font-size: 0.75rem; line-height: 1.3; }
.invite__input { width: 100%; min-height: 2.75rem; padding: 0 0.875rem; border: 0; border-radius: 0.75rem; background: var(--promo-field, rgba(255, 255, 255, 0.1)); color: var(--promo-field-ink, var(--promo-title)); font: inherit; font-size: 1rem; font-variant-numeric: lining-nums tabular-nums; letter-spacing: 0.04em; outline: none; }
.invite__input::placeholder { color: color-mix(in srgb, var(--promo-field-ink, var(--promo-title)) 42%, transparent); }
.invite__input:focus-visible { box-shadow: inset 0 0 0 2px var(--promo-em); }
.invite__input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--promo-alert, #ff9a8f); }
button.invite__cta { border: 0; cursor: pointer; }
button.invite__cta:focus-visible { outline: 2px solid var(--promo-em); outline-offset: 2px; }
.invite__error { color: var(--promo-alert, #ffb3a8); font-size: 0.8125rem; line-height: 1.4; }
.invite__error[hidden] { display: none; }

/* In the feed's mosaic the banner is as tall as its tile: the picture takes what the words leave.
   A tile is a container of both its sizes, so a banner knows how much room the feed gave it. */
[data-places="house"] .nook--tile { container-type: size; }
.nook--tile .invite { --promo-title-size: clamp(1.0625rem, 0.45rem + 6.2cqi, 1.625rem); }
.nook--tile :is(.invite--split, .invite--framed) .invite__media { flex: 1 1 auto; min-height: 7rem; aspect-ratio: auto; }
.nook--tile :is(.invite--split, .invite--framed) .invite__body { flex: none; }
.nook--tile .invite--poster { min-height: 0; }
.nook--tile .invite__body { padding: 1rem; }
.nook--tile .invite__title { overflow-wrap: anywhere; hyphens: auto; }
.nook--tile .invite__text { font-size: 0.8125rem; }
.nook--tile .invite__cta { font-size: 0.8125rem; }
.nook--tile :is(.invite__cta--solid, .invite__cta--tint, .invite__cta--bar) { min-height: 2.5rem; padding: 0.5rem 0.875rem 0.5rem 1rem; }
/* A short tile keeps the picture, the heading and the button. */
@container (max-height: 24rem) {
    .nook--tile .invite__text, .nook--tile .invite__overline { display: none; }
}
@container (max-width: 13rem) {
    .nook--tile .invite__body { gap: 0.375rem; padding: 0.75rem; }
    .nook--tile .invite--framed { padding: 0.4375rem; }
    .nook--tile .invite--framed .invite__body { padding: 0.625rem 0.375rem 0.375rem; }
    .nook--tile .invite__cta { margin-block-start: 0.25rem; font-size: 0.75rem; }
    .nook--tile :is(.invite__cta--solid, .invite__cta--tint, .invite__cta--bar) { gap: 0.375rem; min-height: 2.25rem; padding: 0.375rem 0.75rem; }
    .nook--tile .invite__cta--round { width: 2.5rem; height: 2.5rem; font-size: 1rem; }
    .nook--tile .invite__badge { top: 0.5rem; left: 0.5rem; }
}

/* A wide place lays the banner out as a band — the column beside the feed too, where a narrow screen stretches it across. */
@container (min-width: 30rem) {
    :is(.nook:not(.nook--tile), .blog-invite) .invite { flex-direction: row; min-height: 13rem; }
    :is(.nook:not(.nook--tile), .blog-invite) .invite--flip { flex-direction: row-reverse; }
    :is(.nook:not(.nook--tile), .blog-invite) .invite__body { flex: 1 1 auto; justify-content: center; padding: 1.75rem 2rem; }
    :is(.nook:not(.nook--tile), .blog-invite) .invite__text { -webkit-line-clamp: 3; line-clamp: 3; }
    :is(.nook:not(.nook--tile), .blog-invite) .invite__cta--bar { min-width: 15rem; }
    :is(.nook:not(.nook--tile), .blog-invite) .invite--split .invite__media { width: 44%; aspect-ratio: auto; }
    :is(.nook:not(.nook--tile), .blog-invite) .invite--form:not(.invite--poster) .invite__media { width: 36%; aspect-ratio: auto; }
    /* The poster keeps its picture on the right and lets it fade into its own dark ground on the left. */
    :is(.nook:not(.nook--tile), .blog-invite) .invite--poster { justify-content: flex-start; align-items: center; min-height: 15rem; }
    :is(.nook:not(.nook--tile), .blog-invite) .invite--poster .invite__media { left: 34%; width: auto; }
    :is(.nook:not(.nook--tile), .blog-invite) .invite--poster .invite__veil { background: linear-gradient(to right, var(--promo-bg) 34%, color-mix(in srgb, var(--promo-bg) 70%, transparent) 46%, transparent 68%); }
    :is(.nook:not(.nook--tile), .blog-invite) .invite--poster .invite__body { flex: 0 1 auto; max-width: 58%; }
    :is(.nook:not(.nook--tile), .blog-invite) .invite--framed { flex-direction: row-reverse; padding: 0.625rem; }
    :is(.nook:not(.nook--tile), .blog-invite) .invite--framed .invite__media { width: 40%; aspect-ratio: auto; }
    :is(.nook:not(.nook--tile), .blog-invite) .invite--framed .invite__body { padding: 1.25rem 1.5rem; }
    :is(.nook:not(.nook--tile), .blog-invite) .invite__fields { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
}
@container (min-width: 46rem) {
    :is(.nook:not(.nook--tile), .blog-invite) .invite { min-height: 14.5rem; }
}
/* As wide as a whole article, the band grows taller, so a poster's people keep their faces. */
@container (min-width: 60rem) {
    :is(.nook:not(.nook--tile), .blog-invite) .invite { --promo-title-size: 2rem; min-height: 18rem; }
    :is(.nook:not(.nook--tile), .blog-invite) .invite--poster { --promo-title-size: 2.375rem; }
    :is(.nook:not(.nook--tile), .blog-invite) .invite__body { gap: 0.75rem; padding: 2.5rem 3rem; }
    :is(.nook:not(.nook--tile), .blog-invite) .invite__text { font-size: 1rem; }
    :is(.nook:not(.nook--tile), .blog-invite) .invite--split .invite__media { width: 50%; }
}
.invite--poster .invite__photo { object-position: 50% 30%; }