/* =========================================================================
   COPPERPOT NAMKEEN HOUSE - design system. Built 2 Sep 2026.
   Every colour below is measured off the shop's own material; two are
   derived from a measurement and say so.

     label maroon      #6B2320  the own-brand label, photo #17 (cluster 25.9%)
     maroon lift       #84443A  the same label's edge highlight
     label gold        #CDA272  the label's lettering (hairlines on maroon only)
     namkeen amber     #B4926F  the chakli jars, photos #6 and #14 (graphics only)
     amber deep        #8C5934  same jars, the fried edge (large text on bands)
     amber light       #CFAE89  same jars, the pale core (shader veins)
     marble vein grey  #979CA5  the marble floor, photo #4
     marble white      #F2F2F0  DERIVED: the tile is white; the photos read it
                                grey-blue under shop light, so the ground is
                                lifted to a neutral off-white
     graphite ink      #26262B  DERIVED from the counter's dark veins #656C73,
                                darkened. Cool on purpose, not espresso.

   Contrast, computed 2 Sep 2026 (WCAG 2.1):
     graphite  on marble white  13.43   body text            AAA
     graphite  on band #E7E7E4  12.15   body text on bands   AAA
     graphite  on shader floor  10.53   body text anywhere   AAA
     slate #5A5C63 on white      5.96   secondary text       AA
     slate     on shadow band    4.76   secondary text       AA
     slate     on shader floor   4.67   secondary text       AA
     maroon    on marble white   9.93   links, accents       AAA
     maroon    on shader floor   7.78   links over the wash  AAA
     amber deep on white         5.21   large text only on bands (4.17 on shadow)
     white     on maroon        11.13   solid button label   AAA
     #E9D6D0 (rose tint) on maroon  8.6 secondary text on the maroon band
     label gold on maroon        4.77   hairlines and large text on maroon only
     amber #B4926F               2.57   never text. graphics and rules only.

   ON-GLASS RULE: the two glass panels carry a marble-white tint of at least
   .82 opacity. This is a LIGHT page with DARK text, so the worst case behind
   a panel is the DARKEST thing the shader can paint, and the shader clamps
   its output to a floor of #D8D8D3. Through the .82 tint that floor reads as
   ~#EDEDEA, and graphite on it is 12.5:1; slate on it is 5.6:1. Text on glass
   uses graphite or slate, never amber and never the vein grey.

   Shape lock: controls 2px, images 4px, cards square with a 1px vein-grey
   hairline. No drop shadows anywhere: the marble is flat, the label is flat.
   backdrop-filter budget: top bar + hero panel. Two per page, never more.
   Motion: transform and visibility only. Text opacity is never animated.
   ========================================================================= */

