/* ============================================================================
   REALIZED PRINTS — "LAMPLIT WORKSHOP" v2
   ----------------------------------------------------------------------------
   A premium, tactile redesign of the Catan Artisan page.
   Drop-in replacement for output.css. No HTML changes required.

   Design principles
     • Material over color — every surface has texture, grain, or directional light
     • One accent only — refined ember-brass (Linear/Arc-grade restraint)
     • Warm dark palette — lampblack, oiled walnut, aged paper, brass
     • Soft realism — noise + multi-stop gradients + inset hairlines, never neon
     • Mobile-first responsive — scales cleanly down to 360px

   Section material map
     Hero ............ oiled walnut bench-top + warm vignette + paper grain
     Trust bar ....... brushed pewter strip with an emissive hairline above/below
     Tier cards ...... waxed kraft (Core), tooled leather (Hero), pearl-vellum (Premium)
     Configurator .... aged parchment with subtle linen weave
     What's in box ... raw bench paper, warm side-lit
     Bonuses ......... linen-card stock, three muted gem accents
     Why this set .... smoked leather, grained, with shop-light vignette
     Final CTA ....... tinted parchment, calm and confident
     Footer .......... deep walnut + soft brass dust
   ============================================================================ */


/* ============================================================================
   1. DESIGN TOKENS
   ============================================================================ */
:root {
    /* ---- Surfaces (warm dark workshop) ---- */
    --bg-0:               #100c09;   /* page base — slightly cooler than pure black */
    --bg-1:               #1a1612;   /* primary surface */
    --bg-2:               #221d18;   /* elevated surface */
    --bg-3:               #2c251e;   /* highest surface / inputs */
    --bg-4:               #36302a;   /* hover / focus */

    /* ---- Light surfaces (parchment family for "sand-50" etc.) ---- */
    --paper-0:            #f6efe1;   /* warm cream */
    --paper-1:            #ede4d2;   /* aged paper */
    --paper-2:            #ddd0b8;   /* kraft */
    --paper-shadow:       #b8a684;   /* paper edge */

    /* ---- Text ---- */
    --text:               #f4ead9;
    --text-muted:         rgb(244 234 217 / 0.74);
    --text-dim:           rgb(244 234 217 / 0.52);
    --text-faint:         rgb(244 234 217 / 0.32);
    --text-on-paper:      #1d1813;
    --text-on-paper-mut:  rgb(29 24 19 / 0.72);
    --text-on-paper-dim:  rgb(29 24 19 / 0.55);

    /* ---- Accent — refined ember-brass (Linear/Arc restraint) ----
       Old: c47a3f (a touch hot/orange)
       New: c8884a — slightly more brass, less orange, reads premium       */
    --accent:             #c8884a;
    --accent-soft:        #e6b984;   /* glowing highlight */
    --accent-deep:        #9c6730;   /* hover / pressed */
    --accent-glow:        rgb(200 136 74 / 0.45);
    --accent-tint:        rgb(200 136 74 / 0.10);

    /* ---- Supporting metals ---- */
    --bronze:             #8a6f4f;
    --bronze-soft:        #b09376;
    --moss:               #6b7a5a;   /* one cool counterpoint */
    --moss-soft:          #8a9678;

    /* ---- Borders ---- */
    --border:             rgb(232 181 137 / 0.10);
    --border-strong:      rgb(232 181 137 / 0.20);
    --border-paper:       rgb(29 24 19 / 0.10);
    --border-paper-strong:rgb(29 24 19 / 0.18);

    /* ---- Shadows — layered, soft, never harsh ---- */
    --shadow-xs:  0 1px 2px rgb(0 0 0 / 0.20);
    --shadow-sm:  0 2px 6px -2px rgb(0 0 0 / 0.30),
                  0 4px 12px -4px rgb(0 0 0 / 0.20);
    --shadow-md:  0 8px 24px -8px rgb(0 0 0 / 0.45),
                  0 0 0 1px rgb(232 181 137 / 0.06);
    --shadow-lg:  0 16px 40px -16px rgb(0 0 0 / 0.55),
                  0 0 0 1px rgb(232 181 137 / 0.08),
                  inset 0 1px 0 rgb(232 181 137 / 0.04);
    --shadow-xl:  0 24px 60px -20px rgb(0 0 0 / 0.65),
                  0 0 0 1px rgb(232 181 137 / 0.10),
                  inset 0 1px 0 rgb(232 181 137 / 0.06);
    --shadow-glow:0 0 0 1px rgb(232 181 137 / 0.16),
                  0 24px 60px -20px rgb(0 0 0 / 0.70),
                  0 0 80px -30px rgb(200 136 74 / 0.35);

    /* ---- Paper-side shadows (for cards on cream backgrounds) ---- */
    --shadow-paper-sm: 0 1px 2px rgb(82 60 30 / 0.06),
                       0 2px 8px -2px rgb(82 60 30 / 0.10);
    --shadow-paper-md: 0 4px 12px -4px rgb(82 60 30 / 0.12),
                       0 12px 28px -10px rgb(82 60 30 / 0.18),
                       inset 0 1px 0 rgb(255 255 255 / 0.4);
    --shadow-paper-lg: 0 8px 20px -8px rgb(82 60 30 / 0.18),
                       0 24px 48px -16px rgb(82 60 30 / 0.22),
                       inset 0 1px 0 rgb(255 255 255 / 0.5);

    /* ---- Radii ---- */
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 20px;
    --r-xl: 28px;
    --r-2xl: 32px;

    /* ---- Type ---- */
    --font-serif: "Cormorant Garamond", ui-serif, "Iowan Old Style", Georgia, serif;
    --font-sans:  "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
                  Roboto, "Helvetica Neue", Arial, sans-serif;

    /* ---- Motion ---- */
    --ease:       cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
    --t-fast:     180ms;
    --t-base:     260ms;
    --t-slow:     420ms;

    /* ---- Layout ---- */
    --max-w: 80rem;       /* 1280px */
    --gutter: 1.25rem;    /* 20px */
    --gutter-lg: 2rem;    /* 32px */
}


/* ============================================================================
   2. RESETS & BASE
   ============================================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; color-scheme: dark; scroll-behavior: smooth; }
img, svg, video { display: block; max-width: 100%; height: auto; }
button { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

body {
    font-family: var(--font-sans);
    color: var(--text);
    background-color: var(--bg-0);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* Layered page background — warm vignette + faint grain pin-light.
       Two soft radials give the page a "lit-from-within" feel without
       competing with content. Paper grain is added per-section instead. */
    background-image:
        radial-gradient(72% 55% at 12% -8%,  rgb(200 136 74 / 0.08) 0%, transparent 60%),
        radial-gradient(60% 45% at 100% 100%, rgb(138 111 79 / 0.06) 0%, transparent 60%),
        radial-gradient(40% 30% at 50% 40%,   rgb(255 220 180 / 0.025) 0%, transparent 70%);
    background-attachment: fixed;
}

h1, h2, h3, h4 {
    font-family: var(--font-serif);
    font-weight: 500;
    letter-spacing: -0.012em;
    line-height: 1.12;
    color: var(--text);
}

