/* The site — extends css/eras/era-2029.css (the site's design system)
   with the project grid, timeline, contact, and the voice assistant. */

/* hero action row: solid + ghost buttons in the calm idiom */
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
body[data-era="2029"] .hero .hero-actions{margin-top:8px}
body[data-era="2029"] .cta-ghost{
  display:inline-block;
  font-family:"Inter",sans-serif;font-weight:400;font-size:14px;
  color:#171715;background:transparent;
  padding:14px 24px;border:1px solid rgba(23,23,21,.18);border-radius:999px;
  text-decoration:none;
  transition:border-color .25s, background .25s;
}
body[data-era="2029"] .cta-ghost:hover{border-color:rgba(23,23,21,.4);background:rgba(255,255,255,.5)}
body[data-era="2029"] .hero .cta{text-decoration:none}
body[data-era="2029"] .signup .cta{
  background:#171715;color:#f6f5f1;border-radius:999px;padding:14px 24px;
  font-size:14px;text-decoration:none;display:inline-block;
}
body[data-era="2029"] .signup .cta::after{content:" →"}

/* ---- projects: the first thing under the hero ---------------------- */
body[data-era="2029"] .topbar .brand{color:inherit;text-decoration:none}
body[data-era="2029"] .work{padding:8px 0 96px}
/* the hero hands straight over to the work */
body[data-era="2029"] .hero:not(.eras-hero){padding-bottom:48px}
body[data-era="2029"] .work .section-label,
body[data-era="2029"] .experience .section-label{
  font-family:"JetBrains Mono",monospace;font-size:11px;font-weight:400;color:#5a594f;
  text-align:left;letter-spacing:0;margin:0 0 32px;
}
body[data-era="2029"] .work-head{
  padding-top:32px;margin-bottom:28px;border-top:1px solid rgba(23,23,21,.08);
}
body[data-era="2029"] .work-head .section-label{margin:0}
.work-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;
  grid-auto-rows:1fr;          /* every card the same height */
}

