/* The home page alone (Ben 29-10 17:50, sample by Claude; pass 2 after Ben's GO at 19:39): one warm summer night.
   The ground is a deep blue-indigo night; at each horizon (the top of a part, the edge of a band, behind the contact)
   it glows through violet, plum and dusky rose into coral and apricot, then gold where the light is. Ben's own
   photographs hang on it with soft round corners (pass 4); his approved images are atmosphere: soft windows beside two
   headings and above the Letter, a quiet moving band that opens the booklets, and the open sea under the contact.
   Wherever a photograph meets a band of colour, the edge fades (pass 4). The shop stays the one lamplit room.
   Colours sampled with ImageMagick from still1 / loopA (the meadow sky) and still9 (the open sea after sunset);
   where each comes from is listed in REPORT.md. One family: EB Garamond.
   Loaded last, on / only (scripts/home-evening.mjs); the shared house shell keeps its own styles. */

html body.evening-home,
.evening-home {
  /* The night: the loop's own falling night (end frame, zenith #212940, hue 225) taken down and kept blue. */
  --ev-night: #111832;
  --ev-deep: #0b1023;
  --ev-raised: #1f2847;
  --ev-line: rgba(250, 217, 160, .2);
  /* A horizon, from the night up to the light (still1's sky column, top to horizon; still9 for the rose). */
  --ev-h-indigo: #29335b;   /* still1 zenith #49597B, deepened */
  --ev-h-violet: #4c4474;   /* still1 9% #727086, its violet kept */
  --ev-h-plum: #875e7b;     /* still1 12% #8C7481, its mauve kept */
  --ev-h-rose: #a67b80;     /* still1 15%, as sampled (still9 #B07A7B) */
  --ev-h-coral: #eb937e;    /* still1 rose band, as sampled */
  --ev-h-apricot: #f8c08f;  /* still1 glow above the horizon, as sampled */
  --ev-h-light: #fad9a0;    /* still1 brightest 1% of the sky */
  /* Type on the night. */
  --ev-cream: #fad9a0;      /* = the brightest sky */
  --ev-copy: #f6e7cb;
  --ev-quiet: #d2c1a7;
  --ev-gold: #f2c46d;       /* the brightest sky's hue (38-39) at a deeper light */
  --ev-honey: #f3b268;      /* still1 horizon gold #FAC68A's hue (32), deeper */
  --ev-amber: #e0913f;
  /* The lamplit shop. */
  --ev-lamp: #fcf2d9;
  --ev-lamp-2: #f8e3b2;
  --ev-ink: #141d3d;        /* the night as ink, never brown */
  --ev-ink-soft: #37446c;
  --ev-lamp-line: rgba(20, 29, 61, .16);
  --ev-rise: linear-gradient(180deg, rgba(41, 51, 91, 0) 0%, var(--ev-h-indigo) 26%, var(--ev-h-violet) 44%, var(--ev-h-plum) 60%, var(--ev-h-rose) 74%, var(--ev-h-coral) 88%, var(--ev-h-apricot) 100%);
  --ev-fall: linear-gradient(0deg, rgba(41, 51, 91, 0) 0%, var(--ev-h-indigo) 26%, var(--ev-h-violet) 44%, var(--ev-h-plum) 60%, var(--ev-h-rose) 74%, var(--ev-h-coral) 88%, var(--ev-h-apricot) 100%);
  --ev-wrap: min(1200px, calc(100% - 48px));
  margin: 0;
  background: var(--ev-night);
  color: var(--ev-copy);
  font-family: var(--font-body);
  font-variant-numeric: lining-nums proportional-nums;
  -webkit-font-smoothing: antialiased;
}
.evening-home main { background: var(--ev-night); }
.evening-home main > * { margin-block: 0; }
.evening-home ::selection { background: var(--ev-gold); color: var(--ev-ink); }
.evening-home :is(h1, h2, h3, h4) { text-wrap: balance; font-weight: 400; letter-spacing: -.01em; }
.evening-home p { text-wrap: pretty; }
.evening-home [id] { scroll-margin-top: 16px; }
.evening-home :focus-visible { outline: 2px solid var(--ev-gold); outline-offset: 4px; border-radius: 2px; }
.evening-home #books :focus-visible { outline-color: var(--ev-ink); }
.evening-home .evening-loop, .evening-home .evening-horizon { position: relative; }
.evening-home img { max-width: 100%; }
.evening-home figure { margin: 0; }
.evening-wrap { width: var(--ev-wrap); margin-inline: auto; }

.evening-label {
  margin: 0 0 8px;
  font: 600 11.5px/1.5 var(--font-body);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ev-gold);
}
.evening-more {
  font: 500 15px/1.4 var(--font-body);
  color: var(--ev-honey);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .3em;
  white-space: nowrap;
}
.evening-more:hover { color: var(--ev-cream); }

/* Header: the mark, the name, and the four parts of the page. */
.evening-header { background: var(--ev-night); border-bottom: 1px solid var(--ev-line); }
.evening-header__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 32px; padding-block: 14px; }
.evening-wordmark { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; color: var(--ev-cream); text-decoration: none; font: 400 29px/1 var(--font-display); letter-spacing: .012em; }
/* Pass 4 (pin 2): the one logo, the sunset over teal water, as a round sun with a soft warm glow instead of an opaque
   square tile; a fine gold ring holds its edge on the night. The logo file itself is unchanged. */
.evening-wordmark img { width: 36px; height: 36px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(250, 217, 160, .34), 0 0 18px 2px rgba(248, 192, 143, .24); }
.evening-wordmark span { padding-top: .06em; text-shadow: 0 0 24px rgba(248, 192, 143, .16); }
.evening-wordmark:hover span { color: var(--ev-gold); }
.evening-nav { display: flex; flex-wrap: wrap; gap: 0 26px; }
.evening-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ev-copy); text-decoration: none; font: 500 14.5px/1 var(--font-body); letter-spacing: .02em; border-bottom: 1px solid transparent; }
.evening-nav a:hover { color: var(--ev-gold); border-bottom-color: currentColor; }
@media (max-width: 640px) {
  .evening-nav { width: 100%; justify-content: space-between; gap: 0; }
  .evening-nav a { font-size: 13.5px; min-height: 40px; }
}

/* 1. About us: the name, the opening photograph, Ben's introduction. */
.evening-title { position: relative; display: grid; gap: 16px; padding-block: clamp(40px, 7vw, 92px) clamp(88px, 11vw, 164px); }
.evening-title > * { position: relative; z-index: 1; }
/* The afterglow itself: the night glows into its horizon just above the opening photograph.
   The words stay in the indigo-to-violet part (contrast in REPORT.md). */
