@charset "UTF-8";
/* ── Anniversary design tokens ─────────────────────────────
   Shared variables for both the hub (ivory/paper, Cormorant + Manrope)
   and year-page (dark dossier, Georgia + Segoe) design systems.        */
/* ── Shared presentation mixins ─────────────────────────────── */
/* ── Self-hosted module webfonts ─────────────────────────────
   Manrope is OFL-licensed; the latin variable woff2 is committed
   by `pnpm run build:fonts` to src/view/frontend/web/fonts/anniversaries/
   (sourced from @fontsource-variable/manrope). The theme
   (EternityRose_Theme) self-hosts Cormorant Garamond, Cinzel and
   Jost — this file only covers families the theme does not load. */
@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/anniversaries/manrope-wght.woff2") format("woff2");
}
/* ── Shared animations ───────────────────────────────────── */
@keyframes ag-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes ag-rise {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes ag-pulse {
  0%, 100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}
/* ── Shared layout primitives ────────────────────────────── */
.ag-shell {
  width: min(1190px, 100% - 48px);
  margin-inline: auto;
}

.ag-container {
  width: min(1180px, 100% - 40px);
  margin-inline: auto;
}

.ag-narrow {
  width: min(780px, 100% - 40px);
  margin-inline: auto;
}

.ag-section {
  padding: 120px 0;
}

.ag-section--soft {
  background: #e9e5dd;
}

.ag-section--ink {
  background: #191715;
  color: #fff;
}

/* ── Shared components ───────────────────────────────────── */
.ag-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 12px 22px;
  border: 1px solid #6f1422;
  background: #6f1422;
  color: #fffdf8;
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.015em;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.ag-button:hover {
  background: #4e0c17;
  border-color: #4e0c17;
  color: #fffdf8;
  transform: translateY(-1px);
}

.ag-button--ghost {
  background: transparent;
  color: #6f1422;
}
.ag-button--ghost:hover {
  background: transparent;
  color: #fffdf8;
}

.ag-button--gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 54px;
  padding: 14px 27px;
  border: 0;
  background: #e2c480;
  color: #090909;
  font-family: "Manrope", arial, sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 0.2s ease, transform 0.2s ease;
}
.ag-button--gold:hover {
  background: #f0d594;
  /* WeltPixel's `a:hover { color: #444 }` out-specifies the base
     `color` on hovered anchors — keep the label dark. */
  color: #090909;
  transform: translateY(-1px);
}

.ag-text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid currentcolor;
  color: inherit;
  font-size: 0.71rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-decoration: none;
  text-transform: uppercase;
}
.ag-text-link:hover span {
  transform: translateY(3px);
}

.ag-text-link span {
  transition: transform 0.2s ease;
}

/* WeltPixel's `a:hover { color: #444 }` (0,1,1) out-specifies the bare
   `.ag-text-link` (0,1,0) — the hub intro link went dark on hover. Re-anchor
   at (0,2,0); the link inherits its section colour. */
.ag-section .ag-text-link,
.ag-section .ag-text-link:hover,
.ag-section .ag-text-link:focus-visible {
  color: inherit;
}

.ag-eyebrow {
  margin: 0 0 12px;
  color: #806b4e;
  font-size: 0.74rem;
  line-height: 1.3;
  font-weight: 750;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}

.ag-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.ag-product-card {
  display: grid;
  grid-template-columns: minmax(320px, 0.85fr) minmax(0, 1.15fr);
  background: #fffdf8;
  color: #1b1a19;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.22);
}

.ag-product-card__eyebrow {
  margin: 0 0 12px;
  color: #c29b62;
  font-size: 0.74rem;
  line-height: 1.3;
  font-weight: 750;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}

.ag-product-card__title {
  margin: 0 0 20px;
  font-family: georgia, "Times New Roman", serif;
  font-size: clamp(2.2rem, 4vw, 4rem);
  font-weight: 400;
  line-height: 1.03;
}

.ag-product-card__lead {
  color: #68635e;
}

.ag-product-card__media {
  min-height: 520px;
  padding: 46px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #f8f6f1, #eae5dd);
}

