/* Generative Reality — shares the Generative Jax house look so the two sites read as one family. */
:root{
  --ink:#1B2227;--mid:#4E5E68;--rule:#CBD5DB;--slate:#1E4A5F;--slate-dark:#143342;
  --ember:#B34E24;--wash:#F1F5F7;--soft:#F7E6DD;--paper:#FFFFFF;--desk:#FFFFFF;
  --fd:"Fraunces",Georgia,serif;--fb:"Newsreader",Georgia,serif;--fm:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
html,body{margin:0}
html{scroll-behavior:smooth}
body{background:var(--desk);color:var(--ink);font-family:var(--fb);font-size:19px;line-height:1.6;-webkit-font-smoothing:antialiased}
p{margin:0 0 .9em}
a{color:var(--ember)}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--ember);outline-offset:3px}
img,svg{max-width:100%}

/* top bar */
.top{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.97);backdrop-filter:blur(6px);border-bottom:2px solid var(--slate)}
.top .in{max-width:1180px;margin:0 auto;padding:0 18px;min-height:62px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.brand{font-family:var(--fm);font-size:12px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--slate);text-decoration:none;white-space:nowrap}
.tabs{display:flex;gap:2px;background:var(--wash);padding:4px;border-radius:999px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{font-family:var(--fb);font-size:16px;color:var(--mid);text-decoration:none;padding:7px 15px;border-radius:999px;white-space:nowrap}
.tabs a:hover{color:var(--slate)}
.tabs a[aria-current=page]{background:var(--slate);color:#fff;font-weight:600}
.tabs a[aria-current=page] b{color:#F2A97F}
.hub{font-family:var(--fm);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ember);text-decoration:none;white-space:nowrap}
@media (max-width:860px){
  .top .in{flex-wrap:wrap;padding:10px 16px;justify-content:center}
  .brand{width:100%;text-align:center}
  .hub{display:none}
  .tabs a{font-size:15px;padding:6px 12px}
}

/* pages are sheets of paper on the desk, like the Generative Jax book */
main{padding:34px 16px 60px}
.page{max-width:900px;margin:0 auto 34px;background:var(--paper);box-shadow:0 10px 40px rgba(20,51,66,.08),0 1px 3px rgba(20,51,66,.06);padding:64px 72px}
@media (max-width:700px){.page{padding:40px 22px}}
.runhead{display:flex;justify-content:space-between;gap:12px;font-family:var(--fm);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--slate);border-bottom:2px solid var(--slate);padding-bottom:8px;margin-bottom:28px}
.runhead span:last-child{color:var(--mid)}

.kicker{font-family:var(--fd);font-style:italic;font-weight:300;color:var(--ember);font-size:clamp(24px,3.4vw,34px);margin:0 0 6px}
h1,h2,h3{font-family:var(--fd);font-weight:300;color:var(--slate);line-height:1.05;margin:0}
h1.display{font-size:clamp(54px,10vw,112px);letter-spacing:-.01em;text-transform:uppercase}
h1{font-size:clamp(40px,6vw,64px);margin-bottom:18px}
h2{font-size:clamp(32px,4.4vw,46px);margin-bottom:16px}
h3{font-size:26px;margin-bottom:8px}
.is{color:var(--ember);font-style:italic}
.dek{font-family:var(--fb);font-size:clamp(22px,2.6vw,28px);line-height:1.3;color:var(--ink);margin:22px 0 0;max-width:30ch}
.bar{width:120px;height:3px;background:var(--ember);border:0;margin:30px 0}
.label{font-family:var(--fm);font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ember);margin:0 0 10px;display:block}
.lede{font-size:21px;color:var(--ink)}
.muted{color:var(--mid)}
.quote{font-family:var(--fd);font-style:italic;font-weight:300;font-size:22px;color:var(--mid);margin:0 0 34px}

/* "IS" ladder on the cover */
.ladder{list-style:none;padding:0;margin:26px 0 0;border-top:1px solid var(--rule)}
.ladder li{display:flex;gap:18px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--rule);font-size:21px}
.ladder li b{font-family:var(--fm);font-size:12px;letter-spacing:.2em;color:var(--ember);min-width:24px}

