/** Shopify CDN: Minification failed

Line 576:0 Unexpected "}"
Line 692:0 Unexpected "}"
Line 697:2 Unexpected "0%"
Line 698:2 Unexpected "50%"

**/
/* ==========================================================================
   SILAF — product pages (§6). Five hero compositions, one per FINAL poster.
   Breakpoints §4.6/§10: mobile < 768 · tablet 768–1023 · desktop ≥ 1024.
   ========================================================================== */

.pdp { position: relative; }
.pdp__status { display: flex; gap: 8px; padding-top: var(--s-5); position: relative; z-index: 5; }
.pdp__hero { position: relative; overflow: clip; }
.pdp.is-soldout .hero__bag { filter: var(--shadow-bag) saturate(.7); } /* §6.6: 30% desaturated */

.hero { position: relative; width: 100%; max-width: calc(var(--container-wide) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.hero__bag { filter: var(--shadow-bag); pointer-events: none; user-select: none; }
.hero__art { position: relative; }
.hero .title-block { position: relative; z-index: 3; }
.hero__specs { display: grid; gap: 10px; position: relative; z-index: 3; }
.spec-line--dots { display: flex; flex-wrap: wrap; gap: 0 1.6em; }
.spec-line--dots span + span::before { content: "·"; margin-right: 1.6em; }
.spec-line--lead { font-size: .8125rem; letter-spacing: .2em; }

/* Desktop-open accordions: in the hero they read as plain blocks on wide screens */
@media (min-width: 768px) {
  .accordion[data-desktop-open] { border-top: 0; }
  .accordion[data-desktop-open] > summary { display: none; }
  .accordion[data-desktop-open] > .accordion__body { padding-block: 0; }
}

/* ==========================================================================
   1 · DIAGONAL — Sookoo XII
   ========================================================================== */
.hero--diagonal {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr auto;
  column-gap: var(--s-5); min-height: clamp(800px, 66vw, 980px); padding-block: var(--s-7) var(--s-6);
}
.hero--diagonal .hero__title { grid-column: 1 / 7; grid-row: 1; position: relative; z-index: 3; display: grid; gap: var(--s-6); align-content: start; }
.hero--diagonal .hero__lead-note { justify-self: start; }
.hero--diagonal .hero__art { position: absolute; inset: 0 calc(50% - 50vw); z-index: 1; }
.hero__slash {
  position: absolute; left: -12%; right: -12%; top: 44%; height: clamp(112px, 11vw, 172px);
  background-size: auto 100%; background-repeat: repeat-x;
  transform: translateY(var(--drift, 0px)) rotate(-24deg);
  box-shadow: 0 30px 40px rgba(0,0,0,.45);
}
.hero--diagonal .hero__disc { position: absolute; width: clamp(360px, 40vw, 620px); right: max(4vw, calc(50vw - 640px)); top: 9%; }
.hero--diagonal .hero__badge { position: absolute; --size: clamp(128px, 11vw, 172px); top: 5%; right: max(3vw, calc(50vw - 690px)); z-index: 3; }
.hero--diagonal .hero__bag { position: absolute; z-index: 2; width: min(58vw, 860px); left: 50%; top: 50%; transform: translate(-44%, -44%); }
.hero--diagonal .hero__stickers { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.hero--diagonal .hero__sticker { position: absolute; }
@media (min-width: 1024px) { .hero--diagonal .hero__sticker--lead { display: none; } }
.hero--diagonal .hero__sticker:nth-child(2) { right: calc(var(--gutter) + 9%); bottom: 24%; }
.hero--diagonal .hero__sticker:nth-child(3) { left: calc(var(--gutter) + 3%); bottom: 16%; }
.hero--diagonal .hero__sticker:nth-child(n+4) { right: calc(var(--gutter) + 2%); bottom: 40%; }
.hero--diagonal .hero__specs { grid-column: 1 / 9; grid-row: 3; align-self: end; padding: 10px 14px 10px 0; background: var(--night); box-shadow: 0 0 0 10px var(--night); justify-self: start; }

/* Below 1024 the poster keeps its composition inside its own frame, under the title, so the
   stickers and the bag+card never collide with type (§10.2, §3.3.4). */
@media (max-width: 1023px) {
  .hero--diagonal { display: flex; flex-direction: column; min-height: 0; padding-block: var(--s-6) var(--s-5); gap: var(--s-5); }
  .hero--diagonal .hero__lead-note { display: none; }
  .hero--diagonal .hero__art { position: relative; inset: auto; margin-inline: calc(var(--gutter) * -1); aspect-ratio: 16 / 11; overflow: hidden; }
  .hero--diagonal .hero__disc { width: 56%; right: 4%; top: 6%; }
  .hero--diagonal .hero__badge { --size: 132px; top: 4%; right: 3%; }
  .hero--diagonal .hero__bag { width: 80%; left: 50%; top: 56%; transform: translate(-50%, -50%); }
  .hero__slash { top: 50%; height: 12%; left: -30%; right: -30%; }
  .hero--diagonal .hero__stickers { position: static; display: flex; flex-wrap: wrap; gap: var(--s-6); pointer-events: auto; }
  .hero--diagonal .hero__sticker { position: static; }
  .hero--diagonal .hero__stickers::before { content: none; }
  .hero--diagonal .hero__specs { align-self: flex-start; }
}
@media (max-width: 767px) {
  .hero--diagonal .hero__title { gap: var(--s-5); }
  .hero--diagonal .hero__art { aspect-ratio: 1 / 1.02; }
  .hero__slash { top: 58%; height: 84px; left: -40%; right: -40%; }
  .hero--diagonal .hero__disc { width: 88vw; right: -26vw; top: 2%; }
  .hero--diagonal .hero__badge { --size: 100px; top: 3%; right: 4%; }
  .hero--diagonal .hero__bag { width: 112vw; left: 50%; top: 56%; transform: translate(-50%, -50%); }
  .hero--diagonal .hero__stickers { position: static; display: flex; flex-wrap: wrap; gap: var(--s-5); pointer-events: auto; }
  .hero--diagonal .hero__sticker { position: static; }
}

/* ==========================================================================
   2 · TASTING CARD — Finca El Rubí
   ========================================================================== */
.hero--card {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-5);
  grid-template-rows: auto auto auto 1fr; row-gap: var(--s-7);
  padding-block: var(--s-7) clamp(var(--s-8), 10vw, var(--s-10)); min-height: clamp(860px, 74vw, 1080px);
}
.hero__lathe { position: absolute; width: min(1100px, 80vw); right: -18vw; top: -12%; color: var(--rosette); opacity: .55; pointer-events: none; }
.hero--card .hero__title { grid-column: 1 / 8; grid-row: 1; }
.hero--card .hero__aside { grid-column: 9 / 13; grid-row: 1; justify-self: end; display: grid; gap: var(--s-4); justify-items: end; text-align: right; position: relative; z-index: 3; }
.hero--card .hero__notes { grid-column: 1 / 7; grid-row: 2; display: grid; gap: clamp(18px, 2.2vw, 30px); position: relative; z-index: 3; }
.hero--card .hero__specs { grid-column: 1 / 6; grid-row: 3; max-width: 520px; }
.hero--card .hero__art { position: absolute; z-index: 1; width: clamp(440px, 50vw, 780px); right: calc(min(0px, (100vw - var(--container-wide)) / -2) - 5vw); bottom: -9%; }
.hero--card .hero__bag { width: 100%; }

@media (min-width: 768px) and (max-width: 1023px) {
  .hero--card { min-height: 0; padding-bottom: 0; }
  .hero--card .hero__title { grid-column: 1 / 9; }
  .hero--card .hero__aside { grid-column: 9 / 13; }
  .hero--card .hero__notes { grid-column: 1 / 10; }
  /* §10.2: spec table below the product image */
  .hero--card .hero__art { position: relative; grid-column: 3 / 13; grid-row: 3; right: auto; bottom: auto; width: auto; margin-right: calc(var(--gutter) * -1 - 4vw); }
  .hero--card .hero__specs { grid-column: 1 / 9; grid-row: 4; padding-bottom: var(--s-8); }
}
@media (max-width: 767px) {
  .hero--card { display: flex; flex-direction: column; gap: var(--s-6); min-height: 0; padding-bottom: var(--s-5); }
  .hero--card .hero__aside { justify-self: auto; align-self: flex-end; margin-top: calc(var(--s-3) * -1); }
  .hero--card .hero__aside .title-block__eyebrow { display: none; }
  .hero--card .hero__art { position: relative; right: auto; bottom: auto; width: 108vw; align-self: flex-end; margin-right: calc(var(--gutter) * -1 - 12vw); }
  .hero__lathe { width: 150vw; right: -70vw; top: 10%; }
  .hero--card .note--headline .note-icon { --s: 2 !important; }
}

/* ==========================================================================
   3 · PROCESS — Ansermo
   ========================================================================== */
.hero--process {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-5); row-gap: var(--s-8);
  padding-block: var(--s-7) var(--s-7);
}
.hero--process .hero__title { grid-column: 1 / 6; grid-row: 1; align-self: start; padding-top: var(--s-4); }
.hero--process .hero__art { grid-column: 6 / 13; grid-row: 1; margin-right: calc(var(--gutter) * -1 - 6vw); margin-top: calc(var(--s-5) * -1); }
.hero--process .hero__bag { width: 100%; transform: rotate(-7deg); transform-origin: 40% 60%; }
.hero--process .hero__timeline { grid-column: 1 / 13; grid-row: 2; }
.hero--process .hero__process-note { grid-column: 1 / 13; grid-row: 3; padding-top: var(--s-7); padding-right: max(0px, calc(100% - 64ch)); border-top: var(--hairline); max-width: none; color: var(--cream); }
.hero--process .hero__notes { grid-column: 1 / 13; grid-row: 4; display: grid; gap: var(--s-6); }
.hero__notes-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-5); }
.hero--process .hero__specs { grid-column: 1 / 13; grid-row: 5; margin-top: calc(var(--s-5) * -1); }

