/* =================================================================
   SHREE KALAS — BRAND TOKENS
   Every core colour below is sampled directly from the logo artwork.
   Colours marked EXTENDED are not in the mark; they were derived to
   give the brand a usable copper range. Nothing else is invented.
   ================================================================= */

/* =================================================================
   WEBSITE PALETTE — five colours, and only five.
   Simple and premium. Red and green live in the LOGO only; on the
   site they would read busy and dated, so they are not used here.
   ================================================================= */
:root{
  /* ---- The five ---- */
  --sk-blue:    #2e3192;  /* Royal Blue — brand. Header, footer, dark sections. */
  --sk-copper:  #b87333;  /* Copper — buttons, highlights, accents. */
  --sk-white:   #ffffff;  /* Background. */
  --sk-cream:   #f8f5ee;  /* Alternate sections. */
  --sk-ink:     #333333;  /* Dark charcoal — all body text. */

  /* ---- Logo-only colours ----
     Present in the badge, deliberately NOT used on the site.
     Recorded so the artwork never drifts. Do not style UI with these. */
  --logo-navy:    #2f2483;  /* the true wordmark navy (site uses --sk-blue) */
  --logo-red:     #e3000f;  /* V.V.I.P. Choice ribbon */
  --logo-green:   #00963f;  /* kalash leaves */
  --logo-orange:  #ef7c00;  /* flame / pot */
  --logo-magenta: #e5007d;  /* floral motifs */
  --logo-yellow:  #ffed00;  /* marigold motifs */

  /* ---- Aliases kept so existing pages keep working ---- */
  --sk-navy:    var(--sk-blue);

  /* ---- Gold — the plate gradient, exact stops ---- */
  --sk-gold-deep:      #cf9a00;  /* 0%   */
  --sk-gold-mid:       #cc992c;  /* 19%  */
  --sk-gold-warm:      #dab66d;  /* 29%  */
  --sk-gold-light:     #f1e3c8;  /* 42%  */
  --sk-gold-highlight: #fdfcfa;  /* 51%  — the specular band */
  --sk-gold-fall:      #e6ce9d;  /* 61%  */
  --sk-gold-shade:     #cc9832;  /* 74%  */
  --sk-gold-edge:      #d29300;  /* 100% */

  /* ---- Copper ramp — shades of the one copper, for hover/tint only ---- */
  --sk-copper-dk:   #8f5926;  /* hover on copper buttons */
  --sk-copper-lt:   #d9a071;  /* highlight in the copper gradient */
  --sk-copper-pale: #f6ece1;  /* tint — product tiles, chips */

  /* ---- Neutrals ---- */
  --sk-paper:   var(--sk-white);   /* page background = white */
  --sk-paper-2: var(--sk-cream);   /* alternate sections = light cream */
  --sk-line:    #e6e1d6;           /* borders, tuned to the cream */
  --sk-muted:   #6f6f6f;           /* charcoal, lightened — secondary text */
  --sk-dark:    var(--sk-blue);    /* "dark" surfaces are now Royal Blue */

  /* ---- Gradients ---- */
  /* The plate. Exact stops from the logo. Horizontal only — never rotate it. */
  --sk-grad-gold: linear-gradient(90deg,
    #cf9a00 0%, #cc992c 19%, #dab66d 29%, #f1e3c8 42%,
    #fdfcfa 51%, #e6ce9d 61%, #cc9832 74%, #d29300 100%);

  /* Brass sheen — the plate stops, read vertically. For fills and rules. */
  --sk-grad-brass: linear-gradient(180deg,
    #d29300 0%, #cc9832 18%, #e6ce9d 40%, #fdfcfa 52%, #dab66d 70%, #cf9a00 100%);

  /* Copper sheen — built on #b87333, in the plate's rhythm. Buttons, plates, rules. */
  --sk-grad-copper: linear-gradient(90deg,
    #8f5926 0%, #b87333 22%, #d9a071 44%, #f2d9bf 52%, #c07e3c 72%, #8f5926 100%);

  /* Blue depth — Royal Blue falling into a deeper blue. Header, footer, dark sections. */
  --sk-grad-blue: linear-gradient(160deg, #3a3ea8 0%, #2e3192 55%, #1e2065 100%);
  --sk-grad-navy: var(--sk-grad-blue);   /* alias — existing pages keep working */

  /* Ribbon — LOGO ONLY. Documented for the brand kit; never style UI with it. */
  --sk-grad-ribbon: linear-gradient(180deg, #ff2a2a 0%, #e3000f 55%, #b40009 100%);

  /* Cream field — the only page-level wash. Barely there, on purpose. */
  --sk-grad-field: radial-gradient(900px 380px at 78% 12%, rgba(184,115,51,.10), transparent 62%);

  /* ---- Type ---- */
  --sk-font-display: "Copperplate", "Copperplate Gothic Bold", ui-serif, Georgia, serif;
  --sk-font-serif:   ui-serif, Georgia, "Times New Roman", serif;
  --sk-font-sans:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* ---- Form ---- */
  --sk-radius: 14px;
  --sk-radius-sm: 9px;
  --sk-shadow: 0 1px 2px rgba(22,19,24,.05), 0 8px 24px -12px rgba(22,19,24,.18);
}


/* =================================================================
   EDITIONS LAYER — the editorial ground
   Added for the Shopify-Editions rebuild. Everything above this line
   is the brand kit and stays verbatim; the logo-sampled colours and
   the 8-stop gold plate are documentation, not UI.

   Editions Winter '26 works on a warm neutral ground, not on brand
   colour: paper #f7f7ee, ink #292919, grey rules. We keep the
   brand's own cream as the paper, warm the ink and greys to match,
   and let copper be the single accent. Royal Blue is demoted to the
   inverted chapters and the footer.
   ================================================================= */

/* ---- Typefaces ----
   Stand-ins for the three licensed faces Editions uses:
     NeueMontreal Bold  -> Schibsted Grotesk 700  (the giant words)
     HWCigars           -> Instrument Serif 400   (the narrative)
     ImperialScript     -> Imperial Script 400    (the hanging cap)
   Latin subsets only, self-hosted, ~82 KB total. */
@font-face{
  font-family:"Schibsted Grotesk";
  src:url("../fonts/schibsted-grotesk-700.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Instrument Serif";
  src:url("../fonts/instrument-serif-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Imperial Script";
  src:url("../fonts/imperial-script-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}

:root{
  /* ---- The editorial ground ---- */
  --sk-paper:      #f8f5ee;   /* bone — the page. The brand cream, unchanged. */
  --sk-paper-deep: #efeade;   /* the alternate chapter ground, and the plate */
  --sk-paper-dust: #e7e0d0;   /* the deepest neutral before we go dark */
  --sk-ink:        #26221b;   /* warm olive-black — all body text */
  --sk-muted:      #7d7568;   /* warm grey — specs and captions. 4.6:1 on paper. */
  --sk-line:       #e0dacd;   /* the faint hairline */
  --sk-rule:       #c8bfad;   /* the structural hairline — frames, card tops */

  /* ---- Inverted chapters ---- */
  --sk-invert-bg:  #201d17;
  --sk-invert-ink: #f4f0e6;
  --sk-invert-line:#403a30;

  /* ---- Type stacks ---- */
  --sk-font-head:   "Schibsted Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sk-font-narr:   "Instrument Serif", Georgia, "Times New Roman", serif;
  --sk-font-script: "Imperial Script", Georgia, serif;
  --sk-font-ui:     "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* ---- The type scale ----
     Editions runs .headline-1 to 13.75rem (220px). We cap lower: at
     220px "Drinkware" overruns an 80% column at 1440 and collides
     with the rail. 8.5rem holds every chapter word on one line down
     to 1100px and still reads as the same gesture.
     Tracking floors at -.03em; Editions' -.05em on the serif shreds
     at the sizes we actually set it. */
  /* Editions Winter '26, measured from its tailwind build:
       headline-1  clamp(5rem, 12.63px + 8.77vw, 10rem) below 940px,
                   clamp(7.5rem, 35.79px + 10.96vw, 13.75rem) above — 220px at ≥1680
       narrative-1 clamp(1.875rem, 21.58px + 1.1vw, 2.5rem) / clamp(2rem, 18.53px + 1.75vw, 3rem)
       drop cap    clamp(6rem, 75.79px + 2.63vw, 7.5rem)
     "Water Pots" wraps to two lines between 940 and ~1500px; that is
     what the .9 leading is for. */
  --sk-t-word:  clamp(5rem, 12.63px + 8.77vw, 10rem);
  --sk-t-narr:  clamp(1.875rem, 21.58px + 1.1vw, 2.5rem);
  --sk-t-sub:   clamp(1.875rem, 21.58px + 1.1vw, 2.5rem);
  --sk-t-cap:   clamp(4.375rem, 48.1px + 2.85vw, 6rem);
  --sk-t-lead:  clamp(1.0625rem, 1rem + .25vw, 1.1875rem);

  --sk-lh-word: .9;
  --sk-ls-word: -.03em;
  --sk-lh-narr: .98;
  --sk-ls-narr: -.03em;

  /* ---- The grid ----
     Editions puts content in the right 80% and keeps the left 20% as
     a fixed gutter for the rail. --sk-gutter IS that 20%. */
  --sk-gutter:          20%;
  --sk-maxw:            105rem;   /* 1680px — the capture's outer canvas */
  --sk-page-pad:        clamp(1.25rem, .6rem + 2.6vw, 4.5rem);
  --sk-grid-spacing:    1.25rem;
  --sk-grid-spacing-md: clamp(1.25rem, 1vw, 1.5rem);
  --sk-grid-rowgap:     clamp(3rem, 2rem + 2.6vw, 4.5rem);
  --sk-pad-y:           clamp(4rem, 2.5rem + 5vw, 9rem);
  /* Editions runs 140svh title zones over a 3D scene. Ours sit on a
     photographic ground (chapter.hbs `image`), so 72svh is enough
     air to read the word and the picture without a blank screen. */
  --sk-chapter-min:     72svh;
  --sk-chapter-min-sm:  60svh;

  /* Breakpoints, for reference — CSS can't use vars in media queries.
       600px             cards go two-up
       769px             typography + stacking
       940px             THE switch: fixed rail + 80% column appears
      1100px             cards go three-up
      1680px (105rem)    max canvas */

  /* ---- Form ---- */
  --sk-radius-frame: 0;      /* a printed catalogue has no rounded corners */
  --sk-ease: cubic-bezier(.16,1,.3,1);   /* exponential ease-out */
}

/* from the rail breakpoint the scale steps up to Editions' desktop values */
@media(min-width:940px){
  :root{
    --sk-t-word: clamp(7.5rem, 35.79px + 10.96vw, 13.75rem);
    --sk-t-narr: clamp(2rem, 18.53px + 1.75vw, 3rem);
    --sk-t-sub:  clamp(2rem, 18.53px + 1.75vw, 3rem);
    --sk-t-cap:  clamp(6rem, 75.79px + 2.63vw, 7.5rem);
  }
}