::selection { background: var(--accent); color: #1a0f06; }

:focus-visible {
    outline: 2px solid var(--accent-soft);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    html { scroll-behavior: auto; }
}


/* ============================================================================
   3. REUSABLE TEXTURE LAYERS
   --------------------------------------------------------------------------
   SVG-encoded noise & weave patterns. Inlined as data URIs so there are
   ZERO extra network requests. All are tunable via opacity.
   ============================================================================ */

/* Fine paper grain — warm, neutral, tasteful.
   FIX: darker RGB values + higher alpha so the texture is actually visible
   when multiplied or overlaid against cream paper. Previous values were
   too close to the base color and produced an invisible texture. */
:root {
    --tex-paper:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.55  0 0 0 0 0.42  0 0 0 0 0.28  0 0 0 0.85 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");

    /* Coarser linen weave — for parchment sections */
    --tex-linen:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.6 0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.45  0 0 0 0 0.35  0 0 0 0 0.22  0 0 0 0.85 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");

    /* Brushed-metal striations (very subtle, horizontal) */
    --tex-brushed:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='200'><filter id='n'><feTurbulence type='turbulence' baseFrequency='0.02 1.4' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.9  0 0 0 0 0.78  0 0 0 0 0.6  0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");

    /* Wood-grain (vertical, soft) — for hero & footer accents */
    --tex-wood:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='300'><filter id='n'><feTurbulence type='turbulence' baseFrequency='0.012 1.1' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.35  0 0 0 0 0.22  0 0 0 0 0.12  0 0 0 0.7 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");

    /* Smoked-leather pebble grain (for dark "Why this set" section) */
    --tex-leather:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.4  0 0 0 0 0.28  0 0 0 0 0.18  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Utility: apply a texture as a non-interactive overlay on any positioned el. */
.tex-overlay { position: relative; isolation: isolate; }
.tex-overlay > * { position: relative; z-index: 1; }
.tex-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

/* Existing class on the page — keep it working but upgrade the look. */
.grain { position: relative; isolation: isolate; }
.grain > * { position: relative; z-index: 1; }
.grain::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--tex-paper);
    background-size: 220px 220px;
    mix-blend-mode: overlay;
    opacity: 0.18;
    pointer-events: none;
    z-index: 0;
}


/* ============================================================================
   4. LAYOUT UTILITIES (Tailwind class compatibility)
   --------------------------------------------------------------------------
   The HTML uses utility classes from a Tailwind build. We re-implement only
   what the page actually consumes — keeping bundle small and intentional.
   ============================================================================ */

