/* ---------- policy / research document treatment ----------
   Measured against anthropic.com/legal/* and /research/*: ivory #FAF9F5
   ground, one centred 640px column of 17px serif at full ink, a large
   centred sans title above it, section headings 32px/600 with 64px of air,
   and no marketing furniture (no sidebar rail, no mono eyebrows, no pills,
   no dark slabs). Shared document styling for the educational library. */
html{background:#FAF9F5}
:root{
  --bg:#FAF9F5;
  --surface:#FFFFFF;
  --card:#FFFFFF;
  --col:640px;
  /* vertical rhythm: every major block is [air] + hairline + [air] + content.
     Three steps only, so nothing on the page is spaced by hand. */
  --band:clamp(72px,8.5vw,128px);   /* air above a section's rule */
  --band-in:clamp(36px,3.6vw,56px); /* rule down to the first line of the section */
  --step-md:clamp(26px,2.6vw,38px); /* inside a section: group to group */
  --colgap:clamp(24px,4vw,64px);    /* the one gutter between the two columns */
}
body{background:var(--bg);font-size:17px;line-height:1.55}
.mini-diagram span:not(.mini-arrow),
.sample-panel,
.bubble:not(.reply){background:#F1EFE7}
.mini-diagram .filled{background:var(--clay)}

/* chrome */
.site-header{background:var(--bg);border-bottom:0}
.header-inner{min-height:72px}
.header-nav a[aria-current="page"]{text-decoration:none;font-weight:600}
.btn{border-radius:6px;font-size:15px;font-weight:500;height:42px;padding:0 18px}
.btn.lg{border-radius:6px;height:48px;font-size:16px}
.btn:hover{background:#2B2B27;color:var(--bg)}
.btn.inv{background:var(--ink);color:var(--bg)}
.btn.inv:hover{background:#2B2B27;color:var(--bg)}

/* the breadcrumb is a quiet sans line, not a mono tag */
.breadcrumb{padding-top:28px;
  font-family:var(--sans);font-size:14px;font-weight:400;letter-spacing:0;
  text-transform:none;color:var(--ink-3)}

/* title block: centred, full width, the page's one large voice */
.context-hero{padding-block:var(--band-in) 0;border-bottom:0}
.context-hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:var(--colgap);align-items:start}

.context-hero .eyebrow{font-family:var(--sans);font-size:15px;font-weight:600;
  letter-spacing:0;text-transform:none;color:var(--ink);margin-bottom:22px}
.context-hero h1{font-size:clamp(40px,5.4vw,76px);line-height:.98;
  letter-spacing:-.035em;font-weight:700;max-width:12ch}
.context-hero .lede{font-family:var(--serif);font-size:clamp(18px,1.5vw,21px);
  line-height:1.5;color:var(--ink);max-width:none;margin:6px 0 0;text-align:left}

/* one centred column, no sidebar rail */
.article-layout{display:block;max-width:calc(var(--col) + var(--gut)*2);margin-inline:auto;
  padding-top:40px}
.contents{position:static;margin-bottom:56px}
.contents h2{font-family:var(--sans);font-size:15px;font-weight:600;
  letter-spacing:0;text-transform:none;color:var(--ink);margin-bottom:12px}
.contents ol{display:block;padding-left:0;margin-left:0}
.contents li,.contents li:first-child{border-top:0}
.contents a{font-family:var(--sans);font-size:15px;line-height:1.5;
  color:var(--ink-2);padding-block:5px;text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:var(--line-2)}
.contents a:hover{color:var(--ink);text-decoration-color:var(--ink)}
.contents .back-link{display:none}

/* body: full-ink serif, headings with air above rather than rules */
.prose section{margin-bottom:0;padding-block:0}
.prose section + section{border-top:0}
.prose h2{font-family:var(--sans);font-size:clamp(26px,2.4vw,32px);
  line-height:1.2;font-weight:600;letter-spacing:-.018em;margin:64px 0 20px}
.prose section:first-child h2{margin-top:0}
.prose .detail-meta{font-family:var(--sans);font-size:14px;font-weight:600;
  letter-spacing:0;text-transform:none;color:var(--ink-3);margin:56px 0 6px}
.prose section:first-child .detail-meta{margin-top:0}
.prose section:first-child h2{margin-top:6px}
.prose p{font-family:var(--serif);font-size:17px;line-height:1.55;
  color:var(--ink);margin-bottom:20px}
.prose .lede{font-family:var(--serif);font-size:17px;line-height:1.55;
  color:var(--ink);max-width:none;margin-bottom:20px!important}

/* journey and checklist flatten into the document's own list grammar */
.journey{display:block;border:0;margin:0 0 20px;padding-left:1.15em;
  list-style:disc}
.journey li{display:list-item;padding:0;border:0;margin-bottom:10px;
  font-family:var(--serif);font-size:17px;line-height:1.55;color:var(--ink)}
.journey b{display:inline;font-family:var(--serif);font-size:17px;
  font-weight:600;margin:0}
.journey b::after{content:" — "}
.journey small{display:inline;font-family:var(--serif);font-size:17px;
  line-height:1.55;color:var(--ink)}
.checklist{margin:0 0 20px}
.checklist div{display:block;padding:0;border:0;margin-bottom:10px;
  font-family:var(--serif);font-size:17px;line-height:1.55}
.checklist dt{display:inline;font-family:var(--serif);font-size:17px;
  font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink)}
.checklist dt::after{content:" — "}
.checklist dd{display:inline;color:var(--ink)}
.handover{font-family:var(--serif);font-size:17px;line-height:1.55;
  color:var(--ink);border-top:1px solid var(--line);padding-top:18px;margin-top:22px}

/* closing note: in the column, on the same ground as everything else */
.band-dk{background:transparent;color:var(--ink)}
.band-dk h2,.band-dk h3,.band-dk p,.band-dk .lead,.band-dk .lede{color:var(--ink)}
.band-dk .eyebrow{font-family:var(--sans);font-size:15px;font-weight:600;
  letter-spacing:0;text-transform:none;color:var(--ink-3)}
.band-dk .wrap{max-width:var(--wrap);display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--colgap);
  align-items:start}
.band-dk .wrap::before{content:"";grid-column:1/-1;height:1px;background:var(--line);
  margin-bottom:var(--band-in)}
.band-dk .row-head .eyebrow{margin:0 0 14px}
.band-dk .row-body{padding-top:33px}
.band-dk .row-head h2{margin-bottom:0}
.band-dk .row-body .lead{max-width:none}
.band-dk .btn.lg{margin-top:12px}
.band-dk{margin-top:var(--band);padding-bottom:var(--band)}
.band-dk .sec{padding-block:0}
.band-dk .shd{max-width:none}
.band-dk h2{font-family:var(--sans);font-size:clamp(26px,2.4vw,34px);
  line-height:1.15;letter-spacing:-.02em;font-weight:600}
.band-dk .lead{font-family:var(--serif);font-size:18px;line-height:1.6;
  max-width:none;margin-bottom:22px}

.related{max-width:var(--wrap);margin:var(--band) auto;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--colgap);
  align-items:start;
  border-top:1px solid var(--line-2)}
