/*
File: assets/jta.css
Creator: Mark Kiessling
Created: July 16th, 2026
Purpose: Shared stylesheet for the Judgment Technology Advisory public
         content pages (About, The Playbook, Services, Technology
         Experience, Insights, Contact, and the custom 404). Design tokens,
         type system, header, and component styles are carried verbatim
         from the established homepage (index.html) so every new page is a
         natural extension of the existing dark-gold Justice identity.
         The homepage itself is intentionally left unchanged and does not
         depend on this file.
Related files: all *.html content pages, assets/jta-ui.js, assets/jta-quotes.js
Revision history:
  July 16th, 2026 - Created for the public content build (EWO-B/content).
*/

*{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#0a1220;--bg2:#0d1828;--panel:#101f34;--ink:#ece9df;--muted:#96a2b2;--gold:#c8a34e;--gold2:#e2c574;--hair:rgba(200,163,78,.28);--hair2:rgba(255,255,255,.08);--success:#83b998;--danger:#d58383;--max:1160px}
html[data-theme="light"]{--bg:#f4f1e8;--bg2:#fbf9f3;--panel:#fff;--ink:#14243a;--muted:#5f6b79;--gold:#947426;--gold2:#ad8c38;--hair:rgba(148,116,38,.30);--hair2:rgba(20,36,58,.10);--success:#477b59;--danger:#a84f4f}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:Inter,system-ui,sans-serif;line-height:1.65;overflow-x:hidden}
a{color:inherit}
.wrap{width:min(var(--max),calc(100% - 44px));margin:auto}
.eyebrow{color:var(--gold);font-size:11px;font-weight:700;letter-spacing:3.2px;text-transform:uppercase}
.skipLink{position:absolute;left:-9999px;top:0;z-index:100;padding:10px 16px;background:var(--gold);color:#0a1220;font-weight:700;border-radius:0 0 6px 0}
.skipLink:focus{left:0}

/* Header / brand / navigation ------------------------------------------- */
header{position:sticky;top:0;z-index:40;border-bottom:1px solid var(--hair2);background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px)}
.bar{min-height:74px;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none}
.brandName{line-height:1.02}
.brandPrimary{display:block;font-family:"Playfair Display",Georgia,serif;font-size:23px;font-weight:700;letter-spacing:.8px}
.brandSecondary{display:block;margin-top:3px;color:var(--gold);font-size:9px;font-weight:700;letter-spacing:3px;text-transform:uppercase}
.siteNav{margin-left:auto;display:flex;flex-wrap:wrap;gap:22px;align-items:center}
.siteNav a{color:var(--muted);font-size:13px;font-weight:600;text-decoration:none;padding:4px 0;white-space:nowrap}
.siteNav a:hover,.siteNav a:focus-visible{color:var(--gold);outline:none}
.siteNav a[aria-current="page"]{color:var(--gold)}
.themeToggle{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--hair2);border-radius:50%;background:transparent;color:var(--muted);cursor:pointer}
.themeToggle:hover,.themeToggle:focus-visible{color:var(--gold);border-color:var(--gold);outline:none}
.themeToggle svg{width:18px;height:18px}
.sunIcon,.moonIcon{display:none}
html[data-theme="dark"] .sunIcon{display:block}
html[data-theme="light"] .moonIcon{display:block}
.button{display:inline-flex;min-height:46px;align-items:center;justify-content:center;padding:0 22px;border:1px solid var(--gold);border-radius:6px;background:var(--gold);color:#0a1220;font-size:13px;font-weight:700;text-decoration:none;cursor:pointer}
.button:hover{background:var(--gold2);border-color:var(--gold2)}
.buttonSecondary{background:transparent;color:var(--ink);border-color:var(--hair)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* Page hero + sections + prose ------------------------------------------ */
.pageHero{position:relative;overflow:hidden;padding:76px 0 40px}
.pageHero:before{content:"";position:absolute;inset:0;background:radial-gradient(700px 340px at 82% 0%,color-mix(in srgb,var(--gold) 13%,transparent),transparent 70%)}
.pageHero .wrap{position:relative}
.pageHero h1{max-width:20ch;margin:16px 0 16px;font-family:"Playfair Display",Georgia,serif;font-size:clamp(34px,5vw,58px);font-weight:600;line-height:1.1}
.pageHero h1 em{color:var(--gold);font-weight:500;font-style:italic}
.pageLead{max-width:72ch;color:var(--muted);font-size:clamp(16px,1.5vw,18px);font-weight:300}
.pageLead strong{color:var(--ink);font-weight:600}
.crumb{margin-bottom:6px;color:var(--muted);font-size:12px}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--gold)}
section{padding:64px 0}
.sectionHead{max-width:820px;margin-bottom:40px}
.sectionHead h2{margin:10px 0 14px;font-family:"Playfair Display",Georgia,serif;font-size:clamp(28px,4vw,44px);font-weight:600;line-height:1.15}
.sectionHead p{color:var(--muted);font-size:16px;font-weight:300}
.prose{max-width:74ch}
.prose p{color:var(--muted);font-size:15.5px;margin-bottom:18px}
.prose p strong{color:var(--ink);font-weight:600}
.prose h3{margin:30px 0 10px;font-family:"Playfair Display",Georgia,serif;font-size:24px;font-weight:600;color:var(--ink)}
.altband{background:var(--bg2);border-top:1px solid var(--hair2);border-bottom:1px solid var(--hair2)}

/* Reused card / panel / list components (match homepage) ----------------- */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;border:1px solid var(--hair2);background:var(--hair2)}
.card{padding:28px 25px;background:var(--bg)}
.card:hover{background:var(--panel)}
.cardNo{color:var(--gold);font-family:"Playfair Display",Georgia,serif;font-size:13px}
.card h3{margin:14px 0 9px;font-size:17px}
.card p{color:var(--muted);font-size:13.5px}
.panelGrid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.panel{padding:30px;border:1px solid var(--hair2);border-radius:9px;background:var(--panel)}
.panel h3{margin-bottom:12px;font-family:"Playfair Display",Georgia,serif;font-size:24px}
.panel p,.panel li{color:var(--muted);font-size:13.5px}
.panel ul{margin-top:16px;list-style:none}
.panel li{margin-bottom:10px}
.checkList{margin-top:16px;list-style:none}
.checkList li{position:relative;margin-bottom:11px;padding-left:27px;color:var(--muted);font-size:13.5px}
.checkList li:before{content:"\2713";position:absolute;left:0;color:var(--success)}
.tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}
.tags span{padding:7px 12px;border:1px solid var(--hair);border-radius:20px;color:var(--muted);font-size:12px}
.boundary{margin-top:22px;padding:18px 20px;border-left:3px solid var(--gold);background:color-mix(in srgb,var(--gold) 7%,transparent);color:var(--muted);font-size:13px}

