/* light.css v7b (BRIEF-V7B sections 2.1, 2.2, 2.5, 2.6, 2.7): one light for the whole site, the grain, the shared shadows,
   the plinth, the carried product (view transitions), the header tint, the chapter numerals, the type, the focus rings.
   The lamp of the film is the light: warm, from the upper left (--light-x, --light-y in tokens.css), umber falling to ink.
   Loads after base.css and before the chapter files (the build sorts the rest by name), so where a chapter file still sets
   something below, the rule here carries one more class. */

/* ---------- the page ---------- */
html{scrollbar-gutter:stable}

/* ---------- .lit: any stage panel (2.1, 2.2) ----------
   Over the panel's own ground: a radial highlight at the light, a gentle vignette towards the lower right, and the plaster
   grain. Both layers sit under the panel's content (isolation and a negative z-index), so type is never grained.
   lift.js shifts the highlight a few percent towards the pointer with --lsx and --lsy (a translate, no repaint). */
.lit{position:relative;isolation:isolate;overflow:clip}
.lit::before,.lit::after{content:"";position:absolute;pointer-events:none;z-index:-1;border-radius:inherit}
.lit::before{inset:-4%;translate:var(--lsx,0%) var(--lsy,0%);background:
  radial-gradient(ellipse 62% 56% at var(--light-x) var(--light-y),rgb(var(--light-warm) / var(--lit-hi,.36)),rgb(var(--light-warm) / 0) 72%),
  radial-gradient(ellipse 90% 80% at 104% 108%,rgb(var(--shade) / var(--lit-vig,.2)),rgb(var(--shade) / 0) 64%)}
.lit::after{inset:0;background:var(--grain) 0 0/256px 256px repeat;mix-blend-mode:soft-light;opacity:var(--grain-o,.42)}
/* dark grounds take less highlight and a little less grain; the brightest grounds a little more of both */
.lit:is(.tn-umber,.tn-umber-2,.t-umber,.tn-terracotta-2,.t-terracotta-2){--lit-hi:.14;--lit-vig:.3;--grain-o:.34}
.lit:is(.tn-terracotta,.t-terracotta){--lit-hi:.06;--lit-vig:.26;--grain-o:.24}
html.lx-live .lit::before{transition:translate .5s var(--ease)}
html.lx-live .lit.is-lifting::before{transition:translate .18s linear}

/* the big panels that are not .lit carry the grain too: the same tile under the content, above the section's own ground */
:is(.rt,.og,.rs,.shop,.fy,.gd,.fq,.nb,.site-footer){position:relative;isolation:isolate}
.hm-ground{isolation:isolate}
:is(.rt,.og,.rs,.shop,.fy,.gd,.fq,.nb,.site-footer)::after,.hm-ground::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--grain) 0 0/256px 256px repeat;mix-blend-mode:soft-light;opacity:.36}
:is(.nb,.site-footer)::after,.hm-ground::after{opacity:.3}

/* ---------- the dark chapters: one ground (2.1) ---------- */
.nb{background:var(--ground-dark)}
.site-footer{background:var(--ground-dark)}
.hero-film .film-stage:not(.no-film){background:var(--ground-dark)}

/* ---------- every object, one set of shadows (2.1) ----------
   The jar on the ritual stage and the same jar on its product page stand on the floor the same way. */
.pv-still,.pv-spin canvas,img.cut,.nb-cut,.rs-cut,.pd-plate-cut,.nb-swirl,.nb-mask{filter:var(--shadow-contact) var(--shadow-cast) var(--shadow-ambient)}
.rt-pv .pv-still,.nb .nb-pv .pv-still,.pd-stage .pv-still{filter:var(--shadow-contact) var(--shadow-cast) var(--shadow-ambient)}
/* the lift (lift.js, desktop hover under lx-live): the object rises and turns, the contact loosens, the cast grows */
html.lx-live [data-lift-obj]{transition:transform .5s var(--ease),filter .4s var(--ease);transform-origin:50% 100%}
html.lx-live .is-lifting [data-lift-obj]{transition:transform .16s linear,filter .4s var(--ease)}
html.lx-live [data-lift-obj]:is(img,.gift-card),html.lx-live [data-lift-obj] :is(.pv-still,img){transition:filter .4s var(--ease)}
html.lx-live .is-lifting img[data-lift-obj],html.lx-live .is-lifting [data-lift-obj] :is(.pv-still,img){filter:var(--shadow-contact-up) var(--shadow-cast-up) var(--shadow-ambient)}

/* ---------- the plinth: one design for the ritual stage, the Nila niche and the product stage (2.7) ----------
   A soft lit top surface (a band above the line, brighter towards the light) and a thin line, with the front of the table
   falling into shade below it. The stage sets --plinth-y (the line, from its top) and may set --plinth-d (the band's depth). */
.plinth{position:absolute;left:0;right:0;z-index:1;top:calc(var(--plinth-y,72%) - var(--plinth-d,8%));height:var(--plinth-d,8%);pointer-events:none;opacity:1;
  background:radial-gradient(ellipse 70% 140% at var(--light-x) 100%,rgb(var(--light-warm) / .3),rgb(var(--light-warm) / 0) 72%),linear-gradient(180deg,rgb(var(--light-warm) / 0),rgb(var(--light-warm) / .12))}
.plinth::after{content:"";position:absolute;left:0;right:0;top:100%;height:var(--plinth-front,140px);background:
  linear-gradient(180deg,color-mix(in srgb,currentColor 34%,transparent) 0 1.5px,rgb(var(--shade) / .14) 1.5px,rgb(var(--shade) / 0) 100%)}

