/* build: dev */
/* ^ The deploy script replaces that line with the date and time it
   uploaded. On the live site, View source and look at the first line of
   this file: if it still says an old date, the upload did not arrive. */
:root{
  --bg:#0f0c0c;--panel:#171313;--panel-2:#1f1a19;--line:#2c2826;
  --text:#f9f2e1;--mute:#928b7d;--accent:#edc163;--accent-soft:#f2d391;
  --accent-deep:#8f7640;--accent-line:rgba(237,193,99,.3);--accent-tint:#1d1813;
  --btn-bg:#edc163;--btn-bg-2:#f4d590;--btn-text:#0f0c0c;
  --ph:#191514;--ph-text:#4b4540;--shade:rgba(0,0,0,.55);
  --halo-1:rgba(237,193,99,.15);--halo-2:rgba(237,193,99,.08);--hero-top:#171310;
  --o1:#8f7640;--o2:#c9a556;--o3:#edc163;--o4:#f2d391;--o5:#f7e3ba;
  --down:#8fb6cf;--up:#e0b878;
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Poppins",system-ui,-apple-system,sans-serif;
  --bn:"Noto Sans Bengali","Poppins",system-ui,sans-serif;

  /* =================================================================
     THE SCALE

     Every size in the rate band, the collection cards, the sticky bar
     and the visitor's controls comes from this list. Nothing in those
     four areas may invent a number of its own — that is how the drift
     started. Each step has one job, named beside it.

     Fonts have fixed roles as well:
       --serif  Cormorant Garamond. Headings and the shop name. NOTHING
                else, and never a figure: its default numerals are
                old-style, so they sit at different heights and a price
                set in it looks mistyped.
       --sans   Poppins. Every number, label, button and body line.
       --bn     Noto Sans Bengali. All Bangla, including Bangla digits.
       --num    whichever of the two above suits the language on screen.
                Anything that prints a figure uses this, so switching to
                Bangla switches the digits with it.
     ================================================================= */
  /* Poppins has no taka sign. Left to itself the browser borrows one from
     whatever the device happens to have — Segoe UI on Windows, something
     else on a phone — and every one of those draws it shorter and lighter
     than Poppins' own figures, so "৳20,168" looked like a small sign glued
     to big digits. Noto Sans Bengali is already loaded for the Bangla side
     of the site and its taka matches Poppins in weight and height, so it is
     named here as the fallback. The DIGITS still come from Poppins: a font
     stack is resolved one character at a time, and Poppins has those. */
  --num:"Poppins","Noto Sans Bengali",system-ui,-apple-system,sans-serif;

  --fs-display:clamp(25px,5.2vw,42px); /* display      the one h1 on the page      */
  --fs-section:clamp(25px,4.6vw,38px); /* section head h2 above a band             */
  --fs-title:21px;                     /* card title   a piece's name              */
  --fs-value:24px;                     /* value        a price, or a rate figure   */
  --fs-value-lg:28px;                  /* value, large when it is the whole point  */
  --fs-body:14px;                      /* body         sentences, never smaller    */
  --fs-label:12.5px;                   /* label        buttons, chips, field names */
  --fs-caption:12.5px;                 /* caption      a weight, a note under a value */
  --fs-micro:11px;                     /* micro        uppercase letterspaced kickers */

  --s-1:4px;  --s-2:6px;  --s-3:8px;  --s-4:12px;
  --s-5:16px; --s-6:24px; --s-7:32px; --s-8:48px;

  /* the smallest thing a thumb is ever asked to hit */
  --tap:44px;
  /* The fixed topbar's real height. Anything that can be jumped to keeps
     this much clear above it, so a heading never lands underneath. */
  --topbar-h:47px;
  /* The sticky bar's real height, measured, WITHOUT the phone's safe area.
     .bar sets itself to it and the page pads itself by it, so the two
     cannot drift apart and slice the last card again. */
  --bar-h:62px;
}
body.bn{--num:var(--bn)}
@media(max-width:359px){:root{--bar-h:80px}}   /* the labels take a second line */
*{box-sizing:border-box}
html{overflow-x:hidden;background:var(--bg);transition:background .3s}
/* The page ends a whole sticky bar plus the phone's own gesture inset above
   the bottom edge, so the last card is never sliced by the call buttons. */
body{margin:0;overflow-x:hidden;background:transparent;color:var(--text);font-family:var(--sans);
  font-weight:300;line-height:1.6;-webkit-font-smoothing:antialiased;
  padding-bottom:calc(var(--bar-h) + env(safe-area-inset-bottom) + var(--s-5));
  transition:color .3s}
body.bn{font-family:var(--bn)}
.wrap{max-width:980px;margin:0 auto;padding:0 20px}
h1,h2,h3{font-family:var(--serif);font-weight:300;margin:0}
body.bn h1,body.bn h2,body.bn h3{font-family:var(--bn);font-weight:500}
a{color:inherit}
.hide{display:none!important}
svg{display:block;width:100%;height:auto}

/* ---------- controls ---------- */
.topbar{position:fixed;top:0;left:0;right:0;z-index:50;border-bottom:1px solid transparent;
  transition:background .25s,border-color .25s}
.topbar.solid{background:var(--shade);backdrop-filter:blur(12px);border-bottom-color:var(--line)}
.topbar .wrap{display:flex;align-items:center;gap:12px;padding:9px 20px}
.tb-brand{display:flex;align-items:center;gap:10px;opacity:0;transform:translateY(-4px);
  transition:.25s;pointer-events:none;min-width:0}
.topbar.solid .tb-brand{opacity:1;transform:none;pointer-events:auto}
.tb-mark{display:block;width:22px;height:22px;flex:none;color:var(--accent)}
.tb-mark svg{height:100%}
.tb-name{font-family:var(--serif);font-size:13px;line-height:1.25;white-space:nowrap}
.tb-name span{display:block;font-family:var(--sans);font-size:9.5px;color:var(--mute)}
.ctl{margin-left:auto;display:flex;gap:7px;flex:none}
.cbtn{border:1px solid var(--accent-line);background:var(--shade);backdrop-filter:blur(8px);
  color:var(--accent);font-family:var(--sans);font-size:11px;padding:7px 12px;border-radius:99px;
  cursor:pointer;line-height:1;white-space:nowrap}