/* Playbook entries ------------------------------------------------------- */
.entry{padding:30px;border:1px solid var(--hair2);border-radius:10px;background:var(--panel);margin-bottom:18px}
.entry:hover{border-color:var(--hair)}
.entryTop{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px;margin-bottom:6px}
.entryTop h3{font-family:"Playfair Display",Georgia,serif;font-size:24px;font-weight:600}
.entryMeta{color:var(--gold2);font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase}
.entryRole{color:var(--muted);font-size:12.5px;margin-bottom:14px}
.entry p{color:var(--muted);font-size:14px;margin-bottom:10px}
.entry p strong{color:var(--ink);font-weight:600}
.factNote{margin-top:12px;padding:12px 14px;border-left:3px solid var(--gold);background:color-mix(in srgb,var(--gold) 7%,transparent);color:var(--muted);font-size:12.5px}

/* Services --------------------------------------------------------------- */
.svcGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.svc{padding:28px;border:1px solid var(--hair2);border-radius:10px;background:var(--panel)}
.svc h3{font-family:"Playfair Display",Georgia,serif;font-size:22px;font-weight:600;margin-bottom:12px}
.svc dl{display:grid;gap:10px}
.svc dt{color:var(--gold2);font-size:11px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;margin-top:6px}
.svc dd{color:var(--muted);font-size:13.5px}

