/* ArtIntel environment theme v2 · 17 Oct 2026 (PT)
   Drop-in. Restyles the ENVIRONMENT only: page ground, nav, panels, text, accents, washes, light behind cards, interactive surfaces.
   Card safety:
   1) Every token is prefixed --ai-*. Nothing here redefines live tokens (--ink, --fog, --stone, --tide, --gold, --brass-*, --tier-*, --ac-*, --card-*) that card.css / artcards.css read.
   2) Every rule is opt-in by an .ai-* class, an .ai-area-* body class, or html/body. No selector matches .card, .card-wrap, .ac-* or their children,
      except ONE zero-specificity :where() line that pins inherited text colour to the live --ink (what cards inherit today); any card rule beats it.
   3) Card light is drawn by .ai-stage::before BEHIND the card wrapper (z-index:-1, isolated), never on it.
   Not wrapped in @layer on purpose: the live site's unlayered "*{margin:0;padding:0}" reset would otherwise beat every layered control style. */

/* ---------- tokens: dark ---------- */
html[data-theme="dark"]{color-scheme:dark;
 --ai-bg:#0F0E0D;--ai-bg-2:#171513;--ai-bg-3:#1C1A17;
 --ai-line:rgba(226,220,208,.14);--ai-line-2:rgba(226,220,208,.28);--ai-hair:rgba(226,220,208,.32);
 --ai-text:#EEEBE4;--ai-text-2:#A8A49C;--ai-text-3:#8A867E;--ai-gold:#D2BA8A;
 --ai-tide:#86A9BD;--ai-frost:#AFC3CF;--ai-harbour:#8AA2AC;--ai-sage:#8DAE9C;--ai-amber:#D9B47E;--ai-clay:#C9A083;--ai-rose:#C48C82;
 --ai-tide-rgb:134,169,189;--ai-frost-rgb:175,195,207;--ai-harbour-rgb:138,162,172;--ai-sage-rgb:141,174,156;--ai-amber-rgb:217,180,126;--ai-clay-rgb:201,160,131;--ai-rose-rgb:196,140,130;--ai-gold-rgb:210,186,138;
 --ai-hdr:rgba(15,14,13,.88);--ai-panel:rgba(23,21,19,.55);--ai-band:rgba(28,26,23,.75);--ai-mat:#0A0A0B;--ai-shadow:rgba(0,0,0,.92);
 --ai-ph:#C9B98F;--ai-phb:rgba(201,185,143,.45);--ai-legacy-bg:linear-gradient(180deg,#17120E,#120F0C);
 --ai-t-home:#13120F;--ai-t-artist:#121314;--ai-t-umber:rgba(22,18,14,.9);--ai-t-harbour:rgba(17,21,23,.9);--ai-t-tide:rgba(16,22,24,.9);--ai-t-pacific:#0F1719;
 --ai-grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .045 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
/* ---------- tokens: light (steel grey, from live Nordic Frost) ---------- */
html[data-theme="light"]{color-scheme:light;
 --ai-bg:#F2F4F7;--ai-bg-2:#EDF0F4;--ai-bg-3:#E8ECF0;
 --ai-line:#D8DDE5;--ai-line-2:rgba(27,40,56,.24);--ai-hair:rgba(27,40,56,.28);
 --ai-text:#1B2838;--ai-text-2:#4A5664;--ai-text-3:#5C6775;--ai-gold:#6B5631;
 --ai-tide:#2F6488;--ai-frost:#45606F;--ai-harbour:#46606B;--ai-sage:#3F6553;--ai-amber:#755626;--ai-clay:#7D5137;--ai-rose:#874A42;
 --ai-tide-rgb:59,124,165;--ai-frost-rgb:107,163,199;--ai-harbour-rgb:79,112,128;--ai-sage-rgb:74,128,112;--ai-amber-rgb:160,120,60;--ai-clay-rgb:160,104,72;--ai-rose-rgb:150,80,70;--ai-gold-rgb:140,112,62;
 --ai-hdr:rgba(242,244,247,.9);--ai-panel:rgba(255,255,255,.62);--ai-band:rgba(232,236,240,.95);--ai-mat:#FFFFFF;--ai-shadow:rgba(27,40,56,.40);
 --ai-ph:#6B5426;--ai-phb:rgba(107,84,38,.42);--ai-legacy-bg:linear-gradient(180deg,#EDF0F4,#E8ECF0);
 --ai-t-home:#EDF0F4;--ai-t-artist:#E9EFF3;--ai-t-umber:rgba(237,240,244,.95);--ai-t-harbour:rgba(232,236,240,.95);--ai-t-tide:rgba(228,236,242,.95);--ai-t-pacific:#E0EAF1;
 --ai-grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .1  0 0 0 0 .16  0 0 0 0 .22  0 0 0 .045 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---------- environment base ---------- */
/* ---------- CARD EXCLUSION (explicit) ----------
   Card selectors on the live site: .card-wrap, .card, .card-front, .card-back, .artwork, .holoSheen, and every .ac-* class (artcards.css).
   theme.css never targets them. The only line that names them is this zero-specificity pin on the two card ROOTS, which restores the text colour cards
   inherited before the theme (body{color:var(--ink)}). Artist pages get their own pin (card.css body colour) in the ARTIST PAGES section at the end. Any card rule beats it.
   Do NOT put .ai-* classes on elements inside a card. */
:where(body:not(.ai-area-artist)) :where(.card-wrap,.card){color:var(--ink)}

.ai-header{background:var(--ai-hdr);border-bottom:1px solid var(--ai-line);backdrop-filter:blur(8px)}
.ai-nav a{color:var(--ai-text-2)} .ai-nav a:hover,.ai-nav a[aria-current="page"]{color:var(--ai-text)}
.ai-nav a[aria-current="page"]{border-bottom:1px solid var(--ai-gold)}
.ai-text-2{color:var(--ai-text-2)} .ai-text-3{color:var(--ai-text-3)}
.ai-eyebrow{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--ai-text-2)}
.ai-hair{height:1px;border:0;background:linear-gradient(90deg,transparent,var(--ai-hair),transparent)}
.ai-panel{background:var(--ai-panel);border:1px solid var(--ai-line)}
.ai-band{background:linear-gradient(180deg,transparent,var(--ai-band) 50%,transparent)}
.ai-mat{background:var(--ai-mat);border:1px solid var(--ai-line)}
.ai-ph{color:var(--ai-ph);border:1px dashed var(--ai-phb)}
.ai-btn{color:var(--ai-text);border:1px solid var(--ai-line-2);background:transparent}
.ai-btn-gold{color:var(--ai-gold);border:1px solid rgba(var(--ai-gold-rgb),.6);background:transparent}
.ai-theme-toggle{background:none;border:1px solid var(--ai-line-2);color:var(--ai-text-2);font:inherit;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;padding:9px 12px;border-radius:20px;cursor:pointer}

/* ---------- accents (filter palette) ---------- */
.ai-k-tide{--ai-ac:var(--ai-tide);--ai-acr:var(--ai-tide-rgb)} .ai-k-frost{--ai-ac:var(--ai-frost);--ai-acr:var(--ai-frost-rgb)}
.ai-k-harbour{--ai-ac:var(--ai-harbour);--ai-acr:var(--ai-harbour-rgb)} .ai-k-sage{--ai-ac:var(--ai-sage);--ai-acr:var(--ai-sage-rgb)}
.ai-k-amber{--ai-ac:var(--ai-amber);--ai-acr:var(--ai-amber-rgb)} .ai-k-clay{--ai-ac:var(--ai-clay);--ai-acr:var(--ai-clay-rgb)}
.ai-k-rose{--ai-ac:var(--ai-rose);--ai-acr:var(--ai-rose-rgb)} .ai-k-gold{--ai-ac:var(--ai-gold);--ai-acr:var(--ai-gold-rgb)}
.ai-chip{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;letter-spacing:.08em;padding:6px 13px;border-radius:20px;border:1px solid rgba(var(--ai-acr,var(--ai-gold-rgb)),.42);color:var(--ai-ac,var(--ai-gold))}
.ai-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.9}
.ai-chip[aria-pressed="true"],.ai-chip.is-on{background:rgba(var(--ai-acr),.14);border-color:rgba(var(--ai-acr),.7)}
.ai-accent-line{position:relative} .ai-accent-line::before{content:"";position:absolute;left:0;top:-1px;width:56px;height:1px;background:var(--ai-ac,var(--ai-gold))}
.ai-tile{background:linear-gradient(180deg,rgba(var(--ai-acr,var(--ai-gold-rgb)),.06),transparent 60%);border:1px solid var(--ai-line)}
.ai-ac{color:var(--ai-ac)}

