/* ============================================================
   TARKASI — the look: dark (the original) and light.

   Every colour in the other stylesheets is a token, or a token that
   falls back to the exact value it always had. So this file can
   re-colour the whole site by setting tokens, without touching a page,
   and the original dark look cannot drift: where a token is set only
   for light, dark still uses the old value.

   <html data-mode="dark|light" data-theme="original"> is set before the
   page is drawn, by appearance.js. A festival theme will be one more set
   of these tokens; "original" is this file as it stands.
   ============================================================ */

/* ---- tokens the stylesheets share, at their original (dark) values ------- */
:root{
  color-scheme:dark;
  --fg-rgb:233,236,241;          /* the silver: text and hairlines, as r,g,b */
  --bg-rgb:10,12,15;             /* the page, behind glass */
  --brass-rgb:189,160,106;
  --brass-bright-rgb:215,189,134;
  --shade-rgb:0,0,0;             /* shadows */
  --shade-k:1;                   /* how strong they are */
}

/* ---- light: ivory and oxidised silver -----------------------------------
   Not white. Silver is a cool metal, and on a cool white it all but
   disappears; on a warm ground it reads as silver again, the way a piece
   looks lying on the handmade paper it is wrapped in. So the page is
   ivory, a shade off paper; cards and panels are lighter still, as if
   laid on it.

   The silver of the dark site turns into graphite: the blackened,
   oxidised finish filigree is often given, which keeps the brand's
   black-and-silver in a light room. The brass deepens to old gold so it
   can still be read as text, and shadows turn warm and faint. */