/* --- container & spacing --- */
.max-w-7xl { max-width: var(--max-w); }
.max-w-6xl { max-width: 72rem; }
.max-w-5xl { max-width: 64rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-xl  { max-width: 36rem; }
.max-w-md  { max-width: 28rem; }
.max-w-sm  { max-width: 24rem; }
.mx-auto   { margin-inline: auto; }

.px-2  { padding-inline: 0.5rem; }
.px-3  { padding-inline: 0.75rem; }
.px-4  { padding-inline: 1rem; }
.px-5  { padding-inline: 1.25rem; }
.px-6  { padding-inline: 1.5rem; }
.px-7  { padding-inline: 1.75rem; }
.px-8  { padding-inline: 2rem; }
.py-1  { padding-block: 0.25rem; }
.py-1\.5 { padding-block: 0.375rem; }
.py-2  { padding-block: 0.5rem; }
.py-2\.5 { padding-block: 0.625rem; }
.py-3  { padding-block: 0.75rem; }
.py-3\.5 { padding-block: 0.875rem; }
.py-4  { padding-block: 1rem; }
.py-6  { padding-block: 1.5rem; }
.py-8  { padding-block: 2rem; }
.py-14 { padding-block: 3.5rem; }
.py-16 { padding-block: 4rem; }
.py-20 { padding-block: 5rem; }
.pt-5  { padding-top: 1.25rem; }
.pt-8  { padding-top: 2rem; }
.pt-16 { padding-top: 4rem; }
.pb-8  { padding-bottom: 2rem; }
.pb-12 { padding-bottom: 3rem; }
.p-2   { padding: 0.5rem; }
.p-4   { padding: 1rem; }
.p-5   { padding: 1.25rem; }
.p-6   { padding: 1.5rem; }
.p-7   { padding: 1.75rem; }
.p-8   { padding: 2rem; }

.mt-0\.5 { margin-top: 0.125rem; }
.mt-1    { margin-top: 0.25rem; }
.mt-1\.5 { margin-top: 0.375rem; }
.mt-2    { margin-top: 0.5rem; }
.mt-3    { margin-top: 0.75rem; }
.mt-4    { margin-top: 1rem; }
.mt-5    { margin-top: 1.25rem; }
.mt-6    { margin-top: 1.5rem; }
.mt-8    { margin-top: 2rem; }
.mt-9    { margin-top: 2.25rem; }
.mt-10   { margin-top: 2.5rem; }
.mb-1    { margin-bottom: 0.25rem; }
.mb-1\.5 { margin-bottom: 0.375rem; }
.mb-2    { margin-bottom: 0.5rem; }
.mb-3    { margin-bottom: 0.75rem; }
.mb-4    { margin-bottom: 1rem; }
.mb-5    { margin-bottom: 1.25rem; }
.mb-6    { margin-bottom: 1.5rem; }
.mb-8    { margin-bottom: 2rem; }
.mb-10   { margin-bottom: 2.5rem; }
.mb-12   { margin-bottom: 3rem; }
.ml-1\.5 { margin-left: 0.375rem; }
.mr-1\.5 { margin-right: 0.375rem; }
.-top-6  { top: -1.5rem; }
.-left-6 { left: -1.5rem; }
.-bottom-6 { bottom: -1.5rem; }
.-right-6  { right: -1.5rem; }

@media (min-width: 1024px) {
    .lg\:px-8 { padding-inline: 2rem; }
    .lg\:py-20 { padding-block: 5rem; }
    .lg\:py-28 { padding-block: 7rem; }
    .lg\:p-6  { padding: 1.5rem; }
    .lg\:p-8  { padding: 2rem; }
    .lg\:p-10 { padding: 2.5rem; }
}

/* --- flex & grid --- */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.hidden { display: none; }
.block { display: block; }
.inline-block { display: inline-block; }
.items-start  { align-items: flex-start; }
.items-center { align-items: center; }
.items-end    { align-items: flex-end; }
.items-baseline { align-items: baseline; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.flex-col   { flex-direction: column; }
.flex-wrap  { flex-wrap: wrap; }
.flex-1     { flex: 1 1 0%; }
.gap-1\.5 { gap: 0.375rem; }
.gap-2  { gap: 0.5rem; }
.gap-3  { gap: 0.75rem; }
.gap-4  { gap: 1rem; }
.gap-5  { gap: 1.25rem; }
.gap-6  { gap: 1.5rem; }
.gap-8  { gap: 2rem; }
.gap-9  { gap: 2.25rem; }
.gap-10 { gap: 2.5rem; }
.gap-12 { gap: 3rem; }
.gap-14 { gap: 3.5rem; }
.gap-x-12 { column-gap: 3rem; }
.gap-x-6  { column-gap: 1.5rem; }
.gap-y-2  { row-gap: 0.5rem; }
.gap-y-10 { row-gap: 2.5rem; }
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }

.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (min-width: 640px) {
    .sm\:inline-flex { display: inline-flex; }
    .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
    .md\:block { display: block; }
    .md\:flex-row { flex-direction: row; }
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .md\:text-left { text-align: left; }
    .md\:text-5xl { font-size: 3rem; }
    .md\:justify-start { justify-content: flex-start; }
}
@media (min-width: 1024px) {
    .lg\:flex { display: flex; }
    .lg\:hidden { display: none; }
    .lg\:inline-flex { display: inline-flex; }
    .lg\:block { display: block; }
    .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .lg\:col-span-2 { grid-column: span 2 / span 2; }
    .lg\:col-span-6 { grid-column: span 6 / span 6; }
    .lg\:gap-8 { gap: 2rem; }
    .lg\:text-5xl { font-size: 3rem; }
    .lg\:text-6xl { font-size: 3.75rem; }
}

.relative { position: relative; }
.absolute { position: absolute; }
.sticky   { position: sticky; }
.fixed    { position: fixed; }
.inset-0  { inset: 0; }
.top-0    { top: 0; }
.right-0  { right: 0; }
.left-0   { left: 0; }
.bottom-5 { bottom: 1.25rem; }
.left-5   { left: 1.25rem; }
.right-5  { right: 1.25rem; }
.top-5    { top: 1.25rem; }
.z-10     { z-index: 10; }
.z-50     { z-index: 50; }
.overflow-hidden { overflow: hidden; }

.aspect-\[4\/5\]   { aspect-ratio: 4 / 5; }
.aspect-\[16\/10\] { aspect-ratio: 16 / 10; }
.aspect-\[4\/2\]   { aspect-ratio: 4 / 2; }
.aspect-square     { aspect-ratio: 1 / 1; }

.w-full { width: 100%; }
.w-9    { width: 2.25rem; }
.w-12   { width: 3rem; }
.w-8    { width: 2rem; }
.w-1\.5 { width: 0.375rem; }
.h-full { height: 100%; }
.h-9    { height: 2.25rem; }
.h-12   { height: 3rem; }
.h-8    { height: 2rem; }
.h-18   { height: 4.5rem; }
.h-1\.5 { height: 0.375rem; }
.h-6    { height: 1.5rem; }

.object-cover { object-fit: cover; }

.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

.text-\[10px\]  { font-size: 0.625rem; line-height: 0.875rem; }
.text-\[11px\]  { font-size: 0.6875rem; line-height: 1rem; }
.text-\[12px\]  { font-size: 0.75rem; line-height: 1rem; }
.text-xs   { font-size: 0.75rem; line-height: 1rem; }
.text-sm   { font-size: 0.875rem; line-height: 1.4; }
.text-base { font-size: 1rem; line-height: 1.5; }
.text-lg   { font-size: 1.125rem; line-height: 1.5; }
.text-xl   { font-size: 1.25rem; line-height: 1.4; }
.text-2xl  { font-size: 1.5rem; line-height: 1.3; }
.text-3xl  { font-size: 1.875rem; line-height: 1.2; }
.text-4xl  { font-size: 2.25rem; line-height: 1.15; }
.text-5xl  { font-size: 3rem; line-height: 1.1; }
.text-6xl  { font-size: 3.75rem; line-height: 1.05; }

.font-medium    { font-weight: 500; }
.font-semibold  { font-weight: 600; }
.font-bold      { font-weight: 700; }
.font-serif     { font-family: var(--font-serif); }
.font-sans      { font-family: var(--font-sans); }
.italic         { font-style: italic; }
.uppercase      { text-transform: uppercase; }
.tracking-tight   { letter-spacing: -0.012em; }
.tracking-wider   { letter-spacing: 0.05em; }
.tracking-\[0\.2em\] { letter-spacing: 0.2em; }
.leading-none     { line-height: 1; }
.leading-tight    { line-height: 1.15; }
.leading-snug     { line-height: 1.35; }
.leading-relaxed  { line-height: 1.65; }
.leading-\[1\.05\] { line-height: 1.05; }

.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.rounded     { border-radius: 0.25rem; }
.rounded-lg  { border-radius: var(--r-sm); }
.rounded-xl  { border-radius: 12px; }
.rounded-2xl { border-radius: var(--r-md); }
.rounded-3xl { border-radius: var(--r-xl); }
.rounded-full{ border-radius: 9999px; }
.rounded-bl-2xl { border-bottom-left-radius: var(--r-md); }

.border    { border: 1px solid var(--border); }
.border-2  { border: 2px solid var(--border); }
.border-t  { border-top: 1px solid var(--border); }
.border-b  { border-bottom: 1px solid var(--border); }
.border-y  { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

.transition { transition: all var(--t-base) var(--ease); }


/* ============================================================================
   5. COLOR-CLASS COMPATIBILITY (re-skin to "Lamplit Workshop")
   --------------------------------------------------------------------------
   The HTML uses Tailwind tokens like bg-sand-50, text-honey-600, bg-forest-900.
   Each is remapped to the new palette so we don't have to touch the markup.
   ============================================================================ */

.bg-sand-50  { background-color: var(--paper-0); color: var(--text-on-paper); }
.bg-sand-100 { background-color: var(--paper-1); color: var(--text-on-paper); }
.bg-sand-200 { background-color: var(--paper-2); }
.bg-forest-700 { background-color: var(--bronze); }
.bg-forest-800 { background-color: #2c241c; }
.bg-forest-900 { background-color: var(--bg-1); color: var(--text); }
.bg-sage-600   { background-color: var(--moss); }
.bg-honey-600  { background-color: var(--accent); color: #1a1108; }

.bg-sand-100\/60   { background-color: rgb(237 228 210 / 0.6); }
.bg-sand-50\/95    { background-color: rgb(246 239 225 / 0.95); }
.bg-sand-50\/10    { background-color: rgb(246 239 225 / 0.10); }
.bg-sand-50\/5     { background-color: rgb(246 239 225 / 0.05); }
.bg-honey-600\/10  { background-color: rgb(200 136 74 / 0.10); }
.bg-honey-600\/20  { background-color: rgb(200 136 74 / 0.20); }

.border-sand-200       { border-color: var(--paper-shadow); }
.border-sand-100\/10   { border-color: rgb(237 228 210 / 0.10); }
.border-honey-600\/20  { border-color: rgb(200 136 74 / 0.20); }
.border-honey-600\/40  { border-color: rgb(200 136 74 / 0.40); }

.text-sand-50   { color: var(--text); }
.text-sand-100  { color: var(--text); }
.text-sand-100\/90 { color: rgb(244 234 217 / 0.90); }
.text-sand-100\/85 { color: rgb(244 234 217 / 0.85); }
.text-sand-100\/80 { color: rgb(244 234 217 / 0.80); }
.text-sand-100\/70 { color: rgb(244 234 217 / 0.70); }
.text-sand-100\/60 { color: rgb(244 234 217 / 0.60); }
.text-sand-100\/55 { color: rgb(244 234 217 / 0.55); }
.text-sand-300\/70 { color: rgb(180 164 138 / 0.85); }
.text-honey-400 { color: var(--accent-soft); }
.text-honey-600 { color: var(--accent); }
.text-honey-700 { color: var(--accent-deep); }
.text-forest-700  { color: var(--bronze); }
.text-forest-900  { color: var(--text-on-paper); }
.text-forest-900\/85 { color: rgb(29 24 19 / 0.85); }
.text-forest-900\/80 { color: rgb(29 24 19 / 0.78); }
.text-forest-900\/75 { color: rgb(29 24 19 / 0.74); }
.text-forest-900\/70 { color: rgb(29 24 19 / 0.70); }
.text-forest-900\/65 { color: rgb(29 24 19 / 0.65); }
.text-forest-900\/60 { color: rgb(29 24 19 / 0.60); }
.text-forest-900\/55 { color: rgb(29 24 19 / 0.55); }
.text-forest-900\/40 { color: rgb(29 24 19 / 0.40); }
.text-red-200 { color: #fca5a5; }
.bg-red-500\/15 { background-color: rgb(239 68 68 / 0.15); }
.border-red-500\/30 { border-color: rgb(239 68 68 / 0.30); }

.opacity-10 { opacity: 0.10; }
.opacity-70 { opacity: 0.70; }
.opacity-75 { opacity: 0.75; }
.opacity-80 { opacity: 0.80; }
.opacity-90 { opacity: 0.90; }

.from-sand-50  { /* used via .bg-gradient-to-br */ }
.via-sand-100  {}
.to-sand-200   {}
.bg-gradient-to-br {
    /* Hero gradient — replaced wholesale with a layered "oiled walnut" treatment.
       We KEEP this rule generic so any incidental .bg-gradient-to-br still gets
       a tasteful default; the hero gets a richer override below. */
    background-image: linear-gradient(135deg, var(--paper-0) 0%, var(--paper-1) 50%, var(--paper-2) 100%);
}

.backdrop-blur { backdrop-filter: blur(10px) saturate(135%); -webkit-backdrop-filter: blur(10px) saturate(135%); }


/* ============================================================================
   6. NAV / STICKY HEADER — frosted lampblack with a brass hairline
   ============================================================================ */
header.sticky {
    background: rgb(16 12 9 / 0.72);
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 0 rgb(232 181 137 / 0.04),
                0 8px 24px -16px rgb(0 0 0 / 0.6);
}

/* Brand mark — small hover lift.
   FIX: Explicitly style the logo square so the "R" is visible on any
   background. Without this, the inherited cascade can hide it. */
header a.group span:first-child {
    background: linear-gradient(180deg, #3a3128 0%, #1d1813 100%);
    color: var(--accent-soft);
    box-shadow:
        inset 0 1px 0 rgb(232 181 137 / 0.18),
        inset 0 -1px 0 rgb(0 0 0 / 0.40),
        0 0 0 1px rgb(232 181 137 / 0.12);
    transition: all var(--t-base) var(--ease);
}
header a.group:hover span:first-child {
    background: linear-gradient(180deg, var(--accent-soft), var(--accent), var(--accent-deep));
    color: #1a0f06;
    box-shadow:
        inset 0 1px 0 rgb(255 240 210 / 0.45),
        inset 0 -1px 0 rgb(0 0 0 / 0.20),
        0 4px 10px -4px rgb(200 136 74 / 0.5);
}

/* Mobile menu panel — same warm dark surface as the nav */
#mobileMenu {
    background: var(--bg-1);
    border-top: 1px solid var(--border);
    color: var(--text);
}
#mobileMenu .py-2 { color: var(--text-muted); }
#mobileMenu .py-2:hover { color: var(--accent-soft); }


/* ============================================================================
   7. HERO — "oiled walnut bench-top under shop light"
   --------------------------------------------------------------------------
   Layered, in z-order:
     1. Base linear gradient — visible warm-cream → deeper tan (left → right)
     2. Directional shop-light from upper-left (cream highlight)
     3. Warm vignette in lower-right (deeper umber)
     4. Wood-grain + paper-grain texture overlay (visible, multiply blend)
     5. Inset top highlight + brass hairline at bottom
   The previous version used `multiply` on a near-white base which neutralized
   the textures completely. This version uses higher opacity, deeper base
   colors, and `overlay`/`soft-light` blends so the material actually reads.
   ============================================================================ */
section.grain { /* the hero section uses .grain */
    background:
        /* directional shop-light from upper-left — much warmer and more visible */
        radial-gradient(70% 60% at 12% 5%, rgb(255 232 195 / 0.95) 0%, transparent 55%),
        /* deep warm vignette in lower-right */
        radial-gradient(75% 70% at 100% 100%, rgb(184 130 76 / 0.35) 0%, transparent 60%),
        /* mid-tone warmth, center-right */
        radial-gradient(50% 50% at 75% 50%, rgb(212 178 130 / 0.18) 0%, transparent 60%),
        /* base diagonal gradient — clear progression from cream to tan */
        linear-gradient(135deg, #f8f1e2 0%, #ede0c2 45%, #d8c39a 100%);
    color: var(--text-on-paper);
    position: relative;
    isolation: isolate;
}
/* Hero text takes the warm-on-paper palette */
section.grain a,
section.grain p,
section.grain span:not(.btn-primary span):not([class*="bg-"]) { color: inherit; }
section.grain h1 { color: var(--text-on-paper); }
section.grain .text-honey-600 { color: var(--accent-deep); } /* contrast on paper */

/* Texture layer — paper grain + soft wood grain. Uses `overlay` so the
   texture is visible against the cream base (multiply was making it
   disappear into the light tones). Higher opacity than before. */
section.grain::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    background-image: var(--tex-paper), var(--tex-wood) !important;
    background-size: 240px 240px, 700px 350px !important;
    background-position: 0 0, 0 0 !important;
    mix-blend-mode: overlay !important;
    opacity: 0.55 !important;
    pointer-events: none !important;
}
/* Soft top highlight + brass hairline at bottom */
section.grain::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgb(200 136 74 / 0.45), transparent);
    box-shadow: 0 0 14px rgb(200 136 74 / 0.25);
    z-index: 3;
}

/* Override the absolute gradient div inside the hero (the .from-sand-50 element)
   so it doesn't double up on the new background */
section.grain .absolute.inset-0.bg-gradient-to-br {
    background: transparent !important;
}

/* HERO LAYOUT FIX
   Problem: the right column's tall 4/5 image makes the hero giant, and
   `items-center` centers the short left column, leaving huge empty space.
   Fix: anchor columns to the top, cap the image height, and tighten the
   vertical rhythm so the hero earns its real estate.                    */
section.grain > .relative.max-w-7xl {
    align-items: start;
}
@media (min-width: 1024px) {
    /* On desktop, cap the hero image so it doesn't dominate the viewport */
    section.grain .lg\:col-span-6.relative .rounded-3xl.overflow-hidden.aspect-\[4\/5\] {
        aspect-ratio: auto;
        max-height: 36rem;
        height: 36rem;
    }
    /* Give the left column a little top breathing room so it aligns
       with the image's top edge, not the section padding edge */
    section.grain .lg\:col-span-6.fade-in {
        padding-top: 0.5rem;
    }
}

/* "LIMITED EDITION" pill — embossed brass */
section.grain .bg-honey-600 {
    background: linear-gradient(180deg, var(--accent-soft) 0%, var(--accent) 60%, var(--accent-deep) 100%);
    color: #1a1108;
    box-shadow:
        inset 0 1px 0 rgb(255 235 200 / 0.45),
        inset 0 -1px 0 rgb(0 0 0 / 0.20),
        0 4px 12px -4px rgb(200 136 74 / 0.5);
    text-shadow: 0 1px 0 rgb(255 240 210 / 0.25);
}

/* Floating "Premium Bundle" card on the hero image — frosted vellum.
   FIX: explicit dark text color so the headline is visible on the cream card.
   Without this, the inner serif headline inherits from the hero section
   color stack and ends up too light to read. */
section.grain .bg-sand-50\/95 {
    background:
        linear-gradient(180deg, rgb(255 250 240 / 0.94), rgb(246 239 225 / 0.90));
    color: var(--text-on-paper);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    box-shadow:
        0 1px 0 rgb(255 255 255 / 0.6) inset,
        0 8px 24px -8px rgb(0 0 0 / 0.30),
        0 0 0 1px rgb(29 24 19 / 0.08);
}
section.grain .bg-sand-50\/95 .font-serif { color: var(--text-on-paper); }
section.grain .bg-sand-50\/95 .text-forest-900\/70 { color: rgb(29 24 19 / 0.70); }

/* Floating "Starting at" tag — kraft paper card */
section.grain .bg-sand-50.rounded-2xl {
    background:
        linear-gradient(180deg, var(--paper-0), var(--paper-1));
    box-shadow: var(--shadow-paper-md);
    border: 1px solid var(--border-paper);
    position: relative;
}
section.grain .bg-sand-50.rounded-2xl::before {
    content: "";
    position: absolute; inset: 0; border-radius: inherit;
    background-image: var(--tex-paper);
    background-size: 200px;
    mix-blend-mode: multiply;
    opacity: 0.18;
    pointer-events: none;
}

/* "Only 5 sets available" pill — soft brass tint, quiet */
section.grain .bg-honey-600\/10 {
    background: linear-gradient(180deg, rgb(200 136 74 / 0.12), rgb(200 136 74 / 0.06));
    border-color: rgb(200 136 74 / 0.28);
    color: var(--accent-deep);
    box-shadow: inset 0 1px 0 rgb(255 235 200 / 0.4);
}


/* ============================================================================
   8. BUTTONS — Primary (brass), Ghost (etched), Card-select
   ============================================================================ */

/* Primary: liquid brass with soft inner light + outer ember glow */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 1.5rem;
    border-radius: var(--r-md);
    font-weight: 600;
    color: #1a0f06;
    background:
        linear-gradient(180deg, var(--accent-soft) 0%, var(--accent) 50%, var(--accent-deep) 100%);
    box-shadow:
        inset 0 1px 0 rgb(255 240 210 / 0.45),
        inset 0 -1px 0 rgb(0 0 0 / 0.22),
        0 1px 0 rgb(0 0 0 / 0.04),
        0 8px 22px -8px rgb(200 136 74 / 0.55),
        0 0 0 1px rgb(232 181 137 / 0.22);
    text-shadow: 0 1px 0 rgb(255 240 210 / 0.25);
    transition: transform var(--t-base) var(--ease),
                box-shadow var(--t-base) var(--ease),
                filter var(--t-base) var(--ease);
    will-change: transform;
}
.btn-primary:hover {
    transform: translateY(-1px);
    filter: brightness(1.05) saturate(1.05);
    box-shadow:
        inset 0 1px 0 rgb(255 240 210 / 0.55),
        inset 0 -1px 0 rgb(0 0 0 / 0.22),
        0 14px 32px -10px rgb(200 136 74 / 0.65),
        0 0 0 1px rgb(232 181 137 / 0.32);
}
.btn-primary:active { transform: translateY(0); filter: brightness(0.98); }

/* Ghost: etched into the surface, brass-on-touch */
.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 1.5rem;
    border-radius: var(--r-md);
    font-weight: 600;
    color: var(--text-on-paper);
    background:
        linear-gradient(180deg, rgb(255 255 255 / 0.4), rgb(255 255 255 / 0));
    border: 1px solid rgb(29 24 19 / 0.18);
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 0.5),
        0 1px 2px rgb(82 60 30 / 0.06);
    transition: all var(--t-base) var(--ease);
}
.btn-ghost:hover {
    background: rgb(255 255 255 / 0.6);
    border-color: var(--accent);
    color: var(--accent-deep);
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 0.6),
        0 4px 12px -4px rgb(200 136 74 / 0.25),
        0 0 0 1px rgb(200 136 74 / 0.18);
}