@media (min-width: 768px) and (max-width: 1023px) {
  .hero--process .hero__title { grid-column: 1 / 8; }
  .hero--process .hero__art { grid-column: 5 / 13; grid-row: 2; margin-top: calc(var(--s-7) * -1); }
  .hero--process .hero__timeline { grid-row: 3; }
  .hero--process .hero__process-note { grid-row: 4; }
  .hero--process .hero__notes { grid-row: 5; }
  .hero--process .hero__specs { grid-row: 6; }
  .hero__notes-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .hero--process { display: flex; flex-direction: column; gap: var(--s-7); padding-top: var(--s-6); }
  .hero--process .hero__title { padding-top: 0; }
  .hero--process .hero__art { margin: 0 calc(var(--gutter) * -1 - 10vw) 0 calc(var(--s-5) * -1); }
  .hero--process .hero__process-note { padding-top: var(--s-6); }
  .hero__notes-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-4); }
}

/* ==========================================================================
   4 · ORBIT — Ansermo XII
   ========================================================================== */
.hero--orbit {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-5);
  grid-template-rows: auto auto auto; padding-block: var(--s-7) var(--s-6);
  --orbit: min(60vw, 700px);
}
.hero--orbit .hero__title { grid-column: 1 / 7; grid-row: 1; }
.hero--orbit .hero__art { grid-column: 1 / 13; grid-row: 2; width: var(--orbit); justify-self: center; margin-top: calc(var(--orbit) * -0.16); margin-left: 8vw; }
.hero__orbit { position: relative; width: 100%; aspect-ratio: 1; }
.hero--orbit .hero__disc { position: absolute; inset: 0; }
.hero--orbit .hero__bag { position: absolute; z-index: 2; width: 112%; left: -6%; top: 13%; }
.hero--orbit .hero__badge { position: absolute; z-index: 3; --size: clamp(140px, 13vw, 190px); top: -9%; right: -9%; }
.hero__orbit-notes { position: absolute; inset: 0; z-index: 3; --r: 60%; }
.hero__orbit-note { position: absolute; left: calc(50% + var(--r) * cos(var(--a))); top: calc(50% + var(--r) * sin(var(--a))); transform: translate(-50%, -50%); }
.hero__orbit-note:nth-child(1) { --a: 208deg; }
.hero__orbit-note:nth-child(2) { --a: -12deg; }
.hero__orbit-note:nth-child(3) { --a: 22deg; }
.hero__orbit-note:nth-child(4) { --a: 116deg; }
.hero__orbit-note:nth-child(5) { --a: 160deg; }
.hero__orbit-note:nth-child(6) { --a: -60deg; }
.hero--orbit .hero__specs { grid-column: 1 / 9; grid-row: 3; margin-top: calc(var(--orbit) * .1 + var(--s-7)); } /* clears the lowest orbit note */