.evening-title::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 100vw; height: clamp(160px, 20vw, 300px); transform: translateX(-50%); background: var(--ev-rise); pointer-events: none; }
.evening-title h1 { margin: 0; font: 400 clamp(76px, 12.5vw, 172px)/.84 var(--font-display); color: var(--ev-cream); letter-spacing: -.02em; }
.evening-title__line { margin: 0; max-width: 31ch; font: italic 400 clamp(19px, 2vw, 25px)/1.45 var(--font-body); color: var(--ev-gold); }
@media (min-width: 900px) {
  .evening-title { grid-template-columns: auto minmax(0, 1fr); align-items: end; column-gap: clamp(40px, 5vw, 80px); }
  .evening-title__line { padding-bottom: .55em; }
}

.evening-hero { position: relative; overflow: hidden; background: var(--ev-deep); }
/* Pass 4 (pin 3): the photograph ends in the river's reflection; the sandy bank and the path below it are cut out
   (a crop from the top of the same file: 86% of its height on wide screens, 75% of the phone crop). */
.evening-hero img { display: block; width: 100%; height: auto; aspect-ratio: 1920 / 830; object-fit: cover; object-position: 50% 0; transform-origin: 40% 30%; animation: evening-drift 40s ease-in-out infinite alternate; }
@media (max-width: 700px) { .evening-hero img { aspect-ratio: 960 / 900; object-position: 50% 0; } }
@keyframes evening-drift { from { transform: scale(1); } to { transform: scale(1.045) translate3d(.5%, .4%, 0); } }

.evening-intro { position: relative; width: var(--ev-wrap); margin-inline: auto; padding-block: clamp(64px, 9vw, 136px) clamp(120px, 13vw, 200px); display: grid; gap: 48px; }
.evening-intro > * { position: relative; z-index: 1; }
.evening-intro::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 100vw; height: clamp(130px, 15vw, 230px); transform: translateX(-50%); background: var(--ev-rise); pointer-events: none; }
.evening-about { overflow-x: clip; }
.evening-home .evening-intro .home-ben-intro { width: auto; max-width: none; margin: 0; padding: 0; background: none; border: 0; }
.evening-home .home-ben-intro__body { max-width: 35em; margin: 0; }
.evening-home .home-ben-intro__body p { margin: 0 0 1.15em; font: 400 clamp(18px, 1.5vw, 21px)/1.75 var(--font-body); color: var(--ev-copy); }
.evening-home .home-ben-intro__body p:first-child::first-letter { float: left; margin: .1em .12em 0 -.02em; font: 400 3.55em/.78 var(--font-display); color: var(--ev-gold); }
.evening-home .home-ben-intro__body .home-ben-intro__signature { margin: 1.1em 0 0; font: italic 400 44px/1 var(--font-display); color: var(--ev-gold); }
.evening-plate img { display: block; width: 100%; height: auto; border-radius: 18px; box-shadow: 0 30px 64px -34px rgba(0, 0, 0, .7), 0 0 0 1px rgba(246, 220, 172, .08); }
.evening-plate--anemone { width: min(64%, 360px); justify-self: center; }
@media (min-width: 900px) {
  .evening-intro { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: clamp(56px, 8vw, 128px); align-items: center; }
  .evening-plate--anemone { width: 100%; max-width: 360px; justify-self: end; }
}

/* Photographs between the parts, full width. */
.evening-band { overflow: hidden; background: var(--ev-deep); }
.evening-band img { display: block; width: 100%; object-fit: cover; }
.evening-band--grass img { height: clamp(200px, 30vw, 440px); object-position: 50% 45%; transform-origin: 50% 60%; animation: evening-wind 32s ease-in-out infinite alternate; }
@keyframes evening-wind { from { transform: scale(1.06) translate3d(-1.4%, 0, 0); } to { transform: scale(1.06) translate3d(1.4%, 0, 0); } }
.evening-band--dunes img { height: auto; aspect-ratio: 1920 / 965; max-height: 78svh; object-position: 50% 0; }
@media (max-width: 700px) { .evening-band--dunes img { aspect-ratio: 4 / 3; object-position: 80% 0; } }

@media (prefers-reduced-motion: reduce) {
  .evening-hero img, .evening-band--grass img { animation: none; transform: none; }
}

/* Section heads. */
.evening-section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 32px; margin: 0 0 clamp(40px, 5vw, 72px); padding-bottom: 20px; border-bottom: 1px solid var(--ev-line); }
.evening-section-head h2 { margin: 0; font: 400 clamp(46px, 6vw, 84px)/.95 var(--font-display); color: var(--ev-cream); }
.evening-section-head > p { margin: 0; max-width: 40em; font-size: 16px; line-height: 1.55; color: var(--ev-quiet); }
.evening-subhead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 28px; margin: 0 0 30px; }
.evening-subhead h3 { margin: 0; font: 400 clamp(32px, 3.3vw, 44px)/1 var(--font-display); color: var(--ev-cream); }
.evening-subhead p { margin: 0; max-width: 40em; font-size: 16px; line-height: 1.55; color: var(--ev-quiet); }

/* Ben's approved images beside two headings (and, since pass 4, the coast above the Letter): windows, not hung
   pictures (no frame, round corners, only a quiet shadow), so they read as the evening around the part and never as
   one more video or book. */
