/* ============================================================================
   DAS ARTICLE PAGE, V2: the GetYourGuide article layout
   ----------------------------------------------------------------------------
   Jayden 2026-10-16: "change the design of the actual article when u click on a
   newsletter change that to the new design we choose". The design is V2 from the
   ODNDR blog lab (04_clients/shaqir/odndr-blog-mobbin-lab-2026-10-16, Mobbin
   screen 1e654ccf, GetYourGuide article). ODNDR gets the same layout on its
   feat/blog-v2 branch, so the two blogs stay consistent.

   Measured off the reference at 1440 wide (lab NOTES.md, "V2 · GetYourGuide
   article"):
     container 144 -> 1296        = 1152
     body column                  = 706, body type 20 / 28.5 (NYT's size)
     "In this article" box        = 349 wide, 1px rule, r 12; items 15px on a
                                    32.25 pitch
     H2                           = 32px bold
     "Read more"                  = 22px bold; 95.25 square thumbs, r 8;
                                    titles 17 / 22.5 bold

   Body type is Source Serif 4, self-hosted from css/fonts/source-serif-4/ under
   the SIL Open Font License (OFL.txt sits beside the files). NYT's own Imperial
   is commercial; the lab used Source Serif 4 as its stand-in. Headings and UI
   use Manrope, the face the DAS nav already loads on every page.

   COLOUR. The DAS custom properties are inverted (--black is white, --gold is
   navy), so every colour here is an explicit hex. Nothing below reads them.

   Scoped to .dav2 so it cannot touch the nav, the footer, the cart drawer or
   the Insights index, which keeps css/das-insights.css.
   ========================================================================== */

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/css/fonts/source-serif-4/source-serif-4-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('/css/fonts/source-serif-4/source-serif-4-latin-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.dav2 {
  --a-ui:    'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --a-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --a-ink:   #0E1B2E;   /* headings */
  --a-text:  #1B2638;   /* body serif */
  --a-soft:  #3B4658;   /* contents items */
  --a-muted: #5E6A7D;   /* dates, captions */
  --a-navy:  #1A2E6E;   /* DAS logo navy: links, buttons, accents */
  --a-line:  #DDE2EA;   /* the box rule */
  --a-tint:  #F4F6FA;   /* quiet panels */
  --a-sticky: 88px;     /* 64px nav + 24 */

  background: #FFFFFF;
  color: var(--a-text);
  font-family: var(--a-ui);
  -webkit-font-smoothing: antialiased;
}
.dav2 *, .dav2 *::before, .dav2 *::after { box-sizing: border-box; }
.dav2 img { max-width: 100%; }

.dav2-wrap { width: min(1152px, calc(100% - 48px)); margin: 0 auto; padding-bottom: 112px; }