/* ---------- ambient + washes ---------- */
.ai-ambient{position:absolute;left:0;right:0;top:0;height:1500px;pointer-events:none;z-index:0;background:var(--ai-amb,none)}
.ai-above{position:relative;z-index:1}
.ai-wash-tide{background:radial-gradient(1100px 520px at 50% 0%,rgba(var(--ai-tide-rgb),.085),transparent 72%),linear-gradient(180deg,var(--ai-t-tide),transparent 85%)}
.ai-wash-harbour{background:radial-gradient(1100px 520px at 60% 0%,rgba(var(--ai-harbour-rgb),.08),transparent 72%),linear-gradient(180deg,var(--ai-t-harbour),transparent 85%)}
.ai-wash-sage{background:radial-gradient(1000px 500px at 20% 0%,rgba(var(--ai-sage-rgb),.075),transparent 72%)}
.ai-wash-amber{background:radial-gradient(1100px 520px at 30% 0%,rgba(var(--ai-amber-rgb),.07),transparent 72%),linear-gradient(180deg,var(--ai-t-umber),transparent 85%)}
.ai-wash-umber{background:radial-gradient(900px 480px at 70% 10%,rgba(var(--ai-clay-rgb),.08),transparent 72%),linear-gradient(180deg,var(--ai-t-umber),transparent 90%)}
html[data-theme="light"] .ai-wash-amber,html[data-theme="light"] .ai-wash-umber{background:radial-gradient(1000px 500px at 50% 0%,rgba(var(--ai-frost-rgb),.10),transparent 72%)}
.ai-legacy-band{border:1px solid rgba(var(--ai-clay-rgb),.32);background:radial-gradient(700px 300px at 85% 0%,rgba(var(--ai-clay-rgb),.13),transparent 70%),var(--ai-legacy-bg)}
html[data-theme="light"] .ai-legacy-band{background:var(--ai-legacy-bg)}