/* ---- the card: thumbnail, body, action row ---------------------------- */
body[data-era="2029"] .project{
  --tint:#dde3dc; --ink:#3f6b48;
  position:relative;isolation:isolate;
  display:flex;flex-direction:column;min-width:0;
  border:1px solid rgba(23,23,21,.09);border-radius:18px;overflow:hidden;
  background:#fbfaf7;
  transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s, border-color .3s;
}
body[data-era="2029"] .project:hover{
  transform:translateY(-3px);border-color:rgba(23,23,21,.16);
  box-shadow:0 18px 40px -18px rgba(23,23,21,.28);
}
body[data-era="2029"] .t-sage{--tint:#dce6d6;--ink:#3f6b48}
body[data-era="2029"] .t-sand{--tint:#efe2cc;--ink:#a35b25}
body[data-era="2029"] .t-lilac{--tint:#e4e0f3;--ink:#5b4fa3}
body[data-era="2029"] .t-ink{--tint:#1b2230;--ink:#3d7a52}
body[data-era="2029"] .t-clay{--tint:#f1dcd1;--ink:#b5533c}
body[data-era="2029"] .t-sky{--tint:#d8e5ef;--ink:#2f6f9f}
body[data-era="2029"] .t-cream{--tint:#f0eadb;--ink:#9a6a14}

.project-thumb{
  display:block;aspect-ratio:640/215;flex:0 0 auto;overflow:hidden;
  background:var(--tint);border-bottom:1px solid rgba(23,23,21,.06);
}
.project-thumb img{
  /* fill the box: each SVG fits its drawing to the height and extends its
     own background sideways, so nothing is ever cropped */
  display:block;width:100%;height:100%;object-fit:fill;
  transition:transform .6s cubic-bezier(.2,.7,.3,1);
}
.project-thumb img.photo{object-fit:cover;object-position:50% 30%}
.project:hover .project-thumb img{transform:scale(1.035)}

.project-body{display:flex;flex-direction:column;gap:0;padding:16px 22px 14px;flex:1 1 auto;min-height:0}
.project-meta{
  margin:0 0 8px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-family:"JetBrains Mono",monospace;font-size:10.5px;color:#8a897f;
}
body[data-era="2029"] .project h3{
  margin:0 0 6px;font-size:19px;font-weight:500;letter-spacing:-.02em;line-height:1.2;
}
body[data-era="2029"] .project h3 a{color:#171715;text-decoration:none}
body[data-era="2029"] .project h3 a:hover{color:var(--ink)}
body[data-era="2029"] .project-sum{
  margin:0;font-size:14px;line-height:1.5;color:#4a4940;font-weight:300;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
/* tags live on the full page; the card stays lean */
body[data-era="2029"] .project .tags{display:none}
.tags{list-style:none;margin:0;padding:0;display:flex;gap:6px;flex-wrap:wrap}
body[data-era="2029"] .tags li{
  font-family:"JetBrains Mono",monospace;font-size:10px;color:#5a594f;white-space:nowrap;
  border:1px solid rgba(23,23,21,.1);border-radius:6px;padding:3px 8px;
}

/* action row: how it works · full page · ask about it */
.project-actions{
  --actions-h:54px;
  display:flex;align-items:center;gap:6px;flex:0 0 var(--actions-h);height:var(--actions-h);
  padding:0 16px;border-top:1px solid rgba(23,23,21,.07);
}
.act,.project-how summary{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  font-family:"JetBrains Mono",monospace;font-size:11px;color:#171715;text-decoration:none;
  padding:8px 12px;border-radius:999px;border:1px solid transparent;white-space:nowrap;
  transition:background .2s, border-color .2s, color .2s;
}
.act:hover,.project-how summary:hover{background:rgba(23,23,21,.05)}
.project-how summary{list-style:none;border-color:rgba(23,23,21,.14)}
.project-how summary::-webkit-details-marker{display:none}
.project-how summary::before{content:"+";font-size:13px;line-height:1;color:var(--ink)}
.project-how[open] summary::before{content:"×"}
.project-how .how-close,.project-how[open] .how-open{display:none}
.project-how[open] .how-close{display:inline}
.project-how[open] summary{background:#171715;color:#f6f5f1;border-color:#171715}
.project-how[open] summary::before{color:#f6f5f1}
.act-ask{margin-left:auto;color:var(--ink);background:none}
.act-ask .voice-dot{background:var(--ink);box-shadow:none}

/* how it works opens over the card, so the card never changes size */
.how-panel{
  position:absolute;z-index:1;left:0;right:0;top:0;bottom:54px;
  padding:18px 22px 14px;overflow-y:auto;
  background:#fbfaf7;
  animation:how-in .28s cubic-bezier(.2,.7,.3,1);
}
@keyframes how-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.how-title{
  margin:0 0 10px;font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--ink);
}
.how-panel ul{margin:0;padding:0 0 0 18px;display:grid;gap:7px}
body[data-era="2029"] .how-panel li{font-size:13.5px;line-height:1.5;color:#2e2d27;font-weight:300}
body[data-era="2029"] .how-panel li::marker{color:var(--ink)}

/* ---- the side project: the dark card, a door into the eras ------------- */
body[data-era="2029"] .project-side{background:#171715;border-color:#171715;--ink:#a9c2a9}
body[data-era="2029"] .project-side h3 a{color:#f6f5f1}
body[data-era="2029"] .project-side h3 a:hover{color:#a9c2a9}
body[data-era="2029"] .project-side .project-sum{color:#bdbcb2}
body[data-era="2029"] .project-side .tags li{color:#bdbcb2;border-color:rgba(246,245,241,.16)}
body[data-era="2029"] .project-side .project-actions{border-top-color:rgba(246,245,241,.1)}
body[data-era="2029"] .project-side .act,
body[data-era="2029"] .project-side .project-how summary{color:#f6f5f1}
body[data-era="2029"] .project-side .project-how summary{border-color:rgba(246,245,241,.22)}
body[data-era="2029"] .project-side .act:hover,
body[data-era="2029"] .project-side .project-how summary:hover{background:rgba(246,245,241,.08)}
body[data-era="2029"] .project-side .project-how[open] summary{background:#f6f5f1;color:#171715}
body[data-era="2029"] .project-side .project-how[open] summary::before{color:#171715}
body[data-era="2029"] .project-side .act-ask{color:#a9c2a9}
body[data-era="2029"] .project-side .how-panel{background:#171715}
body[data-era="2029"] .project-side .how-panel li{color:#e6e5dc}
.project-side .project-thumb{background:#22221f;padding:14px 18px;border-bottom-color:rgba(246,245,241,.06)}
.era-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;height:100%}
.era-strip i{
  display:flex;align-items:flex-end;padding:10px;border-radius:9px;font-style:normal;
  font-size:12px;transition:transform .35s cubic-bezier(.2,.7,.3,1);
}
.project-side:hover .era-strip i{transform:translateY(-4px)}
.project-side:hover .era-strip i:nth-child(2){transition-delay:.05s}
.project-side:hover .era-strip i:nth-child(3){transition-delay:.1s}
.era-strip .e24{
  background:#d9d0b4 repeating-linear-gradient(0deg, transparent 0 9px, rgba(40,30,10,.12) 9px 10px);
  color:#1d170c;font-family:"DM Serif Display",Georgia,serif;
}
.era-strip .e55{
  background:radial-gradient(ellipse at 50% 45%, #d6d6d0, #8b8b85 90%);
  color:#171a36;font-family:"Anton",Impact,sans-serif;letter-spacing:.08em;
  box-shadow:inset 0 0 0 5px #2a160a;
}
.era-strip .e96{
  background:#0a0e14 radial-gradient(circle at 30% 30%, rgba(255,255,255,.6) 0 1px, transparent 1.5px) 0 0 / 14px 14px;
  color:#ffd200;font-family:"Courier Prime","Courier New",monospace;font-weight:700;
  box-shadow:inset 0 -7px 0 #ff2e85;
}
.project-go{font-family:"JetBrains Mono",monospace;font-size:12px;color:#3f7a4a}

/* ---- project pages ------------------------------------------------------ */
body[data-era="2029"] .pp-hero{padding:72px 0 40px;max-width:820px}
body[data-era="2029"] .pp-hero h1{font-size:clamp(40px,6vw,68px);line-height:1.02}
body[data-era="2029"] .pp-hero .tagline{max-width:640px}
body[data-era="2029"] .pp-hero .hero-actions{margin-top:24px}
.pp-figure{
  margin:0 0 64px;border-radius:22px;overflow:hidden;background:var(--tint);
  border:1px solid rgba(23,23,21,.08);
}
.pp-figure img{display:block;width:100%;height:auto}
.pp-body{
  display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:56px;
  padding:0 0 72px;
}
body[data-era="2029"] .pp-body .section-label{
  font-family:"JetBrains Mono",monospace;font-size:11px;font-weight:400;color:#5a594f;
  text-align:left;margin:0 0 16px;
}
.pp-how ul{margin:0;padding:0 0 0 20px;display:grid;gap:14px}
body[data-era="2029"] .pp-how li{font-size:17px;line-height:1.6;color:#2e2d27;font-weight:300}
body[data-era="2029"] .pp-how li::marker{color:var(--ink,#6b8a6b)}
.pp-side p{margin:0 0 32px;font-size:15px;line-height:1.55;color:#4a4940;font-weight:300}
.pp-next{
  display:grid;grid-template-columns:1fr 1fr;gap:20px;
  padding:32px 0 56px;border-top:1px solid rgba(23,23,21,.08);
}
.pp-next a{
  display:flex;flex-direction:column;gap:6px;padding:20px 22px;border-radius:14px;
  border:1px solid rgba(23,23,21,.09);background:rgba(255,255,255,.5);
  color:#171715;text-decoration:none;font-size:17px;font-weight:500;letter-spacing:-.01em;
  transition:border-color .25s, background .25s;
}
.pp-next a:last-child{text-align:right}
.pp-next a:hover{border-color:rgba(23,23,21,.2);background:#fff}
.pp-next span{font-family:"JetBrains Mono",monospace;font-size:11px;font-weight:400;color:#8a897f}

/* story: the résumé and the personal version, side by side */
body[data-era="2029"] .experience{padding:80px 0;border-top:1px solid rgba(23,23,21,.08)}
.story-split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
body[data-era="2029"] .story-head{
  margin:0 0 20px;padding-bottom:12px;border-bottom:1px solid rgba(23,23,21,.1);
  font-family:"JetBrains Mono",monospace;font-size:11px;font-weight:400;color:#6b8a6b;
  text-align:left;letter-spacing:0;
}
.timeline{list-style:none;margin:0;padding:0}
.timeline li{display:grid;grid-template-columns:96px 1fr;gap:18px;padding:18px 0}
.timeline li:first-child{padding-top:0}
.timeline li + li{border-top:1px solid rgba(23,23,21,.08)}
body[data-era="2029"] .timeline .when{
  font-family:"JetBrains Mono",monospace;font-size:11px;color:#6b8a6b;padding-top:4px;
}
body[data-era="2029"] .timeline h3{
  margin:0 0 5px;font-size:16px;font-weight:500;letter-spacing:-.01em;color:#171715;
}
body[data-era="2029"] .timeline p{
  margin:0;font-size:14px;line-height:1.6;color:#5a594f;font-weight:300;
}
/* the personal version reads like a letter: larger, looser, darker */
.story-personal p{
  margin:0 0 18px;font-size:17px;line-height:1.7;color:#2e2d27;font-weight:300;letter-spacing:-.005em;
}
.story-personal p:first-of-type::first-line{color:#171715;font-weight:400}
.story-personal p:last-child{margin-bottom:0}

/* contact */
body[data-era="2029"] .signup .contact-lede{
  font-size:15px;line-height:1.6;color:#5a594f;font-weight:300;max-width:460px;
  margin:0 0 24px;
}
body[data-era="2029"] .foot a{color:#6b8a6b;text-decoration:none}
body[data-era="2029"] .foot a:hover{text-decoration:underline}

/* ---- /eras/: the side project's own page ---------------------------- */
body[data-era="2029"] .eras-hero{padding:72px 0 48px}
.back-link{
  display:inline-block;margin-bottom:36px;
  font-family:"JetBrains Mono",monospace;font-size:12px;color:#5a594f;text-decoration:none;
}
.back-link:hover{color:#171715}
body[data-era="2029"] .eras-hero h1{font-size:clamp(44px,7vw,76px)}

.eras-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding:0 0 72px}
.era-card{
  display:flex;flex-direction:column;gap:6px;
  padding:14px 14px 20px;border:1px solid rgba(23,23,21,.09);border-radius:14px;
  background:rgba(255,255,255,.5);color:inherit;text-decoration:none;
  transition:border-color .25s, background .25s, transform .25s;
}
.era-card:hover{border-color:rgba(23,23,21,.2);background:rgba(255,255,255,.8);transform:translateY(-2px)}
.era-art{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  aspect-ratio:4/3;border-radius:9px;margin-bottom:12px;overflow:hidden;
}
.era-art b{font-weight:400;text-align:center;line-height:1}
.era-1924 .era-art{
  background:#d9d0b4;color:#1d170c;box-shadow:inset 0 0 40px rgba(90,60,20,.25);
}
.era-1924 .era-art b{font-family:"DM Serif Display",Georgia,serif;font-size:clamp(15px,1.7vw,22px);padding:0 10%;border-bottom:3px double #1d170c;padding-bottom:6px}
.era-1924 .era-art i{display:block;width:70%;height:5px;background:rgba(29,23,12,.18);border-radius:2px}
.era-1924 .era-art i:last-child{width:52%}
.era-1955 .era-art{
  background:radial-gradient(ellipse at 50% 45%, #e6e6e0, #9a9a94 85%);
  border:10px solid #2a160a;border-radius:18px / 14px;
}
.era-1955 .era-art::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.08) 0 1px, transparent 1px 3px);
}
.era-1955 .era-art b{font-family:"Anton",Impact,sans-serif;font-size:clamp(20px,2.4vw,30px);letter-spacing:.1em;color:#171a36}
.era-1996 .era-art{
  background:#0a0e14 radial-gradient(circle at 30% 30%, rgba(255,255,255,.5) 0 1px, transparent 1.5px) 0 0 / 16px 16px;
  border:8px solid #cdc7b9;
  box-shadow:inset 0 -18px 0 -10px #ff2e85;
}
.era-1996 .era-art b{
  font-family:"Courier Prime","Courier New",monospace;font-weight:700;font-size:clamp(14px,1.6vw,20px);
  color:#ffd200;text-shadow:2px 2px 0 #001738, 3px 3px 0 #ff2e85;
}
.era-year{font-family:"JetBrains Mono",monospace;font-size:11px;color:#6b8a6b;padding:0 6px}
.era-name{font-size:18px;font-weight:500;letter-spacing:-.015em;color:#171715;padding:0 6px}
.era-what{font-size:14px;line-height:1.55;color:#4a4940;font-weight:300;padding:0 6px 10px}
.era-card .project-go{color:#3f7a4a;padding:0 6px}
.era-card:hover .project-go span{display:inline-block;transform:translateX(3px);transition:transform .2s}

.eras-notes{
  display:grid;grid-template-columns:1fr 1fr;gap:48px;
  padding:48px 0 80px;border-top:1px solid rgba(23,23,21,.08);
}
body[data-era="2029"] .eras-notes .section-label{
  font-family:"JetBrains Mono",monospace;font-size:11px;font-weight:400;color:#5a594f;margin:0 0 16px;text-align:left;
}
.eras-notes p,.eras-notes li{font-size:15px;line-height:1.65;color:#4a4940;font-weight:300}
.eras-notes p{margin:0}
.eras-notes ul{margin:0;padding-left:18px;display:grid;gap:10px}
.eras-notes li::marker{color:#6b8a6b}

/* narrower two-column cards get a third summary line instead of an ellipsis */
@media (max-width:1180px){
  body[data-era="2029"] .project-sum{-webkit-line-clamp:3}
  .how-panel ul{gap:5px}
}

/* one column: an opened card swaps its picture and summary for the list
   and grows to fit, instead of scrolling inside a fixed box */
@media (max-width:900px){
  .work-grid{grid-auto-rows:auto}
  .project:has(.project-how[open]) .project-thumb,
  .project:has(.project-how[open]) .project-body{display:none}
  .project:has(.project-how[open]) .project-actions{flex-wrap:wrap;height:auto;padding:12px 10px 10px;border-top:0}
  .project-how[open]{flex:1 0 100%;order:-1}
  .project-how[open] .how-panel{position:static;padding:14px 8px 6px;background:none}
}

/* phones: the action row keeps all three actions on one line */
@media (max-width:480px){
  .project-actions{padding:0 10px;gap:2px}
  .act,.project-how summary{padding:7px 9px;font-size:10.5px;gap:5px}
  .project-body{padding:18px 18px 14px}
}

/* ---- responsive --------------------------------------------------- */
@media (max-width:900px){
  .work-grid{grid-template-columns:1fr}
  .eras-grid{grid-template-columns:1fr}
  .eras-notes{grid-template-columns:1fr;gap:32px}
  .timeline li{grid-template-columns:1fr;gap:6px;padding:20px 0}
  .story-split{grid-template-columns:1fr;gap:48px}
  body[data-era="2029"] .hero{padding:72px 0 56px}
  body[data-era="2029"] .hero h1{font-size:clamp(38px,9vw,64px)}
}

/* ---- ask about dan (ElevenLabs agent) ----------------------------- */
.voice-dot{
  display:inline-block;width:7px;height:7px;border-radius:50%;
  background:#6b8a6b;box-shadow:0 0 10px rgba(107,138,107,.6);
  animation:pulse 3s ease-in-out infinite;
}
body[data-era="2029"] .voice-cta{display:inline-flex;align-items:center;gap:10px;cursor:pointer}

.voice-launch{
  position:fixed;right:24px;bottom:24px;z-index:300;
  display:inline-flex;align-items:center;gap:10px;
  font-family:"JetBrains Mono",monospace;font-size:12px;color:#171715;
  background:rgba(246,245,241,.9);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(23,23,21,.12);border-radius:999px;
  padding:11px 18px;cursor:pointer;
  box-shadow:0 8px 30px rgba(23,23,21,.08);
  transition:border-color .25s, transform .25s;
}
.voice-launch:hover{border-color:rgba(23,23,21,.3);transform:translateY(-1px)}
body:has(.voice:not([hidden])) .voice-launch{display:none}

.voice{
  position:fixed;right:24px;bottom:24px;z-index:350;
  width:min(380px, calc(100vw - 32px));max-height:min(560px, calc(100vh - 48px));
  display:flex;flex-direction:column;
  background:rgba(246,245,241,.96);
  backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);
  border:1px solid rgba(23,23,21,.1);border-radius:18px;
  box-shadow:0 24px 70px rgba(23,23,21,.14);
  font-family:"Inter",sans-serif;color:#171715;
  animation:voice-in .35s ease;
}
.voice[hidden]{display:none}
@keyframes voice-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.voice-head{
  display:flex;align-items:center;gap:10px;
  padding:14px 16px;border-bottom:1px solid rgba(23,23,21,.07);
}
.voice-title{font-size:14px;font-weight:500;letter-spacing:-.01em}
.voice-status{
  margin-left:auto;font-family:"JetBrains Mono",monospace;font-size:11px;color:#6b8a6b;
}
.voice-close{
  font-size:20px;line-height:1;color:#5a594f;padding:0 2px;cursor:pointer;
}
.voice-close:hover{color:#171715}

.voice-orb-wrap{display:flex;justify-content:center;padding:22px 0 8px}
.voice-orb{
  width:64px;height:64px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #a9c2a9, #6b8a6b 60%, #4f6b4f);
  opacity:.35;transition:opacity .4s, transform .08s linear;
}
.voice-orb.live{opacity:.85}
.voice-orb.speaking{box-shadow:0 0 0 8px rgba(107,138,107,.12), 0 0 30px rgba(107,138,107,.45)}

.voice-log{
  list-style:none;margin:0;padding:6px 16px;flex:1 1 auto;overflow-y:auto;min-height:0;
  display:flex;flex-direction:column;gap:8px;
}
.voice-line{font-size:14px;line-height:1.5;max-width:88%}
.voice-agent{color:#171715;font-weight:300}
.voice-user{
  align-self:flex-end;color:#f6f5f1;background:#171715;
  padding:7px 12px;border-radius:14px 14px 4px 14px;
}
.voice-note-line{
  font-family:"JetBrains Mono",monospace;font-size:11px;color:#8a5a33;max-width:100%;
}

.voice-start{
  display:flex;flex-wrap:wrap;gap:10px;padding:10px 16px 16px;
}
.voice-start[hidden]{display:none}
body[data-era="2029"] .voice-start .cta{
  background:#171715;color:#f6f5f1;border-radius:999px;
  padding:11px 22px;font-size:13px;cursor:pointer;
  transition:background .25s;
}
body[data-era="2029"] .voice-start .cta:hover{background:#2a2a26}
body[data-era="2029"] .voice-start .cta-ghost{padding:11px 20px;font-size:13px;cursor:pointer}
.voice-fine{
  margin:6px 0 0;width:100%;
  font-family:"JetBrains Mono",monospace;font-size:10px;line-height:1.6;color:#5a594f;opacity:.75;
}

.voice-form{
  display:flex;gap:8px;padding:10px 16px 4px;
}
.voice-form[hidden]{display:none}
.voice-form input{
  flex:1;min-width:0;font:inherit;font-size:14px;color:#171715;
  background:#fff;border:1px solid rgba(23,23,21,.14);border-radius:999px;
  padding:10px 16px;outline:0;
}
.voice-form input:focus{border-color:#6b8a6b}
.voice-form button{
  width:40px;border-radius:50%;background:#171715;color:#f6f5f1;font-size:15px;cursor:pointer;
}
.voice-end{
  margin:6px 16px 14px;align-self:flex-start;
  font-family:"JetBrains Mono",monospace;font-size:11px;color:#5a594f;cursor:pointer;
}
.voice-end:hover{color:#171715;text-decoration:underline}
.voice-end[hidden]{display:none}

@media (max-width:600px){
  .voice{right:16px;bottom:16px}
  .voice-launch{right:16px;bottom:16px}
}

/* resting state — shown for any failure, never styled as an error */
.voice-rest{padding:6px 16px 16px}
.voice-rest[hidden]{display:none}
.voice-rest-line{
  margin:0 0 4px;font-size:16px;font-weight:400;letter-spacing:-.01em;color:#171715;
}
.voice-rest-sub{margin:0 0 14px;font-size:13px;line-height:1.5;color:#5a594f;font-weight:300}
.voice-rest-actions{display:flex;gap:10px;flex-wrap:wrap}
body[data-era="2029"] .voice-rest .cta{
  background:#171715;color:#f6f5f1;border-radius:999px;padding:11px 22px;font-size:13px;
  text-decoration:none;
}
body[data-era="2029"] .voice-rest .cta:hover{background:#2a2a26}
body[data-era="2029"] .voice-rest .cta-ghost{padding:11px 20px;font-size:13px}
.voice-retry{
  display:block;margin-top:14px;
  font-family:"JetBrains Mono",monospace;font-size:11px;color:#5a594f;cursor:pointer;
}
.voice-retry:hover{color:#171715;text-decoration:underline}

/* wiki-style links between projects, inside the explanations */
.pp-how a.xref,.how-panel a.xref{color:inherit;text-decoration:underline;text-decoration-color:rgba(23,23,21,.3);text-underline-offset:3px;transition:text-decoration-color .2s}
.pp-how a.xref:hover,.how-panel a.xref:hover{text-decoration-color:currentColor}