/* Article style comparison pages — preview only. */
.article-preview-page {
  --preview-plum: #332c3e;
  --preview-plum-deep: #2a2432;
  --preview-gold: #f2c94c;
  --preview-gold-ink: #8a6410;
  --preview-cream: #f7f4ef;
  background: var(--paper);
  color: var(--ink);
  font-family: "Source Serif 4", Georgia, serif;
}
.article-preview-page a { color: var(--link); }
.article-preview-page .site-header { font-family: "Source Serif 4", Georgia, serif; }
.article-preview-page .ap-preview-bar {
  background: var(--preview-plum);
  color: #f4eef7;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.article-preview-page .ap-preview-bar__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 10px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.article-preview-page .ap-preview-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .17em;
  color: #d6cfe0;
  white-space: nowrap;
}
.article-preview-page .ap-preview-nav {
  display: flex;
  align-items: center;
  gap: 7px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.article-preview-page .ap-preview-nav::-webkit-scrollbar { display:none; }
.article-preview-page .ap-preview-nav a {
  color: #f4eef7;
  text-decoration: none;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.16);
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
}
.article-preview-page .ap-preview-nav a.is-active {
  background: var(--preview-gold);
  color: #2a2118;
  border-color: var(--preview-gold);
  font-weight: 700;
}
.article-preview-page .ap-shell { max-width: 1440px; margin: 0 auto; padding-left: 40px; padding-right: 40px; }
.article-preview-page .ap-kicker {
  color: var(--gold-ink);
  font-size: 13px;
  letter-spacing: .19em;
  text-transform: uppercase;
  font-weight: 700;
}
.article-preview-page .ap-title {
  font-size: clamp(46px, 5.3vw, 78px);
  line-height: .99;
  letter-spacing: -.035em;
  font-weight: 600;
  margin: 0;
  text-wrap: balance;
}
.article-preview-page .ap-meta {
  display:flex;
  flex-wrap:wrap;
  gap:9px 17px;
  align-items:center;
  font-size:15px;
  color:var(--muted);
}
.article-preview-page .ap-meta span + span::before { content:"·"; margin-right:17px; color:var(--muted); }
.article-preview-page .ap-image-credit {
  font-size: 13px;
  color: var(--muted);
  margin-top: 9px;
}
.article-preview-page .ap-hero-img { display:block; width:100%; height:100%; object-fit:cover; }

