/* WiCB Network — the workshop site's design system, applied to an application.
   Tokens, type scale and spacing are lifted verbatim from
   astro-workspace/src/sites/site-adalovelace/src/styles/global.css so the two
   properties read as one. What is added here is what a directory needs and a
   brochure site does not: forms, tables, filters, cards, review queues. */

@font-face{font-family:"Departure Mono";src:url("/fonts/departure-mono-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("/fonts/ibm-plex-sans-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("/fonts/ibm-plex-sans-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("/fonts/ibm-plex-sans-700.woff2") format("woff2");font-weight:700;font-display:swap}

:root{
  --kp-surface:#FCFCFB; --kp-surface-variant:#F1EFF6;
  --kp-primary-500:#2b2362; --kp-primary-600:#241d52; --kp-primary-700:#1c1740;
  --kp-accent-500:#e2017b; --kp-accent-600:#c4016b;
  --kp-tertiary-500:#293982; --kp-link-500:#469cdb; --kp-link-600:#3a83bb;
  --kp-n200:#EDEBF2; --kp-n300:#D7D4E0; --kp-n400:#A7A2BC; --kp-n500:#776F94;
  --kp-n600:#534B72; --kp-n700:#3A3358; --kp-n800:#272140; --kp-n900:#1A1530;
  --kp-ok:#198754; --kp-warning:#f6b60b; --kp-error:#eb3131;
  --font-display:"Departure Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --font-body:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --maxw:1180px; --gutter:clamp(16px,4vw,40px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-padding-top:96px}
body{font-family:var(--font-body);color:var(--kp-primary-500);background:var(--kp-surface);line-height:1.6;-webkit-font-smoothing:antialiased}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.1}
h1{font-size:clamp(28px,5vw,48px);letter-spacing:-.01em}
h2{font-size:clamp(22px,3.2vw,32px)}
h3{font-size:clamp(17px,2.2vw,21px)}
a{color:var(--kp-link-600)}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
section{padding:clamp(28px,4.5vw,56px) 0}
.band{background:var(--kp-surface-variant)}

/* The pink pixel marker before an eyebrow is the workshop site's signature.
   Reproduced exactly: a 9px square drawn with two box-shadows. */
.eyebrow{display:block;width:fit-content;font-family:var(--font-display);font-size:11.5px;
  line-height:1.35;letter-spacing:.2em;text-transform:uppercase;color:var(--kp-accent-500);
  position:relative;padding-left:17px;margin-bottom:10px}
.eyebrow::before{content:"";position:absolute;left:0;top:.35em;width:3px;height:3px;
  background:var(--kp-accent-500);box-shadow:3px 0 0,0 3px 0,3px 3px 0}

/* ── Header ─────────────────────────────────────────────────────────── */
.site-header{position:sticky;top:0;z-index:40;background:rgba(252,252,251,.94);
  backdrop-filter:saturate(1.4) blur(6px);border-bottom:1px solid var(--kp-n200)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  max-width:var(--maxw);margin:0 auto;padding:10px var(--gutter)}
.brand-lock{display:flex;flex-direction:column;gap:2px;text-decoration:none;color:inherit}
.brand-lock img{height:44px;width:auto;display:block}
.brand-lock .host{font-family:var(--font-display);font-size:12px;letter-spacing:.04em;color:var(--kp-n600)}
nav.main{display:flex;align-items:center;gap:clamp(10px,1.6vw,22px)}
nav.main a{font-family:var(--font-display);font-size:13px;text-transform:uppercase;
  letter-spacing:.06em;text-decoration:none;color:var(--kp-primary-500)}
nav.main a:hover,nav.main a[aria-current=page]{color:var(--kp-accent-500)}
.burger{display:none;font-size:22px;cursor:pointer;background:none;border:0;color:inherit}

/* ── Buttons ────────────────────────────────────────────────────────── */
.btn{display:inline-block;font-family:var(--font-display);font-size:15px;font-weight:700;
  padding:13px 24px;border-radius:6px;border:2px solid transparent;cursor:pointer;
  text-decoration:none;transition:transform .15s,background .15s;line-height:1.2}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--kp-accent-500);color:#fff}
.btn-primary:hover{background:var(--kp-accent-600)}
.btn-ghost{border-color:var(--kp-primary-500);color:var(--kp-primary-500);background:transparent}
.btn-sm{font-size:13px;padding:8px 15px}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}

/* ── Forms ──────────────────────────────────────────────────────────── */
.field{display:block;margin-bottom:16px}
.field > span{display:block;font-family:var(--font-display);font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--kp-n600);margin-bottom:6px}
.field .hint{display:block;font-family:var(--font-body);font-size:12.5px;letter-spacing:0;
  text-transform:none;color:var(--kp-n500);margin-top:5px}