/* When a ghost button sits on a DARK section, swap its base treatment. */
.bg-forest-900 .btn-ghost,
section.py-20.bg-forest-900 .btn-ghost {
    color: var(--text);
    background: rgb(232 181 137 / 0.04);
    border-color: var(--border-strong);
    box-shadow: inset 0 1px 0 rgb(232 181 137 / 0.06);
}
.bg-forest-900 .btn-ghost:hover {
    background: rgb(232 181 137 / 0.10);
    border-color: rgb(232 181 137 / 0.40);
    color: var(--accent-soft);
}


/* ============================================================================
   9. TRUST BAR — brushed pewter strip
   ============================================================================ */
section.bg-forest-900.text-sand-100:not(.py-20):not(#footer) {
    background:
        /* faint horizontal striations */
        linear-gradient(180deg, rgb(255 255 255 / 0.025), transparent 30%, rgb(0 0 0 / 0.15)),
        linear-gradient(90deg, var(--bg-2) 0%, var(--bg-1) 50%, var(--bg-2) 100%);
    position: relative;
    border-top: 1px solid rgb(232 181 137 / 0.10);
    border-bottom: 1px solid rgb(232 181 137 / 0.10);
    overflow: hidden;
}
section.bg-forest-900.text-sand-100:not(.py-20):not(#footer)::before {
    content: "";
    position: absolute; inset: 0;
    background-image: var(--tex-brushed);
    background-size: 400px 200px;
    mix-blend-mode: overlay;
    opacity: 0.35;
    pointer-events: none;
}