/* ---------- light behind cards (never on them) ---------- */
.ai-stage{position:relative;isolation:isolate}
.ai-stage::before{content:"";position:absolute;inset:-60px -70px;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,var(--ai-glow),transparent)}
.ai-stage-row{position:relative;isolation:isolate}
.ai-stage-row::before{content:"";position:absolute;inset:-40px -20px;z-index:-1;pointer-events:none;background:radial-gradient(60% 70% at 50% 55%,var(--ai-glow),transparent 75%)}
.ai-stage-legacy{--ai-glow:rgba(var(--ai-clay-rgb),.26)}

/* ---------- area moods: put ONE class on <body> (artist pages: see ARTIST PAGES section at the end) ---------- */
body.ai-area-home{--ai-glow:rgba(var(--ai-amber-rgb),.20);--ai-amb:radial-gradient(760px 560px at 76% 26%,rgba(var(--ai-tide-rgb),.14),transparent 70%),radial-gradient(700px 500px at 6% 70%,rgba(var(--ai-amber-rgb),.08),transparent 70%),linear-gradient(180deg,var(--ai-t-home),transparent 90%)}
body.ai-area-collector{--ai-glow:rgba(var(--ai-amber-rgb),.22);--ai-amb:radial-gradient(900px 600px at 30% 10%,rgba(var(--ai-amber-rgb),.10),transparent 70%),radial-gradient(600px 500px at 95% 40%,rgba(var(--ai-rose-rgb),.07),transparent 70%),linear-gradient(180deg,var(--ai-t-umber),transparent 90%)}
body.ai-area-gallery{--ai-glow:rgba(var(--ai-harbour-rgb),.22);--ai-amb:radial-gradient(800px 560px at 80% 20%,rgba(var(--ai-harbour-rgb),.13),transparent 70%),radial-gradient(700px 500px at 0% 60%,rgba(var(--ai-sage-rgb),.06),transparent 70%),linear-gradient(180deg,var(--ai-t-harbour),transparent 90%)}
body.ai-area-pathway{--ai-glow:rgba(var(--ai-tide-rgb),.24);--ai-amb:radial-gradient(1000px 600px at 85% 0%,rgba(var(--ai-frost-rgb),.11),transparent 70%),radial-gradient(800px 700px at 0% 40%,rgba(var(--ai-tide-rgb),.14),transparent 70%),linear-gradient(180deg,var(--ai-t-pacific) 0%,var(--ai-t-tide) 50%,transparent 100%)}
body.ai-area-pathway .ai-ambient{height:2600px}
body.ai-area-legacy{--ai-glow:rgba(var(--ai-clay-rgb),.24);--ai-amb:radial-gradient(900px 560px at 70% 10%,rgba(var(--ai-clay-rgb),.12),transparent 70%),linear-gradient(180deg,var(--ai-t-umber),transparent 90%)}
/* light mode: no warm/tan grounds */
html[data-theme="light"] body.ai-area-home{--ai-glow:rgba(var(--ai-tide-rgb),.18)}
html[data-theme="light"] body.ai-area-collector{--ai-glow:rgba(var(--ai-tide-rgb),.20);--ai-amb:radial-gradient(900px 600px at 30% 10%,rgba(var(--ai-frost-rgb),.12),transparent 70%),radial-gradient(600px 500px at 95% 40%,rgba(var(--ai-harbour-rgb),.08),transparent 70%),linear-gradient(180deg,var(--ai-t-home),transparent 90%)}
html[data-theme="light"] body.ai-area-legacy{--ai-amb:radial-gradient(900px 560px at 70% 10%,rgba(var(--ai-harbour-rgb),.10),transparent 70%),linear-gradient(180deg,var(--ai-t-home),transparent 90%)}

