/* people online -- light blue personnel catalog.
   the original look: sky ground, heavy display type, one catalog red,
   1.5px ink rules, no rounding, paper grain, a wall of people behind
   every band. */

:root{
  --sky:#D7E9F7;
  --sky2:#C3DBEE;
  --ink:#101418;
  --ink2:#33424E;
  --grey:#5E7386;
  --rule:#8FB3CD;
  --red:#D42A20;
  --disp:"Archivo Black","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --max:1280px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--sky);color:var(--ink);
  font-family:var(--mono);font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* print grain over the whole page */
body::before{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;
  opacity:.26;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px;position:relative;z-index:2}

h1,h2,h3{font-family:var(--disp);font-weight:400;letter-spacing:-.02em;margin:0;text-transform:lowercase}
h1{font-size:clamp(32px,6vw,58px);line-height:1.02}
h2{font-size:clamp(24px,4vw,42px);line-height:1.1}
h3{font-size:19px}
p{margin:0 0 14px;max-width:66ch}
.lead{font-size:14.5px;line-height:1.75;color:var(--ink2)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.kicker{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey)}

/* ---------- the wall of people ---------- */
.band{position:relative;overflow:hidden}
.wall{position:absolute;inset:0;z-index:0;display:grid;grid-auto-rows:1fr;overflow:hidden}
.wall img{
  width:100%;height:100%;object-fit:cover;display:block;
  opacity:1;transition:opacity .45s ease;filter:grayscale(.2) contrast(1.03);
}
.wall img.swap{opacity:0}
.veil{position:absolute;inset:0;z-index:1;pointer-events:none;background:rgba(215,233,247,.82)}

/* ---------- marquee strip ---------- */
.strip{
  border-bottom:1.5px solid var(--ink);background:var(--sky);
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey);padding:7px 0;
}
.strip .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ---------- masthead ---------- */
header.site{position:sticky;top:0;z-index:60;background:var(--sky);border-bottom:1.5px solid var(--ink)}
.masthead{display:flex;align-items:center;gap:18px;padding:11px 24px;max-width:var(--max);margin:0 auto;flex-wrap:wrap}
.brand{display:flex;align-items:baseline;gap:9px;text-decoration:none;color:var(--ink);margin-right:auto}
.brand b{font-family:var(--disp);font-size:20px;letter-spacing:-.02em}
.brand span{font-size:10px;color:var(--grey);letter-spacing:.16em;text-transform:uppercase}
nav.main{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
nav.main a{
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  color:var(--ink);padding:6px 9px;border-bottom:1.5px solid transparent;
}
nav.main a:hover{color:var(--red);border-bottom-color:var(--red)}
nav.main a.on{border-bottom-color:var(--ink)}
nav.main a.create{
  background:var(--ink);color:var(--sky);border:1.5px solid var(--ink);padding:8px 14px;margin-left:8px;
}
nav.main a.create:hover{background:var(--red);border-color:var(--red);color:#fff}
/* the mint chip is already solid ink, so the underline used by the other tabs
   would not read; it takes the red instead */
nav.main a.create.on{background:var(--red);border-color:var(--red);color:#fff}
.acct{
  font:inherit;font-size:11px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;
  border:1.5px solid var(--ink);background:var(--sky2);color:var(--ink);padding:7px 12px;
}
.acct:hover{background:var(--ink);color:var(--sky)}
.acct.on{background:var(--ink);color:var(--sky)}
.acct.warn{background:var(--red);border-color:var(--red);color:#fff}

/* ---------- page furniture ---------- */
.pagehead{border-bottom:1.5px solid var(--ink);padding:38px 0 30px;background:var(--sky)}
section{padding:46px 0;border-top:1.5px solid var(--ink);background:var(--sky)}
.pagehead + section{border-top:0}
.sechead{margin-bottom:22px}
.sechead .kicker{margin-bottom:8px}

/* ---------- hero ---------- */
.hero{border-bottom:1.5px solid var(--ink);background:var(--sky)}
.hero .wrap{padding:30px 24px 40px}
.arch{display:block;width:100%;max-width:960px;margin:0 auto;overflow:visible}
.arch text{font-family:var(--disp);font-size:175px;letter-spacing:-.01em;fill:var(--ink)}
.herogrid{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:start;margin-top:-6px}
.panel{background:var(--sky);border:1.5px solid var(--ink);padding:18px 20px}
.facewall{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.facewall img{
  width:100%;aspect-ratio:1;object-fit:cover;
  border:1.5px solid var(--ink);background:var(--sky2);filter:grayscale(.18);
}
@media(max-width:900px){ .herogrid{grid-template-columns:1fr} }

/* ---------- buttons ---------- */
.btn{
  display:inline-block;font:inherit;font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  cursor:pointer;padding:13px 22px;border:1.5px solid var(--ink);
  background:var(--sky);color:var(--ink);text-decoration:none;text-align:center;
}
.btn:hover{background:var(--ink);color:var(--sky)}
.btn.primary{background:var(--ink);color:var(--sky)}
.btn.primary:hover{background:var(--red);border-color:var(--red);color:#fff}
.btn.big{font-size:14px;padding:18px 32px}
.btn.block{display:block;width:100%}
.btn:disabled{opacity:.38;cursor:default}
.btn:disabled:hover{background:var(--sky);color:var(--ink)}
.btnrow{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- data ---------- */
.tablewrap{border:1.5px solid var(--ink);overflow-x:auto;background:var(--sky2)}
table.data{border-collapse:collapse;width:100%;min-width:680px;font-size:12.5px}
table.data th{
  text-align:left;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--grey);font-weight:400;padding:10px 13px;
  border-bottom:1.5px solid var(--ink);background:var(--sky);white-space:nowrap;
}
table.data td{padding:12px 13px;border-bottom:1px solid var(--rule);vertical-align:middle;white-space:nowrap}
table.data tr:last-child td{border-bottom:0}
table.data .num{font-variant-numeric:tabular-nums}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));border:1.5px solid var(--ink);background:var(--sky2)}
.stat{padding:16px 18px;border-right:1.5px solid var(--ink)}
.stat:last-child{border-right:0}
.stat .k{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--grey)}
.stat .v{font-family:var(--disp);font-size:28px;line-height:1.1;margin-top:6px;font-variant-numeric:tabular-nums}

.status{
  display:inline-block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  padding:4px 9px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);
}
.status.working{background:var(--ink);color:var(--sky)}
.status.idle{color:var(--grey);border-color:var(--rule)}

.notice{
  border:1.5px solid var(--ink);border-left:4px solid var(--ink);background:var(--sky2);
  padding:13px 16px;font-size:12.5px;margin-bottom:20px;
}
.notice.warn{border-color:var(--red);color:var(--red)}
.notice.hide{display:none}

.empty{padding:28px;text-align:center;color:var(--grey);font-size:13px}

/* ---------- portraits ---------- */
.portrait{
  width:100%;aspect-ratio:1;object-fit:cover;display:block;
  border:1.5px solid var(--ink);background:var(--sky2);
  filter:grayscale(.14) contrast(1.03);box-shadow:5px 6px 0 rgba(16,20,24,.2);
}
.face{width:66px;height:66px;object-fit:cover;border:1.5px solid var(--ink);background:var(--sky2);flex:none}

/* ---------- cards ---------- */
.grid{display:grid;gap:18px}
.grid.c4{grid-template-columns:repeat(4,1fr)}
.grid.c3{grid-template-columns:repeat(3,1fr)}
.grid.c2{grid-template-columns:repeat(2,1fr)}
.card{border:1.5px solid var(--ink);background:var(--sky2)}
.card .body{padding:17px 18px}
.card h3{margin-bottom:3px}
.card .rowline{display:flex;justify-content:space-between;gap:10px;font-size:12px;padding:6px 0;border-bottom:1px dashed var(--rule)}
.card .rowline:last-child{border-bottom:0}
.card .rowline span{color:var(--grey)}
.card .rowline b{font-weight:500;font-variant-numeric:tabular-nums}

/* ---------- create page ---------- */
.createbox{border:1.5px solid var(--ink);background:var(--sky2);max-width:580px}
.createbox .top{background:var(--ink);color:var(--sky);padding:10px 16px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;display:flex;justify-content:space-between;gap:12px}
.createbox .body{padding:24px}
.createbox .line{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px dashed var(--rule);font-size:13px}
.createbox .line:last-of-type{border-bottom:0}
.createbox .line b{font-variant-numeric:tabular-nums}
.approved{display:grid;grid-template-columns:170px 1fr;gap:20px;align-items:start}
@media(max-width:560px){ .approved{grid-template-columns:1fr} }

/* ---------- account picker ---------- */
.pickmask{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;background:rgba(16,20,24,.55);padding:20px}
.pickmask.on{display:flex}
.pickbox{width:min(440px,100%);background:var(--sky);border:1.5px solid var(--ink);padding:20px;box-shadow:9px 10px 0 rgba(16,20,24,.35)}
.pickhead{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey);margin-bottom:14px}
.pickopt{
  display:flex;align-items:center;gap:13px;width:100%;text-align:left;font:inherit;font-size:14px;
  padding:13px 15px;border:1.5px solid var(--ink);background:var(--sky);color:var(--ink);
  cursor:pointer;margin-bottom:9px;
}
.pickopt:hover{background:var(--ink);color:var(--sky)}
.pickopt img{width:26px;height:26px;flex:none;background:var(--sky2);border:1.5px solid var(--ink)}
.pickopt span{flex:1}
.pickopt em{font-style:normal;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey)}
.pickopt:hover em{color:var(--sky2)}
.picknone{border:1.5px solid var(--ink);background:var(--sky2);padding:15px;font-size:13px;margin-bottom:12px;line-height:1.7}

