/* THE OPEN — dau.css
   DẤU: the reading archive of WordPress posts, post listings and single articles
   (DAU-ARCHIVE-010). Loaded after wordpress.css on those views only (inc/enqueue.php).

   Prototype tokens and components only. Black field, white text; red is kept for the section
   label, cluster names, the active filter and link underlines. No cards: hairlines and space. */

/* =========================================================
   Section: heading, filter, count
   ========================================================= */
.dau {
  scroll-margin-top: var(--header-h);
  padding-bottom: var(--s-16);
}

.dau-page {
  padding-top: calc(var(--header-h) + var(--s-12));
  padding-bottom: var(--s-8);
}

.dau__label { grid-column: 1 / -1; }

.dau__title {
  grid-column: 1 / span 8;
  margin-top: var(--s-6);
}

.dau__lead {
  grid-column: 1 / span 6;
  margin-top: var(--s-8);
  color: var(--fg-2);
  max-width: 36ch;
}

.dau__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-4) var(--s-8);
  margin-top: var(--s-16);
  padding-bottom: var(--s-4);
}

.dau__filter .filters { gap: 0 var(--s-8); }

.dau__filter .filter { text-transform: uppercase; }

/* The prototype styles a pressed filter button; DẤU filters are links to their own URL. */
.dau__filter .filter[aria-current="page"] {
  color: var(--signal-on-dark);
  background-size: 100% 1px;
}

.dau__count {
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--fg-3);
  padding-bottom: var(--s-3);
}

.dau__empty { margin-top: var(--s-4); }

/* =========================================================
   Shared article bits: cue (clusters · focus keyword), meta, title link
   ========================================================= */
.dau-cue {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--s-2);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: var(--track-meta);
  line-height: 1.6;
  text-transform: uppercase;
}

.dau-cue__cluster { color: var(--signal-on-dark); }

a.dau-cue__cluster:hover { color: var(--fg); }

.dau-cue__sep { color: var(--fg-3); }

/* The focus keyword, only when it adds something to the title (inc/dau.php). */
.dau-cue__keyword {
  color: var(--fg-3);
  text-transform: none;
  letter-spacing: 0.02em;
  font-weight: 400;
}

.dau-cue__cluster + .dau-cue__keyword::before {
  content: "— ";
  color: var(--fg-3);
}

.dau-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--s-2);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--fg-3);
}

.dau-item__title {
  font-family: var(--font-display);
  font-weight: 350;
  font-size: var(--fs-h3);
  line-height: 1.2;
  letter-spacing: var(--track-caps);
  text-wrap: balance;
}

/* One link per article: the title link covers the whole item. */
.dau-item__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}

.dau-item__title a {
  background-image: linear-gradient(var(--signal-on-dark), var(--signal-on-dark));
  background-size: 0 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--dur-reveal) var(--ease-quiet);
}

.dau-lead:hover .dau-item__title a,
.dau-item:hover .dau-item__title a,
.dau-item__title a:focus-visible {
  background-size: 100% 1px;
}

.dau-item__title a:focus-visible { outline-offset: 6px; }

.dau-item__desc {
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--fg-2);
  max-width: 62ch;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dau-item__text {
  display: grid;
  gap: var(--s-3);
  align-content: center;
}

.dau-item__media {
  aspect-ratio: 3 / 2;
  border: 1px solid var(--line);
}

.dau-item__media img {
  transition: filter var(--dur-reveal) var(--ease-quiet), transform var(--dur-reveal) var(--ease-quiet);
}

.dau-lead:hover .dau-item__media img,
.dau-item:hover .dau-item__media img {
  filter: saturate(0.9) contrast(1.08) brightness(1.02);
  transform: scale(1.02);
}

/* =========================================================
   Lead article (page 1): image left, text right
   ========================================================= */
.dau-lead {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: end;
  padding-block: var(--s-10) var(--s-12);
  border-top: 1px solid var(--line);
}

.dau-lead .dau-item__media {
  grid-column: 1 / span 7;
  grid-row: 1;
  aspect-ratio: 16 / 10;
}

.dau-lead .dau-item__text {
  grid-column: 8 / span 5;
  grid-row: 1;
  align-content: end;
  gap: var(--s-4);
}

.dau-lead .dau-item__title { font-size: var(--fs-h2); line-height: 1.12; }

.dau-lead .dau-item__desc {
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  line-height: 1.45;
  font-weight: 350;
  -webkit-line-clamp: 4;
}

