/* ============================================================
   feed.mss.gs: the host's own slim chrome (pages/feed/feed-host.mjs)
   around a dark column of cards (feed.css) on the site's cream
   background. Not the site's nav: the host is an app of its own.
   ============================================================ */

body.fh {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(900px 520px at 50% -180px, rgba(51, 117, 77, .16), transparent 70%),
    radial-gradient(700px 600px at -10% 20%, rgba(176, 141, 87, .12), transparent 70%),
    #ebe4d3;
  background-attachment: fixed;
  color: #20301f;
  font: 400 15px/1.5 'Hanken Grotesk', 'Hanken Fallback', -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}
.fh *, .fh *::before, .fh *::after { box-sizing: border-box; }
:lang(ru) .fh, :lang(uk) .fh, :lang(bg) .fh, :lang(el) .fh,
.fh:lang(ru), .fh:lang(uk), .fh:lang(bg), .fh:lang(el) {
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Roboto, Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Roboto, Arial, sans-serif;
  font-family: var(--font-sans);
}
.fh-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- The bar ----
   Opaque, on purpose. It was a frosted pane (78% cream, backdrop blur) over
   a dark column of photos, so while the page scrolled every frame showed it
   a different colour: the column's grey, a photo's flash, a card's edge
   sliding through. A solid bar the colour that pane had over the cream
   stays the same while anything moves under it, and the compositor does
   not have to blur the page behind it on every frame. */