input[type=text],input[type=email],input[type=url],input[type=search],select,textarea{
  width:100%;font-family:var(--font-body);font-size:15px;color:var(--kp-primary-500);
  padding:11px 13px;border:1px solid var(--kp-n300);border-radius:5px;background:#fff}
input:focus,select:focus,textarea:focus{outline:2px solid var(--kp-accent-500);outline-offset:1px;border-color:transparent}
textarea{min-height:120px;resize:vertical;line-height:1.55}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.check{display:flex;align-items:flex-start;gap:9px;margin-bottom:11px;font-size:14.5px;color:var(--kp-n600)}
.check input{margin-top:3px;flex:none;width:16px;height:16px;accent-color:var(--kp-accent-500)}

/* ── Notices ────────────────────────────────────────────────────────── */
.notice{border-left:4px solid var(--kp-link-500);background:var(--kp-surface-variant);
  padding:14px 16px;border-radius:0 5px 5px 0;margin-bottom:20px;font-size:14.5px;color:var(--kp-n700)}
.notice--ok{border-left-color:var(--kp-ok)}
.notice--warn{border-left-color:var(--kp-warning)}
.notice--err{border-left-color:var(--kp-error)}

/* ── Member cards + directory ───────────────────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(236px,1fr));gap:clamp(14px,2vw,22px)}
.mcard{display:block;text-decoration:none;color:inherit;background:#fff;border:1px solid var(--kp-n200);
  border-radius:8px;padding:18px;transition:transform .15s,box-shadow .15s}
.mcard:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(43,35,98,.10)}
.mcard .avatar{width:64px;height:64px;border-radius:50%;object-fit:cover;background:var(--kp-surface-variant);
  border:1px solid var(--kp-n200);margin-bottom:12px;display:block}
.mcard .avatar--ph{display:flex;align-items:center;justify-content:center;font-family:var(--font-display);
  font-size:20px;color:var(--kp-n500)}
.mcard .name{font-family:var(--font-display);font-size:16px;line-height:1.25;color:var(--kp-primary-500)}
.mcard .stage{font-family:var(--font-display);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--kp-accent-500);margin-top:5px}
.mcard .inst{font-size:12.5px;line-height:1.45;color:var(--kp-n600);margin-top:6px}
.tagrow{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.tag{font-size:11px;line-height:1;padding:5px 8px;border-radius:3px;background:var(--kp-surface-variant);color:var(--kp-n600)}

.filters{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:10px;align-items:end;margin-bottom:22px}
.result-count{font-family:var(--font-display);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--kp-n500);margin-bottom:14px}

/* ── Profile ────────────────────────────────────────────────────────── */
.prof{display:grid;grid-template-columns:168px 1fr;gap:clamp(20px,3vw,40px);align-items:start}
.prof .photo{width:168px;height:168px;border-radius:50%;object-fit:cover;background:var(--kp-surface-variant);
  border:1px solid var(--kp-n200);box-shadow:0 0 0 6px var(--kp-surface),0 8px 24px rgba(43,35,98,.12)}
.prof h1{font-size:clamp(24px,3vw,34px);margin-bottom:4px}
.prof .role{font-family:var(--font-display);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--kp-accent-500);margin-bottom:14px}
.prof .bio{font-size:15.5px;line-height:1.62;color:var(--kp-n600);max-width:62ch}
.pubs{list-style:none;margin-top:12px;border-top:1px solid var(--kp-n200)}
.pubs li{padding:12px 0;border-bottom:1px solid var(--kp-n200);font-size:14px;color:var(--kp-n600)}
.pubs .t{color:var(--kp-primary-500);display:block;margin-bottom:3px}

