/* ============================================================
   monologue. light theme : the art-book variant
   Loaded after styles.css, page css, and brand.css on every page.
   Scoped to html[data-theme="light"]; one attribute flips the site.

   Palette per BRAND.md ("Color Palette"):
   primary: warm white, bone, ivory, charcoal, soft black
   secondary: aged brass, weathered bronze, deep ink blue
   The page becomes the paper; images read as printed plates.
   ============================================================ */

/* ---------- tokens ---------- */
html[data-theme="light"]{
  color-scheme:light;
  /* --ink is the surface role, --cream the text role (see styles.css) */
  --ink:#f6f1e7;                      /* warm white : the page */
  --ink-2:#ece4d4;                    /* bone : secondary surface */
  --cream:#241f18;                    /* charcoal : primary text */
  --cream-dim:rgba(36,31,24,.66);
  --cream-faint:rgba(36,31,24,.42);
  --gold:#8f6f3e;                     /* weathered bronze : brass, held down for light ground */
  --glass:rgba(36,31,24,.05);
  --glass-edge:rgba(36,31,24,.16);
}
html[data-theme="light"] ::selection{
  background:#2b4a66;                 /* deep ink blue */
  color:#f6f1e7;
}

/* ---------- grain: white noise becomes paper tooth ---------- */
html[data-theme="light"] .grain{
  mix-blend-mode:multiply;
  opacity:.07;
}

/* ---------- nav pill: milk glass instead of smoke glass ---------- */
html[data-theme="light"] #nav{
  background:linear-gradient(120deg,rgba(252,249,242,.82),rgba(252,249,242,.55) 40%,rgba(252,249,242,.74));
  border-color:rgba(36,31,24,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(36,31,24,.05),0 12px 40px rgba(36,31,24,.14);
}

/* ---------- hero: the film still sits under a vellum leaf ---------- */
html[data-theme="light"] .hero video,
html[data-theme="light"] .hero .hero-fallback{
  filter:brightness(1.04) contrast(.97) saturate(.9);
}
html[data-theme="light"] .hero::after{
  background:linear-gradient(to bottom,rgba(246,241,231,.72),rgba(246,241,231,.48) 32%,rgba(246,241,231,.56) 62%,var(--ink) 99%);
}
html[data-theme="light"] .scroll-cue{
  background:rgba(36,31,24,.045);
  border-color:rgba(36,31,24,.12);
}

