/* buildherfan.org — design system
   Structure: fixed left rail + expanding index panel; full-width entry bands; single-band footer. */

:root{
  --ink:#141019;
  --ink-soft:#4a4356;
  --paper:#FFFBF4;
  --paper-2:#F3ECFF;
  --line:#E2D9CE;
  --art:#7C3AED;
  --cap:#00A39B;
  --cas:#FF3D6E;
  --ice:#2563EB;
  --zest:#D8F34A;
  --rail:268px;
  --pad:clamp(20px,5vw,72px);
  --c:var(--art);
  --c-tint:#F1EAFF;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;padding:0 0 0 var(--rail);
  background:var(--paper);color:var(--ink);
  font-family:"Public Sans",system-ui,-apple-system,Segoe UI,sans-serif;
  font-size:17px;line-height:1.62;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,.row-h,.hero-k,.slot-t{font-family:"Bricolage Grotesque","Public Sans",system-ui,sans-serif;font-weight:800;letter-spacing:-.02em;line-height:1.02}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--pad);top:12px;z-index:99;background:var(--ink);color:#fff;padding:10px 16px;border-radius:999px}

/* ------- theme tokens per category ------- */
.t-art{--c:var(--art);--c-tint:#F1EAFF}
.t-cap{--c:var(--cap);--c-tint:#DEF7F5}
.t-cas{--c:var(--cas);--c-tint:#FFE6EC}
.t-ice{--c:var(--ice);--c-tint:#E3EAFF}
.t-home{--c:var(--ink);--c-tint:var(--paper-2)}
.p-art{--c:var(--art)}.p-cap{--c:var(--cap)}.p-cas{--c:var(--cas)}.p-ice{--c:var(--ice)}

/* ================= LEFT RAIL — always-visible nav on desktop ================= */
.rail{
  position:fixed;inset:0 auto 0 0;width:var(--rail);z-index:60;
  background:var(--ink);color:var(--paper);
  display:flex;flex-direction:column;align-items:stretch;
  padding:28px 22px 24px;overflow:auto;
}
.rail-brand{
  text-decoration:none;font-family:"Bricolage Grotesque",sans-serif;font-weight:800;
  font-size:26px;letter-spacing:-.02em;display:flex;flex-direction:column;gap:4px;
  line-height:1;margin:0 0 28px;flex-shrink:0;
}
.rail-brand-b{font-weight:400;font-size:12px;opacity:.62;font-family:"Public Sans",sans-serif;letter-spacing:.18em;text-transform:uppercase}
.rail-brand:hover{color:var(--zest)}

/* burger only used on mobile */
.ix-toggle{display:none}
.ix-check{position:absolute;opacity:0;pointer-events:none}

.ix-panel{
  display:flex;flex-direction:column;flex:1;min-height:0;
  background:transparent;color:var(--paper);padding:0;
}
.ix-lead{font-size:11px;letter-spacing:.18em;text-transform:uppercase;opacity:.55;margin:0 0 16px}
.ix-list{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.18)}
.ix-list a{
  display:flex;align-items:baseline;gap:12px;padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,.18);text-decoration:none;
}
.ix-n{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:clamp(18px,1.55vw,22px);letter-spacing:-.02em;line-height:1.15}
.ix-r{margin-left:auto;font-size:11px;letter-spacing:.16em;opacity:.45;flex-shrink:0}
.ix-list a:hover .ix-n,.ix-list a.on .ix-n{color:var(--zest)}
.ix-list a[data-c="art"]:hover .ix-n,.ix-list a[data-c="art"].on .ix-n{color:#B18BFF}
.ix-list a[data-c="cap"]:hover .ix-n,.ix-list a[data-c="cap"].on .ix-n{color:#5BE6DC}
.ix-list a[data-c="cas"]:hover .ix-n,.ix-list a[data-c="cas"].on .ix-n{color:#FF7C9C}
.ix-list a[data-c="ice"]:hover .ix-n,.ix-list a[data-c="ice"].on .ix-n{color:#7FA0FF}
.ix-sub{list-style:none;margin:auto 0 0;padding:22px 0 0;display:flex;flex-direction:column;gap:10px;font-size:13px;letter-spacing:.04em;border-top:1px solid rgba(255,255,255,.12)}
.ix-sub a{opacity:.68;text-decoration:none;border-bottom:1px solid transparent;align-self:flex-start}
.ix-sub a:hover{opacity:1;border-color:var(--zest)}

/* ================= HERO (header idea folded into the page top) ================= */
.hero{padding:clamp(40px,7vw,96px) var(--pad) 0;position:relative}
.hero::before{content:"";position:absolute;left:0;top:0;width:100%;height:14px;background:var(--c)}
.hero-k{margin:0 0 18px;font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--c);font-weight:600}
.hero h1{margin:0;font-size:clamp(42px,8.2vw,116px);max-width:16ch}
.hero-lead{margin:26px 0 0;max-width:56ch;font-size:clamp(18px,2.1vw,24px);color:var(--ink-soft);line-height:1.45}
.hero-note{margin:18px 0 0;font-size:14px;color:var(--ink-soft);max-width:60ch}
.hero-media{margin:clamp(28px,4vw,48px) calc(-1 * var(--pad)) 0;padding:0;overflow:hidden}
.hero-media img{width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;object-position:center 42%}
.slot{margin:clamp(28px,4vw,48px) 0 0;padding:0}
.slot-in{
  aspect-ratio:2/1;border:2px dashed var(--c);border-radius:6px;background:var(--c-tint);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:20px;
}
.slot-t{font-size:clamp(16px,2.4vw,28px);color:var(--c)}
.slot-d{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}

/* ================= HOME ================= */
.statement{padding:clamp(44px,7vw,110px) var(--pad)}
.statement p{margin:0;max-width:34ch;font-family:"Bricolage Grotesque",sans-serif;font-weight:400;
  font-size:clamp(24px,3.6vw,46px);line-height:1.16;letter-spacing:-.02em;max-width:26ch}
.rows{border-top:2px solid var(--ink)}
.row{
  display:grid;grid-template-columns:minmax(72px,8vw) 1fr auto;gap:clamp(16px,3vw,44px);align-items:start;
  padding:clamp(24px,3.6vw,46px) var(--pad);border-bottom:2px solid var(--ink);text-decoration:none;
  transition:background .18s,color .18s;
}
.row-n{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:clamp(28px,4vw,54px);color:var(--c);line-height:1}
.row-h{display:block;font-size:clamp(30px,5.4vw,72px);font-family:"Bricolage Grotesque",sans-serif;font-weight:800;letter-spacing:-.03em;line-height:1}
.row-p{display:block;margin-top:14px;max-width:62ch;color:var(--ink-soft);font-size:16px}
.row-go{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--c);padding-top:10px;white-space:nowrap}
.row:hover{background:var(--c);color:#fff}
.row:hover .row-n,.row:hover .row-go,.row:hover .row-p{color:#fff}
.row:hover .row-go{color:var(--zest)}

.close{padding:clamp(48px,7vw,96px) var(--pad);background:var(--paper-2)}
.close h2{margin:0 0 16px;font-size:clamp(24px,3.2vw,40px)}
.close p{margin:0 0 14px;max-width:62ch;color:var(--ink-soft)}
.close a{color:var(--c);text-decoration-thickness:2px;text-underline-offset:3px}

/* ================= CATEGORY: argument + entries ================= */
.argue{
  padding:clamp(44px,6vw,96px) var(--pad);display:grid;gap:clamp(20px,3vw,56px);
  grid-template-columns:1.15fr 1fr;border-bottom:2px solid var(--ink);
}
.argue-a{margin:0;font-family:"Bricolage Grotesque",sans-serif;font-size:clamp(21px,2.7vw,34px);
  line-height:1.2;letter-spacing:-.015em;font-weight:400}
.argue-b{margin:0;color:var(--ink-soft);align-self:end;max-width:52ch}

.entries{counter-reset:e}
.entry{
  position:relative;padding:clamp(40px,5.5vw,86px) var(--pad);border-bottom:2px solid var(--ink);
  display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(20px,3.5vw,64px);align-items:start;overflow:hidden;
}
.entry:nth-child(even){background:var(--c-tint)}
.entry-n{
  position:absolute;right:-.06em;bottom:-.3em;font-family:"Bricolage Grotesque",sans-serif;font-weight:800;
  font-size:clamp(140px,22vw,300px);line-height:.8;color:var(--c);opacity:.12;pointer-events:none;letter-spacing:-.05em;
}
.entry-head{position:relative;z-index:1}
.entry-head h3{margin:0;font-size:clamp(30px,4.6vw,62px);letter-spacing:-.03em}
.entry-head h3::after{content:"";display:block;width:88px;height:8px;background:var(--c);margin-top:20px}
.entry-loc{margin:16px 0 0;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}
.entry-body{position:relative;z-index:1}
.entry-body p{margin:0 0 16px}
.entry-body p:last-child{margin-bottom:0}
.entry-body p:first-child::first-line{font-weight:600}

/* ================= PLAIN PAGES ================= */
.prose{padding:clamp(44px,6vw,96px) var(--pad);max-width:74ch}
.prose h2{margin:44px 0 12px;font-size:clamp(21px,2.6vw,30px)}
.prose h2:first-child{margin-top:0}
.prose p{margin:0 0 14px;color:var(--ink-soft)}
.prose a{color:var(--art)}
.mail a{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:clamp(24px,4vw,46px);
  letter-spacing:-.03em;color:var(--ink);text-decoration:none;border-bottom:8px solid var(--zest)}
.mail a:hover{border-color:var(--art)}
.p-plain .hero::before{background:var(--zest)}
.p-plain .hero-k{color:var(--ink)}
.p-plain .slot{display:none}

/* ================= FOOTER: one wide band, asymmetric ================= */
.band{
  background:var(--ink);color:var(--paper);margin-top:0;
  padding:clamp(44px,6vw,92px) var(--pad);
  display:grid;grid-template-columns:1.4fr .9fr;gap:clamp(24px,4vw,72px);align-items:start;
}
.band-say p{
  margin:0;font-family:"Bricolage Grotesque",sans-serif;font-weight:800;letter-spacing:-.03em;
  font-size:clamp(28px,4.6vw,62px);line-height:1.02;max-width:18ch;
}
.band-say p::after{content:"";display:block;width:120px;height:10px;background:var(--zest);margin-top:26px}
.band-col{font-size:15px;color:rgba(255,251,244,.72);align-self:end}
.band-k{margin:0 0 10px;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--zest)}
.band-col p{margin:0 0 14px}
.band-legal a{color:var(--paper);text-decoration-color:var(--zest);text-decoration-thickness:2px;text-underline-offset:3px}
.band-c{font-size:13px;opacity:.6;margin:0}

/* ================= RESPONSIVE — burger only below 900px ================= */
@media (max-width:900px){
  :root{--rail:0px}
  body{padding:64px 0 0}
  .rail{
    inset:0 0 auto 0;width:100%;height:64px;flex-direction:row;align-items:center;
    padding:0 16px;justify-content:space-between;overflow:visible;
  }
  .rail-brand{flex-direction:row;align-items:baseline;gap:10px;margin:0;font-size:19px}
  .rail-brand-b{font-size:11px}
  .ix-toggle{
    display:flex;flex-direction:row;align-items:center;gap:10px;
    width:auto;padding:9px 16px;border-radius:999px;background:var(--zest);color:var(--ink);
    cursor:pointer;position:relative;z-index:2;
  }
  .ix-toggle .bars{display:flex;flex-direction:column;gap:4px;align-items:center}
  .ix-toggle i{display:block;width:20px;height:2.5px;background:var(--ink);border-radius:2px;transition:transform .2s,opacity .2s}
  .ix-toggle b{font-size:11px;letter-spacing:.14em;text-transform:uppercase}
  .ix-check:checked + .ix-toggle i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  .ix-check:checked + .ix-toggle i:nth-child(2){opacity:0}
  .ix-check:checked + .ix-toggle i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
  .ix-panel{
    display:none;position:fixed;inset:64px 0 0 0;background:var(--ink);color:var(--paper);
    padding:clamp(28px,6vw,80px);overflow:auto;z-index:1;
  }
  .ix-check:checked ~ .ix-panel{display:flex}
  .ix-n{font-size:clamp(28px,8vw,48px)}
  .ix-list a{padding:clamp(14px,2.4vw,22px) 0;gap:18px}
  .ix-sub{flex-direction:row;flex-wrap:wrap;gap:8px 26px;margin-top:34px;padding-top:0;border-top:0}
  .argue,.entry,.band{grid-template-columns:1fr}
  .entry-n{font-size:34vw;opacity:.1}
  .row{grid-template-columns:56px 1fr;}
  .row-go{grid-column:2;padding-top:14px}
  .band-say p::after{margin-top:18px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}