.evening-section-head--window { display: grid; gap: 26px; align-items: end; }
.evening-section-head__text { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.evening-window { margin: 0; overflow: hidden; aspect-ratio: 2 / 1; border-radius: 22px; background: var(--ev-raised); box-shadow: 0 26px 56px -32px rgba(0, 0, 0, .7); }
.evening-window img { display: block; width: 100%; height: 100%; object-fit: cover; }
.evening-window--books-window img { object-position: 50% 62%; }
.evening-window--forest-light img { object-position: 50% 58%; }
.evening-window--greek-coast img { object-position: 50% 60%; }
@media (min-width: 900px) {
  /* Pass 4 (pin 7): the words stand centred against their window, not on its foot. */
  .evening-section-head--window { grid-template-columns: minmax(0, 1fr) minmax(0, 600px); column-gap: clamp(40px, 6vw, 96px); align-items: center; }
  .evening-section-head--window .evening-window { aspect-ratio: 16 / 8.5; }
}
@media (max-width: 899px) { .evening-window { border-radius: 16px; } }
.evening-home #books .evening-window { background: var(--ev-lamp-2); box-shadow: 0 26px 52px -34px rgba(11, 35, 64, .45); }

/* 2. The shop: the lamplit room. */
.evening-home #books.bookshop-lead { margin: 0; padding-block: clamp(64px, 8vw, 128px); background: linear-gradient(180deg, var(--ev-lamp) 0%, #faecc8 60%, var(--ev-lamp-2) 100%); color: var(--ev-ink); border: 0; box-shadow: none; }
.evening-home #books .evening-section-head { border-bottom-color: var(--ev-lamp-line); }
.evening-home #books .evening-section-head h2 { color: var(--ev-ink); }
.evening-home #books .evening-more { color: var(--ev-ink); }
.evening-home #books .evening-more:hover { color: var(--ev-ink-soft); }
.evening-home #books .evening-label { color: var(--ev-ink-soft); }

.evening-home #books .home-language-chooser { margin: 0 0 48px; padding: 20px 22px; border-radius: 14px; background: var(--ev-ink); color: var(--ev-cream); border: 0; }
.evening-home #books .home-language-chooser .ui-label { margin: 0 0 12px; font: 600 12px/1.5 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ev-gold); }
.evening-home #books .home-language-chooser__links { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.evening-home #books .home-language-chooser__links .button { display: inline-flex; align-items: center; min-height: 46px; padding: 0 20px; border-radius: 999px; background: var(--ev-gold) !important; border: 0 !important; color: var(--ev-ink) !important; font: 600 15px/1.2 var(--font-body); text-decoration: none; }
.evening-home #books .home-language-chooser__links .publisher-text-link { color: var(--ev-cream); }

.evening-home #books .evening-shelf { display: grid; gap: clamp(72px, 9vw, 128px); }
.evening-home #books .evening-book { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.evening-home #books .evening-book > div { display: block; min-width: 0; }
.evening-home #books .evening-book__cover { display: block; justify-self: center; width: min(62vw, 300px); max-width: none; margin: 0; float: none; }
.evening-home #books .evening-book__cover img { display: block; width: 100%; height: auto; max-width: none; border-radius: 3px; box-shadow: 0 34px 60px -26px rgba(11, 35, 64, .6), 0 12px 24px -14px rgba(11, 35, 64, .45); }
@media (min-width: 900px) {
  .evening-home #books .evening-book { grid-template-columns: minmax(0, 330px) minmax(0, 1fr); column-gap: clamp(48px, 6vw, 96px); align-items: start; }
  .evening-home #books .evening-book__cover { width: 100%; position: sticky; top: 28px; }
}
.evening-home #books .evening-book .bookshop-lead__title { margin: 0 0 10px; font: 400 clamp(42px, 4.4vw, 62px)/1 var(--font-display); color: var(--ev-ink); }
.evening-home #books .evening-book .bookshop-lead__title a { color: inherit; text-decoration: none; }
.evening-home #books .evening-book .bookshop-lead__title a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .12em; }
.evening-home #books .evening-book .bookshop-subtitle { margin: 0 0 14px; font: italic 400 19px/1.45 var(--font-body); color: var(--ev-ink-soft); }
.evening-home #books .evening-book .bookshop-lead__byline { margin: 0 0 18px; font: 600 12px/1.5 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ev-ink-soft); }
.evening-home #books .evening-book .bookshop-promise { margin: 0 0 30px; max-width: 34em; font: 400 18.5px/1.6 var(--font-body); color: var(--ev-ink); }

.evening-formats { display: grid; gap: 16px; }
@media (min-width: 640px) { .evening-formats { grid-template-columns: 1fr 1fr; } }
.evening-format { display: flex; flex-direction: column; gap: 14px; padding: 22px 22px 24px; border-radius: 16px; background: rgba(255, 252, 244, .78); border: 1px solid var(--ev-lamp-line); }
.evening-format__name { margin: 0; font: 400 32px/1 var(--font-display); color: var(--ev-ink); }
.evening-home #books .evening-format :is(.direct-ebook-purchase, .book-audio--home, .catalogue-book__purchase, .edition-checkout-box) { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; max-width: none; }
.evening-home #books .evening-format .edition-checkout-actions { margin: 0; display: block; }
.evening-home #books .evening-format a.edition-checkout-trigger { display: flex; align-items: center; justify-content: center; gap: .4em; width: 100%; min-height: 54px; margin: 0; padding: 0 22px; border-radius: 999px; background: var(--ev-ink) !important; border: 1px solid var(--ev-ink) !important; color: var(--ev-lamp) !important; font: 600 17px/1 var(--font-body) !important; letter-spacing: .01em; text-decoration: none; box-shadow: 0 10px 24px -14px rgba(11, 35, 64, .7); }
.evening-home #books .evening-format a.edition-checkout-trigger:hover { background: #163a63 !important; border-color: #163a63 !important; }
.evening-home #books .evening-format .edition-checkout-price { color: inherit !important; font: inherit !important; }
.evening-home #books .evening-format :is(.edition-checkout-methods, .edition-checkout-also, .book-audio__spotify, .edition-checkout-lost-link, .edition-checkout-reassurance, .direct-ebook-purchase > p) { margin: 10px 0 0; font: 400 13.5px/1.55 var(--font-body); color: var(--ev-ink-soft); text-align: left; }
.evening-home #books .evening-format :is(.edition-checkout-also__link, .book-audio__spotify__link) { color: var(--ev-ink); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: rgba(20, 29, 61, .4); text-underline-offset: .22em; }
.evening-home #books .evening-format :is(.edition-checkout-also__link, .book-audio__spotify__link):hover { text-decoration-color: currentColor; }
.evening-home #books .evening-format--ebook .edition-checkout-reassurance { display: none; }
.evening-home #books .evening-format .edition-checkout-reassurance__lock { filter: grayscale(1); opacity: .7; }
.evening-home #books .evening-format .bookshop-explore { margin-top: auto; padding-top: 4px; font: 500 14.5px/1.5 var(--font-body); color: var(--ev-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; }

/* The listening sample: a real control on the existing <audio>; the native player shows without JavaScript. */
.evening-listen { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.evening-listen__button { appearance: none; display: inline-flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 20px 0 8px; border-radius: 999px; background: transparent; border: 1px solid rgba(11, 35, 64, .45); color: var(--ev-ink); font: 500 15.5px/1 var(--font-body); cursor: pointer; }
.evening-listen__button:hover { background: rgba(11, 35, 64, .06); border-color: var(--ev-ink); }
.evening-listen__icon { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--ev-amber); }
.evening-listen__icon::after { content: ""; position: absolute; left: 11.5px; top: 9.5px; border-style: solid; border-width: 5.5px 0 5.5px 9px; border-color: transparent transparent transparent var(--ev-lamp); }
.evening-listen.is-playing .evening-listen__icon::after { left: 10.5px; top: 10px; width: 3px; height: 10px; border: 0; background: var(--ev-lamp); box-shadow: 6px 0 0 var(--ev-lamp); }
.evening-listen__time { font: 400 13.5px/1 var(--font-body); font-variant-numeric: tabular-nums; color: var(--ev-ink-soft); }
.evening-listen::after { content: ""; position: absolute; left: 0; bottom: -7px; height: 2px; width: calc(var(--progress, 0) * 100%); background: var(--ev-amber); border-radius: 2px; transition: width .25s linear; }
.evening-listen .store-sample-player { width: 100%; margin: 0; }
.evening-listen .store-sample-player audio { width: 100%; }
.evening-listen-ready .evening-listen .store-sample-player { display: none; }

.evening-book__editions { margin-top: 30px; }
.evening-home #books .evening-book .bookshop-language-list { display: flex; flex-wrap: wrap; gap: 2px 20px; margin: 0; padding: 0; border: 0; background: none; }
.evening-home #books .evening-book .bookshop-language-list a { display: inline-flex; align-items: center; min-height: 36px; padding: 0; border: 0; background: none; color: var(--ev-ink); font: 400 15.5px/1.2 var(--font-body); text-decoration: none; border-bottom: 1px solid transparent; }
.evening-home #books .evening-book .bookshop-language-list a:hover { border-bottom-color: currentColor; }
.evening-home #books .evening-book .bookshop-preparing { margin: 8px 0 0; font-size: 14px; color: var(--ev-ink-soft); }
.evening-home #books .evening-book .bookshop-preparing a { color: inherit; }

/* Where to buy (Ben 29-10 20:08): our own shop first (the two cards, then our Payhip lines), then one plain line of
   the other stores that carry the book. Quiet text links; no badges, logos or tabs. */
.evening-where { display: grid; gap: 16px; }
.evening-home #books .evening-where__label { margin: 0 0 -2px; }
.evening-home #books .evening-stores { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; background: none; font-size: inherit; }
.evening-home #books .evening-where .retailer-showcase__payhip { display: flex; flex-wrap: wrap; gap: 0 24px; margin: 0; }
.evening-home #books .evening-where .retailer-showcase__payhip-line { margin: 0; font: 400 14px/1.6 var(--font-body); color: var(--ev-ink-soft); }
.evening-home #books .evening-where .retailer-showcase__payhip a { display: inline-flex; align-items: center; min-height: 40px; color: var(--ev-ink) !important; background: none !important; border: 0 !important; padding: 0 !important; font: inherit !important; text-decoration: underline; text-underline-offset: .2em; }
.evening-home #books .evening-also { max-width: none; margin: 0; padding-top: 14px; border-top: 1px solid var(--ev-lamp-line); font: 400 15.5px/1.5 var(--font-body); color: var(--ev-ink-soft); }
.evening-also__label { margin-right: .9em; font: 600 11.5px/1.5 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--ev-ink-soft); }
.evening-home #books .evening-also a { display: inline-flex; align-items: center; min-height: 40px; padding: 0; border: 0; border-radius: 0; background: none; color: var(--ev-ink); font: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: rgba(20, 29, 61, .4); text-underline-offset: .24em; }
.evening-home #books .evening-also a:hover { background: none; text-decoration-color: currentColor; }
.evening-also__dot { color: var(--ev-ink-soft); }