.cbtn:hover{border-color:var(--accent)}
.cbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- festival card ---------- */
.fest{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.fest .im{width:100%;display:block;max-height:360px;object-fit:cover}
.fest .ov{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:24px;
  background:linear-gradient(90deg,var(--shade) 0%,transparent 46%,var(--shade) 100%)}
.fest .k{margin:0;font-size:9px;letter-spacing:.34em;text-transform:uppercase;color:var(--accent)}
.fest h3{font-size:clamp(24px,5vw,42px);line-height:1.1;margin:9px 0 0;color:var(--accent-soft)}
.fest p{margin:9px 0 0;font-size:13.5px;color:var(--text);opacity:.88;max-width:46ch}
.fest .cta{margin-top:15px;display:inline-block;background:var(--btn-bg);color:var(--btn-text);
  font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;padding:11px 22px;
  border-radius:2px;text-decoration:none}
.fest .x{position:absolute;top:11px;right:11px;width:28px;height:28px;border-radius:50%;
  background:var(--shade);border:1px solid var(--accent-line);color:var(--text);font-size:15px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(4px);z-index:3}
.banner{background:var(--accent-tint);border-bottom:1px solid var(--accent-line)}
.banner p{margin:0 auto;padding:10px 20px;text-align:center;font-size:12.5px;color:var(--accent);max-width:980px}

/* ---------- shared lockup ---------- */
.lock{text-align:center}
.lock .mk,.lock .wm,.lock .jw{display:block}
.lock .mk{width:56px;height:56px;margin:0 auto;color:var(--accent)}
.lock .mk svg{height:100%}
.lock .wm{width:min(216px,58vw);margin:15px auto 0;color:var(--text)}
.lock .jw{width:104px;margin:8px auto 0;color:var(--text);opacity:.85}
.lock.sm .mk{width:40px;height:40px}.lock.sm .wm{width:150px;margin-top:11px}.lock.sm .jw{width:76px}

/* ---------- shared pieces ---------- */
/* THE FRAME ALWAYS HAS A SHAPE BEFORE THE PICTURE ARRIVES.
   Three numbers decide it, and every layout below sets its own:

     --ar        the photograph's own shape, width ÷ height. app.js writes
                 it onto the element from the size recorded at upload, so it
                 beats everything here. The value in the stylesheet is only
                 the guess used for a piece uploaded before the shop began
                 recording it — the shape that layout used to crop to, so
                 nothing about the existing collection moves.
     --ar-tall   the tallest shape allowed. A 9:16 phone snap would
                 otherwise take a whole screen for one item. This is 3:4
                 in EVERY layout, because "too tall" is measured against
                 the reader's screen and that is the same size whichever
                 layout the shop has chosen. A true 3:4 portrait is
                 therefore never cropped anywhere on the site.
     --ar-wide   the widest. This one DOES change from layout to layout,
                 because a wide photograph's height is the column's width
                 divided by its ratio — 16:9 is 160px tall down the middle
                 of a phone but only 74px in the ornate list's 132px
                 thumbnail column. Each layout below sets it so the
                 shortest possible photograph still stands about 100px
                 tall, which is the point where the magnifier badge and
                 the CASUAL tag stop having room to sit in the picture.

   Between those two bounds the photograph is shown exactly as it was taken
   and NOTHING is cropped. Outside them the frame stops at the bound and
   object-fit:cover trims only the excess. The photograph fills the frame
   absolutely rather than as a flex item, so it crops from the centre
   instead of leaving a bar of the frame's own background beside it.
   The viewer always shows the whole picture regardless — see .vimg. */
.ph{background:var(--ph);border:1px solid var(--line);position:relative;overflow:hidden;
  --ar:1; --ar-tall:.75; --ar-wide:1.78;
  aspect-ratio:clamp(var(--ar-tall),var(--ar),var(--ar-wide));
  display:flex;align-items:center;justify-content:center;font-size:8.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ph-text)}
.ph img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;display:block}
.tag{position:absolute;top:9px;left:9px;background:var(--accent);color:var(--btn-text);font-size:8px;
  letter-spacing:.14em;text-transform:uppercase;padding:3px 9px;font-weight:500;z-index:2}
body.bn .tag{letter-spacing:normal;text-transform:none;font-size:10px}
.soldb{position:absolute;top:9px;right:9px;background:var(--panel);border:1px solid var(--line);
  color:var(--mute);font-size:9px;padding:3px 9px;z-index:2}
.is-sold .ph img{filter:grayscale(1);opacity:.5}
/* A PRICE IS NEVER CORMORANT.
   Cormorant Garamond's figures are old-style — the 3, 4, 7 and 9 hang below
   the line and the 6 and 8 rise above it — so "13,655" looked mistyped next
   to "13,030". Every figure on the page is set in --num (Poppins, or Noto
   Sans Bengali when the page is in Bangla) with lining, tabular numerals, so
   digits are one height and one width and a column of them lines up. */
.price,.bcell .v,.bcell .d,.bcell .g,.bandunit,
.pill .v,.pill .pg,.pill .pd,
.invrate .v,.invrate .g,
.bead .w,.card .w,.plate .w,.featured .w,
.oline,.oline b,.spec b,.gridtext,.xlab,
.viewer .vbar .p,.viewer .vcount,
input,select{
  font-family:var(--num);
  font-variant-numeric:lining-nums tabular-nums;
}
.price.req{color:var(--accent);font-size:var(--fs-label)}

/* ENQUIRE — a real button, not an underlined word.
   Shared by all three layouts so the affordance is the same wherever the
   customer meets it, and tall enough to hit on a phone. */
