/* =========================================================================
   UNION OF THE TIRED — global stylesheet
   One file for the whole site. Sections, top to bottom:
     1. Tokens & reset      5. Cards (Digital HQ grid)
     2. Layout shell        6. Quilt + status panels
     3. Masthead + counter  7. Footer
     4. Folder-tab nav      8. Page content (prose, forms, demands, archive…)
   ========================================================================= */

/* ── 0. Custom fonts ───────────────────────────────────────────────────── */
@import url("https://use.typekit.net/tcm5wmc.css");

/* ── 1. Tokens & reset ─────────────────────────────────────────────────── */
:root{
  --bg:#f7f7f3;
  --panel:#ffffff;
  --ink:#1a1a14;
  --muted:#8c8578;
  --hair:#d8d4c8;
  --blue:#156a8f;
  --blue-dark:#1a3a4a;
  --blue-soft:#cfe6f0;
  --blue-mist:#e4eef4;
  --lav:#ecedf4;
  --green:#2e5e3a;
  --amber:#8c5a00;
  --red:#c0392b;
  --fb:#eceee7;
  --wrap:1080px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:15px}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

/* ── 2. Layout shell ───────────────────────────────────────────────────── */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 2rem}
.page{padding:1rem 0 3.5rem}
.divider{height:1px;background:var(--hair);border:none;margin:0}

/* ── 3. Masthead + counter ─────────────────────────────────────────────── */
.masthead{
  display:grid;grid-template-columns:1fr minmax(240px,300px);
  align-items:start;gap:2rem;padding:2.25rem 0 1.5rem;
}
.brand{display:flex;align-items:center;gap:1.25rem;text-decoration:none;color:inherit}
.logo-badge{
  flex-shrink:0;width:120px;height:120px;border-radius:50%;
  background:var(--blue-soft);border:1.5px solid var(--ink);
  display:flex;align-items:center;justify-content:center;
}
.logo-badge img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.wordmark{font-family:'veneer',ui-monospace,monospace;font-size:clamp(1.8rem,3.6vw,2.8rem);font-weight:normal;letter-spacing:.03em;line-height:1.05;display:flex;flex-direction:column;gap:.05em}
.wordmark-union{color:var(--blue);display:block}
.wordmark-hq{color:var(--ink);display:block}
.wordmark small{display:block;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:.78rem;font-weight:400;color:var(--ink);letter-spacing:.01em;margin-top:.55rem}

.office-hours{
  background:var(--blue);color:var(--bg);
  border:1.5px solid var(--ink);
  border-radius:9px 9px 9px 9px;
  padding:1.1rem 1.25rem;max-width:280px;width:100%;align-self:stretch;
}
.office-hours .lbl{font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.65)}
.office-hours h4{font-size:1.05rem;font-weight:600;margin:.7rem 0 .35rem;color:var(--bg)}
.office-hours p{font-size:.82rem;line-height:1.6;color:var(--bg)}
.office-hours hr{border:none;border-top:1px solid rgba(255,255,255,.3);margin:.9rem 0}
.office-hours .msg{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;font-size:.8rem;color:var(--bg)}
.office-hours .msg .arrow{font-size:1.1rem}
.member-count-big{font-family:'veneer',ui-monospace,monospace;font-size:clamp(2.8rem,6vw,4.2rem);font-weight:normal;color:var(--bg);line-height:1;margin:.5rem 0 .3rem}
.member-count-label{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.75)}

.counter{border-top:2px solid var(--ink);margin-top:.25rem;padding-top:.9rem;display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap}
.counter .num{font-size:clamp(2.6rem,7vw,4rem);font-weight:600;letter-spacing:-.02em;line-height:1}
.counter .cap{font-style:italic;color:var(--muted);font-size:.95rem}