.related::before{content:"";grid-column:1/-1;height:1px;background:var(--line);
  margin-bottom:var(--band-in)}
.related h2{font-family:var(--sans);font-size:clamp(26px,2.4vw,34px);line-height:1.15;
  letter-spacing:-.02em;font-weight:600;margin:0}
.related-links{flex-direction:column;gap:2px;margin:0}
.related-links a{font-size:17px;font-weight:400;border-bottom:0;
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--line-2)}
.related-links a:hover{color:var(--ink);text-decoration-color:var(--ink)}

/* the marketing grid rules for .journey are still live below 820px */
@media (max-width:820px){
  .journey{grid-template-columns:none}
  .journey li{padding:0!important;border:0!important;margin-bottom:10px}
}
@media (max-width:760px){
  .context-hero h1{font-size:clamp(32px,8vw,40px)}
  .prose p,.prose .lede,.journey li,.checklist div,.handover{font-size:17px}
}


/* ---------- component index (overview) ---------- */
.index-list{width:100%;max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:var(--colgap)}
.index-group{grid-column:2}
.index-item{display:block;padding-block:26px;border-top:1px solid var(--line)}
.index-item:last-child{border-bottom:1px solid var(--line)}
.index-item .idx-meta{font-family:var(--sans);font-size:14px;font-weight:600;color:var(--ink-3)}
.index-item h3{font-family:var(--sans);font-size:23px;font-weight:600;line-height:1.25;
  letter-spacing:-.015em;margin:6px 0 8px;text-decoration:underline;
  text-underline-offset:4px;text-decoration-color:var(--line-2)}