/* ============================================================================
   10. TIER CARDS — three different materials for three different stories
   ============================================================================ */

/* --- COMMON: card-hover lift --- */
.card-hover {
    transition: transform var(--t-slow) var(--ease-out),
                box-shadow var(--t-slow) var(--ease-out),
                border-color var(--t-slow) var(--ease-out);
}

/* --- CORE: waxed kraft paper --- */
section#tiers article.bg-sand-50 {
    background:
        linear-gradient(180deg, var(--paper-0) 0%, var(--paper-1) 100%);
    border: 1px solid var(--border-paper);
    box-shadow: var(--shadow-paper-md);
    position: relative;
}
section#tiers article.bg-sand-50::before {
    content: "";
    position: absolute; inset: 0; border-radius: inherit;
    background-image: var(--tex-paper);
    background-size: 220px;
    mix-blend-mode: multiply;
    opacity: 0.16;
    pointer-events: none;
    z-index: 0;
}
section#tiers article.bg-sand-50 > * { position: relative; z-index: 1; }

section#tiers article.bg-sand-50:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-paper-lg);
    border-color: var(--accent);
}

/* --- HERO (popular): tooled leather, dark oxblood-walnut --- */
.tier-popular {
    position: relative;
    background:
        linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 100%);
    color: var(--text);
    box-shadow: var(--shadow-xl);
    isolation: isolate;
}
.tier-popular::before {
    /* pebble grain */
    content: "";
    position: absolute; inset: 0; border-radius: inherit;
    background-image: var(--tex-leather);
    background-size: 260px;
    mix-blend-mode: overlay;
    opacity: 0.45;
    pointer-events: none;
    z-index: 0;
}
.tier-popular::after {
    /* brass border-image (the gradient ring) */
    content: "";
    position: absolute; inset: 0; border-radius: inherit;
    padding: 1px;
    background:
        linear-gradient(180deg,
            var(--accent-soft) 0%,
            var(--accent) 30%,
            rgb(138 111 79 / 0.4) 100%);
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    z-index: 2;
}
.tier-popular > * { position: relative; z-index: 1; }
.tier-popular:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-glow);
}