/* buttons */
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.btn{display:inline-block;font-family:var(--fb);font-size:17px;font-weight:600;text-decoration:none;padding:12px 22px;border-radius:999px;border:2px solid var(--slate);color:var(--slate)}
.btn.solid{background:var(--slate);color:#fff}
.btn.solid:hover{background:var(--slate-dark)}
.btn:hover{border-color:var(--slate-dark)}

/* grids and cards */
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
@media (max-width:760px){.g2,.g3{grid-template-columns:1fr}}
.card{border:1px solid var(--rule);padding:24px 24px 20px;background:var(--paper)}
.card .label{margin-bottom:6px}
.card a.more{font-family:var(--fm);font-size:12px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none}
.wash{background:var(--wash);padding:30px 32px;margin:28px 0}
.soft{background:var(--soft);padding:30px 32px;margin:28px 0}
.big{font-family:var(--fd);font-weight:300;font-size:clamp(34px,5vw,52px);color:var(--slate);line-height:1.08;margin:0 0 10px}

/* the inside-out glossary */
.glossary{list-style:none;padding:0;margin:20px 0 0;columns:2;column-gap:40px}
@media (max-width:700px){.glossary{columns:1}}
.glossary li{break-inside:avoid;padding:10px 0;border-bottom:1px dotted var(--rule);font-size:18px}
.glossary li em{font-style:normal;color:var(--ember);font-family:var(--fd);font-weight:400}

/* the hub page break: dark slate band pointing to generativejax.com */
.hubband{max-width:900px;margin:0 auto 34px;background:var(--slate);color:#fff;padding:54px 72px}
@media (max-width:700px){.hubband{padding:40px 22px}}
.hubband h2{color:#fff}
.hubband .label{color:#F2A97F}
.hubband p{color:#DCE6EB}
.hubband .btn{border-color:#fff;color:#fff}
.hubband .btn.solid{background:#fff;color:var(--slate)}

/* simple chip row */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0;padding:0;list-style:none}
.chips li{font-family:var(--fm);font-size:12px;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--rule);padding:7px 12px;color:var(--slate)}

/* foot */
.foot{max-width:900px;margin:0 auto;border-top:2.5px solid var(--slate);padding:18px 4px 40px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-family:var(--fm);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mid)}
.foot a{color:var(--slate);text-decoration:none}

/* ---------- Manifesto ---------- */
.visions{display:grid;gap:0;margin-top:8px;border-top:1px solid var(--rule)}
.vision{display:grid;grid-template-columns:150px 1fr;gap:28px;padding:26px 0;border-bottom:1px solid var(--rule)}
.vision h3{font-size:30px;margin:0;line-height:1.1}
.vision p{margin:0}
@media (max-width:700px){.vision{grid-template-columns:1fr;gap:8px}}
.question{font-family:var(--fd);font-weight:300;font-size:clamp(30px,4.6vw,46px);color:var(--slate);margin:34px 0 0}
.question em{color:var(--ember)}

/* the agent: the one dark sheet on the page */
.agent{max-width:900px;margin:0 auto 34px;background:var(--slate-dark);color:#E6EEF2;padding:54px 72px;scroll-margin-top:90px}
@media (max-width:700px){.agent{padding:36px 18px}}
.agent .runhead{color:#F2A97F;border-color:#F2A97F}
.agent .runhead span:last-child{color:#9FB6C2}
.agent h2{color:#fff}
.agent-bubble{font-family:var(--fd);font-weight:300;font-size:clamp(22px,3vw,28px);line-height:1.35;color:#fff;margin:0 0 22px;max-width:34ch}
#conversation{display:none;flex-direction:column;gap:12px;max-height:440px;overflow-y:auto;margin:0 0 20px;padding:4px 4px 4px 0}
#conversation.active{display:flex}
.msg{max-width:85%;padding:13px 17px;font-size:17px;line-height:1.55;white-space:pre-wrap;min-width:0}
.msg.user{align-self:flex-end;background:var(--ember);color:#fff;border-radius:16px 16px 4px 16px}
.msg.assistant{align-self:flex-start;background:#fff;color:var(--ink);border-radius:16px 16px 16px 4px}
.msg.thinking::after{content:"Trent is writing";font-family:var(--fm);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mid);animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.msg.thinking::after{animation:none}}
.chat-form{display:flex;gap:10px;background:#fff;border-radius:999px;padding:6px 6px 6px 22px}
.chat-form .field{flex:1;min-width:0;border:0;outline:0;font-family:var(--fb);font-size:18px;color:var(--ink);background:transparent}
.chat-form .send{flex:none;width:46px;height:46px;border-radius:50%;border:0;background:var(--ember);color:#fff;font-size:20px;cursor:pointer}
.chat-form .send:disabled{opacity:.5;cursor:default}
.chat-form:focus-within{box-shadow:0 0 0 3px #F2A97F}
.is-label{font-family:var(--fd);font-size:24px;color:#fff;margin:30px 0 12px}
.is-label em{color:#F2A97F}
.chip-row{display:flex;flex-wrap:wrap;gap:8px}
.chip-row[hidden]{display:none}
.chip{font-family:var(--fb);font-size:16px;padding:8px 16px;border-radius:999px;border:1px solid #5E8396;background:transparent;color:#fff;cursor:pointer}
.chip:hover{background:#fff;color:var(--slate-dark);border-color:#fff}
.chat-toggle{margin:26px 0 12px;background:none;border:0;padding:0;font-family:var(--fm);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#F2A97F;cursor:pointer}
.chat-toggle .toggle-icon{display:inline-block;transition:transform .2s}
.chat-toggle[aria-expanded=true] .toggle-icon{transform:rotate(45deg)}

/* book cover drawn in type */
.bookrow{display:grid;grid-template-columns:220px 1fr;gap:44px;align-items:start}
@media (max-width:700px){.bookrow{grid-template-columns:1fr}}
.cover{display:flex;flex-direction:column;justify-content:space-between;aspect-ratio:2/3;max-width:220px;background:var(--slate);color:#fff;padding:22px 18px;text-decoration:none;box-shadow:8px 10px 0 var(--soft)}
.cover small{font-family:var(--fm);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:#F2A97F}
.cover b{font-family:var(--fd);font-weight:300;font-size:26px;line-height:1.05}
.cover b i{color:#F2A97F}
.cover span{font-family:var(--fd);font-style:italic;font-size:15px}
.cover em{font-family:var(--fm);font-style:normal;font-size:10px;letter-spacing:.16em;text-transform:uppercase;border-top:1px solid #5E8396;padding-top:10px}
.signoff{font-family:var(--fd);font-style:italic;font-size:22px;color:var(--slate);margin-top:6px}
.concepts .chip{border-color:var(--rule);color:var(--slate);font-family:var(--fd);font-size:19px}
.concepts .chip i{color:var(--ember)}
.concepts .chip:hover{background:var(--slate);color:#fff;border-color:var(--slate)}
.concepts .chip:hover i{color:#F2A97F}

/* book list sign-up */
.notify{margin-top:40px;padding:30px 32px;background:var(--wash);scroll-margin-top:90px}
@media (max-width:700px){.notify{padding:24px 18px}}
.notify h3{margin-bottom:8px}
.notify-form{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.notify-form input{flex:1 1 220px;min-width:0;font-family:var(--fb);font-size:17px;color:var(--ink);background:var(--paper);border:1px solid var(--rule);border-radius:999px;padding:12px 18px}
.notify-form input:focus{outline:2px solid var(--ember);outline-offset:1px;border-color:transparent}
.notify-form .btn{border:0;cursor:pointer}
.notify-form .btn:disabled{opacity:.6;cursor:default}
.notify-msg{margin:12px 0 0;min-height:1.4em;font-size:17px}
.notify-msg.ok{color:var(--slate);font-weight:600}
.notify-msg.err{color:var(--ember)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.substack{display:block;width:100%;max-width:100%;height:320px;margin-top:16px;border:1px solid var(--rule);background:#fff}

/* manifesto: the book stands apart from the Generative Jax palette, in black and white */
.attrib{font-family:var(--fd);font-style:italic;font-size:22px;color:var(--mid);text-align:right;margin:22px 0 0}
.cover{background:#111;color:#fff;box-shadow:8px 10px 0 #d9d9d9}
.cover small{color:#bdbdbd}
.cover b i{color:#fff}
.cover em{border-top-color:#555;color:#e6e6e6}

/* Trent's opening line on one line, common questions always open */
.agent-bubble{font-size:clamp(18px,2vw,21px);max-width:none}
@media (min-width:760px){.agent-bubble{white-space:nowrap}}
.faq-label{font-family:var(--fm);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#F2A97F;margin:26px 0 12px}