/* ==========================================================================
   HOME.CSS - "Cinematic dark + ember" homepage layer.
   Loaded only by index.html, after style.css. Everything is scoped to
   body.home so no other page changes. Markup hooks used by main.js are
   untouched; this file only restyles them.
   ========================================================================== */

body.home {
    --ember: #ff9a3c;
    --ember-deep: #d8812c;
    --ember-rose: #e0563a;
    --ink-0: #070605;
    --ink-1: #0d0c0a;
    --ink-2: #15120f;
    --glass: rgba(255, 244, 230, 0.045);
    --glass-strong: rgba(255, 244, 230, 0.08);
    --hairline: rgba(255, 226, 190, 0.12);
    --hairline-strong: rgba(255, 190, 120, 0.35);
    --radius-s: 12px;
    --radius-m: 20px;
    --radius-l: 28px;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --fs-display: clamp(2.8rem, 1.2rem + 7vw, 7rem);
    --fs-h2: clamp(2rem, 1.2rem + 3.4vw, 3.8rem);
    background: var(--ink-1);
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
}

html:has(body.home) { scroll-behavior: smooth; }

/* Film grain + vignette over the whole page */
body.home .parallax-grain {
    z-index: 3;
    opacity: 0.07;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.9'/></svg>");
    background-size: 160px 160px;
}
body.home .smoke-overlay { display: none; }
body.home #particle-canvas { display: none; } /* floating 2D embers removed on the homepage (too distracting) */