/* ── 4. Folder-tab nav ─────────────────────────────────────────────────── */
.tabs{
  display:flex;align-items:flex-end;gap:1.6rem;flex-wrap:wrap;
  border-bottom:2px solid var(--ink);padding-bottom:.5rem;margin-bottom:.25rem;
  position:relative;
}
.tabs a,.tabs .dd > button{
  font-family:inherit;background:none;border:none;cursor:pointer;
  font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink);
  text-decoration:none;padding:.15rem 0;border-bottom:2px solid transparent;
  margin-bottom:-.5rem;
}
.tabs a:hover,.tabs .dd > button:hover{border-bottom-color:var(--ink)}
.tabs a.active{border-bottom-color:var(--ink);font-weight:600}
.tabs .dd{position:relative}
.tabs .dd > button::after{content:' ▾';color:var(--muted)}
.tabs .dd-menu{
  position:absolute;top:calc(100% + .6rem);left:-.6rem;z-index:50;
  background:var(--panel);border:1.5px solid var(--ink);border-radius:8px;
  min-width:210px;padding:.35rem;display:none;box-shadow:3px 3px 0 rgba(26,26,20,.12);
}
.tabs .dd.open .dd-menu{display:block}
.tabs .dd-menu a{display:block;padding:.5rem .6rem;border-radius:5px;border:none;margin:0;letter-spacing:.06em}
.tabs .dd-menu a:hover{background:var(--blue-mist)}
.status-tab{
  margin-left:auto;margin-bottom:-.5rem;display:inline-flex;align-items:center;gap:.5rem;
  background:var(--blue);color:var(--bg);
  border:1.5px solid var(--ink);border-bottom:none;
  border-radius:9px 9px 0 0;padding:.5rem .9rem;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
}
.status-tab .dot{width:7px;height:7px;border-radius:50%;background:var(--bg)}
.tabs .login-link{
  margin-left:.5rem;margin-bottom:-.5rem;
  display:inline-flex;align-items:center;
  background:var(--blue);color:var(--bg);
  border:1.5px solid var(--ink);border-bottom:none;
  border-radius:9px 9px 0 0;
  padding:.5rem .9rem;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;white-space:nowrap;
  transition:background .12s;
}
.tabs .login-link:hover{background:var(--blue-dark)}

/* ── section tab label ─────────────────────────────────────────────────── */
.section-tab{
  display:inline-block;background:var(--blue);color:var(--bg);
  border:1.5px solid var(--ink);
  border-radius:7px;padding:.4rem .85rem;font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;margin:.25rem 0 1.4rem;
}

