/* =================================================================
   Dossier detail page — McKinsey report × Apple product page
   Inherits tokens from site.css (loaded first).
   ================================================================= */

/* dossier hero */
.dh{ padding-top:calc(74px + var(--s-10)); padding-bottom:var(--s-9); border-bottom:1px solid var(--line); }
.dh__back{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:var(--t-small); letter-spacing:.08em; color:var(--ink-2); margin-bottom:var(--s-8); }
.dh__back:hover{ color:var(--accent); }
.dh__meta{ display:flex; justify-content:space-between; align-items:baseline; gap:24px; flex-wrap:wrap; }
.dh__num{ font-family:var(--mono); font-size:var(--t-meta); letter-spacing:.1em; color:var(--accent); }
.dh__industry{ font-family:var(--mono); font-size:var(--t-eyebrow); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); }
.dh__title{ font-size:clamp(2.2rem,4.4vw,3.5rem); line-height:1.04; letter-spacing:-.026em; margin-top:var(--s-6); max-width:18ch; }
.dh__summary{ font-size:var(--t-lead); color:var(--ink-2); max-width:60ch; margin-top:var(--s-6); line-height:1.5; }

/* key stat band */
.statband{ display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); margin-top:var(--s-8); background:var(--line); gap:1px; }
.statband__cell{ background:#fff; padding:var(--s-6); }
.statband__num{ font-family:var(--serif); font-size:2.2rem; line-height:1; color:var(--accent); letter-spacing:-.02em; }
.statband__lbl{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); margin-top:12px; line-height:1.4; }

/* section frame */
.ds{ padding-block:var(--s-10); border-bottom:1px solid var(--line); }
.ds__eyebrow{ font-family:var(--mono); font-size:var(--t-eyebrow); letter-spacing:.18em; text-transform:uppercase; color:var(--accent); }
.ds__head{ max-width:40ch; }
.ds__head h2{ font-size:var(--t-h2); margin-top:var(--s-4); letter-spacing:-.02em; }
.ds__layout{ display:grid; grid-template-columns:minmax(0,320px) minmax(0,1fr); gap:var(--s-9); align-items:start; }
.ds__body p{ color:var(--ink-2); font-size:var(--t-body-lg); max-width:64ch; }
.ds__body p + p{ margin-top:var(--s-4); }
.ds__sticky{ position:sticky; top:110px; }

/* failure patterns */
.fails{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); margin-top:var(--s-7); }
.fail{ background:#fff; padding:var(--s-6); display:flex; gap:var(--s-5); align-items:flex-start; }
.fail__n{ font-family:var(--mono); font-size:var(--t-small); color:var(--ink-2); padding-top:4px; }
.fail__t{ font-family:var(--serif); font-size:1.2rem; line-height:1.18; }
.fail__d{ color:var(--ink-2); font-size:var(--t-meta); margin-top:10px; }

/* architecture diagram */
.archmap{ margin-top:var(--s-7); border:1px solid var(--line); background:#fff; border-radius:3px; padding:var(--s-8) var(--s-7); }
.archmap__caption{ font-family:var(--mono); font-size:var(--t-small); color:var(--ink-2); margin-top:var(--s-6); text-align:center; letter-spacing:.04em; }
.flow{ display:flex; align-items:stretch; gap:0; flex-wrap:wrap; justify-content:center; }
.flow__stage{ flex:1; min-width:150px; display:flex; flex-direction:column; }
.flow__node{ border:1px solid var(--line); border-radius:2px; padding:var(--s-5); text-align:center; background:var(--bg); height:100%; transition:all .4s var(--ease); }
.flow__node.is-ai{ border-color:var(--accent); background:var(--accent-08); }
.flow__node .k{ font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); }
.flow__node .v{ font-family:var(--serif); font-size:1.15rem; margin-top:8px; line-height:1.15; }
.flow__node.is-ai .v{ color:var(--accent); }
.flow__arrow{ display:flex; align-items:center; justify-content:center; color:var(--ink-2); padding:0 6px; font-size:18px; }

/* workflow map: before / after */
.beforeafter{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-6); margin-top:var(--s-7); }
.ba{ border:1px solid var(--line); border-radius:3px; padding:var(--s-6); background:#fff; }
.ba--after{ border-color:var(--accent-14); background:var(--accent-08); }
.ba__tag{ font-family:var(--mono); font-size:var(--t-eyebrow); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); }
.ba--after .ba__tag{ color:var(--accent); }
.ba__steps{ list-style:none; margin:var(--s-5) 0 0; padding:0; counter-reset:s; }
.ba__steps li{ position:relative; padding:14px 0 14px 38px; border-top:1px solid var(--line); font-size:var(--t-meta); color:var(--ink); counter-increment:s; }
.ba__steps li:first-child{ border-top:0; }
.ba__steps li::before{ content:counter(s,decimal-leading-zero); position:absolute; left:0; top:14px; font-family:var(--mono); font-size:11px; color:var(--ink-2); }
.ba--after .ba__steps li::before{ color:var(--accent); }

/* outcomes big callouts */
.outcomes{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-7); margin-top:var(--s-7); }
.outcome__num{ font-family:var(--serif); font-size:3rem; line-height:1; color:var(--accent); letter-spacing:-.025em; }
.outcome__lbl{ font-size:var(--t-body); color:var(--ink); margin-top:var(--s-4); max-width:30ch; }
.outcome__sub{ font-family:var(--mono); font-size:var(--t-small); color:var(--ink-2); margin-top:8px; }

/* timeline (horizontal) */
.htimeline{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; margin-top:var(--s-7); border-top:1px solid var(--line); }
.htl{ padding:var(--s-6) var(--s-5) 0; border-left:1px solid var(--line); position:relative; }
.htl:first-child{ border-left:0; }
.htl::before{ content:""; position:absolute; top:-5px; left:0; width:9px; height:9px; border-radius:50%; background:var(--accent); }
.htl__phase{ font-family:var(--mono); font-size:var(--t-small); color:var(--accent); letter-spacing:.06em; }
.htl__t{ font-family:var(--serif); font-size:1.2rem; margin-top:var(--s-3); line-height:1.18; }
.htl__d{ color:var(--ink-2); font-size:var(--t-meta); margin-top:10px; }

/* executive commentary */
.commentary{ max-width:24ch; }
.commentary p{ font-family:var(--serif); font-size:var(--t-h3); line-height:1.22; letter-spacing:-.014em; color:var(--ink); }
.commentary .by{ font-family:var(--mono); font-size:var(--t-small); letter-spacing:.06em; color:var(--ink-2); margin-top:var(--s-6); display:block; max-width:none; }

/* responsive */
@media (max-width:900px){
  .ds__layout{ grid-template-columns:1fr; gap:var(--s-6); }
  .ds__sticky{ position:static; }
  .statband{ grid-template-columns:1fr 1fr; }
  .fails{ grid-template-columns:1fr; }
  .outcomes{ grid-template-columns:1fr; gap:var(--s-6); }
  .beforeafter{ grid-template-columns:1fr; }
  .htimeline{ grid-auto-flow:row; grid-auto-columns:auto; }
  .htl{ border-left:0; border-top:1px solid var(--line); padding-left:0; padding-top:var(--s-5); }
  .htl::before{ display:none; }
  .flow__stage{ min-width:120px; }
}