/*
 * Article detail page. Loaded after landing.css and articles.css — the story
 * cards, meta rows and offers rail are the index page's components, so only
 * what is unique to the detail page lives here.
 */
:root{
  --at-band:#eef3ef;
  --at-crumb-link:#00714f;
  --at-crumb-muted:#566a60;
}

.article-main{padding:34px 0 80px}

/* The design runs a tinted band from just below the top of the lead image
   down past the related row. It is full-bleed, so it is painted here rather
   than on the content column. */
.article-main{position:relative}
.article-main::before{
  content:'';position:absolute;left:0;right:0;
  top:var(--at-band-top,430px);bottom:0;
  background:var(--at-band);z-index:0;
}
.at-wrap{position:relative;z-index:1;width:calc(100% - 100px);max-width:1290px;margin-inline:auto}

/* ---------- Breadcrumb ---------- */
.at-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:18px;line-height:1.2}
.at-crumb-link{color:var(--at-crumb-link);font-weight:600}
.at-crumb-link:hover{text-decoration:underline}
.at-crumb-sep,.at-crumb-here{color:var(--at-crumb-muted)}

/* ---------- Headline ---------- */
.at-title{font-size:clamp(28px,3.6vw,45px);font-weight:500;line-height:1.24;color:var(--ar-heading);margin-top:26px;max-width:929px}

/* ---------- Lead image ---------- */
/* 1290x565 in the design. The stock photography is 16:9, so the frame follows
   the photography rather than cropping a third of it away. */
.at-hero{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:6px;background:var(--ar-surface);margin-top:30px}

/* ---------- Body + rail ---------- */
.at-grid{display:grid;grid-template-columns:minmax(0,785px) 338px;justify-content:space-between;gap:60px;align-items:start;margin-top:46px}
.at-grid > *{min-width:0}
.at-body{display:flex;flex-direction:column;gap:30px}
.at-p{font-size:20px;font-weight:300;line-height:1.55;color:var(--ar-heading)}
.at-h2{font-size:clamp(22px,2.4vw,30px);font-weight:700;line-height:1.3;color:var(--ar-heading);margin-top:8px}
.at-figure{margin:6px 0}
.at-figure img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:6px;background:var(--ar-surface)}
.at-caption{font-size:14px;line-height:1.4;color:var(--ar-time);margin-top:10px}

/* ---------- Guide blocks ---------- */
.at-deck{font-size:clamp(18px,2vw,21px);font-weight:300;line-height:1.5;color:var(--ar-time);
  margin-bottom:6px}
.at-h3{font-size:clamp(19px,2vw,24px);font-weight:700;line-height:1.3;color:var(--ar-heading);
  margin-top:10px}
.at-list{margin:0;padding-left:22px;display:grid;gap:9px}
.at-list li{font-size:20px;font-weight:300;line-height:1.55;color:var(--ar-heading)}

/* Steps carry their own "Step 3" label from the copy, so the list is not
   auto-numbered — some entries in a run are unnumbered asides. */
.at-steps{list-style:none;margin:0;padding:0;display:grid;gap:14px;counter-reset:none}
.at-step{background:var(--ar-surface);border-radius:6px;padding:18px 22px}
.at-step.is-aside{background:transparent;border-left:3px solid var(--color-accent-orange);
  border-radius:0;padding:4px 0 4px 18px}
.at-step-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px}
.at-step-label{flex:none;font-size:13px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  color:#fff;background:var(--ar-cat);border-radius:6px;padding:4px 11px}
.at-step-title{font-size:19px;font-weight:500;line-height:1.3;color:var(--ar-heading);min-width:0}
.at-step-p{font-size:17px;font-weight:300;line-height:1.55;color:var(--ar-heading);margin-top:10px}
.at-step-list{margin:10px 0 0;padding-left:20px;display:grid;gap:7px}
.at-step-list li{font-size:17px;font-weight:300;line-height:1.55;color:var(--ar-heading)}
.at-step strong,.at-p strong,.at-list li strong{font-weight:700}

.at-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.at-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--ar-rule);
  border-radius:6px;overflow:hidden;font-size:17px}
.at-table th,.at-table td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--ar-rule);
  font-weight:300;color:var(--ar-heading)}
.at-table thead th{background:var(--ar-surface);font-weight:700;white-space:nowrap}
.at-table tbody th{font-weight:500}
.at-table tbody tr:last-child th,.at-table tbody tr:last-child td{border-bottom:0}

.at-callout{background:#eef7f1;border:1px solid #cfe3d7;border-left:4px solid var(--ar-cat);
  border-radius:6px;padding:20px 24px;margin-top:8px}