/* ---------- interactive surfaces (generalised from the live nav: .dream-nav a.dn-link + .dn-search input) ----------
   Live recipe, light: rest text #46535f, radius 8px · hover text #10202e on rgba(10,20,35,.06) · active text #8a6a2c on rgba(168,130,60,.12)
                       input rgba(255,255,255,.62) bg, hairline rgba(168,130,60,.35), text #10202e
   Live recipe, dark:  rest text #a9b8c6 · hover text #f2f4f7 on rgba(255,255,255,.06) · active text #e8c897 on the .12 gold tint
                       input rgba(8,14,24,.6) bg, hairline rgba(232,200,151,.45), text #f2f4f7
   Generalised: one accent per control (--ai-ac / --ai-acr, default gold, the nav's own tint). States are tint ALPHAS of that accent:
   rest .00 (quiet) / .05 (filled) · hover .08 · active/selected .12 (exactly the live nav) · hairline .38 rest / .60 hover / .72 active
   focus-visible = 2px solid accent ring + 2px offset (accent text tokens are >=4.5:1, so the ring is well past 3:1) · disabled = opacity .45, no tint. */
html[data-theme="dark"]{--ai-i-rest:#A9B8C6;--ai-i-hover-tx:#F2F4F7;--ai-i-neutral-rgb:255,255,255;--ai-i-field:rgba(8,14,24,.6);--ai-i-placeholder:#A9B8C6;
 --ai-a-rest:0;--ai-a-fill:.05;--ai-a-hover:.08;--ai-a-active:.12;--ai-b-rest:.38;--ai-b-hover:.60;--ai-b-active:.72}
