/* ==========================================================
   laffaire.net, v2 front end
   The 2015 site's language, made into a system (Harsh, 10 Oct 2026:
   "mostly similar to the old website"): deep tinted grounds with the
   slide's own photograph ghosted behind, gold script headings, gold
   hairlines and the lotus ornament, Lato for reading.

   Layout: every page is a deck of slides. On desktop and landscape
   tablets one gesture moves one slide (site.js, body.deck). On phones
   and portrait tablets the same slides simply stack and scroll.
   ========================================================== */
:root{
  /* grounds: one tone per part of the site, as the 2015 screens did */
  --t-plum:#2a0f1f;   /* welcome */
  --t-green:#735e48;  /* menu, stores: the client's taupe, warm tussar (19 Oct 2026; was green #10302a) */
  --t-indigo:#0b2a55; /* about, artisan, designer */
  --t-olive:#735e48;  /* collections: the same taupe (was olive #2c2b12) */
  --t-umber:#2b2014;  /* gallery, events */
  --t-ink:#121110;    /* neutral */
  --gold:#d2b375;
  --gold-2:#a88a4f;
  --cream:#efe8da;
  --cream-2:#c9bfae;
  --brand:#9d1a1d;
  --rule:rgba(210,179,117,.55);

  --script:"Pinyon Script","Snell Roundhand",cursive;
  --serif:"Cormorant Garamond",Garamond,serif;
  --sans:"Lato","Helvetica Neue",Arial,sans-serif;

  --t-xs:.72rem; --t-sm:.86rem; --t-md:1rem; --t-lg:1.15rem;
  --t-script:clamp(2.6rem,1.6rem + 3.2vw,4.6rem);
  --t-script-lg:clamp(3rem,1.8rem + 4.2vw,5.8rem);

  --gutter:clamp(20px,5.5vw,96px);
  --fh:58px;          /* footer bar */
  --frame:18px;       /* the gold frame's inset */
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.76,0,.24,1);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{background:var(--t-ink);color:var(--cream);font-family:var(--sans);font-weight:300;font-size:var(--t-md);line-height:1.7;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:1px solid var(--gold);outline-offset:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- slides ---------- */
.slide{position:relative;min-height:100svh;display:grid;align-items:center;padding:calc(var(--frame) + 76px) var(--gutter) calc(var(--fh) + 36px);overflow:hidden;overflow:clip;isolation:isolate;background:var(--tone,var(--t-ink))}
.slide[data-tone="plum"]{--tone:var(--t-plum)}
.slide[data-tone="green"]{--tone:var(--t-green)}
.slide[data-tone="indigo"]{--tone:var(--t-indigo)}
.slide[data-tone="olive"]{--tone:var(--t-olive)}
.slide[data-tone="umber"]{--tone:var(--t-umber)}
/* the ghost: the slide's photograph, faded into its tone, like the 2015 grounds */
.ghost{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;filter:saturate(.6);opacity:.2}
/* the 2015 backgrounds, out of the old site's PSDs: the textures are the brand (Harsh, 10 Oct 2026) */
.bgtex{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center}
.slide::before{content:"";position:absolute;inset:0;z-index:-1;background:
  radial-gradient(120% 90% at 50% 40%,transparent 40%,rgba(0,0,0,.45)),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");opacity:.9;pointer-events:none}
.slide > .in{position:relative;width:100%;min-width:0;max-width:1200px;margin:0 auto}
.slide.bleed{padding:0}
.slide.bleed > .in{max-width:none}
.slide.book > .in{max-width:none}

/* ---------- type ---------- */
.lotus{display:flex;align-items:center;gap:12px;color:var(--gold);margin-bottom:4px}
.lotus::before,.lotus::after{content:"";height:1px;width:56px;background:currentColor}
.lotus svg{width:30px;height:18px}
.center .lotus{justify-content:center}
.script{font-family:var(--script);font-weight:400;color:var(--gold);font-size:var(--t-script);line-height:1.02;margin:0 0 .2em;text-wrap:balance}
.script.lg{font-size:var(--t-script-lg)}
.eyebrow{font-size:var(--t-xs);letter-spacing:.32em;text-transform:uppercase;color:var(--gold);margin:0 0 14px}
.copy{max-width:62ch;margin:0 0 1.1em;color:var(--cream)}
.copy.muted{color:var(--cream-2)}
.italic{font-family:var(--serif);font-style:italic;font-size:clamp(1.2rem,1rem + .6vw,1.5rem);line-height:1.4;color:var(--cream)}
.center{text-align:center}
.center .copy{margin-inline:auto}
/* one rhythm for every heading block (Harsh, 10 Oct 2026): heading, then a short
   line close under it, then the slide's grid 28px below the block */
.center > .script + .copy,.center > .script + .italic{margin-top:.15em}
.center > .copy:last-child,.center > .italic:last-child{margin-bottom:0}
.center + .evs,.center + .prods,.center + .cards,.center + .colls,.center + .gal,.center + .galrow{margin-top:28px}
.todo{display:inline-block;margin-top:4px;border:1px dashed var(--rule);color:var(--cream-2);font-size:var(--t-xs);letter-spacing:.08em;padding:3px 10px}

/* ---------- buttons: the 2015 gold box with a flower each side ---------- */
.btn{display:inline-flex;align-items:center;gap:14px;white-space:nowrap;min-height:48px;padding:0 24px;border:1px solid var(--gold);color:var(--gold);font-size:var(--t-lg);font-weight:400;letter-spacing:.02em;text-decoration:none;background:rgba(0,0,0,.18);transition:background-color .4s var(--ease),color .4s var(--ease)}
.btn::before,.btn::after{content:"✣";font-size:.8em;opacity:.85}
.btn:hover{background:var(--gold);color:var(--t-ink)}
.btn.plain::before,.btn.plain::after{content:none}
.link{display:inline-flex;align-items:center;gap:10px;color:var(--gold);font-size:var(--t-xs);letter-spacing:.28em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:6px}
.link:hover{border-bottom-color:var(--gold)}
.btns{display:flex;flex-wrap:wrap;gap:16px}
.center .btns{justify-content:center}

/* ---------- photographs ---------- */
.ph{position:relative;overflow:hidden;background:rgba(0,0,0,.25)}
.ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease)}
a.ph:hover img,button.ph:hover img,.card:hover .ph img{transform:scale(1.045)}
.frame-in{}
.empty{display:grid;place-items:center;text-align:center;padding:16px;border:1px dashed var(--rule);color:var(--cream-2);font-size:var(--t-xs);letter-spacing:.08em}

