/* Fur & Frame - pets in gilt frames on a plaster-pink salon wall, each titled on a cream gallery placard.
   Palette: plaster wall #EBD3C8 / #F6E9E3 · espresso #2B1F1A / #3A2A22 · frame gold #C6A15B / #E2C68E / #846429 ·
            ivory placards #FAF6F0 · blush #F3D9CF (gifting) · terracotta #C8684A (ribbons, small accents)
   Type: Playfair Display (display, italic accent word) + Karla (UI/body, museum labels in small caps) */
:root{
  --wall:#EBD3C8; --wall-lt:#F6E9E3; --wall-dk:#DCBDB0; --wall-line:#D9C3B8;
  --espresso:#2B1F1A; --espresso-2:#3A2A22; --espresso-3:#4A372D;
  --gold:#C6A15B; --gold-dk:#846429; --gold-ink:#6C5022; --gold-lt:#E2C68E; --gold-pale:#F1E3C4;
  --blush:#F3D9CF; --blush-2:#ECC7B8; --ivory:#FAF6F0; --paper:#F3ECE1; --paper-2:#EBE1D2;
  --terracotta:#C8684A; --terracotta-dk:#A24C2F; --terracotta-ink:#8C3F26;
  --ink:#2B1F1A; --ink-2:#4E3B32; --muted:#6A5348; --line:rgba(43,31,26,.16); --line-2:rgba(43,31,26,.09);
  --on-dark:#FAF6F0; --on-dark-2:rgba(250,246,240,.8);
  --serif:"Playfair Display", Georgia, "Times New Roman", serif;
  --sans:"Karla", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --r-sm:2px; --r:3px; --r-lg:4px; --pill:2px;
  --shadow-1:0 1px 2px rgba(43,31,26,.08),0 8px 20px -10px rgba(43,31,26,.28);
  --shadow-2:0 2px 6px rgba(43,31,26,.08),0 26px 56px -24px rgba(43,31,26,.45);
  --wrap:1220px; --gutter:clamp(16px,4vw,40px);
  --ease:cubic-bezier(.2,.7,.2,1);
  /* plaster texture: a faint mottle laid over the wall colour */
  --plaster:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .02' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .3 0 0 0 0 .26 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  /* sitekit components themed to the brand */
  --sk-bg:var(--wall-lt); --sk-surface:var(--ivory); --sk-text:var(--ink); --sk-muted:var(--muted); --sk-line:var(--line);
  --sk-accent:var(--espresso); --sk-accent-ink:var(--ivory); --sk-radius:2px; --sk-font-display:var(--serif);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:90px}
body{margin:0;background:var(--wall-lt);color:var(--ink);font:400 17px/1.62 var(--sans);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,video,canvas{max-width:100%;display:block}
img{height:auto}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--gold-ink)}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--espresso);outline-offset:3px;border-radius:2px}
.dark :focus-visible,.site-footer :focus-visible,.summary :focus-visible,.painting :focus-visible,.xmas-bar :focus-visible{outline-color:var(--gold-lt)}
.skip{position:absolute;left:-999px;top:8px;z-index:200;background:var(--espresso);color:var(--ivory);padding:10px 16px;border-radius:2px}
.skip:focus{left:16px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.wrap.narrow{max-width:860px}
.center{text-align:center}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.08;letter-spacing:-.015em;margin:0 0 .45em;color:inherit}
h1{font-size:clamp(40px,6vw,80px);letter-spacing:-.025em;line-height:1.03}
h1,h2,h3{text-wrap:balance}
.lede{text-wrap:pretty}
h2{font-size:clamp(32px,4.2vw,54px)}
h3{font-size:clamp(22px,2.2vw,28px);line-height:1.18}
/* the italic accent word, set in frame gold (deep gold on light walls, leaf gold in the dark rooms) */
h1 em,h2 em,h3 em{font-style:italic;font-weight:400;color:var(--gold-dk)}
.dark h1 em,.dark h2 em,.dark h3 em{color:var(--gold)}
p{margin:0 0 1em}
.lede{font-size:clamp(18px,1.6vw,21px);line-height:1.55;color:var(--ink-2);max-width:40ch}
.dark .lede{color:var(--on-dark-2)}
/* museum label: Karla small caps under a short gilt hairline */
.eyebrow{display:block;font:700 16px/1.25 var(--sans);font-variant-caps:all-small-caps;letter-spacing:.12em;color:var(--gold-dk);margin:0 0 18px}
.eyebrow::before{content:"";display:block;width:24px;height:1px;background:var(--gold);margin:0 0 11px}
.center .eyebrow::before,.sec-head.center .eyebrow::before,.eyebrow.centred::before{margin-left:auto;margin-right:auto}
.wall .eyebrow{color:var(--gold-ink)}
.dark .eyebrow{color:var(--gold)}
.blush .eyebrow,.gift-panel .eyebrow{color:var(--gold-ink)}
.small{font-size:14.5px;color:var(--muted)}
.dark .small{color:var(--on-dark-2)}
.amp{font-family:var(--serif);font-style:italic;color:var(--gold)}
/* the brand bullet: a tiny gilt frame */
.corner{display:inline-block;width:9px;height:9px;border:2px solid var(--gold);box-shadow:inset 0 0 0 1px var(--gold-pale);flex:none;vertical-align:1px}

