/* =================================================================
   SHREE KALAS — THE WORLD (page side)

   assets/js/world.js draws one continuous 2.5D world on a fixed
   canvas; this file is everything the page does over it: the
   masthead box and its scatter, the left rail it scatters into, the
   station title zones, and the rule that chapters are transparent so
   the world shows through while the card bands are opaque paper.

   Geometry follows Editions Winter '26 as measured: 20% left gutter
   for the rail from 940px, giant word 220px at ≥1680, standfirst 48px
   with a 120px script cap, paper #f7f7ee cutting through the dark.
   ================================================================= */

/* ---- the canvas ---- */
.sk-world{
  position:fixed;inset:0;z-index:0;
  overflow:hidden;
  pointer-events:none;
  background:var(--sk-invert-bg);
}
.sk-world canvas{display:block;width:100%;height:100%}

/* no WebGL / reduced motion: the workshop still, held */
html.sk-world-static .sk-world{
  background:var(--sk-poster) center/cover no-repeat, var(--sk-invert-bg);
}

/* ---- the lathe rings ----
   Copper hairlines over the scene, centred a little right of the
   middle where the subject usually sits; world.js turns each group
   with the scroll (--a, degrees). Paper bands cover them by z-order. */
/* no blend mode and no filters here: both force the compositor to
   re-blend a full-viewport layer every frame */
.sk-rings{
  position:absolute;inset:0;
  width:100%;height:100%;
  opacity:.55;
  transform:translateX(6%);
}
.sk-rings g{
  transform:rotate(calc(var(--a, 0deg) * var(--r, 1)));
  transform-origin:0 0;
  will-change:transform;
}
.sk-rings circle{
  fill:none;
  stroke:var(--sk-copper-lt);
  stroke-width:1;
  vector-effect:non-scaling-stroke;
  opacity:.5;
}
.sk-rings .sk-rings-dot{fill:#ffd9a0;stroke:none;opacity:.95}
html.sk-world-static .sk-rings{display:none}
@media(max-width:860px){.sk-rings{opacity:.4}}

/* the edges are always seated, whatever the scene is doing */
.sk-world::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg, rgba(12,10,8,.55) 0%, transparent 26%, transparent 74%, rgba(12,10,8,.55) 100%),
    linear-gradient(180deg, rgba(12,10,8,.5) 0%, transparent 18%, transparent 80%, rgba(12,10,8,.6) 100%);
}

/* ---- the page over the world ---- */
.sk-body{background:var(--sk-invert-bg)}
.sk-home,
.sk-main{position:relative;z-index:1}

.sk-ch{background:transparent;color:var(--sk-invert-ink)}
.sk-ch .sk-ch-narr{color:var(--sk-invert-ink)}
.sk-ch .sk-rule{background:var(--sk-invert-line)}
.sk-breakout--panel,
.sk-breakout--deep,
.sk-breakout--dust{color:var(--sk-ink)}

/* inner pages keep a solid paper ground */
.sk-page-ground{position:relative;z-index:1;background:var(--sk-paper);color:var(--sk-ink)}
.sk-body--paper{background:var(--sk-paper);color:var(--sk-ink)}
.sk-body--paper .sk-ch{color:var(--sk-ink)}
.sk-body--paper .sk-ch .sk-ch-narr{color:var(--sk-ink)}
.sk-body--paper .sk-ch .sk-rule{background:var(--sk-rule)}

/* =================================================================
   THE GUTTER
   From 940px the home keeps Editions' left 20% for the rail and sets
   everything else in the right 80%.
   ================================================================= */
:root{--sk-rail-on:0;--sk-gutter-w:0px}
/* The left rail (and the 20% column it kept) was taken out on 28 Aug:
   the gutter stays 0 at every width, bands run full-bleed. */

/* =================================================================
   THE MASTHEAD
   A 190vh section whose first screen is sticky: the boxed title,
   tagline and index sit centred over the workshop; the next 90vh of
   scroll flies the title and index to the rail (world.js writes --p
   and the transforms) while the rest of the box fades.
   ================================================================= */
/* 200svh: the sticky screen holds for 100svh, comfortably past the
   90svh scatter, so the box never scrolls away mid-flight */
.sk-mast{position:relative;min-height:200svh}
.sk-mast-sticky{
  position:sticky;top:0;
  height:100svh;
  display:grid;place-items:center;
  padding:5rem var(--sk-page-pad) 3rem;
}
/* the grid cell shrink-wraps its child, so the width lives on the wrapper */
.sk-mast-sticky > div{width:min(35rem, 100%)}
.sk-mast-box{
  --p:0;
  position:relative;
  width:100%;
  min-height:min(46rem, 78svh);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:1.5rem 1.5rem 1.375rem;
  color:var(--sk-invert-ink);
}
/* the hairline frame fades as the box scatters */
.sk-mast-box::before{
  content:"";position:absolute;inset:0;
  border:1px solid rgba(244,240,230,.6);
  opacity:calc(1 - var(--p));
  pointer-events:none;
}
/* a soft pool of dark behind the box so the tagline holds over the fire */
.sk-mast-box::after{
  content:"";position:absolute;inset:-6rem -8rem;
  background:radial-gradient(55% 55% at 50% 50%, rgba(20,17,13,.5), transparent 70%);
  opacity:calc(1 - var(--p));
  pointer-events:none;
}
.sk-mast-box [data-fly]{position:relative;will-change:transform;z-index:1}
.sk-mast-box .sk-mast-tag{position:relative;z-index:1}
/* the box says it; the top bar need not */
.home-template .sk-nav-edition{display:none}
.sk-mast-fade{opacity:calc(1 - var(--p) * 1.6)}

