.record-home { --paper-stage: #d7d3ca; }
.record-home:not(.record-dark) .header { color: #302d28; background: #d7d3caeb; backdrop-filter: blur(12px); box-shadow: none; }
.record-home .brand__logo--paper { display: none; }
.record-home:not(.record-dark) .header .brand__logo:not(.brand__logo--paper) { display: none; }
.record-home:not(.record-dark) .header .brand__logo--paper { display: block; }
.record-home:not(.record-dark) .nav__link { color: #37342f; }
.record-home:not(.record-dark) .nav__link.is-active { background: #00000006; }
.record-home:not(.record-dark) .burger { border-color: #37342f50; }
.record-home:not(.record-dark) .burger span { background: #37342f; }
.record-home .header { transition: color .2s, background .2s; }
.record-track { --open: 0; --sleeve-alpha: 1; --flower-alpha: 1; --art-alpha: 1; --copy-alpha: 0; --title-alpha: 1; --dark: 0; --intro-y: 45px; position: relative; }
.record-stage { position: relative; background: var(--paper-stage); isolation: isolate; }
.vinyl-ready .record-track { height: 412svh; }
.vinyl-ready .record-stage { position: sticky; top: 0; height: 100svh; overflow: clip; }
.record-backdrop { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 47% 35%, #eeebe4 0, #ddd9d0 44%, #c6c1b7 100%); }
.record-backdrop::after { content: ''; position: absolute; inset: 0; background: var(--bg); opacity: var(--dark); }
.record-visual { position: relative; height: 100svh; min-height: 620px; color: #4b463e; }
.record-title { position: absolute; top: max(100px, 13%); left: 0; width: 100%; text-align: center; opacity: var(--heading-alpha, 1); }
.record-title h1 { font: 500 clamp(24px, 2.3vw, 34px)/1.2 var(--font-display); letter-spacing: .22em; }
.record-title p { margin-top: 11px; font: 9px/1.4 var(--font-sans); letter-spacing: .38em; }
.record-interaction { position: absolute; inset: 22% 0 14%; touch-action: pan-y; cursor: ew-resize; user-select: none; -webkit-user-select: none; }
.record-object { --d: min(38vw, 440px, 53svh); --zoom: 1; position: absolute; width: var(--d); height: var(--d); left: 50%; top: 50%; transform: translate(-50%, -50%) translateX(calc(var(--d) * var(--open) * -.32)) scale(var(--zoom)); opacity: var(--art-alpha); perspective: 1100px; pointer-events: none; }
.record-shadow { position: absolute; left: -4%; bottom: -5%; width: calc(105% + var(--open) * 50%); height: 11%; border-radius: 50%; background: #4b392347; filter: blur(18px); transform: rotate(-3deg); opacity: var(--sleeve-alpha); }
.record-flight { position: absolute; inset: 5%; transform-style: preserve-3d; transform: translate3d(calc(var(--d) * var(--rx, .025)), calc(var(--d) * var(--ry, 0)), var(--rz, 0px)) rotateZ(var(--roll, -7deg)) scale(var(--record-scale, 1)); }
.record-turn { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(var(--flip, 0deg)) rotateX(var(--tilt, 0deg)); }
.record-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 50%; }
.record-face--front { transform: translateZ(1px); }
.record-face--back { transform: rotateY(180deg) translateZ(1px); }
.record-photo { display:block; width:100%; height:100%; border-radius:50%; }
.record-macro { position:absolute; inset:0; width:100%; height:100%; opacity:var(--macro-alpha,0); pointer-events:none; }
.record-face--back .record-back-label, .record-face--back .record-spindle { display:none; }
.record-label { position: absolute; width: 31%; height: 31%; left: 34.5%; top: 34%; border-radius: 50%; overflow: hidden; mix-blend-mode: multiply; }
.record-label img { position: absolute; width: 170%; max-width: none; height: auto; left: -35%; top: -28%; }
.record-spindle { position: absolute; left: 48.8%; top: 48.6%; width: 2.5%; height: 2.5%; border-radius: 50%; background: #171614; border: 1px solid #b9ae93; box-shadow: 0 0 1px #000; }
.record-back-label { position: absolute; width: 33%; height: 33%; top: 33%; left: 33.5%; border-radius: 50%; background: #b0644d; color: #2c1913; display: flex; align-items: center; flex-direction: column; justify-content: center; font-family: var(--font-sans); }
.record-back-label span { font-size: calc(var(--d) * .026); letter-spacing: .14em; }
.record-back-label strong { font: 500 calc(var(--d) * .083)/1.2 var(--font-serif); margin-bottom: 12%; }
.record-back-label small { font-size: calc(var(--d) * .014); line-height: 1.7; letter-spacing: .08em; text-align: center; }
.record-sleeve { position: absolute; inset: 0; transform: rotate(-7deg) translateX(calc(var(--open) * -3%)); opacity: var(--sleeve-alpha); filter: drop-shadow(2px 16px 16px #3d281530); }
.record-sleeve > img { width: 100%; height: 100%; }
.record-sleeve__mark { position: absolute; width: 22%; height: 22%; left: 37%; top: 36%; overflow: hidden; mix-blend-mode: multiply; opacity: .68; }
.record-sleeve__mark img { position: absolute; width: 170%; max-width: none; left: -35%; top: -28%; }
.record-sleeve__edition { position: absolute; bottom: 11%; left: 11%; font: 500 calc(var(--d) * .018)/1.3 monospace; letter-spacing: .12em; color: #574634; opacity: .7; }
.record-bouquet { position: absolute; inset: 0; pointer-events: none; opacity: var(--flower-alpha); }
.record-flower { --k: 0; --grow: 0; position: absolute; left: 50%; top: 50%; width: calc(var(--d) * var(--size)); height: calc(var(--d) * var(--size)); opacity: var(--visible, 0); transform: translate(-50%, -50%) translate3d(calc(var(--d) * var(--fx) * var(--k)), calc(var(--d) * var(--fy) * var(--k)), 5px) rotate(calc(var(--angle) * var(--k))) scale(calc(.56 + var(--grow) * .44)); filter: drop-shadow(2px 9px 8px #1c21162b); }
 .record-flower__petals { display:block; width:100%; height:100%; background: url('../img/flower-peony.webp') center / contain no-repeat; transform-origin:50% 85%; transform:perspective(700px) rotateX(calc((1 - var(--grow)) * 22deg)) rotateY(calc((1 - var(--grow)) * -12deg)); }
.record-flower__petals[style*="--col:2"], .record-flower__petals[style*="--col:1;--row:0"] { background-image:url('../img/flower-dahlia.webp'); }
.record-flower__petals[style*="--col:1;--row:1"] { background-image:url('../img/flower-blue.webp'); }
/* Keep all six original botanical varieties alongside the three new macro assets. */
.record-flower__petals[data-vintage] { background-image:url('../img/botanical-sprigs.webp'); background-size:300% 200%; background-position:calc(var(--col) * 50%) calc(var(--row) * 100%); }
.record-flower__petals[data-vintage][style*="--row:0"] { mask-image:linear-gradient(#000 86%,transparent 91%); }
.record-controls { position: absolute; left: 5%; right: 5%; bottom: 5.5%; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; opacity: var(--title-alpha); font-size: 11px; letter-spacing: .07em; }
.record-control { display: grid; gap: 13px; }
.record-controls:not(:focus-within) { clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; }
.record-control input { display: block; appearance: none; -webkit-appearance: none; height: 22px; width: 180px; background: transparent; cursor: ew-resize; }
.record-control input::-webkit-slider-runnable-track { height: 1px; background: #6f675d6b; }
.record-control input::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 8px; height: 8px; margin-top: -3.5px; border-radius: 50%; background: #63584b; }
.record-control input::-moz-range-track { height: 1px; background: #6f675d6b; }
.record-control input::-moz-range-thumb { width: 8px; height: 8px; border: 0; background: #63584b; border-radius: 50%; }
.record-control input:focus-visible, .record-scroll:focus-visible { outline: 2px solid #786746; outline-offset: 6px; }
.record-scroll { padding: 10px 0; }
.record-scroll span { display: inline-block; margin-left: 14px; font-size: 18px; }
.record-touch-hint { display: none; }
@media (hover: none) { .record-mouse-hint { display: none; } .record-touch-hint { display: inline; } }
@media (min-width: 769px) and (max-width: 1150px) { .record-home .nav__link { padding-inline: 7px; font-size: 12px; } }
@media (max-width: 768px) {
  .record-home .brand__logo { max-width: calc(100vw - 100px); height: auto; max-height: 30px; }
  .record-home:not(.record-dark) .nav { background: #d7d3ca; }
  .record-home:not(.record-dark) .dropdown a { color: #514b41; }
  .record-visual { min-height: 540px; }
  .record-title { top: 15%; }
  .record-interaction { inset: 28% 0 22%; }
  .record-object { --d: min(55vw, 320px); --zoom: calc(1 - var(--open) * .35 * (1 - var(--flight, 0))); }
  .record-controls { flex-direction: column; align-items: center; text-align: center; bottom: 4%; gap: 14px; }
  .record-control input { margin: auto; }
}
@media (max-height: 650px) and (min-width: 769px) {
  .record-visual { min-height: 0; }
  .record-title { top: 85px; }
  .record-interaction { inset: 28% 0 12%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .vinyl-ready .record-track { height: auto; }
  .vinyl-ready .record-stage { height: auto; position: relative; overflow: visible; }
  .record-flower__petals { transform: none; clip-path: none; }
}

.record-home { overflow-anchor:none; }
.record-object { visibility:var(--record-visible,visible); }

/* Keep original shadows and pixel fidelity. */
.record-flower { will-change:transform,opacity; }
.record-interaction { touch-action:pan-y pinch-zoom; }

/* Quiet kraft-colour scroll cue below the record. */
.record-visual::after { content:""; position:absolute; left:50%; bottom:7%; width:18px; height:18px; border-right:2px solid #b99565; border-bottom:2px solid #b99565; transform:translateX(-50%) rotate(45deg); opacity:var(--title-alpha,1); pointer-events:none; }