/* nila.css v7 (BRIEF-V7 section 2.2), prefix nb-. Umber-2 ground, off-white type.
   The niche is v6's arch and ledge (sections.css .nl-), 1.15 times the size, now in plaster, holding the product view of nila-stone.
   The strip: a native snap scroller by default; .nb-live (story.js, from 761 px under lx-live) clips it and moves the track sideways.
   The Nila blue is an object colour only: the swirl in the yoghurt and the paste of the mask (and the stone's own photograph). */
/* v7b: the ground is the dark chapters' one recipe (tokens.css --ground-dark) with the grain over it (light.css) */
.nb{position:relative;overflow:clip;background:var(--umber-2);background:var(--ground-dark);color:var(--off);padding-block:max(clamp(64px,8vw,120px),var(--chap-room)) clamp(64px,8vw,120px)}
.nb .sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.nb .label{color:rgba(251,247,238,.78)}
.nb h2,.nb h3{color:var(--off)}

/* the top band: the words, the niche */
.nb-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.nb-words h2{margin-top:12px;max-width:13ch}
.nb-sub{margin-top:20px;font-size:19px;line-height:1.5;color:rgba(251,247,238,.88);max-width:34ch}
.nb-stagecol{container-type:inline-size;display:flex;justify-content:center}
.nb-stage{--w:min(598px,calc(100vw - 2*var(--gutter) - 12px));position:relative;width:var(--w);height:calc(var(--w)*1.27 + 26px);flex:none}
@supports (width:1cqw){.nb-stage{--w:min(598px,92cqw)}}
.nb-niche{position:absolute;left:0;top:0;width:var(--w);height:calc(var(--w)*1.27);border-radius:calc(var(--w)/2) calc(var(--w)/2) 0 0;overflow:hidden;
  background:linear-gradient(180deg,var(--plaster) 0,var(--plaster-2) 100%);--lit-hi:.55;
  box-shadow:inset 0 26px 40px -20px rgba(42,29,21,.5),inset 0 -50px 60px -46px rgba(42,29,21,.32);color:var(--ink)}
.nb-pv{position:absolute;left:9%;right:9%;bottom:0;height:62%}
.nb .nb-pv .pv{position:absolute;left:50%;bottom:0;height:100%;width:auto;max-width:100%;aspect-ratio:var(--pv-w)/var(--pv-h);translate:-50% 0;margin:0}
.nb .nb-pv .pv-still{display:block;width:100%;height:100%;max-width:none;object-fit:contain;object-position:50% 100%;translate:var(--dx,0%) 0}
.nb .nb-pv .pv-canvas,.nb .nb-pv .pv-spin{position:absolute;inset:0;width:100%;height:100%}
.nb .nb-pv .pv-cap{position:absolute;left:0;right:0;top:-30px;margin:0;text-align:center;font-size:12px;line-height:18px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--ink-2)}
.nb .nb-pv .pv-cap:empty{display:none}
/* the plinth (light.css .plinth, shared with the ritual and the product stages): the lit top surface sits on the niche's floor,
   the line is its front edge, and here the front is the stone shelf, a darker face with a soft shadow below */
