/* ===========================================================================
   BRISHTIDHARA SAREES - 58 Willow Avenue, Kolkata
   Built 30 Aug 2026.

   ONE COMMITTED LOOK. There is no light mode, no prefers-color-scheme block
   and no theme toggle anywhere in this file. That is deliberate and it is the
   owner's explicit instruction, which is the documented override to the
   "design for both modes" default.

   THE PALETTE IS MEASURED, NOT CHOSEN.
   Every colour below was sampled with Pillow from the shop's own photographs
   in C:\Users\Susar\Desktop\Brishtidhara. The measurement is written beside each
   token. Full working: _claude/reference/brand-brishtidhara.md section 5.

   THE CONSTRAINT THAT SHAPES THIS PAGE.
   The sindoor red measured off their signboard is 3.03:1 against the ground.
   That is below WCAG AA for body text. So the red is NEVER text at reading
   size on this site. It is a fill, a rule, or display type at 24px and above.
   Every other colour was checked the same way; the ratio is on each line.
   =========================================================================== */

/* ---------- 1. Faces. Self-hosted. Nothing is fetched from Google. ---------
   Subset and optically instanced locally with fontTools:
     Newsreader  200-800 wght, opsz pinned to 32      37.1 KB
     Newsreader  italic, 200-800 wght                 32.8 KB
     Schibsted Grotesk 400-900 wght                   27.0 KB
     Tiro Bangla, subset to the shop's own name        6.5 KB
   103.4 KB in total, down from 415 KB unsubset.
   Newsreader and Schibsted Grotesk are both SIL Open Font License; Tiro
   Bangla likewise. Nothing here was bought.                                 */

@font-face{font-family:'Newsreader';src:url('fonts/newsreader-var.woff2') format('woff2-variations'),url('fonts/newsreader-var.woff2') format('woff2');font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:'Newsreader';src:url('fonts/newsreader-italic-var.woff2') format('woff2-variations'),url('fonts/newsreader-italic-var.woff2') format('woff2');font-weight:200 800;font-style:italic;font-display:swap}
@font-face{font-family:'Schibsted';src:url('fonts/schibsted-var.woff2') format('woff2-variations'),url('fonts/schibsted-var.woff2') format('woff2');font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:'TiroBangla';src:url('fonts/tiro-bangla.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}

/* ---------- 2. Tokens ---------- */
:root{
  /* ground: their teal jamdani drape measured #203640, taken down to a depth
     that still reads blue-green rather than black. Never #000. */
  --ink:      #0C1A1E;
  --ink-2:    #112A30;   /* raised surfaces */
  --ink-3:    #17383F;   /* hairlines, third level */

  /* type: the undyed tussar ground of their own sarees, measured #ECE2C9 */
  --oat:      #ECE2C9;   /* 13.78:1 on ink   AAA */
  --body:     #B8C4C4;   /*  9.92:1 on ink   AAA */
  --dim:      #8A9A9D;   /*  6.08:1 on ink   AA  */

  /* ghicha tan, measured #C8AC8C off the same tussar, warmer band */
  --tan:      #C6AA8A;   /*  8.05:1 on ink   AAA */

  /* THE accent, and the only one. Measured off the red letters of their own
     signboard: core #9E0005, average #A11D22 across 10,721 pixels. */
  --red:      #C4202A;   /*  3.03:1 on ink - LARGE TEXT AND GRAPHICS ONLY */
  --red-deep: #9E0005;   /*  as a FILL, with --oat on it: 6.63:1  AA      */

  /* the light end of the ground's own hue. Not a second accent: it is the
     ink lifted. Their peacock silk, measured #376874. */
  --peacock:  #6FBCC8;   /*  8.21:1 on ink   AAA */

  --glass:      rgba(236,226,201,.045);
  --glass-line: rgba(236,226,201,.13);
  --hair:       rgba(236,226,201,.10);

  --f-disp: 'Newsreader', Georgia, 'Times New Roman', serif;
  --f-ui:   'Schibsted', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-bn:   'TiroBangla', 'Noto Serif Bengali', serif;

  /* one radius system: soft. 2px for hairline chips, 14px for panels. */
  --r:   14px;
  --r-s: 2px;

  --ease: cubic-bezier(.22,1,.36,1);
  --slow: cubic-bezier(.16,1,.30,1);

  --pad:  clamp(20px, 5vw, 88px);
  --maxw: 1380px;
}

/* ---------- 3. Reset and base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--ink);
  color:var(--body);
  font-family:var(--f-ui);
  font-size:clamp(15.5px,1.02vw,17.5px);
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* THE WARP. The page itself is woven: vertical threads at 46px, a weft at
   128px, both at an alpha you notice only as texture. This is the "lively
   background" and it costs nothing - no image, no canvas, no request. */
body::before{
  content:'';position:fixed;inset:-10vh -10vw;z-index:0;pointer-events:none;
  background:
    repeating-linear-gradient(90deg, rgba(236,226,201,.030) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(0deg,  rgba(236,226,201,.016) 0 1px, transparent 1px 128px),
    radial-gradient(120% 80% at 12% 0%,  rgba(111,188,200,.10), transparent 60%),
    radial-gradient(100% 70% at 90% 12%, rgba(158,0,5,.10),     transparent 62%),
    radial-gradient(90%  70% at 60% 100%,rgba(198,170,138,.07), transparent 60%);
  animation:warpdrift 90s var(--slow) infinite alternate;
}
@keyframes warpdrift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-24px,-16px,0)}}

