/* Humanoid Hubs — humanoidhubs.space */

:root{
  --ink:#17121f;
  --ink-2:#241c31;
  --paper:#fffdf7;
  --violet:#5a2ce0;
  --cyan:#0a9fc4;
  --coral:#ff5230;
  --lime:#bfee3e;
  --rail:264px;
  --pad:clamp(20px,5vw,72px);
  --disp:"Bricolage Grotesque","Trebuchet MS",sans-serif;
  --text:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--text);font-size:17px;line-height:1.62;
  font-synthesis-weight:none;
}
img{max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--disp);font-weight:800;letter-spacing:-.025em;line-height:1.02;margin:0}
p{margin:0 0 1.05em}

/* ---------- shell ---------- */
.rail-shell{min-height:100vh}

/* ---------- side rail / mobile burger ---------- */
.rail{
  background:var(--ink);color:#fff;
  position:sticky;top:0;z-index:40;
}
.rail-bar{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:14px var(--pad);min-height:64px;
  position:relative;z-index:41;background:var(--ink);
}
.mark{
  display:block;text-decoration:none;flex:1;min-width:0;
  font-family:var(--disp);font-weight:800;letter-spacing:-.04em;
  font-size:22px;line-height:.92;
}
.mark span{display:inline}
.mark span:first-child::after{content:"\00a0"}
.mark span:nth-child(2){color:var(--lime)}
.mark em{
  display:inline;font-style:normal;font-family:var(--text);
  font-size:10px;letter-spacing:.28em;text-transform:uppercase;
  color:#9a8fb4;margin-left:8px;font-weight:500;vertical-align:middle;
}

.nav-toggle{
  position:absolute;opacity:0;pointer-events:none;
  width:1px;height:1px;overflow:hidden;
}
.burger{
  flex:none;width:44px;height:44px;margin:0;padding:0;
  border:1.5px solid #4a4162;background:#1f1830;cursor:pointer;
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;border-radius:0;-webkit-tap-highlight-color:transparent;
  transition:border-color .2s,background .2s;
}
.burger span{
  display:block;width:18px;height:2px;background:var(--lime);
  transition:transform .28s cubic-bezier(.22,1,.36,1),opacity .2s,width .2s;
  transform-origin:center;
}
.burger:hover,.burger:focus-visible{border-color:var(--lime);background:#291f39}
.nav-toggle:focus-visible + .burger{outline:3px solid var(--coral);outline-offset:3px}
.nav-toggle:checked + .burger{border-color:var(--lime)}
.nav-toggle:checked + .burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav-toggle:checked + .burger span:nth-child(2){opacity:0;width:0}
.nav-toggle:checked + .burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

.rail-panel{
  position:fixed;inset:64px 0 0 0;z-index:39;
  background:var(--ink);
  display:flex;flex-direction:column;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(-10px);
  transition:opacity .28s ease,transform .32s cubic-bezier(.22,1,.36,1),visibility .28s;
}
.rail:has(.nav-toggle:checked) .rail-panel{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);
}
body:has(.nav-toggle:checked){overflow:hidden}