html[data-theme="light"]{--ai-i-rest:#46535F;--ai-i-hover-tx:#10202E;--ai-i-neutral-rgb:10,20,35;--ai-i-field:rgba(255,255,255,.62);--ai-i-placeholder:#5C6775;
 --ai-a-rest:0;--ai-a-fill:.05;--ai-a-hover:.07;--ai-a-active:.12;--ai-b-rest:.35;--ai-b-hover:.55;--ai-b-active:.70}

/* default accent = gold (the live nav tint); zero specificity so .ai-k-* always wins */
:where(.ai-i,.ai-b,.ai-field,.ai-chip,.ai-switch,.ai-claim){--ai-ac:var(--ai-gold);--ai-acr:var(--ai-gold-rgb)}
:where(.ai-link){--ai-ac:var(--ai-tide);--ai-acr:var(--ai-tide-rgb)}
/* quiet nav-style link button (nav, tabs, pagination, arrows, social links) */
.ai-i{color:var(--ai-i-rest);background:transparent;border:1px solid transparent;border-radius:8px;padding:8px 13px;
 text-decoration:none;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s;font:inherit}
.ai-i:hover{color:var(--ai-i-hover-tx);background:rgba(var(--ai-i-neutral-rgb),.06)}
.ai-i[aria-current="page"],.ai-i[aria-selected="true"],.ai-i.is-active,.ai-i:active{color:var(--ai-ac);background:rgba(var(--ai-acr),var(--ai-a-active))}
/* outlined button (secondary actions, social, filters) */
.ai-b{color:var(--ai-ac);background:rgba(var(--ai-acr),var(--ai-a-rest));border:1px solid rgba(var(--ai-acr),var(--ai-b-rest));
 border-radius:2px;padding:12px 20px;font:inherit;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;text-decoration:none;transition:background-color .15s,border-color .15s,color .15s}
.ai-b:hover{background:rgba(var(--ai-acr),var(--ai-a-hover));border-color:rgba(var(--ai-acr),var(--ai-b-hover))}
.ai-b:active,.ai-b[aria-pressed="true"],.ai-b.is-active{background:rgba(var(--ai-acr),var(--ai-a-active));border-color:rgba(var(--ai-acr),var(--ai-b-active))}
.ai-b.ai-fill{background:rgba(var(--ai-acr),var(--ai-a-fill))}
/* the claim button = .ai-b.ai-k-gold.ai-fill (gold is the nav's active tint) */
.ai-b.ai-claim{--ai-ac:var(--ai-gold);--ai-acr:var(--ai-gold-rgb)}
/* chips follow the same alphas */
.ai-chip{transition:background-color .15s,border-color .15s;cursor:pointer}
.ai-chip:hover{background:rgba(var(--ai-acr,var(--ai-gold-rgb)),var(--ai-a-hover));border-color:rgba(var(--ai-acr,var(--ai-gold-rgb)),var(--ai-b-hover))}
/* visited links keep their surface colour (live has a:visited{color:var(--tide)}) */
a.ai-i:visited{color:var(--ai-i-rest)} a.ai-b:visited,a.ai-link:visited{color:var(--ai-ac)}
/* text links in copy */
.ai-link{color:var(--ai-ac,var(--ai-tide));text-decoration:underline;text-decoration-color:rgba(var(--ai-acr,var(--ai-tide-rgb)),.45);text-underline-offset:3px;text-decoration-thickness:1px}
.ai-link:hover{text-decoration-color:currentColor;background:rgba(var(--ai-acr,var(--ai-tide-rgb)),var(--ai-a-hover))}
/* form controls */
.ai-field{font:inherit;font-size:14px;color:var(--ai-text);background:var(--ai-i-field);border:1px solid rgba(var(--ai-acr),var(--ai-b-rest));border-radius:8px;padding:10px 13px}
.ai-field::placeholder{color:var(--ai-i-placeholder)}
.ai-field:hover{border-color:rgba(var(--ai-acr),var(--ai-b-hover))}
select.ai-field{appearance:none;padding-right:34px;background-image:linear-gradient(45deg,transparent 50%,var(--ai-text-2) 50%),linear-gradient(135deg,var(--ai-text-2) 50%,transparent 50%);background-position:calc(100% - 18px) 55%,calc(100% - 13px) 55%;background-size:5px 5px;background-repeat:no-repeat}
.ai-check{accent-color:var(--ai-ac,var(--ai-gold));width:16px;height:16px}
.ai-switch{appearance:none;width:38px;height:22px;border-radius:11px;border:1px solid rgba(var(--ai-acr,var(--ai-gold-rgb)),var(--ai-b-rest));background:rgba(var(--ai-acr,var(--ai-gold-rgb)),var(--ai-a-fill));position:relative;cursor:pointer;vertical-align:middle}
.ai-switch::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:var(--ai-text-2);transition:transform .15s}
.ai-switch:checked{background:rgba(var(--ai-acr,var(--ai-gold-rgb)),var(--ai-a-active));border-color:rgba(var(--ai-acr,var(--ai-gold-rgb)),var(--ai-b-active))}
.ai-switch:checked::after{transform:translateX(16px);background:var(--ai-ac,var(--ai-gold))}
/* focus-visible ring: all interactive classes */
.ai-i:focus-visible,.ai-b:focus-visible,.ai-chip:focus-visible,.ai-link:focus-visible,.ai-field:focus-visible,.ai-field:focus,.ai-check:focus-visible,.ai-switch:focus-visible,.ai-theme-toggle:focus-visible{
 outline:2px solid var(--ai-ac,var(--ai-gold));outline-offset:2px}