/* ---------- slide: hero ---------- */
.hero .bgph{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero .bgph img{width:100%;height:100%;object-fit:cover}
.hero .veil{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(20,6,14,.86),rgba(20,6,14,.35) 55%,rgba(20,6,14,.05))}
.hero .in{max-width:1200px}
.hero .bgph img{object-position:22% 50%}  /* feet to the right, words on the left, as the 2015 welcome screen */
.hero .veil{background:linear-gradient(90deg,rgba(20,6,14,.62),rgba(20,6,14,.22) 50%,rgba(20,6,14,0) 75%)}  /* the photo already carries the 2015 tint */
.hero .box{max-width:min(780px,100%);text-align:center}
.hero .lotus{justify-content:center}
/* the welcome line sits on ONE line wherever there is room for it (Harsh, 10 Oct 2026) */
.hero h1.script{white-space:nowrap;font-size:clamp(2rem,3.4vw,4rem)}  /* the line is 12.2em wide: 3.4vw keeps it near 42% of the screen, as in 2015 */
.hero .copy{max-width:54ch;margin-inline:auto;text-align:justify;text-align-last:center}
/* the shloka by the feet (client, 19 Oct 2026): set below them, centred under the alta, in gold; the meaning in a small italic */
.hero .shloka{position:absolute;right:calc(var(--gutter) * .6);bottom:calc(var(--fh) + 40px);width:min(40vw,560px);margin:0;display:grid;justify-items:center;gap:6px;text-align:center;pointer-events:none}
.hero .shloka .sk{font-family:"Tiro Devanagari Sanskrit",var(--serif);font-size:clamp(1.15rem,.8rem + 1vw,1.7rem);line-height:1.5;color:var(--gold);letter-spacing:.02em;text-shadow:0 1px 14px rgba(20,6,14,.85),0 0 2px rgba(20,6,14,.6)}
.hero .shloka .tr{font-family:var(--serif);font-style:italic;font-size:clamp(.9rem,.8rem + .3vw,1.05rem);color:var(--cream);opacity:.85;text-shadow:0 1px 10px rgba(20,6,14,.9)}
.hero .shloka::before{content:"";width:64px;height:1px;background:var(--rule);order:-1;margin-bottom:6px}
/* product photos are shot on white: show them on a cream tile, as the store does */
.prodph{background:transparent}   /* the pieces are cut out of their backgrounds (client, 19 Oct 2026): no tile behind them */
.prodph img{object-fit:contain;padding:4%}
.prods{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin-top:34px}
.prod{display:flex;flex-direction:column;gap:10px;text-decoration:none;text-align:center}
.prod .ph{aspect-ratio:1}
.prod .pn{font-size:var(--t-sm);line-height:1.45;color:var(--cream)}
.prod .pp{font-size:var(--t-xs);letter-spacing:.2em;color:var(--gold)}
.prod:hover .pn{color:var(--gold)}
.prod:hover .ph img{transform:scale(1.045)}

/* ---------- slide: cards (the welcome menu) ---------- */
.cards{display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));gap:22px;margin-top:40px}
.card{display:flex;flex-direction:column;gap:16px;text-decoration:none;text-align:center}
.card .ph{aspect-ratio:5/4}
.card span{font-size:var(--t-lg);color:var(--cream)}
.card:hover span{color:var(--gold)}
/* the E-Store card: the logo on sindoor (client, 14 Oct 2026) */
.logoph{display:grid;place-items:center;background:var(--brand);color:var(--gold)}
.logoph svg{width:46%;height:auto;transition:transform 1.6s var(--ease)}
.card:hover .logoph svg{transform:scale(1.045)}

/* ---------- slide: feature (photo + text + strip) ---------- */
.feat{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr);gap:clamp(24px,4vw,64px);align-items:center}
.feat .main{aspect-ratio:1.05}
.feat .main img{transition:opacity .45s var(--ease)}
.strip{display:flex;align-items:center;gap:16px;margin-top:clamp(28px,5vh,56px)}
.strip .ar{font-family:var(--serif);font-size:3.2rem;line-height:1;color:var(--gold);opacity:.8}
.thumbs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;flex:1}
.thumbs button{aspect-ratio:1.27;opacity:.55;transition:opacity .4s var(--ease)}
.thumbs button[aria-current="true"],.thumbs button:hover{opacity:1;outline:1px solid var(--gold);outline-offset:3px}
/* films under a photo (client, 14 Oct 2026): the film's own poster, a gold play mark, full strength */
.thumbs .vid{aspect-ratio:16/9;opacity:.9}
.vid i{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(rgba(10,8,6,0),rgba(10,8,6,.35))}
.vid i::before{content:"";width:42px;height:42px;border-radius:50%;border:1px solid var(--gold);background:rgba(10,8,6,.55);transition:transform .4s var(--ease),background-color .4s var(--ease)}
.vid i::after{content:"";position:absolute;border-style:solid;border-width:7px 0 7px 12px;border-color:transparent transparent transparent var(--gold);margin-left:3px}
.vid:hover i::before{transform:scale(1.12);background:rgba(10,8,6,.75)}

/* ---------- slide: gallery (one tall + 3 x 2) ---------- */
.gal{display:grid;grid-template-columns:minmax(0,1.2fr) repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:24px;height:min(60vh,540px)}
.gal > :first-child{grid-row:1/3}
.gal .ph{height:100%}
.galrow{display:flex;align-items:center;gap:20px}
.galrow .ar{font-family:var(--serif);font-size:3.6rem;line-height:1;color:var(--gold)}
.count{margin-top:18px;font-size:var(--t-xs);letter-spacing:.3em;text-transform:uppercase;color:var(--cream-2)}

/* ---------- slide: stores collage ---------- */
.collage-g{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.6fr);gap:clamp(24px,4vw,64px);align-items:center}
.collage{position:relative;height:min(66vh,580px)}
.collage .pic{position:absolute;text-decoration:none}
.collage .pic .ph{height:100%}
.collage .cap{position:absolute;z-index:2;background:var(--tone,var(--t-green));padding:14px 20px}
/* Harsh's one-piece stores collage: sized to the picture (1448 x 1086) so the two links sit on the two photos */
.collage.collage-one{height:auto;aspect-ratio:1448/1086;width:min(100%,calc(min(66vh,580px) * 1.333));margin-inline:auto}
.collage-one img{display:block;width:100%;height:100%}
.collage-one .hot{position:absolute;display:block}
.collage-one .h1{left:9%;top:11%;width:45%;height:69%}
.collage-one .h2{left:49%;top:26%;width:44%;height:64%;z-index:1}
.collage-one .hot:focus-visible{outline:1px solid var(--gold);outline-offset:2px}
.cap b{display:block;font-weight:400;font-size:var(--t-xs);letter-spacing:.32em;text-transform:uppercase;color:var(--gold)}
/* our stores: both shopfronts side by side, each to its own slide (client, 14 Oct 2026: no flower collage) */
.stores2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,36px);align-items:start;width:min(100%,calc(min(50vh,470px) * 1.5 + 36px));margin-inline:auto}
.st{display:block;text-decoration:none}
.st:nth-child(2){margin-top:clamp(20px,6vh,60px)}
.st .ph{aspect-ratio:3/4}
.st:hover .ph img{transform:scale(1.045)}
.st .cap{display:block;margin-top:14px}
.st .cap i{display:block;margin-top:6px;font-family:var(--serif);font-size:var(--t-lg);color:var(--cream)}
.st:hover .cap b{color:var(--cream)}
.cap i{font-family:var(--serif);font-size:1.15rem;color:var(--cream)}
.p1{left:0;top:0;width:52%;height:78%}.p2{right:0;bottom:0;width:56%;height:72%}
.c1{left:5%;bottom:8%}.c2{right:4%;bottom:-3%}