/* --- PREMIUM: pearl-vellum (cream paper with brass border) --- */
section#tiers article.border-honey-600\/40 {
    background:
        radial-gradient(120% 80% at 50% 0%, rgb(255 235 200 / 0.5) 0%, transparent 60%),
        linear-gradient(180deg, var(--paper-0) 0%, var(--paper-1) 100%);
    border: 2px solid rgb(200 136 74 / 0.35);
    box-shadow:
        var(--shadow-paper-md),
        0 0 0 4px rgb(200 136 74 / 0.06),
        0 0 60px -20px rgb(200 136 74 / 0.20);
    position: relative;
}
section#tiers article.border-honey-600\/40::before {
    content: "";
    position: absolute; inset: 0; border-radius: inherit;
    background-image: var(--tex-linen);
    background-size: 180px;
    mix-blend-mode: multiply;
    opacity: 0.18;
    pointer-events: none;
    z-index: 0;
}
section#tiers article.border-honey-600\/40 > * { position: relative; z-index: 1; }
section#tiers article.border-honey-600\/40:hover {
    transform: translateY(-6px);
    box-shadow:
        var(--shadow-paper-lg),
        0 0 0 4px rgb(200 136 74 / 0.10),
        0 0 80px -20px rgb(200 136 74 / 0.30);
    border-color: var(--accent);
}

/* Tier badges (MOST POPULAR / LIMITED EDITION) — embossed brass tabs */
section#tiers article .absolute.bg-honey-600,
section#tiers article .absolute.bg-forest-800 {
    background:
        linear-gradient(180deg, var(--accent-soft) 0%, var(--accent) 60%, var(--accent-deep) 100%);
    color: #1a1108 !important;
    box-shadow:
        inset 0 1px 0 rgb(255 235 200 / 0.45),
        inset 0 -1px 0 rgb(0 0 0 / 0.20),
        0 6px 14px -6px rgb(0 0 0 / 0.5);
    letter-spacing: 0.08em;
}
section#tiers article .absolute.bg-forest-800 {
    background: linear-gradient(180deg, #423629 0%, #2c241c 100%);
    color: var(--accent-soft) !important;
    box-shadow:
        inset 0 1px 0 rgb(232 181 137 / 0.18),
        inset 0 -1px 0 rgb(0 0 0 / 0.40),
        0 6px 14px -6px rgb(0 0 0 / 0.5);
}

/* Tier image wrappers — inset emissive ring for depth */
section#tiers article .aspect-\[16\/10\] {
    position: relative;
    box-shadow: inset 0 -20px 40px -20px rgb(0 0 0 / 0.4);
}
section#tiers article .aspect-\[16\/10\]::after {
    content: "";
    position: absolute; inset: 0;
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 0.10),
        inset 0 0 0 1px rgb(0 0 0 / 0.08);
    pointer-events: none;
}


/* ============================================================================
   11. CONFIGURATOR SECTION — aged parchment with linen weave
   ============================================================================ */
section#configurator {
    background:
        /* visible warm radial in upper-right */
        radial-gradient(60% 60% at 100% 0%, rgb(200 136 74 / 0.18) 0%, transparent 60%),
        /* visible deep umber radial in lower-left */
        radial-gradient(55% 55% at 0% 100%, rgb(165 95 42 / 0.20) 0%, transparent 60%),
        /* base parchment gradient with real visible variation */
        linear-gradient(180deg, #ede0c2 0%, #f4ead0 40%, #e8d8b4 100%);
    color: var(--text-on-paper);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
section#configurator::before {
    content: "";
    position: absolute; inset: 0;
    background-image: var(--tex-linen);
    background-size: 180px;
    mix-blend-mode: multiply;
    opacity: 0.55;
    pointer-events: none;
}
/* Emissive top + bottom hairlines (replacing the flat .border-y) */
section#configurator,
section.bg-sand-100\/60 {
    border-top: 0; border-bottom: 0;
}
section#configurator::after {
    content: "";
    position: absolute; left: 0; right: 0; top: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgb(200 136 74 / 0.35), transparent);
    box-shadow: 0 0 14px rgb(200 136 74 / 0.20);
}

/* Configurator inner cards — cream paper on parchment */
section#configurator .bg-sand-50.rounded-3xl {
    background:
        linear-gradient(180deg, #fbf5e8 0%, var(--paper-0) 100%);
    border: 1px solid var(--border-paper);
    box-shadow: var(--shadow-paper-md);
    position: relative;
}
section#configurator .bg-sand-50.rounded-3xl::before {
    content: "";
    position: absolute; inset: 0; border-radius: inherit;
    background-image: var(--tex-paper);
    background-size: 220px;
    mix-blend-mode: multiply;
    opacity: 0.12;
    pointer-events: none;
    z-index: 0;
}
section#configurator .bg-sand-50.rounded-3xl > * { position: relative; z-index: 1; }

/* Live-price bar (dark) on parchment — "drawer pulled open" */
section#configurator .bg-forest-900.rounded-3xl {
    background:
        linear-gradient(180deg, var(--bg-2), var(--bg-1));
    color: var(--text);
    box-shadow:
        inset 0 1px 0 rgb(232 181 137 / 0.08),
        var(--shadow-xl);
    position: relative;
    overflow: hidden;
}
section#configurator .bg-forest-900.rounded-3xl::before {
    content: "";
    position: absolute; inset: 0;
    background-image: var(--tex-leather);
    background-size: 260px;
    mix-blend-mode: overlay;
    opacity: 0.35;
    pointer-events: none;
}
section#configurator .bg-forest-900.rounded-3xl > * { position: relative; z-index: 1; }

/* Step number circles — forged brass */
section#configurator .w-8.h-8.rounded-full.bg-forest-800 {
    background: linear-gradient(180deg, #3a3128, #1d1813);
    color: var(--accent-soft);
    box-shadow:
        inset 0 1px 0 rgb(232 181 137 / 0.20),
        inset 0 -1px 0 rgb(0 0 0 / 0.4),
        0 0 0 1px rgb(232 181 137 / 0.15);
}
section#configurator .w-8.h-8.rounded-full.bg-honey-600 {
    background: linear-gradient(180deg, var(--accent-soft), var(--accent), var(--accent-deep));
    color: #1a0f06;
    box-shadow:
        inset 0 1px 0 rgb(255 240 210 / 0.5),
        inset 0 -1px 0 rgb(0 0 0 / 0.25),
        0 4px 10px -4px rgb(200 136 74 / 0.5);
}


