/* POLYMATH — feature sections: timeline, product anatomy, routine, ingredient glossary and recipe cards. */

/* ---------- Timeline ---------- */
pm-timeline { display: block; position: relative; }
.pm-tl__line { position: absolute; top: 0; bottom: 0; left: 1.1rem; width: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.pm-tl__fill { position: absolute; inset: 0; background: var(--accent); transform-origin: top; transform: scaleY(var(--p, 1)); }
.js-motion pm-timeline .pm-tl__fill { transform: scaleY(var(--p, 0)); }
.pm-tl__list { display: grid; gap: clamp(2.5rem, 6vw, 5rem); padding: 0; margin: 0; list-style: none; }
.pm-tl__item { position: relative; display: grid; gap: 1rem; padding-left: 3.25rem; }
.pm-tl__dot { position: absolute; left: .55rem; top: .4rem; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--bg); border: 2px solid var(--line); transition: border-color .5s, background-color .5s, transform .6s var(--ease-back); }
.pm-tl__item.is-passed .pm-tl__dot, .no-js .pm-tl__dot { border-color: var(--accent); background: var(--accent); transform: scale(1.15); }
.pm-tl__year { font-family: var(--font-accent); font-style: var(--accent-style); font-weight: var(--accent-weight); font-size: calc(clamp(2.6rem, 6vw, 5.5rem) * var(--heading-scale)); line-height: .9; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.pm-tl__card { display: grid; gap: .8rem; }
.pm-tl__card .pm-media { aspect-ratio: 4 / 3; max-width: 34rem; }
.pm-tl__card .rte { color: var(--fg-muted); max-width: 34rem; }
@media (min-width: 990px) {
  .pm-tl__line { left: 50%; margin-left: -1px; }
  .pm-tl__item { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 clamp(3rem, 7vw, 7rem); padding-left: 0; align-items: center; }
  .pm-tl__dot { left: 50%; margin-left: -.6rem; top: 50%; margin-top: -.6rem; }
  .pm-tl__year { text-align: right; }
  .pm-tl__item:nth-child(even) .pm-tl__year { order: 2; text-align: left; }
  .pm-tl__item:nth-child(even) .pm-tl__card { justify-items: end; text-align: right; }
}

/* ---------- Product anatomy ---------- */
pm-anatomy { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
@media (min-width: 990px) { pm-anatomy { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } }
.pm-anat__stage { position: relative; aspect-ratio: 1; border-radius: var(--radius-img); overflow: hidden; background: var(--surface); }
.pm-anat__stage > .pm-media { position: absolute; inset: 0; border-radius: 0; }
.pm-anat__dot { position: absolute; left: var(--x); top: var(--y); z-index: 2; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; margin: -1.25rem 0 0 -1.25rem; border-radius: 50%; background: var(--bg); color: var(--fg); font-size: var(--t-xs); font-weight: 700; box-shadow: 0 0 0 2px var(--fg), 0 6px 18px rgb(0 0 0 / .3); transition: transform .5s var(--ease-back), background-color .3s, color .3s; }
.pm-anat__dot::before { content: ''; position: absolute; inset: -7px; border-radius: 50%; border: 1.5px solid var(--accent); opacity: 0; transform: scale(.7); transition: opacity .3s, transform .5s var(--ease); }
.pm-anat__dot.is-active { transform: scale(1.18); background: var(--accent); color: var(--on-accent); }
@media (max-width: 599px) { .pm-anat__dot { width: 2rem; height: 2rem; margin: -1rem 0 0 -1rem; } }
.pm-anat__dot.is-active::before { opacity: 1; transform: none; }
.pm-anat__side { display: grid; gap: 1.5rem; }
.pm-anat__list { display: grid; gap: .25rem; padding: 0; margin: 0; list-style: none; counter-reset: anat; }
.pm-anat__item { width: 100%; display: grid; grid-template-columns: 2.25rem 1fr; gap: .9rem; align-items: start; padding: 1rem .9rem; border-radius: var(--field-radius); text-align: left; border-left: 2px solid transparent; transition: background-color .3s, border-color .3s; }
.pm-anat__item:hover, .pm-anat__item.is-active { background: var(--fg-subtle); border-left-color: var(--accent); }
.pm-anat__num { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1.5px solid currentColor; font-size: var(--t-xs); font-weight: 700; }
.pm-anat__item.is-active .pm-anat__num { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.pm-anat__item strong { display: block; font-size: var(--t-body); }
.pm-anat__item span.pm-anat__text { display: block; color: var(--fg-muted); font-size: var(--t-small); margin-top: .2rem; }

/* ---------- Routine ---------- */
.pm-routine { display: grid; gap: var(--gap); grid-template-columns: 1fr; padding: 0; margin: 0; list-style: none; position: relative; }
@media (min-width: 750px) { .pm-routine { grid-template-columns: repeat(min(var(--steps, 4), 2), minmax(0, 1fr)); } }
@media (min-width: 1100px) { .pm-routine { grid-template-columns: repeat(var(--steps, 4), minmax(0, 1fr)); } .pm-routine::before { content: ''; position: absolute; top: 1.4rem; left: 1.4rem; right: calc((100% - (var(--steps, 4) - 1) * var(--gap)) / var(--steps, 4) - 1.4rem); height: 1.5px; background: var(--line); } }
.pm-step { position: relative; display: grid; gap: .9rem; align-content: start; }
.pm-step__num { position: relative; z-index: 1; display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: var(--bg); border: 1.5px solid var(--fg); font-family: var(--font-heading); font-size: var(--t-h5); }
.pm-step__title { font-size: var(--t-h4); }
.pm-step .rte { color: var(--fg-muted); font-size: var(--t-small); }
.pm-step__product { position: relative; display: grid; grid-template-columns: 4.5rem 1fr; gap: .8rem; align-items: center; padding: .6rem; border-radius: var(--radius); background: var(--surface); font-size: var(--t-small); transition: transform .4s var(--ease); }
.pm-step__product:hover { transform: translateY(-3px); }
.pm-step__product .pm-media { aspect-ratio: 1; border-radius: calc(var(--radius) * .6); }
.pm-step__product a { font-weight: 600; text-decoration: none; }
.pm-step__product a::after { content: ''; position: absolute; inset: 0; }
.pm-routine-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem 2rem; margin-bottom: 2rem; }
@media (min-width: 750px) { .pm-routine-head { flex-wrap: nowrap; } .pm-routine-head > :first-child { flex: 1 1 36rem; } .pm-routine-head .pm-tabs { flex: none; } }
.pm-routine-head .pm-tabs { margin-bottom: 0; }
.pm-routine-media { margin-bottom: 2rem; border-radius: var(--radius-img); overflow: hidden; aspect-ratio: var(--media-ratio, 21 / 9); }
.pm-routine-media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 749px) { .pm-routine-media { aspect-ratio: 16 / 9; } }

/* ---------- Glossary ---------- */
pm-glossary { display: block; }
.pm-gloss__tools { display: grid; gap: 1rem; margin-bottom: 2rem; }
@media (min-width: 990px) { .pm-gloss__tools { grid-template-columns: minmax(0, 22rem) 1fr; align-items: center; } }
.pm-gloss__chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.pm-gloss__chips button { min-height: 2.5rem; padding: .3rem 1rem; border-radius: 999px; border: 1.5px solid var(--line); font-size: var(--t-small); transition: background-color .3s, color .3s, border-color .3s; }
.pm-gloss__chips button:hover { border-color: var(--fg); }
.pm-gloss__chips button[aria-pressed='true'] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.pm-gloss__letters { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: 1.5rem; font-family: var(--font-heading); }
.pm-gloss__letters a { display: grid; place-items: center; min-width: 2.5rem; height: 2.5rem; border-radius: var(--field-radius); text-decoration: none; font-size: var(--t-h5); transition: background-color .2s; }
.pm-gloss__letters a:hover { background: var(--fg-subtle); }
.pm-gloss__grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); padding: 0; margin: 0; list-style: none; }
.pm-gloss__more { margin: 1.5rem auto 0; display: flex; }
@media (max-width: 599px) { .pm-gloss__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; } .pm-term { padding: .85rem; } .pm-term .rte { font-size: var(--t-xs); } }
.pm-term { display: grid; gap: .5rem; align-content: start; padding: clamp(1.1rem, 2vw, 1.5rem); border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg); scroll-margin-top: calc(var(--header-h, 72px) + 1rem); transition: border-color .3s, transform .4s var(--ease); }
.pm-term:hover { border-color: var(--fg); transform: translateY(-2px); }
.pm-term__letter { font-family: var(--font-accent); font-style: var(--accent-style); font-size: var(--t-h3); line-height: 1; color: var(--accent-text); }
.pm-term h3 { font-size: var(--t-h4); }
.pm-term__aka { font-size: var(--t-xs); letter-spacing: .06em; color: var(--fg-muted); }
.pm-term .rte { font-size: var(--t-small); color: var(--fg-muted); }
.pm-term__tag { justify-self: start; padding: .15rem .6rem; border-radius: 999px; background: var(--fg-subtle); font-size: var(--t-xs); font-weight: 600; }
.pm-gloss__empty { padding: 2rem 0; color: var(--fg-muted); }
.js-motion .pm-term:not([hidden]) { animation: pm-drop .5s var(--ease) both; }

