/* ===================================================================
   COORG TO CUP — design system
   A coffee house rooted in Kodagu (Coorg), built for the Kodava okka.
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,900;1,9..144,400;1,9..144,500&family=Work+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  /* ---- palette ---- */
  --ink:        #2F2927;   /* deep coffee brown */
  --husk:       #F6F2EC;   /* warm ivory / parchment */
  --husk-deep:  #EDE5D5;   /* deeper card / border tone on husk */
  --ghat:       #1F2E1C;   /* matcha / wet-canopy green — kept as dark tone */
  --ghat-light: #2D4027;
  --ghat-haze:  #B9C4AC;   /* misty sage, text on --ghat */
  --cherry:     #A8472E;   /* ripe cherry red, primary accent */
  --cherry-deep:#7E331F;
  --brass:      #C8A15A;   /* Kodagu coffee gold */
  --brass-light:#D8BC7B;   /* soft harvest gold */
  --earth:      #7A6452;   /* muted earth brown */
  --line:       #B7A79A;   /* light line / subtle detail */
  --paper-line: rgba(47,41,39,0.13);

  --font-display: 'Fraunces', 'Iowan Old Style', serif;
  --font-body: 'Work Sans', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', monospace;

  --container: 1320px;
  --gutter: clamp(1.25rem, 5vw, 4rem);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-soft: cubic-bezier(.4,.0,.2,1);
}

/* ---------------------------------------------------------------- reset */
*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: auto; height:100%; background: #1F2E1C; }
*,*::before,*::after{ box-sizing: border-box; }
img,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p,figure{ margin:0; }
button{ font:inherit; background:none; border:none; cursor:pointer; color:inherit; }
input{ font:inherit; }

body{
  margin:0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--husk);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection{ background: var(--brass); color: var(--ink); }

:focus-visible{
  outline: 2px solid var(--cherry);
  outline-offset: 3px;
}

/* paper grain — fixed, subtle, multiply */
.grain{
  position: fixed; inset:0; z-index: 999; pointer-events:none;
  opacity:.05; mix-blend-mode:multiply;
  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%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------------------------------------------------------------- type */
.eyebrow{
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--earth);
  display:flex; align-items:center; gap:.6em;
}
.eyebrow::before{
  content:''; width:6px; height:6px; border-radius:50%;
  background: var(--brass); flex-shrink:0;
}
.on-dark .eyebrow{ color: var(--brass-light); }
.on-dark .eyebrow::before{ background: var(--brass-light); }

h1, .h1, h2, .h2, h3, .h3{
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.02;
}
.display{
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(3.2rem, 9.4vw, 8.4rem);
  line-height: .96;
  letter-spacing: -.01em;
}
.h1{ font-size: clamp(2.6rem, 6.4vw, 5rem); font-weight:600; }
.h2{ font-size: clamp(2.1rem, 4.6vw, 3.4rem); font-weight:600; }
.h3{ font-size: clamp(1.4rem, 2.4vw, 1.85rem); font-weight:500; }
.lede{
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.55;
  font-weight: 400;
  color: var(--earth);
  max-width: 38em;
}
.on-dark .lede{ color: var(--ghat-haze); }
p.body-copy{ max-width: 36em; font-size: 1.02rem; line-height:1.7; color: color-mix(in srgb, var(--ink) 88%, var(--earth)); }
.on-dark p.body-copy{ color: var(--ghat-haze); }

.serif-italic{ font-family: var(--font-display); font-style: italic; font-weight: 500; }

.stamp{
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--earth);
}
.on-dark .stamp{ color: color-mix(in srgb, var(--ghat-haze) 80%, transparent); }