.index-item:hover h3{text-decoration-color:var(--ink)}
.index-item p{font-family:var(--serif);font-size:18px;line-height:1.6;color:var(--ink);
  margin:0;max-width:none}

/* stage groups: the stage name becomes a quiet subhead, the number stays inline */
.index-group{margin-top:var(--step-md)}
.index-group:first-child{margin-top:var(--step-md)}
.index-rail{grid-column:1;margin-top:var(--step-md)}
.index-stage{position:sticky;top:96px;
  font-family:var(--sans);font-weight:600;letter-spacing:0;
  color:var(--ink-3);margin:0}

/* ---------- stage grid (five doors, before the essay) ----------
   Hairline-ruled cells rather than bordered cards: the 1px grid gap is the
   rule, each cell repaints the page ground over it. */
.stage-grid{margin-top:var(--band)}
.stage-grid .wrap{display:grid;grid-template-columns:repeat(5,1fr);
  column-gap:var(--colgap);background:transparent;max-width:var(--wrap)}
.stage-grid .wrap::before{content:"";grid-column:1/-1;height:1px;background:var(--line);
  margin-bottom:var(--band-in)}
.stage-card{display:flex;flex-direction:column;gap:10px;
  background:var(--bg);padding:0}

.stage-card h2{font-family:var(--sans);font-size:21px;font-weight:600;
  line-height:1.25;letter-spacing:-.015em;margin:0}
.stage-card p{font-family:var(--serif);font-size:16px;line-height:1.5;
  color:var(--ink-2);margin:0}
.stage-card p{margin-bottom:22px}
.stage-card .stage-more{margin-top:auto;font-family:var(--serif);
  font-size:16px;font-weight:400;color:var(--ink-3);text-decoration:none}
.stage-card .stage-more .ar{display:inline-block;margin-left:8px}
.stage-card:hover .stage-more{color:var(--ink)}

/* ---------- overview intro ---------- */
.doc-row{margin-top:var(--band)}
.doc-row .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:var(--colgap);align-items:start}
.doc-row .wrap::before{content:"";grid-column:1/-1;height:1px;background:var(--line);
  margin-bottom:var(--band-in)}
.doc-row .row-head h2{font-family:var(--sans);font-size:clamp(26px,2.4vw,34px);
  line-height:1.15;font-weight:600;letter-spacing:-.02em;margin:0}
.doc-row .row-body p{font-family:var(--serif);font-size:18px;line-height:1.6;
  color:var(--ink);margin:0 0 22px;max-width:none}
.doc-row .row-body p:last-child{margin-bottom:0}
.doc-row .creed{margin:var(--step-md) 0 0;padding-top:var(--step-md);border-top:1px solid var(--line);
  display:grid;gap:12px;max-width:none}
.doc-row .creed div{font-family:var(--serif);font-size:18px;line-height:1.6;color:var(--ink)}
.doc-row .creed b{font-family:var(--serif);font-weight:600}
.doc-row .creed b::after{content:"\00a0\2014\00a0"}


/* ---------- footer logo ----------
   .footer-col is a flex column, so the default align-items:stretch was
   overruling width:auto and smearing the wordmark to the column width. */
.footer-col img{align-self:flex-start;width:auto;max-width:180px}

/* ---------- motion ----------
   Everything here is opt-in: the keyframes only exist inside the
   prefers-reduced-motion query, and the scroll reveals only inside
   @supports, so a browser without view() timelines shows static content
   at full opacity rather than a blank page. */