/* the edition title — identical in the box and on the rail, so the
   flight lands 1:1 */
.sk-edition-title{
  margin:0;
  font-family:var(--sk-font-head);
  font-weight:700;
  /* 32px at ≥1680 (Editions' headline-4); narrower so the three lines
     clear the rail column down to 940px */
  font-size:clamp(1.5rem, .6rem + 1.4vw, 2rem);
  line-height:.95;
  letter-spacing:-.03em;
}
.sk-edition-title span{display:block;white-space:nowrap}
.sk-edition-title em{font-style:normal;color:var(--sk-copper-lt)}

.sk-mast-tag{
  margin:0;
  max-width:22ch;
  font-family:var(--sk-font-narr);
  font-size:1.375rem;
  line-height:1.05;
  letter-spacing:-.02em;
  text-wrap:pretty;
}

/* the index — again shared with the rail */
.sk-index{
  list-style:none;margin:0;padding:0;
  width:12.5rem;
  font-family:var(--sk-font-head);
  font-weight:700;
  font-size:1.125rem;
  line-height:1;
  letter-spacing:-.02em;
}
.sk-index li + li{margin-top:.1875rem}
.sk-index a{
  display:flex;align-items:baseline;gap:.5rem;
  color:inherit;text-decoration:none;
  opacity:.92;
  transition:opacity .25s var(--sk-ease);
}
.sk-index a:hover{opacity:1}
.sk-index a span{flex:none}
/* the dotted leader: only the active chapter draws it */
.sk-index a::before{
  content:"";
  order:2;flex:1;
  border-bottom:1px dotted currentColor;
  opacity:0;
  transform:translateY(-.3em);
  transition:opacity .3s var(--sk-ease);
}
.sk-index a.is-active::before{opacity:.7}
.sk-index a i{
  order:3;flex:none;
  font-style:normal;
  font-family:var(--sk-font-narr);
  font-weight:400;
  font-size:.8125rem;
  letter-spacing:0;
  opacity:.75;
}

/* ---- the hero chrome ----
   Before the scroll reaches the range there is no top bar: only the
   lockup, top-left, and two fixed actions at the foot. Both hand over
   to the bar (html.sk-scrolled, set by world.js at the range). */