/* 3. Videos and free booklets: night again. */
.evening-content { position: relative; background: var(--ev-night); padding-block: clamp(110px, 12vw, 180px) clamp(56px, 6vw, 96px); }
.evening-content > .evening-wrap { position: relative; z-index: 1; }
.evening-content::before { content: ""; position: absolute; inset: 0 0 auto; height: clamp(130px, 15vw, 230px); background: var(--ev-fall); pointer-events: none; }
.evening-home .home-videos { margin: 0; padding: 0; border: 0; }
.evening-videos { display: grid; gap: 52px 36px; }
@media (min-width: 760px) { .evening-videos { grid-template-columns: 1fr 1fr; } }
.evening-video__picture { display: block; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 14px; background: var(--ev-raised); box-shadow: 0 28px 58px -34px rgba(0, 0, 0, .75); }
.evening-video__picture img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.evening-video:hover .evening-video__picture img { transform: scale(1.025); }
.evening-video .evening-label { margin-top: 20px; }
.evening-video h3 { margin: 0 0 10px; font: 400 clamp(27px, 2.4vw, 33px)/1.12 var(--font-display); }
.evening-video h3 a { color: var(--ev-cream); text-decoration: none; }
.evening-video h3 a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .14em; }
.evening-video > p { margin: 0 0 14px; max-width: 36em; font-size: 16.5px; line-height: 1.62; color: var(--ev-copy); }
.evening-video .evening-video__actions { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; }
.evening-video__actions a { display: inline-flex; align-items: center; min-height: 40px; color: var(--ev-honey); font: 500 15.5px/1.3 var(--font-body); text-underline-offset: .25em; }
.evening-video__actions a:hover { color: var(--ev-cream); }
.evening-home .home-videos__more { margin: 44px 0 0; }

.evening-booklets { margin-top: clamp(88px, 10vw, 150px); }
.evening-booklets__grid { display: grid; gap: 40px; }
@media (min-width: 760px) { .evening-booklets__grid { grid-template-columns: 1fr 1fr; gap: 56px 44px; } }
.evening-booklet { display: grid; grid-template-columns: minmax(0, 112px) minmax(0, 1fr); gap: 22px; align-items: start; padding-top: 28px; border-top: 1px solid var(--ev-line); }
@media (min-width: 1100px) { .evening-booklet { grid-template-columns: minmax(0, 150px) minmax(0, 1fr); gap: 30px; } }
@media (max-width: 759px) {
  .evening-booklet { grid-template-columns: 84px minmax(0, 1fr); column-gap: 18px; row-gap: 0; }
  .evening-booklet__cover { grid-row: 1 / span 3; }
  .evening-booklet__text { display: contents; }
  .evening-booklet__text > :not(ul) { grid-column: 2; }
  .evening-booklet__languages { grid-column: 1 / -1; margin-top: 18px; }
}
.evening-booklet__cover img { display: block; width: 100%; height: auto; border-radius: 4px; box-shadow: 0 22px 40px -24px rgba(0, 0, 0, .75); }
.evening-booklet .evening-label { margin-bottom: 6px; }
.evening-booklet h3 { margin: 0 0 6px; font: 400 clamp(25px, 2.2vw, 29px)/1.12 var(--font-display); }
.evening-booklet h3 a { color: var(--ev-cream); text-decoration: none; }
.evening-booklet h3 a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .14em; }
.evening-booklet__text > p:not(.evening-label) { margin: 0; font: italic 400 16px/1.5 var(--font-body); color: var(--ev-quiet); }
.evening-booklet__languages { list-style: none; margin: 16px 0 0; padding: 0; }
.evening-booklet__languages li { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; padding: 4px 0; border-top: 1px solid rgba(246, 220, 172, .12); }
.evening-booklet__languages li:first-child { border-top: 0; }
.evening-booklet__language { min-width: 5.6em; color: var(--ev-cream); font: 500 15.5px/1.3 var(--font-body); }
.evening-booklet__languages a { display: inline-flex; align-items: center; min-height: 38px; color: var(--ev-honey); font: 400 14.5px/1.3 var(--font-body); text-underline-offset: .22em; }
.evening-booklet__languages a:hover { color: var(--ev-cream); }

/* The moving band (pass 4, pins 8 and 9): the afterglow meadow opens the free booklets, full width inside the content
   part. Its top and its foot both dissolve into the night around it. */
