/* Posts: articles, visual lists, /articles, legal pages. Loaded with $meta['css'] = ['post'].
   The body is clean_html() output styled by .prose in site.css; this file is the frame. */

/* ------------------------------------------------------------------ header */

.post-head { padding-block: var(--s-6) calc(var(--s-8) + 2rem); border-bottom: 1px solid var(--line); }
.post-head__inner { display: grid; gap: var(--s-4); justify-items: start; }
.post-head__tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.post-head__title { font-size: var(--step-4); text-wrap: balance; }
.post-head__sub { max-width: 58ch; }
.post--visual .post-head { padding-bottom: var(--s-7); }
.page-post:not(:has(.post-hero)) .post-head { padding-bottom: var(--s-7); }

.byline { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-2); }
.byline__faces { display: flex; }
.byline__face {
  width: 44px; height: 44px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--paper); box-shadow: var(--shadow-s); background: var(--paper-alt);
}
.byline__face + .byline__face { margin-left: -12px; }
.byline__face--mono {
  display: grid; place-items: center;
  font: 700 1.1rem/1 var(--font-display); color: #fff; background: var(--harbour);
}
.byline__text { display: grid; line-height: 1.35; font-size: var(--step--1); color: var(--muted); }
.byline__text span { color: var(--ink); font-weight: 600; }
.byline__text a { color: var(--ink); text-decoration-color: var(--amber); text-decoration-thickness: 2px; }
.byline__text a:hover { color: var(--cyan-ink); }

/* ------------------------------------------------------------------ hero */

.post-hero { margin-top: calc(-1 * (var(--s-8) + 1rem)); margin-bottom: var(--s-6); position: relative; }
.post-hero__img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--radius-l); background: var(--navy-700); box-shadow: var(--shadow-l);
}
@media (min-width: 60rem) { .post-hero__img { aspect-ratio: 21 / 9; } }
.post-hero figcaption { margin-top: var(--s-2); font-size: var(--step--1); color: var(--muted); max-width: 70ch; }

/* ------------------------------------------------------------------ layout */

.post-layout { display: grid; gap: var(--s-7); padding-bottom: var(--s-8); }
.post-main { min-width: 0; display: grid; gap: var(--s-6); align-content: start; }
.post-main > .prose { margin-inline: 0; }
@media (min-width: 60rem) {
  .post-layout { grid-template-columns: minmax(0, 1fr) 18rem; align-items: start; column-gap: var(--s-8); }
  .post-aside { position: sticky; top: var(--s-5); }
}
.page-post .post-layout:not(:has(.post-hero)) { padding-top: var(--s-6); }
.post-body { overflow-wrap: anywhere; }
.post-body img { height: auto; }

.post-notice {
  padding: var(--s-3) var(--s-4); border-radius: var(--radius-m);
  background: var(--sand); border: 1px solid #f1dcc0; border-left: 4px solid var(--amber);
  font-size: var(--step--1); color: var(--ink-2); max-width: var(--measure);
}
.post-notice--deal { background: #fff1e6; }
.post--visual .post-notice { margin-block: var(--s-6) 0; }

/* the sidebar card: a boarding pass */
.plan-card {
  position: relative; display: grid; gap: var(--s-3);
  padding: var(--s-5); border-radius: var(--radius-l);
  color: var(--on-dark); background:
    radial-gradient(120% 90% at 100% 0%, rgba(249, 129, 47, 0.28), transparent 60%),
    linear-gradient(160deg, var(--navy-800), var(--navy-700));
  box-shadow: var(--shadow-m);
}
.plan-card::after {
  content: ""; position: absolute; left: var(--s-5); right: var(--s-5); bottom: 4.4rem;
  border-top: 2px dashed rgba(255, 255, 255, 0.16);
}
.plan-card .eyebrow { color: var(--amber-soft); }
.plan-card__title { font: 700 var(--step-2)/1.15 var(--font-display); color: #fff; }
.plan-card .small { color: var(--on-dark-muted); padding-bottom: var(--s-4); }

/* ------------------------------------------------------------------ editorial blocks */

.ed { display: grid; gap: var(--s-4); }
.ed__head {
  display: flex; align-items: center; gap: var(--s-3);
  font-size: var(--step-2);
}
.ed__head::after { content: ""; flex: 1; height: 0; border-top: 2px dotted var(--line-strong); }
.ed--snapshot {
  padding: var(--s-5); border-radius: var(--radius-l);
  background: var(--paper-alt); border: 1px solid var(--line);
}
.ed-top { list-style: none; padding: 0; display: grid; gap: var(--s-3); counter-reset: top; max-width: var(--measure); }
.ed-top li {
  counter-increment: top; position: relative; padding-left: 3rem; min-height: 2.2rem;
}
.ed-top li::before {
  content: counter(top); position: absolute; left: 0; top: -0.1rem;
  display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%;
  font: 700 1rem/1 var(--font-display); color: var(--navy-950); background: var(--amber-soft);
}
.ed-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
.ed-grid .card__title { font-size: var(--step-0); }

.post-about { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.post-about__label { font-size: var(--step--2); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-right: var(--s-2); }
.chip {
  display: inline-flex; align-items: center; padding: 0.35em 0.85em; border-radius: var(--radius-pill);
  font-size: var(--step--1); font-weight: 600; text-decoration: none;
  color: var(--harbour); background: var(--paper); border: 1px solid var(--line-strong);
  transition: border-color 0.18s var(--ease), color 0.18s var(--ease);
}
.chip:hover { color: var(--cyan-ink); border-color: var(--cyan); }

/* ------------------------------------------------------------------ visual list: the reel */

.reel { list-style: none; padding: 0; margin-block: var(--s-6); display: grid; gap: var(--s-6) var(--s-5); counter-reset: reel; }
@media (min-width: 60rem) {
  .reel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reel__item:nth-child(3n + 1) { grid-column: 1 / -1; }
  .reel__item:nth-child(3n + 1) img { aspect-ratio: 16 / 9; }
}
.reel__item figure { display: grid; gap: var(--s-3); }
.reel__item img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius-l); background: var(--paper-alt); box-shadow: var(--shadow-m);
}
.reel__item figcaption { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); align-items: baseline; }
.reel__num {
  font: 800 var(--step-3)/0.9 var(--font-display); font-variation-settings: "opsz" 144;
  color: transparent; -webkit-text-stroke: 1.5px var(--amber);
}
.reel__text { color: var(--ink-2); max-width: 62ch; }
.reel__credit { display: inline-block; font-size: var(--step--2); color: var(--muted); letter-spacing: 0.02em; }
.post-visual-text { display: grid; gap: var(--s-6); padding-bottom: var(--s-8); }