/* grain, on a fixed pointer-events:none layer so it never repaints on scroll */
body::after{
  content:'';position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.30;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.36'/%3E%3C/svg%3E");
}

main,header,footer{position:relative;z-index:1}

img{max-width:100%;height:auto;display:block}

::selection{background:var(--red-deep);color:var(--oat)}

/* One focus style, everywhere, in oat so it is unambiguous on every surface
   including over photographs. */
:where(a,button,summary,input,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--oat);
  outline-offset:3px;
  border-radius:var(--r-s);
}

.skip{
  position:absolute;left:12px;top:-60px;z-index:200;
  background:var(--oat);color:var(--ink);padding:10px 18px;border-radius:var(--r-s);
  font-family:var(--f-ui);font-weight:600;text-decoration:none;
  transition:top .18s var(--ease);
}
.skip:focus{top:12px}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}

/* ---------- 4. Type scale ---------- */
h1,h2,h3,h4{
  font-family:var(--f-disp);
  color:var(--oat);
  font-weight:380;
  line-height:1.06;
  letter-spacing:-.014em;
  margin:0;
  text-wrap:balance;
}
h1{font-size:clamp(2.65rem,6.6vw,5.1rem)}
h2{font-size:clamp(2.05rem,4.3vw,3.5rem)}
h3{font-size:clamp(1.3rem,1.9vw,1.72rem);font-weight:420;line-height:1.16}
h4{font-size:1.06rem;font-weight:500;line-height:1.3}

/* Emphasis is the italic of the SAME family, never a second family.
   leading and padding reserved so descenders in y g j p q never clip. */
em,.em{font-style:italic;color:var(--oat);line-height:1.14;padding-bottom:.06em}

p{margin:0 0 1.15em}
.lede{
  font-family:var(--f-disp);
  font-size:clamp(1.18rem,1.85vw,1.5rem);
  line-height:1.52;color:var(--body);font-weight:340;max-width:60ch;
}
.prose{max-width:62ch}
.prose p{font-family:var(--f-disp);font-size:1.06em;line-height:1.72;font-weight:340}

.bn{font-family:var(--f-bn);color:var(--tan);line-height:1.5}

/* The one small-caps label style. Used sparingly: see the eyebrow budget note
   in the HTML. Never below 12px, never below AA. */
.label a{display:inline-block;padding:4px 2px}   /* breadcrumb hit area */
.label{
  font-family:var(--f-ui);font-size:.735rem;font-weight:600;
  letter-spacing:.19em;text-transform:uppercase;color:var(--tan);
  margin:0 0 1.1rem;display:block;
}

