/* Shared by every page: the fonts, the colour tokens in both themes, and the page itself.
   Satoshi and Libre Caslon Condensed are served from here, so the type does not depend on
   anyone else's CDN; the licences sit beside the files in public/fonts. */
@font-face{
  font-family:"Satoshi";
  src:url("../public/fonts/Satoshi-Variable.woff2") format("woff2-variations");
  font-weight:300 900;             /* one variable file covers every weight we use */
  font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Libre Caslon Condensed";
  src:url("../public/fonts/LibreCaslonCondensed-Regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Libre Caslon Condensed";
  src:url("../public/fonts/LibreCaslonCondensed-Medium.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Libre Caslon Condensed";
  src:url("../public/fonts/LibreCaslonCondensed-SemiBold.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}

:root{
  --paper:#ECECEC; --ink:#0A0A0A; --muted:#8A8A88;
  --rule:rgba(10,10,10,.18); --panel:rgba(255,255,255,.88);
  --card-line:#D9D4D4; --card-shadow:0 2px 32px 2px rgba(0,0,0,.05);
  /* the three greys of the timeline's type: headings, body, dates */
  --strong:#1A1A1A; --body:#555555; --faint:#888888;
  /* band width follows the viewport height so the picture keeps the same vertical
     composition at every window size; it only gives way when the window is too narrow */
  --band-k:0.96;
  --bw:min(calc(var(--band-k) * 100vh), 100vw);
}
/* the site is light whatever the browser prefers: prefers-color-scheme is deliberately
   not followed. Dark is still there, but only when asked for with data-theme="dark". */
:root[data-theme="dark"]{
  --paper:#0F0F0E; --ink:#EDEDEB; --muted:#79796F;
  --rule:rgba(237,237,235,.2); --panel:rgba(20,20,19,.88);
  --card-line:#4A4A46; --card-shadow:0 2px 32px 2px rgba(0,0,0,.45);
  --strong:#E4E4E0; --body:#A6A6A0; --faint:#7C7C75;
}
:root[data-theme="light"]{
  --paper:#ECECEC; --ink:#0A0A0A; --muted:#8A8A88;
  --rule:rgba(10,10,10,.18); --panel:rgba(255,255,255,.88);
  --card-line:#D9D4D4; --card-shadow:0 2px 32px 2px rgba(0,0,0,.05);
  --strong:#1A1A1A; --body:#555555; --faint:#888888;
}
*{box-sizing:border-box}
/* the paper belongs on the root, so Safari's rubber band area is paper too, not a void;
   and the bounce is switched off, so there is nothing past the end to scroll into */
html{background:var(--paper);overscroll-behavior-y:none}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"Satoshi","Satoshi Variable","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:14px;line-height:21px;-webkit-font-smoothing:antialiased}

/* the logo is drawn as a mask filled with the ink colour, so one file serves both themes */
.mark{position:absolute;left:4.86%;top:5.18vh;width:27px;height:27.4px;z-index:4;
  background:var(--ink);
  -webkit-mask:url(../public/img/logo.svg) no-repeat center/contain;
  mask:url(../public/img/logo.svg) no-repeat center/contain}
@media (max-width:820px){ .mark{left:24px;top:24px} }

/* while the theme changes, everything cross-fades */
html.theming, html.theming *{transition:color .5s ease, background-color .5s ease,
  border-color .5s ease !important}

/* ---- around the crow (src/crowui.js), on every page that has him ---- */
#crowHit{position:fixed;z-index:6}

/* the pointer is a small red dot; the native one is hidden while it is in use */
body.dotted, body.dotted *{cursor:none}
#dot{position:fixed;left:0;top:0;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;
  box-sizing:border-box;border-radius:50%;background:#F13A0D;border:0 solid #F13A0D;
  z-index:20;pointer-events:none;
  opacity:0;transition:opacity .12s ease, width .12s ease, height .12s ease,
    margin .12s ease, border-width .12s ease}
#dot.on{opacity:1}
#dot.down{width:11px;height:11px;margin:-5.5px 0 0 -5.5px}
/* over the bird it hollows out rather than growing: the same dot, now a ring */
#dot.over{background:transparent;border-width:2px}
body:not(.dotted) #dot{display:none}

/* the card that names the bird, and the line that ties it to him */
#crowCard{position:fixed;z-index:7;width:280px;max-width:calc(100vw - 24px);box-sizing:border-box;
  background:var(--paper);border:1px solid var(--card-line);
  box-shadow:var(--card-shadow);
  padding:10px 16px;display:flex;flex-direction:column;gap:7px;
  opacity:0;transition:opacity .18s ease;pointer-events:none}
#crowLead{position:fixed;z-index:6;pointer-events:none;overflow:visible;
  opacity:0;transition:opacity .18s ease}
#crowLead path{stroke:var(--card-line)}
body.crow-card #crowCard, body.crow-card #crowLead{opacity:1}
#crowCard .term{font-family:"Libre Caslon Condensed",Georgia,serif;
  font-weight:600;font-size:16px;line-height:21px;color:var(--ink);margin:0}
#crowCard .say{font-family:"Inconsolata",ui-monospace,monospace;font-size:8px;line-height:21px;
  color:var(--muted);margin:0}
#crowCard .def{font-size:9px;line-height:12px;color:var(--ink);margin:0}