/* ============================================================================
   12. OPTION CHIPS (.opt) & SWATCHES — tactile press-buttons
   ============================================================================ */
.opt {
    cursor: pointer;
    border: 1px solid var(--border-paper);
    background:
        linear-gradient(180deg, rgb(255 255 255 / 0.5), rgb(255 255 255 / 0.1));
    color: var(--text-on-paper);
    border-radius: var(--r-md);
    padding: 0.75rem 1rem;
    transition: all var(--t-base) var(--ease);
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 0.6),
        0 1px 2px rgb(82 60 30 / 0.04);
    position: relative;
}
.opt:hover {
    border-color: var(--accent);
    background: rgb(255 255 255 / 0.7);
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 0.7),
        0 4px 12px -4px rgb(200 136 74 / 0.18),
        0 0 0 1px rgb(200 136 74 / 0.18);
    transform: translateY(-1px);
}
.opt.active {
    border-color: var(--accent);
    background:
        linear-gradient(180deg,
            rgb(200 136 74 / 0.16) 0%,
            rgb(200 136 74 / 0.06) 100%);
    box-shadow:
        inset 0 1px 0 rgb(255 240 210 / 0.4),
        0 0 0 1px var(--accent),
        0 8px 20px -8px rgb(200 136 74 / 0.35);
    color: var(--text-on-paper);
}
.opt.locked,
.opt:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(0.2);
}
.opt.locked:hover,
.opt:disabled:hover {
    transform: none;
    border-color: var(--border-paper);
    background: linear-gradient(180deg, rgb(255 255 255 / 0.5), rgb(255 255 255 / 0.1));
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 0.6),
        0 1px 2px rgb(82 60 30 / 0.04);
}

/* Swatches in the configurator — color tile with inset shadow */
.swatch {
    cursor: pointer;
    background: rgb(255 255 255 / 0.5);
    border-radius: var(--r-md);
    transition: all var(--t-base) var(--ease);
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 0.6),
        0 1px 2px rgb(82 60 30 / 0.04);
}
.swatch:hover {
    border-color: var(--accent) !important;
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 0.7),
        0 4px 12px -4px rgb(200 136 74 / 0.18);
}
.swatch.border-forest-800 {
    border-color: var(--accent) !important;
    box-shadow:
        inset 0 1px 0 rgb(255 240 210 / 0.4),
        0 0 0 1px var(--accent),
        0 8px 20px -8px rgb(200 136 74 / 0.35);
}


/* ============================================================================
   13. INPUTS
   ============================================================================ */
input[type="text"], input[type="email"], textarea {
    background: rgb(255 255 255 / 0.65);
    color: var(--text-on-paper);
    border: 1px solid rgb(29 24 19 / 0.18);
    border-radius: var(--r-md);
    padding: 0.75rem 1rem;
    transition: all var(--t-base) var(--ease);
    box-shadow:
        inset 0 1px 2px rgb(82 60 30 / 0.06),
        inset 0 1px 0 rgb(255 255 255 / 0.6);
}
input[type="text"]:focus, input[type="email"]:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
    background: rgb(255 255 255 / 0.85);
    box-shadow:
        inset 0 1px 2px rgb(82 60 30 / 0.06),
        0 0 0 3px rgb(200 136 74 / 0.20);
}
input::placeholder, textarea::placeholder { color: var(--text-on-paper-dim); }

/* On dark sections, swap to dark inputs */
.bg-forest-900 input[type="text"],
.bg-forest-900 input[type="email"],
.bg-forest-900 textarea {
    background: var(--bg-3);
    color: var(--text);
    border-color: var(--border-strong);
    box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.3);
}


/* ============================================================================
   14. WHAT-YOU-GET, BONUSES, FINAL CTA — paper-section family
   ============================================================================ */

/* Bonuses + Final CTA share a parchment treatment, but each gets a different
   color temperature and a subtle accent glow placement to keep them distinct. */
section.bg-sand-100\/60,
section.bg-sand-100 {
    background:
        /* warm radial in upper-right, visible */
        radial-gradient(55% 55% at 100% 0%, rgb(200 136 74 / 0.18) 0%, transparent 60%),
        /* secondary deep umber radial in lower-left */
        radial-gradient(50% 50% at 0% 100%, rgb(138 111 79 / 0.16) 0%, transparent 60%),
        /* deepened parchment base — clear progression */
        linear-gradient(180deg, #ede0c2 0%, #f2e7cb 50%, #e6d5b0 100%);
    color: var(--text-on-paper);
    position: relative;
    overflow: hidden;
    border-top: 0; border-bottom: 0;
    isolation: isolate;
}
section.bg-sand-100\/60::before,
section.bg-sand-100::before {
    content: "";
    position: absolute; inset: 0;
    background-image: var(--tex-linen);
    background-size: 180px;
    mix-blend-mode: multiply;
    opacity: 0.50;
    pointer-events: none;
}
section.bg-sand-100\/60::after,
section.bg-sand-100::after {
    /* top brass hairline only (no double border) */
    content: "";
    position: absolute; left: 0; right: 0; top: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgb(200 136 74 / 0.30), transparent);
    box-shadow: 0 0 12px rgb(200 136 74 / 0.18);
}

/* Bonus cards (.bg-sand-50 inside parchment) — slightly raised cream paper */
section.bg-sand-100\/60 .bg-sand-50 {
    background:
        linear-gradient(180deg, #fbf5e8, var(--paper-0));
    border: 1px solid var(--border-paper);
    box-shadow: var(--shadow-paper-md);
    position: relative;
}
section.bg-sand-100\/60 .bg-sand-50::before {
    content: "";
    position: absolute; inset: 0; border-radius: inherit;
    background-image: var(--tex-paper);
    background-size: 220px;
    mix-blend-mode: multiply;
    opacity: 0.14;
    pointer-events: none;
}
section.bg-sand-100\/60 .bg-sand-50:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-paper-lg);
}

/* Bonus icon tiles — soft embossed pucks in three distinct materials */
section.bg-sand-100\/60 .w-12.h-12.bg-forest-800 {
    background: linear-gradient(180deg, #3a3128, #1d1813);
    box-shadow:
        inset 0 1px 0 rgb(232 181 137 / 0.18),
        inset 0 -1px 0 rgb(0 0 0 / 0.4),
        0 4px 10px -4px rgb(0 0 0 / 0.4);
}
section.bg-sand-100\/60 .w-12.h-12.bg-honey-600 {
    background: linear-gradient(180deg, var(--accent-soft), var(--accent), var(--accent-deep));
    box-shadow:
        inset 0 1px 0 rgb(255 240 210 / 0.5),
        inset 0 -1px 0 rgb(0 0 0 / 0.25),
        0 4px 10px -4px rgb(200 136 74 / 0.5);
}
section.bg-sand-100\/60 .w-12.h-12.bg-sage-600 {
    background: linear-gradient(180deg, var(--moss-soft), var(--moss));
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 0.18),
        inset 0 -1px 0 rgb(0 0 0 / 0.25),
        0 4px 10px -4px rgb(0 0 0 / 0.3);
}


