/* ==========================================================================
   The Dairy Mail — section styles (Build Brief v2.0). Pairs with tokens.css +
   chrome.css + pages.css. Masthead, cards, pillars, article page.
   ========================================================================== */

/* masthead (section home) -------------------------------------------------- */
.dm-masthead{background:var(--green-600);color:var(--paper)}
.dm-masthead__inner{max-width:var(--container-xl);margin:0 auto;padding:64px 40px 44px}
.dm-masthead__endorse{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.14em;color:var(--orange-300);margin:0 0 14px}
.dm-masthead__word{font-family:var(--font-display);font-size:64px;font-weight:900;letter-spacing:-0.02em;line-height:1;color:var(--paper);margin:0 0 10px}
.dm-masthead__logo{display:block;width:min(420px,72vw);height:auto;margin:0 0 14px}

/* featured lead (McKinsey-style) ------------------------------------------- */
.dm-featured{display:grid;grid-template-columns:1.15fr 1fr;gap:0;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);overflow:hidden;text-decoration:none;color:inherit;margin-bottom:24px;box-shadow:var(--shadow-sm);transition:box-shadow var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard)}
.dm-featured:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.dm-featured__media{position:relative;min-height:380px;overflow:hidden;background:var(--sand-200)}
.dm-featured__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dm-featured__body{padding:44px;display:flex;flex-direction:column;justify-content:center;gap:12px}
.dm-featured__title{font-family:var(--font-display);font-size:32px;font-weight:700;line-height:1.1;letter-spacing:-0.01em;color:var(--ink);margin:0}
.dm-featured__summary{font-size:16px;line-height:1.6;color:var(--text-body);margin:0}
.dm-grid--3{grid-template-columns:repeat(3,1fr)}
.dm-masthead__spine{font-family:var(--font-display);font-size:26px;font-weight:700;color:var(--orange-300);margin:0 0 16px}
.dm-masthead__sub{font-size:18px;font-weight:300;line-height:1.6;color:color-mix(in oklab,var(--paper) 85%,transparent);max-width:560px;margin:0 0 28px}
.dm-masthead__cta{display:flex;gap:14px;flex-wrap:wrap}
.dm-masthead__cta .btn--ghost{border-color:color-mix(in oklab,var(--paper) 40%,transparent);color:var(--paper)}
.dm-masthead__cta .btn--ghost:hover{background:color-mix(in oklab,var(--paper) 12%,transparent);border-color:var(--paper)}

/* section intro ------------------------------------------------------------ */
.dm-lede{font-size:19px;font-weight:300;line-height:1.6;color:var(--text-body);max-width:720px;margin:14px 0 0}

/* Focus band: tighter top/bottom, more air between the lede and the cards */
.dm-focus .band__inner{padding-top:48px;padding-bottom:52px}
.dm-focus .band__head{margin-bottom:44px}

/* card grid ---------------------------------------------------------------- */
.dm-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.dm-card{display:flex;flex-direction:column;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);overflow:hidden;color:inherit;text-decoration:none;transition:box-shadow var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard)}
.dm-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.dm-card__img{aspect-ratio:16/9;width:100%;object-fit:cover;background:var(--sand-200)}
.dm-card__body{padding:20px;display:flex;flex-direction:column;gap:8px}
.dm-card__meta{font-size:12px;color:var(--text-muted);margin:0}
.dm-tag{display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--orange-600)}
.dm-card__title{font-size:17px;line-height:1.25;font-weight:800;color:var(--ink);margin:0}
.dm-card__finding{font-size:14px;line-height:1.5;color:var(--text-body);margin:0}
.dm-card__date{font-size:12px;color:var(--text-muted);margin:2px 0 0}

/* pillars (home) ----------------------------------------------------------- */
.dm-pillars{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.dm-pillar{display:block;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);overflow:hidden;color:inherit;text-decoration:none;transition:box-shadow var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard)}
.dm-pillar:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.dm-pillar__ident{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--sand-200)}
.dm-pillar__text{padding:16px 18px 18px}
.dm-pillar__name{font-size:17px;font-weight:800;color:var(--ink);margin:0 0 6px}
.dm-pillar__route{font:var(--type-small);color:var(--orange-600);font-weight:700;margin:0 0 14px}
.dm-pillar__count{font-size:12px;color:var(--text-muted);margin:0}

