/* Pass 6 (Ben 29-10 23:24): one design on every page. Every page but the home carries the home's own header and
   footer (scripts/evening-shell.mjs); this sheet gives them the home's look without body.evening-home. The rules are
   the home's (home.css: header, footer, label; pass 4 logo; pass 5 type), each held under its own header or footer so
   the older house sheets underneath (house.css, site.css, store.css, house-previews.css) cannot reach them. The home
   itself does not load this sheet. Loaded last. */

.evening-header,
.evening-footer {
  --ev-night: #111832;
  --ev-deep: #0b1023;
  --ev-line: rgba(250, 217, 160, .2);
  --ev-cream: #fad9a0;
  --ev-copy: #f6e7cb;
  --ev-quiet: #d2c1a7;
  --ev-gold: #f2c46d;
  --ev-wrap: min(1200px, calc(100% - 48px));
  font-variant-numeric: lining-nums proportional-nums;
  -webkit-font-smoothing: antialiased;
  text-align: start;
}
:is(.evening-header, .evening-footer, .consent-banner) .evening-wrap { width: var(--ev-wrap, min(1200px, calc(100% - 48px))); max-width: none; margin-inline: auto; padding-inline: 0; }
:is(.evening-header, .evening-footer) :focus-visible { outline: 2px solid var(--ev-gold); outline-offset: 4px; border-radius: 2px; }

/* Header: the mark, the name, and the four parts of the home. */
.evening-header { margin: 0; background: var(--ev-night); border-bottom: 1px solid var(--ev-line); color: var(--ev-copy); }
.evening-header .evening-header__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 32px; padding-block: 14px; min-height: 0; }
/* On the home store.css's ".skin a { color: inherit }" outranks the wordmark's cream, so the name shows in the warm copy
   colour; the shell shows what the home shows. */
.evening-header .evening-wordmark { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; color: var(--ev-copy); text-decoration: none 1px; text-underline-offset: 5px; font: 400 31px/1 var(--font-display); letter-spacing: .005em; }
.evening-header .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-header .evening-wordmark span { padding-top: .06em; text-shadow: 0 0 24px rgba(248, 192, 143, .16); }
.evening-header .evening-wordmark:hover { color: var(--ev-copy); }
.evening-header .evening-wordmark:hover span { color: var(--ev-gold); }
.evening-header .evening-nav { display: flex; flex-wrap: wrap; gap: 0 26px; }
.evening-header .evening-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ev-copy); text-decoration: none; text-underline-offset: 5px; font: 500 14.5px/1 var(--font-body); letter-spacing: .03em; border-bottom: 1px solid transparent; }
.evening-header .evening-nav a:hover { color: var(--ev-gold); border-bottom-color: currentColor; }
/* The part of the home this page belongs to. */
.evening-header .evening-nav a[aria-current] { color: var(--ev-gold); border-bottom-color: currentColor; }
@media (max-width: 640px) {
  .evening-header .evening-nav { width: 100%; justify-content: space-between; gap: 0; }
  .evening-header .evening-nav a { font-size: 13.5px; min-height: 40px; }
}

/* Footer: the house pages the old menu held, the two other houses, the policies. */
.evening-footer { margin: 0; background: var(--ev-deep); border-top: 1px solid var(--ev-line); padding-block: 40px 48px; color: var(--ev-quiet); }
.evening-footer .evening-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 48px; }
.evening-footer .evening-footer__family { min-width: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; }
/* On the home store.css's ".skin p" outranks the label's own size and line, so its size and line come from there on
   every page alike; only the face, weight, tracking and colour are set here. */
