/* Anpdf site — article template (approved 24 Oct 2026).
   Needs tokens.css (design/Design System/tokens.css) loaded first: colours, radii, shadows and fonts come from there.
   Content is plain semantic HTML inside .article-body; the classes below cover the optional inserts. */

.site{
  --article-measure:680px;      /* reading column, ≈ 66–72 characters at 18 px */
  --article-wide:1120px;        /* cover and header width */
  --article-gutter:16px;        /* phone side padding */
  --article-sheet-pad:80px;     /* white sheet side padding on desktop */
  --font-ui:"Montserrat","Montserrat Cyrillic",ui-sans-serif,system-ui,sans-serif;
  --font-read:"Atlassian Sans","Atlassian Sans Latin Ext","Atlassian Sans Cyrillic","Atlassian Sans Cyrillic Ext",ui-sans-serif,system-ui,sans-serif;
  min-height:100vh;
  margin:0;
  padding:16px 16px 0;
  box-sizing:border-box;
  background:var(--workspace);
  color:var(--text);
  font-family:var(--font-ui);
  -webkit-font-smoothing:antialiased;
}
.site *,.site *::before,.site *::after{box-sizing:border-box}

/* ---------- Header: same plate as the editor toolbar ---------- */
.site-header{
  max-width:var(--article-wide);
  height:64px;
  margin:0 auto;
  padding:0 12px 0 16px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  border-radius:var(--radius-16);
  background:var(--panel);
  outline:1px solid var(--border);outline-offset:-1px;
  box-shadow:var(--shadow-small);
}
.site-brand{display:inline-flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-size:16px;line-height:24px;font-weight:600;border-radius:var(--radius-8);padding:4px 6px 4px 4px}
.site-brand img{width:28px;height:28px;display:block}
.site-brand:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* ---------- Buttons (Button component) ---------- */
.btn{
  height:36px;padding:0 12px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:0;border-radius:var(--radius-8);
  font:500 14px/20px var(--font-ui);
  text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:background-color 120ms cubic-bezier(.2,0,0,1),color 120ms cubic-bezier(.2,0,0,1);
}
.btn svg{width:20px;height:20px;flex:none}
.btn-primary{background:var(--primary);color:var(--text-inverse)}
.btn-primary:hover,.btn-primary.is-hover{background:var(--primary-hover)}
.btn-primary:active{background:var(--primary-pressed)}
.btn:focus-visible,.btn.is-focus{outline:2px solid var(--focus);outline-offset:2px}
.btn-large{height:40px;padding:0 16px}

/* ---------- Title block ---------- */
.article{padding:64px 0 0}
.article-head{max-width:720px;margin:0 auto;text-align:left}
.article-kicker{margin:0 0 16px;font-size:14px;line-height:20px;font-weight:500;color:var(--primary)}
.article-title{margin:0;font-size:44px;line-height:52px;font-weight:600;letter-spacing:-.01em;color:var(--text);text-wrap:balance}
.article-lead{margin:20px 0 0;font:400 20px/32px var(--font-read);color:var(--text-secondary);text-wrap:pretty}
.article-meta{margin:20px 0 0;display:flex;flex-wrap:wrap;gap:8px;font-size:14px;line-height:20px;color:var(--text-secondary)}
.article-meta span+span::before{content:"·";margin-right:8px}

/* ---------- Cover: wide, keeps its focal point ---------- */
.article-cover{
  max-width:var(--article-wide);
  margin:48px auto 0;
  aspect-ratio:16/9;
  border-radius:var(--radius-16);
  overflow:hidden;
  background:var(--rail);
}
.article-cover img{
  width:100%;height:100%;display:block;
  object-fit:cover;
  object-position:var(--focal-x,50%) var(--focal-y,50%); /* set per article: style="--focal-x:72%;--focal-y:40%" */
}