.ag-product-card__media img {
  width: min(100%, 460px);
  max-height: 470px;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.ag-product-card__copy {
  padding: clamp(44px, 7vw, 88px);
  align-self: center;
}

.ag-product-card__copy h2 {
  margin: 0 0 20px;
  font-family: georgia, "Times New Roman", serif;
  font-size: clamp(2.2rem, 4vw, 4rem);
  font-weight: 400;
  line-height: 1.03;
}

.ag-product-card__copy p {
  color: #68635e;
}

.ag-product-card__points {
  margin: 24px 0 30px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.ag-product-card__points li {
  position: relative;
  padding-left: 24px;
}

.ag-product-card__points li::before {
  content: "◇";
  position: absolute;
  left: 0;
  color: #b58a4a;
}

.ag-faq {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(39, 31, 25, 0.14);
}

.ag-faq__item {
  border-bottom: 1px solid rgba(39, 31, 25, 0.14);
}

.ag-faq__button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 23px 0;
  border: 0;
  background: none;
  color: #1b1a19;
  text-align: left;
  cursor: pointer;
  font-family: georgia, "Times New Roman", serif;
  font-size: 1.18rem;
}

.ag-faq__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #6f1422;
  font-family: "Segoe UI", arial, sans-serif;
  font-size: 1.2rem;
}

.ag-faq__answer {
  padding: 0 50px 24px 0;
  color: #68635e;
}

.ag-tabset__list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 35px 0 22px;
  padding: 0;
  list-style: none;
}

.ag-tabset__list .ag-tabset__tab {
  padding: 12px 17px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: transparent;
  color: rgba(255, 255, 255, 0.65);
  cursor: pointer;
  font-weight: 750;
}
.ag-tabset__list .ag-tabset__tab:hover:not(.is-active) {
  color: rgba(255, 255, 255, 0.9);
}

/* Reference active tab renders the warm gold #c29b62 (its --er-gold-warm),
   not the year-page gold #b58a4a, with #111 text that survives hover —
   `:not(.is-active)` keeps the theme-style white hover off the active tab. */
.ag-tabset__tab.is-active {
  border-color: #c29b62;
  background: #c29b62;
  color: #111;
}

.ag-tabset__panel {
  min-height: 340px;
  padding: clamp(30px, 5vw, 60px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #1d1d1d;
}

.ag-tabset__panel[hidden] {
  display: none;
}

.ag-tabset__panel h3 {
  margin: 0 0 16px;
  font-family: georgia, "Times New Roman", serif;
  font-size: 2.2rem;
  font-weight: 400;
}

.ag-tabset__panel p {
  color: rgba(255, 255, 255, 0.65);
}

.ag-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  background: #1d1b1a;
}

.ag-table caption {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.ag-table th,
.ag-table td {
  padding: 18px 20px;
  border-bottom: 1px solid #3b3732;
  text-align: left;
  vertical-align: middle;
}

.ag-table thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #0c0c0c;
  color: #e2c480;
  font-size: 0.59rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ag-table tbody tr {
  transition: background 0.2s ease;
}

.ag-table tbody tr:hover,
.ag-table tbody tr.is-selected {
  background: #2b2825;
}

.ag-table tbody tr.is-selected {
  box-shadow: inset 3px 0 #e2c480;
}

.ag-table td {
  color: #c5bdb3;
  font-size: 0.75rem;
  line-height: 1.45;
}

.ag-table td strong {
  color: #fffdf8;
  font-family: "Cormorant Garamond", georgia, serif;
  font-size: 1.05rem;
  font-weight: 600;
}

.ag-chapter-nav {
  position: sticky;
  top: var(--ag-header-height, 60px);
  z-index: 24;
  background: rgba(255, 253, 248, 0.94);
  backdrop-filter: blur(12px);
  border-block: 1px solid rgba(39, 31, 25, 0.14);
}

.ag-chapter-nav__inner {
  display: flex;
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ag-chapter-nav__inner::-webkit-scrollbar {
  display: none;
}

.ag-chapter-nav__link {
  flex: 0 0 auto;
  padding: 15px 18px;
  color: #4d4742;
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.ag-chapter-nav__link:hover, .ag-chapter-nav__link.is-active {
  color: #6f1422;
}

.ag-chapter-nav__chip {
  margin-right: auto;
  padding-left: 0;
  color: #6f1422;
}

@media (prefers-reduced-motion: reduce) {
  .ag-button,
  .ag-faq__icon,
  .ag-tabset__tab,
  .ag-chapter-nav__link,
  .ag-table tbody tr,
  .ag-product-card {
    transition: none;
  }
}
@media (max-width: 960px) {
  .ag-product-card {
    grid-template-columns: 1fr;
  }
  .ag-product-card__media {
    min-height: 430px;
  }
}
@media (max-width: 680px) {
  .ag-product-card__media {
    min-height: 340px;
    padding: 28px;
  }
  .ag-product-card__copy {
    padding: 36px 27px;
  }
  .ag-table,
  .ag-table tbody,
  .ag-table tr,
  .ag-table th,
  .ag-table td {
    display: block;
  }
}
/* ── Year page hero (editorial + production variants) ──────── */
.ag-year {
  overflow: clip;
  color: #f5f1e9;
  background: #151515;
  font-family: "Segoe UI", arial, sans-serif;
  line-height: 1.65;
}

.ag-year * {
  box-sizing: border-box;
}

.ag-year img {
  max-width: 100%;
  display: block;
}

.ag-year a {
  color: inherit;
}

.ag-year button,
.ag-year input {
  font: inherit;
}

.ag-year--editorial {
  --ag-year-cream: #ebe7df;
  --ag-year-paper: #f5f2ec;
  --ag-year-accent: #b58a4a;
  --ag-year-accent-soft: #b58a4a;
  background: #151515;
  color: #f4f0e9;
}

.ag-year--production {
  --ag-year-accent: #7b1b2b;
  --ag-year-accent-soft: #b58a4a;
}

/* ── Hero container ───────────────────────────────────────── */
.ag-hero {
  position: relative;
  min-height: 760px;
  display: grid;
  align-items: end;
  isolation: isolate;
  background: #111;
  color: #f4f0e9;
}

.ag-hero--editorial::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.78)), var(--ag-hero-image);
  background-size: cover;
  background-position: center;
}

