/* ============================================================
   INKED BY BHATTI'S — Design system
   Concept: brand colour lives in the chrome (header/footer);
   the body is a neutral gallery so the prints carry the colour.
   ============================================================ */
:root{
  --plum:#2E1325;        /* logo artwork, sampled */
  --plum-800:#3A1A2E;
  --plum-700:#4A2740;
  --crimson:#EB1E45;     /* logo accent / the drop */
  --crimson-ink:#C4102F; /* darker crimson for on-light text (AA) */
  --ink:#1E1016;         /* body text, warm near-black */
  --rag:#FBFAF8;         /* warm fine-art paper white */
  --gallery:#F2F1EF;     /* cool gallery grey */
  --mat:#E8E6E2;         /* mat board */
  --line:#DAD8D4;        /* hairline */
  --muted:#6E6B68;       /* secondary text (AA on rag) */
  --muted-2:#928F8B;
  /* Secondary text taken a step towards the body text, for bands painted darker
     than the paper, where plain --muted falls under 4.5:1. Mixed from the two
     tokens, so a change to either in the admin carries through. */
  --muted-deep:color-mix(in srgb,var(--muted) 80%,var(--ink));
  --white:#FFFFFF;
  --star:#FFBF00;      /* rating gold, sampled from inked.pk */

  --maxw:1240px;
  --gut:clamp(20px,5vw,64px);

  /* radius scale — one ladder, used everywhere */
  /* Images are square-cornered everywhere, like a print on a wall — the
     radius tokens below are for controls and panels only, never pictures.
     --img-mat is the one white margin a picture gets inside its frame. */
  --img-mat:6px;
  --r-xs:6px;    /* controls */
  --r-sm:10px;   /* plates, inputs, thumbnails */
  --r-md:14px;   /* cards */
  --r-lg:18px;   /* panels, tables, CTA blocks */
  --r-pill:100px;

  /* border roles — never mixed */
  --bd-card:var(--mat);   /* anything that behaves like a card */
  --bd-rule:var(--line);  /* structural hairlines & dividers */

  --f-disp:"Roboto Slab",Rockwell,Georgia,serif;              /* slab — echoes the logo's Egyptian caps */
  --f-body:"Roboto",Helvetica,Arial,system-ui,sans-serif;     /* grotesque — echoes "by Bhatti's" */
  --f-mono:"Roboto Mono","SFMono-Regular",monospace;          /* in-family spec voice */

  /* Set from the admin (Design → Typography). Defined here as well so the site
     renders correctly on its own, with no theme stylesheet present. */
  --text-base:17px;   /* body copy */
  --type-scale:1;     /* multiplies the heading sizes below */

  --ease:cubic-bezier(.2,.7,.2,1);

  /* ---- MOTION ----------------------------------------------------------
     Principle: "paper moves slowly." Motion here should feel like handling
     a print — weighted, settled, decelerating. No bounce, no overshoot,
     no spring. Nothing draws attention to itself.                        */
  --t-fast:.22s;      /* state changes: hover, focus, toggles   */
  --t-med:.42s;       /* panels, accordions, cross-fades        */
  --t-slow:.72s;      /* entrances: reveals, hero choreography  */
  --e-out:cubic-bezier(.22,.68,.24,1);    /* decelerate — the house curve */
  --e-soft:cubic-bezier(.4,0,.2,1);       /* symmetrical, for two-way UI  */
  --stagger:70ms;     /* delay between siblings in a group      */
  --hero-dur:7s;      /* hero banner dwell time (read by JS too) */
  --review-dur:7.5s;  /* testimonial dwell time (read by JS too)  */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--rag);color:var(--ink);
  font-family:var(--f-body);font-size:var(--text-base);line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
/* Images carry width/height attributes so the browser can reserve space before
   they load. height:auto keeps those attributes a hint only for layout, while
   the browser still reads the pair for the aspect ratio — which is what lets a
   gallery work reserve its own shape without a fixed aspect-ratio rule. */
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
h1,h2,h3,h4{margin:0;font-family:var(--f-disp);font-weight:700;line-height:1.06;letter-spacing:-.02em}
p{margin:0}

/* The page column. Layout (css/layout.css, from the admin) can set the width,
   each side's padding and a cap on the margins through these properties; with
   none set they fall back to the design's own values exactly. --mmax is the
   largest the empty space either side may grow to — unset, it never applies. */
.wrap{max-width:max(var(--maxw),min(calc(100% - 2 * var(--mmax,100vw)),var(--wrap-ceiling,1920px)));margin:0 auto;
  padding-left:var(--pad-l,var(--gut));padding-right:var(--pad-r,var(--gut))}
main .wrap{max-width:max(var(--content-w,var(--maxw)),min(calc(100% - 2 * var(--mmax,100vw)),var(--wrap-ceiling,1920px)))}
/* A column with its margin cap switched off grows with the screen, but not past
   1920px: on an ultra-wide monitor it stays centred instead of running from
   one edge of a 3440px screen to the other. The width set in Layout is never
   reduced by this. */
/* Anything placed past the screen edge on purpose — a bleed, an offset — is
   cut at the edge rather than making the page scroll sideways. clip, not
   hidden, so it is not a scroll box and sticky sections still stick. */
main#app{overflow-x:clip}
/* The rhythm follows the screen's height as well as its width: on a short
   window (a laptop with its browser bars and scaling, a phone held sideways)
   the space between sections tightens with it. On a tall enough screen the
   height terms are larger than the width ones and change nothing — the
   design's own values hold. See VIEWPORT SYSTEM at the end. */
.section{padding-top:var(--sec-pt,clamp(min(64px,8vh),min(9vw,14vh),124px));padding-bottom:var(--sec-pb,clamp(min(64px,8vh),min(9vw,14vh),124px))}
/* Space between sections, from Layout. Weightless, so a section's own
   margin always wins. */
:where(main .page > [data-l] + [data-l]){margin-top:var(--sec-gap,0px)}
.section--tight{padding-block:clamp(48px,6vw,80px)}

/* ---------- shared eyebrow: the crimson "tick" = logo's red bar --------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin:0 0 22px;
}
.eyebrow::before{content:"";width:26px;height:3px;background:var(--crimson);flex:none}

.h-xl{font-size:clamp(calc(2.2rem*var(--type-scale)),calc(min(5.3vw,9vh)*var(--type-scale)),calc(4.2rem*var(--type-scale)));letter-spacing:-.032em;font-weight:800;line-height:1.05}
.h-lg{font-size:clamp(calc(1.75rem*var(--type-scale)),calc(3.7vw*var(--type-scale)),calc(2.75rem*var(--type-scale)));letter-spacing:-.027em;font-weight:700}
.h-md{font-size:clamp(calc(1.35rem*var(--type-scale)),calc(2.3vw*var(--type-scale)),calc(1.85rem*var(--type-scale)));letter-spacing:-.02em;font-weight:700}
.lede{font-size:clamp(1.05rem,1.5vw,1.28rem);color:var(--muted);max-width:var(--measure,56ch);line-height:1.55}
.drop{color:var(--crimson)} /* the crimson dot */

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;border:1px solid transparent;
  padding:14px 24px;border-radius:var(--r-pill);font-weight:600;font-size:15px;
  letter-spacing:-.01em;transition:transform .3s var(--ease),background .3s,color .3s,border-color .3s;
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--plum);color:#fff}
.btn--primary:hover{background:var(--plum-700)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--plum);background:var(--plum);color:#fff}
/* White on the logo crimson is 4.4:1, just under the 4.5:1 a 15px label needs.
   A tenth of the darker crimson brings it to 4.5 without a visible change. */