/* Scroll progress line (driven by home.js) */
body.home .scroll-progress {
    position: fixed;
    top: 0; left: 0;
    height: 2px;
    width: 100%;
    transform-origin: 0 50%;
    transform: scaleX(var(--p, 0));
    background: linear-gradient(90deg, var(--ember-rose), var(--ember), #ffd9a0);
    z-index: 1100;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   NAV: floating glass bar
   -------------------------------------------------------------------------- */
body.home .site-top-fixed {
    padding: 0.7rem clamp(0.5rem, 2vw, 1.5rem) 0;
    pointer-events: none;
}
body.home .navbar,
body.home .navbar.scrolled {
    pointer-events: auto;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0.55rem 0.7rem 0.55rem 1.3rem;
    border-radius: 999px;
    background: rgba(18, 15, 12, 0.55);
    border: 1px solid var(--hairline);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(22px) saturate(1.4);
    -webkit-backdrop-filter: blur(22px) saturate(1.4);
}
body.home .navbar.scrolled {
    background: rgba(14, 12, 10, 0.82);
    border-color: var(--hairline-strong);
}
/* style.css hides .hamburger again after its tablet rule, leaving no menu at 769-1100px. */
@media (min-width: 769px) and (max-width: 1100px) {
    body.home .hamburger { display: inline-flex; }
}
/* Tablet / small laptop (drawer mode): the hidden drawer takes no space, so space-between left MENU floating
   mid-bar. Pin it beside the cart instead. */
@media (min-width: 769px) and (max-width: 1100px) {
    body.home .hamburger { margin-left: auto; }
}
/* Small laptops (1101-1279): the full link row was ~90px wider than its slot and crowded the logo and cart.
   Tighter link padding and type fit it with room to spare. Wider screens keep the roomy spacing. */
@media (min-width: 1101px) and (max-width: 1279px) {
    body.home .navbar,
    body.home .navbar.scrolled { gap: 0.6rem; }
    body.home .nav-links > a,
    body.home .nav-dropdown__trigger { padding: 0.45rem 0.45rem; font-size: 0.74rem; letter-spacing: 0.4px; }
    body.home .nav-links > a.nav-link--hfh { padding-left: 0.65rem; padding-right: 0.65rem; }
}
body.home .logo { font-size: clamp(0.95rem, 0.85rem + 0.3vw, 1.2rem); }
body.home .nav-links a,
body.home .nav-dropdown__trigger {
    border-radius: 999px;
    transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
body.home .nav-links > a:hover,
body.home .nav-dropdown__trigger:hover { background: var(--glass-strong); }
body.home .nav-dropdown__panel {
    background: rgba(16, 13, 10, 0.92);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-s);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
body.home .cart-btn {
    border-radius: 999px;
    background: linear-gradient(135deg, var(--ember), var(--ember-deep));
    color: #1a0f05;
    border: 0;
    font-weight: 700;
    box-shadow: 0 6px 24px rgba(255, 154, 60, 0.28);
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
body.home .cart-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 32px rgba(255, 154, 60, 0.45);
}

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
body.home .hero {
    background-attachment: scroll;
    background-position: center 40%;
    min-height: 640px;
    isolation: isolate;
}
@media (max-width: 768px) {
    /* style.css sizes the hero 100dvh, which changes every time the phone's toolbar slides in or out while
       scrolling. That resized the WebGL canvas and the burnt edge mid-scroll (flicker, logo jumps).
       100svh is the toolbar-shown height and never changes, so the hero holds still. */
    body.home .hero { height: 100vh; height: 100svh; }
}
body.home .hero-overlay {
    background:
        radial-gradient(ellipse 70% 55% at 50% 38%, rgba(255, 154, 60, 0.16), transparent 70%),
        linear-gradient(180deg, rgba(7, 6, 5, 0.78) 0%, rgba(7, 6, 5, 0.62) 45%, var(--ink-1) 100%);
}
body.home .hero-aurora {
    position: absolute;
    inset: -10%;
    z-index: 1;
    filter: blur(70px) saturate(1.3);
    opacity: 0.55;
    pointer-events: none;
    mix-blend-mode: screen;
}
body.home .hero-aurora span {
    position: absolute;
    border-radius: 50%;
    animation: heroDrift 18s ease-in-out infinite alternate;
}
body.home .hero-aurora span:nth-child(1) {
    width: 46vmax; height: 46vmax; left: -8%; top: 8%;
    background: radial-gradient(circle, rgba(224, 86, 58, 0.55), transparent 65%);
}
body.home .hero-aurora span:nth-child(2) {
    width: 40vmax; height: 40vmax; right: -6%; top: -4%;
    background: radial-gradient(circle, rgba(255, 154, 60, 0.5), transparent 65%);
    animation-duration: 24s; animation-delay: -6s;
}
body.home .hero-aurora span:nth-child(3) {
    width: 34vmax; height: 34vmax; left: 32%; bottom: -14%;
    background: radial-gradient(circle, rgba(255, 210, 140, 0.3), transparent 65%);
    animation-duration: 21s; animation-delay: -12s;
}
@keyframes heroDrift {
    from { transform: translate3d(-4%, -3%, 0) scale(1); }
    to   { transform: translate3d(6%, 5%, 0) scale(1.15); }
}

body.home .hero-content { max-width: 1100px; padding: 5.5rem 1.5rem 3rem; }

body.home .hero-logo {
    display: block;
    width: auto;
    height: clamp(150px, 26vh, 250px);
    margin: 0 auto 1.4rem;
    filter: drop-shadow(0 0 22px rgba(255, 154, 60, 0.55)) drop-shadow(0 0 60px rgba(224, 86, 58, 0.3));
    animation: logoGlow 5s ease-in-out infinite alternate;
}
@keyframes logoGlow {
    from { filter: drop-shadow(0 0 16px rgba(255, 154, 60, 0.4)) drop-shadow(0 0 44px rgba(224, 86, 58, 0.2)); }
    to   { filter: drop-shadow(0 0 28px rgba(255, 154, 60, 0.75)) drop-shadow(0 0 80px rgba(224, 86, 58, 0.4)); }
}

body.home .hero-eyebrow {
    display: inline-block;
    margin: 0 0 1.6rem;
    padding: 0.5rem 1.1rem;
    border: 1px solid var(--hairline-strong);
    border-radius: 999px;
    background: var(--glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-size: clamp(0.68rem, 0.62rem + 0.25vw, 0.82rem);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #ffd9a8;
    opacity: 0;
    animation: fadeInUp 1s 0.4s var(--ease) forwards;
}

body.home .hero-title {
    font-size: var(--fs-display);
    line-height: 0.98;
    letter-spacing: -0.035em;
    margin-bottom: 1.6rem;
    background: linear-gradient(180deg, #fbf3e6 0%, #eadcc4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
body.home .hero-title span {
    font-style: italic;
    background: linear-gradient(95deg, #f1d3a3 0%, #e0a45a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
body.home .hero-subtitle {
    max-width: 38rem;
    margin: 0 auto 2.4rem;
    font-size: clamp(1rem, 0.95rem + 0.3vw, 1.25rem);
    color: rgba(245, 236, 222, 0.72);
}

body.home .hero-actions { flex-wrap: wrap; gap: 0.9rem; }
body.home .hero-actions .btn {
    border-radius: 999px;
    height: 54px;
    min-width: 210px;
    letter-spacing: 0.08em;
    font-size: 0.85rem;
    position: relative;
    overflow: hidden;
    transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), background 0.4s var(--ease);
}
body.home .hero-actions .btn--stash-pill {
    background: linear-gradient(135deg, var(--ember) 0%, var(--ember-deep) 60%, #c4571f 100%);
    border: 0;
    color: #1d1006;
    font-weight: 700;
    box-shadow: 0 10px 40px rgba(255, 154, 60, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
body.home .hero-actions .btn--stash-pill:hover {
    color: #1d1006;
    background: linear-gradient(135deg, #ffb35e, var(--ember) 60%, var(--ember-deep));
    transform: translateY(-3px);
    box-shadow: 0 16px 56px rgba(255, 154, 60, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
body.home .hero-actions .btn-outline {
    border: 1px solid var(--hairline-strong);
    background: var(--glass);
    color: #fff3e2;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
body.home .hero-actions .btn-outline:hover {
    background: var(--glass-strong);
    border-color: var(--ember);
    transform: translateY(-3px);
}

/* WebGL hero (fx/hero-fx.js). The canvas sits between the glow and the text. */
body.home .hero-gl {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    animation: heroGlIn 1.2s var(--ease) both;
}
@keyframes heroGlIn { from { opacity: 0; } to { opacity: 1; } }
/* When WebGL draws the hero photo it also applies the overlay darkening itself. */
body.home .hero--gl-photo .hero-overlay { display: none; }
/* The real <img> stays in the page (SEO, screen readers, layout); WebGL draws it. */
body.home .hero--gl .hero-logo { opacity: 0; animation: none; }

/* Burnt paper edge (drawn by fx/hero-fx.js along the hero's bottom): the hero photo is the paper,
   so the CSS photo/overlay are switched off and the dark page shows through the burnt-away part. */
body.home .hero--gl-photo { background-image: none; }
body.home .hero--gl-photo .hero-content { padding-bottom: 6.5rem; }
body.home .hero--gl-photo .scroll-indicator { display: none; }
/* As the burn line (fx/hero-fx.js) climbs through the hero, the text lifts and fades just ahead of it. */
body.home .hero--gl-photo .hero-content {
    opacity: clamp(0, calc(1.25 - var(--burn, 0) * 1.6), 1);
    transform: translateY(calc(var(--burn, 0) * -36px));
    will-change: opacity, transform;
}

/* Burn-in reveal (fx/reveal-fx.js): one fixed canvas, only drawn mid-reveal. */
body.home .reveal-gl {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 40;
    pointer-events: none;
    visibility: hidden;
}
body.home img.burn-pending { opacity: 0 !important; }
body.home img.burn-done { opacity: 1; }

/* --------------------------------------------------------------------------
   MARQUEE
   -------------------------------------------------------------------------- */
body.home .marquee {
    position: relative;
    z-index: 2;
    overflow: hidden;
    border-block: 1px solid var(--hairline);
    background: linear-gradient(90deg, var(--ink-1), var(--ink-2) 50%, var(--ink-1));
    padding: 1.1rem 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
body.home .marquee__track {
    display: flex;
    width: max-content;
    gap: 3rem;
    animation: marquee 38s linear infinite;
}
body.home .marquee__track span {
    display: inline-flex;
    align-items: center;
    gap: 3rem;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(1.1rem, 1rem + 0.8vw, 1.7rem);
    color: rgba(245, 236, 222, 0.55);
    white-space: nowrap;
}
body.home .marquee__track span::after {
    content: "";
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--ember);
    box-shadow: 0 0 14px var(--ember);
}
@keyframes marquee { to { transform: translateX(calc(-50% - 1.5rem)); } }

/* --------------------------------------------------------------------------
   SECTIONS: rhythm, titles, dividers
   -------------------------------------------------------------------------- */
body.home .section-divider { display: none; }
body.home .section { padding: clamp(4.5rem, 3rem + 7vw, 9rem) clamp(1rem, 4vw, 3rem); }
body.home .container { max-width: 1240px; }

body.home .text-center { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
body.home .section-title {
    font-size: var(--fs-h2);
    letter-spacing: -0.03em;
    line-height: 1.05;
    background: linear-gradient(180deg, #fffaf2, #d9c3a3);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
body.home h2.section-title.text-center { display: block; }
body.home .section-title.burn-text { background-size: 100% 100%; animation: none; }
body.home .section-title::after {
    width: 72px; height: 2px;
    background: linear-gradient(90deg, var(--ember-rose), var(--ember), transparent);
    -webkit-text-fill-color: initial;
}
body.home .section-title:hover::after { width: 72px; }
body.home h2.section-title.text-center::after { margin-left: auto; margin-right: auto; }

/* --------------------------------------------------------------------------
   SHOP: header, collection tiles, spotlight, filter rail, cards, archive, trust
   Markup in index.html #shop; tiles/spotlight/archive are built by home.js from the live catalog.
   -------------------------------------------------------------------------- */
body.home .shop [hidden] { display: none !important; }

body.home .shop-head { text-align: center; margin-bottom: clamp(1.8rem, 4vw, 3rem); }
body.home .shop-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0 0 1rem;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--ember);
}
body.home .shop-eyebrow::before,
body.home .shop-eyebrow::after {
    content: "";
    width: 28px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--ember));
}
body.home .shop-eyebrow::after { transform: scaleX(-1); }
body.home .shop-head .section-title { margin-bottom: 0.9rem; }
body.home .shop-lede {
    max-width: 34rem;
    margin: 0 auto;
    color: rgba(245, 236, 222, 0.7);
    font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem);
    line-height: 1.6;
}

/* ---- Collection tiles (12-column rows built by shop-model.layoutRows) ---- */
body.home .shop-tiles {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(0.7rem, 1.6vw, 1.2rem);
}
body.home .shop-tile {
    --tile-h: clamp(210px, 22vw, 290px);
    position: relative;
    display: block;
    grid-column: span var(--span, 4);
    min-height: var(--tile-h);
    border-radius: var(--radius-m);
    overflow: hidden;
    isolation: isolate;
    border: 1px solid var(--hairline);
    background: var(--ink-2);
    color: #fff3e2;
    text-decoration: none;
    box-shadow: 0 26px 60px -34px rgba(0, 0, 0, 0.9);
    transition: transform 0.6s var(--ease), border-color 0.4s var(--ease), box-shadow 0.6s var(--ease);
}
body.home .shop-tile[data-row="0"] { --tile-h: clamp(270px, 31vw, 420px); }
body.home .shop-tile:hover,
body.home .shop-tile:focus-visible {
    transform: translateY(-6px);
    border-color: var(--hairline-strong);
    box-shadow: 0 40px 80px -34px rgba(255, 154, 60, 0.3), 0 30px 60px -30px rgba(0, 0, 0, 0.9);
}
body.home .shop-tile.is-active {
    border-color: var(--ember);
    box-shadow: 0 0 0 1px var(--ember), 0 30px 70px -30px rgba(255, 154, 60, 0.35);
}
/* cursor spotlight (--mx / --my set by home.js) */
body.home .shop-tile::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 154, 60, 0.2), transparent 55%);
    transition: opacity 0.4s var(--ease);
}
body.home .shop-tile:hover::before { opacity: 1; }
body.home .shop-tile__media { position: absolute; inset: 0; z-index: -1; }
body.home .shop-tile__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.02);
    transition: transform 1.1s var(--ease), opacity 0.8s var(--ease);
}
body.home .shop-tile:hover .shop-tile__media img { transform: scale(1.08); }
body.home .shop-tile__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(7, 6, 5, 0) 35%, rgba(7, 6, 5, 0.9) 100%),
        radial-gradient(ellipse at 30% 115%, rgba(255, 154, 60, 0.22), transparent 60%);
}
body.home .shop-tile__body {
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    bottom: 0;
    padding: clamp(1rem, 2vw, 1.6rem);
    padding-right: calc(clamp(1rem, 2vw, 1.6rem) + 50px);
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
body.home .shop-tile__kicker {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ember);
}
body.home .shop-tile__title {
    position: relative;
    padding-bottom: 0.4rem;
    font-family: var(--font-serif);
    font-size: clamp(1.35rem, 1rem + 1.5vw, 2.2rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
}
body.home .shop-tile[data-row="0"] .shop-tile__title { font-size: clamp(1.7rem, 1.1rem + 2.2vw, 3rem); }
body.home .shop-tile__title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, var(--ember-rose), var(--ember), transparent);
    transform: scaleX(0.18);
    transform-origin: left;
    transition: transform 0.6s var(--ease);
}
body.home .shop-tile:hover .shop-tile__title::after,
body.home .shop-tile:focus-visible .shop-tile__title::after { transform: scaleX(1); }
body.home .shop-tile__meta { font-size: 0.92rem; color: rgba(245, 236, 222, 0.78); }
body.home .shop-tile__arrow {
    position: absolute;
    z-index: 1;
    right: clamp(1rem, 2vw, 1.6rem);
    bottom: clamp(1rem, 2vw, 1.6rem);
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--hairline-strong);
    background: rgba(14, 12, 10, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: 1.1rem;
    opacity: 0.75;
    transform: translateX(-6px);
    transition: all 0.5s var(--ease);
}
body.home .shop-tile:hover .shop-tile__arrow,
body.home .shop-tile:focus-visible .shop-tile__arrow {
    opacity: 1;
    transform: none;
    background: var(--ember);
    border-color: var(--ember);
    color: #1d1006;
}
/* blocks created after load fade/rise in when scrolled to (home.js adds .shop-reveal, then .in-view) */
body.home .shop-reveal:not(.in-view) { opacity: 0; transform: translateY(22px); }
body.home .shop-reveal.in-view { animation: shopIn 0.8s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 70ms); }
body.home .shop-img { opacity: 0; }
body.home .shop-img.is-in,
body.home .shop-img.burn-done { opacity: 1; }

/* ---- "Made for you" tiles ---- */
body.home .shop-custom {
    display: grid;
    /* auto-fit so a lone tile (business cards are paused) spans the full row instead of half of it */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: clamp(0.7rem, 1.6vw, 1.2rem);
    margin-top: clamp(0.7rem, 1.6vw, 1.2rem);
}
body.home .shop-tile--custom {
    --tile-h: clamp(150px, 15vw, 190px);
    grid-column: auto;
    background: linear-gradient(160deg, var(--glass-strong), var(--glass));
}
body.home .shop-tile--custom .shop-tile__media::after {
    background: linear-gradient(90deg, rgba(7, 6, 5, 0.1) 0%, rgba(7, 6, 5, 0.88) 78%);
}
body.home .shop-tile--custom .shop-tile__body { top: 0; justify-content: center; }
body.home .shop-tile--lantern .shop-tile__media {
    background: radial-gradient(ellipse at 22% 45%, rgba(255, 154, 60, 0.4), transparent 58%), #1a120b;
}
body.home .shop-tile--cards .shop-tile__media {
    display: grid;
    place-items: center start;
    padding-left: clamp(1.2rem, 3.4vw, 2.6rem);
    background:
        radial-gradient(ellipse at 18% 35%, rgba(184, 134, 78, 0.38), transparent 60%),
        repeating-linear-gradient(8deg, rgba(120, 78, 40, 0.3) 0 2px, rgba(60, 36, 18, 0.3) 2px 7px),
        #2a1c10;
}
body.home .shop-tile--cards .shop-tile__media img {
    width: clamp(54px, 7vw, 84px);
    height: auto;
    object-fit: contain;
    opacity: 0.9;
    filter: drop-shadow(0 0 16px rgba(255, 154, 60, 0.5));
    transform: none;
}

/* ---- Originals spotlight ---- */
body.home .shop-spot { margin-top: clamp(1.4rem, 3vw, 2.4rem); }
body.home .shop-spot__card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(1.2rem, 3vw, 3rem);
    align-items: center;
    padding: clamp(0.9rem, 1.8vw, 1.4rem);
    border: 1px solid var(--hairline-strong);
    border-radius: var(--radius-l);
    background: linear-gradient(160deg, var(--glass-strong), var(--glass));
    box-shadow: 0 50px 110px -50px rgba(255, 154, 60, 0.22);
    overflow: hidden;
}
body.home .shop-spot__card + .shop-spot__card { margin-top: 1rem; }
body.home .shop-spot__media {
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-m);
    overflow: hidden;
    background: var(--ink-2);
}
body.home .shop-spot__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1.2s var(--ease), opacity 0.8s var(--ease);
}
body.home .shop-spot__card:hover .shop-spot__media img { transform: scale(1.04); }
body.home .shop-spot__copy .shop-eyebrow { margin-bottom: 0.6rem; }
body.home .shop-spot__copy .shop-eyebrow::before { display: none; }
body.home .shop-spot__title {
    margin: 0.2rem 0 0.8rem;
    font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3.2rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: #fff1de;
}
body.home .shop-spot__desc { max-width: 30rem; margin: 0 0 1.1rem; line-height: 1.7; color: rgba(245, 236, 222, 0.74); }
body.home .shop-spot__price {
    margin: 0 0 1.2rem;
    font-family: var(--font-serif);
    font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
    color: #ffd9a0;
}
body.home .shop-spot__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; }
body.home .shop-spot__link { color: var(--ember); text-decoration: underline; text-underline-offset: 4px; }
body.home .shop-spot__also { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
body.home .shop-spot__also li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.4rem 1rem;
    padding: 0.8rem 1.1rem;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-s);
    background: var(--glass);
}
body.home .shop-spot__also strong { font-weight: 600; color: #fff1de; }
body.home .shop-spot__also a { color: var(--ember); text-decoration: underline; text-underline-offset: 4px; }

/* ---- Filter rail ---- */
body.home .shop-rail {
    position: sticky;
    top: 5.2rem;
    z-index: 30;
    margin: clamp(1.6rem, 3vw, 2.4rem) 0 1.2rem;
    padding: 0.8rem clamp(0.6rem, 1.5vw, 1rem) 0.55rem;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-m);
    background: rgba(16, 13, 10, 0.8);
    backdrop-filter: blur(16px) saturate(1.3);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.8);
    scroll-margin-top: 5.2rem;
}
body.home .shop-controls {
    display: grid;
    grid-template-columns: minmax(170px, 250px) minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.7rem 1rem;
    margin: 0;
}
body.home .search-bar-container {
    max-width: none;
    margin: 0;
    background: var(--glass);
    border: 1px solid var(--hairline);
    border-radius: 999px;
    transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
body.home .search-bar-container:focus-within {
    border-color: var(--ember);
    box-shadow: 0 0 0 4px rgba(255, 154, 60, 0.15);
}
body.home .search-bar-container input { background: transparent; color: var(--text-color); }
body.home .category-filters {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 0.45rem;
    margin: 0;
    padding: 2px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent);
    mask-image: linear-gradient(90deg, #000 92%, transparent);
}
body.home .category-filters::-webkit-scrollbar { display: none; }
/* Desktop: a mouse can't swipe the chip row, so give it its own full-width row and wrap instead of clipping. */
@media (min-width: 721px) {
    body.home .shop-controls { grid-template-columns: minmax(170px, 1fr) auto; }
    body.home .category-filters {
        grid-column: 1 / -1;
        grid-row: 2;
        flex-wrap: wrap;
        overflow: visible;
        -webkit-mask-image: none;
        mask-image: none;
    }
    body.home .shop-sort { grid-column: 2; grid-row: 1; }
}
body.home .filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex: none;
    white-space: nowrap;
    padding: 0.5rem 0.95rem;
    font-size: 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--hairline);
    background: var(--glass);
    color: rgba(245, 236, 222, 0.82);
    transition: all 0.35s var(--ease);
}
body.home .filter-btn:hover { border-color: var(--hairline-strong); background: var(--glass-strong); }
body.home .filter-btn.active {
    background: linear-gradient(135deg, var(--ember), var(--ember-deep));
    border-color: transparent;
    color: #1d1006;
    font-weight: 700;
    box-shadow: 0 8px 26px rgba(255, 154, 60, 0.3);
}
body.home .filter-count {
    padding: 0.08rem 0.45rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    font-size: 0.72rem;
    font-weight: 600;
    opacity: 0.8;
}
body.home .filter-btn.active .filter-count { background: rgba(29, 16, 6, 0.2); opacity: 1; }
body.home .shop-sort select {
    appearance: none;
    -webkit-appearance: none;
    padding: 0.55rem 2.2rem 0.55rem 1rem;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    background: var(--glass) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5l5 5 5-5' fill='none' stroke='%23ff9a3c' stroke-width='1.6'/></svg>") no-repeat right 0.85rem center;
    color: var(--text-color);
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
}
body.home .shop-sort select option { background: #15120f; color: #f5f0e6; }
body.home .shop-status { margin: 0.5rem 0.3rem 0; min-height: 1.2em; font-size: 0.82rem; color: rgba(245, 236, 222, 0.62); }

/* ---- Cards ---- */
body.home .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
    gap: clamp(0.9rem, 1.8vw, 1.5rem);
}
body.home .product-card {
    position: relative;
    border-radius: var(--radius-m);
    background: linear-gradient(180deg, rgba(255, 244, 230, 0.06), rgba(255, 244, 230, 0.02));
    border: 1px solid var(--hairline);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 20px 50px -24px rgba(0, 0, 0, 0.7);
    transition: transform 0.6s var(--ease), border-color 0.4s var(--ease), box-shadow 0.6s var(--ease);
}
/* newly shown cards (filter, sort, Show more) rise in; backwards-only so the tilt transform still works after */
body.home .product-card.shop-in { animation: shopIn 0.6s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 50ms); }
@keyframes shopIn { from { opacity: 0; transform: translateY(18px) scale(0.985); } }
/* cursor spotlight (--mx / --my set by home.js) */
body.home .product-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 154, 60, 0.16), transparent 55%);
    transition: opacity 0.4s var(--ease);
}
body.home .product-card:hover::before { opacity: 1; }
body.home .product-card:hover {
    transform: translateY(-8px);
    border-color: var(--hairline-strong);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 40px 80px -30px rgba(255, 154, 60, 0.28), 0 30px 60px -20px rgba(0, 0, 0, 0.8);
}
body.home .product-img {
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 0;
    transition: transform 0.9s var(--ease);
}
/* second photo crossfades in on hover (--img2 is set by main.js when the product has one) */
body.home .product-img::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--img2) center / cover no-repeat;
    opacity: 0;
    transition: opacity 0.55s var(--ease);
    pointer-events: none;
}
body.home .product-card--contain .product-img::after { background-size: contain; }
@media (hover: hover) {
    body.home .product-card--has-img2:hover .product-img::after { opacity: 1; }
}
body.home .stock-badge { z-index: 2; }
body.home .product-card:hover .product-img { transform: scale(1.05); }
body.home .product-link-img-wrap,
body.home .product-card-link { overflow: hidden; }
body.home .product-info { padding: 1.1rem 1.2rem 0.5rem; }
body.home .product-title {
    margin-bottom: 0.4rem;
    font-size: 1.05rem;
    line-height: 1.3;
    letter-spacing: -0.01em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
body.home .product-price { margin-bottom: 0.4rem; color: #ffd9a0; font-weight: 600; }
body.home .product-card-actions { padding: 0 1.2rem 1.2rem; }
/* the whole card already links to the product page; keep the link in the DOM for crawlers */
body.home .view-product-page-link { display: none; }
body.home .view-details-btn {
    width: 100%;
    border-radius: 999px;
    border: 1px solid var(--hairline-strong);
    background: var(--glass);
    color: #fff3e2;
    transition: all 0.3s var(--ease);
}
body.home .view-details-btn:hover { background: var(--ember); border-color: var(--ember); color: #1d1006; }
body.home .product-card.skeleton {
    min-height: 380px;
    background: linear-gradient(110deg, var(--glass) 30%, var(--glass-strong) 50%, var(--glass) 70%);
    background-size: 200% 100%;
    animation: shimmer 1.6s linear infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }

body.home .shop-empty { padding: 2.4rem 1rem; text-align: center; color: rgba(245, 236, 222, 0.75); }
body.home .shop-empty-btn {
    margin-left: 0.6rem;
    padding: 0.45rem 1rem;
    border: 1px solid var(--hairline-strong);
    border-radius: 999px;
    background: none;
    color: var(--ember);
    font: inherit;
    cursor: pointer;
}
/* Buttons inside the shop (the base .btn styles assume anchors) */
body.home .shop .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.95rem 2rem;
    border-radius: 999px;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
}
body.home .shop .btn-primary {
    border: 0;
    background: linear-gradient(135deg, var(--ember), var(--ember-deep) 60%, #c4571f);
    color: #1d1006;
    box-shadow: 0 10px 30px rgba(255, 154, 60, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
body.home .shop .btn-primary:hover {
    background: linear-gradient(135deg, #ffb35e, var(--ember) 60%, var(--ember-deep));
    box-shadow: 0 16px 40px rgba(255, 154, 60, 0.45);
}
body.home .shop .btn-outline { border: 1px solid var(--hairline-strong); background: var(--glass); color: #fff3e2; }

/* narrower tiles (rows after the first) get a tighter title so names do not wrap to three lines */
body.home .shop-tile:not([data-row="0"]) .shop-tile__title { font-size: clamp(1.1rem, 0.8rem + 1vw, 1.55rem); }
body.home .shop-tile:not([data-row="0"]) .shop-tile__arrow { width: 34px; height: 34px; font-size: 0.95rem; }
body.home .shop-tile:not([data-row="0"]) .shop-tile__body { padding-right: calc(clamp(1rem, 2vw, 1.6rem) + 38px); }

body.home .shop-more { display: flex; justify-content: center; margin-top: clamp(1.4rem, 3vw, 2.2rem); }
body.home .shop-more .btn,
body.home .shop-archive__more .btn {
    padding: 0.9rem 2rem;
    border-radius: 999px;
    border-color: var(--hairline-strong);
    background: var(--glass);
}
body.home .shop-more .btn:hover,
body.home .shop-archive__more .btn:hover { background: var(--ember); border-color: var(--ember); color: #1d1006; }

/* ---- Trust strip ---- */
body.home .shop-trust {
    list-style: none;
    margin: clamp(2.4rem, 5vw, 4rem) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(0.7rem, 1.6vw, 1.1rem);
}
body.home .shop-trust li {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1.1rem 1.2rem 1.1rem 1.5rem;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-m);
    background: var(--glass);
}
body.home .shop-trust li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1.2rem;
    width: 3px;
    height: 1.3rem;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--ember), var(--ember-rose));
    box-shadow: 0 0 12px rgba(255, 154, 60, 0.6);
}
body.home .shop-trust strong { font-weight: 600; letter-spacing: -0.01em; color: #fff1de; }
body.home .shop-trust span { color: rgba(245, 236, 222, 0.68); font-size: 0.92rem; line-height: 1.5; }

/* ---- Past Work archive ---- */
body.home .shop-archive {
    margin-top: clamp(1.4rem, 3vw, 2.2rem);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-l);
    background: linear-gradient(160deg, var(--glass-strong), var(--glass));
    overflow: hidden;
}
body.home .shop-archive > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: clamp(1.1rem, 2.2vw, 1.6rem) clamp(1.1rem, 2.6vw, 2rem);
    list-style: none;
    cursor: pointer;
}
body.home .shop-archive > summary::-webkit-details-marker { display: none; }
body.home .shop-archive__title {
    display: block;
    font-family: var(--font-serif);
    font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem);
    letter-spacing: -0.02em;
    color: #fff1de;
}
body.home .shop-archive__sub { display: block; margin-top: 0.2rem; color: rgba(245, 236, 222, 0.65); font-size: 0.95rem; }
body.home .shop-archive__chev {
    position: relative;
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--hairline-strong);
    transition: transform 0.5s var(--ease), background 0.3s var(--ease);
}
body.home .shop-archive__chev::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--ember);
    border-bottom: 2px solid var(--ember);
    transform: translate(-50%, -70%) rotate(45deg);
}
body.home .shop-archive[open] .shop-archive__chev { transform: rotate(180deg); }
body.home .shop-archive > summary:hover .shop-archive__chev { background: var(--glass-strong); }
body.home .shop-archive__body { padding: 0 clamp(1.1rem, 2.6vw, 2rem) clamp(1.2rem, 2.6vw, 2rem); }
body.home .shop-archive__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
    gap: 0.7rem;
}
body.home .shop-past {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    padding: 0;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-s);
    overflow: hidden;
    background: var(--ink-2);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    content-visibility: auto;
    contain-intrinsic-size: 150px 150px;
}
body.home .shop-past img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(0.85) brightness(0.85);
    transition: filter 0.5s var(--ease), transform 0.8s var(--ease);
}
body.home .shop-past:hover img,
body.home .shop-past:focus-visible img { filter: none; transform: scale(1.05); }
body.home .shop-past__name {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1.4rem 0.6rem 0.5rem;
    font-size: 0.78rem;
    line-height: 1.25;
    background: linear-gradient(180deg, transparent, rgba(7, 6, 5, 0.92));
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
body.home .shop-past__tag {
    position: absolute;
    top: 0.45rem;
    left: 0.45rem;
    padding: 0.2rem 0.5rem;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    background: rgba(7, 6, 5, 0.72);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
body.home .shop-archive__more { margin: 1.2rem 0 0; text-align: center; }
body.home .shop-archive__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.8rem 1.2rem;
    margin-top: clamp(1.2rem, 2.6vw, 1.8rem);
    padding-top: 1.2rem;
    border-top: 1px solid var(--hairline);
}
body.home .shop-archive__cta p { flex: 1 1 14rem; margin: 0; color: rgba(245, 236, 222, 0.8); }
body.home .shop-archive__link { color: var(--ember); text-decoration: underline; text-underline-offset: 4px; }
body.home .shop-noscript { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 1.4rem; list-style: none; margin: 2rem 0 0; padding: 0; }
body.home .shop-noscript a { color: var(--ember); }

@media (max-width: 960px) {
    body.home .shop-controls { grid-template-columns: minmax(0, 1fr) auto; }
    body.home .category-filters { grid-column: 1 / -1; grid-row: 2; }
    body.home .shop-spot__card { grid-template-columns: minmax(0, 1fr); }
    body.home .shop-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    body.home .shop-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.home .shop-tile { grid-column: span 1; --tile-h: 190px; }
    body.home .shop-tile[data-row="0"] { --tile-h: 210px; }
    body.home .shop-tile:first-child { grid-column: 1 / -1; --tile-h: 250px; }
    body.home .shop-tile__body { padding-right: calc(clamp(1rem, 2vw, 1.6rem) + 12px); }
    body.home .shop-tile__arrow { display: none; }
    body.home .shop-tile:not(:first-child) .shop-tile__title { font-size: 1.05rem; line-height: 1.15; }
    body.home .shop-tile:first-child .shop-tile__title { font-size: clamp(1.5rem, 6.5vw, 2rem); }
    body.home .shop-tile__meta { font-size: 0.78rem; }
    /* an odd tile out never sits alone in a row */
    body.home .shop-tile:last-child:nth-child(even) { grid-column: 1 / -1; --tile-h: 200px; }
    body.home .shop-custom { grid-template-columns: minmax(0, 1fr); }
    body.home .shop-rail { position: static; }
    body.home .shop-controls { grid-template-columns: minmax(0, 1fr); }
    body.home .category-filters { grid-row: auto; }
    body.home .shop-sort { justify-self: start; }
    body.home .shop-trust { grid-template-columns: minmax(0, 1fr); }
    body.home .shop-archive__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   ABOUT: split card
   -------------------------------------------------------------------------- */
body.home .artist-grid {
    border: 1px solid var(--hairline);
    border-radius: var(--radius-l);
    background: linear-gradient(160deg, var(--glass-strong), var(--glass));
    padding: clamp(1rem, 2.5vw, 2rem);
    gap: clamp(1.5rem, 3vw, 3rem);
    box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
body.home .artist-photo-wrap {
    border-radius: var(--radius-m);
    overflow: hidden;
    border: 1px solid var(--hairline-strong);
    box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.85), 0 0 60px -20px rgba(255, 154, 60, 0.35);
}
/* soft ember wash up the bottom of the photo so it settles into the card */
body.home .artist-photo-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 55%, rgba(14, 10, 6, 0.55) 100%),
                radial-gradient(ellipse 80% 50% at 50% 110%, rgba(255, 154, 60, 0.22), transparent 70%);
}
body.home .artist-eyebrow {
    margin: 0 0 0.9rem;
    font-size: 0.74rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ember);
    font-weight: 600;
}
body.home .artist-name {
    font-size: clamp(2rem, 1.4rem + 2.2vw, 3.2rem);
    line-height: 1.05;
    letter-spacing: -0.025em;
    margin-bottom: 0.7rem;
    background: linear-gradient(180deg, #fff1da 0%, #f1cf9d 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #ffe3bd;
}
body.home .artist-role {
    margin: 0 0 1.6rem;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    color: rgba(245, 236, 222, 0.55);
}
body.home .artist-bio p { color: rgba(245, 236, 222, 0.72); line-height: 1.8; max-width: 64ch; }
body.home .artist-bio p.artist-eyebrow { color: var(--ember); max-width: none; line-height: 1.2; }
body.home .artist-bio p.artist-role { color: rgba(245, 236, 222, 0.55); max-width: none; line-height: 1.4; }
body.home .artist-bio p.artist-lede {
    font-size: clamp(1.08rem, 1rem + 0.35vw, 1.28rem);
    line-height: 1.7;
    color: rgba(250, 242, 230, 0.9);
    font-weight: 400;
}
body.home .artist-bio a { color: var(--ember); }

/* At-a-glance tiles: every value restates something the bio already says. */
body.home .artist-facts {
    list-style: none;
    margin: 0.4rem 0 1.8rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}
body.home .artist-facts li {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-s);
    background: var(--glass);
    transition: border-color 0.35s var(--ease), background 0.35s var(--ease), transform 0.35s var(--ease);
}
body.home .artist-facts li:hover { border-color: var(--hairline-strong); background: var(--glass-strong); transform: translateY(-2px); }
body.home .artist-facts__value {
    font-family: 'Playfair Display', serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffd9a0;
    line-height: 1.15;
}
body.home .artist-facts__label { font-size: 0.8rem; line-height: 1.4; color: rgba(245, 236, 222, 0.6); }
body.home .about-cta .inline-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.4rem;
    border: 1px solid var(--hairline-strong);
    border-radius: 999px;
    background: var(--glass);
    color: #ffe3bd;
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 0.04em;
    transition: background 0.35s var(--ease), border-color 0.35s var(--ease), transform 0.35s var(--ease);
}
body.home .about-cta .inline-link:hover { background: var(--glass-strong); border-color: var(--ember); transform: translateY(-2px); }