.rule{width:64px;height:2px;background:var(--red);border:0;margin:0 0 1.6rem}

/* ---------- 5. Header ---------- */
.hdr{
  position:sticky;top:0;z-index:50;
  background:rgba(12,26,30,.80);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--hair);
}
@supports not (backdrop-filter:blur(2px)){.hdr{background:rgba(12,26,30,.97)}}
@media (prefers-reduced-transparency:reduce){
  .hdr{background:var(--ink);backdrop-filter:none;-webkit-backdrop-filter:none}
}
.hdr__in{
  max-width:var(--maxw);margin-inline:auto;padding:0 var(--pad);
  height:70px;display:flex;align-items:center;gap:clamp(14px,3vw,40px);
}
.brand{display:flex;align-items:baseline;gap:9px;text-decoration:none;flex:0 0 auto}
.brand__n{font-family:var(--f-disp);font-size:1.42rem;color:var(--oat);letter-spacing:-.01em;font-weight:420}
.brand__bn{font-family:var(--f-bn);font-size:.94rem;color:var(--tan);position:relative;top:-1px}  /* was --red: 3.03:1, below AA at 15px. Tan is 8.05:1. */
.nav{margin-left:auto;display:flex;align-items:center;gap:clamp(12px,2.2vw,30px)}
.nav a{
  font-family:var(--f-ui);font-size:.87rem;font-weight:500;letter-spacing:.012em;
  color:var(--body);text-decoration:none;padding:6px 2px;position:relative;white-space:nowrap;
  transition:color .22s var(--ease);
}
.nav a::after{
  content:'';position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--red);transition:right .32s var(--ease);
}
.nav a:hover{color:var(--oat)}
.nav a:hover::after,.nav a[aria-current="page"]::after{right:0}
.nav a[aria-current="page"]{color:var(--oat)}
.hdr .btn{padding:9px 17px;font-size:.83rem}
/* `.nav a` is (0,1,1) and `.btn--go` is only (0,1,0), so the nav rule was
   winning and painting the header CTA cream-on-cream at 1.39:1. Measured,
   not guessed. These two lines put the button colours back. */
.hdr .nav a.btn--go{color:var(--ink)}
.hdr .nav a.btn--line{color:var(--oat)}
.hdr .nav a.btn::after{display:none}
@media (max-width:860px){
  .hdr__in{height:62px;gap:10px}
  .nav{gap:13px}
  .nav a{font-size:.8rem}
  .nav .nav__drop{display:none}       /* condense, never wrap to two lines */
  .brand__bn{display:none}
}
@media (max-width:520px){ .hdr .btn{padding:8px 12px;font-size:.78rem} }