/* ---------- Reading sheet ---------- */
.article-sheet{
  max-width:calc(var(--article-measure) + 2 * var(--article-sheet-pad));
  margin:48px auto 0;
  padding:64px var(--article-sheet-pad) 72px;
  background:var(--surface);
  border-radius:var(--radius-16);
  outline:1px solid var(--border);outline-offset:-1px;
}
.article-body{font:400 18px/30px var(--font-read);color:var(--text)}
.article-body>*{margin:0}
.article-body>*+*{margin-top:20px}
.article-body h2{margin-top:56px;font:600 26px/34px var(--font-ui);letter-spacing:-.005em;color:var(--text);text-wrap:balance}
.article-body h3{margin-top:32px;font:600 20px/28px var(--font-ui);color:var(--text)}
.article-body>:first-child{margin-top:0}
.article-body h2+*,.article-body h3+*{margin-top:12px}
.article-body ul,.article-body ol:not(.steps){padding-left:28px}
.article-body li+li{margin-top:8px}
.article-body ul>li::marker{color:var(--primary)}
.article-body ol:not(.steps)>li::marker{color:var(--text-secondary);font:500 16px var(--font-ui)}
.article-body strong{font-weight:600}
.article-body figure img{width:100%;height:auto;display:block;border-radius:var(--radius-8);outline:1px solid var(--border);outline-offset:-1px}
.article-body figcaption{margin-top:8px;font:400 14px/20px var(--font-ui);color:var(--text-secondary)}
/* Inserts get extra air so they read as pauses, not as cards in a row */
.article-body>.callout,.article-body>.steps,.article-body>.ext-card,.article-body>figure{margin-top:40px}
.article-body>.callout+*,.article-body>.steps+*,.article-body>.ext-card+*,.article-body>figure+*{margin-top:40px}
.article-body>.callout+h2,.article-body>.steps+h2,.article-body>.ext-card+h2,.article-body>figure+h2{margin-top:56px}

/* 1. Text link */
.article-body a:not(.btn),.link{
  color:var(--primary);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,var(--primary) 40%,transparent);
  border-radius:var(--radius-4);
  transition:background-color 120ms cubic-bezier(.2,0,0,1),text-decoration-color 120ms cubic-bezier(.2,0,0,1);
}
.article-body a:not(.btn):hover,.link:hover,.link.is-hover{background:var(--hover);text-decoration-color:var(--primary)}
.article-body a:not(.btn):focus-visible,.link:focus-visible,.link.is-focus{outline:2px solid var(--focus);outline-offset:2px;text-decoration-color:var(--primary)}

/* 2. Callout: tip (coral tint) and note (neutral) */
.callout{
  display:grid;grid-template-columns:20px 1fr;column-gap:12px;
  padding:20px;
  border-radius:var(--radius-16);
  font:400 16px/26px var(--font-read);
}
.callout svg{width:20px;height:20px;margin-top:3px;color:var(--primary)}
.callout-tip{background:var(--hover)}
.callout-note{background:var(--selected)}
.callout-note svg{color:var(--text)}
.callout-title{margin:0 0 4px;font:600 16px/24px var(--font-ui);color:var(--text)}
.callout p{margin:0}
.callout p+p{margin-top:8px}

/* 3. Steps */
.steps{list-style:none;padding:0;counter-reset:step}
.steps>li{position:relative;padding-left:44px;counter-increment:step}
.steps>li+li{margin-top:24px}
.steps>li::before{
  content:counter(step);
  position:absolute;left:0;top:0;
  width:28px;height:28px;border-radius:var(--radius-full);
  display:flex;align-items:center;justify-content:center;
  background:var(--selected);color:var(--primary);
  font:600 14px/1 var(--font-ui);font-variant-numeric:tabular-nums;
}
.step-title{display:block;font:600 18px/28px var(--font-ui);color:var(--text)}
.steps p{margin:4px 0 0}

/* 4–5. Extension card: inline (in the text) and final (end of the article) */
.ext-card{
  display:grid;grid-template-columns:48px 1fr;column-gap:16px;row-gap:16px;align-items:start;
  padding:20px;
  border-radius:var(--radius-16);
  background:var(--surface);
  outline:1px solid var(--border);outline-offset:-1px;
  font-family:var(--font-ui);
}
.ext-card img{width:48px;height:48px;display:block}
.ext-card-title{margin:0;font:600 16px/24px var(--font-ui);color:var(--text)}
.ext-card-text{margin:4px 0 0;font:400 14px/22px var(--font-ui);color:var(--text-secondary)}
.ext-card .btn{grid-column:2;justify-self:start}
.ext-card-final{
  max-width:calc(var(--article-measure) + 2 * var(--article-sheet-pad));
  margin:24px auto 0;
  grid-template-columns:64px 1fr auto;column-gap:24px;align-items:center;
  padding:32px 40px;
  background:var(--panel);
}
.ext-card-final img{width:64px;height:64px}
.ext-card-final .ext-card-title{font-size:20px;line-height:28px}
.ext-card-final .btn{grid-column:auto}
.ext-trust{margin:8px 0 0;display:flex;flex-wrap:wrap;gap:4px 8px;font-size:12px;line-height:18px;color:var(--text-secondary)}
.ext-trust span+span::before{content:"·";margin-right:8px}