.evening-loop { margin: 0; overflow: hidden; height: clamp(250px, 36vw, 540px); background: var(--ev-night); }
.evening-loop picture { display: block; height: 100%; }
.evening-loop img, .evening-loop video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.evening-loop video { position: absolute; inset: 0; }
.evening-loop video { opacity: 0; transition: opacity 1.2s ease; }
.evening-loop.is-moving video { opacity: 1; }
.evening-loop.is-moving.is-resting video { opacity: 0; }
.evening-loop::before, .evening-loop::after { content: ""; position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; }
.evening-loop::before { top: 0; height: 26%; background: linear-gradient(180deg, var(--ev-night) 0%, rgba(17, 24, 50, .94) 15%, rgba(17, 24, 50, .78) 30%, rgba(17, 24, 50, .5) 50%, rgba(17, 24, 50, .22) 70%, rgba(17, 24, 50, .06) 85%, rgba(17, 24, 50, 0) 100%); }
.evening-loop::after { bottom: 0; height: 30%; background: linear-gradient(0deg, var(--ev-night) 0%, rgba(17, 24, 50, .94) 15%, rgba(17, 24, 50, .78) 30%, rgba(17, 24, 50, .5) 50%, rgba(17, 24, 50, .22) 70%, rgba(17, 24, 50, .06) 85%, rgba(17, 24, 50, 0) 100%); }
@media (max-width: 700px) { .evening-loop { height: auto; aspect-ratio: 4 / 3; } .evening-loop img, .evening-loop video { object-position: 50% 50%; } }
@media (prefers-reduced-motion: reduce) { .evening-loop video { display: none; } }

/* 4. Contact. */
.evening-contact { position: relative; padding-top: clamp(40px, 6vw, 96px); background: linear-gradient(180deg, var(--ev-night) 0%, var(--ev-deep) 45%); }
/* Behind the contact: the night glows down into the open sea after sunset, which then goes into the footer's night. */
.evening-horizon { --glow: clamp(150px, 17vw, 260px); --sea: clamp(300px, 40vw, 600px); position: relative; margin: clamp(48px, 7vw, 112px) 0 0; padding-top: var(--glow); background: var(--ev-rise) top / 100% var(--glow) no-repeat; }
.evening-horizon picture { display: block; height: var(--sea); overflow: hidden; }
.evening-horizon img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 62% 72%; }
.evening-horizon::before, .evening-horizon::after { content: ""; position: absolute; left: 0; right: 0; pointer-events: none; }
.evening-horizon::before { top: calc(var(--glow) - 2px); height: calc(var(--sea) * .3); background: linear-gradient(180deg, var(--ev-h-apricot), rgba(248, 192, 143, 0)); }
.evening-horizon::after { bottom: 0; height: calc(var(--sea) * .34); background: linear-gradient(0deg, var(--ev-deep), rgba(11, 16, 35, 0)); }
@media (max-width: 700px) { .evening-horizon { --sea: 78vw; } }
.evening-contact__inner { display: grid; gap: 44px; }
/* Pass 4 (pin 12): the rose and the words are one centred pair: two equal columns meeting at the page's axis, the rose
   standing against that axis in a 3:2 crop centred on its heart, both centred on each other's middle. */
@media (min-width: 900px) {
  .evening-contact__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(48px, 6vw, 96px); align-items: center; }
  .evening-plate--rose { width: min(100%, 540px); justify-self: end; }
  .evening-contact__text { width: min(100%, 540px); justify-self: start; }
}
.evening-contact h2 { margin: 0 0 22px; font: 400 clamp(46px, 6vw, 84px)/.95 var(--font-display); color: var(--ev-cream); }
.evening-contact__write { margin: 0 0 4px; font-size: 17px; color: var(--ev-quiet); }
.evening-contact__email { margin: 0 0 48px; }
.evening-contact__email a { font: 400 clamp(28px, 3vw, 40px)/1.15 var(--font-display); color: var(--ev-gold); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .16em; overflow-wrap: anywhere; }
.evening-contact__email a:hover { color: var(--ev-cream); }
.evening-home #contact .evening-letter { margin: 0; padding: 26px 0 0; border: 0; border-top: 1px solid var(--ev-line); background: none; box-shadow: none; max-width: 560px; }
.evening-letter__line { margin: 0 0 14px; font-size: 17px; line-height: 1.5; color: var(--ev-copy); }
.evening-letter__line span { display: block; margin-bottom: 4px; font: 600 11.5px/1.5 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--ev-gold); }
.evening-letter__row { display: flex; flex-wrap: wrap; gap: 10px; }
.evening-home #contact .evening-letter .form-control { flex: 1 1 230px; min-height: 52px; margin: 0; padding: 0 20px; border-radius: 999px; border: 1px solid rgba(246, 220, 172, .45); background: rgba(255, 255, 255, .05); color: var(--ev-cream); font: 400 16px/1 var(--font-body); box-shadow: none; }
.evening-home #contact .evening-letter .form-control::placeholder { color: #b3a68c; opacity: 1; }
.evening-home #contact .evening-letter .form-control:focus { border-color: var(--ev-gold); outline: none; box-shadow: 0 0 0 3px rgba(242, 196, 109, .3); }
.evening-home #contact .evening-letter .button { flex: 0 1 auto; min-height: 52px; margin: 0; padding: 0 24px; border-radius: 999px; background: var(--ev-gold) !important; border: 0 !important; color: var(--ev-ink) !important; font: 600 15.5px/1.2 var(--font-body); cursor: pointer; }
.evening-home #contact .evening-letter .button:hover { background: var(--ev-cream) !important; }
.evening-home .evening-contact .form-note { margin: 14px 0 0; max-width: 560px; font: 400 13px/1.65 var(--font-body); color: var(--ev-quiet); }
.evening-home .evening-contact .form-note a { color: var(--ev-honey); }
.evening-plate--rose img { aspect-ratio: 3 / 2; object-fit: cover; object-position: 18% 50%; }

/* Footer: the two other houses, the policies, the credit. Nothing more. */
.evening-footer { background: var(--ev-deep); border-top: 1px solid var(--ev-line); padding-block: 40px 48px; color: var(--ev-quiet); }
.evening-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 48px; }
.evening-footer__family { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; }
.evening-footer__family .evening-label { margin: 0; color: var(--ev-quiet); }
.evening-footer a { display: inline-flex; align-items: center; min-height: 40px; color: var(--ev-copy); font: 400 15px/1.3 var(--font-body); text-underline-offset: .22em; }
.evening-footer a:hover { color: var(--ev-gold); }
.evening-footer__links { display: flex; flex-wrap: wrap; gap: 0 22px; }
.evening-footer__credit { width: 100%; margin: 6px 0 0; font: italic 400 14.5px/1.5 var(--font-body); color: var(--ev-quiet); }

/* Pass 3 (Ben's pins on the Cockpit, 29-10 21:23). */

/* "not centered": below 900 px each cover stands centred in the column, so the book's own heading (format, title,
   subtitle, byline, promise) is centred under it; the buying panel below keeps the full width. A heading row with
   a window is one full column below 900 px: the flex row's space-between kept its grid track at the width of the
   words, so the window stood at half width until its image arrived, then jumped. */
@media (max-width: 899px) {
  .evening-home #books .evening-book__text > :is(.evening-label, .bookshop-lead__title, .bookshop-subtitle, .bookshop-lead__byline, .bookshop-promise) { text-align: center; margin-inline: auto; }
  /* store.css fixes the byline's margins with !important and the house caps every paragraph at 70ch, so the byline
     takes the full column instead and its centred words sit on the same axis as the cover and the title. */
  .evening-home #books .evening-book__text > .bookshop-lead__byline { max-width: none; }
  .evening-section-head--window { grid-template-columns: minmax(0, 1fr); }
}