.ask,.more{display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--tap);padding:0 var(--s-5);border:1px solid var(--accent-line);
  border-radius:99px;background:transparent;color:var(--accent);text-decoration:none;
  font-family:var(--sans);font-size:var(--fs-label);font-weight:500;line-height:1.2;
  letter-spacing:.12em;text-transform:uppercase;transition:.18s}
.ask:hover,.more:hover{background:var(--accent-tint);border-color:var(--accent)}
.ask:focus-visible,.more:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
body.bn .ask,body.bn .more{font-family:var(--bn);letter-spacing:normal;text-transform:none;
  font-size:var(--fs-body)}
.askwrap{text-align:center;margin:var(--s-4) 0 0}
/* the owner's one-line description, never more than two lines on a card */
.blurb{margin:var(--s-2) 0 0;font-size:var(--fs-body);line-height:1.6;color:var(--mute);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;
  overflow:hidden;overflow-wrap:break-word}
.kick{margin:0;font-family:var(--sans);font-size:var(--fs-micro);letter-spacing:.3em;
  text-transform:uppercase;color:var(--accent)}
body.bn .kick{font-family:var(--bn);letter-spacing:.06em;text-transform:none;
  font-size:var(--fs-caption)}
.sechead{text-align:center;margin-bottom:var(--s-6)}
.sechead h2{font-size:var(--fs-section);margin:var(--s-3) 0 0}
.rule{margin:var(--s-4) auto 0;width:120px;opacity:.9}
.note{font-size:var(--fs-caption);color:var(--mute);line-height:1.8}
.emptymsg{padding:var(--s-7) 0;text-align:center;color:var(--mute);font-size:var(--fs-body)}

/* JUMP TARGETS.
   The topbar is fixed, so a browser that scrolls one of these to the top of
   the window puts its heading underneath the bar. Every id a filter chip, a
   festival call-to-action or a plain #link can land on keeps the bar's own
   height clear above it, plus a little air. */
#collection,#rate,#why,.catalogue,.band,.tools,.trust{
  scroll-margin-top:calc(var(--topbar-h) + var(--s-4));
}
html{scroll-padding-top:calc(var(--topbar-h) + var(--s-4))}

/* ---------- rate ---------- */
.band{background:color-mix(in srgb,var(--panel) 82%,transparent);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);padding:42px 0;position:relative;overflow:hidden;
  backdrop-filter:blur(2px)}
.band .wrap{position:relative;z-index:1}
/* THE UNIT, ONCE.
   It used to be repeated under all three figures at nearly the size of the
   figures themselves, which read as three headlines rather than one table
   with a caption. It is now a column header over the figures — once for the
   whole table, in the caption size, and set above the column it describes
   rather than immediately under a switch that says the same word. */
.bandtable{max-width:520px;margin:0 auto}
.bandunit{margin:0 0 var(--s-2);padding-right:var(--s-5);text-align:right;
  font-family:var(--sans);font-size:var(--fs-micro);letter-spacing:.2em;
  text-transform:uppercase;color:var(--mute)}
body.bn .bandunit{font-family:var(--bn);letter-spacing:normal;text-transform:none;
  font-size:var(--fs-caption)}

/* THE LEDGER.
   One full-width row per grade, grade on the left and figure on the right.
   An auto-fit grid stranded the third of three grades alone on a second row
   beside an empty cell; rows cannot strand anything, whatever the shop has
   filled in — two grades, three, or four with silver. Capped in width so it
   stays a table rather than a stretched-out receipt on a desktop. */
.bandgrid{display:grid;grid-template-columns:1fr;
  background:transparent;border:1px solid var(--line);overflow:hidden}
.bcell{background:transparent;border-top:1px solid var(--line);
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;
  column-gap:var(--s-4);padding:var(--s-4) var(--s-5)}
.bcell:first-child{border-top:0}
.bcell .k{grid-column:1;grid-row:1;margin:0;font-family:var(--sans);
  font-size:var(--fs-micro);letter-spacing:.18em;text-transform:uppercase;color:var(--accent);
  overflow-wrap:anywhere}
body.bn .bcell .k{font-family:var(--bn);letter-spacing:normal;text-transform:none;
  font-size:var(--fs-caption)}
.bcell .v{grid-column:2;grid-row:1;margin:0;font-family:var(--num);
  font-size:var(--fs-value);font-weight:500;line-height:1.15;color:var(--accent-soft);
  font-variant-numeric:lining-nums tabular-nums;text-align:right;white-space:nowrap}
/* the change sits directly under its own figure, a caption's distance away */
.bcell .d{grid-column:2;grid-row:2;margin:var(--s-1) 0 0;font-family:var(--num);
  font-size:var(--fs-micro);font-variant-numeric:lining-nums tabular-nums;text-align:right}
.bcell .d.down{color:var(--down)}.bcell .d.up{color:var(--up)}
/* only drawn when the shop publishes both units at once */
.bcell .g{grid-column:2;grid-row:3;margin:var(--s-2) 0 0;font-family:var(--num);
  font-size:var(--fs-micro);color:var(--mute);
  font-variant-numeric:lining-nums tabular-nums;text-align:right;white-space:nowrap}

/* THE SWITCH.
   One track, two segments — not two loose buttons. The active segment is
   filled with the accent, the other is transparent inside the same gold
   hairline, so it reads as one control with a position rather than as two
   things that might both be off. */
.unitsw{display:flex;width:fit-content;max-width:100%;margin:var(--s-5) auto var(--s-6);
  padding:3px;gap:0;border:1px solid var(--accent-line);border-radius:99px;
  background:color-mix(in srgb,var(--panel) 55%,transparent)}
.uchip{flex:0 1 auto;min-width:0;min-height:var(--tap);
  display:flex;align-items:center;justify-content:center;
  padding:0 clamp(12px,4.5vw,22px);border:0;border-radius:99px;background:transparent;
  font-family:var(--sans);font-size:var(--fs-label);font-weight:400;line-height:1.25;
  color:var(--mute);cursor:pointer;transition:background .18s,color .18s;
  overflow-wrap:anywhere}
