/* ---------------------------------------------------------------------------
   Peltify — Home: the feed, the right column, the post dialog.

   Instagram's proportions, Peltify's paper. Two columns on a desktop — a
   630px feed and a 320px column that stays put while the feed scrolls — and
   one column on a phone with the suggestions turned into a horizontal strip
   above it. The COLLAPSE IS PURE CSS: the same nodes in the same order, so
   there is no second markup path that can drift.

   Nothing here redefines an `.ig-*` primitive. Where a phone needs a person
   row to stand up rather than lie down, the rule is scoped under
   `.home-sug-card`, which this page owns.
   --------------------------------------------------------------------------- */

.home { display: block; }

.home-cols {
  display: grid;
  /* 13.12: the reading column is `--col`, everywhere, once. */
  grid-template-columns: minmax(0, var(--col)) 320px;
  gap: 32px;
  align-items: start;
  justify-content: start;
  max-width: var(--col-wide);
  margin: 0 auto;
  padding: 8px 0 64px;
}

/* The feed is first in the reading order on a desktop; the aside is written
   first in the DOM so the phone can put it on top without reordering nodes. */
.home-feed { grid-column: 1; grid-row: 1; min-width: 0; display: grid; gap: 8px; }
.home-side {
  grid-column: 2; grid-row: 1;
  position: sticky; top: 16px;
  min-width: 0; display: grid; gap: 18px;
  padding-top: 12px;
}

/* ------------------------------------------------------------ the composer -- */

.home-compose {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 10px 14px; margin-bottom: 8px;
  border: 1px solid var(--line); border-radius: var(--r-box);
  background: var(--white); color: var(--ink-faint);
  font: inherit; text-align: left; cursor: pointer;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.home-compose:hover { border-color: var(--line-strong); background: var(--white); }
.home-compose-t { flex: 1 1 auto; font-size: 15px; }
.home-compose-ic { display: inline-grid; place-items: center; color: var(--violet); }

/* ----------------------------------------------------------------- a post --- */

/* THE CARD (Nick, 2026-09-06): "more obviously contained similar to
   reddit … It really should have a "card" feel to it … There are not
   enough breaks for the header, body, etc." One white surface on the paper,
   four parts inside it — who · what · the picture · the actions — each with
   its own room.
   2026-09-07 (entry 7): "Small (4px)" corners, a hairline and no shadow —
   Reddit's calm containment, nothing "rounded / AI-like / childish". */
.home-feed { gap: 12px; }
.pc {
  /* 15.6 — THE COLUMN CANNOT BE WIDER THAN THE CARD. A bare `grid` sizes its
     one auto column to the widest item's max-content, so at 390 a long handle
     or a long work title made the column 410 and every row in it stretched to
     match — then `overflow: hidden` cut them off, which is why the ⋯ was
     sliced in half on a phone. `minmax(0, 1fr)` is the column saying it may
     shrink; the rows inside it ellipsise as they were already written to. */
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0;
  padding: 0;
  border: 1px solid var(--line); border-radius: 4px;
  background: var(--white);
  box-shadow: none;
  overflow: hidden;
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
/* 15.4 (post-card/SPEC.md entry 16) — A HOVER STATE ON THE WHOLE CARD. Nick:
   "Id like a hover select on the WHOLE card itself (not the heart / comment /
   send / save of course. And the username)." The card lifts as one object,
   because pressing it opens the post. The parts that do something ELSE take
   the lift back off while the pointer is on them: the action row, the ⋯ menu,
   the identity row's doors and the author's name. `:has()` is what lets a
   parent answer for its children; a browser without it simply gets the plain
   hover, which is the same lift and never a wrong one. */
/* 18.3 (entry 18) — THE OPENED POST LIFTS TOO. "when opening media, I want the
   post as a WHOLE to be selectable EXCEPT for the review … and of course the
   interactables." So `.is-compact` is no longer excluded from the cancel list,
   and the whole review block — the reviewed-media row AND its stars — cancels
   the lift rather than only that row's two buttons. */
@media (hover: hover) {
  .pc:not(.is-compact):hover { border-color: var(--line-strong); box-shadow: var(--lift); }
  .pc.is-compact:hover { border-radius: 12px; box-shadow: var(--lift); }
  .pc:has(.pc-foot:hover):hover,
  .pc:has(.pc-more:hover):hover,
  .pc:has(.pc-name:hover):hover,
  .pc:has(.pc-handle:hover):hover,
  .pc:has(.pc-av:hover):hover,
  .pc:has(.pc-identity:hover):hover,
  .pc:has(.pc-id-title:hover):hover,
  .pc:has(.pc-id-more:hover):hover {
    border-color: var(--line); box-shadow: none;
  }
}
/* 15.4: the hover state is the block below — one rule, and the parts that
   do something other than opening the post take it back off. */
.pc.is-compact { border: 0; box-shadow: none; border-radius: 0; background: transparent; }

.pc-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 0; }
.pc-av { border: 0; background: none; padding: 0; cursor: pointer; border-radius: 50%; line-height: 0; }
.pc-who { flex: 1 1 auto; min-width: 0; display: grid; gap: 0; line-height: 1.3; }
.pc-line1 { display: flex; align-items: baseline; gap: 6px; min-width: 0; flex-wrap: wrap; }
.pc-name {
  border: 0; background: none; padding: 0; font: inherit; font-size: 14px; font-weight: 800;
  color: var(--ink); cursor: pointer; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pc-name:hover { text-decoration: underline; }
.pc-handle { font-size: 13px; font-weight: 500; color: var(--ink-faint); }
.pc-sep, .pc-time { font-size: 13px; color: var(--ink-faint); }
/* The lock beside the time: the server said friends-only. Drawn from the
   field and nothing else — an absent field draws no lock. */
.pc-lock { display: inline-grid; place-items: center; color: var(--ink-faint); line-height: 0; align-self: center; }
.pc-lock svg { width: 13px; height: 13px; }
/* Reddit's flair, without the tint: a small square-cornered word. */
.pc-kind {
  flex: none; padding: 1px 6px; border-radius: 3px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-soft); border: 1px solid var(--line); background: transparent;
}
.pc-more { width: 34px; height: 34px; flex: none; }
.pc-more svg { width: 20px; height: 20px; }

.pc-body { display: grid; gap: 10px; padding: 10px 16px 14px; }
.pc-title { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.25; letter-spacing: -0.015em; }
.pc-text { margin: 0; font-size: 15px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); }

/* ------------------------------------------------------------- the images --- */

/* A quiet band on the card's paper, the artwork at its own shape in the
   middle of it. No blurred copy behind it any more — that was most of the
   "cluttered" (Nick, 2026-09-06). */
.pc-media { display: grid; gap: 8px; padding: 14px 16px; background: var(--paper); border-top: 1px solid var(--line-soft); }
.pc-frame {
  position: relative; overflow: hidden;
  width: min(100%, 320px); max-height: 360px; margin: 0 auto;
  border-radius: 4px;
  background: none;            /* 13.10: no grey frame behind the artwork */
}
.pc-track {
  display: flex; height: 100%; width: 100%;
  transition: transform 320ms var(--ease);
}
.pc-shot {
  flex: 0 0 100%; width: 100%; height: 100%;
  border: 0; padding: 0; background: none; cursor: zoom-in; line-height: 0;
}
.pc-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pc-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 32px; height: 32px;
  border: 0; border-radius: 50%;
  background: rgba(255, 253, 250, 0.9); color: var(--ink);
  box-shadow: var(--lift); cursor: pointer;
  opacity: 0; transition: opacity var(--fast) var(--ease);
}
.pc-prev { left: 10px; }
.pc-next { right: 10px; }
.pc-frame:hover .pc-arrow, .pc-arrow:focus-visible { opacity: 1; }
.pc-arrow:disabled { opacity: 0 !important; pointer-events: none; }
@media (hover: none) { .pc-arrow { opacity: .92; } }