/* ── Tables + review queue ──────────────────────────────────────────── */
table.data{width:100%;border-collapse:collapse;font-size:14px}
table.data th{text-align:left;font-family:var(--font-display);font-size:11px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--kp-n600);padding:0 12px 10px;border-bottom:1px solid var(--kp-n300)}
table.data td{padding:12px;border-bottom:1px solid var(--kp-n200);vertical-align:top;color:var(--kp-n600)}
.pill{display:inline-block;font-family:var(--font-display);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;padding:4px 9px;border-radius:3px;background:var(--kp-surface-variant);color:var(--kp-n600)}
.pill--open{background:#fff3d6;color:#7a5a00}
.pill--ok{background:#dcf5e8;color:#0f6b43}
.pill--no{background:#fde0e0;color:#a31616}
.pill--mine{background:var(--kp-surface-variant);color:var(--kp-n500)}

/* ── Footer ─────────────────────────────────────────────────────────── */
.site-footer{background:var(--kp-n900);color:#cfc9de;margin-top:clamp(40px,6vw,80px);
  padding:clamp(28px,4vw,48px) 0;border-top:3px solid var(--kp-accent-500)}
.site-footer a{color:#e0d4ef}
.site-footer img{height:46px;width:auto;max-width:200px;display:block;margin-bottom:12px}
.site-footer .legal{font-size:12.5px;line-height:1.55;color:#9b8fb0;max-width:70ch;margin-top:12px}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media (max-width:860px){
  .prof{grid-template-columns:1fr}
  .prof .photo{width:112px;height:112px}
  .filters{grid-template-columns:1fr 1fr;gap:9px}
  .grid2{grid-template-columns:1fr}
}
@media (max-width:760px){
  nav.main{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    align-items:stretch;gap:0;background:var(--kp-surface);border-bottom:1px solid var(--kp-n200);padding:6px 0}
  nav.main.open{display:flex}
  nav.main a{padding:13px var(--gutter)}
  .burger{display:block}
  .site-header .bar{position:relative}
  table.data thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  table.data,table.data tbody,table.data tr,table.data td{display:block;width:100%}
  table.data tr{padding:12px 0;border-bottom:1px solid var(--kp-n200)}
  table.data td{padding:3px 0;border:0}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .mcard:hover,.btn:hover{transform:none}
}

/* ── Hero con imagen ──────────────────────────────────────────────────
   Alineado con el prototipo que aprobó el cliente: foto de Glasgow bajo un
   velo índigo, titular en Departure Mono con la segunda línea en magenta.
   El velo es lo que garantiza el contraste del texto sobre cualquier zona
   de la foto, así que no es decorativo. */
.hero{position:relative;isolation:isolate;overflow:hidden;padding:clamp(56px,9vw,112px) 0}
.hero > .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(26,21,48,.92) 0%,rgba(43,35,98,.78) 48%,rgba(43,35,98,.46) 100%)}
.hero .eyebrow{color:#f7b8da}
.hero h1{color:#fff;font-size:clamp(32px,6.4vw,66px);line-height:1.04}
.hero h1 .alt{color:var(--kp-accent-500);display:block}
.hero p.lede{color:#e6e1f2;font-size:clamp(15px,1.8vw,18px);line-height:1.55;max-width:50ch;margin-top:14px}
.hero .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.hero .btn-ghost{border-color:#fff;color:#fff}
.hero .credit{position:absolute;right:var(--gutter);bottom:10px;z-index:1;
  font-family:var(--font-display);font-size:10px;letter-spacing:.14em;color:rgba(255,255,255,.62)}

/* La barra de estadísticas necesitaba aire propio: estaba pegada a los botones. */
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:clamp(16px,3vw,34px);margin:clamp(22px,3vw,34px) 0}
.statrow .s{border-top:3px solid var(--kp-accent-500);padding-top:12px}
.statrow .n{font-family:var(--font-display);font-size:clamp(30px,4.2vw,44px);line-height:1;color:var(--kp-primary-500)}
.statrow .l{font-family:var(--font-display);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--kp-n500);margin-top:7px}