/* =========================================================================
   KHUSHVIKA LUXURY 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 / ON-WINDOW RULE - CORRECTED 9 Sep 2026, and it was wrong before.
   The old rule set the tint at .78-.80 and said only "never put pewter or rose
   body text on glass". Measured against the shader's real ceiling, three text
   colours were failing on the LIVE site and Lighthouse scored the pages 100
   through all of them, because an automated checker measures the panel's own
   tint and cannot see the WebGL canvas behind it. (Drishti hit this same class
   of bug at 2.40:1 on 30 Aug 2026.)

   The ceiling is not a guess: silver.js line 164 clamps the shader output with
     col = min(col, vec3(0.878));         ->  #E0E0E0, the brightest pixel possible.

   Measured through the OLD .72 window veil (worst case ground #595056):
     silver  4.89:1  ok        pewter  3.42:1  FAIL
     rose    2.81:1  FAIL      gold    2.71:1  FAIL
   Through the OLD .80 glass (#4A4046): gold 3.48:1 FAIL - and the gold wordmark
   and the gold hero kicker both sit on glass.

   BOTH TINTS ARE NOW .90. Worst case ground behind either is #372C33, and:
     silver  8.42:1     pewter  5.89:1     rose  4.84:1     gold  4.68:1
   Every one clears 4.5:1 as small text, so no colour is off-limits on a
   translucent surface any more and no page has to be policed for it.

   The shader is NOT hidden by this: the hero carries no veil at all, so the
   surface reads at full strength exactly where it matters, and the new
   botanical relief carries the texture through the opaque bands.
   If the clamp in silver.js is ever raised, RE-RUN THESE NUMBERS.

   SHAPE LOCK - rewritten 9 Sep 2026, from the shop's own artwork.
   Protocol rule (WEBSITE-BUILD-PROTOCOL.md, Phase 2, added 9 Sep 2026): when a
   business has its own brand artwork, THE ARTWORK IS THE LAYOUT BRIEF, not just
   a colour picker. Two builds were rebuilt in two days for ignoring this.

   Khushvika has two pieces of artwork, and they say different things:
     - the SIGNBOARD (Photos/Store Name.jpg): fat gold capitals, cut from metal,
       tight, stacked on two lines, on a plum board. A small silver "SILVER
       PLATED" tag set apart from the name. Nothing is rounded.
     - the VISITING CARD (Photos/store Card Front .jpg): black ground carrying a
       tone-on-tone debossed leaf-and-bud pattern; a silver OVAL cartouche; an
       eight-pointed star; "SILVER PLATED" again, gold, letterspaced.

   So: the old shape lock (pills, 14px cards, soft hover lift) was the default
   vocabulary of a generated page and appears nowhere in her artwork. It is
   replaced by -
     square corners everywhere            (the board and the card are rectangles)
     the OVAL CARTOUCHE as the one curve   (the card's own device, --r-oval)
     gold hairlines instead of soft borders and shadows
     the eight-point star as the divider   (img/star.svg)
     the botanical relief as the ground    (img/botanical.svg)
   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 */
  /* Both .90 - see the ON-GLASS / ON-WINDOW RULE above. Do not lower either
     without re-running the contrast numbers against silver.js's clamp. */
  --plum-veil:  rgba(36,24,32,.90);
  --plum-glass: rgba(36,24,32,.90);
  --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;

  /* Square, because the signboard and the card are both rectangles.
     The oval is the ONE curve the artwork contains, and it is a device
     with a job (the cartouche), never a default on every box. */
  --r-card: 0px;
  --r-img: 0px;
  --r-oval: 50% / 46%;

  /* Panels RECESS, they never raise. The card's pattern is debossed, pressed
     into the stock, so a panel on this site is a hollow, not a raised tile.
     It is also what makes the panels safe: a lighter fill stacked on the
     window band lifted the ground until gold fell to 4.35:1. This fill is
     measured on every ground the site can produce and the worst gold on it
     is 6.07:1. Verified 9 Sep 2026. */
  --plum-recess: rgba(20,13,17,.65);

  --gold-hair: rgba(184,146,103,.42);
  --gold-hair-strong: rgba(184,146,103,.85);

  --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:0}