/* ---------- slide: split (store screens, woven wonders, store experience) ---------- */
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));min-height:100svh}
.split.flip > .ph{order:2}
.split > .ph{min-height:44svh}
.split .txt{padding:calc(var(--frame) + 76px) var(--gutter) calc(var(--fh) + 40px);display:flex;flex-direction:column;justify-content:center}
dl.info{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 22px;margin:8px 0 28px}
dl.info dt{font-size:var(--t-xs);letter-spacing:.28em;text-transform:uppercase;color:var(--gold);padding-top:4px}
dl.info dd{margin:0}
.status{display:inline-flex;align-items:center;gap:8px;font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--cream-2);margin-bottom:22px}
.status i{width:7px;height:7px;border-radius:50%;background:var(--cream-2)}
.status.open i{background:#7fb38a}

/* ---------- slide: full-bleed feature (Shiv Shakti) ---------- */
.fbleed .ph.bgph{position:absolute;top:0;right:0;bottom:0;width:62%;z-index:-2}
.fbleed .ph.bgph::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--tone),transparent 45%)}

/* ---------- slide: then and now ---------- */
.tn{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr) auto;gap:clamp(20px,3vw,48px);align-items:center}
.tnc{position:relative;height:min(66vh,580px)}
.tnc .ph{position:absolute}
.tnc .ph img{height:100%}
.tnc.tnc-one img{display:block;width:100%;height:100%;object-fit:contain}   /* Harsh's one-piece collage */
.t1{left:0;top:0;width:60%;height:50%}.t2{left:12%;bottom:4%;width:42%;height:46%;z-index:2}.t3{left:50%;bottom:0;width:34%;height:40%;z-index:3}.t4{right:0;top:0;width:30%;height:96%}
.words{display:grid;gap:12px;font-size:var(--t-xs);letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}

/* ---------- slide: collections ---------- */
.colls{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:28px;margin-top:34px}
.coll{display:flex;flex-direction:column;gap:12px;text-decoration:none}
.coll .ph{aspect-ratio:1;width:76%}
.coll h3{margin:4px 0 0;font-weight:700;font-size:var(--t-md);letter-spacing:.04em;color:var(--gold)}
.coll p{margin:0;font-size:var(--t-sm);color:var(--cream-2)}
.coll .go{margin-top:auto;font-size:var(--t-sm);color:var(--gold);text-decoration:underline;text-underline-offset:4px}
.looks{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:30px;height:min(52vh,470px);margin-top:28px}
.looks .ph{height:100%}