/* ============================================================================
   15. WHY-THIS-SET — smoked leather, shop-light vignette
   ============================================================================ */
section.py-20.bg-forest-900,
section.lg\:py-28.bg-forest-900 {
    background:
        radial-gradient(60% 50% at 0% 0%, rgb(200 136 74 / 0.10) 0%, transparent 60%),
        radial-gradient(50% 50% at 100% 100%, rgb(165 95 42 / 0.08) 0%, transparent 60%),
        linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 50%, var(--bg-1) 100%);
    position: relative;
    overflow: hidden;
}
section.py-20.bg-forest-900::before,
section.lg\:py-28.bg-forest-900::before {
    content: "";
    position: absolute; inset: 0;
    background-image: var(--tex-leather);
    background-size: 260px;
    mix-blend-mode: overlay;
    opacity: 0.30;
    pointer-events: none;
}
/* Top + bottom emissive hairlines for the smoked-leather block */
section.py-20.bg-forest-900::after,
section.lg\:py-28.bg-forest-900::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgb(200 136 74 / 0.35), transparent);
    box-shadow: 0 0 12px rgb(200 136 74 / 0.18);
}

/* Quote figures — frosted-glass cards on smoked leather */
section.py-20.bg-forest-900 .bg-sand-50\/5,
section.lg\:py-28.bg-forest-900 .bg-sand-50\/5 {
    background:
        linear-gradient(180deg, rgb(232 181 137 / 0.06), rgb(232 181 137 / 0.02));
    border: 1px solid rgb(232 181 137 / 0.14);
    backdrop-filter: blur(8px) saturate(140%);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    box-shadow:
        inset 0 1px 0 rgb(232 181 137 / 0.10),
        0 12px 30px -12px rgb(0 0 0 / 0.5);
    transition: all var(--t-slow) var(--ease-out);
}
section.py-20.bg-forest-900 .bg-sand-50\/5:hover,
section.lg\:py-28.bg-forest-900 .bg-sand-50\/5:hover {
    transform: translateY(-4px);
    border-color: rgb(232 181 137 / 0.30);
    box-shadow:
        inset 0 1px 0 rgb(232 181 137 / 0.16),
        0 20px 50px -16px rgb(0 0 0 / 0.6),
        0 0 60px -20px rgb(200 136 74 / 0.25);
}


/* ============================================================================
   16. ROUNDED IMAGE WRAPPERS — inset emissive hairline ring
   ============================================================================ */
.rounded-3xl.overflow-hidden,
.rounded-2xl.overflow-hidden {
    position: relative;
}
.rounded-3xl.overflow-hidden::after,
.rounded-2xl.overflow-hidden::after {
    content: "";
    position: absolute; inset: 0;
    border-radius: inherit;
    box-shadow:
        inset 0 0 0 1px rgb(232 181 137 / 0.14),
        inset 0 1px 0 rgb(255 255 255 / 0.04);
    pointer-events: none;
    z-index: 2;
}


/* ============================================================================
   17. SHADOWS (legacy class names used by the HTML)
   ============================================================================ */
.shadow-soft { box-shadow: var(--shadow-md); }
.shadow-glow {
    box-shadow:
        var(--shadow-xl),
        0 0 80px -30px rgb(200 136 74 / 0.30);
}


/* ============================================================================
   18. PULSE DOT (warm brass)
   ============================================================================ */
.pulse-dot {
    width: 0.5rem; height: 0.5rem;
    border-radius: 9999px;
    background: var(--accent-soft);
    box-shadow: 0 0 0 0 rgb(232 181 137 / 0.6);
    animation: pulse-glow 2s var(--ease) infinite;
    display: inline-block;
}
@keyframes pulse-glow {
    0%   { box-shadow: 0 0 0 0 rgb(232 181 137 / 0.5); }
    70%  { box-shadow: 0 0 0 10px rgb(232 181 137 / 0); }
    100% { box-shadow: 0 0 0 0 rgb(232 181 137 / 0); }
}


/* ============================================================================
   19. FADE-IN
   ============================================================================ */
.fade-in {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 700ms var(--ease-out),
                transform 700ms var(--ease-out);
}
.fade-in.visible { opacity: 1; transform: none; }


/* ============================================================================
   20. FOOTER — deep walnut + faint brass dust
   ============================================================================ */
footer#footer {
    background:
        radial-gradient(60% 80% at 0% 0%, rgb(200 136 74 / 0.08) 0%, transparent 55%),
        radial-gradient(50% 60% at 100% 100%, rgb(138 111 79 / 0.05) 0%, transparent 60%),
        linear-gradient(180deg, var(--bg-1) 0%, #0c0907 100%);
    color: var(--text);
    position: relative;
    overflow: hidden;
}
footer#footer::before {
    content: "";
    position: absolute; inset: 0;
    background-image: var(--tex-wood);
    background-size: 600px 300px;
    mix-blend-mode: overlay;
    opacity: 0.20;
    pointer-events: none;
}
footer#footer::after {
    /* top brass hairline */
    content: "";
    position: absolute; left: 0; right: 0; top: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgb(200 136 74 / 0.35), transparent);
    box-shadow: 0 0 14px rgb(200 136 74 / 0.20);
}
footer#footer > * { position: relative; z-index: 1; }
footer#footer .bg-honey-600 {
    background: linear-gradient(180deg, var(--accent-soft), var(--accent), var(--accent-deep));
    box-shadow:
        inset 0 1px 0 rgb(255 240 210 / 0.45),
        inset 0 -1px 0 rgb(0 0 0 / 0.20),
        0 4px 10px -4px rgb(200 136 74 / 0.5);
}


/* ============================================================================
   21. SECTION-LEVEL TYPOGRAPHY POLISH
   ============================================================================ */

/* Stretch the serif on big headlines for editorial feel */
h1, h2.font-serif {
    font-weight: 500;
    font-feature-settings: "liga" 1, "dlig" 1, "kern" 1;
}
.font-serif.italic { font-weight: 400; }

/* Eyebrow labels — subtle uppercase brass */
.text-honey-600.uppercase,
.text-honey-700.uppercase,
.text-honey-400.uppercase {
    font-weight: 600;
}

/* Drop-cap-ish indents and tighter leading on long-form lists */
.space-y-3 > li.flex { line-height: 1.55; }


/* ============================================================================
   22. RESPONSIVE NUDGES
   ============================================================================ */
@media (max-width: 640px) {
    h1.text-4xl,
    h1.text-5xl,
    h1.text-6xl { font-size: clamp(2.1rem, 8vw, 2.8rem); }
    h2.text-3xl,
    h2.text-4xl,
    h2.text-5xl,
    h2.text-6xl { font-size: clamp(1.75rem, 6.5vw, 2.4rem); }
    section.py-20 { padding-block: 3.5rem; }
    .rounded-3xl { border-radius: var(--r-lg); }
}

/* ============================================================================
   23. PRINT
   ============================================================================ */
@media print {
    *, *::before, *::after { box-shadow: none !important; text-shadow: none !important; }
    body { background: white; color: black; }
    .grain::before, [class*="bg-"]::before, [class*="bg-"]::after { display: none !important; }
}

/* ============================================================================
   END — REALIZED PRINTS / LAMPLIT WORKSHOP v2
   ============================================================================ */