@media (min-width: 768px) and (max-width: 1023px) {
  .hero--orbit { --orbit: 66vw; }
  .hero--orbit .hero__art { margin-left: 0; margin-top: var(--s-7); }
  .hero__orbit-notes { --r: 54%; } /* §10.2: orbit notes pull closer */
  .hero--orbit .hero__title { grid-column: 1 / 11; }
}
@media (max-width: 767px) {
  .hero--orbit { display: flex; flex-direction: column; gap: var(--s-6); padding-top: var(--s-6); }
  .hero--orbit .hero__art { width: auto; margin: 0 calc(var(--gutter) * -1); margin-top: 0; }
  .hero--orbit .hero__specs { margin-top: 0; }
  .hero__orbit { width: 100%; aspect-ratio: 1 / .92; overflow: hidden; }
  .hero--orbit .hero__disc { inset: auto; width: 118vw; left: -9vw; top: -6vw; }
  .hero--orbit .hero__bag { width: 104%; left: -2%; top: 16%; }
  .hero--orbit .hero__badge { --size: 104px; top: 3%; right: 3%; }
  .hero__orbit-notes { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); padding: var(--s-5) var(--gutter) 0; }
  .hero__orbit-note { position: static; transform: none; align-items: flex-start; }
}

/* ==========================================================================
   5 · FIELD — India Riverdale
   ========================================================================== */
.pdp--field .hero--field {
  max-width: none; padding-inline: 0;
  display: grid; grid-template-columns: [full-start] minmax(var(--gutter), 1fr) [content-start] minmax(0, var(--container-wide)) [content-end] minmax(var(--gutter), 1fr) [full-end];
  row-gap: var(--s-6); padding-bottom: var(--s-6);
}
.hero--field > * { grid-column: content; }
.hero--field .hero__art { grid-column: full; grid-row: 1; height: clamp(400px, 46vw, 660px); display: grid; place-items: center; overflow: hidden; border-bottom: 3px solid var(--accent); }
.hero__field { position: absolute; inset: -2px; --field-col: clamp(90px, 9vw, 128px); }
.hero--field .hero__art::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 45%, transparent 50%, rgba(0,0,0,.5) 100%); pointer-events: none; }
.hero--field .hero__bag { position: relative; z-index: 2; width: min(60%, 820px); transform: translateY(2%); }
.hero__corner { position: absolute; top: var(--s-5); z-index: 3; font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--track-label-wide); text-transform: uppercase; color: var(--cream); text-shadow: 0 1px 8px rgba(0,0,0,.9); }
.hero__corner--l { left: max(var(--gutter), calc(50vw - 720px)); }
.hero__corner--r { right: max(var(--gutter), calc(50vw - 720px)); color: var(--cream); font-weight: 700; }
.hero--field .hero__title { grid-row: 2; display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-6); flex-wrap: wrap; padding-top: var(--s-4); }
.hero--field .hero__notes { grid-row: 3; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); padding-top: var(--s-4); }
.hero--field .hero__notes .note__label { font-size: .9375rem; }
.hero--field .hero__specs { grid-row: 4; gap: var(--s-6); }

@media (max-width: 767px) {
  .hero--field .hero__title { grid-row: 1; flex-direction: column; gap: var(--s-4); padding-top: var(--s-6); }
  .hero--field .hero__ar { justify-self: end; align-self: flex-end; }
  .hero--field .hero__art { grid-row: 2; height: 96vw; }
  .hero--field .hero__bag { width: 94%; }
  .hero--field .hero__notes { grid-template-columns: 1fr; gap: var(--s-4); }
  .hero__corner { top: var(--s-4); }
}

/* ==========================================================================
   Default (matcha, drinkware, Gazette, gift cards)
   ========================================================================== */
/* One block for this hero, because there used to be two. A second "calmer proportions" block later
   in the file re-set .hero__art's order and the stage ratio, and being later it won — which is why
   the phone layout never actually reordered and the price stayed above the photograph. */
.hero--default { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); gap: var(--s-8); padding-block: var(--s-7); align-items: start; }
.hero--default .hero__art { order: 0; max-width: 460px; justify-self: end; display: grid; gap: var(--s-4); align-content: start; }
/* Fixed stage: the page height no longer grows with the number of photos, so the purchase row
   below the hero stays where it is regardless of the product.
   The fit is `contain`, not `cover`: these products are photographed whole against a ground, and a
   square crop of a landscape shot — the Gazette especially — cut the thing being sold. */
