/* mintface.art shared styles. Light, warm, art first. */

/* Two voices. Geist says what a thing is, Geist Mono says what it measures.
   Both variable, both ours, no request leaves the site for type. */
@font-face{
  font-family:'Geist';
  src:url('/fonts/Geist-Variable.woff2') format('woff2-variations');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Geist';
  src:url('/fonts/Geist-Italic-Variable.woff2') format('woff2-variations');
  font-weight:100 900;
  font-style:italic;
  font-display:swap;
}
@font-face{
  font-family:'Geist Mono';
  src:url('/fonts/GeistMono-Variable.woff2') format('woff2-variations');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

:root{
  --paper:#faf9f6;
  --ink:#14120f;
  --muted:#6e6a62;
  --faint:#a9a49a;
  --rule:#e6e2da;
  --dot-available:#3f7d54;
  /* swapping foundry is these two lines */
  --font-sans:'Geist','Helvetica Neue',Helvetica,Arial,sans-serif;
  --font-mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--font-sans);font-size:15px;line-height:1.65;
  font-weight:400;
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
img{max-width:100%;display:block}

/* chrome */
.bar{display:flex;justify-content:space-between;align-items:baseline;padding:22px 28px;position:relative;z-index:5}
/* the mark sits where the word did, at the height the word was */
/* baseline alignment is for text; a mark aligns to the optical centre instead */
.wordmark{display:inline-block;line-height:0;text-decoration:none;align-self:center}
.wordmark img{height:22px;width:auto;display:block}
@media(max-width:640px){.wordmark img{height:19px}}
.smallcaps{font-family:var(--font-sans);font-weight:500;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);text-decoration:none}
.smallcaps:hover{color:var(--ink)}
.foot{padding:0 28px 60px;text-align:center}
.foot a{margin:0 14px}
.loading{padding:90px 28px;text-align:center;color:var(--faint);font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-family:var(--font-sans);font-weight:500}

/* ---------- the second voice ----------
   Anything measured, counted, addressed or timestamped. Mono never bolds:
   weight is not how this voice emphasises, spacing is. */
.mono,.data{font-family:var(--font-mono);font-weight:400;font-variant-numeric:tabular-nums}
.mono strong,.data strong,.mono b,.data b{font-weight:400}

/* mono set as small caps needs air or it sets like a licence plate */
.mono-caps{
  font-family:var(--font-mono);font-weight:400;
  text-transform:uppercase;letter-spacing:.1em;
  font-variant-numeric:tabular-nums;
}

/* labels keep their spacing but speak in the first voice */
.label{
  font-family:var(--font-sans);font-weight:500;
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);
}

/* prices, always mono, always tabular, never bold */
.price,.amount,.figure{font-family:var(--font-mono);font-weight:400;font-variant-numeric:tabular-nums}

/* the footer signature, quiet, every page */
.sig{
  font-family:var(--font-mono);font-weight:400;
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);font-variant-numeric:tabular-nums;
  margin-top:26px;
}

/* the currency control, wherever a price is shown */
.cur{display:flex;gap:14px}
.cur button{
  background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--font-mono);font-weight:400;
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);
  font-variant-numeric:tabular-nums;
}
.cur button[aria-pressed="true"]{color:var(--ink)}

/* ---------- zoom ----------
   The site is light, so the lightbox is light. No scrim, no chrome, no
   caption: the same paper the work hangs on, and the work. */
.zoom{
  position:fixed;inset:0;z-index:90;background:var(--paper);
  display:none;align-items:center;justify-content:center;overflow:hidden;
  cursor:zoom-in;touch-action:none;
}
.zoom.on{display:flex}
.zoom.zoomed{cursor:grab}
.zoom.zoomed:active{cursor:grabbing}
.zoom img{
  max-width:96vw;max-height:96vh;width:auto;height:auto;display:block;
  transform-origin:center center;will-change:transform;
  -webkit-user-select:none;user-select:none;-webkit-user-drag:none;
}
/* the only hint that the work opens */
.zoomable{cursor:zoom-in}

/* a hairline and a number. Nothing spins. */
.progress{
  position:fixed;top:0;left:0;right:0;height:1px;z-index:60;
  background:transparent;pointer-events:none;
  opacity:0;transition:opacity .4s ease;
}
.progress.on{opacity:1}
.progress .fill{
  height:100%;width:0;background:var(--ink);
  transition:width .28s cubic-bezier(.4,0,.2,1);
}
.progress .pct{
  position:absolute;top:12px;right:28px;
  font-family:var(--font-mono);font-weight:400;
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);
  font-variant-numeric:tabular-nums;
}
@media(max-width:560px){.progress .pct{right:20px}}
.pending{color:var(--faint)}
.shot.empty{min-height:120px}

/* availability dots, the only colour on the site */
.dot{width:6px;height:6px;border-radius:50%;display:inline-block;background:var(--faint);transform:translateY(-2px)}
.dot.available{background:var(--dot-available)}
.dot.vaulted{background:var(--ink)}
.dot.acquired{background:var(--faint)}
.dot.burned{background:var(--rule)}
.dot.uninscribed{background:transparent;box-shadow:inset 0 0 0 1px var(--muted)}
.dot.reserved{background:transparent;box-shadow:inset 0 0 0 1px var(--dot-available)}

@media(max-width:640px){
  .bar{padding:18px 20px}
}