/* ============================================================
   BC&V Hub, hub.css
   Palette and discipline inherited from bcv-announcements.
   C:\bcv-announcements\DESIGN.md is the system of record for
   these tokens; if the two disagree, DESIGN.md wins.
   Written fresh for this page; declares only what it uses.
   ============================================================ */

/* ------------------------------------------------------------
   Fonts (self-hosted, copied from signing.css per SPEC)
   ------------------------------------------------------------ */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/montserrat-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                 U+FFFD;
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/montserrat-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------------
   Tokens
   ------------------------------------------------------------ */

:root {
  color-scheme: dark;

  /* Color. Copied verbatim from the announcements system. */
  --ground:        #08090C;  /* page field */
  --ground-panel:  #0E1116;  /* tile at rest */
  --ground-raised: #161B22;  /* tile hover, and panel-on-panel */
  --line:          #232B36;  /* hairlines */
  --line-strong:   #37414F;  /* corner ticks, emphasized rules */
  --ink:           #EEF1F5;  /* primary text, 17.6:1 on ground */
  --ink-2:         #A8B2BF;  /* secondary text, 9.3:1 */
  --ink-3:         #8A95A5;  /* tertiary text, 5.7:1, the floor for prose */
  --signal:        #4AA6BC;  /* cyan, the one accent, 7.08:1 on ground */
  --signal-deep:   #237E95;  /* cyan darkened, for grounds under dark text */
  --steel:         #405069;  /* STRUCTURE ONLY, never carries text */

  /* Spacing ramp */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* Type ramp. 11px floor, all running prose at 16px. */
  --fs-xs:    11px;
  --fs-s:     12px;
  --fs-md:    14px;
  --fs-lg:    16px;
  --fs-title: 22px;
  --fs-head:  clamp(1.5rem, 3.5vw, 2.25rem);
  --fs-mast:  clamp(2.25rem, 7vw, 4.5rem);

  /* Faces */
  --sans: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "Cascadia Code", Consolas, "SF Mono", Menlo,
          monospace;

  /* Tracking. Tracked uppercase subtracts its letter-spacing
     from its right side; see .label and the h1. */
  --track-mast:  -0.03em;
  --track-label: 0.14em;

  /* Shell */
  --shell-max: 1100px;
  --shell: min(100% - 2.5rem, var(--shell-max));

  /* Motion */
  --speed: 140ms;

  /* Tile grid minimum column width */
  --tile-min: 300px;
}

/* ------------------------------------------------------------
   Base
   ------------------------------------------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-lg);
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.shell {
  width: var(--shell);
  margin-inline: auto;
}

/* ------------------------------------------------------------
   Header
   ------------------------------------------------------------ */

.masthead {
  padding-top: var(--sp-8);
  padding-bottom: var(--sp-7);
}

.masthead h1 {
  margin: 0;
  font-size: var(--fs-mast);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--track-mast);
  margin-right: calc(-1 * var(--track-mast));
  line-height: 1.05;
}

.masthead p {
  margin: 0;
  margin-top: var(--sp-3);
  font-size: var(--fs-lg);
  color: var(--ink-2);
}

/* ------------------------------------------------------------
   Sections. A section is: mono label, hairline rule, tile grid.
   Adding a second section later is an addition, not a relayout.
   ------------------------------------------------------------ */

.section {
  margin-bottom: var(--sp-8);
}

.section-label {
  margin: 0;
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: var(--fs-s);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  margin-right: calc(-1 * var(--track-label));
  color: var(--ink-3);
}

/* ------------------------------------------------------------
   Tile grid
   ------------------------------------------------------------ */

.tiles {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-top: var(--sp-5);
  display: grid;
  grid-template-columns: repeat(auto-fill,
    minmax(min(var(--tile-min), 100%), 1fr));
  gap: var(--sp-4);
}

/* The whole tile is the link. */
.tile {
  position: relative;
  display: block;
  height: 100%;
  padding: var(--sp-5);
  background: var(--ground-panel);
  border: 1px solid var(--line);
  border-radius: 2px;
  text-decoration: none;
  color: inherit;
  transition: background-color var(--speed) ease-out;
}

/* The one cyan cue on hover: a 2px left rule. */
.tile::before {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: -1px;
  width: 2px;
  background: transparent;
  transition: background-color var(--speed) ease-out;
}

.tile:hover,
.tile:focus-visible {
  background: var(--ground-raised);
}

.tile:hover::before,
.tile:focus-visible::before {
  background: var(--signal);
}

.tile:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}

.tile-tag {
  display: block;
  margin-bottom: var(--sp-3);
  font-family: var(--mono);
  font-size: var(--fs-s);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--ink-3);
}

.tile-name {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-title);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}

.tile-desc {
  display: block;
  font-size: var(--fs-lg);
  color: var(--ink-2);
}

/* ------------------------------------------------------------
   Footer
   ------------------------------------------------------------ */

.footer {
  margin-top: auto;
  padding-top: var(--sp-6);
  padding-bottom: var(--sp-6);
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: var(--fs-s);
  color: var(--ink-3);
}

/* ------------------------------------------------------------
   Reduced motion: everything resolves to instant.
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}