.hero__stage { aspect-ratio: 4 / 5; background: var(--panel); border-radius: 4px; overflow: hidden; }
.hero__photo { width: 100%; height: 100%; object-fit: contain; padding: var(--s-5); display: block; }
.hero__thumbs { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.hero__thumb {
  width: 72px; height: 72px; padding: 0; border: 0; border-radius: 4px; overflow: hidden;
  background: var(--panel); cursor: pointer; opacity: .55;
  box-shadow: inset 0 0 0 1px var(--hair); transition: opacity 200ms var(--ease), box-shadow 200ms var(--ease);
}
.hero__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__thumb:hover, .hero__thumb:focus-visible { opacity: 1; }
.hero__thumb.is-active { opacity: 1; box-shadow: inset 0 0 0 2px var(--accent); }
.hero--default .hero__title { position: sticky; top: calc(var(--header-h) + var(--s-5)); display: grid; gap: var(--s-6); }
.hero--default .t-display { font-size: clamp(2.25rem, 4.5vw, 4.25rem); }
/* On a phone the price belongs under the photograph. The buy row lives inside .hero__title so that
   on a wide screen it sits under the name in the left column; `display: contents` lets that same
   markup flatten into the single mobile column, where the photo can then be ordered between the
   name and the price. Without it the price sat above the photo. */
@media (max-width: 1023px) {
  .hero--default { grid-template-columns: 1fr; }
  .hero--default .hero__art { max-width: 380px; justify-self: start; }
}
/* On a phone the price belongs under the photograph, and the description under the price. The buy
   row lives inside .hero__title so that on a wide screen it sits under the name in the left column;
   `display: contents` lets that same markup flatten into the single mobile column, where the photo
   can then be ordered between the name and the price. */
@media (max-width: 767px) {
  .hero--default { grid-template-columns: 1fr; gap: var(--s-6); }
  .hero--default .hero__title { display: contents; }
  .hero--default .hero__art { order: 2; max-width: none; }
  .hero--default .hero__buy { order: 3; }
  .hero--default .hero__desc { order: 4; }
}

.rte { font-size: var(--fs-body-sm); line-height: 1.75; color: var(--cream); max-width: 60ch; }
.rte > * + * { margin-top: 1em; }
.rte a { color: var(--accent-text); }
.rte h2, .rte h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.1; text-transform: uppercase; margin-top: 1.6em; }
.rte ul, .rte ol { padding-left: 1.2em; }

/* ==========================================================================
   Poster foot: purchase row + brew tags + wordmark (fixed size and place)
   ========================================================================== */
.pdp__foot {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; column-gap: var(--s-7); row-gap: var(--s-5);
  padding-block: var(--s-6) var(--s-7); position: relative; z-index: 4;
}
.pdp--card .pdp__foot, .pdp--diagonal .pdp__foot { border-top: 0; }
.purchase { display: grid; gap: var(--s-4); }
.purchase__form { display: grid; gap: var(--s-4); }
/* Add to cart sits on its own line, not beside the price. The price tag carries the variant's
   label — "Signature", "Matcha", "50G" — and those are different widths, so on the old single flex
   row the button slid sideways every time the variant changed. Its own row means its position never
   depends on the length of anything next to it. */
.purchase__row {
  display: grid; gap: var(--s-3);
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}
.purchase__row .price-tag { grid-column: 1; grid-row: 1; }
.purchase__row .qty { grid-column: 2; grid-row: 1; }
.purchase__add { grid-column: 1 / -1; grid-row: 2; justify-self: start; }

/* On a phone the large price tag does not fit beside the quantity stepper. Measured on a 375
   viewport: the pill rendered 197px wide while its own content needed 324px, and because the tag is
   `white-space: nowrap` and `flex-shrink: 0` the overflow was simply clipped — which is what looked
   like the price running into Add to cart.

   Below 560px the row becomes one column so the price gets the full width, the tag drops to smaller
   metrics, and it is allowed to wrap as a last resort so nothing can ever be cut off again whatever
   a variant is called. Add to cart goes full width, which is the right target size there anyway. */
@media (max-width: 560px) {
  .purchase__row { grid-template-columns: minmax(0, 1fr); }
  .purchase__row .price-tag { grid-column: 1; grid-row: 1; justify-self: start; }
  .purchase__row .qty { grid-column: 1; grid-row: 2; justify-self: start; }
  .purchase__add { grid-column: 1; grid-row: 3; justify-self: stretch; }

  .purchase__row .price-tag--lg {
    --pt-h: auto; --pt-num: 1.5rem; --pt-small: .8125rem; --pt-gap: 12px;
    min-height: 46px; padding: 8px 16px 8px 14px;
    flex-wrap: wrap; row-gap: 2px; white-space: normal;
  }
  .purchase__row .price-tag--lg .price-tag__row { flex-wrap: wrap; min-width: 0; }
  .purchase__row .price-tag--lg .price-tag__amount { min-width: 0; }
}
.purchase__add { min-width: 180px; }
.purchase__express { max-width: 420px; }
.purchase__notify { display: grid; gap: var(--s-2); max-width: 460px; }
.variant-picker { border: 0; padding: 0; margin: 0; display: grid; gap: var(--s-3); }
.variant-pill { position: relative; }
.variant-pill input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.variant-pill span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px var(--hair); font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-label-md); letter-spacing: .14em; text-transform: uppercase; }
.variant-pill input:checked + span { background: var(--accent); color: var(--on-accent); box-shadow: none; }
.variant-pill input:focus-visible + span { outline: 2px solid var(--cream); outline-offset: 2px; }
.variant-pill.is-unavailable span { opacity: .5; text-decoration: line-through; }
.pdp__brew { align-self: end; padding-bottom: 4px; }
.pdp__wordmark { display: block; width: 150px; color: var(--accent); justify-self: end; align-self: end; }
.pdp__wordmark .wordmark { width: 150px; height: auto; }
@media (max-width: 1023px) {
  .pdp__foot { grid-template-columns: minmax(0, 1fr) auto; }
  .pdp__brew { grid-column: 1 / -1; grid-row: 2; }
  .pdp__wordmark { grid-column: 2; grid-row: 1; }
}
@media (max-width: 767px) {
  .pdp__foot { grid-template-columns: 1fr; }
  .pdp__wordmark { grid-column: 1; grid-row: 3; }
  .purchase__add { flex: 1 1 100%; }
}

