/* =========================================================================
   ARGENT LANE GIFTING - design system
   Every colour below is sampled from the shop's own material (1 Sep 2026):
     signboard plum  #543B43  (Store Name.jpg, the board ground)
     deep plum       #241820  (derived: the same plum darkened for page ground)
     silver          #CFCDC9  (WA0061, the leaf-wrapped bowl)
     pewter          #A9ADAA  (WA0061, same piece)
     rose quartz     #B99295 / #9B625E  (WA0037, the bird casket's stone)
     enamel teal     #2A8B8C / #074F4C  (WA0067, the Krishna lotus)
     gold            #B89267  (WA0066, the gold flowers)

   Contrast, computed 1 Sep 2026 (WCAG):
     silver  on deep plum  10.79:1   body text          AAA
     pewter  on deep plum   7.54:1   secondary text     AAA
     rose    on deep plum   6.20:1   accents, links     AA+
     gold    on deep plum   5.99:1   wordmark, rules    AA+
     teal    on deep plum   4.22:1   graphics/large only
     silver  on band plum   6.35:1   body text on bands AA+
     deep plum on rose      6.20:1   solid button label AA+
   ON-GLASS RULE: the two glass panels carry a plum tint of at least .78
   opacity. Worst case behind them is a full silver highlight (~#E0E0E0);
   through the tint that floor is ~#4D444A, and silver text on it is 5.9:1.
   Never put pewter or rose body text on glass.

   Shape lock: buttons are pills, cards 14px, images 10px. Nothing else.
   backdrop-filter budget: top bar + hero panel. Two per page, never more.
   ========================================================================= */

:root{
  --plum-deep:  #241820;
  --plum-band:  #543B43;
  --plum-mid:   #2C1D25;   /* derived band gradient top */
  --plum-veil:  rgba(36,24,32,.72);
  --plum-glass: rgba(36,24,32,.80);
  --silver:     #CFCDC9;
  --pewter:     #A9ADAA;
  --rose:       #B99295;
  --rose-deep:  #9B625E;
  --teal:       #2A8B8C;
  --teal-deep:  #074F4C;
  --gold:       #B89267;
  --line:       rgba(207,205,201,.14);

  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Montserrat", "Segoe UI", Arial, sans-serif;

  --fs-900: clamp(2.5rem, 1.2rem + 5.4vw, 4.4rem);
  --fs-800: clamp(2rem, 1.1rem + 3.4vw, 3rem);
  --fs-700: clamp(1.55rem, 1.15rem + 1.8vw, 2.15rem);
  --fs-600: clamp(1.22rem, 1.05rem + .8vw, 1.5rem);
  --fs-400: 1.0625rem;
  --fs-300: .9375rem;
  --fs-200: .8125rem;

  --space-section: clamp(4.5rem, 3rem + 6vw, 8.5rem);
  --measure: 62ch;

  --r-card: 14px;
  --r-img: 10px;

  --ease-out: cubic-bezier(.23,1,.32,1);
  --ease-in-out: cubic-bezier(.77,0,.175,1);
}