/* ---------- Recipe cards ---------- */
.pm-recipes { display: grid; gap: calc(var(--gap) * 1.4) var(--gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); padding: 0; margin: 0; list-style: none; }
.pm-recipe { position: relative; display: grid; gap: .9rem; align-content: start; padding: .7rem .7rem 1.1rem; border-radius: calc(var(--radius) + 6px); background: var(--surface); transition: transform .6s var(--ease-back), box-shadow .5s; }
.pm-recipe:hover { transform: translateY(-6px) rotate(-1deg); box-shadow: var(--shadow); }
[data-motion='playful'] .pm-recipes > li:nth-child(even) .pm-recipe:hover { transform: translateY(-6px) rotate(1deg); }
.pm-recipe__media { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; }
.pm-recipes[data-ratio='portrait'] .pm-recipe__media { aspect-ratio: 4 / 5; }
.pm-recipes[data-ratio='square'] .pm-recipe__media { aspect-ratio: 1; }
/* First recipe larger: it takes two columns and two rows on wide screens; its picture fills the extra height. */
@media (min-width: 1100px) {
  .pm-recipes[data-layout='feature'] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pm-recipes[data-layout='feature'] > li:first-child { grid-column: span 2; grid-row: span 2; }
  .pm-recipes[data-layout='feature'] > li:first-child .pm-recipe { height: 100%; display: flex; flex-direction: column; }
  .pm-recipes[data-layout='feature'] > li:first-child .pm-recipe__media { flex: 1; aspect-ratio: auto; min-height: 22rem; }
}
.pm-recipe__media img, .pm-recipe__media svg { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.pm-recipe:hover .pm-recipe__media img { transform: scale(1.06); }
.pm-recipe__stickers { position: absolute; left: .7rem; bottom: .7rem; display: flex; flex-wrap: wrap; gap: .35rem; }
.pm-recipe__sticker { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .65rem; border-radius: 999px; background: var(--bg); color: var(--fg); font-size: var(--t-xs); font-weight: 700; box-shadow: var(--shadow-sm); }
.pm-recipe__sticker svg { width: .9rem; height: .9rem; }
.pm-recipe__tag { position: absolute; top: .7rem; right: .7rem; transform: rotate(4deg); padding: .35rem .8rem; border-radius: var(--radius-btn); background: var(--accent); color: var(--on-accent); font-family: var(--font-accent); font-size: calc(1.15rem * var(--body-scale)); line-height: 1; }
.pm-recipe__body { display: grid; gap: .45rem; padding-inline: .35rem; }
.pm-recipe__title { font-size: var(--t-h4); }
.pm-recipe__title a { text-decoration: none; }
.pm-recipe__title a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.pm-recipe:has(.pm-recipe__title a:focus-visible) { outline: 2px solid currentColor; outline-offset: 4px; }
.pm-recipe__title a:focus-visible { outline: 0; }
.pm-recipe__level { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--t-xs); color: var(--fg-muted); }
.pm-recipe__level i { display: inline-flex; gap: 3px; }
.pm-recipe__level i b { width: .45rem; height: .45rem; border-radius: 50%; background: var(--line); }
.pm-recipe__level i b.on { background: var(--accent); }
.pm-recipe__made { position: relative; z-index: 2; justify-self: start; font-size: var(--t-small); }
.pm-recipe__made a { font-weight: 600; }

