/* ============================================================
   URN ATELIER — Homepage design system
   Palette + type + layout derived from 产品手册.pptx page 1
   ============================================================ */

/* ---------- Design tokens (sampled from PPTX page 1) ---------- */
:root{
  /* Paper ground — sampled from the catalogue cover */
  --paper:        #EDE7DD;   /* base field            */
  --paper-hi:     #F3EEE6;   /* lifted / card         */
  --paper-lo:     #E4DBCF;   /* corners / vignette    */
  --paper-edge:   #D8CDBC;   /* hairline on paper     */

  /* Ink — the cover wordmark */
  --ink:          #23211F;
  --ink-soft:     #36312E;
  --ink-mid:      #5F5850;
  --ink-faint:    #8C8272;

  /* Gold — the seal, rule and ornament lines */
  --gold:         #B08A4A;
  --gold-deep:    #9A692D;
  --gold-line:    #BE9A66;
  --gold-pale:    #D6C5A8;

  /* Dark lacquer panel */
  --lacquer:      #17140F;
  --lacquer-2:    #221D16;

  --maxw: 1320px;
  --gut: clamp(20px, 5vw, 72px);

  --serif: "Cormorant Garamond", "EB Garamond", Georgia, "Times New Roman", serif;
  --serif-alt: "EB Garamond", Georgia, serif;
  --sans: "Jost", "Helvetica Neue", Arial, sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif-alt);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

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

::selection{ background:var(--gold); color:#fff; }

a{ color:inherit; text-decoration:none; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--paper); padding:12px 20px;
  font-family:var(--sans); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
}
.skip:focus{ left:14px; top:14px; }

.shell{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gut);
}

/* ---------- Shared type ---------- */
.eyebrow{
  display:flex; align-items:center; gap:14px;
  margin:0 0 22px;
  font-family:var(--sans);
  font-size:11px; font-weight:400;
  letter-spacing:.34em; text-transform:uppercase;
  color:var(--gold-deep);
}
.eyebrow--gold{ color:var(--gold); }
.rule-short{ display:block; width:44px; height:1px; background:currentColor; opacity:.75; flex:none; }

.sec-title{
  margin:0;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(34px, 5.1vw, 62px);
  line-height:1.06;
  letter-spacing:-.012em;
  color:var(--ink);
}
.sec-title em{ font-style:italic; font-weight:300; color:var(--gold-deep); }
.sec-title--tight{ margin-bottom:20px; }

.sec-head{ max-width:760px; margin-bottom:clamp(40px,6vw,74px); }
.sec-head--wide{ max-width:900px; }
.sec-lede{
  margin:24px 0 0;
  max-width:62ch;
  font-size:17.5px; line-height:1.78; color:var(--ink-mid);
}

.section{ padding-block:clamp(76px,10vw,148px); position:relative; }

/* ---------- Page rhythm ----------------------------------------------
   The three chapters between the Collections and the Philosophy read as
   rooms rather than slabs: the lacquer chapter opens generously and hands
   over, the dark Artworks room takes the most air, and Philosophy is a
   deliberate pause before the enquiry.                                     */
.lacquer  { padding-block:clamp(84px,11vw,166px) clamp(70px,8.6vw,126px); }
.artworks { padding-block:clamp(92px,12vw,184px); }
.philosophy{ padding-block:clamp(88px,11.4vw,170px); }


/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background .45s var(--ease), box-shadow .45s var(--ease), backdrop-filter .45s var(--ease);
}
.site-header.is-stuck{
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  backdrop-filter:saturate(150%) blur(14px);
  box-shadow:0 1px 0 rgba(154,105,45,.16);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
  min-height:78px;
}

.brand{ display:flex; align-items:center; gap:12px; }
.brand-seal{ width:26px; height:29px; }
.brand-word{
  font-family:var(--serif);
  font-size:19px; font-weight:400;
  letter-spacing:.30em;
  color:var(--ink);
  text-transform:uppercase;
}