/* Desktop: portrait photo stays put while the story scrolls past it. */
@media (min-width: 901px) {
    body.home .artist-grid {
        grid-template-columns: minmax(300px, 5fr) 7fr;
        align-items: start;
    }
    body.home .artist-photo-wrap {
        position: sticky;
        top: 6.5rem;
    }
    body.home .artist-photo {
        height: auto;
        aspect-ratio: 4 / 5;
    }
}
@media (max-width: 900px) {
    /* style.css keeps two columns down to 769px, which squeezes the bio and the tiles; stack earlier. */
    body.home .artist-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
    body.home .artist-facts { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   PROCESS: pinned photo + scroll story, facts, materials, live callout
   -------------------------------------------------------------------------- */
body.home .process-lede {
    max-width: 36rem;
    margin: -1.5rem auto clamp(2.5rem, 5vw, 4.5rem);
    text-align: center;
    color: rgba(245, 236, 222, 0.7);
    font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem);
    line-height: 1.6;
}

body.home .process-story {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
}

/* Left: pinned stage */
body.home .process-stage {
    position: sticky;
    top: 6.5rem;
    align-self: start;
}
body.home .process-frame {
    position: relative;
    aspect-ratio: 4 / 5;
    max-height: calc(100vh - 9rem);
    width: 100%;
    margin-inline: auto;
    border-radius: var(--radius-l);
    overflow: hidden;
    border: 1px solid var(--hairline-strong);
    background: var(--ink-2);
    box-shadow: 0 50px 110px -40px rgba(255, 154, 60, 0.22), 0 40px 80px -30px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
body.home .process-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, transparent 55%, rgba(7, 6, 5, 0.85)),
        radial-gradient(ellipse at 50% 120%, rgba(255, 154, 60, 0.22), transparent 60%);
}
body.home .process-stage__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.06);
    transition: opacity 0.9s var(--ease), transform 1.4s var(--ease);
}
body.home .process-stage__img.is-active { opacity: 1; transform: scale(1); }
body.home .process-frame__num {
    position: absolute;
    z-index: 2;
    left: clamp(1rem, 2.5vw, 2rem);
    bottom: clamp(0.5rem, 1.5vw, 1.2rem);
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(4.5rem, 3rem + 6vw, 8rem);
    line-height: 1;
    background: linear-gradient(180deg, #ffd9a0, var(--ember) 55%, var(--ember-rose));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 24px rgba(255, 154, 60, 0.45));
}

/* Burn line: a rail beside the steps whose glowing fill follows scroll (--p set by home.js) */
body.home .process-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    margin-left: -1px;
    background: var(--hairline);
    border-radius: 2px;
}
body.home .process-line__fill {
    position: absolute;
    inset: 0 0 auto 0;
    height: calc(var(--p, 0) * 100%);
    background: linear-gradient(180deg, var(--ember-rose), var(--ember) 60%, #ffe3b5);
    box-shadow: 0 0 18px rgba(255, 154, 60, 0.7);
    border-radius: 2px;
}
body.home .process-line__fill::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -7px;
    width: 14px;
    height: 14px;
    margin-left: -7px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff1d6, var(--ember) 60%, var(--ember-rose));
    box-shadow: 0 0 0 5px rgba(255, 154, 60, 0.15), 0 0 28px 6px rgba(255, 154, 60, 0.65);
}

