/* Monochrome, with jade as the only accent on the page.
   The previous palette (paper #FAF8F4, brass #C3A04F, espresso #1A1814) is the
   named premium-consumer AI palette; #1A1814 is on the banned list verbatim.
   Here the page is neutral by value, not by hue, and the only color a visitor
   sees is the jadeite inside the photographs. Four grounds separated by value,
   not by tint, so they stay distinguishable without a second hue. */
:root{
 --ink:#141514; --paper:#F4F4F3; --acc:#266E2A; --jade:#266E2A;
 --muted:#5B5C5B; --line:#D3D4D1; --accink:#1C5A1F; --acclite:#54C75A;
 --sheet:#E2E3E0; --jadetint:#CACCC8; --goldtint:#D8D9D6; --jadedeep:#1B1C1B;
 --gold:#266E2A; --goldink:#1C5A1F;
 --dkmut:#B7B8B6;
 --max:1180px;
 --serif:Didot,"Playfair Display","Hoefler Text",Garamond,Georgia,serif;
 --sans:"Avenir Next",Avenir,"Segoe UI",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* overflow-x on <body> must be 'clip', never 'hidden'. 'hidden' makes the body a
   scroll container, and a sticky element inside a scroll container sticks to that
   container rather than to the viewport - so .nav scrolled away with the page and
   the header did not stay put. 'clip' suppresses the same sideways overflow without
   creating a scroll container, so position:sticky keeps working. This is why the
   bar did not stay; it was never the nav's own rules. */
body{margin:0;background:var(--paper);color:var(--ink);font:16.5px/1.75 var(--sans);
 letter-spacing:.012em;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;display:block}
a{color:var(--jade)}
.mx{width:100%;max-width:var(--max);margin-left:auto;margin-right:auto;padding:0 26px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:var(--ink);color:var(--paper);padding:10px 14px;z-index:99}

/* nav, identical on every page */
.nav{position:sticky;top:0;z-index:50;background:rgba(244,244,243,.93);
 backdrop-filter:saturate(1.1) blur(9px);border-bottom:1px solid var(--line)}
/* The bar is wider than the 1180px text column on purpose. At 1180 the seven
   items could not sit on one line beside the brand, the marks and the search, so
   VISIT dropped to a second row. Everything from .links rightwards is pushed to
   the right edge by margin-left:auto and is not allowed to wrap. */
.navin{display:flex;align-items:center;gap:22px;min-height:70px;flex-wrap:nowrap;
 max-width:1360px}
/* The star is hers. It is engraved on the pieces and printed on the envelopes
   and the paper bags, so the site carries it too. The green corporate color is
   not carried over; she released that on the call.

   The mark is now traced from her own artwork: 'ArtOfJadeite 4-3 white.JPG',
   1417x945, which was sitting in '07 Logo and brand' in the materials folder the
   whole time. The version that shipped in v47 and v48 was one I had drawn by eye
   off a 600x400 web copy, and it was wrong: her rays have blunt cut tips and
   flare where they meet the center, and the six are not evenly spaced. */
.brand{text-decoration:none;color:var(--ink);display:flex;align-items:center;
 gap:14px;line-height:1.15;flex:0 0 auto}
.btx{display:flex;flex-direction:column}
.bst{display:block;flex:0 0 auto;width:36px;height:36px;color:var(--ink)}
.bst svg{display:block;width:100%;height:100%}
.ft .bst{width:30px;height:30px;color:var(--paper);margin-bottom:12px}
.bn{font-family:var(--serif);font-size:19px;letter-spacing:.19em}
.bt{font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.links{margin-left:auto;display:flex;gap:16px;flex-wrap:nowrap;align-items:center}
.links a{color:var(--ink);text-decoration:none;font-size:12px;letter-spacing:.11em;
 text-transform:uppercase;padding:6px 0;border-bottom:1px solid transparent;
 white-space:nowrap;flex:0 0 auto}
.links a:hover{border-bottom-color:var(--gold)}
.links a[aria-current="page"]{border-bottom-color:var(--jade)}
/* Search. She asked for it on the call. It runs against an index written at
   build time off the same stock list the pages are built from, so a result can
   never say something a piece's own page does not. No network call, no third
   party, nothing typed here leaves the browser. */
.srchbtn{margin-left:16px;background:none;border:0;padding:6px;cursor:pointer;
 color:var(--ink);width:32px;height:32px;display:flex;align-items:center;
 justify-content:center;border-radius:2px}
.srchbtn svg{width:18px;height:18px;display:block}
.srchbtn:hover{background:var(--sheet)}
.srch{position:fixed;inset:0;z-index:60;background:rgba(20,21,20,.42);
 -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.srchin{background:var(--paper);border-bottom:1px solid var(--line);
 padding:clamp(18px,3vh,26px) clamp(18px,4vw,44px) clamp(20px,3vh,28px);
 max-height:86vh;overflow:auto}
.srchbar{display:flex;align-items:center;gap:14px;max-width:var(--max);margin:0 auto}
.srchbar input{flex:1;min-width:0;background:none;border:0;border-bottom:1px solid var(--line);
 padding:12px 2px;font-family:var(--serif);font-size:clamp(19px,2.2vw,28px);
 color:var(--ink);letter-spacing:-.01em}
.srchbar input:focus{outline:none;border-bottom-color:var(--ink)}
.srchx{background:none;border:0;cursor:pointer;font-family:var(--sans);font-size:11px;
 font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);padding:8px 2px}
.srchx:hover{color:var(--ink)}
.srchhint{max-width:var(--max);margin:12px auto 0;font-size:13px;color:var(--muted)}
.srchres{max-width:var(--max);margin:0 auto}
.srchres a{display:flex;align-items:center;gap:16px;
 text-decoration:none;color:var(--ink);padding:11px 2px;border-bottom:1px solid var(--line)}
.srchres .im{flex:0 0 44px;width:44px;height:44px;overflow:hidden;border-radius:2px;
 background:var(--sheet)}
.srchres .im img{width:100%;height:100%;object-fit:cover;display:block}
.srchres .t{flex:1 1 auto;min-width:0}
.srchres a:hover{background:var(--sheet)}
.srchres .t{font-family:var(--sans);font-size:15px;font-weight:600;letter-spacing:-.01em}
.srchres .s{flex:0 0 auto;font-size:13px;color:var(--muted);text-align:right;
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46%}
/* the browser's own clear button is a blue cross that belongs to no palette */
.srchbar input::-webkit-search-cancel-button,
.srchbar input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
/* on a phone the right-hand column truncates to an ellipsis and tells you
   nothing, so the name gets the whole row instead */
@media(max-width:560px){.srchres .s{display:none}}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--line);
 width:44px;height:38px;border-radius:2px;cursor:pointer;padding:10px 11px}
.burger span{display:block;height:1px;background:var(--ink);margin:5px 0}
.sheet{position:fixed;inset:70px 0 0;background:var(--paper);z-index:49;padding:26px;overflow:auto}
.sheet nav{display:flex;flex-direction:column;gap:2px}
.sheet a{padding:14px 2px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);
 font-size:14px;letter-spacing:.12em;text-transform:uppercase}
.sheet .cta{margin-top:22px;text-align:center;border:0}
/* the single right-aligned row needs about 1180px of room. Below that it goes to
   the sheet rather than wrapping to two lines. */
@media(max-width:1120px){.links{display:none}.burger{display:block}
 .srchbtn{margin-left:auto}}
@media(min-width:1121px){.sheet{display:none!important}}

/* hero */
.hero{position:relative;overflow:hidden;padding:112px 0 84px;border-bottom:1px solid var(--line)}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none}
.hero-in{position:relative;z-index:2;max-width:760px}
.eyebrow{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin:0 0 18px}
h1{font-family:var(--serif);font-weight:400;font-size:clamp(25px,3.6vw,38px);line-height:1.13;
 letter-spacing:.02em;margin:0 0 20px}
.lede{font-size:clamp(17px,2.1vw,20px);line-height:1.72;max-width:60ch;margin:0 0 26px;color:var(--ink)}
.tick{width:44px;height:3px;background:var(--gold);margin:0 0 20px}
.tick.j{background:var(--jade)}

/* hero light direction, one per page */
.pg-index .hero::before{background:radial-gradient(900px 700px at 12% 4%,rgba(11,110,79,.26),transparent 64%)}
.pg-art-of-jadeite .hero::before{background:radial-gradient(820px 620px at 92% 6%,rgba(11,110,79,.20),transparent 66%),repeating-linear-gradient(90deg,rgba(20,21,20,.04) 0 1px,transparent 1px 92px)}
.pg-jewels-and-me .hero::before{background:linear-gradient(126deg,rgba(11,110,79,.30) 0%,rgba(11,110,79,.05) 48%,transparent 64%)}
.pg-collections .hero::before{background:radial-gradient(760px 520px at 50% -12%,rgba(11,110,79,.22),transparent 66%),repeating-linear-gradient(0deg,rgba(20,21,20,.045) 0 1px,transparent 1px 36px)}
.pg-archive .hero::before{background:linear-gradient(180deg,rgba(20,21,20,.10),transparent 62%)}
.pg-about .hero::before{background:radial-gradient(820px 640px at 6% 10%,rgba(11,110,79,.30),transparent 64%)}
.pg-visit .hero::before{background:radial-gradient(700px 700px at 96% 92%,rgba(11,110,79,.24),transparent 62%)}
.pg-bespoke .hero::before{background:linear-gradient(200deg,rgba(11,110,79,.22),transparent 58%)}
.pg-care .hero::before{background:radial-gradient(680px 520px at 78% 0%,rgba(11,110,79,.22),transparent 64%)}
.pg-policies .hero::before{background:linear-gradient(180deg,rgba(20,21,20,.05),transparent 58%)}
body[class*="pg-piece-"] .hero::before{background:radial-gradient(880px 660px at 76% 8%,rgba(11,110,79,.24),transparent 64%)}