.pc-dots { display: flex; justify-content: center; gap: 5px; }
.pc-dot {
  width: 6px; height: 6px; padding: 0; border: 0; border-radius: 50%;
  background: var(--line-strong); cursor: pointer;
  transition: background var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.pc-dot.is-on { background: var(--violet); transform: scale(1.25); }

.pc-cap { margin: 0; font-size: 13px; color: var(--ink-faint); text-align: center; }
.pc-cap b { color: var(--ink); font-weight: 700; }

/* ------------------------------------------------------------- the review --- */

/* THE RATING LINE (2026-09-07, entry 7): "One plain line under the title" —
   stars · 4/5 · the work. No box, no spine, no background; it is a line
   of text that happens to start with stars. */
.pc-rating {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0 8px;
  margin: 0; padding: 0;
  font-size: 14px; line-height: 1.4; color: var(--ink-soft);
}
.pc-rating .st { gap: 1px; }
.pc-rating-n { font-weight: 700; color: var(--ink); }
.pc-rating-sep { color: var(--ink-faint); }

/* ------------------------------------------------------------ the actions --- */

/* INSTAGRAM'S BARE ICONS (2026-09-07, entry 7): plain icons in a row, no
   outlines, no pills; the count sits beside each one. */
.pc-foot { padding: 6px 10px 4px; }
.pc.is-compact .pc-foot { padding-left: 0; padding-right: 0; }
.pc-actions { display: flex; align-items: center; gap: 2px; }
.pc-actions .ig-ib { width: 36px; height: 36px; border-radius: 4px; }
.pc-actions .ig-ib:hover { background: transparent; color: var(--ink-soft); }
.pc-actions .ig-ib svg { width: 24px; height: 24px; }
.pc-body.is-link { cursor: pointer; }
.pc-body.is-link:hover .pc-title { text-decoration: underline; text-underline-offset: 3px; }
.pc-grow { flex: 1 1 auto; }
.pc-n { font-size: 14px; font-weight: 600; color: var(--ink); margin: 0 10px 0 -4px; }
.pc-n:empty { margin: 0; }
.pc-views {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 0 8px; font-size: 13px; color: var(--ink-faint);
}
.pc-save:disabled { opacity: .35; cursor: not-allowed; }
.pc-err:empty { display: none; }
.pc-err { margin: 0; font-size: 13px; color: var(--coral-dark); }

.pc-menu-rows { display: grid; gap: 6px; padding: 14px; }
.pc-menu-note:empty { display: none; }
.pc-menu-note { margin: 0 14px 14px; font-size: 13px; color: var(--ink-soft); overflow-wrap: anywhere; }
/* The owner's visibility row in the ··· menu: the state in bold, the flip
   after a dash. */
.pc-vis { display: flex; justify-content: center; gap: 0; }
.pc-vis-hint { font-weight: 500; color: var(--ink-soft); }

/* --------------------------------------------------------------- the stars -- */

.st { display: inline-flex; align-items: center; gap: 2px; color: var(--violet); }
.st-star { position: relative; display: inline-grid; line-height: 0; }
.st-bg { display: block; color: var(--line-strong); }
.st-fill {
  position: absolute; inset: 0; overflow: hidden;
  width: 0; line-height: 0; color: var(--violet); pointer-events: none;
  transition: width 120ms var(--ease);
}
.st-fill svg { display: block; }
.st-input { cursor: pointer; }
.st-input.is-preview .st-fill { color: var(--plum-light); opacity: .72; }
.st-hit {
  position: absolute; top: 0; bottom: 0; width: 50%;
  border: 0; background: none; padding: 0; cursor: pointer;
  /* A 26px star is a 13px half. The hit area is stretched downward to a 44px
     touch target without moving the drawing. */
  min-height: 44px; margin: -9px 0;
}
.st-hit-l { left: 0; }
.st-hit-r { right: 0; }
.st-input:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; border-radius: var(--r-box); }
@media (prefers-reduced-motion: reduce) {
  .st-fill, .pc-track, .pc-dot, .pc-arrow { transition: none; }
}

/* -------------------------------------------------------- the right column -- */

.home-me { padding-bottom: 4px; border-bottom: 1px solid var(--line-soft); }
.home-switch { font-size: 12.5px; }
.home-p-av { border: 0; background: none; padding: 0; cursor: pointer; line-height: 0; border-radius: 50%; }

.home-sug-list { display: grid; }
.home-follow-wrap { display: grid; justify-items: end; gap: 2px; }
.home-follow { min-height: 30px; padding: 0 12px; font-size: 12.5px; }
.home-follow-note:empty { display: none; }
.home-follow-note { font-size: 11.5px; color: var(--coral-dark); max-width: 150px; text-align: right; }

.home-note { margin: 6px 0; font-size: 13px; color: var(--ink-faint); }
.home-foot { margin: 4px 0 0; font-size: 11.5px; color: var(--ink-faint); letter-spacing: .04em; }
.home-wait { display: flex; align-items: center; gap: 8px; margin: 28px 0; color: var(--ink-faint); font-size: 14px; }
.home-more { display: grid; justify-items: center; padding: 18px 0 32px; }
.home-end { padding: 18px 0 32px; text-align: center; font-size: 13px; color: var(--ink-faint); }

/* "ALL CAUGHT UP" (home-feed entry 2): Instagram's hairline with the small grey
   words centred on it, between the last friends post and the public lane. */
.home-caught { display: flex; align-items: center; gap: 12px; margin: 6px 0; font-size: 12px; color: var(--ink-faint); }
.home-caught::before, .home-caught::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--line); }
.home-caught span { flex: none; }
.home-gate .ig-btn, .home-quiet .ig-btn, .home-broken .ig-btn { margin-top: 10px; }

/* -------------------------------------------------------- the post dialog --- */

.hp { padding: 0; }
.hp-x { position: absolute; top: 4px; right: 4px; z-index: 3; }
.hp-cols {
  display: grid; grid-template-columns: minmax(0, 1fr) 360px;
  min-height: 0;
}
.hp-left { min-width: 0; padding: 14px 18px; border-right: 1px solid var(--line); }
/* THE CARD LOSES ITS ROW IN HERE (post-comments entry 2): like · comment ·
   share · save live in the right pane, under the thread. */
.hp.is-no-actions .hp-left .pc-actions { display: none; }
.hp-right { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-width: 0; max-height: 76vh; }
.hp-c-scroll { overflow: auto; padding: 44px 16px 12px; }
.hp-comments { display: grid; gap: 16px; }

/* ONE COMMENT, INSTAGRAM'S ROW (`_assets/2026-09-07-chrome_9RiCNdtbyz.png`):
   avatar · bold handle + words; time · N likes · Reply under it; a small
   heart at the right edge. */
