/* 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);text-transform:lowercase}
.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:120px;height:120px;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:flex-start;justify-content:center;background:rgba(16,20,24,.55);padding:20px;overflow-y:auto}
.pickmask.on{display:flex}
.pickbox{width:min(440px,100%);margin:auto;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 mark is the collection's own faces arranged into the boat, so it is a
   real image rather than the alpha mask this used to be. The mask painted the
   shape in currentColor, which is what let it invert white on the black chip
   and white again on red hover -- but run this artwork through it and every
   face flattens into one solid silhouette, throwing away the only thing that
   makes the mark ours. It therefore does not invert with the chip, and does
   not need to: the faces read on both the ink and the red.

   Bigger than the x mark next to it, with the vertical padding on this chip
   pulled in to match, so the boat grows without the two chips ending up
   different heights in the same row. */
.links .mark .osmark{
  width:34px;height:31px;display:block;flex:none;
  background:url("/icons/opensea-people.png") center/contain no-repeat;
}
.links a#lnkOS{padding:2px 11px}
.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}
}


/* ---------- market ---------- */
.hide{display:none}

.mkbar{
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;
  border:1.5px solid var(--ink);background:var(--sky2);padding:12px;margin-bottom:14px;
}
.mkin{
  font:inherit;font-family:var(--mono);font-size:12px;
  padding:11px 12px;border:1.5px solid var(--ink);background:var(--sky);color:var(--ink);
}
.mkin:focus{outline:2px solid var(--ink);outline-offset:-2px}
#mkSearch{flex:1 1 240px;min-width:180px}
.mkbar .btn{padding:11px 18px}

.mkcount{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grey);margin-bottom:14px;
}

/* a card for sale carries the ink shadow the rest do not, so the board reads
   as listings first and the collection second */
.mkcard .portrait{box-shadow:none;border-bottom:0}
.mkcard.onsale{box-shadow:5px 6px 0 rgba(16,20,24,.2)}
.mkhead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.mkhead h3{margin:0;font-size:15px}

.mkbreak{
  font-family:var(--mono);font-size:11.5px;color:var(--grey);min-height:17px;
}

@media (max-width:1080px){
  .grid.c4{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:760px){
  .grid.c4{grid-template-columns:repeat(2,1fr)}
  .mkbar{flex-direction:column;align-items:stretch}
  #mkSearch{flex:none}
}
.card .rowline b .addr,.card .rowline .addr{
  color:var(--ink);text-decoration:underline;text-underline-offset:2px;
  text-decoration-color:var(--rule);
}
.card .rowline .addr:hover{text-decoration-color:var(--ink);background:var(--sky)}

/* ---------- payroll dashboard ---------- */
.stat .sub{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--grey);margin-top:4px;
}
.rwnote{font-size:12.5px;color:var(--grey);margin:10px 0 0;max-width:70ch;line-height:1.55}
.rwsub{display:block;font-family:var(--mono);font-size:11px;color:var(--grey);margin-top:2px}
.data td b{font-weight:600;font-variant-numeric:tabular-nums}

/* a button that carries a mark: peoplebook is a different piece of software
   under the same roof, and the icon says so faster than the word does */
.btn.withicon{display:inline-flex;align-items:center;gap:10px}
.btn.withicon img{width:22px;height:22px;border-radius:50%;display:block}

/* ---------- the offices contract, stated plainly ---------- */
.vaultcard{border:2px solid var(--ink);background:var(--sky2);margin-bottom:30px;box-shadow:6px 7px 0 rgba(16,20,24,.2)}
.vaulthead{
  background:var(--ink);color:var(--sky);padding:10px 16px;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
}
.vaultbody{padding:18px}
.vaultlede{font-size:14px;max-width:66ch;margin:0 0 14px}
.vaultaddr{
  display:block;border:1.5px solid var(--ink);background:var(--sky);
  padding:12px 14px;text-decoration:none;color:var(--ink);
}
.vaultaddr:hover{background:var(--ink);color:var(--sky)}
.vaultaddr .k{display:block;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--grey)}
.vaultaddr:hover .k,.vaultaddr:hover .go{color:var(--rule)}
.vaultaddr b{display:block;font-family:var(--mono);font-size:14px;word-break:break-all;margin:3px 0}
.vaultaddr .go{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}
.vaultstats{display:flex;gap:22px;flex-wrap:wrap;margin-top:14px}
.vaultstats>div{min-width:150px}
.vaultstats .k{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey)}
.vaultstats b{font-size:19px;font-variant-numeric:tabular-nums}
@media (max-width:640px){.vaultaddr b{font-size:11px}}