.evening-footer .evening-label { max-width: none; margin: 0; font-family: var(--font-body); font-style: normal; font-weight: 600; font-variant-numeric: normal; font-feature-settings: normal; letter-spacing: .16em; text-transform: uppercase; color: var(--ev-quiet); }
.evening-footer a { display: inline-flex; align-items: center; min-height: 40px; color: var(--ev-copy); text-decoration: underline 1px; font: 400 15px/1.3 var(--font-body); letter-spacing: normal; text-underline-offset: .22em; }
.evening-footer a:hover { color: var(--ev-gold); }
.evening-footer .evening-footer__links { display: flex; flex-wrap: wrap; gap: 0 22px; }
/* As on the home, ".skin p" sets the credit's size and line; the rest is the home's own rule. */
.evening-footer .evening-footer__credit { width: 100%; margin: 6px 0 0; font-family: var(--font-body); font-style: italic; font-weight: 400; font-variant-numeric: normal; font-feature-settings: normal; color: var(--ev-quiet); }
.evening-footer .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); }
/* The house pages: one row above the rest, set like the header's menu. */
.evening-footer .evening-footer__house { display: flex; flex-wrap: wrap; gap: 0 26px; width: 100%; padding-bottom: 14px; border-bottom: 1px solid var(--ev-line); }
.evening-footer .evening-footer__house a { color: var(--ev-cream); text-decoration: none; font: 500 15.5px/1.3 var(--font-body); letter-spacing: .03em; border-bottom: 1px solid transparent; }
.evening-footer .evening-footer__house a:hover { color: var(--ev-gold); border-bottom-color: currentColor; }
.evening-footer .evening-footer__house a[aria-current] { color: var(--ev-gold); border-bottom-color: currentColor; }

/* Book scripts (bookstore.css: he, ar, ja, ko, zh-Hans, zh-Hant) put their own face behind EB Garamond and set
   letter-spacing to normal; the shell keeps that, and only the tracked capitals of the label stay Latin-only. */
:is(html[lang="he"], html[lang="ar"], html[lang="ja"], html[lang="ko"], html[lang="zh-Hans"], html[lang="zh-Hant"], html[lang="hi"]) .evening-footer .evening-label { letter-spacing: normal; text-transform: none; font-size: 13.5px; }