/* ==========================================================================
   Details block (same on every coffee)
   ========================================================================== */
.pdp__details { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-5); row-gap: var(--s-7); padding-block: var(--s-8) var(--s-9); border-top: var(--hairline); }
.pdp__block { grid-column: 1 / 7; }
.pdp__block--colour, .pdp__block--arabic { grid-column: 8 / 13; display: grid; gap: var(--s-6); align-content: start; }
.pdp__block--colour { grid-row: 1; }
.pdp__block--arabic { grid-row: 2; }
.pdp__block--notes .notes-row { margin-bottom: var(--s-5); }
.pdp__block--app, .pdp__block--desc { grid-column: 1 / -1; }
.pdp__pattern { display: grid; gap: 6px; }
/* The Arabic sits on the page, not in a box. The panel and rounded corners made the name look like
   a widget dropped into the layout rather than part of the typography. */
.pdp__block--arabic .title-block__ar { width: auto; justify-self: stretch; text-align: right; }
.pdp__details .accordion[data-desktop-open] ~ .accordion[data-desktop-open] { margin-top: 0; }
@media (min-width: 768px) {
  .pdp__block--notes::before, .pdp__block--specs::before { display: block; font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--track-label-wide); text-transform: uppercase; color: var(--label); margin-bottom: var(--s-5); }
  .pdp__block--notes::before { content: "Cup profile"; }
  .pdp__block--specs::before { content: "Specification"; }
}
@media (max-width: 767px) {
  .pdp__details { display: block; padding-block: 0 var(--s-8); border-top: 0; }
  .pdp__block--colour, .pdp__block--arabic { margin-top: var(--s-7); }
}

/* ==========================================================================
   Sticky purchase bar — mobile only (§6.2)
   ========================================================================== */
.sticky-atc { display: none; }
@media (max-width: 767px) {
  .sticky-atc {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky-atc);
    align-items: center; justify-content: space-between; gap: var(--s-3);
    padding: var(--s-3) var(--gutter) max(var(--s-3), env(safe-area-inset-bottom));
    background: var(--night); border-top: var(--hairline);
    transform: translateY(110%); transition: transform 280ms var(--ease);
  }
  .sticky-atc.is-visible { transform: none; }
  .sticky-atc .btn { flex: 1; }
}

/* ==========================================================================
   Related in line
   ========================================================================== */