.sk-hero-logo{
  position:fixed;top:1.25rem;left:var(--sk-page-pad);z-index:70;
  display:block;
  transition:opacity .4s var(--sk-ease), transform .5s var(--sk-ease);
}
.sk-hero-logo img{display:block;height:5rem;width:auto;filter:drop-shadow(0 2px 10px rgba(0,0,0,.45))}
.sk-hero-actions{
  position:fixed;right:var(--sk-page-pad);top:1.75rem;z-index:70;
  display:flex;flex-wrap:wrap;gap:.75rem;
  transition:opacity .4s var(--sk-ease), transform .5s var(--sk-ease);
}
.sk-hero-actions .sk-action{background:var(--sk-paper);border-color:var(--sk-paper);color:var(--sk-ink)}
.sk-hero-actions .sk-action:hover{background:var(--sk-copper);border-color:var(--sk-copper);color:#fff}
.sk-hero-actions .sk-action--ghost{background:rgba(20,17,13,.35);border-color:rgba(244,240,230,.6);color:var(--sk-invert-ink);backdrop-filter:blur(6px)}
.sk-hero-actions .sk-action--ghost:hover{background:var(--sk-paper);border-color:var(--sk-paper);color:var(--sk-ink)}
html.sk-scrolled .sk-hero-logo,
html.sk-scrolled .sk-hero-actions{opacity:0;pointer-events:none;transform:translateY(-.5rem)}
html.sk-scrolled .sk-hero-actions{transform:translateY(.5rem)}
@media(max-width:859px){
  .sk-hero-actions{display:none}          /* the thumb bar carries both */
  .sk-hero-logo img{height:3.5rem}
}

/* =================================================================
   THE MAKING — stages of the hero sequence
   Each stage is a screen of scroll whose station plays (or scrubs)
   its clip in the world; the caption sits at the foot, in the column.
   ================================================================= */
.sk-stage{
  position:relative;
  min-height:120svh;
  display:flex;align-items:flex-start;
  /* the station rests when the section's centre is at the viewport
     centre; 66svh down puts the caption in the lower third then */
  padding:66svh var(--sk-page-pad) clamp(2rem, 8vh, 5rem);
  color:var(--sk-invert-ink);
}
/* a pool of dark under the caption — the plates behind can be bright gold */
.sk-stage::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(42% 55% at 30% 78%, rgba(20,17,13,.78), transparent 72%),
    linear-gradient(180deg, transparent 40%, rgba(20,17,13,.55) 100%);
  pointer-events:none;
}
.sk-stage-cap{
  position:relative;
  max-width:34ch;
  padding:1.25rem 0 0;
  border-top:1px solid rgba(244,240,230,.35);
}
.sk-stage-cap .sk-eyebrow{margin-bottom:.75rem;color:var(--sk-copper-lt)}
.sk-stage-cap p{
  margin:0;
  font-family:var(--sk-font-narr);
  font-size:var(--sk-t-narr);
  line-height:var(--sk-lh-narr);
  letter-spacing:var(--sk-ls-narr);
  text-wrap:pretty;
}
.sk-mast-actions .sk-action{background:var(--sk-paper);border-color:var(--sk-paper);color:var(--sk-ink)}
.sk-mast-actions .sk-action:hover{background:var(--sk-copper);border-color:var(--sk-copper);color:#fff}
.sk-mast-actions .sk-action--ghost{background:transparent;border-color:rgba(244,240,230,.55);color:var(--sk-invert-ink)}
.sk-mast-actions .sk-action--ghost:hover{background:var(--sk-paper);border-color:var(--sk-paper);color:var(--sk-ink)}

/* the page still has a heading for readers and robots */
.sk-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* once scattered the box is out of the way of the page */
html.sk-scattered .sk-mast-box{visibility:hidden}
html.sk-scattered .sk-mast-actions{visibility:hidden}

@media(max-width:939px){
  .sk-mast{min-height:150svh}
  .sk-mast-box{min-height:min(36rem, 58svh)}
}
/* the thumb bar already carries Enquire + Catalogue on phones; the
   box sits between the top bar and that bar */
@media(max-width:859px){
  .sk-mast-actions{display:none}
  .sk-mast-sticky{padding:6rem var(--sk-page-pad) 6.5rem}
}

/* =================================================================
   THE RAIL
   Editions' left column: the edition title at the top, the chapter
   index at the bottom. Laid out from the start (so the scatter can
   measure its targets) but invisible until the scatter has landed.
   Inverts over paper bands.
   ================================================================= */
.sk-rail{
  position:fixed;left:var(--sk-page-pad);top:6.25rem;bottom:2.5rem;z-index:60;
  display:none;flex-direction:column;justify-content:space-between;
  width:12.5rem;
  color:var(--sk-invert-ink);
  visibility:hidden;opacity:0;
  pointer-events:none;
  transition:opacity .5s var(--sk-ease), color .4s var(--sk-ease);
}
@media(min-width:940px){.sk-rail{display:flex}}
html.sk-scattered .sk-rail{visibility:visible;opacity:1;pointer-events:auto}
/* the rail column is always the dark world (bands are the right 80%),
   so the rail never inverts */
.sk-rail .sk-index a{opacity:.55}
.sk-rail .sk-index a:hover,
.sk-rail .sk-index a.is-active{opacity:1}
.sk-rail-foot{
  margin-top:1.25rem;
  font-family:var(--sk-font-ui);
  font-size:.6875rem;
  line-height:1.5;
  opacity:.55;
}
.sk-rail-foot a{color:inherit;text-decoration:none}

/* =================================================================
   THE STATIONS
   A title zone over the world: the word left on the column, the
   standfirst under it in 55% of the column, both on a soft scrim so
   the numbers hold whatever the scene is doing behind.
   ================================================================= */
.sk-home .sk-ch-head{
  position:relative;
  min-height:110svh;
  justify-content:center;
  gap:clamp(2rem, 6vh, 4.5rem);
}
.sk-home .sk-ch-head::before{
  content:"";position:absolute;inset:-4rem -100vw -4rem -100vw;
  z-index:-1;
  background:
    radial-gradient(70% 60% at 38% 50%, rgba(20,17,13,.62), transparent 72%),
    linear-gradient(180deg, transparent 0%, rgba(20,17,13,.35) 50%, transparent 100%);
  pointer-events:none;
}
.sk-home .sk-ch-head .sk-ch-narr{margin-left:0;width:auto;max-width:34ch}
@media(min-width:940px){
  .sk-home .sk-ch-head .sk-ch-narr{max-width:min(34ch, 55%)}
}
.sk-home .sk-ch-index{color:var(--sk-invert-ink)}

/* the closing chapter holds the last diorama under the actions */
.sk-ch--close .sk-ch-head{min-height:100svh}

/* ---- Lenis ---- */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:clip}
.lenis.lenis-smooth iframe{pointer-events:none}