/* article.html - a calm reading page. House variables only (site-v2.css rules). */

/* The head: breadcrumb, then the title block, left, on the reading column's line. */
.art-top{display:flex;flex-direction:column;gap:var(--mcf-s4);max-width:var(--wrap-read);padding-top:var(--mcf-s7);padding-bottom:var(--mcf-s8)}
.art-top .t-display{max-width:18ch}
.art-top .lead{max-width:40ch}
.art-top .author{margin-top:var(--mcf-s2)}

/* The hero picture: full wrap width, one card radius. */
.art-hero .slot{width:100%;border-radius:var(--mcf-r-card)}

/* The body sits under the hero with generous air; bottom space before the grey band. */
.art .art-body{padding-top:var(--mcf-s8);padding-bottom:var(--section)}
.art .art-body{margin-top:var(--mcf-s6)}
.art .toc{padding-top:var(--mcf-s2)}

/* The one-word answer carries the page. */
.prose .art-yes{font-size:var(--mcf-size-page);font-weight:700;letter-spacing:-.02em;line-height:1.1}
.prose .art-small{font-size:var(--mcf-size-body);color:var(--mcf-grey)}
.prose .faq{margin-top:var(--mcf-s5)}
.prose .faq .copy p{margin:0}

/* The Apply card, part-way down. Soft grey panel, text left, the van drawing right. */
.prose .art-apply{margin-block:var(--mcf-s8);background:var(--mcf-page);border-radius:var(--mcf-r-card);padding:var(--mcf-s7);display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:var(--mcf-s6);align-items:center}
.art-apply h2{font-size:var(--mcf-size-section);font-weight:600;line-height:1.25;letter-spacing:-.01em;margin:0}
.art-apply p{font-size:var(--mcf-size-body);line-height:1.55;color:var(--mcf-grey-strong);margin-top:var(--mcf-s2);max-width:46ch}
.art-apply .actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--mcf-s3) var(--mcf-s5);margin-top:var(--mcf-s5)}
.art-apply .link-arrow{font-size:var(--mcf-size-body);text-decoration:none}
.art-apply .illo{width:180px}
.art-apply .illo svg{width:100%;height:auto}

/* The disclaimer: small, grey, ruled off. */
.prose .art-note{margin-top:var(--mcf-s8);padding-top:var(--mcf-s5);border-top:1px solid var(--mcf-line);font-size:var(--mcf-size-small);line-height:1.55;color:var(--mcf-grey)}

/* Learn more: two ruled rows, name and one line. */
.prose .art-learn{margin-top:var(--mcf-s8);display:flex;flex-direction:column}
.art-learn h2{font-size:var(--mcf-size-caption);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mcf-grey);margin:0 0 var(--mcf-s3)}
.art-learn a{display:flex;align-items:center;justify-content:space-between;gap:var(--mcf-s4);padding:var(--mcf-s4) 0;border-top:1px solid var(--mcf-line);color:var(--mcf-ink);text-decoration:none}
.art-learn a:last-child{border-bottom:1px solid var(--mcf-line)}
.art-learn a>span{display:flex;flex-direction:column;gap:2px}
.art-learn b{font-size:var(--mcf-size-section);font-weight:600;letter-spacing:-.01em;line-height:1.25}
.art-learn a>span>span{font-size:var(--mcf-size-body);color:var(--mcf-grey)}
.art-learn .ico{width:22px;height:22px;color:var(--mcf-grey);flex-shrink:0;transition:transform var(--t-fast) ease}
.art-learn a:hover b,.art-learn a:hover .ico{color:var(--mcf-blue)}
.art-learn a:hover .ico{transform:translateX(2px)}

/* Share: the third column on wide screens, sticky beside the text; a row after it on a phone. */
.share{position:sticky;top:calc(var(--head-h) + var(--mcf-s6));padding-top:var(--mcf-s2);font-size:var(--mcf-size-small)}
.share h2{font-size:var(--mcf-size-caption);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mcf-grey);margin-bottom:var(--mcf-s3)}
.share ul{display:flex;flex-direction:column;gap:var(--mcf-s1)}
.share a,.share button{display:inline-flex;align-items:center;gap:var(--mcf-s2);min-height:36px;color:var(--mcf-grey-strong);background:none;border:0;padding:0;font:inherit;cursor:pointer}
.share a:hover,.share button:hover{color:var(--mcf-blue)}
.share .ico{width:18px;height:18px}
.share-done{min-height:1.4em;color:var(--mcf-ok-text);margin-top:var(--mcf-s2)}

