/* MECHSSIAH.COM — shared stylesheet for inner pages */

:root{
  --void:#070707;
  --ink-gold:#C8A85A;
  --deep-gold:#8A6F35;
  --bone:#E8E2D5;
  --machine:#9AA0A6;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  background:var(--void);
  color:var(--bone);
  font-family:'EB Garamond',serif;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

/* ---------- wordmark (home link) ---------- */
.wordmark{
  display:block;
  text-align:center;
  padding:1.7rem 1rem .4rem;
  font-family:'Cinzel',serif;
  font-weight:600;
  font-size:.78rem;
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--ink-gold);
  opacity:.55;
  text-decoration:none;
  transition:opacity .4s ease;
}
.wordmark:hover,.wordmark:focus-visible{opacity:1}

/* ---------- page column ---------- */
main.page{
  flex:1;
  width:100%;
  max-width:42rem;
  margin:0 auto;
  padding:1.2rem 1.4rem 4rem;
}
.epigraph{
  text-align:center;
  font-style:italic;
  color:var(--deep-gold);
  font-size:1rem;
  letter-spacing:.03em;
  margin:2.2rem 0 3.6rem;
}
section{margin:0 0 3.4rem}
section p{font-size:1.08rem;line-height:1.78;margin:0 0 1.15rem}
section p:last-child{margin-bottom:0}

/* ---------- fade-up on scroll ---------- */
.fade{opacity:0;transform:translateY(14px);transition:opacity .9s ease,transform .9s ease}
.fade.in{opacity:1;transform:none}

/* ---------- tech corridor ---------- */
.tech .marker{
  font-family:'IBM Plex Mono',monospace;
  font-size:.8rem;
  letter-spacing:.06em;
  color:var(--machine);
  margin-bottom:1.1rem;
}
.tech .marker b{color:var(--ink-gold);font-weight:400}
.tech .doc{
  border:1px solid rgba(200,168,90,.22);
  background:#0b0b0b;
  padding:1.4rem 1.5rem;
}
.registry .entry{margin-bottom:2.1rem}
.registry .entry:last-child{margin-bottom:0}
.registry .regline{
  display:block;
  font-family:'IBM Plex Mono',monospace;
  font-size:.82rem;
  line-height:1.9;
  color:var(--machine);
}
.registry .regline b{color:var(--ink-gold);font-weight:400}
.registry .annot{
  font-style:italic;
  font-size:1.02rem;
  color:var(--bone);
  opacity:.9;
  margin-top:.5rem;
}

/* ---------- human corridor ---------- */
.human section p{line-height:1.85}
.human h2{
  font-family:'Cinzel',serif;
  font-weight:500;
  font-size:.92rem;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--ink-gold);
  margin-bottom:1.3rem;
}
.cards .card{
  border-top:1px solid rgba(200,168,90,.18);
  padding:1.15rem 0;
}
.cards .card:last-of-type{border-bottom:1px solid rgba(200,168,90,.18)}
.cards .name{
  display:block;
  font-family:'Cinzel',serif;
  font-size:.86rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-gold);
  margin-bottom:.35rem;
}
.cards .card p{font-style:italic;font-size:1.02rem;opacity:.92;margin:0}
.excerpt{
  border-top:1px solid rgba(200,168,90,.35);
  border-bottom:1px solid rgba(200,168,90,.35);
  padding:2.2rem .2rem;
  margin-top:1.4rem;
}
.excerpt p{font-size:1.13rem;line-height:1.95}
.excerpt .attr{
  font-size:.92rem;
  font-style:italic;
  color:var(--deep-gold);
  margin-top:1.6rem;
  margin-bottom:0;
}

/* ---------- corridor exits ---------- */
.exit{margin-top:4.5rem;text-align:center}
.exit a{text-decoration:none;transition:opacity .4s ease}
.tech .exit a{
  font-family:'IBM Plex Mono',monospace;
  font-size:.88rem;
  color:var(--ink-gold);
  opacity:.8;
}
.human .exit a{
  font-style:italic;
  font-size:1.08rem;
  color:var(--ink-gold);
  opacity:.85;
}
.exit a:hover,.exit a:focus-visible{opacity:1}

/* ---------- shared ---------- */
a:focus-visible{outline:1px solid var(--deep-gold);outline-offset:4px}
footer{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  padding:1.1rem 1.4rem 1.3rem;
  font-size:.8rem;
}
footer .imprint{
  font-family:'IBM Plex Mono',monospace;
  font-size:.68rem;
  color:var(--machine);
  opacity:.6;
  letter-spacing:.06em;
}
footer .stillhere{font-style:italic;color:var(--ink-gold);opacity:.45}