.dau-lead__go {
  margin-top: var(--s-4);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: var(--track-meta);
  color: var(--signal-on-dark);
}

.dau-lead:hover .arrow { transform: translateX(4px); }

.dau-lead.is-textonly .dau-item__text { grid-column: 1 / span 8; }

/* =========================================================
   Rows: text left, image right, hairline between
   ========================================================= */
.dau-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.dau-list > li { border-bottom: 1px solid var(--line); }

.dau-item {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: center;
  padding-block: var(--s-8);
}

.dau-item .dau-item__text { grid-column: 1 / span 7; grid-row: 1; }

.dau-item .dau-item__media { grid-column: 9 / span 4; grid-row: 1; }

.dau-item.is-textonly .dau-item__text { grid-column: 1 / span 9; }

/* Read-next rows on an article: a little smaller */
.dau-item--next { padding-block: var(--s-6); }
.dau-item--next .dau-item__desc { -webkit-line-clamp: 2; }
.dau-item--next .dau-item__media { grid-column: 10 / span 3; }

/* =========================================================
   Older / newer
   ========================================================= */
.dau-pager {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s-4);
  margin-top: var(--s-12);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: var(--track-meta);
}

.dau-pager a {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--touch);
  color: var(--signal-on-dark);
}

.dau-pager a:hover { color: var(--fg); }
.dau-pager a:hover .arrow { transform: none; }
.dau-pager__newer { grid-column: 1; justify-self: start; }
.dau-pager__pos { grid-column: 2; color: var(--fg-3); }
.dau-pager__older { grid-column: 3; justify-self: end; }

/* DẤU page: articles, then the prototype's source archive (space, no second hairline) */
.page-archive .dau { padding-bottom: var(--s-24); }

/* =========================================================
   Single article
   ========================================================= */
.article-view {
  padding-top: calc(var(--header-h) + var(--s-12));
}

.article__col {
  max-width: 44rem;
  margin-inline: auto;
}

.article__head .article__col {
  display: grid;
  gap: var(--s-5);
}

.article__back a {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--touch);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: var(--track-meta);
  color: var(--fg-3);
  transition: color var(--dur-hover) var(--ease-quiet);
}

.article__back a:hover { color: var(--fg); }
.article__back a:hover .arrow { transform: translateX(-4px); }

.article__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-h1);
  line-height: 1.1;
  text-wrap: balance;
}

.article__dek {
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-weight: 350;
  line-height: 1.45;
  color: var(--fg-2);
}

.article__media {
  margin-top: var(--s-12);
}

.article__frame {
  max-width: 1120px;
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
}

.article__caption {
  max-width: 1120px;
  margin: var(--s-3) auto 0;
  font-size: var(--fs-small);
  color: var(--fg-3);
}

.article__body { margin-top: var(--s-16); }

/* Editor content: reading serif for text, display serif for section heads */
.article__content {
  font-family: "TO Serif", "Newsreader", Georgia, "Times New Roman", serif;
  font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem);
  line-height: 1.72;
  font-weight: 400;
  color: rgba(247, 243, 238, 0.88);
}

.article__content > * + * { margin-top: 1.1em; }

.article__content h2 {
  margin-top: 2.6em;
  font-family: var(--font-display);
  font-weight: 350;
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
  line-height: 1.15;
  color: var(--fg);
  text-wrap: balance;
}

/* A short red rule above each section: the prototype's reading-unit accent */
.article__content h2::before {
  content: "";
  display: block;
  width: 48px;
  height: 1px;
  margin-bottom: var(--s-6);
  background: var(--signal);
}

.article__content h3 {
  margin-top: 2em;
  font-family: "TO Serif", "Newsreader", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.2em;
  line-height: 1.4;
  color: var(--fg);
}

.article__content h4,
.article__content h5,
.article__content h6 {
  margin-top: 1.8em;
  font-family: var(--font-sans);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--fg-2);
}

.article__content h2 + *,
.article__content h3 + *,
.article__content h4 + * { margin-top: 0.8em; }

.article__content strong,
.article__content b {
  font-weight: 600;
  color: var(--fg);
}

.article__content em,
.article__content i { font-style: italic; }

.article__content a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--signal-on-dark);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color var(--dur-hover) var(--ease-quiet);
}

.article__content a:hover { color: var(--signal-on-dark); }

/* Inline `code` in the published articles marks THE OPEN names (DẤU, GIỮ, /hom-nay/): set as
   quiet small capitals rather than a code box. */