body.bn .uchip{font-family:var(--bn)}
.uchip[aria-pressed="true"]{background:var(--accent);color:var(--btn-text);font-weight:500}
.uchip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.bandnote{text-align:center;max-width:56ch;margin:var(--s-6) auto 0}
/* Capped near the viewBox's own width so the chart is drawn at roughly 1:1 —
   the axis figures then read at the size they are set in, on a phone and on
   a desktop alike. */
.chartwrap{margin:var(--s-6) auto 0;max-width:420px}
.chartnote{text-align:center;font-size:var(--fs-caption);color:var(--mute);margin:0 0 var(--s-4);
  line-height:1.7}
.gridline{stroke:var(--line);stroke-width:1}
.gridtext{fill:var(--mute);font-family:var(--num);font-size:14px;
  font-variant-numeric:lining-nums tabular-nums}
.stepline{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round}
.knob{fill:var(--panel);stroke:var(--accent-soft);stroke-width:1.6}
/* The unit, named once at the head of the axis. Words, not figures, so it
   takes the sentence font rather than --num. */
.axisunit{fill:var(--mute);font-family:var(--sans);font-size:10.5px;
  letter-spacing:.06em}
body.bn .axisunit{font-family:var(--bn);letter-spacing:normal;font-size:10px}
.xlab{fill:var(--mute);font-family:var(--num);font-size:13px;text-anchor:middle}
/* A label that would overhang stops at the edge of the plot and grows
   inwards — leftwards from the right-hand end, rightwards from the left. */
.xlab.xend{text-anchor:end}
.xlab.xstart{text-anchor:start}
/* the clock, under the date, only when two rates fall on one day */
.xtime{font-size:11px;opacity:.8}
/* Centred with flex rather than text-align, because .btn further down the
   sheet sets display:flex — which makes the button a block-level box that
   text-align cannot move, and it sat against the left edge of the band. */
.sharewrap{display:flex;justify-content:center;margin-top:var(--s-6)}
.sharebtn{min-height:var(--tap);padding:0 var(--s-6)}

/* ---------- tools ---------- */
.tools{padding:46px 0;border-bottom:1px solid var(--line)}
.toolgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:760px){.toolgrid{grid-template-columns:1fr}}
.tool{background:color-mix(in srgb,var(--panel) 80%,transparent);border:1px solid var(--line);
  padding:20px 18px;backdrop-filter:blur(2px)}
.tool h3{font-size:19px;margin-bottom:14px}
.field{margin-bottom:11px}
label{display:block;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-bottom:6px}
body.bn label{letter-spacing:normal;text-transform:none;font-size:12px}
.pair{display:flex;gap:9px}
input,select{width:100%;background:var(--bg);border:1px solid var(--line);color:var(--text);
  font-family:inherit;font-weight:400;font-size:15px;padding:11px;border-radius:2px;appearance:none;
  font-variant-numeric:tabular-nums}
select{font-size:13.5px;font-weight:300}
.pair select{flex:0 0 42%}
input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.out{margin-top:14px;border:1px solid var(--line);overflow:hidden}
.oline{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 13px;
  font-size:12.5px;color:var(--mute);border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.oline:last-child{border-bottom:0}
.oline b{font-weight:500;color:var(--text);font-size:13.5px}
.oline.total{background:var(--panel-2)}
.oline.total b{color:var(--accent-soft);font-size:19px}
.toolnote{margin:12px 0 0;font-size:10.5px;color:var(--mute);line-height:1.7}

/* ---------- trust + footer ---------- */
.trust{padding:46px 0;text-align:center;border-bottom:1px solid var(--line)}
.tgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:26px}
.tgrid h3{font-size:17px;margin-bottom:5px;color:var(--accent-soft)}
.tgrid p{margin:0;font-size:11.5px;color:var(--mute)}
.bajus{margin-top:24px;display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--accent);
  border:1px solid var(--accent-line);background:var(--accent-tint);border-radius:99px;padding:8px 16px}
footer{background:color-mix(in srgb,var(--panel) 82%,transparent);border-top:1px solid var(--line);
  padding:40px 0 36px;text-align:center;backdrop-filter:blur(2px)}
footer .lock{margin-bottom:16px}
footer p{margin:0;font-size:13px;color:var(--mute);line-height:1.9}
.maplink{display:inline-block;margin-top:14px;font-size:12px;color:var(--accent);text-decoration:none;
  border-bottom:1px solid var(--line);padding-bottom:3px}
footer .prop{margin-top:10px;font-size:12.5px;color:var(--text);opacity:.85}
.fbwrap{margin-top:16px}
.fblink{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--accent);
  text-decoration:none;border:1px solid var(--accent-line);border-radius:99px;padding:8px 16px;
  transition:.18s}
.fblink:hover{background:var(--accent-tint)}
.fblink:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.fblink svg{width:14px;height:14px;flex:none}
.fbfine{margin:9px 0 0;font-size:10.5px;color:var(--mute);opacity:.85}
.fbfine a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px}
.fbfine a:hover{color:var(--accent)}
.fine{margin-top:20px;font-size:10.5px;color:var(--mute);opacity:.8;line-height:1.8}

/* ---------- sticky bar ---------- */
/* Its own height is --bar-h, and the page pads itself by the same variable,
   so the two are one decision rather than two numbers that drifted 11px
   apart and cut the bottom off the last card. The safe-area inset is added
   on top of the padding, not swapped in for it, so there is still a clear
   gap above an Android gesture bar rather than the buttons ending exactly
   where it begins. */
.bar{position:fixed;left:0;right:0;bottom:0;background:var(--shade);border-top:1px solid var(--line);
  min-height:var(--bar-h);
  padding:var(--s-3) 0 calc(var(--s-3) + env(safe-area-inset-bottom));
  backdrop-filter:blur(10px);z-index:45}
/* Flex, not a fixed grid: a grid of 1fr 1fr sent Facebook — the third child —
   onto a row of its own at full width, where its icon grew to fill a third
   of the screen. Flex keeps all three on one row, and a button the shop has
   not filled in is display:none and simply takes no space. */