/* section grounds, alternate every two */
.blk{padding:76px 0;border-bottom:1px solid var(--line)}
.blk.s{background:var(--sheet)}
.blk.j{background:var(--jadetint)}
.blk.g{background:var(--goldtint)}
/* fourth mood: deep jade island. was proved in the motion lab, never shipped until now */
.blk.d{background:var(--jadedeep);color:var(--paper);border-bottom-color:#2A2B2A}
.blk.d h2,.blk.d h3{color:var(--paper)}
.blk.d .mut,.blk.d .sub{color:#C7C8C6}
.blk.d .tick{background:var(--gold)}
.blk.d a{color:var(--acclite)}   /* the accent lightens on dark grounds */
.blk.d .ck,.blk.d .stamp{color:var(--gold)}
.blk.d .fcard{background:#232423;border-color:#343534}
.blk.d .fcard h3{color:var(--paper)}
.blk.d .fcard p{color:#C7C8C6}
.blk.d .note{background:#232423;border-left-color:var(--gold);color:#C7C8C6}
.blk.d .cta{background:transparent;color:var(--acclite);border:1px solid var(--acclite)}
.blk.d .ledger li{border-bottom-color:#333433}
.blk.d .years li{border-left-color:#333433}
.blk.d .years li::before{box-shadow:0 0 0 4px var(--jadedeep)}
.blk.p{background:var(--ink);color:var(--paper);border-bottom-color:#2C2D2C}
.blk.p h2,.blk.p h3{color:var(--paper)}
.blk.p .mut,.blk.p .sub{color:var(--dkmut)}
.blk.p .tick{background:var(--gold)}
.blk.p .cta-min,.blk.d .cta-min{color:var(--paper);
 border-bottom-color:rgba(244,244,243,.42)}
.blk.p a{color:var(--gold)}
.blk.p .ck,.blk.p .stamp{color:var(--gold)}
h2{font-family:var(--serif);font-weight:400;font-size:clamp(22px,2.9vw,31px);line-height:1.2;
 letter-spacing:.02em;margin:0 0 16px}
h3{font-family:var(--serif);font-weight:400;font-size:21px;letter-spacing:.02em;margin:0 0 10px;line-height:1.28}
.sub{color:var(--muted);max-width:66ch;margin:0 0 30px}
.mut{color:var(--muted)}
.nb{white-space:nowrap}

/* buttons */
.cta{display:inline-block;background:var(--jade);color:var(--paper);text-decoration:none;
 padding:13px 26px;font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;border-radius:2px}
.cta:hover{background:#095C41}
.blk.p .cta{background:transparent;color:var(--acclite);border:1px solid var(--acclite)}
.cta-min{display:inline-block;color:var(--jade);text-decoration:none;font-size:12.5px;
 letter-spacing:.13em;text-transform:uppercase;border-bottom:1px solid rgba(11,110,79,.4);padding-bottom:2px}

/* piece cards */
.grid{display:grid;gap:26px;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));align-items:stretch}
.pc{display:block;text-decoration:none;color:inherit}
.pc .im{display:block;overflow:hidden;background:var(--stage);border-radius:2px;
 aspect-ratio:1/1}
.pc .im img{width:100%;height:100%;object-fit:cover;display:block;
 transition:transform .7s cubic-bezier(.16,1,.3,1)}
.pc:hover .im img{transform:scale(1.04)}
.pc .im.nopic{display:flex;align-items:center;justify-content:center;
 background:var(--sheet);border:1px solid var(--line)}
.pc .im.nopic span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;
 color:var(--muted)}
.pc .nm{display:block;margin-top:12px;font-family:var(--sans);font-size:14px;
 font-weight:600;line-height:1.35;letter-spacing:-.01em}
.pc .pr{display:block;margin-top:3px;font-size:13px;color:var(--muted)}

/* figures: jewelry is content, never crop it */
.figs{display:grid;gap:18px;align-items:start}
.figs.f2{grid-template-columns:1fr}
.figs.f3{grid-template-columns:1fr}
@media(min-width:760px){.figs.f2{grid-template-columns:1fr 1fr}.figs.f3{grid-template-columns:repeat(3,1fr)}}
.fig{margin:0;background:#fff;border:1px solid var(--line);border-radius:2px;overflow:hidden}
.fig .fw{background:var(--sheet);padding:14px;display:flex;align-items:center;justify-content:center}
.fig img{width:100%;height:auto;object-fit:contain}
.fig figcaption{padding:11px 14px 13px;font-size:12.5px;color:var(--muted);border-top:1px solid var(--line)}
.band{position:relative;overflow:hidden;background:var(--ink)}
.band img{width:100%;height:min(52svh,440px);object-fit:cover;opacity:.9}

/* magazine */
.mag{max-width:730px;margin:0 auto}
.mag p{margin:0 0 20px}
.mag .dropcap::first-letter{font-family:var(--serif);float:left;font-size:62px;line-height:.86;
 padding:6px 12px 0 0;color:var(--goldink)}
.pull{margin:30px 0;padding:6px 0 6px 22px;border-left:2px solid var(--gold);
 font-family:var(--serif);font-size:22px;line-height:1.45}
.aside{background:#fff;border:1px solid var(--line);padding:22px 24px;margin:28px 0;font-size:14.5px}
.years{list-style:none;padding:0;margin:26px 0 0}
.years li{position:relative;padding:0 0 20px 26px;border-left:1px solid var(--line);margin-left:5px}
.years li::before{content:"";position:absolute;left:-4.5px;top:8px;width:8px;height:8px;border-radius:50%;
 background:var(--gold);box-shadow:0 0 0 4px var(--paper)}
.blk.s .years li::before{box-shadow:0 0 0 4px var(--sheet)}
.years b{font-family:var(--serif);font-size:17px;letter-spacing:.03em}

/* image zoom — `02-requirements.md` §3: "手機優先 + 圖片可 zoom（海外客用電話睇）",
   sourced to Questionnaire Q5. Half her clients are in Singapore, Japan and
   Germany and will never walk into Houston Centre; on a HK$258,000 piece they
   have to be able to see the stone. Tap the photo, it fills the screen, and a
   2400px file is fetched only at that moment so the page itself stays light.
   Where no 2400px original survives the full-screen view still roughly doubles
   the size, so behavior is the same on every photo. */
.zbtn{position:absolute;right:12px;bottom:12px;z-index:4;width:38px;height:38px;
 border-radius:50%;border:1px solid var(--line);background:rgba(244,244,243,.92);
 color:var(--ink);display:grid;place-items:center;cursor:zoom-in;padding:0;
 transition:background .18s ease,transform .18s ease}
.zbtn:hover{background:var(--paper);transform:scale(1.06)}
.zbtn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;
 stroke-linecap:round}
.bpshots img{cursor:zoom-in}
.zov{position:fixed;inset:0;z-index:90;background:rgba(10,11,10,.96);
 display:none;place-items:center;overscroll-behavior:contain}
.zov[data-open="1"]{display:grid}
.zwrap{position:relative;width:100%;height:100%;overflow:auto;
 display:grid;place-items:center;-webkit-overflow-scrolling:touch;
 touch-action:pinch-zoom pan-x pan-y}
.zov img{display:block;max-width:100%;max-height:100%;object-fit:contain;
 transform-origin:center center;transition:transform .22s ease}
.zov img.big{max-width:none;max-height:none;cursor:zoom-out}
.zclose{position:fixed;top:18px;right:20px;z-index:92;width:44px;height:44px;
 border-radius:50%;border:1px solid rgba(244,244,243,.34);background:rgba(10,11,10,.6);
 color:var(--paper);display:grid;place-items:center;cursor:pointer;padding:0}
.zclose svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;
 stroke-linecap:round}
.zcap{position:fixed;left:0;right:0;bottom:0;z-index:92;
 display:flex;flex-direction:column;align-items:center;gap:7px;
 padding:0 20px 18px;font-size:12.5px;letter-spacing:.02em;pointer-events:none}
.zcap .ztxt{display:inline-block;background:rgba(10,11,10,.86);color:#DCDEDB;
 padding:7px 15px;border-radius:2px;backdrop-filter:blur(3px)}
.zhint{font-size:11px;letter-spacing:.16em;text-transform:uppercase;
 color:#A9ABA8;background:rgba(10,11,10,.9);padding:5px 13px;
 border-radius:2px;backdrop-filter:blur(3px)}
@media(max-width:640px){.zbtn{width:34px;height:34px;right:9px;bottom:9px}
 .zclose{top:12px;right:12px}}

/* contact glyphs — the icon set he sent, drawn here rather than lifted from the
   stock sheet (that file is watermarked and not ours to ship). Three styles in
   one dict: a disc with the glyph knocked out of it, and a plain outline for
   inline use. The knock-out color follows the ground it sits on, so the same
   markup works on paper, sheet, ink and jade-deep. */
.ci{width:36px;height:36px;flex:0 0 auto;--icg:var(--paper)}
.ci .d{fill:currentColor}
.ci .g{fill:var(--icg)}
.ci .gs{fill:none;stroke:var(--icg);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.blk.s .ci,.blk.g .ci{--icg:var(--sheet)}
.blk.p .ci,.blk.d .ci{--icg:var(--ink)}
.hmvisit .ci{--icg:var(--jadedeep)}
.ft .ci{--icg:var(--ink)}
.ft .fl{display:flex;gap:11px;align-items:flex-start}
.ft .fl .co{width:19px;height:19px;stroke-width:1.6;opacity:.7;margin-top:2px}
.ft a.fl{align-items:center}.ft a.fl .co{margin-top:0}
.co{width:26px;height:26px;flex:0 0 auto;fill:none;stroke:currentColor;
 stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* a contact row: glyph, label, value */
.crl{list-style:none;padding:0;margin:0;display:grid;gap:2px}
.crl li{display:grid;grid-template-columns:36px 1fr;gap:16px;align-items:start;
 padding:15px 0;border-bottom:1px solid var(--line)}
.crl li:last-child{border-bottom:0}
.blk.p .crl li,.blk.d .crl li{border-bottom-color:#2C2D2C}
.crl h3{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;margin:0 0 4px;
 color:var(--muted);font-weight:400}
.blk.p .crl h3,.blk.d .crl h3,.hmvisit .crl h3{color:var(--dkmut)}
.crl li>div{min-width:0}
.crl p{margin:0;font-size:15px;line-height:1.55;overflow-wrap:anywhere}
.crl a{color:inherit}
@media(max-width:560px){.crl li{grid-template-columns:30px 1fr;gap:12px}
 .ci{width:30px;height:30px}}

/* the home visit block, now with glyphs */
.hmv3{display:grid;gap:0;grid-template-columns:repeat(3,1fr)}
.hmv3>div{padding:0 26px;border-left:1px solid rgba(244,244,243,.16)}
.hmv3>div:first-child{border-left:0;padding-left:0}
.hmv3>div:last-child{padding-right:0}
@media(max-width:820px){.hmv3{grid-template-columns:1fr}
 .hmv3>div{border-left:0;padding:0;border-top:1px solid rgba(244,244,243,.16);
  padding-top:22px;margin-top:22px}
 .hmv3>div:first-child{border-top:0;padding-top:0;margin-top:0}}

/* voices — client testimonials. Three columns, the Carisma geometry, no star
   ratings: Sharon has no review platform, so a score would be invented. Each
   column is one client, their own words, and the country she filed them under. */
.vog{display:grid;gap:0;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.vog.c4{grid-template-columns:repeat(4,1fr)}
.vog.c2{grid-template-columns:repeat(2,1fr)}
/* a row of pill links (About, v58.2: links to the work instead of a product grid) */
.capr{display:flex;flex-wrap:wrap;gap:12px 14px;margin:26px 0 0}
.capr .cap{margin:0}
.vog.c4 .voc{padding:30px 24px 26px}
.vog.c4 .voq{font-size:18px}
.vog.c4 .voq.cjk{font-size:17px}
.volg{display:block;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
 color:var(--goldink);margin:0 0 14px}
.voc{padding:34px 30px 30px;border-left:1px solid var(--line);display:flex;flex-direction:column}
.voc:first-child{border-left:0}
.voq{font-family:var(--serif);font-size:19.5px;line-height:1.5;margin:0 0 6px;letter-spacing:.005em}
.voq.cjk{font-size:18px;line-height:1.68}
.voq::before{content:"\201C";display:block;font-size:38px;line-height:.7;color:var(--gold);margin-bottom:12px}
.votr{font-size:14px;line-height:1.62;color:var(--muted);font-style:italic}
.vom{margin-top:auto;padding-top:16px;border-top:1px solid var(--line)}
.voq,.votr{margin-bottom:0}
.votr{margin-top:8px}
.voq+.vom,.votr+.vom{margin-top:auto}
.von{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;display:block}
.voco{font-size:12.5px;color:var(--muted);display:block;margin-top:3px}
.vop{display:inline-block;margin-top:11px;font-size:13px}
.blk.s .vog,.blk.s .voc,.blk.s .vom{border-color:var(--line)}
@media(max-width:1100px){.vog.c4{grid-template-columns:repeat(2,1fr)}
 .vog.c4 .voc:nth-child(3){border-left:0}
 .vog.c4 .voc:nth-child(n+3){border-top:1px solid var(--line)}}
@media(max-width:860px){.vog,.vog.c4,.vog.c2{grid-template-columns:1fr}
 .voc{border-left:0;border-top:1px solid var(--line)}.voc:first-child{border-top:0}}

/* awards — she asked for images, not data. Each award is the HKTDC certificate
   and the winning piece in one photograph, so the proof and the work are the
   same image. The 2019 placings follow as three plain lines. */
.awg{display:grid;gap:26px;grid-template-columns:1fr 1fr}
.awc{background:#fff;border:1px solid var(--line);border-radius:2px;overflow:hidden}
.blk.s .awc{background:var(--paper)}
.awc .fw{background:#fff;display:flex;align-items:center;justify-content:center}
.awc img{width:100%;height:auto;display:block}
.awb{padding:19px 21px 22px}
.awb h3{font-family:var(--serif);font-size:20px;margin:0 0 4px;letter-spacing:.01em}
.awb .yr{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--goldink);display:block;margin-bottom:9px}
.awb p{margin:0;font-size:14px;line-height:1.6;color:var(--muted)}
.awl{list-style:none;padding:0;margin:0}
.awl li{display:grid;grid-template-columns:78px 1fr;gap:18px;padding:13px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.awl li b{font-family:var(--serif);font-size:16px;letter-spacing:.03em;font-weight:400}
.awl em{font-style:italic;color:var(--muted)}
@media(max-width:760px){.awg{grid-template-columns:1fr}
 .awl li{grid-template-columns:1fr;gap:2px}}

/* credentials line — one quiet line under her name. Chaumet says Place Vendome
   since 1780 and stops; this is the same move with what she actually holds. */
.bcr{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
 margin:14px 0 0;line-height:1.9}
.bcr span{white-space:nowrap}
/* v58.2: on a phone the award line ran off the right edge (since v57) */
@media(max-width:700px){.bcr span{white-space:normal}}
.bcr span+span::before{content:"\00B7";margin:0 9px;color:var(--gold)}
/* the credentials line also sits inside the dark About hero, where --muted is
   ink-on-ink. Both grounds have to be stated or the gate is right to fail it. */
.shin .bcr{color:#BFC1BE}
.shin .bcr span+span::before{color:var(--gold)}
/* and the same line as a link on the jade-deep home block */
.hmvisit .cn a,.hmvisit .hmv3 a{color:var(--paper);text-decoration-color:rgba(245,244,240,.45)}
.hmvisit .cn a:hover,.hmvisit .hmv3 a:hover{text-decoration-color:var(--paper)}

/* commissions, shown as a strip of configurations rather than one photograph.
   One photo cannot demonstrate "four ways", and the four ways are the whole
   reason she asked for this section. Her folders hold 3-13 shots per
   commission; these are the ones that show the piece in a different mount. */
.cwc{border-top:1px solid var(--line);padding:34px 0 8px}
.cwc:first-of-type{border-top:0;padding-top:6px}
.cwg{display:grid;gap:12px;grid-template-columns:repeat(4,1fr);margin-bottom:20px}
.cwg.n3{grid-template-columns:repeat(3,1fr)}
.cwg.n2{grid-template-columns:repeat(2,1fr);max-width:620px}
.cwg.n1{grid-template-columns:1fr;max-width:330px}
.cwf{margin:0}
.cwf .fw{background:var(--sheet);aspect-ratio:1/1;overflow:hidden;border:1px solid var(--line)}
.blk.s .cwf .fw{background:var(--paper)}
.cwf img{width:100%;height:100%;object-fit:cover;display:block}
.cwf figcaption{font-size:12.5px;line-height:1.45;color:var(--muted);margin-top:8px}
.cwh{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 14px}
.cwh h3{font-family:var(--serif);font-size:23px;margin:0;letter-spacing:.01em}
.cwc>p{margin:7px 0 0;font-size:14.5px;line-height:1.6;color:var(--muted);max-width:70ch}
.cwc.ct .cwf img{object-fit:contain}
.figs.f1{grid-template-columns:1fr;max-width:640px}
.figs.f4{grid-template-columns:repeat(2,1fr);align-items:stretch}
@media(min-width:1000px){.figs.f4{grid-template-columns:repeat(4,1fr)}}
.figs.f4 .fw{aspect-ratio:1/1;padding:0}
.figs.f4 .fw img{width:100%;height:100%;object-fit:cover}
.fig figcaption b{color:var(--ink);font-weight:600;margin-right:2px}
/* the two lines, under the latest piece (10 Oct) */
.srs{padding:0 0 clamp(54px,8vh,88px)}
.srg{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.8vw,24px)}
.srb{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:inherit;
 border:1px solid var(--line);background:#fff;padding:clamp(22px,3vw,34px);border-radius:2px;
 transition:border-color .3s ease}
.srb:hover{border-color:var(--jade)}
.srb .k{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.18em;
 text-transform:uppercase;color:var(--muted)}
.srb .n{font-family:var(--serif);font-size:clamp(24px,2.6vw,34px);line-height:1.1;color:var(--ink)}
.srb .c{font-size:13.5px;color:var(--muted)}
.srb .go{display:inline-flex;align-items:center;gap:8px;margin-top:10px;font-family:var(--sans);
 font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--jade)}
.srb .go i{width:14px;height:1px;background:currentColor;display:block;transition:width .35s ease}
.srb:hover .go i{width:26px}
@media(max-width:640px){.srg{grid-template-columns:1fr}}
/* collections by season on the home page (10 Oct) */
.clset>h2{margin:0 0 8px;font-family:var(--serif);font-weight:400;
 font-size:clamp(22px,2.4vw,32px);letter-spacing:.02em;line-height:1.1}
.clset>h2 .ssn{font-family:var(--sans);font-weight:400;font-size:.78em;letter-spacing:.01em;
 margin-left:.45em;color:var(--ink)}
.clset .cltag{margin:0 0 clamp(20px,3vh,30px);font-size:15px;color:var(--muted)}
.clg.c3{grid-template-columns:repeat(3,1fr)}
.clset+.clset{margin-top:clamp(44px,7vh,72px)}
@media(max-width:860px){.clg.c3{grid-template-columns:repeat(2,1fr)}}
.clc .sn{margin-top:14px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--goldink)}
.clc .sn+.nm{margin-top:4px}
.pwall{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin:clamp(28px,4vh,40px) 0 0}
.bpnew{margin:0 0 10px;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--goldink)}
.hw{max-width:68ch}
.hw p{font-size:var(--t17);line-height:1.75;margin:0 0 1.1em}
.cwl{margin:11px 0 0;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--goldink)}
@media(max-width:900px){.cwg,.cwg.n3{grid-template-columns:repeat(2,1fr)}
 .cwg.n2,.cwg.n1{max-width:none}}
@media(max-width:520px){.cwg,.cwg.n3,.cwg.n2{grid-template-columns:1fr;max-width:330px}}

/* commissions and remakes — one photograph, the piece, and the number of ways
   it is worn. The way-count is her own: she writes it into her folder names. */
.cmg{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.cmc{background:#fff;border:1px solid var(--line);border-radius:2px;overflow:hidden}
.blk.s .cmc,.blk.g .cmc{background:var(--paper)}
.cmc .fw{background:var(--sheet);aspect-ratio:1/1;overflow:hidden}
.cmc img{width:100%;height:100%;object-fit:cover;display:block}
.cmb{padding:16px 18px 19px}
.cmb h3{font-size:15.5px;margin:0 0 5px;letter-spacing:.01em}
.cmb p{margin:0;font-size:13.5px;line-height:1.58;color:var(--muted)}
.ways.gh{visibility:hidden}
.ways{display:inline-block;border:1px solid var(--gold);color:var(--goldink);font-size:10px;
 letter-spacing:.18em;text-transform:uppercase;padding:3px 9px;border-radius:2px;margin-bottom:9px}

/* archive ledger */
.archs{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.arch{background:#fff;border:1px solid var(--line);border-radius:2px;overflow:hidden}
.arch .fw{background:var(--sheet);padding:14px;display:flex;align-items:center;justify-content:center}
.arch img{width:100%;height:auto;object-fit:contain;max-height:300px}
.amore{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 14px 14px;background:var(--sheet)}
.amw{aspect-ratio:1/1;background:#0b0b0b;display:flex;align-items:center;justify-content:center;overflow:hidden}
.amw img{width:100%;height:100%;object-fit:contain;max-height:none}
.arch .ab{padding:17px 19px 20px}
.stamp{display:inline-block;border:1px solid var(--gold);color:var(--goldink);font-size:10px;
 letter-spacing:.2em;text-transform:uppercase;padding:4px 10px;border-radius:2px;margin-bottom:10px}
.ledger{list-style:none;padding:0;margin:0;font-size:14.5px}
.ledger li{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line)}
/* the left cell has to be allowed to shrink or a long outlet name pushes the
   date off the right edge of the row. */
.ledger li>span:first-child{min-width:0}
.ledger .yr{color:var(--muted);font-size:12.5px;white-space:nowrap}

/* facts, cards */
.cards{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.fcard{background:#fff;border:1px solid var(--line);padding:22px 22px 24px;border-radius:2px}
.blk.p .fcard{background:#221F1A;border-color:#332F28}
.blk.p .fcard h3{color:var(--paper)}
.blk.p .fcard p{color:var(--dkmut)}
.big{font-family:var(--serif);font-size:56px;line-height:1;color:var(--gold);margin:0 0 8px}
.dl2{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;font-size:14.5px;margin:0}
.dl2 dt{color:var(--muted);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;padding-top:4px}
.dl2 dd{margin:0}
.faq{max-width:760px}
.faq details{border-bottom:1px solid var(--line);padding:16px 0}
.faq summary{cursor:pointer;font-family:var(--serif);font-size:18px;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq p{margin:12px 0 0;color:var(--muted)}
.note{background:#fff;border-left:2px solid var(--jade);padding:16px 20px;margin:22px 0;font-size:14.5px}
.blk.p .note{background:#221F1A;border-left-color:var(--gold);color:var(--dkmut)}

/* reveal */
/* Blur-lift-fade. One shape for the whole site, driven per element by a scroll
   window rather than a CSS transition, so the stagger lives in scroll space and
   cannot desynchronise from the page. Values follow the measured reference:
   translateY 38px, blur 12px, easeOutCubic. */
.rv{opacity:var(--rvo,0);
 transform:translate3d(0,calc(var(--rvy,38) * 1px),0);
 filter:blur(calc(var(--rvb,12) * 1px));
 will-change:opacity,transform,filter}
.rv.done{opacity:1;transform:none;filter:none;will-change:auto}

/* index only: the circular reveal kept from the concept */
.stage{position:relative;height:190svh}
.stagein{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--ink);display:flex;
 align-items:center;justify-content:center}
.mask{position:absolute;inset:0;background:var(--paper);clip-path:ellipse(0% 0% at 50% 50%);
 display:flex;align-items:center;justify-content:center;z-index:3}
.stagetxt{position:relative;z-index:2;text-align:center;padding:0 26px;max-width:820px}
.mask .stagetxt{z-index:1}
.stagetxt .st1{font-family:var(--serif);font-size:clamp(24px,3.8vw,38px);line-height:1.2;margin:0 0 14px;letter-spacing:.02em}
.stagetxt .st2{max-width:52ch;margin:0 auto}
.stagein > .stagetxt .st1{color:var(--paper)}
.stagein > .stagetxt .st2{color:var(--dkmut)}
.mask .stagetxt .st1{color:var(--ink)}
.mask .stagetxt .st2{color:var(--muted)}
.dust{position:absolute;inset:0;pointer-events:none;z-index:2}
.dust i{position:absolute;width:2px;height:2px;border-radius:50%;background:var(--gold);opacity:.5;
 animation:rise linear infinite}
@keyframes rise{0%{transform:translateY(14px);opacity:0}18%{opacity:.55}100%{transform:translateY(-84px);opacity:0}}
.floaty{animation:fl ease-in-out infinite alternate}
@keyframes fl{from{transform:translateY(-9px) rotate(-1.6deg)}to{transform:translateY(9px) rotate(1.6deg)}}
.strip{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:34px}
.strip img{border-radius:2px;background:var(--sheet)}
@media(max-width:760px){.strip{grid-template-columns:repeat(3,1fr)}.strip img:nth-child(n+7){display:none}}



/* ---------------------------------------------------------------
   ENTRY  ·  five columns, alternate columns drift up and down,
   forever. Opens by unfolding out of one single card.
   --------------------------------------------------------------- */
.entry{position:relative;height:100svh;overflow:hidden;background:var(--ink)}
.entryvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1;
 filter:brightness(.76) saturate(.86)}
.entry::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
 background:
  radial-gradient(1600px 1100px at 50% 48%,rgba(5,13,11,.02) 0%,rgba(5,13,11,.22) 56%,rgba(5,13,11,.54) 100%),
  linear-gradient(to bottom,rgba(5,13,11,.62) 0%,rgba(5,13,11,0) 15%,rgba(5,13,11,0) 76%,rgba(5,13,11,.78) 100%)}

.entrystage{position:absolute;inset:0;z-index:3;display:grid;
 grid-template-columns:repeat(5,1fr);gap:26px;align-items:start;
 /* inset on all four sides: the liquid shows down both sides, and the top and
    bottom bands are kept clear so the wordmark and SCROLL never sit on a photograph */
 padding:78px max(40px,calc((100% - 1240px)/2)) 76px}
.ecol{overflow:visible;height:calc(100svh - 154px);position:relative}
/* clip only once the loop owns the columns; during the unfold the tiles must be
   free to sit on top of each other at the center of the screen */
.entry.go .ecol{overflow:hidden}
.entry.go .ecol::before,.entry.go .ecol::after{content:"";position:absolute;left:0;right:0;
 height:16%;z-index:2;pointer-events:none}
.entry.go .ecol::before{top:0;background:linear-gradient(to bottom,rgba(5,13,11,.55),transparent)}
.entry.go .ecol::after{bottom:0;background:linear-gradient(to top,rgba(5,13,11,.55),transparent)}
.etrk{display:flex;flex-direction:column;gap:22px;will-change:transform;padding:22px 0}
/* the loop: the track holds the tiles twice, so -50% lands back on frame one */
.entry.go .etrk{animation:edrift var(--dur,28s) linear infinite}
.entry.go .ecol:nth-child(even) .etrk{animation-direction:reverse}
@keyframes edrift{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-50%,0)}}

.ec{position:relative;border-radius:13px;overflow:hidden;aspect-ratio:4/5;
 will-change:transform;backface-visibility:hidden;
 box-shadow:0 14px 34px -14px rgba(0,0,0,.55);
 transform:translate3d(var(--ex,0px),var(--ey,0px),0) scale(var(--es,1))}
/* thirty stacked shadows read as a black blob, so during the unfold there are none */
.entry:not(.go) .ec{box-shadow:none}
.ec::after{content:"";position:absolute;inset:0;border-radius:13px;pointer-events:none;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 1px rgba(11,110,79,.20)}
.ec img{width:100%;height:100%;object-fit:cover;display:block}

.entrycue{position:absolute;left:0;right:0;bottom:0;z-index:4;text-align:center;
 color:#E7E8E6;font-size:10px;letter-spacing:.32em;text-transform:uppercase;
 padding:34px 0 26px;text-shadow:0 1px 10px rgba(0,0,0,.9);
 background:linear-gradient(to top,rgba(5,13,11,.96) 0%,rgba(5,13,11,.86) 40%,rgba(5,13,11,.42) 74%,rgba(5,13,11,0) 100%)}
.entrycue span{display:block;width:1px;height:30px;margin:11px auto 0;
 background:linear-gradient(180deg,rgba(11,110,79,.8),transparent)}
.entrywm{position:absolute;left:0;right:0;top:0;z-index:4;text-align:center;margin:0;
 font-family:var(--serif);color:var(--paper);letter-spacing:.34em;font-size:13px;
 padding:34px 0 30px;text-shadow:0 1px 10px rgba(0,0,0,.85);
 background:linear-gradient(to bottom,rgba(5,13,11,.88) 0%,rgba(5,13,11,.55) 50%,rgba(5,13,11,0) 100%)}

@media(max-width:900px){
 .entrystage{grid-template-columns:repeat(3,1fr);gap:14px;padding:0 16px}
 .entrystage .ecol:nth-child(n+4){display:none}
 .etrk{gap:14px;padding:14px 0}
 .ec,.ec::after{border-radius:10px}
}
@media(prefers-reduced-motion:reduce){
 .entry{height:auto;overflow:visible;padding:88px 0 96px}
 .entryvid,.entrycue{display:none}
 .entry::after{display:none}
 .entrystage{position:static;grid-template-columns:repeat(3,1fr);gap:16px;
  max-width:var(--max);margin:0 auto;padding:0 26px}
 .entrystage .ecol:nth-child(n+4){display:none}
 .ecol{height:auto;overflow:visible}
 .ecol::before,.ecol::after{display:none}
 .etrk{animation:none!important;transform:none!important;padding:0}
 .etrk .ec:nth-child(n+4){display:none}
 .ec{transform:none!important;opacity:1!important}
 .entrywm{position:static;margin:0 0 30px;background:none;padding:0;text-shadow:none;color:var(--paper)}
}

/* collage hero, index only */
.hero.hero-home{padding:0;border-bottom:0}
.hero.hero-home .heroBg{position:absolute;left:-2%;right:-2%;top:-7%;height:114%;overflow:hidden;z-index:0}
.collage{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);gap:8px;height:100%}
.collage img{width:100%;height:100%;object-fit:cover;opacity:.86;filter:saturate(.94) brightness(1.02) contrast(1.02)}
@media(max-width:760px){.collage{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr)}
 .collage img:nth-child(n+7){display:none}}
.hero.hero-home::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
 background:radial-gradient(1200px 780px at 26% 48%,rgba(244,244,243,.985) 0%,rgba(244,244,243,.93) 38%,rgba(244,244,243,.52) 68%,rgba(244,244,243,.34) 100%),
 linear-gradient(180deg,rgba(244,244,243,.42) 0%,rgba(244,244,243,.18) 44%,rgba(244,244,243,.62) 100%)}
/* narrow screens: the text runs full width, so the protection must be vertical not left weighted */
@media(max-width:860px){.hero.hero-home::after{
 background:linear-gradient(180deg,rgba(244,244,243,.96) 0%,rgba(244,244,243,.94) 62%,rgba(244,244,243,.86) 100%)}}
.hero.hero-home > .mx,.hero.hero-home > .hero-in,.hero.hero-home > .hero-sp{position:relative;z-index:2}
.hero-sp{height:112px}
.hero-home .hero-in{padding-top:22px;padding-bottom:96px}

/* drift wall */
.dw{position:relative;height:min(76svh,620px);overflow:hidden;perspective:1200px;
 border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--ink)}
.dwplane{position:absolute;inset:-20% -16%;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
 transform:rotateX(8deg) rotateY(-5deg) translateZ(-40px);transform-style:preserve-3d}
.dwcol{display:flex;flex-direction:column;gap:14px;will-change:transform;align-self:start}
/* the tiles are square originals, so a 1:1 box crops nothing and gives the
   column a known height before a single image has loaded */
.dwt{position:relative;border-radius:2px;overflow:hidden;background:#221F1A;aspect-ratio:1/1;flex:0 0 auto}
.dwt img{width:100%;height:100%;object-fit:cover;display:block;opacity:.94;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.dwt::after{content:"";position:absolute;inset:0;background:rgba(20,21,20,.15);transition:opacity .45s}
.dwt:hover::after{opacity:0}
.dwt:hover img{transform:scale(1.045)}
.dw::before,.dw::after{content:"";position:absolute;left:0;right:0;height:24%;z-index:3;pointer-events:none}
.dw::before{top:0;background:linear-gradient(180deg,var(--ink),rgba(20,21,20,0))}
.dw::after{bottom:0;background:linear-gradient(0deg,var(--ink),rgba(20,21,20,0))}
.dwcap{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:26px;text-align:center}
.dwcap p{margin:0;color:var(--gold);font-size:11px;letter-spacing:.28em;text-transform:uppercase}
@media(max-width:760px){.dw{height:min(62svh,440px)}
 .dwplane{transform:none;inset:-20% -2%;grid-template-columns:repeat(2,1fr)}
 .dwcol:nth-child(n+3){display:none}}

/* feature card: break the uniform grid */
/* variety by rhythm, not by spanning: every count divides evenly so no cell is ever orphaned */
@media(min-width:940px){
 .grid.g2{grid-template-columns:repeat(2,1fr);gap:30px}
 .grid.g2 .ct{min-height:400px}
 .grid.g2 .ct img{max-height:470px}
 .grid.g2 .hook{font-size:21px}
 .grid.g2 .cb{padding:26px 28px 28px}
 .grid.g3{grid-template-columns:repeat(3,1fr)}
}


/* footer wordmark: revealed letter by letter, left to right, as the page ends.
   Read off the reference frames: "m a" -> "made for a w" -> "made for award".
   Letters arrive one at a time at constant size, each with its own offset, blur and fade. */
.ftmark{position:relative;overflow:hidden;margin-top:40px;
 height:clamp(58px,10.8vw,168px);isolation:isolate}
.ftmark::before{content:"";position:absolute;left:-14%;right:-14%;bottom:-64%;height:190%;z-index:0;
 background:radial-gradient(66% 100% at 50% 100%,rgba(11,110,79,calc(.80*var(--g,0))) 0%,
  rgba(11,110,79,calc(.46*var(--g,0))) 34%,rgba(160,120,44,calc(.16*var(--g,0))) 62%,rgba(11,110,79,0) 84%);
 filter:blur(3px)}
.ftmark .wm{position:relative;z-index:1;display:flex;justify-content:center;align-items:flex-end;
 white-space:nowrap;font-family:var(--serif);font-weight:400;letter-spacing:.02em;line-height:.92;
 font-size:clamp(32px,7.4vw,110px);color:#A09A8D}
.ftmark .wm i{font-style:normal;display:inline-block;will-change:transform,opacity,filter;
 transform:translate3d(0,calc(var(--ly,110) * 1%),0) scale(var(--ls,.92));
 opacity:var(--lo,0);filter:blur(calc(var(--lb,14) * 1px))}
.ftmark .wm i.sp{width:.3em}
@media(prefers-reduced-motion:reduce){
 .ftmark .wm i{--ly:0;--ls:1;--lo:1;--lb:0}
 .ftmark::before{--g:1}
}

/* footer */
.ft{background:var(--ink);color:var(--dkmut);padding:62px 0 30px}
.ftin{display:grid;gap:34px;grid-template-columns:1fr}
@media(min-width:860px){.ftin{grid-template-columns:1.5fr 1fr 1fr 1.2fr}}
/* six columns since Collections and Follow joined. The address column keeps the
   extra width; Collections needs room for the full names. */
@media(min-width:1180px){.ftin{grid-template-columns:1.45fr .95fr 1.15fr .95fr 1.05fr .8fr}}
@media(min-width:860px) and (max-width:1179px){.ftin{grid-template-columns:repeat(3,1fr)}}
.ft .bn{color:var(--paper);display:block;margin-bottom:12px}
.ft h4{color:var(--paper);font-family:var(--sans);font-weight:600;font-size:12px;
 margin:0 0 14px;letter-spacing:.18em;text-transform:uppercase}
.ft .so{display:flex;align-items:center;gap:10px}
.ft .si{flex:0 0 18px;width:18px;height:18px;display:block;color:#D8D6D0}
.ft .si svg{display:block;width:100%;height:100%}
.ft .so:hover .si{color:var(--paper)}
/* top right, beside the search. Her marks, at the size a header can carry. */
.navso{display:flex;align-items:center;gap:13px;margin-left:16px;flex:0 0 auto}
/* The three marks are the platforms' own current logos - YouTube's rounded plate,
   Instagram's 2022 outline camera, Facebook's 2023 disc - not my approximations of
   them, which is what shipped before and read wrong. They sit a shade off full ink
   so three solid shapes do not out-weigh the serif beside them. */
.navso a{display:block;width:22px;height:22px;color:#2A2C29;
 transition:color .2s ease}
.navso a svg{display:block;width:100%;height:100%}
.navso a:hover{color:var(--acc)}
@media(max-width:1120px){.navso{display:none}}
.shso{display:flex;gap:20px;justify-content:center;padding:26px 0 0}
.shso a{display:block;width:28px;height:28px;color:var(--ink);border:0;padding:0}
.shso a svg{display:block;width:100%;height:100%}
/* the footer columns were 14px at --dkmut and read as fine print. This is
   contact information, so it carries its own weight now. */
.ft a{display:block;color:#D8D6D0;text-decoration:none;font-size:15px;
 font-weight:500;padding:5px 0;
 overflow-wrap:anywhere}  /* the email address is one unbroken 44-character string */
.ft a:hover{color:var(--gold)}
.ft p{margin:0 0 8px;font-size:14px;max-width:40ch}
.ft .mut,.fbot .mut{color:var(--dkmut)}
.fbot{margin-top:44px;padding-top:20px;border-top:1px solid #2C2D2C;display:flex;justify-content:space-between;
 gap:16px;flex-wrap:wrap;font-size:12.5px}

/* ============ Apple grammar: the buy page ============
   Locked type scale, one decision per block, product stays still.
   48 / 32 / 21 / 17 / 14 / 12   ·   two weights only   ·   body tracking -.022em */
.bp{--t48:48px;--t32:32px;--t21:21px;--t17:17px;--t14:14px;--t12:12px;
    --stage:#100E0C;--hair:#DCD5C6}
.bp .bpmx{width:100%;max-width:1220px;margin:0 auto;padding:0 26px}

.bphead{padding:64px 0 34px}
.bphead h1{font-family:var(--serif);font-size:var(--t48);line-height:1.06;
  letter-spacing:.004em;margin:0;font-weight:400}
.bpmeta{margin:14px 0 0;font-size:var(--t17);line-height:25px;letter-spacing:-.022em;color:var(--ink)}
.bpmeta b{font-weight:600}
.bpmeta .dot{color:var(--line);padding:0 8px}
.bpnote{margin:6px 0 0;font-size:var(--t14);line-height:20px;letter-spacing:-.022em;color:var(--muted)}

/* --- stage + choices --- */
.bpgrid{display:grid;grid-template-columns:minmax(0,1.42fr) minmax(320px,.85fr);gap:56px;
  align-items:start;padding-bottom:60px}
.bpstage{position:sticky;top:92px;align-self:start}
.bpshots{position:relative;background:var(--stage);border-radius:2px;overflow:hidden;
  aspect-ratio:1/1;display:flex;align-items:center;justify-content:center}
.bpshots img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .55s ease}
.bpshots img.on{opacity:1}
/* left and right, on the photograph, only rendered when a piece has more
   than one studio view. .bpstage is already position:sticky above, which is
   itself a positioned ancestor, so it must not be redeclared here: doing that
   killed the sticky photograph in the first cut of this. */
.bpnav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
 width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
 background:rgba(244,244,243,.92);color:var(--ink);cursor:pointer;
 display:flex;align-items:center;justify-content:center;padding:0;
 transition:background .2s ease,box-shadow .2s ease}
.bpnav svg{width:20px;height:20px;display:block}
.bpnav.prev{left:12px}
.bpnav.next{right:12px}
.bpnav:hover{background:var(--paper);box-shadow:0 2px 14px rgba(20,21,20,.18)}
.bpnav:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media(max-width:620px){.bpnav{width:38px;height:38px}
 .bpnav.prev{left:6px}.bpnav.next{right:6px}}
.bpdots{display:flex;gap:9px;justify-content:center;padding:20px 0 0}
.bpdots button{width:8px;height:8px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:var(--line);transition:background .2s,transform .2s}
.bpdots button[aria-current="true"]{background:var(--ink);transform:scale(1.15)}
.bpcap{margin:14px 0 0;text-align:center;font-size:var(--t12);line-height:16px;
  letter-spacing:.02em;color:var(--muted)}

.bpopts{padding-top:2px}
.bpopt{padding:0 0 46px}
.bpopt h2{font-family:var(--sans);font-size:var(--t21);line-height:29px;letter-spacing:.011em;
  font-weight:600;margin:0 0 10px}
.bpopt h2 span{font-weight:400;color:var(--muted)}
.bpopt p{margin:0;font-size:var(--t17);line-height:25px;letter-spacing:-.022em;color:var(--ink)}
.bpopt p.sm{font-size:var(--t14);line-height:20px;color:var(--muted);margin-top:8px}
.bprule{height:1px;background:var(--hair);margin:0 0 42px}
.bpbuy{border:1px solid var(--hair);border-radius:2px;padding:26px 24px;background:#fff}
.bpbuy .p{font-family:var(--serif);font-size:var(--t32);line-height:1.1;margin:0 0 4px}
.bpbuy .s{font-size:var(--t14);line-height:20px;letter-spacing:-.022em;color:var(--muted);margin:0 0 18px}
/* the four lines beside the price. Facts the rest of the site can stand
   behind, not badges. */
.bpass{list-style:none;margin:0 0 18px;padding:16px 0 0;border-top:1px solid var(--line)}
.bpass li{position:relative;padding:0 0 8px 18px;font-size:var(--t14);line-height:1.55;
 letter-spacing:-.01em;color:var(--ink)}
.bpass li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;
 border-radius:50%;background:var(--jade)}
.bpass a{color:var(--jade)}
.bpbuy .cta{display:block;text-align:center}
.bpbuy .alt{display:block;text-align:center;margin-top:12px;font-size:var(--t14);
  letter-spacing:-.022em;color:var(--jade)}

/* --- what comes with it: objects on a stage --- */
.bpwith{background:var(--sheet);padding:74px 0}
.bpwith h2{text-align:left;font-family:var(--sans);font-weight:600;font-size:var(--t32);
  line-height:1.18;letter-spacing:.007em;margin:0 0 8px}
.bpwith .lead{text-align:left;font-size:var(--t17);line-height:25px;letter-spacing:-.022em;
  color:var(--muted);margin:0 0 clamp(34px,5vh,56px);max-width:52ch}
/* Two columns, divided by a single hairline between rows. Not four equal
   icon cards: that row is the most-recognised generated-page layout there is. */
.bpobj{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(40px,7vw,110px);row-gap:0;
 border-top:1px solid var(--line)}
.bpobj .o{text-align:left;padding:clamp(28px,3.6vh,44px) 0;border-bottom:1px solid var(--line);
 display:grid;grid-template-columns:1fr;gap:8px}
.bpobj .o:nth-child(odd){padding-right:clamp(0px,2vw,30px)}
.bpobj .pi{display:block;color:var(--muted);margin:0 0 4px}
.bpobj h3{font-family:var(--serif);font-size:clamp(19px,1.9vw,27px);font-weight:400;
 line-height:1.06;
  letter-spacing:-.008em;margin:0 0 12px}
.bpobj p{margin:0;font-size:var(--t17);line-height:25px;letter-spacing:-.022em;
 color:var(--muted);max-width:46ch}


/* ============================================================
   COLLECTIONS, in the middle. Her marked-up page: "Add 'Collection' to
   replace the section in the middle. Show diff collections like the
   Chaumet or LinShaoTung jewelry did." Chaumet's shape: named tiles,
   one photograph, no prose. A row of four on a desktop, two on a phone.
   Everything that used to live here — six pieces in orbit across four
   screens of pinned scroll — is gone.
   ============================================================ */
.cl{background:var(--paper);padding:clamp(54px,8vh,92px) 0}
.clmx{max-width:var(--max);margin:0 auto;padding:0 clamp(18px,4vw,44px)}
.clmx>h2{margin:0 0 clamp(24px,3.6vh,38px);font-family:var(--serif);font-weight:400;
 font-size:clamp(22px,2.4vw,32px);letter-spacing:.02em;line-height:1.1}
.clg{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,24px)}
.clc{display:block;text-decoration:none;color:inherit}
.clc .im{display:block;overflow:hidden;background:var(--stage);border-radius:2px;
 aspect-ratio:1/1}
.clc .im img{width:100%;height:100%;object-fit:cover;display:block;
 transition:transform .7s cubic-bezier(.16,1,.3,1)}
.clc:hover .im img{transform:scale(1.04)}
.clc .nm{display:block;margin-top:14px;font-family:var(--sans);font-size:13px;
 font-weight:600;letter-spacing:.13em;text-transform:uppercase;line-height:1.4}
.clc .qt{display:block;margin-top:4px;font-size:13px;color:var(--muted)}
/* her own journal sentence, under the collection name */
.clc .ds{display:block;margin-top:9px;font-size:13.5px;line-height:1.6;
 color:var(--muted)}
.cltail{margin:clamp(22px,3vh,32px) 0 0;font-size:14px;color:var(--muted)}
.clc .go{display:inline-flex;align-items:center;gap:8px;margin-top:12px;
 font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.14em;
 text-transform:uppercase;color:var(--ink)}
.clc .go i{width:14px;height:1px;background:currentColor;display:block;
 transition:width .35s ease}
.clc:hover .go i{width:26px}
.src2{margin:0;font-size:var(--t12);letter-spacing:.08em;text-transform:uppercase;
 color:var(--muted)}
.cltail a{color:var(--ink)}
@media(max-width:860px){.clg{grid-template-columns:repeat(2,1fr)}}

/* ============================================================
   THE PICTURE WALL. What used to sit here was an editorial spread,
   four numbered rows of prose. She said it looked like a magazine
   and that she would not stop to read it, and asked for pictures.
   Photograph, name, price. Nothing else.
   ============================================================ */
.pw{background:var(--sheet);padding:clamp(56px,9vh,96px) 0}
.pwmx{max-width:var(--max);margin:0 auto;padding:0 clamp(18px,4vw,44px)}
.pwmx>h2{margin:0 0 clamp(26px,4vh,44px);font-family:var(--serif);font-weight:400;
 font-size:clamp(24px,3vw,38px);line-height:1.12;letter-spacing:-.016em;max-width:26ch}
.pwg{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,22px)}
.pwc{display:block;text-decoration:none;color:inherit}
.pwc .im{display:block;overflow:hidden;background:var(--stage);border-radius:2px;
 aspect-ratio:1/1}
.pwc .im img{width:100%;height:100%;object-fit:cover;display:block;
 transition:transform .7s cubic-bezier(.16,1,.3,1)}
.pwc:hover .im img{transform:scale(1.05)}
/* name over price, not name beside price: a two-word name and a
   five-word one then sit on the same baseline instead of one of them
   dragging its price down the card. */
.pwc .mt{display:block;padding:11px 0 0}
.pwc .nm{display:block;font-family:var(--sans);font-size:14px;font-weight:600;
 line-height:1.35;letter-spacing:-.01em}
.pwc .pr{display:block;margin-top:3px;font-size:13px;color:var(--muted)}
@media(max-width:980px){.pwg{grid-template-columns:repeat(2,1fr)}}

/* --- what comes with it: four labels and a link, not four paragraphs --- */
.bpwith .wrow{display:flex;align-items:baseline;justify-content:space-between;
 gap:24px;flex-wrap:wrap;margin:0 0 clamp(22px,3.4vh,34px)}
.bpwith .wrow h2{margin:0}
.wobj{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.4vw,34px);
 border-top:1px solid var(--line);padding-top:clamp(20px,3vh,30px)}
.wobj .wo{display:grid;gap:10px;align-content:start}
.wobj .pi{display:block;color:var(--muted)}
.wobj h3{margin:0;font-family:var(--sans);font-size:15px;font-weight:600;
 line-height:1.35;letter-spacing:-.01em}
@media(max-width:760px){.wobj{grid-template-columns:repeat(2,1fr)}}

/* --- which piece is right for you --- */
.bpcmp{padding:78px 0 84px}
.bpcmp h2{text-align:center;font-family:var(--sans);font-weight:600;font-size:var(--t32);
  line-height:1.18;letter-spacing:.007em;margin:0 0 44px}
/* ============================================================
   RING SIZE. A rate table, not a feature grid: a row rule here
   is what lets the eye run across 44 rows without slipping, so
   the no-hairline rule does not apply. Numbers are tabular and
   right-aligned, letters centered, and the whole thing scrolls
   inside its own box on a phone rather than pushing the page.
   ============================================================ */
.rswrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:34px;
 border-top:1px solid rgba(20,21,20,.14)}
.rst{width:100%;min-width:640px;border-collapse:collapse;
 font-family:var(--sans);font-size:15px;line-height:20px;font-variant-numeric:tabular-nums}
.rst th{background:var(--paper);
 font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
 color:var(--muted);text-align:right;padding:14px 16px 12px;
 border-bottom:1px solid rgba(20,21,20,.24);white-space:nowrap}
.rst th.l{text-align:left}
.rst td{text-align:right;padding:9px 16px;border-bottom:1px solid rgba(20,21,20,.07);
 white-space:nowrap}
.rst td.hk{font-weight:600}
.rst td.e{color:rgba(20,21,20,.26)}
.rst tbody tr:hover td{background:rgba(38,110,42,.05)}
@media(max-width:700px){
 /* the circumference is derivable from the diameter and is the column nobody
    measures. Dropping it on a phone is what lets Hong Kong and one other system
    sit on screen together. */
 .rst .cc{display:none}
 .rst{min-width:480px;font-size:14px}
 .rst th,.rst td{padding-left:11px;padding-right:11px}
}
.rshint{margin-top:12px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;
 color:var(--muted);display:none}
@media(max-width:700px){.rshint{display:block}}
.rsnote{margin-top:18px;font-size:14px;line-height:22px;color:var(--muted);max-width:640px}
.rssize{font-family:var(--sans);font-size:var(--t17);letter-spacing:-.022em}
.bptbl{width:100%;border-collapse:collapse;table-layout:fixed}
.bptbl th,.bptbl td{text-align:center;vertical-align:top;padding:0 14px}
.bptbl .ph{background:var(--stage);border-radius:2px;aspect-ratio:1/1;overflow:hidden;
  display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.bptbl .ph img{width:100%;height:100%;object-fit:cover}
.bptbl .nm{font-family:var(--sans);font-size:var(--t17);font-weight:600;line-height:25px;
  letter-spacing:-.022em;display:block}
.bptbl .hk{font-size:var(--t14);line-height:20px;letter-spacing:-.022em;color:var(--muted);
  display:block;margin-top:4px}
.bptbl .fr{font-size:var(--t14);line-height:20px;letter-spacing:-.022em;display:block;
  margin-top:10px;padding-bottom:20px}
.bptbl thead th{border-bottom:1px solid var(--hair)}
/* one rule per group of rows. A hairline under every single row is the
   tell of a generated spec table, and it fights the type. */
.bptbl tbody tr.hd:first-child td{border-top:0}
.bptbl tbody td{padding-top:22px;padding-bottom:22px;
  font-size:var(--t14);line-height:20px;letter-spacing:-.022em}
.bptbl tbody td b{display:block;font-weight:600;font-size:var(--t17);line-height:25px;margin-bottom:4px}
.bptbl tbody td.em{color:var(--line);font-size:var(--t17)}
.bptbl tbody tr.hd td{border-top:1px solid var(--hair);border-bottom:0;padding:38px 0 6px;text-align:center;
  font-size:var(--t12);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.bpcmp .cn{text-align:center;margin:38px 0 0;font-size:var(--t14);letter-spacing:-.022em}

/* ============================================================
   CINEMA. 600vh of scroll, one sticky stage. A white world opens
   out of a dot, six pieces ride an ellipse, the orbit is driven by
   how fast you scroll and idles when you stop.
   Ported to vanilla from the reference; the ellipse is computed
   parametrically instead of offset-path so there is no support cliff.
   ============================================================ */
.cin{position:relative;width:100%;height:460vh;background:var(--ink)}
.cinstage{position:sticky;top:0;width:100%;height:100svh;overflow:hidden;
 background:var(--paper);color:var(--ink)}
.cinstage::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
 background:radial-gradient(1200px 900px at 50% 48%,#241F18 0%,var(--ink) 62%,#0D0B08 100%)}

/* the opening iris */
/* the box has to stay covering the viewport at -15deg on every aspect ratio, so it is a
   square of 240vmax rather than 150vw x 150vh, which left bare corners on tall screens.
   The open radius is retuned to 30% because the box is bigger: 30% of 240vmax always
   exceeds half the viewport diagonal. */
.cinmask{position:absolute;left:50%;top:50%;width:240vmax;height:240vmax;z-index:2;
 overflow:hidden;transform:translate(-50%,-50%) rotate(-15deg);
 clip-path:ellipse(var(--cr,0%) var(--cr,0%) at 50% 50%)}
.cinplane{position:absolute;inset:0;background:var(--paper)}
.cinworld{position:absolute;left:50%;top:50%;width:100vw;height:100svh;
 transform:translate(-50%,-50%) rotate(15deg)}

/* the orbit */
.cinorb{position:absolute;inset:0}
.orb{position:absolute;left:50%;top:50%;border-radius:50%;overflow:hidden;
 will-change:transform;background:var(--sheet);
 box-shadow:0 18px 44px -20px rgba(0,0,0,.42)}
.orb img{width:100%;height:100%;object-fit:cover;display:block}
.orblab{position:absolute;left:52%;top:50%;transform:translateY(-50%);
 width:min(380px,38vw);z-index:20;pointer-events:none;opacity:0;
 will-change:opacity}
.orblab .t{font-family:var(--serif);font-size:clamp(34px,5vw,78px);line-height:.98;
 letter-spacing:-.01em;color:var(--ink);margin:0 0 12px}
.orblab .d{font-size:clamp(14px,1.25vw,19px);line-height:1.45;color:var(--muted);margin:0}
.orblab .p{margin:16px 0 0;font-size:clamp(13px,1.05vw,16px);letter-spacing:.14em;
 text-transform:uppercase;color:var(--goldink)}

/* type on the stage */
.cinui{position:absolute;inset:0;z-index:30;pointer-events:none}
.cinui .cel{position:absolute;will-change:transform,opacity,filter;color:var(--ink);
 text-shadow:0 0 26px var(--paper),0 0 12px var(--paper),0 0 5px var(--paper)}
.cinbrand{top:clamp(88px,11vh,124px);left:clamp(22px,6vw,96px);line-height:.95}
.cinbrand .a{font-family:var(--serif);font-size:clamp(38px,6.6vw,94px);display:block}
.cinbrand .b{font-size:clamp(12px,1.1vw,15px);letter-spacing:.34em;text-transform:uppercase;
 color:var(--muted);display:block;margin-top:10px}
.cintr{top:clamp(96px,13vh,132px);right:clamp(22px,7vw,150px);text-align:left}
.cinbl{bottom:clamp(26px,7vh,64px);left:clamp(22px,6vw,64px)}
.cintr .n,.cinbl .n{font-family:var(--serif);font-size:clamp(40px,5.4vw,78px);line-height:.94;
 display:block;margin-bottom:10px}
.cintr .s,.cinbl .s{font-family:var(--serif);font-size:clamp(12px,1.1vw,15px);letter-spacing:.2em;
 text-transform:uppercase;line-height:1.3;display:block}
.cinbr{bottom:clamp(46px,9vh,84px);right:clamp(22px,8vw,110px);width:min(280px,64vw);pointer-events:auto}
.cinbr .q{font-family:var(--serif);font-size:clamp(12px,1.1vw,15px);letter-spacing:.16em;
 text-transform:uppercase;line-height:1.42;margin:0 0 22px}
.cinbtn{display:inline-flex;align-items:center;gap:0}
.cinbtn a{background:var(--ink);color:var(--paper);text-decoration:none;border-radius:40px;
 padding:14px 30px;font-family:var(--serif);letter-spacing:.1em;text-transform:uppercase;
 font-size:clamp(11px,1vw,13px);position:relative;z-index:2}
.cinbtn span{width:46px;height:46px;border-radius:50%;background:var(--ink);color:var(--paper);
 display:flex;align-items:center;justify-content:center;margin-left:-10px;z-index:1}
.cincentre{left:50%;top:47%;transform:translate(-50%,-50%);text-align:center;white-space:nowrap}
.cincentre .a{font-family:var(--serif);font-size:clamp(38px,7.2vw,112px);display:block;line-height:.98;
 letter-spacing:-.012em}
.cincentre .b{font-size:clamp(13px,1.5vw,22px);letter-spacing:.02em;color:var(--muted);display:block;margin-top:12px}
.cinhint{position:absolute;left:50%;bottom:0;z-index:31;transform:translateX(-50%);
 pointer-events:none;will-change:opacity;padding:26px 34px 30px;
 background:radial-gradient(120% 120% at 50% 100%,rgba(5,13,11,.92) 0%,rgba(5,13,11,.62) 55%,rgba(5,13,11,0) 100%)}
.cinhint svg{display:block}
.cinhint i{display:block;font-style:normal;font-size:9.5px;letter-spacing:.3em;
 text-transform:uppercase;color:var(--paper);text-align:center;margin-top:8px;
 text-shadow:0 1px 8px rgba(0,0,0,.8)}
@keyframes cinArrow{0%{transform:translateY(-6px);opacity:0}40%{opacity:1}100%{transform:translateY(10px);opacity:0}}
.cinhint svg{animation:cinArrow 1.6s ease-in-out infinite}

@media(max-width:820px){
 .cin{height:520vh}
 .cintr,.cinbl{display:none}
 .orblab{left:auto;right:6vw;width:56vw;top:auto;bottom:14vh;transform:none}
}
@media(prefers-reduced-motion:reduce){
 .cin{height:auto}
 .cinstage{position:static;height:auto;padding:70px 0 80px;background:var(--ink)}
 .cinvid,.cinstage::after,.cinhint{display:none}
 .cinmask{position:static;width:auto;height:auto;transform:none;clip-path:none;overflow:visible}
 .cinworld{position:static;width:auto;height:auto;transform:none}
 .cinorb{position:static;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  max-width:var(--max);margin:0 auto;padding:34px 26px}
 .orb{position:static!important;transform:none!important;width:auto!important;height:auto!important;
  aspect-ratio:1/1;border-radius:2px}
 .orblab{display:none}
 .orblab{display:none}
 .cinui{position:static}
 .cinui .cel{position:static;opacity:1!important;filter:none!important;transform:none!important;
  color:var(--paper);margin:0 auto 26px;max-width:var(--max);padding:0 26px}
 .cincentre{white-space:normal}
 .cinbrand .b,.cincentre .b{color:var(--dkmut)}
 .cinbtn a,.cinbtn span{background:var(--gold);color:var(--ink)}
}
/* ---- Rule 6: the standing cue. One slow float, used ONLY on the opening cue.
   NOT used on any other element, ever. It exists because the first viewport is
   otherwise empty until the iris opens. ---- */
.cincue{position:absolute;left:0;right:0;top:50%;z-index:32;transform:translateY(-50%);
 text-align:center;pointer-events:none;color:var(--paper);will-change:opacity}
.cincue .fl{display:block;animation:cueFloat 4.6s ease-in-out infinite}
/* the one showpiece: her own jadeite showing through the letterforms.
   Used ONCE, on this word only. Solid gold is the fallback if the browser
   cannot clip a background to text, so the word never disappears. */
.cincue .a{display:block;font-family:var(--serif);font-weight:400;
 font-size:clamp(28px,5vw,68px);line-height:.9;letter-spacing:-.024em;
 text-transform:uppercase;white-space:nowrap;
 color:var(--gold);text-shadow:0 4px 40px rgba(0,0,0,.6)}
@supports (background-clip:text) or (-webkit-background-clip:text){
 /* a strip built from the brightest window of six of her own pieces, so every
    letterform lands on jadeite and diamond rather than on black silk. */
 .cincue .a{background-image:url(img/typefill.webp);background-size:auto 118%;
  background-position:50% 42%;background-repeat:repeat-x;
  -webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;
  filter:drop-shadow(0 6px 30px rgba(0,0,0,.5)) brightness(1.18) contrast(1.02)}
}
.cincue .b{display:block;margin-top:26px;font-size:clamp(10px,1.05vw,13px);letter-spacing:.42em;
 text-transform:uppercase;color:#C9CAC8;text-shadow:0 1px 12px rgba(0,0,0,.9)}
.cincue .r{display:block;width:1px;height:56px;margin:26px auto 0;
 background:linear-gradient(180deg,rgba(11,110,79,.9),rgba(11,110,79,0))}
@keyframes cueFloat{0%,100%{transform:translateY(-7px)}50%{transform:translateY(7px)}}

/* ---- Rule 2 at word granularity. Same shape as the footer wordmark:
   opacity + lift + blur, staggered. Used on the "What comes with it" cards.
   NOT used on body copy, nav, or anything with more than ~8 words. ---- */
.pop .pi{display:block;will-change:transform,opacity,filter;
 opacity:var(--po,0);transform:translateY(calc(var(--py,26) * 1px)) scale(var(--ps,.9));
 filter:blur(calc(var(--pb,10) * 1px))}
.pop w{display:inline-block;white-space:pre;will-change:transform,opacity,filter;
 opacity:var(--po,0);transform:translateY(calc(var(--py,20) * 1px));
 filter:blur(calc(var(--pb,8) * 1px))}
.pop .pt{will-change:transform,opacity,filter;opacity:var(--po,0);
 transform:translateY(calc(var(--py,16) * 1px));filter:blur(calc(var(--pb,8) * 1px))}
.pop.done .pi,.pop.done w,.pop.done .pt{opacity:1;transform:none;filter:none;will-change:auto}
/* ============================================================
   OYLA grammar, ported to vanilla and to real assets.
   Three components, reused across the inner pages:
     .sh   scroll-scrubbed hero      (a piece's own studio views, not video)
     .hc   pinned horizontal carousel, then a centre-out reveal
     .sp   two-column sticky split with a right-hand figure stack
   Motion is Rule 1 and Rule 2 only. No new language.
   ============================================================ */

/* --- A. scrubbed hero ------------------------------------- */
.sh{position:relative;background:var(--ink)}
.shstage{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--ink);
 display:flex;align-items:flex-end}
.shframes{position:absolute;inset:0;z-index:1}
.shframes img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
 opacity:0;will-change:opacity}
.shframes img.on{opacity:1}
.shstage::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
 background:linear-gradient(to top,rgba(20,21,20,.95) 0%,rgba(20,21,20,.92) 22%,
  rgba(20,21,20,.62) 40%,rgba(20,21,20,.22) 58%,rgba(20,21,20,0) 76%)}
.shin{position:relative;z-index:3;width:100%;max-width:1220px;margin:0 auto;
 padding:0 clamp(26px,4vw,48px) clamp(40px,7vh,64px)}
.shtitle{margin:0;font-family:var(--serif);font-weight:400;color:var(--paper);
 font-size:clamp(26px,3.9vw,52px);line-height:.96;letter-spacing:-.02em;max-width:16ch}

/* ============================================================
   THE STILL HERO. One photograph, one heading, one link. What was
   here scrubbed five to seven frames as you scrolled, across three
   screens, on seven pages. Nothing moves now.
   ============================================================ */
.sh{position:relative;background:#141514;overflow:hidden}
.shstage{position:relative;min-height:min(76vh,660px);display:flex;
 align-items:flex-end;isolation:isolate;height:auto;overflow:hidden;
 background:#141514}
.sh.lite .shstage{background:#EDECE8}
.shstill{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
 z-index:0}
.shstage::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
 background:linear-gradient(to top,rgba(15,16,15,.86) 0%,rgba(15,16,15,.42) 42%,
 rgba(15,16,15,.10) 74%)}
/* a pale frame needs the opposite treatment: ink type on the photograph's own
   light, measured per frame at build time by framelum() */
.sh.lite{background:#EDECE8}
.sh.lite .shstage::after{background:linear-gradient(to top,
 rgba(244,244,243,.90) 0%,rgba(244,244,243,.50) 44%,rgba(244,244,243,.12) 76%)}
.sh.lite .shtitle,.sh.lite .shsub{color:var(--ink)}
.shin{position:relative;z-index:2;width:100%;max-width:var(--max);margin:0 auto;
 padding:0 clamp(18px,4vw,44px) clamp(36px,6vh,58px)}
.shsub{margin:16px 0 0;max-width:52ch;font-size:clamp(15px,1.25vw,17px);
 line-height:1.62;color:rgba(244,244,243,.86)}
.shin .cap{margin-top:24px}
@media(max-width:700px){.shstage{min-height:min(62vh,480px)}}

/* ============================================================
   THE PLAIN GRID. Replaces the horizontal track. Photograph, name,
   price, and the whole tile is the link — which is how Tiffany's
   product cards work, and the one thing she asked for in writing:
   'let the visitors reached to our collections and items more
   clearly and easily'.
   ============================================================ */
.tg{background:var(--paper);padding:clamp(48px,7vh,80px) 0}
.tgmx{max-width:var(--max);margin:0 auto;padding:0 clamp(18px,4vw,44px)}
.tgg{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,26px)}
.tgc{display:block;text-decoration:none;color:inherit}
.tgc .im{display:block;overflow:hidden;background:var(--stage);border-radius:2px;
 aspect-ratio:1/1}
.tgc .im img{width:100%;height:100%;object-fit:cover;display:block;
 transition:transform .7s cubic-bezier(.16,1,.3,1)}
.tgc:hover .im img{transform:scale(1.04)}
.tgc .nm{display:block;margin-top:12px;font-family:var(--sans);font-size:14px;
 font-weight:600;line-height:1.35;letter-spacing:-.01em}
.tgc .pr{display:block;margin-top:3px;font-size:13px;color:var(--muted)}
@media(max-width:980px){.tgg{grid-template-columns:repeat(2,1fr)}}

/* ============================================================
   SPECIFICATION. Her own four columns off the stock list, printed
   as she wrote them, below the photograph and the price because she
   said the data is for people who deliberately click in.
   ============================================================ */
.hs{background:var(--sheet);padding:clamp(46px,7vh,74px) 0}
.hs h2{text-align:left;font-family:var(--sans);font-weight:600;
 font-size:var(--t21);line-height:1.3;letter-spacing:.007em;margin:0 0 22px}
.hsg{margin:0;border-top:1px solid var(--line)}
.hsr{display:grid;grid-template-columns:minmax(120px,190px) 1fr;gap:12px 26px;
 padding:13px 0;border-bottom:1px solid var(--line)}
.hsr dt{margin:0;font-family:var(--sans);font-size:12px;font-weight:600;
 letter-spacing:.13em;text-transform:uppercase;color:var(--muted);line-height:1.5}
.hsr dd{margin:0;font-size:var(--t17);line-height:1.55;letter-spacing:-.01em}
.hsdet{margin:24px 0 0;font-size:var(--t17);line-height:1.68;letter-spacing:-.012em;
 max-width:74ch}
.hsnote{margin:14px 0 0;font-size:var(--t12);letter-spacing:.06em;
 text-transform:uppercase;color:var(--muted)}
@media(max-width:620px){.hsr{grid-template-columns:1fr;gap:3px;padding:12px 0}}
/* v58.2: the specification sits behind one click */
.hsd>summary{list-style:none;cursor:pointer;display:flex;flex-wrap:wrap;align-items:baseline;
 justify-content:space-between;gap:8px 24px;padding:0 0 18px;border-bottom:1px solid var(--line)}
.hsd>summary::-webkit-details-marker{display:none}
.hsd>summary h2{margin:0}
.hsd[open]>summary{border-bottom:0;padding-bottom:22px}
.hsx{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.13em;
 text-transform:uppercase;color:var(--muted);white-space:nowrap}
.hsx::after{content:"+";display:inline-block;margin-left:10px;font-size:15px;letter-spacing:0}
.hsd[open] .hsx::after{content:"\2212"}
.hsx .c{display:none}.hsd[open] .hsx .o{display:none}.hsd[open] .hsx .c{display:inline}
.hsd>summary:focus-visible{outline:2px solid var(--jade);outline-offset:6px}

/* --- other pieces in the same collection --- */
.sc{background:var(--paper);padding:clamp(46px,7vh,74px) 0}
.sc h2{text-align:left;font-family:var(--serif);font-weight:400;
 font-size:clamp(21px,2.2vw,29px);line-height:1.15;letter-spacing:-.012em;
 margin:0 0 12px}
.sc .lead{margin:0 0 6px;max-width:62ch;font-size:var(--t17);line-height:1.68;
 letter-spacing:-.012em;color:var(--ink)}
.sc .src{margin:0 0 24px;font-size:var(--t12);letter-spacing:.08em;
 text-transform:uppercase;color:var(--muted)}
.scg{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,26px)}
.scc{display:block;text-decoration:none;color:inherit}
.scc .im{display:block;overflow:hidden;background:var(--stage);border-radius:2px;
 aspect-ratio:1/1}
.scc .im img{width:100%;height:100%;object-fit:cover;display:block;
 transition:transform .7s cubic-bezier(.16,1,.3,1)}
.scc:hover .im img{transform:scale(1.04)}
.scc .nm{display:block;margin-top:12px;font-family:var(--sans);font-size:14px;
 font-weight:600;line-height:1.35;letter-spacing:-.01em}
.scc .pr{display:block;margin-top:3px;font-size:13px;color:var(--muted)}
.scc.rx{display:none}
.mp{border-top:1px solid var(--line)}
@media(max-width:980px){.scg{grid-template-columns:repeat(2,1fr)}}

.shtitle .ln{display:block}
/* the Chinese name is a signature under the English one, not a second
   headline. She asked for it smaller and the styling quieter. */
.shtitle .ln.cn{font-size:.34em;letter-spacing:.22em;line-height:1.6;
 color:rgba(244,244,243,.74);margin-top:.5em}
/* Her mark on the About page: 'Names are too big, can it be a bit smaller and
   more elegant?', beside LinShiaoTung's own mark. A name is not a headline:
   set small, letterspaced and light, the way a maker signs a piece. */
.shtitle.quiet{font-size:clamp(23px,2.6vw,38px);letter-spacing:.09em;font-weight:400}
.shtitle.quiet .ln.cn{font-size:.62em;letter-spacing:.3em;margin-top:.62em;
 color:rgba(244,244,243,.8)}
.shtitle .wd{display:inline-block;white-space:nowrap;font-weight:inherit}
.shtitle .sp2{display:inline;font-style:normal}
.shtitle b{font-weight:400;font-style:italic}
.shsub{margin:20px 0 0;max-width:52ch;color:#D9DAD8;
 font-size:clamp(15px,1.3vw,19px);line-height:1.5}
.shcount{position:absolute;right:clamp(26px,4vw,48px);bottom:clamp(40px,7vh,64px);z-index:3;
 color:#C9CAC8;font-size:12px;letter-spacing:.2em;transition:color .42s ease}
/* A bright frame (white ceramic, daylight) gets ink type on a pale plate
   instead. Measured at build time, flipped per frame, so neither a black
   silk still nor a white one is ever the wrong way round. */
.shtitle,.shsub{transition:color .42s ease}
.shstage::after{transition:background .42s ease}
.shstage.lite::after{background:linear-gradient(to top,rgba(244,244,243,.95) 0%,
 rgba(244,244,243,.92) 22%,rgba(244,244,243,.62) 40%,rgba(244,244,243,.22) 58%,
 rgba(244,244,243,0) 76%)}
/* the stage's own ground follows the flip too: it is what shows if a frame
   fails to load, and a pale frame deserves a pale fallback */
.shstage.lite{background:var(--paper)}
.shstage.lite .shtitle{color:var(--ink)}
.shstage.lite .shsub{color:#3C3D3B}
.shstage.lite .shcount{color:#4E4F4D}
.shstage.lite .cap{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.shstage.lite .cap i{background:var(--paper)}
.shstage.lite .cap i::before,.shstage.lite .cap i::after{background:var(--ink)}
.shstage.lite .cap:hover{background:var(--paper);color:var(--ink);border-color:var(--line)}
.shstage.lite .cap:hover i{background:var(--ink)}
.shstage.lite .cap:hover i::before,.shstage.lite .cap:hover i::after{background:var(--paper)}
/* capsule button, the one interactive shape on the site */
.cap{display:inline-flex;align-items:center;gap:14px;margin-top:26px;
 background:var(--paper);color:var(--ink);text-decoration:none;
 border:1px solid var(--line);border-radius:100px;padding:5px 5px 5px 20px;
 font-size:13px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
 transition:background .28s ease,color .28s ease}
.cap i{width:28px;height:28px;border-radius:50%;background:var(--ink);position:relative;
 flex:0 0 28px;transition:background .28s ease}
.cap i::before,.cap i::after{content:"";position:absolute;left:50%;top:50%;background:var(--paper);
 transition:background .28s ease}
.cap i::before{width:10px;height:1.5px;transform:translate(-50%,-50%)}
.cap i::after{width:1.5px;height:10px;transform:translate(-50%,-50%)}
.cap:hover{background:var(--ink);color:var(--paper)}
.cap:hover i{background:var(--paper)}
.cap:hover i::before,.cap:hover i::after{background:var(--ink)}

/* --- B. pinned horizontal carousel + centre-out reveal ---- */
.hc{position:relative;background:var(--jadedeep)}
.hcstage{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--jadedeep)}
.hctrack{display:flex;width:max-content;height:100%;will-change:transform}
.hccard{width:46vw;border-right:1px solid rgba(244,244,243,.14);background:var(--jadedeep);
 display:flex;flex-direction:column;justify-content:flex-end;text-decoration:none;color:var(--paper);
 position:relative;overflow:hidden}
.hccard .im{position:absolute;inset:0;z-index:0;display:block}
.hccard .im img{width:100%;height:100%;object-fit:cover;display:block;
 transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.hccard::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
 background:linear-gradient(to top,rgba(20,21,20,.88) 0%,rgba(20,21,20,.30) 34%,rgba(20,21,20,0) 62%)}
.hccard .nm,.hccard .pr{position:relative;z-index:2;text-decoration:none}
.hccard .nm{display:block;font-family:var(--serif);font-size:clamp(24px,2.4vw,38px);
 line-height:1.02;letter-spacing:-.018em;padding:0 clamp(24px,3vw,44px)}
.hccard .pr{display:block;font-size:15px;font-weight:500;letter-spacing:.06em;color:var(--dkmut);
 padding:10px clamp(24px,3vw,44px) clamp(34px,6vh,58px)}
.hccard:hover .im img{transform:scale(1.035)}
.hcreveal{position:absolute;left:50%;top:0;height:100%;width:0;transform:translateX(-50%);
 overflow:hidden;z-index:4;will-change:width;pointer-events:none}
.hcreveal img{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
 width:100vw;height:100svh;object-fit:cover;max-width:none}
.hcreveal figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;margin:0;
 padding:clamp(28px,6vh,56px) clamp(26px,4vw,48px);color:var(--paper);
 font-family:var(--serif);font-size:clamp(21px,2.6vw,36px);line-height:1.05;
 background:linear-gradient(to top,rgba(20,21,20,.84),rgba(20,21,20,0))}

/* --- line introduction: the same on both lines (her 14 Oct note) --- */
.li{background:var(--paper);padding:clamp(56px,9vh,104px) 0 clamp(48px,8vh,96px);border-bottom:1px solid var(--line)}
.limx{max-width:var(--max);margin:0 auto;padding:0 clamp(18px,4vw,44px)}
.litop{display:grid;grid-template-columns:5fr 7fr;gap:clamp(24px,5vw,72px);align-items:start}
.li h2{font-family:var(--serif);font-weight:400;font-size:clamp(26px,3vw,40px);line-height:1.12;margin:0}
.li .lik{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.li .lib p{margin:0 0 14px;font-size:clamp(16px,1.35vw,19px);line-height:1.5;max-width:58ch}
.li .lib .cap{margin-top:10px}
.lig{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.8vw,24px);margin-top:clamp(36px,6vh,64px)}
.lif{margin:0}
.lif .lim{display:block;aspect-ratio:4/5;overflow:hidden;background:var(--sheet);border-radius:2px}
.lif img{width:100%;height:100%;object-fit:cover;display:block}
.lif figcaption{margin-top:12px;font-size:14px;line-height:1.45;color:var(--muted)}
.lif figcaption b{display:block;color:var(--ink);font-weight:600;margin-bottom:2px}
@media(max-width:860px){.litop{grid-template-columns:1fr}.lig{grid-template-columns:1fr 1fr}
 .lig .lif:first-child{grid-column:1/-1}.lig .lif:first-child .lim{aspect-ratio:3/2}}
/* past work in groups (Jewels And Me) */
.pwgr{margin-top:34px}
.pwgr:first-of-type{margin-top:8px}
.pwgr h3{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.16em;
 text-transform:uppercase;color:var(--muted);margin:0 0 16px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.tgc .dt{display:block;margin-top:3px;font-size:12.5px;line-height:1.4;color:var(--muted)}

/* --- C. two-column sticky split --------------------------- */
.sp{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line)}
.spl{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;
 justify-content:space-between;padding:clamp(40px,7vh,64px) clamp(40px,6vw,96px) clamp(40px,7vh,64px) clamp(26px,4vw,48px)}
.spl h2{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.6vw,34px);
 line-height:1.14;margin:0}
.spl .body{display:flex;flex-direction:column;gap:clamp(18px,2.6vh,32px);margin:clamp(24px,4vh,40px) 0 0}
.spl .body p{margin:0;font-size:clamp(17px,1.6vw,23px);line-height:1.24;letter-spacing:-.012em}
.spr{border-left:1px solid var(--line)}
.spc{padding:clamp(30px,5vh,48px) clamp(26px,3.4vw,48px);min-height:45vh;
 border-bottom:1px solid var(--line);display:flex;flex-direction:column;justify-content:center}
.spc:last-child{border-bottom:0}
.spc h3{font-family:var(--serif);font-weight:400;margin:0;
 font-size:clamp(27px,3.6vw,46px);line-height:.96;letter-spacing:-.02em}
.spc h3 span{display:block;color:var(--muted)}
.spc p{margin:clamp(20px,4vh,42px) 0 0;font-size:clamp(16px,1.5vw,22px);line-height:1.22;
 letter-spacing:-.012em;color:var(--ink)}
.spc .fine{margin-top:12px;font-size:13px;color:var(--muted)}

@media(max-width:1199px){
 .hccard{width:62vw}
 .shtitle{font-size:clamp(28px,5.4vw,44px)}
}
@media(max-width:820px){
 .sp{grid-template-columns:1fr}
 .spl{position:static;height:auto;padding:clamp(34px,6vh,48px) 26px}
 .spr{border-left:0;border-top:1px solid var(--line)}
 .spc{min-height:0;padding:34px 26px}
 .hccard{width:88vw}
 .hcreveal figcaption{font-size:clamp(18px,5vw,25px)}
 .cap{min-height:44px}
}
@media(prefers-reduced-motion:reduce){
 .sh{height:auto!important}
 .shstage{position:static;height:auto;min-height:64svh}
 .hc{height:auto!important}
 .hcstage{position:static;height:auto}
 .hctrack{width:auto;display:grid;grid-template-columns:repeat(2,1fr)}
 .hccard{width:auto;border-right:0;border-bottom:1px solid rgba(244,244,243,.14);min-height:52svh}
 .hcreveal{display:none}
 .spl{position:static;height:auto}
}
/* The garden band is gone: its rules went with it. The section that replaced
   it is .org, above. */
/* --- home: in-stock grid, and the visit block. Same locked scale as the buy page. --- */
.hmgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 26px;padding:0 0 6px}
.hmc{display:block;text-decoration:none;color:inherit}
.hmc .ph{background:var(--stage);border-radius:2px;overflow:hidden;aspect-ratio:1/1;margin-bottom:14px}
.hmc .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.hmc:hover .ph img{transform:scale(1.04)}
.hmc .nm{display:block;font-family:var(--sans);font-size:var(--t17);font-weight:600;
 line-height:25px;letter-spacing:-.022em}
.hmc .hk{display:block;font-size:var(--t14);line-height:20px;letter-spacing:-.022em;
 color:var(--muted);margin-top:3px}
.hmc .pr{display:block;font-size:var(--t14);line-height:20px;letter-spacing:-.022em;margin-top:8px}
.hmsec{padding:78px 0 84px}
.hmsec h2{text-align:center;font-family:var(--sans);font-weight:600;font-size:var(--t32);
 line-height:1.18;letter-spacing:.007em;margin:0 0 8px}
.hmsec .lead{text-align:center;font-size:var(--t17);line-height:25px;letter-spacing:-.022em;
 color:var(--muted);margin:0 auto 46px;max-width:620px}
.hmsec .cn{text-align:center;margin:40px 0 0;font-size:var(--t14);letter-spacing:-.022em}
.hmvisit{background:var(--jadedeep);color:var(--paper);padding:74px 0}
.hmvisit h2{color:var(--paper)}
.hmvisit .lead{color:#C7C8C6}
.hmv{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;text-align:center}
.hmv h3{font-family:var(--sans);font-size:var(--t17);font-weight:600;line-height:25px;
 letter-spacing:-.022em;margin:0 0 6px;color:var(--paper)}
.hmv p{margin:0;font-size:var(--t14);line-height:20px;letter-spacing:-.022em;color:#C7C8C6}
.hmv a{color:var(--acclite)}   /* dark ground: the accent lightens */
@media(max-width:900px){
 .hmgrid{grid-template-columns:repeat(2,1fr);gap:26px 16px}
 .hmv{grid-template-columns:1fr;gap:26px}
}
@media(max-width:900px){
 .bp{--t48:34px;--t32:25px;--t21:19px}
 .bpgrid{grid-template-columns:1fr;gap:34px}
 /* relative, not static: 'static' un-anchored the two .bpnav arrows, which are
    position:absolute;top:50%, so on a phone they floated at mid-viewport over the
    opening film. Measured at 390px: arrows at y=421 while .bpstage sat at 4640. */
 .bpstage{position:relative;top:auto}
 .bpobj{grid-template-columns:1fr}
 .bptbl,.bptbl tbody,.bptbl thead,.bptbl tr,.bptbl th,.bptbl td{display:block;width:auto}
 .bptbl thead{display:none}
 .bptbl tbody tr{padding:14px 0}
 .bptbl tbody tr.hd td{border-top:1px solid var(--hair);padding:28px 0 2px}
 .bptbl tbody td{border:0;text-align:left;padding:9px 0 0;display:grid;
   grid-template-columns:110px 1fr;gap:12px;align-items:baseline}
 .bptbl tbody td::before{content:attr(data-p);font-size:11px;letter-spacing:.06em;
   text-transform:uppercase;color:var(--muted);line-height:16px}
 .bptbl tbody td b{margin-bottom:2px}
 .bptbl tbody tr.hd td{display:block;text-align:left}
 .bptbl tbody tr.hd td::before{content:none}
 .bpcmpmob{font-size:var(--t12);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
}
@media(prefers-reduced-motion:reduce){ .bpshots img{transition:none} }

@media(prefers-reduced-motion:reduce){
 .rv{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
 .dwcol{transform:none!important}
 .dwplane{transform:none!important}
 .dust i,.floaty{animation:none!important}
 .mask{clip-path:ellipse(150% 150% at 50% 50%)!important}
}

/* ============================================================
   THE PROOF GRID. A light bento: a tall media card with a real
   timeline, a quote, one large number, a marquee of materials and
   techniques, and the contact card. Card entry is Rule 1 (.rv),
   so this adds no new motion language.
   ============================================================ */
.pg{position:relative;background:var(--paper);color:var(--ink);
 padding:clamp(34px,4vw,72px) clamp(16px,3.8vw,72px)}
.pghead{display:flex;align-items:flex-start;justify-content:space-between;gap:32px;
 max-width:var(--max);margin:0 auto clamp(24px,3vw,42px)}
.pgintro{max-width:860px}
.pgintro h2{max-width:22ch;margin:0;font-family:var(--serif);font-weight:400;
 font-size:clamp(25px,2.5vw,38px);line-height:1.08;letter-spacing:-.016em}
.pgintro p{max-width:62ch;margin:18px 0 0;color:var(--muted);
 font-size:clamp(14px,1vw,17px);line-height:1.62}
.pgbtn{flex:0 0 auto;align-self:flex-start;display:inline-flex;align-items:center;
 justify-content:center;gap:10px;min-height:48px;padding:0 20px;text-decoration:none;
 border:1px solid rgba(20,21,20,.12);border-radius:999px;background:rgba(255,255,255,.82);
 color:var(--ink);font-size:14px;font-weight:600;letter-spacing:.01em;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 18px 44px rgba(31,44,44,.08);
 transition:background .28s ease,color .28s ease}
.pgbtn svg{width:18px;height:18px;flex:0 0 18px}
.pgbtn:hover{background:var(--ink);color:var(--paper)}
.pggrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
 gap:clamp(14px,1.25vw,22px);max-width:var(--max);margin:0 auto;
 min-height:clamp(620px,72vh,780px)}
.pgstack{display:grid;gap:clamp(14px,1.25vw,22px);
 grid-template-rows:minmax(210px,.74fr) minmax(270px,1fr)}
.pgstack.sys{grid-template-rows:minmax(420px,1.45fr) auto}
.pgc{position:relative;overflow:hidden;border:1px solid rgba(18,35,35,.09);
 border-radius:18px;box-shadow:0 22px 60px rgba(21,34,34,.08)}
/* the card's own ground is what shows if a photograph fails to load, so it
   matches the treatment the type is set for */
.pgc.med{background:var(--jadedeep);color:var(--paper)}
.pgc.tall{grid-row:span 2}
.pgc img.bg,.pgc video.bg{position:absolute;inset:0;width:100%;height:100%;
 object-fit:cover;transform:scale(1.02)}
.pgc.tall img.bg{object-position:50% 30%}
.pgshade{position:absolute;inset:0;
 background:linear-gradient(180deg,rgba(5,12,14,.66),rgba(5,12,14,.30) 16%,transparent 34%),
  linear-gradient(0deg,rgba(5,12,14,.92) 0%,rgba(5,12,14,.86) 26%,
   rgba(5,12,14,.54) 44%,rgba(5,12,14,.12) 62%,transparent 74%)}
.pgshade.soft{background:linear-gradient(180deg,rgba(5,12,14,.62),rgba(5,12,14,.26) 16%,transparent 36%),
  linear-gradient(0deg,rgba(5,12,14,.52),transparent 56%)}
.pglab{position:relative;z-index:1;display:flex;align-items:center;padding:24px;
 color:rgba(255,255,255,.86);font-size:11px;font-weight:600;letter-spacing:.18em;
 text-transform:uppercase}
.pglab.l{padding:0;color:#6B7676}
/* the timeline: real years, real programmes */
.pgtl{position:absolute;z-index:1;right:20px;bottom:20px;left:20px;display:grid;gap:12px}
.pgtl .r{display:grid;grid-template-columns:46px 10px minmax(0,1.25fr) minmax(0,1fr);
 align-items:baseline;gap:10px;color:rgba(255,255,255,.80);font-size:12px}
.pgtl .r>span:first-child{font-variant-numeric:tabular-nums}
.pgtl .r i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.62);
 justify-self:center;font-style:normal;position:relative;top:-3px}
.pgtl .r b{font-weight:600;color:#fff;font-size:clamp(13px,.95vw,15px);line-height:1.24}
.pgtl .r em{font-style:normal;color:rgba(255,255,255,.66)}
/* quote */
.pgc.quo{display:flex;flex-direction:column;justify-content:space-between;padding:24px;
 background:linear-gradient(135deg,rgba(255,255,255,.74),rgba(238,244,244,.86)),var(--sheet)}
.pgc.quo blockquote{margin:clamp(22px,2.4vw,34px) 0 20px;color:#263030;
 font-family:var(--serif);font-size:clamp(17px,1.2vw,22px);line-height:1.44}
.pgc.quo .at{margin:0;font-size:14px;line-height:1.5;color:#6B7676}
.pgc.quo .at b{display:block;color:var(--ink);font-size:15px;font-weight:500}
/* one large number over a photograph */
.pgc.met{display:block;min-height:320px;background:var(--jadedeep);color:var(--paper)}
.pgmet{position:absolute;inset:0;z-index:1;text-align:center;
 text-shadow:0 12px 32px rgba(0,0,0,.34)}
.pgmet::before{content:"";position:absolute;inset:0;
 background:radial-gradient(46% 36% at 50% 46%,rgba(5,12,14,.56),transparent 72%)}
.pgmet b{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
 font-family:var(--serif);font-weight:300;font-size:clamp(52px,5vw,84px);line-height:.9}
.pgmet span{position:absolute;right:24px;bottom:24px;left:24px;
 color:rgba(255,255,255,.86);font-size:clamp(14px,1.05vw,18px);line-height:1.4}
/* marquee of materials and techniques */
.pgc.tools{display:flex;flex-direction:column;justify-content:space-between;
 min-height:420px;background:var(--jadedeep)}
.mq{display:grid;gap:14px;overflow:hidden;padding:26px 0 8px;
 -webkit-mask-image:linear-gradient(to right,transparent,#000 13%,#000 87%,transparent);
 mask-image:linear-gradient(to right,transparent,#000 13%,#000 87%,transparent)}
.mq .row{display:flex;width:max-content;gap:12px}
.mq .row.a{animation:mqL 24s linear infinite}
.mq .row.b{animation:mqR 28s linear infinite;transform:translateX(-50%)}
.mq .p{display:inline-flex;align-items:center;justify-content:center;gap:8px;
 min-height:54px;padding:0 16px;border:1px solid rgba(255,255,255,.34);
 border-radius:14px;background:rgba(250,250,249,.90);color:var(--ink);font-size:13px;
 font-weight:600;white-space:nowrap;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 10px 26px rgba(5,12,14,.24)}
.mq .p svg{color:var(--muted)}
.mq .p svg{width:20px;height:20px;flex:0 0 20px}
@keyframes mqL{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes mqR{from{transform:translateX(-50%)}to{transform:translateX(0)}}
/* contact */
.pgc.con{display:flex;align-items:center;justify-content:space-between;gap:20px;
 min-height:118px;padding:20px 76px 20px 24px;
 background:linear-gradient(135deg,rgba(255,255,255,.74),rgba(238,244,244,.86)),var(--sheet)}
.pgc.con a.em{display:block;margin:14px 0 6px;font-family:var(--serif);
 font-size:clamp(16px,1.15vw,20px);font-weight:400;color:var(--ink);text-decoration:none;
 line-height:1.2;overflow-wrap:anywhere}
.pgc.con a.em:hover{text-decoration:underline}
.pgc.con .ph{margin:0;color:#6B7676;font-size:14px;line-height:1.5}
.pgic{position:absolute;top:50%;right:16px;transform:translateY(-50%);
 width:42px;height:42px;border-radius:50%;border:1px solid rgba(20,21,20,.12);
 background:var(--ink);color:var(--paper);display:inline-flex;align-items:center;
 justify-content:center;text-decoration:none}
.pgic svg{width:19px;height:19px}
@media(max-width:1080px){
 .pggrid{grid-template-columns:repeat(2,minmax(0,1fr));min-height:auto}
 .pgc.tall{min-height:620px}
 .pgstack.sys{grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:minmax(260px,1fr)}
}
@media(max-width:760px){
 .pghead{flex-direction:column}
 .pgbtn{width:100%}
 .pggrid,.pgstack,.pgstack.sys{grid-template-columns:1fr;grid-template-rows:auto}
 .pgc.tall{min-height:560px}
 .pgtl .r{grid-template-columns:52px 14px minmax(0,1fr)}
 .pgtl .r em{grid-column:3;color:rgba(255,255,255,.60)}
 .pgc.con{padding:20px 70px 20px 20px}
}
@media(prefers-reduced-motion:reduce){
 .mq .row.a,.mq .row.b{animation:none;transform:none}
 .mq{mask-image:none;-webkit-mask-image:none;overflow-x:auto}
}

/* ============================================================
   THE DARK LEDGER. A six-column bento on the ink ground: a heading
   card, a dot chart built from the real stock list, a diagram card,
   a statement card, a count card and a photograph. Every figure here
   is counted from the catalog at build time, never written by hand.
   ============================================================ */
.dl{position:relative;background:var(--jadedeep);color:var(--paper);
 padding:clamp(48px,7vh,110px) clamp(20px,3.8vw,64px)}
.dlgrid{max-width:var(--max);margin:0 auto;display:grid;gap:16px}
@media(min-width:900px){
 .dlgrid{grid-template-columns:repeat(6,minmax(0,1fr));
  grid-auto-rows:minmax(46px,auto)}
 .dl-h{grid-column:1/3;grid-row:1/5}
 .dl-a{grid-column:3/5;grid-row:1/6}
 .dl-t{grid-column:5/7;grid-row:1/5}
 .dl-b{grid-column:1/3;grid-row:5/11}
 .dl-p{grid-column:3/5;grid-row:6/11}
 .dl-c{grid-column:5/7;grid-row:5/11}
}
.dlc{position:relative;padding:28px}
.dlc.w{background:var(--paper);color:var(--ink)}
.dlc.k{background:#1F201F;color:var(--paper)}
.dlc.n{background:none;padding:0 16px 16px 0;display:flex;flex-direction:column;
 justify-content:flex-end}
.dlplus{display:inline-flex;width:28px;height:28px;flex:0 0 28px;align-items:center;
 justify-content:center;border:1px solid rgba(244,244,243,.30);color:var(--paper);
 font-size:12px;font-weight:300;line-height:1}
.dlc.w .dlplus{border-color:rgba(20,21,20,.20);color:var(--ink)}
.dlkey{display:inline-block;margin:0 0 14px;font-size:12px;letter-spacing:.15em;
 text-transform:lowercase;color:var(--dkmut)}
.dlc.n h2{margin:0;font-family:var(--serif);font-weight:400;letter-spacing:-.014em;
 font-size:clamp(26px,2.6vw,40px);line-height:1.2}
.dlc.n h2 .m{color:#6E706D}
.dlfig{font-family:var(--serif);font-weight:300;letter-spacing:-.02em;line-height:1;
 font-size:clamp(29px,3.5vw,45px)}
.dlsub{margin:8px 0 0;font-size:13px;line-height:1.5;color:var(--muted)}
.dlc.k .dlsub,.dlc.dark .dlsub{color:rgba(244,244,243,.66)}
.dltop{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
/* the dot chart: one dot per piece, one column per idea */
.dlchart{margin-top:auto;padding-top:32px}
.dlcols{display:flex;gap:5px;align-items:flex-end}
.dlcol{display:flex;flex-direction:column-reverse;gap:3px}
.dlcell{width:9px;height:9px;background:rgba(20,21,20,.13)}
.dlcell.on{background:var(--ink)}
.dlaxis{display:flex;gap:5px;margin-top:12px;font-size:10px;letter-spacing:.04em;
 color:#646563}
.dlaxis span{width:9px;text-align:center}
.dlcol.tal{gap:4px}
.dlcol.tal .dlcell{width:12px;height:12px}
.dlnote{margin:14px 0 0;font-size:11px;color:#646563;line-height:1.5}
/* the diagram card */
.dldia{display:flex;flex:1 1 auto;align-items:center;justify-content:center;
 padding:6px 0 2px}
.dldia svg{width:100%;height:auto;max-width:240px}
.dlbig{text-align:center;font-family:var(--serif);font-weight:300;letter-spacing:-.02em;
 font-size:clamp(32px,3.5vw,48px);line-height:1}
.dlc.w .dlbig{color:var(--ink)}
.dlmid{text-align:center;margin:6px 0 0;font-size:13px;color:var(--muted)}
/* the statement card */
.dlc.k .body{margin-top:auto;display:flex;flex-direction:column;gap:20px;padding-bottom:2px}
.dlc.k .body p{margin:0;font-size:13px;line-height:1.7;color:rgba(244,244,243,.66)}
/* the count card with the scattered marks */
.dlmarks{position:relative;height:96px;width:100%}
.dlmarks i{position:absolute;background:var(--ink);display:block}
/* the photograph card */
.dlc.ph{padding:0;overflow:hidden;background:#000;min-height:380px}
.dlc.ph>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.58}
.dlveil{position:absolute;inset:0;
 background:linear-gradient(to top,rgba(0,0,0,.62),transparent 52%,rgba(0,0,0,.34))}
.dlin{position:relative;display:flex;flex-direction:column;justify-content:space-between;
 height:100%;min-height:380px;padding:24px}
.dlmark{display:flex;align-items:flex-start;gap:4px}
.dlmark b{font-family:var(--serif);font-size:1.7rem;font-weight:400;line-height:.9;
 color:var(--paper)}
.dlmark .sq{display:grid;gap:3px}
.dlmark .sq i{display:block;width:7px;height:7px;background:rgba(244,244,243,.9)}
.dlmark .sq i:last-child{opacity:.5}
.dlaward{text-align:right;font-size:15px;font-weight:400;line-height:1;color:var(--paper)}
.dlaward .ic{display:flex;gap:5px;justify-content:flex-end;margin-top:8px}
.dlaward .ic svg{width:16px;height:16px;color:rgba(244,244,243,.9)}
.dlbars{display:flex;gap:8px}
.dlbars i{display:block}
.dlbars i:first-child{width:18px;height:18px;background:rgba(244,244,243,.7)}
.dlbars i:last-child{width:18px;height:26px;background:rgba(244,244,243,.4)}
.dlfoot{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.dlfoot .fg{font-family:var(--serif);font-weight:300;letter-spacing:-.02em;line-height:1;
 font-size:clamp(29px,3.5vw,45px);color:var(--paper)}
.dlfoot .fs{margin:8px 0 0;font-size:13px;color:rgba(244,244,243,.66)}
.dlfoot .dlsq{width:48px;height:48px;background:var(--paper);flex:0 0 48px}
@media(max-width:899px){
 .dlc.n{padding:0 0 6px}
 .dlc.ph,.dlin{min-height:340px}
}

/* ============================================================
   THE JADE FIELD. One idea, one color, filling the frame.
   The site's grounds were separated by value alone: paper and
   sheet measure 1.17:1 apart, so nothing ever changed as you
   scrolled. This is the jump. Paper on jade measures 5.68:1,
   which clears AA at any size.
   ============================================================ */
.jf{position:relative;background:var(--jade);color:var(--paper);
 min-height:100svh;display:flex;flex-direction:column;justify-content:center;
 padding:clamp(56px,9vh,110px) clamp(22px,4vw,64px)}
.jfin{width:100%;max-width:var(--max);margin:0 auto}
.jfk{display:block;margin:0 0 clamp(26px,4vh,46px);font-family:var(--serif);
 font-size:13px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;
 color:rgba(244,244,243,.72)}
/* the display line: roughly four percent of the viewport per character,
   which is the scale the reference gets its force from */
.jfh{margin:0;font-family:var(--serif);font-weight:400;color:var(--paper);
 font-size:clamp(26px,4.4vw,64px);line-height:.88;letter-spacing:-.026em;
 text-transform:uppercase;overflow-wrap:break-word}
.jfh .l{display:block}
/* one face, not two. The second line was running in the sans at the same size,
   which read as an accident rather than a decision. */
.jfh .t{letter-spacing:-.026em}
.jfb{display:flex;flex-wrap:wrap;align-items:flex-end;gap:clamp(24px,4vw,64px);
 margin:clamp(34px,5.5vh,64px) 0 0}
.jfb p{margin:0;max-width:46ch;font-family:var(--serif);font-size:clamp(17px,1.3vw,21px);line-height:1.5;
 color:rgba(244,244,243,.86)}
.jf .cap{background:var(--paper);color:var(--ink);border-color:transparent;margin:0}
.jf .cap i{background:var(--ink)}
.jf .cap i::before,.jf .cap i::after{background:var(--paper)}
.jf .cap:hover{background:var(--jadedeep);color:var(--paper)}
.jf .cap:hover i{background:var(--paper)}
.jf .cap:hover i::before,.jf .cap:hover i::after{background:var(--jadedeep)}
@media(max-width:760px){
 .jf{min-height:auto;padding:clamp(48px,10vh,72px) 22px}
 .jfb{gap:26px}
}

/* ============================================================
   THE OPENING, ON A GRID. Neue Grafik by way of Orven: the frame
   edges carry every word and the center is left to the object.
   Four zones only, all flush left, no centered type anywhere.
   The clip is scrubbed by the same damped scroll the rest of the
   site uses, so it can be run backwards.
   ============================================================ */
.nf{position:relative;background:#000}
/* ONE BLACK, everywhere in the opening (10/13, Bosco). The stage used to be
   #070807, the film's frame #000 and the type veil a #070807 tint, so on a phone,
   where the film is a band, you could see three layers of black, and on a desktop
   the veil laid a gray cast over the top and bottom of the film. Now the section,
   the stage, the film's box, the veil and the phone's type ground are all #000,
   and the film and both stills are encoded so their background is 0,0,0 too
   (black point lifted 4/255, BT.709 limited range tagged). Pure black is the only
   value a <video>, a WebP and CSS are guaranteed to render identically, so at
   any screen size and aspect there is one color and no edge. */
/* Dark ground, and this time it is the photographs that decide it, not taste.
   The two pieces the opening now carries are the Balloons pair, and her own
   camera put the jadeite edition on black silk. A paper ground would set that
   black silk down as a hard rectangle. The golden original sits on a warm tan,
   which on this ground reads as a pool of light rather than a clash.
   (A light stage was built and measured first, for a different film - her Yellow
   Orchids footage, which is pale. It was correct for that footage and wrong for
   these photographs, so it came back out.) */
.nfstage{position:relative;height:100%;overflow:hidden;background:#000}
/* The opening plays itself on one fourteen second loop. Every element rides the
   same cycle in percentages rather than a stack of delays, so the loop closes on
   itself with no seam and nothing has to be restarted.

     0.0 - 0.9s   black
     0.9 - 2.4s   her closed box fades up on absolute black
     2.4 - 3.6s   light gathers along the gold seam between lid and base
     3.6 - 5.2s   the seam blooms and the box dissolves into that light
     4.6 - 6.4s   the jadeite edition resolves inside the light
     5.5 - 7.3s   the golden original follows, a beat later
     7.0 - 7.8s   the two line labels arrive
     8.0 -  13s   hold, with one very slow sweep of light
      13 -  14s   back to black

   The seam sits at 53.6% of the stage height, measured off the plate itself: the
   box occupies y 0.269-0.730 and its lower gold band is at 0.58 of the box.
   Hard-coding that from a measurement, not from eye. */
.hx{position:absolute;inset:0;z-index:0;overflow:hidden;background:#000}
/* a soft black frame on the film's own box, so even a decoder that rounds black
   to 1/255 can never draw a line where the film meets the page */
.hx::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
 box-shadow:inset 0 0 14px 6px #000}
/* Big and very wide screens (10/13). Cover is right up to a stage about 2.15:1
   (a 1280x720 laptop is 2.13:1). Past that, on a 21:9 or 32:9 monitor, cover
   blew the film up until the box's base was cut off and the pieces ran into the
   two labels. Now the film's box stops growing at 2.15:1 and sits centered in the
   same #000, so a wider screen only adds black at the sides. */
.hx{left:50%;right:auto;width:min(100%,calc(max(520px,100svh - 118px) * 2.15));
 transform:translateX(-50%)}
/* The film is 1920x1080 on absolute black (every frame's outer 8px measured 0/255),
   so cover is safe at any aspect: whatever is cropped is black. On a very wide
   monitor the box simply sits in more black, which is the point of the black. */
.hxv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0%;
 background:#000;display:block}
.hxstill{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0%;
 opacity:0;transition:opacity .9s ease;pointer-events:none}
/* The generator locks the film's first and last frame to two of her own images,
   but the model does NOT reproduce the locked end frame - it redraws it. On the
   first film Sharon circled two invented parts and wrote 實物沒有此部分, and she
   was right. So the film is never what the visitor is left looking at: when it
   ends we fade her real photograph over the last frame. Everything that stays on
   screen is hers. */
.hx.done .hxstill{opacity:1}
/* the two line labels arrive only when the film has settled. Their spread was
   capped at 1180px, so on a 2560 or 4K screen the film kept growing and the
   labels did not: they slid in over the pieces. Now they are always 86% of the
   film's box, the spread a 1280 or 1440 screen already had, so they sit outside
   the two pieces at every size (the pieces span 24% to 79% of the film). */
.hxduo{position:absolute;left:50%;bottom:30%;width:86%;
 display:flex;justify-content:space-between;z-index:3;opacity:0;transform:translate(-50%,10px);
 transition:opacity 1.1s ease,transform 1.1s ease;pointer-events:none}
.hx.done .hxduo,.hx.lab .hxduo{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.hxp{display:block;text-decoration:none;color:inherit}
.hxc{text-align:center;display:flex;flex-direction:column;gap:3px}
.hxc{gap:7px}
.hxc b{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.2em;
 text-transform:uppercase;color:rgba(244,244,243,.78)}
.hxc em{font-style:normal;font-family:var(--serif);font-size:clamp(22px,2.2vw,32px);
 letter-spacing:.02em;line-height:1.1;color:var(--paper);padding-bottom:6px;
 border-bottom:1px solid rgba(244,244,243,.45)}
.hxp:hover .hxc em{border-bottom-color:var(--acclite)}
.hxp:hover .hxc em{color:var(--acclite)}
/* her 30 Oct voice note: jadeite is the main line, about nine pieces in ten,
   and the two labels read as equals. The Art Of Jadeite is set larger, Jewels
   And Me smaller and quieter, so the order is seen before it is read. */
.hxp.a .hxc em{font-size:clamp(28px,3.1vw,46px)}
.hxp.b .hxc em{font-size:clamp(17px,1.5vw,23px);color:rgba(244,244,243,.8);border-bottom-color:rgba(244,244,243,.3)}
.hxp.b .hxc b{font-size:10px;color:rgba(244,244,243,.6)}
@media(prefers-reduced-motion:reduce){
 /* no film: the settled last frame, her two real pieces above the open box */
 .hxv{display:none} .hxstill{opacity:1} .hxduo{opacity:1;transform:translate(-50%,0);pointer-events:auto}}
/* contain, not cover. The clip is 1280x964, a viewport is 1.6 to 2.1 wide, so
   cover threw away 17% of the frame height at 1440x900 and 38% at 1920x900 —
   and the band it threw away is the top, which is exactly where the piece rises
   out of the box. The balloons were never on screen. Contain shows the whole
   frame at every aspect. (Superseded: the pillars are now the same #000 as the
   film's own background, see ONE BLACK above.) */
/* The veil is not a fixed scrim. The object starts small and dark and ends
   large and bright, so the two plates that carry the type get stronger as it
   grows. JS writes --vt and --vb from the same scroll progress. */
.nfveil{position:absolute;inset:0;z-index:1;pointer-events:none;
 --vt:.72; --vb:.86;
 background:linear-gradient(180deg,rgba(0,0,0,var(--vt)),
   rgba(0,0,0,calc(var(--vt) * .28)) 24%,rgba(0,0,0,0) 46%),
  linear-gradient(0deg,rgba(0,0,0,var(--vb)),
   rgba(0,0,0,calc(var(--vb) * .42)) 32%,rgba(0,0,0,0) 58%)}
.nfin{position:absolute;inset:0;z-index:2;pointer-events:none;
 padding:clamp(84px,13vh,124px) clamp(20px,3.6vw,54px) clamp(30px,5vh,54px)}
.nfin>*{pointer-events:auto}

/* zone 1 — the stacked label columns, the Neue Grafik contents block */
.nftop{position:absolute;left:clamp(20px,3.6vw,54px);right:clamp(20px,3.6vw,54px);
 top:clamp(84px,13vh,124px);display:grid;gap:clamp(20px,4vw,64px);
 grid-template-columns:repeat(3,minmax(0,max-content))}
.nftop div{display:grid;gap:5px}
.nftop span{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.18em;
 text-transform:uppercase;color:rgba(244,244,243,.74);line-height:1.25}
.nftop b{font-weight:600;color:var(--paper)}

/* zone 2 — the one large mark, bottom left. The full stop is set at
   full size, the way Orven sets its registered mark. */
/* Smaller than it was. Her marked-up page circled this line and asked for it
   smaller, and her voice note said the same thing about the whole site:
   '啲字好大隻'. Was clamp(28px,3.9vw,60px); now about three quarters of that. */
.nfmark{position:absolute;left:clamp(20px,3.6vw,54px);bottom:clamp(40px,7vh,84px);
 margin:0;font-family:var(--serif);font-weight:400;color:var(--paper);
 font-size:clamp(23px,2.9vw,45px);line-height:.86;letter-spacing:-.028em;
 text-transform:uppercase;max-width:12ch}
.nfmark w{display:inline-block;will-change:opacity,transform,filter}
/* Bright accent, because the ground is dark again. The light-ground variant
   used --accink; noise.mjs is the gate that catches this either way - the dot
   is one 9x31 element and a per-node contrast ratio can pass while the mark is
   still invisible against what is behind it. */
.nfmark .dot{color:var(--acclite);font-size:.86em;padding-left:.04em}

/* zone 3 — one short paragraph, outer right column, flush left */
.nfsay{position:absolute;right:clamp(20px,3.6vw,54px);bottom:clamp(44px,7.6vh,90px);
 margin:0;max-width:26ch;font-family:var(--sans);font-size:clamp(13px,1.05vw,16px);
 line-height:1.45;color:rgba(244,244,243,.82);text-align:left}
.nfsay w{display:inline-block;will-change:opacity,transform,filter}

/* zone 4 — the specification block. It changes corner as the object
   moves, so the type never sits on top of the piece. */
.nfspec{position:absolute;width:min(340px,44vw);transition:opacity .5s ease}
.nfspec.tr{right:clamp(20px,3.6vw,54px);top:clamp(150px,25vh,240px)}
.nfspec.tl{left:clamp(20px,3.6vw,54px);top:clamp(168px,27vh,268px)}
.nfspec .rule{height:1px;background:rgba(244,244,243,.28);margin:0 0 12px}
.nfspec .r{display:grid;grid-template-columns:7px minmax(0,1fr) auto;align-items:baseline;
 gap:9px;padding:5px 0;font-family:var(--sans);font-size:11px;letter-spacing:.13em;
 text-transform:uppercase;color:rgba(244,244,243,.72)}
.nfspec .r i{width:5px;height:9px;background:rgba(244,244,243,.62);display:block;
 position:relative;top:1px}
.nfspec .r em{font-style:normal;color:var(--paper);text-align:right;letter-spacing:.06em}
.nfcue{position:absolute;left:50%;bottom:clamp(16px,2.6vh,28px);transform:translateX(-50%);
 display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;
 font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.24em;
 text-transform:uppercase;color:rgba(244,244,243,.86);transition:opacity .4s ease}
.nfcue i{width:14px;height:14px;border-right:1.5px solid currentColor;
 border-bottom:1.5px solid currentColor;transform:rotate(45deg);animation:nfcue 1.8s ease-in-out infinite}
@keyframes nfcue{0%,100%{transform:translateY(-3px) rotate(45deg);opacity:.55}
 50%{transform:translateY(4px) rotate(45deg);opacity:1}}
@media(prefers-reduced-motion:reduce){.nfcue i{animation:none}}

@media(max-width:900px){
 /* Was: two columns, and 'display:none' on the third. That third column is
    TSIM SHA TSUI EAST / BY APPOINTMENT / 11AM TO 7PM - her address and her
    opening hours - so on every phone the shop's location was not on the page at
    all. Measured at 390px: the column's box was 0x0. Three columns do not fit,
    so it wraps to two rows of two instead of throwing one away. */
 .nftop{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 22px}
 .nftop div:last-child{grid-column:1 / -1}
 .nfsay{position:static;margin:0;max-width:30ch}
 /* the mark joins the stack on the solid ground instead of floating over
    the clip, where its worst five percent measured 1.48:1 */
 .nfmark{position:static;transform:none;margin:0 0 clamp(14px,2.4vh,22px);
  max-width:none;font-size:clamp(25px,6.4vw,40px)}
 .nfin{display:flex;flex-direction:column;justify-content:flex-end;
  padding-bottom:clamp(40px,7vh,70px)}
 .nfcue{bottom:10px;font-size:10px;gap:5px}
 /* A sixteen-by-nine clip cropped into a portrait frame throws away most of
    the shot and pushes the piece straight under the type. Contained instead:
    the clip becomes a band and the dark space above and below carries the
    words. The reference guide makes the same point about cover versus contain. */
 /* The box and the pair sit as one group across the top and the words own the
    bottom, so neither is ever on the other. The label block wraps to two rows
    on a phone, so the group starts below it rather than under it - measured at
    390px, nftop ends at 311. */
 .nf{height:max(740px,calc(100svh - 70px))!important}
 .hx{top:clamp(236px,30vh,288px);bottom:auto;height:min(38%,calc(100vw*.54))}
 .hxv,.hxstill{object-fit:contain;object-position:50% 50%}
 .hx{overflow:visible}
 .hxduo{bottom:auto;top:calc(100% + 8px);width:94%;justify-content:space-around;gap:14px}
 .hxc b{font-size:10px;letter-spacing:.14em}
 .hxc em{font-size:18px}
 .hxp.a .hxc em{font-size:22px} .hxp.b .hxc em{font-size:15px} .hxp.b .hxc b{font-size:9px}
 .nfveil{--vt:.5; --vb:.30}
 /* On a phone the words get their own ground rather than a gradient over a
    moving object: measured at 390px, body copy fell to 3.65:1 in its worst
    five percent over the pearls. A solid field cannot do that. */
 .nfin::before{content:"";position:absolute;left:0;right:0;bottom:0;height:30%;
  z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,0),#000 14%,#000)}
 .nfin{isolation:isolate}
}
@media(prefers-reduced-motion:reduce){
 .nf{height:auto!important}
 .nfstage{position:static;height:auto;min-height:78svh}
 .nfmark w,.nfsay w{opacity:1!important;transform:none!important;filter:none!important}
 .nfspec{opacity:1!important}
}

/* ============================================================
   WHERE THE PIECES CAME FROM. Was a photograph of an arrangement
   with the copy laid over it. Measured on the shipped page: the
   type met AA at 9.33:1, but 16.6% of the pixels behind the words
   were darker than the words themselves, so the letters had no
   consistent ground and the eye could not find their edges. A
   contrast ratio cannot see that, which is why it passed the gate
   and still failed to read. The photograph is gone; this is the
   same content as an editorial spread.
   ============================================================ */
.org{position:relative;background:var(--paper);color:var(--ink);
 padding:clamp(64px,10vh,132px) clamp(20px,3.8vw,60px)}
.orgin{max-width:var(--max);margin:0 auto}
.orgtop{display:grid;gap:clamp(22px,4vw,72px);align-items:end;
 grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
 padding-bottom:clamp(30px,5vh,54px);border-bottom:1px solid var(--line)}
.orgh{margin:0;font-family:var(--serif);font-weight:400;letter-spacing:-.022em;
 font-size:clamp(30px,4.6vw,64px);line-height:.94}
.orgh i{font-style:italic}
.orgk{margin:0 0 clamp(20px,3.4vh,34px);font-family:var(--sans);font-size:11px;
 font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.orgl{margin:0;max-width:40ch;font-size:clamp(15px,1.2vw,18px);line-height:1.55;
 color:var(--muted)}
/* the four rows: number, name, and where it came from. One rule per row,
   which is the only place a hairline is allowed to repeat. */
.orgrow{display:grid;grid-template-columns:64px minmax(0,1.05fr) minmax(0,1.4fr);
 gap:clamp(14px,3vw,48px);align-items:baseline;
 padding:clamp(24px,4vh,40px) 0;border-bottom:1px solid var(--line)}
.orgrow .n{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.16em;
 color:var(--muted)}
.orgrow .nm{margin:0;font-family:var(--serif);font-weight:400;letter-spacing:-.018em;
 font-size:clamp(24px,3.1vw,46px);line-height:1.02}
.orgrow .nm a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;
 transition:border-color .25s ease}
.orgrow .nm a:hover{border-bottom-color:var(--acc)}
.orgrow .d{margin:0;font-size:clamp(14px,1.1vw,17px);line-height:1.55;color:var(--ink)}
.orgrow .d em{font-style:normal;display:block;margin-top:7px;color:var(--muted);
 font-size:13px}
.orgfoot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
 gap:20px;padding-top:clamp(26px,4.5vh,44px)}
.orgfoot p{margin:0;max-width:52ch;font-size:clamp(15px,1.15vw,18px);line-height:1.55}
@media(max-width:820px){
 .orgtop{grid-template-columns:1fr;align-items:start}
 .orgrow{grid-template-columns:34px minmax(0,1fr);gap:12px 16px}
 .orgrow .d{grid-column:2}
}

/* Rule 5, restated last so nothing declared earlier or later can win on source order. */
@media(prefers-reduced-motion:reduce){
 .cincue{position:static;transform:none;margin:0 auto 26px;color:var(--paper);
  background-image:none!important;-webkit-text-fill-color:currentColor}
 .cincue .a{background-image:none!important;color:var(--gold)!important;filter:none!important;
  opacity:1!important;visibility:visible!important}
 .cincue .fl{animation:none!important;transform:none!important}
 .pop .pi,.pop w,.pop .pt{opacity:1!important;transform:none!important;filter:none!important;
  animation:none!important;transition:none!important}
}

/* ============================================================
   JOURNAL. Her own posts: one reading column, her photographs at their
   own size, never stretched, and a video that loads only on play.
   ============================================================ */
.jrg{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,2.6vw,38px) clamp(16px,2vw,30px)}
.jrc{display:block;text-decoration:none;color:inherit}
.jrc[hidden]{display:none}
.jrc .im{display:block;overflow:hidden;background:var(--sheet);border-radius:2px;aspect-ratio:4/3}
.jrc .im img{width:100%;height:100%;object-fit:cover;display:block;
 transition:transform .7s cubic-bezier(.16,1,.3,1)}
.jrc:hover .im img{transform:scale(1.04)}
.jrc .mt{display:block;margin-top:14px;font-size:11px;font-weight:600;letter-spacing:.14em;
 text-transform:uppercase;color:var(--muted)}
.jrc .nm{display:block;margin-top:6px;font-family:var(--serif);font-size:clamp(18px,1.55vw,21px);
 line-height:1.3;letter-spacing:.005em}
.sc .jrg{margin-top:22px}
@media(max-width:980px){.jrg{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.jrg{grid-template-columns:1fr 1fr;gap:22px 12px}
 .jrc .nm{font-size:16px;line-height:1.3}.jrc .mt{font-size:9.5px;letter-spacing:.1em;margin-top:10px}}
.jrhd{padding:clamp(64px,11vh,112px) 0 clamp(30px,5vh,52px);border-bottom:1px solid var(--line)}
.jrhd h1{font-family:var(--serif);font-weight:400;font-size:clamp(34px,5vw,60px);line-height:1.06;
 letter-spacing:-.01em;margin:0 0 18px}
.jrf{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 clamp(26px,4vh,40px)}
.jrf button{font:inherit;font-size:12px;letter-spacing:.11em;text-transform:uppercase;
 background:none;color:var(--ink);border:1px solid var(--line);border-radius:999px;
 padding:8px 16px;cursor:pointer}
.jrf button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.jrp{padding:clamp(56px,10vh,104px) 0 clamp(48px,8vh,84px);border-bottom:1px solid var(--line)}
.jrmx{max-width:760px;margin:0 auto;padding:0 26px}
.jrmt{margin:0 0 16px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
 color:var(--muted)}
.jrmt a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.jrmt span::before{content:"\00B7";margin:0 .7em}
.jrp h1{font-family:var(--serif);font-weight:400;font-size:clamp(30px,4.4vw,52px);line-height:1.1;
 letter-spacing:-.01em;margin:0 0 clamp(28px,5vh,46px)}
.jrb p{font-size:17px;line-height:1.8;margin:0 0 1.15em;overflow-wrap:anywhere}
.jrb p a{color:var(--jade)}
.jrfig{margin:clamp(26px,4vh,40px) 0}
.jrfig img{width:auto;max-width:100%;height:auto;max-height:86vh;margin:0 auto;border-radius:2px;
 background:var(--sheet);cursor:zoom-in}
.jrgal{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:clamp(26px,4vh,40px) 0;align-items:start}
.jrgal .jrfig{margin:0}
.jrgal.odd .jrfig:first-child{grid-column:1/-1}
.jrgal .jrfig img{width:100%;height:auto;max-height:none;aspect-ratio:1/1;object-fit:cover}
.jrgal.odd .jrfig:first-child img{aspect-ratio:auto;max-height:86vh;object-fit:contain}
@media(max-width:560px){.jrgal{gap:8px}}
.jrgal.keep .jrfig img{aspect-ratio:auto;object-fit:contain}
.jrgcap{margin:-18px 0 30px;font-size:13px;line-height:1.55;color:var(--muted);text-align:center}
.jrfig figcaption{margin-top:10px;font-size:13px;line-height:1.55;color:var(--muted);text-align:center}
.jrv{position:relative;aspect-ratio:16/9;background:#000;border-radius:2px;overflow:hidden;
 margin:clamp(26px,4vh,40px) 0}
.jrv a,.jrv iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.jrv img{width:100%;height:100%;object-fit:cover;opacity:.82}
.jrv .pl{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;
 border-radius:50%;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.7)}
.jrv .pl::after{content:"";position:absolute;left:31px;top:24px;border-style:solid;
 border-width:14px 0 14px 22px;border-color:transparent transparent transparent #fff}
.jrv a:hover .pl{background:rgba(0,0,0,.75)}
.jrcap{margin:-24px 0 26px!important;font-size:13px!important;color:var(--muted);text-align:center}
.jrb .jrvl a{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:600;
 letter-spacing:.13em;text-transform:uppercase;color:var(--ink);text-decoration:none;
 border:1px solid var(--ink);padding:12px 18px;border-radius:2px}
.jrpc{border-bottom:1px solid var(--line)}
@media(min-width:981px){.jrpc .scg{grid-template-columns:repeat(3,1fr)}}
.jrvl i{width:14px;height:1px;background:currentColor;display:block}