.fp-wrap {
  --fp-paper: #f6f1e6;
  --fp-ink: #1c1a16;
  --fp-ink-soft: #55504a;
  --fp-rule: #1c1a16;
  --fp-accent: #7a1f1f;
  --fp-card-bg: #fffdf8;
  --fp-card-border: #e4dbc8;

  background: var(--fp-paper);
  color: var(--fp-ink);
  font-family: "PT Serif", Georgia, serif;
  line-height: 1.6;
  max-width: 980px;
  margin: 0 auto;
  padding: 36px 24px 60px;
}

/* The cream is scoped to .fp-wrap above, but that leaves the page's
   own <body> background showing on either side of it as a pale-blue
   margin, which reads as two unrelated designs stacked on top of each
   other rather than one page. This one extra rule extends the same
   cream out to fill the full page behind .fp-wrap, so the blue only
   ever shows in the brandbar strip at the very top (which should stay
   blue � it's shared site identity) and nowhere else. Hardcoded to
   match --fp-paper rather than referencing the variable, since
   :root's --fp-paper isn't in scope on body (custom properties only
   inherit down the DOM tree, and body is .fp-wrap's ancestor, not its
   descendant). This is the one line in this file that touches an
   element outside .fp-wrap; it only ever sets background-color, so it
   can't disturb any layout or typography rule site.css puts on body. */
body { background: #f6f1e6; }

/* ---------- Masthead ---------- */
.fp-masthead { text-align: center; margin: 0 0 10px; }
.fp-masthead .fp-kicker {
  font-family: "Space Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fp-accent);
  margin: 0 0 8px;
}
.fp-masthead h1 {
  font-family: "Playfair Display", serif;
  font-weight: 900;
  font-size: clamp(2.4rem, 7vw, 4.2rem);
  letter-spacing: 0.01em;
  margin: 0 0 8px;
  color: var(--fp-ink);
}
.fp-masthead .fp-tagline {
  font-family: "PT Serif", serif;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--fp-ink-soft);
  margin: 0;
}
.fp-rule-thick { border: none; border-top: 4px solid var(--fp-rule); margin: 18px 0 4px; }
.fp-rule-thin { border: none; border-top: 1px solid var(--fp-rule); margin: 0 0 18px; }
.fp-issue-line {
  display: flex;
  justify-content: space-between;
  font-family: "Space Mono", monospace;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fp-ink-soft);
  margin: 0 0 30px;
}

/* ---------- Layout ---------- */
.fp-front-page {
  display: grid;
  grid-template-columns: 2fr 1px 1fr;
  gap: 32px;
}
.fp-divider { background: var(--fp-rule); opacity: 0.5; }

/* ---------- Lead story ---------- */
.fp-eyebrow {
  font-family: "Space Mono", monospace;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fp-accent);
  margin: 0 0 10px;
}
.fp-headline {
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  line-height: 1.15;
  margin: 0 0 10px;
  color: var(--fp-ink);
}
.fp-byline {
  font-family: "Space Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fp-ink-soft);
  margin: 0 0 22px;
}
.fp-lead-col p { margin: 0 0 16px; text-align: justify; hyphens: auto; }
.fp-lead-col p.fp-first::first-letter {
  font-family: "Playfair Display", serif;
  font-weight: 900;
  font-size: 3.6rem;
  line-height: 0.8;
  float: left;
  padding: 4px 8px 0 0;
  color: var(--fp-accent);
}
blockquote.fp-pullquote {
  margin: 22px 0;
  padding: 14px 0;
  border-top: 1px solid var(--fp-rule);
  border-bottom: 1px solid var(--fp-rule);
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.45;
  text-align: center;
  color: var(--fp-ink);
}
blockquote.fp-pullquote cite {
  display: block;
  margin-top: 10px;
  font-family: "Space Mono", monospace;
  font-style: normal;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fp-ink-soft);
}

/* ---------- Sidebar: Recent Activity (timeline feed) ---------- */
.fp-sidebar-head {
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 4px;
  color: var(--fp-ink);
}
.fp-sidebar-sub {
  font-family: "Space Mono", monospace;
  font-size: 0.66rem;
  color: var(--fp-ink-soft);
  letter-spacing: 0.04em;
  margin: 0 0 16px;
}