.bar .wrap{display:flex;gap:var(--s-2);align-items:stretch;padding:0 var(--s-4)}
.bar .btn{flex:1 1 0;min-width:0;min-height:var(--tap)}
/* Facebook rides along as an icon of a fixed size. It can never be taller
   than the two word buttons because it is the same flex row, and never
   wider than its own 52px basis. */
.bar .bfb{flex:0 0 52px;padding:0}
.bar .bfb svg{width:19px;height:19px}
.btn{display:flex;align-items:center;justify-content:center;padding:var(--s-3) var(--s-3);
  border-radius:2px;text-decoration:none;font-family:var(--sans);font-size:var(--fs-label);
  letter-spacing:.04em;text-transform:uppercase;font-weight:500;line-height:1.25;text-align:center;
  border:1px solid transparent;cursor:pointer}
body.bn .btn{font-family:var(--bn);letter-spacing:normal;text-transform:none;
  font-size:var(--fs-body)}
.btn.g{background:linear-gradient(100deg,var(--btn-bg),var(--btn-bg-2) 52%,var(--btn-bg));color:var(--btn-text)}
.btn.o{border-color:var(--accent-line);color:var(--accent);background:transparent}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.setupwarn{background:#3a1f1f;border:1px solid #6b3535;color:#f0b9b9;padding:14px 16px;
  margin:80px auto 20px;max-width:600px;font-size:12.5px;line-height:1.6}

/* ================= ORNAMENT (language: ornate) ================= */
body .orn,body .halo,body .halo2{position:absolute;pointer-events:none;z-index:0}
body .orn{width:200px;line-height:0}
body.lang-minimal .orn{display:none}

/* ================= LAYOUT: gold thread ================= */
.lay-thread .hero{padding:96px 20px 40px;text-align:center;position:relative;overflow:hidden}
.lay-thread .hero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:radial-gradient(110% 80% at 50% 0%,var(--hero-top) 0%,transparent 62%);opacity:.75}
.lay-thread .hero .orn.bl{left:-6%;bottom:-10%;width:min(38vw,280px);opacity:.9}
.lay-thread .hero .orn.tr{right:-6%;top:-10%;width:min(38vw,280px);transform:rotate(180deg);opacity:.9}
.lay-thread .hero h1{font-size:clamp(25px,5.2vw,42px);line-height:1.18;margin:26px auto 0;max-width:18ch;position:relative}
.lay-thread .hero .said{margin:16px auto 0;max-width:50ch;font-size:13.5px;color:var(--mute);line-height:1.8;position:relative}
.lay-thread .hero .lock{position:relative}
.lay-thread .pill{margin-top:22px;display:inline-flex;align-items:center;gap:13px;position:relative;
  border:1px solid var(--accent-line);border-radius:99px;padding:10px 20px;background:var(--shade)}
/* One set of rules for the hero pill, used by both layouts that draw it. */
.pill .l{font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
body.bn .pill .l{letter-spacing:normal;text-transform:none;font-size:var(--fs-caption)}
.pill .v{font-size:18px;font-weight:500;color:var(--accent-soft)}
.pill .pu{font-size:var(--fs-micro);color:var(--mute)}
body.bn .pill .pu{font-size:var(--fs-caption)}
.pill .pd{font-size:var(--fs-micro)}
.pill .pd.down{color:var(--down)}.pill .pd.up{color:var(--up)}
.pill .pg{font-size:var(--fs-micro);color:var(--mute);padding-left:var(--s-4);
  border-left:1px solid var(--line)}
.lay-thread .catalogue{padding:48px 0 20px;position:relative}
.lay-thread .thread{position:absolute;left:50%;top:22px;bottom:22px;width:1px;
  background:linear-gradient(transparent,var(--accent) 12%,var(--accent) 88%,transparent);
  opacity:.5;pointer-events:none}
.lay-thread .beads{position:relative;display:flex;flex-direction:column;gap:22px;margin-top:26px}
.lay-thread .bead{display:grid;grid-template-columns:1fr 24px 1fr;align-items:center;gap:12px}
.lay-thread .bead .node{order:2;width:9px;height:9px;background:var(--accent);transform:rotate(45deg);margin:0 auto}
.lay-thread .bead .art{display:flex}
/* A narrow side column — 190px, so 16:9 would be a 107px strip. The widest
   allowed shape is pulled in to 1.4 (190 ÷ 1.4 = 136px tall) to stop that. */
.lay-thread .bead .ph{--ar:1;--ar-wide:1.4;width:190px;max-width:100%}
.lay-thread .bead:nth-child(odd) .side{order:3;text-align:left}
.lay-thread .bead:nth-child(odd) .art{order:1;justify-content:flex-end}
.lay-thread .bead:nth-child(even) .side{order:1;text-align:right}
.lay-thread .bead:nth-child(even) .art{order:3;justify-content:flex-start}
.lay-thread .bead h3{font-size:25px;line-height:1.15}
.lay-thread .bead .m{margin:var(--s-1) 0 0;font-size:var(--fs-micro);letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent)}
.lay-thread .bead .w{margin:var(--s-2) 0 0;font-size:var(--fs-caption);color:var(--mute)}
.lay-thread .bead .price{margin:var(--s-2) 0 0;font-size:var(--fs-value)}
.lay-thread .bead .ask{margin-top:var(--s-4)}
/* Phones: the photograph gets the full width of the content column and the
   words sit under it. The old 40%-wide thumbnail was 128px on a 360px screen
   — too small to see the filigree, which is the thing that sells the piece.
   No alternating here; left/right is a desktop effect only. */