.hp-c { display: flex; gap: 10px; align-items: flex-start; }
.hp-c-av { border: 0; background: none; padding: 0; cursor: pointer; line-height: 0; border-radius: 50%; flex: none; }
.hp-c-t { min-width: 0; flex: 1 1 auto; }
.hp-c-body { margin: 0; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.hp-c-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 3px 0 0; font-size: 12px; color: var(--ink-faint); }
.hp-c-likes { font-weight: 600; }
.hp-c-reply, .hp-c-del { border: 0; background: none; padding: 0; font: inherit; font-size: 12px; font-weight: 700; color: var(--ink-faint); cursor: pointer; }
.hp-c-reply:hover { color: var(--ink); }
.hp-c-del:hover { color: var(--coral-dark); }
.hp-c-err:empty { display: none; }
.hp-c-err { color: var(--coral-dark); }
.hp-c-like {
  flex: none; width: 24px; height: 24px; margin-top: 6px;
  display: inline-grid; place-items: center;
  border: 0; background: none; padding: 0; cursor: pointer; color: var(--ink-faint);
}
.hp-c-like svg { width: 14px; height: 14px; }
.hp-c-like:hover { color: var(--ink); }
.hp-c-like.is-on { color: #ff3040; }
.hp-c-like.is-on svg { fill: currentColor; }
.hp-c.is-removed .hp-c-body { font-size: 13px; font-style: italic; color: var(--ink-faint); }
.hp-c.is-removed { padding-left: 40px; }

/* REPLIES sit indented under the parent; a second level indents once more
   and the thread stops there (entry 2, "maybe like 2 max"). */
.hp-thread { display: grid; gap: 12px; }
.hp-replies { display: grid; gap: 12px; padding-left: 40px; }
.hp-replies:empty { display: none; }
.hp-reply { display: grid; gap: 12px; }
/* `.hp-reply.is-deep` was the second indent. 16.8/14.2 (entry 5): there is
   only one level of replies now, so there is no second indent to style. */
.hp-reply .hp-c-av svg, .hp-reply .hp-c-av img { width: 24px; height: 24px; }
.hp-c-toggle {
  display: flex; align-items: center; gap: 14px; margin-left: 40px;
  border: 0; background: none; padding: 0; font: inherit; font-size: 12px; font-weight: 600;
  color: var(--ink-faint); cursor: pointer;
}
.hp-c-toggle:hover { color: var(--ink); }
.hp-c-rule { display: inline-block; width: 24px; height: 1px; background: var(--ink-faint); }

/* THE FOOT, PINNED (entry 2): the post's action row, the date, the composer. */
.hp-foot { border-top: 1px solid var(--line); }
.hp-actions { display: flex; align-items: center; gap: 2px; padding: 4px 8px 0; }
.hp-actions .ig-ib { width: 40px; height: 40px; border-radius: 4px; }
.hp-actions .ig-ib:hover { background: transparent; color: var(--ink-soft); }
.hp-actions .ig-ib svg { width: 24px; height: 24px; }
.hp-act { display: inline-flex; align-items: center; gap: 2px; }
.hp-count { font-size: 13px; font-weight: 600; color: var(--ink); min-width: 0; }
.hp-count:empty { display: none; }
.hp-grow { flex: 1 1 auto; }
.hp-save:disabled { opacity: .45; cursor: default; }
.hp-date { margin: 0; padding: 2px 16px 8px; font-size: 12px; color: var(--ink-faint); }
.hp-act-err { margin: 0; padding: 0 16px 6px; font-size: 12.5px; color: var(--coral-dark); }
.hp-act-err:empty { display: none; }

.hp-box { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center;
          padding: 10px 12px; border-top: 1px solid var(--line); }
.hp-box-reply { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12px; color: var(--ink-faint); }
.hp-box-reply:empty { display: none; }
.hp-box-x { display: inline-grid; place-items: center; width: 18px; height: 18px; border: 0; background: none; padding: 0; color: inherit; cursor: pointer; }
.hp-box-anchor { position: relative; min-width: 0; }
.hp-box-in {
  width: 100%; min-height: 40px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: var(--r-box);
  background: var(--white);
}
.hp-box-in:disabled { background: var(--paper); color: var(--ink-faint); }
.hp-box-err { grid-column: 1 / -1; margin: 0; font-size: 12.5px; color: var(--coral-dark); }
.hp-box-err:empty { display: none; }

/* ------------------------------------------------------------- the phone ---- */

@media (max-width: 900px) {
  .home-cols { grid-template-columns: minmax(0, 1fr); gap: 12px; max-width: 630px; padding-bottom: 24px; }
  .home-feed { grid-column: 1; grid-row: 2; }
  .home-side {
    grid-column: 1; grid-row: 1;
    position: static; gap: 10px; padding-top: 0;
    /* 2026-09-15 — a bare implicit track takes the strip's min-content, so
       the heading and the row ran 100px past the column on an iPad
       (chrome_1EiOPfkTCb: "See all" cut off at the right). */
    grid-template-columns: minmax(0, 1fr);
  }
  .home-sug { min-width: 0; }
  /* Your own row and the footer are rail furniture on a phone; the strip is
     the only part of the column that earns its height. */
  .home-me, .home-foot { display: none; }
  .home-sug-list {
    display: flex; gap: 10px;
    overflow-x: auto; overflow-y: hidden;
    /* The ROW scrolls, never the page. */
    scroll-snap-type: x proximity;
    padding-bottom: 4px; margin: 0 -12px; padding-left: 12px; padding-right: 12px;
  }
  .home-sug-card {
    flex: 0 0 138px; scroll-snap-align: start;
    padding: 12px 8px;
    border: 1px solid var(--line); border-radius: var(--r-box); background: var(--white);
  }
  .home-sug-card .ig-person { flex-direction: column; gap: 6px; min-height: 0; text-align: center; }
  .home-sug-card .ig-person-t { justify-items: center; text-align: center; width: 100%; }
  .home-sug-card .ig-person-t b, .home-sug-card .ig-person-t span { width: 100%; text-align: center; }
  .home-follow-wrap { justify-items: center; }
  .home-follow-note { text-align: center; max-width: 118px; }

  .pc { border-radius: 8px; }
  .pc-head { padding: 12px 12px 0; }
  .pc-body { padding: 8px 12px 12px; }
  .pc-media { padding: 12px; }
  .pc-frame { width: min(100%, 280px); }
  .ig-ib { width: 44px; height: 44px; }

  .hp-cols { grid-template-columns: minmax(0, 1fr); }
  .hp-left { border-right: 0; border-bottom: 1px solid var(--line); padding: 40px 14px 12px; }
  .hp-right { max-height: none; }
  .hp-c-scroll { padding: 12px 14px; }
  .hp-replies, .hp-c.is-removed { padding-left: 28px; }
  .hp-c-toggle { margin-left: 28px; }
}

/* A shared post in a DM bubble — pressable, like Instagram's. */
.dm-card.dm-card-post { display: block; width: 100%; text-align: left; font: inherit; cursor: pointer; }
.dm-card.dm-card-post:hover { border-color: var(--violet); }

/* ------------------------------------------------------ the hover preview -- */

/* Wikipedia's card (Nick, 2026-09-06: "The wikipedia hover is a lot
   nicer"): the words on the left, a square picture on the right, a 6px
   corner, opened UNDER the mention, fading in (src/ui/media-hover.js). */
.mh {
  position: fixed; z-index: 60;
  border: 1px solid var(--line-strong); border-radius: 6px;
  background: var(--white); box-shadow: 0 22px 44px -18px rgba(36, 20, 46, 0.45), 0 2px 8px -4px rgba(36, 20, 46, 0.2);
  overflow: hidden;
  opacity: 0; transform: translateY(4px);
  transition: opacity 160ms var(--ease), transform 160ms var(--ease);
  pointer-events: none;
}
.mh.is-in { opacity: 1; transform: none; pointer-events: auto; }
.mh.is-above { transform: translateY(-4px); }
.mh.is-above.is-in { transform: none; }
.mh-hit { display: grid; grid-template-columns: minmax(0, 1fr) 150px; width: 100%; min-height: 150px;
          border: 0; padding: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.mh-t { display: grid; gap: 3px; align-content: start; padding: 14px 16px 14px; }
.mh-title { font-size: 15px; font-weight: 800; line-height: 1.25; letter-spacing: -0.01em; }
.mh-by { font-size: 12.5px; color: var(--ink-faint); }
.mh-by:empty { display: none; }
.mh-desc { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink); }
.mh-desc.is-none { color: var(--ink-faint); font-style: italic; }
.mh-prov { margin: 4px 0 0; font-size: 11px; color: var(--ink-faint); }
.mh-prov:empty { display: none; }
.mh-art { width: 150px; height: 100%; min-height: 150px; background: var(--paper-deep); overflow: hidden; }
.mh-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mh-art.is-blank { display: none; }
.mh-hit:has(.mh-art.is-blank) { grid-template-columns: minmax(0, 1fr); }
@media (prefers-reduced-motion: reduce) { .mh { transition: none; } }

/* 2026-09-06, second pass — "still feels a bit cluttered and not super
   neat". Quieter chrome, one rhythm: 16px inside, 12px between parts; the
   kind pill is an outline, not a fill; the artwork is a little smaller with
   its caption as a chip inside the band; the action pills are lighter. */
.pc-head { padding: 12px 16px 0; }
.pc-body { gap: 8px; padding: 8px 16px 14px; }
.pc-title { font-size: 19px; letter-spacing: -0.01em; }
.pc-text { font-size: 15px; line-height: 1.6; color: var(--ink); }
.pc-media { padding: 16px; gap: 8px; position: relative; }
.pc-frame { width: min(100%, 320px); box-shadow: none; }
.pc-dots { position: absolute; left: 0; right: 0; bottom: 10px; pointer-events: none; }
.pc-dot { pointer-events: auto; }
/* 2026-09-07: the caption under the picture is plain text on the band, not
   a pill floating over it. */
.pc-cap { margin: 0; font-size: 12.5px; text-align: center; color: var(--ink-soft);
          white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-views { color: var(--ink-faint); }

/* 2026-09-06, entry 4: the words under the picture. */
.pc-body:not(.pc-body-text):has(+ .pc-media) { padding-bottom: 12px; }
.pc-body-text { padding: 14px 16px 16px; }
.pc-body.is-link .pc-text { cursor: pointer; }

/* 2026-09-06, entry 5 — Instagram's caption under the actions, and the
   artwork band in the picture's own colours. */
.pc-caption { padding: 0 16px 16px; }
.pc-caption .pc-text { font-size: 14.5px; line-height: 1.55; }
.pc-cap-who { font-weight: 800; margin-right: 2px; }
.pc-foot { border-top: 0; padding: 10px 12px 6px; }
/* 13.10 — "artwork at natural size or full width, no gray frame, no blurred
   backdrop". The band is the card's own paper; the picture sits on it. */
.pc-media { background: none; border-top: 0; }
.pc-body:has(+ .pc-media) { padding-bottom: 12px; }

/* 13.10 — a mention inside a card is a kind icon and a bold word, and
   nothing else (post-card SPEC 2026-09-08). The violet wash behind the
   words was a box around something that is already tappable; typography
   carries it now. Scoped to the card so ig.css's primitive is untouched. */
.pc .ig-mention { display: inline; padding: 0; background: none; vertical-align: baseline; }
.pc .ig-mention-word { color: var(--spine); font-weight: 700; }
.pc .ig-mention:hover .ig-mention-word { text-decoration: underline; text-underline-offset: 2px; }
.pc-caption { padding: 2px 16px 14px; }

/* ===========================================================================
   2026-09-07, entry 8 — "a fully fledged REAL app": Instagram's neatness.
   Nick's screenshot (chrome_uyqf72dhYz): the artwork sat small on a padded
   band with a caption under it; the caption began with the username; every
   mention wore a purple wash; a REVIEW flair sat top-right; the name was set
   in a heavy face that read "childlike". Each of those goes here.
   =========================================================================== */

/* the head: a 600-weight name, the handle and time quieter beside it */
.pc-head { padding: 12px 14px 0; gap: 12px; }
.pc-name { font-weight: 600; font-size: 14px; letter-spacing: 0; }
.pc-handle, .pc-sep, .pc-time { font-size: 13px; font-weight: 400; color: var(--ink-faint); }
.pc-kind { display: none; }
.pc-more { color: var(--ink); }

/* the words above the picture */
.pc-body { padding: 8px 14px 12px; gap: 6px; }
.pc-title { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; }
.pc-body:has(+ .pc-media) { padding-bottom: 12px; }

/* THE PICTURE FILLS THE CARD. No band, no padding, no frame shadow: the
   artwork is the card's width at its own shape, capped so a poster never
   runs past a screen, and the tint (the picture's own colours) sits only
   behind whatever the shape does not cover. */
/* REDDIT'S BAND (Nick, later the same evening: "im okay if the images of
   the posts have a bit of whitespace just like reddit … it blurs the image a
   bit"): the picture at its own shape, centred, on a blurred copy of itself. */
/* 2026-09-09, entry 11 + GPT point 1 ("Kill the gray image container ... That
   gray background makes it look like Peltify is displaying an image inside a
   media viewer"). The band, the blurred copy behind the picture and the
   frame's own shadow all go. What is left is the picture on the card. */
.pc-media { padding: 0; border-top: 0; gap: 0; position: relative; overflow: hidden; border-radius: 0; margin: 0; background: none; }
.pc-frame {
  position: relative; z-index: 1;
  width: 100% !important; max-width: none; max-height: 520px;
  margin: 0 auto; border-radius: 0; box-shadow: none !important;
  background: none;
}
.pc-shot img { object-fit: cover; }
.pc-cap { display: none; }
/* Inside the opened post the slideshow is still a slideshow: the picture at
   its own shape, arrows and dots. Only the FEED shows a preview. */
.pc.is-compact .pc-media { padding: 12px 0 0; }
.pc.is-compact .pc-frame { width: min(100%, 440px) !important; border-radius: 3px; }
.pc-dots { bottom: 12px; }
.pc-dot { width: 6px; height: 6px; background: rgba(255, 255, 255, 0.6); }
.pc-dot.is-on { background: var(--white); transform: none; }
.pc-arrow { width: 30px; height: 30px; background: rgba(255, 255, 255, 0.92); box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }

/* the actions, then the caption — no username in front of the words */
.pc-foot { padding: 6px 8px 0; }
.pc-actions .ig-ib { color: var(--ink); }
.pc-n { font-size: 14px; font-weight: 600; }
.pc-caption { padding: 4px 14px 14px; }
.pc-caption .pc-text { font-size: 14px; line-height: 1.5; }
.pc-cap-who { display: none; }

/* MENTIONS: a piece of media is "just a different font weight … nice and
   subtle, but obvious". No wash in the caption; the small artwork in the
   line and a 600 weight carry it. The REVIEW line keeps the purple wash. */
.pc .ig-mention-word { background: none; color: var(--ink); font-weight: 600; padding: 0; margin: 0; }
.pc .ig-mention:hover .ig-mention-word { background: none; text-decoration: underline; text-underline-offset: 2px; }
.pc-rating .ig-mention-word { background: var(--violet-wash); color: var(--spine); padding: 1px 4px; margin: 0 -1px; border-radius: 3px; }
.pc-rating .ig-mention:hover .ig-mention-word { background: var(--violet-wash-strong); text-decoration: none; }
.pc-rating { font-size: 13.5px; }

/* THE ··· MENU — Instagram's sheet (chrome_cILBouEfKz): one white panel,
   full-width rows divided by hairlines, the destructive row bold and red at
   the top, Cancel last. No pills. */
.pc-menu { border-radius: 12px; overflow: hidden; }
.pc-menu-rows { display: grid; gap: 0; padding: 0; }
.pc-mi {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  width: 100%; min-height: 48px; padding: 12px 16px;
  border: 0; border-top: 1px solid var(--line); background: var(--white);
  font: inherit; font-size: 14px; font-weight: 400; color: var(--ink);
  cursor: pointer; text-align: center;
}
.pc-mi:first-child { border-top: 0; }
.pc-mi:hover { background: var(--paper); }
.pc-mi:disabled { color: var(--ink-faint); cursor: default; }
.pc-mi.is-danger { color: #ed4956; font-weight: 700; }
.pc-mi.is-quiet { color: var(--ink); }
.pc-vis b { font-weight: 600; }
.pc-vis-hint { font-weight: 400; color: var(--ink-faint); }
.pc-menu-note { margin: 0; padding: 10px 16px 12px; border-top: 1px solid var(--line); font-size: 13px; }

@media (max-width: 900px) {
  .pc { border-radius: 0; border-left: 0; border-right: 0; }
  .pc-media { padding: 0; }
}

/* the like — red when it is on (the last pass's `.pc-actions .ig-ib { color }`
   outranked ig.css's `.ig-ib.is-on`) */
.pc-actions .ig-ib.is-on, .hp-actions .ig-ib.is-on { color: #ff3040; }

/* IN A COMMENT (Nick, chrome_e7W31nCZsn): a @person is coloured so it is
   obviously clickable; a piece of media reads like the post body — 600
   weight, its small art, no wash. */
.hp-c-body .ig-handle { color: var(--spine); font-weight: 600; }
.hp-c-body .ig-mention { display: inline; padding: 0; background: none; border-radius: 0; vertical-align: baseline; }
.hp-c-body .ig-mention.has-art { display: inline; background: none; }
.hp-c-body .ig-mention:hover { background: none; text-decoration: underline; text-underline-offset: 2px; }
.hp-c-body .ig-mention-art { display: inline-block; vertical-align: -4px; margin-right: 4px; border-radius: 3px; }
.hp-c-body .ig-mention-word { color: var(--ink); font-weight: 600; background: none; padding: 0; }


/* ===========================================================================
   13.10 — the post spine (post-card SPEC 2026-09-08).
   person -> thought -> media identity -> artwork -> actions.
   The identity is TYPOGRAPHY, not a pill: a bold title with a kind glyph, the
   facts under it in a quiet sans, and "In Library" as a state in the same
   line rather than a button somebody could press by mistake.
   =========================================================================== */
.pc-identity {
  display: flex; align-items: baseline; gap: 10px;
  padding: 2px 16px 10px;
}
.pc-id-main { flex: 1 1 auto; min-width: 0; }
.pc-id-title {
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; background: none; padding: 0; cursor: pointer;
  font-family: var(--font-serif); font-size: 17px; color: var(--ink);
  text-align: left;
}
.pc-id-title b { font-weight: 700; }
.pc-id-title:hover b { text-decoration: underline; text-underline-offset: 2px; }
.pc-id-k { color: var(--ink-faint); display: inline-flex; }
.pc-idline {
  margin-top: 2px; font-size: 12.5px; color: var(--ink-faint);
  display: flex; flex-wrap: wrap; gap: 5px; align-items: baseline;
}
.pc-id-sep { opacity: 0.55; }
/* A STATE, NOT A BUTTON: no border, no background, nothing to press. */
.pc-id-lib { font-size: 12px; color: var(--ink-faint); letter-spacing: 0.02em; white-space: nowrap; }
.pc-identity .pc-rating { margin: 0; white-space: nowrap; }

/* A list post: the order IS the point, so the numbers lead. */
.pc-list { margin: 0; padding: 2px 16px 12px 16px; list-style: none; counter-reset: none; }
.pc-list-row { display: flex; align-items: baseline; gap: 8px; padding: 3px 0; }
.pc-list-n { min-width: 1.4em; text-align: right; color: var(--ink-faint); font-size: 12.5px;
             font-variant-numeric: tabular-nums; }
.pc-list-y { color: var(--ink-faint); font-size: 12.5px; }

/* The caption is the thought, and it sits above the artwork now.
   18.3 (entry 18): "Perhaps the body of the post can be a tiny bit indented
   in." A small step in from the title and the review row — a paragraph under
   its own heading, not a block quote. This is the LAST `.pc-caption` rule in
   the file and therefore the live one; the three above it are earlier rounds
   the cascade has already overridden. */
.pc-caption { padding: 0 16px 10px 30px; }


/* ===========================================================================
   HANDOFF-14 lane 1 (post-card SPEC entries 8-15, 2026-09-09).

   THE REVIEWED-MEDIA ROW: thumbnail - title - creator . year - checkmark In
   Library - the ... that opens the media card, and the stars on their OWN
   line under it. Before this the stars sat inside the row behind a middle
   dot, which wrapped the work onto a second line (entry 8's screenshot).
   =========================================================================== */
.pc-identity { display: block; padding: 2px 14px 12px; }
.pc-id-row { display: flex; align-items: center; gap: 10px; }
.pc-id-thumb {
  flex: none; width: 44px; height: 44px; border-radius: 3px; overflow: hidden;
  display: grid; place-items: center;
  background: var(--paper-deep); color: var(--ink-faint);
}
.pc-id-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-id-title { font-size: 16px; line-height: 1.25; display: block; width: 100%; }
.pc-id-title b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-idline { margin-top: 1px; flex-wrap: nowrap; overflow: hidden; white-space: nowrap; }
.pc-id-more { flex: none; width: 30px; height: 30px; color: var(--ink-faint); }
.pc-id-more svg { width: 18px; height: 18px; }
/* the stars, under the row and under the thumbnail's column */
.pc-identity .pc-rating { margin: 8px 0 0; padding: 0; white-space: nowrap; }

/* THE ARTWORK IS A PREVIEW (entry 11): a horizontal rectangle at the card's
   width, cropped to fill, fading off at the bottom "to indicate the post is
   boxed in and you are previewing it". Not clickable - the press falls
   through to the card, which opens the post. */
.pc-media.is-preview { margin: 0; padding: 0; }
.pc-media.is-preview .pc-frame {
  width: 100% !important; aspect-ratio: 16 / 9; max-height: 300px;
  border-radius: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, rgba(0, 0, 0, .12) 100%);
  mask-image: linear-gradient(to bottom, #000 62%, rgba(0, 0, 0, .12) 100%);
}
.pc-media.is-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* entry 10: "I want the heart / comments a bit bigger." Those two only. */
.pc-actions .ig-ib.pc-big { width: 42px; height: 42px; }
.pc-actions .ig-ib.pc-big svg { width: 28px; height: 28px; }

/* ===========================================================================
   16.6 — THE POST TITLE IS BIGGER THAN THE MEDIA TITLE (post-card/SPEC.md
   entry 17, 2026-09-09). Nick: "title HAS to be bigger than the media text
   (its not currently)." It was 17px sans against a 16px SERIF, and a serif
   at 16 reads at least as large as a sans at 17 — the two looked level, which
   is what he saw zoomed out. The serif stays where entry 15 put it (the media
   title, and only there); only the sizes move, far enough apart that the
   hierarchy survives a zoom.
   =========================================================================== */
.pc-title { font-size: 21px; font-weight: 800; line-height: 1.25; }
.pc-id-title { font-size: 15px; }
/* The review row now sits between the title and the body, so its bottom
   padding is the gap before the prose rather than the gap before the picture. */
.pc-identity { padding: 2px 14px 10px; }
@media (max-width: 640px) {
  .pc-title { font-size: 19px; }
  .pc-id-title { font-size: 14.5px; }
}


/* ===========================================================================
   18.4 — WHO REVIEWED IT (`media-card/SPEC.md` entry 8).

   Nick: "It would be cool if you can click the metadata and actually see a
   short little (profile pic, @name + 'user reviews this a X/5!' kind of
   thing." A small card off the reviewed-media row, fixed to the viewport
   because it is positioned from a bounding rect.
   =========================================================================== */
.rvp {
  position: fixed; z-index: 80;
  display: flex; align-items: center; gap: 10px;
  max-width: 320px; padding: 10px 12px; white-space: nowrap;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--white); box-shadow: var(--raise-hi, 0 18px 40px rgba(20, 12, 28, 0.16));
  opacity: 0; transform: translateY(-4px);
  transition: opacity 140ms var(--ease), transform 140ms var(--ease);
}
.rvp.is-above { transform: translateY(-100%) translateY(-4px); }
.rvp.is-in { opacity: 1; transform: none; }
.rvp.is-above.is-in { transform: translateY(-100%); }
.rvp-t { display: grid; gap: 1px; min-width: 0; flex: 1 1 auto; }
.rvp > :last-child { flex: none; }
.rvp-t b { font-size: 13px; font-weight: 700; }
.rvp-t span { font-size: 12px; line-height: 1.35; color: var(--ink-soft, var(--ink-faint)); }
@media (prefers-reduced-motion: reduce) { .rvp { transition: none; } }


/* ===========================================================================
   19.4 (`post-card/SPEC.md` entry 19, `post-comments/SPEC.md` entry 6) —
   ROOM UNDER THE PICTURE, A CURSOR THAT SAYS "THIS OPENS", AND A COMMENT BOX
   THAT GROWS.

   Nick, on the deployed HANDOFF-18 build: "Posts dont have enough whitespace
   between the review at the bottom, under the album image. Also hovering over
   the aspects of the post that makes the post open doesnt make the cursor
   have a hover icon. Same with text."
   =========================================================================== */

/* 1. THE GAP. 18.3 moved the review row under the picture, and it inherited a
   2px top padding written when it sat directly under the title — where 2px
   was right, because a heading already carries its own space. Under a
   full-bleed image that faded off at its bottom edge, the row started almost
   on the artwork. */
.pc-media + .pc-identity { padding-top: 18px; }
@media (max-width: 640px) { .pc-media + .pc-identity { padding-top: 14px; } }
/* A post with no picture keeps 2px: there the row sits under a heading, which
   carries its own space, and 18px would open a hole. */

/* 2. THE CURSOR. `openOnClick` puts `is-link` on EVERY part that opens the
   post — the body, the caption and the preview image — but only `.pc-body`
   had ever been given a pointer, because it was the only one that existed
   when 15.4 wrote the rule. 18.3 split the caption out of the body and 15.4
   made the picture a door, and neither took the cursor with it. One rule for
   the class instead of one rule per element, so the next door gets it too. */
.pc .is-link, .pc .is-link .pc-text, .pc .is-link .pc-title,
.pc .is-link img { cursor: pointer; }
/* …but never over a thing that does something ELSE: those keep their own. */
.pc .is-link button, .pc .is-link a, .pc .is-link [role="button"] { cursor: pointer; }
/* And the contained hover follows the cursor: the card already lifts as one
   object (entry 16); the caption underlines its title the way the body does. */
@media (hover: hover) {
  /* The caption is a SIBLING that follows the body, so it cannot reach back
     to the title with a combinator — `:has()` on the card is what can. */
  .pc:has(.pc-caption.is-link:hover) .pc-title,
  .pc:has(.pc-media.is-preview.is-link:hover) .pc-title,
  .pc .pc-body.is-link:hover .pc-title { text-decoration: underline; text-underline-offset: 3px; }
}

/* 3. THE COMMENT BOX GROWS. `richInput({ singleLine: true })` draws
   `white-space: nowrap; overflow-x: auto`, which is a one-line box the words
   scroll out of — "the text gets hidden. I like in instagram where the text
   box actually grows." It wraps and grows here, to a cap, and only then
   scrolls INSIDE itself. Enter still posts, so `aria-multiline="false"` is
   still true: nobody can put a newline in, the words simply wrap. */
.hp-box-in.is-one-line {
  white-space: pre-wrap; overflow-x: hidden; overflow-y: auto;
  max-height: 132px; line-height: 1.45;
}
/* The row stops centring once the field is taller than the button beside it. */
.hp-box { align-items: end; }

/* ===========================================================================
   20.6 (`post-card/SPEC.md` entry 20, 2026-09-10) — THE ARTWORK IS INSET.

   Nick, over `_assets/2026-09-10e-chrome_q1efHRv0iO.png`: "The artwork sits
   inside the same side padding as the body text… thats the last thing to give
   it a neat feel." It ran edge to edge while every other line of the card was
   inset 16px, so the picture was the one thing that broke the card's column.

   The SIDE padding only — the fade and the ratio are untouched, and the
   opened post's slideshow keeps its own rules below.
   =========================================================================== */
/* `.is-preview` — the feed's own variant — sets `padding: 0` with two classes
   and therefore out-ranks a single-class rule. It is named here rather than
   fought with `!important`; the phone shot is what found it. */
.pc-media, .pc-media.is-preview { padding-left: 16px; padding-right: 16px; }
.pc-media .pc-frame { border-radius: 4px; }
@media (max-width: 900px) {
  .pc-media, .pc-media.is-preview { padding-left: 14px; padding-right: 14px; }
}

/* ===========================================================================
   21.4 (`post-card/SPEC.md` entry 21, 2026-09-11) — A CONTAINED POST.

   Nick, over `_assets/2026-09-11a-chrome_bECrcyEnp8.png`: "I want the post
   image to be AS boxed in as the body text. The whitespace left / right
   padding is a good job, but maybe MORE so it just feels like the preview is
   an actual contained post … the username / date posted / post title was
   contained in a little semi darker header."

   ONE INSET for every block of the card — the header band, the caption, the
   artwork, the identity row, a list — so they can never drift apart again
   (20.6 had to hunt down three near-equal values). Larger than before: 20px
   on a desktop (was 16/14), 16px on a phone (was 12). `.pc >` out-ranks
   mobile.css, which loads after this sheet.
   =========================================================================== */
.pc { --pc-inset: 20px; --pc-band: color-mix(in srgb, var(--ink) 4.5%, var(--white)); }
@media (max-width: 900px) { .pc { --pc-inset: 16px; } }
.pc > .pc-head {
  display: block; padding: 12px var(--pc-inset) 12px;
  background: var(--pc-band); border-bottom: 1px solid var(--line-soft);
}
.pc-head-row { display: flex; align-items: center; gap: 12px; }
.pc-head-row .pc-who { flex: 1; min-width: 0; }
.pc > .pc-head .pc-title { margin: 10px 0 0; }
.pc > .pc-head .pc-title.is-link { cursor: pointer; }
.pc > .pc-head .pc-title.is-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.pc > .pc-caption, .pc > .pc-identity, .pc > .pc-list,
.pc > .pc-media, .pc > .pc-media.is-preview {
  padding-left: var(--pc-inset); padding-right: var(--pc-inset);
}
.pc > .pc-caption { padding-top: 14px; }
.pc > .pc-media .pc-frame { border-radius: 6px; }
/* the first block under the band breathes the same amount whichever it is */
.pc > .pc-head + .pc-media { padding-top: 16px; }

/* Text previews of a post (DM card, inbox row): the mention convention, small. */
.ig-mention.is-preview { display: inline; padding: 0; background: none; cursor: inherit; }
.ig-mention.is-preview .ig-mention-k { width: 14px; height: 14px; margin-right: 3px; vertical-align: -2px; }
.ig-mention.is-preview .ig-mention-word { font-weight: 700; background: none; padding: 0; color: inherit; }

/* 21.7 (post-card/SPEC.md 22-23) — "Edited" beside the date; a list keeps its
   words in order with each mention on its own line, and no numbers. */
.pc-edited { font-size: 13px; color: var(--ink-faint); }
.pc > .pc-caption.is-list .ig-mention { display: block; margin: 0; }
.pc-list { display: grid; gap: 0; padding: 0 var(--pc-inset, 20px) 12px; }

/* 22.1 (`post-card/SPEC.md` 24, overrides 21.4's band) — "I actually dont
   think im a fan of the darkened header." The header is plain again; the
   one-inset rule above stays. The artwork gets "EVEN MORE whitespace
   similarly to when you view a post fully", so the feed's preview sits well
   inside the card, as the opened post's does. */
.pc > .pc-head { background: none; border-bottom: 0; padding-bottom: 0; }
.pc > .pc-caption { padding-top: 10px; }
.pc:not(.is-compact) > .pc-media.is-preview {
  padding-left: calc(var(--pc-inset) * 2.5); padding-right: calc(var(--pc-inset) * 2.5);
}
@media (max-width: 640px) {
  .pc:not(.is-compact) > .pc-media.is-preview { padding-left: 32px; padding-right: 32px; }
}
/* The Home feed's preview: three lines, cut clean, "See more" as plain text.
   26.7: "The fade out preview 'see more' is meh" — no fade, no bold button. */
.pc > .pc-caption.is-clamped { padding-bottom: 6px; }
.pc > .pc-caption.is-clamped .pc-text {
  line-height: 1.55; display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
.pc > .pc-seemore {
  display: block; margin: 0 var(--pc-inset) 10px; padding: 0; border: 0; background: none; text-align: left;
  font: inherit; font-size: 14px; font-weight: 400; color: var(--ink-faint); cursor: pointer;
}
.pc > .pc-seemore:hover { color: var(--ink); text-decoration: underline; }
.pc-list-row { font-size: 14px; }
.cmp-edit-h { font-size: 15px; font-weight: 800; }

/* ===========================================================================
   24.3 (post-card/SPEC.md 25, RAW 25). Nick: "I noticed you removed the body
   paragraphs indent / padding on the left and right sides. Not good, I dont
   want it to align directly with the title." and "right now the image
   previews make it feel clustered … either like a smaller image or something".

   THE BODY STEPS IN AGAIN, both sides, from the title's inset (21.4's one-inset
   rule had lined it up with the title). 26.7 removed the feed's small artwork
   banner that lived here: the feed draws the work as an attachment row.
   =========================================================================== */
.pc { --pc-body-indent: 22px; }
@media (max-width: 640px) { .pc { --pc-body-indent: 14px; } }
.pc > .pc-caption, .pc > .pc-list {
  padding-left: calc(var(--pc-inset) + var(--pc-body-indent));
  padding-right: calc(var(--pc-inset) + var(--pc-body-indent));
}
.pc > .pc-seemore { margin-left: calc(var(--pc-inset) + var(--pc-body-indent)); }

/* The one-tap add on your OWN post, where "In Library" would sit. */
.pc-id-add {
  flex: none; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line);
  background: none; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--ink); cursor: pointer;
}
.pc-id-add:hover { border-color: var(--ink); }
.pc-id-add[disabled] { opacity: .55; cursor: default; }

/* ===========================================================================
   26.7 (HANDOFF-26, decided 2026-09-14) — THE ATTACHMENT ROW REPLACES THE
   FEED'S HERO IMAGE. Nick on 24.3: "Cuts off certain images … Theres just
   something thats not 'right' about it." The work is one full-width row above
   the action bar; its thumb keeps the work's true shape (the ratio is set on
   the element from the kind) and the picture is fitted, never cropped.
   =========================================================================== */
.pc-id-thumb { height: auto; }
.pc-id-thumb img { object-fit: contain; }
.pc.is-feed > .pc-identity { padding-top: 6px; padding-bottom: 8px; }
.pc > .pc-more-works {
  display: block; margin: -2px var(--pc-inset) 8px calc(var(--pc-inset) + 54px); padding: 0;
  border: 0; background: none; font: inherit; font-size: 13.5px; color: var(--ink-faint); cursor: pointer;
  text-align: left;
}
.pc > .pc-more-works:hover { color: var(--ink); text-decoration: underline; }
@media (hover: hover) { .pc:has(.pc-more-works:hover):hover { border-color: var(--line); box-shadow: none; } }

/* ===========================================================================
   26.7 round 2 (HANDOFF-26, decided 2026-09-14) — CONTAINED, LIKE REDDIT.
   Nick: "It just doesnt feel contained or real like how reddit does it. Kind
   of just lingers." The feed card only; the opened post is unchanged.

   ONE LEFT GUTTER: the avatar column on the left, and the title, body, row
   and actions all start at `--pc-x`. 24.3's body indent is dropped (the
   staircase). 16px padding, an 8/12 spacing scale, a 32px avatar. The row is
   in the app's sans, and its right side is stars + the library tick.
   =========================================================================== */
.pc.is-feed { --pc-pad: 16px; --pc-av: 32px; --pc-x: calc(var(--pc-pad) + var(--pc-av) + 10px); }
.pc.is-feed > .pc-head { padding: var(--pc-pad) var(--pc-pad) 0; }
.pc.is-feed .pc-head-row { gap: 10px; }
.pc.is-feed > .pc-head .pc-title {
  margin: 8px 0 0; padding-left: calc(var(--pc-av) + 10px);
  font-size: 18px; font-weight: 800; line-height: 1.3;
}
.pc.is-feed > .pc-caption, .pc.is-feed > .pc-identity, .pc.is-feed > .pc-pelt {
  padding-left: var(--pc-x); padding-right: var(--pc-pad);
}
.pc.is-feed > .pc-caption { padding-top: 8px; padding-bottom: 0; }
.pc.is-feed > .pc-caption .pc-text { font-size: 16px; line-height: 1.45; color: var(--ink); }
.pc.is-feed .ig-mention { display: inline; }
.pc.is-feed .ig-mention-word { font-weight: 700; color: var(--ink); }
.pc.is-feed > .pc-seemore { margin: 2px var(--pc-pad) 0 var(--pc-x); font-size: 14px; }
.pc.is-feed > .pc-identity { padding-top: 12px; padding-bottom: 0; }
.pc.is-feed > .pc-identity + .pc-identity { padding-top: 8px; }
.pc.is-feed > .pc-more-works { margin: 6px var(--pc-pad) 0 calc(var(--pc-x) + 50px); }
/* the icons sit 7px inside their hit boxes; the gutter is the icon's edge */
.pc.is-feed > .pc-foot { padding: 4px var(--pc-pad) 8px calc(var(--pc-x) - 7px); }
.pc.is-feed .pc-id-row { gap: 10px; }
.pc.is-feed .pc-id-thumb { width: auto; height: 88px; }
.pc.is-feed .pc-id-thumb img { object-fit: contain; }

/* 28.5 — the feed's attachment thumb is ~88px tall at the work's true shape
   (square 88, poster 59×88), and the remaining works are a strip of covers
   instead of "+N more" text. Still contained: no hero. */
.pc.is-feed > .pc-more-works.pc-strip {
  display: flex; align-items: center; gap: 6px; margin: 8px var(--pc-pad) 0 var(--pc-x);
}
.pc-strip-c {
  flex: none; height: 44px; border-radius: 3px; overflow: hidden; display: grid; place-items: center;
  background: var(--paper-deep); color: var(--ink-faint); aspect-ratio: 1 / 1;
}
.pc-strip-c img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pc-strip-n { width: 44px; font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.pc.is-feed > .pc-more-works.pc-strip:hover .pc-strip-c { outline: 1px solid var(--line); }
.pc.is-feed .pc-id-title { font-family: inherit; font-size: 14px; }
.pc.is-feed .pc-id-title b { font-weight: 700; }
.pc.is-feed .pc-idline { font-size: 13px; font-weight: 400; }
.pc-id-side { flex: none; display: flex; align-items: center; gap: 8px; }
.pc-id-side .pc-rating { margin: 0; display: flex; align-items: center; gap: 4px; font-size: 13px; }
.pc-id-side .pc-rating-n { font-weight: 700; }
.pc-id-side .st-input[aria-busy="true"] { opacity: .4; }
.pc-id-side .pc-id-lib, .pc-id-side .pc-id-add {
  display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0;
  border: 0; border-radius: 4px; background: none; color: var(--ink); line-height: 0;
}
.pc-id-side .pc-id-lib { color: var(--violet); }
.pc-id-side .pc-id-lib svg, .pc-id-side .pc-id-add svg { width: 15px; height: 15px; }
.pc-id-side .pc-id-lib svg { fill: currentColor; }
.pc-id-side .pc-id-add { color: var(--ink-faint); cursor: pointer; }
.pc-id-side .pc-id-add:hover { color: var(--ink); }
@media (max-width: 640px) {
  .pc.is-feed > .pc-caption .pc-text { font-size: 15px; }
  .pc.is-feed .pc-idline { display: none; }
}

/* The person hover card. Fixed to the viewport: it is placed from a rect. */
.phc {
  position: fixed; z-index: 80; width: 280px; display: grid; gap: 2px;
  padding: 16px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--white); box-shadow: var(--raise-hi, 0 18px 40px rgba(20, 12, 28, 0.16));
  opacity: 0; transform: translateY(-4px);
  transition: opacity 140ms var(--ease), transform 140ms var(--ease);
}
.phc.is-above { transform: translateY(-100%) translateY(-4px); }
.phc.is-in { opacity: 1; transform: none; }
.phc.is-above.is-in { transform: translateY(-100%); }
.phc-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 8px; }
.phc-av { border: 0; background: none; padding: 0; border-radius: 50%; line-height: 0; cursor: pointer; }
.phc-name {
  border: 0; background: none; padding: 0; text-align: left; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 700; color: var(--ink);
}
.phc-name:hover { text-decoration: underline; }
.phc-handle { font-size: 13px; color: var(--ink-faint); }
.phc-bio {
  margin: 8px 0 0; font-size: 14px; line-height: 1.4; color: var(--ink);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.phc-counts { margin: 8px 0 0; display: flex; gap: 14px; font-size: 13px; color: var(--ink-faint); }
.phc-counts b { color: var(--ink); font-weight: 700; }
.phc-note { margin: 8px 0 0; font-size: 13px; color: var(--ink-faint); }
@media (prefers-reduced-motion: reduce) { .phc { transition: none; } }

/* 26.7 round 3 (HANDOFF-26, decided 2026-09-14) — the feed column is 680px on
   a desktop (was the 630px --col). The phone rule at 900px keeps its own. */
@media (min-width: 901px) {
  .home-cols { grid-template-columns: minmax(0, 680px) 320px; max-width: 1032px; }
}

/* ===========================================================================
   29.1 (2026-09-14) — THE FEED REDESIGN. Claude Design brief: three type
   tiers (title → body → mono metadata), mentions as pills with a micro-cover
   (1d), every work in ONE uniform shelf of covers with title + creator (1a
   dark's row), restrained chrome: one accent, low-contrast uniform icons,
   small radii, no double boxing. Feed card only; the opened post is untouched.
   =========================================================================== */
.pc.is-feed { --pc-x: var(--pc-pad); --pc-av: 28px; }
.pc.is-feed .pc-head-row { gap: 10px; align-items: center; }
.pc.is-feed .pc-av .av { width: var(--pc-av) !important; height: var(--pc-av) !important; font-size: 11px; }
/* tier 3: the metadata line — handle · time — in letterspaced mono caps */
.pc.is-feed .pc-name { font-size: 14px; font-weight: 600; }
.pc.is-feed .pc-handle, .pc.is-feed .pc-time, .pc.is-feed .pc-sep, .pc.is-feed .pc-edited {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint);
}
.pc.is-feed .pc-more { color: var(--ink-faint); width: 28px; height: 28px; }
.pc.is-feed .pc-more svg { width: 18px; height: 18px; }
/* tier 1: the title */
.pc.is-feed > .pc-head .pc-title { padding-left: 0; margin-top: 10px; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
/* tier 2: the body, three lines, "more" muted */
.pc.is-feed > .pc-caption { padding-top: 6px; }
.pc.is-feed > .pc-caption .pc-text { font-size: 15.5px; line-height: 1.65; letter-spacing: -0.006em; font-weight: 400; color: var(--ink); }
.pc.is-feed > .pc-seemore { margin: 2px var(--pc-pad) 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
/* mentions keep the feed's existing look (Nick, 2026-09-14: "You werent
   supposed to change the style of mentioned media") */
/* THE SHELF: one container for 1 work or 5, same cells, no hero */
.pc-shelf { display: flex; flex-wrap: wrap; gap: 12px; padding: 12px var(--pc-pad) 0; }
.pc-cell {
  width: 108px; flex: none; display: grid; gap: 4px; padding: 0; border: 0; background: none;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.pc-cell-art {
  display: grid; place-items: center; width: 100%; border-radius: 3px; overflow: hidden;
  background: var(--paper-deep); color: var(--ink-faint);
}
.pc-cell-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-cell:hover .pc-cell-art { outline: 1px solid var(--line-strong); }
.pc-cell-t { margin-top: 3px; font-size: 13px; font-weight: 600; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-cell-m { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-cell-m:empty { display: none; }
/* the post's stars sit under the work it rated */
.pc-cell-stars { display: flex; align-items: center; gap: 5px; margin-top: 2px; font-size: 12px; color: var(--ink); }
.pc-cell-stars .st { gap: 1px; }
.pc-cell-stars b { font-weight: 700; }
@media (hover: hover) { .pc:has(.pc-cell:hover):hover { border-color: var(--line); box-shadow: none; } }
/* actions: uniform, low-contrast; only a liked heart takes the accent */
.pc.is-feed > .pc-foot { padding: 8px var(--pc-pad) 10px calc(var(--pc-pad) - 7px); }
.pc.is-feed .pc-actions .ig-ib { color: var(--ink-faint); width: 32px; height: 32px; }
.pc.is-feed .pc-actions .ig-ib svg { width: 20px; height: 20px; stroke-width: 1.8; }
.pc.is-feed .pc-actions .ig-ib:hover { color: var(--ink); }
.pc.is-feed .pc-actions .ig-ib.is-on { color: #ff3040; }
.pc.is-feed.is-link { cursor: pointer; }
.pc.is-feed .pc-n { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--ink-faint); margin: 0 8px 0 -6px; }
.pc.is-feed .pc-views { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--ink-faint); }
.pc.is-feed .pc-views svg { width: 14px; height: 14px; }
/* on a phone the cells shrink so three fit beside the gutters */
@media (max-width: 640px) {
  .pc-shelf { gap: 10px; }
  .pc-cell { width: calc((100% - 20px) / 3); }
  .pc.is-feed > .pc-head .pc-title { font-size: 19px; }
}

/* 2026-09-14 — A SHARED PELT IS A SMALL SHARE. Its works sit to the right
   of the pelt block on a desktop and are not drawn on a phone. */
.pc-peltrow { display: flex; align-items: flex-start; gap: 16px; padding-right: var(--pc-pad); }
.pc-peltrow > .pc-pelt { flex: 1 1 auto; min-width: 0; padding-right: 0; }
.pc-peltrow > .pc-shelf { flex: none; padding: 12px 0 0; max-width: 240px; }
@media (max-width: 900px) { .pc-peltrow > .pc-shelf { display: none; } }

/* 2026-09-14 — THE OPENED POST FILLS A PHONE SCREEN (Nick: "the post viewing
   doesnt feel that quite right … Closing it is hard"). One column, the whole
   sheet scrolls, the comment box sticks to the bottom, a big close target;
   a swipe down from the top closes it (home.js). */
@media (max-width: 720px) {
  .hp-scrim.ig-scrim { padding: 0; align-items: stretch; }
  .ig-dialog.hp { width: 100%; height: 100dvh; max-height: none; border-radius: 0; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .hp-cols { display: block; }
  .hp-left { border-right: 0; padding: 48px 14px 8px; }
  .hp-right { display: block; max-height: none; }
  .hp-c-scroll { overflow: visible; padding: 0 14px 16px; }
  .hp-foot { position: sticky; bottom: 0; background: var(--white); border-top: 1px solid var(--line); }
  .hp-x { top: 8px; right: 8px; width: 40px; height: 40px; }
}

/* 2026-09-14 — the "Suggested for you" line keeps the page gutter on a phone */
@media (max-width: 900px) { .home-sug .ig-h { padding: 0 12px; } }

/* 2026-09-15 — THE BODY STANDS OUT (Nick: "the body of the text to stand out
   more … indent a bit … font similar to claude.ai design's text, neat fancy
   … thin little separators, the background a tiny bit darker than the card").
   The body is set in the serif, one size up, indented from the title; the
   feed's ground is a shade deeper than the cards, with a little more air
   between them. Feed and the opened post alike. */
.pc.is-feed > .pc-caption, .pc.is-compact > .pc-caption { padding-left: calc(var(--pc-pad, 16px) + 14px); padding-right: calc(var(--pc-pad, 16px) + 6px); }
.pc.is-feed > .pc-caption .pc-text, .pc.is-compact > .pc-caption .pc-text {
  font-family: var(--font-serif); font-size: 16.5px; line-height: 1.6; letter-spacing: 0; font-weight: 400; color: var(--ink);
}
.pc.is-feed > .pc-seemore { margin-left: calc(var(--pc-pad, 16px) + 14px); }
.pc.is-feed .pc-shelf { padding-left: calc(var(--pc-pad, 16px) + 14px); }
.home-feed { gap: 10px; }
.app[data-view="home"] .surface { background: color-mix(in srgb, var(--paper) 72%, var(--paper-deep) 28%); }
@media (max-width: 900px) {
  .home-feed { gap: 8px; }
  .pc.is-feed { border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
  .pc.is-feed > .pc-caption { padding-left: calc(var(--pc-pad, 16px) + 10px); }
  .pc.is-feed > .pc-caption .pc-text { font-size: 16px; }
}
/* 2026-09-15 — on a phone the cards are full-bleed with the deeper ground
   showing between them, and the counts sit clear of their icons */
@media (max-width: 900px) {
  .home-feed { gap: 10px; }
  .pc.is-feed { margin: 0 -12px; }
}
.pc.is-feed .pc-n { margin: 0 10px 0 -1px; }
/* 2026-09-15 — a little side whitespace on a phone too: the card is inset
   10px from the edges with its hairline all round and small corners, so the
   deeper ground shows on every side (undoes the full-bleed of the night before) */
@media (max-width: 900px) {
  .pc.is-feed { margin: 0 10px; border: 1px solid var(--line-soft); border-radius: 4px; }
}
/* 2026-09-15 — a mention reads at the body's size: same size, a step lighter
   than the old bold, so it sits in the sentence instead of over it */
.pc.is-feed .ig-mention-word, .pc.is-compact .ig-mention-word { font-size: 0.95em; font-weight: 600; }
.pc.is-feed .ig-mention-k, .pc.is-compact .ig-mention-k { vertical-align: -2px; }