/* Right: steps */
body.home .process-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
body.home .process-step {
    min-height: min(78vh, 640px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem 0;
    opacity: 0.38;
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
body.home .process-step.is-active { opacity: 1; }
body.home .process-step__img { display: none; }
body.home .process-step__eyebrow {
    display: inline-block;
    margin-bottom: 0.9rem;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ember);
}
body.home .process-step h3 {
    font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.2rem);
    letter-spacing: -0.03em;
    line-height: 1.05;
    margin: 0 0 1rem;
    color: #fff1de;
}
body.home .process-step p {
    max-width: 30rem;
    margin: 0;
    font-size: clamp(1rem, 0.95rem + 0.3vw, 1.18rem);
    line-height: 1.7;
    color: rgba(245, 236, 222, 0.74);
}

/* Tablet / phone: no pinning. Each step carries its own photo. */
@media (max-width: 899px) {
    body.home .process-story { grid-template-columns: minmax(0, 1fr); gap: 0; }
    body.home .process-stage,
    body.home .process-line { display: none; }
    body.home .process-step {
        min-height: 0;
        opacity: 1;
        padding: 0 0 clamp(2rem, 6vw, 3rem);
    }
    body.home .process-step__img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
        object-fit: cover;
        margin-bottom: 1.2rem;
        border-radius: var(--radius-m);
        border: 1px solid var(--hairline);
        box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.home .process-stage__img,
    body.home .process-step { transition: none; }
}