/* ---------- fonts, self-hosted, SIL OFL (verified 1 Sep 2026) ---------- */
@font-face{
  font-family:"Cormorant Garamond";
  src:url("../fonts/cormorant-garamond-var.woff2") format("woff2");
  font-weight:300 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Montserrat";
  src:url("../fonts/montserrat-var.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:6.5rem}
body{
  margin:0;
  background:var(--plum-deep);
  color:var(--silver);
  font-family:var(--font-body);
  font-size:var(--fs-400);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block;border-radius:var(--r-img)}
h1,h2,h3{
  font-family:var(--font-display);
  font-weight:560;
  line-height:1.08;
  color:var(--silver);
  margin:0 0 .5em;
  text-wrap:balance;
}
h1{font-size:var(--fs-900)}
h2{font-size:var(--fs-800)}
h3{font-size:var(--fs-600);font-family:var(--font-body);font-weight:600;line-height:1.3}
p{margin:0 0 1em;max-width:var(--measure)}
a{color:var(--rose);text-underline-offset:3px}
a:hover{color:var(--silver)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
::selection{background:var(--rose-deep);color:#fff}

.skip{
  position:absolute;left:-999px;top:0;z-index:200;
  background:var(--gold);color:var(--plum-deep);
  padding:.75rem 1.25rem;border-radius:0 0 8px 0;font-weight:600;
}
.skip:focus{left:0}

/* ---------- concept bar ---------- */
.conceptbar{
  background:#3B222E;
  border-bottom:1px solid var(--gold);
  text-align:center;
  padding:.55rem 1rem;
  position:relative;z-index:60;
}
.conceptbar p{margin:0;max-width:none;font-size:var(--fs-300);color:#E8D9C4}
.conceptbar strong{color:var(--gold);letter-spacing:.08em}

/* ---------- top bar (backdrop-filter 1 of 2) ---------- */
.top{
  position:sticky;top:0;z-index:50;
  background:var(--plum-glass);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.top__in{
  max-width:1200px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:.7rem 1.25rem;min-height:64px;
}
.brand{display:flex;flex-direction:column;text-decoration:none;line-height:1.05}
.brand__name{
  font-family:var(--font-display);font-weight:600;
  font-size:1.5rem;letter-spacing:.14em;color:var(--gold);
}
.brand__tag{
  font-size:.66rem;letter-spacing:.32em;text-transform:uppercase;
  color:var(--silver);margin-top:2px;
}
.nav{display:flex;gap:1.6rem;align-items:center}
.nav a{
  color:var(--silver);text-decoration:none;font-size:var(--fs-300);
  font-weight:500;letter-spacing:.02em;padding:.35rem 0;
  border-bottom:1px solid transparent;
  transition:border-color .18s var(--ease-out),color .18s var(--ease-out);
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--rose);border-bottom-color:var(--rose)}
.navbtn{
  display:none;background:none;border:1px solid var(--line);border-radius:999px;
  color:var(--silver);min-width:44px;min-height:44px;cursor:pointer;
  font-size:1.2rem;line-height:1;
}
@media (max-width: 820px){
  .navbtn{display:inline-flex;align-items:center;justify-content:center}
  .nav{
    position:absolute;right:0;top:100%;left:0;
    background:#1D1319;             /* solid: no third backdrop-filter */
    border-bottom:1px solid var(--line);
    flex-direction:column;align-items:stretch;gap:0;
    padding:.5rem 1.25rem 1rem;
    display:none;
  }
  .nav.open{display:flex}
  .nav a{padding:.85rem .25rem;border-bottom:1px solid var(--line)}
}

/* ---------- silver canvas (home) ---------- */
.silver-stage{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  /* CSS base wash: what a no-JS or reduced-motion reader sees. */
  background:
    radial-gradient(115% 90% at 18% 8%,  rgba(207,205,201,.16), transparent 55%),
    radial-gradient(90% 70% at 82% 30%, rgba(185,146,149,.13), transparent 60%),
    radial-gradient(120% 90% at 55% 96%, rgba(42,139,140,.10), transparent 55%),
    linear-gradient(175deg, #2E2029 0%, var(--plum-deep) 58%, #201620 100%);
}
.silver-stage canvas{position:absolute;inset:0;width:100%;height:100%}

main{position:relative;z-index:1}

/* ---------- bands ---------- */
.band{padding:var(--space-section) 1.25rem}
.band__in{max-width:1200px;margin:0 auto}
.band--opaque{background:linear-gradient(180deg,var(--plum-mid),var(--plum-deep))}
.band--window{background:var(--plum-veil)}
.band--seam{border-top:1px solid var(--line)}
.band--accent{
  background:
    radial-gradient(120% 130% at 85% -10%, rgba(185,146,149,.14), transparent 55%),
    linear-gradient(180deg,#332028,var(--plum-deep));
}
.band--teal{
  background:
    radial-gradient(120% 130% at 15% -10%, rgba(42,139,140,.16), transparent 55%),
    linear-gradient(180deg,#22252A 0%,var(--plum-deep) 75%);
}

/* ---------- hero ---------- */
.hero{
  min-height:86svh;
  display:flex;align-items:flex-end;
  padding:clamp(5rem,10vh,8rem) 1.25rem clamp(3.5rem,7vh,5.5rem);
}
.hero__in{max-width:1200px;margin:0 auto;width:100%}
.hero__panel{
  /* backdrop-filter 2 of 2. Tint >= .80: see ON-GLASS RULE above. */
  background:var(--plum-glass);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  padding:clamp(1.75rem,4vw,3rem);
  max-width:680px;
}
.hero__kicker{
  font-size:var(--fs-200);letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold);margin:0 0 1rem;
}
.hero p.lede{font-size:var(--fs-600);color:var(--silver);margin-top:.75rem}
.hero__actions{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:1.75rem}

/* ---------- buttons (pill lock) ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:48px;padding:.7rem 1.6rem;
  border-radius:999px;
  font-family:var(--font-body);font-weight:600;font-size:var(--fs-300);
  letter-spacing:.03em;text-decoration:none;cursor:pointer;
  transition:transform .16s var(--ease-out),background-color .18s var(--ease-out),color .18s var(--ease-out),border-color .18s var(--ease-out);
}
.btn:active{transform:scale(.97)}
.btn--solid{background:var(--rose);color:var(--plum-deep);border:1px solid var(--rose)}
.btn--solid:hover{background:#C9A2A4;color:var(--plum-deep)}
.btn--ghost{background:transparent;color:var(--silver);border:1px solid rgba(207,205,201,.45)}
.btn--ghost:hover{border-color:var(--silver);color:#fff}

/* ---------- grids and cards ---------- */
.grid{display:grid;gap:1.4rem}
@media (min-width:640px){.grid--2{grid-template-columns:1fr 1fr}.grid--3{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.grid--3{grid-template-columns:repeat(3,1fr)}.grid--4{grid-template-columns:repeat(4,1fr)}}

.card{
  background:rgba(84,59,67,.20);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .25s var(--ease-out),border-color .25s var(--ease-out);
}
.card img{border-radius:0;aspect-ratio:Reviewed on Google;object-fit:cover;width:100%}
.card__body{padding:1.1rem 1.2rem 1.3rem}
.card__body h3{margin:0 0 .3rem}
.card__body p{font-size:var(--fs-300);color:var(--pewter);margin:0}
a.card{color:inherit;text-decoration:none}
a.card:hover{transform:translateY(-4px);border-color:rgba(185,146,149,.55)}
a.card:hover h3{color:var(--rose)}

/* product figures */
.piece{margin:0;display:flex;flex-direction:column;gap:.6rem}
.piece img{aspect-ratio:Reviewed on Google;object-fit:cover;width:100%;background:#1D1319}
.piece figcaption{font-size:var(--fs-300);color:var(--pewter);line-height:1.45}
.piece figcaption strong{color:var(--silver);font-weight:600;display:block}

/* ---------- prose sections ---------- */
.eyebrow{
  font-size:var(--fs-200);letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold);margin:0 0 .9rem;
}
.lede{font-size:var(--fs-600);line-height:1.5}
.muted{color:var(--pewter)}
.small{font-size:var(--fs-300)}
hr.rule{border:0;border-top:1px solid var(--line);margin:2.5rem 0}
.goldline{width:64px;border:0;border-top:1px solid var(--gold);margin:1.4rem 0 1.6rem}

.answer{max-width:var(--measure)}
.answer h3{margin-top:2.2rem}
.answer h3:first-of-type{margin-top:0}

blockquote.cardquote{
  margin:2rem 0;padding:1.4rem 1.6rem;
  border-left:2px solid var(--gold);
  background:rgba(84,59,67,.20);border-radius:0 var(--r-card) var(--r-card) 0;
}
blockquote.cardquote p{margin:0;color:var(--silver)}
blockquote.cardquote cite{display:block;margin-top:.7rem;color:var(--pewter);font-style:normal;font-size:var(--fs-300)}

/* breadcrumbs */
.crumbs{font-size:var(--fs-300);color:var(--pewter);margin:0 0 2rem;padding:0}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0}
.crumbs li+li::before{content:"/";margin-right:.4rem;color:var(--line)}
.crumbs a{color:var(--pewter)}
.crumbs a:hover{color:var(--rose)}
.crumbs [aria-current]{color:var(--silver)}

/* definition rows (care page, about) */
.deflist{display:grid;gap:1.2rem;margin:2rem 0}
@media (min-width:760px){.deflist{grid-template-columns:1fr 1fr}}
.def{
  border:1px solid var(--line);border-radius:var(--r-card);
  padding:1.3rem 1.4rem;background:rgba(84,59,67,.16);
}
.def h3{margin:0 0 .4rem;color:var(--rose)}
.def p{margin:0;font-size:var(--fs-300);color:var(--silver)}

/* FAQ */
.faq details{
  border:1px solid var(--line);border-radius:var(--r-card);
  background:rgba(84,59,67,.16);margin-bottom:.9rem;overflow:hidden;
}
.faq summary{
  cursor:pointer;padding:1.1rem 1.3rem;font-weight:600;color:var(--silver);
  list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gold);font-size:1.3rem;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq .faq__a{padding:0 1.3rem 1.2rem;color:var(--pewter)}
.faq .faq__a p{margin:0 0 .8em}

/* map */
.mapwrap{
  border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;
  aspect-ratio:16/10;background:#1D1319;
}
.mapwrap iframe{width:100%;height:100%;border:0;display:block}

/* NAP block */
.nap{font-style:normal;line-height:1.7}
.nap strong{color:var(--silver);font-weight:600}
.nap a{color:var(--rose)}

/* ---------- footer ---------- */
footer{
  position:relative;z-index:1;
  background:#1B1218;
  border-top:1px solid var(--line);
  padding:3.5rem 1.25rem 5.5rem;
  font-size:var(--fs-300);color:var(--pewter);
}
.foot__in{max-width:1200px;margin:0 auto;display:grid;gap:2.5rem}
@media (min-width:820px){.foot__in{grid-template-columns:1.3fr 1fr 1fr}}
.foot__in h2{font-size:var(--fs-600);font-family:var(--font-body);font-weight:600;color:var(--silver)}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin:.45rem 0}
footer a{color:var(--pewter)}
footer a:hover{color:var(--rose)}
.foot__legal{
  max-width:1200px;margin:3rem auto 0;padding-top:1.5rem;
  border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;
}
.foot__note{color:#E8D9C4;margin:0}
.foot__credit{margin:0;color:var(--pewter)}

/* ---------- mobile call bar ---------- */
.callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:55;
  display:none;gap:1px;background:var(--line);
  border-top:1px solid var(--line);
}
.callbar a{
  flex:1;display:flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:52px;text-decoration:none;font-weight:600;font-size:var(--fs-300);
}
.callbar a:first-child{background:var(--rose);color:var(--plum-deep)}
.callbar a:last-child{background:#1D1319;color:var(--silver)}
@media (max-width:719px){
  .callbar{display:flex}
  footer{padding-bottom:7.5rem}
}

/* ---------- utilities (in place of inline styles, which the CSP blocks) ---------- */
.mt-1{margin-top:1rem}
.mt-2{margin-top:1.75rem}
.mt-3{margin-top:2.5rem}
.gap-lg{gap:2.5rem}
.grid--center{align-items:center}
.w-narrow{max-width:52ch}
.w-mid{max-width:760px}
.w-measure{max-width:var(--measure)}
.h-sub{font-size:var(--fs-700)}
img.img-line{border:1px solid var(--line)}
.list-tight{padding-left:1.2rem;margin:0;line-height:1.9}
.nap--big{font-size:var(--fs-600)}
.txt-silver{color:var(--silver)}

/* Shopfront photograph: portrait, so it is capped and centred rather than
   allowed to run the full column width. One governor only - max-width sets
   the box and the height follows the ratio (never max-height + cover). */
.img-portrait{max-width:420px;width:100%;margin-inline:auto}
figure.shopfront{margin-inline:auto;margin-block:0;max-width:560px}
figure.shopfront img{width:100%}

/* ---------- reveal (transform + visibility only; text opacity never animates) ---------- */
.rv{visibility:hidden;transform:translateY(18px)}
.rv.in{
  visibility:visible;transform:none;
  transition:transform .6s var(--ease-out);
}
.no-js .rv,.rv--now{visibility:visible;transform:none}

/* ---------- reduced motion: everything settles, nothing moves ---------- */
@media (prefers-reduced-motion: reduce){
  .rv{visibility:visible;transform:none;transition:none}
  .btn,.card,a.card{transition:none}
  .btn:active{transform:none}
  a.card:hover{transform:none}
}

/* print: keep it readable, and never let a reveal hide content on paper */
@media print{
  body{background:#fff;color:#111}
  .conceptbar,.top,.callbar,.silver-stage{display:none}
  .rv{visibility:visible;transform:none}
}