/* Resting in Reality, coming: one quiet entry after the two books (no Buy, no price, no date). From 900 px it takes
   the books' own two columns, so its words line up with the books' words above it. */
.evening-home #books .evening-coming { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin: 0; padding: clamp(44px, 5vw, 68px) 0 0; border: 0; border-top: 1px solid var(--ev-lamp-line); border-radius: 0; background: none; box-shadow: none; text-align: center; color: var(--ev-ink); }
.evening-home #books .evening-coming > div { display: block; min-width: 0; }
.evening-home #books .evening-coming .evening-label { margin: 0 0 10px; }
.evening-home #books .evening-coming__title { margin: 0 0 12px; font: 400 clamp(40px, 4.2vw, 58px)/1 var(--font-display); color: var(--ev-ink); }
.evening-home #books .evening-coming__byline { max-width: none; margin: 0; font: 600 12px/1.5 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ev-ink-soft); }
.evening-home #books .evening-coming__body > p:not(.evening-coming__links) { margin: 0 auto 14px; max-width: 34em; font: 400 17.5px/1.62 var(--font-body); color: var(--ev-ink); }
.evening-home #books .evening-coming__body > p:first-child { font-style: italic; color: var(--ev-ink-soft); }
.evening-home #books .evening-coming__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 28px; margin: 6px 0 0; font-size: inherit; }
.evening-home #books .evening-coming__links a { display: inline-block; padding-block: 10px; color: var(--ev-ink); font: 500 15.5px/1.5 var(--font-body); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: rgba(20, 29, 61, .4); text-underline-offset: .24em; }
.evening-home #books .evening-coming__links a:hover { text-decoration-color: currentColor; }
@media (min-width: 900px) {
  .evening-home #books .evening-coming { grid-template-columns: minmax(0, 330px) minmax(0, 1fr); column-gap: clamp(48px, 6vw, 96px); align-items: start; text-align: left; }
  .evening-home #books .evening-coming__body > p:not(.evening-coming__links) { margin-inline: 0; }
  .evening-home #books .evening-coming__links { justify-content: flex-start; }
}

/* Lev ben Zadok, the house's main work: one calm block at the head of the content part, its image a window (round
   corners, no frame) like the other images, kept apart from Ben's photographs. */
