@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400 500;font-display:swap;src:url(fonts/cormorant-garamond-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400 500;font-display:swap;src:url(fonts/cormorant-garamond-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:300 500;font-display:swap;src:url(fonts/inter-tight-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Ballet';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ballet-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* House of Anura full site, design pass 2 ("Private Atelier"). One stylesheet: tokens, base, header and menu, motion, pages, footer.
   Palette: ivory #F7F1E5, ink #231F20, borders and rules ink at 14%; the footer seal is the only gold (an image).
   Type: the italic display is for the word "Abaq" only; titles are upright Cormorant; labels and captions Inter Tight uppercase. */

/* ===== Tokens ===== */
:root{
  --ivory:#F7F1E5;--ink:#231F20;--ink-2:#3a3536;--rule:rgba(35,31,32,.14);
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Inter Tight',system-ui,-apple-system,'Segoe UI',sans-serif;
  --script:'Ballet','Cormorant Garamond',Georgia,serif;--tg:1.12;
  --ease:cubic-bezier(.2,.6,.2,1);
  /* one spacing scale: --sec between sections (64 -> 112 px), --g between photos (12 -> 24 px), --in inside a block (16 -> 32 px) */
  --sec:clamp(64px,4.57vw + 46px,112px);--g:clamp(12px,1.14vw + 8px,24px);--in:clamp(16px,1.5vw + 10px,32px);
  /* type */
  --t-abaq:clamp(3.5rem,2.57rem + 3.81vw,6rem);        /* "Abaq": 56 -> 96 px */
  --t-abaq-xl:clamp(4.5rem,3.1rem + 5.7vw,11rem);      /* "Abaq" in the home opener: 72 -> 176 px */
  --t-title:clamp(2.25rem,1.86rem + 1.6vw,3.25rem);    /* upright titles: 36 -> 52 px */
  --t-h3:clamp(1.75rem,1.6rem + .6vw,2.25rem);
  --t-quiet:clamp(1.375rem,1.1rem + 1.05vw,2rem);      /* "Pakistani handwork, Middle Eastern form": 22 / 28 / 32 px */
  --t-body:1.0625rem;--t-sm:.875rem;--t-lbl:.75rem}
@media (max-width:640px){:root{--t-body:1.0625rem;--t-sm:.9375rem;--t-lbl:.6875rem}}
@media (min-width:1800px){:root{--t-body:1.25rem;--t-sm:.9375rem}}
/* header (spec 23 Oct): height, wordmark width and side padding per breakpoint.
   The page uses the same side padding (--pad), so header and content share one left edge: 96 / 72 / 32 / 20.
   Very wide screens: content sits in a centred 1544 px column (--cw), backgrounds stay full width. 1544 px is the live
   waitlist's composed width on a 2560x1440 screen, measured: photo (100vh - 160px) x 0.8 = 1024 px plus gap and form = 1544 px, centred. */
:root{--top:24px;--head:56px;--wm:108px;--hpad:72px;--cw:1544px;--pad:max(var(--hpad),calc((100vw - var(--cw)) / 2))}
@media (min-width:1800px){:root{--head:60px;--wm:120px;--hpad:96px}}
@media (min-width:1920px){:root{--top:32px}}   /* --top: the gap between the header and the first photo, 16 / 24 / 32 */
@media (max-width:1023px){:root{--head:52px;--wm:96px;--hpad:32px;--top:16px}}
@media (max-width:640px){:root{--head:48px;--wm:92px;--hpad:20px}}

/* ===== Base ===== */
*,*::before,*::after{box-sizing:border-box}
html{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);scroll-padding-top:var(--head);-webkit-text-size-adjust:100%}
body{display:flex;flex-direction:column;min-height:100svh;margin:0;background:var(--ivory);color:var(--ink);font:400 var(--t-body)/1.6 var(--sans);letter-spacing:.02em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ol,ul,dl,dd,figure{margin:0;padding:0}
ol,ul{list-style:none}
img{display:block;max-width:100%}
button,input{font:inherit;color:inherit}
:focus-visible{outline:1px solid var(--ink);outline-offset:5px}
input,button,.btn{scroll-margin-top:24px;scroll-margin-bottom:24px}   /* added to scroll-padding-top, so a focused field lands below the header */
main{flex:1 0 auto;padding-top:var(--head);outline:0}
.skip{position:absolute;left:-999px;top:0;z-index:99;background:var(--ink);color:var(--ivory);padding:10px 16px;font:500 var(--t-sm) var(--sans)}
.skip:focus{left:12px;top:12px}

/* type */
h1,h2,h3{font-family:var(--serif);font-weight:400;font-style:normal;letter-spacing:0}
.abaq{font:italic 500 var(--t-abaq)/1 var(--serif);letter-spacing:-.005em}
.abaq-xl{font-size:var(--t-abaq-xl);line-height:.95}
.title{font:400 var(--t-title)/1.1 var(--serif);letter-spacing:0}
.h-quiet{font:400 var(--t-quiet)/1.2 var(--serif);letter-spacing:0}
.lbl{font:400 var(--t-lbl)/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.cap{display:block;margin-top:12px;font:400 .75rem/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase}
@media (max-width:640px){.cap{font-size:.6875rem}}
.op-sub{font-size:clamp(1.0625rem,1rem + .3vw,1.25rem)}
.tagline{font-family:var(--script);font-weight:400;font-style:normal;letter-spacing:0;white-space:nowrap;line-height:1.5;padding:.18em .3em .22em 1.15em;overflow:visible}

/* links and buttons */
.lnk{display:inline-block;padding-bottom:5px;font:500 var(--t-sm) var(--sans);letter-spacing:.025em;background:linear-gradient(var(--rule),var(--rule)) left bottom/100% 1px no-repeat;transition:background-size .4s var(--ease)}
.lnk:hover,a:hover .lnk{background-size:100% 2px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 32px;background:var(--ink);color:var(--ivory);border:1px solid var(--ink);font:500 var(--t-sm) var(--sans);letter-spacing:.02em;cursor:pointer;transition:background .35s,color .35s}
.btn:hover,.btn:focus-visible{background:var(--ink-2)}
.btn:active{opacity:.85}
.btn:disabled{opacity:.6;cursor:default}
.btn-quiet{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn-quiet:hover,.btn-quiet:focus-visible{background:var(--ink);color:var(--ivory);border-color:var(--ink)}
.pills{display:flex;flex-wrap:wrap;gap:4px 10px}
.pills li{font:400 var(--t-lbl)/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.pills li+li::before{content:'·';margin-right:10px}
.pz-back{font:400 var(--t-lbl)/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase}   /* "← Abaq" above the piece label: the label's small style, a quiet link */
.pz-top{display:contents}   /* tablet and desktop: the back link and the label stay separate lines in the panel */

/* photographs: every box 2:3, the whole frame shows */
.ph{position:relative;display:block;aspect-ratio:var(--r,2/3);overflow:hidden;background:var(--ivory)}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
a:hover .ph img{transform:scale(1.03)}
.pc{display:block}

/* ===== Header ===== */
/* Always visible at the top: solid ivory; no rule at the top of the page, a 14% rule once scrolled (.scrolled); never a shadow. */
.hd{position:fixed;inset:env(safe-area-inset-top,0px) 0 auto 0;z-index:50;height:var(--head);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 var(--pad);background:var(--ivory);border-bottom:1px solid transparent;transition:border-color .3s}
.hd.scrolled{border-bottom-color:var(--rule)}
.logo{display:inline-flex;align-items:center;justify-content:center;grid-column:2}
.logo img{display:block;width:var(--wm);height:auto}
.nav{display:flex;align-items:center;gap:32px;grid-column:1}
.nav.r{grid-column:3;justify-content:flex-end}
/* every header label: Inter Tight 11px uppercase, tracked */
.nav a,.mb{position:relative;color:var(--ink);font:400 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase}
.nav a::before,.mb::before{content:"";position:absolute;inset:-12px -6px}   /* a 44 px touch target without changing the layout */
.nav a:not(.wa){padding:8px 0 5px;background:linear-gradient(var(--ink),var(--ink)) left bottom/0 1px no-repeat;transition:background-size .45s var(--ease)}
.nav a:not(.wa):hover,.nav a[aria-current=page]{background-size:100% 1px}
/* ENQUIRE: text with a permanent 1px underline; on hover or focus the line redraws, the text stays ink */
.nav a.wa{padding:8px 0 5px;font-weight:500;white-space:nowrap;background:linear-gradient(var(--ink),var(--ink)) left bottom/100% 1px no-repeat}
.nav a.wa:hover,.nav a.wa:focus-visible{animation:redraw .7s var(--ease)}
@keyframes redraw{0%{background-position:right bottom;background-size:100% 1px}45%{background-position:right bottom;background-size:0 1px}46%{background-position:left bottom;background-size:0 1px}100%{background-position:left bottom;background-size:100% 1px}}
.nav a:focus-visible,.mb:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
/* menu button: two lines and MENU, on the left (tablet and phone) */
.mb{display:none;grid-column:1;justify-self:start;align-items:center;gap:10px;padding:8px 0;background:none;border:0;cursor:pointer}
.mb-i{position:relative;width:22px;height:8px}
.mb-i i{position:absolute;left:0;right:0;height:1px;background:var(--ink);transition:transform .45s var(--ease)}
.mb-i i:first-child{top:0}
.mb-i i:last-child{bottom:0}
.mb[aria-expanded=true] .mb-i i:first-child{transform:translateY(3.5px) rotate(45deg)}
.mb[aria-expanded=true] .mb-i i:last-child{transform:translateY(-3.5px) rotate(-45deg)}
@media (max-width:1023px){
  .hd .nav:not(.r){display:none}
  .mb{display:flex}
}
/* phone menu: upright Cormorant, thin rules */
.mm{position:fixed;inset:0;z-index:49;display:flex;flex-direction:column;padding:calc(var(--head) + clamp(28px,8svh,72px)) var(--pad) var(--pad);background:var(--ivory);opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}
.mm.open{opacity:1;visibility:visible}
.mm a.big{display:block;padding:12px 0;border-top:1px solid var(--rule);font:400 1.75rem/1.25 var(--serif);letter-spacing:0}
.mm a.big:last-of-type{border-bottom:1px solid var(--rule)}
.mm .hand{position:absolute;left:var(--pad);right:var(--pad);bottom:calc(var(--pad) + env(safe-area-inset-bottom,0px));padding-left:0;white-space:normal;font-size:calc(1.6rem*var(--tg))}

/* ===== Motion ===== */
@media (prefers-reduced-motion:no-preference){
  /* no scroll reveals (removed 23 Oct): photos and text are visible on load. The photos that had a reveal keep its slow hover zoom (.zm). */
  .js .zm img{transition:transform 1.9s var(--ease)}
  .js a:hover .zm img{transform:scale(1.03)}
  .js .mm a.big,.js .mm .hand{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .7s var(--ease)}
  .js .mm.open a.big,.js .mm.open .hand{opacity:1;transform:none}
  .js .mm.open a.big:nth-of-type(2){transition-delay:.08s}
  .js .mm.open a.big:nth-of-type(3){transition-delay:.16s}
  .js .mm.open .hand{transition-delay:.26s}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}

/* ===== Home ===== */
/* opener: the photo and "Abaq", one screen */
.op{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:var(--hpad);min-height:calc(100svh - var(--head));padding:var(--top) var(--pad) 0}
.op-ph{order:2;display:block;height:calc(100svh - var(--head) - var(--top));min-height:480px;aspect-ratio:2/3}
.op-ph .ph,.pz-first .ph{height:100%}
.op-ph .ph{aspect-ratio:auto}
.op-tx{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
@media (min-width:1600px){.op-sub{font-size:1.5rem}.op-tx .lbl{font-size:.875rem}}
@media (min-width:1800px){
  /* opener: the photo is already the full screen height; the text block steps up, centred in its column */
  :root{--t-abaq-xl:15rem}
  .op-sub{font-size:1.75rem}
  .op-tx .lbl{font-size:1rem}
  .op-tx .lnk,.more .lnk{font-size:1.0625rem}   /* "View Abaq" after the pieces matches the opener's link */
  /* piece panel: one step up */
  .pz-in .title{font-size:3.75rem}
  .pz-in .pills li,.pz-in .pz-back{font-size:.8125rem}
  .pz-desc{max-width:52ch;font-size:1.375rem;line-height:1.55;width:52ch}
  .pz-in .pz-tb{font-size:.8125rem}
  .pz-in .btn{font-size:1rem;min-height:56px;padding:0 40px}
  .ab-in p:not(.op-sub){font-size:1.125rem}
}
.op-tx .lnk{margin-top:12px}
/* desktop opener (Taimur 25 Oct): the photo in a 4:5 frame (crop only, centred), as tall as the screen allows below the header gap, right-aligned;
   the text left-aligned from column 1 (the page's left margin, where the featured section's photo starts), centred on the photo, at least --sg from it */
@media (min-width:1024px){
  .op{--sg:clamp(32px,3.5vw,64px);grid-template-columns:max-content minmax(0,1fr);column-gap:var(--sg)}
  .op-ph{justify-self:end;aspect-ratio:4/5;height:auto;min-height:0;width:min(100%,calc((100svh - var(--head) - var(--top)) * .8))}   /* never taller than the screen below the header gap; narrower (and shorter) only when the text needs the room */
  .op-tx{align-items:flex-start;text-align:left;justify-self:start}
}
.op-tx .abaq{padding-bottom:.2em}   /* room for the descender of the q above "Twelve pieces, made to order" */
@media (min-width:641px) and (max-width:900px){
  .op{grid-template-columns:1fr 1fr;column-gap:32px;min-height:0;padding:var(--top) var(--pad) 24px}
  .op-ph{order:0;width:100%;height:auto;min-height:0}
}
@media (max-width:640px){
  .op{display:block;min-height:0;padding:var(--top) 0 0}
  .op-ph{width:100%;height:auto;min-height:0}
  .op-tx{gap:8px;padding:20px var(--pad) 0}
  .op-tx .lnk{margin-top:8px}
}

/* the pieces: the row of four, then the selected pieces, as one sequence */
.pieces{padding:var(--sec) var(--pad) 0}
.pieces .h-quiet{margin-bottom:var(--in)}
.h-quiet .nw{white-space:nowrap}   /* "Pakistani handwork, / Middle Eastern form": one line where it fits, otherwise it breaks only after the comma */
.pieces,.mean{--sg:clamp(32px,3.5vw,64px)}   /* photo-to-text gap, the same in the featured pieces and the name */
.four-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--g)}
.sp{position:relative;margin-top:var(--sec);height:calc(100svh - var(--head) - var(--top) * 2 + (var(--n) - 1) * 100svh)}   /* one screen of scroll per piece */
/* the frame pins under the header while the page scrolls through the wrapper; native scroll is never touched */
.sp-pin{position:sticky;top:calc(var(--head) + var(--top));height:calc(100svh - var(--head) - var(--top) * 2);display:grid;grid-template-columns:auto auto;justify-content:center;gap:var(--sg);align-items:center}   /* --top above and below the photo; photo and names centred as one group, so the outer margins match */
.sp-stage{position:relative;height:calc(100svh - var(--head) - var(--top) * 2);aspect-ratio:2/3}
.sp-stage .o-panel{position:absolute;inset:0}
.sp-stage .ph{height:100%;aspect-ratio:auto}
.sp-txs{display:grid}
.o-panel{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .4s ease,visibility .4s}
.o-panel.on{opacity:1;visibility:visible}
.sp-ph{display:block}
.sp-side{display:flex;flex-direction:column;justify-content:center;gap:var(--in)}
.sp-tx{display:flex;align-items:flex-start}
.sp-list{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.sp-list button{all:unset;cursor:pointer;padding:2px 0;font:400 var(--t-h3)/1.2 var(--serif);letter-spacing:0;color:rgba(35,31,32,.75);transition:color .3s}
.sp-list button:hover,.sp-list button[aria-pressed=true]{color:var(--ink)}
.sp-list button:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
.sp-list button[aria-pressed=true]:hover,.sp-list button[aria-pressed=true]:focus-visible{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}   /* the name shown opens its page */
/* desktop: the frame sits on the four-column grid of the row above (same columns, same gap): the photo starts at column 1 (Emeraude),
   the names and link start at column 3 (Anqa). The photo keeps 2:3 and --top above and below, so it can end short of column 2's right edge */
@media (min-width:1024px){
  .sp-pin{grid-template-columns:repeat(4,minmax(0,1fr));justify-content:stretch;column-gap:var(--g)}
  .sp-stage{grid-column:1/3;justify-self:start;height:auto;width:min(100%,calc((100svh - var(--head) - var(--top) * 2) * 2 / 3))}
  .sp-side{grid-column:3/5;justify-self:start}
}
/* tablet: the photo keeps its full 2:3 frame but is capped at about 55% of the width so the names keep room */
@media (max-width:1023px){.sp-stage{height:min(calc(100svh - var(--head) - var(--top) * 2),calc((100vw - 2 * var(--pad)) * .55 * 1.5))}}
.swipe{display:none}
.more{display:flex;justify-content:center;margin-top:var(--sec)}
@media (max-width:640px){.four-row{grid-template-columns:1fr 1fr;row-gap:28px}}
@media (max-width:767px){
  .sp{display:none}
  /* phone: swipe row of 2:3 cards, about 70% wide, the next one peeking in */
  .swipe{display:flex;gap:var(--g);margin:var(--sec) calc(var(--pad)*-1) 0;padding:0 var(--pad);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--pad);scrollbar-width:none}
  .swipe::-webkit-scrollbar{display:none}
  .swipe li{flex:0 0 70%;scroll-snap-align:start}
}

/* the name: Amber photo, "felt, before seen", the meaning */
.mean{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5fr);gap:var(--in) clamp(32px,6vw,112px);align-items:center;padding:var(--sec) var(--pad) 0}
.mean-ph{display:block}
.mean-tx{display:flex;flex-direction:column;align-items:flex-start;gap:20px;max-width:46ch}
.mean-tx .tagline{font-size:calc(clamp(2rem,3.4vw,3.4rem)*var(--tg));padding-left:1.6em}   /* Ballet's f swash reaches about 1.5em left of the text: the indent keeps it inside the column */
.mean-line{font-size:clamp(1.125rem,1rem + .5vw,1.375rem);line-height:1.5}
.mean-dl{display:grid;gap:6px}
.mean-dl div{display:flex;gap:16px}
.mean-dl dt{min-width:9.5em;font:400 var(--t-lbl)/1.6 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.mean-dl dd{font-size:var(--t-sm)}
@media (min-width:641px){
  /* photo on the right (the featured pieces have it on the left); --top above and below it; text and photo centred as one group */
  .mean{grid-template-columns:minmax(0,max-content) auto;justify-content:center;column-gap:var(--sg)}
  .mean-ph{order:2;width:min(calc((100svh - var(--head) - var(--top) * 2) * 2 / 3),46vw)}
  /* labels in one column as wide as the longest, so both values start at the same x, on the label's baseline */
  .mean-dl{grid-template-columns:max-content auto;column-gap:16px;align-items:baseline}
  .mean-dl div{display:contents}
  .mean-dl dt{min-width:0}
}
@media (min-width:641px) and (max-width:1023px){.mean-ph{width:min(calc((100svh - var(--head) - var(--top) * 2) * 2 / 3),36vw)}}
@media (max-width:640px){.mean{display:block}.mean-tx{margin-top:var(--in)}.mean-dl div{flex-direction:column;gap:0}}

/* Our story teaser */
.story-t{display:flex;flex-direction:column;align-items:flex-start;gap:20px;padding:var(--sec) var(--pad) 0}
.story-tx{display:flex;flex-direction:column;align-items:flex-start;gap:20px;max-width:60ch}
@media (min-width:1024px){.story-t{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5fr);gap:clamp(32px,6vw,112px);align-items:start}}
.os-p{font-size:clamp(1.125rem,1.5vw,1.375rem);line-height:1.6}

/* ===== Close section: the newsletter ===== */
.close{margin:var(--sec) var(--pad) 0;padding:var(--sec) 0;border-top:1px solid var(--rule)}
#signup{scroll-margin-top:calc(var(--top) - var(--sec))}   /* /#signup: scroll-padding already clears the header; this puts the intro line --top (16/24/32) below it, past the section's top padding */
.cl-news{display:flex;flex-direction:column;gap:16px;container-type:inline-size}
.cl-news .cl-line{font-size:var(--t-sm)}
.nf-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 12px;align-items:end}
/* one row only from 1200 px and when the row has room for three 200 px inputs, the gaps and a 200 px button */
@media (min-width:1200px){@container (min-width:876px){.nf-row{grid-template-columns:repeat(3,minmax(200px,1fr)) 200px}}}
.nf-form .fld{display:flex;flex-direction:column;justify-content:flex-end;height:100%}
.nf-form .fld label{display:block;margin-bottom:6px;font:400 var(--t-lbl)/1.4 var(--sans);letter-spacing:.06em}
.nf-form .fld input{display:block;width:100%;min-height:48px;padding:0 14px;background:transparent;border:1px solid var(--rule);border-radius:0;font:400 1rem var(--sans);letter-spacing:.02em}
.nf-form .fld input:focus{outline:2px solid var(--ink);outline-offset:2px}
.nf-form .fld input[aria-invalid=true]{border:2px solid var(--ink)}
.nf-form .btn{min-height:48px;width:100%;min-width:200px;padding:0 20px}
.nf-form .err{font:500 var(--t-sm) var(--sans);letter-spacing:.02em}
.nf-form .fld .err{margin-top:6px}
.nf-form .err:empty{display:none}
.nf-form .err[role=status]{margin-top:12px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cl-note{margin-top:8px;font-size:var(--t-lbl)}
.cl-note a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.wl-ok{font:400 1.125rem var(--sans)}
.wl-ok:focus{outline:0}
.channel a{padding-bottom:2px;border-bottom:1px solid var(--ink);font:500 var(--t-sm) var(--sans)}
@media (max-width:640px){.nf-row{grid-template-columns:1fr;gap:16px}.nf-form .btn{min-width:0}}

/* ===== Collections: split blocks (cover, text), alternating ===== */
.cpage{padding:var(--top) var(--pad) var(--sec)}
.cpage-h{margin-bottom:16px}
.cblock{display:grid;grid-template-columns:1fr 1fr;gap:var(--in) clamp(32px,6vw,112px);align-items:center}
.cblock+.cblock{margin-top:var(--sec)}
.cblock.rev .cblock-ph{order:2}
.cblock-ph{display:block;width:min(100%,calc((100svh - var(--head) - 120px) * .667));justify-self:end}
.cblock.rev .cblock-ph{justify-self:start}
.cblock-tx{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.cblock-tx .lnk{margin-top:10px}
@media (min-width:641px) and (max-width:900px){.cblock-ph{width:100%}}
@media (max-width:640px){
  .cblock{display:block}
  .cblock-ph{width:100%}
  .cblock-tx{gap:6px;margin-top:16px}
  .cblock-tx .lnk{margin-top:6px}
}

/* ===== Abaq ===== */
.ab-in{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:14px;min-height:46vh;padding:var(--sec) var(--pad)}
.ab-in p:not(.op-sub){max-width:44ch}
.ab-grid{padding:0 var(--pad)}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(40px,3vw + 20px,64px) var(--g)}
.grid .cap{font-size:.875rem}
@media (min-width:1680px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:900px){.ab-in{min-height:0}}
@media (min-width:1024px){
  .ab-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);grid-template-rows:auto auto;column-gap:clamp(32px,6vw,112px);row-gap:6px;align-items:end;min-height:0;padding:var(--top) var(--pad) 28px}
  .ab-in .abaq{grid-column:1;grid-row:1}
  .ab-in .op-sub{grid-column:1;grid-row:2;align-self:start}
  .ab-in p:not(.op-sub){grid-column:2;max-width:60ch;font-size:.9375rem;line-height:1.5}
  .ab-in p:not(.op-sub):nth-of-type(2){grid-row:1;align-self:end}
  .ab-in .price-note{grid-column:2;grid-row:2;align-self:start;margin-top:4px}
  .grid{row-gap:clamp(40px,3vw + 20px,64px);column-gap:24px}
  .grid .cap{margin-top:8px}
}
@media (max-width:640px){
  .ab-in{gap:6px;padding:var(--top) var(--pad) 24px;font-size:.9375rem;line-height:1.5}
  .ab-in .abaq{margin-bottom:2px}
  /* Abaq as an ad landing: on phone the sign-up link is a full-width solid button (the site's .btn look); a link on wider screens */
  .ab-in .su-cta{display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;margin-top:6px;padding:0 32px;background:var(--ink);color:var(--ivory);font:500 var(--t-sm) var(--sans);letter-spacing:.02em}
  .ab-in .su-cta:active{opacity:.85}
  .ab-in .price-note{align-self:stretch}
  .grid{grid-template-columns:1fr 1fr;gap:28px 12px}
}

/* ===== Piece pages: photos on the left, the panel on the right (sticky), 50/50 from 1024 ===== */
.pz{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:var(--top) var(--pad) 0}
@media (min-width:1024px){
  /* 50/50 (Taimur 24 Oct, design pass 2): photos fill the left half at 2:3; the panel is one block, centred both ways in the right half and sticky */
  .pz .pz-media{padding-top:0}
  .pz-panel .pz-in{display:grid;grid-template-columns:minmax(0,max-content);justify-content:center;grid-template-rows:minmax(0,1fr) auto minmax(var(--rsv),1fr);row-gap:0;min-height:0;height:calc(100svh - var(--head) - var(--top) * 2)}   /* centred (equal space above and below); the space below never drops under --rsv, so an open tab never reaches the WhatsApp link; the column ends --top above the screen bottom, so the tab row keeps the same gap to the screen edge as the header keeps to photo 1 */
  .pz-body{display:grid;justify-items:start;row-gap:18px}
  .pz-panel .pz-in .pz-tabs{grid-column:1;left:0;right:0}   /* the tab row lines up with the panel text */
}
.pz-media,.pz-rest{display:flex;flex-direction:column;gap:var(--g)}
.pz-rest{padding-bottom:0}
.pz-panel{position:relative}
.pz-in{position:sticky;top:calc(var(--head) + var(--top));display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:18px;min-height:calc(100svh - var(--head) - var(--top));padding:32px clamp(32px,6vw,112px)}   /* pinned below the header */
.pz-in .btn{margin-top:6px}
.pz-in .btn+.lnk{margin-top:12px;background-image:linear-gradient(var(--ink),var(--ink))}   /* WhatsApp link under the Sign up button: 12 px more space, a clear 1 px underline across the text */
.price-note{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
/* piece pages: sign-up sheet (native <dialog>). The dialog fills the screen and is transparent, so a tap outside the panel lands on it and closes it.
   Phone: the panel slides up from the bottom; tablet and desktop: a small centred panel. */
dialog.su{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:var(--ink);overflow:hidden}
dialog.su[open]{display:flex}
dialog.su::backdrop{background:rgba(35,31,32,.45)}
.su-in{position:relative;margin:auto;width:min(560px,calc(100% - 48px));max-height:calc(100% - 48px);overflow:auto;overscroll-behavior:contain;padding:52px 40px 36px;background:var(--ivory)}
.su-x{position:absolute;top:6px;right:6px;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:none;color:var(--ink);font:300 2rem/1 var(--sans);cursor:pointer}
.su-x:focus-visible{outline:2px solid var(--ink);outline-offset:-4px}
.su-in:focus{outline:0}
body.su-open{overflow:hidden}
@media (max-width:640px){.su-in{width:100%;max-height:92%;margin:auto 0 0;padding:52px var(--hpad) calc(28px + env(safe-area-inset-bottom,0px))}}
@media (prefers-reduced-motion:no-preference){
  dialog.su[open] .su-in{animation:su-rise .3s var(--ease)}
  @media (max-width:640px){dialog.su[open] .su-in{animation:su-up .38s var(--ease)}}
}
@keyframes su-up{from{transform:translateY(100%)}}
@keyframes su-rise{from{transform:translateY(12px)}}   /* prices line + sign-up link: body text and the site's .lnk */
.pz-desc{max-width:46ch}   /* the approved Details line (25 Oct) */
.pz-body{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
/* tab row (DETAILS · [DELIVERY ·] ASSISTANCE). Phone: accordion rows, each panel under its label. 641 px and up: text labels at the foot of the column, the open panel above them. */
.pz-panel{container-type:inline-size}
.pz-tabs{display:flex;flex-direction:column;align-self:stretch;margin-top:14px}
.pz-tr{display:contents}
.pz-tb{order:var(--o);display:flex;align-items:center;justify-content:space-between;width:100%;min-height:48px;padding:0;border:0;border-top:1px solid var(--rule);background:none;color:var(--ink);cursor:pointer;font:400 var(--t-lbl)/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;text-align:left}
.pz-tb::after{content:'+';font-size:1rem;font-weight:300;letter-spacing:0;line-height:1}
.pz-tb[aria-expanded=true]::after{content:'\2013'}
.pz-tb:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.pz-tp{order:var(--o);padding:0 0 20px;font-size:1rem;line-height:1.6}
.pz-tp ul{padding-left:1.15em;list-style:disc}
.pz-tp a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
@media (prefers-reduced-motion:no-preference){.pz-tp:not([hidden]){animation:pz-fade .15s ease}}
@keyframes pz-fade{from{opacity:0}}
@media (min-width:641px){
  .pz-in{--rsv:calc(var(--tl-t) * 1.6rem + 66px);gap:0}   /* free space kept under the panel text: the tallest tab's lines + its padding + the row + a gap (at least 32 px above the open tab's first line and above the row) */
  .pz-in::before,.pz-in::after{content:'';flex:1 1 0}
  .pz-in::after{min-height:var(--rsv)}
  .pz-desc{width:46ch;max-width:100%}   /* same measure as the old paragraph, so the panel keeps its place and width */
  .pz-tabs{position:absolute;bottom:0;left:28px;right:0;display:block;margin:0}
  .pz-tr{display:flex;gap:28px}
  .pz-tb{width:auto;min-height:0;padding:8px 0 0;border:0;transition:color .15s}
  .pz-tb::after,.pz-tb[aria-expanded=true]::after{content:none}   /* plain text labels on wider screens: no + / – */
  .pz-tabs.has-open .pz-tb{color:rgba(35,31,32,.55)}
  .pz-tabs.has-open .pz-tb[aria-expanded=true]{color:var(--ink)}
  .pz-tp{position:absolute;left:0;right:0;bottom:100%;padding:0 0 32px}
  /* a tab open (after Roland Mouret): the panel text above fades almost out, in place (no movement); JS adds .tab-open, aria-hidden and inert */
  .pz-body{transition:opacity .2s ease}
  .pz-in.tab-open .pz-body{opacity:.08;pointer-events:none}
  .pz-desc{text-wrap:balance}   /* no line ends with a single word: balanced lines, and the last two words kept together */
  .pz-desc .nw{white-space:nowrap}
}
@media (min-width:641px) and (prefers-reduced-motion:reduce){.pz-body{transition:none}}
@media (min-width:1024px){.pz-in{--rsv:calc(var(--tl-n) * 1.6rem + 66px)}}
/* wide but short screens (1800+ wide, under 860 tall): the panel keeps its regular sizes, so the text and the tallest open tab both fit above the tab row */
@media (min-width:1800px) and (max-height:859px){.pz-in .title{font-size:var(--t-title)}.pz-desc{width:46ch;font-size:1.0625rem;line-height:1.7}.pz-in .btn{font-size:var(--t-sm);min-height:52px;padding:0 32px}}
@media (min-width:1280px){.pz-in{--rsv:calc(var(--tl-w) * 1.6rem + 66px)}}
/* short screens (under 860 tall): a little less padding and spacing in the panel text, so an open tab keeps 32 px clear above its first line */
@media (min-width:1024px) and (max-height:859px){.pz-panel .pz-in{padding-top:16px}.pz-body{row-gap:12px}}
@media (min-width:1024px) and (max-height:759px){.pz-body{row-gap:10px}}
.pz-media{padding-top:0}
@media (min-width:641px) and (max-width:1023px){
  .pz{grid-template-columns:55fr 45fr}
  .pz-in{padding:24px 0 24px 28px;min-height:calc(100svh - var(--head) - var(--top) * 2)}   /* tablet: the column ends --top above the screen bottom, like the desktop tab row */
  .pz-body{align-self:stretch}   /* fix (25 Oct): the panel text takes the column width, so the 46ch description wraps instead of running off screen */
}
@media (max-width:640px){
  .pz{display:flex;flex-direction:column;padding:var(--top) 0 0}
  .pz-media{display:contents}
  .pz-first{order:1}
  .pz-panel{order:2}
  .pz-rest{order:3;padding:0 var(--pad)}
  .pz-in{position:static;min-height:0;gap:10px;padding:20px var(--pad) var(--sec)}
  .pz-body{align-self:stretch;gap:10px}
  .pz-in .btn{width:100%}
  .pz-desc{order:1}   /* phone: name, prices line, Sign up, WhatsApp, then the description, then the tab rows */
  .pz-tabs{order:2}
  .pz-top{display:flex;align-self:stretch;align-items:baseline;justify-content:space-between;gap:14px;white-space:nowrap}   /* phone: "← Abaq" left, the label at the right edge, one line, so the Sign up button stays on the first screen (Taimur 24 Oct, fix a) */
  .pz-back{position:relative;text-transform:none;letter-spacing:0;color:rgba(35,31,32,.75)}   /* sentence case, the site's muted grey (as the Selected pieces list; .55 is too faint for small text) */
  .pz-back::after{content:'';position:absolute;left:-10px;right:-10px;top:50%;height:44px;transform:translateY(-50%)}   /* 44 px tap area, no visible height */
}
/* previous / All of Abaq / next: quiet */
.pn{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:16px;margin:0 var(--pad);padding:var(--in) 0 var(--sec)}
.pn a.pv,.pn a.nx{display:flex;flex-direction:column;gap:2px}
.pn a.nx{align-items:flex-end;text-align:right}
.pn .lbl{color:rgba(35,31,32,.55)}
.pn .cap{margin-top:0}
.pn .mid{justify-self:center}

/* ===== Text pages: Our story, Privacy ===== */
.sy2,.txp{padding:var(--sec) var(--pad)}
.sy2-in{display:flex;flex-direction:column;align-items:center;max-width:60ch;margin:0 auto;text-align:center}
.sy2 .tagline{margin-top:8px;font-size:calc(clamp(1.6rem,2.6vw,2.4rem)*var(--tg))}
.tx{display:grid;gap:1.3em;max-width:560px;font-size:1.125rem;line-height:1.7;text-align:left}
.sy2 .tx{margin-top:var(--in)}
.sy2-ph{width:min(100%,420px);margin:var(--sec) auto 0}
.sy2-close{margin-top:var(--sec);font:400 clamp(1.75rem,3vw,2.6rem)/1.2 var(--serif);letter-spacing:0;text-wrap:balance}
.sy2 .lnk{margin-top:var(--in)}
@media (max-width:640px){.sy2 .tx:first-of-type{margin-top:calc(var(--in) * 2)}}
/* Our story, 1024 px and up (option B): the photo at screen height (full 2:3 frame, sticky under the header) beside
   "Our story", the script line and all three paragraphs, vertically centred; then a 56 px 14% rule, the pull-quote and "View Abaq".
   Below 1024 px nothing changes: the rule is hidden and the column above applies. */
.sy3-rule{display:none}
@media (min-width:1024px){
  .sy2{padding:var(--top) var(--pad) var(--sec)}
  .sy2 .sy3-in{display:grid;max-width:none;margin:0;text-align:left;align-items:start;
    grid-template-columns:calc((100svh - var(--head) - var(--top)) * 2 / 3) minmax(0,1fr);
    grid-template-rows:1fr auto auto auto auto 1fr auto auto auto;column-gap:clamp(48px,6vw,112px)}
  .sy2 .sy3-in>*{grid-column:2;justify-self:start}
  .sy2 .sy3-in>.sy2-ph{grid-column:1;grid-row:1/7;align-self:start;width:auto;height:calc(100svh - var(--head) - var(--top));aspect-ratio:2/3;margin:0}
  .sy2 .sy3-in>.sy2-ph .ph{height:100%;aspect-ratio:auto}
  .sy2 .sy3-in>h1{grid-row:2}
  .sy2 .sy3-in>.tagline{grid-row:3;margin-top:8px;padding-left:1.6em}   /* the f swash stays inside the column */
  .sy2 .sy3-in>.tx{grid-row:4;max-width:34em;margin-top:var(--in)}
  .sy2 .sy3-in>.tx2{grid-row:5;margin-top:1.3em}
  .sy2 .sy3-in>.sy3-rule{display:block;grid-column:1/-1;grid-row:7;justify-self:center;width:56px;height:1px;margin:var(--sec) 0 clamp(32px,3vw,48px);border:0;background:var(--rule)}
  .sy2 .sy3-in>.sy2-close{grid-column:1/-1;grid-row:8;justify-self:center;max-width:24ch;margin:0;text-align:center;font-size:clamp(2.75rem,1.3rem + 2.27vw,4.5rem);line-height:1.15}
  .sy2 .sy3-in>.lnk{grid-column:1/-1;grid-row:9;justify-self:center;margin-top:clamp(28px,3vw,44px)}
}
@media (min-width:1800px){.sy2 .sy3-in>h1{font-size:3.75rem}.sy2 .sy3-in>.tx{font-size:1.25rem}}
@media (min-width:2200px){.sy2 .sy3-in>h1{font-size:4.25rem}.sy2 .sy3-in>.tx{font-size:1.375rem}}   /* one more step so the text holds beside the 2560 photo */
.txp-in{max-width:560px;margin:0 auto}
.txp .tx{margin-top:var(--in)}
.txp .tx a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}

/* ===== Contact: WhatsApp first ===== */
.ct{display:flex;flex-direction:column;align-items:flex-start;padding:var(--sec) var(--pad);max-width:calc(720px + 2*var(--pad))}
.ct-wa{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:var(--in)}
.ct-num{font:400 var(--t-h3)/1.2 var(--serif)}
.ct-wa .btn{margin-top:6px}
.ct-more{display:flex;flex-wrap:wrap;gap:20px 48px;margin-top:var(--sec)}
.ct-more li{display:flex;flex-direction:column;gap:4px;font-size:var(--t-sm)}
.ct-more a{overflow-wrap:anywhere}
@media (max-width:640px){.ct-wa .btn{width:100%}.ct-wa{width:100%}.ct-more{flex-direction:column;gap:16px}}
/* split (24 Oct): photo left, the contact block right and vertically centred, 50/50 like Collections; phone: photo full width, then the block */
.ct-split{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(32px,6vw,112px);align-items:center;padding:var(--top) var(--pad) var(--sec)}
.ct-ph{justify-self:end;width:min(100%,calc((100svh - var(--head) - var(--top) - var(--sec)) * .667))}
.ct-split .ct{padding:0;max-width:720px}
@media (max-width:640px){
  .ct-split{display:block;padding:var(--top) 0 0}
  .ct-ph{width:100%}
  .ct-split .ct{padding:var(--sec) var(--pad)}
}

/* ===== 404 ===== */
.nf{display:flex;flex-direction:column;align-items:flex-start;gap:24px;padding:var(--sec) var(--pad)}
.nf-see{display:flex;flex-direction:column;gap:12px}
.nf-links{display:flex;flex-wrap:wrap;gap:12px 28px}
.nf-cards{display:grid;grid-template-columns:repeat(2,minmax(0,220px));gap:var(--g);margin:4px 0 8px}
@media (max-width:640px){.nf-see{align-self:stretch}.nf-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ===== Footer (B4, Taimur 25 Oct; hoa-footer-build-note-2026-10-25): one rule above; calligraphy, two link columns;
   bottom row: copyright left, the gold monogram at the exact centre, Privacy right, on one baseline ===== */
.f-main,.f-end{margin:0 var(--pad)}
.f-main{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,.85fr) minmax(0,1fr);column-gap:64px;align-items:start;padding-top:96px;border-top:1px solid var(--rule)}
.f-tag{font-size:calc(3.8rem*var(--tg));line-height:1;white-space:nowrap;padding:0 .3em .2em 1.6em;margin:0}   /* indent holds the f swash inside the column */
.f-col{display:flex;flex-direction:column;align-items:flex-start;gap:17px}
.f-col a,.f-end>a{font:400 var(--t-lbl)/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;transition:opacity .3s}
.f-col a:hover,.f-end>a:hover{opacity:.6}
.f-end{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:baseline;padding:77px 0 60px;font-size:var(--t-lbl)}
.f-copy{grid-column:1;line-height:1.4;letter-spacing:.04em;white-space:nowrap}
.f-end>a{grid-column:3;justify-self:end}
.f-mono{position:absolute;left:50%;bottom:54.4px;transform:translateX(-50%);display:flex}   /* centre of the 40 px monogram sits about 5 px above the text centreline */
.f-mono img{display:block;width:auto;height:40px}
@media (max-width:900px){
  .f-main{grid-template-columns:1fr 1fr;row-gap:var(--in);column-gap:clamp(24px,5vw,64px)}
  .f-tag{grid-column:1/-1;font-size:calc(3rem*var(--tg))}
}
@media (max-width:640px){
  /* phone: one centred stack; every link at least 44 px tall to tap */
  .f-main{display:flex;flex-direction:column;align-items:center;gap:0;padding-top:64px;text-align:center}
  .f-tag{font-size:calc(2.6rem*var(--tg));padding:0 0 .2em;position:relative;left:.74em;margin-bottom:12px}   /* .74em right: the f swash overhangs the text box to the left; this centres the ink */
  .f-col{align-items:center;gap:0}
  .f-col a,.f-end>a{display:flex;align-items:center;justify-content:center;min-height:44px}
  .f-main nav{margin:28px 0 14px}   /* a clear extra gap between CONTACT and ENQUIRE ON WHATSAPP, no divider */
  .f-end{display:flex;flex-direction:column;align-items:center;gap:16px;padding:56px 0 60px;text-align:center}
  .f-mono{order:-1;position:static;transform:none;margin-bottom:20px}   /* own centred row, 36 px above the copyright */
  .cl-note{text-align:center}
}