/* --------------------------------------------------------------------------
   GALLERY
   -------------------------------------------------------------------------- */
/* Seven photos: tidy 3-col / 2-col grids with the odd last photo centered. */
@media (min-width: 1000px) {
    body.home .masonry-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 300px; }
    body.home .masonry-grid .gallery-item:last-child:nth-child(3n + 1) { grid-column: 2; }
}
@media (min-width: 769px) and (max-width: 999px) {
    body.home .masonry-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 280px; }
    body.home .masonry-grid .gallery-item:last-child:nth-child(2n + 1) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 0.75rem); }
}
body.home .gallery-item {
    border-radius: var(--radius-m);
    border: 1px solid var(--hairline);
    box-shadow: 0 20px 50px -24px rgba(0, 0, 0, 0.75);
    transition: transform 0.6s var(--ease), border-color 0.4s var(--ease), box-shadow 0.6s var(--ease);
}
body.home .gallery-item:hover {
    transform: translateY(-6px) scale(1.01);
    border-color: var(--hairline-strong);
    box-shadow: 0 40px 80px -30px rgba(255, 154, 60, 0.25), 0 30px 60px -20px rgba(0, 0, 0, 0.8);
}

/* --------------------------------------------------------------------------
   MUSIC: "Vibes & Sounds" player
   #music[data-music-state] is "soon" (nothing to play yet: the default, and the fallback when SoundCloud is
   unreachable) or "ready" (tracks found on the SoundCloud profile). main.js owns the state and the controls;
   this file only draws them. Looping motion pauses while the section is off screen (.is-offscreen).
   -------------------------------------------------------------------------- */