.at-callout-title{font-size:18px;font-weight:500;color:var(--ar-heading)}
.at-callout-text{font-size:16px;font-weight:300;line-height:1.6;color:var(--ar-heading);margin-top:8px}

/* ---------- Read these next ---------- */
.at-related{margin-top:74px}
.at-related .ar-more-head{margin-top:0}
.at-related-row{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:26px}

/* ---------- Unknown slug ---------- */
.at-missing{padding:60px 0 40px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.at-missing-text{font-size:18px;color:var(--ar-time)}
.at-missing .pill{margin-top:10px}

@media(max-width:1350px){
  .at-wrap{width:calc(100% - 64px)}
  .at-grid{grid-template-columns:minmax(0,1fr) 300px;gap:40px}
  .at-related-row{gap:18px}
}

@media(max-width:1050px){
  .article-main::before{top:var(--at-band-top,340px)}
  .at-grid{grid-template-columns:1fr;gap:40px}
  .at-related-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .at-related{margin-top:54px}
}

@media(max-width:650px){
  .at-wrap{width:calc(100% - 32px)}
  .article-main{padding:20px 0 56px}
  .article-main::before{top:var(--at-band-top,250px)}
  .at-crumb{font-size:15px}
  .at-title{margin-top:16px}
  .at-hero{border-radius:6px;margin-top:20px}
  .at-grid{margin-top:26px;gap:30px}
  .at-body{gap:22px}
  .at-p{font-size:17px}
  .at-deck{font-size:17px}
  .at-list li,.at-step-list li,.at-step-p{font-size:16px}
  .at-step{padding:15px 16px}
  .at-step-title{font-size:17px}
  .at-step-label{font-size:11.5px;padding:3px 9px}
  .at-callout{padding:16px 18px}
  /* The cheat sheet is 4 columns — stack it into labelled rows on a phone. */
  .at-table-wrap{overflow:visible}
  .at-table,.at-table tbody,.at-table tr{display:block;width:100%}
  .at-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .at-table tr{border-bottom:1px solid var(--ar-rule);padding:4px 0}
  .at-table tbody tr:last-child{border-bottom:0}
  .at-table th,.at-table td{display:flex;gap:14px;justify-content:space-between;
    border-bottom:0;padding:6px 14px;text-align:right;font-size:16px}
  .at-table td[data-col]::before{content:attr(data-col);flex:none;font-weight:500;
    color:var(--ar-time);text-align:left}
  .at-table tbody th{background:var(--ar-surface);font-weight:700;text-align:left;justify-content:flex-start}
  .at-figure img{border-radius:6px}
  .at-related-row{grid-template-columns:1fr;gap:16px}
  .at-related{margin-top:36px}
}

@media(max-width:1050px){.at-crumb{gap:4px}.at-crumb a{display:inline-block;padding:7px 2px}}

/* Type scale matched to the homepage (landing.css): page title 50px,
   section heading 40px, panel heading 30px, sub-heading 23px, card title
   20px, lead 20px, body 16px, buttons 18px; headings Medium (500). Fine
   print is left as is. Desktop and tablet only; phones keep their sizes. */
@media(min-width:651px){
  main h1.at-title{font-size:50px !important;line-height:1.2 !important}
  main p.at-deck{font-size:20px !important}
  main h2.at-h2{font-size:30px !important;font-weight:500 !important;line-height:1.2 !important}
  main li.at-p{font-size:16px !important}
  main h3.at-h3{font-size:23px !important;font-weight:500 !important}
  main h2.at-callout-title{font-size:23px !important}
}

/* Type scale matched to the homepage on phones: page title 32px, section
   heading 30px, panel heading 26px, sub-heading 20px, card title 16-18px,
   body 15-16px. Fine print is left as is. */
@media(max-width:650px){
  main h1.at-title{font-size:32px !important;line-height:1.2 !important}
  main p.at-deck{font-size:16px !important}
  main h2.at-h2{font-size:26px !important;font-weight:500 !important;line-height:1.2 !important}
  main h3.at-h3{font-size:18px !important;font-weight:500 !important}
  main p.at-p{font-size:16px !important}
  main h2.at-callout-title{font-size:20px !important}
}

/* Desktop gutter: from 1051px up, content keeps at least 80px either side,
   so smaller laptops (1100-1440px) get the same breathing room as wide
   screens. Each container still stops at its own max-width. */
@media(min-width:1051px){.at-wrap{box-sizing:border-box;width:calc(100% - 160px) !important;margin-left:auto !important;margin-right:auto !important}}