@media(max-width:700px){
  .lay-thread .thread{left:12px}
  .lay-thread .beads{gap:26px}
  /* col 1 stays 24px so the diamond keeps sitting on the thread at left:12px */
  .lay-thread .bead{grid-template-columns:24px minmax(0,1fr);grid-template-rows:auto auto;
    gap:10px 12px;align-items:start}
  /* every item needs an explicit row AND column, or a photo drops into the thread column */
  .lay-thread .bead .node,.lay-thread .bead:nth-child(odd) .node,.lay-thread .bead:nth-child(even) .node{grid-column:1;grid-row:1;margin-top:14px}
  .lay-thread .bead .art,.lay-thread .bead:nth-child(odd) .art,.lay-thread .bead:nth-child(even) .art{grid-column:2;grid-row:1;justify-content:flex-start}
  .lay-thread .bead .side,.lay-thread .bead:nth-child(odd) .side,.lay-thread .bead:nth-child(even) .side{grid-column:2;grid-row:2;text-align:left;overflow-wrap:break-word}
  /* full width of the phone now, so a wide photograph is 160px tall even at
     16:9 and the bound goes back to the widest the site allows anywhere */
  .lay-thread .bead .ph{width:100%;max-width:none;--ar:1.5;--ar-wide:1.78}
  .lay-thread .bead h3{font-size:var(--fs-title);line-height:1.25}
  .lay-thread .bead .m{margin-top:var(--s-2);letter-spacing:.13em}
  .lay-thread .bead .w{margin-top:var(--s-2)}
  .lay-thread .bead .blurb{margin-top:var(--s-2);font-size:var(--fs-body)}
  .lay-thread .bead .price{margin-top:var(--s-2)}
  .lay-thread .bead .price.req{font-size:var(--fs-body)}
  body.bn .lay-thread .bead .m{letter-spacing:normal;text-transform:none;font-size:var(--fs-caption)}
}

/* ================= LAYOUT: invitation ================= */
.lay-invitation .sheet{max-width:720px;margin:0 auto;padding:0 18px}
.lay-invitation .frame{border:1px solid var(--accent-line);position:relative;padding:44px 26px 34px;
  margin:78px 0 0;overflow:hidden}
.lay-invitation .frame::after{content:"";position:absolute;inset:6px;border:1px solid var(--line);pointer-events:none}
.lay-invitation .frame .orn{width:110px;opacity:.85}
.lay-invitation .frame .orn.a{left:-14px;top:-14px;transform:rotate(90deg)}
.lay-invitation .frame .orn.b{right:-14px;top:-14px;transform:rotate(180deg)}
.lay-invitation .frame .orn.c{left:-14px;bottom:-14px}
.lay-invitation .frame .orn.d{right:-14px;bottom:-14px;transform:rotate(270deg)}
.lay-invitation .frame>*:not(.orn){position:relative;z-index:1}
.lay-invitation h1{font-size:clamp(23px,4.6vw,36px);line-height:1.2;margin:24px auto 0;max-width:20ch;text-align:center}
.lay-invitation .said{margin:14px auto 0;max-width:46ch;font-size:13px;color:var(--mute);text-align:center;line-height:1.85}
.lay-invitation .invrate{margin:26px auto 0;text-align:center}
.lay-invitation .invrate .v{font-family:var(--num);font-size:var(--fs-value-lg);font-weight:500;
  color:var(--accent-soft);font-variant-numeric:lining-nums tabular-nums;line-height:1.15;
  margin-top:var(--s-2)}
.lay-invitation .invrate .l{font-family:var(--sans);font-size:var(--fs-micro);letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent)}
.lay-invitation .invrate .g{font-size:var(--fs-micro);color:var(--mute);margin-top:var(--s-1)}
body.bn .lay-invitation .invrate .l{font-family:var(--bn);letter-spacing:normal;
  text-transform:none;font-size:var(--fs-caption)}
/* align-items:start, because the cards are no longer all one height. Grid
   stretches its items by default, which would pull every short card down to
   the height of the tallest in its row and hang its Enquire link in mid-air
   under a gap. Each card now takes its own height and the row simply ends
   where the tallest card does. */
.lay-invitation .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  align-items:start;gap:18px;margin-top:12px}
/* Three columns of about 333px on a desktop, so 1.6 keeps the widest card
   above 200px tall and stops one row of the grid reading as a gap. */
.lay-invitation .card .ph{--ar:1;--ar-wide:1.6}
.lay-invitation .card h3{font-size:var(--fs-title);margin-top:var(--s-4);text-align:center}
.lay-invitation .card .blurb{text-align:center}
/* One card per row on a phone. Two columns leaves a 155px photograph and cuts
   the description off mid-word; the landscape crop keeps the page from
   running away in length. */
@media(max-width:700px){
  .lay-invitation .cards{grid-template-columns:minmax(0,1fr);gap:20px}
  /* one card per row: full width, so it may use the full range */
  .lay-invitation .card .ph{--ar:1.3333;--ar-wide:1.78}
  .lay-invitation .card .blurb{font-size:var(--fs-body)}
}
.lay-invitation .card .m{margin:var(--s-1) 0 0;font-size:var(--fs-micro);letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);text-align:center}
body.bn .lay-invitation .card .m{letter-spacing:normal;text-transform:none;font-size:var(--fs-caption)}
.lay-invitation .card .w{margin:var(--s-2) 0 0;font-size:var(--fs-caption);color:var(--mute);
  text-align:center}
.lay-invitation .card .price{margin:var(--s-2) 0 0;font-size:var(--fs-value);text-align:center}
.lay-invitation section{padding:40px 0}
.lay-invitation .band{margin-top:0}

/* ================= LAYOUT: ornate ================= */
.lay-ornate .hero{position:relative;min-height:84vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:90px 20px 46px;overflow:hidden}
.lay-ornate .hero::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:radial-gradient(120% 90% at 50% 0%,var(--hero-top) 0%,transparent 64%);opacity:.75}
.lay-ornate .hero .orn.bl{left:-5%;bottom:-8%;width:min(44vw,330px)}
.lay-ornate .hero .orn.tr{right:-5%;top:-8%;width:min(44vw,330px);transform:rotate(180deg)}
.lay-ornate .hero .halo{position:absolute;border:1px solid var(--halo-1);border-radius:50%;
  width:520px;height:520px;top:-160px;pointer-events:none}