@media (prefers-reduced-motion: no-preference){
  @keyframes doc-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  @keyframes doc-fade{from{opacity:0}to{opacity:1}}

  .context-hero .eyebrow{animation:doc-rise .5s cubic-bezier(.22,.61,.36,1) both}
  .context-hero h1{animation:doc-rise .6s cubic-bezier(.22,.61,.36,1) .04s both}
  .context-hero .lede{animation:doc-rise .6s cubic-bezier(.22,.61,.36,1) .1s both}
  .breadcrumb{animation:doc-fade .5s ease both}

  .stage-card{transition:color .18s ease}
  .index-item,.contents a,.related-links a,.pager a{
    transition:color .18s ease,text-decoration-color .18s ease,
      transform .22s cubic-bezier(.22,.61,.36,1),background-color .18s ease}
  .index-item:hover h3{text-decoration-color:var(--ink)}
  .index-item:hover p{color:var(--ink-2)}
  .pager a:hover{transform:translateY(-1px)}
  .btn{transition:background-color .18s ease,color .18s ease,transform .18s ease}
  .btn:active{transform:translateY(1px)}
  .site-header{transition:box-shadow .2s ease,border-color .2s ease}

  @supports (animation-timeline: view()){
    .doc-row,.index-item,.index-group,.stage-card,
    .prose section,.band-dk .shd,
    .related,.pager{
      animation:doc-rise .7s cubic-bezier(.22,.61,.36,1) both;
      animation-timeline:view();
      animation-range:entry 0% entry 62%;
    }
  }
}

/* ---------- medium screens ---------- */
@media (max-width:1180px){
  .stage-grid .wrap{grid-template-columns:repeat(3,1fr);row-gap:var(--band-in)}
}
@media (max-width:1000px){
  .stage-grid .wrap{grid-template-columns:repeat(2,1fr)}
}

/* ---------- small screens ---------- */
@media (max-width:760px){
  .header-inner{min-height:60px}
  .header-nav{gap:16px}
  .brand img{height:17px}
  .context-hero h1{max-width:none}
  .context-hero .wrap{grid-template-columns:1fr;gap:20px}
  .context-hero .lede{margin-top:20px}
  .breadcrumb{padding-top:20px}
  .article-layout{padding-top:28px}
  .contents{margin-bottom:40px}
  .doc-row .wrap,.band-dk .wrap,.related{grid-template-columns:1fr;gap:18px}
  .band-dk .row-body{padding-top:0}
  .doc-row .row-head h2,.prose h2,.band-dk h2{font-size:25px}

  .index-rail,.index-group{grid-column:1}
  .index-stage{position:static;margin-bottom:14px}
  .index-group{margin-top:0}
  .index-list{grid-template-columns:1fr}
  .stage-grid .wrap{grid-template-columns:1fr}
  .stage-card{padding:28px 0 8px}
  .stage-grid .wrap{gap:0}
  .index-item{padding-block:22px}
  .index-item h3{font-size:21px}
  .prose h2{margin-top:48px}
  .prose .detail-meta{margin-top:40px}
  .pager{margin-top:48px}
  .footer-col img{max-width:150px}
}
@media (max-width:420px){
  .header-nav{gap:12px;font-size:13px}
  .btn{height:38px;padding:0 14px;font-size:14px}
  .context-hero h1{font-size:30px;line-height:1.08}
}

/* ---------- article foot: previous / next ---------- */
.pager{max-width:calc(var(--col) + var(--gut)*2);margin:64px auto 0;padding-inline:var(--gut);
  padding-top:28px;border-top:1px solid var(--line-2);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.pager a{display:block}
.pager span{display:block;font-family:var(--sans);font-size:14px;font-weight:600;color:var(--ink-3)}
.pager b{display:block;font-family:var(--sans);font-size:17px;font-weight:600;line-height:1.3;
  margin-top:6px;text-decoration:underline;text-underline-offset:4px;
  text-decoration-color:var(--line-2)}
.pager a:hover b{text-decoration-color:var(--ink)}
.pager .nxt{grid-column:2;text-align:right}
.pager .empty{visibility:hidden}
@media (max-width:640px){.pager{grid-template-columns:minmax(0,1fr);gap:22px}
  .pager .nxt{grid-column:1;text-align:left}}

/* Library additions use the existing document typography and reading column. */
.article-page .context-hero h1{font-size:clamp(32px,4.5vw,60px);max-width:20ch;line-height:1.06}
.article-meta{font-family:var(--sans);font-size:14px;line-height:1.6;color:var(--ink-3);margin-top:24px}
.prose>p:first-child{margin-bottom:40px}
.prose li{margin-bottom:10px}
.prose a,.doc-row a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-2)}
.prose blockquote{margin:24px 0;padding-left:20px;border-left:2px solid var(--line-2)}
.prose .chat{margin:24px 0}
.prose .bubble p{margin:10px 0 0;font-size:16px}
.prose .figure strong{font-weight:600}
.search-map{text-align:center}
.search-map .paired{margin-block:16px}
.search-map .paired p{border-top:1px solid var(--line-2);padding-top:16px;text-align:left}
.search-map>span{display:block;font-size:24px}
.index-stage,.doc-row,.prose h2{scroll-margin-top:96px}
.index-stage{font-size:18px;line-height:1.35;color:var(--ink)}
@media(max-width:420px){
  .header-inner{flex-wrap:wrap;gap:8px;padding-block:12px}
  .header-nav{flex-wrap:wrap}
  .figure{padding:12px}
}