/* pillar / index hero ------------------------------------------------------ */
.dm-pillar-hero{background:var(--ink);color:var(--paper)}
.dm-pillar-hero__inner{max-width:var(--container-xl);margin:0 auto;padding:72px 40px}
.dm-pillar-hero .eyebrow{color:var(--orange-300)}
.dm-pillar-hero__title{font-family:var(--font-display);font-size:48px;font-weight:900;letter-spacing:-0.02em;color:var(--paper);margin:0 0 10px}
.dm-pillar-hero__route{font-size:19px;font-weight:300;color:color-mix(in oklab,var(--paper) 85%,transparent);margin:0}
.dm-pillar-hero--ident .dm-pillar-hero__inner{display:grid;grid-template-columns:1fr auto;align-items:center;gap:40px}
.dm-pillar-hero--ident .dm-pillar-hero__title{color:var(--h-ink)}
.dm-pillar-hero--ident .eyebrow{color:var(--h-eye)}
.dm-pillar-hero--ident .dm-pillar-hero__route{color:var(--h-route)}
.dm-pillar-hero__ident{display:block;width:320px;max-width:38vw;height:auto;border:0;border-radius:0}
.dm-empty{font-size:16px;color:var(--text-muted)}

/* subscribe page ----------------------------------------------------------- */
.dm-sub__title{font-family:var(--font-display);font-size:46px;font-weight:900;letter-spacing:-0.02em;line-height:1.04;color:var(--paper);margin:0 0 14px}
.dm-sub{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.dm-sub__pitch .eyebrow{margin:0 0 18px}
.dm-sub__list{list-style:none;margin:0;padding:0}
.dm-sub__list li{position:relative;font-size:18px;line-height:1.6;color:var(--text-body);margin:0 0 16px;padding-left:28px}
.dm-sub__list li::before{content:"";position:absolute;left:2px;top:10px;width:8px;height:8px;border-radius:50%;background:var(--orange-500)}
.dm-sub__form{display:flex;flex-direction:column;gap:16px;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:32px;box-shadow:var(--shadow-sm)}
.dm-sub__label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:700;color:var(--ink)}
.dm-sub__input{font:inherit;font-weight:400;font-size:16px;color:var(--ink);background:var(--paper);border:1px solid var(--border-default);border-radius:var(--radius-md);padding:12px 14px;width:100%}
.dm-sub__input:focus{outline:2px solid var(--orange-500);outline-offset:1px;border-color:var(--orange-500)}
.dm-sub__form .btn{align-self:flex-start;margin-top:4px}
.dm-sub__note{font-size:14px;line-height:1.5;color:var(--text-muted);margin:0}
.dm-sub__note a{color:var(--orange-600);font-weight:700}
@media (max-width:899px){ .dm-sub{grid-template-columns:1fr;gap:32px} .dm-sub__title{font-size:34px} }

/* pillar cross-nav (under the hero) ---------------------------------------- */
.dm-pillar-nav{background:var(--surface-sunken);border-bottom:1px solid var(--border-subtle)}
.dm-pillar-nav__inner{max-width:var(--container-xl);margin:0 auto;padding:16px 40px;display:flex;flex-wrap:wrap;gap:10px}
.dm-navbtn{display:inline-flex;align-items:center;font-size:14px;font-weight:700;color:var(--ink);background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-pill);padding:8px 16px;text-decoration:none;transition:border-color var(--dur-base) var(--ease-standard),background var(--dur-base) var(--ease-standard)}
.dm-navbtn:hover{border-color:var(--orange-500);color:var(--orange-600)}
.dm-navbtn--home{background:var(--green-600);color:var(--paper);border-color:var(--green-600)}
.dm-navbtn--home:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* article page ------------------------------------------------------------- */
.dm-article__head{background:var(--paper)}
.dm-article__inner{max-width:760px;margin:0 auto;padding:76px 24px 44px}
.dm-article__eyebrow{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.14em;color:var(--orange-600);margin:0 0 22px}
.dm-article__title{font-family:var(--font-display);font-size:54px;font-weight:900;letter-spacing:-0.025em;line-height:1.03;color:var(--ink);margin:0 0 26px}
.dm-article__deck{font-family:var(--font-display);font-size:25px;font-weight:300;line-height:1.4;color:var(--text-body);margin:0 0 32px;max-width:38ch}
.dm-article__meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-top:22px;border-top:1px solid var(--border-default);font-size:14px;color:var(--text-muted)}
.dm-article__by{font-weight:700;color:var(--ink)}
.dm-article__sep{width:4px;height:4px;border-radius:50%;background:var(--border-default);flex:none}