.lay-ornate .hero .halo2{position:absolute;border:1px solid var(--halo-2);border-radius:50%;
  width:760px;height:760px;top:-280px;pointer-events:none}
.lay-ornate .hero>*:not(.orn):not(.halo):not(.halo2){position:relative;z-index:1}
.lay-ornate .hero h1{font-size:clamp(26px,5.4vw,44px);line-height:1.16;margin:28px auto 0;max-width:18ch}
.lay-ornate .hero .said{margin:16px auto 0;max-width:50ch;font-size:13.5px;color:var(--mute);line-height:1.8}
.lay-ornate .pill{margin-top:22px;display:inline-flex;align-items:center;gap:13px;
  border:1px solid var(--accent-line);border-radius:99px;padding:10px 20px;background:var(--shade)}
.lay-ornate .catalogue{padding:50px 0 12px;position:relative;border-top:1px solid var(--line)}
.lay-ornate .featured{display:grid;grid-template-columns:1.05fr 1fr;gap:36px;align-items:center;
  padding-bottom:32px;border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.lay-ornate .featured .orn.mand{right:-10%;top:50%;transform:translateY(-50%);width:min(52vw,380px);opacity:.13}
.lay-ornate .featured>*:not(.orn){position:relative;z-index:1}
@media(max-width:760px){.lay-ornate .featured{grid-template-columns:1fr;gap:20px}}
/* The largest picture on the page, and the widest bound is held short of a
   true letterbox because a featured piece that reads as a banner stops
   looking like the piece. */
.lay-ornate .featured .ph{--ar:.8;--ar-wide:1.6}
@media(max-width:760px){.lay-ornate .featured .ph{--ar:1;--ar-wide:1.78}}
.lay-ornate .featured h3{font-size:clamp(26px,4.4vw,38px);line-height:1.12;margin:11px 0 0}
.spec{margin:18px 0 0;border-top:1px solid var(--line)}
.spec div{display:flex;justify-content:space-between;gap:14px;padding:9px 0;
  border-bottom:1px solid var(--line);font-size:12.5px;color:var(--mute)}
.spec b{font-weight:400;color:var(--text);font-variant-numeric:tabular-nums}
.more{margin-top:var(--s-5)}
.lay-ornate .plate{display:grid;grid-template-columns:.72fr 1fr;gap:28px;align-items:center;
  padding:20px 0;border-bottom:1px solid var(--line)}
.lay-ornate .plate:nth-of-type(even) .ph{order:2}
.lay-ornate .plate .ph{--ar:1;--ar-wide:1.5}
.lay-ornate .plate h3{font-size:27px;line-height:1.15}
.lay-ornate .plate .m{margin:var(--s-2) 0 0;font-size:var(--fs-micro);letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent)}
body.bn .lay-ornate .plate .m{letter-spacing:normal;text-transform:none;font-size:var(--fs-caption)}
.lay-ornate .plate .w{margin:var(--s-3) 0 0;font-size:var(--fs-caption);color:var(--mute)}
.lay-ornate .plate .price{margin:var(--s-2) 0 0;font-size:var(--fs-value)}
.lay-ornate .plate .ask{margin-top:var(--s-4)}
/* Below 760px the plate is a picture beside a column of words. That column
   must stay wide enough for a 44px-tall Enquire button to sit in without
   pushing the row sideways, so the picture gives up width, not the words. */
@media(max-width:760px){
  .lay-ornate .plate{grid-template-columns:132px minmax(0,1fr);gap:var(--s-4);
    padding:var(--s-5) 0;align-items:start}
  /* The narrowest photograph column on the site. 16:9 across 132px is a 74px
     strip with a 38px magnifier badge sitting in it, so the widest allowed
     shape is pulled in here more than anywhere else: 132 ÷ 1.35 = 98px. */
  .lay-ornate .plate .ph{--ar-wide:1.35}
  .lay-ornate .plate:nth-of-type(even) .ph{order:0}
  .lay-ornate .plate h3{font-size:var(--fs-title)}
  .lay-ornate .plate .blurb{font-size:var(--fs-body)}
}
/* The rate band is drawn in ALL THREE layouts, so these two must be positioned
   for all three. Scoped to .lay-ornate they fell back to a 200px block at full
   strength sitting over the "Today's rate" heading in thread and invitation. */
.band .orn.l{left:-8%;top:50%;transform:translateY(-50%);width:min(40vw,280px);opacity:.12}
.band .orn.r{right:-8%;top:50%;transform:translateY(-50%);width:min(40vw,280px);opacity:.12}
.catnote{margin:24px auto 0;max-width:56ch;text-align:center;font-size:11.5px;color:var(--mute);
  line-height:1.8;padding-bottom:30px}
.filters{display:flex;gap:var(--s-3);flex-wrap:wrap;justify-content:center;padding:0 0 var(--s-6)}
.fchip{display:inline-flex;align-items:center;min-height:var(--tap);
  border:1px solid var(--line);background:transparent;border-radius:99px;padding:0 var(--s-5);
  font-family:var(--sans);font-size:var(--fs-label);color:var(--mute);cursor:pointer;
  line-height:1.2}
body.bn .fchip{font-family:var(--bn);font-size:var(--fs-body)}
.fchip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--btn-text)}
.fchip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ================= AMBIENT BACKGROUND EFFECTS ================= */
#fxCanvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;display:block}
/* lift page content above the canvas without flattening anything that already
   has its own stacking order (the sticky header and the call bar) */
body > *:not(.fxlayer){position:relative;z-index:1}
/* The blanket rule above must not undo anything that is pinned to the screen.
   `body > *:not(.fxlayer)` is more specific than a plain class, so each of
   these has to be restated at the same weight or it silently falls back into
   the normal flow. */
body > .topbar{position:fixed;z-index:50}
body > .bar{position:fixed;z-index:45}
body > .viewer{position:fixed;inset:0;z-index:200}
body > .banner,body > .fest{z-index:3}