/* ---------- Flavour / tasting profile ---------- */
.pm-flavor-wrap { container-type: inline-size; }
.pm-flavor { display: grid; gap: 1.5rem; align-items: center; }
@container (min-width: 34rem) { .pm-flavor--radar { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
.pm-specs--profile .pm-flavor__list { border-top: 0; }
.pm-flavor--radar .pm-flavor__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 1.25rem; }
/* In a narrow column (a product buy box) the legend goes to one column so names and values never collide. */
@container (max-width: 48rem) { .pm-flavor--radar .pm-flavor__list { grid-template-columns: minmax(0, 1fr); } }
.pm-flavor--radar .pm-flavor__bar { display: none; }
.pm-flavor--radar .pm-flavor__row { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; padding-bottom: .4rem; border-bottom: 1px solid var(--line); }
@media (max-width: 599px) { .pm-flavor__radar { max-width: 17rem; } }
.pm-specs--profile .pm-flavor__radar { max-width: 20rem; }
.pm-flavor__radar { width: 100%; max-width: 26rem; height: auto; overflow: visible; margin-inline: auto; }
.pm-flavor__ring { fill: none; stroke: var(--line); stroke-width: 1; }
.pm-flavor__ring:last-of-type { stroke: color-mix(in srgb, var(--fg) 30%, transparent); }
.pm-flavor__axis { stroke: var(--line); stroke-width: 1; }
.pm-flavor__label { fill: var(--fg); font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.pm-flavor__shape polygon { fill: color-mix(in srgb, var(--accent) 38%, transparent); stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; }
.pm-flavor__shape circle { fill: var(--bg); stroke: var(--accent); stroke-width: 2.5; }
.pm-flavor__shape { transform-box: view-box; transform-origin: 160px 160px; transition: transform 1.4s var(--ease-back); }
.js-motion:not(.motion-failsafe) .pm-flavor:not(.is-in) .pm-flavor__shape { transform: scale(0) rotate(-20deg); }
.pm-flavor__list { display: grid; gap: .85rem; margin: 0; }
.pm-flavor__row { display: grid; gap: .35rem; }
.pm-flavor__row dt { font-size: var(--t-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.pm-flavor__row dd { margin: 0; display: flex; align-items: center; gap: .9rem; }
.pm-flavor__bar { position: relative; flex: 1; height: .5rem; border-radius: 1rem; background: var(--fg-subtle); overflow: hidden; }
.pm-flavor__bar span { position: absolute; inset: 0 auto 0 0; width: var(--v); border-radius: inherit; background: var(--accent); transition: width 1.1s var(--ease); transition-delay: calc(var(--i, 0) * 90ms + 200ms); }
.js-motion:not(.motion-failsafe) .pm-flavor:not(.is-in) .pm-flavor__bar span { width: 0; }
.pm-flavor__num { min-width: 3.5rem; text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; font-size: var(--t-small); }
.pm-profile-sec { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
@media (min-width: 990px) { .pm-profile-sec { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); } }
.pm-profile-sec__product { display: grid; gap: 1rem; align-content: start; }
.pm-profile-sec__product .pm-media { aspect-ratio: 4 / 5; }
/* Phones: the heading and the chart first, then the product they describe. */
@media (max-width: 989px) { .pm-profile-sec__product { order: 2; } }
.pm-profile-sec__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.pm-profile-sec__meta a { font-family: var(--font-heading); font-size: var(--t-h4); text-decoration: none; }
.pm-profile-sec__facts { display: flex; flex-wrap: wrap; gap: .5rem; }
.pm-profile-sec__facts span { padding: .3rem .8rem; border-radius: 999px; border: 1px solid var(--line); font-size: var(--t-xs); font-weight: 600; }

/* ---------- Split scroll ---------- */
pm-split-scroll { display: grid; gap: clamp(2rem, 5vw, 5rem); }
.pm-ss__media { display: none; }
.pm-ss__inline { display: block; aspect-ratio: 4 / 3; border-radius: var(--radius-img); overflow: hidden; margin-bottom: 1.25rem; }
.pm-ss__inline img, .pm-ss__inline svg { width: 100%; height: 100%; object-fit: cover; }
.pm-ss__steps { display: grid; gap: clamp(3rem, 8vw, 5rem); padding: 0; margin: 0; list-style: none; }
.pm-ss__step { display: grid; gap: 1rem; align-content: center; justify-items: start; }
.pm-ss__num { font-family: var(--font-accent); font-style: var(--accent-style); font-size: var(--t-h2); line-height: 1; color: var(--accent-text); }
.pm-ss__step .rte { color: var(--fg-muted); max-width: 32rem; }
@media (min-width: 990px) {
  .js pm-split-scroll { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: start; }
  .js pm-split-scroll[data-side='right'] .pm-ss__media { order: 2; }
  .js .pm-ss__media { display: block; position: sticky; top: calc(var(--header-h, 72px) + 1.5rem); height: calc(100svh - var(--header-h, 72px) - 3rem); border-radius: var(--radius-img); overflow: hidden; background: var(--surface); }
  .js .pm-ss__inline { display: none; }
  .js .pm-ss__steps { gap: 0; }
  .js .pm-ss__step { min-height: 78svh; padding-block: 10svh; }
  .js-motion .pm-ss__step { opacity: .28; transition: opacity .6s var(--ease); }
  .js-motion .pm-ss__step.is-active { opacity: 1; }
}
.pm-ss__img { position: absolute; inset: 0; opacity: 0; transform: scale(1.08); transition: opacity .9s var(--ease-in-out), transform 1.6s var(--ease); }
.pm-ss__img.is-active { opacity: 1; transform: none; }
.pm-ss__img img, .pm-ss__img svg { width: 100%; height: 100%; object-fit: cover; }
.pm-ss__count { position: absolute; left: 1.25rem; bottom: 1.25rem; z-index: 2; padding: .35rem .8rem; border-radius: 999px; background: var(--glass); backdrop-filter: blur(8px); font-size: var(--t-xs); font-weight: 700; letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.pm-ss__bar { position: absolute; left: 0; right: 0; top: 0; z-index: 2; height: 3px; background: color-mix(in srgb, var(--fg) 15%, transparent); }
.pm-ss__bar span { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: var(--accent); transition: width .6s var(--ease); }

/* ---------- Tiers ---------- */
pm-tiers { display: block; }
.pm-tiers__toggle { display: flex; align-items: center; justify-content: center; gap: .9rem; margin-bottom: 2.5rem; font-size: var(--t-small); font-weight: 600; }
.pm-tiers__switch { position: relative; width: 3.4rem; height: 1.9rem; border-radius: 999px; background: var(--fg); transition: background-color .3s; }
.pm-tiers__switch::after { content: ''; position: absolute; top: .25rem; left: .25rem; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--bg); transition: transform .45s var(--ease-back); }
.pm-tiers__switch[aria-checked='true'] { background: var(--accent); }
.pm-tiers__switch[aria-checked='true']::after { transform: translateX(1.5rem); background: var(--on-accent); }
.pm-tiers__note { padding: .2rem .6rem; border-radius: 999px; background: var(--fg-subtle); font-size: var(--t-xs); }
.pm-tiers { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); align-items: stretch; padding: 0; margin: 0; list-style: none; }
.pm-tier { position: relative; display: flex; flex-direction: column; gap: 1.1rem; height: 100%; padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: calc(var(--radius) + 4px); border: 1px solid var(--line); background: var(--bg); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.pm-tier:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.pm-tier[data-highlight] { border: 2px solid var(--accent); box-shadow: var(--shadow); }
@media (min-width: 990px) { .pm-tier[data-highlight] { transform: translateY(-14px); } .pm-tier[data-highlight]:hover { transform: translateY(-20px); } }
.pm-tier__badge { position: absolute; top: -.85rem; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.pm-tier__name { font-size: var(--t-h4); }
.pm-tier__desc { color: var(--fg-muted); font-size: var(--t-small); }
.pm-tier__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: .1rem .5rem; }
.pm-tier__price strong { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: calc(clamp(2.4rem, 4vw, 3.4rem) * var(--heading-scale)); line-height: 1; letter-spacing: var(--heading-tracking); font-variant-numeric: tabular-nums; }
.pm-tier__price small { color: var(--fg-muted); font-size: var(--t-small); }
.js-motion .pm-tier__price strong.is-flip { animation: pm-price-flip .5s var(--ease); }
@keyframes pm-price-flip { from { opacity: 0; transform: translateY(-40%); } }
.pm-tier__features { display: grid; gap: .65rem; padding: 1.1rem 0 0; margin: 0; list-style: none; border-top: 1px solid var(--line); font-size: var(--t-small); flex: 1; }
.pm-tier__features li { display: flex; gap: .6rem; align-items: start; }
.pm-tier__features svg { width: 1.1rem; height: 1.1rem; color: var(--accent-text); flex: none; margin-top: .15rem; }
.pm-tier .btn { width: 100%; }

/* ---------- Scent notes ---------- */
.pm-notes { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
@media (min-width: 990px) { .pm-notes { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } .pm-notes[data-side='right'] .pm-notes__media { order: 2; } }
.pm-notes__media { aspect-ratio: 4 / 5; }
.pm-notes__body { display: grid; gap: 1.75rem; }
.pm-notes__tiers { display: grid; gap: .5rem; padding: 0; margin: 0; list-style: none; }
.pm-notes__label { font-family: var(--font-body); font-size: var(--t-xs); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.pm-notes__when { font-style: italic; font-size: var(--t-small); color: var(--fg-muted); }
.pm-notes__chips { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0; list-style: none; }
.pm-notes__chips li::first-letter { text-transform: uppercase; }
.pm-notes__chips li { padding: .3rem .8rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--fg) 25%, transparent); font-size: var(--t-small); }
.pm-notes__tier { transition: opacity .5s var(--ease), transform .5s var(--ease); }
.pm-notes__tiers:has(.pm-notes__tier:hover) .pm-notes__tier:not(:hover) { opacity: .45; }
/* Pyramid: each tier is a slice of one triangle; content stays inside the slice's narrow top edge. */
.pm-notes[data-layout='pyramid'] .pm-notes__tier { --a: 10%; --b: 0%; position: relative; display: grid; gap: .6rem; justify-items: center; text-align: center; padding: 1.4rem calc(var(--a) + 1rem); min-height: 8.5rem; align-content: center; }
.pm-notes[data-layout='pyramid'] .pm-notes__tier::before { content: ''; position: absolute; inset: 0; z-index: -1; clip-path: polygon(var(--a) 0, calc(100% - var(--a)) 0, calc(100% - var(--b)) 100%, var(--b) 100%); background: color-mix(in srgb, var(--accent) var(--mix, 20%), var(--bg)); }
.pm-notes[data-layout='pyramid'] .pm-notes__tier[data-tier='top'] { --a: 30%; --b: 20%; --mix: 16%; }
.pm-notes[data-layout='pyramid'] .pm-notes__tier[data-tier='heart'] { --a: 20%; --b: 10%; --mix: 28%; }
.pm-notes[data-layout='pyramid'] .pm-notes__tier[data-tier='base'] { --a: 10%; --b: 0%; --mix: 40%; }
.pm-notes[data-layout='pyramid'] .pm-notes__tiers { isolation: isolate; }
.pm-notes[data-layout='pyramid'] .pm-notes__chips { justify-content: center; }
@media (max-width: 749px) { .pm-notes[data-layout='pyramid'] .pm-notes__tier { padding-inline: calc(var(--a) * .6 + .75rem); } .pm-notes[data-layout='pyramid'] .pm-notes__tier[data-tier='top'] { --a: 22%; --b: 14%; } .pm-notes[data-layout='pyramid'] .pm-notes__tier[data-tier='heart'] { --a: 14%; --b: 7%; } .pm-notes[data-layout='pyramid'] .pm-notes__tier[data-tier='base'] { --a: 7%; } }
.js-motion:not(.motion-failsafe) .pm-notes[data-layout='pyramid'] .pm-notes__tier[data-reveal]:not(.is-in) { opacity: 0; transform: translateY(1.5rem) scaleX(.9); }
.pm-notes[data-layout='pyramid'] .pm-notes__tier[data-reveal] { transition-delay: calc((2 - var(--t)) * 140ms); }
/* Columns: three cards read left to right like time passing. */
.pm-notes__body { container-type: inline-size; }
.pm-notes[data-layout='columns'] .pm-notes__tiers { grid-template-columns: minmax(0, 1fr); gap: var(--gap); counter-reset: tier; }
/* All tiers share one row when there is room, however many the product has, so no card is left alone. */
@container (min-width: 42rem) { .pm-notes[data-layout='columns'] .pm-notes__tiers { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } }
/* Columns need the wider share of the row next to a picture. */
@media (min-width: 990px) { .pm-notes[data-layout='columns']:has(.pm-notes__media) { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); } .pm-notes[data-layout='columns'][data-side='right']:has(.pm-notes__media) { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); } }
.pm-notes[data-layout='columns'] .pm-notes__chips li { white-space: nowrap; }
.pm-notes[data-layout='columns'] .pm-notes__tier { display: grid; gap: 1rem; align-content: start; padding: 1.5rem; border-radius: var(--radius); background: var(--surface); border-top: 3px solid color-mix(in srgb, var(--accent) calc(40% + var(--t) * 30%), transparent); counter-increment: tier; }
.pm-notes[data-layout='columns'] .pm-notes__tier-head::before { content: '0' counter(tier); display: block; margin-bottom: .6rem; font-family: var(--font-heading); font-size: var(--t-h3); line-height: 1; color: var(--accent-text); }
.pm-notes__product { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.pm-notes__name { font-family: var(--font-heading); font-size: var(--t-h4); }
.pm-notes__name a { text-decoration: none; }
.pm-notes__product .btn { margin-left: auto; }

/* ---------- Frame fit ---------- */
.pm-fit { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 990px) { .pm-fit { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }
.pm-fit__stage { display: grid; gap: clamp(1.5rem, 4vw, 3rem); padding: clamp(1.25rem, 4vw, 3rem); border-radius: calc(var(--radius) + 8px); background: var(--surface); }
.pm-fit__front, .pm-fit__side { width: 100%; height: auto; overflow: visible; }
.pm-fit__side { max-width: 88%; justify-self: center; }
.pm-fit__frame :is(rect, path) { fill: none; stroke: var(--fg); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.pm-fit__front[data-shape*='sun'] rect { fill: color-mix(in srgb, var(--fg) 20%, transparent); }
.pm-fit__dim path { fill: none; stroke: var(--accent-text); stroke-width: 2; }
.pm-fit__dim text { fill: var(--fg); font-family: var(--font-accent); font-style: var(--accent-style); font-size: 22px; font-weight: 700; }
.pm-fit__dim--accent text { fill: var(--accent-text); }
.pm-fit :is(.pm-fit__frame, .pm-fit__dim) :is(rect, path) { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.2s var(--ease); transition-delay: calc(var(--d, 0) * 180ms); }
.pm-fit .pm-fit__dim text { transition: opacity .6s var(--ease); transition-delay: calc(var(--d, 0) * 180ms + 500ms); }
.js-motion:not(.motion-failsafe) .pm-fit:not(.is-in) :is(.pm-fit__frame, .pm-fit__dim) :is(rect, path) { stroke-dashoffset: 1; }
.js-motion:not(.motion-failsafe) .pm-fit:not(.is-in) .pm-fit__dim text { opacity: 0; }
.pm-fit__info { display: grid; gap: 1.25rem; justify-items: start; }
.pm-fit__name { font-family: var(--font-heading); font-weight: var(--heading-weight); letter-spacing: var(--heading-tracking-sm); text-transform: var(--heading-case); font-size: var(--t-h3); line-height: 1.1; }
.pm-fit__name a { text-decoration: none; }
.pm-fit__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin: 0; width: 100%; }
.pm-fit__list div { padding: .9rem 1rem; border-radius: var(--radius); border: 1px solid var(--line); }
.pm-fit__list dt { font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-muted); }
.pm-fit__list dd { margin: .2rem 0 0; font-family: var(--font-accent); font-style: var(--accent-style); font-size: var(--t-h4); font-weight: 700; font-variant-numeric: tabular-nums; }
.pm-fit__tip { color: var(--fg-muted); font-size: var(--t-small); }
.js-motion .pm-fit[role='tabpanel']:not([hidden]) { animation: pm-drop .6s var(--ease); }

/* ---------- Drop calendar ---------- */
pm-drops { display: block; }
.pm-drops { display: grid; gap: 0; padding: 0; margin: 0; list-style: none; border-top: var(--divider-w, 1px) solid var(--fg); }
.pm-drop { display: grid; grid-template-columns: 5.5rem 7rem minmax(0, 1fr); gap: 1rem 1.5rem; align-items: center; padding: 1.25rem 0; border-bottom: 1px solid var(--line); transition: background-color .4s var(--ease); }
.pm-drop:hover { background: var(--fg-subtle); }
@media (min-width: 990px) { .pm-drop { grid-template-columns: 8rem 10rem minmax(0, 1fr) auto; padding: 1.5rem 1rem; } }
.pm-drop__date { display: grid; justify-items: start; line-height: 1; }
.pm-drop__day { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: calc(clamp(2.6rem, 5vw, 4.4rem) * var(--heading-scale)); letter-spacing: var(--heading-tracking); }
.pm-drop__month { font-size: var(--t-xs); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.pm-drop__time { margin-top: .35rem; font-size: var(--t-xs); color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.pm-drop__media { aspect-ratio: 1; border-radius: var(--radius-img); overflow: hidden; background: var(--surface); }
.pm-drop__media :is(img, svg) { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.pm-drop:hover .pm-drop__media :is(img, svg) { transform: scale(1.08) rotate(-4deg); }
.pm-drop__body { display: grid; gap: .3rem; }
.pm-drop__status:not(:empty) { justify-self: start; padding: .2rem .65rem; border-radius: 999px; background: var(--fg); color: var(--bg); font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.pm-drop.is-next .pm-drop__status { background: var(--accent); color: var(--on-accent); }
.pm-drop.is-next .pm-drop__day { color: var(--accent-text); }
.pm-drop__title { font-size: var(--t-h4); }
.pm-drop__colorway { color: var(--fg-muted); font-size: var(--t-small); }
.pm-drop__cta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; grid-column: 1 / -1; }
@media (min-width: 990px) { .pm-drop__cta { grid-column: auto; justify-content: flex-end; } }
.pm-drop.is-released:not(:hover) .pm-drop__date { color: var(--fg-muted); }
.pm-drop.is-released:not(:hover) .pm-drop__media { opacity: .6; filter: grayscale(.6); }
.js-motion .pm-drop.is-next .pm-drop__status { animation: pm-pulse-dot 2s ease-in-out infinite; }
@keyframes pm-pulse-dot { 50% { box-shadow: 0 0 0 .4rem color-mix(in srgb, var(--accent) 25%, transparent); } }

/* ---------- Care meters ---------- */
.pm-care { display: grid; gap: 0; margin: 0; }
.pm-care__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 0; border-bottom: 1px solid var(--line); }
.pm-care__row:first-child { border-top: 1px solid var(--line); }
.pm-care__row dt { display: flex; align-items: center; gap: .6rem; font-weight: 600; }
.pm-care__row dt svg { width: 1.25rem; height: 1.25rem; color: var(--accent-text); }
.pm-care__row dd { margin: 0; }
.pm-care__meter { display: inline-flex; gap: .3rem; }
.pm-care__pip { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--fg-subtle); color: color-mix(in srgb, var(--fg) 35%, transparent); transition: background-color .4s var(--ease), color .4s var(--ease), transform .5s var(--ease-back); transition-delay: calc(var(--i, 0) * 120ms + var(--p) * 90ms); }
.pm-care__pip svg { width: 1.05rem; height: 1.05rem; }
.pm-care__pip.is-on { background: var(--accent); color: var(--on-accent); }
.js-motion:not(.motion-failsafe) .pm-care:not(.is-in) .pm-care__pip.is-on { background: var(--fg-subtle); color: color-mix(in srgb, var(--fg) 35%, transparent); transform: scale(.6); }
.pm-care__text { font-weight: 600; text-align: right; }
.pm-care-sec { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
@media (min-width: 990px) { .pm-care-sec { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } .pm-care-sec[data-side='right'] .pm-care-sec__media { order: 2; } }
.pm-care-sec__media { aspect-ratio: 4 / 5; }
.pm-care-sec__body { display: grid; gap: 1.5rem; }
.pm-care-sec__name { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; font-family: var(--font-heading); font-size: var(--t-h4); }
.pm-care-sec__name a { text-decoration: none; }
.pm-specs--care .pm-care__pip { width: 1.7rem; height: 1.7rem; }

/* ---------- Bundle builder ---------- */
pm-bundle { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (min-width: 990px) { pm-bundle { grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem); } }
.pm-bundle__steps { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr)); padding: 0; margin: 0; list-style: none; }
.pm-bundle__step { padding: clamp(1rem, 2vw, 1.4rem); border-radius: calc(var(--radius) + 4px); border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 55%, transparent); }
.pm-bundle__step fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.pm-bundle__legend { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; font-family: var(--font-heading); font-weight: var(--heading-weight); text-transform: var(--heading-case); font-size: var(--t-h4); }
.pm-bundle__num { font-family: var(--font-accent); font-style: var(--accent-style); font-size: var(--t-small); color: var(--accent-text); letter-spacing: .08em; }
.pm-bundle__choices { display: grid; gap: .6rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pm-bundle__choice { position: relative; display: block; cursor: pointer; }
.pm-bundle__choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pm-bundle__card { display: grid; gap: .45rem; height: 100%; padding: .6rem .6rem .85rem; border-radius: var(--radius); border: 1.5px solid var(--line); background: var(--surface); transition: border-color .3s, transform .4s var(--ease), box-shadow .4s var(--ease); }
.pm-bundle__choice:hover .pm-bundle__card { transform: translateY(-3px); }
.pm-bundle__choice input:checked + .pm-bundle__card { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent), 0 14px 30px -18px color-mix(in srgb, var(--accent) 80%, transparent); }
.pm-bundle__choice input:focus-visible + .pm-bundle__card { outline: 2px solid var(--fg); outline-offset: 3px; }
.pm-bundle__choice input:disabled + .pm-bundle__card { opacity: .55; cursor: not-allowed; }
.pm-bundle__media { display: block; aspect-ratio: 1; border-radius: calc(var(--radius) * .7); overflow: hidden; background: var(--bg); }
.pm-bundle__media :is(img, svg) { width: 100%; height: 100%; object-fit: cover; }
.pm-bundle__name { font-size: var(--t-small); font-weight: 600; }
.pm-bundle__price { font-size: var(--t-small); color: var(--fg-muted); font-variant-numeric: tabular-nums; }
/* A lone last choice (with a picture) takes the whole row, wider and shorter, so no cell stays empty. */
.pm-bundle__choices > .pm-bundle__choice:last-child:nth-child(odd):not(:only-child):not(.pm-bundle__choice--skip) { grid-column: 1 / -1; }
.pm-bundle__choices > .pm-bundle__choice:last-child:nth-child(odd):not(:only-child):not(.pm-bundle__choice--skip) .pm-bundle__media { aspect-ratio: 2 / 1; }
.pm-bundle__choice--skip .pm-bundle__card { place-items: center; min-height: 6rem; border-style: dashed; background: transparent; }
.pm-bundle__summary { position: sticky; top: calc(var(--header-h, 72px) + 1rem); display: grid; gap: 1rem; padding: 1.5rem; border-radius: calc(var(--radius) + 4px); background: var(--surface); border: 1px solid var(--line); }
.pm-bundle__summary-title { font-size: var(--t-h4); }
.pm-bundle__slots { display: flex; gap: .5rem; padding: 0; margin: 0; list-style: none; }
.pm-bundle__slots li { position: relative; flex: 1 1 0; max-width: 5rem; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; border-radius: calc(var(--radius) * .7); border: 1.5px dashed color-mix(in srgb, var(--fg) 30%, transparent); background: var(--bg); color: var(--fg-muted); font-size: var(--t-xs); font-weight: 700; font-variant-numeric: tabular-nums; }
.pm-bundle__slots li.is-filled { border: 1.5px solid var(--accent); }
.pm-bundle__slots :is(img, svg) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.js-motion .pm-bundle__slots li.is-filled { animation: pm-slot .5s var(--ease-back); }
@keyframes pm-slot { from { transform: scale(.82); opacity: .4; } }
.pm-bundle__list { display: grid; gap: .5rem; padding: 0; margin: 0; list-style: none; font-size: var(--t-small); }
.pm-bundle__list li { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: .5rem; border-bottom: 1px dashed var(--line); }
.js-motion .pm-bundle__list li { animation: pm-drop .4s var(--ease); }
.pm-bundle__total { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; }
.pm-bundle__total strong { font-family: var(--font-heading); font-size: var(--t-h3); font-variant-numeric: tabular-nums; }
.pm-bundle__add { width: 100%; }
.pm-bundle__status:empty { display: none; }
.pm-bundle__status, .pm-bundle__nojs, .pm-bundle__note { font-size: var(--t-small); color: var(--fg-muted); }

/* ---------- Name and number ---------- */
.pm-perso-sec { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
@media (min-width: 990px) { .pm-perso-sec { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.pm-perso-sec__stage { display: grid; place-items: center; padding: clamp(1.5rem, 5vw, 4rem); border-radius: var(--radius-img); background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--fg) 12%, var(--surface)), var(--surface) 70%); }
.pm-perso-sec__body { display: grid; gap: 1.25rem; }
.pm-perso-sec__name { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .5rem 1rem; font-family: var(--font-heading); font-size: var(--t-h4); text-transform: var(--heading-case); }
.pm-perso-sec__name a { text-decoration: none; }
.pm-perso__shirt { width: min(100%, 26rem); }
.pm-perso__shirt svg { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 24px 30px rgb(0 0 0 / .25)); }
.js-motion .pm-perso__shirt svg { animation: pm-shirt 7s ease-in-out infinite; }
@keyframes pm-shirt { 50% { transform: translateY(-10px) rotate(-1deg); } }
.pm-perso__name { font-family: var(--font-heading); font-weight: 700; font-size: 44px; letter-spacing: .06em; }
.pm-perso__number { font-family: var(--font-heading); font-weight: 700; font-size: 170px; letter-spacing: -.02em; }
.pm-perso__fields { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: .75rem 1rem; }
.pm-perso__fields .input { text-transform: uppercase; letter-spacing: .06em; }
.pm-perso__hint { grid-column: 1 / -1; font-size: var(--t-xs); color: var(--fg-muted); }
.pm-perso--block { display: grid; gap: .9rem; padding: 1.1rem; border-radius: var(--radius); border: 1px solid var(--line); }
.pm-perso--block .pm-perso__shirt { width: min(100%, 13rem); justify-self: center; }

/* ---------- Trail profile ---------- */
pm-trail { display: grid; gap: 1.5rem; }
.pm-trail__stats { display: flex; flex-wrap: wrap; gap: 1rem 3rem; margin: 0; }
.pm-trail__stats dt { font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-muted); }
.pm-trail__stats dd { margin: .2rem 0 0; font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: calc(clamp(1.8rem, 3.5vw, 2.8rem) * var(--heading-scale)); line-height: 1; font-variant-numeric: tabular-nums; }
.pm-trail__chart { position: relative; height: clamp(11rem, 29vw, 26rem); }
.pm-trail__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pm-trail__grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 4 6; vector-effect: non-scaling-stroke; }
.pm-trail__stop-top { stop-color: var(--accent); stop-opacity: .34; }
.pm-trail__stop-bottom { stop-color: var(--accent); stop-opacity: .02; }
/* Heights sit in a gutter left of the plot, level with their grid lines, so pins never cover them. */
pm-trail { --trail-gutter: 3.9rem; }
@media (max-width: 599px) { pm-trail { --trail-gutter: 3.1rem; } }
.pm-trail__chart, .pm-trail__axis { margin-left: var(--trail-gutter); }
.pm-trail__levels span { position: absolute; right: 100%; top: var(--y); width: var(--trail-gutter); padding-right: .6rem; transform: translateY(-50%); text-align: right; font-size: var(--t-xs); line-height: 1; color: var(--fg-muted); font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; }
@media (max-width: 599px) { .pm-trail__levels span { font-size: .68rem; } }
.pm-trail__line { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.pm-trail__svg { clip-path: inset(0 0 0 0); transition: clip-path 2.2s var(--ease-in-out); }
.js-motion:not(.motion-failsafe) .pm-trail:not(.is-in) .pm-trail__svg { clip-path: inset(0 100% 0 0); }
.pm-trail__area { transition: opacity 1.2s var(--ease) .9s; }
.js-motion:not(.motion-failsafe) .pm-trail:not(.is-in) .pm-trail__area { opacity: 0; }
.pm-trail__pin { position: absolute; left: clamp(1.3rem, var(--x), calc(100% - 1.5rem)); top: var(--y); display: grid; place-items: center; width: 2.4rem; height: 2.4rem; margin: -2.9rem 0 0 -1.2rem; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--fg); color: var(--bg); box-shadow: 0 8px 18px -8px rgb(0 0 0 / .5); transition: background-color .3s, transform .4s var(--ease-back); }
.pm-trail__pin span { transform: rotate(45deg); font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.pm-trail__pin.is-active, .pm-trail__pin:hover { background: var(--accent); color: var(--on-accent); transform: rotate(-45deg) scale(1.15); }
.pm-trail__axis { position: relative; height: 1.9rem; margin-top: -1.5rem; font-size: var(--t-xs); color: var(--fg-muted); font-variant-numeric: tabular-nums; border-top: 1px solid var(--line); }
.pm-trail__axis span { position: absolute; top: 0; left: var(--x); padding-top: .55rem; transform: translateX(-50%); white-space: nowrap; }
.pm-trail__axis span::before { content: ''; position: absolute; top: 0; left: 50%; width: 1px; height: .35rem; background: var(--fg-muted); }
.pm-trail__axis span:first-child { transform: none; }
.pm-trail__axis span:first-child::before { left: 0; }
.pm-trail__axis span:last-child:not(:first-child) { transform: translateX(-100%); }
.pm-trail__axis span:last-child:not(:first-child)::before { left: auto; right: 0; }
.pm-trail__stops { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); padding: 0; margin: 0; list-style: none; }
.pm-trail__stop { display: grid; gap: .6rem; align-content: start; padding: 1.1rem; border-radius: var(--radius); border: 1px solid var(--line); transition: border-color .3s, background-color .3s; }
.pm-trail__stop.is-active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--bg)); }
.pm-trail__km { display: flex; align-items: center; gap: .6rem; font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.pm-trail__dot { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--fg); color: var(--bg); font-size: .7rem; }
.pm-trail__stop.is-active .pm-trail__dot { background: var(--accent); color: var(--on-accent); }
.pm-trail__title { font-size: var(--t-h5); }
.pm-trail__stop .rte { color: var(--fg-muted); font-size: var(--t-small); }
.pm-trail__product { display: grid; grid-template-columns: 3.5rem 1fr; gap: .75rem; align-items: center; padding: .5rem; border-radius: calc(var(--radius) * .8); background: var(--surface); text-decoration: none; font-size: var(--t-small); transition: transform .4s var(--ease); }
.pm-trail__product:hover { transform: translateY(-2px); }
.pm-trail__product .pm-media { aspect-ratio: 1; border-radius: calc(var(--radius) * .5); }
.pm-trail__product strong { display: block; font-weight: 600; }