/* A short page (the 404) ends in the footer's deep night instead of a band of page night below it. */
html:has(> body.evening-shell) { background: #0b1023; }

/* The night on every page (pass 6, item 3). The house palette (house-previews.css) now carries the home's night; what
   the older sheets still hold in light or near-black is set here on the home's terms: the buttons the home uses on
   the night (gold, ink type, round), the book cards and the reading page on the raised night, and the reader-feedback
   card. Scoped to pages with the shared shell; the home does not load this sheet. */
.evening-shell {
  --ev-raised: #1f2847;
  --ev-line: rgba(250, 217, 160, .2);
  --ev-cream: #fad9a0;
  --ev-copy: #f6e7cb;
  --ev-quiet: #d2c1a7;
  --ev-gold: #f2c46d;
  --ev-ink: #141d3d;
  --store-pane: var(--ev-raised);
  --store-edge: rgba(250, 217, 160, .26);
  --store-copy: var(--ev-quiet);
  --line-strong: rgba(250, 217, 160, .46);
}
.evening-shell.houses-preview .button:not(.button--ghost):not(.edition-checkout-payhip),
.evening-shell.houses-preview .edition-checkout-box .edition-checkout-trigger.edition-checkout-card,
.evening-shell.houses-preview .feedback-submit,
.evening-shell.houses-preview .feedback-letter-button {
  border-radius: 999px;
  border: 1px solid var(--ev-gold) !important;
  background: var(--ev-gold) !important;
  color: var(--ev-ink) !important;
  font-weight: 600;
}
.evening-shell.houses-preview .button:not(.button--ghost):not(.edition-checkout-payhip):hover,
.evening-shell.houses-preview .edition-checkout-box .edition-checkout-trigger.edition-checkout-card:hover,
.evening-shell.houses-preview .feedback-submit:hover,
.evening-shell.houses-preview .feedback-letter-button:hover { background: var(--ev-cream) !important; border-color: var(--ev-cream) !important; color: var(--ev-ink) !important; }
.evening-shell.houses-preview :is(.button.button--ghost, .book-sample-links .book-sample-link) { border-radius: 999px; }
.evening-shell.houses-preview :is(.button, .edition-checkout-trigger, .feedback-submit):focus-visible { outline: 2px solid var(--ev-gold); outline-offset: 4px; }
/* The passage from the book reads as a page, as it did on the paper. */
.evening-shell .book-sample__reading { background: var(--ev-raised); border: 1px solid var(--ev-line); border-radius: 8px; box-shadow: 0 30px 64px -34px rgba(0, 0, 0, .7); padding: clamp(1.4rem, 4vw, 3.2rem); }
@media (max-width: 760px) { .evening-shell .book-sample__reading { padding: 1.25rem; } }
/* Reader feedback, on the raised night instead of a cream card. */
.evening-shell .reader-feedback-card { background: var(--ev-raised); border-color: var(--ev-line); color: var(--ev-copy); }
.evening-shell .feedback-stage-tabs { border-bottom-color: var(--ev-line); }
.evening-shell .stage-tab { color: var(--ev-quiet); }
.evening-shell .stage-tab:hover { color: var(--ev-cream); background: rgba(250, 217, 160, .08); }
.evening-shell .stage-tab.is-active { color: var(--ev-cream); background: rgba(250, 217, 160, .14); }
.evening-shell .feedback-header .eyebrow { color: var(--ev-gold); }
.evening-shell :is(.feedback-title, .feedback-letter-invite h4) { color: var(--ev-cream); }
.evening-shell :is(.feedback-lead, .feedback-status, .feedback-letter-invite p) { color: var(--ev-quiet); }
.evening-shell .feedback-label { color: var(--ev-copy); }
.evening-shell .option-pill { background: transparent; border-color: rgba(250, 217, 160, .34); color: var(--ev-copy); }
.evening-shell .feedback-option:hover .option-pill { border-color: var(--ev-gold); background: rgba(250, 217, 160, .08); }
.evening-shell .feedback-option input:checked + .option-pill { border-color: var(--ev-gold); background: var(--ev-gold); color: var(--ev-ink); }
.evening-shell .feedback-option input:focus-visible + .option-pill { outline-color: var(--ev-gold); }
.evening-shell :is(.feedback-textarea, .feedback-letter-input) { background: #161e3b; border-color: rgba(250, 217, 160, .34); color: var(--ev-copy); }
.evening-shell :is(.feedback-textarea, .feedback-letter-input)::placeholder { color: #b4a68f; }
.evening-shell :is(.feedback-textarea, .feedback-letter-input):focus { outline-color: var(--ev-gold); border-color: var(--ev-gold); }
.evening-shell :is(.feedback-success, .feedback-letter-success) { color: var(--ev-cream); }
.evening-shell .feedback-letter-invite { border-top-color: var(--ev-line); }
/* The catalogue on the booklet pages and the free companion: the raised night, not the old blue-green. */
.evening-shell :is(.founding-book, .founding-audio) { background: var(--ev-raised); border-color: var(--ev-line); }
/* /booklets: the first booklet follows the intro at the home's rhythm between a section head and its content
   (home.css .evening-section-head: clamp(40px, 5vw, 72px) to the first card's hairline), not after a band of night. */
.evening-shell.catalog-books main > .catalog-opening { padding-bottom: 0; }
.evening-shell.catalog-books main > .catalog-opening + .catalog-grid { margin-top: clamp(40px, 5vw, 72px); padding-top: 0; }
/* A book page on the phone: the cover centred above the title, at the largest width that keeps the first Buy inside
   the 390 x 844 first screen on every edition (store.css's compact phone layout, max-width 760px, held it at 5.5rem). */
@media (max-width: 760px) { .evening-shell .ag-book-detail > .ag-book-cover { max-width: 7.5rem; margin: 0 auto 4px; } }

/* Right-to-left pages (ar, he): the footer mirrors, but the Latin names keep their own order ("ClarityOne ↗",
   "© Ben Hassine Photography") on the start side. */
html[dir="rtl"] .evening-footer .evening-footer__family a { direction: ltr; unicode-bidi: isolate; }
html[dir="rtl"] .evening-footer .evening-footer__credit { direction: ltr; unicode-bidi: isolate; text-align: right; }

/* Pass 7 (Ben 30-10 06:33): /videos opens with the departments, the universe and the two shelves /editions held, then
   the catalogue. Where one of them meets the next one's hairline, keep the 64px the department grid leaves before it. */
.evening-shell .universe-teaser + .edition-shelf,
.evening-shell .edition-shelf + .catalogue-filters { margin-top: 64px; }

.evening-shell :is(.edition-checkout-box .edition-checkout-also, .book-audio__spotify, .edition-checkout-box .edition-checkout-lost-link) { color: var(--ev-quiet); }
.evening-shell :is(.edition-checkout-box .edition-checkout-also__link, .book-audio__spotify__link) { color: var(--ev-copy); text-decoration: underline; text-decoration-color: rgba(250, 217, 160, .4); text-underline-offset: .22em; }
.evening-shell :is(.edition-checkout-box .edition-checkout-also__link, .book-audio__spotify__link):hover { color: var(--ev-gold); text-decoration-color: currentColor; }
/* Pass 9 (Ben 30-10 09:59): Ben's own photographs on the shop, department, book continue and about slots carry the
   same quiet credit as the five photographs on the home page (home.css .evening-credit).
   Ben 31-10 08:15 'just the letters': no dark pill; a soft dark text-shadow alone keeps the credit legible. */
.evening-shell :is(.publication-painting, .catalog-card > a:first-child, .book-continue__image) { position: relative; display: block; text-decoration: none; }
.evening-shell .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); direction: ltr; unicode-bidi: isolate; pointer-events: none; }
@media (max-width: 760px) { .evening-shell .book-continue__image .evening-credit { right: 6px; bottom: 6px; padding: 0; font-size: 7.5px; letter-spacing: .02em; } }

/* Pass 13 (Muse F8): one slim book strip on /videos between the intro and the catalogue, calm on 390 px. */
.evening-shell .videos-book-strip { margin-block: 8px 36px; }
.evening-shell .videos-book-strip__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; align-items: stretch; }
.evening-shell .videos-book-strip__item { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 16px; border-radius: 12px; background: var(--ev-raised); border: 1px solid var(--ev-line); }
.evening-shell .videos-book-strip__cover { display: block; width: 72px; flex-shrink: 0; }
.evening-shell .videos-book-strip__cover img { display: block; width: 100%; height: auto; border-radius: 4px; box-shadow: 0 14px 28px -16px rgba(0, 0, 0, .75); }
.evening-shell .videos-book-strip__body { display: grid; gap: 4px; min-width: 0; }
.evening-shell .videos-book-strip__title { margin: 0; font: 400 clamp(18px, 1.8vw, 22px)/1.15 var(--font-display); color: var(--ev-cream); }
.evening-shell .videos-book-strip__title a { color: inherit; text-decoration: none; }
.evening-shell .videos-book-strip__title a:hover { color: var(--ev-gold); }
.evening-shell .videos-book-strip__line { margin: 0; font: 400 14.5px/1.45 var(--font-body); color: var(--ev-copy); }
.evening-shell .videos-book-strip__line a { color: var(--ev-copy); text-decoration: underline; text-decoration-color: rgba(250, 217, 160, .4); text-underline-offset: .2em; }
.evening-shell .videos-book-strip__line a:hover { color: var(--ev-gold); text-decoration-color: currentColor; }
@media (max-width: 640px) {
  .evening-shell .videos-book-strip { margin-block: 4px 24px; }
  .evening-shell .videos-book-strip__grid { gap: 10px; }
  .evening-shell .videos-book-strip__item { padding: 10px 12px; gap: 6px; }
  .evening-shell .videos-book-strip__cover { width: 52px; }
  .evening-shell .videos-book-strip__title { font-size: 16px; }
  .evening-shell .videos-book-strip__line { font-size: 12.5px; line-height: 1.38; }
}

/* Pass 13 (Muse F4): Contact section at the bottom of /about/de, /about/es, /about/fr. */
.evening-shell .about-contact { margin-top: 48px; padding-top: 36px; border-top: 1px solid var(--ev-line); }
.evening-shell .about-contact .evening-contact__blocks { display: grid; gap: 16px; }
.evening-shell .about-contact .evening-contact__block { margin: 0; font: 400 17px/1.62 var(--font-body); color: var(--ev-copy); }
.evening-shell .about-contact .evening-contact__block strong { color: var(--ev-cream); font-weight: 600; }
.evening-shell .about-contact .evening-contact__block a { color: var(--ev-gold); text-underline-offset: .2em; }
.evening-shell .about-contact .evening-contact__block a:hover { color: var(--ev-cream); }

/* 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;
  }
}