/* ------------------------------------------------------------------ related + CTA band */

.post-related .grid { align-items: stretch; }
.post-card .card__title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post-card__blank {
  display: block;
  background: linear-gradient(135deg, var(--navy-700), var(--harbour));
}
.post-cta { background:
    radial-gradient(70% 120% at 100% 100%, rgba(32, 168, 236, 0.22), transparent 60%),
    radial-gradient(60% 100% at 0% 0%, rgba(249, 129, 47, 0.2), transparent 55%),
    var(--navy-900); }
.post-cta__inner { display: grid; gap: var(--s-5); align-items: center; }
.post-cta__inner h2 { margin-block: var(--s-2); max-width: 20ch; }
.post-cta__inner p { max-width: 52ch; }
.post-cta__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.post-cta .btn--ghost { color: var(--on-dark); }
@media (min-width: 60rem) {
  .post-cta__inner { grid-template-columns: 1fr auto; }
}
.post + .site-foot, .site-main:has(.post-cta) + .site-foot { margin-top: 0; }

/* ------------------------------------------------------------------ /articles */

.articles { padding-bottom: var(--s-8); display: grid; gap: var(--s-5); }
.articles-head h1 { max-width: 16ch; }
@media (min-width: 60rem) {
  .articles__lead .post-card { display: grid; grid-template-columns: 1.4fr 1fr; }
  .articles__lead .card__media { aspect-ratio: auto; height: 100%; min-height: 20rem; }
  .articles__lead .card__body { align-content: center; padding: var(--s-6); }
  .articles__lead .card__title { font-size: var(--step-3); }
}
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-4); margin-top: var(--s-6); }
.pager__at { font-size: var(--step--1); color: var(--muted); }

/* ------------------------------------------------------------------ legal */

.legal-head { padding-block: var(--s-7) var(--s-6); border-bottom: 1px solid var(--line); }
.legal-head .shell { display: grid; gap: var(--s-3); }
.legal-head h1 { font-size: var(--step-4); }
.legal-switch { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }
.legal-switch a {
  padding: 0.35em 0.9em; border-radius: var(--radius-pill); font-size: var(--step--1); font-weight: 600;
  text-decoration: none; color: var(--ink-2); border: 1px solid var(--line-strong); background: var(--paper);
}
.legal-switch a[aria-current] { color: #fff; background: var(--navy-800); border-color: var(--navy-800); }
.legal-body { padding-block: var(--s-7) var(--s-8); }
.legal-body .prose { font-size: var(--step--1); max-width: none; }
.legal-body .prose :is(h2, h3) { font-size: var(--step-1); padding-top: var(--s-3); border-top: 1px solid var(--line); }
.legal-contact { margin-top: var(--s-7); font-size: var(--step--1); color: var(--muted); }