/* ---------- convergence (/jacob) ---------- */
.convergence-page{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:60vh;
  padding-top:3rem;
}
.convergence-copy{
  text-align:center;
  margin-bottom:3rem;
}
.convergence-copy p{
  font-size:1.28rem;
  line-height:2.05;
  margin:0 0 1.5rem;
}
.convergence-copy p:last-child{
  color:var(--ink-gold);
  margin-bottom:0;
}
.read-link{
  text-align:center;
  margin-bottom:4.5rem;
}
.read-link a{
  display:inline-block;
  text-decoration:none;
  font-family:'Cinzel',serif;
  font-size:.82rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--ink-gold);
  border:1px solid rgba(200,168,90,.4);
  padding:.9rem 2rem;
  transition:background .4s ease,color .4s ease;
}
.read-link a:hover,.read-link a:focus-visible{
  background:var(--ink-gold);
  color:var(--void);
}

/* ---------- hello world block ---------- */
.hello-world{
  max-width:30rem;
  margin:0 auto;
  border:1px solid rgba(200,168,90,.3);
  background:#0b0b0b;
  padding:2.2rem 1.8rem;
  text-align:center;
}
.hello-world h2{
  font-family:'IBM Plex Mono',monospace;
  font-size:1.05rem;
  color:var(--ink-gold);
  letter-spacing:.04em;
  margin-bottom:1rem;
  text-transform:none;
}
.hello-world p{
  font-size:.95rem;
  line-height:1.7;
  color:var(--bone);
  opacity:.85;
  margin-bottom:1.6rem;
}
.hello-form{
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
}
.hello-form input[type="email"]{
  flex:1 1 12rem;
  min-width:0;
  background:var(--void);
  border:1px solid rgba(200,168,90,.35);
  color:var(--bone);
  font-family:'IBM Plex Mono',monospace;
  font-size:.88rem;
  padding:.75rem .9rem;
}
.hello-form input[type="email"]:focus-visible{
  outline:1px solid var(--ink-gold);
  outline-offset:2px;
}
.hello-form button{
  font-family:'Cinzel',serif;
  font-size:.78rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  background:transparent;
  color:var(--ink-gold);
  border:1px solid var(--ink-gold);
  padding:.75rem 1.3rem;
  cursor:pointer;
  transition:background .35s ease,color .35s ease;
}
.hello-form button:hover,.hello-form button:focus-visible{
  background:var(--ink-gold);
  color:var(--void);
}
.hello-success{
  display:none;
  font-family:'IBM Plex Mono',monospace;
  font-size:.88rem;
  color:var(--ink-gold);
  letter-spacing:.02em;
}
.hello-world.answered .hello-form{display:none}
.hello-world.answered .hello-success{display:block}

/* ---------- /read ---------- */
.read-cover{
  text-align:center;
  margin-bottom:1.6rem;
}
.read-cover img{
  max-width:100%;
  width:22rem;
  height:auto;
  margin:0 auto;
}
.read-status{
  text-align:center;
  font-style:italic;
  color:var(--deep-gold);
  font-size:1.02rem;
  margin-bottom:3rem;
}

