/* ==========================================================================
   Homepage — assets/pages/home.css

   Loaded by `page_css: home` in content/pages/index.html.

   templates/home.php adds no wrapper, so this file owns the whole layout
   including its own width and centring. Unlayered, so it beats style.css
   without needing !important.
   ========================================================================== */

/* Shared width for the homepage sections. */
.home main > * {
  width: min(100% - var(--gutter) * 2, var(--width-wide));
  margin-inline: auto;
}

/* ---- Hero -------------------------------------------------------------- */

.hero {
  padding-block: clamp(2rem, 10vh, 6rem) var(--space-xl);
}

.hero__name {
  font-family: var(--font-display);
  font-size: clamp(3rem, 14vw, 9rem);
  font-weight: 800;
  font-stretch: 125%;          /* Hubot Sans: 75%–125% */
  letter-spacing: -0.045em;
  line-height: 0.85;
  margin: 0;
}

.hero__dot { color: var(--accent); }

/* hero.js splits the wordmark into one span per letter so each can carry its
   own point on the weight and width axes. font-variation-settings overrides
   the font-weight/font-stretch above, which stay as the no-JavaScript look. */
.hero__name span {
  display: inline-block;
  font-variation-settings: "wght" 600, "wdth" 88;
}

.hero__line {
  margin-block-start: var(--space-m);
  max-width: 46ch;
  font-size: var(--step-1);
  color: var(--fg-muted);
  text-wrap: pretty;
}

/* ---- Canvas ------------------------------------------------------------
   Full-bleed band holding whichever experiment was picked this load.

   Built as a window: a title bar across the top, and a frame below it that
   clips the drawing. The frame is inset by the bar's height, so an experiment
   can never draw underneath the chrome.

   No ruling is drawn here on purpose: the band's width is arbitrary, so the
   experiment derives its own grid. See assets/experiments/README.md.
   -------------------------------------------------------------------------- */

.home main > .canvas {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

.canvas {
  --bar: 2rem;
  position: relative;
  height: clamp(280px, 42vh, 460px);
  margin-block-end: var(--space-xl);
}

.canvas__frame {
  position: absolute;
  inset: var(--bar) 0 0 0;
  overflow: hidden;
  border-bottom: var(--hairline) solid var(--border);
}

/* ---- Title bar ---------------------------------------------------------
   Counter left, title centred, transport right.
   -------------------------------------------------------------------------- */

.canvas__chrome {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 2;
  height: var(--bar);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-s);
  padding-inline: var(--gutter);
  background: var(--bg-subtle);
  border-block: var(--hairline) solid var(--border);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  color: var(--fg-faint);
  user-select: none;
}

.canvas__index { justify-self: start; }

.canvas__title {
  justify-self: center;
  color: var(--fg-muted);
}

.canvas__controls {
  justify-self: end;
  display: flex;
  gap: 0.15em;
}

.canvas__controls button {
  background: none;
  border: 0;
  color: var(--fg-faint);
  font: inherit;
  line-height: 1;
  padding: 0.3em 0.5em;
  border-radius: 2px;
  transition: color var(--transition), background var(--transition);
}

.canvas__controls button:hover:not(:disabled) {
  color: var(--fg);
  background: var(--bg-inset);
}

.canvas__controls button:disabled {
  opacity: 0.3;
  cursor: default;
}

/* Active = an interactive experiment has keyboard control. The window's outer
   rules take the accent — 1px, no outline, which would ring all four sides and
   sit on the grid. :focus, not :focus-visible: clicking in hands it the
   keyboard just as tabbing does. The chrome follows the frame in the DOM, so a
   sibling selector reaches it. */
.canvas__frame:focus {
  outline: none;
  border-bottom-color: var(--accent);
}

.canvas__frame:focus ~ .canvas__chrome {
  border-color: var(--accent);
  color: var(--fg-muted);
}

/* ---- Beds -------------------------------------------------------------- */

.beds { padding-block-end: var(--space-xl); }

.beds__list {
  list-style: none;
  display: grid;
  /* Fixed 2 or 4 columns, never 3: the gaps below are the container's
     background showing through, so a half-empty row would render as a slab of
     border colour. Keep the number of items a multiple of 2. */
  grid-template-columns: repeat(2, 1fr);
  gap: var(--hairline);
  background: var(--border);        /* the gap becomes the hairline grid */
  border-block: var(--hairline) solid var(--border);
}

@media (min-width: 52rem) {
  .beds__list { grid-template-columns: repeat(4, 1fr); }
}

.bed { background: var(--bg); }

.bed > a {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  padding: var(--space-m) var(--space-s);
  height: 100%;
  text-decoration: none;
  transition: background var(--transition);
}

.bed > a:hover { background: var(--bg-subtle); }

.bed__label {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 650;
  letter-spacing: -0.02em;
}

.bed__note {
  color: var(--fg-faint);
  font-size: var(--step--1);
  text-wrap: pretty;
}

/* ---- Recent ------------------------------------------------------------ */

.recent { padding-block-end: var(--space-xl); }

.recent > h2 {
  font-size: var(--step--1);
  font-family: var(--font-mono);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-faint);
  margin-block-end: var(--space-m);
}

.recent__more {
  margin-block-start: var(--space-m);
  font-size: var(--step--1);
}