/* ivory: fine warm grain, so the background reads as paper rather than blank screen */
body.fx-grain::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.42;
  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='0.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0.12'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  mix-blend-mode:multiply}




/* footer admin link */
.adminlink{display:inline-flex;align-items:center;gap:7px;margin-top:20px;
  border:1px solid var(--line);color:var(--mute);background:transparent;
  font-family:inherit;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  padding:9px 17px;border-radius:99px;text-decoration:none;transition:.18s}
body.bn .adminlink{letter-spacing:normal;text-transform:none;font-size:12.5px}
.adminlink:hover{border-color:var(--accent-line);color:var(--accent)}
.adminlink:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.adminlink svg{width:12px;height:12px;flex:none}

/* ================= TAP-TO-ZOOM PHOTO VIEWER ================= */
/* the magnifier badge, and the invisible tap target under it */
/* The whole photograph is the tap target. The badge is only the sign that it
   is one, pinned to the bottom-right corner at the same inset on every card
   and in every layout. --shade is dark on Night and light on Ivory, so the
   disc inverts with the palette while the hairline and the glyph stay gold. */
.zoombtn{position:absolute;inset:0;z-index:3;border:0;background:transparent;padding:0;
  cursor:zoom-in;display:flex;align-items:flex-end;justify-content:flex-end;
  -webkit-tap-highlight-color:transparent}
.zoombtn .zb{display:flex;align-items:center;justify-content:center;width:38px;height:38px;
  flex:none;margin:var(--s-3);border-radius:50%;background:var(--shade);
  border:1px solid var(--accent-line);color:var(--accent);backdrop-filter:blur(4px);transition:.18s}
.zoombtn .zb svg{width:18px;height:18px}
.zoombtn:hover .zb{background:var(--accent);color:var(--btn-text);border-color:var(--accent)}
.zoombtn:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
.is-sold .zoombtn .zb{opacity:.6}

/* the page must not scroll behind the viewer, and must come back to the
   exact same place when it closes */
body.vlock{position:fixed;left:0;right:0;width:100%;overflow:hidden}

.viewer{position:fixed;inset:0;z-index:200;background:color-mix(in srgb,var(--bg) 96%,#000);
  display:flex;align-items:center;justify-content:center;overscroll-behavior:contain}
.viewer[hidden]{display:none}
.viewer .vstage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  overflow:hidden;touch-action:none;cursor:zoom-in}
.viewer.zoomed .vstage{cursor:grab}
.viewer .vimg{max-width:100%;max-height:100%;width:auto;height:auto;display:block;
  object-fit:contain;transform-origin:50% 50%;will-change:transform;user-select:none;
  -webkit-user-drag:none}
.viewer.dragging .vstage{transform:translate3d(var(--vdx,0),var(--vdy,0),0);opacity:.92}

.viewer .vbtn{position:absolute;z-index:2;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--accent-line);background:var(--shade);backdrop-filter:blur(8px);
  color:var(--accent);cursor:pointer;font-family:inherit;padding:0}
.viewer .vbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.viewer .vbtn[hidden]{display:none}
.viewer .vx{top:calc(12px + env(safe-area-inset-top));right:12px;width:42px;height:42px;
  border-radius:50%;font-size:0}
.viewer .vx::before{content:"\00d7";font-size:24px;line-height:1}
.viewer .vnav{top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%}
.viewer .vnav svg{width:19px;height:19px}
.viewer .vprev{left:10px}
.viewer .vnext{right:10px}
.viewer .vzoom{position:absolute;z-index:2;left:12px;top:calc(12px + env(safe-area-inset-top));
  display:flex;gap:7px}
.viewer .vz{position:static;width:38px;height:38px;border-radius:50%;font-size:19px;line-height:1}
.viewer .vcount{position:absolute;z-index:2;top:calc(20px + env(safe-area-inset-top));left:50%;
  transform:translateX(-50%);margin:0;font-size:11.5px;color:var(--mute);
  font-variant-numeric:tabular-nums;pointer-events:none}

.viewer .vbar{position:absolute;z-index:2;left:0;right:0;bottom:0;text-align:center;cursor:pointer;
  padding:20px 20px calc(22px + env(safe-area-inset-bottom));
  background:linear-gradient(transparent,color-mix(in srgb,var(--bg) 92%,#000) 46%);
  transition:opacity .2s,transform .2s}
.viewer .vbar h3{font-size:23px;line-height:1.2;color:var(--text)}
.viewer .vbar .m{margin:5px 0 0;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent)}
body.bn .viewer .vbar .m{letter-spacing:normal;text-transform:none;font-size:12px}
.viewer .vbar .w{margin:6px 0 0;font-size:12px;color:var(--mute)}
.viewer .vbar .p{margin:var(--s-2) 0 0;font-family:var(--num);font-size:var(--fs-value);
  font-weight:500;color:var(--accent-soft);font-variant-numeric:lining-nums tabular-nums}
.viewer .vbar .p .req{font-weight:400;font-size:var(--fs-body);color:var(--accent)}
.viewer .vbar .p .sold{font-weight:400;font-size:var(--fs-body);color:var(--mute)}
.viewer.barsoff .vbar{opacity:0;transform:translateY(12px);pointer-events:none}
.viewer.zoomed .vcount{opacity:0}

@media(max-width:520px){
  .viewer .vnav{width:var(--tap);height:var(--tap)}
  .viewer .vbar h3{font-size:var(--fs-title)}
}
/* nothing moves for anyone who has asked their phone to stop animating */
@media(prefers-reduced-motion:reduce){
  .viewer .vimg,.viewer .vbar,.viewer .vstage,.zoombtn .zb{transition:none!important}
}

/* the visitor's own background switch, beside the night/ivory button */
.cbtn-icon{padding:6px;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center}
.cbtn-icon svg{width:16px;height:16px;display:block}
.cbtn-icon.is-off{color:var(--mute);border-color:var(--line)}