/* ---------- glass plates become gallery cards ---------- */
html[data-theme="light"] .svc-card .bg{filter:brightness(.97) saturate(.92)}
html[data-theme="light"] .svc-card:hover .bg{filter:brightness(1.02) saturate(1)}
html[data-theme="light"] .svc-card .plate{
  background:linear-gradient(135deg,rgba(252,248,240,.85),rgba(252,248,240,.62));
  border-color:rgba(36,31,24,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 8px 32px rgba(36,31,24,.14);
}
html[data-theme="light"] .svc-card .plate::before{
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);
}
html[data-theme="light"] .panel .frame{box-shadow:0 24px 60px rgba(36,31,24,.16)}
html[data-theme="light"] .panel .caption{
  background:linear-gradient(135deg,rgba(252,248,240,.88),rgba(252,248,240,.68));
  border-color:rgba(36,31,24,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
html[data-theme="light"] .place .ph{box-shadow:0 24px 70px rgba(36,31,24,.18)}
html[data-theme="light"] .place .txt{
  background:linear-gradient(135deg,rgba(252,248,240,.92),rgba(252,248,240,.74));
  border-color:rgba(36,31,24,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 16px 50px rgba(36,31,24,.12);
}
html[data-theme="light"] .contact .card-glass{
  background:linear-gradient(140deg,rgba(252,248,240,.9),rgba(252,248,240,.6));
  border-color:rgba(36,31,24,.13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 24px 70px rgba(36,31,24,.12);
}
html[data-theme="light"] .contact .row a{border-bottom-color:rgba(36,31,24,.3)}

/* ---------- paper interlude flips to a dark plate page ----------
   The section reads background:var(--cream), so under the light
   tokens it becomes the book's single charcoal spread. Only its
   hard-coded details need retuning. */
html[data-theme="light"] .paper .card{color:#241f18}
html[data-theme="light"] .paper blockquote .uline{border-bottom-color:rgba(246,241,231,.45)}

/* ---------- imagery: full-strength plates, soft graphite shadows ---------- */
html[data-theme="light"] .idx-card .ph img{filter:none}
html[data-theme="light"] .idx-card:hover .ph img{filter:none}
html[data-theme="light"] .col-card img{filter:brightness(.94) saturate(.96)}
html[data-theme="light"] .col-card:hover img{filter:brightness(1) saturate(1)}

/* labels that sit on photographs stay light, with their shadows */
html[data-theme="light"] .idx-card .corner{color:#fdfaf3;text-shadow:0 1px 6px rgba(0,0,0,.55)}
html[data-theme="light"] .col-card .label{color:#fdfaf3;text-shadow:0 2px 14px rgba(0,0,0,.5)}
html[data-theme="light"] .col-card .label .k{color:#d9ba80}
html[data-theme="light"] .studio-grid figcaption{color:#fdfaf3}
html[data-theme="light"] .st-feature .num{color:#fdfaf3}

/* ---------- hairlines and rules go graphite ---------- */
html[data-theme="light"] footer{border-top-color:rgba(36,31,24,.12)}
html[data-theme="light"] .story-row{border-top-color:rgba(36,31,24,.14)}
html[data-theme="light"] .story-row:last-child{border-bottom-color:rgba(36,31,24,.14)}
html[data-theme="light"] .demo-flag{box-shadow:0 8px 28px rgba(36,31,24,.25)}

/* ---------- artist detail ---------- */
html[data-theme="light"] .a-hero .bg img{filter:brightness(.98) contrast(1.02)}
html[data-theme="light"] .a-hero::after{
  background:linear-gradient(to top,var(--ink),transparent 55%),
             linear-gradient(to right,rgba(246,241,231,.55),transparent 60%);
}
html[data-theme="light"] .a-hero .a-inquire{border-bottom-color:rgba(36,31,24,.3)}
html[data-theme="light"] .studio-grid figure img{filter:brightness(1)}
html[data-theme="light"] .studio-grid figure:hover img{filter:brightness(1)}
html[data-theme="light"] .work .frame{
  border:1px solid rgba(36,31,24,.09);
  box-shadow:0 18px 48px rgba(36,31,24,.16);
}
/* ---------- the hang: the daylight room ---------- */
html[data-theme="light"] .a-sec.wall{
  border-top-color:rgba(36,31,24,.10);
  border-bottom-color:rgba(36,31,24,.10);
  background:
    linear-gradient(to top,rgba(36,31,24,.10),transparent 24%),
    #efe7d6;
}
html[data-theme="light"] .wall-light{
  background:
    radial-gradient(46% 34% at 18% 0%,rgba(255,255,255,.5),transparent 72%),
    radial-gradient(50% 38% at 50% 0%,rgba(255,255,255,.38),transparent 74%),
    radial-gradient(46% 34% at 82% 0%,rgba(255,255,255,.5),transparent 72%),
    linear-gradient(to bottom,rgba(255,255,255,.42),rgba(255,255,255,.1) 30%,transparent 52%);
}
/* the hang's bays keep their dark wall + frame treatment in both themes
   (charcoal plate spread); only the section shell around them lightens */
html[data-theme="light"] .work .inquire{border-bottom-color:rgba(36,31,24,.3)}
/* turning point also flips to the charcoal spread; retune its fixed inks */
html[data-theme="light"] .turning .a-label h2{color:rgba(246,241,231,.55)}
html[data-theme="light"] .turning .a-label .rule{background:rgba(246,241,231,.2)}
html[data-theme="light"] .turning p{color:rgba(246,241,231,.78)}

/* chaptered experience scrims */
html[data-theme="light"] .exp-ui::before{background:linear-gradient(to bottom,rgba(246,241,231,.72),rgba(246,241,231,0))}
html[data-theme="light"] .exp-ui::after{background:linear-gradient(to top,rgba(246,241,231,.94),rgba(246,241,231,0))}
html[data-theme="light"] .exp-replay{background:rgba(36,31,24,.045)}

/* ---------- stories ---------- */
html[data-theme="light"] .st-feature{border-bottom-color:rgba(36,31,24,.14)}
html[data-theme="light"] .st-feature .ph{box-shadow:0 20px 55px rgba(36,31,24,.16)}
html[data-theme="light"] .st-feature .ph img{filter:none}
html[data-theme="light"] .st-feature:hover .ph img{filter:none}
html[data-theme="light"] .st-feature .read{border-bottom-color:rgba(36,31,24,.3)}
html[data-theme="light"] .st-row{border-bottom-color:rgba(36,31,24,.14)}
html[data-theme="light"] .st-row .ph img{filter:none}
html[data-theme="light"] .st-row:hover .ph img{filter:none}
html[data-theme="light"] .st-figure .ph{box-shadow:0 22px 60px rgba(36,31,24,.16)}
html[data-theme="light"] .st-figure .ph img{filter:none}
html[data-theme="light"] .st-artist-card .ph img{filter:none}
html[data-theme="light"] .st-artist-card:hover{border-color:rgba(143,111,62,.5);background:rgba(36,31,24,.04)}
html[data-theme="light"] .st-end{border-top-color:rgba(36,31,24,.14)}
html[data-theme="light"] .st-body p a{border-bottom-color:rgba(143,111,62,.5)}

/* ---------- collections ---------- */
html[data-theme="light"] .col-feat .ph img{filter:brightness(.97) saturate(.96)}
html[data-theme="light"] .col-feat:hover .ph img{filter:brightness(1.01) saturate(1)}
html[data-theme="light"] .col-hero img{filter:brightness(.98) saturate(.96)}

/* ============================================================
   theme toggle (footer, both themes; lives here so styles.css
   stays untouched)
   ============================================================ */
.theme-toggle{
  display:inline-block;margin-top:1.8rem;
  background:none;border:0;cursor:pointer;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.26em;text-transform:lowercase;
  color:var(--cream-faint);transition:color .3s;
}
.theme-toggle:hover{color:var(--gold)}
/* the active side reads a step brighter */
.theme-toggle .tg-d{color:var(--cream-dim)}
html[data-theme="light"] .theme-toggle .tg-d{color:inherit}
html[data-theme="light"] .theme-toggle .tg-l{color:var(--cream-dim)}