/* ---------- Bookshelf ---------- */
.pm-shelf { --shelf-gap: clamp(1rem, 3vw, 2.5rem); display: grid; grid-auto-flow: column; grid-auto-columns: minmax(10rem, 1fr); gap: var(--shelf-gap); padding: 2.25rem .5rem 0; margin: -1.25rem 0 0; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.pm-shelf__item { position: relative; display: grid; gap: .35rem; align-content: start; scroll-snap-align: start; }
.pm-book { position: relative; display: grid; gap: 1.4rem; text-decoration: none; perspective: 900px; }
/* The plank: each book's piece reaches half the gap on both sides, so the pieces join into one shelf. */
.pm-book::before { content: ''; grid-row: 1; grid-column: 1; align-self: end; height: 12px; margin: 0 calc(var(--shelf-gap) / -2 - .5px) -12px; border-radius: 1px; background: linear-gradient(to bottom, color-mix(in srgb, var(--fg) 30%, var(--bg)) 0 3px, color-mix(in srgb, var(--fg) 16%, var(--bg)) 3px 100%); box-shadow: 0 12px 18px -12px rgb(0 0 0 / .5); }
.pm-shelf__item:first-child .pm-book::before { margin-left: 0; border-radius: 3px 1px 1px 3px; }
.pm-shelf__item:last-child .pm-book::before { margin-right: 0; border-radius: 1px 3px 3px 1px; }
.pm-book__3d { grid-row: 1; grid-column: 1; position: relative; display: block; aspect-ratio: 2 / 3; margin-inline: 6%; transform-style: preserve-3d; transform: rotateY(-38deg); transform-origin: 50% 100%; transition: transform .8s var(--ease); }
.pm-book__cover { position: absolute; inset: 0; overflow: hidden; border-radius: 2px 6px 6px 2px; background: var(--spine); box-shadow: inset 6px 0 10px -4px rgb(0 0 0 / .35), 0 22px 30px -18px rgb(0 0 0 / .55); transform: translateZ(14px); }
.pm-book__cover :is(img, svg) { width: 100%; height: 100%; object-fit: cover; }
/* No cover image: a typographic cover in the spine colour. */
.pm-book__type { position: absolute; inset: 0; display: grid; align-content: space-between; padding: 14% 12%; color: #fff; background: linear-gradient(90deg, rgb(0 0 0 / .18), transparent 12%), var(--spine); }
.pm-book__type span { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: clamp(1rem, 1.6vw, 1.35rem); line-height: 1.1; text-wrap: balance; }
.pm-book__type small { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.pm-book__spine { position: absolute; top: 0; bottom: 0; left: 0; width: 28px; display: grid; place-items: center; background: color-mix(in srgb, var(--spine) 82%, #000); transform-origin: left; transform: rotateY(-90deg) translateX(-14px); overflow: hidden; }
.pm-book__spine span { writing-mode: vertical-rl; transform: rotate(180deg); color: #fff; font-family: var(--font-heading); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.pm-book__pages { position: absolute; top: 3px; bottom: 3px; right: 0; width: 26px; background: repeating-linear-gradient(90deg, #f4efe4 0 2px, #e3dccd 2px 3px); transform-origin: right; transform: rotateY(90deg) translateX(13px); }
.pm-book:is(:hover, :focus-visible) .pm-book__3d { transform: rotateY(-6deg) translateY(-12px); }
.pm-book__title { min-height: 2.4em; font-family: var(--font-heading); font-size: var(--t-h5); line-height: 1.2; }
.pm-book__author { font-family: var(--font-accent); font-style: var(--accent-style); color: var(--fg-muted); font-size: var(--t-small); }
.pm-book__note { margin-top: .35rem; padding-top: .6rem; border-top: 1px solid var(--line); font-size: var(--t-small); color: var(--fg-muted); }
@media (prefers-reduced-motion: reduce) { .pm-book__3d { transition: none; } }

/* ---------- Packing list ---------- */
.pm-pack-sec { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 990px) { .pm-pack-sec { grid-template-columns: minmax(0, 1.6fr) minmax(16rem, 1fr); } }
.pm-pack-sec__main { display: grid; gap: 1.25rem; }
pm-packing { display: grid; gap: 1.25rem; }
.pm-pack__progress { display: grid; gap: .5rem; }
.pm-pack__count { font-weight: 600; font-variant-numeric: tabular-nums; }
.pm-pack__bar { display: block; height: .6rem; border-radius: 1rem; background: var(--fg-subtle); overflow: hidden; }
.pm-pack__bar span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--accent); transition: width .6s var(--ease-back); }
.pm-pack__list { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); padding: 0; margin: 0; list-style: none; }
.pm-pack__item { display: flex; align-items: center; gap: .8rem; min-height: 3.25rem; padding: .6rem .9rem; border-radius: var(--radius); background: var(--surface); cursor: pointer; transition: background-color .3s; }
.pm-pack__item input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pm-pack__box { display: grid; place-items: center; flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 1.5px solid var(--fg); color: transparent; transition: background-color .3s, color .3s, transform .4s var(--ease-back); }
.pm-pack__box svg { width: 1rem; height: 1rem; }
.pm-pack__item input:checked + .pm-pack__box { background: var(--accent); border-color: var(--accent); color: var(--on-accent); transform: scale(1.1); }
.pm-pack__item input:focus-visible + .pm-pack__box { outline: 2px solid var(--fg); outline-offset: 3px; }
.pm-pack__item:has(input:checked) .pm-pack__label { text-decoration: line-through; text-decoration-thickness: 1.5px; color: var(--fg-muted); }
.pm-pack__reset { justify-self: start; font-size: var(--t-small); text-decoration: underline; text-underline-offset: 3px; }
.pm-pack.is-done .pm-pack__count { color: var(--accent-text); }
.pm-pack-sec__side { display: grid; gap: 1rem; padding: 1.25rem; border-radius: calc(var(--radius) + 4px); background: var(--surface); }
.pm-pack-sec__side-title { font-size: var(--t-h5); }
.pm-pack-sec__products { display: grid; gap: .6rem; padding: 0; margin: 0; list-style: none; }
.pm-pack-sec__products .pm-trail__product { background: var(--bg); }