/* ════════════════════════════════════════════════════════════════════════════════════════════
   THE CURIOSITY CABINET — architecture for index, catalog and item (2026-10-14 redesign).
   The whole storefront is one piece of mahogany furniture: a carved CROWN carries the brass
   name plaque, a stained-glass TRANSOM is lit from inside, glass DOORS stand open on a lit
   INTERIOR of shelves, and the BASE holds drawers with brass pulls. The home page shows the
   cabinet whole (the hero IS the facade); the catalog is the same cabinet seen closer (crown,
   transom, then the drawer rail and the wall of bays).
   Shared colour tokens (--gold, --gold-lt, --cream, --muted) come from theme.css.
   Rule of the house: every decorative layer is aria-hidden or a pseudo-element, and nothing
   here hides content — the doors are clear glass, and with motion off they are simply open.
   ════════════════════════════════════════════════════════════════════════════════════════════ */

:root{
  /* brass: light at the top edge, darkest at ~80%, a bright bevel at the bottom. The darkest
     stop (#b8893a) still gives the engraved #2b1707 lettering 5.6:1, so every word on brass is AA. */
  --brass:linear-gradient(180deg,#f6dd96 0%,#e2bd6c 22%,#cfa452 52%,#b8893a 80%,#e4c072 100%);
  --engrave:#2b1707;
  /* ── TYPE SYSTEM (2026-10-15): one family of faces for both plaques, the shelf tags and the bay
     labels, so the signage reads as one fine-antiques house rather than four fonts.
       display — Cormorant Garamond: high stroke contrast, lighter than the old Cinzel slab; mixed
                 case for headlines and names, its italic for sublines and the second clause.
       caps    — Cormorant SC: true small capitals (not shrunk capitals) for kickers, categories
                 and bay numbers, always tracked.
       figures — Cormorant Garamond again for prices: its DEFAULT numerals are old-style (they sit
                 in the line like lowercase, as in a printed auction catalogue). EB Garamond's
                 Google subset drops the onum feature, so it renders lining figures (measured).
       text    — EB Garamond: running notes only.
     Every stack ends in system serifs with similar proportions, so a blocked font CDN degrades
     to Palatino/Georgia rather than to Times. */
  --type-display:'Cormorant Garamond','Cormorant',Garamond,'Palatino Linotype','Book Antiqua',Palatino,Georgia,serif;
  --type-caps:'Cormorant SC','Cormorant Garamond',Garamond,'Palatino Linotype',Palatino,Georgia,serif;
  --type-text:'EB Garamond',Garamond,'Palatino Linotype','Book Antiqua',Palatino,Georgia,serif;
  --type-figures:'Cormorant Garamond','Cormorant',Garamond,Georgia,serif;
  --figures:oldstyle-nums proportional-nums;
  /* engraved ink: a deep brass-brown rather than black, so it reads as cut INTO the plate; the
     light lip below + faint dark lip above is the letterpress bevel. 4.9:1 on the darkest brass
     stop, 6.7:1 on the mid stop where the text actually sits: AA either way. */
  --ink:#33200a;
  --ink-bevel:0 1px 0 #fff1c8b0,0 -1px 0 #4a2d0940;
  --maho:url('/assets/tex/mahogany_512.jpg');
  --flute:url('/assets/tex/final/wood_flute_sm.jpg');
  --glass:url('/assets/tex/final/glass_flowing_sm.jpg');
  --velvet:#0a1914;        /* the cabinet's back wall: deep green baize, so gilt frames glow on it */
  --stile:clamp(12px,2.6vw,34px); /* width of the fluted uprights either side of the glass */
}

/* .wrap clips the decorative overhangs (open doors, crown). overflow:hidden would also make it a
   scroll container and silently break position:sticky on the catalog toolbar; clip does not. */
.wrap{overflow:hidden;overflow:clip}

/* ── Shared carved parts (used by both heroes) ─────────────────────────────────────────────── */

/* CROWN: the cornice. A stepped lip overhangs the carcass (::before) and a gilt laurel moulding
   runs under it (::after), the same laurel the old site used as its section seam. */
/* The negative inline margin is the overhang: the cornice is wider than the case under it,
   as on real case furniture, which is what makes it read as a crown rather than a header bar. */
.cab-crown{position:relative;z-index:2;text-align:center;margin:0 calc(var(--stile) * -.6);
  padding:clamp(14px,1.6vw,20px) clamp(12px,5vw,72px) clamp(18px,1.9vw,24px);
  background:linear-gradient(#0000 40%,#0007),var(--maho) center/420px;
  border-radius:10px 10px 0 0;
  box-shadow:inset 0 2px 0 #f2dcaa40,inset 0 -2px 0 #0009}
.cab-crown::before{content:'';position:absolute;left:-10px;right:-10px;top:-12px;height:14px;border-radius:6px 6px 0 0;
  background:linear-gradient(#6b4127,#2c160b);box-shadow:inset 0 1px 0 #f2dcaa70,0 -1px 0 #1a0c06}
.cab-crown::after{content:'';position:absolute;left:0;right:0;bottom:-7px;height:14px;
  background:url('/assets/trim/trim_gold-896.webp') center/auto 14px repeat-x;filter:drop-shadow(0 2px 2px #0009)}

/* PLAQUE: a screwed-on brass plate; the headline is engraved (dark letters, a light lower lip). */
.cab-plaque{position:relative;display:inline-block;max-width:100%;color:var(--engrave);
  padding:clamp(10px,1.4vw,16px) clamp(26px,4vw,58px) clamp(12px,1.5vw,18px);
  background:var(--brass);border-radius:6px;
  box-shadow:inset 0 0 0 2px #7a5418,inset 0 0 0 4px #f3d88f,inset 0 0 0 5px #6b4614,0 8px 16px #000b}
/* the two screw heads, centred on the short ends */
.cab-plaque::before,.cab-plaque::after{content:'';position:absolute;top:calc(50% - 5px);width:10px;height:10px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#fff3c4,#8a6420 70%);box-shadow:0 1px 1px #0008}
.cab-plaque::before{left:11px}
.cab-plaque::after{right:11px}
/* Engraving = dark letters with a light 1px lip below (the cut edge catching light) and a faint
   dark lip above. Dark-on-brass is the AA-safe way to put a headline on gold. */
.cab-plaque h1{font:600 clamp(31px,3.6vw,52px)/1.14 var(--type-display);letter-spacing:.005em;color:var(--ink);margin:0;
  text-shadow:var(--ink-bevel);text-wrap:balance}
/* the second clause in the italic: weight contrast inside one line, like a hand-cut sign */
.cab-plaque h1 em{font-style:italic;font-weight:500}
/* wide screens: the headline fits one engraved line, which keeps the CTA above the fold at 1440x900 */
.cab-plaque .br-narrow{display:none}
@media(max-width:1099px){.cab-plaque .br-narrow{display:inline}}
@media(min-width:1100px){.cab-hero .cab-plaque h1{font-size:clamp(40px,3.3vw,52px)}}
/* kicker in true small caps: lowercase letters become small capitals, capitals stay full height */
.cab-plaque .kicker{font:600 16px/1.3 var(--type-caps);letter-spacing:.2em;color:var(--ink);text-shadow:var(--ink-bevel);margin:0}
/* fleuron rule between kicker and headline: two hairlines fading out from a small engraved lozenge */
.cab-fleuron{display:flex;align-items:center;justify-content:center;gap:9px;width:min(240px,64%);margin:5px auto 6px}
.cab-fleuron::before,.cab-fleuron::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,#33200a00,#33200acc);box-shadow:0 1px 0 #fff1c870}
.cab-fleuron::after{transform:scaleX(-1)}
.cab-fleuron i{width:7px;height:7px;transform:rotate(45deg);border:1px solid var(--ink);box-shadow:0 1px 0 #fff1c870}
.cab-plaque .sub{font:italic 500 19px/1.35 var(--type-display);color:var(--ink);text-shadow:var(--ink-bevel);margin:6px 0 0}
/* gilt acanthus scrolls bracket the plaque, like carving either side of a cartouche */
/* Carving is decorative, so it is an aria-hidden-equivalent empty alt and never takes clicks. */
.cab-scroll{position:absolute;top:50%;height:118%;width:auto;transform:translateY(-50%);pointer-events:none;filter:drop-shadow(0 3px 3px #000a)}
.cab-scroll--l{right:100%;margin-right:-6px;transform:translateY(-50%) scaleX(-1)}
.cab-scroll--r{left:100%;margin-left:-6px}

/* TRANSOM: arched stained-glass lights across the top of the case. The fan of lead lines is a
   repeating conic gradient from the bottom centre of each arch; the glow sells "lit from inside". */
.cab-transom{position:relative;z-index:1;display:grid;grid-template-columns:repeat(var(--lights,3),1fr);gap:clamp(6px,1vw,12px);
  height:clamp(34px,4.2vw,56px);padding:clamp(8px,1vw,12px) calc(var(--stile) + 6px) 0;
  background:linear-gradient(#0000,#0006),var(--maho) center/420px}
/* each lunette: lead fan + inner glow + the glass texture, with a gilt bead and a dark came edge */
.cab-transom span{border-radius:50% 50% 0 0/100% 100% 0 0;
  background:repeating-conic-gradient(from -90deg at 50% 100%,#21110a 0 1.4deg,#0000 1.4deg 20deg),
    radial-gradient(ellipse at 50% 100%,#fff5d055,#0000 70%),var(--glass) center/200px;
  box-shadow:inset 0 0 0 3px #21110a,inset 0 0 0 5px #b8893a,inset 0 -8px 14px #0007,0 0 22px #f0c06a50}

/* ════ HOME HERO: the whole cabinet facade ═════════════════════════════════════════════════ */

/* no backdrop of its own (Eric, 2026-10-15): the cabinet stands straight on the page's wood wall
   (body background in theme.css). It separates from that wall by its drop shadow alone. */
.cab-hero{position:relative;overflow:hidden;isolation:isolate;padding:clamp(20px,1.9vw,28px) 16px clamp(18px,2.6vw,34px)}
/* drop-shadow (not box-shadow) follows the cabinet's real outline, crown overhang included */
.cabinet{position:relative;max-width:1060px;margin:0 auto;filter:drop-shadow(0 0 2px #000c) drop-shadow(0 26px 30px #000d)}

/* CASE: fluted uprights left and right (painted as backgrounds, so no extra DOM), glass between */
/* perspective lives on the case so both doors share one vanishing point, centred on the glass */
.cab-case{position:relative;padding:0 var(--stile);perspective:2200px;perspective-origin:50% 40%;
  background:var(--flute) left top/var(--stile) auto repeat-y,var(--flute) right top/var(--stile) auto repeat-y,#2a150b}

/* INTERIOR: green baize back wall, a lamp's pool of light from the top, gilt bead round the opening */
.cab-interior{--ip:clamp(12px,3vw,40px);--piece:clamp(118px,min(19vw,16vh),190px);
  position:relative;padding:clamp(14px,2vw,24px) var(--ip) 0;
  background:radial-gradient(ellipse 75% 55% at 50% 0,#ffd98a33,#0000 70%),linear-gradient(var(--velvet),#06100d 70%,#040a08);
  box-shadow:inset 0 0 0 3px #b8893a,inset 0 0 0 6px #1a0c06,inset 0 18px 30px #000c,inset 0 -10px 24px #000a}
/* the breathing glow sits in its own layer so only opacity animates (cheap, no repaint of photos) */
.cab-interior::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 55% 45% at 50% 30%,#ffcf7a2e,#0000 70%)}
/* two shelves, always: the cabinet keeps its shape whether it holds 0, 1 or 8 pieces */
.cab-shelves{position:relative;display:grid;gap:clamp(10px,1.4vw,18px)}
/* a SHELF: pieces stand on it, centred; the board spans the whole interior (negative inline
   margin cancels the interior padding) with a bright front edge and a shadow cast below */
.cab-shelf{position:relative;display:flex;justify-content:center;align-items:stretch;gap:clamp(12px,3vw,46px);
  min-height:calc(var(--piece) * .82 + 70px);margin:0 calc(var(--ip) * -1);padding:0 var(--ip) 16px}
.cab-shelf::after{content:'';position:absolute;left:3px;right:3px;bottom:0;height:13px;
  background:linear-gradient(#f2dcaa80 0 1px,#7a4728 1px,#40200f 55%,#1c0d06);box-shadow:0 10px 14px #000b}
/* each piece: a small gilt-framed picture standing on the shelf, under its own spotlight cone */
.cab-piece{position:relative;flex:0 1 var(--piece);display:flex;flex-direction:column;align-items:center;min-width:0;color:var(--cream);text-decoration:none}
.cab-piece::before{content:'';position:absolute;left:50%;bottom:30px;width:180%;height:150%;transform:translateX(-50%);z-index:-1;pointer-events:none;
  background:linear-gradient(#ffe2a02e,#ffe2a010 70%,#0000);clip-path:polygon(38% 0,62% 0,100% 100%,0 100%)}
/* square frames: product photos arrive in every aspect ratio; cover-cropping to a square keeps
   the shelf line level (the full photo is one click away on the item page) */
/* the frame is 82% of the piece's width; the tag below takes the full width so a name like
   "Arizona" Cowboy Sculpture fits in two lines without making the shelf taller */
.cab-frame{display:block;width:82%;aspect-ratio:1/1;border:clamp(8px,1vw,13px) solid transparent;
  border-image:url('/assets/frames4/f1_gold-sm.webp') 60 fill stretch;background:#160d09;box-shadow:0 14px 16px #000c}
.cab-frame img{display:block;width:100%;height:100%;object-fit:cover}
/* the brass label on the shelf edge: the full name (wrapping, never truncated) over the price.
   flex:1 stretches every tag on a shelf to the tallest one, so the frames stay level. */
.cab-tag{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:100%;margin-top:9px;padding:6px 8px 7px;border-radius:3px;
  background:var(--brass);color:var(--engrave);box-shadow:inset 0 0 0 1px #7a5418,0 3px 6px #000a;text-align:center}
/* engraved like the plaques; overflow-wrap only breaks a word when a single word is wider than the tag */
.cab-tag__name{display:block;max-width:100%;font:600 17px/1.15 var(--type-display);color:var(--ink);text-shadow:var(--ink-bevel);overflow-wrap:anywhere;text-wrap:balance}
/* a hairline over the price, the way a printed price label separates lot and estimate */
.cab-tag__price{display:block;min-width:56%;padding-top:3px;border-top:1px solid #33200a55;font:700 17px/1.15 var(--type-figures);font-variant-numeric:var(--figures);color:var(--ink);text-shadow:var(--ink-bevel)}
.cab-piece:hover .cab-frame,.cab-piece:focus-visible .cab-frame{box-shadow:0 0 0 2px var(--gold-lt),0 0 26px #f0c06a90,0 14px 16px #000c}
.cab-piece:focus-visible{outline:none}
/* an empty berth on a shelf keeps the shelf's height so the cabinet never collapses */
.cab-berth{flex:0 1 var(--piece);height:1px}
/* "New pieces arriving": a small brass plate that stands on an empty shelf (or, when there is
   nothing at all, sits centred across the whole interior) */
.cab-arriving{align-self:flex-end;margin-bottom:10px;padding:10px 22px;border-radius:5px;background:var(--brass);color:var(--engrave);text-align:center;
  box-shadow:inset 0 0 0 2px #7a5418,inset 0 0 0 4px #f3d88f,0 8px 14px #000b}
.cab-arriving b{display:block;font:600 clamp(19px,1.9vw,23px)/1.2 var(--type-display);color:var(--ink);text-shadow:var(--ink-bevel)}
.cab-arriving span{display:block;font:italic 500 17px/1.35 var(--type-display);color:var(--ink)}
.cab-arriving a{color:var(--engrave);text-decoration:underline;text-underline-offset:2px}
/* loading: the berths glow faintly where the frames will stand */
.cabinet[data-state=loading] .cab-berth{height:calc(var(--piece) * .9);background:radial-gradient(ellipse at 50% 70%,#f0c06a22,#0000 70%)}

/* DOORS: two glazed doors on hinges at the outer edges of the opening, standing open. Clear glass
   (a glare streak + muntins) so even mid-swing nothing behind them is hidden. The OPEN pose is the
   resting transform; the swing is an animation that ends there, so with motion off they are open. */
/* 98deg puts each door just past perpendicular, swung toward the viewer and out over the stile,
   so it frames the opening without covering any of the shelves. */
.cab-door{position:absolute;top:0;bottom:0;width:calc(50% - var(--stile));z-index:3;pointer-events:none;
  background:linear-gradient(112deg,#ffffff12 0 14%,#0000 26% 62%,#ffffff0c 70%,#0000 80%),
    linear-gradient(#2a150b,#2a150b) 50% 0/5px 100% no-repeat,
    linear-gradient(#2a150b,#2a150b) 0 34%/100% 5px no-repeat,linear-gradient(#2a150b,#2a150b) 0 67%/100% 5px no-repeat;
  box-shadow:inset 0 0 0 clamp(7px,1.1vw,13px) #3e2012,inset 0 0 0 calc(clamp(7px,1.1vw,13px) + 2px) #b8893a,0 0 18px #0008;
  backface-visibility:visible}
.cab-door--l{left:var(--stile);transform-origin:0 50%;transform:rotateY(-98deg)}
.cab-door--r{right:var(--stile);transform-origin:100% 50%;transform:rotateY(98deg)}
/* brass knob on each door's free edge */
.cab-door::after{content:'';position:absolute;top:50%;width:12px;height:12px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#fff3c4,#8a6420 70%)}
.cab-door--l::after{right:3px}
.cab-door--r::after{left:3px}

/* BASE: a drawer either side of the call to action, gilt bead along the top, plinth below */
/* the CTA sits in the middle drawer position: one primary action, placed where the hand goes */
.cab-base{position:relative;z-index:2;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(12px,2vw,24px);
  margin:0 calc(var(--stile) * -.3);padding:clamp(12px,1.6vw,18px) calc(var(--stile) + 6px);border-radius:0 0 6px 6px;
  background:linear-gradient(#0000,#0008),var(--maho) center/420px;box-shadow:inset 0 3px 0 #b8893a,inset 0 4px 0 #1a0c06}
.cab-drawer{position:relative;height:clamp(44px,5vw,60px);border-radius:3px;
  background:linear-gradient(#ffffff08,#0004),var(--maho) 30% 40%/300px;box-shadow:inset 0 0 0 2px #1a0c06,inset 0 0 0 3px #b8893a66,0 2px 0 #0007}
/* a bail pull: backplate dots + a hanging brass handle */
.cab-drawer::after{content:'';position:absolute;left:50%;top:50%;width:46px;height:15px;transform:translate(-50%,-30%);
  border:3px solid #d9b25e;border-top:0;border-radius:0 0 50% 50%;box-shadow:0 2px 2px #0008}
.cab-drawer::before{content:'';position:absolute;left:50%;top:50%;width:58px;height:8px;transform:translate(-50%,-110%);
  background:radial-gradient(circle,#e8c574 0 3px,#0000 3.5px) 0 0/14px 8px repeat-x;opacity:.95}
.cab-cta{white-space:nowrap}
.cab-floor-note{max-width:1060px;margin:clamp(14px,1.6vw,20px) auto 0;text-align:center;font:italic 500 19px/1.45 var(--type-display);color:var(--muted)}
.cab-floor-note b{color:var(--gold-lt);font-weight:600;font-style:normal}

/* motion: the doors swing open once on load and the interior light breathes. Both are removed
   outright under prefers-reduced-motion (here and in theme.css), leaving the open, lit cabinet. */
@keyframes cabDoorL{from{transform:rotateY(0)}to{transform:rotateY(-98deg)}}
@keyframes cabDoorR{from{transform:rotateY(0)}to{transform:rotateY(98deg)}}
@keyframes cabGlow{from{opacity:.55}to{opacity:1}}
@media(prefers-reduced-motion:no-preference){
  .cab-door--l{animation:cabDoorL 1.5s cubic-bezier(.25,.7,.2,1) .45s both}
  .cab-door--r{animation:cabDoorR 1.5s cubic-bezier(.25,.7,.2,1) .55s both}
  .cab-interior::before{animation:cabGlow 5s ease-in-out infinite alternate}
}
@media(prefers-reduced-motion:reduce){.cab-door,.cab-interior::before{animation:none!important}}

/* ════ CATALOG: the same cabinet, closer — crown, transom, drawer rail, then the bays ════════ */
/* The catalog keeps the crown + transom so both pages share one silhouette, but drops the doors
   and shelves: here the bays below ARE the interior, and the hero must not push them down. */
.cab-catalog{max-width:1280px;margin:0 auto;padding:clamp(26px,3vw,40px) clamp(16px,3vw,40px) 0}
.cab-crown--catalog .cab-plaque h1{font-size:clamp(26px,3.2vw,44px)}
.cab-transom--slim{--lights:5;height:clamp(26px,3.4vw,42px)}

/* the BODY continues the carcass under the transom: rail, bays and plinth share its side walls */
.cab-body{position:relative;padding:0 var(--stile) clamp(18px,2vw,26px);
  background:var(--flute) left top/var(--stile) auto repeat-y,var(--flute) right top/var(--stile) auto repeat-y,linear-gradient(#0000,#0006),var(--maho) center/420px}

/* RAIL: the drawer front row. Search and order sit on its top edge; the categories are drawers. */
/* z-index keeps the rail (and, on phones, its drop-down sheet) above the bays it scrolls over */
.cab-rail{position:relative;z-index:6;padding:14px 0 12px;background:linear-gradient(#2a150bf2,#1d0f08f2),var(--maho) center/420px;box-shadow:inset 0 -3px 0 #b8893a,0 8px 14px #0008}
.cab-rail__bar{display:flex;align-items:end;gap:14px;flex-wrap:wrap}
/* rail labels join the type system (small caps); the inputs keep a plain 16px UI face for typing */
.cab-field{display:flex;flex-direction:column;gap:6px;font:600 16px/1.3 var(--type-caps);letter-spacing:.12em;color:var(--gold-lt);min-width:0}
.cab-field--q{flex:1 1 260px}
.cab-field input,.cab-field select{width:100%;min-height:48px;font:16px/1.4 system-ui,sans-serif;color:var(--cream);
  background:#140b07;border:1px solid #b8893a;border-radius:4px;padding:10px 14px}
.cab-field input::placeholder{color:#c7b591}
.cab-field input:focus-visible,.cab-field select:focus-visible,.cab-drawers button:focus-visible,.cab-drawer-toggle:focus-visible{outline:3px solid var(--gold-lt);outline-offset:2px}
.cab-drawer-toggle{display:none} /* phones only, see the 640px block */
.cab-count{font:italic 500 17px/1.4 var(--type-display);color:var(--muted);padding:0 0 12px;margin-left:auto;white-space:nowrap}
/* the DRAWERS: fronts of equal height with a brass bail pull above the label */
.cab-drawers{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
/* drawers share the row evenly; the min-height leaves room for the pull above the label */
.cab-drawers button{flex:1 1 130px;max-width:220px; /* a few drawers stay drawer-sized, not full-width slabs */
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:58px;padding:8px 12px;
  font:600 18px/1.2 var(--type-display);color:var(--cream);cursor:pointer;border:0;border-radius:3px;
  background:linear-gradient(#ffffff0a,#0005),var(--maho) center/300px;box-shadow:inset 0 0 0 2px #120804,inset 0 0 0 3px #b8893a55,0 3px 6px #0007}
.cab-drawers button[aria-pressed=true]{color:#fff6dc;background:linear-gradient(#f0c06a33,#0003),var(--maho) center/300px;
  box-shadow:inset 0 0 0 2px #120804,inset 0 0 0 3px var(--gold-lt),0 0 16px #f0c06a55}
.drawer-pull{width:26px;height:9px;border:2px solid #d9b25e;border-top:0;border-radius:0 0 50% 50%;display:block}

/* BAYS: one continuous wall of glass-fronted compartments (the grid has no gap; each bay's own
   ridged border is the joinery between neighbours) */
/* scroll-margin-top leaves room for the sticky rail when a filter scrolls the wall into view */
.cab-bays{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:0;scroll-margin-top:90px;
  border:6px ridge #633d26;background:#120a07}
.cab-bays .card,.collection .cab-bays .card{min-width:0;display:flex;flex-direction:column;padding:20px 18px 16px;border:6px ridge #59351f;
  background:radial-gradient(ellipse at 50% 0,#e4bf6930,#0000 62%),linear-gradient(100deg,#0a1914,#050c0a);transition:filter .2s}
.cab-bays .card:hover{transform:none;filter:brightness(1.06)}
.cab-bays .card .art{border-width:16px;aspect-ratio:1/1}
/* contain, not cover, in the bays: here the whole piece matters more than a level line */
.cab-bays .card .art img{object-fit:contain;background:#160d09}
/* the label sits straight on the bay's lit green back wall — no brown panel of its own (Eric
   2026-10-15: keep the cabinet and wood behind it). A short gold rule under the frame stands in
   for the panel's old top edge, so the label still reads as belonging to the piece above it. */
.cab-bays .cap{flex:1;display:flex;flex-direction:column;align-items:center;padding:12px 8px 4px;margin-top:14px;background:none;text-align:center;position:relative}
.cab-bays .cap::before{content:'';position:absolute;top:0;left:50%;width:44%;height:1px;transform:translateX(-50%);background:linear-gradient(90deg,#0000,#d9b25e,#0000)}
/* bay labels use the same faces as the shelf tags: display name, small-caps category, old-style price */
.cab-bays .card .nm{font:500 23px/1.15 var(--type-display);color:#f3e2bb;letter-spacing:.005em;margin-top:0;text-wrap:balance;text-decoration:none}
.cab-bays .card .pr{font:italic 500 24px/1.2 var(--type-figures);font-variant-numeric:var(--figures);color:var(--gold-lt);margin:6px 0 0}
/* the button joins the type system: Cormorant SC small capitals on a quiet brass outline, instead
   of the fallback sans the shared .add rule rendered when Marcellus SC was not loaded */
.cab-bays .card .add{margin-top:auto;min-height:44px;font:600 17px/1 var(--type-caps);letter-spacing:.14em;text-transform:lowercase;
  color:var(--gold-lt);background:#0b1611b0;border:1px solid #c99d4f;border-radius:2px;box-shadow:inset 0 0 0 3px #0b1611,inset 0 0 0 4px #c99d4f55}
.cab-bays .card .add:hover{background:#c99d4f22;color:#fff3d6}
.cab-bays .cap .pr{margin-bottom:12px}
.cab-bays .card .sold-tag{position:static;margin-top:auto}
.piece-index{font:600 15px/1.4 var(--type-caps);letter-spacing:.16em;font-variant-numeric:var(--figures);color:var(--gold-lt);margin:0 0 10px}
/* category as tracked small caps: lowercasing first makes every letter a small capital */
.piece-category{font:600 15px/1.4 var(--type-caps);letter-spacing:.16em;text-transform:lowercase;color:var(--muted);margin:0 0 4px}
/* a piece listed without a photo: an empty lit niche with the medallion, never a broken image */
/* border-image-slice without `fill`: the frame's painted white centre must not cover the niche
   (.card.frN .art sets the fill, so this needs the same specificity plus one) */
.art.no-photo,.card .art.no-photo,.cab-bays .card .art.no-photo{border-image-slice:60;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:radial-gradient(ellipse at 50% 40%,#2c1c12,#140b07)!important;color:var(--muted);font:600 15px/1.3 var(--type-caps);letter-spacing:.12em;text-align:center}
.art.no-photo::before{content:'';width:42%;aspect-ratio:1;border-radius:50%;background:url('/assets/mc-medallion-160.webp') center/cover;opacity:.32;filter:sepia(.6)}
.cab-plinth{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 26px;padding:22px 12px 6px;font:600 17px/1.4 var(--type-caps);letter-spacing:.1em}
.cab-plinth a:not(.btn){display:inline-flex;align-items:center;min-height:44px;color:var(--gold-lt);text-decoration:underline;text-underline-offset:3px}
/* feet under the carcass so the catalog reads as standing furniture, not a framed box */
.cab-feet{height:clamp(14px,2vw,22px);margin:0 calc(var(--stile) * .4);
  background:radial-gradient(ellipse 60px 100% at 7% 0,#3e2012 98%,#0000),radial-gradient(ellipse 60px 100% at 93% 0,#3e2012 98%,#0000)}

/* ════ HOME: the collection below the facade ══════════════════════════════════════════════ */
/* home-page section rhythm, carried over from the Codex concept */
.collection{max-width:1280px;padding:40px;margin:auto}
.collection-title{margin-bottom:22px}
.collection-title h2,.closing h2{font:600 36px/1.15 var(--type-display);color:var(--gold-lt);margin:8px 0}
.collection .cab-drawers{margin:0 0 22px}
.collection-cta{margin-top:32px}
.closing{text-align:center;border-top:1px solid #9b7d49;padding:40px 24px;background:#1b100b}
.closing p{margin:16px 0 24px}
.closing .btn{font-size:15px;padding:14px 26px}
.index-page .testi{padding-top:8px}

/* ════ responsive ═════════════════════════════════════════════════════════════════════════ */
@media(max-width:900px){
  .cab-bays{grid-template-columns:repeat(3,minmax(0,1fr))} /* tablets: three bays a row (phones drop to two below) */
  .cab-transom--slim{--lights:3}
}
/* 640px matches theme.css and shop.js (the Menu button), so the phone layouts switch together */
@media(max-width:640px){
  /* home hero at phone size: the cabinet fills the width, two pieces a shelf, the drawers drop
     away and the CTA spans the base so it is on the first screen */
  .cab-hero{padding:22px 12px 14px}
  .cab-crown{padding:14px 18px 18px}
  .cab-plaque{padding:10px 26px 12px}
  /* phone plaques: kicker, rule, at most two headline lines (the catalog: kicker, title, subline) */
  .cab-plaque h1{font-size:31px}
  .cab-plaque .kicker{font-size:15px;letter-spacing:.12em}
  .cab-plaque .sub{font-size:17px}
  .cab-fleuron{margin:3px auto 4px}
  .cab-plaque .opt{display:none}
  .cab-scroll{display:none}
  .cab-interior{--piece:clamp(118px,min(42vw,19vh),160px)}
  .cab-shelf{gap:10px;min-height:calc(var(--piece) * .82 + 70px)}
  .cab-tag__name{font-size:16px}
  .cab-tag__price{font-size:15px}
  .cab-tag{padding:5px 6px 6px}
  .cab-base{grid-template-columns:1fr;padding:12px calc(var(--stile) + 4px)}
  .cab-drawer{display:none}
  .cab-cta{width:100%;text-align:center;padding:14px 12px}
  .cab-floor-note{font-size:16px}
  .cab-arriving span{font-size:15px}

  /* catalog at phone size: a short crown, then a STICKY bar — search, a "Drawers" sheet, sort —
     so the first bay is on the first screen and the filters follow the shopper down the wall */
  .cab-catalog{padding:20px 12px 0}
  .cab-crown--catalog .cab-plaque h1{font-size:30px}
  .cab-transom--slim{height:30px;padding-top:6px}
  .cab-body{padding:0 8px 14px;background-size:8px auto,8px auto,auto,420px}
  .cab-rail{position:sticky;top:0;margin:0 -8px;padding:8px 8px 8px}
  .cab-rail__bar{flex-wrap:nowrap;gap:8px;align-items:center}
  .cab-field span.lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .cab-field input,.cab-field select{min-height:44px;padding:8px 10px}
  .cab-field--sort{flex:0 0 106px}
  .cab-field--sort select{padding-right:4px}
  .cab-drawer-toggle .drawer-pull{display:none}
  .cab-drawer-toggle{display:inline-flex;flex:0 0 auto;align-items:center;gap:6px;min-height:44px;padding:0 10px;border-radius:4px;cursor:pointer;
    font:600 17px/1 var(--type-caps);letter-spacing:.08em;color:var(--ink);background:var(--brass);border:0;box-shadow:inset 0 0 0 1px #7a5418}
  .cab-drawer-toggle[aria-expanded=true]{box-shadow:inset 0 0 0 2px #7a5418,0 0 0 2px var(--gold-lt)}
  .cab-count{display:none}
  /* the drawers become a sheet that drops from the sticky bar; closed by default on phones */
  .cab-drawers{display:none;position:absolute;left:0;right:0;top:100%;margin:0;padding:10px;gap:8px;
    background:#1d0f08f7;box-shadow:inset 0 -2px 0 #b8893a,0 14px 24px #000c;max-height:60vh;overflow:auto}
  .cab-rail.is-open .cab-drawers{display:grid;grid-template-columns:1fr 1fr}
  .cab-drawers button{min-height:50px;max-width:none;flex-direction:row;font-size:18px}
  .preview-note{padding:8px 0 4px;font-size:14px}
  /* bays two-up with thinner joinery and smaller frames */
  .cab-bays{grid-template-columns:repeat(2,minmax(0,1fr));border-width:4px}
  .cab-bays .card,.collection .cab-bays .card{padding:10px 8px 10px;border-width:4px}
  .cab-bays .card .art{border-width:9px}
  .cab-bays .cap{margin-top:8px;padding:8px 2px 4px}
  /* the name is a link: give it a full 44px target even when it is one short line */
  .cab-bays .card .nm{font-size:18px;display:flex;align-items:center;justify-content:center;min-height:44px}
  .cab-bays .card .pr{font-size:19px;margin-top:2px}
  .cab-bays .cap .pr{margin-bottom:8px}
  .cab-bays .card .add{font-size:15px;letter-spacing:.08em;padding:8px 4px}
  .piece-index{font-size:14px;margin-bottom:6px}
  .piece-category{font-size:15px;letter-spacing:.1em;margin-bottom:0}
  .cab-plinth{font-size:14px}
  .collection{padding:26px 12px}
  .collection-title h2{font-size:30px}
  .closing h2{font-size:29px}
}