/* ---------------------------------------------------------------- layout */
.wrap{ max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
section{ position: relative; }
.section-pad{ padding: clamp(5rem, 11vw, 9rem) 0; }
.on-dark{ background: var(--ghat); color: var(--husk); }
.rule{
  height:1px; background: var(--line); border:0; margin:0; opacity:.45;
}
.on-dark .rule{ background: rgba(241,233,216,.14); }

/* reveal-on-scroll */
[data-reveal]{
  opacity:0; transform: translateY(28px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
[data-reveal].is-in{ opacity:1; transform:none; }
[data-reveal-stagger] > *{ transition-delay: calc(var(--i,0) * 90ms); }

@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1; transform:none; transition:none; }
  .marquee__track{ animation: none !important; }
}

/* ---------------------------------------------------------------- nav */
.nav{
  position: fixed; top:0; left:0; right:0; z-index: 500;
  padding: clamp(1rem, 2.4vw, 1.6rem) var(--gutter);
  display:flex; align-items:center; justify-content:space-between;
  font-family: var(--font-mono); font-size:.76rem; letter-spacing:.06em; text-transform:uppercase;
  transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
  border-bottom: 1px solid rgba(246, 242, 236, 0.1);
  color: #F6F2EC;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
.nav.is-solid{
  background: rgba(27, 23, 18, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: rgba(246, 242, 236, 0.15);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  color: #F6F2EC;
}

/* Fixed uniform navbar for inner pages (story.html, products.html) */
body.nav-page .nav{
  background: rgba(27, 23, 18, 0.95) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(246, 242, 236, 0.15) !important;
  color: #F6F2EC !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25) !important;
}
.nav__mark{
  font-family: var(--font-display); font-weight:700; font-size: 1.15rem;
  letter-spacing: .02em; text-transform:none; color: #F6F2EC;
}
.nav__mark sup{ font-family: var(--font-mono); font-size:.6rem; color: var(--brass-light); top:-.7em; }
.nav__links{ display:flex; gap: clamp(1.4rem, 3vw, 2.6rem); align-items:center; }
.nav__links a{ position:relative; padding:.2em 0; color: #F6F2EC; }
.nav__links a::after{
  content:''; position:absolute; left:0; right:100%; bottom:-2px; height:1px;
  background: var(--brass-light); transition: right .35s var(--ease);
}
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after{ right:0; }
.nav__links a[aria-current="page"]{ color: var(--brass-light); }

.nav__cta{
  border:1px solid rgba(246, 242, 236, 0.4); padding:.55em 1.2em; border-radius: 100px;
  background: rgba(246, 242, 236, 0.12); color: #F6F2EC;
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.nav__cta:hover{
  background: var(--husk); color: var(--ink); border-color: var(--husk);
  text-shadow: none;
}

.nav__burger{ display:none; flex-direction:column; gap:5px; width:26px; color: #F6F2EC; }
.nav__burger span{ height:2px; background:currentColor; width:100%; border-radius:1px; }

.menu-overlay{
  position: fixed; inset:0; background: var(--ghat); color:var(--husk);
  z-index: 600; display:flex; flex-direction:column; justify-content:center;
  padding: var(--gutter);
  transform: translateY(-100%); transition: transform .55s var(--ease);
}
.menu-overlay.is-open{ transform: translateY(0); }
.menu-overlay a{ font-family:var(--font-display); font-size: clamp(2.4rem,9vw,4.6rem); font-weight:600; display:block; padding:.18em 0; }
.menu-overlay__close{ position:absolute; top: clamp(1rem,2.4vw,1.6rem); right: var(--gutter); font-family:var(--font-mono); font-size:.8rem; letter-spacing:.1em; }
.menu-overlay__foot{ margin-top: 2.4rem; display:flex; gap:2rem; font-family:var(--font-mono); font-size:.78rem; color: var(--ghat-haze); }

@media (max-width: 880px){
  .nav__links{ display:none; }
  .nav__burger{ display:flex; }
}

/* ---------------------------------------------------------------- buttons */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family: var(--font-mono); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
  padding: .95em 1.6em; border-radius: 100px;
  border: 1px solid var(--ink);
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.btn:hover{ background: var(--ink); color: var(--husk); transform: translateY(-2px); }
.btn--solid{ background: var(--brass); border-color: var(--brass); color: var(--ink); }
.btn--solid:hover{ background: var(--earth); border-color: var(--earth); color: var(--husk); }
.on-dark .btn{ border-color: var(--husk); }
.on-dark .btn:hover{ background: var(--husk); color: var(--ghat); }
.btn__arrow{ transition: transform .35s var(--ease); }
.btn:hover .btn__arrow{ transform: translateX(4px); }

/* ---------------------------------------------------------------- hero */
.hero{
  position: relative;
  min-height: 100vh; display:flex; flex-direction:column; justify-content:flex-end;
  padding-top: 8rem; padding-bottom: 3.5rem;
  background-image:
    linear-gradient(180deg, rgba(27,23,18,0.68) 0%, rgba(27,23,18,0.58) 55%, rgba(27,23,18,0.85) 100%),
    url('images/coorg-roastery-miniature.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--husk);
  overflow:hidden;
}
.hero .eyebrow{ color: var(--brass-light); }
.hero .eyebrow::before{ background: var(--brass-light); }
.hero__canopy{
  position:absolute; inset:0; z-index:0; opacity:.18; pointer-events:none;
}
.hero__row{ position:relative; z-index:2; }
.hero__title{ overflow:hidden; color: var(--husk); }
.hero__title .display{ display:block; color: var(--husk); text-shadow: 0 2px 12px rgba(0,0,0,0.6); }
.hero__title-line{ display:block; transform: translateY(100%); transition: transform 1s var(--ease); }
.hero.is-loaded .hero__title-line{ transform: translateY(0); }
.hero__title-line:nth-child(2){ transition-delay: .08s; }
.hero__title-line:nth-child(3){ transition-delay: .16s; }

.hero .lede{ color: rgba(246,242,236,0.92); text-shadow: 0 1px 4px rgba(0,0,0,0.6); }

.hero .btn--solid{ background: var(--husk); color: var(--ink); border-color: var(--husk); }
.hero .btn--solid:hover{ background: var(--brass-light); color: var(--ink); border-color: var(--brass-light); }
.hero .btn:not(.btn--solid){ color: var(--husk); border-color: rgba(246,242,236,0.35); }
.hero .btn:not(.btn--solid):hover{ background: rgba(246,242,236,0.15); border-color: var(--husk); }

.hero__meta{
  display:flex; flex-wrap:wrap; gap: clamp(1.6rem,4vw,3.4rem);
  margin-top: clamp(2.4rem, 5vw, 3.6rem);
  padding-top: 1.8rem; border-top:1px solid rgba(246,242,236,0.22);
  color: rgba(246,242,236,0.9);
}
.hero__meta-item{ max-width: 17em; }
.hero__meta-item .stamp{ display:block; margin-bottom:.4em; color: var(--brass-light); }

.scroll-cue{
  position:absolute; right: var(--gutter); bottom: 2.2rem; z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  font-family: var(--font-mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  writing-mode: vertical-rl; color: var(--husk);
}
.scroll-cue__line{ width:1px; height:46px; background: rgba(246,242,236,0.4); writing-mode:horizontal-tb; }
.scroll-cue__line::after{
  content:''; display:block; width:100%; height:30%; background: var(--brass-light);
  animation: cueDrop 2.2s var(--ease-soft) infinite;
}
@keyframes cueDrop{ 0%{ transform: translateY(-10%);} 100%{ transform: translateY(330%);} }

/* ---------------------------------------------------------------- marquee */
.marquee{
  border-top: 1px solid var(--paper-line); border-bottom: 1px solid var(--paper-line);
  overflow:hidden; padding: 1.1rem 0;
}
.marquee__track{
  display:flex; width: max-content; gap: 3rem;
  animation: marquee 32s linear infinite;
  font-family: var(--font-mono); font-size:.8rem; letter-spacing:.07em; text-transform:uppercase;
  white-space:nowrap;
}
.marquee__track span{ display:flex; align-items:center; gap:3rem; }
.marquee__track span::after{ content:'◆'; color: var(--brass); font-size:.6rem; }
@keyframes marquee{ to{ transform: translateX(-50%); } }

/* ---------------------------------------------------------------- grid helpers */
.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,5rem); align-items:center; }
.grid-12{ display:grid; grid-template-columns: repeat(12,1fr); gap: clamp(1.2rem,2.4vw,2rem); }
@media (max-width: 880px){
  .grid-2{ grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- figure / caption */
figure.framed{ position:relative; }
figure.framed img{ width:100%; height:100%; object-fit:cover; }
figure.framed figcaption{
  margin-top: .9rem; display:flex; justify-content:space-between; gap:1rem;
  font-family: var(--font-mono); font-size:.72rem; letter-spacing:.04em;
  color: color-mix(in srgb, var(--ink) 60%, transparent);
}
.on-dark figure.framed figcaption{ color: var(--ghat-haze); }
.frame-tag{
  position:absolute; top:1rem; left:1rem; z-index:2;
  background: var(--brass); color: var(--ink);
  font-family: var(--font-mono); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase;
  padding:.4em .7em;
}

/* ---------------------------------------------------------------- line-art draw ---- */
.line-draw path, .line-draw circle, .line-draw line{
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  transition: stroke-dashoffset 2.2s var(--ease);
}
.line-draw.is-in path, .line-draw.is-in circle, .line-draw.is-in line{ stroke-dashoffset: 0; }

/* ---------------------------------------------------------------- footer */
.footer{
  margin-top: auto;
  background: var(--ghat); color: var(--husk);
}
.footer__top{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: clamp(2rem,4vw,3rem); padding-bottom: 3rem; }
.footer__brand .display{ font-size: clamp(2.4rem,5vw,3.6rem); }
.footer__col h4{ font-family: var(--font-mono); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color: var(--brass-light); margin-bottom: 1.1rem; }
.footer__col a, .footer__col li{ display:block; margin-bottom:.6rem; color: var(--ghat-haze); }
.footer__col a:hover{ color: var(--husk); }
.footer__bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem;
  padding: 1.6rem 0 2rem; border-top:1px solid rgba(241,233,216,.14);
  font-family: var(--font-mono); font-size:.72rem; color: var(--ghat-haze); letter-spacing:.04em;
}
.newsletter{ display:flex; border-bottom: 1px solid var(--ghat-haze); padding-bottom:.6rem; gap:1rem; }
.newsletter input{ background:none; border:none; color: var(--husk); flex:1; font-size:.95rem; }
.newsletter input::placeholder{ color: var(--ghat-haze); }
.newsletter button{ font-family: var(--font-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; }

@media (max-width: 880px){
  .footer__top{ grid-template-columns: 1fr 1fr; }
  .footer__brand{ grid-column: 1 / -1; margin-bottom:1rem; }
}



/* ---------------------------------------------------------------- utilities */
.tag-row{ display:flex; flex-wrap:wrap; gap:.6rem; }
.tag{
  font-family: var(--font-mono); font-size:.7rem; letter-spacing:.05em; text-transform:uppercase;
  border:1px solid var(--line); border-radius:100px; padding:.4em .9em; color: var(--earth);
}
.on-dark .tag{ border-color: rgba(241,233,216,.22); }
.num{ font-family: var(--font-mono); }

/* svg ink helpers */
.ink-line{ fill:none; stroke: var(--ink); stroke-width:1.1; stroke-linecap:round; stroke-linejoin:round; }
.brass-line{ fill:none; stroke: var(--brass); stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; }
.cherry-fill{ fill: var(--cherry); }
.brass-fill{ fill: var(--brass); }
.husk-fill{ fill: var(--husk); }
.husk-line{ fill:none; stroke: var(--husk); stroke-width:1.1; stroke-linecap:round; }
.haze-line{ fill:none; stroke: var(--ghat-haze); stroke-width:1; stroke-linecap:round; }

.center{ text-align:center; }
.mt-0{ margin-top:0; }
.flex-between{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }

/* ---------------------------------------------------------------- timeline (Alternating Left/Right Blocks) */
.timeline{ position:relative; padding:1.5rem 0; }
.timeline::before{
  content:''; position:absolute; left:50%; top:0; bottom:0; width:2px;
  background: var(--paper-line); transform: translateX(-50%);
}

.timeline-item{
  width: calc(50% - 2.5rem);
  margin-bottom: 3.5rem;
  position: relative;
}

/* Left block */
.timeline-item--left{
  margin-left: 0;
  margin-right: auto;
  text-align: right;
}
.timeline-item--left::before{
  content: '';
  position: absolute;
  right: calc(-2.5rem - 6px);
  top: 1.8rem;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--brass);
  border: 2px solid var(--husk);
  box-shadow: 0 0 0 3px rgba(200, 161, 90, 0.25);
  z-index: 3;
}
.timeline-item--left .timeline-media{
  margin-left: auto;
}

/* Right block */
.timeline-item--right{
  margin-left: auto;
  margin-right: 0;
  text-align: left;
}
.timeline-item--right::before{
  content: '';
  position: absolute;
  left: calc(-2.5rem - 6px);
  top: 1.8rem;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--brass);
  border: 2px solid var(--husk);
  box-shadow: 0 0 0 3px rgba(200, 161, 90, 0.25);
  z-index: 3;
}
.timeline-item--right .timeline-media{
  margin-right: auto;
}

.timeline-media{
  width: 100%;
  max-width: 440px;
  margin-top: 1.2rem;
}
.timeline-media img{
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.09);
  border: 1px solid var(--paper-line);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.timeline-media img:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.14);
}

.timeline-item .stamp{
  font-family: var(--font-mono); font-size:.78rem; letter-spacing:.12em;
  color: var(--brass); display:inline-block; margin-bottom:.3rem; font-weight:500;
}

@media (max-width: 768px){
  .timeline::before{ left: 16px; transform: none; }
  .timeline-item{
    width: calc(100% - 32px);
    margin-left: 32px !important;
    margin-right: 0 !important;
    text-align: left !important;
  }
  .timeline-item::before{
    left: -22px !important;
    right: auto !important;
    top: 0.4rem !important;
  }
  .timeline-item--left .timeline-media, .timeline-item--right .timeline-media{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ---------------------------------------------------------------- full bleed figure */
.bleed{ width:100%; position:relative; overflow:hidden; background: var(--ghat); }
.bleed img{ width:100%; height: clamp(360px, 78vh, 760px); object-fit:cover; display:block; }
.bleed__caption{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; justify-content:space-between; align-items:flex-end; gap:1rem;
  padding: var(--gutter); flex-wrap:wrap;
  background: linear-gradient(180deg, transparent, rgba(27,23,18,.78));
}
.bleed__caption .stamp{ color: var(--husk-deep); }
.page-head{ padding: clamp(7.5rem,16vw,10.5rem) 0 clamp(2.5rem,6vw,4rem); }

/* ---------------------------------------------------------------- filter pills */
.filter-row{ display:flex; gap:.7rem; flex-wrap:wrap; }
.filter-pill{
  font-family: var(--font-mono); font-size:.74rem; letter-spacing:.06em; text-transform:uppercase;
  border:1px solid var(--paper-line); border-radius:100px; padding:.55em 1.1em;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.filter-pill{ color: var(--earth); }
.filter-pill.is-active{ background: var(--ink); color: var(--husk); border-color: var(--ink); }

/* ---------------------------------------------------------------- lot cards */
.lot-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.6rem,3vw,2.4rem); }
.lot-card{ transition: opacity .4s var(--ease), transform .4s var(--ease); }
.lot-card.is-hidden{ display:none; }
.lot-card__face{
  position:relative; aspect-ratio: 4/5; border-radius: 4px;
  display:flex; flex-direction:column; justify-content:space-between; padding: 1.4rem;
  overflow:hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.lot-card__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  z-index:1; transition: transform .6s var(--ease);
}
.lot-card:hover .lot-card__img{ transform: scale(1.06); }
.lot-card__overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(31,23,18,0.55) 0%, rgba(31,23,18,0.15) 45%, rgba(31,23,18,0.75) 100%);
  z-index:2; transition: opacity .4s var(--ease);
}
.tone-cherry{ background: color-mix(in srgb, var(--cherry) 14%, var(--husk)); }
.tone-brass{ background: color-mix(in srgb, var(--brass) 28%, var(--husk)); }
.tone-ghat{ background: color-mix(in srgb, var(--ghat) 18%, var(--husk)); }
.tone-deep{ background: color-mix(in srgb, var(--earth) 22%, var(--husk)); }
.lot-card__face .stamp{ position:relative; z-index:3; color: var(--husk); text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.lot-card__icon{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:.9; z-index:2; }
.lot-card__icon svg{ width:46%; height:auto; }
.lot-card__notes{ position:relative; z-index:3; display:flex; flex-wrap:wrap; gap:.4rem; }
.lot-card__notes span{ font-family:var(--font-mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.04em; background: rgba(31,23,18,0.7); backdrop-filter: blur(6px); color: var(--husk); border: 1px solid rgba(246,242,236,0.25); padding:.3em .6em; border-radius:2px; }
.lot-card__body{ padding-top:1.2rem; }
.lot-card__row{ display:flex; justify-content:space-between; align-items:baseline; margin-top:.3rem; }
.lot-card__row .num{ font-size:.95rem; }
@media (max-width: 980px){ .lot-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px){ .lot-grid{ grid-template-columns: 1fr; } }

/* ---- 3D Stacked Card Carousel System (Golden Cream Theme - Minimal Line Outline) ---- */
:root {
  --golden-cream: #E8D5A7;
  --golden-cream-deep: #D8BC7B;
}

.stacked-carousel-container {
  position: relative;
  width: 100%;
  min-height: 540px;
}

.stacked-card {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  background: #182216;
  border: 1px solid rgba(232, 213, 167, 0.25);
  box-shadow: none;
  overflow: hidden;
  will-change: transform, opacity, z-index;
  transition: transform 0.75s cubic-bezier(0.19, 1, 0.22, 1),
              opacity 0.75s cubic-bezier(0.19, 1, 0.22, 1),
              border-color 0.4s var(--ease),
              filter 0.75s cubic-bezier(0.19, 1, 0.22, 1);
}

/* Card Stack States */
/* 1. Active Current Card (Topmost, fully visible) */
.stacked-card.is-active {
  z-index: 10;
  transform: translateY(0) scale(1);
  opacity: 1;
  filter: brightness(1);
  border-color: var(--golden-cream);
  box-shadow: none;
}

/* 2. Stacked Below / Previous Card (Sits underneath, slightly scaled down like layered cards) */
.stacked-card.is-stacked-below {
  z-index: 5;
  transform: translateY(-16px) scale(0.95);
  opacity: 0.7;
  filter: brightness(0.65);
  pointer-events: none;
  box-shadow: none;
}

/* 3. Deep Below Cards */
.stacked-card.is-deep-below {
  z-index: 2;
  transform: translateY(-32px) scale(0.90);
  opacity: 0.3;
  filter: brightness(0.4);
  pointer-events: none;
  box-shadow: none;
}

/* 4. Upcoming Card (Prepped at the bottom ready to slide UP over the active card) */
.stacked-card.is-upcoming {
  z-index: 15;
  transform: translateY(110%) scale(1.02);
  opacity: 0;
  pointer-events: none;
  box-shadow: none;
}

/* Card 50/50 Split Grid */
.stacked-card__grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 50/50 split on desktop */
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding: clamp(1.6rem, 4vw, 3rem);
  height: 100%;
}

.stacked-card__media {
  position: relative;
  aspect-ratio: 1/1;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(246, 242, 236, 0.2);
  box-shadow: none;
}

.stacked-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease);
}

.stacked-card:hover .stacked-card__media img {
  transform: scale(1.04);
}

.stacked-card__badge {
  position: absolute;
  top: 1.2rem;
  left: 1.2rem;
  z-index: 3;
  background: rgba(27, 23, 18, 0.88);
  backdrop-filter: blur(10px);
  padding: 0.42rem 1rem;
  border-radius: 100px;
  border: 1px solid rgba(232, 213, 167, 0.4);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--golden-cream);
  letter-spacing: 0.12em;
  font-weight: 600;
}

.stacked-card__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.stacked-card__num {
  font-family: var(--font-display);
  font-size: clamp(3.8rem, 7.5vw, 6rem);
  font-weight: 900;
  color: var(--golden-cream);
  line-height: 1;
  opacity: 0.95;
}

.stacked-card__title {
  font-size: clamp(1.8rem, 3.5vw, 3.2rem);
  margin-top: 0.2rem;
  color: #F6F2EC;
}

.stacked-card__desc {
  font-size: 1.18rem;
  line-height: 1.65;
  margin-top: 1.1rem;
  color: var(--ghat-haze);
}

.stacked-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.6rem;
}