body.home .section.music {
    position: relative;
    background:
        radial-gradient(55% 45% at 50% 60%, rgba(255, 154, 60, 0.07), transparent 70%),
        var(--ink-1);
}
body.home .music-lede {
    max-width: 38rem;
    margin: -1.5rem auto clamp(2.2rem, 4.5vw, 3.6rem);
    text-align: center;
    color: rgba(245, 236, 222, 0.7);
    font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem);
    line-height: 1.6;
}

body.home .music-deck {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
    gap: clamp(1.4rem, 3vw, 2.6rem);
    max-width: 1080px;
    margin: 0 auto;
    padding: clamp(1rem, 2.6vw, 2rem);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-l);
    background: linear-gradient(160deg, var(--glass-strong), var(--glass));
    box-shadow: 0 40px 90px -45px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 244, 230, 0.06);
}

/* ---- Player ---- */
body.home .music-now {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1.1rem, 2.4vw, 1.7rem);
    padding: clamp(1.4rem, 3vw, 2.2rem) clamp(1rem, 2.4vw, 1.8rem) clamp(1.3rem, 2.6vw, 1.9rem);
    overflow: hidden;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-m);
    background: linear-gradient(180deg, rgba(7, 6, 5, 0.74), rgba(13, 12, 10, 0.56));
    text-align: center;
}
/* Ember halo behind the disc: breathes while idle, brightens while playing */
body.home .music-now::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 0;
    width: 115%;
    aspect-ratio: 1;
    background: radial-gradient(closest-side, rgba(255, 154, 60, 0.3), rgba(224, 86, 58, 0.1) 55%, transparent 72%);
    transform: translate(-50%, -24%);
    opacity: 0.6;
    pointer-events: none;
    animation: musicHalo 6s ease-in-out infinite;
}
@keyframes musicHalo {
    0%, 100% { opacity: 0.5; transform: translate(-50%, -24%) scale(0.96); }
    50% { opacity: 0.95; transform: translate(-50%, -24%) scale(1.05); }
}
body.home .music.is-playing .music-now::before { opacity: 1; animation-duration: 2.8s; }

/* The record: CSS vinyl by default; artwork replaces the face when a track has some */
body.home .music-disc-wrap {
    position: relative;
    width: clamp(168px, 22vw, 236px);
    aspect-ratio: 1;
}
/* static specular highlight (the disc itself spins underneath it) */
body.home .music-disc-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(115deg, transparent 34%, rgba(255, 244, 230, 0.1) 50%, transparent 66%);
    pointer-events: none;
}
body.home .music-disc {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 50%, #ffc27a 0 7%, var(--ember) 13%, var(--ember-deep) 22%, #8f3d1d 29%, transparent 29.6%),
        conic-gradient(from 25deg, #14100c, #261b12 10%, #14100c 22%, #2c1f14 35%, #14100c 48%, #261b12 60%, #14100c 72%, #2c1f14 85%, #14100c);
    background-size: cover;
    background-position: center;
    box-shadow:
        0 0 0 1px rgba(255, 190, 120, 0.22),
        0 24px 50px -14px rgba(0, 0, 0, 0.9),
        0 0 64px -10px rgba(255, 154, 60, 0.38);
}
/* grooves */
body.home .music-disc::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: repeating-radial-gradient(circle at 50% 50%, rgba(255, 226, 190, 0.055) 0 1px, transparent 1px 3px);
    -webkit-mask: radial-gradient(circle, transparent 0 29.5%, #000 30%);
    mask: radial-gradient(circle, transparent 0 29.5%, #000 30%);
    pointer-events: none;
}
/* spindle hole */
body.home .music-disc::after {
    content: "";
    position: absolute;
    inset: 46.5%;
    border-radius: 50%;
    background: #0b0907;
    box-shadow: 0 0 0 2px rgba(255, 226, 190, 0.35);
}
body.home .music-disc__pulse {
    position: absolute;
    inset: -8px;
    border: 2px solid var(--ember);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
}
body.home .music.is-playing .music-disc { animation: musicSpin 14s linear infinite; }
body.home .music.is-playing .music-disc__pulse { animation: musicPulse 2.2s ease-out infinite; }
@keyframes musicSpin { to { transform: rotate(360deg); } }
@keyframes musicPulse {
    0% { transform: scale(1); opacity: 0.55; }
    100% { transform: scale(1.14); opacity: 0; }
}

/* ---- Title block ---- */
body.home .music-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    min-width: 0;
}
body.home .music-status {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0 0 0.95rem;
    padding: 0.34rem 0.85rem 0.34rem 0.72rem;
    border: 1px solid var(--hairline-strong);
    border-radius: 999px;
    background: rgba(255, 154, 60, 0.08);
    color: var(--ember);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    line-height: 1.2;
    text-transform: uppercase;
}
body.home .music-status__dot {
    position: relative;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ember);
    box-shadow: 0 0 10px var(--ember);
}
body.home .music-status__dot::after {
    content: "";
    position: absolute;
    inset: -5px;
    border: 1px solid var(--ember);
    border-radius: 50%;
    opacity: 0;
    animation: musicDot 2.4s ease-out infinite;
}
@keyframes musicDot {
    0% { transform: scale(0.4); opacity: 0.8; }
    100% { transform: scale(1.5); opacity: 0; }
}
body.home .music-status__idle,
body.home .music-status__live { display: none; }
body.home .music[data-music-state="ready"] .music-status__soon { display: none; }
body.home .music[data-music-state="ready"] .music-status__idle { display: inline; }
body.home .music.is-playing .music-status__idle { display: none; }
body.home .music.is-playing .music-status__live { display: inline; }

