/* 00-core.css */
/* wrk. storefront. Layout idea: a sheet of warm paper with real black objects lying on it, seen from above, lit from the top-left. */
:root{
  --paper:#F3F2EE; --stock:#FBFAF7; --ink:#111112; --mute:#6B6A66; --line:#DCDAD3;
  --black:#101011; --black-2:#1A1A1C; --foil:#47474B; --on-black:#F3F2EE;
  --f-display:"Alexandria","Readex Pro",system-ui,sans-serif;
  --f-body:"Readex Pro","Alexandria",system-ui,sans-serif;
  --f-mark:"Jost","Futura","Avenir Next",system-ui,sans-serif;
  --wrap:1120px;
  --ease-lid:cubic-bezier(.6,0,.2,1);      /* heavy things: lid, drawer */
  --ease-set:cubic-bezier(.2,.9,.25,1);    /* an object being set down */
  --t-fast:.18s; --t-move:.55s; --t-lid:1.1s;
  --shadow-obj:14px 22px 34px -16px rgba(17,17,18,.42), 3px 5px 8px -3px rgba(17,17,18,.28);
  --hdr-h:60px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--f-body);font-weight:300;font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--paper)}
.site{direction:rtl;min-height:100%}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--f-display);font-weight:200;margin:0;text-wrap:balance}
p{margin:0}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:1.5px solid var(--ink);outline-offset:3px;border-radius:4px}
.mark{font-family:var(--f-mark);font-weight:300;letter-spacing:-.01em;direction:ltr;unicode-bidi:isolate}
.num{font-family:var(--f-mark);font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
.mute{color:var(--mute)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 26px;border-radius:999px;border:0;background:var(--black);color:var(--on-black);font:400 15px/1 var(--f-body);text-decoration:none;cursor:pointer;transition:transform var(--t-fast),opacity var(--t-fast)}
.btn:hover{opacity:.88}
.btn:active{transform:scale(.97)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.field{width:100%;min-height:46px;background:transparent;border:0;border-bottom:1px solid var(--line);color:var(--ink);font:300 20px/1.4 var(--f-display);padding:6px 0;border-radius:0}
.field:focus{outline:none;border-bottom-color:var(--ink)}
.field::placeholder{color:#B5B3AC}
.lbl{font-size:13px;color:var(--mute)}
#view{min-height:calc(100vh - var(--hdr-h) - 80px)}
#view > .view{animation:wrk-in .45s var(--ease-set) both}
@keyframes wrk-in{from{opacity:.0;transform:translateY(6px)}to{opacity:1;transform:none}}
.obj{display:block;width:100%;height:auto;overflow:visible}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* 10-objects.css */
/* wrk. objects. See the header of 10-objects.js for how to drive --ob-light and --ob-lift. */
@property --ob-light{syntax:'<number>';inherits:true;initial-value:.35}
@property --ob-lift{syntax:'<number>';inherits:true;initial-value:0}
.ob-defs{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.obj text{-webkit-user-select:none;user-select:none}
/* light crossing the gloss wordmark on the lid */
.ob-foil-glint{transform:translateX(calc(var(--ob-light,.35) * 114px))}
/* an object lifted off the paper: its shadow slides away, spreads and thins */
.ob-shadow-cast{transform-box:fill-box;transform-origin:50% 50%;transform:translate(calc(var(--ob-lift,0) * var(--ob-lx,4px)),calc(var(--ob-lift,0) * var(--ob-ly,6px))) scale(calc(1 + var(--ob-lift,0) * .04));opacity:calc(1 - var(--ob-lift,0) * .5)}
.ob-shadow-contact{opacity:calc(1 - var(--ob-lift,0))}

/* 20-home.css */
/* home: one line, one field, the box. Text on the right, the box on the left (RTL); stacked on phones with the text above. */
.hm{padding-block:clamp(22px,6vw,64px) clamp(36px,6vw,72px)}
.hm-hero{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;align-items:end}
.hm-say{display:grid;gap:18px;justify-items:start;min-width:0}
.hm-line{font-size:clamp(42px,12.4vw,54px);line-height:1.22;letter-spacing:-.01em}
.hm-line span{white-space:nowrap}
.hm-who{display:grid;gap:2px;width:min(100%,340px)}
.hm-name{font-size:22px}
.hm-price{font-size:14px;line-height:1.4}
.hm-price .num{font-size:16px;color:var(--ink)}

/* ---- the stage is the button; its height is reserved for the leaning lid so nothing moves when it opens ---- */
.hm-box{--k:.66;--ry:-24deg;--a:0;--b:0;position:relative;display:block;width:100%;max-width:780px;aspect-ratio:540/372;margin:0;padding:0;border:0;background:none;border-radius:14px;
  cursor:pointer;touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;justify-self:center;overflow:visible}
.hm-box.is-turning{cursor:grabbing}
.hm-box:focus-visible{outline-offset:-2px}
.hm-scene{position:absolute;left:46.5%;top:73.1%;width:0;height:0;display:block;pointer-events:none;
  transform:translateY(calc((var(--a)*.5 + var(--b)*.5 - 1)*var(--k)*38px))}   /* no perspective: a long lens, and type on the faces stays sharp. The frame eases down as the lid goes up */
.hm-rig,.hm-grp{position:absolute;left:0;top:0;display:block;transform-style:preserve-3d}
.hm-rig{transform:scale3d(var(--k),var(--k),var(--k)) rotateX(-26deg) rotateY(var(--ry))}
.hm-f{position:absolute;left:0;top:0;display:block;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-sizing:border-box}

/* outside, lit from the top-left: top lightest, front darker, the right side darkest */
.hm-front,.hm-right,.hm-left,.hm-back,.hm-top{backface-visibility:visible;-webkit-backface-visibility:visible}   /* a closed shell: whatever shows through a seam is black */
.hm-top{background:linear-gradient(152deg,#353538 0%,#27272a 40%,#1b1b1d 100%);overflow:hidden}
.hm-top::after,.hm-front::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 -.2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E")}
.hm-front{background:linear-gradient(180deg,#131314 0%,#0c0c0d 100%);box-shadow:inset 0 calc(1px*var(--q,1)) 0 rgba(255,255,255,.07)}
.hm-front::after{opacity:.3}
.hm-right{background:linear-gradient(180deg,#09090a 0%,#050506 100%);box-shadow:inset 0 calc(1px*var(--q,1)) 0 rgba(255,255,255,.035)}
.hm-left{background:#111112}
.hm-back{background:#0a0a0b}
/* the leaning lid turns its front wall to the sky */
.hm-lid .hm-front::before{content:"";position:absolute;inset:0;background:#fff;opacity:calc(var(--b)*.085)}
/* base: the 3 px that shows under the lid is the shadow line; it only sees light once the lid is away */
.hm-base .hm-front{background:linear-gradient(180deg,#111112 0%,#0a0a0b 100%)}
.hm-base .hm-front::before,.hm-base .hm-right::before{content:"";position:absolute;inset:0;background:#020202;opacity:calc(.92 - var(--a)*.92)}
.hm-rim{background:#252527}
.hm-rim.hm-rim-f{background:#1e1e20}
.hm-rim.hm-rim-r{background:#1b1b1d}
.hm-in{background:#0b0b0c}
.hm-in-left{background:#161618}
.hm-tray{background:var(--black-2);overflow:hidden}
.hm-tray-in{position:absolute;display:block;aspect-ratio:340/150}
.hm-tray-in > svg{position:absolute;inset:0;width:100%;height:100%}
.hm-pc{position:absolute;display:block}
.hm-pc svg{display:block;width:100%;height:auto;overflow:visible}
.hm-pc-card{filter:drop-shadow(.8px 1.2px 1px rgba(0,0,0,.55))}
.hm-tray-dark,.hm-tray-shade{position:absolute;inset:0;pointer-events:none}
.hm-tray-dark{background:#040404;opacity:calc(.82 - var(--b)*.82)}                         /* under the lid it is dark; light floods in as the lid swings away */
.hm-tray-shade{background:linear-gradient(168deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.16) 26%,rgba(0,0,0,0) 46%);opacity:var(--b)}

/* inside of the lid */
/* while the lid is on, nothing inside is drawn at all */
.hm-lin,.hm-tray,.hm-in,.hm-rim{visibility:hidden}
.hm-lifted .hm-lin,.hm-lifted .hm-tray,.hm-lifted .hm-in,.hm-lifted .hm-rim{visibility:visible}
.hm-lin-top{background:linear-gradient(196deg,#141416 0%,#1c1c1e 45%,#262629 100%);display:grid;place-items:center}
.hm-lin-back{background:#262628}
.hm-lin-front{background:#0d0d0e}
.hm-lin-left{background:#1b1b1d}
.hm-lin-right{background:#101011}
.hm-lrim{background:#161618}
.hm-hello{font:300 calc(8.5px*var(--q,1))/1 var(--f-display);color:#55555a;letter-spacing:0;direction:rtl}

/* gloss black on soft-touch black: darker than the lid until the light crosses it */
.hm-wm{position:absolute;left:50%;top:50%;transform:translate(-50%,-55%);font:200 calc(41px*var(--q,1))/1 var(--f-mark);letter-spacing:.01em;white-space:nowrap;direction:ltr;
  color:transparent;-webkit-background-clip:text;background-clip:text;
  background-image:linear-gradient(100deg,#0e0e0f 0%,#0e0e0f 40%,#56565b 46.5%,#b9b9bf 50%,#56565b 53.5%,#0e0e0f 60%,#0e0e0f 100%);
  background-size:300% 100%;background-position:var(--hl,88%) 0;background-repeat:no-repeat}
.hm-sheen{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(100deg,rgba(255,255,255,0) 36%,rgba(255,255,255,.055) 50%,rgba(255,255,255,0) 64%);
  background-size:300% 100%;background-position:var(--hl,88%) 0;background-repeat:no-repeat}

/* shadows on the paper: a tight contact line and a soft one falling to the front-right */
.hm-floor{position:absolute;left:0;top:0;width:0;height:0;display:block;transform:rotateX(90deg)}
.hm-sh{position:absolute;display:block;border-radius:3px}
.hm-sh-c{left:-218px;top:-94.5px;width:438px;height:191px;background:rgba(24,21,17,.8);filter:blur(3.5px);transform:translate(3px,3px)}
.hm-sh-s{left:-212px;top:-88px;width:452px;height:200px;background:rgba(24,21,17,.44);filter:blur(18px);transform:translate(30px,24px)}
.hm-sh-l{left:-221px;top:-97.5px;width:442px;height:195px;background:rgba(24,21,17,.5);filter:blur(22px);
  opacity:calc(var(--a)*(1 - var(--b))*.5);transform:translate(calc(var(--a)*30px),calc(var(--a)*24px))}
.hm-sh-p{left:-214px;top:-116px;width:486px;height:86px;background:rgba(24,21,17,.42);filter:blur(13px);opacity:var(--b)}

/* ---- the one row that leads onward ---- */
.hm-next{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 28px;margin-top:clamp(18px,4vw,34px)}
.hm-links{display:flex;align-items:center;gap:16px;font-size:15px}
.hm-links a{text-decoration:none;padding-block:10px;background:linear-gradient(var(--ink),var(--ink)) 100% calc(100% - 7px)/0 1px no-repeat;transition:background-size var(--t-move) var(--ease-set)}
.hm-links a:hover,.hm-links a:focus-visible{background-size:100% 1px}
.hm-links i{width:1px;height:15px;background:var(--line);flex:none}
.hm-add{flex:none}
@media (max-width:520px){ .hm-add{width:100%} .hm-links{width:100%;justify-content:center} }

@media (min-width:860px){
  .hm-hero{grid-template-columns:minmax(0,37fr) minmax(0,63fr);gap:0 12px}
  .hm-say{gap:26px;padding-bottom:9%}
  .hm-line{font-size:clamp(60px,6.4vw,78px);line-height:1.16}
  .hm-line span{display:block}
  .hm-name{font-size:24px}
  .hm-box{justify-self:start}
}

/* 30-pieces.css */
/* collection (القطع): the approved products page. A head, then a quiet grid of photos on the studio ground. */
.pc{padding-block:44px 80px;display:grid;gap:44px}
.pc-top{display:flex;gap:32px 56px;align-items:end;justify-content:space-between;flex-wrap:wrap}
.pc-h{font-size:clamp(44px,7vw,88px);line-height:1.08;font-weight:200}
.pc-sub{color:var(--mute);margin-top:10px}
.pc-namebox{display:grid;gap:4px;min-width:min(100%,300px);flex:0 1 340px}
.pc-namebox label{font-size:13px;color:var(--mute)}
.pc-namebox .field{width:100%}
.pc-hint{font-size:12px;color:var(--mute)}

.pc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.pc-tile{display:grid;gap:12px;text-decoration:none;color:inherit;min-width:0;align-content:start}
.pc-tile.is-wide{grid-column:span 2;grid-template-rows:1fr auto}
.pc-shot{position:relative;display:block;border-radius:20px;overflow:hidden;aspect-ratio:6/5;
  background:radial-gradient(120% 100% at 30% 22%,var(--stage-a) 0%,var(--stage-b) 78%)}
.pc-tile.is-wide .pc-shot{aspect-ratio:auto;height:100%;min-height:240px}
.pc-art{position:absolute;inset:16%;display:grid;place-items:center;transition:opacity .5s}
.pc-tile.is-wide .pc-art{inset:18% 14%}
.pc-art svg{display:block;max-width:100%;max-height:100%;width:auto;height:auto}
.pc-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0;
  transition:opacity .6s,transform 1.2s cubic-bezier(.2,.7,.2,1)}
.pc-shot.is-photo img{opacity:1}
.pc-shot.is-photo .pc-art{opacity:0}
.pc-tile:hover .pc-shot img{transform:scale(1.025)}
.pc-tile:focus-visible{outline:none}
.pc-tile:focus-visible .pc-shot{outline:1px solid var(--ink);outline-offset:4px}
.pc-cap{display:flex;align-items:baseline;gap:12px;padding-inline:4px}
.pc-cap b{font:300 22px/1.3 var(--f-display)}
.pc-kind{color:var(--mute);font-size:14px}
.pc-price{margin-inline-start:auto;font-size:15px;white-space:nowrap}

.pc-set{position:relative;display:block}
.pc-set > svg{display:block;width:100%;height:auto}
.pc-set-p{position:absolute}
.pc-set-p > svg{display:block;width:100%;height:auto}

@media (max-width:860px){
  .pc{padding-block:28px 64px;gap:28px}
  .pc-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .pc-tile.is-wide .pc-shot{aspect-ratio:12/7;height:auto;min-height:0}
  .pc-tile.is-last{grid-column:span 2}.pc-tile.is-last .pc-shot{aspect-ratio:12/5}
  .pc-cap{flex-wrap:wrap;gap:2px 10px}.pc-cap b{font-size:18px}.pc-kind{font-size:13px;flex-basis:100%;order:3}
}

/* 40-product.css */
/* product page. --pd-h is the height the object's side of the page takes. */
.pd{--pd-h:min(calc(100vh - var(--hdr-h) - 56px),640px);padding-block:28px 88px}
.pd-grid{display:grid;grid-template-columns:minmax(0,384px) minmax(0,1fr);grid-template-areas:"info stage";column-gap:72px;align-items:start}
.pd-stage{grid-area:stage;position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--hdr-h) + 20px);height:var(--pd-h);display:grid;place-items:center}
.pd-info{grid-area:info;padding-top:calc(var(--pd-h) * .13);min-width:0}

/* the flat lay */
.pd-lay{width:min(84%,calc(var(--pd-h) * .58 * var(--a)),calc(var(--w) * 4.6px));margin-bottom:28px}
.pd-is-kit .pd-lay{width:min(90%,calc(var(--pd-h) * .58 * var(--a)))}
.pd-fig{position:relative}
.pd-obj{display:block}
.pd-obj > svg,.pd-lid > svg,.pd-open svg{display:block;width:100%;height:auto;overflow:visible}
.pd-fig .ob-shadow{transform:translate(calc(var(--pd-lx,0) * -1.6px),calc(var(--pd-ly,0) * -1.6px));transition:transform .5s var(--ease-set)}

/* drawn to scale: the real millimetres, like the maker's drawing */
.pd-dim{position:absolute;color:var(--mute);font-size:12px;line-height:1;pointer-events:none}
.pd-dim .num{position:absolute;letter-spacing:.04em;white-space:nowrap}
.pd-dim-w{left:0;right:0;top:calc(100% + clamp(30px,5vw,46px));height:9px;border-inline:1px solid #C9C6BD;background:linear-gradient(#C9C6BD,#C9C6BD) 0 50%/100% 1px no-repeat}
.pd-dim-w .num{top:16px;left:50%;transform:translateX(-50%)}
.pd-dim-h{top:0;bottom:0;left:calc(-1 * clamp(20px,3.4vw,34px));width:9px;border-block:1px solid #C9C6BD;background:linear-gradient(#C9C6BD,#C9C6BD) 50% 0/1px 100% no-repeat}
.pd-dim-h .num{top:50%;right:15px;transform:translateY(-50%)}

/* a closer look at the name (only when it is too fine to read on the object) */
.pd-near{margin-top:clamp(74px,9vw,96px);height:clamp(84px,9vw,104px);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.pd-near > svg{display:block;width:100%;height:100%;overflow:hidden}

/* the kit: the lid lies on the tray; it lifts toward you and is gone */
.pd-kit{appearance:none;-webkit-appearance:none;border:0;background:none;padding:0;margin:0;display:block;position:relative;width:100%;aspect-ratio:340 / 150;cursor:pointer;border-radius:3px;-webkit-tap-highlight-color:transparent}
.pd-kit:focus-visible{outline-offset:8px}
.pd-open,.pd-lid{position:absolute;inset:0;display:block}
.pd-lid{transform-origin:50% 50%;--ob-lift:0;
  transition:transform var(--t-lid) var(--ease-lid),--ob-lift var(--t-lid) var(--ease-lid),opacity .4s ease}
.pd-kit.is-open .pd-lid{transform:translate(-1.2%,-4.5%) scale(1.085);opacity:0;pointer-events:none;--ob-lift:1;
  transition:transform var(--t-lid) var(--ease-lid),--ob-lift var(--t-lid) var(--ease-lid),opacity .5s ease .55s}
.pd-toggle{appearance:none;-webkit-appearance:none;border:0;background:none;padding:0 4px;min-height:44px;margin:clamp(58px,8vw,78px) auto 0;display:block;cursor:pointer;font-size:14px;color:var(--ink);
  text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:6px;transition:text-decoration-color var(--t-fast)}
.pd-toggle:hover{text-decoration-color:var(--ink)}
.pd-is-kit .pd-lay{margin-bottom:0}

/* the words */
.pd-word{font-size:clamp(50px,6.2vw,84px);line-height:1.22;letter-spacing:-.01em}
.pd-name{margin-top:6px;font-size:18px}
.pd-sub{margin-top:6px;font-size:15px;color:var(--mute);max-width:34ch}
.pd-price{margin-top:22px;font-size:22px;line-height:1.3}
.pd-price .num{font-weight:300;font-size:26px}

.pd-form{margin-top:30px;display:grid;gap:20px}
.pd-f{display:grid}
.pd-f .lbl{line-height:1.4}
.pd-area{resize:none;display:block;font-family:var(--f-display)}
.pd-ltr{font-family:var(--f-mark);text-align:right;font-size:21px}
.pd-date{font-size:18px;text-align:right;-webkit-appearance:none;appearance:none}
.pd-hint{margin-top:7px;font-size:12.5px;color:var(--mute)}
.pd-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* tiers: a hairline list; the marker is the dot */
.pd-tiers{border:0;padding:0;margin:30px 0 0;min-width:0;border-bottom:1px solid var(--line)}
.pd-tier{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"dot n p" "dot note p";column-gap:14px;align-items:center;min-height:62px;padding:9px 0;border-top:1px solid var(--line);cursor:pointer;position:relative}
.pd-tier input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.pd-dot{grid-area:dot;width:11px;height:11px;border-radius:50%;box-shadow:inset 0 0 0 1px #A9A69E;transition:background var(--t-fast),box-shadow var(--t-fast)}
.pd-tier input:checked ~ .pd-dot{background:var(--black);box-shadow:inset 0 0 0 1px var(--black)}
.pd-tier input:focus-visible ~ .pd-dot{outline:1.5px solid var(--ink);outline-offset:4px}
.pd-tier-n{grid-area:n;font-size:16px;line-height:1.4;align-self:end}
.pd-tier-note{grid-area:note;font-size:12.5px;color:var(--mute);line-height:1.4;align-self:start}
.pd-tier-p{grid-area:p;font-size:14px;color:var(--mute);transition:color var(--t-fast)}
.pd-tier input:checked ~ .pd-tier-p{color:var(--ink)}

.pd-add{margin-top:30px;width:100%;min-height:52px;font-size:16px}
.pd-pay{margin-top:14px;font-size:12.5px;color:var(--mute);text-align:center}
.pd-pay .num{letter-spacing:.01em}

.pd-spec{list-style:none;margin:48px 0 0;padding:0;border-bottom:1px solid var(--line)}
.pd-spec li{padding:11px 0;border-top:1px solid var(--line);font-size:14px;line-height:1.6}
.pd-spec .num{font-size:14.5px;letter-spacing:.02em}

.pd-nav{margin-top:44px;display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.pd-nav a{display:inline-flex;flex-direction:column;justify-content:flex-end;min-height:44px;text-decoration:none;font:300 18px/1.4 var(--f-display)}
.pd-nav a:last-child{text-align:left;align-items:flex-end}
.pd-nav small{font:300 12px/1.4 var(--f-body);color:var(--mute)}
.pd-nav .pd-all{font:300 13px/1.4 var(--f-body);color:var(--mute);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:5px;padding-bottom:3px}
.pd-nav a:hover{opacity:.7}

@media (max-width:899px){
  .pd{--pd-h:clamp(300px,46vh,400px);padding-block:0 56px}
  .pd-grid{display:block}
  .pd-stage{position:relative;top:auto;height:auto;min-height:var(--pd-h);padding-block:36px 8px}
  .pd-info{padding-top:8px;max-width:520px;margin-inline:auto}
  .pd-lay{width:min(80%,calc(var(--pd-h) * .56 * var(--a)),calc(var(--w) * 4.6px))}
  .pd-is-kit .pd-lay{width:80%}
  .pd-word{font-size:clamp(46px,13vw,60px)}
}

/* 45-studio.css */
/* wrk. studio toggle on the product page */
.st-turn{display:block;margin:14px auto 0;background:none;border:0;padding:6px 2px;font:300 13px/1.4 var(--f-body);color:var(--mute);text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--line);cursor:pointer}
.st-turn:hover{color:var(--ink);text-decoration-color:var(--ink)}
.pd-stage.st-on .pd-lay,.pd-stage.st-on .pd-toggle,.pd-stage.st-on .pd-near{display:none!important}
.st-box{position:relative;width:100%;aspect-ratio:4/3;max-height:70vh;cursor:grab;touch-action:pan-y}
.st-box.is-dragging{cursor:grabbing}
.st-wait{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--mute)}
.st-acts{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:6px}
.st-act{min-height:38px;padding:0 18px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink);font:300 14px/1 var(--f-body);cursor:pointer}
.st-act[aria-pressed="true"]{border-color:var(--ink);background:var(--stock)}
@media (max-width:600px){.st-box{aspect-ratio:1/1}}

/* 50-chrome.css */
/* ---------- header ---------- */
.ch-hdr{overflow-x:clip;position:sticky;top:env(safe-area-inset-top,0px);z-index:20;height:var(--hdr-h);background:rgba(243,242,238,.84);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.ch-bar{position:relative;height:100%;display:flex;align-items:center;justify-content:space-between;gap:12px}
.ch-mark{display:inline-flex;align-items:baseline;font-size:26px;line-height:1;color:var(--ink);flex:none}
.ch-home{position:relative;text-decoration:none;color:inherit;padding-right:2.5px}
.ch-home::after{content:"";position:absolute;inset:-12px 0 -12px -12px}
/* the full stop. A real button; its 44px target is the ::after. */
.ch-dot{position:relative;flex:none;width:6px;height:6px;padding:0;border:1.3px solid var(--mute);border-radius:50%;background:transparent;cursor:pointer;outline:none;
  transition:background-color .25s var(--ease-lid),border-color .25s var(--ease-lid),transform .3s var(--ease-set)}
.ch-dot::after{content:"";position:absolute;inset:-19px;border-radius:50%}
.ch-dot::before{content:"";position:absolute;inset:-3.5px;border-radius:50%;border:1.5px solid var(--ink);opacity:0;transition:opacity var(--t-fast)}
.ch-dot:focus-visible::before{opacity:1}
.ch-dot:hover{border-color:var(--ink)}
.ch-dot.is-full{background:var(--black);border-color:var(--black);transform:scale(1.1667)}
.ch-count{position:absolute;left:calc(100% + 4px);bottom:calc(100% + 3px);font:400 10.5px/1 var(--f-mark);font-style:normal;color:var(--ink);opacity:0;transform:translateY(2px);transition:opacity .2s,transform .3s var(--ease-set);pointer-events:none}
.ch-dot.is-full:hover .ch-count,.ch-dot.is-full:focus-visible .ch-count,.ch-dot.is-full.is-peek .ch-count{opacity:1;transform:none}

.ch-nav{display:flex;align-items:center;margin-inline-end:-12px}
.ch-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;font-size:14.5px;line-height:1;color:var(--mute);text-decoration:none;white-space:nowrap;transition:color var(--t-fast)}
.ch-nav a:hover,.ch-nav a[aria-current]{color:var(--ink)}
.ch-day{position:absolute;bottom:-5px;width:1px;height:5px;background:var(--ink);opacity:.55;margin-right:max(16px,env(safe-area-inset-right,0px));pointer-events:none}
.ch-day[hidden]{display:none}
@media (min-width:700px){ .ch-nav a{padding:0 16px;font-size:15px} .ch-nav{margin-inline-end:-16px} }

/* ---------- flight layer ---------- */
#fx{position:fixed;inset:0;z-index:60;pointer-events:none;overflow:hidden}
.ch-fly{position:fixed;will-change:transform}
.ch-fly-in{width:100%;height:100%;transform-origin:50% 50%;will-change:transform,opacity;filter:drop-shadow(6px 10px 10px rgba(17,17,18,.22))}
.ch-fly-in svg{display:block;overflow:visible}

/* ---------- cart ---------- */
.ch-cart{position:fixed;inset:0;z-index:40;visibility:hidden;pointer-events:none;transition:visibility 0s linear var(--t-move)}
.ch-cart.is-open{visibility:visible;pointer-events:auto;transition-delay:0s}
.ch-scrim{position:absolute;inset:0;background:rgba(243,242,238,.74);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;transition:opacity .4s var(--ease-lid)}
.ch-cart.is-open .ch-scrim{opacity:1}
.ch-panel{position:absolute;top:0;bottom:0;right:0;width:min(448px,100%);display:flex;flex-direction:column;background:var(--stock);border-left:1px solid var(--line);
  box-shadow:-30px 0 60px -40px rgba(17,17,18,.35);outline:none;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);padding-right:env(safe-area-inset-right,0px);
  transform:translateX(102%);transition:transform var(--t-move) var(--ease-lid)}
.ch-cart.is-open .ch-panel{transform:none}
.ch-p-head{flex:none;display:flex;align-items:center;justify-content:space-between;height:var(--hdr-h);padding:0 28px}
.ch-p-title{font:300 17px/1 var(--f-display)}
.ch-close{min-height:44px;padding:0 12px;margin-inline-end:-12px;border:0;background:none;font-size:13.5px;color:var(--mute);cursor:pointer}
.ch-close:hover{color:var(--ink)}
.ch-p-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:14px 28px 8px}
.ch-p-foot{flex:none;padding:16px 28px 22px;border-top:1px solid var(--line)}
.ch-p-foot[hidden]{display:none}

/* the box, from above */
.ch-stage{display:flex;flex-direction:column;gap:22px;padding:6px 10px 30px 14px;direction:ltr}
.ch-tray,.ch-box{position:relative;width:100%}
.ch-tray > svg,.ch-box > svg{position:absolute;inset:0;width:100%;height:100%}
.ch-box > svg,.ch-lid > svg,.ch-out > svg{filter:drop-shadow(7px 11px 10px rgba(17,17,18,.26))}
.ch-tray > svg{filter:drop-shadow(5px 8px 8px rgba(17,17,18,.2))}
.ch-in{position:absolute}
.ch-in svg{display:block}
.ch-in-card{z-index:2}
.ch-lid{position:absolute;inset:0;z-index:5;transform-origin:50% 50%;will-change:transform,opacity}
.ch-lid svg{position:absolute;inset:0;width:100%;height:100%}
.ch-beside{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 2%;direction:rtl}
.ch-out{flex:none}

.ch-done{min-height:0}
.ch-done-t,.ch-empty{font:300 17px/1.5 var(--f-display)}
.ch-done{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px}
.ch-done:not(:empty){padding-bottom:20px}
.ch-make{min-height:44px;padding:0 20px;border:0;border-radius:999px;background:transparent;box-shadow:inset 0 0 0 1px var(--ink);font:400 14px/1 var(--f-body);cursor:pointer;transition:background-color var(--t-fast),color var(--t-fast)}
.ch-make:hover{background:var(--black);color:var(--on-black)}
.ch-empty{color:var(--mute)}
.ch-empty a{color:var(--ink);text-underline-offset:5px;text-decoration-thickness:1px;margin-inline-start:6px;display:inline-block;padding:10px 0}

.ch-lines{list-style:none;margin:0;padding:0}
.ch-line{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(76px,auto);align-items:center;column-gap:8px;padding:14px 0;border-top:1px solid var(--line)}
.ch-l-what{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:9px;min-width:0}
.ch-l-word{font:300 17px/1.5 var(--f-display);text-decoration:none}
.ch-l-word:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.ch-l-ar{font-size:13px;color:var(--mute)}
.ch-l-for{flex-basis:100%;font-size:13px;color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch-l-qty{display:flex;align-items:center;direction:ltr}
.ch-l-qty button{width:40px;height:44px;padding:0;border:0;background:none;font:300 18px/1 var(--f-mark);color:var(--mute);cursor:pointer}
.ch-l-qty button:hover{color:var(--ink)}
.ch-l-qty .num{min-width:14px;text-align:center;font-size:15px}
.ch-l-price{text-align:end;font-size:14px;white-space:nowrap}
.ch-l-price .num{font-size:16px}

.ch-total{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:16px}
.ch-total-l{font-size:14px}
.ch-total-l small{font-size:12px;color:var(--mute);margin-inline-start:6px}
.ch-total-n{font-size:15px}
.ch-total-n .num{font-size:24px;font-weight:300}
.ch-pay{width:100%}
.ch-ways{margin-top:10px;text-align:center;font-size:12.5px;color:var(--mute);letter-spacing:.02em}
.ch-handoff{min-height:78px;display:flex;align-items:center;font-size:14px;color:var(--mute);outline:none}

@media (max-width:640px){
  .ch-panel{top:auto;left:0;right:0;width:100%;max-height:calc(100dvh - env(safe-area-inset-top,0px) - 44px);border-left:0;border-top:1px solid var(--line);border-radius:18px 18px 0 0;
    box-shadow:0 -30px 60px -40px rgba(17,17,18,.35);padding-top:0;padding-left:env(safe-area-inset-left,0px);transform:translateY(102%)}
  .ch-p-head{height:54px;padding:0 20px}
  .ch-p-body{padding:8px 20px 4px}
  .ch-p-foot{padding:14px 20px 18px}
  .ch-stage{padding:4px 6px 26px 8px;gap:18px}
}

/* ---------- footer ---------- */
.ch-ftr{border-top:1px solid var(--line);margin-top:72px;padding-bottom:env(safe-area-inset-bottom,0px)}
.ch-foot{display:flex;flex-wrap:wrap;align-items:center;column-gap:22px;row-gap:0;padding-top:14px;padding-bottom:18px;font-size:13px;color:var(--mute)}
.ch-foot > *{min-height:44px;display:inline-flex;align-items:center}
.ch-foot a{text-decoration:none;transition:color var(--t-fast)}
.ch-foot a:hover{color:var(--ink)}
.ch-f-mark{font-size:17px;color:var(--ink)}
.ch-clock{margin-right:auto;font-size:12px;letter-spacing:.04em;color:var(--mute);opacity:.8;white-space:pre}
@media (max-width:640px){ .ch-ftr{margin-top:56px} .ch-foot{column-gap:18px;padding-top:8px}
  .ch-clock{order:1} .ch-foot::after{content:"";flex-basis:100%;order:2} .ch-foot a{order:3} }

/* ---------- business stub ---------- */
.ch-b{padding-top:clamp(56px,12vh,120px);padding-bottom:40px}
.ch-b-h{font-size:clamp(34px,6.2vw,64px);line-height:1.25}
.ch-b-sub{margin-top:14px;font-size:17px}
.ch-b-obj{width:min(520px,86%);margin:clamp(40px,8vh,72px) 0 clamp(40px,8vh,72px);filter:drop-shadow(12px 18px 16px rgba(17,17,18,.28))}
.ch-b-note{font-size:13px;color:var(--mute)}