.fh-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: #f2ede1;
  border-bottom: 1px solid rgba(50, 55, 30, .1);
}
.fh-bar-in {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 10px 16px;
}
.fh-brand {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #20301f;
  font: 700 20px/1 'Bricolage Grotesque', 'Bricolage Fallback', 'Hanken Grotesk', sans-serif;
  letter-spacing: -.03em;
  text-decoration: none;
}
.fh-brand svg { width: 21px; height: 27px; }
/* The host's own pages: the feed, the API docs, how it works. */
.fh-nav { display: flex; align-items: center; gap: 2px; min-width: 0; }
.fh-nav a {
  flex: none;
  padding: 0 11px;
  border-radius: 10px;
  color: #3f4b39;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 34px;
  text-decoration: none;
  white-space: nowrap;
}
.fh-nav a:hover { background: rgba(51, 117, 77, .08); color: #20301f; }
.fh-nav a[aria-current="page"] { background: rgba(51, 117, 77, .13); color: #265f3e; }
.fh-nav a:focus-visible { outline: 3px solid rgba(51, 117, 77, .45); outline-offset: 1px; }
.fh-search {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 380px;
  height: 42px;
  margin-left: auto;
  padding: 0 12px;
  border: 1px solid rgba(50, 55, 30, .16);
  border-radius: 12px;
  background: rgba(255, 255, 255, .72);
  color: #54604d;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.fh-search:focus-within { border-color: #2f6e48; box-shadow: 0 0 0 3px rgba(51, 117, 77, .22); }
.fh-search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: #20301f;
  font: inherit;
  font-size: 15px;
  outline: none;
}
.fh-search input::placeholder { color: #6b7564; }
.fh-search input::-webkit-search-cancel-button { display: none; }
.fh-cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 42px;
  padding: 0 16px;
  border-radius: 12px;
  background: #2f6e48;
  color: #f7f3e8;
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color .15s ease, box-shadow .15s ease;
}
.fh-cta:hover { background: #265f3e; box-shadow: 0 4px 18px rgba(38, 95, 62, .25); }
.fh-cta:focus-visible, .fh-brand:focus-visible { outline: 3px solid rgba(51, 117, 77, .45); outline-offset: 2px; }

/* ---- The page: the column, and a rail beside it on a wide screen ---- */
.fh-layout {
  display: grid;
  grid-template-columns: minmax(0, 600px) 300px;
  justify-content: center;
  gap: 28px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 24px 16px 32px;
}
.fh-layout-narrow { grid-template-columns: minmax(0, 600px); }
.fh-col {
  min-width: 0;
  /* clip, not hidden: the "New mssgs" pill sticks to the viewport inside it */
  overflow: hidden;
  overflow: clip;
  border-radius: 24px;
  background: #14171b;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .05) inset, 0 24px 60px rgba(20, 32, 24, .22);
  color: #e8eaed;
}
.fh-colhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 18px 6px;
}
.fh-title {
  margin: 0;
  color: #fff;
  font: 700 26px/1.15 'Bricolage Grotesque', 'Bricolage Fallback', 'Hanken Grotesk', sans-serif;
  letter-spacing: -.03em;
  overflow-wrap: anywhere;
}
.fh-colhead .fh-live { margin-left: 0; }
.fh-lede {
  margin: 0;
  padding: 0 18px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  color: #8d969f;
  font-size: 14.5px;
  line-height: 1.5;
}
.fh-col .fp-list:empty { min-height: 120px; }

.fh-older {
  display: block;
  padding: 18px;
  color: #6fd39b;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}
.fh-older:hover { background: rgba(255, 255, 255, .03); }
.fh-older.is-loading { opacity: .6; }

.fh-side {
  position: sticky;
  top: 86px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.fh-tile {
  padding: 18px 18px 16px;
  border-radius: 18px;
  background: rgba(255, 253, 244, .62);
  box-shadow: 0 10px 30px rgba(31, 35, 33, .07), 0 0 0 1px rgba(50, 55, 30, .07);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.fh-tile h2 {
  margin: 0 0 8px;
  color: #20301f;
  font: 700 17px/1.25 'Bricolage Grotesque', 'Bricolage Fallback', 'Hanken Grotesk', sans-serif;
  letter-spacing: -.01em;
}
.fh-tile p { margin: 0 0 10px; color: #525f4c; font-size: 14px; line-height: 1.5; }
.fh-link { color: #1f4f34; font-size: 14px; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
/* A text link on the cream under the pointer: blue, like the links in the
   cards (a darker blue here, 5:1 on the cream). */
.fh-link:hover, .fh-devlinks a:hover, .fh-foot a:hover { color: #175cb8; text-decoration-color: rgba(23, 92, 184, .45); }
.fh-link:focus-visible, .fh-devlinks a:focus-visible, .fh-foot a:focus-visible { outline: 2px solid #175cb8; outline-offset: 2px; border-radius: 4px; }
.fh-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.fh-tags a {
  display: inline-block;
  padding: 5px 9px;
  border-radius: 9px;
  background: rgba(51, 117, 77, .11);
  color: #1f4f34;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
}
.fh-tags a:hover { background: rgba(51, 117, 77, .2); }
.fh-devlinks { margin: 0; padding: 0; list-style: none; }
.fh-devlinks a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  color: #33402f;
  font: 600 14px/1.2 'SF Mono', Menlo, Consolas, monospace;
  text-decoration: none;
}
.fh-devlinks a:hover span { text-decoration: underline; text-decoration-color: rgba(23, 92, 184, .45); text-underline-offset: 2px; }
.fh-devlinks a:hover .fp-ic { color: #175cb8; }
.fh-devlinks .fp-ic { color: #2f6e48; }

.fh-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  padding: 8px 16px 44px;
  font-size: 13.5px;
}
.fh-foot a { color: #525f4c; text-decoration: none; }
.fh-foot a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ---- A post's page ---- */
.fh-back { padding: 10px 10px 0; }
.fh-back a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  color: #e8eaed;
  font-weight: 700;
  text-decoration: none;
}
.fh-back a:hover { background: rgba(255, 255, 255, .06); }
.fh-open { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px 18px 18px; }
.fh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 12px;
  color: #e8eaed;
  font-size: 14.5px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: background-color .15s ease;
}
.fh-btn:hover { background: rgba(255, 255, 255, .06); }
.fh-btn-primary { border-color: #2f6e48; background: #2f6e48; color: #f7f3e8; }
.fh-btn-primary:hover { background: #3a7f56; }
.fh-btn:focus-visible { outline: 3px solid rgba(111, 211, 155, .5); outline-offset: 2px; }

/* ---- Not there ---- */
.fh-missing { padding: 48px 24px; }
.fh-missing-card { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.fh-missing-card p { margin: 0 0 8px; color: #8d969f; }
.fh-missing-mark svg { width: 40px; height: 52px; opacity: .9; }

@media (max-width: 980px) {
  .fh-layout { grid-template-columns: minmax(0, 600px); }
  .fh-side { display: none; }
}
@media (max-width: 640px) {
  .fh-layout { padding: 0 0 24px; }
  .fh-col { border-radius: 0; box-shadow: none; }
  /* Two rows on a phone: the logo, the search and the button, then the
     host's pages. A fixed height, so the pill below can stick under it. */
  .fh-bar-in { flex-wrap: wrap; gap: 4px 8px; padding: 8px 12px 6px; }
  .fh-nav { order: 4; flex-basis: 100%; margin: 0 -8px; }
  .fh-nav a { padding: 0 9px; font-size: 13.5px; line-height: 30px; }
  .fh-search { height: 40px; }
  .fh-cta { height: 40px; padding: 0 12px; font-size: 13.5px; }
  .fh-title { font-size: 22px; }
  .fp-pill-page { top: 98px; }
}
@media (max-width: 360px) {
  .fh-brand span { display: none; }
}
@media (max-width: 420px) {
  .fh-search { padding: 0 10px; }
  .fh-search .fp-ic { display: none; }
}