body.home .music-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    max-width: 100%;
    margin: 0 0 0.45rem;
    overflow: hidden;
    color: #fff1de;
    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.2rem);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.14;
    text-wrap: balance;
}
body.home .music-title em {
    font-style: italic;
    background: linear-gradient(95deg, #f1d3a3 0%, #e0a45a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
body.home .music-artist {
    margin: 0 0 clamp(1.1rem, 2.4vw, 1.6rem);
    color: rgba(245, 236, 222, 0.55);
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

/* ---- Controls ---- */
body.home .music-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.9rem, 2.4vw, 1.4rem);
    margin-bottom: clamp(1.1rem, 2.4vw, 1.6rem);
}
body.home .music-btn {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid var(--hairline);
    border-radius: 50%;
    background: var(--glass);
    color: rgba(255, 244, 230, 0.88);
    cursor: pointer;
    transition: transform 0.35s var(--ease), background 0.35s var(--ease), border-color 0.35s var(--ease), color 0.35s var(--ease), box-shadow 0.35s var(--ease), opacity 0.35s var(--ease), filter 0.35s var(--ease);
}
body.home .music-btn:hover { border-color: var(--ember); color: var(--ember); transform: translateY(-2px); }
body.home .music-btn:active { transform: translateY(0) scale(0.95); }
body.home .music-btn--play {
    width: 68px;
    height: 68px;
    border: 0;
    background: linear-gradient(135deg, var(--ember), var(--ember-deep) 60%, #c4571f);
    color: #1d1006;
    box-shadow: 0 12px 34px rgba(255, 154, 60, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
body.home .music-btn--play:hover {
    color: #1d1006;
    background: linear-gradient(135deg, #ffb35e, var(--ember) 60%, var(--ember-deep));
    box-shadow: 0 16px 44px rgba(255, 154, 60, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
/* Nothing to play yet: dimmed but still focusable (aria-disabled, not disabled); a press explains why */
body.home .music-btn[aria-disabled="true"] { opacity: 0.62; cursor: default; }
body.home .music-btn[aria-disabled="true"]:hover { border-color: var(--hairline); color: rgba(255, 244, 230, 0.88); transform: none; }
body.home .music-btn--play[aria-disabled="true"] { opacity: 0.92; filter: saturate(0.78); box-shadow: 0 8px 24px rgba(255, 154, 60, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.28); }
body.home .music-btn--play[aria-disabled="true"]:hover { color: #1d1006; background: linear-gradient(135deg, var(--ember), var(--ember-deep) 60%, #c4571f); }

/* ---- Waveform scrubber: the bars are a mask, so one fill element draws the progress ---- */
body.home .music-progress {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    width: 100%;
    font-variant-numeric: tabular-nums;
}
body.home .music-time {
    flex: none;
    min-width: 2.7ch;
    color: rgba(245, 236, 222, 0.55);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
}
body.home .music-wave {
    --wave: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 288 100' preserveAspectRatio='none'><path d='M2 40.7V59.3M6 37.5V62.5M10 40.3V59.7M14 33.7V66.3M18 27.9V72.1M22 34.7V65.3M26 35.6V64.4M30 22.3V77.7M34 22.4V77.6M38 24V76M42 13.2V86.8M46 21.7V78.3M50 34.1V65.9M54 19.2V80.8M58 9.5V90.5M62 21.8V78.2M66 21.5V78.5M70 18.8V81.2M74 29V71M78 29.9V70.1M82 22.7V77.3M86 22.5V77.5M90 28.1V71.9M94 20.5V79.5M98 20V80M102 23.1V76.9M106 11V89M110 1.1V98.9M114 14.3V85.7M118 23.4V76.6M122 15.4V84.6M126 11.1V88.9M130 16.5V83.5M134 3.3V96.7M138 9.2V90.8M142 27.7V72.3M146 23.3V76.7M150 15.3V84.7M154 27.1V72.9M158 27.2V72.8M162 15.7V84.3M166 23.9V76.1M170 28.5V71.5M174 10.8V89.2M178 6V94M182 18.2V81.8M186 12.5V87.5M190 17V83M194 26V74M198 17.1V82.9M202 1.8V98.2M206 14.9V85.1M210 25.5V74.5M214 22.9V77.1M218 24.6V75.4M222 31.1V68.9M226 26.1V73.9M230 27.2V72.8M234 33.6V66.4M238 32.6V67.4M242 25.4V74.6M246 28.1V71.9M250 28.4V71.6M254 19.5V80.5M258 27.7V72.3M262 38.8V61.2M266 31.5V68.5M270 27.7V72.3M274 36.4V63.6M278 36.5V63.5M282 36V64M286 42.7V57.3' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/></svg>");
    position: relative;
    flex: 1;
    min-width: 0;
    height: 44px;
    border-radius: 10px;
    cursor: pointer;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}
body.home .music-wave[aria-disabled="true"] { cursor: default; }
body.home .music-wave:focus-visible { outline: 2px solid var(--ember); outline-offset: 4px; }
body.home .music-wave__bars {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: rgba(255, 226, 190, 0.2);
    -webkit-mask: var(--wave) center / 100% 100% no-repeat;
    mask: var(--wave) center / 100% 100% no-repeat;
    transition: filter 0.3s var(--ease);
}
body.home .music[data-music-state="ready"] .music-wave:hover .music-wave__bars { filter: brightness(1.25); }
body.home .music-wave__fill {
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--ember-rose), var(--ember) 55%, #ffd9a0);
}
/* idle: a slow ember glint passes over the quiet waveform */
body.home .music-wave__bars::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 38%;
    background: linear-gradient(90deg, transparent, rgba(255, 154, 60, 0.85), transparent);
    transform: translateX(-100%);
    animation: musicSweep 5.2s ease-in-out infinite;
}
@keyframes musicSweep {
    0% { transform: translateX(-100%); }
    70%, 100% { transform: translateX(270%); }
}
body.home .music[data-music-state="ready"] .music-wave__bars::after { display: none; }

/* A press on a dimmed control: the badge and record react, the live region explains */
body.home .music-now.is-nudged .music-status { animation: musicNudge 0.8s var(--ease); }
body.home .music-now.is-nudged .music-disc { animation: musicWobble 0.8s var(--ease); }
@keyframes musicNudge {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 154, 60, 0.55); }
    40% { transform: scale(1.07); box-shadow: 0 0 0 12px rgba(255, 154, 60, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 154, 60, 0); }
}
@keyframes musicWobble {
    0%, 100% { transform: rotate(0); }
    30% { transform: rotate(-9deg); }
    65% { transform: rotate(6deg); }
}

/* ---- Set list ---- */
body.home .music-sets {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: clamp(0.3rem, 1vw, 0.8rem) clamp(0.1rem, 0.8vw, 0.5rem);
}
body.home .music-sets__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--hairline);
}
body.home .music-sets__title {
    color: #fff1de;
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: -0.01em;
}
body.home .music-sets__count {
    color: rgba(245, 236, 222, 0.5);
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
body.home .music-tracklist {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.45rem;
    min-height: 190px;
    max-height: 340px;
    margin-bottom: 1.2rem;
    padding-right: 0.3rem;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 154, 60, 0.4) transparent;
}
body.home .music-empty {
    display: grid;
    justify-items: center;
    gap: 0.5rem;
    max-width: 22rem;
    margin: auto;
    padding: 1.2rem 0.8rem;
    text-align: center;
}
body.home .music-empty__icon {
    width: 62px;
    height: 62px;
    margin-bottom: 0.5rem;
    padding: 16px;
    border: 1px solid var(--hairline-strong);
    border-radius: 50%;
    background: rgba(255, 154, 60, 0.07);
    color: var(--ember);
}
body.home .music-empty__title {
    color: #fff1de;
    font-family: var(--font-serif);
    font-size: 1.2rem;
    line-height: 1.3;
}
body.home .music-empty__text {
    color: rgba(245, 236, 222, 0.62);
    font-size: 0.92rem;
    line-height: 1.55;
}

body.home .music-track {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: 0.8rem 1rem;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-s);
    background: rgba(255, 244, 230, 0.025);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
body.home .music-track:hover {
    background: rgba(255, 154, 60, 0.07);
    border-color: var(--hairline-strong);
    transform: translateX(3px);
}
body.home .music-track.is-active {
    background: rgba(255, 154, 60, 0.12);
    border-color: rgba(255, 154, 60, 0.5);
    box-shadow: 0 0 22px rgba(255, 154, 60, 0.1);
}
body.home .music-track__main {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}
body.home .music-track__num {
    flex: none;
    width: 1.5rem;
    color: rgba(245, 236, 222, 0.35);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
}
body.home .music-track.is-active .music-track__num { color: var(--ember); }
body.home .music-track__eq {
    display: none;
    flex: none;
    align-items: flex-end;
    gap: 2px;
    width: 1.5rem;
    height: 14px;
}
body.home .music-track__eq i {
    width: 3px;
    height: 100%;
    border-radius: 1px;
    background: var(--ember);
    transform-origin: bottom;
    animation: musicEq 1.2s ease-in-out infinite alternate;
}
body.home .music-track__eq i:nth-child(2) { animation-delay: 0.2s; animation-duration: 0.9s; }
body.home .music-track__eq i:nth-child(3) { animation-delay: 0.4s; animation-duration: 1.4s; }
@keyframes musicEq { from { transform: scaleY(0.2); } to { transform: scaleY(1); } }
body.home .music.is-playing .music-track.is-active .music-track__eq { display: flex; }
body.home .music.is-playing .music-track.is-active .music-track__num { display: none; }
body.home .music-track__name {
    overflow: hidden;
    color: rgba(245, 236, 222, 0.88);
    font-size: 0.95rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.3s var(--ease);
}
body.home .music-track:hover .music-track__name { color: #fff; }
body.home .music-track.is-active .music-track__name { color: var(--ember); font-weight: 600; }
body.home .music-track__time {
    flex: none;
    color: rgba(245, 236, 222, 0.45);
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}

body.home .music-follow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.95rem 1.2rem;
    border: 1px solid var(--hairline-strong);
    border-radius: 999px;
    background: var(--glass);
    color: #fff1de;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-decoration: none;
    text-transform: uppercase;
    transition: transform 0.35s var(--ease), background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
body.home .music-follow:hover {
    border-color: transparent;
    background: linear-gradient(135deg, var(--ember), var(--ember-deep));
    color: #1d1006;
    box-shadow: 0 14px 38px rgba(255, 154, 60, 0.35);
    transform: translateY(-2px);
}

/* Off screen: freeze the looping motion */
body.home .music.is-offscreen *,
body.home .music.is-offscreen *::before,
body.home .music.is-offscreen *::after { animation-play-state: paused !important; }

@media (max-width: 900px) {
    body.home .music-deck { grid-template-columns: minmax(0, 1fr); }
    body.home .music-tracklist { min-height: 0; max-height: 300px; }
    body.home .music-empty { padding: 0.8rem 0.4rem 1rem; }
}
@media (max-width: 520px) {
    body.home .music-deck { padding: 0.75rem; border-radius: var(--radius-m); }
    body.home .music-now { padding: 1.4rem 0.9rem 1.2rem; }
    body.home .music-btn { width: 44px; height: 44px; }
    body.home .music-btn--play { width: 62px; height: 62px; }
    body.home .music-wave { height: 38px; }
    body.home .music-time { font-size: 0.7rem; }
    body.home .music-sets__title { font-size: 1.3rem; }
}

/* --------------------------------------------------------------------------
   TESTIMONIALS / CONTACT / NEWSLETTER / FOOTER
   -------------------------------------------------------------------------- */
body.home .testimonial-card,
body.home .testimonial,
body.home .contact-form-wrapper,
body.home .contact-wrapper,
body.home .newsletter-container {
    border-radius: var(--radius-m);
    border: 1px solid var(--hairline);
    background: linear-gradient(160deg, var(--glass-strong), var(--glass));
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
body.home .contact input,
body.home .contact textarea,
body.home .newsletter input {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-s);
    color: var(--text-color);
    transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
body.home .contact input:focus,
body.home .contact textarea:focus,
body.home .newsletter input:focus {
    outline: none;
    border-color: var(--ember);
    box-shadow: 0 0 0 4px rgba(255, 154, 60, 0.15);
}
body.home .contact .btn,
body.home .newsletter .btn,
body.home .btn-primary {
    border-radius: 999px;
    border: 0;
    background: linear-gradient(135deg, var(--ember), var(--ember-deep));
    color: #1d1006;
    font-weight: 700;
    box-shadow: 0 10px 30px rgba(255, 154, 60, 0.3);
    transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
body.home .contact .btn:hover,
body.home .newsletter .btn:hover,
body.home .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(255, 154, 60, 0.45); }

body.home .footer {
    border-top: 1px solid var(--hairline);
    background: linear-gradient(180deg, var(--ink-1), var(--ink-0));
}

/* --------------------------------------------------------------------------
   OVERLAYS: cart drawer, product modal, email popup
   -------------------------------------------------------------------------- */
body.home .cart-drawer,
body.home .product-modal {
    background: rgba(16, 13, 10, 0.92);
    border-color: var(--hairline);
    backdrop-filter: blur(28px) saturate(1.3);
    -webkit-backdrop-filter: blur(28px) saturate(1.3);
}
body.home .product-modal { border-radius: var(--radius-l); }
body.home .email-capture-popup__card {
    border-radius: var(--radius-l);
    border: 1px solid var(--hairline-strong);
    background: rgba(16, 13, 10, 0.92);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.7), 0 0 80px rgba(255, 154, 60, 0.12);
}

/* --------------------------------------------------------------------------
   MOTION: refined reveals, focus, reduced motion
   -------------------------------------------------------------------------- */
body.home .reveal {
    transition: opacity 0.9s var(--ease), transform 0.9s var(--ease), filter 0.9s var(--ease);
}
body.home .reveal:not(.visible) { filter: blur(6px); }
body.home .reveal.visible { filter: none; }

body.home a:focus-visible,
body.home button:focus-visible,
body.home input:focus-visible,
body.home textarea:focus-visible {
    outline: 2px solid var(--ember);
    outline-offset: 3px;
}

@media (max-width: 768px) {
    body.home .site-top-fixed { padding-top: 0.5rem; }
    body.home .navbar,
    body.home .navbar.scrolled { border-radius: 22px; padding: 0.5rem 0.6rem 0.5rem 1rem; }
    body.home .hero-content { padding-top: 6rem; }
    body.home .hero-actions .btn { width: 100%; max-width: 320px; }
    body.home .product-card:hover { transform: none; }
}

@media (max-width: 480px) {
    body.home .navbar,
    body.home .navbar.scrolled { gap: 0.4rem; padding: 0.45rem 0.5rem 0.45rem 0.9rem; }
    body.home .logo { font-size: 0.82rem; letter-spacing: 0.04em; min-width: 0; }
    body.home .hamburger__label { display: none; }
    body.home .hamburger { padding: 0.42rem 0.7rem; }
    body.home .cart-btn { padding: 0.5rem 0.85rem; font-size: 0.72rem; white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
    body.home *,
    body.home *::before,
    body.home *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
    body.home .marquee__track { animation: none; }
    body.home .reveal:not(.visible) { filter: none; }
    html:has(body.home) { scroll-behavior: auto; }
}

@media (prefers-reduced-motion: reduce) {
    body.home .shop-reveal:not(.in-view) { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   JOURNEY: chapter rail, "Next" bridges, cross-links
   -------------------------------------------------------------------------- */
body.home .inline-link {
    color: var(--ember);
    text-decoration: underline;
    text-underline-offset: 4px;
    transition: color 0.3s var(--ease);
}
body.home .inline-link:hover { color: #ffd9a0; }
body.home .about-cta { margin-top: 1.4rem; }
body.home .gallery-cta { margin: clamp(1.4rem, 3vw, 2rem) 0 0; text-align: center; }

/* Fixed chapter rail: where you are, and a way to hop (wide screens only) */
body.home .chapter-rail {
    display: none;
    position: fixed;
    right: clamp(0.8rem, 1.6vw, 1.6rem);
    top: 50%;
    z-index: 900;
    transform: translateY(-50%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s var(--ease);
}
@media (min-width: 1360px) {
    body.home .chapter-rail { display: block; }
    body.home.rail-on .chapter-rail { opacity: 1; pointer-events: auto; }
}
body.home .chapter-rail ol { display: flex; flex-direction: column; gap: 0.15rem; margin: 0; padding: 0; list-style: none; }
body.home .chapter-rail a {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 0.75rem;
    padding: 0.45rem 0.2rem;
    color: rgba(245, 236, 222, 0.75);
    text-decoration: none;
}
body.home .chapter-rail a::before {
    content: "";
    flex: none;
    width: 9px;
    height: 9px;
    border: 1px solid rgba(255, 226, 190, 0.5);
    border-radius: 50%;
    transition: all 0.4s var(--ease);
}
body.home .chapter-rail a:hover::before,
body.home .chapter-rail a:focus-visible::before { border-color: var(--ember); }
body.home .chapter-rail a.is-active::before {
    border-color: var(--ember);
    background: var(--ember);
    box-shadow: 0 0 0 4px rgba(255, 154, 60, 0.18), 0 0 14px rgba(255, 154, 60, 0.7);
    transform: scale(1.25);
}
body.home .chapter-rail__label {
    padding: 0.25rem 0.65rem;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    background: rgba(16, 13, 10, 0.82);
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(6px);
    transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
body.home .chapter-rail a:hover .chapter-rail__label,
body.home .chapter-rail a:focus-visible .chapter-rail__label,
body.home .chapter-rail a.is-active .chapter-rail__label { opacity: 1; transform: none; }

/* Reserve the tiles' space while the catalog loads so nothing below jumps */
body.home .shop-tiles--loading {
    min-height: clamp(520px, 62vw, 780px);
    border-radius: var(--radius-m);
    background: linear-gradient(110deg, var(--glass) 30%, var(--glass-strong) 50%, var(--glass) 70%);
    background-size: 200% 100%;
    animation: shimmer 1.6s linear infinite;
}