/* ---------- slide: card viewer (Conscious Living), brochure (events) ---------- */
.viewer{display:flex;align-items:center;gap:22px;justify-content:center;margin-top:24px}
.viewer .stage{width:min(58vh,560px);aspect-ratio:1;box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
.viewer .stage img{width:100%;height:100%;object-fit:cover;transition:opacity .35s var(--ease)}
.viewer .ar{font-family:var(--serif);font-size:3.6rem;line-height:1;color:var(--gold)}
/* news & events: one card per brochure */
/* every card the same: a square cover, then title, line and page count on shared rows (subgrid), however long each one runs */
.evs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:clamp(18px,2.4vw,34px);row-gap:8px;margin-top:34px}
.ev{display:grid;grid-row:span 4;grid-template-rows:subgrid;justify-items:center;align-items:start;text-decoration:none;text-align:center}
.ev .ph{width:100%;aspect-ratio:1;background:none;overflow:visible;margin-bottom:10px}
.ev .ph img{object-fit:cover;filter:drop-shadow(0 18px 28px rgba(0,0,0,.45))}
.ev .evt{font-family:var(--serif);font-size:clamp(1.3rem,1rem + .8vw,1.8rem);line-height:1.2;color:var(--cream);transition:color .35s var(--ease)}
.ev .evl{max-width:30ch;font-family:var(--serif);font-style:italic;font-size:1.05rem;line-height:1.35;color:var(--cream-2)}
.book-head .italic{margin:.1em 0 0}
.cl-intro .copy{font-size:var(--t-sm);color:var(--cream-2);margin:6px 0 0}
.ev .evn{padding-bottom:22px;font-size:var(--t-xs);letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.ev:hover .evt{color:var(--gold)}
/* an event's own wordmark as its page heading (client, 17 Oct 2026; the cards keep typed titles, Harsh) */
.book-head h1.wm{margin:4px 0 2px;display:flex;justify-content:center}
.book-head h1.wm .wmk{display:block;width:auto;height:auto;max-width:min(70vw,360px);max-height:clamp(46px,1.9rem + 1.6vw,64px)}  /* no taller than the typed title it replaces: the row's height is sized for that */
.ev:hover .ph img{transform:scale(1.04)}
/* one brochure: a row of pages that snaps page by page (desktop), a plain stack (phones) */
.book-head{text-align:center}
.book-head .back{display:inline-block;margin-bottom:6px;font-size:var(--t-xs);letter-spacing:.24em;text-transform:uppercase;color:var(--gold);text-decoration:none}
.book-head .back:hover{color:var(--cream)}
.book-head h1.script{font-size:clamp(2.2rem,1.4rem + 2vw,3.4rem);margin:0}
.book-strip{position:relative;display:flex;align-items:center;gap:clamp(14px,1.6vw,24px);margin-top:22px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:12px;scrollbar-width:thin;scrollbar-color:var(--gold) transparent;outline:none}
.book-strip .pg{flex:0 0 auto;height:var(--bh,62vh);scroll-snap-align:start;cursor:zoom-in;box-shadow:0 0 0 1px rgba(0,0,0,.25)}
/* the spacer after the last page (site.js) lets the last page lead the row; none in the phone stack */
.bk-end{flex:0 0 0;min-width:0;height:1px}
.book-strip .pg img{display:block;height:100%;width:auto}
.book-nav{display:flex;justify-content:center;align-items:center;gap:26px;margin-top:6px}
.book-nav .ar{font-family:var(--serif);font-size:2.6rem;line-height:1;color:var(--gold);transition:opacity .3s var(--ease)}
.book-nav .ar[disabled]{opacity:.2;cursor:default}
.book-nav .count{margin:0;min-width:7ch;text-align:center;font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.book-strip{scroll-behavior:auto}}
/* conscious living (hgx): title panel, 19 cards in a line, the lotus to close */
.slide.cl .book-strip{margin-top:0}
.cl-intro{width:clamp(280px,30vw,440px);height:var(--bh,62vh);display:flex;align-items:center;scroll-snap-align:start;cursor:default;box-shadow:none;padding-right:clamp(10px,2vw,30px)}
.cl-intro .lotus{justify-content:flex-start}
.cl-intro .script{margin:0 0 .2em}
.cl-hint{margin:14px 0 0;font-size:var(--t-xs);letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.cl-end{width:clamp(220px,24vw,360px);height:var(--bh,62vh);display:grid;place-items:center;cursor:default;box-shadow:none}
.cl-mark{display:block;width:clamp(70px,7vw,110px);color:var(--gold);opacity:0;transform:scale(.88);transition:opacity 1.8s var(--ease),transform 1.8s var(--ease)}
.cl-mark svg{display:block;width:100%;height:auto}
.cl-end.seen .cl-mark{opacity:1;transform:none}
.book-strip .cl-intro,.book-strip .cl-end{box-shadow:none;cursor:default}  /* panels, not pages: no ring */
@media (prefers-reduced-motion:reduce){.cl-mark{opacity:1;transform:none}}

/* ---------- slide: poem (the 2015 artworks, placed as they are) ---------- */
.poem{padding:0;background:#0d0b0a}
.poem .ph{position:absolute;inset:0;background:none}
.poem .ph img{object-fit:cover}

/* ---------- chrome ---------- */
.frame{display:none}
/* the menu button (Harsh, 14 Oct 2026: the dark box looked pasted on): a round hairline button in the site's own
   language (the gold-ringed dots, the gold hairlines), frosted so it reads over any photo; it fills gold on hover and
   the short middle line runs out to full width. "Menu" stays for screen readers. */
.menu-btn{position:fixed;left:calc(var(--frame) + 22px);top:calc(var(--frame) + 18px);z-index:40;display:grid;place-items:center;width:48px;height:48px;padding:0;border:1px solid var(--rule);border-radius:50%;background:rgba(10,8,6,.3);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--gold);transition:background-color .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease)}
.menu-btn .bars{display:grid;gap:5px;width:20px;justify-items:start}
.menu-btn .bars i{display:block;height:1px;width:100%;background:currentColor;transition:width .45s var(--ease)}
.menu-btn .bars i:nth-child(2){width:62%}
.menu-btn:hover,.menu-btn:focus-visible{background:var(--gold);border-color:var(--gold);color:var(--t-ink)}
.menu-btn:hover .bars i:nth-child(2),.menu-btn:focus-visible .bars i:nth-child(2){width:100%}
.menu-btn > span:not(.bars){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){.menu-btn,.menu-btn .bars i{transition:none}}
.logo{position:fixed;right:calc(var(--frame) + 22px);top:calc(var(--frame) + 10px);z-index:40;width:clamp(74px,7vw,104px);color:var(--gold)}
.logo svg{width:100%;height:auto}
.dots{position:fixed;right:calc(var(--frame) + 14px);top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;gap:12px}
.dots button{width:10px;height:10px;border-radius:50%;border:1px solid var(--gold);transition:background-color .4s var(--ease),transform .4s var(--ease)}
.dots button[aria-current="true"]{background:var(--gold);transform:scale(1.2)}
.foot{position:fixed;left:var(--frame);right:var(--frame);bottom:var(--frame);height:var(--fh);z-index:40;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 22px;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.foot .social{display:flex;align-items:center;gap:12px}
.foot .social a{display:grid;place-items:center;width:20px;height:20px;text-decoration:none}
.foot .social svg{width:16px;height:16px;fill:currentColor}
.foot nav{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 0}
.foot nav a{text-decoration:none;padding:0 14px;border-left:1px solid var(--rule);line-height:1}
.foot nav a:first-child{border-left:0}
.foot nav a[aria-current="page"],.foot nav a:hover{color:var(--cream)}
.music{display:flex;align-items:center;gap:14px}
.music button{display:grid;place-items:center;height:24px;min-width:20px}
.music svg{width:16px;height:16px;fill:currentColor}
.music .eq{display:flex;align-items:flex-end;gap:2px;width:42px;height:4px;background:var(--rule)}
.music .eq i{flex:1;background:var(--gold);height:100%;transform-origin:bottom;transform:scaleY(1)}
.music.on .eq{background:none;height:14px}
.music.on .eq i{animation:eq 1s ease-in-out infinite}
.music.on .eq i:nth-child(2){animation-delay:-.35s}.music.on .eq i:nth-child(3){animation-delay:-.7s}.music.on .eq i:nth-child(4){animation-delay:-.2s}.music.on .eq i:nth-child(5){animation-delay:-.55s}
@keyframes eq{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}
.music.ask #play{animation:ask 1.6s ease-in-out infinite}
@keyframes ask{50%{opacity:.35}}

/* menu overlay */
.menu{position:fixed;inset:0;z-index:60;display:grid;align-items:center;padding:calc(var(--frame) + 90px) var(--gutter) calc(var(--fh) + 40px);background-color:var(--t-green);background-size:cover;background-position:center;overflow-y:auto;clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .8s var(--ease-io),visibility 0s .8s}
.menu.on{clip-path:inset(0);visibility:visible;transition:clip-path .8s var(--ease-io)}
.menu .x{position:fixed;left:calc(var(--frame) + 26px);top:calc(var(--frame) + 22px);width:30px;height:30px;color:var(--gold)}
.menu .x::before,.menu .x::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:currentColor;transform:rotate(45deg)}
.menu .x::after{transform:rotate(-45deg)}
/* hgx edition: the small print sits quietly under the menu's page links */
.menu .more.small{margin-top:18px;gap:8px 26px;font-size:.62rem;opacity:.75}
.menu .more a[aria-current="page"]{color:var(--cream)}
.menu .more{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 30px;margin-top:40px;font-size:var(--t-xs);letter-spacing:.3em;text-transform:uppercase}
.menu .more a{text-decoration:none;color:var(--gold)}
.menu .card{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.menu.on .card{opacity:1;transform:none}
.menu.on .card:nth-child(2){transition-delay:.06s}.menu.on .card:nth-child(3){transition-delay:.12s}.menu.on .card:nth-child(4){transition-delay:.18s}.menu.on .card:nth-child(5){transition-delay:.24s}

/* lightbox */
.lb{position:fixed;inset:0;z-index:70;display:grid;place-items:center;background:rgba(10,8,6,.95);padding:70px 24px;opacity:0;visibility:hidden;transition:opacity .4s,visibility 0s .4s}
.lb.on{opacity:1;visibility:visible;transition:opacity .4s}
.lb img{max-height:84vh;width:auto;object-fit:contain}
.lb iframe{width:min(100%,calc(80vh * 16 / 9));aspect-ratio:16/9;height:auto;border:0;background:#000}
.lb.film img{display:none}
.lb .x{position:absolute;right:36px;top:30px;width:30px;height:30px;color:var(--gold)}
.lb .x::before,.lb .x::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:currentColor;transform:rotate(45deg)}
.lb .x::after{transform:rotate(-45deg)}

/* toast */
.toast{position:fixed;left:50%;bottom:calc(var(--fh) + var(--frame) + 18px);z-index:80;transform:translate(-50%,20px);opacity:0;background:var(--t-ink);border:1px solid var(--rule);color:var(--cream);padding:10px 18px;font-size:var(--t-sm);transition:opacity .4s var(--ease),transform .4s var(--ease);pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* page curtain: dark, with the lotus, raised on the way out and lifted on arrival */
.curtain{position:fixed;inset:0;z-index:90;background:var(--t-ink);display:grid;place-items:center;transform:scaleY(0);transform-origin:bottom;pointer-events:none}
.curtain svg{width:46px;color:var(--gold);opacity:0}
.arriving .curtain{transform:scaleY(1);animation:lift .7s var(--ease-io) 1.2s forwards}
@keyframes lift{to{transform:scaleY(0)}}

/* ==========================================================
   DECK MODE: desktop and landscape tablets. site.js adds .deck to
   <html> only after it has taken over scrolling, so without JS the
   page is an ordinary scrolling page.
   ========================================================== */
.deck,.deck body{height:100%;overflow:hidden}
.deck .slide{position:fixed;inset:0;min-height:0;height:100%;visibility:hidden;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:none}
.deck .slide::-webkit-scrollbar{display:none}
.deck .slide.is-on{visibility:visible;z-index:2}
.deck .slide.is-in{visibility:visible;z-index:3}
.deck .slide.is-out{visibility:visible;z-index:1}
.deck .split{min-height:100%;height:100%}
/* a slide whose content is taller than the window scrolls inside itself first */
.deck .slide .scroll{max-height:100%;overflow-y:auto;scrollbar-width:none}
.deck .slide .scroll::-webkit-scrollbar{display:none}


/* in deck mode a slide is bound by the window's HEIGHT, so the big blocks
   size from it (measured: 5 slides overflowed a 1280x760 window when sized
   by width, 10 Oct 2026) */
.deck .slide{padding-top:calc(var(--frame) + 62px);padding-bottom:calc(var(--fh) + 22px)}
.deck .slide.bleed,.deck .slide.poem,.deck .slide.hero{padding-top:0;padding-bottom:0}
.deck .slide.hero{padding-inline:var(--gutter)}
.deck .feat .main{width:min(100%,calc(min(100svh - 360px,460px) * 1.05));height:auto;aspect-ratio:1.05;justify-self:end}
.deck .strip{margin-top:clamp(18px,3vh,40px)}
.deck .thumbs button{aspect-ratio:auto;height:min(11vh,96px)}
.deck .gal{height:min(calc(100svh - 390px),540px)}
/* a collection slide is a stack: heading block, then the photo row takes only the height that
   is left, then the buttons. However long the text runs, it can never touch the photos (Harsh, 10 Oct 2026) */
.deck .slide.looks-slide > .in{display:flex;flex-direction:column;height:100%}
.deck .slide.looks-slide .looks{flex:1 1 0;min-height:160px;max-height:470px;height:auto}
.deck .slide.looks-slide .copy{max-width:72ch;font-size:var(--t-sm);margin-bottom:0}
.deck .viewer .stage{width:min(calc(100svh - 364px),560px)}
.deck .ev .ph{width:min(100%,calc(100svh - 470px),360px)}
.deck .book-strip{--bh:min(calc(100svh - 370px),680px)}
.deck .slide.cl{padding-top:calc(var(--frame) + 112px)}  /* the row starts below the logo, never under it */
.deck .slide.cl .book-strip{--bh:min(calc(100svh - 300px),700px)}  /* no heading block above: the title is the row's first panel */  /* head 90 + strip gap and scrollbar 34 + nav 48 + slide padding 160 */
.deck .collage,.deck .tnc{height:min(calc(100svh - 200px),580px)}
/* the stores collage sits in the slide's bottom-right corner, so the silk's cut edges meet the
   screen's edges and it reads as running off the corner (Harsh, 11 Oct 2026) */
.deck .slide.collage-slide > .in{position:static}
.deck .collage-slide .collage.collage-one{position:absolute;right:0;bottom:0;margin:0;height:auto;
  width:min(70vw,1100px,calc((100svh - 60px) * 1.333))}
/* on that slide the footer links would sit on the Select City Walk card: they fade out (the menu has them) */
.deck .foot nav{transition:opacity .5s var(--ease)}
.deck body:has(.collage-slide.is-on) .foot nav{opacity:0;pointer-events:none}
.deck .foot .music{transition:background-color .5s var(--ease)}
.deck body:has(.collage-slide.is-on) .foot .music{background:rgba(28,20,10,.82);padding:6px 10px;margin-right:-10px}   /* sits on the silk / card corner */
/* Then and now: the silk in Harsh's collage is cut at the top, so the collage starts just above the
   screen's top edge and the silk runs off it (Harsh, 11 Oct 2026) */
/* Then and now, big (Harsh, 11 Oct 2026: "it becomes big"): text + the six words in a left column,
   the collage as large as the screen allows on the right, hanging from the top edge */
.deck .slide.tn-slide > .in{position:static;max-width:none}   /* text starts at the margin on every width */
.deck .tn-slide{--tn-h:min(calc(100svh - var(--fh) - var(--frame) - 16px),calc((100vw - var(--gutter) - 360px - 56px - 7vw) / 1.2495))}
/* the text block sits centred in the space left of the collage, not against the margin (Harsh, 11 Oct 2026) */
.deck .tn-slide .tn{grid-template-columns:minmax(0,360px);align-content:center;
  padding-left:max(0px,calc((100vw - 7vw - var(--tn-h) * 1.2495 - 360px) / 2 - var(--gutter)))}
.deck .tn-slide .tn h2.script{line-height:.84}   /* "then / and now" closer together */
.deck .tn-slide .words{grid-auto-flow:column;grid-template-rows:repeat(2,auto);gap:10px 22px;margin-top:6px}
.deck .tn-slide .tnc.tnc-one{position:absolute;right:7vw;top:0;margin:0;transform:translateY(-2%);   /* the silk's cut sits 1.6% below the PNG's top; 7vw keeps the logo off the papers */
  aspect-ratio:1402/1122;width:auto;
  height:var(--tn-h)}
.deck .tn-slide .tnc.tnc-one img{object-position:center top}
.deck .script{margin-bottom:.12em}
.deck .prod .ph{aspect-ratio:auto;height:min(calc(100svh - 525px),300px)}
.deck .colls{grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(14px,2vw,28px)}
.deck .coll p{font-size:.8rem}

/* ---------- responsive ---------- */
@media (max-width:1300px){
  .foot nav a{padding:0 9px}
}
/* below 1200 the footer row has no room for every link; the menu carries them all */
@media (max-width:1200px){
  .foot nav{display:none}
}
@media (max-width:1100px){
  .foot nav{display:none}
  .colls{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px),(max-height:560px){
  :root{--frame:10px;--fh:52px}
  .cards,.prods{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards .card:last-child:nth-child(odd){grid-column:1/-1}
  .feat,.collage-g,.tn{grid-template-columns:1fr}
  .split{grid-template-columns:1fr;min-height:0}
  .split.flip > .ph{order:0}
  .split .txt{padding:48px var(--gutter) 64px}
  .collage{height:auto;display:grid;gap:16px}
  .collage .pic,.collage .cap{position:static;width:auto;height:auto}
  .collage .pic .ph{aspect-ratio:1.3}
  .collage.collage-one{display:block;width:calc(100% + var(--gutter));margin-right:calc(var(--gutter) * -1)}   /* silk runs off the right edge */
  .tnc{height:70vw}
  .tnc.tnc-one{height:auto}
  .tnc.tnc-one img{height:auto}
  .words{grid-auto-flow:column;grid-template-rows:repeat(2,auto)}
  .thumbs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .strip .ar,.galrow .ar{display:none}
  .gal{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;height:auto}
  .gal > :first-child{grid-row:auto;grid-column:1/-1;aspect-ratio:1.2}
  .gal .ph{aspect-ratio:1.15}
  .colls{grid-template-columns:repeat(2,minmax(0,1fr))}
  .looks{grid-template-columns:repeat(2,minmax(0,1fr));height:auto}
  .looks .ph{aspect-ratio:.7}
  .evs{grid-template-columns:1fr}
  .book-strip{flex-direction:column;overflow:visible;scroll-snap-type:none;padding-bottom:0}
  .book-strip .pg{height:auto;width:100%}
  .book-strip .pg img{width:100%;height:auto}
  .book-nav{display:none}
  .bk-end{flex:none;width:100%}
  .book-strip .cl-intro{height:auto;width:100%;padding:0 0 8px}
  .book-strip .cl-end{height:42vw;width:100%}
  .fbleed .ph.bgph{position:relative;width:100%;height:60vw;margin:-60px calc(var(--gutter) * -1) 24px}
  .poem{min-height:0;aspect-ratio:2/1}
  .dots,.foot .social{display:none}
  .logo{width:66px}
  .menu-btn{width:44px;height:44px}
  /* phones and portrait tablets scroll the page: it settles on a whole row of photos, never half of one (client,
     14 Oct 2026). Proximity, so the words between the photos still scroll freely; the margin keeps a photo clear
     of the menu button. */
  html:not(.deck){scroll-snap-type:y proximity}   /* needs .slide to clip, not be a scroll container (overflow:clip above) */
  :is(.colls .coll,.looks .ph,.gal .ph,.evs .ev,.prods .prod,.cards .card,.book-strip .pg,.stores2 .st,.thumbs .ph){scroll-snap-align:start;scroll-margin-top:68px}
}
@media (max-aspect-ratio:5/4){
  .hero .bgph img{object-position:70% 50%}  /* tall screens: keep both feet in the crop */
}
@media (max-width:620px){
  .hero h1.script{white-space:normal}
  .hero .shloka{position:relative;right:auto;bottom:auto;width:100%;margin-top:34px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .arriving .curtain{display:none}
}
/* Select Citywalk's slide shows about half the shopfront photo: anchored left, so the whole L'AFFAIRE on the glass and the logo show (client, 19 Oct 2026: "the L is cut") */
#select-citywalk .ph img{object-position:0 50%}
/* Our stores: each card turns slowly through its store's photos, shopfront first (client, 19 Oct 2026) */
.st .ph[data-cycle] img{position:absolute;inset:0;opacity:0;transition:opacity 1.6s var(--ease)}
.st .ph[data-cycle] img.is-on{opacity:1}
.st .ph[data-cycle] img:first-child{position:relative}

/* ======================================================================================================
   PHONES (620px and under; Harsh, 20 Oct 2026: "every layout on phone crazy crisp, sizing, spacing, layout on a
   column grid"). One system for every page, so nothing is tuned by eye page by page:
     grid     4 columns, 20px outer gutter, 12px between columns; a full row = 4, a half = 2, a quarter = 1
     space    an 8px scale: 8 / 16 / 24 / 32 / 48 / 64 / 96, and only these
     type     body 15/24, small 13/20, eyebrow 11 caps, heading script 40/42, card titles 17/22
     slides   size to their content (only the welcome keeps the full screen); 96 above (clear of the menu button),
              64 below; no slide is ever a band of empty colour
   ====================================================================================================== */
@media (max-width:620px){
  :root{--gutter:20px;--s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:48px;--s6:64px;--s7:96px;--col-gap:12px}
  .slide:not(.hero){min-height:0;align-items:start;padding:var(--s7) var(--gutter) var(--s6)}
  .slide.poem{padding:0}
  .slide.split,.slide.bleed{padding:0}
  .slide > .in{width:100%}
  /* type */
  body{font-size:15px;line-height:1.6}
  .copy{font-size:15px;line-height:24px;margin:0 0 var(--s3)}
  .copy.muted,.cl-intro .copy,.coll p,.ev .evl{font-size:13px;line-height:20px}
  .eyebrow{font-size:11px;letter-spacing:.28em;margin:0 0 var(--s2)}
  .script,.script.lg,h1.script,h2.script,.book-head h1.script{font-size:40px;line-height:42px;margin:0 0 var(--s2)}
  .hero h1.script{font-size:34px;line-height:38px}
  .italic{font-size:18px;line-height:26px}
  .lotus{margin-bottom:var(--s1)}
  .lotus::before,.lotus::after{width:40px}
  .center + .evs,.center + .prods,.center + .cards,.center + .colls,.center + .gal,.center + .galrow{margin-top:var(--s3)}
  /* one grid for every collection of tiles */
  .cards,.prods,.colls,.looks,.gal,.thumbs,.stores2,.evs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--col-gap);row-gap:var(--s3);margin-top:var(--s3);width:100%}
  .cards > *,.prods > *,.colls > *,.looks > *,.gal > *,.stores2 > *,.evs > *{grid-column:span 2}
  .thumbs > *{grid-column:span 2}
  .cards .card:last-child:nth-child(odd),.gal > :first-child{grid-column:1/-1}
  .gal > :first-child{aspect-ratio:4/3}
  .gal .ph,.looks .ph{aspect-ratio:4/5}
  .coll .ph{width:100%}
  .coll h3,.ev .evt{font-size:17px;line-height:22px;margin-top:var(--s1)}
  .ev .evn{font-size:11px;padding-bottom:0}
  .ev{grid-row:auto;display:flex;flex-direction:column;align-items:center;gap:var(--s1)}
  .ev .ph{width:100%;margin:0}
  .stores2{align-items:start}
  .st .cap,.st span{font-size:13px}
  /* buttons: a full-width stack, one height */
  .btns{flex-direction:column;align-items:stretch;gap:var(--s2);width:100%;max-width:360px;margin-inline:auto}
  .btns .btn,.btn{justify-content:center;min-height:48px;font-size:16px}
  /* split slides: the photo on top at 4:5, the words under it on the grid */
  .split > .ph{min-height:0;aspect-ratio:4/5}
  .split .txt{padding:var(--s5) var(--gutter) var(--s6)}
  .info{row-gap:var(--s1)}
  /* rows that become stacks */
  .book-head{margin-bottom:var(--s3)}
  .book-strip{gap:var(--s2)}
  .cl-intro{padding-bottom:var(--s2)}
  .hero .shloka{margin-top:var(--s5)}
  /* photos come to rest just under the dark band behind the menu button and logo (84px), not under it */
  :is(.colls .coll,.looks .ph,.gal .ph,.evs .ev,.prods .prod,.cards .card,.book-strip .pg,.stores2 .st,.thumbs .ph){scroll-margin-top:92px}
  /* the page end: room for the band too, so the last rows of a grid can come to rest below it instead of half under it */
  main > .slide:last-child:not(.hero){padding-bottom:calc(var(--s6) + 92px)}
  /* the top of every slide is a resting point too. Without one at the very top, a phone opening a page snapped straight
     down to the first row of photos (and again as photos loaded): the page "jumped to the bottom" (Harsh, 20 Oct 2026) */
  html:not(.deck) main > .slide{scroll-snap-align:start}
  /* the music player at the bottom: the same soft dark band as at the top, so its buttons never sit on a photo or a label
     (Harsh's phone, 20 Oct 2026: the player over "E-Store") */
  body::after{content:"";position:fixed;left:0;right:0;bottom:0;height:88px;z-index:39;pointer-events:none;
    background:linear-gradient(0deg,rgba(14,10,7,.82),rgba(14,10,7,.55) 55%,rgba(14,10,7,0))}
  /* the featured-collection slides (Shiv Shakti, Woven Wonders): the photo full width at 4:5, fading into the ground, the
     words right under it. Before, a 60vw landscape strip sat in a full screen of empty colour (Harsh, 20 Oct 2026) */
  .slide.fbleed{min-height:0;padding:0;display:block}
  .fbleed .ph.bgph{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:4/5;margin:0;z-index:0}
  .fbleed .ph.bgph img{width:100%;height:100%;object-fit:cover}
  .fbleed .ph.bgph::after{background:linear-gradient(0deg,var(--tone),transparent 35%)}
  .fbleed > .in{position:relative;margin-top:calc(var(--s6) * -1);padding:0 var(--gutter) var(--s6)}
  /* a grid of an odd number of photos ends on a full-width one, never a lone half */
  .looks > .ph:last-child:nth-child(odd){grid-column:1/-1;aspect-ratio:4/3}
  /* the two stores side by side, level (the laptop stagger has no room here) */
  .st:nth-child(2){margin-top:0}
  .gal > :first-child{aspect-ratio:4/5}
  .gal > :last-child:nth-child(even){grid-column:1/-1;aspect-ratio:4/3}   /* first photo full, so an even count leaves the last one alone */
  .evs .ev .ph{aspect-ratio:1;height:auto;position:relative;overflow:hidden}
  .evs .ev .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  /* featured slides: the words start under the photo, never on its edge */
  .fbleed > .in{margin-top:0;padding-top:var(--s4)}
  /* the menu button and the logo stay on screen while the page scrolls: a soft band of the dark ground sits behind them,
     so they never float over a photo or a heading */
  body::before{content:"";position:fixed;left:0;right:0;top:0;height:84px;z-index:39;pointer-events:none;
    background:linear-gradient(180deg,rgba(14,10,7,.82),rgba(14,10,7,.55) 55%,rgba(14,10,7,0))}
}
/* the E-Store is not open yet (Harsh, 20 Oct 2026): a small gold "Coming soon" under its card label and over its slide */
.card .soon{display:block;font-style:normal;font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-top:4px}
.soon-mark{margin-bottom:6px}
div.prod{cursor:default}
/* ---------- the music: the album button and panel (Harsh, 20 Oct 2026) ---------- */
.music .np{display:flex;align-items:center;gap:10px;height:24px;color:var(--gold)}
.music .np .eq{pointer-events:none}
.np-t{max-width:15ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.66rem;letter-spacing:.16em;opacity:0;width:0;transition:opacity .4s var(--ease)}
.music.on .np-t{opacity:1;width:auto}
.album{position:fixed;right:var(--frame);bottom:calc(var(--frame) + var(--fh) + 10px);z-index:70;width:min(380px,calc(100vw - 2 * var(--frame)));
  max-height:min(72vh,620px);overflow:auto;overscroll-behavior:contain;padding:26px 24px 22px;background:#120d09;box-shadow:0 -24px 60px rgba(0,0,0,.45);border:1px solid var(--rule);
  color:var(--cream);opacity:0;transform:translateY(14px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.album.on{opacity:1;transform:none}
.album .eyebrow{margin:0 0 4px;font-size:10px}
.album h3.script{font-size:2.6rem;line-height:1;margin:0 0 4px}
.al-sub{margin:0;font-family:var(--serif);font-style:italic;font-size:1.02rem;line-height:1.35;color:var(--cream)}
.al-by{margin:4px 0 0;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--cream-2)}
.al-now{margin:18px 0 10px;display:grid;gap:6px}
.al-t{font-size:.9rem;color:var(--gold)}
.al-now input[type=range]{width:100%;accent-color:var(--gold);height:18px;margin:0;cursor:pointer}
.al-times{display:flex;justify-content:space-between;font-size:.72rem;color:var(--cream-2);font-variant-numeric:tabular-nums}
.al-list{list-style:none;margin:6px 0 0;padding:0;border-top:1px solid var(--rule)}
.al-list button{display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:10px;width:100%;min-height:44px;padding:6px 4px;text-align:left;
  border-bottom:1px solid rgba(210,179,117,.18);color:var(--cream);font-size:.92rem;transition:background-color .25s var(--ease),color .25s var(--ease)}
.al-list button:hover,.al-list button:focus-visible{background:rgba(210,179,117,.08)}
.al-list button.is-cur{color:var(--gold)}
.al-n,.al-d{font-size:.75rem;color:var(--cream-2);font-variant-numeric:tabular-nums}
.al-list button.is-cur .al-n{color:var(--gold)}
.album .is-cur .al-name::after{content:"";display:inline-block;width:6px;height:6px;margin-left:8px;border-radius:50%;background:var(--gold);vertical-align:middle}
.al-sp{display:inline-block;margin-top:16px;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:3px}
.al-x{position:absolute;top:14px;right:14px;width:28px;height:28px}
.al-x::before,.al-x::after{content:"";position:absolute;left:4px;right:4px;top:50%;height:1px;background:var(--gold);transform:rotate(45deg)}
.al-x::after{transform:rotate(-45deg)}
@media (max-width:620px){
  .album{left:0;right:0;bottom:0;width:auto;max-height:78svh;padding:24px var(--gutter) calc(28px + env(safe-area-inset-bottom,0px));border-width:1px 0 0;transform:translateY(100%)}
  .album.on{transform:none}
  .np-t{display:none}
}
@media (prefers-reduced-motion:reduce){.album{transition:none}}
/* faces: generated by src/focus.py, never edit by hand */
img[src*="/card-about-"],img[src*="/card-about."]{object-position:66% 34%}
img[src*="/card-colls-"],img[src*="/card-colls."]{object-position:50% 28%}
img[src*="/card-journey-"],img[src*="/card-journey."]{object-position:51% 50%}
img[src*="/designer-"],img[src*="/designer."]{object-position:45% 24%}
img[src*="/des-1-"],img[src*="/des-1."]{object-position:66% 34%}
img[src*="/des-2-"],img[src*="/des-2."]{object-position:51% 21%}
img[src*="/des-3-"],img[src*="/des-3."]{object-position:51% 50%}
img[src*="/des-4-"],img[src*="/des-4."]{object-position:32% 15%}
img[src*="/des-6-"],img[src*="/des-6."]{object-position:40% 35%}
img[src*="/look-2-"],img[src*="/look-2."]{object-position:34% 13%}
img[src*="/look-3-"],img[src*="/look-3."]{object-position:51% 22%}
img[src*="/look-4-"],img[src*="/look-4."]{object-position:66% 34%}
img[src*="/shiv-"],img[src*="/shiv."]{object-position:37% 23%}
img[src*="/woven-"],img[src*="/woven."]{object-position:51% 15%}
img[src*="/gal-05-"],img[src*="/gal-05."]{object-position:24% 35%}
img[src*="/gal-06-"],img[src*="/gal-06."]{object-position:33% 36%}
img[src*="/gal-07-"],img[src*="/gal-07."]{object-position:51% 40%}
img[src*="/gal-08-"],img[src*="/gal-08."]{object-position:66% 34%}
img[src*="/gal-09-"],img[src*="/gal-09."]{object-position:51% 50%}
img[src*="/gal-10-"],img[src*="/gal-10."]{object-position:34% 13%}
img[src*="/gal-11-"],img[src*="/gal-11."]{object-position:65% 39%}
img[src*="/gal-13-"],img[src*="/gal-13."]{object-position:32% 15%}
img[src*="/gal-15-"],img[src*="/gal-15."]{object-position:40% 35%}
img[src*="/gal-17-"],img[src*="/gal-17."]{object-position:71% 25%}
img[src*="/gal-18-"],img[src*="/gal-18."]{object-position:34% 27%}
img[src*="/gal-19-"],img[src*="/gal-19."]{object-position:51% 15%}
img[src*="/bd-1-"],img[src*="/bd-1."]{object-position:48% 11%}
img[src*="/bd-2-"],img[src*="/bd-2."]{object-position:50% 17%}
img[src*="/bd-3-"],img[src*="/bd-3."]{object-position:45% 11%}
img[src*="/bd-4-"],img[src*="/bd-4."]{object-position:51% 14%}
img[src*="/vr-1-"],img[src*="/vr-1."]{object-position:50% 21%}
img[src*="/vr-2-"],img[src*="/vr-2."]{object-position:59% 32%}
img[src*="/ww-1-"],img[src*="/ww-1."]{object-position:47% 24%}
img[src*="/ww-2-"],img[src*="/ww-2."]{object-position:42% 29%}
img[src*="/ww-3-"],img[src*="/ww-3."]{object-position:50% 16%}
img[src*="/bh-1-"],img[src*="/bh-1."]{object-position:53% 17%}
img[src*="/bh-2-"],img[src*="/bh-2."]{object-position:54% 20%}
img[src*="/bh-3-"],img[src*="/bh-3."]{object-position:32% 22%}
img[src*="/bh-4-"],img[src*="/bh-4."]{object-position:55% 24%}
img[src*="/gp-01-"],img[src*="/gp-01."]{object-position:50% 20%}
img[src*="/gp-02-"],img[src*="/gp-02."]{object-position:70% 35%}
img[src*="/gp-03-"],img[src*="/gp-03."]{object-position:39% 30%}
img[src*="/gp-04-"],img[src*="/gp-04."]{object-position:52% 15%}
img[src*="/gp-05-"],img[src*="/gp-05."]{object-position:50% 24%}
img[src*="/gp-06-"],img[src*="/gp-06."]{object-position:25% 33%}
img[src*="/gp-07-"],img[src*="/gp-07."]{object-position:39% 30%}
img[src*="/gp-08-"],img[src*="/gp-08."]{object-position:53% 13%}
img[src*="/gp-09-"],img[src*="/gp-09."]{object-position:48% 31%}
img[src*="/gp-11-"],img[src*="/gp-11."]{object-position:51% 38%}
img[src*="/gp-12-"],img[src*="/gp-12."]{object-position:40% 45%}
img[src*="/gp-13-"],img[src*="/gp-13."]{object-position:44% 25%}
img[src*="/gp-14-"],img[src*="/gp-14."]{object-position:50% 17%}
img[src*="/gp-15-"],img[src*="/gp-15."]{object-position:48% 37%}
img[src*="/gp-16-"],img[src*="/gp-16."]{object-position:56% 21%}
img[src*="/gp-17-"],img[src*="/gp-17."]{object-position:36% 22%}
img[src*="/gp-18-"],img[src*="/gp-18."]{object-position:44% 12%}
img[src*="/gp-19-"],img[src*="/gp-19."]{object-position:43% 18%}
img[src*="/gp-20-"],img[src*="/gp-20."]{object-position:69% 21%}
img[src*="/gp-21-"],img[src*="/gp-21."]{object-position:50% 22%}
img[src*="/gp-22-"],img[src*="/gp-22."]{object-position:41% 28%}
img[src*="/gp-23-"],img[src*="/gp-23."]{object-position:39% 39%}
img[src*="/gp-24-"],img[src*="/gp-24."]{object-position:45% 41%}
img[src*="/gp-25-"],img[src*="/gp-25."]{object-position:54% 44%}
img[src*="/gp-26-"],img[src*="/gp-26."]{object-position:53% 41%}
img[src*="/gp-27-"],img[src*="/gp-27."]{object-position:51% 17%}
img[src*="/gp-28-"],img[src*="/gp-28."]{object-position:54% 17%}
img[src*="/gp-29-"],img[src*="/gp-29."]{object-position:48% 18%}
img[src*="/gp-30-"],img[src*="/gp-30."]{object-position:39% 18%}
/* end faces */