/* 01 Masthead */
.article-preview-page .ap-masthead {
  background: var(--preview-plum);
  color:#f7f3f8;
  padding: 68px 0 58px;
}
.article-preview-page .ap-masthead .ap-kicker { color:#ffd968; }
.article-preview-page .ap-masthead .ap-title { max-width: 1120px; }
.article-preview-page .ap-masthead .ap-meta { color:#cdc3d4; margin-top:26px; }
.article-preview-page .ap-masthead .ap-meta span + span::before { color:#92869c; }
.article-preview-page .ap-masthead-image {
  max-width:1440px;
  margin:0 auto;
  padding:0 40px;
  transform:translateY(0);
}
.article-preview-page .ap-masthead-image figure { margin:0; }
.article-preview-page .ap-masthead-image .ap-image-frame { height: min(54vw, 650px); min-height:420px; overflow:hidden; }

/* 02 Photo overlay */
.article-preview-page .ap-overlay {
  position:relative;
  min-height: min(72vh, 760px);
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  isolation:isolate;
}
.article-preview-page .ap-overlay > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.article-preview-page .ap-overlay::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(25,18,31,.08) 0%, rgba(39,29,48,.22) 38%, rgba(39,29,48,.94) 100%);
  z-index:-1;
}
.article-preview-page .ap-overlay__inner { width:100%; padding-top:220px; padding-bottom:54px; }
.article-preview-page .ap-overlay .ap-kicker { color:#ffd968; }
.article-preview-page .ap-overlay .ap-title { color:#fff; max-width:1120px; text-shadow:0 2px 18px rgba(0,0,0,.22); }
.article-preview-page .ap-overlay .ap-meta { color:#ded8e2; margin-top:24px; }
.article-preview-page .ap-overlay .ap-meta span + span::before { color:#b8afbf; }

/* Common article body */
.article-preview-page .ap-content-wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 54px 40px 96px;
  display:grid;
  grid-template-columns:minmax(0, 820px) 310px;
  justify-content:center;
  gap:70px;
  align-items:start;
}
.article-preview-page .ap-article { min-width:0; }
.article-preview-page .ap-article .ap-lede {
  font-size:23px;
  line-height:1.55;
  color:var(--ink-2);
  margin:0 0 38px;
  padding-bottom:34px;
  border-bottom:3px solid var(--preview-plum);
}
.article-preview-page .ap-prose { font-size:19px; line-height:1.78; color:var(--ink-2); }
.article-preview-page .ap-prose > *:first-child { margin-top:0; }
.article-preview-page .ap-prose p { margin:0 0 25px; }
.article-preview-page .ap-prose h2 {
  font-size:clamp(31px,3vw,42px);
  line-height:1.12;
  letter-spacing:-.018em;
  color:var(--ink);
  margin:58px 0 20px;
  scroll-margin-top:120px;
}
.article-preview-page .ap-prose h3 { font-size:27px; line-height:1.2; margin:42px 0 16px; }
.article-preview-page .ap-prose hr { border:0; border-top:1px solid var(--rule); margin:42px 0; }
.article-preview-page .ap-prose ul,
.article-preview-page .ap-prose ol { padding-left:24px; margin:0 0 26px; }
.article-preview-page .ap-prose li { margin:8px 0; }
.article-preview-page .ap-prose a { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.article-preview-page .ap-aside {
  position:sticky;
  top:112px;
  display:flex;
  flex-direction:column;
  gap:22px;
}
.article-preview-page .ap-side-card { border:1px solid var(--rule); padding:22px; background:var(--surface); }
.article-preview-page .ap-side-eyebrow { font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
.article-preview-page .ap-side-card h3 { font-size:24px; line-height:1.13; margin:0 0 10px; }
.article-preview-page .ap-side-card p { font-size:15px; line-height:1.55; margin:0; color:var(--muted); }
.article-preview-page .ap-cta-card { background:var(--preview-plum); color:#f7f3f8; border:0; }
.article-preview-page .ap-cta-card h3 { color:#fff; }
.article-preview-page .ap-cta-card p { color:#d0c8d5; }
.article-preview-page .ap-cta-card a {
  display:block;
  background:var(--preview-gold);
  color:#2a2118;
  text-align:center;
  font-weight:700;
  padding:13px 15px;
  margin-top:16px;
  text-decoration:none;
}
.article-preview-page .ap-toc { display:flex; flex-direction:column; gap:0; }
.article-preview-page .ap-toc a { padding:9px 0; border-top:1px solid var(--rule); font-size:15px; line-height:1.35; text-decoration:none; color:var(--ink-2); }
.article-preview-page .ap-toc a:first-of-type { border-top:0; padding-top:0; }
.article-preview-page .ap-author { display:flex; align-items:center; gap:13px; }
.article-preview-page .ap-author img { width:68px; height:68px; object-fit:cover; object-position:50% 10%; }
.article-preview-page .ap-author strong { display:block; font-size:18px; }
.article-preview-page .ap-author span { font-size:14px; color:var(--muted); }

/* 03 Two rails */
.article-preview-page .ap-rails-head { padding:58px 0 34px; }
.article-preview-page .ap-rails-head__rule { border-bottom:3px solid var(--preview-plum); padding-bottom:32px; }
.article-preview-page .ap-rails-head .ap-title { max-width:1200px; }
.article-preview-page .ap-rails-head .ap-meta { margin-top:23px; }
.article-preview-page .ap-rails-grid {
  max-width:1440px;
  margin:0 auto;
  padding:38px 40px 96px;
  display:grid;
  grid-template-columns:190px minmax(0, 760px) 270px;
  justify-content:center;
  gap:42px;
  align-items:start;
}
.article-preview-page .ap-left-rail,
.article-preview-page .ap-right-rail { position:sticky; top:112px; }
.article-preview-page .ap-left-rail { display:flex; flex-direction:column; gap:4px; }
.article-preview-page .ap-left-rail .ap-side-eyebrow { margin-bottom:7px; }
.article-preview-page .ap-left-rail a { padding:9px 0 9px 13px; border-left:1px solid var(--rule); font-size:14px; line-height:1.35; text-decoration:none; color:var(--muted); }
.article-preview-page .ap-left-rail a:first-of-type { border-left:3px solid var(--preview-gold); color:var(--ink); font-weight:600; }
.article-preview-page .ap-rails-main figure { margin:0 0 38px; }
.article-preview-page .ap-rails-main .ap-image-frame { height:440px; overflow:hidden; }
.article-preview-page .ap-rails-main .ap-prose { font-size:18px; }
.article-preview-page .ap-right-rail { display:flex; flex-direction:column; gap:20px; }

/* 04 Digest */
.article-preview-page .ap-digest-hero { padding:46px 0 0; }
.article-preview-page .ap-digest-grid {
  display:grid;
  grid-template-columns:minmax(0, 1.05fr) minmax(360px, .95fr);
  border-top:3px solid var(--preview-plum);
  border-bottom:1px solid var(--rule);
}
.article-preview-page .ap-digest-copy { padding:44px 46px 44px 0; display:flex; flex-direction:column; justify-content:center; }
.article-preview-page .ap-digest-copy .ap-title { font-size:clamp(43px,4.6vw,66px); }
.article-preview-page .ap-digest-copy .ap-meta { margin-top:20px; }
.article-preview-page .ap-digest-image { min-height:460px; overflow:hidden; }
.article-preview-page .ap-digest-summary {
  margin-top:28px;
  background:var(--plum-tint);
  border-left:4px solid var(--preview-gold);
  padding:21px 24px;
}
.article-preview-page .ap-digest-summary strong { display:block; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-ink); margin-bottom:8px; }
.article-preview-page .ap-digest-summary p { font-size:18px; line-height:1.52; margin:0; color:var(--ink-2); }
.article-preview-page .ap-digest-content { padding-top:40px; }
.article-preview-page .ap-digest-content .ap-prose { font-size:18px; }
.article-preview-page .ap-digest-content .ap-prose h2 { border-top:1px solid var(--rule); padding-top:34px; }

/* chooser */
.article-preview-page .ap-chooser-hero { padding:64px 0 34px; }
.article-preview-page .ap-chooser-hero .ap-title { max-width:1000px; }
.article-preview-page .ap-chooser-intro { max-width:820px; font-size:21px; line-height:1.58; color:var(--muted); margin:24px 0 0; }
.article-preview-page .ap-chooser-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px;
  padding-bottom:92px;
}
.article-preview-page .ap-style-card { border:1px solid var(--rule); background:var(--surface); overflow:hidden; color:var(--ink); text-decoration:none; }
.article-preview-page .ap-style-card__image { height:245px; overflow:hidden; position:relative; background:var(--preview-plum); }
.article-preview-page .ap-style-card__image img { width:100%; height:100%; object-fit:cover; transition:transform .3s ease; }
.article-preview-page .ap-style-card:hover .ap-style-card__image img { transform:scale(1.018); }
.article-preview-page .ap-style-card__overlay { position:absolute; inset:0; background:linear-gradient(180deg,transparent,rgba(39,29,48,.72)); }
.article-preview-page .ap-style-card__num { position:absolute; left:20px; top:18px; width:38px; height:38px; display:grid; place-items:center; background:var(--preview-gold); color:#2a2118; font-weight:700; }
.article-preview-page .ap-style-card__name { position:absolute; left:20px; right:20px; bottom:18px; color:white; font-size:31px; line-height:1; font-weight:600; }
.article-preview-page .ap-style-card__body { padding:22px 23px 24px; }
.article-preview-page .ap-style-card__body p { margin:0; font-size:16px; line-height:1.52; color:var(--muted); }
.article-preview-page .ap-style-card__link { display:inline-block; margin-top:17px; font-weight:700; color:var(--link); }

html[data-theme="dark"] .article-preview-page .ap-digest-summary { background:#302a38; }
html[data-theme="dark"] .article-preview-page .ap-style-card { background:var(--surface); }
html[data-theme="dark"] .article-preview-page .ap-left-rail a:first-of-type { color:var(--ink); }

@media (max-width:1180px) {
  .article-preview-page .ap-content-wrap { grid-template-columns:minmax(0,1fr) 280px; gap:42px; }
  .article-preview-page .ap-rails-grid { grid-template-columns:minmax(0,1fr) 270px; gap:42px; }
  .article-preview-page .ap-left-rail { display:none; }
}
@media (max-width:820px) {
  .article-preview-page .ap-preview-bar__inner { padding:9px 22px; align-items:flex-start; flex-direction:column; gap:8px; }
  .article-preview-page .ap-preview-nav { width:100%; }
  .article-preview-page .ap-shell { padding-left:22px; padding-right:22px; }
  .article-preview-page .ap-title { font-size:clamp(40px,12vw,58px); }
  .article-preview-page .ap-masthead { padding:46px 0 40px; }
  .article-preview-page .ap-masthead-image { padding:0; }
  .article-preview-page .ap-masthead-image .ap-image-frame { min-height:300px; height:58vw; }
  .article-preview-page .ap-overlay { min-height:620px; }
  .article-preview-page .ap-overlay__inner { padding-top:210px; padding-bottom:38px; }
  .article-preview-page .ap-content-wrap { display:block; padding:38px 22px 78px; }
  .article-preview-page .ap-aside { position:static; margin-top:54px; }
  .article-preview-page .ap-article .ap-lede { font-size:21px; }
  .article-preview-page .ap-prose { font-size:18px; line-height:1.72; }
  .article-preview-page .ap-rails-head { padding:44px 0 24px; }
  .article-preview-page .ap-rails-grid { display:block; padding:28px 22px 78px; }
  .article-preview-page .ap-right-rail { position:static; margin-top:50px; }
  .article-preview-page .ap-rails-main .ap-image-frame { height:56vw; min-height:280px; }
  .article-preview-page .ap-digest-hero { padding-top:30px; }
  .article-preview-page .ap-digest-grid { display:flex; flex-direction:column-reverse; }
  .article-preview-page .ap-digest-copy { padding:28px 0 34px; }
  .article-preview-page .ap-digest-image { min-height:310px; height:54vw; }
  .article-preview-page .ap-chooser-grid { grid-template-columns:1fr; }
  .article-preview-page .ap-chooser-hero { padding:48px 0 28px; }
}
@media (max-width:520px) {
  .article-preview-page .ap-preview-label { font-size:11px; }
  .article-preview-page .ap-preview-nav a { font-size:12px; padding:7px 9px; }
  .article-preview-page .ap-meta { font-size:14px; gap:7px 12px; }
  .article-preview-page .ap-meta span + span::before { margin-right:12px; }
  .article-preview-page .ap-overlay { min-height:560px; }
  .article-preview-page .ap-overlay__inner { padding-top:190px; }
  .article-preview-page .ap-style-card__image { height:210px; }
}