/* ---------- 6. Buttons. Every pair below was contrast-checked. ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--f-ui);font-size:.93rem;font-weight:600;letter-spacing:.015em;
  padding:14px 26px;border-radius:999px;border:1px solid transparent;
  text-decoration:none;cursor:pointer;white-space:nowrap;   /* never wraps to 2 lines */
  min-height:46px;                                          /* touch target */
  transition:transform .16s var(--ease),background .22s var(--ease),
             border-color .22s var(--ease),color .22s var(--ease);
}
.btn--go{background:var(--oat);color:var(--ink)}            /* 13.78:1 */
.btn--go:hover{background:#FFF6E2}
.btn--line{background:transparent;color:var(--oat);border-color:rgba(236,226,201,.34)}
.btn--line:hover{border-color:var(--oat);background:rgba(236,226,201,.06)}
.btn--red{background:var(--red-deep);color:var(--oat)}      /*  6.63:1 */
.btn--red:hover{background:#B50309}
.btn:active{transform:translateY(1px) scale(.985)}
.btn__i{width:15px;height:15px;flex:0 0 auto}

/* ---------- 7. Hero ----------
   The warp is NOT a card. An earlier version framed it in a bordered, rounded,
   shadowed box and it read as a graphic swatch pasted into the page: a hard top
   edge, hard sides, and a visible gap of dead space beside it. Now it is a
   full-height band down the right, masked away to nothing at every edge, so the
   threads run off the page instead of stopping at a line. */
.hero{
  position:relative;
  display:flex;align-items:center;
  min-height:clamp(500px,76vh,740px);
  padding:clamp(30px,4.5vw,58px) 0 clamp(34px,5vw,66px);
}
.hero__grid{
  position:relative;z-index:2;width:100%;
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);
  display:grid;grid-template-columns:1fr;gap:clamp(30px,4vw,52px);align-items:center;
}
.hero h1{margin-bottom:.34em}
.hero .lede{margin-bottom:2rem}
.hero__cta{display:flex;flex-wrap:wrap;gap:13px}

/* the loom: WebGL over a real photograph. The photograph is real content and is
   always in the HTML, so the panel is never empty if the canvas fails. */
.loom{
  position:relative;overflow:hidden;
  aspect-ratio:1/1;background:var(--ink);
  border-radius:var(--r);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 82%,transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 82%,transparent 100%);
}
.loom__ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .9s var(--slow)}
.loom__c{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.1s var(--slow)}
.loom.is-live .loom__c{opacity:1}
.loom.is-live .loom__ph{opacity:0}

@media (min-width:960px){
  /* One column of text, and the warp is a full-height band behind it on the
     right, running off the top and bottom of the section.
     .hero__grid must NOT be positioned here, or the absolute .loom measures
     itself against the grid (which is only as tall as the text) instead of
     against the section. That bug made the band 360px tall inside a 654px
     hero and it floated in the middle like a strip of tape. */
  .hero__grid{grid-template-columns:minmax(0,1fr);position:static}
  .hero__grid > :first-child{
    position:relative;z-index:2;
    max-width:min(47%,580px);   /* stays clear of the threads entirely */
  }
  .loom{
    position:absolute;top:0;right:0;bottom:0;left:auto;
    width:min(52vw,720px);
    aspect-ratio:auto;height:auto;border-radius:0;z-index:1;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 10%,#000 84%,transparent 100%);
            mask-image:linear-gradient(to bottom,transparent 0,#000 10%,#000 84%,transparent 100%);
  }
  /* and its left edge dissolves into the page rather than cutting off */
  .loom::after{
    content:'';position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(to right,var(--ink) 0,rgba(12,26,30,.62) 14%,transparent 34%);
  }
}
@media (max-width:959px){
  .loom{margin-top:clamp(8px,2vw,18px)}
  .loom::after{
    content:'';position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(to top,rgba(12,26,30,.55),transparent 42%);
  }
}

/* ---------- 8. The strip under the hero (never inside it) ---------- */
.strip{border-block:1px solid var(--hair);background:rgba(17,42,48,.4)}
.strip__in{
  max-width:var(--maxw);margin-inline:auto;padding:20px var(--pad);
  display:flex;flex-wrap:wrap;align-items:center;gap:14px clamp(20px,3.4vw,46px);
}
.strip span{font-family:var(--f-ui);font-size:.85rem;color:var(--body)}

/* ---------- 9. Sections ---------- */
section{padding:clamp(64px,8.5vw,132px) 0}
.sec__head{max-width:var(--maxw);margin:0 auto clamp(34px,4.4vw,62px);padding-inline:var(--pad)}
.sec__head p{max-width:56ch;margin-top:1.15rem}

/* -- 9a. The quote. Their own words, given room. ----------------------- */
.said{position:relative}
.said__grid{
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);
  display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,60px);align-items:center;
}
@media (min-width:900px){.said__grid{grid-template-columns:1fr minmax(0,.72fr)}}
blockquote{
  margin:0;font-family:var(--f-disp);font-weight:330;
  font-size:clamp(1.55rem,3.5vw,2.85rem);line-height:1.28;color:var(--oat);
  letter-spacing:-.012em;
}
blockquote .q{color:var(--red);font-size:1.1em;line-height:0}
.said__by{font-family:var(--f-ui);font-size:.82rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--dim);margin-top:1.7rem}
.said__ph{border-radius:var(--r);overflow:hidden;border:1px solid var(--glass-line);
  box-shadow:0 30px 70px -36px rgba(0,0,0,.8)}