/* ---------- the carried product (2.5): cross-document view transitions ---------- */
@view-transition{navigation:auto}
.pd-stage{view-transition-name:ground}
.pd-stage .pv{view-transition-name:var(--vt)}
.pd-stage .pd-gift .gift-card{view-transition-name:var(--vt)}
::view-transition-group(*){animation-duration:.55s;animation-timing-function:cubic-bezier(.2,.7,.1,1)}
::view-transition-old(root),::view-transition-new(root){animation-duration:.25s}
::view-transition-old(ground),::view-transition-new(ground){height:100%;object-fit:cover}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* ---------- the header tints with the chapter under it (2.6) ---------- */
.site-header{transition:transform .35s var(--ease),box-shadow .35s,background-color .3s var(--ease),color .3s var(--ease)}
.site-header .home{display:grid}
.site-header .home>.mark{grid-area:1/1;transition:opacity .3s var(--ease)}
.site-header .mark-white{opacity:0}
.site-header[data-tint="dark"]{background-color:var(--umber-2);color:var(--off)}
.site-header[data-tint="dark"] .mark-ink{opacity:0}
.site-header[data-tint="dark"] .mark-white{opacity:1}
.site-header[data-tint="dark"].tuck{box-shadow:0 1px 0 rgba(251,247,238,.12)}
.site-header[data-tint="dark"] nav a:hover{border-bottom-color:var(--off)}
.site-header[data-tint="dark"] .btn.ink{background:var(--off);color:var(--ink)}
.site-header[data-tint="dark"] .menu-btn{box-shadow:inset 0 0 0 1.5px var(--off)}
.site-header[data-tint="dark"] .menu-panel{color:var(--ink)}
.site-header .menu-btn{box-shadow:inset 0 0 0 1.5px currentColor}
.site-header[data-tint="light"]{background-color:var(--plaster);color:var(--ink)}
.page-product .site-header[data-tint="light"]{background-color:var(--plaster-2)}
@media (prefers-reduced-motion:reduce){.site-header,.site-header .home>.mark{transition:none}}

/* ---------- the chapter numerals (2.6) ----------
   Set into the chapter's ground at low contrast, top left: umber on the light grounds at 10 percent, off-white on the dark ones
   at 8 percent. story.js moves them at 0.85 of the page's speed under lx-live. */
.chap-num{position:absolute;left:max(var(--gutter),calc((100% - var(--max)) / 2));top:clamp(10px,2vw,28px);z-index:0;margin:0;pointer-events:none;user-select:none;
  font-family:var(--font-display);font-style:italic;font-weight:300;font-size:clamp(96px,7vw,200px);line-height:.8;letter-spacing:-.05em;
  font-variation-settings:"SOFT" 100,"WONK" 1;color:rgb(74 50 34 / .1)}
[data-header="dark"]>.chap-num,.hm .chap-num{color:rgb(251 247 238 / .08)}
html.lx-live .chap-num{will-change:transform}
/* the room each numbered chapter keeps above its head for the numeral (its height plus its top) */
:root{--chap-room:calc(clamp(96px,7vw,200px) * .8 + clamp(10px,2vw,28px) + 14px)}
@media (max-width:760px){:root{--chap-room:calc(18vw * .8 + 22px)}}
/* under the content, above the section's ground and grain */
:is(.rt,.nb,.rs,.shop,.og)>.chap-num{z-index:-1}
.hm .chap-num{position:absolute;z-index:10;top:calc(var(--gutter) + 76px)}
@media (max-width:760px){.chap-num{font-size:18vw;top:10px}.hm .chap-num{top:20px}}

/* ---------- typography with intent (2.6) ---------- */
:where(h1,h2,h3,.display){text-wrap:balance;font-optical-sizing:auto}
:where(p,li,dd){text-wrap:pretty}
:where(main,section,footer,aside) :where(p){max-width:62ch}
:where(.rt-sub,.nb-sub,.rs-sub,.og-intro,.og-sub,.hm-line,.shop-line,.fy-sub,.pd-sub){max-width:46ch}
/* the italic accents in the soft cut */
.accent,em.accent,h1 em,h2 em{font-variation-settings:"SOFT" 100}

/* ---------- focus rings on every ground (2.7) ---------- */
:focus-visible{outline:2px solid var(--terracotta-2);outline-offset:3px}
:is(.nb,.hm,.site-footer,.hero-film,.tn-umber,.tn-umber-2,.tn-terracotta,.tn-terracotta-2,.t-umber,.t-terracotta,.t-terracotta-2,.fy-tile,[data-tint="dark"]) :focus-visible{outline-color:var(--off)}
.tn-terracotta :focus-visible,.t-terracotta :focus-visible,.tn-terracotta-2 :focus-visible{outline-color:var(--off)}
.shop-stage:focus-visible,.pd-pair:focus-visible,.nb-tile:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.nb .nb-tile:focus-visible{outline-color:var(--off)}

/* ---------- the find tiles take the one light (their markup is not L's, so by selector) ---------- */
.fy .fy-tile .fy-wall{background:
  radial-gradient(ellipse 70% 60% at var(--light-x) var(--light-y),rgb(var(--light-warm) / var(--light,.3)),rgb(var(--light-warm) / 0) 70%),
  radial-gradient(ellipse 90% 80% at 104% 108%,rgb(var(--shade) / .22),rgb(var(--shade) / 0) 64%),var(--wall)}
.fy .fy-tile .fy-prod img{filter:var(--shadow-contact) var(--shadow-cast) var(--shadow-ambient)}
.fy .fy-tile .fy-shadow{opacity:.55}