/* =================================================================
   SHREE KALAS — THE EDITIONS LAYER

   A printed catalogue that scrolls. The Shopify Editions Winter '26
   architecture — fixed 20% rail, right 80% column, 140svh title
   zones, full-bleed breakout bands — on a bone editorial ground.

   Carried by type, hairlines, space and the client's own product
   photography — cut from their catalogue sheets and normalised onto
   identical 4:5 plates so the range reads as one grid. The earlier
   stock (museum-case snapshots of tarnished pots) is gone; a plate
   with no photograph shows the piece's initial rather than filler.

   The authored motion moment is the linework: rules and frames draw
   themselves on as sections arrive, and the giant word recedes as
   its cards rise. Nothing else moves.
   ================================================================= */

/* =================================================================
   0. GROUND + BROWSER SURFACES
   The parts we didn't draw still carry the design.
   ================================================================= */
.sk-body{
  background:var(--sk-paper);
  color:var(--sk-ink);
  font-family:var(--sk-font-ui);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  caret-color:var(--sk-copper);
}
.sk-home{overflow:clip}

::selection{background:var(--sk-copper);color:#fff}

/* numerals that sit in columns must not jitter */
.sk-rail-num,.sk-card-spec,.sk-facet-count,.sk-moq,
input[type="number"],td{font-variant-numeric:tabular-nums}

/* the scrollbar is part of the page, not the browser */
@supports (scrollbar-color: auto){
  .sk-body{scrollbar-color:var(--sk-rule) transparent;scrollbar-width:thin}
}
.sk-body::-webkit-scrollbar{width:10px;height:10px}
.sk-body::-webkit-scrollbar-track{background:var(--sk-paper)}
.sk-body::-webkit-scrollbar-thumb{background:var(--sk-rule);border:3px solid var(--sk-paper)}
.sk-body::-webkit-scrollbar-thumb:hover{background:var(--sk-muted)}

a{text-underline-offset:.18em;text-decoration-thickness:1px}

/* Cap-height trimming is what lets the giant words sit flush against
   their rules. Progressive; costs nothing where unsupported. */
@supports (text-box: trim-both cap alphabetic){
  .sk-ch-word,.sk-hero-title,.sk-ch-sub,.sk-card-title,.sk-display{
    text-box:trim-both cap alphabetic;
  }
}

/* =================================================================
   1. THE CHAPTER SHELL
   ================================================================= */
.sk-ch{
  position:relative;
  overflow-x:clip;   /* sideways only: the torn band edges cross the section box */
  background:var(--sk-paper);
  color:var(--sk-ink);
}
.sk-ch--deep{background:var(--sk-paper-deep)}
.sk-ch--dust{background:var(--sk-paper-dust)}
.sk-ch--invert{background:var(--sk-invert-bg);color:var(--sk-invert-ink)}
.sk-ch--invert .sk-ch-head .sk-ch-narr{color:var(--sk-invert-ink)}

/* The canvas. Was a right-hand 80% column offset by a fixed rail;
   with the navigation moved to the top there is no gutter to clear,
   so content is centred and the page reads across its full width. */
.sk-ch-col{
  position:relative;
  width:100%;
  max-width:var(--sk-maxw);
  margin-inline:auto;
  padding-inline:var(--sk-page-pad);
}

/* =================================================================
   2. THE TITLE ZONE
   140svh of near-empty page. The word is the only thing in it and
   the standfirst sits at the bottom behind a rule — the air is the
   point, and it is exactly what the first build got wrong.
   ================================================================= */
.sk-ch-head{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:clamp(2.5rem, 7vh, 6rem);
  min-height:var(--sk-chapter-min-sm);
  padding-block:var(--sk-pad-y);
}
@media(min-width:769px){
  .sk-ch-head{min-height:var(--sk-chapter-min)}
}
/* the standfirst sits in the right half so the word owns the left */
@media(min-width:940px){
  .sk-ch-head .sk-ch-narr{margin-left:auto;width:46%}
}

.sk-ch-word{
  margin:0;
  display:block;
  font-family:var(--sk-font-head);
  font-weight:700;
  font-size:var(--sk-t-word);
  line-height:var(--sk-lh-word);
  letter-spacing:var(--sk-ls-word);
  text-wrap:balance;
  color:inherit;
}
.sk-ch-word span{display:block}

/* the hairline that closes the title zone, drawn on arrival */
.sk-rule{
  height:1px;
  border:0;
  margin:0 0 1.75rem;
  background:var(--sk-rule);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 1.2s var(--sk-ease);
}
.sk-rule.is-in{transform:scaleX(1)}
.sk-ch--invert .sk-ch-head .sk-rule{background:var(--sk-invert-line)}

/* the standfirst — serif, real measure, room to breathe */
.sk-ch-narr{
  max-width:34ch;
  font-family:var(--sk-font-narr);
  font-size:var(--sk-t-narr);
  font-weight:400;
  line-height:var(--sk-lh-narr);
  letter-spacing:var(--sk-ls-narr);
  text-wrap:pretty;
  color:var(--sk-ink);
}
.sk-ch-narr p{margin:0}
.sk-ch-narr p + p{margin-top:.7em}

/* The drop cap. Imperial Script, hanging into the margin.
   line-height:0 lets it bleed upward, so a capped block only ever
   opens where there is clear space above it. */
.sk-drop-cap::first-letter{
  font-family:var(--sk-font-script);
  font-size:var(--sk-t-cap);
  font-weight:400;
  line-height:0;
  letter-spacing:0;
  color:var(--sk-copper);
  padding-right:.06em;
}
@media(min-width:940px){
  .sk-drop-cap{text-indent:calc(var(--sk-grid-spacing-md) * -1)}
}

/* =================================================================
   2b. THE GROUND
   A photograph behind the title zone, full-bleed, under a scrim.
   This is what makes the word sit on something — the whole reason
   the zone can be 72svh instead of a blank screen.
   ================================================================= */
.sk-ch-head--ground{position:relative;isolation:isolate}
.sk-ch-ground{
  position:absolute;top:0;bottom:0;left:50%;
  width:100vw;
  transform:translateX(-50%);
  z-index:-1;
  overflow:hidden;
  background:#14110d;
}
.sk-ch-ground picture,
.sk-ch-ground img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:50% 50%;
}
/* each chapter carries its own night: --sk-tint on the section */
.sk-ch-ground::after{
  content:"";position:absolute;inset:0;
  --t:var(--sk-tint, #14110d);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--t) 74%, transparent) 0%, color-mix(in srgb, var(--t) 38%, transparent) 45%, color-mix(in srgb, var(--t) 14%, transparent) 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--t) 62%, transparent) 0%, color-mix(in srgb, var(--t) 18%, transparent) 40%, rgba(20,17,13,.86) 100%);
}

/* =================================================================
   3. THE BREAKOUT
   A band that escapes the centred canvas to the full viewport, then
   re-indents its own content back onto the canvas. The classic
   full-bleed: 100vw centred on the parent's own centre line.
   ================================================================= */
.sk-breakout{
  position:relative;z-index:2;
  width:100vw;
  margin-inline:calc(50% - 50vw);
}
/* Each band sets colour as well as ground. A light band nested in an
   inverted chapter would otherwise inherit near-white text onto bone
   paper — which is exactly what happened to the Lota sub-heading. */
.sk-breakout--panel{background:var(--sk-paper);color:var(--sk-ink)}
.sk-breakout--deep{background:var(--sk-paper-deep);color:var(--sk-ink)}
.sk-breakout--dust{background:var(--sk-paper-dust);color:var(--sk-ink)}
.sk-breakout--invert{background:var(--sk-invert-bg);color:var(--sk-invert-ink)}

.sk-breakout-in{
  max-width:var(--sk-maxw);
  margin-inline:auto;
  padding:var(--sk-pad-y) var(--sk-page-pad);
}

/* the serif sub-heading that opens a band */
.sk-ch-sub{
  margin:0 0 3rem;
  max-width:24ch;
  font-family:var(--sk-font-narr);
  font-weight:400;
  font-size:var(--sk-t-sub);
  line-height:1.02;
  letter-spacing:var(--sk-ls-narr);
  text-wrap:balance;
}

/* =================================================================
   4. THE CARD GRID
   ================================================================= */
.sk-grid-cards{
  display:grid;
  grid-template-columns:1fr;
  column-gap:var(--sk-grid-spacing-md);
  row-gap:var(--sk-grid-rowgap);
}
@media(min-width:520px){
  .sk-grid-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:900px){
  .sk-grid-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* Three up stays three up on wide screens: four-up left a third of
   the band empty at 1920 once the plates hit their cap. The plates
   are 380-800px at source and hold at ~420px. */

/* =================================================================
   5. THE PRODUCT CARD
   A catalogue entry, not a tile: a hairline, the piece, its spec,
   its minimum. Elevation is declared once — the rule — never a
   border under a shadow.
   ================================================================= */
.sk-card{
  position:relative;
  display:flex;
  flex-direction:column;
  padding-top:1.125rem;
  border-top:1px solid var(--sk-rule);
}
.sk-breakout--invert .sk-card{border-top-color:var(--sk-invert-line)}

/* The plate. Empty until a product post carries a feature image — a
   composed void reads as restraint; a museum snapshot reads as
   filler. It holds the piece's initial so the row still has a
   subject, and swaps to the photograph the moment one exists. */
/* The plate is capped, not fluid. The client's catalogue sheets put
   each piece in roughly 200px of real pixels; rendering that across a
   400px+ column is what made the range look soft. A tight grid of
   plates at their true size reads sharper — and more like a printed
   catalogue — than big blurry ones. Raise the cap when higher-
   resolution photography arrives. */
.sk-plate{
  position:relative;
  aspect-ratio:4/5;
  width:100%;
  max-width:26rem;
  margin:0 auto 1.125rem;
  overflow:hidden;
  background:var(--sk-paper-deep);
  display:grid;
  place-items:center;
}
.sk-breakout--invert .sk-plate{background:#2b271f}
.sk-plate img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1s var(--sk-ease);
}
.sk-card:hover .sk-plate img{transform:scale(1.03)}
.sk-plate-mark{
  font-family:var(--sk-font-script);
  font-size:clamp(4rem,7vw,7rem);
  line-height:1;
  color:var(--sk-rule);
  user-select:none;
}
.sk-breakout--invert .sk-plate-mark{color:#3d382e}

.sk-card-title{
  margin:0 0 .5rem;
  font-family:var(--sk-font-head);
  font-weight:700;
  font-size:1.0625rem;
  line-height:1.05;
  letter-spacing:-.02em;
  transition:color .25s var(--sk-ease);
}
.sk-card-title a{color:inherit;text-decoration:none}
/* the title link covers the card, so the whole entry is the target */
.sk-card-title a::after{content:"";position:absolute;inset:0}
.sk-card:hover .sk-card-title{color:var(--sk-copper-dk)}
.sk-breakout--invert .sk-card:hover .sk-card-title{color:var(--sk-copper-lt)}

.sk-card-spec{
  margin:0;
  font-family:var(--sk-font-narr);
  font-size:1.0625rem;
  line-height:1.2;
  letter-spacing:-.02em;
  color:var(--sk-muted);
  text-wrap:pretty;
}
.sk-card-foot{
  display:flex;align-items:center;gap:.75rem;
  margin-top:1rem;padding-top:.75rem;
  border-top:1px solid var(--sk-line);
}
.sk-breakout--invert .sk-card-foot{border-top-color:var(--sk-invert-line)}
.sk-moq{
  font-size:.6875rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--sk-muted);
}

/* the add control sits above the card's full-bleed title link */
.sk-add{
  position:relative;z-index:1;
  margin-left:auto;
  display:inline-flex;align-items:center;gap:.375rem;
  padding:.375rem .5625rem;
  border:1px solid var(--sk-rule);
  background:transparent;
  color:inherit;
  font-family:var(--sk-font-ui);
  font-size:.6875rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  cursor:pointer;
  transition:background-color .25s var(--sk-ease), color .25s var(--sk-ease), border-color .25s var(--sk-ease);
}
.sk-add:hover{background:var(--sk-ink);border-color:var(--sk-ink);color:var(--sk-paper)}
.sk-add.is-added{background:var(--sk-copper);border-color:var(--sk-copper);color:#fff}
.sk-add svg{width:.625rem;height:.625rem;flex:none}
.sk-breakout--invert .sk-add{border-color:var(--sk-invert-line)}
.sk-breakout--invert .sk-add:hover{background:var(--sk-paper);border-color:var(--sk-paper);color:var(--sk-ink)}

/* =================================================================
   6. ACTIONS
   ================================================================= */
.sk-action{
  display:inline-flex;align-items:center;gap:.625rem;
  padding:.9375rem 1.5rem;
  border:1px solid var(--sk-ink);
  background:var(--sk-ink);
  color:var(--sk-paper);
  font-family:var(--sk-font-ui);
  font-size:.75rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;
  transition:background-color .25s var(--sk-ease), color .25s var(--sk-ease), border-color .25s var(--sk-ease);
}
.sk-action:hover{background:var(--sk-copper);border-color:var(--sk-copper);color:#fff}
.sk-action svg{width:.75rem;height:.75rem;flex:none}
.sk-action--ghost{background:transparent;color:inherit;border-color:currentColor}
.sk-action--ghost:hover{background:var(--sk-ink);border-color:var(--sk-ink);color:var(--sk-paper)}
.sk-action:disabled{opacity:.4;cursor:not-allowed}
.sk-action:disabled:hover{background:var(--sk-ink);border-color:var(--sk-ink);color:var(--sk-paper)}

.sk-ch--invert .sk-ch-head .sk-action{background:var(--sk-paper);border-color:var(--sk-paper);color:var(--sk-ink)}
.sk-ch--invert .sk-ch-head .sk-action:hover{background:var(--sk-copper);border-color:var(--sk-copper);color:#fff}
.sk-ch--invert .sk-ch-head .sk-action--ghost{background:transparent;color:var(--sk-invert-ink);border-color:var(--sk-invert-line)}
.sk-ch--invert .sk-ch-head .sk-action--ghost:hover{background:var(--sk-paper);border-color:var(--sk-paper);color:var(--sk-ink)}

.sk-actions{display:flex;flex-wrap:wrap;gap:.75rem}

/* the quiet text link */
.sk-link{
  display:inline-flex;align-items:center;gap:.4375rem;
  color:inherit;
  font-family:var(--sk-font-ui);
  font-size:.75rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none;
  padding-bottom:.1875rem;
  border-bottom:1px solid var(--sk-rule);
  transition:border-color .25s var(--sk-ease), color .25s var(--sk-ease);
}
.sk-link:hover{color:var(--sk-copper-dk);border-bottom-color:var(--sk-copper)}
.sk-link svg{width:.625rem;height:.625rem}

/* =================================================================
   7. THE DRAWN FRAME
   An SVG rect with pathLength="1" drawn on by stroke-dashoffset.
   Our equivalent of the Editions "da Vinci lines".
   ================================================================= */
.sk-frame{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.sk-frame rect{
  fill:none;
  stroke:currentColor;
  stroke-width:1;
  opacity:.22;
  stroke-dasharray:1;
  stroke-dashoffset:1;
  transition:stroke-dashoffset 1.8s var(--sk-ease);
  vector-effect:non-scaling-stroke;
}
.sk-frame.is-drawn rect{stroke-dashoffset:0}

/* =================================================================
   8. FOCUS
   ================================================================= */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--sk-copper);
  outline-offset:3px;
}

/* =================================================================
   9. EMPTY CHAPTERS
   chapter.hbs renders its shell before it knows whether the
   category has products — Ghost's {{#get}} replaces the block
   context, so the params cannot live inside it.
   ================================================================= */
.sk-ch:has(.sk-grid-cards:empty){display:none}

/* =================================================================
   10. REVEAL
   Applied only once editions.js has tagged the element, so a JS
   failure leaves every card visible rather than a blank page.
   ================================================================= */
[data-reveal]{
  opacity:0;
  transform:translateY(.75rem);
  transition:opacity .9s var(--sk-ease), transform .9s var(--sk-ease);
}
[data-reveal].is-in{opacity:1;transform:none}

/* =================================================================
   11. REDUCED MOTION
   ================================================================= */
@media(prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
  .sk-frame rect{stroke-dashoffset:0;transition:none}
  .sk-rule{transform:none;transition:none}
  .sk-ch-word{opacity:1 !important}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* =================================================================
   12. ANCHORS
   The top bar is sticky, so an in-page jump has to clear it.
   ================================================================= */
.sk-ch[id],.sk-mast[id],#main{scroll-margin-top:5.5rem}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}