/* ============================================================================
   Site chrome — the parts of arpitphillips.com the feed now shares.

   The feed and the main site read as one site (owner, 2026-10-06: "better
   design the feed page and the main site so they become more seamless with
   each other"). This file carries the main site's header and tabs, its support
   bar and its footer, rebuilt on the feed's tokens in app.css, which now hold
   the main site's palette and type. The markup in index.html mirrors the main
   site's partials (src/partials/nav.html and footer.html in
   arpitphillips/arpitphillips); keep the two in step.

   The one deliberate difference: the header does not stick here. The feed's
   own topbar and rail are sticky, and two sticky bars would eat a phone's
   screen, so the site header scrolls away and the instrument stays.
   ============================================================================ */

/* The skip link is visually hidden by .sr until a keyboard reaches it. */
.skip:focus {
  position: fixed; left: 1rem; top: 1rem; z-index: 100;
  width: auto; height: auto; clip-path: none; white-space: normal;
  padding: 0.5rem 0.9rem; border-radius: 3px;
  background: var(--accent); color: var(--on-accent); text-decoration: none;
}

.site-header {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  min-height: 62px;
  padding: 0.5rem 1.9rem;
  max-width: 1240px;
  margin: 0 auto;
}
.site-brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  color: var(--ink);
  text-decoration: none;
}
.site-brand:hover { text-decoration: none; }
.site-brand-mark {
  width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid var(--accent);
  flex: none; align-self: center;
}
.site-brand-name {
  font-family: var(--display);
  font-size: 1.18rem;
  font-weight: 500;
  letter-spacing: -0.015em;
}
.site-brand-sub {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-left: 0.25rem;
}
.site-tabs { display: flex; gap: 0.25rem; }
.site-tabs a {
  color: var(--ink-2);
  padding: 6px 10px;
  font-size: 0.875rem;
  white-space: nowrap;
  border-radius: 3px;
  text-decoration: none;
  transition: color 160ms var(--ease);
}
.site-tabs a:hover { color: var(--ink); }
.site-tabs a[aria-current="page"] {
  color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--accent);
}

@media (max-width: 880px) {
  .header-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    padding: 0.5rem 0 0;
  }
  .site-brand { padding: 0 1rem; }
  .site-brand-sub { display: none; }
  /* Same as the main site: the row scrolls, and the fade says so. */
  .site-tabs {
    overflow-x: auto;
    scrollbar-width: none;
    padding: 2px 1rem 0.5rem;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
  .site-tabs:focus-within { -webkit-mask-image: none; mask-image: none; }
  .site-tabs::-webkit-scrollbar { display: none; }
}

/* The support bar, the same one every recipe page on the main site carries. */
.support-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1.4rem;
  margin: 0 0 1.4rem;
  padding: 0.75rem 1rem;
  background: var(--accent-sunk);
  border-left: 2px solid var(--accent-vivid);
  border-radius: 2px;
}
.support-bar p {
  margin: 0;
  max-width: 64ch;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink-2);
}
.support-bar strong { color: var(--ink); font-weight: 600; }
.support-bar a {
  flex: none;
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border-radius: 2px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
}
.support-bar a:hover { text-decoration: none; filter: brightness(1.06); }
/* The topbar's negative top margin (app.css) pulls it up over main's padding,
   which was right when it was the first thing in the column. With the bar
   above it, that margin dragged it into the bar's bottom edge. */
.support-bar + .topbar { margin-top: 0; }

/* What the feed is, as plain text in the page. The feed itself is drawn from
   JSON after load, and robots.txt keeps crawlers out of /data/, so this is the
   part of the page a search engine reads: what it is, who makes it, and where
   the rest of his work is. */
.feed-about {
  border-top: 1px solid var(--line);
  padding: 2.4rem 1.9rem 1rem;
  max-width: 1240px;
  margin: 0 auto;
}
.feed-about h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.45rem;
  letter-spacing: -0.015em;
  margin: 0 0 0.6rem;
}
.feed-about p {
  max-width: 68ch;
  margin: 0 0 0.9rem;
  color: var(--ink-2);
  line-height: 1.6;
}
.feed-about a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

.site-footer {
  border-top: 1px solid var(--line);
  margin-top: 2rem;
  padding: 2.4rem 1.9rem 4rem;
  color: var(--ink-3);
  font-size: 0.875rem;
}
.site-footer .inner { max-width: 1240px; margin: 0 auto; }
.site-footer p { max-width: 62ch; margin: 0 0 0.75rem; line-height: 1.6; }
.site-footer a { color: var(--ink-2); }
.site-footer a:hover { color: var(--ink); }
.site-footer strong { color: var(--ink); font-weight: 600; }
.site-footer .footer-support {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.site-footer .footer-support a,
.site-footer a.footer-inline { text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 900px) {
  .feed-about, .site-footer { padding-inline: 1rem; }
}

/* The page's h1 (see index.html). Shown on a phone, where the rail that titles
   the page is a closed drawer; kept for screen readers and search on a wide
   screen, where the rail already says "Feed" in large type. */
.feed-title {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0 0 1rem;
}
@media (min-width: 901px) {
  .feed-title {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
}

/* While the data loads, the boot line is the only thing above the about text
   and the footer, so both sat in view and were then shoved off screen by the
   feed: a layout shift of 0.69 on a phone and 0.70 on a laptop. Holding a
   screen's height for the boot line starts them below the fold, where the
   app's own min-height (100vh) keeps them. If the data never loads, the
   error message sits in the same box and the about text is one scroll down. */
#boot { min-height: 100vh; min-height: 100svh; box-sizing: border-box; }