/* 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}
}

/* Fix audit "Run the Audit" buttons: prevent mono-text clipping in the form row */
.insp-form .field{align-items:stretch}
.insp-form .input{min-width:0;flex:1 1 auto}
.insp-form .btn{flex:0 0 auto;white-space:nowrap;letter-spacing:.05em;padding-left:20px;padding-right:20px}
@media(max-width:560px){.insp-form .field{flex-direction:column}.insp-form .btn{width:100
/* Fix audit "Run the Audit" buttons: prevent mono-text clipping in the form row */
.insp-form .field{align-items:stretch}
.insp-form .input{min-width:0;flex:1 1 auto}
.insp-form .btn{flex:0 0 auto;white-space:nowrap;letter-spacing:.05em;padding-left:20px;padding-right:20px}
@media(max-width:560px){.insp-form .field{flex-direction:column}.insp-form .btn{width:100%}}

/* Fix "Scan another" reset button: strip default <button> chrome so text is visible on the dark card */
.insp-reset{-webkit-appearance:none;appearance:none;background:transparent;border:0;border-bottom:1.5px solid #f2eee6;color:#f2eee6;cursor:pointer;padding:0 0 2px}
.insp-reset:hover{color:var(--ox-bright);border-bottom-color:var(--ox-bright)}
button.insp-reset{-webkit-appearance:none!important;appearance:none!important;background:none!important;background-color:transparent!important;border:0!important;border-bottom:1.5px solid #f2eee6!important;color:#f2eee6!important;box-shadow:none!important;padding:0 0 2px!important;font-family:var(--pnx-mono)!important}
button.insp-reset:hover{color:var(--ox-bright)!important;border-bottom-color:var(--ox-bright)!important}
/* Fix select dropdown options: Mike's light .input text made native <option>s unreadable on white */
.input option, select.input option{color:#16130f !important;background:#ffffff !important}