::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}

/* ---------- demo bar: guardrail, wording fixed ---------- */
.demobar{
  background:#3B222E;
  border-bottom:1px solid var(--gold);
  text-align:center;
  padding:.55rem 1rem;
  position:relative;z-index:60;
}
.demobar p{margin:0;max-width:none;font-size:var(--fs-300);color:#E8D9C4}
.demobar 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;
}
/* THE WORDMARK COMES FROM THE VISITING CARD, not the signboard - corrected
   9 Sep 2026 after Bose said the header "feels basic".
   Khushvika has two pieces of artwork and they are pitched differently. The
   signboard is fat cut-metal capitals: correct for a shopfront read from the
   street, and that is where the first attempt took it. The CARD is the luxury
   piece - the thing a customer is actually handed - and it is an elegant gold
   script inside a silver oval, with an eight-pointed star and a small
   letterspaced SILVER PLATED line. For "uber ultra rich" the card is the right
   reference, so the lockup is now: her own star as the mark, the name in the
   display serif, and the spec line beneath in small letterspaced caps.
   The name is NOT a traced script - tracing her letterforms off a photograph of
   a curved card is how fabricated lettering gets shipped (2 Sep 2026). It is set
   in type, using the card's structure rather than copying its glyphs. */
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;min-height:44px}
.brand__mark{
  flex:none;width:26px;height:26px;
  background:url("../img/star.svg") center/contain no-repeat;
}
.brand__lines{display:flex;flex-direction:column;line-height:1}
.brand__name{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.35rem,1.05rem + 1.1vw,1.75rem);
  letter-spacing:.03em;color:var(--gold);
}
.brand__tag{
  font-family:var(--font-body);font-weight:600;
  font-size:clamp(.55rem,.46rem + .26vw,.66rem);
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--pewter);margin-top:.46em;white-space:nowrap;
}
/* At 320px the full tag was 5px wider than the room between the star and the
   hamburger - measured, not guessed. Below 420px the "Silver Plated" half is
   dropped from the header; nothing is lost, because the SILVER PLATED tag
   already appears on every page as .plate. (Drishti ran 34px off screen at
   320px on 29 Aug 2026 and it was hidden by overflow-x:hidden, not fixed.) */
@media (max-width:420px){
  .brand__tag{letter-spacing:.14em}
  .brand__tag-x{display:none}
}
.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(--gold-hair);border-radius:0;
  color:var(--silver);min-width:44px;min-height:44px;cursor:pointer;
  font-size:1.2rem;line-height:1;
}
@media (max-width: 820px){
  /* JS-OFF FALLBACK: without .js the button is hidden and the nav simply
     wraps onto two rows, so every link stays reachable. Verified with
     JavaScript disabled, 9 Sep 2026. */
  .nav{flex-wrap:wrap;gap:.55rem 1.15rem;justify-content:flex-end;max-width:62%}
  .js .navbtn{display:inline-flex;align-items:center;justify-content:center}
  .js .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;max-width:none;
  }
  .js .nav.open{display:flex}
  .js .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:0;            /* square-shouldered: the board is cut metal */
  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:4/5;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:4/5;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__demo{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) ---------- */
/* 2 Nov 2026: no longer visibility:hidden, so a screen reader finds every heading before it scrolls. */
.rv{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}
  .demobar,.top,.callbar,.silver-stage{display:none}
  .rv{visibility:visible;transform:none}
}

/* studio credit link, added 4 Sep 2026 */
/* The credit is deliberately dim; an <a> inside it must not take the site's
   own link colour and shout from the bottom of the page. It inherits, and is
   marked as a link by an underline instead. */
.foot__credit a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: .06em;
}
.foot__credit a:hover,
.foot__credit a:focus-visible {
  text-decoration-thickness: .12em;
}