/* ── 5. Cards (Digital HQ grid) ────────────────────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.card{
  /* folder body — square top-left corner is the folder junction point */
  position:relative;background:var(--panel);
  border:2px solid var(--ink);
  border-radius:0 8px 8px 8px;
  padding:1.5rem 1.4rem 1.3rem;
  margin-top:26px;            /* room for the folder tab above */
  text-decoration:none;color:inherit;display:flex;flex-direction:column;
  min-height:195px;transition:transform .14s ease,box-shadow .14s ease;
}
/* folder tab — sits flush at top-left, no bottom border so it merges */
.card::before{
  content:'';
  position:absolute;
  top:-26px;          /* exactly tab height */
  left:-2px;          /* align with card border */
  width:110px;        /* proper folder-tab width */
  height:26px;
  background:var(--panel); /* same white as the card body */
  border:2px solid var(--ink);
  border-bottom:none;
  border-radius:8px 8px 0 0;
}
.card:hover{box-shadow:4px 4px 0 var(--ink)}
.card .icon{width:34px;height:34px;margin-bottom:.85rem}
.card .icon svg{width:100%;height:100%;stroke:var(--ink);fill:none;stroke-width:1.6}
.card h3{font-size:1rem;font-weight:600;letter-spacing:.01em;margin-bottom:.6rem;text-transform:uppercase}
.card p{font-size:.82rem;color:#4a4a38;line-height:1.6}
.card .arrow{margin-top:auto;align-self:flex-end;font-size:1.2rem;padding-top:.6rem}

/* ── 6. Quilt + status panels ──────────────────────────────────────────── */
.panels{display:grid;grid-template-columns:1.15fr 2.2fr 1.1fr;gap:1.5rem;margin-top:2.5rem;align-items:stretch}
.note-card{background:var(--panel);border:1.5px solid var(--ink);border-radius:10px;padding:1.1rem}
.note-card .tab{display:inline-block;background:var(--blue);color:var(--bg);border:1.5px solid var(--ink);border-radius:6px;padding:.3rem .6rem;font-size:.58rem;letter-spacing:.13em;text-transform:uppercase;margin-bottom:.85rem}
.note-card p{font-size:.8rem;line-height:1.65;margin-bottom:.7rem}
.note-card a{font-size:.74rem;color:var(--blue);text-decoration:none;border-bottom:1px solid var(--blue)}

.quilt{
  background:var(--panel);border:1.5px solid var(--ink);border-radius:10px;
  padding:1.1rem;display:flex;flex-direction:column;align-items:center;justify-content:center;
  position:relative;
}
.quilt .banner{
  background:transparent;
  border:none;
  border-radius:0;
  padding:1.5rem 0;
  text-align:center;width:100%;
  position:relative;
  box-shadow:none;
  margin-top:0;
}
.quilt .banner::before,.quilt .banner::after{display:none}
.quilt .banner b{
  display:block;
  font-family:'veneer',sans-serif;
  font-size:clamp(1.2rem,3.2vw,1.9rem);
  font-weight:400;line-height:1.55;
  color:#111;
  text-shadow:none;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.quilt .banner .stars{display:none}

/* ── Field Archive · slogan feed ──────────────────────────────────────────── */
.slogan-archive{
  display:flex;flex-direction:column;gap:1.2rem;
  margin-top:2rem;
}
.slogan-banner{
  font-family:'Impact','Arial Narrow',sans-serif;
  font-size:clamp(1.4rem,4vw,2.2rem);
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--ink);
  border-top:1px solid var(--hair);
  padding-top:1.1rem;
  line-height:1.2;
}
.slogan-empty{
  font-style:italic;color:var(--muted);font-size:.85rem;
}

.archive-btn{
  display:inline-block;background:var(--blue);color:var(--bg);
  border:1.5px solid var(--ink);border-radius:7px;
  padding:.45rem 1rem;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;transition:background .12s;align-self:flex-start;
}
.archive-btn:hover{background:var(--blue-dark)}

.status-report{background:var(--panel);border:1.5px solid var(--ink);border-radius:10px;padding:1.1rem}
.status-report .tab{display:inline-block;background:var(--blue);color:var(--bg);border:1.5px solid var(--ink);border-radius:6px;padding:.3rem .6rem;font-size:.58rem;letter-spacing:.13em;text-transform:uppercase;margin-bottom:.9rem}
.status-report h4{font-size:.92rem;font-weight:600;margin:.9rem 0 .3rem}
.status-report h4:first-of-type{margin-top:0}
.status-report p{font-size:.8rem;line-height:1.55}

/* ── 7. Footer ─────────────────────────────────────────────────────────── */
.site-footer{border-top:2px solid var(--ink);margin-top:3.5rem}
.site-footer .row{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;padding:1.5rem 0;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* ── 8. Page content ───────────────────────────────────────────────────── */
.page-head{padding:1.5rem 0 .5rem}
.page-kicker{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--blue);margin-bottom:.7rem}
.page-title{font-size:clamp(1.8rem,4.5vw,2.8rem);font-weight:600;font-style:italic;letter-spacing:-.01em;line-height:1.1;max-width:18ch}
.page-intro{font-size:1rem;color:#4a4a38;max-width:62ch;margin-top:1rem;line-height:1.8}
.prose{max-width:70ch;margin-top:1.5rem}
.prose p{margin-bottom:1.1rem;line-height:1.85}

/* manifesto */
.mani{background:#f2f3ee;border-left:4px solid var(--blue);padding:1.5rem 1.6rem;margin-top:1.5rem;max-width:75ch}
.mani p{font-size:.92rem;line-height:1.95;margin-bottom:.9rem}
.mani p:last-child{margin-bottom:0}
.mani .mn{font-size:.66rem;color:var(--blue);letter-spacing:.1em;margin-right:.5rem}

/* demands */
.demands{display:flex;flex-direction:column;gap:.7rem;margin-top:1.5rem}
.demand{background:var(--fb);border:1px solid var(--ink);border-radius:8px;padding:1rem 1.1rem;display:flex;gap:1rem;align-items:flex-start}
.demand .dnum{font-size:.7rem;color:var(--blue);font-weight:600;flex-shrink:0;margin-top:2px}
.demand h4{font-size:.92rem;font-weight:600;margin-bottom:.25rem}
.demand p{font-size:.82rem;color:#5a5a48;line-height:1.6}
.badge{font-size:.6rem;border:1px solid;border-radius:4px;padding:2px 7px;letter-spacing:.06em;text-transform:uppercase;flex-shrink:0;align-self:flex-start;margin-top:2px}
.badge.actv{color:var(--green);border-color:var(--green);background:#eef5ee}
.badge.pend{color:var(--amber);border-color:var(--amber);background:#fff4e0}
.badge.ong{color:var(--blue);border-color:var(--blue);background:var(--blue-mist)}

/* membership form */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin-top:1.5rem;max-width:680px}
.field{display:flex;flex-direction:column;gap:.35rem}
.field.full{grid-column:1/-1}
.field label{font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.field input,.field textarea{background:var(--panel);border:1.5px solid var(--ink);border-radius:6px;padding:.6rem .7rem;font-family:inherit;font-size:.85rem;color:var(--ink);outline:none;width:100%}
.field input:focus,.field textarea:focus{border-color:var(--blue)}
.tags{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.5rem}
.tag{background:var(--panel);border:1.5px solid var(--hair);border-radius:6px;padding:.35rem .75rem;font-size:.72rem;cursor:pointer;user-select:none;transition:all .14s}
.tag.on{background:var(--blue-dark);color:var(--blue-soft);border-color:var(--blue-dark)}
.btn{background:var(--ink);color:var(--bg);border:none;border-radius:6px;padding:.8rem 1.8rem;font-family:inherit;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;cursor:pointer;margin-top:1.2rem}
.btn:hover{background:#2a2a20}
.btn:disabled{opacity:.6;cursor:default}
.confirm{display:none;background:var(--fb);border:2px solid var(--green);border-radius:8px;padding:1.6rem;text-align:center;margin-top:1.5rem;max-width:680px}
.confirm .stamp{font-size:1.5rem;font-weight:600;color:var(--green);border:3px solid var(--green);border-radius:4px;display:inline-block;padding:0 .6rem;transform:rotate(-3deg);opacity:.78;margin-bottom:.8rem}
.slogan-box{background:#f2f3ee;border:1px solid var(--ink);border-radius:8px;padding:1.2rem;margin-top:1.5rem;max-width:680px}
.slogan-box .lbl{font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:.8rem}
.slogan-item{font-size:.85rem;font-style:italic;padding:.45rem .7rem;border-left:3px solid var(--blue);background:var(--bg);border-radius:0 4px 4px 0;margin-bottom:.4rem;line-height:1.5}
.slogan-item span{display:block;font-size:.6rem;color:var(--muted);font-style:normal;margin-top:2px}

/* broadcast stamp overlay */
.vthumb-stamp{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-8deg);
  font-family:'IBM Plex Mono',monospace;
  font-size:clamp(.9rem,2.5vw,1.3rem);font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--bg);
  border:3px solid var(--bg);
  padding:.3rem .7rem;white-space:nowrap;
  pointer-events:none;
}

/* sticker opt-in */
.sticker-section{margin-top:1.4rem;border-top:1px dashed var(--hair);padding-top:1.2rem}
.sticker-check{display:flex;align-items:flex-start;gap:.85rem;cursor:pointer}
.sticker-check input{display:none}
.sticker-box{
  flex-shrink:0;width:20px;height:20px;margin-top:.15rem;
  border:2px solid var(--ink);border-radius:2px;
  display:flex;align-items:center;justify-content:center;
  transition:background .12s;
}
.sticker-check input:checked + .sticker-box{background:var(--blue);border-color:var(--blue)}
.sticker-check input:checked + .sticker-box::after{content:'✓';color:var(--bg);font-size:.75rem;line-height:1}
.sticker-label strong{display:block;font-size:.88rem;margin-bottom:.2rem}
.sticker-label small{font-size:.65rem;color:var(--muted);letter-spacing:.02em}

/* archive / interventions */
.arch-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:1.5rem}
.arch-card{border:1.5px solid var(--ink);border-radius:9px;background:var(--panel);overflow:hidden}
.arch-img{min-height:110px;display:flex;align-items:center;justify-content:center;text-align:center;padding:1rem;font-size:.62rem;letter-spacing:.09em;text-transform:uppercase;line-height:1.7}
.arch-body{padding:.9rem}
.arch-tag{font-size:.58rem;color:var(--blue);background:var(--blue-mist);border:1px solid var(--blue);border-radius:4px;padding:1px 6px;letter-spacing:.06em;text-transform:uppercase;display:inline-block;margin-bottom:.5rem}
.arch-body h4{font-size:.9rem;font-weight:600;margin-bottom:.3rem}
.arch-body p{font-size:.78rem;color:#5a5a48;line-height:1.6}
.arch-card.wide{grid-column:1/-1}

/* broadcasts */
.vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:1.5rem}
.vcard{border:1.5px solid var(--ink);border-radius:9px;background:var(--panel);overflow:hidden;cursor:pointer;transition:transform .14s,box-shadow .14s}
.vcard:hover{transform:translate(-2px,-2px);box-shadow:3px 3px 0 var(--ink)}
.vthumb{height:110px;background:var(--blue-dark);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.vthumb::after{content:'▶';color:rgba(207,230,240,.4);font-size:1.8rem}
.vthumb .lbl{position:absolute;bottom:6px;left:8px;font-size:.55rem;color:rgba(207,230,240,.6);letter-spacing:.07em}
.vbody{padding:.7rem .8rem}
.vbody h4{font-size:.82rem;font-weight:600;margin-bottom:.2rem}
.vbody p{font-size:.6rem;color:var(--muted);letter-spacing:.04em}

/* reality check (UTRC) */
.utrc{border:2px solid var(--ink);border-radius:10px;background:#f2f3ee;padding:1.6rem;margin-top:1.5rem;max-width:760px}
.utrc-ref{font-size:.55rem;letter-spacing:.14em;color:var(--muted);text-transform:uppercase;margin-bottom:1.2rem}
.uq{margin-bottom:1.5rem;padding-bottom:1.3rem;border-bottom:1px dashed var(--hair)}
.uqn{font-size:.6rem;color:var(--blue);letter-spacing:.13em;text-transform:uppercase;margin-bottom:.4rem}
.uqt{font-size:.95rem;font-style:italic;margin-bottom:.75rem;line-height:1.5}
.uopts{display:flex;flex-direction:column;gap:.4rem}
.uopt{display:flex;align-items:center;gap:9px;background:var(--panel);border:1.5px solid var(--hair);border-radius:6px;padding:.55rem .85rem;cursor:pointer;font-size:.82rem;line-height:1.4}
.uopt:hover{border-color:var(--blue)}
.uopt.on{border-color:var(--blue-dark);border-width:2px;background:var(--blue-mist)}
.ures{display:none;margin-top:1.5rem;border:2px solid;border-radius:8px;padding:1.2rem;position:relative;max-width:760px}
.ures .stamp{font-size:1.2rem;font-weight:600;position:absolute;top:.9rem;right:1.1rem;border:3px solid;border-radius:4px;padding:0 .5rem;transform:rotate(-3deg);opacity:.75}
.ures strong{font-size:.62rem;letter-spacing:.07em;text-transform:uppercase;display:block;margin-bottom:.4rem}
.ures p{font-size:.85rem;line-height:1.75;max-width:60ch}

/* placeholder pages */
.placeholder{border:1.5px dashed var(--ink);border-radius:10px;padding:2.5rem;margin-top:1.5rem;text-align:center;background:var(--panel);max-width:680px}
.placeholder .stamp{display:inline-block;border:2px solid var(--muted);border-radius:5px;color:var(--muted);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;padding:.3rem .7rem;transform:rotate(-2deg);margin-bottom:1.1rem}
.placeholder p{font-size:.9rem;color:#4a4a38;line-height:1.8;max-width:48ch;margin:0 auto}

.dept-list{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:1.5rem}
.dept-list a{border:1.5px solid var(--ink);border-radius:9px;padding:1.1rem 1.2rem;text-decoration:none;color:inherit;transition:transform .14s,box-shadow .14s}
.dept-list a:hover{transform:translate(-2px,-2px);box-shadow:3px 3px 0 var(--ink)}
.dept-list h4{font-size:.9rem;font-weight:600;text-transform:uppercase;margin-bottom:.3rem}
.dept-list p{font-size:.78rem;color:#5a5a48}

/* ── responsive ────────────────────────────────────────────────────────── */
@media(max-width:860px){
  .cards{grid-template-columns:1fr 1fr}
  .panels{grid-template-columns:1fr}
  .vgrid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  html{font-size:14px}
  .wrap{padding:0 1.25rem}
  .masthead{grid-template-columns:1fr}
  .office-hours{max-width:none}
  .cards{grid-template-columns:1fr}
  .form-grid,.arch-grid,.vgrid,.dept-list{grid-template-columns:1fr}
  .tabs{gap:1rem}
  .status-tab{margin-left:0}
}

/* =========================================================================
   9. Membership system — auth pages, app bar, admin (added for the PHP app)
   Reuses the tokens, .form-grid/.field/.tag/.btn defined above so the
   account + admin screens match the rest of the site.
   ========================================================================= */

/* ── flash messages ─────────────────────────────────────────────────────── */
.flash{border:1.5px solid var(--ink);border-radius:8px;padding:.7rem .9rem;font-size:.8rem;line-height:1.5;margin:0 0 .9rem}
.flash-success{background:#eef5ee;border-color:var(--green);color:var(--green)}
.flash-error{background:#fbeeec;border-color:var(--red);color:var(--red)}
.flash-notice{background:var(--blue-mist);border-color:var(--blue-dark);color:var(--blue-dark)}

/* ── shared small bits ──────────────────────────────────────────────────── */
.muted{color:var(--muted)}
.hint{color:var(--muted);text-transform:none;letter-spacing:0;font-weight:400}
code{font-family:inherit;background:rgba(26,26,20,.07);padding:0 .3rem;border-radius:3px;font-size:.92em}
a.btn{display:inline-block;text-decoration:none;text-align:center}
.btn-ghost{background:transparent;color:var(--ink);border:2px solid var(--ink)}
.btn-ghost:hover{background:var(--fb)}

/* ── brand badge (round monogram) ───────────────────────────────────────── */
.brand-badge{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:var(--blue-soft);border:1.5px solid var(--ink);font-size:.6rem;font-weight:600;letter-spacing:.05em;flex-shrink:0}
.brand-badge.lg{width:52px;height:52px;font-size:.78rem}

/* ── auth pages (login / register / forgot / reset / portal) ────────────── */
body.auth-page{display:flex;flex-direction:column;min-height:100vh}
.auth-shell{flex:1;display:flex;align-items:center;justify-content:center;padding:2.5rem 1.25rem}
.auth-card{width:100%;max-width:440px;background:var(--panel);border:2px solid var(--ink);border-radius:12px;padding:2rem 1.9rem}
.auth-brand{display:flex;align-items:center;gap:.8rem;margin-bottom:1.3rem}
.auth-brand strong{display:block;font-size:.95rem;line-height:1.2}
.auth-brand small{display:block;color:var(--muted);font-size:.66rem}
.auth-kicker{font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);margin-bottom:.5rem}
.auth-card h1{font-size:1.5rem;font-weight:600;font-style:italic;letter-spacing:-.01em;margin-bottom:.6rem;line-height:1.15}
.auth-card .muted{font-size:.82rem;line-height:1.65}
.auth-card .field{margin-top:.9rem}
.auth-actions{display:flex;gap:.7rem;margin-top:1.4rem;flex-wrap:wrap}
.auth-foot{margin-top:1.3rem;font-size:.72rem;line-height:1.8}
.auth-foot a{color:var(--blue)}
.dev-notice{border:1.5px dashed var(--ink);border-radius:8px;background:var(--fb);padding:.9rem 1rem;margin:.2rem 0 1rem;font-size:.75rem;line-height:1.55}
.dev-notice strong{display:block;font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.4rem}
.dev-notice a{color:var(--blue);word-break:break-all}

/* ── app bar (membership + admin chrome) ────────────────────────────────── */
body.app-page{display:flex;flex-direction:column;min-height:100vh}
/* width:100% pins the main column to the viewport (the .wrap max-width still
   caps it on desktop); min-width:0 lets wide tables scroll inside .table-wrap
   instead of stretching the whole page on narrow screens. */
body.app-page .page{flex:1 0 auto;width:100%;min-width:0}
body.app-page .page>*{min-width:0}
.app-bar{border-bottom:2px solid var(--ink);background:var(--bg)}
.app-bar-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1rem 0}
.brand-mini{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:inherit}
.brand-text{display:flex;flex-direction:column;font-weight:600;font-size:.9rem;line-height:1.15}
.brand-text small{font-weight:400;color:var(--muted);font-size:.6rem;letter-spacing:.03em}
.app-nav{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase}
.app-nav a{text-decoration:none;color:var(--ink);border-bottom:2px solid transparent;padding-bottom:2px}
.app-nav a:hover{border-bottom-color:var(--ink)}
.app-nav a.on{border-bottom-color:var(--ink);font-weight:600}
.app-nav .who{color:var(--muted);text-transform:none;letter-spacing:0;font-size:.68rem}
.app-nav .navbtn{background:var(--ink);color:var(--bg);border-radius:6px;padding:.4rem .8rem;border-bottom:none}
.app-nav .navbtn:hover{background:#2a2a20;border-bottom:none}
.app-foot{border-top:2px solid var(--ink);margin-top:3rem}
.app-foot .wrap{padding:1.3rem 2rem;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* ── membership form additions ──────────────────────────────────────────── */
.member-form{margin-top:.4rem}
.status-pill{display:inline-block;border:1.5px solid var(--green);color:var(--green);background:#eef5ee;border-radius:5px;padding:.1rem .55rem;font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;margin-left:.4rem;vertical-align:middle}
.status-pill.inactive{border-color:var(--amber);color:var(--amber);background:#fff4e0}
.form-fineprint{font-size:.62rem;color:var(--muted);margin-top:1rem;font-style:italic}
/* tags are now real <label><checkbox>; hide the box, style the label */
.tag{display:inline-flex;align-items:center}
.tag input[type=checkbox]{position:absolute;opacity:0;pointer-events:none;width:0;height:0;margin:0}
.tag:has(input:checked){background:var(--blue-dark);color:var(--blue-soft);border-color:var(--blue-dark)}
.other-wrap{margin-top:.6rem}
.other-wrap.hidden{display:none}
/* No-JS fallback: reveal the Other field whenever the Other box is checked. */
.field:has(.tags input[value="Other"]:checked) .other-wrap.hidden{display:block}
.other-wrap input{background:var(--panel);border:1.5px solid var(--ink);border-radius:6px;padding:.5rem .7rem;font-family:inherit;font-size:.8rem;color:var(--ink);width:100%;max-width:300px}
.other-wrap input:focus{outline:none;border-color:var(--blue)}

/* ── admin ───────────────────────────────────────────────────────────────── */
.warn-banner{border:2px solid var(--amber);background:#fff4e0;color:#6b4a00;border-radius:8px;padding:.9rem 1.1rem;margin-bottom:1.4rem;font-size:.8rem;line-height:1.55;display:flex;flex-direction:column;gap:.25rem}
.warn-banner.warn-strong{border-color:var(--red);background:#fbeeec;color:var(--red)}
.warn-banner code{background:rgba(26,26,20,.08)}
.admin-links{display:flex;gap:1.2rem;flex-wrap:wrap;margin:0 0 1.6rem;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase}
.admin-links a{color:var(--blue);text-decoration:none;border-bottom:1px solid transparent}
.admin-links a:hover{border-bottom-color:var(--blue)}
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-bottom:1rem}
.stat{border:2px solid var(--ink);border-radius:10px;background:var(--panel);padding:1.2rem 1.3rem;display:flex;flex-direction:column;gap:.3rem}
.stat-num{font-size:2.4rem;font-weight:600;line-height:1;letter-spacing:-.02em}
.stat-lbl{font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.section-heading{font-size:.92rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;margin:2rem 0 .9rem;padding-bottom:.4rem;border-bottom:1.5px solid var(--hair)}
.table-wrap{overflow-x:auto;border:1.5px solid var(--ink);border-radius:10px;background:var(--panel)}
.table{width:100%;border-collapse:collapse;font-size:.78rem}
.table th,.table td{text-align:left;padding:.6rem .8rem;border-bottom:1px solid var(--hair);white-space:nowrap}
.table thead th{font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);background:var(--fb)}
.table tbody tr:last-child td{border-bottom:none}
.table a{color:var(--blue);text-decoration:none;border-bottom:1px solid transparent}
.table a:hover{border-bottom-color:var(--blue)}
.pill{display:inline-block;border-radius:5px;padding:.1rem .5rem;font-size:.56rem;letter-spacing:.07em;text-transform:uppercase;border:1px solid}
.pill-on{color:var(--green);border-color:var(--green);background:#eef5ee}
.pill-off{color:var(--amber);border-color:var(--amber);background:#fff4e0}
.record{margin-bottom:1.5rem}
.dl{display:grid;grid-template-columns:minmax(190px,260px) 1fr;border:1.5px solid var(--ink);border-radius:10px;background:var(--panel);padding:.4rem 1.2rem;font-size:.82rem}
.dl dt{color:var(--muted);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;padding:.55rem 0;border-bottom:1px solid var(--hair);align-self:center}
.dl dd{padding:.55rem 0;border-bottom:1px solid var(--hair);word-break:break-word}
.dl dt:last-of-type,.dl dd:last-of-type{border-bottom:none}
.inline-form{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1.4rem}
.inline-form .btn{margin-top:0}
.admin-pw{max-width:560px}
.admin-pw .btn{margin-top:1rem}

@media(max-width:760px){
  .stat-grid{grid-template-columns:1fr}
  .dl{grid-template-columns:1fr;padding:.6rem 1.1rem}
  .dl dt{padding-bottom:0;border-bottom:none}
  .dl dd{padding-top:.15rem}
}

/* ── Entry Gate ──────────────────────────────────────────────────────────── */
#gate{
  position:fixed;inset:0;z-index:9999;
  display:none; /* shown by JS if session not cleared */
  align-items:flex-start;justify-content:center;
  background:var(--bg);
  padding:2rem 1rem;
  overflow-y:auto;
  transition:opacity .5s ease;
}
#gate.gate-exit{opacity:0;pointer-events:none}

.gate-inner{
  max-width:560px;width:100%;
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  text-align:center;
}

.gate-ref{
  font-family:'IBM Plex Mono',monospace;
  font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin:0 0 .6rem;
}
.gate-rule{border:none;border-top:1px solid var(--ink);margin:0 0 1rem}
.gate-logo{
  width:95%;
  height:auto;
  display:block;
  margin:0 auto 1rem;
}

.gate-title{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:clamp(2.4rem,8vw,4rem);font-weight:700;
  line-height:1.05;margin:0 0 .5rem;
}
.gate-meta{
  font-family:'IBM Plex Mono',monospace;
  font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin:0 0 2rem;
}
.gate-body{
  font-family:'IBM Plex Mono',monospace;
  font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;
  line-height:1.8;margin:0 0 1rem;
}

.gate-check{
  display:flex;align-items:flex-start;gap:1rem;
  border:2px solid var(--ink);padding:.7rem 1rem;
  margin-bottom:.6rem;cursor:pointer;
  text-align:left;
}
.gate-check input{display:none}
.gate-box{
  flex-shrink:0;width:20px;height:20px;margin-top:.15rem;
  border:2px solid var(--ink);border-radius:2px;
  display:flex;align-items:center;justify-content:center;
  transition:background .12s;
}
.gate-check input:checked + .gate-box{background:var(--blue);border-color:var(--blue)}
.gate-check input:checked + .gate-box::after{
  content:'✓';color:var(--bg);font-size:.75rem;line-height:1;
}
.gate-label strong{display:block;font-size:.8rem;margin-bottom:.2rem}
.gate-label small{
  font-family:'IBM Plex Mono',monospace;
  font-size:.68rem;color:var(--muted);letter-spacing:.04em;
}

.gate-btn{
  width:100%;margin-top:1.2rem;padding:1rem;
  background:var(--blue);color:var(--bg);
  border:none;font-family:'IBM Plex Mono',monospace;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  cursor:not-allowed;transition:background .2s;
}
.gate-btn:not([disabled]){
  background:var(--blue-dark);cursor:pointer;
}
.gate-btn:not([disabled]):hover{background:#0f2530}

.gate-fine{
  font-family:'IBM Plex Mono',monospace;
  font-size:.65rem;color:var(--muted);text-align:center;
  margin-top:1rem;letter-spacing:.04em;
}

/* ── Intro animation screen ──────────────────────────────────────────────── */
#intro{
  position:fixed;inset:0;z-index:10000;
  display:none;
  align-items:center;justify-content:center;
  background:#e8e8e4;
  transition:opacity .7s ease;
}
#intro.intro-exit{opacity:0;pointer-events:none}

#intro-logo{
  width:100vw;
  height:100vh;
  object-fit:cover;
  opacity:0;
  transform:scale(1.04);
  animation:introFadeIn 1.6s cubic-bezier(.22,.8,.36,1) .2s forwards;
}

@keyframes introFadeIn{
  to{ opacity:1; transform:scale(1); }
}