/* -- 9b. The weaves. A bento with exactly six cells and real rhythm. ---- */
.weaves{
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);
  display:grid;gap:14px;grid-template-columns:1fr;
}
@media (min-width:700px){.weaves{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1020px){
  .weaves{grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(190px,auto)}
  .w1{grid-column:span 4;grid-row:span 2}   /* tussar, the big one */
  .w2{grid-column:span 2;grid-row:span 1}
  .w3{grid-column:span 2;grid-row:span 1}
  .w4{grid-column:span 2;grid-row:span 2}
  .w5{grid-column:span 2;grid-row:span 1}
  .w6{grid-column:span 2;grid-row:span 1}
}
.weave{
  position:relative;overflow:hidden;border-radius:var(--r);
  border:1px solid var(--glass-line);background:var(--ink-2);
  min-height:200px;display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(18px,2.2vw,28px);text-decoration:none;isolation:isolate;
  transition:border-color .3s var(--ease),transform .4s var(--ease);
}
.weave img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transition:transform 1.1s var(--slow),filter .5s var(--ease);
  filter:saturate(.94) brightness(.82);
}
.weave::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(0deg,rgba(12,26,30,.94) 0%,rgba(12,26,30,.62) 42%,rgba(12,26,30,.18) 100%);
}
.weave:hover{border-color:rgba(236,226,201,.30);transform:translateY(-3px)}
.weave:hover img{transform:scale(1.05);filter:saturate(1.02) brightness(.9)}
.weave h3{margin-bottom:.34rem}
.weave p{margin:0;font-size:.9rem;color:var(--body);max-width:38ch}
.weave__bn{font-family:var(--f-bn);font-size:.85rem;color:var(--tan);display:block;margin-bottom:.2rem}

/* -- 9c. Gallery. Scroll-snap, no library, no scroll listener. ---------- */
.gal{
  display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:4px var(--pad) 22px;scrollbar-width:thin;
  scrollbar-color:var(--ink-3) transparent;
}
.gal::-webkit-scrollbar{height:7px}
.gal::-webkit-scrollbar-track{background:transparent}
.gal::-webkit-scrollbar-thumb{background:var(--ink-3);border-radius:99px}
.gal figure{
  margin:0;flex:0 0 auto;width:clamp(216px,29vw,320px);scroll-snap-align:center;
}
.gal img{
  border-radius:var(--r);border:1px solid var(--glass-line);width:100%;
  aspect-ratio:Reviewed on Google;object-fit:cover;
  transition:transform .5s var(--ease);
}
.gal figure:hover img{transform:translateY(-4px)}
.gal figcaption{
  font-family:var(--f-ui);font-size:.79rem;color:var(--dim);
  margin-top:.7rem;letter-spacing:.02em;
}

/* -- 9d. The shop. Offset stack, a different layout family again. ------- */
.shop{
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);
  display:grid;grid-template-columns:1fr;gap:clamp(18px,2.4vw,30px);align-items:start;
}
@media (min-width:900px){
  .shop{grid-template-columns:repeat(12,1fr);gap:clamp(16px,2vw,26px)}
  .shop__a{grid-column:1/8}
  .shop__b{grid-column:8/13;margin-top:clamp(34px,5vw,86px)}
  .shop__c{grid-column:3/10;margin-top:clamp(6px,1vw,16px)}
  .shop__t{grid-column:1/6;align-self:center}
}
.shot{border-radius:var(--r);overflow:hidden;border:1px solid var(--glass-line);
  box-shadow:0 30px 66px -40px rgba(0,0,0,.85)}
