/* tiling theme for Strategic AI Architects
   Brass on ink. Loads after the compiled Astro CSS and retunes every token.
   The fixed generative canvas (js/tiling-experience.js) sits at z-index 0;
   all content layers above it on translucent ink so the art reads through. */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Space+Mono:wght@400;700&display=swap");

:root{
  --paper:#0b0a08;
  --paper-card:rgba(24,20,13,.72);
  --paper-deep:rgba(16,13,9,.6);
  --ink:#eee7d8;
  --ink-band:rgba(8,7,5,.82);
  --ink-2:#cfc2a4;
  --ink-3:#a3967a;
  --ox:#c7a24a;
  --ox-deep:#9a7a30;
  --ox-bright:#e6c982;
  --ox-tint:rgba(199,162,74,.12);
  --forest:#a58a3d;
  --line:rgba(199,162,74,.26);
  --line-strong:rgba(199,162,74,.45);
  --line-ink:rgba(230,201,130,.22);
  --f-display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --pnx-mono:"Space Mono",ui-monospace,monospace;
}

html{background:#0b0a08}
body{background:#0b0a08;color:var(--ink)}

/* content layers above the fixed art canvas */
.nav,section,article,main,footer,.footer{position:relative;z-index:2}

/* translucent surfaces so the tiling shows through */
.bg-paper{background:rgba(11,10,8,.66);color:var(--ink)}
.bg-deep{background:rgba(18,15,10,.62);color:var(--ink)}
.bg-ink{background:rgba(8,7,5,.78);color:#eee7d8}
.footer{background:rgba(8,7,5,.86);color:#c0b598}
.nav{background:rgba(11,10,8,.78);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}

/* typography voice: garamond display, mono labels, inter body */
h1,h2,h3,.display,.h2,.h3{font-family:var(--f-display);font-weight:400;letter-spacing:-.01em}
h1 em,h2 em,.display em{font-style:italic;color:transparent;
  background:linear-gradient(100deg,var(--ox),var(--ox-bright) 55%,var(--ox));
  background-size:200% auto;-webkit-background-clip:text;background-clip:text;
  animation:pnxSheen 7s linear infinite}
@keyframes pnxSheen{to{background-position:200% center}}
.eyebrow,.label,.btn,.pill,.tag{font-family:var(--pnx-mono);letter-spacing:.18em}
.eyebrow{color:var(--ox);text-transform:uppercase}

/* buttons: brass fill sweep */
.btn-primary{background:transparent;color:var(--ink);border:1px solid var(--ox);position:relative;overflow:hidden;isolation:isolate;transition:color .4s}
.btn-primary::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,var(--ox),var(--ox-bright));transform:translateY(101%);transition:transform .45s cubic-bezier(.7,0,.2,1);z-index:-1}
.btn-primary:hover{color:#0a0806}
.btn-primary:hover::before{transform:translateY(0)}
.btn-line{color:var(--ink);border-color:var(--line-strong)}
.btn-line:hover{color:var(--ox-bright);border-color:var(--ox)}

/* self drawing underline on inline links */
article a:not(.btn),p a:not(.btn),li a:not(.btn),.footer a{
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;background-size:0% 1px;background-position:0 100%;
  transition:background-size .35s ease,color .3s ease;text-decoration:none}
article a:not(.btn):hover,p a:not(.btn):hover,li a:not(.btn):hover,.footer a:hover{
  background-size:100% 1px;color:var(--ox-bright)}

/* kinetic word reveal */
.pnx-w{display:inline-block;transform:translateY(.85em);opacity:0;
  transition:transform .55s cubic-bezier(.16,1,.3,1),opacity .5s ease}
.pnx-w.in{transform:none;opacity:1}
.pnx-line{display:inline-block;overflow:hidden;padding:.04em .06em;vertical-align:bottom}

/* self drawing rules under section heads */
.section-head{position:relative}
.section-head::after{content:"";display:block;width:100%;height:1px;margin-top:18px;
  background:linear-gradient(90deg,var(--ox),transparent 70%);
  transform:scaleX(0);transform-origin:left;transition:transform .9s cubic-bezier(.16,1,.3,1)}
.section-head.pnx-drawn::after{transform:scaleX(1)}

/* museum inset frame */
.pnx-frame{position:fixed;inset:1.4rem;z-index:75;pointer-events:none;
  border:1px solid rgba(199,162,74,.18);mix-blend-mode:screen}
@media(max-width:760px){.pnx-frame{inset:.7rem}}

/* film grain and vignette above the canvas, below content */
.pnx-vig{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(130% 105% at 55% 42%,transparent 42%,rgba(5,4,3,.55) 82%,rgba(5,4,3,.92) 100%)}
.pnx-grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='130'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='130' height='130' filter='url(%23n)'/%3E%3C/svg%3E")}

/* reading pages: calmer art, stronger scrim for long form legibility */
html[data-art="calm"] .pnx-vig{background:rgba(8,7,5,.55)}
html[data-art="calm"] .bg-paper{background:rgba(11,10,8,.82)}
html[data-art="calm"] .bg-deep{background:rgba(16,13,9,.8)}

/* themed scroll progress: kite and dart drawing themselves down the left rail */
.pnx-prog{position:fixed;left:1.9rem;top:50%;transform:translateY(-50%);z-index:80;
  display:flex;flex-direction:column;align-items:center;gap:.9rem;pointer-events:none}
.pnx-prog svg{width:26px;height:24px;overflow:visible}
.pnx-prog svg path{stroke:var(--ox);stroke-width:1.6;fill:rgba(199,162,74,0)}
.pnx-prog svg #pnx-pd3{stroke:var(--ox-bright);stroke-width:1.1}
.pnx-prog-line{width:1px;height:126px;background:rgba(199,162,74,.14);position:relative;display:block}
.pnx-prog-line i{position:absolute;inset:0;background:linear-gradient(var(--ox),var(--ox-bright));transform-origin:top;transform:scaleY(0)}
.pnx-prog small{font-family:var(--pnx-mono);font-size:.55rem;letter-spacing:.22em;color:var(--ink-3)}
@media(max-width:1200px){.pnx-prog{display:none}}

/* hero scrim: anchors the copy at the top, fades as the exhibition begins */
.pnx-scrim{position:fixed;inset:0;z-index:1;pointer-events:none;transition:opacity .3s linear;
  background:linear-gradient(100deg,rgba(9,8,6,.85) 0%,rgba(9,8,6,.6) 33%,rgba(9,8,6,.1) 60%,transparent 76%)}

/* cursor ring accent, native cursor stays visible */
.pnx-cur{position:fixed;z-index:90;width:30px;height:30px;border:1px solid var(--ox);
  border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;
  transition:width .2s,height .2s,opacity .3s;mix-blend-mode:screen;opacity:0}
.pnx-cur.on{opacity:1}
.pnx-cur.hot{width:52px;height:52px;background:rgba(199,162,74,.12)}
@media(pointer:coarse){.pnx-cur{display:none}}


/* photos sit on brass hairlines */
figure img{border-color:var(--line-strong)!important}
figcaption{font-family:var(--pnx-mono);letter-spacing:.14em;text-transform:uppercase;font-size:.68rem;color:var(--ink-3)}

/* tables and cards that were cream in the light theme */
table{color:var(--ink)}
th,td{border-color:var(--line)!important}
[style*="background:#fff"],[style*="background:#fbf8f2"],[style*="background:#FCFAF6"]{background:var(--paper-card)!important;color:var(--ink)!important}

/* self drawing tiling logo mark */
.pnx-logo *{stroke:var(--ox);stroke-width:1.4;fill:none;stroke-dasharray:150;stroke-dashoffset:150;animation:pnxDraw 2.6s cubic-bezier(.7,0,.3,1) .3s forwards}
.pnx-logo .d2{animation-delay:.7s}
.pnx-logo .d3{animation-delay:1s}
@keyframes pnxDraw{to{stroke-dashoffset:0}}

::selection{background:var(--ox);color:#0a0806}

@media (prefers-reduced-motion:reduce){
  .pnx-logo *{stroke-dashoffset:0;animation:none}
  .pnx-w{transform:none;opacity:1;transition:none}
  .section-head::after{transform:scaleX(1);transition:none}
  h1 em,h2 em,.display em{animation:none}
  .pnx-cur,.pnx-progress{display:none}
}

/* ---------- light mode: cream paper, deep brass accents ---------- */
html[data-theme="light"]{
  --paper:#F7F4EE; --paper-card:#FCFAF6; --paper-deep:#EFE9DD;
  --ink:#16130F; --ink-band:#17140F; --ink-2:#433D34; --ink-3:#6A6253;
  --ox:#9a7a30; --ox-deep:#7a5f22; --ox-bright:#c7a24a; --ox-tint:rgba(154,122,48,.1);
  --forest:#1F4D3A;
  --line:#DED6C6; --line-strong:#CBC2AE; --line-ink:rgba(247,244,238,.16);
}
html[data-theme="light"], html[data-theme="light"] body{background:#F7F4EE;color:var(--ink)}
html[data-theme="light"] .bg-paper{background:rgba(247,244,238,.68);color:var(--ink)}
html[data-theme="light"] .bg-deep{background:rgba(239,233,221,.72);color:var(--ink)}
html[data-theme="light"] .bg-ink{background:rgba(23,20,15,.92);color:#eee7d8}
html[data-theme="light"] .footer{background:rgba(23,20,15,.94);color:#c7c0b3}
html[data-theme="light"] .nav{background:rgba(247,244,238,.86);border-bottom:1px solid var(--line)}
html[data-theme="light"] .pnx-vig{background:radial-gradient(130% 105% at 55% 42%,transparent 56%,rgba(247,244,238,.38) 86%,rgba(247,244,238,.8) 100%)}
html[data-theme="light"] .pnx-scrim{background:linear-gradient(100deg,rgba(247,244,238,.82) 0%,rgba(247,244,238,.46) 30%,rgba(247,244,238,.06) 54%,transparent 70%)}
html[data-theme="light"] .pnx-grain{opacity:.05;mix-blend-mode:multiply}
html[data-theme="light"] .pnx-frame{border-color:rgba(154,122,48,.22);mix-blend-mode:multiply}
html[data-theme="light"] .pnx-cur{mix-blend-mode:multiply}
html[data-theme="light"] .btn-line{color:var(--ink)}
html[data-theme="light"] .pnx-prog-line{background:rgba(154,122,48,.2)}
html[data-theme="light"][data-art="calm"] .pnx-vig{background:rgba(247,244,238,.5)}
html[data-theme="light"][data-art="calm"] .bg-paper{background:rgba(247,244,238,.84)}
html[data-theme="light"][data-art="calm"] .bg-deep{background:rgba(239,233,221,.84)}

/* theme toggle button, injected into the nav */
.pnx-theme{margin-left:12px;width:34px;height:34px;flex:0 0 auto;border:1px solid var(--line-strong);
  border-radius:50%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  background:transparent;color:var(--ox);transition:color .3s,border-color .3s,transform .3s;padding:0}
.pnx-theme:hover{color:var(--ox-bright);border-color:var(--ox);transform:rotate(20deg)}
.pnx-theme svg{width:16px;height:16px;display:block}