:root{
  /* primitives */
  --marble:       #F2F2F0;
  --marble-band:  #E7E7E4;
  --marble-shade: #DADAD6;
  --vein:         #979CA5;
  --graphite:     #26262B;
  --slate:        #5A5C63;
  --maroon:       #6B2320;
  --maroon-lift:  #84443A;
  --gold:         #CDA272;
  --amber:        #B4926F;
  --amber-deep:   #8C5934;
  --amber-light:  #CFAE89;
  --rose-tint:    #E9D6D0;

  /* semantic */
  --bg:           var(--marble);
  --bg-veil:      rgba(242,242,240,.58);
  --bg-glass:     rgba(242,242,240,.84);
  --ink:          var(--graphite);
  --ink-2:        var(--slate);
  --accent:       var(--maroon);
  --accent-lift:  var(--maroon-lift);
  --on-accent:    #FFFFFF;
  --on-accent-2:  var(--rose-tint);
  --line:         rgba(151,156,165,.45);
  --line-strong:  var(--vein);
  --focus:        var(--maroon);

  /* component */
  --btn-solid-bg:   var(--accent);
  --btn-solid-fg:   var(--on-accent);
  --btn-ghost-fg:   var(--accent);
  --card-line:      var(--line);
  --top-bg:         var(--bg-glass);

  --font-display: "Cinzel", "Times New Roman", Georgia, serif;
  --font-body: "Figtree", "Segoe UI", Arial, sans-serif;

  --fs-900: clamp(2.1rem, 1rem + 4.6vw, 3.9rem);
  --fs-800: clamp(1.7rem, 1.05rem + 2.7vw, 2.7rem);
  --fs-700: clamp(1.35rem, 1.1rem + 1.3vw, 1.9rem);
  --fs-600: clamp(1.15rem, 1.05rem + .5vw, 1.35rem);
  --fs-400: 1.0625rem;
  --fs-300: .9375rem;
  --fs-200: .8125rem;

  --space-section: clamp(4rem, 2.5rem + 6vw, 8rem);
  --measure: 62ch;

  --r-ctl: 2px;
  --r-img: 4px;

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

/* ---------- fonts, self-hosted, SIL OFL 1.1 (both OFL.txt files read in the
   google/fonts repository 2 Sep 2026; latin-subset variable woff2) ---------- */
@font-face{
  font-family:"Cinzel";
  src:url("../fonts/cinzel-var.woff2") format("woff2");
  font-weight:400 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Figtree";
  src:url("../fonts/figtree-var.woff2") format("woff2");
  font-weight:300 900; font-style:normal; font-display:swap;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:6.5rem;color-scheme:light}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  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{
  font-family:var(--font-display);
  font-weight:560;
  line-height:1.12;
  letter-spacing:.01em;
  color:var(--ink);
  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:650;line-height:1.3;margin:0 0 .4em;color:var(--ink)}
p{margin:0 0 1em;max-width:var(--measure)}
a{color:var(--accent);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--accent-lift)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:2px}
::selection{background:var(--maroon);color:#fff}
hr{border:0;border-top:1px solid var(--line);margin:2rem 0}
strong{font-weight:650}

.skip{
  position:absolute;left:-999px;top:0;z-index:200;
  background:var(--maroon);color:#fff;
  padding:.75rem 1.25rem;font-weight:600;
}
.skip:focus{left:0}

/* ---------- concept bar ---------- */
.conceptbar{
  background:var(--maroon);
  color:#fff;
  text-align:center;
  padding:.55rem 1rem;
  position:relative;z-index:60;
}
.conceptbar p{margin:0;max-width:none;font-size:var(--fs-300);color:#fff}
.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(--top-bg);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.top__in{
  max-width:1200px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:.65rem 1.25rem;min-height:64px;gap:1rem;
}
.brand{display:flex;flex-direction:column;text-decoration:none;line-height:1.05;color:var(--ink)}
.brand__name{
  font-family:var(--font-display);font-weight:650;
  font-size:1.2rem;letter-spacing:.06em;color:var(--maroon);
}
.brand__tag{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin-top:.15rem}
.nav{display:flex;gap:1.35rem;align-items:center}
.nav a{
  color:var(--ink);text-decoration:none;font-weight:500;font-size:var(--fs-300);
  padding:.55rem .1rem;border-bottom:1px solid transparent;
  transition:border-color .18s var(--ease-out),color .18s var(--ease-out);
}
.nav a[aria-current="page"],.nav a:hover{border-bottom-color:var(--maroon);color:var(--maroon)}
.navbtn{
  display:none;background:none;border:1px solid var(--line-strong);border-radius:var(--r-ctl);
  color:var(--ink);font-size:1.3rem;line-height:1;padding:.5rem .7rem;min-width:44px;min-height:44px;cursor:pointer;
  transition:transform .15s var(--ease-out);
}
.navbtn:active{transform:scale(.97)}
@media (max-width:820px){
  .navbtn{display:inline-block}
  .nav{
    display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;gap:0;
    background:var(--marble);              /* SOLID panel, no third blur */
    border-bottom:1px solid var(--line);
  }
  .nav.open{display:flex}
  .nav a{padding:.95rem 1.25rem;border-bottom:1px solid var(--line);min-height:48px}
  .nav a[aria-current="page"],.nav a:hover{border-bottom-color:var(--line);background:var(--marble-band)}
}

/* ---------- the honey-light surface: fixed behind the whole document.
   The CSS below IS the still fallback: with JavaScript off, reduced motion,
   no WebGL2, a narrow screen or a slow connection, this wash is the page.
   Marble white with a faint warm pool, nothing that a caption could not
   sit on. ---------- */
.honey-stage{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(60% 45% at 68% 22%, rgba(217,168,90,.28), rgba(217,168,90,0) 70%),
    radial-gradient(45% 40% at 18% 78%, rgba(207,174,137,.22), rgba(207,174,137,0) 70%),
    linear-gradient(180deg, #F4F4F2 0%, #ECECE9 100%);
}
.honey-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
main{position:relative;z-index:1}
header.top,.conceptbar{position:relative;z-index:50}
header.top{position:sticky}

/* ---------- bands: opaque colour or a translucent window ---------- */
.band{padding:var(--space-section) 0;position:relative}
.band__in{max-width:1200px;margin:0 auto;padding:0 1.25rem}
.band--opaque{background:var(--marble)}
.band--stone{background:var(--marble-band)}
.band--window{background:var(--bg-veil)}
.band--maroon{background:var(--maroon);color:#fff}
.band--maroon h1,.band--maroon h2,.band--maroon h3{color:#fff}
.band--maroon p{color:#fff}
.band--maroon .muted{color:var(--on-accent-2)}
.band--maroon a{color:#fff}
.band--maroon hr{border-top-color:rgba(205,162,114,.55)}
.band--seam{border-top:1px solid var(--line)}
.band--tight{padding-top:calc(var(--space-section) * .55);padding-bottom:calc(var(--space-section) * .55)}

/* ---------- hero ---------- */
.hero{
  min-height:calc(100svh - 64px - 2.4rem);
  display:flex;align-items:center;
  padding:clamp(2rem,4vw,4rem) 0;
}
.hero__in{max-width:1200px;margin:0 auto;padding:0 1.25rem;width:100%}
/* the hero panel (backdrop-filter 2 of 2). Tint .84, see the on-glass rule */
.hero__panel{
  background:var(--bg-glass);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid var(--line);
  padding:clamp(1.5rem,3.5vw,3rem);
  max-width:640px;
}
.hero__place{margin:0 0 .9rem;color:var(--ink-2);font-size:var(--fs-300)}
.lede{font-size:var(--fs-600);line-height:1.5;max-width:56ch}
.hero__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.4rem}

/* ---------- buttons: one system, 2px ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:.75rem 1.4rem;
  border-radius:var(--r-ctl);border:1px solid transparent;
  font-weight:600;font-size:var(--fs-300);letter-spacing:.01em;
  text-decoration:none;white-space:nowrap;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(--btn-solid-bg);color:var(--btn-solid-fg);border-color:var(--btn-solid-bg)}
.btn--solid:hover{background:var(--accent-lift);border-color:var(--accent-lift);color:#fff}
.btn--ghost{background:rgba(242,242,240,.6);color:var(--btn-ghost-fg);border-color:var(--maroon)}
.btn--ghost:hover{background:var(--maroon);color:#fff}
.band--maroon .btn--solid{background:#fff;color:var(--maroon);border-color:#fff}
.band--maroon .btn--solid:hover{background:var(--rose-tint);border-color:var(--rose-tint);color:var(--maroon)}
.band--maroon .btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
.band--maroon .btn--ghost:hover{background:#fff;color:var(--maroon)}

/* ---------- layout helpers ---------- */
.grid{display:grid;gap:1.25rem}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid--center{align-items:center}
.grid--start{align-items:start}
.gap-lg{gap:clamp(1.5rem,3vw,3rem)}
.mt-1{margin-top:1rem}.mt-2{margin-top:1.75rem}.mt-3{margin-top:2.5rem}
.w-narrow{max-width:52ch}
.muted{color:var(--ink-2)}
.small{font-size:var(--fs-300)}
.txt-ink{color:var(--ink)}
@media (max-width:820px){
  .grid--3,.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .grid--2,.grid--3,.grid--4{grid-template-columns:1fr}
}

/* ---------- cards: square, hairline, no shadow ---------- */
.card{
  display:block;text-decoration:none;color:var(--ink);
  background:var(--marble);
  border:1px solid var(--card-line);
  transition:transform .2s var(--ease-out),border-color .2s var(--ease-out);
  min-width:0;
}
.card img{border-radius:0;aspect-ratio:4/3;object-fit:cover;width:100%}
.card img.contain{object-fit:contain;background:var(--marble-band)}
.card__body{padding:1rem 1.1rem 1.2rem}
.card__body p{margin:0;color:var(--ink-2);font-size:var(--fs-300)}
.card h3{margin-bottom:.35em}
@media (hover:hover){
  .card:hover{border-color:var(--maroon);transform:translateY(-2px)}
  .card:hover h3{color:var(--maroon)}
}
.card:active{transform:scale(.99)}
.card--text{padding:1.4rem 1.3rem}
.card--text h3{margin-top:0}
.band--maroon .card{background:transparent;border-color:rgba(255,255,255,.35);color:#fff}
.band--maroon .card__body p{color:var(--on-accent-2)}
.band--maroon .card:hover{border-color:#fff}
.band--maroon .card:hover h3{color:#fff}

/* ---------- figures & galleries ---------- */
.piece{margin:0;min-width:0}
.piece img{width:100%;border:1px solid var(--line)}
.piece figcaption{font-size:var(--fs-300);color:var(--ink-2);margin-top:.55rem;line-height:1.45}
.img-line{border:1px solid var(--line)}
.img-portrait{max-width:420px;width:100%;margin:0 auto}
.img-doc{max-width:360px;width:100%}
.gallery{display:grid;gap:1.25rem;grid-template-columns:repeat(3,minmax(0,1fr))}
.gallery .piece img{aspect-ratio:4/3;object-fit:cover}
.gallery .piece--tall img{aspect-ratio:3/4}
@media (max-width:820px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.gallery{grid-template-columns:1fr}}

/* ---------- definitions / answer blocks (the AI-citation shape) ---------- */
.def{border-top:1px solid var(--line);padding:1.25rem 0 .5rem}
.def h3{margin-top:0}
.def p{margin-bottom:.5rem}
.faq details{border-top:1px solid var(--line);padding:.2rem 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;font-weight:600;padding:.95rem 0;list-style:none;
  display:flex;justify-content:space-between;gap:1rem;align-items:center;color:var(--ink)
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--font-body);font-weight:400;color:var(--maroon);font-size:1.4rem;line-height:1;transition:transform .2s var(--ease-out)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding-bottom:.9rem;margin:0;color:var(--ink-2)}
.faq details p + p{padding-top:0}

/* ---------- quotes from the shop's own material ---------- */
.cardquote{
  margin:0;border:1px solid var(--line);padding:1.5rem 1.6rem;
  background:var(--marble);position:relative;
}
.cardquote p{font-family:var(--font-display);font-size:var(--fs-600);line-height:1.35;margin:0 0 .75rem;color:var(--ink)}
.cardquote cite{font-style:normal;color:var(--ink-2);font-size:var(--fs-300)}
.band--maroon .cardquote{background:transparent;border-color:rgba(205,162,114,.6)}
.band--maroon .cardquote p,.band--maroon .cardquote cite{color:#fff}

/* ---------- NAP, breadcrumbs, map ---------- */
.nap{font-style:normal;line-height:1.6}
.nap strong{display:block;font-family:var(--font-display);font-size:1.1rem;letter-spacing:.03em}
.nap--big{font-size:var(--fs-600)}
.crumbs{font-size:var(--fs-300);color:var(--ink-2);margin-bottom:1.5rem}
.crumbs ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.35rem}
.crumbs li + li::before{content:"/";margin-right:.35rem;color:var(--vein)}
.crumbs a{color:var(--ink-2)}
.mapwrap{border:1px solid var(--line);background:var(--marble-band)}
.mapwrap iframe{width:100%;height:340px;border:0;display:block}
.hours{list-style:none;padding:0;margin:0 0 1rem;border-top:1px solid var(--line)}
.hours li{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px solid var(--line)}
.hours li span:last-child{font-weight:600}

/* ---------- lists ---------- */
.list{padding-left:1.2rem;margin:0 0 1rem;max-width:var(--measure)}
.list li{margin-bottom:.4rem}
.list li::marker{color:var(--maroon)}
.tick{list-style:none;padding:0;margin:0 0 1rem;max-width:var(--measure)}
.tick li{padding:.4rem 0 .4rem 1.5rem;position:relative}
.tick li::before{content:"";position:absolute;left:0;top:.95rem;width:.6rem;height:.6rem;background:var(--maroon)}
.band--maroon .tick li::before{background:var(--gold)}

/* ---------- the maroon label mark, once, as the emblem ---------- */
.emblem{
  width:64px;height:64px;border-radius:50%;
  background:var(--maroon);color:var(--gold);
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;font-size:1.5rem;letter-spacing:.02em;
  border:1px solid var(--gold);box-shadow:inset 0 0 0 3px var(--maroon), inset 0 0 0 4px var(--gold);
}

/* ---------- footer ---------- */
footer{
  position:relative;z-index:1;
  background:var(--graphite);color:#DCDCD8;
  padding:3.5rem 0 1.5rem;
  border-top:1px solid var(--vein);
}
footer h2{font-size:1rem;color:#fff;letter-spacing:.05em;margin-bottom:.9rem}
footer a{color:#DCDCD8}
footer a:hover{color:#fff}
footer .nap{color:#DCDCD8}
footer .nap strong{color:#fff}
footer ul{list-style:none;padding:0;margin:0}
footer li{margin:.35rem 0;font-size:var(--fs-300)}
.foot__in{max-width:1200px;margin:0 auto;padding:0 1.25rem;display:grid;gap:2rem;grid-template-columns:1.4fr 1fr 1fr}
.foot__legal{max-width:1200px;margin:2.5rem auto 0;padding:1.25rem 1.25rem 0;border-top:1px solid rgba(220,220,216,.2);text-align:center}
.foot__note,.foot__credit{margin:.2rem 0;font-size:var(--fs-200);color:#C8C8C3;max-width:none}
.foot__credit{color:#A9A9A5}
@media (max-width:820px){.foot__in{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot__in{grid-template-columns:1fr}}

/* ---------- sticky mobile call bar ---------- */
.callbar{display:none}
@media (max-width:820px){
  body{padding-bottom:64px}
  .callbar{
    display:grid;grid-template-columns:1fr 1fr;
    position:fixed;left:0;right:0;bottom:0;z-index:55;
    background:var(--maroon);border-top:1px solid var(--gold);
  }
  .callbar a{
    color:#fff;text-decoration:none;font-weight:600;text-align:center;
    min-height:56px;display:flex;align-items:center;justify-content:center;
    font-size:var(--fs-300);
  }
  .callbar a + a{border-left:1px solid rgba(205,162,114,.6)}
}

/* ---------- reveals: class added ONLY by JavaScript. transform + visibility
   only; never opacity on text. ---------- */
.rv{visibility:hidden;transform:translateY(14px);transition:transform .55s var(--ease-out),visibility 0s linear .55s}
.rv.in{visibility:visible;transform:none;transition:transform .55s var(--ease-out),visibility 0s}
@media (prefers-reduced-motion:reduce){
  .rv{visibility:visible;transform:none;transition:none}
  *{transition-duration:.01ms !important;animation:none !important}
}
@media print{
  .rv{visibility:visible !important;transform:none !important}
  .honey-stage,.callbar,.navbtn{display:none !important}
  .top{position:static;background:#fff}
  .band--window{background:#fff}
}

/* ---------- 404 ---------- */
.lost{min-height:60svh;display:flex;align-items:center}