/* The closing band: the two directors, the line, the two ways to reach them. */
.art-close{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--mcf-s7);align-items:center}
.art-people{display:flex}
.art-people img{width:80px;height:80px;border-radius:50%;object-fit:cover;border:3px solid var(--mcf-page)}
.art-people img+img{margin-left:calc(var(--mcf-s4) * -1)}
.art-close-text .lead-small{margin-top:var(--mcf-s2)}
.art-close .actions{display:flex;flex-wrap:wrap;gap:var(--mcf-s3)}

/* More to read. */
.art-more-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--mcf-s4);margin-bottom:var(--mcf-s6)}

@media (max-width:1100px){
  .art .art-body{grid-template-columns:200px minmax(0,var(--wrap-read))}
  .share{grid-column:2;position:static}
  .share ul{flex-direction:row;flex-wrap:wrap;gap:var(--mcf-s2) var(--mcf-s5)}
}
@media (max-width:900px){
  .art .art-body{grid-template-columns:minmax(0,1fr);padding-top:var(--mcf-s6)}
  .art .toc-select select{max-width:100%}
  .share{grid-column:auto;border-top:1px solid var(--mcf-line);padding-top:var(--mcf-s5)}
  .art-close{grid-template-columns:1fr;gap:var(--mcf-s5)}
}
@media (max-width:640px){
  .art-top{padding-top:var(--mcf-s5);padding-bottom:var(--mcf-s6)}
  .art-hero .slot{border-radius:var(--mcf-r-inner)}
  .prose .art-apply{grid-template-columns:1fr;padding:var(--mcf-s5);gap:var(--mcf-s4)}
  .art-apply .illo{width:140px;order:-1}
  .art-apply .btn{width:100%}
  .art-more-head{margin-bottom:var(--mcf-s5)}
}

/* Wide screens: the title block starts on the reading column's line, not the contents list's. */
@media (min-width:901px){
  .art-top{margin-left:calc(200px + var(--mcf-s8))}
}
/* WEB-077: on a wide screen the reading column sits in the middle of the page (Martin, 24 October 2026: "on full
   screen the main body is not centred"). The contents list and the share links get equal room either side, so the
   middle column is the centre; the title block centres on the same line. Held by tools/check-mockups.mjs
   ("article layout"). */
@media (min-width:1101px){
  .art .art-body{grid-template-columns:minmax(160px,1fr) minmax(0,var(--wrap-read)) minmax(160px,1fr)}
  .art-top{margin-inline:auto}
}

/* PHONE THUMBS - see site-v2.css: the share links and Copy link, 44 pixels on a phone */
@media (max-width:767px){
  .share a,.share button{min-height:44px}
}

/* WEB-064: the free gift before the ask (give, then reward), and an apply button that says what this article is about,
   then who takes it (Martin, 16 October 2026: "a specific apply button for each type of content"). */
.prose .art-give{margin-block:var(--mcf-s7);padding:var(--mcf-s6);border:1px solid var(--mcf-line);border-radius:var(--mcf-r-card);background:var(--mcf-card)}
.art-give h2{font-size:var(--mcf-size-section);font-weight:600;line-height:1.25;margin:0}
.art-give p{margin-top:var(--mcf-s2);color:var(--mcf-grey-strong);max-width:52ch}
.art-give-link{display:flex;align-items:center;gap:var(--mcf-s3);margin-top:var(--mcf-s4);min-height:44px;color:var(--mcf-blue);text-decoration:none}
.art-give-link .ico{flex-shrink:0;width:20px;height:20px}
.art-give-link > span{display:flex;flex-direction:column}
.art-give-link b{font-weight:600}
.art-give-link span span{font-size:var(--mcf-size-small);color:var(--mcf-grey)}
.art-give-link:hover b{text-decoration:underline}
.art-give-link:focus-visible{outline:2px solid var(--mcf-blue);outline-offset:4px;border-radius:var(--mcf-r-inner)}
.btn-apply{flex-direction:column;align-items:flex-start;gap:2px;height:auto;min-height:48px;padding-block:var(--mcf-s3);text-align:left;line-height:1.25}
.btn-apply b{font-weight:600}
.btn-apply span{font-size:var(--mcf-size-small);font-weight:500;opacity:.9}
@media (max-width:640px){.btn-apply{width:100%}}

/* about the author, at the foot of every article (WEB-064, register S260) */
/* a web address or a door in code (the page for AI assistants, 20 October 2026): breaks anywhere, so a phone never scrolls sideways */
.prose code{font-family:var(--mcf-mono);font-size:.92em;overflow-wrap:anywhere}