.shot img{width:100%}
.shot figcaption{
  font-family:var(--f-ui);font-size:.78rem;color:var(--dim);
  padding:.72rem 1rem;background:var(--ink-2);border-top:1px solid var(--hair);
}

/* -- 9e. Find us. Glass panel over the ground. -------------------------- */
.find{
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);
  display:grid;grid-template-columns:1fr;gap:clamp(24px,3.2vw,46px);
}
@media (min-width:940px){.find{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}

/* Frosted glass, done properly: a 1px inner border and an inner highlight so
   the edge refracts, not just a blur. Solid fallback below. */
.glass{
  position:relative;border-radius:var(--r);padding:clamp(24px,3vw,38px);
  background:linear-gradient(140deg,rgba(236,226,201,.075),rgba(236,226,201,.022));
  border:1px solid var(--glass-line);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(236,226,201,.16),
             inset 0 -1px 0 rgba(236,226,201,.05),
             0 26px 60px -34px rgba(0,0,0,.8);
}
@supports not (backdrop-filter:blur(2px)){.glass{background:var(--ink-2)}}
@media (prefers-reduced-transparency:reduce){
  .glass{background:var(--ink-2);backdrop-filter:none;-webkit-backdrop-filter:none}
}
.nap{font-style:normal}
.nap__l{display:block;font-family:var(--f-disp);font-size:1.13rem;color:var(--oat);line-height:1.5}
.nap__l--dim{color:var(--body);font-size:1rem}
.nap a{color:var(--oat);text-decoration-color:rgba(236,226,201,.4);text-underline-offset:4px}
.nap a:hover{text-decoration-color:var(--oat)}
.phone{
  font-family:var(--f-disp);font-size:clamp(1.5rem,2.9vw,2.1rem);color:var(--oat);
  text-decoration:none;letter-spacing:.005em;display:inline-block;
  border-bottom:2px solid var(--red);padding-bottom:2px;
  transition:border-color .25s var(--ease)
}
.phone:hover{border-color:var(--oat)}

.hours{width:100%;border-collapse:collapse;font-family:var(--f-ui);font-size:.92rem;margin-top:.4rem}
.hours th{
  text-align:left;font-weight:500;color:var(--body);padding:.46rem 0;
  font-variant-numeric:tabular-nums;
}
.hours td{text-align:right;color:var(--oat);padding:.46rem 0;font-variant-numeric:tabular-nums}
/* one soft divider above the group, not a hairline under every single row */
.hours tbody{border-top:1px solid var(--hair)}
.hours .shut td{color:var(--tan)}

.map{
  border-radius:var(--r);overflow:hidden;border:1px solid var(--glass-line);
  background:var(--ink-2);min-height:330px;
}
.map iframe{display:block;width:100%;height:100%;min-height:330px;border:0;
  /* the frame carries the page's own ground, so a map that is slow, blocked by
     an extension, or refused by the network never flashes a white rectangle */
  background:var(--ink-2);filter:grayscale(.18) contrast(1.04)}

/* -- 9f. FAQ ------------------------------------------------------------ */
.faq{max-width:820px;margin-inline:auto;padding-inline:var(--pad)}
.faq details{border-top:1px solid var(--hair)}
.faq details:last-of-type{border-bottom:1px solid var(--hair)}
.faq summary{
  cursor:pointer;list-style:none;padding:1.25rem 2.6rem 1.25rem 0;position:relative;
  font-family:var(--f-disp);font-size:clamp(1.08rem,1.7vw,1.3rem);color:var(--oat);
  line-height:1.32;font-weight:400;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:'';position:absolute;right:6px;top:50%;width:12px;height:12px;
  border-right:1.6px solid var(--tan);border-bottom:1.6px solid var(--tan);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease);
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq details p{padding:0 1.5rem 1.3rem 0;margin:0;max-width:62ch;color:var(--body)}
.faq details p + p{padding-top:0}

/* -- 9g. Closing call --------------------------------------------------- */
.close{text-align:center}
.close__in{max-width:760px;margin-inline:auto;padding-inline:var(--pad)}
.close h2{margin-bottom:1rem}
.close .btnrow{display:flex;gap:13px;justify-content:center;flex-wrap:wrap;margin-top:2rem}

/* ---------- 10. Footer ---------- */
.ftr{border-top:1px solid var(--hair);padding:clamp(46px,6vw,74px) 0 30px;background:rgba(17,42,48,.34)}
.ftr__grid{
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);
  display:grid;gap:clamp(28px,4vw,54px);grid-template-columns:1fr;
}
@media (min-width:760px){.ftr__grid{grid-template-columns:1.3fr 1fr 1fr}}
.ftr h4{color:var(--tan);font-family:var(--f-ui);font-size:.73rem;letter-spacing:.19em;
  text-transform:uppercase;font-weight:600;margin-bottom:1.05rem}
