/* Public feed.
   Deliberately plain: a column of posts separated by a hairline, no card
   borders, no boxes. */

.fd-main{max-width:620px;margin:0 auto;padding:clamp(30px,5vw,54px) var(--edge) clamp(60px,9vw,110px)}
.fd-title{margin:0 0 clamp(24px,3.6vw,40px);font-family:var(--f-title);font-weight:700;
  font-size:clamp(32px,6vw,52px);line-height:1.05;letter-spacing:-.025em}
.fd-empty{color:var(--muted);font-size:15px}

/* One hairline between posts. No box, no card, no second border. */
.fd-post{padding:clamp(22px,3.4vw,30px) 0;border-top:1px solid var(--hairline)}
.fd-post:first-of-type{border-top:0;padding-top:0}

.fd-post__head{display:flex;align-items:center;gap:10px;margin-bottom:13px}
.fd-avatar{width:36px;height:36px;flex:none;border-radius:50%;background:var(--ink);
  color:var(--paper);display:grid;place-items:center;
  font-family:var(--f-mark);font-weight:700;font-size:11px;letter-spacing:.06em}
.fd-avatar--sm{width:28px;height:28px;font-size:10px}
.fd-post__who{display:block;font-weight:600;font-size:14px;line-height:1.3}
.fd-post__when{display:block;font-size:12.5px;color:var(--muted);line-height:1.3}
.fd-post__when:hover{color:var(--ink)}

.fd-post__body{font-size:16px;line-height:1.65;margin-bottom:14px;overflow-wrap:anywhere}

/* Cut to a count of lines rather than of characters. The character count in
   render.php decides which posts are long enough to bother cutting; lines are
   what actually make two cut posts the same height, because the same number of
   characters wraps to different depths. feed.js adds the class, so without it
   every post is whole and there is no link promising to open one. */
.fd-post__body.is-clipped{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;
  overflow:hidden;
}
.fd-readmore{
  display:block;width:fit-content;margin:0 0 14px auto;padding:0;border:0;
  background:none;cursor:pointer;font-family:var(--f-mark);font-weight:600;
  font-size:var(--micro);letter-spacing:var(--track);text-transform:uppercase;
  color:var(--ink);transition:opacity .2s}
.fd-readmore:hover,.fd-readmore:focus-visible{text-decoration:underline;text-underline-offset:3px}
.fd-post__body a{text-decoration:underline;text-underline-offset:2px}

.fd-media{display:grid;gap:3px;margin-bottom:14px}
.fd-media--2,.fd-media--4{grid-template-columns:1fr 1fr}
.fd-media--3{grid-template-columns:1fr 1fr}
.fd-media--3 .fd-media__item:first-child{grid-column:1 / -1}
.fd-media__item{display:block;overflow:hidden;background:rgba(var(--ink-rgb),.05)}
.fd-media__item img{display:block;width:100%;object-fit:cover;aspect-ratio:4/3}
.fd-media--1 .fd-media__item img{aspect-ratio:auto;height:auto}

/* The one place a border earns itself: a link card has to read as a separate
   object belonging to somebody else's site. */
.fd-link{display:block;border:1px solid var(--hairline);margin-bottom:14px;overflow:hidden}
.fd-link:hover{border-color:rgba(var(--ink-rgb),.35)}
.fd-link__img{width:100%;height:auto;max-height:260px;object-fit:cover;display:block}
.fd-link__text{padding:12px 14px;display:block}
.fd-link__site{display:block;font-family:var(--f-mark);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.fd-link__title{display:block;font-weight:600;font-size:14.5px;line-height:1.4}
.fd-link__desc{display:block;margin-top:4px;font-size:13px;line-height:1.55;color:var(--muted)}

/* Actions sit under the post as plain text buttons, not a bordered toolbar. */
.fd-actions{display:flex;align-items:center;gap:20px}
.fd-react{display:inline-flex;align-items:center;gap:6px;padding:0;border:0;background:none;
  cursor:pointer;font-family:var(--ui);font-size:13.5px;color:var(--muted);
  transition:color .2s}
.fd-react svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;transition:fill .2s}
.fd-react:hover{color:var(--ink)}
.fd-react[aria-pressed="true"]{color:var(--ink);font-weight:600}
.fd-react[aria-pressed="true"] svg{fill:currentColor}
.fd-comments{margin-left:auto;font-size:13.5px;color:var(--muted)}
.fd-comments:hover{color:var(--ink)}

.fd-thread{margin-top:clamp(26px,4vw,38px);padding-top:clamp(22px,3vw,30px);
  border-top:1px solid var(--hairline)}
.fd-thread__title{margin:0 0 18px;font-size:14px;font-weight:600}
.fd-comment{display:flex;gap:10px;margin-bottom:18px}
.fd-comment__who{margin:0 0 3px;font-size:13.5px}
.fd-comment__who span{color:var(--muted);margin-left:8px;font-size:12.5px;font-weight:400}
.fd-comment__body{margin:0;font-size:14.5px;line-height:1.6;overflow-wrap:anywhere}

.fd-form{margin-top:22px}
.fd-form__row{display:grid;grid-template-columns:1fr;gap:8px;margin-bottom:8px}
@media (min-width:520px){.fd-form__row{grid-template-columns:1fr 1fr}}
.fd-input{width:100%;padding:10px 12px;border:1px solid var(--hairline);border-radius:0;
  background:var(--paper);font-family:var(--ui);font-size:15px;color:var(--ink);
  transition:border-color .2s}
.fd-input:focus{outline:none;border-color:var(--ink)}
textarea.fd-input{resize:vertical;min-height:78px;line-height:1.55;margin-bottom:10px}
.fd-submit{padding:10px 22px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);
  cursor:pointer;font-family:var(--f-mark);font-weight:600;font-size:var(--micro);
  letter-spacing:var(--track);text-transform:uppercase;transition:background .25s,color .25s}
.fd-submit:hover{background:transparent;color:var(--ink)}
.fd-note{margin:10px 0 0;font-size:12.5px;color:var(--muted)}
.fd-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* The pager holds the Load more button, and the plain links that stand in for
   it without JavaScript. Centred, because it closes the column. */
.fd-pager{display:flex;flex-direction:column;align-items:center;gap:14px;
  margin-top:34px;padding-top:26px;border-top:1px solid var(--hairline);
  font-family:var(--f-mark);font-size:var(--micro);
  letter-spacing:var(--track);text-transform:uppercase}
.fd-pager a{color:var(--muted)}
.fd-pager a:hover{color:var(--ink)}
.fd-more{display:inline-block;padding:1.05em 2.6em;border:1px solid var(--ink);
  border-radius:2px;background:none;cursor:pointer;
  font-family:var(--f-mark);font-weight:700;font-size:var(--micro);
  letter-spacing:var(--track);text-transform:uppercase;color:var(--ink);
  transition:background .3s ease,color .3s ease}
.fd-more:hover,.fd-more:focus-visible{background:var(--ink);color:var(--paper)}
.fd-more:disabled{opacity:.5;cursor:default}
.fd-pager__end{margin:0;color:var(--muted);text-transform:none;letter-spacing:0;
  font-family:var(--ui);font-size:14px}
.fd-list>.fd-post:focus{outline:none}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media (prefers-reduced-motion:reduce){.fd-react,.fd-link,.fd-submit{transition-duration:.01ms}}