/* ---------- the two buttons that must not be missed ----------
   Driven from ui.js, the same way the hero word is: a random face and colour
   on each tick, with the two buttons never landing on the same font or the
   same colour as each other.

   They do not move. The box is small on purpose -- each is well under the
   341x256px area that the flashing guidance treats as large enough to be a
   seizure risk, which is what makes a fast cycle acceptable here and would not
   make it acceptable on a full width banner. Reduced motion stops it dead. */
.shoutrow{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.shoutline{display:flex;align-items:center;gap:14px}

/* The one part of this that holds still and says what the button is. The box
   is busy enough that the label has to be the calm thing next to it. */
.shoutwhat{
  font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--grey);white-space:nowrap;
}
@media (max-width:560px){
  .shoutline{flex-wrap:wrap;gap:8px}
  .btn.shout{width:100%;max-width:340px}
}

/* Fixed box, moving contents. Every face has different metrics, so letting the
   button size itself made it resize sixteen times a second and shove the row
   around. The box is pinned and the label is centred inside it: only colour and
   lettering change. */
.btn.shout{
  border-width:3px;padding:0 18px;
  display:flex;align-items:center;justify-content:center;gap:11px;
  letter-spacing:.06em;text-transform:uppercase;
  width:392px;height:64px;box-sizing:border-box;overflow:hidden;
}
.btn.shout span{
  display:block;flex:1;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-size:17px;line-height:1;
}
.btn.shout em{
  font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.2em;
  padding:3px 0;border:2px solid currentColor;
  width:96px;flex:none;text-align:center;
  white-space:nowrap;overflow:hidden;
}
.btn.shout.withicon img{width:26px;height:26px;border-radius:50%;display:block}
.btn.shout:hover{background:var(--ink)!important;color:var(--sky)!important;border-color:var(--ink)!important}

@media (prefers-reduced-motion: reduce){
  .btn.shout{background:var(--red)!important;border-color:var(--ink)!important;color:#fff!important}
}

/* ---------- buy $people ---------- */
.buybox{border:1.5px solid var(--ink);background:var(--sky2);max-width:520px}
.buybox .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}
.buybox .body{padding:20px}
.byfield{display:block;margin-bottom:12px}
.byfield .k{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);margin-bottom:5px}
.byinput{display:flex;align-items:center;gap:9px;border:1.5px solid var(--ink);background:var(--sky);padding:12px 14px}
.byinput b{font-family:var(--mono);font-size:15px;color:var(--grey);flex:none}
.byinput input{flex:1;min-width:0;font:inherit;font-family:var(--mono);font-size:19px;border:0;background:transparent;color:var(--ink);outline:none;padding:0}
.byarrow{text-align:center;font-size:17px;color:var(--grey);margin:2px 0 10px}
.byline{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;padding:6px 0;border-bottom:1px dashed var(--rule)}
.byline:last-of-type{border-bottom:0}
.byline span{color:var(--grey)}
.byline b{font-variant-numeric:tabular-nums}
.bynote{font-size:12px;color:var(--grey);line-height:1.55;margin-top:14px}

/* ---------- masthead ---------- */
/* The bar was a wall of same-weight words with the mint button wrapping onto
   its own line. Links now sit on a baseline that lifts on hover, so they read
   as things you press rather than a sentence. */