/* =========================================================================
   THE ARTWORK LAYER - added 9 Sep 2026
   Everything below comes off the shop's own signboard and visiting card.
   Nothing here is a stock "premium" device; each one is pointed at the file
   it was read from. See the SHAPE LOCK note at the top of this file.
   ========================================================================= */

/* ---------- 1. the botanical relief (visiting card, debossed ground) ------
   The card's black-on-black leaf-and-bud deboss, in plum. It rides on a
   pseudo-element so the opacity is tunable per band and the tile never
   interferes with text colour. Decorative only: aria-hidden by being CSS.
   Shipped as a file, NOT a data: URI - the CSP is img-src 'self'.          */
.band--opaque,
.band--accent,
footer{position:relative;isolation:isolate}
.band--opaque::before,
.band--accent::before,
footer::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:url("../img/botanical.svg");
  background-repeat:repeat;
  background-size:118px 118px;
  opacity:.038;
}
.band--accent::before{opacity:.05}
footer::before{opacity:.03}
/* The relief is texture, not information. If a reader has asked for less,
   or is printing, it goes entirely. */
@media (prefers-reduced-motion: reduce){
  .band--opaque::before,.band--accent::before,footer::before{opacity:.028}
}

/* ---------- 2. the oval cartouche (the card's centre device) -------------
   The one curve in the whole design, because it is the one curve in the
   artwork. It frames the thing being introduced, exactly as the card frames
   the name. No backdrop-filter here: the budget of two is already spent on
   the top bar and the hero panel.                                          */
.cartouche{
  position:relative;
  border:1px solid var(--gold-hair);
  border-radius:var(--r-oval);
  background:var(--plum-recess);
  padding:clamp(2.2rem,5vw,3.4rem) clamp(1.6rem,5vw,3.6rem);
  text-align:center;
  max-width:640px;margin-inline:auto;
}
.cartouche::after{
  content:"";position:absolute;inset:7px;
  border:1px solid rgba(184,146,103,.20);
  border-radius:var(--r-oval);
  pointer-events:none;
}
.cartouche > :last-child{margin-bottom:0}
.cartouche p{margin-inline:auto}

/* ---------- 3. the SILVER PLATED tag -------------------------------------
   It appears on BOTH artworks, set apart from the name in small letterspaced
   capitals - silver on the board, gold on the card. It is also the phrase the
   market actually searches ("silver plated gift items"), so it earns its
   place twice over. This is the site's recurring signature.                */
.plate{
  display:inline-block;
  font-family:var(--font-body);font-weight:700;
  font-size:var(--fs-200);letter-spacing:.30em;text-transform:uppercase;
  color:var(--gold);
  margin:0 0 1rem;
}
.plate--rule{
  padding-bottom:.55rem;
  border-bottom:1px solid var(--gold-hair);
}
.plate + h1,.plate + h2{margin-top:.2rem}

/* ---------- 4. the eight-point star (the card's ornament) ----------------
   Replaces a plain <hr> between sections, and marks the spec list. */
.starrule{
  border:0;height:48px;margin:clamp(2.4rem,5vw,3.6rem) auto;
  background:url("../img/star.svg") center/28px 28px no-repeat;
  position:relative;max-width:420px;
}
.starrule::before,.starrule::after{
  content:"";position:absolute;top:50%;width:calc(50% - 32px);
  border-top:1px solid var(--gold-hair);
}
.starrule::before{left:0}
.starrule::after{right:0}

/* ---------- 5. the certificate / specification block ---------------------
   The four things every piece carries, stated once, in the register of the
   care card's own heading: SILVER PLATED (0.2 micron) LACKERED POLISH.     */