.related { border-top: var(--hairline); }
.related__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-6); }
.related__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: var(--s-5); }
@media (max-width: 767px) { .related__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Merch product (§6.7) on --bone
   ========================================================================== */
.merch-pdp { padding-top: var(--s-7); }
.merch-pdp__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s-8); align-items: start; padding-bottom: var(--s-9); }
.merch-pdp__hero { width: 100%; box-shadow: 0 30px 60px rgba(24,21,19,.18); }
.merch-pdp__info { position: sticky; top: calc(var(--header-h) + var(--s-6)); display: grid; gap: var(--s-5); align-content: start; }
.merch-pdp__title { color: var(--ink); font-size: clamp(2.5rem, 5vw, 4.75rem); }
.merch-pdp__plates { background: var(--bone); padding-block: var(--s-8) var(--s-9); border-top: 1px solid #CFC6B3; }
.on-light .qty { background: #fff; border-color: #CFC6B3; }
.on-light .qty__btn, .on-light .qty__input { color: var(--ink); }
.on-light .variant-pill span { box-shadow: inset 0 0 0 1px #BDB29C; color: var(--ink); }
.on-light .accordion > summary, .on-light .accordion { border-color: #CFC6B3; }
.on-light .rte { color: var(--ink); }
.on-light .form-status--error { color: #9E1B20; }
@media (max-width: 1023px) { .merch-pdp__grid { grid-template-columns: 1fr; } .merch-pdp__info { position: static; } }

/* ---------- Finca El Rubí: only the lathe work turns ----------
   The strap is not what moves here. The rosette is. */
@keyframes silaf-lathe-turn { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.pdp--tasting-card .hero__lathe { animation: silaf-lathe-turn 90s linear infinite; transform-origin: 50% 50%; }
@media (prefers-reduced-motion: reduce) { .pdp--tasting-card .hero__lathe { animation: none; } }

.pdp__foot--bare { padding-top: 0; }

/* ---------- Sookoo XII: the sun disc is playable ---------- */
.hero__disc-wrap {
  --disc-angle: 0deg;
  display: block; position: absolute; inset: 0; z-index: 1;
  cursor: grab; touch-action: pan-y;
}
.hero__disc-wrap:active { cursor: grabbing; }
.hero__disc-wrap:focus-visible { outline: 2px solid var(--cream); outline-offset: 6px; border-radius: 50%; }
.hero__disc-wrap .hero__disc { transform: rotate(var(--disc-angle)); transform-origin: 50% 50%; will-change: transform; }
@media (prefers-reduced-motion: reduce) { .hero__disc-wrap { cursor: default; } }

/* ==========================================================================
   Ceremony: the matcha product page
   Cream, like the matcha section it came from, and for the same reason: the brand's green reads
   6.9:1 on cream and 1.7:1 on night, so a dark matcha page forces an invented accent.
   ========================================================================== */
@keyframes silaf-seal { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.pdp--ceremony { --accent: var(--accent-matcha); }
.ceremony {
  position: relative; overflow: hidden;
  padding-block: var(--s-9);
  background: var(--cream); color: var(--ink);
}
.ceremony::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background-image:
    repeating-linear-gradient(103deg, rgba(62, 83, 34, .07) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(17deg, rgba(178, 34, 40, .05) 0 1px, transparent 1px 9px);
}
.ceremony__blob { display: none; }
.ceremony__word {
  position: absolute; z-index: 0; pointer-events: none; user-select: none;
  right: -3%; top: 6%;
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(5rem, 16vw, 13rem); line-height: 1; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 3px var(--accent-matcha); opacity: .16;
}
.ceremony__inner { position: relative; z-index: 1; display: grid; gap: var(--s-7); align-items: center; }
@media (min-width: 1024px) {
  .ceremony__inner { grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: var(--s-9); }
}
.ceremony__art { position: relative; display: grid; gap: var(--s-4); justify-items: center; }
.ceremony__card {
  position: relative; display: grid; place-items: center;
  width: 100%; max-width: 520px; aspect-ratio: 1 / 1;
  background: #FFFFFF; border: 3px solid var(--ink); border-radius: 2px;
  box-shadow: 14px 14px 0 var(--accent-matcha);
  transform: rotate(-2.5deg);
  transition: transform 420ms var(--ease), box-shadow 420ms var(--ease);
}
.ceremony:hover .ceremony__card { transform: rotate(0deg); box-shadow: 18px 18px 0 var(--accent-red); }
.ceremony__tin { width: 78%; height: 78%; object-fit: contain; display: block; }
.ceremony__seal {
  position: absolute; z-index: 2; right: 2%; top: -4%;
  width: clamp(104px, 12vw, 164px); aspect-ratio: 1;
  color: var(--accent-matcha);
  animation: silaf-seal 26s linear infinite;
}
.ceremony__seal svg { width: 100%; height: 100%; display: block; overflow: visible; }
.ceremony__seal text {
  font-family: var(--font-mono); font-size: 15px; letter-spacing: .24em;
  fill: currentColor; text-transform: uppercase;
}
.ceremony__thumbs { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; }
.ceremony__thumb {
  width: 64px; height: 64px; padding: 0; border: 2px solid var(--ink); border-radius: 2px;
  overflow: hidden; background: #FFFFFF; cursor: pointer; opacity: .6;
  transition: opacity 200ms var(--ease), transform 200ms var(--ease);
}
.ceremony__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ceremony__thumb:hover, .ceremony__thumb:focus-visible, .ceremony__thumb.is-active { opacity: 1; transform: translateY(-3px); }
.ceremony__text { display: grid; gap: var(--s-5); justify-items: start; }
.ceremony__text .title-block__name, .ceremony__text .t-display { color: var(--ink); }
.ceremony__specs { display: grid; gap: 0; width: 100%; max-width: 420px; margin: 0; }
.ceremony__specs > div { display: flex; justify-content: space-between; gap: var(--s-4); padding-block: 10px; border-bottom: 1px solid rgba(24,21,19,.16); }
.ceremony__specs dd { margin: 0; font-family: var(--font-mono); font-size: var(--fs-mono-body); color: var(--ink); }
.ceremony__desc { color: #4A423A; }
.ceremony .btn { background: var(--accent-matcha); color: var(--cream); border-color: var(--ink); }

@media (max-width: 1023px) {
  .ceremony__word { font-size: clamp(3.5rem, 20vw, 7rem); top: 2%; }
  .ceremony__seal { width: clamp(84px, 18vw, 120px); }
}
@media (prefers-reduced-motion: reduce) {
  .ceremony__seal { animation: none; }
  .ceremony:hover .ceremony__card { transform: rotate(-2.5deg); }
}

/* The drop poster stays the lead image; the real photographs of the garment sit under it as a row
   of thumbnails and swap into the frame. silaf.js already drives [data-gallery-thumb] against
   [data-gallery-stage], so this needs no new script. */
.merch-pdp__stage { display: block; }
.merch-pdp__shots { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-4); }
.merch-pdp__shot {
  width: 84px; height: 84px; padding: 0; border: 0; border-radius: 4px; overflow: hidden;
  background: #FFF; cursor: pointer; opacity: .55;
  box-shadow: inset 0 0 0 1px rgba(24,21,19,.18);
  transition: opacity 200ms var(--ease), box-shadow 200ms var(--ease), transform 200ms var(--ease);
}
.merch-pdp__shot img { width: 100%; height: 100%; object-fit: contain; display: block; }
.merch-pdp__shot:hover, .merch-pdp__shot:focus-visible { opacity: 1; transform: translateY(-2px); }
.merch-pdp__shot.is-active { opacity: 1; box-shadow: inset 0 0 0 2px var(--accent-red); }

/* ==========================================================================
   Vessel: the steel cup
   Square and still. An earlier version put the cup in a perspective scene that tipped towards the
   pointer with a specular sweep; it was removed.
   ========================================================================== */
.pdp--vessel { --accent: var(--accent-steel); }
.vessel { position: relative; overflow: hidden; padding-block: var(--s-9); }
.vessel__rule {
  position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent-steel), transparent);
  opacity: .5;
}
.vessel__inner { display: grid; gap: var(--s-8); align-items: center; }
@media (min-width: 1024px) { .vessel__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--s-9); } }

.vessel__stage { display: grid; gap: var(--s-5); justify-items: center; width: 100%; }
.vessel__card {
  position: relative; display: grid; place-items: center;
  width: 100%; max-width: 560px; aspect-ratio: 1 / 1;
  background: var(--panel); border-radius: 4px;
}
.vessel__cup {
  width: 82%; height: 82%; object-fit: contain; display: block;
  filter: drop-shadow(0 22px 26px rgba(0, 0, 0, .5));
}
.vessel__thumbs { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; }
.vessel__thumb {
  width: 64px; height: 64px; padding: 0; border: 0; border-radius: 4px; overflow: hidden;
  background: var(--panel); cursor: pointer; opacity: .55;
  box-shadow: inset 0 0 0 1px var(--hair);
  transition: opacity 200ms var(--ease), box-shadow 200ms var(--ease), transform 200ms var(--ease);
}
.vessel__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.vessel__thumb:hover, .vessel__thumb:focus-visible { opacity: 1; transform: translateY(-2px); }
.vessel__thumb.is-active { opacity: 1; box-shadow: inset 0 0 0 2px var(--accent-steel); }

.vessel__text { display: grid; gap: var(--s-5); justify-items: start; }
.vessel__finishes { display: grid; gap: var(--s-3); width: 100%; }
.vessel__finish-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.vessel__finish {
  display: inline-flex; align-items: baseline; gap: 10px; padding: 9px 16px;
  border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px var(--hair);
  font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--track-label);
  text-transform: uppercase; text-decoration: none; color: var(--cream);
  transition: box-shadow 200ms var(--ease), color 200ms var(--ease);
}
.vessel__finish:hover { box-shadow: inset 0 0 0 1px var(--accent-steel); color: var(--accent-text); }
.vessel__finish-price { color: var(--dim); }
.vessel__finish.is-out { opacity: .5; }
.vessel__buy { width: 100%; }
.vessel__desc { color: var(--cream); opacity: .84; }
}

/* ==========================================================================
   Broadsheet: the Gazette
   It used to fall through to the plain default hero, which said nothing about the thing being a
   printed newspaper. This sets it as a front page: a masthead rule with the dateline in it, the
   cover held as paper with a leaf behind it and a fold down the gutter, and a Read button beside
   Add to cart for anyone who only wants to read the issue.
   ========================================================================== */
.broad { position: relative; padding-block: var(--s-7) var(--s-9); }
.broad__masthead { display: grid; gap: var(--s-3); justify-items: center; margin-bottom: var(--s-7); }
.broad__rule { display: block; width: 100%; height: 2px; background: var(--cream); opacity: .28; }
.broad__dateline { color: var(--accent-text); text-align: center; }
.broad__dateline span { color: var(--dim); }

.broad__inner { display: grid; gap: var(--s-8); align-items: start; }
@media (min-width: 1024px) { .broad__inner { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: var(--s-9); } }

.broad__paper { position: relative; display: grid; gap: var(--s-5); justify-items: center; }
/* The leaf behind: a second sheet, offset, so the cover reads as a stack of paper. */
.broad__leaf {
  position: absolute; z-index: 0; inset: 0 auto auto 0;
  width: 100%; max-width: 560px; aspect-ratio: 3 / 4;
  background: var(--panel);
  transform: rotate(-3deg) translate(10px, 12px);
  box-shadow: 0 18px 34px rgba(0, 0, 0, .4);
}
.broad__cover {
  position: relative; z-index: 1;
  width: 100%; max-width: 560px; aspect-ratio: 3 / 4;
  background: var(--panel); overflow: hidden;
  box-shadow: 0 26px 48px rgba(0, 0, 0, .55);
  transform: rotate(-1.2deg);
  transition: transform 460ms var(--ease), box-shadow 460ms var(--ease);
}
.broad__paper:hover .broad__cover { transform: rotate(0deg) translateY(-6px); box-shadow: 0 34px 60px rgba(0, 0, 0, .62); }
.broad__paper:hover .broad__leaf { transform: rotate(-5deg) translate(16px, 18px); }
.broad__leaf { transition: transform 460ms var(--ease); }
.broad__img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The fold: a soft crease down the middle, the way a broadsheet is folded to be carried. */
.broad__fold {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent 46%, rgba(0,0,0,.30) 50%, transparent 54%);
  mix-blend-mode: multiply;
}
.broad__thumbs { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; }
.broad__thumb {
  width: 64px; height: 64px; padding: 0; border: 0; border-radius: 3px; overflow: hidden;
  background: var(--panel); cursor: pointer; opacity: .55;
  box-shadow: inset 0 0 0 1px var(--hair);
  transition: opacity 200ms var(--ease), box-shadow 200ms var(--ease), transform 200ms var(--ease);
}
.broad__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.broad__thumb:hover, .broad__thumb:focus-visible { opacity: 1; transform: translateY(-2px); }
.broad__thumb.is-active { opacity: 1; box-shadow: inset 0 0 0 2px var(--accent); }