/* ---------- footer ---------- */
footer.site{border-top:1.5px solid var(--ink);background:var(--sky);padding:26px 0 40px;
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey)}
footer.site .wrap{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}

@media(max-width:900px){
  .grid.c4{grid-template-columns:repeat(2,1fr)}
  .grid.c3{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:620px){
  .grid.c4,.grid.c3,.grid.c2{grid-template-columns:1fr}
  .wrap{padding:0 16px}
  nav.main a{padding:5px 7px;font-size:10.5px;letter-spacing:.1em}
  .stat{border-right:0;border-bottom:1.5px solid var(--ink)}
  .stat:last-child{border-bottom:0}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- masthead links ---------- */
.links{display:flex;align-items:center;gap:7px;flex-wrap:wrap}

/* The two marks are the only way off this site, so they are solid chips rather
   than two small words that read as nav. Icon first, label second: the label is
   what disappears first when the masthead runs out of room. */
.links a.mark{
  display:flex;align-items:center;gap:8px;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  padding:7px 12px;border:1.5px solid var(--ink);
  background:var(--ink);color:var(--sky);
}
.links .mark svg{width:21px;height:21px;display:block;flex:none}
/* The boat is a transparent cutout in the source art, so the alpha channel is
   the whole shape and currentColor can paint it. That is what keeps it white
   on the black chip and white again on the red hover, with no second asset. */
.links .mark .osmark{
  width:22px;height:22px;display:block;flex:none;background:currentColor;
  -webkit-mask:url("data:image/png;base64,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") center/contain no-repeat;
  mask:url("data:image/png;base64,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") center/contain no-repeat;
}
.links a.mark:hover{background:var(--red);border-color:var(--red);color:#fff}
/* the same chip, visibly not a destination yet */
.links .mark.off{
  display:flex;align-items:center;gap:8px;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  padding:7px 12px;border:1.5px dashed var(--rule2,var(--ink));
  background:transparent;color:var(--grey);cursor:default;
}
/* a chip carrying only a mark should be square, not word-shaped */
.links a.mark:not(:has(span)){padding:7px 9px}
.links a:not(.mark){
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  color:var(--ink);padding:6px 9px;border-bottom:1.5px solid transparent;
}
.links a:not(.mark):hover{color:var(--red);border-bottom-color:var(--red)}
.ca{
  display:flex;align-items:center;gap:7px;font:inherit;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;cursor:pointer;border:1.5px solid var(--ink);
  background:var(--sky2);color:var(--ink);padding:5px 9px;
}
.ca b{font-weight:500;font-variant-numeric:tabular-nums}
.ca:hover{background:var(--ink);color:var(--sky)}
@media(max-width:620px){
  .links a:not(.mark){padding:5px 6px;font-size:10px;letter-spacing:.08em}
  /* drop the words, keep the marks at full size */
  .links a.mark{padding:7px 9px}
  .links a.mark span{display:none}
}

/* an address that is actually a link should look like one */
a.addr{color:var(--red);text-decoration:underline;text-underline-offset:2px}
a.addr:hover{background:var(--red);color:#fff;text-decoration:none}

/* ---------- lore: an institutional record, not a landing page ----------
   A narrow measure and a sticky contents rail. The wall still runs behind the
   band, so the reading column sits on its own opaque surface: long-form text
   over shifting faces is unreadable, and that is the one place on this site
   where legibility outranks the effect. */
.lorewrap{display:grid;grid-template-columns:210px minmax(0,1fr);gap:44px;align-items:start;position:relative;z-index:2}

.lorenav{position:sticky;top:22px;font-size:12px}
.lorenav .kicker{margin-bottom:10px}
.lorenav ol{list-style:none;margin:0;padding:0;counter-reset:toc}
.lorenav li{counter-increment:toc;border-top:1px solid var(--rule)}
.lorenav li:last-child{border-bottom:1px solid var(--rule)}
.lorenav a{
  display:flex;gap:9px;padding:7px 2px;text-decoration:none;color:var(--ink2);
  font-family:var(--mono);font-size:11.5px;line-height:1.3;
}
.lorenav a::before{content:counter(toc,decimal-leading-zero);color:var(--grey);flex:none}
.lorenav a:hover,.lorenav a:focus-visible{color:var(--red)}
.loremeta{
  margin-top:16px;display:flex;flex-direction:column;gap:3px;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grey);
}

.lore{
  background:#F7FAFD;border:1.5px solid var(--ink);
  padding:clamp(22px,4vw,54px);max-width:74ch;
}
.lore p{max-width:62ch;font-size:15px;line-height:1.62}
.lore .opening{font-size:19px;line-height:1.45;max-width:52ch}
.lore h2{
  font-size:clamp(22px,3.4vw,34px);margin:44px 0 16px;
  padding-top:20px;border-top:1.5px solid var(--ink);
  display:flex;gap:14px;align-items:baseline;scroll-margin-top:20px;
}
.lore h2 .secno{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--grey);
  flex:none;transform:translateY(-2px);
}
.lore ul,.lore ol{margin:0 0 16px;padding-left:20px;max-width:62ch}
.lore li{font-size:15px;line-height:1.62;margin-bottom:3px}
.lore .pull{
  font-family:var(--disp);font-size:clamp(26px,4vw,40px);line-height:1;
  margin:20px 0 8px;
}
.lore .ladder{font-family:var(--mono);font-size:14px;line-height:2;margin:18px 0}
.lore .ladder b{font-weight:600;color:var(--red)}
.lore .steps{counter-reset:step;list-style:none;padding-left:0;margin-top:18px}
.lore .steps li{counter-increment:step;display:flex;gap:12px;padding:8px 0;border-bottom:1px dashed var(--rule)}
.lore .steps li::before{
  content:counter(step,decimal-leading-zero);font-family:var(--mono);font-size:11px;
  color:var(--grey);flex:none;transform:translateY(3px);
}

/* a filed condition, set apart from the argument around it */
.lorenote{border-left:3px solid var(--red);background:var(--sky);padding:14px 16px;margin:20px 0}
.lorenote p{margin:6px 0 0;font-size:14px;max-width:56ch}

.colophon{border:1.5px solid var(--ink);background:var(--sky2);padding:18px 20px;margin:44px 0 26px}
.colophon .rowline{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:7px 0;border-bottom:1px dashed var(--rule)}
.colophon .rowline:last-of-type{border-bottom:0}
.colophon .rowline span{color:var(--grey)}
.colophon .rowline b{font-weight:500;font-variant-numeric:tabular-nums}
.colophon .motto{
  font-family:var(--disp);font-size:clamp(19px,3vw,27px);line-height:1.1;
  margin:14px 0 0;padding-top:14px;border-top:1.5px solid var(--ink);max-width:none;
}
.lorecta{margin-top:8px}
.lorelede{max-width:56ch;margin-top:14px;font-size:16px;line-height:1.55}

@media(max-width:900px){
  .lorewrap{grid-template-columns:1fr;gap:26px}
  /* the rail becomes a plain contents block: sticky inside a short scroll is
     just a box that will not stay put */
  .lorenav{position:static}
  .loremeta{flex-direction:row;gap:14px;flex-wrap:wrap}
}