.spec{
  border:1px solid var(--gold-hair);
  background:var(--plum-recess);
  padding:clamp(1.5rem,4vw,2.2rem);
  margin:2.5rem 0;
}
.spec ul{
  list-style:none;margin:0;padding:0;
  display:grid;gap:1rem;
}
@media (min-width:760px){.spec ul{grid-template-columns:repeat(2,1fr);gap:1.2rem 2rem}}
.spec li{
  padding-left:2.1rem;position:relative;
  color:var(--silver);font-size:var(--fs-300);line-height:1.55;
}
.spec li::before{
  content:"";position:absolute;left:0;top:.12em;
  width:1.05rem;height:1.05rem;opacity:.75;
  background:url("../img/star.svg") center/contain no-repeat;
}
.spec li strong{display:block;color:var(--gold);font-weight:700;
  letter-spacing:.10em;text-transform:uppercase;font-size:var(--fs-200);
  margin-bottom:.2rem}

/* ---------- 6. cards: square, hairline, no lift -------------------------
   The old rule was border-radius 14px, a soft translucent fill and a 4px
   hover lift. None of that is in the artwork; all three are the default
   vocabulary of a generated page. A card is now a rectangle that grows a
   gold hairline when you point at it, which is what a gold-on-plum board
   would do.                                                                */
.card{
  background:rgba(84,59,67,.20);
  border:1px solid var(--line);
  transition:border-color .25s var(--ease-out),background-color .25s var(--ease-out);
}
a.card:hover,a.card:focus-within{
  transform:none;
  border-color:var(--gold-hair-strong);
  background:rgba(84,59,67,.34);
}
a.card:hover h3{color:var(--gold)}
.card__body h3{letter-spacing:.01em}

/* ---------- 7. buttons: square-shouldered ------------------------------
   The board is a rectangle of cut metal. A pill is not in it. (Drishti made
   the same correction on 30 Aug 2026 for the same reason.)                 */
.btn{letter-spacing:.10em;text-transform:uppercase;font-weight:700;font-size:var(--fs-200)}
.btn--ghost{border-color:var(--gold-hair-strong);color:var(--silver)}
.btn--ghost:hover{border-color:var(--gold);color:#fff;background:rgba(184,146,103,.12)}

/* ---------- 8. section openers -----------------------------------------
   A band opens the way the card does: small letterspaced tag, then the name,
   then a hairline. Replaces the bare h2.                                    */
.opener{max-width:var(--measure);margin:0 0 2.2rem}
.opener .goldline{margin:1.1rem 0 0}
.opener--mid{margin-inline:auto;text-align:center}
.opener--mid .goldline{margin-inline:auto}

/* ---------- 9. the shopfront and signature images ----------------------
   Square, with a gold hairline, so a photograph reads as a framed plate
   rather than a rounded app tile.                                          */
img.img-line{border:1px solid var(--gold-hair)}
.piece img,.card img{border-radius:0}

/* ---------- 10. quiet corrections that came out of the restyle ---------- */
/* The FAQ, definition rows, quote and map all inherited --r-card and are now
   square by the token change alone. The quote keeps its gold spine. */
blockquote.cardquote{border-radius:0;border-left-width:2px}
.faq details,.def,.mapwrap,.hero__panel{border-radius:0}
/* The hero panel is the second and last backdrop-filter on the page. */
.hero__panel{border-color:var(--gold-hair)}

/* The hero kicker moved below the lede (it is the address line now, and the
   SILVER PLATED tag took the eyebrow slot above the h1). Pewter, not gold, so
   the panel carries one gold accent rather than two. 5.89:1 worst case. */
.hero .lede + .hero__kicker{
  margin:1.4rem 0 0;color:var(--pewter);
  letter-spacing:.14em;font-size:var(--fs-200);
}

/* Footer and wordmark tap targets, 9 Sep 2026.
   These already pass WCAG 2.1 AA (which sets no target size) and clear 2.2's
   2.5.8 spacing exception, so this is comfort rather than compliance: an
   18px-tall link stacked in a list is fiddly on a phone, and this site's
   audience is people about to press "call". */
footer li a{display:inline-block;padding:.28rem 0}
footer li{margin:.25rem 0}
.brand{min-height:44px;justify-content:center}