.nav-desktop{ display:none; gap:38px; }
.nav-desktop a{
  position:relative;
  font-family:var(--sans); font-size:12px; font-weight:400;
  letter-spacing:.20em; text-transform:uppercase;
  color:var(--ink-soft);
  padding-block:6px;
}
.nav-desktop a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--gold); transition:right .4s var(--ease);
}
.nav-desktop a:hover::after,
.nav-desktop a:focus-visible::after{ right:0; }

.header-actions{ display:flex; align-items:center; gap:16px; }

.btn-enquire{
  display:none;
  padding:11px 24px;
  border:1px solid var(--gold-line);
  font-family:var(--sans); font-size:11px; letter-spacing:.20em; text-transform:uppercase;
  color:var(--gold-deep);
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.btn-enquire:hover{ background:var(--gold-deep); border-color:var(--gold-deep); color:#fff; }

.nav-toggle{
  width:42px; height:42px; padding:0;
  display:grid; place-content:center; gap:6px;
  background:none; border:0; cursor:pointer;
}
.nav-toggle span{ display:block; width:24px; height:1px; background:var(--ink); transition:transform .35s var(--ease), opacity .3s; }
.nav-toggle[aria-expanded="true"] span:first-child{ transform:translateY(3.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child{ transform:translateY(-3.5px) rotate(-45deg); }

.nav-mobile{
  position:fixed; inset:0; z-index:99;
  display:grid; align-content:center; gap:8px;
  padding:0 32px;
  background:var(--paper);
  opacity:0; visibility:hidden; transform:translateY(-10px);
  transition:opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;
}
.nav-mobile.is-open{ opacity:1; visibility:visible; transform:none; }
.nav-mobile a{
  font-family:var(--serif);
  font-size:30px; font-weight:400;
  padding-block:13px;
  border-bottom:1px solid var(--paper-edge);
  color:var(--ink);
}
.nav-mobile .nm-enquire{
  margin-top:18px; border-bottom:0;
  font-family:var(--sans); font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-deep);
}


/* ============================================================
   SECTION 1 — HERO  (translation of PPTX page 1)
   ============================================================ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  /* Vertical budget, kept in variables because BOTH the hero padding and the
     stage height are derived from it (see .hero-stage and the desktop rule
     that reserves the scroll-cue lane). Never hard-code these twice. */
  --hero-top:96px;
  --hero-bottom:84px;
  padding:var(--hero-top) var(--gut) var(--hero-bottom);
}

/* --- full-bleed paper ground + catalogue line-art --- */
.hero-ground{ position:absolute; inset:0; z-index:0; pointer-events:none; }

.hero-ground::before{           /* seamless paper grain, blended onto the ground */
  content:""; position:absolute; inset:0;
  background:
    url("../images/paper-tile.jpg") center/1180px auto repeat,
    var(--paper);
  background-blend-mode:soft-light, normal;
  opacity:.42;
}
.hero-vignette{                  /* the cover's soft darkening at the corners */
  position:absolute; inset:0;
  background:
    radial-gradient(122% 92% at 50% 44%, rgba(255,253,248,.72) 0%, rgba(255,253,248,0) 46%),
    radial-gradient(88% 76% at 50% 50%, rgba(255,255,255,0) 52%, rgba(186,170,146,.30) 100%);
}
/* Corner line-art — the catalogue cover's own peony line drawing */
.la{
  position:absolute;
  width:min(30vw,300px);
  aspect-ratio:300/411;
  background:url("../images/lineart-corner.png") no-repeat center/contain;
  opacity:.42;
}
.la--tl{ top:-14px;   left:-14px;  transform:scaleY(-1); }
.la--tr{ top:-14px;   right:-14px; transform:scale(-1,-1); }
.la--bl{ bottom:-14px;left:-14px; }
.la--br{ bottom:-14px;right:-14px; transform:scaleX(-1); }

/* --- the stage: product plate above, copy below (as on the cover) --- */
.hero-stage{
  position:relative; z-index:2;
  width:100%;
  max-width:min(1180px, 92vw);
  display:grid;
  /* Row 2 (the copy) keeps its natural height; row 1 (the plate) absorbs
     whatever is left. An `auto auto` grid plus a max-height could not do
     this — max-height never compresses auto rows, which is exactly how the
     CTA ended up below the fold. */
  grid-template-rows:minmax(0, 1fr) auto;
  /* stretch, NOT center: the plate cell must receive a definite height so the
     image's max-height resolves. With `center` the cell was content-sized and
     the plate rendered at natural size, covering the header. The plate itself
     centres its image, so the visual result is identical. */
  align-items:stretch;
  justify-items:center;
  /* exactly the space the hero's own padding leaves free */
  height:calc(100svh - var(--hero-top) - var(--hero-bottom));
}

.hero-plate{
  margin:0;
  width:100%;
  min-height:0;
  display:flex; align-items:center; justify-content:center;
}
.hero-plate img{
  /* Natural size is 550x518. The plate may only ever scale DOWN, and only by
     as much as the free height demands, so the cover composition is kept. */
  width:auto; height:auto;
  max-width:min(42vw, 410px);
  max-height:100%;
  object-fit:contain;
  /* the plate reads as a photograph lifted off the page */
  filter:drop-shadow(0 24px 40px rgba(58,44,24,.20));
}

.hero-copy{
  margin-top:clamp(4px,1.2vh,18px);
  text-align:center;
  display:flex; flex-direction:column; align-items:center;
}

.hero-seal{ margin:0 0 clamp(8px,1.1vh,18px); line-height:0; }
.hero-seal img{ width:28px; height:31px; }

/* Wordmark — the cover's centrepiece */
.hero-wordmark{
  margin:0;
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(34px, min(7.6vh, 9vw), 104px);
  line-height:.98;
  letter-spacing:.115em;
  /* optical trim so the tracking looks even */
  text-indent:.115em;
  color:var(--ink);
  white-space:nowrap;
}

/* Gold hairline rule with the centre diamond, exactly as on the cover */
.hero-rule{
  display:flex; align-items:center; justify-content:center;
  gap:14px;
  width:min(66vw, 560px);
  margin:clamp(11px,1.7vh,28px) 0 clamp(11px,1.5vh,26px);
}
.hero-rule .r-line{ display:block; flex:1; height:1px; background:linear-gradient(90deg, transparent, var(--gold-line) 22%, var(--gold-line) 78%, transparent); }
.hero-rule .r-diamond{
  width:5px; height:5px; flex:none;
  background:var(--gold);
  transform:rotate(45deg);
}

.hero-kicker{
  margin:0;
  font-family:var(--serif-alt);
  font-size:clamp(15px,min(2.3vh,2.1vw),24px);
  font-weight:400;
  letter-spacing:.012em;
  color:var(--gold-deep);
}

.hero-tick{ display:block; width:32px; height:1px; background:var(--gold-line); margin:clamp(11px,1.5vh,22px) 0; }
.hero-tick--2{ margin:clamp(9px,1.2vh,18px) 0; }

.hero-sub{
  margin:0;
  font-family:var(--serif-alt);
  font-size:clamp(14px,min(1.9vh,1.7vw),19px);
  letter-spacing:.016em;
  color:var(--ink-soft);
}
.hero-note{
  margin:0;
  font-family:var(--serif-alt);
  font-size:clamp(12px,min(1.55vh,1.4vw),15px);
  color:var(--ink-mid);
}

.hero-cta{
  display:flex; flex-wrap:wrap; justify-content:center; gap:12px;
  margin-top:clamp(16px,2.2vh,32px);
}

.hero-scroll{
  position:absolute; bottom:30px; left:50%; transform:translateX(-50%);
  z-index:3;
  display:none; flex-direction:column; align-items:center; gap:10px;
}
.hs-label{
  font-family:var(--sans); font-size:10px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--ink-faint);
}
.hs-line{ display:block; width:1px; height:44px; background:linear-gradient(180deg, var(--gold-line), transparent); }


/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:50px; padding:0 32px;
  font-family:var(--sans); font-size:11.5px; font-weight:400;
  letter-spacing:.20em; text-transform:uppercase;
  border:1px solid transparent; cursor:pointer;
  transition:background .38s var(--ease), color .38s var(--ease), border-color .38s var(--ease), transform .38s var(--ease);
}
.btn--solid{ background:var(--lacquer); color:#F2EDE4; border-color:var(--lacquer); }
.btn--solid:hover{ background:var(--gold-deep); border-color:var(--gold-deep); transform:translateY(-2px); }
.btn--ink{ background:var(--ink); border-color:var(--ink); }
.btn--ink:hover{ background:var(--gold-deep); border-color:var(--gold-deep); }
.btn--ghost{ background:transparent; color:var(--ink-soft); border-color:var(--paper-edge); }
.btn--ghost:hover{ border-color:var(--gold-line); color:var(--gold-deep); }
.btn--full{ width:100%; }


/* ============================================================
   SECTION 2 — COLLECTIONS
   ============================================================ */
.collections{ background:var(--paper); }

.col-grid{
  display:grid;
  gap:clamp(24px,3vw,40px);
  grid-template-columns:1fr;
}

.col-card{
  display:flex; flex-direction:column;
  background:var(--paper-hi);
  border:1px solid var(--paper-edge);
  transition:transform .55s var(--ease), box-shadow .55s var(--ease), border-color .55s var(--ease);
}
.col-card:hover{
  transform:translateY(-6px);
  border-color:var(--gold-pale);
  box-shadow:0 30px 60px -34px rgba(70,54,30,.34);
}

.cc-media{
  position:relative; display:block; overflow:hidden;
  /* matches the aspect of the catalogue plates exactly — nothing is cropped away */
  aspect-ratio:4/3;
  background:var(--lacquer);
}
.cc-media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--ease);
}
.col-card:hover .cc-media img{ transform:scale(1.035); }

