/* ============================================================================
   The Daily Next — PUBLIC PAGES (/watch, /brand, /edition, /editions, /microbrands)
   Consumes v2 tokens + base + components. Only layout that is specific to the
   logged-out surfaces lives here; no raw colours, no raw pixels.
   ========================================================================== */

.pub { display: flex; flex-direction: column; min-height: 100vh; }
.pub-main { flex: 1; padding-block: var(--s-6) 0; }
.pub-main > .dn-page:last-child { padding-bottom: var(--rhythm-section); }
@media (max-width: 600px) { .pub-main { padding-block: var(--s-4) 0; } }

/* ── Masthead ───────────────────────────────────────────────────────── */
.pub-masthead .dn-masthead__in { gap: var(--s-4); }
.pub-nav { flex: 1; }
.pub-account { display: flex; gap: var(--s-2); margin-left: auto; flex: 0 0 auto; }
@media (max-width: 720px) {
  .pub-nav { display: none; }
  .pub-account .pub-signin { display: none; }
}
.dn-nav__link.is-active { color: var(--ink); }

/* ── Breadcrumbs / shared ───────────────────────────────────────────── */
.pub-crumbs { display: flex; gap: var(--s-2); color: var(--ink-3); margin-bottom: var(--s-5); }
.pub-crumbs a:hover { color: var(--accent); }
.pub-dot { color: var(--ink-4); }
.dn-sechead { display: flex; align-items: center; gap: var(--s-4); margin-bottom: var(--s-5); }
.dn-sechead__rule { flex: 1; height: 1px; background: var(--rule); }

/* ── Watch page ─────────────────────────────────────────────────────── */
.pub-watch__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--s-8);
  align-items: start;
  margin-bottom: var(--rhythm-section);
}
@media (max-width: 860px) { .pub-watch__grid { grid-template-columns: 1fr; gap: var(--s-6); } }
.pub-hero { aspect-ratio: 1 / 1; border-radius: var(--r-lg); position: sticky; top: calc(var(--masthead-h) + var(--s-4)); }
.pub-hero > img { padding: var(--s-7); }
@media (max-width: 860px) { .pub-hero { position: static; } .pub-hero > img { padding: var(--s-5); } }
.pub-watch__info { display: flex; flex-direction: column; gap: var(--s-3); }
.pub-brandlink { text-decoration: none; }
.pub-brandlink:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.pub-watch__title { margin: 0; overflow-wrap: anywhere; }
.pub-watch__alt { color: var(--ink-3); margin: 0; }
.pub-watch__price {
  font-size: var(--t-h3-size);
  font-weight: 550;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  margin: var(--s-1) 0 0;
}
.pub-watch__specline { margin: 0; }
.pub-buy { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.pub-cta__host { color: var(--ink-4); }
.pub-watch__desc { margin-top: var(--s-2); max-width: var(--measure); }
.pub-featured { margin: 0; }
.pub-tags { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-1); }

/* The gated actions */
.pub-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-2); }
.pub-act { gap: var(--s-2); }
.pub-act[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: var(--accent-wash); }
.pub-act[aria-pressed="true"] svg { fill: currentColor; }
.pub-act[disabled] { opacity: 0.5; cursor: wait; }
.pub-actions__hint { flex-basis: 100%; color: var(--ink-3); }
.pub-actions__hint a { color: var(--accent); text-decoration: underline; text-underline-offset: 0.15em; }

/* Specs */
.pub-specs { margin-bottom: var(--rhythm-section); }
.pub-specs__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s-6) var(--s-7); }
.pub-cluster__label { margin-bottom: var(--s-2); }
.dn-spec-table > dt, .dn-spec-table > dd { padding-block: var(--s-2); border-top: 1px solid var(--rule); font-size: var(--t-body-size); }
.dn-spec-table > dt { color: var(--ink-3); }
.dn-spec-table > dd { margin: 0; color: var(--ink); }