.ftr a{color:var(--body);text-decoration:none;transition:color .2s var(--ease)}
.ftr a:hover{color:var(--oat)}
.ftr ul{list-style:none;margin:0;padding:0}
.ftr li{margin-bottom:.35rem;font-size:.92rem}
.ftr li a,.ftr address a{display:inline-block;padding:5px 0}   /* thumb-sized hit area */
.ftr__note{
  max-width:var(--maxw);margin:clamp(36px,4.6vw,58px) auto 0;padding-inline:var(--pad);
  border-top:1px solid var(--hair);padding-top:22px;
  display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;
  font-size:.8rem;color:var(--dim);
}
.ftr__note a{color:var(--dim);text-decoration:underline;text-underline-offset:3px;
  display:inline-block;padding:5px 0}
.ftr__note a:hover{color:var(--oat)}

/* ---------- 11. Cookie notice. It tells the truth. ---------- */
.ck{
  position:fixed;left:12px;right:12px;bottom:12px;z-index:120;
  max-width:520px;margin-inline:auto;padding:16px 18px;border-radius:var(--r);
  background:var(--ink-2);border:1px solid var(--glass-line);
  box-shadow:0 22px 54px -22px rgba(0,0,0,.9);
  display:none;gap:14px;align-items:center;flex-wrap:wrap;
  font-size:.85rem;color:var(--body);
}
.ck.on{display:flex}
.ck p{margin:0;flex:1 1 260px;min-width:0}
.ck button{
  font-family:var(--f-ui);font-size:.84rem;font-weight:600;
  background:var(--oat);color:var(--ink);border:0;border-radius:999px;
  padding:10px 20px;min-height:44px;cursor:pointer;
}
.ck button:active{transform:translateY(1px)}

/* ---------- 12. Motion. Every animation below is motivated. ----------
   .rv  = one entrance per section, so content arrives in reading order
          rather than all at once. Driven by IntersectionObserver, never by
          a scroll event listener.                                        */
/* NOTHING IS EVER HIDDEN WAITING FOR JAVASCRIPT.
   The .js class is set by a two-line inline script in the head of every page.
   If that script does not run, or main.js 404s, or a CSP blocks it, none of
   these rules apply and every word on the page is simply visible. A build on
   this project once shipped a page that stayed blank for exactly this reason. */
.js .rv{opacity:0;transform:translateY(18px);
    transition:opacity .8s var(--slow),transform .8s var(--slow)}
.js .rv.in{opacity:1;transform:none}
.js .rv-d1{transition-delay:.07s}.js .rv-d2{transition-delay:.14s}
.js .rv-d3{transition-delay:.21s}.js .rv-d4{transition-delay:.28s}

@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none;transition:none}
  body::before{animation:none}
  .weave,.weave img,.gal img,.btn,.nav a::after{transition:none}
  .loom__c{display:none}          /* the photograph stands in its place */
}

/* ---------- 13. Legal / privacy page ---------- */
.doc{max-width:760px;margin-inline:auto;padding-inline:var(--pad)}
.doc h2{font-size:clamp(1.4rem,2.4vw,1.85rem);margin:2.6rem 0 .9rem}
.doc h2:first-of-type{margin-top:1.4rem}
.doc p,.doc li{color:var(--body)}
.doc ul{padding-left:1.15rem}
.doc li{margin-bottom:.55rem}
.doc a{color:var(--oat);text-underline-offset:4px}