.cc-body{ padding:clamp(24px,2.8vw,38px); display:flex; flex-direction:column; flex:1; }

.cc-index{
  margin:0 0 12px;
  font-family:var(--serif); font-size:28px; font-weight:300;
  letter-spacing:.1em;
  color:var(--gold);
  line-height:1;
}
.cc-name{
  margin:0 0 14px;
  font-family:var(--serif); font-size:clamp(24px,2.6vw,32px); font-weight:400;
  letter-spacing:.005em; line-height:1.16;
}
.cc-desc{ margin:0 0 24px; font-size:17px; line-height:1.76; color:var(--ink-mid); max-width:46ch; }

.cc-meta{
  margin:auto 0 0; padding-top:20px;
  border-top:1px solid var(--paper-edge);
  display:grid; gap:9px;
}
.cc-meta > div{ display:flex; justify-content:space-between; gap:14px; }
.cc-meta dt{
  font-family:var(--sans); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-deep);
}
.cc-meta dd{ margin:0; font-family:var(--serif-alt); font-size:15.5px; color:var(--ink-soft); text-align:right; }


/* ============================================================
   SECTION 3 — THE ART OF LACQUER
   ============================================================ */
.lacquer{ background:linear-gradient(180deg, var(--paper) 0%, #E9E2D6 100%); }

.lacquer-grid{ display:grid; gap:clamp(40px,6vw,80px); grid-template-columns:1fr; }

.lq-lede{
  margin:0 0 20px;
  font-family:var(--serif); font-size:clamp(20px,2.3vw,27px); font-weight:300;
  font-style:italic; color:var(--gold-deep);
}
.lq-body{ margin:0 0 40px; max-width:60ch; font-size:17px; line-height:1.82; color:var(--ink-mid); }

.steps{ list-style:none; margin:0; padding:0; display:grid; gap:0; }
.step{
  display:grid; grid-template-columns:auto 1fr; gap:20px;
  padding-block:clamp(20px,2.6vw,28px);
  border-top:1px solid var(--paper-edge);
}
.step:last-child{ border-bottom:1px solid var(--paper-edge); }
.st-num{
  font-family:var(--sans); font-size:11px; letter-spacing:.16em;
  color:var(--gold-deep);
  width:36px; height:36px; flex:none;
  display:grid; place-content:center;
  border:1px solid var(--gold-line); border-radius:50%;
}
.st-body h3{
  margin:0 0 7px; font-family:var(--serif); font-size:21px; font-weight:400; letter-spacing:.004em;
}
.st-body p{ margin:0; font-size:16.5px; line-height:1.74; color:var(--ink-mid); }

.lq-media{ position:relative; }
.lq-fig{ margin:0; overflow:hidden; background:var(--lacquer); }
.lq-fig img{ width:100%; height:100%; object-fit:cover; }
.lq-fig--a{ aspect-ratio:4/5; }
.lq-fig--b{
  aspect-ratio:4/3;
  width:min(58%, 300px);
  margin-top:-14%;
  margin-left:auto;
  border:8px solid var(--paper);
}
.lq-cap{
  margin:22px 0 0;
  font-family:var(--sans); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-faint); line-height:1.9;
}


/* ============================================================
   SECTION 4 — FEATURED ARTWORKS
   ============================================================ */
.artworks{ background:var(--lacquer); color:#EDE7DD; }
.artworks .eyebrow{ color:var(--gold); }
.artworks .sec-title{ color:#F4EFE6; }
.artworks .sec-title em{ color:var(--gold); }

.aw-grid{ display:grid; gap:clamp(14px,1.8vw,24px); grid-template-columns:1fr; }

.aw{
  position:relative; margin:0; overflow:hidden;
  background:var(--lacquer-2);
}
.aw img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.3s var(--ease);
}
.aw:hover img{ transform:scale(1.04); }

.aw figcaption{
  position:absolute; inset:auto 0 0 0;
  padding:clamp(18px,2.4vw,28px);
  display:flex; flex-direction:column; gap:5px;
  background:linear-gradient(180deg, rgba(14,12,9,0) 0%, rgba(14,12,9,.82) 62%, rgba(14,12,9,.94) 100%);
}
.aw-name{
  font-family:var(--serif); font-size:clamp(18px,2vw,24px); font-weight:400; letter-spacing:.004em;
  color:#F6F1E8;
}
.aw-sku{
  font-family:var(--sans); font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold);
}

.aw--lead{ aspect-ratio:4/3; }
.aw--port{ aspect-ratio:4/5; }
.aw--wide{ aspect-ratio:3/2; }


/* ============================================================
   SECTION 5 — BESPOKE
   ============================================================ */
.bespoke{ background:var(--paper); }
.bespoke-grid{ display:grid; gap:clamp(38px,5.5vw,76px); grid-template-columns:1fr; align-items:center; }

.bs-media{ position:relative; }
.bs-fig{ margin:0; overflow:hidden; background:var(--lacquer); }
.bs-fig img{ width:100%; height:100%; object-fit:cover; }
.bs-fig--main{ aspect-ratio:11/8; }
.bs-fig--sub{
  aspect-ratio:4/3;
  width:min(46%, 250px);
  margin-top:-18%;
  margin-left:auto;
  margin-right:-6%;
  border:8px solid var(--paper);
}

.bs-body{ margin:0 0 20px; max-width:58ch; font-size:17px; line-height:1.8; color:var(--ink-mid); }

.bs-list{ list-style:none; margin:32px 0 40px; padding:0; display:grid; gap:0; }
.bs-list li{
  display:grid; grid-template-columns:132px 1fr; gap:20px;
  padding-block:16px;
  border-top:1px solid var(--paper-edge);
}
.bs-list li:last-child{ border-bottom:1px solid var(--paper-edge); }
.bk{
  font-family:var(--sans); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-deep); padding-top:3px;
}
.bv{ font-size:16.5px; line-height:1.72; color:var(--ink-soft); }