/* Sticky sidebar: this relies on no ancestor between .fp-sidebar and
   the scrolling viewport having overflow:hidden/auto/scroll � true
   of a normal Domino page render. If a future template wraps page
   content in its own scrolling container, sticky will silently stop
   working here and the sidebar will just scroll inline instead; that
   degrades gracefully (nothing breaks, it just stops sticking), so
   no fallback media query is needed for that case. */
.fp-sidebar {
  position: sticky;
  top: 24px;
  align-self: start;
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
}

.fp-feed {
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  padding-right: 8px;
  margin-right: -8px;
  /* Was scrollbar-width: thin + a border-colored track � visually
     almost invisible, which is the root of "not clear it's
     scrollable." Wider + accent-colored makes it read as a real
     scrollbar at a glance instead of something you find by accident. */
  scrollbar-width: auto;
  scrollbar-color: var(--fp-accent) var(--fp-card-border);
  /* Hints "you can scroll here" the moment the cursor enters the box,
     before anyone touches the scrollbar. There's no browser-native
     "this area scrolls" cursor, so this borrows the resize cursor's
     up/down arrows as the closest built-in stand-in � a common trick
     for exactly this. Links and other elements inside each card keep
     their own cursor (pointer, text, etc.): a cursor rule that
     targets an element directly always wins over one only inherited
     from an ancestor like this, regardless of which was written
     first or how specific either selector is. */
  cursor: ns-resize;
}
.fp-feed::-webkit-scrollbar { width: 10px; }
.fp-feed::-webkit-scrollbar-track { background: var(--fp-card-border); border-radius: 5px; }
.fp-feed::-webkit-scrollbar-thumb { background: var(--fp-accent); border-radius: 5px; }
.fp-feed::-webkit-scrollbar-thumb:hover { background: #5c1717; }

/* Fade: overlaps the bottom edge of .fp-feed (still inside the
   scrolling box's positioning context, .fp-sidebar, which its
   position:sticky already provides) so the last visible card looks
   visibly clipped rather than just ending cleanly. */
.fp-feed-fade {
  position: absolute;
  left: 0;
  right: 8px;
  bottom: 0;
  height: 32px;
  background: linear-gradient(to bottom, rgba(246, 241, 230, 0) 0%, var(--fp-paper) 80%);
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.fp-feed-fade.is-hidden { opacity: 0; }

/* "More" hint: deliberately NOT layered over .fp-feed like the fade
   above � it sits in normal document flow right after .fp-feed
   closes, so it reads as a small caption sitting below the scrolling
   box rather than a floating badge eating into it. Just a line of
   the sidebar's existing small mono type plus a text-character arrow
   (no SVG, no animation) so it stays genuinely small. */
.fp-feed-more {
  margin: 6px 0 0;
  text-align: center;
  font-family: "Space Mono", monospace;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fp-ink-soft);
  transition: opacity 0.2s ease;
}
.fp-feed-more.is-hidden { opacity: 0; }

.fp-feed-section-label {
  font-family: "Space Mono", monospace;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fp-accent);
  margin: 4px 0 -2px;
}
.fp-feed-section-label:first-child { margin-top: 0; }

.fp-feed-card {
  background: var(--fp-card-bg);
  border: 1px solid var(--fp-card-border);
  border-radius: 10px;
  padding: 14px;
  flex-shrink: 0;
}

.fp-feed-source-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.fp-feed-source-row img.fp-feed-platform { width: 16px; height: 16px; border-radius: 3px; }

.fp-feed-content { display: flex; gap: 10px; }
.fp-feed-thumb {
  width: 52px;
  height: 78px;
  object-fit: cover;
  border-radius: 3px;
  flex-shrink: 0;
  border: 1px solid var(--fp-card-border);
}
.fp-feed-noimg {
  width: 52px;
  height: 78px;
  border-radius: 3px;
  flex-shrink: 0;
  background: var(--fp-ink);
  color: var(--fp-paper);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: 1.3rem;
}
.fp-feed-body-wrap { flex: 1; min-width: 0; }

.fp-feed-title {
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.25;
  margin: 0 0 4px;
  color: var(--fp-ink);
}

.fp-feed-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.fp-feed-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--fp-card-border);
}
.fp-feed-who { flex: 1; min-width: 0; }
.fp-feed-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1.2;
  color: var(--fp-ink);
}
.fp-feed-name img.fp-feed-platform {
  width: 14px;
  height: 14px;
  border-radius: 3px;
}
.fp-feed-meta {
  font-family: "Space Mono", monospace;
  font-size: 0.62rem;
  letter-spacing: 0.03em;
  color: var(--fp-ink-soft);
  text-transform: uppercase;
}
.fp-feed-body {
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0 0 8px;
  color: var(--fp-ink);
}
.fp-feed-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: "Space Mono", monospace;
  font-size: 0.62rem;
  color: var(--fp-ink-soft);
  letter-spacing: 0.02em;
}
.fp-feed-foot a { color: var(--fp-accent); text-decoration: none; }
.fp-feed-foot a:hover { text-decoration: underline; }