/* ---------- Footer ---------- */
.site-footer{max-width:var(--article-wide);margin:0 auto;padding:40px 0 32px;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 24px;font-size:12px;line-height:18px;color:var(--text-secondary)}
.site-footer a{color:var(--text-secondary);text-decoration:underline;text-underline-offset:3px;border-radius:var(--radius-4)}
.site-footer a:hover{color:var(--primary)}
.site-footer a:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* ---------- Tablet ---------- */
@media (max-width:960px){
  .site{--article-sheet-pad:48px}
  .article-cover{aspect-ratio:3/2}
}

/* ---------- Phone ---------- */
@media (max-width:640px){
  .site{padding:8px 8px 0;--article-sheet-pad:var(--article-gutter)}
  .site-header{height:56px;padding:0 8px 0 10px}
  .site-brand{font-size:14px}
  .site-brand img{width:24px;height:24px}
  .article{padding-top:32px}
  .article-head{padding:0 8px}
  .article-kicker{margin-bottom:12px}
  .article-title{font-size:30px;line-height:38px}
  .article-lead{margin-top:16px;font-size:18px;line-height:28px}
  .article-cover{margin-top:28px;aspect-ratio:4/3;border-radius:var(--radius-12)}
  .article-sheet{margin:28px -8px 0;padding:36px var(--article-gutter) 48px;border-radius:0;outline:0}
  .article-body{font-size:17px;line-height:28px}
  .article-body h2{margin-top:44px;font-size:22px;line-height:30px}
  .article-body h3{font-size:18px;line-height:26px}
  .article-body>.callout,.article-body>.steps,.article-body>.ext-card,.article-body>figure,
  .article-body>.callout+*,.article-body>.steps+*,.article-body>.ext-card+*,.article-body>figure+*{margin-top:32px}
  .callout{padding:16px;font-size:16px;line-height:25px}
  .ext-card{grid-template-columns:40px 1fr;column-gap:12px;padding:16px}
  .ext-card img{width:40px;height:40px}
  .ext-card .btn{grid-column:1 / -1;width:100%}
  .ext-card-final{margin:16px 0 0;grid-template-columns:48px 1fr;padding:24px 16px;border-radius:var(--radius-16)}
  .ext-card-final img{width:48px;height:48px}
  .ext-card-final .ext-card-title{font-size:18px;line-height:26px}
  .site-footer{padding:28px 8px 24px}
}

/* ---------- Variant B · calm extension cards (24 Oct 2026, proposal) ----------
   Same tokens and geometry; the cards stop shouting: no red fill, the logo sits on a white tile,
   the button is the design-system neutral button with a coral label. */
.btn-neutral{background:var(--surface);color:var(--primary);outline:1px solid var(--border);outline-offset:-1px}
.btn-neutral:hover,.btn-neutral.is-hover{background:var(--hover)}
.btn-neutral:active{background:var(--pressed)}
.btn-neutral:focus-visible,.btn-neutral.is-focus{outline:2px solid var(--focus);outline-offset:2px}
.site-calm .ext-card{background:var(--workspace);outline:0}
.site-calm .ext-card img{box-sizing:border-box;padding:8px;border-radius:var(--radius-12);background:var(--surface);box-shadow:var(--shadow-small)}
.site-calm .ext-card-final{background:var(--surface);outline:1px solid var(--border);outline-offset:-1px}
.site-calm .ext-card-final img{padding:12px;background:var(--workspace);box-shadow:none}
@media (max-width:640px){.site-calm .ext-card img{padding:6px}.site-calm .ext-card-final img{padding:8px}}

@media (prefers-reduced-motion:reduce){.site *{transition:none!important}}