.stacked-card__tags span {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(232, 213, 167, 0.1);
  color: #F6F2EC;
  border: 1px solid rgba(232, 213, 167, 0.3);
  padding: 0.35em 0.75em;
  border-radius: 4px;
}

/* Golden Cream Navigation & Controls (Clean Outline Lines) */
.carousel-arrow-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 1.1rem;
  padding: 0.65em 1.2em;
  border-radius: 100px;
  border: 1px solid rgba(246, 242, 236, 0.3);
  color: #F6F2EC;
  background: transparent;
  cursor: pointer;
  box-shadow: none;
  transition: all 0.35s var(--ease);
}

.carousel-arrow-btn:hover,
.carousel-arrow-btn--active:hover {
  background: var(--golden-cream) !important;
  border-color: var(--golden-cream) !important;
  color: #1B1712 !important;
  box-shadow: none !important;
  transform: translateY(-2px);
}

.carousel-nav-item {
  flex: 1;
  min-width: 80px;
  text-align: left;
  background: transparent;
  border: 1px solid rgba(246, 242, 236, 0.2);
  padding: 0.65rem 0.85rem;
  border-radius: 6px;
  cursor: pointer;
  color: #F6F2EC;
  box-shadow: none;
  transition: all 0.35s var(--ease);
}
.carousel-nav-item .step-num-lbl {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--golden-cream);
  display: block;
  font-weight: 600;
}
.carousel-nav-item .step-title-lbl {
  font-size: 0.8rem;
  font-weight: 600;
}
.carousel-nav-item:hover {
  background: rgba(232, 213, 167, 0.12) !important;
  border-color: var(--golden-cream) !important;
  color: #FFFFFF !important;
}
.carousel-nav-item.is-active {
  background: var(--golden-cream) !important;
  border-color: var(--golden-cream) !important;
  color: #1B1712 !important;
  box-shadow: none !important;
}
.carousel-nav-item.is-active .step-num-lbl,
.carousel-nav-item.is-active .step-title-lbl {
  color: #1B1712 !important;
}

/* Clickable indicator dots (Clean Outline Lines) */
.carousel-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(246, 242, 236, 0.4);
  cursor: pointer;
  padding: 0;
  box-shadow: none;
  transition: all 0.35s var(--ease);
}
.carousel-dot.is-active {
  width: 36px;
  border-radius: 100px;
  background: var(--golden-cream);
  border-color: var(--golden-cream);
  box-shadow: none !important;
}
.carousel-dot:hover:not(.is-active) {
  background: rgba(232, 213, 167, 0.3);
  border-color: var(--golden-cream);
}

/* Mobile Responsiveness (Vertical Stack on mobile) */
@media (max-width: 860px) {
  .stacked-carousel-container {
    min-height: 680px;
  }
  .stacked-card {
    position: absolute;
  }
  .stacked-card__grid {
    grid-template-columns: 1fr; /* Vertical stack on mobile */
    gap: 1.4rem;
    padding: 1.2rem;
  }
  .stacked-card__media {
    max-height: 280px;
  }
}