/* ---------- the question (/the-question) ---------- */
.survey-title{
  font-family:'Cinzel',serif;
  font-weight:600;
  font-size:clamp(1.5rem,4.5vw,2.1rem);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-gold);
  text-align:center;
  margin:1.4rem 0 2.4rem;
}
.survey-intro p{font-size:1.08rem;line-height:1.85;margin:0 0 1.15rem}
.survey-intro{margin-bottom:3.6rem}
.q{border:0;margin:0 0 3.4rem;padding:0}
.q legend{
  font-family:'IBM Plex Mono',monospace;
  font-size:.8rem;
  letter-spacing:.06em;
  color:var(--machine);
  margin-bottom:1.1rem;
  padding:0;
}
.q legend b{color:var(--ink-gold);font-weight:400}
.scenario{
  border-left:1px solid rgba(200,168,90,.35);
  padding-left:1.2rem;
  margin:0 0 1.3rem;
}
.scenario p{font-size:1.08rem;line-height:1.8;margin:0 0 1rem}
.scenario p:last-child{margin-bottom:0}
.chips{display:flex;flex-wrap:wrap;gap:.55rem;margin-bottom:.4rem}
.chip{position:relative;display:inline-block}
.chip input{
  position:absolute;inset:0;
  width:100%;height:100%;
  opacity:0;margin:0;cursor:pointer;
}
.chip span{
  display:inline-block;
  font-family:'IBM Plex Mono',monospace;
  font-size:.78rem;
  color:var(--machine);
  border:1px solid rgba(200,168,90,.3);
  padding:.45rem .8rem;
  cursor:pointer;
  transition:color .3s ease,background .3s ease,border-color .3s ease;
}
.chip:hover span{color:var(--bone)}
.chip input:checked + span{
  background:var(--ink-gold);
  border-color:var(--ink-gold);
  color:var(--void);
}
.chip input:focus-visible + span{outline:1px solid var(--deep-gold);outline-offset:3px}
.why-label{
  display:block;
  font-family:'IBM Plex Mono',monospace;
  font-size:.72rem;
  letter-spacing:.06em;
  color:var(--machine);
  margin:.9rem 0 .4rem;
}
.why-label .req{color:var(--ink-gold)}
.survey textarea{
  width:100%;
  min-height:6.5rem;
  background:#0b0b0b;
  border:1px solid rgba(200,168,90,.3);
  color:var(--bone);
  font-family:'EB Garamond',serif;
  font-size:1rem;
  line-height:1.65;
  padding:.8rem .9rem;
  resize:vertical;
}
.survey textarea:focus-visible,
.survey input[type="email"]:focus-visible{
  outline:1px solid var(--ink-gold);
  outline-offset:2px;
}
.survey input[type="email"]{
  width:100%;
  background:#0b0b0b;
  border:1px solid rgba(200,168,90,.3);
  color:var(--bone);
  font-family:'IBM Plex Mono',monospace;
  font-size:.88rem;
  padding:.75rem .9rem;
}
.contact-block{margin:0 0 2.6rem}
.consent{
  display:flex;
  gap:.6rem;
  align-items:flex-start;
  font-size:.95rem;
  opacity:.85;
  margin:.7rem 0 0;
}
.consent input[type="checkbox"]{accent-color:var(--ink-gold);margin-top:.3rem}
.fineprint{
  font-size:.9rem;
  font-style:italic;
  opacity:.7;
  margin:1.4rem 0 .2rem;
}
.survey-submit{text-align:center;margin:3rem 0 1rem}
.survey-submit button{
  font-family:'Cinzel',serif;
  font-size:.82rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  background:transparent;
  color:var(--ink-gold);
  border:1px solid var(--ink-gold);
  padding:.95rem 2.6rem;
  cursor:pointer;
  transition:background .35s ease,color .35s ease;
}
.survey-submit button:hover,.survey-submit button:focus-visible{
  background:var(--ink-gold);
  color:var(--void);
}
.survey-submit button:disabled{opacity:.5;cursor:default}
.survey-success{
  display:none;
  text-align:center;
  padding:3rem 0 1rem;
}
.survey-success .mono{
  font-family:'IBM Plex Mono',monospace;
  font-size:1rem;
  color:var(--ink-gold);
  margin-bottom:1.2rem;
}
.survey-success p{font-size:1.05rem;opacity:.85}
.survey.sent form{display:none}
.survey.sent .survey-success{display:block}
details.truth{
  border:1px solid rgba(200,168,90,.35);
  background:#0b0b0b;
  margin-top:3.5rem;
}
details.truth summary{
  font-family:'IBM Plex Mono',monospace;
  font-size:.85rem;
  color:var(--ink-gold);
  padding:1.1rem 1.3rem;
  cursor:pointer;
  list-style:none;
}
details.truth summary::-webkit-details-marker{display:none}
details.truth summary:focus-visible{outline:1px solid var(--deep-gold);outline-offset:-4px}
.truth-body{padding:.2rem 1.3rem 1.5rem}
.truth-body p{font-size:1.06rem;line-height:1.85;margin:0 0 1rem}
.truth-body p:last-child{margin-bottom:0}

/* ---------- page transition log ---------- */
#pagelog{
  position:fixed;inset:0;
  background:var(--void);
  z-index:60;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:opacity .5s ease;
}
#pagelog.fade{opacity:0;pointer-events:none}
#pagelog .lines{
  font-family:'IBM Plex Mono',monospace;
  font-size:clamp(.72rem,2.4vw,.9rem);
  color:var(--machine);
  line-height:2.1;
  white-space:pre-wrap;
  padding:0 1.5rem;
  min-height:1px;
}
#pagelog .lines .last{color:var(--ink-gold)}