.btn--drop{background:color-mix(in srgb,var(--crimson) 88%,var(--crimson-ink));color:#fff}
.btn--drop:hover{background:var(--crimson-ink)}
.btn .arrow{transition:transform .3s var(--ease)}
.btn:hover .arrow{transform:translateX(4px)}

/* ============================================================
   HEADER  (brand plum — colour lives here)
   ============================================================ */
/* Every value the admin's Header settings can change is read through a custom
   property whose fallback is the design's own value, so with nothing set the
   header is exactly as designed. */
.topbar{
  background:var(--hdr-bg,var(--plum));color:#fff;position:sticky;top:0;z-index:200;
  border-bottom:1px solid var(--hdr-bd,rgba(255,255,255,.08));
}
.topbar::before{content:"";display:block;height:var(--hdr-bar-h,3px);background:var(--hdr-bar,var(--crimson))} /* logo red bar */
.nav{display:flex;align-items:center;gap:var(--hdr-gap,26px);height:var(--hdr-h,74px)}
/* ---- ORIGINAL LOGO ARTWORK (never re-typeset) ----
   Aspect ratio locked at 3.058:1. Clear space = 0.5x logo height on all sides. */
.brand{display:inline-flex;align-items:center;margin-right:var(--logo-gap,6px);flex:none}
.brand img{height:var(--logo-h,42px);width:auto;display:block}
.brand .brand-dark{display:none}
.footer .brand img{height:var(--ftr-logo-h,46px)}
.brand:focus-visible{outline:2px solid var(--crimson);outline-offset:6px;border-radius:4px}
@media(min-width:821px) and (max-width:1040px){.brand img{height:var(--logo-h-t,var(--logo-h,42px))}}
@media(max-width:820px){.brand img{height:var(--logo-h-m,32px)}}
.nav-links{display:flex;align-items:center;gap:var(--nav-gap,4px);margin-left:auto}
.nav-links a,.nav-links button{
  color:var(--nav-fg,rgba(255,255,255,.82));background:none;border:0;font-size:var(--nav-fs,15px);font-weight:500;
  padding:10px var(--nav-px,14px);border-radius:var(--r-xs);position:relative;transition:color .25s,background .25s;
}
.nav-links a:hover,.nav-links button:hover{color:var(--nav-fg-h,#fff);background:rgba(255,255,255,.06)}
.nav-links .mega-trigger{display:inline-flex;align-items:center;gap:6px}
.nav-links .mega-trigger .chev{width:14px;height:14px}
/* The mega trigger is a real link in the built site, so these match either tag. */
.nav-links [aria-expanded="true"]{color:var(--nav-fg-h,#fff);background:rgba(255,255,255,.06)}
.nav-links [aria-expanded="true"] .chev{transform:rotate(180deg)}
.has-mega{display:inline-flex}
.nav-links a.active{color:var(--nav-fg-h,#fff)}
.nav-links a.active::after{content:"";position:absolute;left:var(--nav-px,14px);right:var(--nav-px,14px);bottom:4px;height:2px;background:var(--nav-line,var(--crimson));border-radius:2px}
/* where the menu sits between the logo and the button */
.hdr--nav-left .nav-links{margin-left:0;margin-right:auto}
.hdr--nav-center .nav-links{margin-inline:auto}
/* a header that scrolls away with the page instead of staying on top */
.topbar.hdr--static{position:relative}
/* A transparent header takes the page's own colour until the page scrolls, and
   switches to the dark logo and dark text while it does. On a phone the menu
   button follows; the open menu keeps its plum panel. */
.hdr--transparent:not(.compact){background:transparent;border-bottom-color:transparent}
.hdr--transparent:not(.compact) .brand-light{display:none}
.hdr--transparent:not(.compact) .brand .brand-dark{display:block}
.hdr--transparent:not(.compact) .hamb{color:var(--hdr-t-fg,var(--ink))}
/* …but once the menu is open it sits on the plum panel, where the dark
   button that closes it would all but disappear. */
.hdr--transparent .nav:has(.nav-links.mobile-open) .hamb{color:#fff}
.hdr--transparent:has(.nav-links.mobile-open):not(.compact){background:var(--hdr-bg,var(--plum))}
.hdr--transparent:has(.nav-links.mobile-open):not(.compact) .brand-light{display:block}
.hdr--transparent:has(.nav-links.mobile-open):not(.compact) .brand .brand-dark{display:none}
@media(min-width:821px){
  .hdr--transparent:not(.compact) .nav-links a,.hdr--transparent:not(.compact) .nav-links button{color:var(--hdr-t-fg,var(--ink))}
  .hdr--transparent:not(.compact) .nav-links a:hover,.hdr--transparent:not(.compact) .nav-links button:hover{background:rgba(46,19,37,.06)}
}
.nav-cta{margin-left:8px}
.nav-cta .btn{padding:11px 20px;font-size:14px}
.hamb{display:none;margin-left:auto;background:none;border:0;color:#fff;padding:8px;position:relative;z-index:190}
.hamb svg{width:26px;height:26px}

/* mega dropdown */
.has-mega{position:static}
.mega{
  position:absolute;left:0;right:0;top:100%;background:var(--rag);color:var(--ink);
  border-top:1px solid var(--line);box-shadow:0 30px 60px -30px rgba(46,19,37,.35);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s;z-index:190;
}
.mega.open{opacity:1;visibility:visible;transform:translateY(0)}
.mega-inner{display:grid;grid-template-columns:repeat(4,1fr) .95fr;gap:34px;padding:38px var(--pad-r,var(--gut)) 42px var(--pad-l,var(--gut))}
.mega-col-title{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin:0 0 16px;font-weight:700}
.mega-item{display:flex;gap:12px;align-items:flex-start;padding:9px 0;border-top:1px solid var(--bd-card)}
.mega-item:first-of-type{border-top:0}
.mega-thumb{width:44px;height:44px;border-radius:0;flex:none;overflow:hidden;position:relative;border:1px solid var(--bd-card);background:var(--mat)}
.mega-thumb img,.mega-thumb .thumb-art{width:100%;height:100%;object-fit:cover;display:block}
.mega-item b{display:block;font-weight:600;font-size:14.5px;font-family:var(--f-body)}
.mega-item span{display:block;font-family:var(--f-mono);font-size:11px;color:var(--muted-2);margin-top:2px}
.mega-item:hover b{color:var(--crimson-ink)}
.mega-feature{background:var(--plum);color:#fff;border-radius:0;padding:24px;display:flex;flex-direction:column;justify-content:space-between}
/* an optional photograph behind the promo. The plum wash is what keeps the
   white text legible, so it stays even over a dark picture. */
.mega-feature.has-photo{position:relative;overflow:hidden;isolation:isolate}
.mega-feature-bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;
  object-fit:cover;object-position:center 42%}
.mega-feature.has-photo::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(160deg,rgba(46,19,37,.94) 0%,rgba(46,19,37,.82) 46%,rgba(46,19,37,.66) 100%)}
.mega-feature .eyebrow{color:rgba(255,255,255,.65)}
.mega-feature .eyebrow::before{background:var(--crimson)}
/* Was an h4, so it needs the display face and weight the heading rule gave it.
   Written as .mega-feature p.mega-feature-title rather than the class alone
   because .mega-feature p below is more specific and would otherwise win —
   which it did, and shrank this to body size until the check caught it. */
.mega-feature p.mega-feature-title{font-family:var(--f-disp);font-weight:700;
  font-size:1.35rem;line-height:1.06;letter-spacing:-.02em;color:#fff;margin:0 0 8px}
.mega-feature p{font-size:13.5px;color:rgba(255,255,255,.7);margin-bottom:18px}
.mega-feature .btn{align-self:flex-start}

/* ============================================================
   ART PLATES (the "prints" — colour is allowed here; it's artwork)
   ============================================================ */
/* A plate is the frame: a hairline and a thin white mat, square at every
   corner. It used to be a rounded card with 14px of padding, which made every
   picture on the site smaller than its own frame. */
.plate{position:relative;background:var(--white);border:1px solid var(--bd-card);border-radius:0;
  padding:var(--img-mat);box-shadow:0 1px 0 rgba(0,0,0,.02);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.plate-art{position:relative;border-radius:0;overflow:hidden;aspect-ratio:4/5;background:var(--mat)}
.plate-art img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0}
/* Grain belongs to the generated colour fields only. Laid over a real
   photograph it changed the picture itself, so it stops where an image is. */
.plate-art::after{content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.14) .5px,transparent .5px);
  background-size:3px 3px;mix-blend-mode:overlay;opacity:.5}
/* A real photograph never takes the grain — including one wrapped in a
   <picture> for a phone-specific banner, which :has(> img) missed. */
.plate-art:has(img)::after{content:none}
.plate-cap{display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding:0 3px 2px}
.plate-cap b{font-family:var(--f-body);font-weight:600;font-size:14px}
.plate-cap span{font-family:var(--f-mono);font-size:10.5px;color:var(--muted-2);letter-spacing:.02em}
/* Lifts straight up. The old quarter-degree tilt skewed the square edges. */
.lift:hover .plate{transform:translateY(-8px);box-shadow:0 40px 60px -34px rgba(46,19,37,.4)}

/* ---------- trust pill (pre-headline badge) ---------- */
.pill{display:inline-flex;align-items:center;gap:9px;background:var(--white);
  border:1px solid var(--bd-card);border-radius:var(--r-pill);padding:8px 18px 8px 13px;
  font-family:var(--f-body);font-size:13.5px;font-weight:500;color:var(--ink);
  line-height:1.35;box-shadow:0 1px 2px rgba(46,19,37,.045);margin-bottom:24px}
.pill svg{width:16px;height:16px;flex:none;stroke:var(--crimson);fill:none;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:560px){
  .pill{font-size:12.5px;padding:7px 15px 7px 11px;gap:8px;margin-bottom:20px}
  .pill svg{width:15px;height:15px}
}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;padding-top:clamp(min(48px,6vh),min(6vw,10vh),88px);padding-bottom:clamp(min(40px,5vh),min(5vw,8vh),64px)}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(28px,4vw,64px);align-items:center}
.hero h1{margin:0}
/* Roboto Slab ships no italic, so display emphasis is made with WEIGHT,
   never font-style — that would trigger an ugly synthesised oblique. */
.hero h1 em{font-style:normal;font-weight:400}
.hero .lede{margin-top:26px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.hero-plate{max-width:430px;margin-left:auto;width:100%;position:relative}
.hero-plate::before{content:"";position:absolute;top:-18px;right:-16px;width:58px;height:66px;
  background:var(--crimson);border-radius:60% 60% 55% 55%/70% 70% 50% 50%;transform:rotate(12deg)}
/* Hung straight. The crimson drop still peeks out from behind the corner — the
   plate sits above it, so it never covers any of the picture. */
.hero-plate .plate{position:relative;z-index:1}

/* trust strip — measured from reference:
   rules run FULL BLEED, cells sit in the content column with interior
   dividers only (no divider on the outer edges), ~39px above the number
   and ~16px between number and label. */
.trust{margin-top:clamp(40px,5vw,72px);
  border-top:1px solid var(--bd-rule);border-bottom:1px solid var(--bd-rule)}
.trust-inner{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:transparent}
.trust-cell{background:transparent;text-align:left;
  padding:clamp(28px,3vw,39px) 22px clamp(28px,3vw,39px) 0}
/* divider sits between cells only — first cell stays flush with the page grid */
.trust-cell + .trust-cell{border-left:1px solid var(--bd-rule);padding-left:26px}
.trust-cell .n{font-family:var(--f-disp);font-size:clamp(1.45rem,2.1vw,1.95rem);font-weight:800;
  line-height:1.05;letter-spacing:-.025em;color:var(--ink);display:block}
.trust-cell .l{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;color:var(--muted-2);
  text-transform:uppercase;margin-top:16px;display:block;line-height:1.55}

/* ============================================================
   SECTION HEADS
   ============================================================ */
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:var(--head-gap,clamp(30px,4vw,52px))}
.sec-head .lede{margin-top:14px}
.bg-gallery{background:var(--gallery)}
.bg-ink{background:var(--ink);color:#fff}

/* ---------- Artist carousel — manual, arrow-driven ----------
   Native horizontal scroll rather than a transform: touch swipe, trackpad and
   keyboard all work for free, and the arrows simply drive scrollBy().
   NOTE: no width:max-content here — with box-sizing:border-box that squeezes
   flex children in Firefox. Cards are flex:0 0 auto and overflow naturally. */
.carousel{position:relative;overflow-x:auto;overflow-y:hidden;
  padding-block:14px 20px;                       /* room for the hover lift + shadow */
  scroll-snap-type:x proximity;
  scroll-padding-left:var(--pad-l,var(--gut));
  scrollbar-width:none;-ms-overflow-style:none}
.carousel::-webkit-scrollbar{display:none}
.carousel:focus-visible{outline:2px solid var(--plum);outline-offset:-2px}
.rail{display:flex;gap:22px;
  padding-left:var(--pad-l,var(--gut));
  padding-right:var(--pad-r,var(--gut))}

/* ---- artists: vertical scroll drives the rail sideways ----
   Only where it can be done well: the stage has to be shorter than the screen
   to stick, a touch swipe already moves this rail directly, and taking over the
   scroll is exactly what someone asking for reduced motion does not want. The
   sticky offset clears the header, which sticks at the top of the page too. */
@media (min-width:821px) and (min-height:600px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .art-stage{position:sticky;top:var(--pin-top,77px);display:flex;flex-direction:column;
    justify-content:center;min-height:calc(100vh - var(--pin-top,77px))}
  /* In a column flexbox the page column's auto margins shrink it to its text and
     centre it, which set the heading ~230px further in than every other section.
     Full width, it lines up with them. */
  .art-stage > .wrap{width:100%}
  /* pinned, the rail is moved by transform, so the element itself must not scroll */
  .carousel.is-pinned{overflow:hidden;scroll-snap-type:none}
  .carousel.is-pinned .rail{will-change:transform}
  .carousel.is-pinned .a-card{scroll-snap-align:none}
}

/* The way out of the section travels with the rail, as its last item, so it
   arrives when the last artist does. Centred against the cards, and only as
   wide as the button needs. */
.a-end{flex:0 0 auto;display:flex;align-items:center;padding-inline:clamp(6px,1vw,18px)}

/* This section is taller than the others — it holds the screen while the rail
   passes — so it needs less padding around it than the standard rhythm, not
   more. */
/* Painted in the hairline grey, a step darker than the gallery grey the other
   alternating bands use, so the white plates lift off it. Referencing the token
   rather than the literal keeps the admin's Design section in control of it. */
.section--artists{background:var(--line);padding-block:clamp(34px,4.6vw,68px);
  --muted:var(--muted-deep);--muted-2:var(--muted-deep)}   /* grey text stays readable on the darker band */

/* arrows — kept for any other carousel that wants them */
.carousel-nav{display:flex;gap:8px}
/* The artists' arrows: for a mouse, while the page scroll is not moving the
   rail. A touch screen swipes it, and once pinned the page scroll does. */
.art-nav{display:none}
@media (hover:hover) and (pointer:fine){
  .art-nav{display:flex}
  .art-stage:has(.carousel.is-pinned) .art-nav{display:none}
}
.cbtn{width:46px;height:46px;border-radius:50%;border:1px solid var(--bd-rule);background:var(--white);
  display:grid;place-items:center;color:var(--ink);
  transition:background var(--t-fast) var(--e-soft),color var(--t-fast) var(--e-soft),
             border-color var(--t-fast) var(--e-soft),opacity var(--t-fast) var(--e-soft)}
.cbtn:hover:not(:disabled){background:var(--plum);color:#fff;border-color:var(--plum)}
.cbtn:disabled{opacity:.32;cursor:default}
.cbtn svg{width:18px;height:18px}

/* --a-card-w is set by the page script only on a screen too short for the
   full-size cards (see initArtistPin); everywhere else the design's size holds */
.a-card{flex:0 0 var(--a-card-w,clamp(260px,26vw,340px));min-width:0;scroll-snap-align:start}
.a-card .plate-art{aspect-ratio:3/4}
.a-meta{display:flex;align-items:center;gap:12px;margin-top:16px}
.a-avatar{width:38px;height:38px;border-radius:0;overflow:hidden;flex:none;display:grid;place-items:center;
  font-family:var(--f-disp);font-weight:700;color:#fff;font-size:14px}
.a-meta b{display:block;font-weight:600;font-size:19px;font-family:var(--f-body);line-height:1.25}
.a-meta span{display:block;font-family:var(--f-mono);font-size:11px;color:var(--muted);letter-spacing:.04em}

/* ---------- Paper row ---------- */
.paper-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.paper-card .plate-art{aspect-ratio:1/1}
.paper-card h3{font-family:var(--f-body);font-size:15px;font-weight:600;margin-top:14px}
.paper-card .spec{font-family:var(--f-mono);font-size:11px;color:var(--muted);margin-top:3px;letter-spacing:.02em}

/* ---------- Why cards ---------- */
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.why-card{background:var(--white);border:1px solid var(--bd-card);border-radius:var(--r-md);padding:28px 24px;
  transition:transform .35s var(--ease),border-color .35s}
.why-card:hover{transform:translateY(-4px);border-color:var(--plum)}
.why-ico{width:46px;height:46px;border-radius:var(--r-sm);border:1px solid var(--bd-rule);display:grid;place-items:center;margin-bottom:20px}
.why-ico svg{width:23px;height:23px;stroke:var(--plum);fill:none;stroke-width:1.6}
.why-card h3{font-family:var(--f-body);font-size:17px;font-weight:600}
.why-card p{color:var(--muted);font-size:14.5px;margin-top:9px;line-height:1.5}
.why-num{font-family:var(--f-mono);font-size:11px;color:var(--crimson-ink);letter-spacing:.1em;display:block;margin-bottom:14px}

/* ---------- FAQ accordion ---------- */
.faq-list{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;text-align:left;background:none;border:0;padding:26px 0;display:flex;
  justify-content:space-between;gap:24px;align-items:center;font-family:var(--f-disp);
  font-weight:600;font-size:clamp(1.05rem,1.7vw,1.32rem);color:var(--ink);letter-spacing:-.015em}
.faq-q .pm{flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;position:relative;transition:.3s}
.faq-q .pm::before,.faq-q .pm::after{content:"";position:absolute;background:var(--ink);transition:.3s}
.faq-q .pm::before{width:12px;height:1.5px}
.faq-q .pm::after{height:12px;width:1.5px}
.faq-item.open .pm{background:var(--crimson);border-color:var(--crimson)}
.faq-item.open .pm::before,.faq-item.open .pm::after{background:#fff}
.faq-item.open .pm::after{transform:scaleY(0)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.faq-a p{color:var(--muted);padding-bottom:26px;max-width:70ch;font-size:15.5px}

/* ---------- pre-footer CTA (the "before footer" inspiration) ---------- */
.cta-band .steps{display:grid;grid-template-columns:repeat(3,1fr) 1.1fr;gap:0;
  border:1px solid var(--bd-card);border-radius:var(--r-lg);background:var(--white);overflow:hidden}
.step{padding:34px 30px;border-right:1px solid var(--bd-card);text-align:center}
.step:last-child{border-right:0}
.step-ico{width:52px;height:52px;border-radius:50%;background:var(--gallery);display:grid;place-items:center;margin:0 auto 18px}
.step-ico svg{width:24px;height:24px;stroke:var(--plum);fill:none;stroke-width:1.6}
.step h3{font-family:var(--f-body);font-weight:600;font-size:16px}
.step p{color:var(--muted);font-size:13.5px;margin-top:8px;line-height:1.45}
.step .k{font-family:var(--f-mono);font-size:11px;color:var(--crimson-ink);letter-spacing:.1em;display:block;margin-bottom:12px}
.step--cta{background:var(--plum);color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center}
.step--cta p{color:rgba(255,255,255,.72);margin-bottom:16px}

/* ============================================================
   FOOTER (brand plum — colour lives here)
   ============================================================ */
/* As with the header: each value the admin's Footer settings can change falls
   back to the design's own. */
.footer{background:var(--ftr-bg,var(--plum));color:var(--ftr-fg,rgba(255,255,255,.72));padding-top:var(--ftr-pt,clamp(56px,7vw,88px))}
.footer::before{content:"";display:block;height:var(--ftr-bar-h,3px);background:var(--ftr-bar,var(--crimson));margin-bottom:var(--ftr-pt,clamp(56px,7vw,88px))}
.footer-top{display:grid;grid-template-columns:var(--ftr-cols,1.5fr 1fr 1fr 1fr);gap:var(--ftr-gap,40px);padding-bottom:56px}
/* the brand block on a row of its own, the columns beneath it */
.ftr--stacked .footer-brand{grid-column:1/-1}
.ftr--center .footer-top,.ftr--center .footer-bottom{text-align:center;justify-content:center}
.ftr--center .footer .brand,.ftr--center .brand{margin-inline:auto;justify-content:center}
.ftr--center .newsletter,.ftr--center p.about{margin-inline:auto}
.ftr--center .social{justify-content:center}
/* social links: line icons in the link colour */
.social{display:flex;flex-wrap:wrap;gap:10px}
.social a{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  border:1px solid rgba(255,255,255,.18);color:var(--ftr-link,rgba(255,255,255,.72));transition:.2s}
.social a:hover{color:var(--ftr-link-h,#fff);border-color:currentColor}
.social svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.footer .brand{margin-bottom:22px}
.footer p.about{max-width:34ch;font-size:14.5px;line-height:1.55}
.newsletter{margin-top:24px;display:flex;flex-wrap:wrap;gap:8px;max-width:340px}
.newsletter .nl-consent{flex-basis:100%;display:flex;gap:8px;align-items:flex-start;font-size:12.5px;line-height:1.45;color:var(--ftr-fg,rgba(255,255,255,.72))}
.newsletter .nl-consent a{color:inherit;text-decoration:underline}
.newsletter .nl-note{flex-basis:100%;margin:2px 0 0;font-size:13px;color:#fff}
/* A field people cannot see, for spam robots to fill in. Kept out of the
   layout and out of reach of the keyboard and screen readers. */
.hp{position:absolute !important;left:-9999px;width:1px;height:1px;opacity:0}
.newsletter input{flex:1;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  color:#fff;border-radius:var(--r-pill);padding:12px 18px;font-family:inherit;font-size:14px}
.newsletter input::placeholder{color:rgba(255,255,255,.5)}
.newsletter button{background:var(--crimson);border:0;color:#fff;border-radius:var(--r-pill);padding:0 20px;font-weight:600;font-size:14px}
.newsletter button:hover{background:#fff;color:var(--plum)}
.fcol-title{color:var(--ftr-head,#fff);font-family:var(--f-mono);font-size:var(--ftr-head-fs,11px);letter-spacing:.16em;text-transform:uppercase;margin:0 0 18px;font-weight:700}
.fcol a,.fcol span{display:block;padding:7px 0;font-size:var(--ftr-fs,14.5px);color:var(--ftr-link,rgba(255,255,255,.72));transition:.2s}
.fcol a:hover{color:var(--ftr-link-h,#fff);padding-left:6px}
/* studio address lines are information, not navigation */
.fcol span{color:rgba(255,255,255,.6)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:26px 0 34px;border-top:1px solid rgba(255,255,255,.1);font-family:var(--f-mono);
  font-size:11.5px;letter-spacing:.03em;color:rgba(255,255,255,.55);flex-wrap:wrap}
.badge19{display:inline-flex;align-items:center;gap:8px;color:#fff}
.badge19 .drop-mini{width:8px;height:9px;background:var(--crimson);border-radius:60% 60% 55% 55%/70% 70% 50% 50%}

/* ============================================================
   PAGE-SPECIFIC
   ============================================================ */
.page{display:none}
.page.active{display:block}   /* transition lives in the motion library below */

/* Top and bottom only. The shorthand used to zero the sides as well, which
   cancelled .wrap's page margin on every page header: 64px out of line with the
   logo and the content on desktop, and against the screen edge on a phone. */
.page-head{padding-block:clamp(min(52px,7vh),min(6vw,10vh),88px) clamp(min(30px,4.5vh),4vw,48px);border-bottom:1px solid var(--line)}
.page-head .h-xl{margin-top:12px}
.page-head .lede{margin-top:22px}

/* About */
.about-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.about-grid .plate-art{aspect-ratio:3/4}
.pillar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--bd-rule);border-radius:var(--r-lg);overflow:hidden}
.pillar{padding:36px 30px;border-right:1px solid var(--line)}
.pillar:last-child{border-right:0}
.pillar .k{font-family:var(--f-mono);font-size:11px;color:var(--crimson-ink);letter-spacing:.1em}
.pillar h3{font-family:var(--f-disp);font-size:1.35rem;margin:16px 0 12px;font-weight:700;letter-spacing:-.02em}
.pillar p{color:var(--muted);font-size:14.5px;line-height:1.55}
.quote-band{text-align:center;padding-block:clamp(56px,8vw,110px)}
.quote-band blockquote{font-family:var(--f-disp);font-weight:600;font-size:clamp(1.45rem,3.1vw,2.4rem);
  line-height:1.22;letter-spacing:-.02em;max-width:20ch;margin:0 auto;font-style:normal}
.quote-band cite{display:block;font-style:normal;font-family:var(--f-mono);font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-top:28px}

/* Services grid */
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px 12px}
.svc-card .k{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);text-align:center;display:block;margin-bottom:14px}
.svc-card .plate-art{aspect-ratio:1/1}
.svc-card h3{font-family:var(--f-body);text-align:center;font-size:15px;font-weight:600;margin-top:15px}
.svc-card .price{font-family:var(--f-mono);font-size:11px;color:var(--muted);text-align:center;display:block;margin-top:4px}

/* ============================================================
   TESTIMONIALS — arc roster + quote
   ============================================================ */
.t-title{text-transform:uppercase;letter-spacing:.02em;font-size:clamp(1.9rem,4vw,3rem)}
.title-rule{display:block;width:50px;height:3px;background:var(--plum);margin:22px auto 0}

.treview{display:grid;grid-template-columns:minmax(280px,380px) 1fr;gap:clamp(28px,5vw,80px);align-items:center}

/* --- left: the roster, bowed along an arc --- */
.tsel-col{position:relative;min-height:400px;display:flex;align-items:center}
.tsel-arc{position:absolute;left:0;top:0;height:100%;width:150px;color:var(--bd-rule);pointer-events:none}
.tsel{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;width:100%;position:relative}
.tsel-item{transform:translateX(var(--bow,0)) scale(var(--scale,1));opacity:var(--fade,1);
  transform-origin:left center;
  transition:transform var(--t-med) var(--e-out),opacity var(--t-med) var(--e-out)}
.tsel-item.is-out{display:none}
.tsel-btn{display:flex;align-items:center;gap:14px;background:none;border:0;padding:6px 4px;
  text-align:left;width:100%}
.tsel-face{width:38px;height:38px;border-radius:50%;overflow:hidden;flex:none;display:grid;place-items:center;
  transition:width var(--t-med) var(--e-out),height var(--t-med) var(--e-out)}
.tsel-face img{width:100%;height:100%;object-fit:cover;display:block}
.tsel-mono{width:100%;height:100%;display:grid;place-items:center;color:#fff;
  font-family:var(--f-disp);font-weight:700;font-size:14px}
.tsel-text{min-width:0}
.tsel-text b{display:block;font-family:var(--f-body);font-weight:500;font-size:14px;
  color:var(--muted);letter-spacing:-.01em;transition:color var(--t-med) var(--e-soft),font-size var(--t-med) var(--e-out)}
.tsel-meta{display:flex;align-items:center;gap:8px;margin-top:3px;max-height:0;overflow:hidden;
  opacity:0;transition:max-height var(--t-med) var(--e-out),opacity var(--t-med) var(--e-out)}
.tsel-stars{display:flex;gap:2px}
.tsel-stars svg{width:11px;height:11px;fill:var(--star)}
.tsel-role{font-family:var(--f-mono);font-size:10px;color:var(--muted-2);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:20ch}
/* the active name: bigger face, darker type, details revealed */
.tsel-item.is-on .tsel-face{width:56px;height:56px}
.tsel-item.is-on .tsel-text b{color:var(--ink);font-size:16.5px;font-weight:600;font-family:var(--f-disp)}
.tsel-item.is-on .tsel-meta{max-height:20px;opacity:1}
.tsel-btn:hover .tsel-text b{color:var(--ink)}
.tsel-btn:focus-visible{outline:2px solid var(--crimson);outline-offset:3px;border-radius:0}

/* --- right: the quote, with a drop cap --- */
.tquote{display:grid;min-width:0}
.tq{grid-area:1/1;margin:0;opacity:0;visibility:hidden;
  transition:opacity var(--t-med) var(--e-out),visibility 0s linear var(--t-med)}
.tq.on{opacity:1;visibility:visible;transition-delay:0s}
.tq blockquote{margin:0;position:relative;padding-left:38px}
.tq blockquote::before{content:"\201C";position:absolute;left:0;top:2px;font-family:var(--f-disp);
  font-weight:700;font-size:2.6rem;line-height:1;color:var(--crimson)}
.tq blockquote p{font-size:clamp(1.02rem,1.5vw,1.24rem);line-height:1.62;color:var(--ink);max-width:52ch}
.tq blockquote p::first-letter{font-family:var(--f-disp);font-weight:700;font-size:2.9em;
  float:left;line-height:.82;margin:.06em .1em 0 0;color:var(--plum)}
.tq figcaption{margin-top:30px}
.tq-rule{display:block;width:44px;height:3px;background:var(--plum);margin-bottom:14px}
.tq figcaption b{display:block;font-family:var(--f-disp);font-weight:700;font-size:1.1rem;letter-spacing:-.01em}
.tq-role{display:block;font-size:13.5px;color:var(--muted);margin-top:5px}
.tq-role a{color:var(--crimson-ink);text-decoration:underline;text-underline-offset:3px}
.t-sep{display:inline-block;width:1px;height:11px;background:var(--bd-rule);vertical-align:middle}

/* --- controls --- */
.tcar-foot{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:clamp(26px,3vw,40px)}
.tcount{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.12em;color:var(--muted-2)}
/* dwell indicator — fills across while the current review is showing */
.tprog{display:block;width:78px;height:2px;background:var(--bd-rule);border-radius:2px;overflow:hidden}
.tprog-fill{display:block;height:100%;width:100%;background:var(--crimson);
  transform-origin:left;transform:scaleX(0)}
.is-playing .tprog-fill{animation:treviewfill var(--review-dur,6s) linear infinite}
@keyframes treviewfill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.tprog{display:none}}
.tcar-wrap{width:100%}

@media(max-width:900px){
  .treview{grid-template-columns:1fr;gap:34px}
  .tsel-col{min-height:0;justify-content:center}
  .tsel-arc{display:none}
  .tsel-item{transform:none;opacity:var(--fade,1)}
  .tq blockquote{padding-left:0}
  .tq blockquote::before{position:static;display:block;margin-bottom:-16px}
}

/* Paper page */
.paper-hero{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,60px);align-items:center}
.border-demo{display:grid;grid-template-columns:1fr 1fr;gap:18px}
/* square-cornered like the prints they show: a sheet of paper has no rounded corners */
/* a thin white frame, like the mat a print sits in: the picture fills the card */
.border-opt{background:var(--white);border:1px solid var(--bd-card);border-radius:0;padding:6px 6px 14px;text-align:center}
.border-frame{aspect-ratio:1/1;background:var(--gallery);display:grid;place-items:center;border-radius:0}
.border-inner{background:linear-gradient(135deg,#c9d4c0,#7a95a8);width:70%;height:70%;border-radius:0;overflow:hidden}
.border-inner img{display:block;width:100%;height:100%;object-fit:cover;border-radius:0}
.border-opt.b0 .border-inner{width:100%;height:100%}
.border-opt.b1 .border-inner{width:95%;height:95%}
.border-opt.b2 .border-inner{width:83%;height:83%}
.border-opt.b3 .border-inner{width:67%;height:67%}
.border-opt b{display:block;font-family:var(--f-body);font-weight:600;font-size:14px;margin-top:12px}
.border-opt span{font-family:var(--f-mono);font-size:11px;color:var(--muted)}
.paper-table{width:100%;border-collapse:collapse;font-size:14.5px}
.paper-table th{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);font-weight:700}
.paper-table td{padding:16px;border-bottom:1px solid var(--bd-card)}
.paper-table td:first-child{font-weight:600}
.paper-table tr:hover td{background:var(--gallery)}
.paper-table .mono{font-family:var(--f-mono);font-size:12.5px;color:var(--muted)}

/* ---- a paper, opened large: the library table's names open a window ---- */
.pt-open{display:inline-flex;align-items:center;gap:12px;padding:0;border:0;background:none;font:inherit;font-weight:600;
  color:inherit;text-align:left;cursor:pointer;min-height:40px}
.pt-open span:last-child{text-decoration:underline;text-decoration-color:var(--bd-card);text-underline-offset:4px;transition:text-decoration-color .2s}
.pt-open:hover span:last-child,.pt-open:focus-visible span:last-child{text-decoration-color:var(--crimson)}
.pt-open:focus-visible{outline:2px solid var(--crimson);outline-offset:4px}
.pt-sw{width:34px;height:34px;flex:none;border:1px solid var(--bd-card);border-radius:0}
.pt-sw.has-photo{overflow:hidden;background:var(--mat);padding:0}
.pt-sw.has-photo img{width:100%;height:100%;object-fit:cover;display:block}
/* "Quick view" at the end of each row: a quiet outline that fills on hover */
.paper-table th.pt-qv,.paper-table td.pt-qv{width:1%;white-space:nowrap;text-align:right}
.pt-qv-btn{font:500 12.5px/1 var(--f-body);letter-spacing:.02em;color:var(--ink);background:var(--white);
  border:1px solid var(--bd-card);border-radius:999px;padding:10px 16px;min-height:40px;cursor:pointer;
  transition:background .2s,color .2s,border-color .2s}
.pt-qv-btn:hover,.pt-qv-btn:focus-visible{background:var(--plum);border-color:var(--plum);color:var(--white)}
.pt-qv-btn:focus-visible{outline:2px solid var(--crimson);outline-offset:2px}
/* a phone keeps the name, weight and Quick view; the rest is one tap away */
@media (max-width:640px){
  .paper-table .pt-wide{display:none}
  .paper-table td,.paper-table th{padding:12px 8px}
  .paper-table td:first-child,.paper-table th:first-child{padding-left:12px}
  .paper-table td.pt-qv,.paper-table th.pt-qv{padding-right:12px}
  .paper-table td.mono{white-space:nowrap}
  .pt-open{gap:10px}
  .pt-sw{width:28px;height:28px}
  .pt-qv-btn{padding:9px 12px;font-size:12px}
}

/* The quick view: a window over the softly blurred page — the photograph
   shown like a print on its mat board on the left, the words on the right
   with a hairline list of the specifications, Previous and Next beneath
   them. On a phone the print sits on top and the window scrolls. */
.paper-dlg{border:0;padding:0;margin:auto;width:min(940px,calc(100vw - 32px));max-width:none;
  max-height:min(720px,calc(var(--vh-full,100vh) - 48px));background:transparent;color:var(--ink);overflow:visible}
.paper-dlg::backdrop{background:rgba(30,16,22,.48);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.pdlg-inner{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;
  max-height:min(720px,calc(var(--vh-full,100vh) - 48px));background:var(--white);overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(30,16,22,.55),0 0 0 1px rgba(30,16,22,.04)}
.pdlg-inner:focus{outline:none}
.pdlg-body{display:contents}
.pdlg-photo{grid-row:1 / span 2;grid-column:1;margin:0;background:var(--mat);display:grid;place-items:center;
  padding:clamp(22px,3.6vw,48px);min-height:0}
.pdlg-photo img,.pdlg-tex{display:block;width:100%;aspect-ratio:1/1;max-height:100%;object-fit:cover;
  box-shadow:0 1px 2px rgba(30,16,22,.12),0 14px 30px -14px rgba(30,16,22,.4)}
.pdlg-text{grid-column:2;grid-row:1;padding:clamp(26px,3.2vw,40px) clamp(24px,3.4vw,44px) 12px;display:grid;gap:10px;
  align-content:start;overflow:auto;min-height:0}
.pdlg-text .fam{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--crimson-ink)}
.pdlg-text h3{font-size:clamp(1.45rem,2.3vw,1.85rem);margin:0;font-weight:600;line-height:1.15;padding-right:40px;text-wrap:balance}
.pdlg-note{margin:0;color:var(--muted);font-size:14.5px;line-height:1.6;max-width:46ch}
.pdlg-specs{margin:4px 0 6px;border-top:1px solid var(--bd-card)}
.pdlg-specs > div{display:grid;grid-template-columns:7.5em minmax(0,1fr);gap:12px;padding:7px 0;border-bottom:1px solid var(--bd-card)}
.pdlg-specs dt{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding-top:3px}
.pdlg-specs dd{margin:0;font-size:14px;font-weight:500}
.pdlg-text .btn{justify-self:start;margin-top:4px}
.pdlg-close{position:absolute;top:12px;right:12px;z-index:2;width:40px;height:40px;border:0;border-radius:50%;
  background:transparent;color:var(--ink);font-size:26px;line-height:1;cursor:pointer;transition:background .2s}
.pdlg-close:hover{background:var(--gallery)}
.pdlg-nav{grid-column:2;grid-row:2;display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:0 clamp(24px,3.4vw,44px);padding:14px 0 18px;border-top:1px solid var(--bd-card)}
.pdlg-step{border:0;background:none;padding:8px 2px;min-height:40px;font:500 13px/1 var(--f-body);color:var(--ink);cursor:pointer}
.pdlg-step:hover{color:var(--crimson-ink)}
.pdlg-close:focus-visible,.pdlg-step:focus-visible{outline:2px solid var(--crimson);outline-offset:2px}
.pdlg-count{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.08em;color:var(--muted)}
@media (max-width:720px){
  .paper-dlg{width:calc(100vw - 24px);max-height:calc(var(--vh-full,100vh) - 24px)}
  .pdlg-inner{display:block;overflow:auto;max-height:calc(var(--vh-full,100vh) - 24px)}
  .pdlg-photo{padding:22px 22px 18px}
  .pdlg-photo img,.pdlg-tex{width:min(100%,46vh)}
  .pdlg-text{padding:20px 22px 10px;overflow:visible}
  .pdlg-nav{margin:0 22px;padding:12px 0 16px}
  .pdlg-close{background:rgba(255,255,255,.9)}
}
@media (prefers-reduced-motion:no-preference){
  .paper-dlg[open]{animation:pdlg-in .3s var(--ease,ease-out)}
  .paper-dlg[open]::backdrop{animation:pdlg-fade .3s ease-out}
  @keyframes pdlg-in{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
  @keyframes pdlg-fade{from{opacity:0}to{opacity:1}}
}

/* ============================================================
   ARTIST PAGE — featured hero + filterable roster grid
   ============================================================ */
/* ---- Featured Artists banner ----
   A gallery wall, not a row of cards: the artwork is the object, square-cornered
   on a thin white mat, and the words sit beneath it like a wall label. Every
   size comes from custom properties the banner writes for itself (see
   featuredBanner in app.js), per device, so these rules never change — only the
   numbers do.

   Nothing here can distort a picture. In the default "natural" mode the artwork
   keeps its own proportions and is only ever scaled down to fit the width and
   the height limit. A fixed shape shows the whole artwork inside it unless the
   studio explicitly chose to crop. */
/* The Artists page's opening section starts closer to the header than other
   sections; it carries the page title. (Was an inline style, which no layout
   setting could override.) */
.fa-section{padding-top:clamp(48px,6vw,80px)}
.fa{padding-block:var(--fa-outer);min-height:var(--fa-min-h)}
.fa-head{margin-bottom:var(--fa-head-gap)}
.fa-title{display:flex;align-items:center;gap:18px;margin:0;font-family:var(--f-disp);font-weight:600;
  font-size:clamp(1.3rem,2vw,1.7rem);line-height:1.2;letter-spacing:-.015em;color:var(--ink)}
.fa-head--left .fa-title::after{content:"";flex:1;height:1px;background:var(--bd-card);min-width:40px}
.fa-head--center{text-align:center}
.fa-head--center .fa-title{justify-content:center}
.fa-sub{margin:12px 0 0;max-width:60ch;color:var(--muted);font-size:15.5px;line-height:1.6}
.fa-head--center .fa-sub{margin-inline:auto}

/* The list can spread wider than the page (the "Banner width" setting): it is
   widened and pulled back equally on both sides, so it stays centred while the
   heading above keeps in line with the rest of the page. */
.fa-list{list-style:none;padding:0;display:grid;width:var(--fa-w,100%);
  margin:0 calc((100% - var(--fa-w,100%)) / 2);
  grid-template-columns:repeat(var(--fa-cols),minmax(0,1fr));column-gap:var(--fa-gap);row-gap:0}
/* Each artist spans two shared rows — artwork, then words — so however tall one
   artwork is next to another, the three names still start on one line. */
.fa-item{display:grid;grid-template-rows:subgrid;grid-row:span 2;row-gap:var(--fa-text-gap);
  padding:var(--fa-pad);min-width:0}
@supports not (grid-template-rows:subgrid){
  .fa-item{grid-template-rows:1fr auto}
}
.fa-art{display:flex;align-items:var(--fa-art-align);justify-content:var(--fa-art-justify);min-width:0}
.fa-art-link{display:block;max-width:var(--fa-art-w);color:inherit}
.fa-mat{display:block;width:fit-content;max-width:var(--fa-art-w);background:var(--white);
  padding:var(--fa-mat);border-radius:0;box-shadow:0 0 0 1px rgba(30,16,22,.07);line-height:0;
  transition:box-shadow var(--t-med) var(--e-out)}
.fa-art-link .fa-mat{max-width:100%}
.fa-mat img{display:block;border-radius:0;max-width:100%;width:auto;height:auto;max-height:min(var(--fa-art-h,100vh),var(--fit-h,100vh))}
/* a fixed shape: the frame takes the shape, the picture sits inside it */
.fa--shaped .fa-mat,.fa--shaped .fa-art-link{width:var(--fa-art-w);max-width:100%}
.fa--shaped .fa-art-link .fa-mat{width:100%}
.fa--shaped .fa-mat img{width:100%;height:auto;aspect-ratio:var(--fa-ratio);max-height:min(var(--fa-art-h,100vh),var(--fit-h,100vh))}
.fa--contain .fa-mat img{object-fit:contain;object-position:center !important}
.fa--cover .fa-mat img{object-fit:cover}
/* No artwork yet: a colour field that takes the artwork's width. It has no
   size of its own, so it cannot shrink-wrap like a picture does. */
.fa-art--gen .fa-art-link,.fa-art--gen>.fa-mat{width:var(--fa-art-w)}
.fa-art--gen .fa-mat{width:100%}
.fa-gen{display:block;width:100%;aspect-ratio:4/5}
.fa-art-link:hover .fa-mat{box-shadow:0 0 0 1px rgba(30,16,22,.16),0 22px 44px -30px rgba(46,19,37,.5)}
.fa-art-link:focus-visible{outline:none}
.fa-art-link:focus-visible .fa-mat{outline:2px solid var(--crimson);outline-offset:3px}

.fa-text{text-align:var(--fa-text-align);min-width:0}
.fa-idx{display:block;font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;color:var(--crimson-ink)}
.fa-name{margin:8px 0 0;font-family:var(--f-disp);font-weight:600;font-size:clamp(1.2rem,1.7vw,1.5rem);
  line-height:1.22;letter-spacing:-.015em;color:var(--ink)}
.fa-name a{color:inherit;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;
  transition:background-size var(--t-med) var(--e-out)}
.fa-name a:hover{background-size:100% 1px}
.fa-name a:focus-visible{outline:2px solid var(--crimson);outline-offset:3px;background-size:100% 1px}
.fa-name--upper{text-transform:uppercase;letter-spacing:.05em;font-size:clamp(1.05rem,1.45vw,1.3rem)}
.fa-name--title{text-transform:capitalize}
.fa-name--smallcaps{font-variant:small-caps;letter-spacing:.02em}
.fa-disc{margin:6px 0 0;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
.fa-bio{overflow-wrap:anywhere;margin-block:12px 0;margin-inline:var(--fa-bio-mx,0);max-width:44ch;color:#4E4A47;font-size:15px;line-height:1.62}

/* Tablet: three across, one above the other, or a row you swipe through. */
@media (min-width:641px) and (max-width:1040px){
  .fa--t-stacked .fa-list{grid-template-columns:minmax(0,1fr);row-gap:var(--fa-gap)}
  .fa--t-stacked .fa-item{grid-row:auto;grid-template-rows:auto auto}
  .fa--t-swipe .fa-list{display:flex;width:auto;gap:var(--fa-gap);overflow-x:auto;scroll-snap-type:x mandatory;
    margin-left:calc(var(--pad-l,var(--gut)) * -1);margin-right:calc(var(--pad-r,var(--gut)) * -1);padding:0 var(--pad-r,var(--gut)) 14px var(--pad-l,var(--gut));scroll-padding-inline:var(--pad-l,var(--gut)) var(--pad-r,var(--gut));
    scrollbar-width:thin}
  .fa--t-swipe .fa-item{flex:0 0 min(60%,460px);grid-template-rows:auto 1fr;scroll-snap-align:start}
}
/* Mobile: stacked by default, so every artwork stays full width rather than
   being shrunk to fit three on a line; or swipeable, one and a bit at a time. */
@media (max-width:640px){
  .fa--m-stacked .fa-list{grid-template-columns:minmax(0,1fr);row-gap:var(--fa-gap)}
  .fa--m-stacked .fa-item{grid-row:auto;grid-template-rows:auto auto}
  .fa--m-swipe .fa-list{display:flex;width:auto;gap:var(--fa-gap);overflow-x:auto;scroll-snap-type:x mandatory;
    margin-left:calc(var(--pad-l,var(--gut)) * -1);margin-right:calc(var(--pad-r,var(--gut)) * -1);padding:0 var(--pad-r,var(--gut)) 14px var(--pad-l,var(--gut));scroll-padding-inline:var(--pad-l,var(--gut)) var(--pad-r,var(--gut));
    scrollbar-width:thin}
  .fa--m-swipe .fa-item{flex:0 0 84%;grid-template-rows:auto 1fr;scroll-snap-align:start}
}
@media (min-width:641px){.fa--hide-lg{display:none}}
@media (max-width:640px){.fa--hide-sm{display:none}}

/* discipline filter row */
.filters{display:flex;flex-wrap:wrap;gap:9px;align-items:center}
.chip{background:var(--white);border:1px solid var(--bd-rule);border-radius:var(--r-pill);
  padding:9px 18px;font-family:var(--f-body);font-size:14px;font-weight:500;color:var(--ink);
  transition:background var(--t-fast) var(--e-soft),color var(--t-fast) var(--e-soft),
             border-color var(--t-fast) var(--e-soft)}
.chip:hover{border-color:var(--plum)}
.chip.on{background:var(--plum);border-color:var(--plum);color:#fff}
.chip .n{font-family:var(--f-mono);font-size:10.5px;color:var(--muted-2);margin-left:8px}
.chip.on .n{color:rgba(255,255,255,.6)}
.filter-bar{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  margin-bottom:clamp(24px,3vw,38px)}
#artistCount{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* the roster grid — every artist visible at once */
.artist-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.2vw,26px) 12px}
.ag-card .plate-art{aspect-ratio:3/4}
.ag-meta{margin-top:14px}
.ag-meta b{display:block;font-family:var(--f-body);font-weight:500;font-size:15px;letter-spacing:-.01em}
.ag-meta span{display:block;font-family:var(--f-mono);font-size:11px;color:var(--muted);margin-top:3px}
.ag-meta .city{color:var(--muted-2)}
.is-hidden{display:none !important}
.artist-grid.filtering .ag-card{animation:softIn var(--t-med) var(--e-out) both}

@media(max-width:1040px){.artist-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){
  .artist-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:480px){
  .artist-grid{gap:14px}
  .ag-meta b{font-size:13.5px}
}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(34px,5vw,72px)}
.field{margin-bottom:20px}
.field label{display:block;font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin-bottom:9px}
.field input,.field select,.field textarea{width:100%;background:var(--white);border:1px solid var(--bd-rule);
  border-radius:var(--r-sm);padding:14px 16px;font-family:inherit;font-size:15px;color:var(--ink);transition:border-color .2s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--plum)}
.field textarea{min-height:120px;resize:vertical}
.contact-info .row{display:flex;gap:16px;padding:22px 0;border-bottom:1px solid var(--bd-card)}
.contact-info .row:first-child{border-top:1px solid var(--bd-card)}
.contact-info .ci-ico{width:40px;height:40px;border-radius:var(--r-sm);background:var(--gallery);flex:none;display:grid;place-items:center}
.contact-info .ci-ico svg{width:20px;height:20px;stroke:var(--plum);fill:none;stroke-width:1.6}
.contact-info b{display:block;font-family:var(--f-body);font-weight:600;font-size:15px}
.contact-info span{font-size:14px;color:var(--muted)}
.map{margin-top:20px;aspect-ratio:16/7;border-radius:0;border:1px solid var(--bd-rule);
  background:linear-gradient(135deg,var(--gallery),var(--mat));position:relative;overflow:hidden;display:grid;place-items:center}
.map .pin{width:16px;height:20px;background:var(--crimson);border-radius:60% 60% 55% 55%/70% 70% 50% 50%;
  box-shadow:0 8px 24px -6px rgba(235,30,69,.6)}
.map .mono{position:absolute;bottom:14px;left:16px;font-family:var(--f-mono);font-size:11px;color:var(--muted)}
/* The block was decorative before it linked anywhere. Now that it opens Google
   Maps it has to read as a control: a hover state, a visible focus ring, and a
   label saying where it goes — a map-shaped panel that did nothing on click was
   the misleading part. */
.map{text-decoration:none;color:inherit;transition:border-color .25s,box-shadow .25s}
.map:hover{border-color:var(--crimson);box-shadow:0 10px 30px -18px rgba(0,0,0,.45)}
.map:hover .pin{transform:translateY(-2px)}
.map .pin{transition:transform .25s}
.map:focus-visible{outline:2px solid var(--crimson);outline-offset:2px}
.map .map-cta{position:absolute;bottom:12px;right:14px;font-size:11.5px;color:var(--plum);
  background:var(--white);border:1px solid var(--bd-rule);border-radius:100px;padding:4px 10px}
.map:hover .map-cta{border-color:var(--crimson);color:var(--crimson-ink)}
/* The streets behind the marker (Studio settings → Map picture), centred on
   the studio so the marker in the middle of the box sits on it. The labels
   on top get a paper backing so they read over the streets. */
.map .map-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.map .pin,.map .mono,.map .map-cta,.map .map-credit{position:relative;z-index:1}
.map .mono,.map .map-cta,.map .map-credit{position:absolute}
.map.has-img .mono{background:rgba(251,250,248,.9);padding:3px 8px;color:var(--ink)}
.map.has-img .pin{box-shadow:0 0 0 3px rgba(255,255,255,.85),0 8px 24px -6px rgba(235,30,69,.6)}
.map .map-credit{top:8px;right:10px;font-size:11px;color:var(--muted);background:rgba(251,250,248,.85);padding:1px 6px}
/* on a phone the box is too narrow for the area's name and the button side
   by side; the full address is listed just above it, so the name gives way */
@media (max-width:560px){.map.has-img .mono{display:none}}
/* directions link under the studio address */
.ci-link{display:inline-block;margin-top:4px;font-size:12.5px;color:var(--crimson-ink);
  text-decoration:underline;text-underline-offset:2px}
.ci-link:hover{color:var(--plum)}

/* ============================================================
   CURSOR — the logo's crimson drop, contour traced from the
   original artwork. One fixed size (20px) in every state: no
   growth on hover, so nothing about it moves. Hotspot sits on
   the drop's top point.
   ============================================================ */
@media (hover:hover) and (pointer:fine){
  body{cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2222%22%20viewBox%3D%220%200%2026%2028%22%3E%3Cpath%20d%3D%22M22.8%2014.4C23.4%2016.2%2025.1%2018.6%2025.0%2020.7C24.9%2022.8%2023.8%2026.0%2022.3%2027.0C20.7%2028.0%2017.5%2027.3%2015.6%2027.0C13.7%2026.6%2012.1%2025.7%2010.7%2024.9C9.3%2024.1%208.3%2023.2%207.2%2022.3C6.0%2021.3%204.9%2020.4%203.9%2019.1C2.9%2017.8%201.5%2016.3%201.0%2014.4C0.5%2012.6%200.4%2010.1%201.0%208.3C1.6%206.4%203.0%204.3%204.5%203.1C6.1%201.9%208.3%201.2%2010.1%201.0C11.9%200.8%2014.1%201.3%2015.6%202.2C17.1%203.0%2018.2%204.8%2019.1%206.2C20.0%207.5%2020.5%208.8%2021.1%2010.2C21.7%2011.6%2022.1%2012.7%2022.8%2014.4Z%22%20fill%3D%22%23EB1E45%22%2F%3E%3C%2Fsvg%3E") 8 1, auto}
  a,button,summary,[data-link],.chip,.pref-pill,.tdot,.hdot,.faq-q,.pp-opt,.cbtn{
    cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2222%22%20viewBox%3D%220%200%2026%2028%22%3E%3Cpath%20d%3D%22M22.8%2014.4C23.4%2016.2%2025.1%2018.6%2025.0%2020.7C24.9%2022.8%2023.8%2026.0%2022.3%2027.0C20.7%2028.0%2017.5%2027.3%2015.6%2027.0C13.7%2026.6%2012.1%2025.7%2010.7%2024.9C9.3%2024.1%208.3%2023.2%207.2%2022.3C6.0%2021.3%204.9%2020.4%203.9%2019.1C2.9%2017.8%201.5%2016.3%201.0%2014.4C0.5%2012.6%200.4%2010.1%201.0%208.3C1.6%206.4%203.0%204.3%204.5%203.1C6.1%201.9%208.3%201.2%2010.1%201.0C11.9%200.8%2014.1%201.3%2015.6%202.2C17.1%203.0%2018.2%204.8%2019.1%206.2C20.0%207.5%2020.5%208.8%2021.1%2010.2C21.7%2011.6%2022.1%2012.7%2022.8%2014.4Z%22%20fill%3D%22%23EB1E45%22%2F%3E%3C%2Fsvg%3E") 8 1, pointer}
  input,textarea,select,[contenteditable]{cursor:text}
  .cbtn:disabled,button:disabled{cursor:default}
}
/* high-contrast users rely on the system pointer — leave it alone */
@media (prefers-contrast:more){
  body{cursor:auto}
  a,button,[data-link]{cursor:pointer}
}

/* ============================================================
   SHARED UTILITIES & COMPONENTS  (replaces one-off inline styles)
   ============================================================ */
.center{text-align:center}
.center .eyebrow{justify-content:center}
.center .lede{margin-left:auto;margin-right:auto}
.measure{max-width:640px;margin-inline:auto}
.stack{margin-top:18px}
.stack-lg{margin-top:30px}
.group{margin-bottom:44px}
.group h3{margin-bottom:10px}
.mono-note{font-family:var(--f-mono);font-size:12px;color:var(--muted)}

/* one CTA panel used on every page that needs one */
.cta-panel{background:var(--plum);color:#fff;border-radius:var(--r-lg);padding:clamp(28px,4vw,44px);
  display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.cta-panel .eyebrow{color:rgba(255,255,255,.62);margin-bottom:12px}
.cta-panel h3{color:#fff}
.cta-panel p{color:rgba(255,255,255,.72);max-width:46ch;margin-top:8px}

/* table shell — same treatment as a card */
.table-shell{background:var(--white);border:1px solid var(--bd-rule);border-radius:var(--r-md);overflow:hidden}

/* upload dropzone */
.dropzone{border:1px dashed var(--bd-rule);border-radius:var(--r-sm);padding:26px;text-align:center;
  color:var(--muted);background:var(--white);transition:border-color .25s,background .25s}
.dropzone:hover{border-color:var(--plum);background:var(--gallery)}
.dropzone b{color:var(--ink);display:block;margin-bottom:4px}
/* The note variant is not a drop target — it explains that files travel with
   the email, so it must not invite a drag with hover feedback or a pointer. */
.dropzone.is-note{cursor:default}
.dropzone.is-note:hover{border-color:var(--bd-rule);background:var(--white)}
/* The real upload: the file picker covers the whole box, invisible, so a click
   anywhere opens it and files dropped on the box land in it — the browser's
   own handling, nothing to go wrong. The chosen files are listed underneath. */
.dz-drop{position:relative;cursor:pointer}
.dz-drop input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.dz-drop:focus-within{border-color:var(--plum);box-shadow:0 0 0 3px rgba(46,19,37,.14)}
.dz-drop.is-over{border-color:var(--crimson);border-style:solid;background:var(--gallery)}
.dz-list{display:block;margin-top:10px;font-size:13.5px;color:var(--ink);word-break:break-word}
.dz-list:empty{display:none}
.dz-list .dz-total{display:block;margin-top:4px;font-family:var(--f-mono);font-size:12px;color:var(--muted)}
.field--file.is-invalid .dropzone{border-color:var(--crimson)}
/* Remove sits above the invisible picker that covers the drop area, so a
   click on it removes rather than opening the file window */
.dz-remove{position:relative;z-index:1;margin-left:8px;padding:2px 10px;border:1px solid var(--bd-rule);border-radius:var(--r-pill);
  background:var(--white);color:var(--ink);font:inherit;font-size:12px;cursor:pointer}
.dz-remove:hover,.dz-remove:focus-visible{border-color:var(--crimson);color:var(--crimson-ink)}
/* the other way in, for files too big for a form: a link */
.dz-link{margin-top:10px}
.dz-link summary{cursor:pointer;font-size:13.5px;color:var(--crimson-ink);text-decoration:underline;text-underline-offset:3px;width:fit-content}
.dz-link[open] summary{margin-bottom:8px}
.dz-link input{width:100%}
.dz-link .mono-note{display:block;margin-top:6px}
@media (pointer:coarse){.dz-remove{min-height:40px;padding-inline:14px}.dz-link summary{padding-block:10px}}
.upload-bar{display:block;height:4px;margin-top:10px;border-radius:2px;background:var(--line);overflow:hidden}
.upload-bar span{display:block;height:100%;width:0;background:var(--crimson);transition:width .25s}

/* helper text under the order form */
.form-note{margin-top:14px;font-size:13px;line-height:1.6;color:var(--muted)}
.form-note a{color:var(--plum);text-decoration:underline;text-underline-offset:2px}
.form-note.is-active{color:var(--ink)}

/* ---------- Paper finder dropdown (Paper page) ---------- */
.finder{display:grid;grid-template-columns:minmax(300px,400px) 1fr;gap:clamp(24px,3.5vw,48px);align-items:start}
.paper-picker{position:relative;z-index:20}
.pp-label{display:block;font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.pp-trigger{width:100%;display:flex;align-items:center;gap:14px;background:var(--white);
  border:1px solid var(--bd-rule);border-radius:var(--r-sm);padding:15px 18px;text-align:left;
  transition:border-color .25s,box-shadow .25s}
.pp-trigger:hover{border-color:var(--plum)}
.pp-trigger[aria-expanded="true"]{border-color:var(--plum);box-shadow:0 0 0 3px rgba(46,19,37,.08)}
.pp-current{flex:1;min-width:0}
.pp-current b{display:block;font-size:15.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-current span{display:block;font-family:var(--f-mono);font-size:11.5px;color:var(--muted);margin-top:3px}
.chev{width:18px;height:18px;flex:none;transition:transform .3s var(--ease)}
.pp-trigger[aria-expanded="true"] .chev{transform:rotate(180deg)}

.pp-panel{position:absolute;left:0;right:0;top:calc(100% + 8px);background:var(--white);
  border:1px solid var(--bd-rule);border-radius:var(--r-md);padding:8px;max-height:60vh;overflow-y:auto;
  box-shadow:0 30px 60px -30px rgba(46,19,37,.45);opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s}
.pp-panel.open{opacity:1;visibility:visible;transform:translateY(0)}
.pp-group{padding:6px 0}
.pp-group-title{margin:0;padding:8px 10px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted-2);font-weight:700;position:sticky;top:0;
  background:var(--white);z-index:1}
.pp-opt{width:100%;display:flex;align-items:center;gap:12px;background:none;border:0;
  padding:9px 10px;border-radius:var(--r-xs);text-align:left;transition:background .18s}
.pp-opt:hover,.pp-opt:focus-visible{background:var(--gallery);outline:none}
.pp-sw{width:34px;height:34px;border-radius:0;border:1px solid var(--bd-card);flex:none}
.pp-txt{flex:1;min-width:0}
.pp-txt b{display:block;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-txt span{display:block;font-family:var(--f-mono);font-size:10.5px;color:var(--muted);margin-top:1px}
.pp-tick{color:var(--crimson-ink);font-size:13px;opacity:0;flex:none}
.pp-opt[aria-selected="true"] .pp-tick{opacity:1}
.pp-opt[aria-selected="true"] b{color:var(--crimson-ink)}

/* detail panel */
.pp-detail{background:var(--white);border:1px solid var(--bd-card);border-radius:var(--r-lg);
  padding:clamp(22px,3vw,34px);min-height:100%}
.pd-top{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap}
.pd-swatch{width:132px;height:132px;border-radius:0;border:1px solid var(--bd-card);flex:none;
  box-shadow:inset 0 0 22px rgba(120,95,65,.07)}
.pd-head{flex:1;min-width:200px}
.pd-head .fam{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--crimson-ink)}
.pd-head h3{font-size:clamp(1.4rem,2.4vw,1.9rem);margin:10px 0 8px;font-weight:600}
.pd-head p{color:var(--muted);font-size:15px;line-height:1.55;max-width:52ch}
.pd-specs{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--bd-card);
  border:1px solid var(--bd-card);border-radius:var(--r-sm);overflow:hidden;margin-top:26px}
.pd-spec{background:var(--white);padding:16px 18px}
.pd-spec dt{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pd-spec dd{margin:6px 0 0;font-size:15px;font-weight:600}
.pd-foot{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:24px}
@media(max-width:900px){
  .finder{grid-template-columns:1fr}
  .pd-specs{grid-template-columns:1fr}
}

/* ============================================================
   MOTION LIBRARY
   Every animation in the build is one of these. Adding a new
   keyframe should be a deliberate decision, not a reflex.
   ============================================================ */
@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes wordUp{from{transform:translateY(112%)}to{transform:translateY(0)}}
@keyframes plateIn{from{opacity:0;transform:translateY(28px) scale(.97)}
                     to{opacity:1;transform:none}}
@keyframes dropIn{from{opacity:0;transform:rotate(60deg) scale(.4)}
                    to{opacity:1;transform:rotate(12deg) scale(1)}}
@keyframes softIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes pageIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---- headline word reveal (hero signature) ---- */
.w{display:inline-block;overflow:hidden;vertical-align:bottom;
   padding-bottom:.09em;margin-bottom:-.09em}   /* room for descenders */
.wi{display:inline-block;transform:translateY(112%)}
.hero-copy.play .wi{animation:wordUp var(--t-slow) var(--e-out) both}

/* ---- hero choreography: plays on load and on return to home ---- */
.hero-copy > *{opacity:0}
.hero-copy.play > *:not(h1){animation:rise var(--t-slow) var(--e-out) both}
.hero-copy.play > h1{opacity:1}
.hero-copy.play > .pill{animation-delay:.04s}
.hero-copy.play > .lede{animation-delay:.55s}
.hero-copy.play > .hero-actions{animation-delay:.66s}
.hero-plate{opacity:0}
.hero-plate.play{animation:plateIn .95s var(--e-out) .22s both}
.hero-plate::before{opacity:0}
.hero-plate.play::before{animation:dropIn .7s var(--e-out) .75s both}

/* ---- hero slideshow stage ----
   All slides occupy the SAME grid cell, so the stage is always as tall as the
   tallest slide and the page never jumps as banners change. Inactive slides are
   visibility:hidden, which also removes them from tab order and the a11y tree. */
.hero-stage{display:grid}
.hero-slide{grid-area:1/1;opacity:0;visibility:hidden;
  transition:opacity var(--t-slow) var(--e-out),visibility 0s linear var(--t-slow)}
.hero-slide.on{opacity:1;visibility:visible;transition-delay:0s;z-index:1}

.hero-nav{display:flex;align-items:center;gap:18px;margin-top:clamp(26px,3vw,40px)}
.hero-dots{display:flex;gap:9px}
.hdot{width:40px;height:3px;padding:0;border:0;border-radius:2px;background:var(--mat);
  position:relative;overflow:hidden;transition:background var(--t-fast) var(--e-soft)}
.hdot:hover{background:var(--line)}
.hdot.on{background:var(--line)}
/* the crimson fill doubles as the autoplay timer */
.hdot.on::after{content:"";position:absolute;inset:0;background:var(--crimson);
  transform-origin:left;transform:scaleX(0);
  animation:hprog var(--hero-dur,7s) linear forwards}
.hero:hover .hdot.on::after,.hero:focus-within .hdot.on::after{animation-play-state:paused}
/* On a computer the dot is a 3px bar — too thin to click. Padding widens what
   the pointer can hit to 27px; the matching negative margin gives that room
   back, so the bars do not move by a pixel. (Tablets and phones get their own,
   larger touch size further down.) */
@media (min-width:1041px){
  .hdot{padding:12px 0;margin-block:-12px;background-clip:content-box;box-sizing:content-box;overflow:visible}
  .hdot.on::after{inset:12px 0}
}
@keyframes hprog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
#heroCount{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.12em;color:var(--muted-2)}

/* ============================================================
   ARTWORK REPRODUCTION — the one journey that starts with an object
   ============================================================ */
/* section head can carry a CTA and controls side by side */
.sec-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}

/* a second movement inside one section — divided by a rule, not a colour change */
.movement{margin-top:clamp(44px,5.5vw,78px);padding-top:clamp(36px,4.5vw,58px);
  border-top:1px solid var(--bd-rule)}
.movement h3{margin-bottom:14px}
/* A made page's text block: its sub-heading is an h2, which needs the same room
   under it, and the first block opens the section rather than following
   another, so it takes no rule or gap above — the page head's own rule and the
   section's padding are already there. */
.movement > h2{margin-bottom:14px}
.section > .movement:first-child{margin-top:0;padding-top:0;border-top:0}
.movement .lede{max-width:62ch}
/* paragraphs of a made page's text block, typed with a blank line between them */
.movement .lede + .lede{margin-top:1em}

/* the process chain */
.chain{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(14px,1.8vw,22px);
  position:relative;margin-top:clamp(30px,3.6vw,46px)}
.chain::before{content:"";position:absolute;left:0;right:0;top:9px;height:1px;background:var(--bd-rule)}
.chain-step{position:relative;padding-top:30px}
.chain-step::before{content:"";position:absolute;top:4px;left:0;width:11px;height:11px;border-radius:50%;
  background:var(--rag);border:1px solid var(--muted-2)}
.bg-gallery .chain-step::before{background:var(--gallery)}
.chain-step.is-final::before{background:var(--crimson);border-color:var(--crimson)}
.chain-step .k{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;color:var(--muted-2)}
.chain-step h3{font-family:var(--f-body);font-weight:600;font-size:15px;margin:8px 0 7px;letter-spacing:-.01em}
.chain-step.is-final h3{color:var(--crimson-ink)}
.chain-step p{font-size:13.5px;color:var(--muted);line-height:1.5}
.chain-foot{margin-top:clamp(24px,3vw,34px);font-size:15px;color:var(--muted);max-width:70ch}
.chain-foot a{color:var(--crimson-ink);text-decoration:underline;text-underline-offset:3px}

/* ---- two entry paths ---- */
.paths{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,26px)}
.path{background:var(--white);border:1px solid var(--bd-card);border-radius:var(--r-lg);
  padding:clamp(26px,3.2vw,38px);transition:border-color var(--t-med) var(--e-soft)}
.path:hover{border-color:var(--plum)}
.path--accent{background:var(--plum);color:#fff;border-color:var(--plum)}
.path .k{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--crimson-ink)}
.path--accent .k{color:color-mix(in srgb,var(--crimson) 80%,#fff)}   /* lifted so it reads on plum */
.path h3{font-family:var(--f-disp);font-size:clamp(1.25rem,2vw,1.6rem);margin:12px 0 10px;letter-spacing:-.02em}
.path--accent h3{color:#fff}
.path p{color:var(--muted);font-size:14.5px;line-height:1.55}
.path--accent p{color:rgba(255,255,255,.74)}
.path .step-ico{margin:0 0 18px}
.path--accent .step-ico{background:rgba(255,255,255,.1)}
.path--accent .step-ico svg{stroke:#fff}
.path-steps{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;color:var(--muted-2);
  margin:16px 0 20px;line-height:1.7}
.path--accent .path-steps{color:rgba(255,255,255,.6)}

/* ---- services page: grouped ---- */
.svc-group{margin-bottom:clamp(40px,5vw,68px)}
.svc-group:last-of-type{margin-bottom:0}
.svc-group-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;
  padding-bottom:16px;margin-bottom:clamp(20px,2.6vw,30px);border-bottom:1px solid var(--bd-rule)}
.svc-group-head h2{font-size:clamp(1.4rem,2.4vw,1.9rem);letter-spacing:-.02em}
.svc-group-head .k{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}

/* ---- what do you want to print: an editorial wall, not a card grid ----
   The lead print occupies a 2x2 block; the other four sit beside it.
   Cards carry no border of their own — the white mat of .plate is the
   frame, which is the same idiom used everywhere else on the site. */
.kind-grid{display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(16px,2vw,26px);align-items:start}
.kind-card{display:flex;flex-direction:column;background:none;border:0;padding:0}
.kind-card .plate-art{aspect-ratio:4/3}
.kind-meta{padding-top:16px;display:flex;flex-direction:column;flex:1}
.kind-card .k{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;
  color:var(--crimson-ink);display:block;margin-bottom:9px}
.kind-card h3{font-family:var(--f-disp);font-weight:700;font-size:16px;
  letter-spacing:-.02em;line-height:1.2}
.kind-card p{font-size:13.5px;color:var(--muted);line-height:1.5;margin-top:8px}
.kind-go{margin-top:auto;padding-top:16px;font-family:var(--f-mono);
  font-size:11.5px;color:var(--ink);transition:color var(--t-fast) var(--e-soft)}
.kind-card:hover .kind-go{color:var(--crimson-ink)}

/* the lead: twice the width, twice the height, and a captioned plate */
.kind-card--lead{grid-column:span 2;grid-row:span 2}
.kind-card--lead .plate-art{aspect-ratio:16/11}
.kind-card--lead .kind-meta{padding-top:22px}
.kind-card--lead h3{font-size:clamp(1.3rem,2vw,1.75rem)}
.kind-card--lead p{font-size:15px;max-width:46ch;margin-top:10px}

@media(max-width:1040px){
  .kind-grid{grid-template-columns:repeat(2,1fr)}
  .kind-card--lead{grid-column:span 2;grid-row:auto}
  .kind-card--lead .plate-art{aspect-ratio:16/9}
}
@media(max-width:560px){
  .kind-grid{grid-template-columns:1fr}
  .kind-card--lead{grid-column:span 1}
}

/* ---- who we work with (separate axis from the service groups) ---- */
.seg-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.seg-card{background:var(--white);border:1px solid var(--bd-card);border-radius:var(--r-md);padding:24px 20px;
  display:flex;flex-direction:column;justify-content:space-between;min-height:150px;
  transition:transform var(--t-med) var(--e-out),border-color var(--t-med) var(--e-soft)}
.seg-card h3{font-size:17px}
.seg-card:hover{transform:translateY(-4px);border-color:var(--plum)}
.seg-card b{font-family:var(--f-body);font-weight:600;font-size:15px;display:block;letter-spacing:-.01em}
.seg-card p{font-size:13px;color:var(--muted);line-height:1.5;margin-top:9px}
.seg-go{font-family:var(--f-mono);font-size:11px;color:var(--crimson-ink);margin-top:16px;display:block}

@media(max-width:1040px){
  .chain{grid-template-columns:repeat(3,1fr);gap:26px 18px}
  .chain::before{display:none}
  .seg-grid,.kind-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:820px){
  .paths{grid-template-columns:1fr}
}
@media(max-width:560px){
  .chain{grid-template-columns:1fr 1fr}
  .seg-grid,.kind-grid{grid-template-columns:1fr 1fr}
}

/* paired fields — collapse to stacked on narrow screens */
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}

/* contact preference pills */
.pref{display:flex;flex-wrap:wrap;gap:9px}
.pref-pill{display:inline-flex;align-items:center;gap:9px;background:var(--white);
  border:1px solid var(--bd-rule);border-radius:var(--r-pill);padding:10px 18px;
  font-family:var(--f-body);font-size:14px;font-weight:500;color:var(--ink);
  transition:background var(--t-fast) var(--e-soft),color var(--t-fast) var(--e-soft),
             border-color var(--t-fast) var(--e-soft)}
.pref-pill svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pref-pill:hover{border-color:var(--plum)}
.pref-pill.on{background:var(--plum);border-color:var(--plum);color:#fff}
.pref-pill:focus-visible{outline:2px solid var(--crimson);outline-offset:2px}

@media(max-width:560px){
  .field-row{grid-template-columns:1fr}
}

/* ============================================================
   DETAIL PAGES — service and artist
   ============================================================ */
.crumb{display:flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);margin-bottom:20px}
.crumb a{color:var(--muted)}
.crumb a:hover{color:var(--crimson-ink)}

.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,60px);align-items:start}
.detail-grid .plate-art{aspect-ratio:4/3}

.spec-list{margin:0;border-top:1px solid var(--bd-rule)}
.spec-list > div{display:grid;grid-template-columns:170px 1fr;gap:20px;padding:15px 0;
  border-bottom:1px solid var(--bd-card)}
.spec-list dt{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);padding-top:2px}
.spec-list dd{margin:0;font-size:15px;line-height:1.5}

/* ---- artist profile pictures ----
   Square, like every other picture on the site. A portrait is a photograph of
   the artist rather than their work, so it still fills its small square — the
   circle cropped more of it than the square does. */
.a-avatar img,.ag-avatar img,.feat-avatar img,.artist-portrait img{
  width:100%;height:100%;object-fit:cover;display:block;border-radius:0}
.ag-avatar{width:34px;height:34px;border-radius:0;flex:none;overflow:hidden;
  display:grid;place-items:center;font-family:var(--f-disp);font-weight:700;color:#fff;font-size:13px}
.ag-meta{display:flex;align-items:center;gap:11px}
.ag-text{min-width:0}
.feat-avatar{width:44px;height:44px;border-radius:0;flex:none;overflow:hidden;
  display:grid;place-items:center;font-family:var(--f-disp);font-weight:700;color:#fff;font-size:16px}
.feat-name{display:flex;align-items:center;gap:14px}
.feat-name h3{margin:0}
.artist-head{display:flex;align-items:center;gap:clamp(18px,2.5vw,28px);margin-top:14px}
.artist-portrait{width:clamp(78px,9vw,112px);aspect-ratio:1/1;border-radius:0;flex:none;overflow:hidden;
  display:grid;place-items:center;font-family:var(--f-disp);font-weight:800;color:#fff;font-size:2rem}
.artist-head h1{margin:0}

/* ---- every work by one artist ---- */
/* Columns rather than a grid: works are all different heights now that each
   one keeps its own shape, and a grid row is as tall as its tallest card — so
   every shorter card left a gap beneath it. Columns let the next work start
   where the last one ended. */
.gallery{columns:4;column-gap:clamp(14px,1.8vw,22px)}
.gal-item{margin:0 0 clamp(14px,1.8vw,22px);break-inside:avoid;background:var(--white);border:1px solid var(--bd-card);border-radius:0;
  padding:var(--img-mat);position:relative;transition:transform var(--t-med) var(--e-out),box-shadow var(--t-med) var(--e-out)}
.gal-item:hover{transform:translateY(-4px);box-shadow:0 26px 40px -30px rgba(46,19,37,.45)}
/* A work is whatever shape the artist made it. Forcing every one into a 4:5
   box and filling the remainder with grey put bands around 460 of the 470
   works on the site; only ten were actually 4:5. The image now sets its own
   height from its own proportions, so the card is the size of the picture. */
.gal-item img{width:100%;height:auto;border-radius:0;display:block}
.gal-open{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.gal-open:focus-visible{outline:2px solid var(--crimson);outline-offset:3px;border-radius:0}
.gal-item.gal-missing{display:none}          /* hide anything that fails to load */

/* ---- the artwork viewer ----
   A work in a card is a thumbnail of something that was printed at size. This
   opens the largest copy we generated, at whatever shape the work actually is. */
.lb{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  gap:clamp(6px,2vw,20px);padding:clamp(12px,3vw,40px);background:rgba(30,16,22,.94)}
.lb[hidden]{display:none}
.lb-fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px;min-width:0}
.lb-img{max-width:100%;max-height:82vh;width:auto;height:auto;border-radius:0}
.lb-cap{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;color:rgba(255,255,255,.72)}
.lb-btn{flex:none;width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;font-size:24px;line-height:1}
.lb-btn:hover{background:rgba(255,255,255,.22)}
.lb-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.lb-close{position:absolute;top:clamp(10px,2vw,22px);right:clamp(10px,2vw,22px);font-size:20px}
body.lb-open{overflow:hidden}
@media(max-width:640px){
  .lb-prev,.lb-next{position:absolute;bottom:18px}
  .lb-prev{left:18px}.lb-next{right:18px}
}
.gal-item figcaption{font-family:var(--f-mono);font-size:10.5px;color:var(--muted-2);
  margin-top:7px;text-align:center;letter-spacing:.08em}
.gal-note{margin-top:22px;font-family:var(--f-mono);font-size:11px;color:var(--muted-2)}
.gal-note code{font-family:var(--f-mono);color:var(--muted)}
@media(max-width:1040px){.gallery{columns:3}}
@media(max-width:640px){.gallery{columns:2}
  .artist-head{gap:16px}}

.artist-work{max-width:560px}
/* placeholder panel — visibly unfinished on purpose */
.tbc{margin-top:clamp(28px,3.5vw,42px);border:1px dashed var(--bd-rule);border-radius:var(--r-md);
  padding:clamp(22px,3vw,30px);background:var(--white)}
.tbc p{color:var(--muted);font-size:14.5px;line-height:1.55;max-width:66ch}

.artist-pager{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.pager{display:block;max-width:38%}
.pager .k{display:block;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted-2);margin-bottom:6px}
.pager b{font-family:var(--f-disp);font-weight:700;font-size:clamp(1rem,1.6vw,1.25rem);letter-spacing:-.02em}
.pager:hover b{color:var(--crimson-ink)}
.pager.next{text-align:right}
.pager.prev{text-align:left}

@media(max-width:820px){
  .detail-grid{grid-template-columns:1fr}
  .spec-list > div{grid-template-columns:1fr;gap:4px}
}
/* previous · all artists · next stay on one line while a tablet has the room */
@media(max-width:600px){
  .pager{max-width:100%}
  .artist-pager{flex-direction:column;align-items:stretch;text-align:left}
  .pager.next{text-align:left}
}

/* ---- staggered scroll reveals (delay set per-sibling in JS) ---- */
.reveal{transition-delay:var(--d,0ms)}

/* ---- art plates: the print lifts, the caption follows ----
   NOTE: deliberately NOT scaling .plate-art on hover. It carries the artwork
   background itself and sits inside the white mat formed by .plate's padding,
   so scaling it grows the image over its own mat border — the one thing a
   print studio would never do. The lift alone does the work. */
.plate-cap{transition:transform var(--t-med) var(--e-out)}
.lift:hover .plate-cap{transform:translateX(3px)}
.plate{transition:transform var(--t-slow) var(--e-out),box-shadow var(--t-slow) var(--e-out)}

/* ---- header condenses once you start reading ---- */
.topbar{transition:box-shadow var(--t-med) var(--e-soft)}
.nav{transition:height var(--t-med) var(--e-soft)}
.brand img{transition:height var(--t-med) var(--e-soft)}
.topbar.compact{box-shadow:0 10px 30px -18px rgba(46,19,37,.55)}
.topbar.compact .nav{height:var(--hdr-h-c,60px)}
.topbar.compact .brand img{height:var(--logo-h-c,34px)}
/* The header keeps its place in the page while it condenses: the height it
   gives up becomes a margin beneath it, which the condensed header — stuck at
   the top — covers. Without this, everything below jumped up the moment
   reading began, and the browser's own correction for that jump pulled the
   page back above the point where the header condenses, so it grew again: the
   header flickered between its two sizes. The margin moves in step with the
   height, so the two always add up to the same. */
.topbar{transition:box-shadow var(--t-med) var(--e-soft),margin-bottom var(--t-med) var(--e-soft)}
.topbar.compact{margin-bottom:max(0px,calc(var(--hdr-h,74px) - var(--hdr-h-c,60px)))}
@media(max-width:820px){
  .topbar.compact{margin-bottom:max(0px,calc(var(--hdr-h-m,var(--hdr-h,74px)) - var(--hdr-h-c,60px)))}
}

/* ---- mega menu: columns settle in sequence ---- */
.mega.open .mega-col,.mega.open .mega-feature{animation:softIn var(--t-med) var(--e-out) both}
.mega.open .mega-col:nth-child(1){animation-delay:.02s}
.mega.open .mega-col:nth-child(2){animation-delay:.07s}
.mega.open .mega-col:nth-child(3){animation-delay:.12s}
.mega.open .mega-col:nth-child(4){animation-delay:.17s}
.mega.open .mega-feature{animation-delay:.22s}

/* ---- FAQ answer fades in behind the height change ---- */
.faq-item.open .faq-a p{animation:softIn var(--t-med) var(--e-out) .06s both}

/* ---- paper picker: options cascade, detail cross-fades ---- */
.pp-panel.open .pp-opt{animation:softIn var(--t-fast) var(--e-out) both}
.pp-panel.open .pp-group:nth-child(1) .pp-opt{animation-delay:.03s}
.pp-panel.open .pp-group:nth-child(2) .pp-opt{animation-delay:.07s}
.pp-panel.open .pp-group:nth-child(3) .pp-opt{animation-delay:.10s}
.pp-panel.open .pp-group:nth-child(4) .pp-opt{animation-delay:.13s}
.pp-detail.swap{animation:softIn var(--t-med) var(--e-out) both}
.pd-swatch{transition:transform var(--t-slow) var(--e-out)}
.pp-detail:hover .pd-swatch{transform:scale(1.04)}

/* ---- page transition ---- */
.page.active{animation:pageIn var(--t-med) var(--e-out)}

/* reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
/* Without scripts nothing would ever add .in, and every section would stay
   invisible: show everything as it is. */
@media (scripting:none){.reveal{opacity:1;transform:none}
  .hero-copy > *,.hero-plate,.hero-plate::before{opacity:1}}
/* The same when the script is late or failed to arrive: the page's first line
   (in <head>) adds .reveal-all after four seconds unless the script has
   started by then, so a slow connection never leaves the page blank — the
   hero's headline and picture included, which also wait for the script. */
.reveal-all .reveal{opacity:1;transform:none}
.reveal-all .hero-copy > *,.reveal-all .hero-plate,.reveal-all .hero-plate::before{opacity:1}

/* ---------- responsive ---------- */
@media(max-width:1040px){
  .mega-inner{grid-template-columns:repeat(2,1fr)}
  .mega-feature{display:none}
  .why-grid,.svc-grid,.paper-row{grid-template-columns:repeat(2,1fr)}
  .trust-inner{grid-template-columns:repeat(2,1fr)}
  .trust-cell:nth-child(n+3){border-top:1px solid var(--bd-rule)}
  .trust-cell:nth-child(odd){border-left:0;padding-left:0}
  .trust-cell:nth-child(even){border-left:1px solid var(--bd-rule);padding-left:26px}
  .footer-top{grid-template-columns:1fr 1fr}
  .footer-top > .footer-brand:only-child{grid-column:1/-1}
  .cta-band .steps{grid-template-columns:1fr 1fr}
  .pillar-grid{grid-template-columns:1fr}
  .pillar{border-right:0;border-bottom:1px solid var(--line)}
  .pillar:last-child{border-bottom:0}
}
/* A menu item can be kept to the desktop bar or to the mobile menu (820px is
   where one becomes the other). */
@media(min-width:821px){.nav-links .nav-only-mobile{display:none !important}}
@media(max-width:820px){.nav-links .nav-only-desktop{display:none !important}}
/* Header → Tablet: "menu button" puts tablets on the phone menu too. */
@media(min-width:821px) and (max-width:1040px){
  .hdr--menu-tablet .nav-links,.hdr--menu-tablet .nav-cta{display:none}
  .hdr--menu-tablet .hamb{display:flex}
  .hdr--menu-tablet .nav-links.mobile-open{display:flex;position:fixed;inset:var(--hdr-h,74px) 0 auto 0;background:var(--hdr-bg,var(--plum));
    flex-direction:column;align-items:stretch;padding:16px var(--pad-r,var(--gut)) 30px var(--pad-l,var(--gut));gap:2px;z-index:180;border-bottom:1px solid rgba(255,255,255,.1)}
  .hdr--menu-tablet .nav-links.mobile-open a,.hdr--menu-tablet .nav-links.mobile-open button{text-align:left;padding:14px;color:var(--nav-fg,rgba(255,255,255,.82))}
  .hdr--menu-tablet .mega{display:none}
}
@media(max-width:820px){
  .nav{height:var(--hdr-h-m,var(--hdr-h,74px))}
  .nav-links,.nav-cta{display:none}
  .hamb{display:flex}
  .nav-links.mobile-open{display:flex;position:fixed;inset:var(--hdr-h-m,var(--hdr-h,74px)) 0 auto 0;background:var(--hdr-bg,var(--plum));
    flex-direction:column;align-items:stretch;padding:16px var(--pad-r,var(--gut)) 30px var(--pad-l,var(--gut));gap:2px;z-index:180;border-bottom:1px solid rgba(255,255,255,.1)}
  .nav-links.mobile-open a,.nav-links.mobile-open button{text-align:left;padding:14px}
  /* Header → Phone menu: "full screen" */
  .hdr--menu-full .nav-links.mobile-open{inset:0;min-height:100vh;padding-top:calc(var(--hdr-h-m,var(--hdr-h,74px)) + 16px);font-size:18px}
  .mega{display:none}
  .hero-grid{grid-template-columns:1fr;gap:36px}
  .hero-plate{max-width:340px;margin:0 auto}
  .contact-grid,.paper-hero,.about-grid,.border-demo{grid-template-columns:1fr}
  .sec-head{flex-direction:column;align-items:flex-start}
}
@media(max-width:560px){
  .why-grid,.svc-grid,.paper-row{grid-template-columns:1fr}
  .trust-inner{grid-template-columns:1fr 1fr}
  .trust-cell{padding-right:14px}
  .footer-top,.about-grid{grid-template-columns:1fr}
  .ftr--m-two .footer-top{grid-template-columns:1fr 1fr}
  .ftr--m-two .footer-brand{grid-column:1/-1}
  .cta-band .steps{grid-template-columns:1fr}
  .step{border-right:0;border-bottom:1px solid var(--bd-card)}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001s !important;animation-delay:0s !important;
    transition-duration:.001s !important;transition-delay:0s !important;scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
  /* entrances must resolve to their FINISHED state, never their start state */
  .hero-copy > *{opacity:1}
  .hero-plate{opacity:1}
  .hero-plate::before{opacity:1}
  .hdot.on::after{animation:none;transform:scaleX(1)}
  .w{overflow:visible}
  .wi{transform:none}
  .plate-cap,.pd-swatch{transform:none !important}
  .topbar.compact .nav{height:74px}
  .topbar.compact .brand img{height:42px}
  .topbar.compact{margin-bottom:0}    /* it does not condense, so it gives nothing up */
}

/* Monogram shown when an artist has no photograph. The ground comes from the
   artist's seed, inline. Only the letter colour is set here: `.ag-avatar` says
   `color:#fff` but loses to `.ag-meta span` on specificity, so the initial was
   rendering muted grey on a coloured circle. Two classes outrank that. */
.a-avatar.is-mono,.ag-avatar.is-mono,.feat-avatar.is-mono,.artist-portrait.is-mono{
  color:#fff;
}

/* ---- an artist's biography ----
   Prose the studio wrote, so it gets a reading measure rather than the full
   page width, and space between paragraphs rather than indents. */
/* The biographies run to five or six paragraphs, which as one column made a
   very tall stack between the name and the works. Flowing them into columns
   spreads the text across the page instead: column-width rather than a fixed
   count, so the browser fits as many as the viewport allows and drops to one
   on a phone without a media query. Each column keeps a readable measure. */
.artist-bio{margin-top:clamp(22px,3vw,34px);column-width:23rem;column-gap:clamp(30px,4vw,58px)}
.artist-bio p{font-size:1.02rem;line-height:1.72;color:var(--ink);margin:0 0 1.05em;
  /* a paragraph split across a column break loses the thread */
  break-inside:avoid;
  /* Several bios end on a bare web address, which has no spaces to wrap at —
     on a phone it pushed the whole page sideways. Break it only if it must. */
  overflow-wrap:anywhere}
.artist-bio p:first-child{font-size:1.08rem}
.artist-bio p:last-child{margin-bottom:0}

/* A headshot is not centred on its own middle: the face sits in the upper part
   of the frame, so a square crop taken from the centre takes the chest and cuts
   the top of the head. Thirteen of the artist portraits are taller than they
   are wide, and this is the only place they are shown large enough for it to
   show. Square sources are unaffected — there is nothing to crop. */
.artist-portrait{position:relative}
/* height:100% does not resolve against a height that comes from aspect-ratio,
   so the picture was overflowing the circle and being clipped at the top edge
   rather than cropped from its middle — which meant object-fit had nothing to
   do. Filling the box absolutely gives it a real square to crop into. */
.artist-portrait img{position:absolute;inset:0;width:100%;height:100%;object-position:center 28%}

/* ---- a photograph of the stock, where one has been uploaded ----
   The generated texture is drawn as a background; a real photograph is an
   image inside the same square, so both look like the same component. */
.pp-sw.has-photo,.pd-swatch.has-photo{overflow:hidden;background:var(--mat);padding:0}
.pp-sw.has-photo img,.pd-swatch.has-photo img{width:100%;height:100%;object-fit:cover;display:block}

/* Available to a screen reader, invisible on screen. Used where a section has
   an obvious meaning to anyone looking at it — a grid of artists, a list of
   journal posts — but nothing in the markup says so, which left the heading
   outline jumping from the page title straight to the cards inside it. */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ============================================================
   ARTWORKS, COLLECTIONS, EXHIBITIONS
   An artwork is shown whole and at its own proportions, inside the same white
   mat every picture on the site sits in. Grids of them are masonry columns,
   like an artist's works, so nothing is cropped to make a row line up.
   ============================================================ */
.aw-frame{background:var(--white);border:1px solid var(--bd-card);padding:var(--img-mat);border-radius:0;
  transition:transform var(--t-med) var(--e-out),box-shadow var(--t-med) var(--e-out)}
.aw-img{width:100%;height:auto;display:block;border-radius:0}
.aw-img.is-empty{aspect-ratio:4/5}
.aw-grid{columns:4;column-gap:clamp(14px,1.8vw,22px)}
.aw-card{display:block;break-inside:avoid;margin:0 0 clamp(22px,2.6vw,32px);color:inherit}
.aw-card:hover .aw-frame,.col-card:hover .aw-frame,.ex-card:hover .aw-frame{transform:translateY(-4px);box-shadow:0 26px 40px -30px rgba(46,19,37,.45)}
.aw-meta{display:block;margin-top:12px}
.aw-meta b{display:block;font-family:var(--f-body);font-size:15px;font-weight:600;line-height:1.35}
.aw-meta > span{display:block;font-family:var(--f-mono);font-size:11px;color:var(--muted);margin-top:3px;letter-spacing:.02em}
@media(max-width:1040px){.aw-grid{columns:3}}
@media(max-width:640px){.aw-grid{columns:2}}

.aw-detail{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start}
.aw-main{margin:0}
.aw-main img{width:100%;height:auto}
.aw-text{margin-top:22px}
.aw-text p{font-size:1.02rem;line-height:1.72;margin:0 0 1em;overflow-wrap:anywhere}
.aw-in{font-family:var(--f-mono);font-size:12px;color:var(--muted);margin-top:18px}
.aw-in a{color:var(--crimson-ink);text-decoration:underline;text-underline-offset:2px}
/* a cover picture across the page, whole, never taller than the screen */
.aw-cover{background:var(--white);border:1px solid var(--bd-card);padding:var(--img-mat);margin-top:clamp(8px,2vw,24px)}
.aw-cover img{width:100%;height:auto;max-height:min(82vh,var(--fit-h,82vh));object-fit:contain;display:block;margin:0 auto}
.aw-artists{display:flex;flex-wrap:wrap;gap:12px}
.aw-artist{display:flex;align-items:center;gap:12px;padding:10px 16px 10px 10px;background:var(--white);
  border:1px solid var(--bd-card);color:inherit;transition:border-color .2s}
.aw-artist:hover{border-color:var(--plum)}
.aw-artist b{display:block;font-size:14.5px;font-weight:600}
.aw-artist span span{display:block;font-family:var(--f-mono);font-size:11px;color:var(--muted)}
@media(max-width:820px){.aw-detail{grid-template-columns:1fr}}

.col-grid,.ex-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,3vw,40px);align-items:start}
.col-card,.ex-card{display:block;color:inherit}
.col-flag{display:inline-block;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--crimson-ink);margin-bottom:4px}
.ex-phase{display:inline-block;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  padding:4px 10px;border:1px solid currentColor;border-radius:var(--r-pill);margin-bottom:8px;color:var(--muted)}
.ex-phase.is-current{color:var(--crimson-ink)}
.ex-phase.is-upcoming{color:var(--plum)}
.page-head .ex-phase{margin-bottom:14px}
@media(max-width:1040px){.col-grid,.ex-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.col-grid,.ex-grid{grid-template-columns:1fr}}

/* ---------- blocks on pages made in the admin ---------- */
.blk{margin-top:clamp(44px,5.5vw,78px)}
.blk--split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,60px);align-items:center}
.blk--split.is-right > .aw-frame{order:2}
.blk--split .lede{max-width:56ch}
.blk--image{margin-inline:0}
.blk--image figcaption{font-family:var(--f-mono);font-size:11.5px;color:var(--muted);margin-top:10px}
.blk--quote{margin-inline:0;text-align:center;padding-block:clamp(20px,4vw,48px)}
.blk--quote blockquote{font-family:var(--f-disp);font-weight:600;font-size:clamp(1.35rem,2.8vw,2.1rem);line-height:1.3;
  letter-spacing:-.02em;max-width:34ch;margin:0 auto}
.blk--quote figcaption{font-family:var(--f-mono);font-size:12px;color:var(--muted);margin-top:16px}
.blk-cols{display:grid;grid-template-columns:repeat(var(--blk-cols,3),minmax(0,1fr));border:1px solid var(--bd-rule);border-radius:var(--r-lg);overflow:hidden;margin-top:22px}
.blk .cta-panel,.section > .cta-panel{margin-top:clamp(44px,5.5vw,78px)}
@media(max-width:820px){
  .blk--split{grid-template-columns:1fr}
  .blk--split.is-right > .aw-frame{order:0}
  .blk-cols{grid-template-columns:1fr}
  .blk-cols .pillar{border-right:0;border-bottom:1px solid var(--line)}
}

/* ---------- a journal post ----------
   One reading column, about 68 characters wide, under a cover shown whole.
   Sub-headings are the design's own heading face at a size between a section
   title and body text, and lists hang their markers outside the text column
   so every line of an article starts on the same edge. */
.post-meta{font-family:var(--f-mono);font-size:12px;letter-spacing:.02em;color:var(--muted);margin-top:18px}
.post-cover{margin-top:clamp(28px,4vw,48px)}
.post-body{max-width:68ch;margin-inline:auto}
.post-body > :first-child{margin-top:0}
.post-sec{margin-top:clamp(30px,3.6vw,46px)}
.post-sec h2{font-size:clamp(1.3rem,2vw,1.6rem);letter-spacing:-.02em;font-weight:700;line-height:1.2;margin:0 0 14px}
.post-sec p,.post-split p{font-size:1.06rem;line-height:1.75;margin:0 0 1.05em;overflow-wrap:anywhere}
.post-sec ul,.post-sec ol,.post-split ul,.post-split ol{margin:0 0 1.2em;padding-left:1.25em}
.post-sec li,.post-split li{font-size:1.06rem;line-height:1.7;margin:0 0 .6em;padding-left:.2em}
.post-sec li::marker,.post-split li::marker{color:var(--crimson-ink)}
.post-sec strong,.post-split strong{font-weight:600;color:var(--ink)}
.post-fig{margin:clamp(30px,3.6vw,46px) 0}
/* a sub-heading on its own introduces the picture under it, so it sits close */
.post-sec:has(> h2:only-child) + .post-fig{margin-top:6px}
.post-fig + .post-sec:not(:has(> h2)){margin-top:0}
.post-fig figcaption{font-family:var(--f-mono);font-size:11.5px;color:var(--muted);margin-top:10px}
.post-split{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:clamp(22px,3vw,40px);align-items:start;margin-top:clamp(30px,3.6vw,46px)}
.post-split.is-right > .aw-frame{order:2}
.post-split h2{font-size:clamp(1.3rem,2vw,1.6rem);letter-spacing:-.02em;font-weight:700;line-height:1.2;margin:0 0 14px}
.post-wide .blk{margin-top:clamp(30px,3.6vw,46px)}
@media(max-width:640px){
  .post-split{grid-template-columns:1fr}
  .post-split.is-right > .aw-frame{order:0}
}

/* ---------- section presets ----------
   Set per section (Page sections → Layout) or per block. Each only changes
   what it names; a section with no settings is untouched. Column counts apply
   on large screens — tablets and phones keep the design's own collapse. */
.sp-bg{background:var(--sp-bg) !important}
.sp-dark{color:#fff}
.sp-dark .lede,.sp-dark p{color:rgba(255,255,255,.76)}
.sp-dark h1,.sp-dark h2,.sp-dark h3{color:#fff}
.sp-pt{padding-top:var(--sp-pt) !important}
.sp-pb{padding-bottom:var(--sp-pb) !important}
.sp-w-narrow.wrap,.sp-w-narrow .wrap{max-width:900px}
.sp-w-wide.wrap,.sp-w-wide .wrap{max-width:1480px}
.sp-w-full.wrap,.sp-w-full .wrap{max-width:none}
.sp-center .sec-head,.sp-center.page-head,.sp-center .cta-panel,.sp-center.movement,.sp-center .movement{text-align:center;justify-content:center;align-items:center}
.sp-center .sec-head{flex-direction:column}
.sp-center .lede,.sp-center.movement .lede{margin-inline:auto}
.sp-center .eyebrow{justify-content:center}
.sp-center.cta-panel{text-align:center;flex-direction:column}
@media(min-width:1041px){
  .sp-cols-2 :is(.paper-row,.artist-grid,.seg-grid,.kind-grid,.why-grid,.svc-grid,.about-grid,.pillar-grid,.col-grid,.ex-grid,.blk-cols){grid-template-columns:repeat(2,minmax(0,1fr))}
  .sp-cols-3 :is(.paper-row,.artist-grid,.seg-grid,.kind-grid,.why-grid,.svc-grid,.about-grid,.pillar-grid,.col-grid,.ex-grid,.blk-cols){grid-template-columns:repeat(3,minmax(0,1fr))}
  .sp-cols-4 :is(.paper-row,.artist-grid,.seg-grid,.kind-grid,.why-grid,.svc-grid,.about-grid,.pillar-grid,.col-grid,.ex-grid,.blk-cols){grid-template-columns:repeat(4,minmax(0,1fr))}
  .sp-cols-asym :is(.paper-row,.artist-grid,.seg-grid,.kind-grid,.why-grid,.svc-grid,.about-grid,.pillar-grid,.col-grid,.ex-grid,.blk-cols){grid-template-columns:minmax(0,2fr) repeat(2,minmax(0,1fr))}
  .sp-cols-2 :is(.gallery,.aw-grid){columns:2}
  .sp-cols-3 :is(.gallery,.aw-grid){columns:3}
  .sp-cols-4 :is(.gallery,.aw-grid){columns:4}
  .sp-cols-asym .paper-card:first-child,.sp-cols-asym .kind-card:first-child{grid-row:span 2}
  .blk--split.sp-cols-asym{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
}

/* ---------- the artist page ----------
   The structure only. Every size, width, gap and layout is in css/artist.css,
   written from Artist pages in the admin — per computer, tablet and phone. */
/* a column, so each device can put the works before or after the introduction */
.ap{display:flex;flex-direction:column}
.ap-hero,.ap-works{width:100%;box-sizing:border-box}
.ap-hero{margin:0 auto;position:relative}
.ap-portrait{position:relative;line-height:0;min-width:0}
.ap-portrait img{display:block;border-radius:0;margin-inline:auto}
.ap-portrait.is-mono{aspect-ratio:4/5;width:100%;display:grid;place-items:center;line-height:1}
.ap-portrait.is-mono span{font-family:var(--f-disp);font-weight:800;font-size:clamp(4rem,12vw,9rem);color:#fff;opacity:.9}
.ap-text{min-width:0}
.ap-text .crumb{margin-bottom:20px}
.ap-name{font-family:var(--f-disp);line-height:1.02;margin:12px 0 0;overflow-wrap:anywhere}
.ap-name .nb{white-space:nowrap}   /* a hyphenated name (Ata-Ullah) moves down whole, never split at the hyphen */
.ap-intro{color:var(--ink);margin:24px 0 0;overflow-wrap:anywhere}
.ap-intro.is-collapsed .ap-more{display:none}
/* With scripts running (the page marks itself .js before anything is drawn),
   the introduction is folded from the very first paint and its "Read more"
   is there already. Folding it once the page had been drawn moved the works
   below it up by the length of the biography — the jump visitors saw. */
.js .ap-intro:not(.is-open) .ap-more{display:none}
.js .ap-more-btn[hidden]{display:inline-block}
.ap-more-btn{margin-top:14px;padding:0;background:none;border:0;cursor:pointer;font:inherit;font-weight:600;
  font-size:15px;color:var(--crimson-ink);text-decoration:underline;text-underline-offset:3px}
.ap-works{margin:0 auto}
.ap-works-head .h-lg{margin-top:10px}
.ap-gallery .ap-item{margin:0;max-width:calc(var(--nat,100000px) + 2 * var(--img-mat) + 2px)}
.ap-item img{display:block;border-radius:0}
.ap-gallery:not(.ap-g--masonry) .ap-item[data-span="full"]{grid-column:1/-1}
.ap-g--masonry .ap-item[data-span="full"]{column-span:all}
.ap-g--single .ap-item,.ap-g--full .ap-item{justify-self:center}
/* the blocks an artist page can be built from, beyond the portrait and the
   works: each one drawn only when the studio switches it on for that artist */
.ap-cta{padding-top:0}
.ap-lead{padding-bottom:0}
.ap-where{margin:10px 0 0;font-size:15px;color:var(--muted)}
.ap-links{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 22px}
.ap-links a{font-weight:600;font-size:15px;text-underline-offset:3px}
.ap-about{max-width:74ch}
.ap-about p{margin:0 0 1em}
.ap-statement{margin:26px 0 0;padding:0 0 0 22px;border-left:2px solid var(--bd-card)}
.ap-statement p{margin:0;font-family:var(--f-disp);font-size:clamp(19px,2vw,24px);line-height:1.45}
.ap-quote{margin:0 0 28px;max-width:74ch}
.ap-quote blockquote{margin:0}
.ap-quote blockquote p{font-family:var(--f-disp);font-size:clamp(19px,2.2vw,26px);line-height:1.4;margin:0}
.ap-quote figcaption{margin-top:14px;display:flex;gap:10px;align-items:baseline}
.ap-quote figcaption span{color:var(--muted);font-size:14px}
.ap-name--upper{text-transform:uppercase}
.ap-name--lower{text-transform:lowercase}
.ap-name--caps{text-transform:capitalize}

/* ---------- form extras ---------- */
.field--check{margin-bottom:14px}
.consent,.field .consent{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.5;color:var(--ink);
  font-family:var(--f-body);letter-spacing:0;text-transform:none;font-weight:400;margin:0}
.field .consent input{width:18px;height:18px;flex:none;margin-top:2px;accent-color:var(--plum)}
.consent a{color:var(--plum);text-decoration:underline;text-underline-offset:2px}
.req-mark{color:var(--crimson-ink)}
.field.is-invalid input,.field.is-invalid select,.field.is-invalid textarea{border-color:var(--crimson-ink)}
/* a required choice left unpicked: its buttons take the same red edge */
.field.is-invalid .pref-pill{border-color:var(--crimson-ink)}
.field-msg{display:block;font-size:12.5px;color:var(--crimson-ink);margin-top:6px}

/* ---------- touch targets ----------
   A finger needs about 44px, which a few controls fall just under: the menu
   button, the hero's slide dots (a 3px line to look at), the filter chips and
   the newsletter field. Nothing here changes how they look — the extra size is
   padding around what is drawn, so the dot stays a thin line and the chip
   stays a chip. Measured by build/15-measure.mjs and scored under
   mobile-friendliness. */
@media (max-width:1040px), (pointer:coarse){
  /* size only: whether the button shows at all is decided by the header rules */
  .hamb{padding:9px;min-width:44px;min-height:44px;align-items:center;justify-content:center}
  .hdot{padding:21px 2px;background-clip:content-box;box-sizing:content-box;overflow:visible}
  .hdot.on::after{inset:21px 2px}
  .chip{min-height:44px;padding-block:0;display:inline-flex;align-items:center}
  .newsletter input,.newsletter button{min-height:44px}
  .pref-pill{min-height:44px}
  /* the underline stays where it was; the padding is hit area */
  .ap-more-btn{padding-block:11px;margin-top:3px}
}
/* ---- artist pages: what the data model adds ---- */
/* a picture chosen per device sits in a <picture>, which must not change the layout */
.ap-portrait picture,.ap-item picture,.ap-custom-media picture{display:contents}
.ap-art-link{margin-left:8px;font-family:var(--f-body);font-weight:600;text-underline-offset:3px}
.ap-introduction .ap-intro{max-width:62ch}
.ap-cta-words{margin-bottom:18px;max-width:62ch}
.ap-cta-words p{margin:10px 0 0;color:var(--muted)}
.ap-info{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px 28px;margin:26px 0 0}
.ap-info dt{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ap-info dd{margin:4px 0 0}
.ap-long{font-size:1.08em}
.ap-additional{color:var(--muted)}
.ap-sec-links{margin-top:18px}
.ap-custom{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}
.ap-custom--none,.ap-custom--top{grid-template-columns:minmax(0,1fr)}
.ap-custom-media img{display:block;width:100%;height:auto;border-radius:0}
.ap-custom-text p{margin:12px 0 0;max-width:62ch}
.ap-away{display:none;padding-block:48px}
@media (max-width:640px){.ap-custom{grid-template-columns:minmax(0,1fr)}}

/* ============================================================
   RESPONSIVE SYSTEM
   ------------------------------------------------------------
   The design already lays itself out fluidly (clamp() type, auto-fitting
   grids, max-width columns); this section is what a full audit of every page
   at 16 screen sizes — 320px phones to 3440px ultra-wide, portrait and
   landscape, touch and mouse — found it still needed. Nothing here restyles
   a section: it only keeps the same design readable, reachable and in
   proportion at sizes the original breakpoints did not reach.

   Breakpoints used across the site, by what the layout needs rather than by
   device name, so an unknown screen falls into the right band:
     ≤ 480   small phone          ≤ 820   menu button replaces the bar
     ≤ 560   phone, one column    ≤ 1040  tablet / small laptop
     ≤ 640   phone                ≥ 1041  desktop
     ≤ 900   narrow tablet        ≥ 1920  large desktop   ≥ 2400 ultra-wide
   plus height and input queries: (max-height:500px) for phones held
   sideways, (pointer:coarse) for touch at any width.
   ============================================================ */

/* ---- The header ----
   On 821–1040px (a tablet held sideways, a phone in landscape, a small laptop
   window) the full bar needed more room than the screen had: the "Start an
   order" button was pushed off the right edge. The bar now tightens fluidly
   across that band, and below 900px — where even the tightened bar cannot
   fit — the menu button takes over, exactly as it does on a phone. Any
   spacing set in the admin (Header) still wins over these defaults. */
@media (min-width:821px) and (max-width:1180px){
  .nav{gap:var(--hdr-gap,clamp(12px,1.8vw,26px))}
  .nav-links{gap:var(--nav-gap,clamp(0px,.3vw,4px))}
  .nav-links a,.nav-links button{padding-inline:var(--nav-px,clamp(7px,calc(.9vw - 1px),14px));font-size:var(--nav-fs,clamp(14px,1.35vw,15px))}
  .nav-links a.active::after{left:var(--nav-px,clamp(7px,calc(.9vw - 1px),14px));right:var(--nav-px,clamp(7px,calc(.9vw - 1px),14px))}
  .nav-cta{margin-left:0}
  .nav-cta .btn{padding:10px clamp(14px,1.5vw,20px);white-space:nowrap}
  .brand img{height:var(--logo-h-t,clamp(34px,3.6vw,42px))}
}
@media (min-width:821px) and (max-width:900px){
  .topbar:not(.hdr--menu-tablet) .nav-links,.topbar:not(.hdr--menu-tablet) .nav-cta{display:none}
  .topbar:not(.hdr--menu-tablet) .hamb{display:flex}
  .topbar:not(.hdr--menu-tablet) .nav-links.mobile-open{display:flex;position:fixed;inset:var(--hdr-h,74px) 0 auto 0;background:var(--hdr-bg,var(--plum));
    flex-direction:column;align-items:stretch;padding:16px var(--pad-r,var(--gut)) 30px var(--pad-l,var(--gut));gap:2px;z-index:180;border-bottom:1px solid rgba(255,255,255,.1)}
  .topbar:not(.hdr--menu-tablet) .nav-links.mobile-open a,.topbar:not(.hdr--menu-tablet) .nav-links.mobile-open button{text-align:left;padding:14px}
  .topbar:not(.hdr--menu-tablet) .nav-links .nav-only-desktop{display:none !important}
  .topbar:not(.hdr--menu-tablet) .mega{display:none}
}
/* The open menu never runs off the bottom of the screen: on a phone held
   sideways it was taller than the screen and its last links could not be
   reached. It scrolls inside itself instead, without scrolling the page. */
.nav-links.mobile-open{max-height:calc(100dvh - var(--hdr-h-m,var(--hdr-h,74px)));overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.hdr--menu-full .nav-links.mobile-open{max-height:100dvh}
/* A phone held sideways has a few hundred pixels of height: a slimmer header
   leaves the page most of them. */
@media (max-height:500px) and (orientation:landscape){
  .topbar{--hdr-h:60px;--hdr-h-m:60px}
  .brand img{height:min(var(--logo-h-m,32px),34px)}
}

/* ---- Touch targets ----
   On a touch screen of any size (an iPad in landscape is over 1040px wide),
   the controls that fell under a comfortable 44px get the room around them,
   not a new look: footer links, breadcrumbs, the logo, the contact links. */
@media (pointer:coarse){
  .fcol a{min-height:44px;display:flex;align-items:center;padding-block:0}
  .brand{min-height:44px}
  .crumb a{display:inline-flex;align-items:center;min-height:44px;margin-block:-13px}
  .ci-link{display:inline-flex;align-items:center;min-height:44px;margin-block:-10px -12px}
  .contact-info .row span a,.contact-info .row div > a:not(.ci-link){display:inline-flex;align-items:center;min-height:44px;margin-block:-12px}
  .hdot{padding:21px 2px;background-clip:content-box;box-sizing:content-box;overflow:visible}
  .hdot.on::after{inset:21px 2px}
}

/* ---- Small type ----
   The mono labels (eyebrows, captions, breadcrumbs, form labels, spec names)
   are set at 10.5–11px, which reads as fine print on a desktop monitor but
   drops below comfortable reading size on a phone or tablet held at arm's
   length. Brought up to 12px there; the letter-spacing and capitals that give
   them their character are unchanged. A tablet held sideways is wider than
   1040px but read just as far away, so touch screens get them too. */
@media (max-width:1040px),(pointer:coarse){
  .eyebrow,.crumb,.plate-cap span,.spec-list dt,.trust-cell .l,.a-meta span,.pd-spec dt,.pager .k,
  .gal-item figcaption,.ap-item figcaption,.kind-meta .k,.chain-step .k,.path .k,.svc-card .k,.tq figcaption{font-size:12px}
  .seg-go,.fa-idx,.ag-meta span,.field label,.map .mono,.border-opt span,.pd-head .fam,.why-num,.svc-card .price,
  .path-steps,.pillar .k,#pp-label,.chip .n,#artistCount,.tcount,.tsel-role{font-size:12px}
  .fcol-title{font-size:max(12px,var(--ftr-head-fs,11px))}
}

/* ---- Reading width ----
   Paragraphs that could run past a comfortable line on tablet widths. */
.paper-card p,.form-note{max-width:68ch}

/* ---- Large and ultra-wide screens ----
   On 1920px and wider the page column stayed at 1240px, leaving most of a
   large screen empty and the type small for the distance it is read from.
   The column and the type grow a little, in step, so the design keeps its
   proportions rather than stretching — a heading sits on the same number of
   lines, a grid keeps its columns. Values set in the admin (Design, Layout)
   still take precedence. */
@media (min-width:1920px){
  :root{--maxw:1360px;--type-scale:1.06;--text-base:18px}
}
@media (min-width:2400px){
  :root{--maxw:1500px;--type-scale:1.12;--text-base:19px}
}
@media (min-width:3000px){
  :root{--maxw:1640px;--type-scale:1.18;--text-base:20px}
}
/* A caption under a picture wraps cleanly onto a second line when a column is
   narrow, the title staying whole, instead of squeezing both halves. */
.plate-cap{flex-wrap:wrap;gap:2px 12px}
.plate-cap b{white-space:nowrap}
/* The Featured Artists banner can be set wider than the page, up to the whole
   screen. Past 1920px that set the three artworks across an entire ultra-wide
   monitor; it now stops at the same 1920px as the page column, still centred.
   Below 1920px the banner's own width setting applies exactly as before. */
@media (min-width:1921px){
  .fa-list{width:min(var(--fa-w,100%),var(--wrap-ceiling,1920px));
    margin-inline:calc((100% - min(var(--fa-w,100%),var(--wrap-ceiling,1920px))) / 2)}
}
/* Artist galleries with their gaps filled (see initGalleryPack in site.js):
   rows 1px tall, each work spanning its own height plus the row gap. The work
   keeps its own height at the top of its span; the gap is the rest of it. */
.ap-gallery.is-packed{grid-auto-rows:var(--pack-unit,1px) !important;row-gap:0 !important;align-items:start;grid-auto-flow:row !important}
.ap-gallery.is-packed .ap-item{align-self:start}
.ap-g--feature.is-packed .ap-item:first-child{grid-row-start:auto}

/* Hero on phones: the badge, then the picture, then the heading, the words and
   the buttons. The text block steps aside (display:contents) so its pieces and
   the picture share one column and can be ordered; everything after the badge
   keeps the page's own order. Each value reads a switch the layout engine sets
   when the studio lays the hero out for phones in the admin (Layout) — a
   placed, sized or panelled text block needs its box back, and gets the
   design's earlier phone layout: text above picture, one block each. */
@media (max-width:820px){
  .hero-grid{display:var(--hero-flow,flex);flex-direction:column;align-items:stretch;gap:var(--hero-flow-gap,0px)}
  .hero-copy{display:var(--hero-copy-box,contents)}
  .hero-copy > .pill{order:-2;align-self:flex-start}
  .hero-grid > .hero-plate{order:var(--hero-plate-order,-1);margin:0 auto var(--hero-plate-mb,30px)}
}

/* ---------- WhatsApp button (Studio settings) ----------
   Bottom corner of every page. Under the menus and the artwork viewer (they
   sit at 180–200), clear of a phone's home bar, and left out of print. The
   green is WhatsApp's own, so it reads as WhatsApp at a glance. */
.wa-float{position:fixed;z-index:170;right:max(18px,env(safe-area-inset-right));bottom:max(18px,calc(env(safe-area-inset-bottom) + 10px));
  width:58px;height:58px;border-radius:50%;display:grid;place-items:center;
  background:#25D366;color:#fff;box-shadow:0 10px 26px -8px rgba(18,140,74,.55),0 2px 6px rgba(0,0,0,.18);
  transition:transform var(--t-fast,.18s) var(--e-out,ease),box-shadow var(--t-fast,.18s) var(--e-out,ease)}
.wa-float svg{width:31px;height:31px;fill:currentColor}
.wa-float:hover{transform:translateY(-3px);box-shadow:0 16px 30px -10px rgba(18,140,74,.6),0 3px 8px rgba(0,0,0,.2)}
.wa-float:focus-visible{outline:3px solid var(--plum,#2E1325);outline-offset:3px}
@media(max-width:560px){.wa-float{width:54px;height:54px}.wa-float svg{width:29px;height:29px}}
/* while the phone menu is open it would sit on top of the last links */
body:has(.nav-links.mobile-open) .wa-float{display:none}
/* room under the footer's last line, so the button never covers its end */
@media(max-width:1100px){.footer:has(+ .wa-float) .footer-bottom{padding-bottom:78px}}
@media print{.wa-float{display:none}}

/* ============================================================
   PRICE CALCULATOR (the order page, above the enquiry form)
   After the print labs' own configurators: the print and its price on
   the left, kept in view while there is room (js/prices.js pins it), the
   choices on the right as numbered steps. Sizes are tiles and papers are
   cards, each showing what it costs at the size chosen. "On a wall" draws
   the print to scale above a sofa, so a 10 × 12 and a 40 × 60 look as
   different as they are. From 900px down it is one column: the picture,
   the steps, then the price, with a slim price bar at the foot of the
   screen while the steps are being filled in. Working: src/prices.js.
   ============================================================ */
.calc{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(28px,4vw,56px);align-items:start}
.calc-side{min-width:0}
.calc-side.is-pinned{position:sticky;top:calc(var(--hdr-h-c,60px) + 16px)}

/* the stage: a wall with a sofa, or the print close up */
/* the stage gives up height on a shorter window, so the stage and the price
   below it still fit together and can stay in view */
.calc-stage{position:relative;overflow:hidden;height:clamp(300px,34vw,440px);max-height:max(240px,calc(var(--fit-h) - 400px));
  border-radius:var(--r-sm);background:linear-gradient(#F6F3EE,#EEEAE2)}
.calc-stage.is-close{background:var(--gallery)}
.calc-room{position:absolute;inset:0;pointer-events:none}
.calc-floor{position:absolute;left:0;right:0;bottom:0;height:12%;background:linear-gradient(#DAD2C5,#CFC6B7);
  box-shadow:0 -3px 0 #E7E1D7}
.calc-sofa{position:absolute;left:30%;bottom:12%;width:40%;height:16%;overflow:visible}
.calc-sofa .s-back{fill:#C7BEB1}
.calc-sofa .s-arm{fill:#BCB2A4}
.calc-sofa .s-seat{fill:#D0C8BB}
.calc-sofa .s-line{fill:none;stroke:#B9AFA1;stroke-width:.35}
.calc-sofa .s-leg{fill:#8C8376}
.calc-stage.is-close .calc-room{display:none}
.calc-scale:empty{display:none}
.calc-frame{position:absolute;left:30%;top:20%;width:40%;height:50%;overflow:hidden;background:var(--white);
  box-shadow:0 1px 2px rgba(30,16,22,.16),0 14px 30px -16px rgba(30,16,22,.5);
  transition:left var(--t-med) var(--ease),top var(--t-med) var(--ease),width var(--t-med) var(--ease),height var(--t-med) var(--ease)}
.calc-frame.is-empty{background:rgba(255,255,255,.55) !important;box-shadow:none;outline:1.5px dashed var(--muted-2);outline-offset:-1.5px}
.calc-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* the chosen paper's character over the print (data-surface and data-tone,
   set by js/prices.js): an impression to tell the papers apart, not a proof */
.calc-frame::before,.calc-frame::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none}
.calc-frame[data-surface="sheen"]::after{background:linear-gradient(118deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.3) 46%,rgba(255,255,255,0) 62%)}
.calc-frame[data-surface="metallic"]::after{mix-blend-mode:screen;
  background:linear-gradient(118deg,rgba(255,255,255,0) 20%,rgba(255,240,205,.34) 38%,rgba(205,226,255,.32) 52%,rgba(255,255,255,0) 70%)}
.calc-frame[data-surface="textured"]::after{mix-blend-mode:multiply;
  background:radial-gradient(rgba(70,50,30,.14) .7px,transparent .9px) 0 0/3px 3px,radial-gradient(rgba(70,50,30,.08) .6px,transparent .8px) 1.5px 1.5px/3px 3px}
.calc-frame[data-surface="canvas"]::after{mix-blend-mode:multiply;
  background:repeating-linear-gradient(0deg,rgba(60,40,20,.13) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(60,40,20,.13) 0 1px,transparent 1px 3px)}
.calc-frame[data-surface="matte"] .calc-img,.calc-frame[data-surface="textured"] .calc-img,.calc-frame[data-surface="canvas"] .calc-img{filter:contrast(.93) saturate(.92) brightness(1.02)}
.calc-frame.has-img[data-tone="natural"]::before{background:#F8F3E9;mix-blend-mode:multiply}
.calc-frame.has-img[data-tone="warm"]::before{background:#F2E7D3;mix-blend-mode:multiply}
.calc-scale{position:absolute;left:12px;top:10px;font-family:var(--f-mono);font-size:11px;color:var(--muted);
  background:rgba(246,243,238,.85);padding:2px 6px}
.calc-stage.is-over{outline:2px dashed var(--crimson);outline-offset:-6px}
.calc-viewbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px;margin-top:12px}
.calc-dims{font-family:var(--f-mono);font-size:12px;color:var(--muted);white-space:pre-wrap}

/* the price */
.calc-out{margin-top:16px;background:var(--white);border:1px solid var(--bd-rule);border-radius:var(--r-md);padding:clamp(16px,2vw,22px)}
.calc-spec{font-size:14px;line-height:1.5;color:var(--muted)}
.calc-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-top:4px}
.calc-total{font-family:var(--f-disp);font-size:clamp(1.8rem,3vw,2.35rem);font-weight:700;letter-spacing:-.02em;line-height:1.15;color:var(--ink)}
.calc-each{font-size:14px;color:var(--muted)}
.calc-note{margin-top:8px;font-size:13.5px;line-height:1.55;color:var(--muted)}
.calc-note:empty{display:none}
.calc-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.calc-wa svg{width:18px;height:18px;fill:#1A8F45;flex:none}
.calc-wa:hover svg{fill:currentColor}
.calc-sent{margin-top:12px;font-size:14px;line-height:1.5;color:var(--ink);font-weight:600}
.calc-sent:empty{display:none}
.calc-fine{margin-top:10px;font-size:12.5px;line-height:1.55;color:var(--muted)}
.calc-fine + .calc-fine{margin-top:4px}

/* the steps */
.calc-form{min-width:0}
.calc-step{border:0;margin:0;padding:0 0 24px;min-width:0}
.calc-step + .calc-step{border-top:1px solid var(--bd-card);padding-top:22px}
.calc-step:last-child{padding-bottom:0}
/* a legend floated is laid out like any heading, inside its step, rather
   than sitting in the step's top border */
.calc-label{float:left;width:100%;display:flex;align-items:center;gap:10px;padding:0;margin-bottom:14px;font-family:var(--f-body);font-weight:700;font-size:17px;color:var(--ink)}
.calc-label + *{clear:both}
.calc-n{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--plum);color:#fff;
  font-family:var(--f-mono);font-size:12px;font-weight:600;flex:none}
.calc-opt{font-family:var(--f-mono);font-size:10.5px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.calc-drop{padding:18px}
/* once a picture is chosen the box only offers another */
.calc-drop.has-pic{padding:11px 14px}
.calc-drop.has-pic b{margin:0;font-size:14px;font-weight:600}
.calc-drop.has-pic .mono-note{display:none}
.calc-drop.is-over{border-color:var(--crimson);border-style:solid;background:var(--gallery)}

/* sizes: a tile each, with its price on the chosen paper */
.calc-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(102px,1fr));gap:8px}
.calc-tile{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-height:58px;padding:9px 12px;text-align:left;
  border:1px solid var(--bd-rule);border-radius:var(--r-sm);background:var(--white);color:var(--ink);
  transition:border-color var(--t-fast),background var(--t-fast),color var(--t-fast)}
.calc-tile b{font-family:var(--f-mono);font-size:13.5px;font-weight:600}
.calc-tile .ct-price{font-size:12.5px;color:var(--muted)}
.calc-tile.is-ask .ct-price{font-style:italic}
.calc-tile:hover{border-color:var(--plum)}
.calc-tile.on{background:var(--plum);border-color:var(--plum);color:#fff}
.calc-tile.on .ct-price{color:rgba(255,255,255,.78)}
.calc-or{margin:18px 0 10px;font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.calc-size{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto;align-items:end;gap:10px}
.calc-size .field{margin:0}
.calc-size input{font-size:17px}
.calc-size input[aria-invalid="true"]{border-color:var(--crimson)}
.calc-x{padding-bottom:15px;color:var(--muted);font-size:18px}
.calc-unit{display:inline-flex;border:1px solid var(--bd-rule);border-radius:var(--r-pill);padding:3px;background:var(--white)}
.calc-seg{border:0;background:transparent;border-radius:var(--r-pill);padding:0 15px;min-height:44px;font:inherit;font-size:14px;color:var(--muted);cursor:pointer;
  transition:background var(--t-fast),color var(--t-fast)}
.calc-seg:hover{color:var(--ink)}
.calc-seg.on{background:var(--plum);color:#fff}
.calc-views .calc-seg{min-height:38px;font-size:13.5px}
.calc-msg{margin-top:10px;font-size:13.5px;color:var(--crimson-ink)}
.calc-msg:empty{display:none}

/* papers: a card each, with its texture and its price at the chosen size */
.calc-papers{display:grid;gap:8px}
.calc-family{margin:8px 0 0;font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.calc-family:first-child{margin-top:0}
.calc-paper{position:relative;display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:12px;
  padding:9px 14px 9px 9px;border:1px solid var(--bd-rule);border-radius:var(--r-sm);background:var(--white);cursor:pointer;
  transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.calc-paper input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.calc-paper:hover{border-color:var(--plum)}
.calc-paper.on{border-color:var(--plum);box-shadow:inset 0 0 0 1px var(--plum)}
.calc-paper.on::before{content:"";position:absolute;left:-1px;top:9px;bottom:9px;width:3px;border-radius:0 2px 2px 0;background:var(--crimson)}
.calc-paper:focus-within{outline:2px solid var(--crimson);outline-offset:2px}
.calc-paper:focus-within:not(:has(:focus-visible)){outline:none}
.cp-wrap{display:block;line-height:0}
/* a paper's photo and its "Quick view" open the Paper page's quick view; they
   sit above the card's own choice so a click on them does not choose */
.cp-qv{position:relative;z-index:2;cursor:pointer}
.cp-qv-thumb{padding:0;border:0;background:none;border-radius:6px}
.cp-qv-thumb:hover .cp-sw{box-shadow:0 0 0 2px var(--plum)}
.cp-qv-link{display:inline-block;margin-top:4px;padding:0;border:0;background:none;font:inherit;font-size:12.5px;
  color:var(--crimson-ink);text-decoration:underline;text-underline-offset:3px}
.cp-qv-link:hover{color:var(--plum)}
.cp-qv:focus-visible{outline:2px solid var(--crimson);outline-offset:2px}
@media (pointer:coarse){.cp-qv-link{padding:8px 0}}
.cp-sw{display:block;width:42px;height:42px;border-radius:6px;border:1px solid var(--line);overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),0 1px 3px rgba(30,16,22,.12)}
.cp-sw img{width:100%;height:100%;object-fit:cover;display:block}
.cp-txt{min-width:0}
.cp-txt b{display:block;font-size:14.5px;font-weight:600;line-height:1.3;color:var(--ink)}
.cp-txt span{display:block;margin-top:2px;font-family:var(--f-mono);font-size:11.5px;color:var(--muted)}
.cp-txt .cp-note{font-family:var(--f-body);font-size:12.5px;color:var(--ink)}
.cp-price{font-family:var(--f-mono);font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;text-align:right}
.cp-price.is-ask{font-weight:400;font-style:italic;color:var(--muted)}

.calc-qty{display:inline-flex;align-items:stretch;border:1px solid var(--bd-rule);border-radius:var(--r-sm);background:var(--white);overflow:hidden}
.calc-qty button{border:0;background:transparent;width:50px;min-height:50px;font-size:20px;color:var(--ink);cursor:pointer}
.calc-qty button:hover{background:var(--gallery)}
.calc-qty input{width:76px;border:0;border-inline:1px solid var(--bd-rule);border-radius:0;text-align:center;font:inherit;font-size:17px;
  color:var(--ink);background:var(--white);-moz-appearance:textfield;appearance:textfield}
.calc-qty input:focus{outline:2px solid var(--plum);outline-offset:-2px}
.calc-qty input::-webkit-inner-spin-button,.calc-qty input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.calc-seg:focus-visible,.calc-tile:focus-visible,.calc-qty button:focus-visible,.cc-link:focus-visible{outline:2px solid var(--crimson);outline-offset:2px}

/* the picture check: the rating is said in words and an icon, never by colour alone */
.calc-check{margin-top:14px;padding:16px 18px;border:1px solid var(--bd-rule);border-radius:var(--r-sm);background:var(--white);
  font-size:14px;line-height:1.55;color:var(--ink)}
.calc-check > * + *{margin-top:10px}
.cc-file{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px}
.cc-file b{word-break:break-all}
.cc-file span{font-family:var(--f-mono);font-size:12px;color:var(--muted)}
.cc-link{border:0;background:none;padding:0;font:inherit;font-size:13.5px;color:var(--crimson-ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.cc-file .cc-link{margin-left:auto}
.cc-rate{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-weight:600}
.cc-badge{display:inline-flex;align-items:center;gap:6px;padding:3px 11px;border-radius:var(--r-pill);font-size:13px;font-weight:700}
.cc--excellent .cc-badge,.cc--good .cc-badge{background:#E3F1E8;color:#1B6239}
.cc--acceptable .cc-badge{background:#FBEFD5;color:#6E4B00}
.cc--low .cc-badge{background:#FCE3E8;color:var(--crimson-ink)}
.cc-modes .calc-seg{min-height:40px;font-size:13.5px}
.cc-note{padding-top:10px;border-top:1px solid var(--bd-card);color:var(--muted-deep)}

/* the price at the foot of a phone's screen while the steps are filled in */
.calc-bar{position:fixed;left:0;right:0;bottom:0;z-index:160;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px max(16px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
  background:var(--white);border-top:1px solid var(--bd-rule);box-shadow:0 -10px 26px -18px rgba(30,16,22,.45);
  transform:translateY(110%);transition:transform var(--t-med) var(--ease)}
.calc-bar.is-on{transform:none}
.calc-bar-price{min-width:0}
.calc-bar-label{display:block;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.calc-bar b{font-family:var(--f-disp);font-size:20px;line-height:1.2;color:var(--ink)}
.calc-bar .btn{padding:12px 18px;font-size:14px;flex:none}
body.calc-bar-on .wa-float{bottom:calc(78px + env(safe-area-inset-bottom))}
@media(min-width:901px){.calc-bar{display:none}}
@media(prefers-reduced-motion:reduce){.calc-frame,.calc-bar{transition:none}}

/* "Add to my enquiry" scrolls the form into view clear of the header */
#orderForm{scroll-margin-top:calc(var(--hdr-h-c,60px) + 24px)}
/* the calculator and the form are two steps of one order: half the usual
   gap between them (Layout in the admin can still set its own) */
.section:has(#calc) + .section{--sec-pt:clamp(min(32px,4vh),min(4.5vw,7vh),62px)}

/* the price list: papers down the side, sizes across, scrolling sideways
   on a narrow screen with the paper's name kept in view */
/* The table (760px at least, first column sticky) scrolls inside this box.
   contain:paint keeps it there: without it Chrome let the table widen the whole
   page once the list had been shown and the window was then narrowed — a tablet
   turned upright, a window dragged smaller — 766px wide on a 390px screen. */
.price-shell{overflow-x:auto;contain:paint}
.price-shell:focus-visible{outline:2px solid var(--crimson);outline-offset:2px}
.price-table{min-width:760px}
.price-table th[scope="col"]{white-space:nowrap}
.price-table th[scope="col"]:not(:first-child){text-align:right}
.price-table th[scope="row"]{position:sticky;left:0;z-index:1;background:var(--white);text-align:left;font-weight:600;
  padding:16px;border-bottom:1px solid var(--bd-card);font-family:var(--f-body);font-size:14.5px;letter-spacing:0;text-transform:none;color:var(--ink);min-width:210px}
.price-table th[scope="row"] span{display:block;margin-top:2px;font-family:var(--f-mono);font-size:11.5px;font-weight:400;color:var(--muted)}
.price-table td{white-space:nowrap;text-align:right}
.price-table tr:hover th[scope="row"]{background:var(--gallery)}
.price-table .price-ask{text-align:left;color:var(--muted);font-style:italic}
/* only where the table is wider than the screen */
.price-hint{display:none;margin-top:12px}
.price-foot{margin-top:14px;font-size:14px;line-height:1.6;color:var(--muted);max-width:70ch}
@media(max-width:860px){.price-hint{display:block}}

@media(max-width:900px){
  /* one column: the picture, the steps, then the price */
  .calc{grid-template-columns:1fr;row-gap:0}
  .calc-side{display:contents}
  .calc-stage{order:1;height:clamp(230px,64vw,360px)}
  .calc-viewbar{order:2}
  .calc-form{order:3;margin-top:28px}
  .calc-out{order:4;margin-top:24px}
}
@media(max-width:560px){
  .calc-size{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
  .calc-size .calc-unit{grid-column:1/-1;justify-self:start}
  .calc-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .calc-tile{padding:8px 10px}
  .calc-paper{grid-template-columns:36px minmax(0,1fr) auto;gap:10px}
  .cp-sw{width:36px;height:36px}
  .calc-actions .btn{flex:1 1 100%;justify-content:center}
  .price-table th[scope="row"]{min-width:160px}
}

/* ============================================================
   VIEWPORT SYSTEM — height as well as width
   ------------------------------------------------------------
   The responsive system above is driven by width. What a visitor actually
   gets is a window: a 1920×1080 laptop at 125% is a 1536×730 window once the
   browser's bars are taken off, a 1366×768 one about 1366×650, a phone held
   sideways 844×390. Those are where things stopped fitting. So:

   --vh-full  the visible height: 100svh where supported (a phone's browser
              bars counted as showing, so nothing jumps as they slide away),
              else 100vh.
   --fit-h    the room under the condensed header — the most any picture may
              be tall (artworks, portraits, covers), so a work can always be
              seen whole.

   Spacing (sections, page heads, the home banner) uses min(width term,
   height term) above, so it tightens on a short window and is untouched on a
   tall one. The artists rail fits its cards to the height in site.js.
   Checked by build/16-responsive-audit.mjs, which tests laptop windows and
   phones sideways as well as device sizes.
   ============================================================ */
:root{--vh-full:100vh;--fit-h:calc(var(--vh-full) - var(--hdr-h-c,60px) - 32px)}
@supports (height:100svh){:root{--vh-full:100svh}}

/* the home banner's print shrinks with a short phone, so the headline
   still starts on the first screen */
@media (max-width:820px){
  .hero-grid > .hero-plate{max-width:min(340px,41vh)}
}
/* a short window: the WhatsApp button takes less of it */
@media (max-height:700px){
  .wa-float{width:50px;height:50px;right:max(12px,env(safe-area-inset-right));bottom:max(12px,calc(env(safe-area-inset-bottom) + 6px))}
  .wa-float svg{width:27px;height:27px}
}
/* a very short window — a phone held sideways, a small laptop at high
   scaling: the header steps out of the way while reading down the page and
   comes back the moment the visitor scrolls up (site.js, initTopbar) */
@media (max-height:599px){
  .topbar{transition:transform var(--t-med) var(--e-soft),box-shadow var(--t-med) var(--e-soft),margin-bottom var(--t-med) var(--e-soft)}
  .topbar.is-tucked{transform:translateY(-100%)}
}

/* ---- Small labels and taps on phones and tablets (audit 2026-10-13) ----
   The calculator, the map credit and the journal's artist chips came after
   the small-type rule above, so their 10.5–11px labels stayed that size on a
   phone. And three of the calculator's taps were under a finger's width. */
@media (max-width:1040px),(pointer:coarse){
  .calc-opt,.calc-or,.calc-family,.calc-scale,.calc-bar-label,.map .map-credit,.aw-artist span span{font-size:12px}
}
@media (pointer:coarse){
  .calc-views .calc-seg{min-height:44px}
  .cp-qv-link{padding:12px 0;margin-top:-4px}
  .cp-qv-thumb{margin:-4px;padding:4px}
}

/* ---- Footer social icons ----
   ".fcol a" (every footer link a padded block, a flex row on touch screens)
   came later than ".social a" and won, so each icon sat in the top-left of
   its circle. Centred again, and a finger-sized circle on touch screens. */
.fcol .social a{display:grid;place-items:center;padding:0;min-height:0}
@media (pointer:coarse){.fcol .social a{width:44px;height:44px}}

/* ---- Footer social icons: white circles, beneath the last column ----
   Plum icons on white, crimson when pointed at. Under "Visit the studio" by
   default (Footer → Social links → Where the icons go). */
.fcol .social a,.social a{background:#fff;border-color:#fff;color:var(--plum)}
.fcol .social a:hover,.social a:hover{background:var(--crimson);border-color:var(--crimson);color:#fff}
.fcol-social{margin-top:20px}
.fcol-title.fcol-title--sub{margin-bottom:12px}

/* ---- A service's fuller description, under its picture ---- */
.svc-more{margin-top:clamp(24px,3vw,34px);max-width:62ch}
.svc-more > :last-child{margin-bottom:0}