.article__content code {
  font-family: var(--font-sans);
  font-size: 0.78em;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--fg);
  background: none;
  border: 0;
  padding: 0;
}

.article__content ul,
.article__content ol {
  margin-left: 0;
  padding-left: 0;
}

.article__content ul { list-style: none; }

.article__content ul > li {
  position: relative;
  padding-left: 1.5em;
}

.article__content ul > li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--fg-3);
}

.article__content ol { padding-left: 1.5em; list-style: decimal; }
.article__content ol > li::marker { color: var(--fg-3); font-family: var(--font-sans); font-size: 0.85em; }

.article__content li + li { margin-top: 0.5em; }

.article__content blockquote {
  padding-left: 1.2em;
  border-left: 1px solid var(--signal);
  font-style: italic;
  color: var(--fg-2);
}

.article__content hr {
  border: 0;
  height: 1px;
  background: var(--line);
  margin-block: 2.5em;
}

.article__content img,
.article__content video,
.article__content iframe {
  max-width: 100%;
  height: auto;
}

.article__content figure { margin-inline: 0; }

.article__content figcaption,
.article__content .wp-caption-text {
  margin-top: var(--s-3);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  color: var(--fg-3);
}

.article__content table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
}

.article__content th,
.article__content td {
  padding: var(--s-3) var(--s-2);
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.article__pages { margin-top: var(--s-10); display: flex; gap: var(--s-4); }

.article__foot { margin-top: var(--s-16); }

.article__foot .article__col {
  display: grid;
  gap: var(--s-4);
  padding-top: var(--s-8);
  border-top: 1px solid var(--line);
}

.article__in {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--s-2);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--fg-3);
}

.article__in a { color: var(--signal-on-dark); }
.article__in a:hover { color: var(--fg); }

.article__next {
  margin-top: var(--s-20);
  padding-bottom: var(--s-16);
}

.article__next-label {
  display: flex;
  margin-bottom: var(--s-6);
  color: var(--signal-on-dark);
}

/* Header and menu: DẤU stays marked on an article or a post listing (aria-current="true"). */
.nav-primary a[aria-current="true"] {
  color: var(--signal-on-dark);
  background-size: 100% 1px;
}

a.menu__item[aria-current="true"] .menu__num { color: var(--fg); }

/* =========================================================
   Tablet
   ========================================================= */
@media (max-width: 1023px) {
  .dau__title { grid-column: 1 / -1; }
  .dau__lead { grid-column: 1 / span 6; }

  .dau-lead .dau-item__media { grid-column: 1 / -1; grid-row: 1; }
  .dau-lead .dau-item__text { grid-column: 1 / span 7; grid-row: 2; margin-top: var(--s-6); }

  .dau-item .dau-item__text { grid-column: 1 / span 5; }
  .dau-item .dau-item__media { grid-column: 6 / span 3; }
  .dau-item--next .dau-item__media { grid-column: 6 / span 3; }
}

/* =========================================================
   Mobile: one clean vertical reading list
   ========================================================= */
@media (max-width: 699px) {
  .dau__bar { margin-top: var(--s-10); }
  /* Six 48px touch targets fit one line at 390px with small gaps; centred labels keep the
     visible spacing even. */
  .dau__filter .filters { gap: 0 var(--s-2); }
  .dau__filter .filter { justify-content: center; }

  .dau-lead,
  .dau-item {
    padding-block: var(--s-8);
  }

  .dau-lead .dau-item__media,
  .dau-item .dau-item__media,
  .dau-item--next .dau-item__media {
    grid-column: 1 / -1;
    grid-row: 1;
    aspect-ratio: 16 / 10;
    margin-bottom: var(--s-5);
  }

  .dau-lead .dau-item__text,
  .dau-item .dau-item__text,
  .dau-item.is-textonly .dau-item__text,
  .dau-lead.is-textonly .dau-item__text {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 0;
  }

  .dau-lead .dau-item__desc { font-size: 1.1875rem; }

  .dau-pager { grid-template-columns: 1fr 1fr; }
  .dau-pager__pos { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
  .dau-pager__newer { grid-column: 1; grid-row: 1; }
  .dau-pager__older { grid-column: 2; grid-row: 1; }

  .article-view { padding-top: calc(var(--header-h) + var(--s-8)); }
  .article__media { margin-top: var(--s-8); }
  .article__body { margin-top: var(--s-10); }
  .article__next { padding-bottom: calc(var(--s-12) + var(--bar-h)); }
  .dau { padding-bottom: calc(var(--s-12)); }
}