/* About the brand */
.pub-about { margin-bottom: var(--rhythm-section); }
.pub-about__grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr); gap: var(--s-7); align-items: start; }
@media (max-width: 720px) { .pub-about__grid { grid-template-columns: 1fr; gap: var(--s-4); } }
.pub-about__aside { display: flex; flex-direction: column; gap: var(--s-3); align-items: flex-start; }
.pub-more { margin-bottom: var(--rhythm-block); }

/* ── Cards ──────────────────────────────────────────────────────────── */
.pub-card { position: relative; }
.pub-card__num {
  position: absolute; z-index: 1; top: var(--s-2); left: var(--s-2);
  font-family: var(--font-display); font-size: var(--t-meta-size); color: var(--ink-3);
}
.dn-watch-card__brand { font-size: var(--t-eyebrow-size); letter-spacing: var(--t-eyebrow-track); text-transform: uppercase; font-weight: 600; }

/* ── Brand page ─────────────────────────────────────────────────────── */
.pub-brand__head { display: flex; flex-direction: column; gap: var(--s-3); align-items: flex-start; margin-bottom: var(--s-7); }
.pub-brand__name { margin: 0; overflow-wrap: anywhere; }
.pub-brand__meta { margin: 0; }
.pub-brand__story { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--s-8); margin-bottom: var(--rhythm-section); align-items: start; }
@media (max-width: 860px) { .pub-brand__story { grid-template-columns: 1fr; gap: var(--s-5); } }
.pub-brand__story .dn-prose--serif { max-width: var(--measure-serif); }
.pub-brand__tradeoffs { padding: var(--s-5); border: 1px solid var(--rule); border-radius: var(--r); background: var(--surface); }
.pub-brand__tradeoffs .dn-eyebrow { margin-bottom: var(--s-2); }

/* ── Directory ──────────────────────────────────────────────────────── */
.pub-dir__head { margin-bottom: var(--s-8); display: flex; flex-direction: column; gap: var(--s-3); }
.pub-dir__head .dn-lede { max-width: var(--measure); }
.pub-dir__letters { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-top: var(--s-2); }
.pub-dir__letters a {
  display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding-inline: var(--s-2);
  border-radius: var(--r-sm); border: 1px solid var(--rule); font-size: var(--t-meta-size); color: var(--ink-2);
}
.pub-dir__letters a:hover { border-color: var(--accent); color: var(--accent); }
.pub-dir__group { display: grid; grid-template-columns: 80px 1fr; gap: var(--s-5); padding-block: var(--s-6); border-top: 1px solid var(--rule); scroll-margin-top: calc(var(--masthead-h) + var(--s-4)); }
@media (max-width: 600px) { .pub-dir__group { grid-template-columns: 1fr; gap: var(--s-2); } }
.pub-dir__letter { font-family: var(--font-display); font-size: var(--t-h1-size); font-weight: 400; line-height: 1; color: var(--accent); margin: 0; }
.pub-dir__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s-1) var(--s-5); }
.pub-dir__row { display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: var(--s-3); align-items: center; padding: var(--s-2) var(--s-2); border-radius: var(--r-sm); }
.pub-dir__row:hover { background: var(--accent-wash); }
.pub-dir__thumb { grid-row: 1 / span 2; width: 44px; }
.pub-dir__thumb > img { padding: 3px; }
.pub-dir__name { font-weight: 550; }
.pub-dir__meta { color: var(--ink-3); }