.evening-lev, .evening-zohar { display: grid; gap: 34px; margin: 0 0 clamp(96px, 11vw, 160px); padding-bottom: clamp(64px, 8vw, 112px); border-bottom: 1px solid var(--ev-line); }
.evening-lev__picture, .evening-zohar__picture { margin: 0; overflow: hidden; aspect-ratio: 16 / 10; border-radius: 16px; background: var(--ev-raised); box-shadow: 0 30px 64px -34px rgba(0, 0, 0, .7); }
.evening-lev__picture img, .evening-zohar__picture img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 62% 32%; }
.evening-zohar__figures { display: grid; gap: 18px; }
.evening-zohar__picture--secondary { aspect-ratio: 16 / 9; border-radius: 14px; }
.evening-zohar__picture--secondary img { object-position: 50% 42%; }
.evening-lev__text h2, .evening-zohar__text h2 { margin: 0 0 20px; font: 400 clamp(42px, 5.4vw, 72px)/.98 var(--font-display); color: var(--ev-cream); }
.evening-lev__lead, .evening-zohar__lead { margin: 0 0 18px; max-width: 30em; font: italic 400 clamp(19px, 1.7vw, 22px)/1.5 var(--font-body); color: var(--ev-gold); }
.evening-lev__text > p:not(.evening-label, .evening-lev__lead, .evening-lev__actions), .evening-zohar__text > p:not(.evening-label, .evening-zohar__lead, .evening-zohar__actions, .evening-zohar__companion) { margin: 0 0 16px; max-width: 34em; font-size: 17px; line-height: 1.68; color: var(--ev-copy); }
.evening-zohar__script-card { margin: 18px 0 22px; padding: 18px 22px; max-width: 34em; border-radius: 14px; background: rgba(31, 40, 71, .72); border: 1px solid var(--ev-line); }
.evening-zohar__script-line { margin: 0 0 6px; font: 400 clamp(22px, 2.2vw, 27px)/1.35 var(--font-display); color: var(--ev-gold); }
.evening-zohar__script-translation { margin: 0; font: italic 400 16.5px/1.55 var(--font-body); color: var(--ev-cream); }
.evening-zohar__script-meta { margin: 6px 0 0; font: 600 11px/1.4 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ev-quiet); }
.evening-zohar__companion { margin: 0 0 18px; max-width: 34em; font: 400 15.5px/1.55 var(--font-body); color: var(--ev-quiet); }
.evening-zohar__companion strong { color: var(--ev-cream); font-weight: 600; }
.evening-lev__episodes, .evening-zohar__episodes { list-style: none; margin: 6px 0 22px; padding: 0; max-width: 34em; }
.evening-lev__episodes li, .evening-zohar__episodes li { display: grid; gap: 2px; padding: 10px 0; border-top: 1px solid rgba(246, 220, 172, .14); font: 400 clamp(20px, 1.9vw, 24px)/1.25 var(--font-display); color: var(--ev-cream); }
.evening-lev__episodes li:last-child, .evening-zohar__episodes li:last-child { border-bottom: 1px solid rgba(246, 220, 172, .14); }
.evening-lev__episode, .evening-zohar__episode { font: 600 11.5px/1.5 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--ev-quiet); }
@media (min-width: 520px) { .evening-lev__episodes li, .evening-zohar__episodes li { grid-template-columns: 9.5rem minmax(0, 1fr); column-gap: 16px; align-items: baseline; } }
.evening-lev__actions, .evening-zohar__actions { display: flex; flex-wrap: wrap; gap: 0 28px; margin: 0; }
.evening-lev__actions a, .evening-zohar__actions a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ev-honey); font: 500 16px/1.3 var(--font-body); text-underline-offset: .25em; }
.evening-lev__actions a:hover, .evening-zohar__actions a:hover { color: var(--ev-cream); }
@media (min-width: 900px) {
  .evening-lev, .evening-zohar { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(48px, 6vw, 96px); align-items: center; }
  .evening-lev__picture { aspect-ratio: 4 / 3; border-radius: 22px; }
  .evening-zohar__picture { aspect-ratio: 16 / 10; border-radius: 20px; }
}
.home-language-chooser__links .publisher-text-link { color: var(--ev-gold, #f2c46d); }
.home-language-chooser__links .publisher-text-link:hover { color: var(--ev-cream, #fad9a0); }

/* The Letter, under the free booklets: the booklets stay free without an email; one warm, clear invitation to the
   one form in Contact. On the raised night, so every word keeps its WCAG AA contrast (tokens tested in pass 2). */
.evening-invite { display: grid; justify-items: center; gap: 6px; max-width: 40em; margin: clamp(64px, 7vw, 104px) auto clamp(24px, 4vw, 56px); padding: 30px clamp(22px, 4vw, 48px) 34px; border-radius: 22px; background: var(--ev-raised); border: 1px solid var(--ev-line); text-align: center; }
.evening-invite .evening-label { margin: 0 0 6px; }
.evening-invite p:not(.evening-label) { margin: 0; font: 400 17.5px/1.6 var(--font-body); color: var(--ev-copy); }
.evening-invite__link { display: inline-flex; align-items: center; min-height: 48px; margin-top: 16px; padding: 0 24px; border-radius: 999px; border: 1px solid var(--ev-gold); color: var(--ev-gold); font: 600 15.5px/1.2 var(--font-body); text-decoration: none; }
.evening-invite__link:hover { background: var(--ev-gold); color: var(--ev-ink); }

/* Pass 4 (Ben's pins on the live-mode screenshots, 29-10 22:23): softer edges, more polish, more premium. */

/* Pins 1, 4, 5 and 6, and the wish across all pins: no hard line where a photograph meets a band of colour. Each edge
   fades over a few dozen pixels into the colour that meets it there, on an eased curve so the fade has no visible
   start or end. An overlay, the house's own way at the moving band and the sea; the photographs are untouched. */
.evening-band { position: relative; }
:is(.evening-hero, .evening-band) { --ev-feather-h: clamp(40px, 6vw, 88px); }
:is(.evening-hero, .evening-band)::before, :is(.evening-hero, .evening-band)::after { content: ""; position: absolute; left: 0; right: 0; z-index: 1; height: var(--ev-feather-h); pointer-events: none; }
:is(.evening-hero, .evening-band)::before { top: 0; background: linear-gradient(180deg, var(--ev-edge-top) 0%, color-mix(in srgb, var(--ev-edge-top) 94%, transparent) 15%, color-mix(in srgb, var(--ev-edge-top) 78%, transparent) 30%, color-mix(in srgb, var(--ev-edge-top) 50%, transparent) 50%, color-mix(in srgb, var(--ev-edge-top) 22%, transparent) 70%, color-mix(in srgb, var(--ev-edge-top) 6%, transparent) 85%, transparent 100%); }
:is(.evening-hero, .evening-band)::after { bottom: 0; background: linear-gradient(0deg, var(--ev-edge-foot) 0%, color-mix(in srgb, var(--ev-edge-foot) 94%, transparent) 15%, color-mix(in srgb, var(--ev-edge-foot) 78%, transparent) 30%, color-mix(in srgb, var(--ev-edge-foot) 50%, transparent) 50%, color-mix(in srgb, var(--ev-edge-foot) 22%, transparent) 70%, color-mix(in srgb, var(--ev-edge-foot) 6%, transparent) 85%, transparent 100%); }
/* The colour each edge meets: the afterglow's apricot above the river and the meadow, the night under the river, the
   shop's lamplight under the meadow and above the dunes, and the apricot the content part falls from under the dunes. */
.evening-hero { --ev-edge-top: var(--ev-h-apricot); --ev-edge-foot: var(--ev-night); }
.evening-band--grass { --ev-edge-top: var(--ev-h-apricot); --ev-edge-foot: var(--ev-lamp); }
.evening-band--dunes { --ev-edge-top: var(--ev-lamp-2); --ev-edge-foot: var(--ev-h-apricot); }
/* Above the dunes the lamplight meets a deep blue-green sky; mixed straight they make a muddy khaki haze. So the edge
   passes through the dunes' own sky hue (194°, sampled) at the shop's light, a pale morning sky, over a longer fade. */
.evening-band--dunes { --ev-morning: #cbdce2; --ev-feather-h: clamp(56px, 9vw, 130px); }
.evening-band--dunes::before { background: linear-gradient(180deg, var(--ev-lamp-2) 0%, color-mix(in srgb, var(--ev-lamp-2) 70%, var(--ev-morning)) 18%, color-mix(in srgb, var(--ev-morning) 80%, transparent) 38%, color-mix(in srgb, var(--ev-morning) 50%, transparent) 58%, color-mix(in srgb, var(--ev-morning) 20%, transparent) 78%, color-mix(in srgb, var(--ev-morning) 5%, transparent) 90%, transparent 100%); }

/* Pins 8 and 9: the moving meadow comes up and opens the free booklets, full width inside the content part; the coast
   comes down and stands centred above the Letter, the two one card. */
.evening-content > .evening-loop { margin: clamp(96px, 11vw, 160px) 0 clamp(48px, 6vw, 88px); }
.evening-content .evening-booklets { margin-top: 0; }
/* Each booklet carries its own hairline, so the head above them needs none (two lines 40-72 px apart read unfinished). */
.evening-content .evening-booklets > .evening-section-head { padding-bottom: 0; border-bottom: 0; }
.evening-letter-card { width: min(100%, 760px); margin: clamp(72px, 8vw, 120px) auto clamp(24px, 4vw, 56px); overflow: hidden; border-radius: 22px; background: var(--ev-raised); border: 1px solid var(--ev-line); box-shadow: 0 34px 72px -42px rgba(0, 0, 0, .8); }
.evening-letter-card .evening-window { position: relative; aspect-ratio: 2 / 1; border-radius: 0; box-shadow: none; }
.evening-letter-card .evening-window::after { content: ""; position: absolute; inset: auto 0 0; height: 34%; background: linear-gradient(0deg, var(--ev-raised) 0%, rgba(31, 40, 71, .94) 15%, rgba(31, 40, 71, .78) 30%, rgba(31, 40, 71, .5) 50%, rgba(31, 40, 71, .22) 70%, rgba(31, 40, 71, .06) 85%, rgba(31, 40, 71, 0) 100%); pointer-events: none; }
.evening-home .evening-letter-card .evening-invite { max-width: none; margin: 0; padding-top: 6px; border: 0; border-radius: 0; background: none; }
@media (max-width: 899px) { .evening-letter-card { border-radius: 16px; } }

/* Muse M1 and M8 (29-10 night): the store-price note and the audiobook's file line, in the shop's quiet small type. */
.evening-home #books .evening-also.evening-also--note { padding-top: 6px; border-top: 0; font-size: 14px; }
.evening-home #books .evening-format .book-audio--home > p { margin: 10px 0 0; font: 400 13.5px/1.55 var(--font-body); color: var(--ev-ink-soft); text-align: left; }
.evening-home #books .evening-book__editions { margin-bottom: 30px; } /* Muse M2: the languages now sit above Where to buy */
/* Muse M6 (the director 29-10 22:27): the portrait names who it shows, so no one takes it for the author; each episode
   title leads to the series page. */
.evening-lev__figure, .evening-zohar__figure { margin: 0; }
.evening-lev__caption { margin-top: 12px; font: 600 11.5px/1.5 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--ev-quiet); }
.evening-home .evening-zohar__caption { margin: 12px 0 0; padding: 0; font: 600 11.5px/1.5 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--ev-copy); }
.evening-lev__episodes a, .evening-zohar__episodes a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: rgba(246, 220, 172, .35); text-underline-offset: .2em; }
.evening-lev__episodes a:hover, .evening-zohar__episodes a:hover { text-decoration-color: currentColor; }
/* Muse M8: the footer address says what it is for; info@ stays the address in Contact. */
.evening-footer__orders { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 .35em; font: 400 15px/1.3 var(--font-body); color: var(--ev-quiet); }
/* Ben 29-10 23:03: his own photographs carry his name, so a visitor knows they are photographs ("© Ben Hassine
   Photography"); a quiet credit in the lower right corner, above the soft edge, never on the other images. */
.evening-plate { position: relative; }
/* Ben 23:20 'more subtle': 10px, regular, white with a soft shadow, legible on a close look.
   .evening-home lifts it above site.css's '.skin figcaption' (grey, 13px, 12px padding), which won before.
   Ben 31-10 08:15 'just the letters': no dark pill behind the credit; a soft dark text-shadow alone keeps it legible on
   light and dark photographs. Same size, colour and place. */
.evening-home .evening-credit { position: absolute; right: clamp(12px, 2vw, 22px); bottom: 10px; z-index: 2; margin: 0; padding: 0; border-radius: 0; background: none; font: 400 10px/1.2 var(--font-body); letter-spacing: .05em; white-space: nowrap; color: rgba(255, 255, 255, .94); text-shadow: 0 1px 2px rgba(0, 0, 0, .8), 0 0 1px rgba(0, 0, 0, .6); pointer-events: none; }
/* Ben 29-10 23:16 'should be lower': in the photo's lowest band, where the eased fade only begins (under a quarter of
   its strength), so the credit stays on the photograph and readable. */
.evening-home :is(.evening-hero, .evening-band) .evening-credit { bottom: calc(var(--ev-feather-h, 0px) * .72); }
/* Ben 29-10 23:03 "a spot where people know they can buy my photography"; Pass 13 (Muse F10): three short contact blocks + direct line above the Letter form. */
.evening-contact__blocks { display: grid; gap: 14px; margin: 0 0 18px; }
.evening-contact__block { margin: 0; max-width: 34em; font: 400 16px/1.6 var(--font-body); color: var(--ev-copy); }
.evening-contact__block strong { color: var(--ev-cream); font-weight: 600; }
.evening-contact__block a { color: var(--ev-gold); text-underline-offset: .2em; overflow-wrap: anywhere; }
.evening-contact__block a:hover { color: var(--ev-cream); }
.evening-contact__direct { margin: 0 0 24px; font: italic 400 16.5px/1.55 var(--font-body); color: var(--ev-quiet); }

/* Pass 5 (Ben 29-10 23:20): EB Garamond on the evening home. Type and spacing only.
   The Buy buttons set their type with !important; the tabular figures and the x-height sizing follow them here. */
.evening-home #books .evening-format a.edition-checkout-trigger { font-variant-numeric: tabular-nums !important; font-size-adjust: .44 !important; letter-spacing: .03em; }
.evening-wordmark { font-size: 31px; letter-spacing: .005em; }
.evening-nav a { letter-spacing: .03em; }
.evening-title h1 { letter-spacing: -.025em; }
.evening-home :is(.evening-section-head h2, .evening-contact h2, .evening-lev__text h2) { letter-spacing: -.02em; }
/* Garamond's small print sits small on screen: the fine print goes up a step (labels are lifted by the x-height sizing). */
.evening-home #books .evening-format :is(.edition-checkout-methods, .edition-checkout-also, .book-audio__spotify, .edition-checkout-lost-link, .edition-checkout-reassurance, .direct-ebook-purchase > p), .evening-home .evening-contact .form-note { font-size: 14px; }
/* The house caps paragraphs at 70ch, a reading measure; Garamond's narrow figures make that cap shorter than a column,
   so a centred one-line label would sit off its axis. Labels span their column again. */
.evening-home .evening-label { max-width: none; }

/* Pass 17 (17d Placement A): GA4 consent banner — static in the page flow directly after the first Buy box, or under the header on pages without a Buy box. */
.consent-banner {
  position: static;
  box-sizing: border-box;
  width: 100%;
  background: var(--ev-deep, #0b1023);
  border-bottom: 1px solid rgba(250, 217, 160, .24);
  color: var(--ev-copy, #f6e7cb);
  padding: 12px 0;
}
main .consent-banner {
  margin: 12px 0;
  padding: 12px 14px;
  border: 1px solid rgba(250, 217, 160, .24);
  border-radius: 6px;
}
main .consent-banner .evening-wrap {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
.consent-banner[hidden] { display: none !important; }
.consent-banner .consent-banner__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
}
.consent-banner .consent-banner__text {
  margin: 0;
  max-width: 76ch;
  flex: 999 1 320px;
  min-width: 0;
  font: 400 14px/1.4 var(--font-body);
  color: var(--ev-copy, #f6e7cb);
}
.consent-banner .consent-banner__privacy {
  color: var(--ev-gold, #f2c46d);
  font-size: 13.5px;
  text-decoration: underline;
  text-underline-offset: .22em;
  white-space: nowrap;
}
.consent-banner .consent-banner__privacy:hover { color: var(--ev-cream, #fad9a0); }
.consent-banner .consent-banner__actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px 10px;
  flex: 1 1 290px;
  min-width: 0;
  max-width: 100%;
}
.consent-banner .consent-banner__button {
  appearance: none;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  width: 100%;
  min-height: 34px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(250, 217, 160, .45);
  background: var(--ev-raised, #1f2847);
  color: var(--ev-cream, #fad9a0);
  font: 500 13.5px/1.25 var(--font-body);
  text-align: center;
  white-space: normal;
  cursor: pointer;
}
.consent-banner .consent-banner__button:hover {
  border-color: var(--ev-gold, #f2c46d);
  color: #fff;
}
.consent-banner .consent-banner__button:focus-visible,
.consent-banner .consent-banner__privacy:focus-visible {
  outline: 2px solid var(--ev-gold, #f2c46d);
  outline-offset: 2px;
}
@media (max-width: 767px) {
  .consent-banner {
    padding: 8px 0;
  }
  main .consent-banner {
    margin: 10px 0;
    padding: 10px 12px;
  }
  .consent-banner .evening-wrap {
    width: min(1200px, calc(100% - 32px));
  }
  main .consent-banner .evening-wrap {
    width: 100%;
  }
  .consent-banner .consent-banner__inner {
    gap: 8px 12px;
  }
  .consent-banner .consent-banner__text {
    flex: 1 1 100%;
    font: 400 12.5px/1.32 var(--font-body);
    max-width: none;
  }
  .consent-banner .consent-banner__privacy {
    font-size: 12px;
  }
  .consent-banner .consent-banner__actions {
    flex: 1 1 100%;
    width: 100%;
    gap: 8px;
  }
  .consent-banner .consent-banner__button {
    min-height: 32px;
    padding: 5px 10px;
    font-size: 12.5px;
  }
}