/* Homepage grid — step 3. Built against tokens.css + components.css.
   Not yet wired into index.html; previewed via homepage-preview.html.

   The page shell hugs the left edge instead of centering — the
   reference centers its whole layout (`.page{justify-content:center}`
   in style.css); "nothing centered that could be left-aligned" says
   otherwise, so this is a structural departure, not just a palette one. */

.site-shell {
  /* Fluid, not capped — a fixed max-width with no centering just leaves
     dead space on anything wider than the cap, which fights "density is
     the point." Reading measure is controlled per-element instead (see
     .mod-box__body p in components.css), not by capping the whole page. */
  padding: var(--space-5);
}

/* Blog entries (post.css's .post-column--centered) are the one
   deliberate exception to "nothing centered" — but at wide viewports a
   centered ~68ch column inside an otherwise-uncapped, left-hugging
   shell just reads as dead space flanking a page that forgot its
   content, not a composed quiet moment. Capping and centering the
   whole shell on this one page type makes the masthead above it
   match the same quiet framing instead of fighting it. */
.site-shell:has(.post-column--centered) {
  max-width: 900px;
  margin-inline: auto;
}

/* Sticky footer — on a page shorter than the viewport (mainly the
   homepage, on tall screens), this pins the button-wall/colophon to the
   bottom of the window instead of leaving a dead void trailing after
   them. Any leftover space becomes a gap ABOVE the footer, not empty
   space below everything — the footer reads as anchored, not orphaned.
   Doesn't affect already-long pages (a post, a full admin list) at all.
   Still hard-left, nothing centered — this is a vertical-space fix only. */
.page-frame {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh; /* mobile-safe viewport height; falls back to 100vh above where unsupported */
}
.page-frame > .site-shell {
  flex: 1 0 auto;
}

/* === Masthead ===
   A document header, not a nav bar: title + a couple of inline text
   links, hard left, one thick pine rule underneath. */
.site-masthead {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  flex-wrap: wrap;
  border-bottom: var(--border-thick) solid var(--color-pine);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-6);
}
.site-title {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-heading);
  letter-spacing: var(--tracking-wide);
}
.site-nav-inline {
  display: flex;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.site-nav-inline a,
.site-nav-inline a:visited {
  color: var(--color-text-muted);
  text-decoration: none;
}
.site-nav-inline a:hover {
  color: var(--color-link);
}
.site-nav-inline button {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--color-text-muted);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.site-nav-inline button:hover {
  color: var(--color-link);
}

/* Search box — sits in the masthead on every page; also reused (with
   the --page modifier for a bigger layout) at the top of /search itself. */
.site-search {
  margin: 0 0 0 auto;
}
.site-search__input {
  width: 9rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text);
  background: var(--color-panel-bg);
  border: var(--border-hair) solid var(--color-panel-border);
  border-radius: var(--radius);
  padding: 2px var(--space-2);
}
.site-search__input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-wash);
}
.site-search--page {
  display: flex;
  gap: var(--space-2);
  margin: var(--space-4) 0;
}
.site-search--page input {
  flex: 1 1 auto;
  max-width: 40ch;
}

/* === Breakout statement ===
   The grid-breaking element: a single oversized line, set wide of the
   column measure, with the fleuron mark blown up huge and bled off the
   left edge behind it. This is both "one section breaking out to full
   width" and "one element that deliberately breaks the grid" at once. */
.site-breakout {
  position: relative;
  padding: var(--space-5) 0 var(--space-7);
  margin-bottom: var(--space-6);
  border-bottom: var(--border-hair) solid var(--color-panel-border);
  overflow: hidden;
}
.site-breakout::before {
  content: var(--mark-fleuron);
  position: absolute;
  left: -0.6rem;
  top: -1.4rem;
  font-family: var(--font-body);
  font-size: 11rem;
  line-height: 1;
  color: var(--color-accent);
  opacity: 0.12;
  z-index: 0;
}
.site-breakout p {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: 20ch;
  font-family: var(--font-body);
  font-size: clamp(1.75rem, 5vw, var(--text-3xl));
  line-height: var(--leading-tight);
  color: var(--color-heading);
}

/* Time-of-day greeting — a small label above the pull-quote, filled in
   client-side from the visitor's own clock. Empty/hidden until JS sets
   it, so there's no flash of placeholder text if it's ever slow. */
.site-greeting {
  position: relative;
  z-index: 1;
  margin: 0 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.site-greeting:empty {
  display: none;
}

/* === Main grid: wide column + narrow rail === */
.site-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "main" "rail";
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}
.site-main {
  grid-area: main;
  min-width: 0;
}
/* The homepage's "logs" box shouldn't stretch to match the rail's
   combined height when there's only a post or two — that just leaves
   dead space under a short feed instead of reading as intentionally
   compact. Only the homepage box opts out; inner pages' single-module
   .site-main (a whole diary/blog stream, search results) still benefit
   from stretching to match a shorter rail. */
.site-grid .site-main.mod-box {
  align-self: start;
}
.site-rail {
  grid-area: rail;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
}

@media (min-width: 860px) {
  .site-grid {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    grid-template-areas: "main rail";
  }
}

/* === Full-bleed button wall === */
.site-wall-wrap {
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

@media (max-width: 480px) {
  .button-wall {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Blown up to 11rem, the fleuron mark is sized to bleed harmlessly
     off the left edge at desktop widths — at phone width there's no
     edge to bleed off, so it lands squarely behind the heading instead. */
  .site-breakout::before {
    left: -0.3rem;
    top: -0.6rem;
    font-size: 6rem;
  }
}

@media (max-width: 380px) {
  .site-shell {
    padding: var(--space-3);
  }
  .site-title {
    font-size: var(--text-xl);
  }
}