/* ── Article header ────────────────────────────────────────────────────── */
.dav2 .ins-back { margin-top: 30px; color: var(--a-muted); font-family: var(--a-ui); }
.dav2 .ins-back:hover { color: var(--a-ink); }
.dav2-head { max-width: 860px; padding-top: 26px; }
.dav2-cat {
  display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px;
  background: #E9EEF8; color: var(--a-navy); font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase;
}
.dav2-head h1 {
  margin: 18px 0 0; font-family: var(--a-ui); font-size: clamp(30px, 3.4vw, 46px); line-height: 1.12;
  font-weight: 700; letter-spacing: -.025em; color: var(--a-ink);
}
.dav2-standfirst { margin: 18px 0 0; max-width: 760px; font-family: var(--a-serif); font-size: 21px; line-height: 1.5; color: var(--a-soft); }
.dav2-by { margin-top: 26px; display: flex; align-items: center; gap: 12px; line-height: 1.35; }
.dav2-av { width: 42px; height: 42px; flex: none; border-radius: 50%; border: 1px solid var(--a-line); background: #fff; padding: 6px; object-fit: contain; }
.dav2-by a { font-size: 15px; font-weight: 700; color: var(--a-ink); text-decoration: none; }
.dav2-by a:hover { color: var(--a-navy); text-decoration: underline; text-underline-offset: 3px; }
.dav2-by .m { display: block; margin-top: 3px; font-size: 13.5px; color: var(--a-muted); }

.dav2-cover { margin: 34px 0 0; border-radius: 12px; overflow: hidden; background: #EEF1F5; aspect-ratio: 1152 / 480; }
.dav2-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ── The two columns ───────────────────────────────────────────────────── */
.dav2-grid {
  margin-top: 56px; display: grid; align-items: start;
  grid-template-columns: minmax(0, 706px) minmax(260px, 349px);
  grid-template-areas: "body side";
  justify-content: space-between; column-gap: 48px;
}
.dav2-body { grid-area: body; min-width: 0; }
.dav2-side {
  grid-area: side; position: sticky; top: var(--a-sticky);
  max-height: calc(100vh - var(--a-sticky) - 16px); overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; padding: 2px; margin: -2px;
}

/* ── In this article ───────────────────────────────────────────────────── */
.dav2-toc { border: 1px solid var(--a-line); border-radius: 12px; background: #fff; }
.dav2-toc summary {
  position: relative; list-style: none; cursor: pointer; padding: 22px 52px 0 18px;
  font-size: 17px; line-height: 22px; font-weight: 700; color: var(--a-ink);
}
.dav2-toc summary::-webkit-details-marker { display: none; }
.dav2-toc summary svg { position: absolute; right: 22px; top: 25px; width: 15px; height: 15px; transition: transform .2s ease; }
.dav2-toc:not([open]) summary { padding-bottom: 22px; }
.dav2-toc:not([open]) summary svg { transform: rotate(180deg); }
.dav2-toc ol {
  margin: 0; padding: 18px 18px 18px; list-style: none; display: grid; gap: 4px;
  max-height: min(46vh, 430px); overflow-y: auto; scrollbar-width: thin;
}
.dav2-toc li { margin: 0; }
.dav2-toc a {
  display: block; padding: 6px 0 6px 12px; margin-left: -12px; border-left: 2px solid transparent;
  font-size: 15px; line-height: 20px; color: var(--a-soft); text-decoration: none;
}
.dav2-toc a:hover { color: var(--a-navy); }
.dav2-toc a.is-on { color: var(--a-navy); font-weight: 700; border-left-color: var(--a-navy); }

/* ── Read more ─────────────────────────────────────────────────────────── */
.dav2-more { margin-top: 30px; }
.dav2-more h2 { margin: 0; font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -.01em; color: var(--a-ink); }
.dav2-more ul { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 18px; }
.dav2-more a { display: flex; gap: 14px; text-decoration: none; color: inherit; }
.dav2-more img { width: 95.25px; height: 95.25px; flex: none; border-radius: 8px; object-fit: cover; background: #EEF1F5; }
.dav2-more .d { display: block; padding-top: 1px; font-size: 12.5px; line-height: 15px; color: var(--a-muted); }
.dav2-more .t { display: block; margin-top: 6px; font-size: 17px; line-height: 22.5px; font-weight: 700; color: var(--a-ink); }
.dav2-more a:hover .t { color: var(--a-navy); text-decoration: underline; text-underline-offset: 3px; }

/* ── Body type ─────────────────────────────────────────────────────────── */
.dav2-body > *:first-child { margin-top: 0; }
.dav2-body p, .dav2-body li { font-family: var(--a-serif); font-size: 20px; line-height: 28.5px; color: var(--a-text); }
.dav2-body p { margin: 0 0 22.5px; }
.dav2-body h2 {
  margin: 48px 0 18px; scroll-margin-top: 96px; font-family: var(--a-ui); font-size: 32px; line-height: 38px;
  font-weight: 700; letter-spacing: -.02em; color: var(--a-ink);
}
.dav2-body h3 { margin: 34px 0 12px; scroll-margin-top: 96px; font-family: var(--a-ui); font-size: 22px; line-height: 28px; font-weight: 700; color: var(--a-ink); }
.dav2-body strong, .dav2-body b { font-weight: 700; color: var(--a-ink); }
.dav2-body a { color: var(--a-navy); text-decoration: underline; text-underline-offset: 2px; }
.dav2-body ul, .dav2-body ol { margin: 0 0 24px; padding: 0; list-style: none; display: grid; gap: 12px; }
.dav2-body li { position: relative; padding-left: 24px; }
.dav2-body li::before { content: ''; position: absolute; left: 4px; top: 12px; width: 6px; height: 6px; border-radius: 50%; background: var(--a-navy); }

/* The posts' own panels, brought onto the article's palette */
.dav2-body .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin: 32px 0 36px; }
.dav2-body .stat-box { background: var(--a-tint); border: 1px solid #E3E8EF; border-radius: 12px; padding: 24px 22px; text-align: left; }
.dav2-body .stat-box .stat-number { font-family: var(--a-ui); font-size: 34px; line-height: 1; font-weight: 700; letter-spacing: -.03em; color: var(--a-navy); margin: 0 0 10px; }
.dav2-body .stat-box .stat-label { font-family: var(--a-ui); font-size: 14px; line-height: 1.5; color: var(--a-muted); }

.dav2-body .pull-quote { margin: 40px 0; padding: 2px 0 2px 26px; background: none; border: 0; border-left: 3px solid var(--a-navy); border-radius: 0; }
.dav2-body .pull-quote p { margin: 0; font-family: var(--a-serif); font-size: 25px; line-height: 35px; font-style: italic; font-weight: 400; color: var(--a-ink); }

.dav2-body .article-blockquote { margin: 40px 0; padding: 30px 32px; background: var(--a-tint); border: 1px solid #E3E8EF; border-radius: 12px; }
.dav2-body .article-blockquote p { margin: 0 0 14px; font-family: var(--a-serif); font-size: 22px; line-height: 32px; font-style: italic; font-weight: 400; color: var(--a-ink); }
.dav2-body .article-blockquote cite { font-family: var(--a-ui); font-size: 14px; font-style: normal; font-weight: 600; color: var(--a-muted); }

.dav2-body .article-figure { margin: 36px 0; border: 0; border-radius: 0; overflow: visible; }
.dav2-body .article-figure img { display: block; width: 100%; border-radius: 12px; margin: 0; }
.dav2-body .article-figure figcaption { margin-top: 12px; padding: 0; background: none; border: 0; font-family: var(--a-ui); font-size: 13.5px; line-height: 1.55; color: var(--a-muted); }

.dav2-body .cost-breakdown, .dav2-body .quarter-card, .dav2-body .timeline-item {
  background: var(--a-tint); border: 1px solid #E3E8EF; border-radius: 12px;
}
.dav2-body .cost-breakdown { padding: 28px 30px; margin: 36px 0; }
.dav2-body .quarter-card { padding: 26px 28px; margin: 0 0 22px; }
.dav2-body .quarter-card li, .dav2-body .cost-breakdown li, .dav2-body .cost-breakdown p,
.dav2-body .timeline-item p, .dav2-body .timeline-item li { font-size: 18px; line-height: 27px; }
.dav2-body .quarter-badge, .dav2-body .timeline-marker { background: var(--a-navy); color: #fff; }

/* ── The one ending: a single CTA on the body column ───────────────────── */
.dav2-cta { margin: 56px 0 0; padding: 34px 34px 32px; border: 1px solid var(--a-line); border-radius: 12px; background: var(--a-tint); }
.dav2-cta .e { margin: 0; font-family: var(--a-ui); font-size: 12.5px; line-height: 1; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--a-navy); }
.dav2-body .dav2-cta h2 { margin: 14px 0 0; scroll-margin-top: 0; font-size: 28px; line-height: 34px; }
.dav2-body .dav2-cta p.d { margin: 12px 0 0; font-size: 18px; line-height: 27px; color: var(--a-soft); }
.dav2-cta .b { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; }
.dav2-body .dav2-cta .b a {
  display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 24px; border-radius: 999px;
  font-family: var(--a-ui); font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap;
  background: #1A2E6E; color: #FFFFFF; border: 1px solid #1A2E6E; transition: background-color .15s, color .15s;
}
.dav2-body .dav2-cta .b a:hover { background: #0C1840; border-color: #0C1840; }
.dav2-body .dav2-cta .b a.ghost { background: #FFFFFF; color: #1A2E6E; border-color: #C5CEDC; }
.dav2-body .dav2-cta .b a.ghost:hover { border-color: #1A2E6E; }

/* Markdown posts (DAS-50, scripts/import-das50.mjs, 2026-10-23): tables, blockquotes,
   numbered lists. The six original posts have none of these in their body, so
   nothing changes on them. Posts that use these link this file as ?v=2. */
.dav2-body .dav2-table { margin: 8px 0 30px; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--a-line); border-radius: 12px; }
.dav2-body table { display: table; width: 100%; border-collapse: collapse; font-family: var(--a-ui); font-size: 15px; line-height: 1.5; color: var(--a-text); }
.dav2-body th, .dav2-body td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--a-line); }
.dav2-body th { font-weight: 700; color: var(--a-ink); background: var(--a-tint); }
.dav2-body tr:last-child td { border-bottom: 0; }
.dav2-body blockquote { margin: 32px 0; padding: 2px 0 2px 24px; border-left: 3px solid var(--a-navy); }
.dav2-body blockquote p { font-style: italic; }
.dav2-body ol { counter-reset: dav2-ol; }
.dav2-body ol > li { counter-increment: dav2-ol; padding-left: 32px; }
.dav2-body ol > li::before { content: counter(dav2-ol) "."; top: 0; left: 0; width: auto; height: auto; border-radius: 0; background: none; font-family: var(--a-ui); font-weight: 700; color: var(--a-navy); }
.dav2-body li > p { margin: 0 0 10px; }
.dav2-body li > ul, .dav2-body li > ol { margin: 12px 0 0; }

/* ── Tablet: the rail narrows, the body keeps its measure ──────────────── */
@media (max-width: 1100px) {
  .dav2-grid { column-gap: 36px; grid-template-columns: minmax(0, 1fr) minmax(250px, 300px); }
}

/* ── One column: contents on top of the body, Read more under it ───────────
   Below 960 the rail would squeeze the body under ~440px (measured: 385px at
   769), so the single column starts here, not at the phone breakpoint. */
@media (max-width: 960px) {
  .dav2 { --a-sticky: 0px; }
  .dav2-grid { margin-top: 36px; grid-template-columns: minmax(0, 706px); justify-content: start; grid-template-areas: "toc" "body" "more"; row-gap: 0; }
  .dav2-side { display: contents; }
  .dav2-toc { grid-area: toc; margin-bottom: 34px; }
  .dav2-toc ol { max-height: none; }
  .dav2-more { grid-area: more; margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--a-line); }
  .dav2-more ul { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); column-gap: 28px; }
}

/* ── Phones (768 and under): type and spacing ──────────────────────────── */
@media (max-width: 768px) {
  .dav2-wrap { width: calc(100% - 40px); padding-bottom: 72px; }
  .dav2 .ins-back { margin-top: 22px; }
  .dav2-head { padding-top: 18px; }
  .dav2-head h1 { font-size: 30px !important; line-height: 36px; } /* beats styles.css's global mobile h1 clamp */
  .dav2-standfirst { font-size: 19px; line-height: 28px; }
  .dav2-cover { margin-top: 24px; aspect-ratio: 16 / 10; border-radius: 10px; }
  .dav2-grid { margin-top: 28px; grid-template-columns: minmax(0, 1fr); }
  .dav2-toc { margin-bottom: 30px; }
  .dav2-more { margin-top: 48px; padding-top: 30px; }
  .dav2-more ul { grid-template-columns: minmax(0, 1fr); }
  .dav2-body p, .dav2-body li { font-size: 18px; line-height: 27px; }
  .dav2-body p { margin-bottom: 20px; }
  .dav2-body h2 { margin-top: 40px; font-size: 26px !important; line-height: 32px; scroll-margin-top: 84px; }
  .dav2-more h2 { font-size: 22px !important; }
  .dav2-body .pull-quote p { font-size: 21px; line-height: 30px; }
  .dav2-body .article-blockquote { padding: 24px 22px; }
  .dav2-body .article-blockquote p { font-size: 19px; line-height: 28px; }
  .dav2-body .quarter-card, .dav2-body .cost-breakdown { padding: 22px 20px; }
  .dav2-body .quarter-card li, .dav2-body .cost-breakdown li, .dav2-body .cost-breakdown p,
  .dav2-body .timeline-item p, .dav2-body .timeline-item li { font-size: 17px; line-height: 25.5px; }
  .dav2-cta { margin-top: 44px; padding: 26px 22px 24px; }
  .dav2-body .dav2-cta h2 { font-size: 24px !important; line-height: 30px; }
  .dav2-body .dav2-cta .b a { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .dav2-toc summary svg { transition: none; }
}