.switch{padding:10px 0 8px}
.switch a{
  display:block;text-decoration:none;padding:14px var(--pad) 14px calc(var(--pad) + 14px);
  border-left:14px solid #3b3150;position:relative;
  opacity:0;transform:translateX(-12px);
  transition:background .16s,color .16s,opacity .35s ease,transform .35s cubic-bezier(.22,1,.36,1);
}
.rail:has(.nav-toggle:checked) .switch a{
  opacity:1;transform:none;
}
.rail:has(.nav-toggle:checked) .switch a:nth-child(1){transition-delay:.04s}
.rail:has(.nav-toggle:checked) .switch a:nth-child(2){transition-delay:.08s}
.rail:has(.nav-toggle:checked) .switch a:nth-child(3){transition-delay:.12s}
.rail:has(.nav-toggle:checked) .switch a:nth-child(4){transition-delay:.16s}
.rail:has(.nav-toggle:checked) .switch a:nth-child(5){transition-delay:.2s}
.switch a b{
  display:block;font-family:var(--disp);font-weight:600;font-size:22px;
  letter-spacing:-.02em;line-height:1.12;
}
.switch a i{
  display:block;font-style:normal;font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;color:#9a8fb4;margin-top:3px;
}
.switch a[data-hue=violet]{border-left-color:var(--violet)}
.switch a[data-hue=cyan]{border-left-color:var(--cyan)}
.switch a[data-hue=coral]{border-left-color:var(--coral)}
.switch a[data-hue=lime]{border-left-color:var(--lime)}
.switch a:hover,.switch a:focus-visible{background:#291f39}
.switch a.on{background:#fff;color:var(--ink)}
.switch a.on i{color:#6c6182}

.minor{
  padding:18px var(--pad) 36px;border-top:1px solid #332a45;margin-top:auto;
  display:flex;flex-wrap:wrap;gap:8px 18px;
  opacity:0;transition:opacity .35s ease .18s;
}
.rail:has(.nav-toggle:checked) .minor{opacity:1}
.minor a{font-size:13px;color:#b6adc9;text-decoration:none;border-bottom:1px solid #4b4162;padding-bottom:2px}
.minor a:hover{color:var(--lime);border-color:var(--lime)}

@media (min-width:1040px){
  .rail{
    position:fixed;inset:0 auto 0 0;width:var(--rail);
    overflow-y:auto;display:flex;flex-direction:column;
  }
  .rail-bar{display:block;padding:0;min-height:0}
  .burger,.nav-toggle{display:none}
  .mark{
    padding:26px var(--pad) 18px;font-size:30px;line-height:.95;
  }
  .mark span{display:block}
  .mark span:first-child::after{content:none}
  .mark em{
    display:block;margin-left:0;margin-top:10px;font-size:11px;letter-spacing:.34em;
  }
  .rail-panel{
    position:static;inset:auto;flex:1;display:flex;flex-direction:column;
    opacity:1;visibility:visible;pointer-events:auto;transform:none;
    overflow:visible;transition:none;
  }
  .switch a,.minor{
    opacity:1;transform:none;transition:background .16s,color .16s;
  }
  .switch{padding:6px 0 10px;border-top:1px solid #332a45}
  .minor{margin-top:auto;padding:16px var(--pad) 30px}
  .rail-shell{padding-left:var(--rail)}
  body:has(.nav-toggle:checked){overflow:auto}
  :root{--pad:clamp(20px,2.6vw,40px)}
  .sheet,.band{--pad:clamp(28px,4.6vw,84px)}
}

/* ---------- sheet ---------- */
.sheet{display:block}
section,header.front,header.chapter{padding-left:var(--pad);padding-right:var(--pad)}

/* front */
.front{padding-top:clamp(48px,7vw,104px);padding-bottom:clamp(30px,4vw,52px);max-width:1180px}
.kicker{
  font-family:var(--disp);font-weight:600;font-size:12.5px;letter-spacing:.32em;
  text-transform:uppercase;color:var(--violet);margin:0 0 20px;
}
.front h1{font-size:clamp(46px,9.2vw,116px)}
.front-say{
  font-size:clamp(18px,1.9vw,23px);line-height:1.5;max-width:36ch;
  margin-top:clamp(24px,3vw,40px);color:#3d3450;
}

/* hero */
.hero{
  display:block;margin:clamp(18px,3vw,34px) 0 clamp(34px,5vw,64px);
  width:100%;aspect-ratio:24/10;min-height:180px;object-fit:cover;
  object-position:center 42%;
}

/* statement */
.statement{
  background:var(--violet);color:#fff;
  padding-top:clamp(44px,6vw,86px);padding-bottom:clamp(30px,5vw,70px);
}
.statement p{
  font-family:var(--disp);font-weight:400;
  font-size:clamp(21px,2.7vw,34px);line-height:1.28;letter-spacing:-.02em;
  max-width:26ch;
}
.statement p+p{max-width:34ch;font-size:clamp(17px,1.55vw,20px);line-height:1.55;
  font-family:var(--text);color:#e2d8ff;margin-top:1.6em}

/* ledger */
.ledger{padding-top:clamp(48px,6vw,88px);padding-bottom:clamp(20px,3vw,40px);padding-left:0;padding-right:0}
.ledger-head{
  font-size:12.5px;letter-spacing:.32em;text-transform:uppercase;font-weight:600;
  color:#7a7090;margin:0 var(--pad) 22px;
}
.ledger-row{
  display:grid;grid-template-columns:auto 1fr;gap:4px 22px;
  padding:clamp(24px,3.2vw,40px) var(--pad);
  text-decoration:none;border-top:2px solid var(--ink);
  transition:background .16s,color .16s;
}
.ledger:last-of-type .ledger-row:last-child{border-bottom:2px solid var(--ink)}
.ledger-row:last-child{border-bottom:2px solid var(--ink)}
.ledger-n{
  font-family:var(--disp);font-weight:800;font-size:clamp(28px,3.4vw,46px);
  line-height:1;color:var(--violet);
}
.ledger-row[data-hue=cyan] .ledger-n{color:var(--cyan)}
.ledger-row[data-hue=coral] .ledger-n{color:var(--coral)}
.ledger-row[data-hue=lime] .ledger-n{color:#8ab400}
.ledger-name{
  font-family:var(--disp);font-weight:800;font-size:clamp(30px,5vw,64px);
  letter-spacing:-.03em;line-height:1;
}
.ledger-say{grid-column:2;max-width:62ch;color:#4a4160;margin-top:8px}
.ledger-go{
  grid-column:2;font-family:var(--disp);font-weight:600;font-size:13px;
  letter-spacing:.2em;text-transform:uppercase;margin-top:14px;
}
.ledger-go::after{content:" \2192"}
.ledger-row:hover,.ledger-row:focus-visible{background:var(--ink);color:#fff}
.ledger-row:hover .ledger-say{color:#c9c0dd}
.ledger-row[data-hue=violet]:hover{background:var(--violet)}
.ledger-row[data-hue=cyan]:hover{background:var(--cyan)}
.ledger-row[data-hue=coral]:hover{background:var(--coral)}
.ledger-row[data-hue=lime]:hover{background:var(--lime);color:var(--ink)}
.ledger-row[data-hue=lime]:hover .ledger-say{color:#2f3a05}
.ledger-row:hover .ledger-n{color:inherit}

/* method */
.method{
  padding-top:clamp(40px,5vw,72px);padding-bottom:clamp(48px,6vw,90px);
  max-width:1180px;
}
.method h2{font-size:clamp(26px,3.4vw,42px);margin-bottom:24px}
.method p{max-width:none;color:#3d3450}
@media (min-width:900px){
  .method{columns:2;column-gap:clamp(32px,4vw,64px)}
  .method h2{column-span:all}
}

/* ---------- chapter head ---------- */
.chapter{padding-top:clamp(44px,6vw,92px);padding-bottom:clamp(20px,3vw,34px);max-width:1180px}
.chapter h1{font-size:clamp(42px,7.6vw,96px)}
.chapter-lede{
  font-size:clamp(18px,1.9vw,23px);line-height:1.48;max-width:42ch;
  margin-top:22px;color:#3d3450;
}
.chapter[data-hue=violet] .kicker{color:var(--violet)}
.chapter[data-hue=cyan] .kicker{color:#068199}
.chapter[data-hue=coral] .kicker{color:var(--coral)}
.chapter[data-hue=lime] .kicker{color:#7ea300}
.chapter.thin h1{font-size:clamp(38px,5.6vw,68px)}

.intro{
  padding-top:clamp(28px,3.5vw,48px);padding-bottom:clamp(28px,3.5vw,48px);
  border-top:2px solid var(--ink);max-width:1180px;
}
.intro p{font-size:18.5px;color:#3d3450;max-width:none}
@media (min-width:900px){.intro{columns:2;column-gap:clamp(32px,4vw,64px)}}

/* ---------- hotel entries: full-width alternating bands ---------- */
.entries{padding:0}
.entry{
  display:grid;grid-template-columns:1fr;
  padding:clamp(30px,4vw,58px) var(--pad);
  border-top:2px solid var(--ink);
}
.entry:nth-child(even){background:#f4efe4}
.entry:last-child{border-bottom:2px solid var(--ink)}
.entry-num span{
  font-family:var(--disp);font-weight:800;line-height:.8;
  font-size:clamp(58px,9vw,130px);
  color:transparent;-webkit-text-stroke:2px var(--violet);
  display:block;letter-spacing:-.04em;
}
.entry[data-hue=cyan] .entry-num span{-webkit-text-stroke-color:var(--cyan)}
.entry[data-hue=coral] .entry-num span{-webkit-text-stroke-color:var(--coral)}
.entry[data-hue=lime] .entry-num span{-webkit-text-stroke-color:#8ab400}
@supports not (-webkit-text-stroke:1px red){
  .entry-num span{color:var(--violet)}
}
.entry-body h3{font-size:clamp(28px,4.4vw,54px);margin-top:14px;max-width:20ch}
.entry-where{
  font-family:var(--disp);font-weight:600;font-size:13px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--violet);margin:16px 0 0;
}
.entry[data-hue=cyan] .entry-where{color:#068199}
.entry[data-hue=coral] .entry-where{color:#e0350f}
.entry[data-hue=lime] .entry-where{color:#7ea300}
.entry-angle{
  font-style:italic;font-size:clamp(17px,1.7vw,21px);line-height:1.42;
  margin:10px 0 22px;max-width:40ch;color:#2c2440;
}
.entry-prose p{color:#3d3450}
.entry-prose p:last-child{margin-bottom:0}
@media (min-width:820px){
  .entry{grid-template-columns:minmax(120px,1fr) minmax(0,4fr);gap:clamp(24px,3vw,52px)}
  .entry-num{position:sticky;top:24px;align-self:start}
  .entry-body h3{margin-top:0}
  .entry-prose{columns:2;column-gap:clamp(28px,3vw,48px)}
  .entry-prose p{break-inside:avoid}
}

/* tail */
.tail{
  padding-top:clamp(40px,5vw,72px);padding-bottom:clamp(48px,6vw,84px);
  background:var(--ink);color:#e9e3f5;
}
.tail h2{font-size:clamp(24px,3vw,38px);color:#fff;margin-bottom:22px}
.tail p{max-width:62ch;color:#c4bcd7}
.tail[data-hue=violet] h2{color:#d9c9ff}
.tail[data-hue=cyan] h2{color:#8fe6f6}
.tail[data-hue=coral] h2{color:#ffb2a0}
.tail[data-hue=lime] h2{color:var(--lime)}

/* ---------- legal / doc pages ---------- */
.doc{
  padding-top:clamp(28px,3.5vw,44px);padding-bottom:clamp(48px,6vw,84px);
  max-width:70ch;border-top:2px solid var(--ink);
}
.doc h2{
  font-size:clamp(19px,2vw,25px);margin:2.2em 0 .7em;
  padding-left:16px;border-left:8px solid var(--violet);
}
.doc h2:first-child{margin-top:1.4em}
.doc p{color:#3d3450}
.doc h2:nth-of-type(4n+2){border-left-color:var(--coral)}
.doc h2:nth-of-type(4n+3){border-left-color:var(--cyan)}
.doc h2:nth-of-type(4n+4){border-left-color:#8ab400}

/* ---------- footer band ---------- */
.band{
  background:var(--lime);color:var(--ink);
  padding:clamp(44px,6vw,88px) var(--pad) clamp(34px,4vw,56px);
}
.band-say{
  font-family:var(--disp);font-weight:800;letter-spacing:-.03em;
  font-size:clamp(26px,4.4vw,58px);line-height:1.04;max-width:19ch;
  margin:0 0 clamp(30px,4vw,56px);
}
.band-cols{display:grid;gap:20px;border-top:2px solid var(--ink);padding-top:22px}
.band-col{font-size:14.5px;line-height:1.6;margin:0;color:#2a2510}
.band-col a{text-decoration:none;border-bottom:1.5px solid rgba(23,18,31,.35)}
.band-col a:hover{border-bottom-color:var(--ink);background:var(--ink);color:var(--lime)}
@media (min-width:900px){
  .band-cols{grid-template-columns:1.6fr 1fr;gap:clamp(32px,5vw,90px)}
  .band-say{max-width:16ch}
}

:focus-visible{outline:3px solid var(--coral);outline-offset:3px}