/* Technology groups ------------------------------------------------------ */
.techGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.techGroup{padding:26px;border:1px solid var(--hair2);border-radius:10px;background:var(--panel)}
.techGroup h3{font-size:17px;margin-bottom:14px}
.techGroup .lvl{display:block;margin-bottom:12px;color:var(--gold);font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase}

/* Insights / articles ---------------------------------------------------- */
.articleGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.article{padding:28px;border:1px solid var(--hair2);border-radius:10px;background:var(--panel)}
.article h3{font-family:"Playfair Display",Georgia,serif;font-size:20px;font-weight:600;margin-bottom:10px;line-height:1.25}
.article p{color:var(--muted);font-size:13.5px}
.article .status{display:inline-block;margin-top:16px;padding:5px 11px;border:1px solid var(--hair);border-radius:20px;color:var(--gold2);font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase}

/* Random industry quote -------------------------------------------------- */
.quoteBand{padding:60px 0;border-top:1px solid var(--hair2);border-bottom:1px solid var(--hair2);background:var(--bg2)}
.quoteBox{max-width:900px;margin:auto;text-align:center}
.quoteBox .eyebrow{display:block;margin-bottom:16px}
.quoteBox blockquote{font-family:"Playfair Display",Georgia,serif;font-size:clamp(22px,3.2vw,34px);font-style:italic;font-weight:600;line-height:1.3;color:var(--ink)}

/* Contact ---------------------------------------------------------------- */
.contactRow{display:flex;flex-wrap:wrap;gap:42px;margin-top:26px}
.contactRow a{text-decoration:none}
.contactLabel{display:block;margin-bottom:4px;color:var(--gold);font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase}
.finalCta{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}

/* Footer ----------------------------------------------------------------- */
footer{padding:32px 0 38px;border-top:1px solid var(--hair2);color:var(--muted);font-size:12px}
.footerRow{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;align-items:center}
.footerNav{display:flex;flex-wrap:wrap;gap:18px}
.footerNav a{color:var(--muted);text-decoration:none}
.footerNav a:hover{color:var(--gold)}