:root[data-mode="light"]{
  color-scheme:light;
  --ink:#f1ece3; --ink-soft:#f8f4ed; --ink-panel:#fdfbf7;
  --silver:#1f2024; --silver-dim:#43454c; --mute:#66676d;
  --line:rgba(31,32,36,.14); --line-soft:rgba(31,32,36,.075);
  --brass:#866628; --brass-bright:#6c5120; --brass-deep:#b0924f;
  --fg-rgb:31,32,36; --bg-rgb:241,236,227;
  --brass-rgb:134,102,40; --brass-bright-rgb:108,81,32;
  --shade-rgb:84,64,34; --shade-k:.3;
  --on-brass:#fbf8f2;
  --glow:#f9f5ee;
  --metal:linear-gradient(180deg,#5f656f 0%,#2a2e35 55%,#4b515a 100%);
  --gilt:linear-gradient(180deg,#a3823f 0%,#7a5c22 55%,#5c4418 100%);
  --err:#a3463a; --err-text:#8e3a2f; --warn:#85601d; --ok:#3b7350;
}

/* ---- what stays dark in the light ----------------------------------------
   Anything drawn over a photograph: the collection tiles, the shop cards'
   pictures, the homepage slides, the photo frames. Their text was set for
   a dark wash over the photo, and the photo does not change with the mode.
   And the black-velvet display cases (the signature cards, the vitrine),
   which are dark on purpose, a jeweller's case on an ivory wall. Here the
   original palette is put back. */
:root[data-mode="light"] :is(.sx-tile, .card-img, .slides, .hcard-img, .sig-plate, .jcard-img, .piece-img,
    .ed-figure, .atelier-fig, .film-stage, .sigcard, .vitrine-case){
  color-scheme:dark;
  --ink:#0b0d10; --ink-soft:#131720; --ink-panel:#171b24;
  --silver:#e9ecf1; --silver-dim:#c4c9d2; --mute:#8b929d;
  --line:rgba(233,236,241,.12); --line-soft:rgba(233,236,241,.07);
  --brass:#bda06a; --brass-bright:#d7bd86; --brass-deep:#8f7637;
  --fg-rgb:233,236,241; --bg-rgb:10,12,15;
  --brass-rgb:189,160,106; --brass-bright-rgb:215,189,134;
  --shade-rgb:0,0,0; --shade-k:1;
  --on-brass:#15110a; --glow:#1a1f2b;
  --metal:linear-gradient(180deg,#fff 0%,#d6dce4 46%,#9aa2ae 100%);
  --gilt:linear-gradient(180deg,#f4e3ba 0%,#d7bd86 48%,#a9884d 100%);
  --err:#c96a5e; --err-text:#e5b0a8; --warn:#d8b46a; --ok:#7fb894;
}

/* ---- light: the few things a token cannot say -------------------------- */
/* The monogram is silver on transparent; on ivory it is oxidised instead. */
:root[data-mode="light"] img[src*="media.png"]{ filter:brightness(.5) contrast(1.4) }
/* Fields were a breath of white over black; on ivory they need a ground. */
:root[data-mode="light"] :is(input, textarea, select):not([type="checkbox"]):not([type="radio"]):not([type="range"]){
  background-color:var(--ink-panel);
}

/* ---- the switch, in the header -------------------------------------------- */
.tkh-mode{
  display:inline-grid; place-items:center; width:36px; height:36px; padding:0; cursor:pointer;
  color:var(--silver-dim); background:none; border:1px solid transparent; border-radius:50%;
  transition:color .25s, border-color .25s;
}
.tkh-mode:hover{ color:var(--brass-bright); border-color:var(--line) }
.tkh-mode:focus-visible{ outline:2px solid var(--brass-bright); outline-offset:2px }
.tkh-mode svg{ width:19px; height:19px }
.tkh-mode .to-dark{ display:none }
:root[data-mode="light"] .tkh-mode .to-light{ display:none }
:root[data-mode="light"] .tkh-mode .to-dark{ display:block }
.no-mode-switch .tkh-mode{ display:none }

/* A change of mode eases over rather than flashing. Only while it happens:
   left on, it would slow every hover on the site. */
.mode-switching, .mode-switching *, .mode-switching *::before, .mode-switching *::after{
  transition:background-color .45s ease, color .45s ease, border-color .45s ease, fill .45s ease !important;
}
@media (prefers-reduced-motion:reduce){
  .mode-switching, .mode-switching *, .mode-switching *::before, .mode-switching *::after{ transition:none !important }
}

/* ============================================================
   Festival themes
   A theme's colours arrive as the same tokens (appearance.js writes
   them into <style id="tk-theme">); these rules only add what a
   festival has and Original does not: its border, its banner.
   ============================================================ */
:root{ --fest:#b3261e; --fest-rgb:179,38,30 }

/* A temple-saree edge: a row of small spires in the festival colour
   between two threads of the accent. */
:root[data-fest-border] .tkh::after{
  background:
    linear-gradient(var(--brass),var(--brass)) top/100% 1px no-repeat,
    linear-gradient(var(--brass),var(--brass)) bottom/100% 1px no-repeat,
    conic-gradient(from 135deg at 50% 0, var(--fest) 90deg, transparent 0) 0 2px/10px 4px repeat-x,
    rgba(var(--fest-rgb),.22);
}
:root[data-fest-border] .tkh::after{
  content:""; position:absolute; left:0; right:0; top:100%; height:8px; pointer-events:none;
}

/* ---- the banner, top of the homepage and the shop ------------------------- */
.fest-banner{
  position:relative; overflow:hidden; color:var(--silver-dim);
  background:
    radial-gradient(70% 130% at 82% 50%, rgba(var(--fest-rgb),.30), transparent 62%),
    radial-gradient(50% 120% at 0% 0%, rgba(var(--brass-rgb),.12), transparent 60%),
    var(--ink);
}
.fest-banner::before, .fest-banner::after{
  content:""; position:absolute; left:0; right:0; height:8px; pointer-events:none;
  background:
    linear-gradient(var(--brass),var(--brass)) top/100% 1px no-repeat,
    linear-gradient(var(--brass),var(--brass)) bottom/100% 1px no-repeat,
    conic-gradient(from 135deg at 50% 0, var(--fest) 90deg, transparent 0) 0 2px/10px 4px repeat-x,
    rgba(var(--fest-rgb),.22);
}
.fest-banner::before{ top:0 }
.fest-banner::after{ bottom:0; transform:scaleY(-1) }
.fest-in{
  display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); align-items:center;
  gap:clamp(20px,4vw,56px); padding-block:clamp(34px,4.6vw,58px);
}
.fest-eyebrow{
  font-size:.66rem; letter-spacing:.3em; text-transform:uppercase; color:var(--brass); font-weight:500;
  display:flex; align-items:center; gap:.8em;
}
.fest-eyebrow::before{ content:""; width:28px; height:1px; background:var(--brass); opacity:.8 }
.fest-title{
  font-family:var(--serif); font-weight:300; color:var(--silver);
  font-size:clamp(1.8rem,3.8vw,2.9rem); line-height:1.06; letter-spacing:-.01em; margin:.6rem 0 .8rem;
}
.fest-text{ max-width:54ch; font-size:.95rem; line-height:1.65; margin:0 }
.fest-btn{
  display:inline-flex; align-items:center; gap:.5rem; margin-top:1.3rem; padding:.8rem 1.2rem;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; text-decoration:none;
  color:var(--ink); background:var(--brass); border:1px solid var(--brass); border-radius:2px;
  transition:background .25s, border-color .25s;
}
.fest-btn:hover{ background:var(--brass-bright); border-color:var(--brass-bright) }
.fest-btn:focus-visible{ outline:2px solid var(--silver); outline-offset:3px }
/* a temple arch, framed twice in the accent */
.fest-art{ justify-self:center }
.fest-arch{
  display:block; width:clamp(150px,19vw,224px); aspect-ratio:3/4; overflow:hidden;
  border-radius:999px 999px 4px 4px; border:1px solid rgba(var(--brass-rgb),.7);
  box-shadow:0 0 0 6px var(--ink), 0 0 0 7px rgba(var(--brass-rgb),.4), 0 30px 60px -30px rgba(var(--fest-rgb),.6);
  background:radial-gradient(80% 70% at 50% 40%, rgba(var(--fest-rgb),.35), transparent 70%), var(--ink-soft);
}
.fest-arch img{ width:100%; height:100%; object-fit:cover; display:block }
.fest-arch img.mono{ object-fit:contain; padding:20% 16% }
.fest-close{
  position:absolute; top:14px; right:14px; width:32px; height:32px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; font-size:1.2rem; line-height:1;
  color:var(--silver-dim); background:rgba(var(--bg-rgb),.5); border:1px solid var(--line);
}
.fest-close:hover{ color:var(--silver); border-color:var(--brass) }
@media (max-width:700px){
  .fest-in{ grid-template-columns:1fr; gap:18px; padding-block:30px 32px }
  .fest-art{ order:-1; justify-self:start }
  .fest-arch{ width:96px; box-shadow:0 0 0 4px var(--ink), 0 0 0 5px rgba(var(--brass-rgb),.4) }
}

/* ---- a campaign's look ------------------------------------------------------
   A campaign's own theme is written by appearance.js for its element only
   (<main> on its page, .hcamp on the homepage), never for :root. The element
   paints itself as <body> does, so the theme's words sit on the theme's own
   page colour, which is what their contrast was checked against. */
[data-campaign-look]{ background-color:var(--ink); color:var(--silver-dim) }

/* ---- while a theme or a release is being tried (the dashboard's preview links) ---------- */
/* On one line wherever it fits; on a phone it wraps inside the screen rather
   than running off both sides. */
.fest-trying{
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%); z-index:400;
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px 12px; padding:9px 10px 9px 16px; border-radius:22px;
  font:500 13px/1.2 system-ui,sans-serif; color:#fff; background:rgba(20,20,24,.92);
  box-shadow:0 10px 30px rgba(0,0,0,.35); width:max-content; max-width:calc(100vw - 24px); text-align:center;
}
.fest-trying button, .fest-trying a{
  white-space:nowrap; font:inherit; color:#111; background:#fff; border:0; border-radius:999px; padding:6px 12px; cursor:pointer;
}