.prose .contents{margin:32px 0 48px}
.prose .contents h2{font-size:15px;margin:0 0 12px;letter-spacing:0}
.prose .contents li{margin:0}
.figure th:first-child{width:38%}
.figure th:nth-child(2){width:18%}

/* article pages: research-post treatment — centred title block on a wide
   measure, a full-bleed-ish hero image, then a sticky contents rail beside
   the reading column (anthropic.com/research/*). */
.article-page .breadcrumb{max-width:1040px;margin-inline:auto;padding-inline:var(--gut)}
.article-page .context-hero{padding-block:clamp(40px,5vw,72px) 0}
.article-page .context-hero .wrap{display:block;max-width:940px;
  margin-inline:auto;text-align:center}
.article-page .context-hero .eyebrow{font-size:16px;margin-bottom:18px}
.article-page .context-hero .eyebrow a{text-decoration:none;color:var(--ink)}
.article-page .context-hero .eyebrow a:hover{text-decoration:underline}
.article-page .context-hero h1{font-size:clamp(34px,4.4vw,58px);line-height:1.08;
  letter-spacing:-.03em;max-width:22ch;margin-inline:auto}
.article-page .context-hero .lede{font-size:clamp(18px,1.5vw,20px);line-height:1.5;
  color:var(--ink-2);max-width:60ch;margin:22px auto 0;text-align:center}
.article-page .article-meta{display:flex;justify-content:center;gap:10px;
  align-items:center;margin-top:26px;padding-top:0;border-top:0;font-size:15px}
.article-page .article-meta span+span::before{content:"·";margin-right:10px;
  color:var(--line-2)}

.article-hero{margin:clamp(36px,4vw,60px) auto 0;max-width:1040px;
  padding-inline:var(--gut)}
.article-hero img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;
  border-radius:12px}
.article-hero figcaption{font-family:var(--sans);font-size:13.5px;line-height:1.6;
  color:var(--ink-3);margin-top:12px;text-align:center}

/* reading column with a sticky contents rail on the left */
.article-page .article-layout{display:grid;
  grid-template-columns:200px minmax(0,var(--col));
  gap:clamp(40px,5vw,72px);max-width:none;width:fit-content;
  margin-inline:auto;padding-top:clamp(48px,5vw,80px)}
.article-page .article-layout>.contents{position:sticky;top:96px;align-self:start;
  margin:0}
.article-page .article-layout>.contents h2{margin-bottom:14px}
.article-page .article-layout>.contents ol{list-style:none;padding:0;margin:0}
.article-page .article-layout>.contents li{margin:0;border-top:1px solid var(--line-2)}
.article-page .article-layout>.contents li:first-child{border-top:0}
.article-page .article-layout>.contents a{display:block;padding-block:11px;
  text-decoration:none;font-size:14px;line-height:1.35}
.article-page .article-layout>.contents a:hover{color:var(--ink);
  text-decoration:underline}
.article-page .prose>p:first-of-type{margin-bottom:20px}
@media (max-width:1000px){
  .article-page .article-layout{display:block;width:auto;
    max-width:calc(var(--col) + var(--gut)*2);padding-inline:var(--gut)}
  .article-page .article-layout>.contents{position:static;margin-bottom:44px}
}
@media (max-width:640px){
  .article-page .context-hero .wrap{text-align:left}
  .article-page .context-hero h1,
  .article-page .context-hero .lede{margin-inline:0;text-align:left}
  .article-page .article-meta{display:block}
  .article-page .article-meta span{display:block}
  .article-page .article-meta span+span{margin-top:4px}
  .article-page .article-meta span+span::before{content:none}
}
@media print{.article-hero{display:none}}