/* ---------- buttons: espresso slabs with a gilt moulding 3px in ---------- */
.btn{--bg:var(--espresso);--fg:var(--ivory);--rim:var(--gold);--lift:0 0 0 transparent;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 26px;border-radius:2px;border:0;background:var(--bg);color:var(--fg);font:700 15.5px/1.15 var(--sans);letter-spacing:.02em;text-decoration:none;text-align:center;cursor:pointer;position:relative;box-shadow:inset 0 0 0 3px var(--bg),inset 0 0 0 4px var(--rim),var(--lift);transition:transform .25s var(--ease),box-shadow .25s var(--ease),background-color .2s}
.btn:hover{--bg:var(--espresso-2);--rim:var(--gold-lt);--lift:0 12px 24px -14px rgba(43,31,26,.7);color:var(--fg);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.ghost{--bg:transparent;--fg:var(--ink);--rim:transparent;box-shadow:inset 0 0 0 1px var(--gold-dk),var(--lift)}
.btn.ghost:hover{--bg:rgba(250,246,240,.55);--fg:var(--ink);box-shadow:inset 0 0 0 1px var(--espresso),var(--lift)}
/* in the dark rooms the slab turns ivory with a deep-gold moulding */
.dark .btn,.site-footer .btn,.summary .btn,.painting .btn{--bg:var(--ivory);--fg:var(--espresso);--rim:var(--gold-dk)}
.dark .btn:hover,.site-footer .btn:hover,.summary .btn:hover,.painting .btn:hover{--bg:#fff;--rim:var(--gold);--lift:0 12px 26px -14px rgba(0,0,0,.6)}
.dark .btn.ghost,.painting .btn.ghost{--bg:transparent;--fg:var(--ivory);box-shadow:inset 0 0 0 1px var(--gold)}
.dark .btn.ghost:hover,.painting .btn.ghost:hover{--bg:rgba(250,246,240,.08);box-shadow:inset 0 0 0 1px var(--gold-lt)}
.btn.sm{min-height:42px;padding:9px 18px;font-size:14.5px}
.btn.block{width:100%}
.btn[disabled],.btn.is-busy{opacity:.6;pointer-events:none}
.btn svg{width:18px;height:18px;flex:none}
.link-arrow{font-weight:700;text-decoration:none;display:inline-flex;gap:8px;align-items:center;border-bottom:1px solid var(--gold);padding-bottom:3px;transition:border-color .2s,color .2s}
.link-arrow svg{display:none}
.link-arrow:hover{border-bottom-color:var(--espresso)}

/* ---------- header ---------- */
.xmas-bar{background:var(--espresso);color:var(--ivory);font-size:14px;text-align:center;padding:9px var(--gutter);position:relative;z-index:61}
.xmas-bar strong{color:var(--gold-lt);font-weight:700}
.xmas-bar a{color:var(--gold-lt)}
.xmas-bar.terracotta{background:var(--terracotta-dk)}
.xmas-bar.terracotta strong,.xmas-bar.terracotta a{color:#fff}
.site-header{position:sticky;top:0;z-index:60;background:rgba(246,233,227,.9);backdrop-filter:saturate(1.3) blur(14px);-webkit-backdrop-filter:saturate(1.3) blur(14px);border-bottom:1px solid transparent;transition:background-color .3s,border-color .3s}
.site-header.scrolled{border-bottom-color:var(--wall-line)}
.site-header .bar{display:flex;align-items:center;gap:24px;height:74px}
.logo{display:flex;align-items:center;flex:none}
.logo img{height:34px;width:auto}
.nav{display:flex;gap:2px;align-items:center;margin-left:auto}
.nav a{text-decoration:none;font-weight:600;font-size:15.5px;padding:9px 13px;border-radius:2px;position:relative}
.nav a:not(.btn)::after{content:"";position:absolute;left:13px;right:13px;bottom:4px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav a:not(.btn):hover::after,.nav a[aria-current=page]::after{transform:scaleX(1)}
.nav a:hover,.nav a[aria-current=page]{color:var(--ink)}
.nav .btn{margin-left:10px;color:var(--ivory)}
/* mobile: a miniature gilt frame hung on a cord from a brass nail, "Menu" in Playfair italic on its ivory mount.
   Four border colours mitre at the corners like real moulding (lit from the top-left by the picture light);
   the pale 1px fillet is the light bead. It tilts on hover and swings once when the menu opens. */
.menu-btn{display:none;margin-left:auto;flex-direction:column;align-items:center;justify-content:flex-start;min-width:48px;min-height:52px;padding:0 2px 3px;border:0;border-radius:2px;background:transparent;cursor:pointer;color:var(--espresso-3);-webkit-tap-highlight-color:transparent}
.menu-btn:focus-visible{outline:2px solid var(--espresso);outline-offset:3px}
.menu-btn .mb-cord{display:block;flex:none;width:44px;height:13px;margin-bottom:-3px;position:relative;z-index:0}
.menu-btn .mb-frame{display:block;position:relative;z-index:1;padding:1px;background:var(--gold-pale);border:5px solid;border-color:var(--gold-lt) #A7843F var(--gold-dk) var(--gold);box-shadow:0 0 0 1px rgba(108,80,34,.6),0 3px 6px -1px rgba(43,31,26,.3),0 10px 14px -9px rgba(43,31,26,.45);transform-origin:50% -9px;transition:transform .45s var(--ease)}
.menu-btn .mb-mount{display:grid;place-items:center;min-width:58px;padding:6px 10px 7px;background:var(--ivory);box-shadow:inset 0 0 0 1px rgba(132,100,41,.5),inset 0 2px 3px rgba(43,31,26,.14)}
.menu-btn i{grid-area:1/1;font:italic 500 16px/1 var(--serif);letter-spacing:.005em;color:var(--ink)}
.menu-btn .mb-close,body.nav-open .menu-btn .mb-open{visibility:hidden}
body.nav-open .menu-btn .mb-close{visibility:visible}
@media (hover:hover){.menu-btn:hover .mb-frame{transform:rotate(-2.5deg)}}
.menu-btn:active .mb-frame{transform:translateY(1px)}
body.nav-open .menu-btn .mb-frame{animation:mb-swing .9s var(--ease)}
@keyframes mb-swing{0%{transform:rotate(0)}25%{transform:rotate(4deg)}50%{transform:rotate(-2.5deg)}75%{transform:rotate(1deg)}100%{transform:rotate(0)}}
@media (prefers-reduced-motion: reduce){.menu-btn .mb-frame{animation:none!important;transform:none!important}}
@media (max-width:359px){.site-header .bar{gap:12px}.site-header .logo img{height:30px}}
@media (max-width:980px){
  .menu-btn{display:inline-flex}
  .nav{position:fixed;inset:0 0 auto 0;top:0;flex-direction:column;align-items:stretch;gap:0;background:var(--wall-lt);color:var(--ink);padding:90px var(--gutter) 28px;box-shadow:var(--shadow-2);transform:translateY(-105%);transition:transform .35s var(--ease);margin:0;z-index:-1}
  .nav a{font-family:var(--serif);font-size:22px;font-weight:500;padding:13px 4px;border-bottom:1px solid var(--wall-line);border-radius:0}
  .nav a:not(.btn)::after{display:none}
  .nav .btn{margin:18px 0 0;font-family:var(--sans);font-size:16px;font-weight:700;border-bottom:0}
  body.nav-open .nav{transform:none}
}

/* ---------- sections ---------- */
.section{padding:clamp(72px,10vw,136px) 0;position:relative}
.section.tight{padding:clamp(48px,7vw,90px) 0}
/* the plaster wall, with a picture rail along its top edge */
.wall{background-color:var(--wall);background-image:var(--plaster)}
.wall.section::before{content:"";position:absolute;left:0;right:0;top:20px;height:7px;background:linear-gradient(180deg,rgba(255,255,255,.55) 0 1px,var(--wall-dk) 1px 5px,rgba(43,31,26,.12) 5px 6px,transparent 6px);pointer-events:none}
.dark{background:var(--espresso);color:var(--on-dark)}
.paper{background:var(--wall-lt)}
.blush{background:var(--blush)}
.sec-head{max-width:760px;margin:0 0 clamp(36px,5vw,64px)}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head.center .lede{margin-left:auto;margin-right:auto}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,90px);align-items:center}
@media (max-width:900px){.grid-2{grid-template-columns:1fr}}
.rule-gold{height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);border:0;margin:0}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}
.no-js .reveal{opacity:1;transform:none}

/* ---------- gallery placards (ivory card, hairline border, two brass pins) ---------- */
.placard{position:relative;background:var(--ivory);border:1px solid var(--wall-line);border-radius:2px;box-shadow:0 1px 1px rgba(43,31,26,.05),0 18px 40px -22px rgba(43,31,26,.45)}
.placard::before,.placard::after{content:"";position:absolute;top:10px;width:6px;height:6px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#f4e2b6,#9c7a3c 70%);box-shadow:0 1px 1px rgba(43,31,26,.35)}
.placard::before{left:10px}.placard::after{right:10px}
.label-line{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;font:600 14px/1.4 var(--sans);color:var(--muted);margin:0;padding-top:12px;border-top:1px solid var(--wall-line)}
.label-line b{font-family:var(--serif);font-style:italic;font-weight:500;font-size:16px;color:var(--ink)}

/* ---------- hero: a full-bleed salon hang ---------- */
.hero{position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:center;min-height:clamp(640px,57vw,912px);padding:72px 0 64px}
.hero::before{content:"";position:absolute;left:0;right:0;top:22px;height:7px;z-index:0;background:linear-gradient(180deg,rgba(255,255,255,.6) 0 1px,var(--wall-dk) 1px 5px,rgba(43,31,26,.14) 5px 6px,transparent 6px);pointer-events:none}
.hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(48% 60% at 50% 46%,rgba(255,247,240,.55),transparent 70%)}
.hang{position:absolute;inset:0;z-index:1;--mx:0;--my:0}
.hf{position:absolute;display:block;translate:calc(var(--mx) * var(--d,1) * 9px) calc(var(--my) * var(--d,1) * 6px);transition:translate .9s var(--ease)}
.hf-in{display:block;position:relative;transform:rotate(var(--r,0deg));transform-origin:50% -10%;transition:transform .5s var(--ease)}
.hf .gframe{width:100%;aspect-ratio:4/5;--fw:clamp(7px,1vw,15px)}
.hf.oval .gframe{border-radius:50%;--fw:clamp(6px,.8vw,12px)}
.hf.oval .gframe::after{border-radius:50%}
.hf.oval .gframe img{border-radius:50%}
.hf[data-style]{cursor:pointer}
.hf[data-style]:hover .hf-in{transform:rotate(0deg) translateY(-5px)}
/* the tiny cream placard under each frame */
.hf .tl{position:absolute;left:50%;top:calc(100% + 12px);transform:translateX(-50%);white-space:nowrap;background:var(--ivory);border:1px solid var(--wall-line);border-radius:1px;padding:5px 10px 4px;font:700 10px/1.25 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);box-shadow:0 6px 12px -8px rgba(43,31,26,.5);text-align:center}
.hf .tl b{display:block;font:italic 500 13.5px/1.2 var(--serif);letter-spacing:0;text-transform:none;color:var(--ink)}
.hf-b .tl{left:auto;right:14%;transform:none}
.hf-f .tl{left:14%;transform:none}
/* picture-rail cords (two lines from one hook) */
.hf .cord{position:absolute;left:0;width:100%;bottom:100%;height:var(--cord,60px);color:rgba(132,100,41,.7);overflow:visible}
.hf .cord path{fill:none;stroke:currentColor;stroke-width:1}
.hf .cord circle{fill:var(--gold-dk)}
/* a brass picture light with its warm pool on the plaster */
.hf .lamp{position:absolute;left:22%;right:22%;top:calc(var(--fw,12px) * -1 - 16px);height:9px;border-radius:5px 5px 2px 2px;background:linear-gradient(180deg,#f0d79c,#a9843d 60%,#7a5b24);box-shadow:0 2px 3px rgba(43,31,26,.35);z-index:3}
.hf .lamp::before{content:"";position:absolute;left:50%;top:100%;width:4px;height:12px;background:linear-gradient(90deg,#7a5b24,#c9a35a,#7a5b24);transform:translateX(-50%)}
.hf .glow{position:absolute;left:4%;right:4%;top:0;height:62%;z-index:2;background:radial-gradient(55% 70% at 50% 0%,rgba(255,232,186,.55),rgba(255,226,178,.18) 50%,transparent 78%);mix-blend-mode:screen;pointer-events:none}
.hf .halo{position:absolute;left:-45%;right:-45%;top:-34%;height:80%;z-index:-1;background:radial-gradient(50% 50% at 50% 34%,rgba(255,242,220,.95),rgba(255,236,206,.4) 45%,transparent 72%);pointer-events:none}
/* the reserved frame: an empty mount waiting for yours */
.hf .gframe.reserved{background:#f7efe2;display:grid;place-items:center;text-align:center;padding:10%}
.hf .gframe.reserved span{font:italic 400 clamp(13px,1.15vw,17px)/1.25 var(--serif);color:var(--gold-dk)}
.hf .gframe.reserved span::before{content:"";display:block;width:clamp(14px,1.4vw,20px);height:clamp(14px,1.4vw,20px);margin:0 auto 8px;border:2px solid var(--gold);border-right:0;border-bottom:0}

/* desktop salon hang: sizes and heights in --u (1vw, capped at 16px so the hang never outgrows the hero's
   912px ceiling on wide screens); the outer frames are pinned to the wall's edges (some run off them), the inner
   three are set from the centre so they keep their distance from the placard at every width */
.hero{--u:min(1vw,16px)}
.hf-a{left:3vw;top:calc(var(--u) * 4.6);width:calc(var(--u) * 16.5);--d:1.3;--r:-.6deg}
.hf-b{left:-4.5vw;top:calc(var(--u) * 30);width:calc(var(--u) * 12.5);--d:.8;--r:.9deg}
.hf-c{left:calc(50% - var(--u) * 37.8);top:calc(var(--u) * 30.5);width:calc(var(--u) * 11);--d:1.1;--r:-1deg}
.hf-d{left:calc(50% + var(--u) * 22.3);top:calc(var(--u) * 9.5);width:calc(var(--u) * 7.6);--d:.7;--r:0deg;--cord:calc(var(--u) * 9.5 - 29px)}
.hf-e{right:3.2vw;top:calc(var(--u) * 5.2);width:calc(var(--u) * 15);--d:1.2;--r:.7deg;--cord:calc(var(--u) * 5.2 - 29px)}
.hf-f{right:-3.4vw;top:calc(var(--u) * 29);width:calc(var(--u) * 13.5);--d:.9;--r:-.8deg}
.hf-g{left:calc(50% + var(--u) * 22.6);top:calc(var(--u) * 31.5);width:calc(var(--u) * 10.4);--d:1;--r:.5deg}
.hero-inner{position:relative;z-index:2;display:flex;justify-content:center;pointer-events:none}
.hero-placard{pointer-events:auto;width:min(600px,42vw);padding:44px clamp(28px,3vw,46px) 34px;text-align:left}
.hero-placard .eyebrow{margin-bottom:16px}
.hero h1{font-size:clamp(44px,4.4vw,66px);margin:0 0 20px}
.hero .label-line{margin-bottom:18px}
.hero .lede{font-size:clamp(17px,1.3vw,19px);margin:0 0 24px;max-width:46ch}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:18px}
.hero-note{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin:0;font-size:14px;color:var(--muted)}
.hero-note span{display:inline-flex;align-items:center;gap:8px}
.hero-label{position:absolute;z-index:2;right:clamp(16px,3vw,44px);bottom:22px;margin:0;max-width:min(300px,calc(29vw - clamp(16px,3vw,44px) - 14px));padding:10px 14px 9px;font-size:12.5px;line-height:1.4;color:var(--muted)}
.hero-label::before,.hero-label::after{display:none}
.hero-label b{display:block;font:italic 500 15px/1.3 var(--serif);color:var(--ink)}
/* load: frames are hung one by one, each settling with a small swing */
.js .hero .hf-in{animation:hang 1.25s var(--ease) both;animation-delay:calc(var(--i,0) * 90ms + 120ms);animation-fill-mode:backwards}
.js .hero .hero-placard{animation:placard .9s var(--ease) .05s backwards}
@keyframes hang{0%{opacity:0;transform:translateY(-22px) rotate(calc(var(--r,0deg) + 3deg))}45%{opacity:1;transform:translateY(0) rotate(calc(var(--r,0deg) - 1.4deg))}72%{transform:rotate(calc(var(--r,0deg) + .6deg))}100%{transform:rotate(var(--r,0deg))}}
@keyframes placard{from{transform:translateY(12px)}to{transform:none}}
@media (max-width:900px){
  .hero{display:block;min-height:0;padding:0 0 clamp(40px,6vw,64px)}
  .hang{position:relative;inset:auto;height:calc(max(14vw,52px) + 52.5vw + 52px)}
  .hf .cord{display:none}
  .hf-a{left:29vw;top:max(14vw,52px);width:42vw}
  .hf-d{left:4vw;top:max(12vw,46px);width:15vw}
  .hf-b{left:-10vw;top:37vw;width:29vw}
  .hf-e{right:-8vw;top:21vw;width:29vw}
  .hf-c,.hf-f,.hf-g{display:none}
  .hf .tl{display:none}
  .hf-a .tl{display:block}
  .hero-inner{margin-top:0}
  .hero-placard{width:min(640px,100%)}
  .hero-label{position:relative;right:auto;bottom:auto;margin:18px auto 0;max-width:640px;width:calc(100% - var(--gutter) * 2);background:none;border:0;box-shadow:none;padding:0;text-align:center}
}
@media (min-width:700px) and (max-width:900px){
  .hang{height:calc(7vw + 37.5vw + 56px)}
  .hf-a{left:33vw;top:7vw;width:30vw}
  .hf-d{left:13vw;top:9vw;width:11vw}
  .hf-b{left:-4vw;top:27vw;width:21vw}
  .hf-e{right:-5vw;top:12vw;width:22vw}
  .hf-g{display:block;left:auto;right:21vw;top:38vw;width:11vw}
  .hf-c{display:block;left:17vw;top:36vw;width:10vw}
}
@media (max-width:560px){
  .hero-placard{padding:36px 20px 24px}
  .hero-placard .eyebrow{font-size:15px;letter-spacing:.07em}
  .hero h1{font-size:clamp(36px,10.5vw,46px)}
  .hero-ctas .btn{flex:1 1 100%}
}

/* ---------- how it's made: four placards ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.4vw,28px);counter-reset:s;list-style:none;margin:0;padding:0}
.step{padding:34px 24px 26px;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.step:hover{transform:translateY(-4px)}
.step .num{font:italic 400 17px/1 var(--serif);color:var(--gold-dk);display:flex;align-items:center;gap:10px;margin-bottom:18px}
.step .num::after{content:"";flex:1;height:1px;background:var(--wall-line)}
.step .ico{width:46px;height:46px;display:grid;place-items:center;margin-bottom:16px;color:var(--gold-dk);border:1px solid var(--gold);box-shadow:inset 0 0 0 3px var(--ivory),inset 0 0 0 4px var(--gold-pale)}
.step .ico svg{width:22px;height:22px}
.step h3{font-size:22px;margin-bottom:8px}
.step p{font-size:15.5px;color:var(--ink-2);margin:0}
@media (max-width:980px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}

/* ---------- gilded CSS frames (used everywhere) ---------- */
.gframe{--fw:clamp(10px,1.4vw,18px);position:relative;display:block;background:#fbf6ea;border:var(--fw) solid;border-color:#e9cd8c #b88f42 #8f6b2c #d8b46c;box-shadow:inset 0 0 0 3px #f4e5c0,inset 0 0 0 4px rgba(143,107,44,.45),0 2px 4px rgba(43,31,26,.2),0 26px 46px -22px rgba(43,31,26,.6)}
.gframe::after{content:"";position:absolute;inset:calc(var(--fw) * -1);pointer-events:none;background:linear-gradient(125deg,rgba(255,255,255,.35),transparent 30%,transparent 62%,rgba(255,255,255,.18) 76%,transparent 90%);mix-blend-mode:overlay}
.gframe img{width:100%;height:100%;object-fit:cover;display:block}
.gframe.thin{--fw:8px}

/* ---------- style carousel: frames on the wall, each with its placard ---------- */
.styles-sec{overflow:hidden}
.carousel{position:relative}
.car-track{display:flex;gap:clamp(18px,3vw,40px);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:14px max(var(--gutter),calc((100vw - var(--wrap))/2 + var(--gutter))) 36px;scrollbar-width:none;-ms-overflow-style:none}
.car-track:focus{outline:none}
.car-track:focus-visible{outline:2px solid var(--espresso);outline-offset:-4px}
.car-track::-webkit-scrollbar{display:none}
.car-card{flex:0 0 clamp(260px,30vw,360px);scroll-snap-align:center;text-decoration:none;color:inherit;transition:transform .5s var(--ease),opacity .5s}
.car-card .gframe{aspect-ratio:4/5;transition:transform .5s var(--ease)}
.car-card:hover .gframe{transform:translateY(-8px) rotate(-.6deg)}
.car-card .plaque{margin:22px 14px 0}
.plaque{padding:18px 18px 15px;background:var(--ivory);border:1px solid var(--wall-line);border-radius:2px;box-shadow:0 10px 22px -16px rgba(43,31,26,.5);position:relative}
.plaque::before,.plaque::after{content:"";position:absolute;top:9px;width:5px;height:5px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#f0d9a4,#9c7a3c)}
.plaque::before{left:8px}.plaque::after{right:8px}
.plaque .no{font:700 11px/1 var(--sans);letter-spacing:.2em;color:var(--gold-dk);text-transform:uppercase}
.plaque h3{font-size:24px;margin:7px 0 2px;font-style:italic}
.plaque .med{font-size:13.5px;color:var(--muted);margin:0 0 8px;font-style:italic}
.plaque p{font-size:15px;color:var(--ink-2);margin:0 0 10px}
.plaque .go{font-weight:700;font-size:14.5px;color:var(--ink);display:inline-flex;gap:6px;align-items:center;border-bottom:1px solid var(--gold);padding-bottom:2px}
.plaque .go svg{display:none}
.car-card:hover .go{color:var(--gold-ink);border-bottom-color:var(--espresso)}
.car-ctrls{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:4px}
.car-btns{display:flex;gap:10px;align-items:center}
.car-btn{width:48px;height:48px;border-radius:2px;border:0;background:var(--ivory);box-shadow:inset 0 0 0 1px var(--gold-dk);cursor:pointer;display:grid;place-items:center;transition:all .25s var(--ease)}
.car-btn:hover{background:var(--espresso);color:var(--ivory);box-shadow:inset 0 0 0 3px var(--espresso),inset 0 0 0 4px var(--gold)}
.car-btn svg{width:20px;height:20px}
.car-dots{display:flex;gap:6px;margin-right:6px}
.car-dots button{width:14px;height:3px;border-radius:0;border:0;padding:0;background:var(--wall-dk);cursor:pointer;transition:all .3s}
.car-dots button[aria-current=true]{background:var(--gold-dk);width:30px}
.honest-note{font-size:13.5px;color:var(--muted);display:flex;gap:8px;align-items:center}
.honest-note svg{width:16px;height:16px;flex:none;color:var(--gold-dk)}

/* ---------- preview-first story ---------- */
.mock-ui{position:relative;background:var(--ivory);border:1px solid var(--wall-line);border-radius:3px;box-shadow:var(--shadow-2);padding:22px;max-width:520px;margin-left:auto}
.mock-ui .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;font-size:14px;color:var(--muted)}
.mock-ui .dots i{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--wall-dk);margin-right:5px}
.mock-ui .pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mock-ui .opt{border-radius:2px;overflow:hidden;position:relative;box-shadow:0 0 0 1px var(--line)}
.mock-ui .opt img{aspect-ratio:4/5;object-fit:cover;width:100%}
.mock-ui .opt.sel{box-shadow:0 0 0 3px var(--gold)}
.mock-ui .opt .tick{position:absolute;top:10px;right:10px;width:28px;height:28px;border-radius:50%;background:var(--gold);color:var(--espresso);display:grid;place-items:center}
.mock-ui .opt .tick svg{width:16px;height:16px}
.mock-ui .bar2{display:flex;justify-content:space-between;align-items:center;margin-top:16px;gap:12px}
.mock-ui .price{font-family:var(--serif);font-size:24px}
.badge-float{position:relative;margin:18px 0 -8px -26px;background:var(--espresso);color:var(--ivory);border-radius:2px;padding:14px 16px;box-shadow:var(--shadow-2),inset 0 0 0 3px var(--espresso),inset 0 0 0 4px var(--gold);font-size:14px;max-width:280px;width:fit-content;display:flex;gap:12px;align-items:center}
.badge-float svg{width:28px;height:28px;color:var(--gold);flex:none}
@media (max-width:900px){.mock-ui{margin:0 auto}.badge-float{margin-left:0}}
.checklist{list-style:none;padding:0;margin:26px 0 30px;display:grid;gap:14px}
.checklist li{display:flex;gap:14px;align-items:flex-start}
.checklist svg{width:18px;height:18px;flex:none;color:var(--gold-dk);margin-top:4px}
.dark .checklist svg{color:var(--gold)}
.checklist b{display:block}

/* ---------- products: hung, not just printed ---------- */
.products{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,24px)}
@media (max-width:1060px){.products{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.products{grid-template-columns:1fr}}
.pcard{background:var(--ivory);border:1px solid var(--wall-line);border-radius:2px;box-shadow:var(--shadow-1);overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.pcard:hover{transform:translateY(-5px);box-shadow:var(--shadow-2);color:inherit}
.pcard .stage{aspect-ratio:1/1;background:radial-gradient(60% 46% at 50% 6%,rgba(255,240,214,.8),transparent 70%),var(--plaster),linear-gradient(180deg,#efdacf,#e2c4b7);display:grid;place-items:center;position:relative;overflow:hidden}
.pcard .stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:15%;background:linear-gradient(180deg,#a7856c,#8a6a55);box-shadow:0 -2px 0 #f6ebe4,0 -4px 0 rgba(43,31,26,.08)}
.pcard .body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:6px;flex:1}
.pcard h3{font-size:23px;margin:0}
.pcard .meta{font-size:14px;color:var(--muted)}
.pcard .price{margin-top:auto;padding-top:12px;display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--wall-line)}
.pcard .price b{font-family:var(--serif);font-size:28px;font-weight:500}
.pcard .price span{font-size:13.5px;color:var(--gold-dk);font-weight:700}
.tag{display:inline-block;font:700 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;padding:6px 9px;border-radius:2px;background:var(--blush);color:var(--terracotta-ink)}
.tag.gold{background:var(--gold-pale);color:var(--gold-ink)}
.tag.green,.tag.dark{background:var(--espresso);color:var(--gold-lt)}

/* mini product mockups (CSS) */
.mini{position:relative;z-index:1;filter:drop-shadow(0 14px 14px rgba(43,31,26,.3))}
.mini.print{width:42%;aspect-ratio:210/297;background:#fff;padding:5%;transform:rotate(-3deg)}
.mini.print img{width:100%;height:100%;object-fit:cover}
.mini.print::before{content:"";position:absolute;top:-6px;left:50%;width:34%;height:14px;transform:translateX(-50%) rotate(2deg);background:rgba(236,199,184,.8)}
.mini.framed{width:50%;aspect-ratio:3/4;border:9px solid;border-color:#2a2a2a #141414 #0b0b0b #222;padding:11%;background:#fbf8f2;box-shadow:inset 1px 1px 3px rgba(0,0,0,.3)}
.mini.framed img{width:100%;height:100%;object-fit:cover;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}
.mini.canvas{width:56%;aspect-ratio:5/7;transform:perspective(700px) rotateY(-16deg);transform-style:preserve-3d}
.mini.canvas img{width:100%;height:100%;object-fit:cover}
.mini.canvas::after{content:"";position:absolute;top:0;right:-14px;width:14px;height:100%;background:linear-gradient(90deg,#5c4a3a,#3a2e24);transform-origin:left;transform:rotateY(90deg)}
.mini.phone{width:34%;aspect-ratio:9/19;border-radius:18px;background:#111;padding:6px;box-shadow:inset 0 0 0 1.5px #333}
.mini.phone img{width:100%;height:100%;object-fit:cover;border-radius:13px}
.mini.phone::before{content:"";position:absolute;top:10px;left:50%;width:26%;height:5px;border-radius:5px;background:#111;transform:translateX(-50%);z-index:2}

/* ---------- memorial: the quiet room ---------- */
.memorial-sec{overflow:hidden}
.memorial-sec .glow{position:absolute;width:680px;height:680px;border-radius:50%;background:radial-gradient(circle,rgba(226,198,142,.24),transparent 65%);left:8%;top:50%;transform:translateY(-50%);pointer-events:none}
.mem-art{max-width:420px;margin:0 auto;position:relative}
.mem-art .gframe{aspect-ratio:4/5}
.quote{font-family:var(--serif);font-style:italic;font-size:clamp(22px,2.4vw,30px);line-height:1.35;color:var(--gold-lt);margin:0 0 22px;max-width:30ch}

/* ---------- gifting: a blush panel tied with a terracotta ribbon ---------- */
.gift-panel{position:relative;background:var(--blush);border-radius:2px;padding:clamp(28px,5vw,64px);box-shadow:var(--shadow-1);overflow:hidden}
.gift-panel::before{content:"";position:absolute;top:0;bottom:0;right:calc(clamp(28px,5vw,64px) + min(420px,38%) / 2 - 7px);width:14px;background:linear-gradient(90deg,var(--terracotta-dk),var(--terracotta) 30%,#d8826a 50%,var(--terracotta) 70%,var(--terracotta-dk));opacity:.9}
.gift-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,5vw,70px);align-items:center;position:relative}
@media (max-width:900px){.gift-grid{grid-template-columns:1fr}.gift-panel::before{display:none}}
.ornament-demo{position:relative;aspect-ratio:1;max-width:420px;width:100%;margin:0 auto;display:grid;place-items:center}
.ornament-demo .ribbon{position:absolute;top:0;left:50%;width:2px;height:24%;background:linear-gradient(var(--terracotta),var(--terracotta-dk));transform:translateX(-50%)}
.ornament-demo .bow{position:absolute;top:21%;left:50%;width:46px;height:18px;transform:translateX(-50%);background:radial-gradient(circle at 50% 50%,var(--terracotta-dk) 25%,transparent 26%),radial-gradient(ellipse at 20% 50%,var(--terracotta) 45%,transparent 47%),radial-gradient(ellipse at 80% 50%,var(--terracotta) 45%,transparent 47%)}
.ornament-demo .ball{width:64%;aspect-ratio:1;border-radius:50%;overflow:hidden;position:relative;box-shadow:0 0 0 7px #f5efe3,0 0 0 8px rgba(0,0,0,.08),0 30px 50px -20px rgba(43,31,26,.55);animation:swing 5s ease-in-out infinite;transform-origin:50% -40%;margin-top:14%}
.ornament-demo .ball img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;transform:scale(1.12)}
.ornament-demo .ball::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.55),transparent 32%),radial-gradient(circle at 70% 80%,rgba(0,0,0,.18),transparent 50%)}
@keyframes swing{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
.cutoffs{display:grid;gap:10px;margin:22px 0 28px}
.cutoff{display:flex;justify-content:space-between;gap:16px;padding:14px 18px;background:var(--ivory);border-radius:2px;border:1px solid var(--wall-line)}
.cutoff b{font-family:var(--serif);font-weight:500;font-size:18px}

/* ---------- promise + wall label ---------- */
.promises{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,24px)}
@media (max-width:980px){.promises{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.promises{grid-template-columns:1fr}}
.promise{padding:26px 4px 8px;border-top:1px solid var(--gold);position:relative}
.promise::before{content:"";position:absolute;left:0;top:-1px;width:28px;height:3px;background:var(--gold-dk)}
.promise svg{width:30px;height:30px;color:var(--gold-dk);margin-bottom:16px}
.promise h3{font-size:22px}
.promise p{color:var(--ink-2);font-size:15.5px;margin:0}
/* a sourced figure, set as the wall label beside a small frame - never a band of big numbers */
.exhibit{display:flex;align-items:flex-end;gap:clamp(18px,3vw,34px);margin-top:clamp(40px,6vw,72px)}
.exhibit .gframe{width:clamp(110px,12vw,150px);aspect-ratio:4/5;--fw:9px;flex:none}
/* the cream placard under a framed piece (title + catalogue number) */
.frame-tag{display:table;margin:18px auto 0;background:var(--ivory);border:1px solid var(--wall-line);border-radius:1px;padding:6px 14px 5px;font:700 10.5px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:center;box-shadow:0 6px 12px -8px rgba(43,31,26,.5)}
.frame-tag b{display:block;font:italic 500 15px/1.25 var(--serif);letter-spacing:0;text-transform:none;color:var(--ink)}
.wall-label{max-width:340px;padding:16px 18px 14px;font:500 14px/1.45 var(--sans);color:var(--ink-2)}
.wall-label .t{display:block;font:italic 500 18px/1.3 var(--serif);color:var(--ink);margin-bottom:4px}
.wall-label cite{display:block;margin-top:8px;padding-top:8px;border-top:1px solid var(--wall-line);font-style:normal;font-size:12px;letter-spacing:.06em;color:var(--muted)}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:10px;max-width:860px;margin:0 auto}
.faq details{background:var(--ivory);border:1px solid var(--wall-line);border-radius:2px;transition:box-shadow .25s}
.faq details[open]{box-shadow:var(--shadow-1)}
.faq summary{list-style:none;cursor:pointer;padding:20px 58px 20px 24px;font:600 18px/1.35 var(--sans);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:24px;top:50%;width:10px;height:10px;border-right:1.5px solid var(--gold-dk);border-bottom:1.5px solid var(--gold-dk);transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq .a{padding:0 24px 22px;color:var(--ink-2)}
.faq .a p:last-child{margin:0}

/* ---------- closing CTA: an empty gilt frame on the wall, waiting for yours ---------- */
.cta-band{position:relative;overflow:hidden;text-align:center;isolation:isolate}
.cta-band .eyebrow::before{margin-left:auto;margin-right:auto}
.cta-frame{--fw:clamp(14px,2vw,26px);max-width:760px;margin:0 auto;aspect-ratio:auto}
.cta-frame .mount{display:block;background:radial-gradient(60% 46% at 50% 0%,rgba(255,232,186,.5),transparent 72%),var(--ivory);padding:clamp(40px,6vw,76px) clamp(22px,5vw,64px);box-shadow:inset 0 0 0 clamp(12px,1.6vw,20px) #f3ead9,inset 0 0 0 calc(clamp(12px,1.6vw,20px) + 1px) rgba(132,100,41,.35),inset 2px 3px 8px rgba(43,31,26,.12)}
.cta-frame h2{max-width:16ch;margin-left:auto;margin-right:auto}
.cta-frame .lede{margin:0 auto 28px}
.cta-band .wall-label{margin:28px auto 0;max-width:420px;text-align:center}
.cta-band .lamp-bar{display:block;width:min(240px,40%);height:10px;margin:0 auto 14px;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,#f0d79c,#a9843d 60%,#7a5b24);box-shadow:0 2px 3px rgba(43,31,26,.35);position:relative}
.cta-band .lamp-bar::before{content:"";position:absolute;left:50%;top:100%;width:5px;height:14px;background:linear-gradient(90deg,#7a5b24,#c9a35a,#7a5b24);transform:translateX(-50%)}
.cta-band .lamp-bar::after{content:"";position:absolute;left:-60%;right:-60%;top:-60px;height:260px;background:radial-gradient(50% 50% at 50% 40%,rgba(255,244,226,.7),transparent 70%);pointer-events:none;z-index:-1}

/* ---------- footer ---------- */
.site-footer{background:var(--espresso-2);color:var(--on-dark-2);padding:clamp(56px,8vw,90px) 0 calc(28px + env(safe-area-inset-bottom));font-size:15px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.4fr;gap:36px}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr}}
.site-footer h4{font:700 16px/1.2 var(--sans);font-variant-caps:all-small-caps;letter-spacing:.12em;color:var(--gold);margin:6px 0 16px}
.site-footer h4::before{content:"";display:block;width:24px;height:1px;background:var(--gold);margin-bottom:10px;opacity:.7}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.site-footer a{text-decoration:none;color:var(--on-dark-2)}
.site-footer a:hover{color:var(--ivory)}
.site-footer .logo img{height:36px;margin-bottom:18px}
.site-footer .small{color:var(--on-dark-2)}
.site-footer .group{font:italic 400 14px/1.4 var(--serif);color:var(--gold-lt);margin:0}
.sub-form{display:flex;gap:8px;margin-top:12px}
.sub-form input{flex:1;min-width:0;padding:12px 14px;border-radius:2px;border:1px solid rgba(226,198,142,.35);background:rgba(250,246,240,.06);color:var(--ivory);font:inherit}
.sub-form input::placeholder{color:rgba(250,246,240,.6)}
.sub-form .btn{min-height:48px;padding:10px 18px}
.sub-msg{font-size:14px;margin-top:8px;min-height:1.4em;color:var(--gold-lt)}
.legal-line{border-top:1px solid rgba(250,246,240,.12);margin-top:44px;padding-top:22px;font-size:13px;color:rgba(250,246,240,.66);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ---------- inner page hero: a stretch of plaster wall ---------- */
.page-hero{position:relative;padding:clamp(64px,8vw,112px) 0 clamp(40px,5vw,64px);background-color:var(--wall);background-image:var(--plaster);margin-bottom:clamp(36px,5vw,60px)}
.page-hero::before{content:"";position:absolute;left:0;right:0;top:20px;height:7px;background:linear-gradient(180deg,rgba(255,255,255,.55) 0 1px,var(--wall-dk) 1px 5px,rgba(43,31,26,.12) 5px 6px,transparent 6px)}
.page-hero .eyebrow{color:var(--gold-ink)}
.page-hero h1{font-size:clamp(40px,5.6vw,72px);max-width:16ch}
.page-hero .lede{max-width:56ch}
.crumbs{font-size:14px;color:var(--muted);margin-bottom:18px}
.crumbs a{color:var(--muted)}

/* styles page */
.style-row{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(30px,6vw,90px);align-items:center;padding:clamp(40px,6vw,80px) 0;border-bottom:1px solid var(--wall-line)}
.style-row:nth-child(even) .art{order:2}
.style-row .art .gframe{aspect-ratio:4/5;max-width:440px;margin:0 auto}
.style-row .no{font:700 12px/1 var(--sans);letter-spacing:.2em;color:var(--gold-dk);text-transform:uppercase}
.style-row h2{font-style:italic;margin-top:10px}
.swatches{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 26px}
.swatch{display:inline-flex;align-items:center;gap:8px;font-size:14px;padding:5px 12px 5px 5px;border-radius:2px;background:var(--ivory);box-shadow:0 0 0 1px var(--wall-line)}
.swatch i{width:22px;height:22px;border-radius:1px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
@media (max-width:820px){.style-row{grid-template-columns:1fr}.style-row:nth-child(even) .art{order:0}}

/* prices page: the gallery price list */
.price-table{width:100%;border-collapse:collapse;background:var(--ivory);border:1px solid var(--wall-line);border-radius:2px;overflow:hidden;box-shadow:var(--shadow-1);font-size:16px}
.price-table th,.price-table td{text-align:left;padding:16px 20px;border-bottom:1px solid var(--wall-line);vertical-align:top}
.price-table th{font:700 15px/1.2 var(--sans);font-variant-caps:all-small-caps;letter-spacing:.12em;color:var(--muted);background:#f3e8df}
.price-table td b{font-family:var(--serif);font-size:22px;font-weight:500;white-space:nowrap}
.price-table td.price-cell{white-space:nowrap;text-align:right}
.price-table th:last-child{text-align:right}
.price-table tr:last-child td{border-bottom:0}
@media (max-width:700px){.price-table thead{display:none}.price-table tr{display:block;border-bottom:1px solid var(--wall-line)}.price-table td{display:block;border:0;padding:8px 18px}.price-table td.price-cell{text-align:left}.price-table td:first-child{padding-top:18px}.price-table td:last-child{padding-bottom:18px}}
.frame-swatches{display:flex;flex-wrap:wrap;gap:14px;margin-top:14px}
.frame-swatches span{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:13px;color:var(--muted);width:76px;text-align:center}
.frame-swatches i{width:52px;height:52px;border:9px solid;box-shadow:inset 0 0 0 2px #fbf8f2,0 4px 10px -4px rgba(0,0,0,.4);background:#fbf8f2}

/* generic cards / forms */
.card{background:var(--ivory);border:1px solid var(--wall-line);border-radius:2px;box-shadow:var(--shadow-1);padding:clamp(22px,3vw,36px)}
.field{display:block;margin:0 0 16px}
.field>span{display:block;font-weight:700;font-size:14.5px;margin:0 0 7px}
.field>small{display:block;color:var(--muted);font-size:13.5px;margin-top:6px}
.input,.field input,.field select,.field textarea{width:100%;font:inherit;font-size:16px;padding:12px 14px;border-radius:2px;border:1px solid rgba(43,31,26,.28);background:#fff;color:var(--ink);transition:border-color .2s,box-shadow .2s}
.field textarea{min-height:120px;resize:vertical}
.input:focus,.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--espresso);box-shadow:0 0 0 3px rgba(198,161,91,.45)}
.field .err{color:#9a3416;font-size:14px;margin-top:6px;display:none}
.field.invalid input,.field.invalid textarea{border-color:#b8441f}
.field.invalid .err{display:block}
.alert{padding:14px 16px;border-radius:2px;background:var(--ivory);border:1px solid var(--wall-line);font-size:15px;margin:0 0 18px}
.alert.error{background:#fbe9e3;border-color:#efc0b0;color:#7d2a14}
.alert.ok{background:#f3ead9;border-color:#e2cfa5;color:#4f3b14}

/* sitekit legal/auth pages inherit the brand */
.sk-legal h1,.sk-card h1{font-family:var(--serif);font-weight:500}
.sk-legal{padding-top:clamp(56px,8vw,100px)}
.sk-card{background:var(--ivory)}
.sk-btn{border-radius:2px;box-shadow:inset 0 0 0 3px var(--espresso),inset 0 0 0 4px var(--gold)}
.sk-btn.sk-ghost,.sk-btn.sk-danger{box-shadow:none}
.sk-btn.sk-ghost{border-color:var(--gold-dk)}
.sk-flashes .sk-alert{background:var(--ivory)}

/* toast */
.toast{position:fixed;left:16px;right:16px;bottom:var(--toast-bottom,calc(24px + env(safe-area-inset-bottom)));margin:0 auto;width:fit-content;max-width:560px;transform:translateY(30px);opacity:0;z-index:90;background:var(--espresso);color:var(--ivory);padding:13px 20px;border-radius:2px;font-weight:600;font-size:15px;line-height:1.4;box-shadow:var(--shadow-2),inset 0 0 0 3px var(--espresso),inset 0 0 0 4px var(--gold);transition:opacity .35s var(--ease),transform .35s var(--ease);pointer-events:none;text-align:center;text-wrap:pretty}
.toast.show{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .js .hero .hf-in,.js .hero .hero-placard{animation:none!important}
  .hf{transform:none!important}
}
@media print{
  .site-header,.site-footer,.xmas-bar,.sk-demo-banner,.no-print{display:none!important}
  body{background:#fff}
}
@media (max-width:700px){
  .car-ctrls{flex-direction:column-reverse;align-items:flex-start;gap:14px}
  .car-btns{width:100%;justify-content:flex-end;align-items:center}
  .car-dots{margin-right:auto}
  .exhibit{flex-direction:column;align-items:flex-start}
}