/* ── Edition ────────────────────────────────────────────────────────── */
.pub-edition__head { display: flex; flex-direction: column; gap: var(--s-3); margin-bottom: var(--rhythm-section); }
.pub-edition__head .dn-lede { max-width: var(--measure); }
.pub-edition__tools { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-2); }
.pub-edition__picks { display: flex; flex-direction: column; gap: var(--rhythm-section); }
.pub-pick { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-6); align-items: start; }
@media (max-width: 720px) { .pub-pick { grid-template-columns: 1fr; gap: var(--s-4); } }
.pub-pick__num {
  position: absolute; top: -0.35em; left: -0.1em; z-index: 1;
  font-family: var(--font-display); font-size: var(--t-h1-size); line-height: 1; color: var(--accent); opacity: 0.9;
}
.pub-pick__photo .dn-img { aspect-ratio: 1 / 1; border-radius: var(--r-lg); }
.pub-pick__photo .dn-img > img { padding: var(--s-5); }
.pub-pick__body { display: flex; flex-direction: column; gap: var(--s-2); padding-top: var(--s-3); }
.pub-pick__title { margin: 0; overflow-wrap: anywhere; }
.pub-pick__title a:hover { color: var(--accent); }
.pub-pick__price { margin: 0; font-weight: 550; font-variant-numeric: tabular-nums; }
.pub-pick__desc { margin: var(--s-1) 0 0; color: var(--ink-2); max-width: var(--measure); }
.pub-pick__links { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.pub-edition__nav { display: flex; justify-content: space-between; margin-top: var(--rhythm-section); padding-top: var(--s-5); border-top: 1px solid var(--rule); }

/* ── Archive index ──────────────────────────────────────────────────── */
.pub-archive__head { margin-bottom: var(--s-8); display: flex; flex-direction: column; gap: var(--s-3); }
.pub-archive__month { padding-block: var(--s-5); border-top: 1px solid var(--rule); }
.pub-archive__month > h2 { margin: 0 0 var(--s-3); }
.pub-archive__list { display: flex; flex-direction: column; }
.pub-archive__row { display: grid; grid-template-columns: 170px auto 1fr; gap: var(--s-5); align-items: center; padding: var(--s-3) var(--s-2); border-radius: var(--r-sm); }
.pub-archive__row:hover { background: var(--accent-wash); }
@media (max-width: 720px) { .pub-archive__row { grid-template-columns: 1fr; gap: var(--s-2); } }
.pub-archive__date { font-family: var(--font-display); font-size: var(--t-h3-size); }
.pub-archive__strip { display: flex; gap: var(--s-1); }
.pub-archive__strip .dn-img { width: 48px; border-radius: var(--r-sm); }
.pub-archive__strip .dn-img > img { padding: 3px; }
.pub-archive__names { color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Subscribe band ─────────────────────────────────────────────────── */
.pub-band { margin-top: var(--rhythm-section); background: var(--paper-2); border-block: 1px solid var(--rule); }
.pub-band__in { display: flex; justify-content: space-between; align-items: center; gap: var(--s-6); padding-block: var(--s-7); flex-wrap: wrap; }
.pub-band__in .dn-h3 { margin: var(--s-1) 0; }
.pub-band__in .dn-meta { margin: 0; max-width: var(--measure); }
.pub-band .dn-btn { gap: var(--s-2); }

/* ── Footer ─────────────────────────────────────────────────────────── */
.pub-footer { border-top: 1px solid var(--rule); background: var(--paper); }
.pub-footer__in { display: flex; justify-content: space-between; gap: var(--s-6); padding-block: var(--s-7); flex-wrap: wrap; }
.pub-footer__brand { max-width: 420px; display: flex; flex-direction: column; gap: var(--s-2); }
.pub-footer__brand .dn-meta { margin: 0; color: var(--ink-3); }
.pub-footer__links { display: flex; flex-direction: column; gap: var(--s-2); font-size: var(--t-ui-size); color: var(--ink-2); }
.pub-footer__links a:hover { color: var(--accent); }

/* ── 404 ────────────────────────────────────────────────────────────── */
.pub-404 { display: flex; flex-direction: column; gap: var(--s-4); align-items: flex-start; padding-block: var(--s-8); }
.pub-404 p { margin: 0; display: flex; gap: var(--s-2); flex-wrap: wrap; }

/* ── Toast ──────────────────────────────────────────────────────────── */
.pub-toast {
  position: fixed; left: 50%; bottom: var(--s-6); transform: translateX(-50%);
  padding: var(--s-3) var(--s-5); border-radius: var(--r-pill); background: var(--ink); color: var(--paper);
  font-size: var(--t-ui-size); box-shadow: var(--lift-2); z-index: 100; opacity: 0; transition: opacity var(--d-base) var(--e-out);
}
.pub-toast.is-on { opacity: 1; }