.dm-article__lead{margin:0;background:var(--sand-200)}
.dm-article__lead img{display:block;width:100%;max-height:560px;object-fit:cover}

.dm-article__body{max-width:684px;margin:0 auto;padding:52px 24px 0}
.dm-article__body p{font-size:19px;line-height:1.75;color:var(--text-body);margin:0 0 24px}
.dm-article__body>p:first-of-type{font-size:22px;line-height:1.6;color:var(--ink)}
.dm-article__body h2{font-family:var(--font-display);font-size:31px;font-weight:700;color:var(--ink);margin:52px 0 18px;letter-spacing:-0.015em;line-height:1.15}
.dm-article__body h2::before{content:"";display:block;width:38px;height:3px;background:var(--orange-500);margin:0 0 20px}
.dm-article__body h3{font-size:22px;font-weight:800;color:var(--ink);margin:38px 0 12px}
.dm-article__body img{width:100%;border-radius:var(--radius-md);margin:16px 0 10px}
.dm-article__body ul{margin:0 0 24px;padding:0;list-style:none}
.dm-article__body li{position:relative;font-size:19px;line-height:1.7;color:var(--text-body);margin:0 0 10px;padding-left:26px}
.dm-article__body li::before{content:"";position:absolute;left:2px;top:11px;width:8px;height:8px;border-radius:50%;background:var(--orange-500)}
.dm-article__body a{color:var(--orange-600);font-weight:700;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}

/* pull quote (from Markdown blockquotes) */
.dm-article__body blockquote{margin:40px 0;padding:0;border:0;font-family:var(--font-display);font-size:31px;font-weight:300;line-height:1.3;letter-spacing:-0.01em;color:var(--ink)}
.dm-article__body blockquote::before{content:"";display:block;width:54px;height:4px;background:var(--orange-500);margin:0 0 22px}

/* key takeaway callout */
.dm-takeaway{background:var(--green-600);border-radius:var(--radius-lg);padding:30px 34px;margin:0 0 44px}
.dm-article__body .dm-takeaway__label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.14em;color:var(--orange-300);margin:0 0 12px}
.dm-article__body .dm-takeaway__text{font-family:var(--font-display);font-size:23px;font-weight:300;line-height:1.4;color:var(--paper);margin:0}

/* foot */
.dm-article__foot{max-width:684px;margin:60px auto 0;padding:34px 24px 8px;border-top:1px solid var(--border-subtle)}
.dm-article__filed{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--text-muted);margin:0 0 14px}
.dm-article__pills{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 26px}
.dm-pill-tag{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:var(--orange-600);border:1px solid var(--border-default);border-radius:var(--radius-pill);padding:6px 14px;text-decoration:none}
.dm-pill-tag:hover{border-color:var(--orange-500)}
.dm-endorse{font-size:14px;color:var(--text-muted);margin:0 0 22px}
.dm-endorse strong{color:var(--green-600)}

/* responsive --------------------------------------------------------------- */
@media (max-width:1199px){ .dm-grid,.dm-pillars{grid-template-columns:repeat(2,1fr)} }
@media (max-width:899px){
  .dm-masthead__inner,.dm-pillar-hero__inner{padding:56px 20px}
  .dm-masthead__word{font-size:44px}
  .dm-article__inner{padding:52px 20px 32px}
  .dm-article__title{font-size:34px;letter-spacing:-0.02em}
  .dm-article__deck{font-size:20px}
  .dm-article__body{padding-top:36px}
  .dm-article__body>p:first-of-type{font-size:20px}
  .dm-article__body h2{font-size:26px;margin-top:40px}
  .dm-article__body blockquote{font-size:25px}
  .dm-takeaway{padding:24px 22px}
  .dm-article__body .dm-takeaway__text{font-size:20px}
  .dm-grid,.dm-pillars{grid-template-columns:1fr}
  .dm-featured{grid-template-columns:1fr}
  .dm-featured__media{min-height:220px}
  .dm-featured__body{padding:28px}
  .dm-featured__title{font-size:26px}
  .dm-pillar-hero--ident .dm-pillar-hero__inner{grid-template-columns:1fr;gap:24px}
  .dm-pillar-hero__ident{width:200px;max-width:60vw;order:-1}
}

/* accessibility utility */
.u-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}