.ai-field:focus{border-color:rgba(var(--ai-acr),var(--ai-b-active))}
/* disabled */
.ai-i:disabled,.ai-b:disabled,.ai-field:disabled,.ai-chip[aria-disabled="true"],.ai-b[aria-disabled="true"],.ai-switch:disabled{opacity:.45;cursor:not-allowed;background:transparent;pointer-events:none}
@media (prefers-reduced-motion:reduce){.ai-i,.ai-b,.ai-chip,.ai-switch::after{transition:none}}

@media (prefers-reduced-motion:reduce){.ai-header{backdrop-filter:none}}

/* ---------- environment base: html/body only (beats the live body{background:var(--fog)} rule by specificity). No card element is matched. ---------- */
html[data-theme]:not([data-ai-theme-lock]){background:var(--ai-bg)}
html[data-theme] body:not(.ai-area-artist){position:relative;background-color:var(--ai-bg);background-image:var(--ai-grain);color:var(--ai-text)}

/* ---------- ARTIST PAGES (ON by default · Mark, 11:42 AM PT, 17 Oct) ----------
   Artist pages follow the site theme: warm black in dark mode, the live steel grey (#F2F4F7 family) in light mode,
   replacing the forced blue-black (card.css body: radial #1A2535 -> --deep-ink #080e18). Template: <body class="ai-area-artist">,
   and remove the hard-coded data-theme="dark" from <html>. Colour only; card.css layout (html overflow:hidden, 100dvh body) is untouched.
   Opt-out per page if ever needed: <html data-theme="dark" data-ai-theme-lock> (theme.js then keeps the page's own mode). */
html[data-theme] body.ai-area-artist{background-color:var(--ai-bg);background-image:var(--ai-grain);color:var(--ai-text)}
/* card exclusion: restore the colour cards inherited before (card.css body{color:var(--fog)}); zero specificity, any card rule wins */
:where(body.ai-area-artist) :where(.card-wrap,.card){color:var(--fog)}
body.ai-area-artist{--ai-glow:rgba(var(--ai-tide-rgb),.24);--ai-amb:radial-gradient(620px 640px at 50% 34%,rgba(var(--ai-tide-rgb),.15),transparent 70%),radial-gradient(800px 500px at 90% 0%,rgba(var(--ai-gold-rgb),.07),transparent 70%),linear-gradient(180deg,var(--ai-t-artist),transparent 90%)}