.broad__text { display: grid; gap: var(--s-5); justify-items: start; }
.broad__specs { display: grid; gap: 0; width: 100%; max-width: 420px; margin: 0; }
.broad__specs > div { display: flex; justify-content: space-between; gap: var(--s-4); padding-block: 10px; border-bottom: 1px solid var(--hair); }
.broad__specs dd { margin: 0; font-family: var(--font-mono); font-size: var(--fs-mono-body); color: var(--cream); }
.broad__buy { width: 100%; }
.broad__read { align-self: start; }
.broad__desc { color: var(--cream); opacity: .84; }

@media (max-width: 767px) {
  .broad__leaf { display: none; }
  .broad__cover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .broad__cover, .broad__leaf { transition: none; }
  .broad__paper:hover .broad__cover, .broad__paper:hover .broad__leaf { transform: rotate(0deg); }
}

/* The default hero's own furniture: a rule to open on, and a figures plate so a product without a
   poster still has something to read beside its name and price. */
.hero--default .hero__rule {
  grid-column: 1 / -1;
  display: block; height: 2px; margin-bottom: var(--s-5);
  background: linear-gradient(90deg, var(--accent), transparent);
  opacity: .55;
}
.hero__specs { display: grid; gap: 0; width: 100%; max-width: 420px; margin: 0; }
.hero__specs > div { display: flex; justify-content: space-between; gap: var(--s-4); padding-block: 9px; border-bottom: 1px solid var(--hair); }
.hero__specs dd { margin: 0; font-family: var(--font-mono); font-size: var(--fs-mono-body); color: var(--cream); }
@media (max-width: 767px) { .hero--default .hero__specs { order: 5; } }