/* ---------- 14. Small screens ---------- */
@media (max-width:640px){
  .hero{padding-top:26px}
  .strip__in{gap:12px 22px}
  .said__grid,.find,.shop{gap:26px}
  .gal{scroll-snap-type:x proximity}
}

/* ---------- 15. The weaves page ----------------------------------------
   Alternating rows, capped at two in a row before a full-width band breaks
   the rhythm. Three consecutive image-plus-text splits is the pattern that
   makes a page feel machine-assembled, so the band is not decoration. */
.wrow{
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);
  display:grid;grid-template-columns:1fr;gap:clamp(26px,3.6vw,58px);align-items:center;
  padding-block:clamp(46px,6vw,86px);
}
@media (min-width:900px){
  .wrow{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .wrow--flip .wrow__ph{order:-1}
}
.wrow + .wrow{border-top:1px solid var(--hair)}
.wrow__ph{border-radius:var(--r);overflow:hidden;border:1px solid var(--glass-line);
  box-shadow:0 30px 70px -40px rgba(0,0,0,.82);margin:0}
.wrow__ph img{width:100%;aspect-ratio:4/3;object-fit:cover}
.wrow h2{margin-bottom:.7rem}
.wrow__bn{font-family:var(--f-bn);color:var(--tan);font-size:1.25rem;display:block;margin-bottom:.5rem}  /* was --red: 3.03:1 at 20px. */
.wrow .prose p:last-child{margin-bottom:0}

/* a full-width photographic band, used to break the alternation */
.band{position:relative;margin-block:clamp(20px,3vw,40px);overflow:hidden}
.band img{width:100%;height:clamp(240px,42vw,430px);object-fit:cover;filter:brightness(.7) saturate(.95)}
.band__t{
  position:absolute;inset:auto 0 0 0;padding:clamp(20px,3vw,40px) var(--pad);
  background:linear-gradient(0deg,rgba(12,26,30,.9),transparent);
}
.band__t p{
  max-width:var(--maxw);margin:0 auto;font-family:var(--f-disp);
  font-size:clamp(1.15rem,2.3vw,1.8rem);line-height:1.35;color:var(--oat);font-weight:340;
}

/* ---------- 16. Visit page ---------- */
.marks{list-style:none;margin:1.4rem 0 0;padding:0}
.marks li{
  padding:.85rem 0 .85rem 1.5rem;position:relative;font-size:.97rem;color:var(--body);
}
.marks li + li{border-top:1px solid var(--hair)}
.marks li::before{
  content:'';position:absolute;left:0;top:1.42em;width:8px;height:1px;background:var(--red);
}
.marks b{color:var(--oat);font-weight:500}

/* ---------- 17.This is a concept website. The business shown is fictional. There is no structured
   data anywhere on the site, because markup claiming to BE the business is
   the one thing an unpitched preview must never publish.
   Contrast on the bar is oat on the signboard red: 6.63:1, AA. */
.conceptbar{
  position:relative;z-index:120;
  display:flex;align-items:center;justify-content:center;
  background:var(--red-deep);color:var(--oat);
  padding:.6rem 1rem;text-align:center;
}
.conceptbar p{
  margin:0;font-family:var(--f-ui);
  font-size:clamp(.7rem,.62rem+.3vw,.8rem);
  font-weight:600;letter-spacing:.1em;text-transform:uppercase;line-height:1.4;
}
.conceptbar strong{font-weight:800}

.foot__note{
  max-width:var(--maxw);margin:clamp(30px,4vw,48px) auto 0;
  padding-inline:var(--pad);
  font-family:var(--f-ui);font-size:.84rem;font-weight:600;
  color:var(--tan);letter-spacing:.02em;
}

/* Concept-site additions. */
.map-stub{padding:28px 24px;border:1px solid currentColor;opacity:.75;font-size:.95em}