.fp-feed-cover {
  display: block;
  width: 100%;
  height: 130px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--fp-card-border);
  margin-bottom: 8px;
}

/* Twice the height of a normal .fp-feed-cover (130px -> 260px), for a
   card that should stand out more in the feed � used on the Instagram
   card so its image gets real presence instead of being cropped down
   to the same small box as every other card. */
.fp-feed-cover-lg { height: 260px; }
.fp-feed-video-wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  margin-bottom: 8px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--fp-card-border);
  background: var(--fp-ink);
}
.fp-feed-video-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 720px) {
  .fp-front-page { grid-template-columns: 1fr; }
  .fp-divider { display: none; }
  .fp-sidebar { position: static; max-height: none; }
}



/* lyknss newspaper extras */
.fp-dir {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 22px 16px;
  margin: 12px 0 36px;
}
.fp-dir a { text-align: center; text-decoration: none; color: inherit; }
.fp-dir img {
  width: 96px; height: 96px; object-fit: cover; border-radius: 50%;
  border: 1px solid var(--fp-ink); display: block; margin: 0 auto 8px;
}
.fp-dir strong { display: block; font-family: "Playfair Display", serif; font-size: 0.95rem; }
.fp-dir em {
  display: block; font-style: normal; font-family: "Space Mono", monospace;
  font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fp-ink-soft);
}
.fp-disclaimer { font-size: 0.82rem; color: var(--fp-ink-soft); max-width: 46em; }
.lyknss-bar, .lyknss-foot { display: none !important; }

/* story is full measure; hub row is under it */
.fp-wrap { max-width: none; padding: 36px 4vw 60px; }
.fp-front-page { display: block; }
.fp-lead-col { max-width: none; }
.fp-hub-row {
  margin: 36px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--fp-ink);
}
.fp-hub-row .fp-sidebar-head { margin-bottom: 4px; }
.fp-hub-row .fp-sidebar-dek { margin: 0 0 18px; }
.fp-hub-row .lyknss-embed { margin: 0; max-width: none; }
.fp-hub-row .lyknss-embed .g {
  grid-template-columns: minmax(340px, 1.15fr) minmax(300px, 0.95fr);
  gap: 40px;
  align-items: start;
}
.fp-hub-row .lyknss-embed .board { max-width: 560px; }
.fp-hub-row .lyknss-embed .k,
.fp-hub-row .lyknss-embed .r { display: none; }
@media (max-width: 820px) {
  .fp-hub-row .lyknss-embed .g { grid-template-columns: 1fr; }
  .fp-hub-row .lyknss-embed .board { max-width: 360px; }
}

/* spoke items as Frankie feed cards */
.fp-hub-row .lyknss-embed .panel {
  border: 0;
  padding: 0;
  min-height: 0;
}
.fp-hub-row .lyknss-embed .ph {
  border-bottom: 0;
  padding: 0 0 12px;
}
.fp-hub-row .lyknss-embed .ph h2 {
  font-family: "Playfair Display", serif;
  font-weight: 700;
}
.fp-hub-row .lyknss-embed .it {
  display: block;
  background: #fffdf8;
  border: 1px solid #e4dbc8;
  border-radius: 10px;
  padding: 14px;
  margin: 0 0 12px;
  grid-template-columns: none;
  gap: 0;
}
.fp-hub-row .lyknss-embed .it img {
  display: block;
  width: 100%;
  height: 130px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #e4dbc8;
  background: #fff;
  margin: 0 0 10px;
}
.fp-hub-row .lyknss-embed .t {
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.25;
  margin: 0 0 4px;
}
.fp-hub-row .lyknss-embed .d {
  font-family: "Space Mono", monospace;
  font-size: 0.62rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  opacity: 0.8;
  margin: 0 0 8px;
}
.fp-hub-row .lyknss-embed .s {
  font-family: "PT Serif", Georgia, serif;
  font-size: 0.9rem;
  line-height: 1.5;
  opacity: 1;
  margin: 0;
}