.masthead nav.main a{
  position:relative;padding:6px 2px;
  border-bottom:2px solid transparent;transition:color .12s,border-color .12s;
}
.masthead nav.main a:hover{border-bottom-color:currentColor}
.masthead nav.main a.on{border-bottom-color:var(--ink)}
.masthead .acct,.masthead .ca,.masthead .mark{transition:background .12s,color .12s}
.masthead .ca:hover{background:var(--ink);color:var(--sky)}

/* ---------- hero buy card ---------- */
.herobuy{
  display:block;border:2px solid var(--ink);background:var(--red);color:#FFD400;
  padding:14px 16px;margin-bottom:14px;text-decoration:none;
}
.herobuy:hover{background:#A81810;border-color:var(--ink)}
.herobuy .k{
  display:block;font-family:var(--disp);font-size:20px;letter-spacing:-.01em;
  text-transform:lowercase;margin-bottom:3px;
}
.herobuy b{display:block;font-weight:400;font-size:12.5px;opacity:.85}
/* The heading is large enough to carry gold on red; the line under it is
   10.5px, where that pairing drops below a readable contrast, so it takes a
   pale yellow instead of a dimmed gold. Same colour family, still legible. */
.herobuy .go{
  display:block;margin-top:8px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.18em;text-transform:uppercase;color:#FFF6D6;
}

/* ---------- portrait viewer ---------- */
.facebtn{padding:0;border:0;background:none;cursor:zoom-in;display:block;line-height:0}
.facebtn:hover img{outline:2px solid var(--red);outline-offset:2px}
.facename{display:block;font-size:12px;color:var(--grey);margin-top:2px}

.viewbox{background:var(--sky);border:2px solid var(--ink);max-width:520px;width:100%;box-shadow:8px 9px 0 rgba(16,20,24,.35)}
.viewhead{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:12px 14px;background:var(--ink);color:var(--sky);
}
.viewhead b{display:block;font-size:16px}
.viewhead span{display:block;font-family:var(--mono);font-size:11px;opacity:.75}
.viewhead .btn{padding:7px 14px;background:transparent;color:var(--sky);border-color:var(--sky)}
.viewhead .btn:hover{background:var(--sky);color:var(--ink)}
#viewImg{display:block;width:100%;height:auto;background:var(--sky2)}
.viewfoot{display:flex;gap:10px;padding:14px;flex-wrap:wrap}
.viewfoot .btn{flex:1;min-width:130px}

/* the personnel row got a much bigger portrait, so the name beside it can
   carry some weight rather than sitting as a caption */
.facename{font-size:14px;color:var(--ink2);margin-top:4px}
.data td .facebtn{margin:4px 0}
@media (max-width:700px){
  .face{width:84px;height:84px}
}

/* ---------- the masthead, as a left panel ----------
   Everything the header held was competing on one line: a brand, eleven
   destinations, a mint button, an X link, the contract address and a connect
   button, wrapping into three cramped rows. Standing it up in a column gives
   each item its own line, lets the nav read as a list rather than a sentence,
   and hands the whole width of the page back to the content.

   Only above 900px. Below that the column would eat the screen, so it stays
   the horizontal bar it already was. */
@media (min-width: 900px){
  body{padding-left:268px}

  header.site{
    position:fixed;top:0;left:0;bottom:0;width:268px;
    border-right:1.5px solid var(--ink);border-bottom:0;
    overflow-y:auto;overflow-x:hidden;
  }

  .masthead{
    flex-direction:column;align-items:stretch;flex-wrap:nowrap;
    gap:0;padding:22px 18px;max-width:none;margin:0;min-height:100%;
  }

  .brand{
    flex-direction:column;align-items:flex-start;gap:3px;
    margin:0 0 24px;
  }
  .brand b{font-size:26px;line-height:1}
  .brand span{font-size:11px}

  nav.main{flex-direction:column;align-items:stretch;gap:0}
  nav.main a{
    padding:11px 0;border-bottom:1px solid var(--rule);border-top:0;
    font-size:15px;letter-spacing:.1em;
  }
  nav.main a:hover{padding-left:5px} /* colour comes from ui.js, one per hover */
  nav.main a.on{color:var(--red);border-bottom-color:var(--red)}
  nav.main a.create{
    margin-top:16px;border:1.5px solid var(--ink);background:var(--ink);color:var(--sky);
    text-align:center;padding:15px 10px;font-size:15px;
  }
  nav.main a.create:hover{padding-left:10px} /* colour from ui.js */

  /* pinned to the bottom of the column, away from the destinations */
  .masthead .links{margin-top:auto;padding-top:22px;display:flex;gap:8px;align-items:center}
  .masthead .ca{flex:1;justify-content:center}
  .masthead .acct{margin-top:10px;width:100%}

  /* the ticker and the footer belong to the content, not the panel */
  .strip .wrap,footer.site .wrap{padding-left:22px;padding-right:22px}
}

@media (min-width: 900px) and (max-width: 1180px){
  body{padding-left:232px}
  header.site{width:232px}
  nav.main a{font-size:13px;letter-spacing:.06em;padding:9px 0}
}

/* ---------- the mint block ----------
   One person, shown properly. No dimming layer over the portrait: the face is
   the product, and darkening it to make room for the word defeats the point.
   The word carries its own contrast instead -- a hard dark outline drawn from
   four directions plus a soft drop -- so the orange holds up over hair, sky,
   a white shirt or a dark jacket without touching the photograph. */
.mintblock{
  position:relative;display:flex;align-items:center;justify-content:center;
  overflow:hidden;text-align:center;
  text-decoration:none;border:3px solid var(--ink);background:var(--ink);
  min-height:430px;padding:26px 24px;margin-top:18px;
}
.mintblock .mintface{
  position:absolute;inset:0;
  background-image:url(/img/2.jpg);
  /* The portraits are square and the face sits centred, so a wide short block
     crops it to a forehead. Taller block, and the crop pulled to the middle,
     shows a whole face. */
  background-size:cover;background-position:center 42%;
  transition:transform .6s ease;
}
.mintblock:hover .mintface{transform:scale(1.04)}
.mintblock .word{
  position:relative;display:block;
  font-family:var(--disp);color:#D97757;
  font-size:clamp(34px,6vw,62px);line-height:.95;letter-spacing:-.02em;
  text-transform:uppercase;
  text-shadow:
    -2px 0 0 #101418, 2px 0 0 #101418, 0 -2px 0 #101418, 0 2px 0 #101418,
    -2px -2px 0 #101418, 2px -2px 0 #101418, -2px 2px 0 #101418, 2px 2px 0 #101418,
    0 6px 26px rgba(16,20,24,.75);
}
.mintblock:hover .word{color:#F08A63}

/* ---------- everything lowercase ----------
   The site's copy is written lowercase already; it was the stylesheet that
   shouted, in the nav, the kickers, the buttons, the table headers and every
   small label. Turning all of that off in one block rather than editing forty
   rules keeps it revertible: delete this and the uppercase original is back,
   with no copy touched either way. */
.strip,
.brand span,
.kicker,
nav.main a,
.btn,
.acct,
.ca,
.status,
.data th,
.stat .k,
.stat .sub,
.mintblock .word,
.mintblock .sub,
.shoutwhat,
.btn.shout,
.btn.shout em,
.herobuy .go,
.herobuy .k,
.vaulthead,
.vaultaddr .k,
.vaultaddr .go,
.vaultstats .k,
.buybox .top,
.byfield .k,
.byline,
.rwsub,
.createbox .top,
.viewhead,
footer.site,
.mkcount,
.mkin,
.sechead .kicker{
  text-transform:lowercase;
}

/* ---- the spaces notice ---------------------------------------------------
   Same furniture as the wallet picker: ink rule, hard shadow, no rounding.
   z-index sits above .pickmask (200) so it is never trapped underneath, and
   above the grain overlay's 9999 would be wrong -- the grain is meant to fall
   over everything, so this stays under it at 9998. */
.spmask{
  position:fixed;inset:0;z-index:9998;display:flex;
  align-items:center;justify-content:center;padding:20px;
  background:rgba(16,20,24,.62);
  opacity:0;transition:opacity .18s ease;
}
.spmask.on{opacity:1}
.spbox{
  position:relative;width:min(420px,100%);
  background:var(--sky);border:1.5px solid var(--ink);
  padding:28px 26px 22px;box-shadow:9px 10px 0 rgba(16,20,24,.35);
  transform:translateY(8px);transition:transform .18s ease;
}
.spmask.on .spbox{transform:none}
.spx{
  position:absolute;top:8px;right:10px;
  background:none;border:0;cursor:pointer;
  font-family:var(--mono);font-size:22px;line-height:1;color:var(--grey);padding:4px 6px;
}
.spx:hover{color:var(--red)}
.spkick{
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--red);margin-bottom:8px;
}
.sptitle{font-size:32px;line-height:1.05;margin-bottom:10px}
.sptime{
  font-family:var(--disp);font-size:20px;letter-spacing:-.01em;
  text-transform:lowercase;margin-bottom:2px;
}
.spcount{
  font-size:12.5px;color:var(--grey);font-variant-numeric:tabular-nums;
  margin-bottom:18px;
}
.spgo{text-decoration:none;text-align:center}
.spskip{
  display:block;width:100%;margin-top:10px;
  background:none;border:0;cursor:pointer;
  font-family:var(--mono);font-size:12px;color:var(--grey);padding:6px;
}
.spskip:hover{color:var(--ink);text-decoration:underline}
@media (max-width:420px){
  .spbox{padding:24px 20px 18px}
  .sptitle{font-size:27px}
}
@media (prefers-reduced-motion:reduce){
  .spmask,.spbox{transition:none}
}

/* the live dot. a slow pulse, not a strobe: one cycle every 1.6s is well
   under any flash threshold and reads as "on air" rather than as an alarm. */
.spdot{
  display:inline-block;width:7px;height:7px;margin-right:7px;
  background:var(--red);border-radius:50%;vertical-align:middle;
  animation:sppulse 1.6s ease-in-out infinite;
}
@keyframes sppulse{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.spdot{animation:none}}

/* =========================================================================
   PHONES
   Most people arrive on a phone. Everything below is additive and lives
   behind a width query, so the desktop layout above is untouched.
   ========================================================================= */

/* Grid and flex children default to min-width:auto, which refuses to shrink
   below their content. The hero panel holds a button whose label does not
   wrap, so the panel stayed 382px wide inside a 327px column and the overflow
   was clipped by body{overflow-x:hidden} -- not scrolled, clipped, so the
   right edge of the hero was unreachable on a phone. These let it shrink. */
@media (max-width:900px){
  .herogrid, .herogrid > *, .panel, .shoutrow, .shoutline{min-width:0}
  .panel{max-width:100%}
}

@media (max-width:700px){
  /* ---- listings become cards ----
     A 680px table on a 375px screen hides five columns behind a scrollbar
     nobody finds. Each row becomes a stacked card, labelled from the thead by
     labelTables() in ui.js. */
  .tablewrap{overflow-x:visible;border-width:1.5px}
  table.data{min-width:0;width:100%;display:block;font-size:13.5px}
  table.data thead{display:none}
  table.data tbody{display:block}
  table.data tr{
    display:block;padding:10px 0;
    border-bottom:1.5px solid var(--ink);
  }
  table.data tr:last-child{border-bottom:0}
  table.data td{
    display:flex;align-items:baseline;justify-content:flex-end;gap:10px;
    padding:7px 14px;border-bottom:0;
    white-space:normal;text-align:right;
  }
  table.data td::before{
    content:attr(data-label);
    /* pushes every value in the cell into one group on the right, instead of
       space-between spreading a figure and its unit to opposite edges */
    flex:none;margin-right:auto;max-width:46%;text-align:left;
    color:var(--grey);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  }
  /* a cell with no label, and the "nothing here yet" row, run full width */
  table.data td:not([data-label]){display:block;text-align:left}
  table.data td:not([data-label])::before{display:none}
  table.data td .empty{text-align:center}

  /* ---- targets you can actually hit ----
     Nav links were 30px tall against a 44px guideline, which on a real thumb
     means hitting the neighbour. */
  .masthead nav.main a{
    display:inline-flex;align-items:center;min-height:44px;padding:2px 0;
  }
  .masthead{gap:12px;padding:10px 18px}
  .btn{min-height:48px;display:inline-flex;align-items:center;justify-content:center}
  .btn.block{width:100%}

  /* ---- text with a floor ----
     10px labels are legible on a desktop at arm's length and not on a phone. */
  .kicker,.strip,.sechead .kicker,.card .rowline,.buybox .top,
  table.data th{font-size:11.5px}
  body{font-size:15.5px}
  .lead{font-size:15px;line-height:1.7}

  .wrap{padding:0 18px}
}

/* The two flashing buttons carry a label that does not wrap and a fixed
   96px badge, so they could not shrink to fit a narrow screen. Let the label
   ellipsis instead and give the badge room to give up. */
@media (max-width:560px){
  .btn.shout{width:100%;max-width:none;height:60px;padding:0 14px;gap:9px}
  .btn.shout span{font-size:15px;min-width:0}
  .btn.shout em{width:auto;min-width:58px;font-size:9px;padding:3px 7px}
  .shoutwhat{font-size:11px;letter-spacing:.16em}
}

/* ---- the collapsing menu ----
   Rendered always, shown only here. Above 700px the header is the row it has
   always been. */
.navtoggle{display:none}
@media (max-width:700px){
  .navtoggle{
    display:inline-flex;align-items:center;justify-content:center;
    order:2;margin-left:auto;min-height:44px;padding:9px 16px;
    font:inherit;font-size:12px;letter-spacing:.2em;text-transform:uppercase;
    background:var(--ink);color:var(--sky);border:1.5px solid var(--ink);cursor:pointer;
  }
  header.site .masthead{flex-wrap:wrap}
  header.site .brand{order:1}
  header.site nav.main{order:4;display:none;width:100%}
  header.site.navopen nav.main{
    display:flex;flex-direction:column;align-items:flex-start;gap:2px;
    padding:10px 0 4px;border-top:1.5px solid var(--rule);margin-top:10px;
  }
  header.site nav.main a{width:100%;padding:4px 0}
  header.site .links{order:3}
  header.site .acct{order:5;width:100%;min-height:48px;margin-top:8px}
}

@media (max-width:700px){
  /* Safari zooms the whole page when a focused field is under 16px, and then
     leaves it zoomed. Every text field on the site was 13-14px, so tapping the
     amount box on the buy page threw the layout sideways mid-purchase. */
  input,select,textarea,.byinput input{font-size:16px}
  .byinput input,input[type=text],input[type=search],input[type=number],
  select,.mkfilters input,.mkfilters select{min-height:48px}
  textarea{min-height:96px}
  .byinput{align-items:center}
  .masthead .ca{min-height:44px}
  /* the three amount boxes are the whole point of that page */
  .byfield{margin-bottom:16px}
  .byfield .k{font-size:12px}
}

/* ---------- wallet dock ----------
   Pinned bottom right on every page: the masthead scrolls away on a phone and
   becomes a fixed left panel above 900px, and the control for getting off the
   wrong account has to be somewhere that never moves. Sits under .pickmask
   (200) so it does not float on top of the provider picker it opens. */
.wdock{
  position:fixed;right:16px;bottom:16px;z-index:150;
  bottom:calc(16px + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;align-items:flex-end;gap:8px;
}
.wtab{
  display:flex;align-items:center;gap:9px;cursor:pointer;font:inherit;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  border:1.5px solid var(--ink);background:var(--sky);color:var(--ink);
  padding:9px 13px;min-height:42px;
  box-shadow:4px 5px 0 rgba(16,20,24,.35);
}
.wtab:hover{background:var(--ink);color:var(--sky)}
.wdock.on .wtab{background:var(--ink);color:var(--sky)}
.wdock.warn .wtab{background:var(--red);border-color:var(--red);color:#fff}

/* state in the palette the site already has: hollow when nobody is connected,
   filled when they are, red carried by the whole tab when the chain is wrong */
.wdot{width:9px;height:9px;flex:none;border:1.5px solid currentColor;background:transparent}
.wdock.on .wdot{background:currentColor}
.wdock.warn .wdot{background:currentColor}

.wmenu{
  display:none;width:min(280px,calc(100vw - 32px));
  background:var(--sky);border:1.5px solid var(--ink);
  box-shadow:9px 10px 0 rgba(16,20,24,.35);
}
.wdock.open .wmenu{display:block}
.wmenu .whead{
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey);
  padding:12px 14px 0;
}
.wmenu .wfull{
  font-size:11.5px;word-break:break-all;line-height:1.5;
  padding:4px 14px 12px;border-bottom:1.5px solid var(--ink);
}
.wmenu button{
  display:block;width:100%;text-align:left;font:inherit;font-size:12.5px;
  padding:11px 14px;background:var(--sky);color:var(--ink);
  border:0;border-top:1.5px solid var(--rule);cursor:pointer;
}
.wmenu button:first-of-type{border-top:0}
.wmenu button:hover{background:var(--ink);color:var(--sky)}
.wmenu button.danger{color:var(--red)}
.wmenu button.danger:hover{background:var(--red);color:#fff}
.wmenu button[hidden]{display:none}

@media (max-width:620px){
  .wdock{right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  .wtab{font-size:10px;padding:8px 11px}
}

/* ---------- the manual-claim notice ----------
   Sits in the modal that opens the moment a person is minted, which is the one
   screen everybody who mints actually reads. Payroll is a pull, not a push:
   people who assume the stock arrives on its own leave it sitting in the office
   and conclude the thing is broken. Carries the catalog red border rather than
   the sky2 panel the other notices use, because it has to survive being skimmed
   past three buttons. */
.apnote{
  border:1.5px solid var(--red);background:var(--sky2);
  padding:12px 14px;margin-top:14px;
}
.apnote .k{
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--red);margin-bottom:7px;
}
.apnote p{margin:0 0 7px;font-size:13px;line-height:1.6}
.apnote p:last-child{margin-bottom:0}
.apnote a{color:var(--ink);border-bottom:1.5px solid var(--red);text-decoration:none}
.apnote a:hover{background:var(--red);color:#fff}

/* ---------- meet the founder ----------
   The one page on the site about a real person, so it borrows the personnel
   card the rest of the collection is presented in rather than inventing a
   layout: same rules, same top strip, same key/value lines. */
.founder{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}
.fcard{border:1.5px solid var(--ink);background:var(--sky)}
.fcard .top{
  display:flex;justify-content:space-between;gap:12px;
  background:var(--ink);color:var(--sky);padding:9px 14px;
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
}
.fcard .body{padding:18px 16px}
.fcard .line{
  display:flex;justify-content:space-between;gap:14px;
  border-top:1.5px solid var(--rule);padding:9px 0;font-size:13px;
}
.fcard .line:first-of-type{margin-top:14px}

/* One row per link, icon first, handle under the name. Big enough to be the
   point of the page and to stay a comfortable tap target on a phone. */
.flink{
  display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--ink);
  border:1.5px solid var(--ink);background:var(--sky);padding:14px 16px;
  margin-bottom:10px;min-height:64px;
}
.flink svg{width:24px;height:24px;flex:none;display:block}
.flink span{display:flex;flex-direction:column;flex:1;min-width:0}
.flink b{font-family:var(--disp);font-size:16px;letter-spacing:.01em}
.flink em{
  font-style:normal;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grey);margin-top:3px;
}
.flink i{font-style:normal;font-size:19px;color:var(--grey)}
.flink:hover{background:var(--ink);color:var(--sky)}
.flink:hover em,.flink:hover i{color:var(--sky2)}

@media (max-width:820px){
  .founder{grid-template-columns:1fr}
}