/* ============================================================================
   BASE — what every page shares, in one file.

   The faces and the scrollbar used to live twice: once in site.css and once
   more in admin.css, kept in step by a test. That is a component maintained by
   discipline. This file is the component maintained by there being one copy:
   every document — the site, the panel, the blog, the 404 — links it first,
   and nothing below it can drift because there is nothing below it to drift.

   Only what is truly universal belongs here. Tokens, layout and the pages'
   own rules stay in site.css / admin.css / blog.css.
   ============================================================================

   FONTS — the site's own three faces, served from this origin. Variable
   files, not static cuts, because the headings drive an optical-size axis;
   one file per family covers every weight. */
@font-face{
  font-family:'Bricolage Grotesque';
  src:url('../assets/fonts/bricolage-grotesque-var.woff2') format('woff2-variations');
  font-weight:200 800;
  font-stretch:normal;
  font-display:swap;
}
@font-face{
  font-family:'Geist';
  src:url('../assets/fonts/geist-var.woff2') format('woff2-variations');
  font-weight:100 900;
  font-display:swap;
}
@font-face{
  font-family:'Geist Mono';
  src:url('../assets/fonts/geist-mono-var.woff2') format('woff2-variations');
  font-weight:100 900;
  font-display:swap;
}

/* ============================================================================
   SCROLLBAR — one width and one colour for everything that scrolls, on every
   page: the site, the project view, the menu sheet, the order modal, a select
   panel, the admin panel, the blog. Set with the universal selector so a new
   scrollable panel inherits it instead of arriving a few pixels wider than
   the last one.

   The bar is kept, styled rather than hidden. Hiding it is the fashion and it
   costs a real affordance: it is the only thing that says how long the page
   is and the only way to drag to a position.

   Resting colour is a softened accent, not the accent itself: #ff4a10 at full
   strength is a signal colour and a bar that never moves has no business
   shouting. Lifted toward #ff7a4d and held under half opacity it reads as
   warm, and the hover state has somewhere to go.

   The standard properties are set on *, not on html. They do not all inherit
   — scrollbar-width in particular does not — and in the Chromiums that honour
   the standard properties over the ::-webkit pseudos, an inner scroller (the
   project view, say) fell back to the default-width bar while the page around
   it was thin. One selector, every scroller, no second opinion.

   Firefox and new Chromiums take the two standard properties; older WebKit
   needs the pseudo-elements. A browser that supports neither keeps its
   default, which is fine — nothing here is load-bearing.
   ========================================================================== */
/* ============================================================================
   COLOUR SCHEME — one declaration, and the browser stops fighting the design.

   Everything here is drawn on near-black, and none of the chrome the BROWSER
   draws knew that: it was all still rendering for a light page. The date input
   in the panel opened a white calendar popup; autofill painted its own pale
   yellow over a black field and took the text colour with it; a <select> on
   Android opened a white sheet; the default scrollbar, before the rules below
   land, is light; and a form control with no author background of its own is
   light too.

   `color-scheme:dark` is the supported way to say so, and it is one line rather
   than a patch per symptom — admin.css had `filter:invert(.72)` on the calendar
   glyph, which was the only one of these anybody had noticed.

   On :root in this file, because it belongs to every page: the site, the panel,
   the blog and the 404 all link this first.
   ========================================================================== */
:root{
  color-scheme:dark;
  --sb-w:6px;
  --sb-thumb:rgba(255,122,77,.38);
  --sb-thumb-hot:rgba(255,122,77,.72);
}
*:not(textarea){scrollbar-width:thin;scrollbar-color:var(--sb-thumb) transparent}
/* :not(textarea) is load-bearing. In WebKit the resize grip is a scrollbar
   PART, and styling any part switches the element to the custom scrollbar
   rendering path — which never draws the native grip. There is no way to opt
   one part back in, so the textarea opts out of all of it and keeps the
   browser's own scrollbar AND its own grip. The cost is a default-width bar
   inside a long message; a permanently broken handle on the one control
   people actually drag would be worse. */
*:not(textarea)::-webkit-scrollbar{width:var(--sb-w);height:var(--sb-w)}
*:not(textarea)::-webkit-scrollbar-track{background:transparent}
*:not(textarea)::-webkit-scrollbar-thumb{
  background:var(--sb-thumb);border-radius:99px;
  transition:background .3s ease;
}
@media (hover:hover) and (pointer:fine){*:not(textarea)::-webkit-scrollbar-thumb:hover{background:var(--sb-thumb-hot)}}
*:not(textarea)::-webkit-scrollbar-corner{background:transparent}
textarea{scrollbar-width:auto;scrollbar-color:auto}

/* ---------------------------------------------------------------------------
   Present to a screen reader, absent to everyone else. Not display:none, which
   removes it from the accessibility tree as well.

   Here rather than in site.css because the admin panel needs it too and does
   not load site.css — which is exactly how three labels in the panel ended up
   with no rule to hide them. Every page loads this file first; a utility every
   page needs belongs in the file every page has.
   ------------------------------------------------------------------------- */
.sr-only{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;overflow:clip;clip-path:inset(50%);white-space:nowrap;border:0;
}