/* ============================================================
   SECTION 6 — PHILOSOPHY
   ============================================================ */
.philosophy{ background:var(--paper-lo); text-align:center; }
.philosophy-inner{ max-width:920px; margin-inline:auto; display:flex; flex-direction:column; align-items:center; }

.ph-eyebrow{
  margin:0 0 clamp(26px,3.4vw,42px);
  font-family:var(--sans); font-size:11px; letter-spacing:.44em; text-transform:uppercase;
  color:var(--gold-deep); text-indent:.44em;
}
.ph-quote{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(31px,5.6vw,70px);
  font-weight:300; font-style:italic;
  line-height:1.16; letter-spacing:-.008em;
  color:var(--ink);
  max-width:20ch;
}
.ph-body{
  margin:clamp(30px,3.6vw,46px) 0 0;
  max-width:64ch;
  font-size:17px; line-height:1.86; color:var(--ink-mid);
}
.ph-rule{ display:block; margin:clamp(34px,4vw,52px) 0 22px; }
.ph-rule i{ display:block; width:64px; height:1px; background:var(--gold-line); }
.ph-sign{
  margin:0;
  font-family:var(--sans); font-size:10.5px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--ink-faint);
}


/* ============================================================
   SECTION 7 — ENQUIRY
   ============================================================ */