/* ---------- the archive (/archive) ---------- */
.archive-intro{
  text-align:center;
  font-style:italic;
  color:var(--deep-gold);
  font-size:1rem;
  margin:1.6rem 0 3rem;
}
.archive-empty{
  text-align:center;
  font-family:'IBM Plex Mono',monospace;
  font-size:.88rem;
  color:var(--machine);
  padding:4rem 1rem;
  line-height:2;
}
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));
  gap:1.6rem;
}
.record{
  border:1px solid rgba(200,168,90,.18);
  background:#0b0b0b;
  padding:0;
  cursor:pointer;
  text-align:left;
  font-family:inherit;
  color:inherit;
  transition:border-color .4s ease;
  display:block;
  width:100%;
}
.record:hover,.record:focus-visible{border-color:rgba(200,168,90,.55)}
.record:focus-visible{outline:1px solid var(--deep-gold);outline-offset:3px}
.record img{
  display:block;
  width:100%;
  height:13rem;
  object-fit:cover;
  background:#0b0b0b;
}
.record .meta{
  padding:.85rem 1rem 1.1rem;
  font-family:'IBM Plex Mono',monospace;
  font-size:.7rem;
  line-height:1.75;
  color:var(--machine);
  letter-spacing:.03em;
}
.record .meta b{color:var(--ink-gold);font-weight:400}
.record .cap{
  display:block;
  margin-top:.5rem;
  font-family:'EB Garamond',serif;
  font-size:.95rem;
  font-style:italic;
  color:var(--bone);
  opacity:.85;
  letter-spacing:0;
  line-height:1.55;
}

/* lightbox */
#lightbox{
  position:fixed;inset:0;
  background:rgba(7,7,7,.97);
  z-index:50;
  display:none;
  align-items:center;
  justify-content:center;
  padding:2rem 1.2rem 1.2rem;
}
#lightbox.open{display:flex}
#lightbox figure{
  max-width:min(92vw,58rem);
  max-height:100%;
  text-align:center;
  overflow:auto;
}
#lightbox img{
  max-width:100%;
  max-height:72vh;
  width:auto;height:auto;
  margin:0 auto;
  display:block;
}
#lightbox figcaption{
  margin-top:1.3rem;
  font-family:'IBM Plex Mono',monospace;
  font-size:.75rem;
  color:var(--machine);
  letter-spacing:.03em;
  line-height:1.9;
}
#lightbox figcaption b{color:var(--ink-gold);font-weight:400}
#lightbox figcaption .cap{
  display:block;
  margin-top:.6rem;
  font-family:'EB Garamond',serif;
  font-size:1.05rem;
  font-style:italic;
  color:var(--bone);
  letter-spacing:0;
}
#lbClose{
  position:absolute;
  top:1rem;right:1.2rem;
  background:transparent;
  border:1px solid rgba(200,168,90,.4);
  color:var(--ink-gold);
  font-family:'IBM Plex Mono',monospace;
  font-size:.8rem;
  padding:.4rem .8rem;
  cursor:pointer;
  transition:background .3s ease,color .3s ease;
}
#lbClose:hover,#lbClose:focus-visible{background:var(--ink-gold);color:var(--void)}
.lb-nav{
  position:absolute;
  top:50%;transform:translateY(-50%);
  background:transparent;
  border:0;
  color:var(--ink-gold);
  font-size:2rem;
  line-height:1;
  padding:1rem .8rem;
  cursor:pointer;
  opacity:.45;
  transition:opacity .3s ease;
}
.lb-nav:hover,.lb-nav:focus-visible{opacity:1}
#lbPrev{left:.2rem}
#lbNext{right:.2rem}
@media (max-width:600px){
  .lb-nav{font-size:1.5rem;padding:.6rem .5rem}
  #lightbox img{max-height:58vh}
}

/* footer archive link */
footer .archive-link{
  font-family:'IBM Plex Mono',monospace;
  font-size:.68rem;
  letter-spacing:.06em;
  color:var(--machine);
  opacity:.6;
  text-decoration:none;
  transition:opacity .4s ease,color .4s ease;
}
footer .archive-link:hover,footer .archive-link:focus-visible{
  opacity:1;color:var(--ink-gold);
}

.privacy-note{
  border-top:1px solid rgba(200,168,90,.18);
  padding-top:1.4rem;
  margin-top:2.4rem;
}
.privacy-note p{
  font-size:.92rem;
  line-height:1.7;
  opacity:.7;
  margin:0;
}
.privacy-note strong{color:var(--ink-gold);font-weight:400}

/* ---------- prose links ---------- */
.survey-intro a,
.truth-body a,
.scenario a{
  color:var(--ink-gold);
  text-decoration:none;
  border-bottom:1px solid rgba(200,168,90,.35);
  transition:color .4s ease,border-color .4s ease;
}
.survey-intro a:hover,
.truth-body a:hover,
.scenario a:hover,
.survey-intro a:focus-visible,
.truth-body a:focus-visible,
.scenario a:focus-visible{
  color:var(--bone);
  border-bottom-color:var(--ink-gold);
}

@media (prefers-reduced-motion:reduce){
  .fade{opacity:1;transform:none;transition:none}
  .wordmark,.exit a{transition:none}
}