/* 神島日報 (/story/daily/): a reading page on the island's palette (heart.css variables). */
body.dailypage { overflow: auto; height: auto; background: var(--paper-solid); }
.dtop { position: sticky; top: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center;
  gap: 12px; padding: 12px 18px; background: var(--paper-solid); }
.dtop .title { text-decoration: none; }
.daily { max-width: 760px; margin: 0 auto; padding: 22px 18px 40px; }
.daily h1 { margin: 6px 0 4px; font-family: var(--serif); font-weight: 500; font-size: 26px; letter-spacing: .06em; }
.daily h1 time { font-family: var(--sans); font-size: 14px; color: var(--slate); margin-left: 8px; letter-spacing: .04em; }
.daily .note { margin: 0 0 22px; font-size: 12px; color: var(--slate); }
.daily a { color: var(--harbor); text-underline-offset: 2px; word-break: break-word; }
.lead h2 { margin: 0 0 8px; font-family: var(--serif); font-weight: 500; font-size: 21px; line-height: 1.6; }
.lead .tldr { margin: 0; font-size: 15px; line-height: 1.8; padding-left: 12px;  }
.block { margin-top: 30px; }
.block > h3, .archive h3 { margin: 0 0 10px; font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--slate); font-weight: 600; padding-bottom: 6px; }
.cards { list-style: none; margin: 0; padding: 0; }
.cards li { background: #fbf8f2; padding: 14px 16px; margin: 0 0 10px; }
.cards h4, .theme h4 { margin: 0 0 6px; font-family: var(--serif); font-weight: 500; font-size: 16px; line-height: 1.55; }
.cards p { margin: 0; font-size: 14px; line-height: 1.8; }
.cat { display: inline-block; font-size: 10px; letter-spacing: .12em; border: 1px solid var(--line); padding: 1px 6px;
  margin-bottom: 6px; color: var(--slate); }
.theme { background: #fbf8f2; padding: 14px 16px; margin: 0 0 10px; }
.theme .plain { margin: 0 0 4px; font-size: 14px; line-height: 1.8; }
.theme .pick { margin: 0 0 6px; font-size: 12px; color: var(--slate); }
.theme details { margin: 6px 0; font-size: 13px; line-height: 1.75; }
.theme summary { cursor: pointer; color: var(--harbor); font-size: 12px; }
.theme dl { margin: 8px 0 0; display: grid; grid-template-columns: 5.5em 1fr; gap: 4px 12px; }
.theme dt { color: var(--slate); font-size: 12px; }
.theme dd { margin: 0; }
.theme h5 { margin: 8px 0 2px; font-size: 11px; color: var(--slate); font-weight: 600; letter-spacing: .12em; }
.signals { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.7; }
.secs { display: grid; gap: 18px; }
.sec h4 { margin: 0 0 6px; font-family: var(--serif); font-weight: 500; font-size: 15px; }
.sec > ul { list-style: none; margin: 0; padding: 0; }
.sec > ul > li { padding: 8px 0; }
.sec .t { margin: 0; font-size: 14px; line-height: 1.6; }
.sec time { font-size: 11px; color: var(--slate); margin-left: 6px; }
.pts { margin: 4px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.7; color: #444; }
.media { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.media a { display: block; text-decoration: none; color: var(--ink); background: var(--paper); border: 1px solid var(--line); }
.media img, .media .noimg { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: #ddd; height: auto; }
.media .acct { display: block; padding: 6px 8px 0; font-size: 11px; color: var(--harbor); letter-spacing: .04em; }
.media .cap { display: block; padding: 2px 8px 8px; font-size: 12px; line-height: 1.5; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.added { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.8; }
.empty { color: var(--slate); font-size: 14px; }
.archive { margin-top: 36px; }
.archive ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; }
.archive a[aria-current="page"] { color: var(--ink); font-weight: 600; text-decoration: none; }
.dfoot { max-width: 760px; margin: 0 auto; padding: 0 18px calc(24px + var(--safe-b)); font-size: 11px; color: var(--slate); }
.dfoot p { margin: 4px 0; }
.dfoot .power { letter-spacing: .14em; }
@media (max-width: 720px) {
  .dtop { padding: 10px 12px; flex-wrap: wrap; row-gap: 8px; }
  .daily { padding: 16px 14px 32px; }
  .daily h1 { font-size: 22px; }
  .lead h2 { font-size: 18px; }
  .theme dl { grid-template-columns: 1fr; }
  .theme dt { margin-top: 4px; }
  .media { grid-template-columns: repeat(2, 1fr); }
}