.enquiry{ background:var(--paper); }
.enquiry-grid{ display:grid; gap:clamp(40px,5.5vw,76px); grid-template-columns:1fr; align-items:start; }

.enq-body{ margin:0 0 34px; max-width:52ch; font-size:17px; line-height:1.8; color:var(--ink-mid); }
/* Only exists when a work reference is carried in from a detail page */
.enq-ref{
  margin:0 0 24px; padding:12px 18px;
  border-left:2px solid var(--gold-line);
  background:var(--paper-hi);
  font-family:var(--sans); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold-deep);
}
.enq-list{ margin:0; padding:0; display:grid; gap:0; }
.enq-list > div{
  display:grid; grid-template-columns:130px 1fr; gap:18px;
  padding-block:15px; border-top:1px solid var(--paper-edge);
}
.enq-list > div:last-child{ border-bottom:1px solid var(--paper-edge); }
.enq-list dt{
  font-family:var(--sans); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-deep); padding-top:3px;
}
.enq-list dd{ margin:0; font-size:16px; color:var(--ink-soft); }

.enq-form{
  display:grid; gap:18px;
  padding:clamp(24px,3.4vw,42px);
  background:var(--paper-hi);
  border:1px solid var(--paper-edge);
}
.f-row{ display:grid; gap:18px; }
.f-field{ display:grid; gap:9px; }
.f-label{
  font-family:var(--sans); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-faint);
}
.enq-form input,
.enq-form select,
.enq-form textarea{
  width:100%;
  padding:13px 15px;
  font-family:var(--serif-alt); font-size:16px; color:var(--ink);
  background:var(--paper);
  border:1px solid var(--paper-edge);
  border-radius:0;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.enq-form textarea{ resize:vertical; min-height:112px; }
.enq-form input:focus,
.enq-form select:focus,
.enq-form textarea:focus{
  outline:none; border-color:var(--gold); background:#fff;
}
.enq-form select{ appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--gold-deep) 50%),linear-gradient(135deg,var(--gold-deep) 50%,transparent 50%);
  background-position:calc(100% - 20px) 22px, calc(100% - 14px) 22px;
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat;
}
.f-note{
  margin:2px 0 0;
  font-family:var(--sans); font-size:10.5px; letter-spacing:.06em;
  color:var(--ink-faint); text-align:center;
}