/* The chasen on the matcha page. It stands at an angle and whisks — rocking about the top of the
   handle, which is where a hand would hold it — rather than spinning like a disc. */
@keyframes silaf-whisking {
  0%, 100% { transform: rotate(-19deg); }
  50%      { transform: rotate(-7deg); }
}
.ceremony__chasen-wrap {
  position: absolute; z-index: 0;
  left: -6%; top: 50%; translate: 0 -50%;
  width: min(46%, 300px); aspect-ratio: 220 / 340;
  color: var(--accent-matcha); opacity: .55;
  pointer-events: none;
}
.ceremony__chasen {
  width: 100%; height: 100%; display: block;
  transform-origin: 50% 12%;            /* the top of the handle */
  animation: silaf-whisking 4.5s ease-in-out infinite;
  will-change: transform;
}

.ceremony__badge { position: absolute; z-index: 3; right: 2%; bottom: 4%; width: clamp(88px, 11vw, 132px); }
.ceremony__stickers { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.ceremony__sticker { color: var(--ink); }

@media (max-width: 1023px) {
  .ceremony__chasen-wrap { width: min(38%, 200px); left: -8%; opacity: .4; }
}
@media (prefers-reduced-motion: reduce) {
  .ceremony__chasen { animation: none; transform: rotate(-19deg); }
}
}

/* The measuring plate around the cup. It sits behind the card and drifts a fraction, so the page
   has movement without the product itself being animated. */
@keyframes silaf-gauge-breathe {
  0%, 100% { transform: scale(1); opacity: .42; }
  50%      { transform: scale(1.025); opacity: .6; }
}
.vessel__stage { position: relative; }
.vessel__gauge {
  position: absolute; z-index: 0; pointer-events: none;
  left: 50%; top: 0; translate: -50% 0;
  width: min(108%, 640px); aspect-ratio: 300 / 320;
  color: var(--accent-steel);
  animation: silaf-gauge-breathe 9s ease-in-out infinite;
}
.vessel__gauge svg { width: 100%; height: 100%; display: block; }
.vessel__card { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .vessel__gauge { animation: none; opacity: .5; } }

/* The drop poster stays the lead image; the real photographs of the garment sit under it as a row
   of thumbnails and swap into the frame. silaf.js already drives [data-gallery-thumb] against
   [data-gallery-stage], so this needs no new script. */
.merch-pdp__stage { display: block; }
.merch-pdp__shots { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-4); }
.merch-pdp__shot {
  width: 84px; height: 84px; padding: 0; border: 0; border-radius: 4px; overflow: hidden;
  background: #FFF; cursor: pointer; opacity: .55;
  box-shadow: inset 0 0 0 1px rgba(24,21,19,.18);
  transition: opacity 200ms var(--ease), box-shadow 200ms var(--ease), transform 200ms var(--ease);
}
.merch-pdp__shot img { width: 100%; height: 100%; object-fit: contain; display: block; }
.merch-pdp__shot:hover, .merch-pdp__shot:focus-visible { opacity: 1; transform: translateY(-2px); }
.merch-pdp__shot.is-active { opacity: 1; box-shadow: inset 0 0 0 2px var(--accent-red); }

/* ---------- Sifted powder on the matcha page ----------
   Matcha goes through a sieve before it is whisked. Grains drift down across the panel, each with
   its own size, speed, sideways wander and start offset — the offsets negative, so the field is
   already falling when the page opens instead of starting from an empty sky. */
@keyframes silaf-sift {
  0%   { transform: translate3d(0, -12%, 0); opacity: 0; }
  12%  { opacity: var(--o); }
  88%  { opacity: var(--o); }
  100% { transform: translate3d(var(--drift), 108%, 0); opacity: 0; }
}
.ceremony__powder { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.ceremony__powder span {
  position: absolute; top: 0; left: var(--x);
  width: var(--w); height: var(--w); border-radius: 50%;
  background: var(--accent-matcha);
  opacity: 0;
  animation: silaf-sift var(--t) linear var(--delay) infinite;
  will-change: transform, opacity;
}
/* The card sits above the powder, so grains fall behind the tin rather than over it. */
.ceremony__card { position: relative; z-index: 1; }
.ceremony__seal { z-index: 3; }

@media (prefers-reduced-motion: reduce) { .ceremony__powder { display: none; } }

/* The card breathes rather than sitting dead still, and its hard shadow moves to strap red as you
   approach it — the same red the rest of the site accents with, so the page still belongs here. */
@keyframes silaf-card-float {
  0%, 100% { transform: rotate(-2.5deg) translateY(0); }
  50%      { transform: rotate(-2.1deg) translateY(-7px); }
}
.ceremony__card { animation: silaf-card-float 7.5s ease-in-out infinite; }
.ceremony:hover .ceremony__card {
  animation-play-state: paused;
  transform: rotate(0deg) translateY(-4px);
  box-shadow: 18px 18px 0 var(--accent-red);
}
/* The hatched word drifts across, so the ground is never quite static either. */
@keyframes silaf-word-creep { from { background-position: 0 0; } to { background-position: 180px 0; } }
.ceremony__word {
  background-image: repeating-linear-gradient(28deg, var(--accent-matcha) 0 3px, transparent 3px 11px);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: silaf-word-creep 22s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .ceremony__card { animation: none; }
  .ceremony__word { animation: none; }
}