.ag-hero--production {
  background: radial-gradient(circle at 78% 30%, color-mix(in srgb, var(--ag-year-accent, #7b1b2b) 36%, #151515), #111 58%);
  /* Reference production heroes carry no section padding (their copy owns
     120/72 inside .ag-hero__layout) — the inherited .ag-section 120px
     double-padded every production page to ~1100-1270px vs the reference's
     ~870-965px. Editorial heroes keep the section padding (year 1/25). */
  padding: 0;
}

.ag-hero--production::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(10, 10, 10, 0.98), rgba(10, 10, 10, 0.55) 48%, rgba(10, 10, 10, 0.1));
}

/* Giant ghost numeral behind the hero (reference data-year art) */
.ag-hero::after {
  content: attr(data-year);
  position: absolute;
  right: 2vw;
  bottom: -6vw;
  z-index: -1;
  color: rgba(255, 255, 255, 0.08);
  font-family: georgia, "Times New Roman", serif;
  font-size: clamp(13rem, 28vw, 28rem);
  line-height: 0.8;
}

/* The reference renders the editorial-hero numeral in full cream */
.ag-hero--editorial::after {
  color: #f4f0e9;
}

.ag-hero--production::after {
  color: color-mix(in srgb, var(--ag-year-accent-soft, #b58a4a) 24%, transparent);
}

/* Production hero ghost CTA: translucent glass per reference */
.ag-hero--production .ag-button--ghost {
  border-color: rgba(255, 255, 255, 0.58);
  background: rgba(0, 0, 0, 0.16);
  color: #fff;
}

/* Hero ghost CTA fills white on hover (reference concept-b hero) */
.ag-hero .ag-button--ghost:hover {
  border-color: #fff;
  background: #fff;
  color: #171411;
}

/* ── Return navigation ────────────────────────────────────── */
.ag-return-nav {
  width: min(1180px, 100% - 40px);
  position: absolute;
  z-index: 4;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  padding-top: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  font-size: 0.66rem;
  font-weight: 750;
  letter-spacing: 0.11em;
  line-height: 1.4;
  text-transform: uppercase;
  text-decoration: none;
  color: #f4f0e9;
}

/* WeltPixel's global `a:hover { color: #444 }` (0,1,1, loads later) out-specifies
   a bare `.ag-return-nav` (0,1,0) on hover, and `.ag-year a { color: inherit }`
   (0,1,1) already beats it at rest — so the colour is re-anchored at (0,2,1)
   to match the measured reference: cream white at rest, on hover and on focus.
   (The reference's `color: var(--er-year-accent-soft)` is invalid at computed
   value time — the corrupted `+.er-production` rule never defines the var —
   so the link renders in the inherited cream white #f4f0e9.)
   Years 2+ whose reference DOES define the accent vars (inline on the article)
   render the link in the accent-soft tint instead — measured on 21, 23, 26,
   28–32, 35, 37–43, 45, 46, 47, 49, 50, 55, 60 — so the accented scope swaps
   the pin to the var. (Years 34/36 render cream despite resolving vars —
   deviation logged in the audit reports.) */
.ag-year a.ag-return-nav,
.ag-year a.ag-return-nav:hover,
.ag-year a.ag-return-nav:focus-visible {
  color: #f4f0e9;
}

.ag-year--accented a.ag-return-nav,
.ag-year--accented a.ag-return-nav:hover,
.ag-year--accented a.ag-return-nav:focus-visible {
  color: var(--ag-year-accent-soft, #f4f0e9);
}

/* Reference (.er-return-nav a:hover span): the arrow nudges left, no underline */
.ag-return-nav__label > span {
  transition: transform 0.2s ease;
}

.ag-return-nav:hover .ag-return-nav__label > span,
.ag-return-nav:focus-visible .ag-return-nav__label > span {
  transform: translateX(-3px);
}

.ag-return-nav:focus-visible {
  outline: 2px solid #f4f0e9;
  outline-offset: 5px;
}

.ag-return-nav__current,
.ag-return-nav:hover .ag-return-nav__current,
.ag-return-nav:focus-visible .ag-return-nav__current {
  color: rgba(255, 255, 255, 0.48);
}

/* ── Hero layout and copy ───────────────────────────────────── */
.ag-hero__layout {
  width: min(1180px, 100% - 40px);
  margin: 0 auto;
  padding: 120px 0 72px;
  /* No opacity fade here: Chrome keeps a composited render surface for an
     ancestor with an opacity animation (even after it finishes with fill),
     and a descendant's backdrop-filter then samples that surface instead of
     the page backdrop — the dossier-facts frosted glass never blurs.
     The static reference has no hero fade either. */
}

.ag-hero--production .ag-hero__layout {
  display: grid;
  grid-template-columns: 1fr 0.82fr;
  align-items: center;
  gap: 70px;
}

/* Editorial hero: copy bottom-left, dossier facts panel bottom-right */
.ag-hero--editorial .ag-hero__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 0.82fr;
  align-items: end;
  gap: 70px;
}

.ag-hero__copy {
  max-width: 720px;
}

/* Reference hero eyebrow renders at 1.06rem, not .er-eyebrow's .74rem:
   .concept-b .er-hero p { font-size: 1.06rem } out-specifies .er-eyebrow in
   the reference, so the measured render is 16.96px / 750 / .19em / lh 1.3. */
.ag-hero__eyebrow {
  margin: 0 0 12px;
  color: #d4b98d;
  text-transform: uppercase;
  letter-spacing: 0.19em;
  font-size: 1.06rem;
  line-height: 1.3;
  font-weight: 750;
}

.ag-hero__title {
  margin: 0;
  max-width: 720px;
  font-family: georgia, "Times New Roman", serif;
  font-size: clamp(3.6rem, 7.2vw, 7rem);
  line-height: 0.93;
  font-weight: 400;
  letter-spacing: -0.055em;
}

.ag-hero__lead {
  max-width: 620px;
  color: rgba(255, 255, 255, 0.74);
  font-size: 1.06rem;
}

.ag-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.ag-hero__media {
  position: relative;
  max-width: 420px;
  margin-top: 24px;
}

.ag-hero__image {
  width: 100%;
  height: auto;
}

/* ── Production hero product plate + dossier facts ─────────── */
.ag-hero__media--product {
  min-width: 0;
  max-width: none;
  padding: 34px 0 40px;
}

.ag-hero__product-plate {
  overflow: hidden;
  min-height: 420px;
  display: grid;
  place-items: center;
  padding: 28px;
  background: #f4f1eb;
  box-shadow: 0 35px 90px rgba(0, 0, 0, 0.42);
}

/* Reference pins the plate image to a 420px-tall contain box (444×420 at
   1280) — height:auto shrank wide product shots to ~344px. */
.ag-hero__product-plate img {
  width: 100%;
  height: 420px;
  max-height: 420px;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.ag-hero__media--product .ag-year__dossier-facts {
  width: min(92%, 560px);
  margin: -78px 0 0 -42px;
  position: relative;
  z-index: 2;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 960px) {
  .ag-return-nav,
  .ag-hero__layout {
    width: min(100% - 28px, 1180px);
  }
  .ag-hero--production .ag-hero__layout,
  .ag-hero--editorial .ag-hero__layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .ag-hero__media--product .ag-year__dossier-facts {
    margin: -70px auto 0;
  }
}
@media (max-width: 680px) {
  .ag-hero {
    min-height: 720px;
  }
  .ag-return-nav {
    padding-top: 18px;
    gap: 12px;
    font-size: 0.56rem;
    letter-spacing: 0.075em;
  }
  .ag-return-nav__current {
    white-space: nowrap;
  }
  .ag-hero__layout {
    padding: 250px 0 45px;
  }
  .ag-hero__title {
    font-size: clamp(3.1rem, 16vw, 5rem);
  }
  .ag-hero__media {
    max-width: 100%;
  }
  .ag-hero__product-plate {
    min-height: 280px;
  }
  .ag-hero__product-plate img {
    max-height: 280px;
  }
  .ag-hero__media--product .ag-year__dossier-facts {
    width: 96%;
    margin: -38px auto 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ag-return-nav__label > span {
    transition: none;
  }
}
/* ── Year page chapter nav (overrides shared component) ────── */
/* WeltPixel floating header (header.ter-header) is sticky and parks at the
   viewport top with a computed height of 60px at desktop; the nav must stop
   directly below it (reference: top: var(--er-site-header-height, 60px)).
   shared/header-offset.ts republishes --ag-header-height on the nav from the
   header's live visible height, so the 60px here is only the no-JS fallback. */
.ag-year {
  --ag-header-height: 60px;
}

.ag-year .ag-chapter-nav {
  background: rgba(17, 17, 17, 0.94);
  border-color: rgba(255, 255, 255, 0.1);
}

/* .ag-chapter-nav__inner sets margin: 0 in _components.scss, which beats
   .ag-container's margin-inline: auto (same specificity, later in source) and
   pins the "01 / DOSSIER" chip to the page edge. Restore the container's
   auto centering, scoped to the year page. */
.ag-year .ag-chapter-nav__inner {
  margin-inline: auto;
}

.ag-year .ag-chapter-nav__link {
  color: rgba(255, 255, 255, 0.58);
}
.ag-year .ag-chapter-nav__link:hover, .ag-year .ag-chapter-nav__link.is-active, .ag-year .ag-chapter-nav__link.ag-chapter-nav__chip {
  color: #d4b98d;
}

.ag-year .ag-chapter-nav__chip {
  color: #d4b98d;
}

/* ── Year decode / dossier facts ─────────────────────────── */
.ag-year__dossier-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(18px);
  background: rgba(15, 15, 15, 0.55);
}

.ag-year__dossier-fact {
  padding: 22px;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.ag-year__dossier-fact:nth-child(even) {
  border-right: 0;
}

.ag-year__dossier-fact:nth-last-child(-n+2) {
  border-bottom: 0;
}

.ag-year__dossier-fact-label,
.ag-year__dossier-fact small {
  display: block;
  color: #c8aa7d;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ag-year__dossier-fact-value,
.ag-year__dossier-fact strong {
  display: block;
  margin-top: 8px;
  font-family: georgia, "Times New Roman", serif;
  font-size: 1.2rem;
  font-weight: 400;
}

.ag-year__decode {
  background: #151515;
  color: #f5f1e9;
}

.ag-year__dossier {
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(44px, 8vw, 110px);
  align-items: start;
}

.ag-year__dossier-title {
  position: sticky;
  top: 100px;
}

.ag-year__dossier-title .ag-eyebrow {
  color: #c29b62;
}

.ag-year__decode .ag-year__section-intro {
  color: rgba(255, 255, 255, 0.62);
}

.ag-year__dossier-title h2 {
  font-size: clamp(2.4rem, 5vw, 5rem);
  font-weight: 400;
}

.ag-year__dossier-copy p {
  color: rgba(255, 255, 255, 0.62);
}

@media (max-width: 960px) {
  .ag-year__dossier {
    grid-template-columns: 1fr;
  }
  .ag-year__dossier-title {
    position: static;
  }
}
@media (max-width: 680px) {
  .ag-year__dossier-facts {
    grid-template-columns: 1fr 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ag-year__dossier-fact {
    transition: none;
  }
}
/* ── Year editorial slab ─────────────────────────────────── */
.ag-year__editorial {
  display: grid;
  /* Reference render: full-bleed slab, no section padding, 1.08fr/.92fr
     panels (the authored base 1.12fr/.88fr is overridden later in the
     client stylesheet and their render measures 674/575 at 1280). */
  grid-template-columns: 1.08fr 0.92fr;
  min-height: 620px;
  padding: 0;
}

/* Decorative year-art panel (numeral / theme / colour) */
.ag-year__year-art {
  min-height: 620px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--ag-year-accent, #7b1b2b) 72%, #2b2b2b), #101010 70%);
}

.ag-year__year-art::before,
.ag-year__year-art::after {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  border: 1px solid color-mix(in srgb, var(--ag-year-accent-soft, #b58a4a) 58%, transparent);
  transform: rotate(45deg);
}

.ag-year__year-art::after {
  width: 510px;
  height: 510px;
  opacity: 0.35;
}

.ag-year__year-art span {
  position: relative;
  z-index: 1;
  font-family: georgia, "Times New Roman", serif;
  font-size: clamp(10rem, 24vw, 20rem);
  line-height: 0.72;
  color: rgba(255, 255, 255, 0.84);
  letter-spacing: -0.08em;
}

.ag-year__year-art small,
.ag-year__year-art i {
  position: relative;
  z-index: 1;
  color: var(--ag-year-accent-soft, #b58a4a);
  font-style: normal;
  font-weight: 750;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.ag-year__year-art i {
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.72rem;
}

.ag-year__editorial img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The client reference's production stylesheet corrupts its accent variable
   on the 1st-page handover (--er-year-accent is never defined there, so
   `background: var(--er-year-accent)` is invalid at computed-value time and
   resets to transparent), so THAT reference actually renders its slab on the
   dark page background — not the #791a2a red in its base rule. Every other
   year's reference defines the accent (inline on the article), and renders
   the slab filled with the year accent — measured on years 2–60. The
   `ag-year--accented` class (wrapper.phtml, only when the year has an accent)
   reproduces both: accent fill on years 2+, transparent/dark on year 1. */
.ag-year__editorial-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(45px, 8vw, 100px);
  background: transparent;
  color: #fff;
}

.ag-year--accented .ag-year__editorial-copy {
  background: var(--ag-year-accent, transparent);
}

.ag-year .ag-year__editorial-copy .ag-eyebrow {
  color: #e5ca9e;
}

.ag-year__editorial-copy p {
  color: rgba(255, 255, 255, 0.75);
}

/* On the accent-filled slab the reference ghost CTA is the burgundy outline
   variant: #6f1422 border, white label, #4e0c17 fill on hover (not the white
   fill of the hero ghost). Year 1's unaccented slab keeps the white hairline
   treatment measured on its reference. */
.ag-year--accented .ag-year__editorial-copy .ag-button--ghost {
  color: #fff;
  border-color: #6f1422;
}
.ag-year--accented .ag-year__editorial-copy .ag-button--ghost:hover {
  border-color: #4e0c17;
  background: #4e0c17;
  color: #fff;
}

.ag-year__editorial-copy .ag-button--ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.68);
}
.ag-year__editorial-copy .ag-button--ghost:hover {
  background: #fff;
  color: #171411;
}

@media (max-width: 960px) {
  .ag-year__editorial {
    grid-template-columns: 1fr;
  }
  .ag-year__editorial img {
    max-height: 560px;
  }
}
@media (max-width: 680px) {
  .ag-year__editorial-copy {
    padding: 55px 27px;
  }
}
/* ── Year ideas bento ─────────────────────────────────────── */
.ag-year__ideas {
  background: #151515;
  color: #f5f1e9;
}

.ag-year__ideas .ag-year__section-intro {
  color: rgba(255, 255, 255, 0.62);
}

.ag-year__bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
  margin-top: 45px;
}

.ag-year__bento-card {
  grid-column: span 4;
  min-height: 250px;
  padding: 30px;
  background: #1d1d1d;
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ag-year__bento-card:nth-child(1), .ag-year__bento-card:nth-child(5) {
  grid-column: span 6;
}
.ag-year__bento-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 45px rgba(44, 32, 25, 0.1);
}

.ag-year__bento-card[hidden] {
  display: none;
}

.ag-year__bento-card-tag {
  color: #c8a873;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ag-year__bento-card h3 {
  margin: 17px 0 9px;
  font-family: georgia, "Times New Roman", serif;
  font-size: 1.5rem;
  font-weight: 400;
}

.ag-year__bento-card p {
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.91rem;
}

.ag-year__idea-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 36px 0 26px;
  padding: 0;
  list-style: none;
}

.ag-year__idea-filter {
  border: 1px solid rgba(39, 31, 25, 0.14);
  border-radius: 99px;
  padding: 9px 15px;
  background: #fff;
  color: #4d4742;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 700;
}
.ag-year__idea-filter:hover, .ag-year__idea-filter.is-active {
  border-color: #6f1422;
  background: #6f1422;
  color: #fff;
}

@media (max-width: 960px) {
  .ag-year__bento-card,
  .ag-year__bento-card:nth-child(1),
  .ag-year__bento-card:nth-child(5) {
    grid-column: span 6;
  }
}
@media (max-width: 680px) {
  .ag-year__bento-card,
  .ag-year__bento-card:nth-child(1),
  .ag-year__bento-card:nth-child(5) {
    grid-column: 1/-1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ag-year__bento-card,
  .ag-year__idea-filter {
    transition: none;
  }
}
/* ── Year symbols (concept-b: soft section, ink text) ─────── */
.ag-year__symbols {
  background: #e9e5dd;
  color: #181716;
}

/* Editorial years only: the reference renders the symbols eyebrow muted on
   the soft cream section (years 1 and 25, rgb(105,98,92)). Production years
   render it gold (#c29b62) on the same cream — the `.ag-year .ag-eyebrow`
   base in year.scss covers them. */
.ag-year--editorial .ag-year__symbols .ag-eyebrow {
  color: #69625c;
}

/* Prose variant (years with approved prose copy, e.g. 1st / 25th) */
.ag-year__symbols .ag-year__prose p {
  color: #69625c;
}

/* Cards variant — three white cards with the year accent top border */
.ag-year__symbols-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 46px;
}

.ag-year__symbols-cards section {
  padding: 30px;
  background: #fff;
  border-top: 3px solid var(--ag-year-accent, #7b1b2b);
  box-shadow: 0 15px 45px rgba(36, 28, 23, 0.08);
}

.ag-year__symbols-cards small {
  color: var(--ag-year-accent, #7b1b2b);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ag-year__symbols-cards h3 {
  margin: 15px 0 10px;
  font-family: georgia, "Times New Roman", serif;
  font-size: 1.55rem;
  font-weight: 400;
}

.ag-year__symbols-cards p {
  margin: 0;
  color: #69625c;
  font-size: 0.92rem;
}

@media (max-width: 960px) {
  .ag-year__symbols-cards {
    grid-template-columns: 1fr;
  }
}
/* ── Year product block (overrides shared product card) ───── */
.ag-year .ag-product-card {
  background: #eeeae3;
}

.ag-year .ag-product-card .ag-button {
  color: #fffdf8;
}

.ag-year--editorial .ag-product-card {
  background: #eeeae3;
  color: #1b1a19;
}

@media (max-width: 960px) {
  .ag-year .ag-product-card {
    grid-template-columns: 1fr;
  }
  .ag-year .ag-product-card__media {
    min-height: 430px;
  }
}
@media (max-width: 680px) {
  .ag-year .ag-product-card__media {
    min-height: 340px;
    padding: 28px;
  }
  .ag-year .ag-product-card__copy {
    padding: 36px 27px;
  }
}
/* ── Year FAQ (overrides shared accordion for dark theme) ──── */
.ag-year .ag-faq {
  border-color: rgba(255, 255, 255, 0.14);
}

.ag-year .ag-faq__item {
  border-color: rgba(255, 255, 255, 0.14);
}

.ag-year .ag-faq__button {
  color: #f5f1e9;
}

.ag-year .ag-faq__answer {
  color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 680px) {
  .ag-year .ag-faq__button {
    font-size: 1.05rem;
  }
  .ag-year .ag-faq__answer {
    padding-right: 20px;
  }
}
/* ── Year sources (concept-b dark theme, all variants) ────── */
.ag-year__sources {
  padding: 40px 0;
  background: #0b0b0b;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.55);
}

.ag-year__sources h2 {
  margin: 0 0 10px;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #f4f0e9;
}

.ag-year__sources p {
  margin: 0;
}

.ag-year__sources-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ag-year__sources-item {
  display: inline;
}

.ag-year__sources-item + .ag-year__sources-item {
  margin-left: 12px;
}

.ag-year__sources a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* WeltPixel's global `a:hover { color: #444 }` (0,1,1) out-specifies the bare
   `.ag-year__sources a` (0,1,0) and drops the underline — re-anchor rest,
   hover and focus at (0,2,1), above the theme bite. Reference: the links keep
   rgba(255,255,255,.55) and the underline on hover. */
.ag-year .ag-year__sources a,
.ag-year .ag-year__sources a:hover,
.ag-year .ag-year__sources a:focus-visible {
  color: rgba(255, 255, 255, 0.55);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Year navigation footer (concept-b dark theme, all variants) ── */
.ag-year__nav {
  padding: 58px 0;
  background: #101010;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.ag-year__nav-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
}

.ag-year__nav-link {
  min-height: 118px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.ag-year__nav-link:hover {
  border-color: #6f1422;
  transform: translateY(-2px);
}

.ag-year__nav-link-label {
  color: rgba(255, 255, 255, 0.48);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* Theme `a:hover` hijack guard: reference text colours never change on hover */
}
.ag-year__nav-link:hover .ag-year__nav-link-label {
  color: rgba(255, 255, 255, 0.48);
}

.ag-year__nav-link-title {
  margin-top: 4px;
  font-family: georgia, "Times New Roman", serif;
  font-size: 1.22rem;
  font-weight: 400;
}
.ag-year__nav-link:hover .ag-year__nav-link-title {
  color: #f4f0e9;
}

/* Reference: the hub card keeps the shared white hairline border at rest
   (measured rgba(255,255,255,.15) — `.concept-b .er-year-link` out-specifies
   the hub modifier) and gets the same hover as every other card. */
.ag-year__nav-link--hub {
  background: #7b1b2b;
  text-align: center;
  color: #fff;
}

.ag-year__nav-link--hub .ag-year__nav-link-label {
  color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 680px) {
  .ag-year__nav-grid {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ag-year__nav-link {
    transition: none;
  }
}
/* ── Year page scope ───────────────────────────────────────── */
.ag-year :focus-visible {
  outline: 3px solid #b58a4a;
  outline-offset: 3px;
}

.ag-year__section {
  padding: 108px 0;
}

.ag-year__section--soft {
  background: #e9e5dd;
  color: #1b1a19;
}

.ag-year__section--ink {
  background: #191715;
  color: #fff;
}

.ag-year__section--ink .ag-section__intro,
.ag-year__section--ink .ag-year__kicker {
  color: rgba(255, 255, 255, 0.7);
}

.ag-year__kicker {
  font-family: georgia, "Times New Roman", serif;
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  line-height: 1.45;
  color: #403a35;
}

.ag-year__section-title {
  margin: 0 0 18px;
  font-family: georgia, "Times New Roman", serif;
  /* Reference render: 64px at the 1280px audit viewport — 5vw hits 64 there
     (the old 4.2vw/3.7rem clamp rendered 53.76px). */
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.035em;
}

/* Reference concept-b renders section eyebrows in the warm gold #c29b62
   (.concept-b .er-eyebrow), not the muted brown used by the shared partial.
   The symbols-section exception below is variant-scoped. */
.ag-year .ag-eyebrow {
  color: #c29b62;
}

/* `.ag-product-card__copy p` (0,2,1) out-specifies `.ag-product-card__eyebrow`
   (0,1,0) and greys the product eyebrow out — re-assert the gold above it. */
.ag-year .ag-product-card__copy .ag-product-card__eyebrow {
  color: #c29b62;
}

.ag-year__section-intro {
  max-width: 760px;
  margin: 0;
  color: #68635e;
  font-size: 1.08rem;
}

.ag-year__two-col {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(44px, 7vw, 96px);
}

.ag-year__two-col--reverse {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}

.ag-year__prose p {
  margin: 0 0 1.15em;
}

.ag-year__prose p:last-child {
  margin-bottom: 0;
}

.ag-year__prose h3 {
  margin: 1.5em 0 0.55em;
  font-family: georgia, "Times New Roman", serif;
  font-size: 1.65rem;
  font-weight: 400;
  line-height: 1.2;
}

.ag-year__image-frame {
  position: relative;
}

.ag-year__image-frame::before {
  content: "";
  position: absolute;
  inset: 22px -22px -22px 22px;
  border: 1px solid rgba(181, 138, 74, 0.55);
  z-index: 0;
}

.ag-year__image-frame img {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}

.ag-year__caption {
  margin-top: 14px;
  color: #68635e;
  font-size: 0.78rem;
}

.ag-year__text-link {
  color: #6f1422;
  font-weight: 700;
  text-underline-offset: 4px;
}

@media (max-width: 960px) {
  .ag-shell {
    width: min(100% - 28px, 1180px);
  }
  .ag-year__two-col,
  .ag-year__two-col--reverse {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 680px) {
  .ag-year__section {
    padding: 76px 0;
  }
  .ag-year__image-frame::before {
    inset: 12px -10px -12px 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .ag-year,
  .ag-year *,
  .ag-year *::before,
  .ag-year *::after {
    transition: none !important;
  }
}