/* ---------- Enquiry submission states ---------- */

/* Honeypot. Pushed off-canvas rather than display:none, because the naive bots
   we are filtering skip anything marked hidden. Never visible, never focusable,
   and hidden from assistive tech via aria-hidden on the wrapper. */
.f-hp{
  position:absolute; left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
  opacity:0; pointer-events:none;
}
.f-hp label{ display:block; }

/* Inline field errors — only rendered after the server rejects a submission. */
.f-field.is-invalid input,
.f-field.is-invalid select,
.f-field.is-invalid textarea{
  border-color:#9C3B2E;
}
.f-error{
  font-family:var(--sans); font-size:11px; letter-spacing:.04em; line-height:1.5;
  color:#9C3B2E;
}

/* Success / failure feedback under the submit button. */
.enq-status{ margin:0; }
.enq-status:empty{ display:none; }
.enq-status.is-ok,
.enq-status.is-error{
  padding:12px 16px;
  font-family:var(--sans); font-size:12.5px; line-height:1.6; letter-spacing:.02em;
  text-align:left;
  background:var(--paper);
}
.enq-status.is-ok{ border-left:2px solid var(--gold-line); color:var(--gold-deep); }
.enq-status.is-error{ border-left:2px solid #9C3B2E; color:#8C3325; }


/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ background:var(--lacquer); color:#C9C0B2; padding-top:clamp(56px,7vw,92px); }
.footer-grid{
  display:grid; gap:clamp(34px,4.4vw,58px);
  grid-template-columns:1fr;
  padding-bottom:clamp(38px,5vw,62px);
}
.ft-logo{ width:66px; height:auto; margin-bottom:20px; }
.ft-tag{
  margin:0; font-family:var(--serif-alt); font-size:14.5px; line-height:1.82;
  letter-spacing:.03em; color:#8C8478;
}
.ft-nav h3{
  margin:0 0 18px;
  font-family:var(--sans); font-size:10px; font-weight:400;
  letter-spacing:.24em; text-transform:uppercase; color:var(--gold);
}
.ft-nav ul{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.ft-nav a{
  font-family:var(--serif-alt); font-size:15px; color:#B3AA9C;
  transition:color .3s var(--ease);
}
.ft-nav a:hover{ color:var(--gold-line); }

.footer-base{
  display:flex; flex-wrap:wrap; gap:12px 26px; justify-content:space-between;
  padding-block:26px;
  border-top:1px solid rgba(214,197,168,.16);
}
.footer-base p{
  margin:0;
  font-family:var(--sans); font-size:11px; letter-spacing:.1em; color:#7E766A;
}


/* ============================================================
   REVEAL (subtle, single, no parallax / no gimmicks)
   ============================================================ */
.rv{ opacity:0; transform:translateY(22px); }
.rv.is-in{ opacity:1; transform:none; transition:opacity .9s var(--ease), transform .9s var(--ease); }
@media (prefers-reduced-motion: reduce){
  .rv{ opacity:1; transform:none; }
}


/* ============================================================
   RESPONSIVE — tablet
   ============================================================ */
@media (min-width:720px){
  .col-grid{ grid-template-columns:repeat(2,1fr); }
  .f-row{ grid-template-columns:1fr 1fr; }
  .aw-grid{ grid-template-columns:repeat(2,1fr); }
  .aw--lead{ grid-column:span 2; }
  .footer-grid{ grid-template-columns:1.5fr 1fr 1fr 1fr; }
  .header-inner{ min-height:88px; }
  .brand-seal{ width:30px; height:33px; }
  .brand-word{ font-size:21px; }
}

/* ============================================================
   RESPONSIVE — desktop
   ============================================================ */
@media (min-width:1000px){
  .nav-desktop{ display:flex; }
  .btn-enquire{ display:inline-flex; }
  .nav-toggle{ display:none; }
  .nav-mobile{ display:none; }

  /* Collections — two large plates per row, hung out of step: a gallery wall, not a shop grid */
  .col-grid{ grid-template-columns:repeat(2,1fr); gap:clamp(28px,3.2vw,52px) clamp(24px,3vw,48px); }
  .col-card--tall:nth-child(even){ margin-top:clamp(36px,4.4vw,72px); }

  .lacquer-grid{ grid-template-columns:1.04fr .96fr; align-items:start; }
  .bespoke-grid{ grid-template-columns:1.06fr .94fr; }
  .bespoke-grid .bs-media{ order:0; }
  .bespoke-grid .bs-copy{ order:1; }
  .enquiry-grid{ grid-template-columns:.92fr 1.08fr; }

  /* Featured artworks — editorial mosaic */
  .aw-grid{
    grid-template-columns:repeat(6,1fr);
    grid-auto-rows:clamp(120px,13vw,190px);
    gap:clamp(14px,1.4vw,22px);
  }
  .aw--lead{ grid-column:span 4; grid-row:span 3; }
  .aw--port{ grid-column:span 2; grid-row:span 3; }
  .aw--wide{ grid-column:span 3; grid-row:span 2; }
  .aw-grid > .aw:nth-of-type(4){ grid-column:span 3; grid-row:span 2; }

  /* From here up the scroll cue is visible. It is absolutely positioned in a
     reserved lane at the foot of the hero, so the bottom padding IS that lane
     — this is the one number that guarantees the cue can never land on the
     copy or the CTA (cue is 70px tall, sitting 30px off the hero's edge). */
  .hero{ --hero-bottom:116px; }
  .hero-scroll{ display:flex; }
}

/* ============================================================
   RESPONSIVE — large desktop
   ============================================================ */
@media (min-width:1440px){
  :root{ --maxw:1400px; }
  .hero-plate img{ max-width:min(46vw, 500px); }
}

@media (min-width:1800px){
  :root{ --maxw:1520px; }
}

/* ---------- Hero — narrow / mobile: re-flow, keep every element ---------- */
@media (max-width:999px){
  .hero{ --hero-top:88px; --hero-bottom:64px; min-height:auto; }
  .hero-stage{ max-width:620px; height:auto; display:flex; flex-direction:column; align-items:center; }
  .hero-plate{ width:auto; }
  .hero-plate img{ width:min(74vw, 380px); height:auto; max-width:100%; max-height:none; }
  .hero-rule{ width:min(84vw, 420px); }
  .hero-scroll{ display:none; }
}

/* ---------- Mobile legibility ----------
   The cover composition is kept as-is; only the wordmark and the secondary
   action are strengthened so they read on a small, bright screen.            */
@media (max-width:720px){
  .brand-word{ font-size:20px; letter-spacing:.2em; text-indent:.2em; }
  .brand{ gap:11px; }
  .site-header .brand-seal{ width:31px; height:34px; }
  .btn--ghost{
    border-color:var(--ink-faint);
    background:color-mix(in srgb, var(--paper-hi) 88%, transparent);
    color:var(--ink);
    font-weight:500;
  }
  .btn--ghost:hover{ border-color:var(--gold-deep); color:var(--gold-deep); }
}

@media (max-width:520px){
  body{ font-size:16px; }
  .hero{ --hero-top:82px; --hero-bottom:60px; }
  .hero-plate img{ width:min(88vw, 330px); }
  .hero-wordmark{ letter-spacing:.09em; text-indent:.09em; }
  .hero-cta{ width:100%; }
  .hero-cta .btn{ flex:1 1 auto; padding-inline:20px; }
  .la{ width:min(46vw,190px); height:min(46vw,190px); }
  .bs-fig--sub{ width:min(56%,220px); margin-top:-14%; margin-right:-3%; }
  .lq-fig--b{ width:min(66%,260px); margin-top:-10%; }
  .bs-list li{ grid-template-columns:1fr; gap:6px; }
  .enq-list > div{ grid-template-columns:1fr; gap:5px; }
}