.nb-ledge.plinth{left:0;right:0;top:calc(var(--w) * 1.27 - var(--w) * .06);height:calc(var(--w) * .06);color:var(--ink)}
.nb-ledge.plinth::after{left:-5%;right:-5%;height:26px;border-radius:0 0 var(--r-sm) var(--r-sm);
  background:linear-gradient(180deg,rgba(251,247,238,.5) 0 1.5px,rgba(251,247,238,.12) 1.5px 7px,rgba(251,247,238,0) 7px),linear-gradient(180deg,var(--umber),#2e1f14);box-shadow:0 22px 26px -14px rgba(0,0,0,.55)}

/* the strip: seven cards */
.nb-strip{margin-top:clamp(56px,7vw,104px);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:none}
.nb-strip::-webkit-scrollbar{display:none}
.nb-track{list-style:none;margin:0;display:flex;gap:16px;width:max-content;padding:4px max(var(--gutter),calc((100% - var(--max)) / 2)) 8px}
.nb-card{flex:none;width:300px;scroll-snap-align:start;display:flex;flex-direction:column;border-radius:var(--r-lg);padding:14px 14px 22px;background:var(--umber);box-shadow:inset 0 0 0 1px rgba(251,247,238,.08)}
.nb-plate{position:relative;height:176px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;overflow:hidden;background:radial-gradient(ellipse 70% 62% at 50% 38%,var(--plaster),var(--plaster-2) 80%)}
.nb-n{align-self:flex-start;margin-top:16px;display:inline-grid;place-items:center;min-width:34px;height:34px;padding:0 9px;border-radius:var(--r-sm);background:var(--terracotta);color:var(--off);font-family:var(--font-display);font-size:19px;line-height:1;font-variation-settings:"SOFT" 40}
.nb-ct{margin-top:12px;font-size:28px;line-height:1.05}
.nb-cl{margin-top:8px;font-size:16px;line-height:1.5;color:rgba(251,247,238,.88)}
/* the small objects */
.nb-cut{display:block;width:auto;max-width:none;height:120px;translate:var(--dx,0%) 0}
.nb-plate .nb-stone{height:116px}
.nb-plate .nb-tall{height:150px;align-self:flex-end;margin-bottom:10px}
.nb-bowl{width:118px;height:118px;border-radius:50%;background:radial-gradient(circle at 50% 46%,var(--cream) 0 54%,#efe6d4 57% 61%,var(--off) 64%);box-shadow:0 12px 18px -8px rgba(42,29,21,.42),inset 0 -4px 8px rgba(42,29,21,.12)}
.nb-swirl{width:122px;height:122px;overflow:visible}
.nb-yog{fill:var(--cream);stroke:var(--off);stroke-width:6}
.nb-blue{fill:none;stroke:var(--nila);stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.nb-mask{width:96px;height:auto;overflow:visible}
.nb-paste{fill:#8492D8}
@supports (color:color-mix(in oklab,red,blue)){.nb-paste{fill:color-mix(in oklab,var(--nila) 55%,var(--cream))}}
.nb-towel{position:relative;width:132px;height:88px;border-radius:7px;background:linear-gradient(160deg,var(--off) 0,var(--steam) 70%);box-shadow:0 12px 18px -8px rgba(42,29,21,.42),inset 0 0 0 1px rgba(42,29,21,.08);rotate:-6deg}
.nb-towel i{position:absolute;left:0;right:0;height:7px;background:rgba(42,29,21,.13)}
.nb-towel i:first-child{top:16px}
.nb-towel i:last-child{bottom:16px}

/* under the strip: the stain card, the two tiles, the honest line */
.nb-bottom{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(16px,2.4vw,32px);margin-top:clamp(40px,5vw,72px);align-items:stretch}
.nb-stain{border-radius:var(--r-lg);padding:clamp(24px,3vw,40px);background:var(--terracotta);color:var(--off)}
.nb-stain h3{font-style:italic;font-weight:320;font-size:clamp(26px,2.6vw,36px);line-height:1.08}
.nb-stain ul{list-style:none;margin:20px 0 0;padding:0}
.nb-stain li{padding:11px 0;font-size:17px;line-height:1.5;border-top:1px solid rgba(251,247,238,.32)}
.nb-buy{display:flex;flex-direction:column;min-width:0}
.nb-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;flex:1 1 auto}
.nb-tile{display:flex;flex-direction:column;border-radius:var(--r-lg);padding:14px 14px 18px;background:var(--plaster);color:var(--ink)}
.nb-tile:focus-visible{outline:2px solid var(--off);outline-offset:3px}
.nb-tplate{display:flex;align-items:flex-end;justify-content:center;height:clamp(150px,15vw,210px);padding-bottom:14px;border-radius:var(--r);overflow:hidden;background:linear-gradient(180deg,var(--cream),var(--plaster-2));box-shadow:inset 0 -18px 0 -8px rgba(42,29,21,.08)}
.nb-tplate .nb-cut{height:80%}
.nb-tname{margin-top:14px;font-size:17px;line-height:1.25;font-weight:600}
.nb-tsub{margin-top:2px;font-size:15px;color:var(--ink-2)}
.nb-tprice{margin-top:auto;padding-top:8px;font-family:var(--font-display);font-size:26px;line-height:1.1;font-weight:360;font-variation-settings:"SOFT" 40}
.nb-honest{margin-top:16px;font-size:14px;line-height:1.5;color:rgba(251,247,238,.8)}
/* the hover: lift.js lifts the object in the plate (v7b 2.4) */

/* the live strip: clipped, the track moves (story.js); the cards grow with the screen so the pinned strip fills it */
.nb-live .nb-strip{overflow:clip;scroll-snap-type:none}
.nb-live .nb-track{will-change:transform}
.nb-live .nb-card{padding-bottom:28px}
.nb-live .nb-plate>*{transform-origin:50% 50%}
.nb-live .nb-plate .nb-tall{align-self:center;margin-bottom:0}
@media (min-width:761px) and (min-height:680px){.nb-live .nb-plate{height:236px}.nb-live .nb-plate>*{scale:1.3}}
@media (min-width:761px) and (min-height:820px){.nb-live .nb-plate{height:300px}.nb-live .nb-plate>*{scale:1.62}}

@media (max-width:860px){
  .nb-top{grid-template-columns:minmax(0,1fr);gap:40px}
  .nb-words h2{max-width:none}
}
@media (max-width:760px){
  .nb-sub{font-size:17px}
  .nb-card{width:min(300px,78vw)}
  .nb-bottom{grid-template-columns:minmax(0,1fr)}
  .nb-stain li{font-size:16px}
}
@media (max-width:420px){.nb-tplate{height:140px}.nb-tile{padding:12px 12px 16px}.nb-tprice{font-size:23px}}

/* v7b: the runway story.js wraps round the strip from 761 px under lx-live; the strip holds with sticky inside it */
.nb-run{position:relative}
.nb-live .nb-strip{position:sticky}