/* Reveal animation + reduced motion + responsive ------------------------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s ease}
.reveal.visible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .reveal{opacity:1;transform:none;transition:none}
 *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
@media(max-width:980px){
 .grid3,.svcGrid,.techGrid,.articleGrid,.panelGrid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
 .wrap{width:min(var(--max),calc(100% - 28px))}
 .grid3,.svcGrid,.techGrid,.articleGrid,.panelGrid{grid-template-columns:1fr}
 section{padding:52px 0}
 .siteNav{gap:16px}
 .siteNav a{font-size:12.5px}
 .contactRow{gap:26px}
}

/* Technology Across Generations ----------------------------------------- */
.eraGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.era{padding:22px;border:1px solid var(--hair2);border-radius:10px;background:var(--panel)}
.era .n{color:var(--gold);font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase}
.era h3{font-size:16px;margin:8px 0 7px}
.era p{color:var(--muted);font-size:12.8px}
details.gen{border:1px solid var(--hair2);border-radius:10px;background:var(--panel);margin-bottom:14px;overflow:hidden}
details.gen>summary{cursor:pointer;list-style:none;padding:20px 24px;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
details.gen>summary::-webkit-details-marker{display:none}
details.gen>summary::marker{content:""}
.gen summary h3{font-family:"Playfair Display",Georgia,serif;font-size:20px;font-weight:600}
.gen summary .hint{color:var(--muted);font-size:12.5px;flex:1 1 auto}
.gen summary .pm{margin-left:auto;color:var(--gold);font-size:24px;line-height:.7;font-weight:400}
details.gen[open]>summary .pm:after{content:"\2013"}
details.gen:not([open])>summary .pm:after{content:"+"}
.gen summary:focus-visible{outline:2px solid var(--gold);outline-offset:-4px}
.genBody{padding:2px 24px 22px}
.genBody p{color:var(--muted);font-size:13.5px;margin-bottom:12px}
.genBody .subLbl{display:block;margin:14px 0 8px;color:var(--gold2);font-size:11px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase}
.matrixGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.matrixCard{padding:24px;border:1px solid var(--hair2);border-radius:10px;background:var(--panel)}
.matrixCard h3{font-size:15px;margin-bottom:4px}
.matrixCard .desc{color:var(--muted);font-size:12.5px;margin-bottom:12px}
.posBand{padding:60px 0;border-top:1px solid var(--hair2);border-bottom:1px solid var(--hair2);background:var(--bg2)}
.posBand .wrap{max-width:900px}
.posBand p{font-family:"Playfair Display",Georgia,serif;font-size:clamp(20px,2.8vw,30px);font-style:italic;font-weight:600;line-height:1.32;margin-bottom:18px}
.posBand p:last-child{margin-bottom:0}
.posBand strong{color:var(--gold)}
.techContext{margin-top:16px;padding-top:14px;border-top:1px solid var(--hair2)}
.techContext .tcLabel{display:block;margin-bottom:9px;color:var(--gold);font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase}
.techContext .tags{margin-top:0}
.techContext .tags span{font-size:11.5px;padding:5px 10px}
@media(max-width:980px){.eraGrid{grid-template-columns:repeat(2,1fr)}.matrixGrid{grid-template-columns:1fr}}
@media(max-width:760px){.eraGrid{grid-template-columns:1fr}}

/* AI Systems page ------------------------------------------------------- */
.statusBadge{display:inline-flex;align-items:center;gap:8px;padding:5px 13px;border-radius:20px;font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;border:1px solid var(--hair);color:var(--muted);vertical-align:middle}
.statusBadge:before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;flex:0 0 auto}
.statusBadge.active{color:var(--success);border-color:var(--success)}
.statusBadge.proto{color:var(--gold2);border-color:var(--gold)}
.statusBadge.planned{color:var(--muted)}
.statusBadge.research{color:#8fb0d6;border-color:#8fb0d6}
.badgeRow{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 4px}
.narrative{padding:26px;border:1px solid var(--hair2);border-radius:10px;background:var(--panel)}
.narrative .exLabel{display:block;margin-bottom:8px;color:var(--gold);font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase}
.narrative h3{font-family:"Playfair Display",Georgia,serif;font-size:19px;font-weight:600;margin-bottom:10px;line-height:1.25}
.narrative p{color:var(--muted);font-size:13.5px}
.workflow{counter-reset:step;list-style:none;max-width:860px;margin-top:8px}
.workflow li{position:relative;padding:2px 0 16px 46px;color:var(--muted);font-size:14px}
.workflow li:before{counter-increment:step;content:counter(step);position:absolute;left:0;top:-3px;width:31px;height:31px;border-radius:50%;border:1px solid var(--gold);color:var(--gold);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.capCols{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.capCol{padding:22px;border:1px solid var(--hair2);border-radius:10px;background:var(--panel)}
.capCol h4{font-size:12px;letter-spacing:1.2px;text-transform:uppercase;margin-bottom:12px}
.capCol.now h4{color:var(--success)}
.capCol.dev h4{color:var(--gold2)}
.capCol.plan h4{color:#8fb0d6}
.capCol ul{list-style:none}
.capCol li{position:relative;padding-left:20px;margin-bottom:9px;color:var(--muted);font-size:13px}
.capCol li:before{content:"\2013";position:absolute;left:0;color:var(--gold)}
.ethicsGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;border:1px solid var(--hair2);background:var(--hair2)}
.ethicsGrid .card h4{font-size:14px;margin-bottom:7px}
@media(max-width:900px){.capCols{grid-template-columns:1fr}.ethicsGrid{grid-template-columns:1fr}}