/* article.css — prose pages: blog posts, legal, careers, and the blog index.

   The editorial devices here come from the references the rest of the site is
   already built on (see design-research.html): a numbered rail, sticky
   furniture beside a measured column, and black and white carrying one accent.
   Nothing is decorative for its own sake. The numbers on the contents rail and
   the list are the reader's position, which is the job they do on Watson and
   The Obsidian Assembly. */

/* --- shared hero ---------------------------------------------------------- */
.ar-hero{padding-top:clamp(120px,17vh,190px);padding-bottom:clamp(24px,4vh,44px);border-bottom:1px solid var(--line)}
.ar-crumbs+.ar-hero,.ar-progress+.ar-crumbs+.ar-hero{padding-top:clamp(18px,3vh,30px)}
.ar-hero .label{display:block;margin-bottom:18px}
.ar-hero h1{font-weight:500;font-size:clamp(32px,4.6vw,66px);line-height:1.02;letter-spacing:-.035em;max-width:22ch}
.ar-hero .lead{color:var(--grey-1);font-size:clamp(17px,1.5vw,21px);max-width:58ch;margin-top:24px}
.ar-meta{margin-top:26px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey-2);display:flex;flex-wrap:wrap;gap:8px 20px}
.ar-meta>*{position:relative}
.ar-meta>*+*::before{content:"";position:absolute;left:-11px;top:.45em;width:3px;height:3px;border-radius:50%;background:var(--grey-3)}

/* a cutout beside the title. The panel matches the artwork's own ground (#fefefe
   against #fff), so nothing depends on a blend mode to make the edge disappear. */
.ar-hero.has-art .in{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:clamp(24px,4vw,64px);align-items:center}
.ar-art{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;position:relative;aspect-ratio:4/5;display:grid;place-items:center}
.ar-art img{position:absolute;inset:-4%;width:108%;height:108%;object-fit:contain;-webkit-mask-image:radial-gradient(ellipse 72% 76% at 50% 48%,#000 62%,transparent 97%);mask-image:radial-gradient(ellipse 72% 76% at 50% 48%,#000 62%,transparent 97%)}

/* --- breadcrumb and progress ---------------------------------------------- */
.ar-crumbs{padding-top:clamp(96px,14vh,150px)}
.ar-crumbs ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--grey-2)}
.ar-crumbs li+li::before{content:"/";margin-right:8px;color:var(--grey-3)}
.ar-crumbs a:hover{color:var(--ink)}

.ar-progress{position:fixed;inset:0 0 auto 0;height:2px;z-index:60;background:transparent;pointer-events:none}
.ar-progress i{display:block;height:100%;background:var(--acc);transform:scaleX(0);transform-origin:0 50%}

/* --- the short version ----------------------------------------------------
   The passage an answer engine is most likely to lift, and the first thing a
   reader deciding whether to spend ten minutes actually needs. */
.ar-tldr{padding-block:clamp(28px,4.5vh,48px)}
.ar-tldr>*{max-width:74ch}
.ar-tldr h2{font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--grey-1);margin-bottom:18px}
.ar-tldr ul{list-style:none;padding:0;margin:0;display:grid;gap:14px;border-left:2px solid var(--acc);padding-left:clamp(18px,2.4vw,30px)}
.ar-tldr li{font-size:clamp(16.5px,1.35vw,19px);line-height:1.55;color:var(--ink)}

/* --- article body + contents rail ------------------------------------------ */
/* The first track is the measure, not the free space. Given 1fr the column
   stretches to the viewport while the prose inside stops at 74ch, which parked
   the rail 246px away from the text it indexes. */
.ar-cols{display:grid;grid-template-columns:minmax(0,74ch) clamp(190px,18vw,250px);justify-content:start;gap:clamp(30px,5vw,80px);align-items:start;border-top:1px solid var(--line)}
.ar-toc{position:sticky;top:96px;order:2;padding-top:clamp(40px,6vh,72px)}
.ar-toc h2{font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--grey-1);margin-bottom:16px}
.ar-toc ol{list-style:none;padding:0;margin:0;display:grid;gap:2px;max-height:min(62vh,640px);overflow-y:auto;overscroll-behavior:contain}
.ar-toc a{display:grid;grid-template-columns:26px minmax(0,1fr);gap:8px;align-items:baseline;padding:7px 8px 7px 0;font-size:14.5px;line-height:1.35;color:var(--grey-1);border-left:2px solid transparent;padding-left:12px;transition:color .25s,border-color .25s}
.ar-toc span{font-size:11.5px;letter-spacing:.06em;color:var(--grey-3);font-variant-numeric:tabular-nums}
.ar-toc a:hover{color:var(--ink)}
.ar-toc li.on a{color:var(--ink);border-left-color:var(--acc)}
.ar-toc li.on span{color:var(--acc)}

/* the body sits in one measured column, because a long read is the job here */
.ar-body{padding-block:clamp(40px,6vh,72px) clamp(50px,8vh,100px);max-width:74ch}
.ar-cols .ar-body{order:1}
.ar-body h2{font-weight:500;font-size:clamp(24px,2.6vw,36px);line-height:1.12;letter-spacing:-.025em;margin:clamp(34px,4vh,52px) 0 14px;scroll-margin-top:96px}
.ar-body h3{font-weight:500;font-size:clamp(19px,1.8vw,24px);letter-spacing:-.015em;margin:clamp(26px,3vh,38px) 0 10px}
.ar-body h4{font-weight:500;font-size:17px;margin:26px 0 8px}
.ar-body p{font-size:clamp(16.5px,1.35vw,19px);line-height:1.62;color:var(--ink);margin-bottom:1.05em}
.ar-body ul,.ar-body ol{margin:0 0 1.3em;padding-left:1.15em;display:grid;gap:9px}
.ar-body li{font-size:clamp(16px,1.3vw,18px);line-height:1.55}
.ar-body li::marker{color:var(--grey-2)}
.ar-body a:not(.btn){text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--grey-3)}
.ar-body a:not(.btn):hover{text-decoration-color:var(--ink)}
.ar-body>*:first-child{margin-top:0}

/* a permalink per section, revealed on hover so it never competes with the
   heading it belongs to */
.ar-anchor{margin-left:.35em;color:var(--grey-3);text-decoration:none;opacity:0;transition:opacity .2s}
.ar-body h2:hover .ar-anchor,.ar-anchor:focus-visible{opacity:1}

/* --- share ----------------------------------------------------------------- */
/* plain links and one button: no third-party script, so nothing is loaded from
   a social network until somebody actually clicks */
.ar-share{border-top:1px solid var(--line);padding-block:24px;display:flex;align-items:center;gap:clamp(14px,2.5vw,28px);flex-wrap:wrap}
.ar-share ul{list-style:none;padding:0;margin:0;display:flex;gap:8px;flex-wrap:wrap}
.ar-share a,.ar-share button{display:inline-block;font:inherit;font-size:14px;color:var(--grey-1);background:none;border:1px solid var(--line);border-radius:999px;padding:8px 16px;cursor:pointer;transition:border-color .25s,color .25s,background .25s}
.ar-share a:hover,.ar-share button:hover{color:var(--ink);border-color:var(--ink)}
.ar-share button.ok{color:var(--ink);border-color:var(--acc)}

/* --- questions ------------------------------------------------------------- */
.ar-faq{padding-block:clamp(40px,6vh,76px);border-top:1px solid var(--line)}
.ar-faq>h2{font-weight:500;font-size:clamp(26px,3.2vw,44px);line-height:1.05;letter-spacing:-.03em;margin-bottom:clamp(20px,3vh,34px)}
.ar-faq-list{max-width:74ch;border-top:1px solid var(--line)}
.ar-faq details{border-bottom:1px solid var(--line)}
.ar-faq summary{list-style:none;cursor:pointer;padding:20px 40px 20px 0;position:relative;font-size:clamp(17px,1.5vw,21px);font-weight:500;letter-spacing:-.01em}
.ar-faq summary::-webkit-details-marker{display:none}
.ar-faq summary::after,.ar-faq summary::before{content:"";position:absolute;right:6px;top:50%;background:var(--ink);transition:transform .3s cubic-bezier(.2,.7,.2,1),opacity .3s}
.ar-faq summary::before{width:14px;height:1.5px;margin-top:-.75px}
.ar-faq summary::after{width:1.5px;height:14px;margin-top:-7px;right:12.25px}
.ar-faq details[open] summary::after{transform:rotate(90deg);opacity:0}
.ar-faq details>div{padding:0 0 22px}
.ar-faq details p{color:var(--grey-1);font-size:clamp(16px,1.3vw,18px);line-height:1.6;max-width:66ch}

/* --- author, related, cta --------------------------------------------------- */
.ar-author{border-top:1px solid var(--line);padding-block:clamp(30px,4.5vh,52px)}
.ar-author>div{max-width:66ch}
.ar-author .n{font-weight:500;font-size:clamp(18px,1.7vw,22px);letter-spacing:-.015em;margin:12px 0 8px}
.ar-author p:last-child{color:var(--grey-1);font-size:16px;line-height:1.6}
.ar-author a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--grey-3)}

.ar-related{border-top:1px solid var(--line);padding-block:clamp(30px,5vh,60px)}
.ar-related>h2{font-weight:500;font-size:clamp(22px,2.4vw,32px);letter-spacing:-.025em;margin-bottom:20px}
.ar-related ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,20px)}
.ar-related li a{display:grid;gap:10px;align-content:start;height:100%;padding:22px;border:1px solid var(--line);border-radius:var(--r);transition:border-color .3s,background .3s}
.ar-related li a:hover{border-color:var(--ink);background:var(--paper)}
.ar-related .k{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey-2)}
.ar-related b{font-weight:500;font-size:clamp(16px,1.4vw,19px);line-height:1.25;letter-spacing:-.015em}
.ar-related .a{color:var(--grey-2)}

/* a quiet call to action at the end of a read */
.ar-cta{border-top:1px solid var(--line);padding-block:clamp(36px,6vh,64px);display:flex;gap:clamp(18px,3vw,44px);align-items:center;justify-content:space-between;flex-wrap:wrap}
.ar-cta p{font-size:clamp(19px,2vw,28px);font-weight:500;letter-spacing:-.02em;max-width:26ch}

/* --- blog front page --------------------------------------------------------
   One lead story at a size that says read this first, then a numbered rail. */
.bl-hero{padding-top:clamp(120px,17vh,190px);padding-bottom:clamp(26px,4.5vh,50px)}
.bl-hero .label{display:block;margin-bottom:18px}
.bl-hero h1{font-weight:500;font-size:clamp(36px,6vw,86px);line-height:.98;letter-spacing:-.04em;max-width:16ch}
.bl-hero .lead{color:var(--grey-1);font-size:clamp(17px,1.5vw,21px);max-width:54ch;margin-top:24px}

.bl-lead{padding-bottom:clamp(30px,5vh,60px)}
.bl-lead a{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(20px,4vw,60px);align-items:center;border:1px solid var(--line);border-radius:var(--r);padding:clamp(18px,2.4vw,30px);transition:border-color .35s,background .35s}
.bl-lead a:hover{border-color:var(--ink)}
.bl-lead figure{margin:0;background:#fff;border-radius:calc(var(--r) - 8px);overflow:hidden;position:relative;aspect-ratio:4/3;display:grid;place-items:center}
.bl-lead img{width:100%;height:100%;object-fit:contain;-webkit-mask-image:radial-gradient(ellipse 74% 78% at 50% 48%,#000 60%,transparent 96%);mask-image:radial-gradient(ellipse 74% 78% at 50% 48%,#000 60%,transparent 96%)}
.bl-lead .k{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--grey-2);margin-bottom:16px}
.bl-lead .k em{font-style:normal;color:var(--acc)}
.bl-lead h2{font-weight:500;font-size:clamp(26px,3.4vw,46px);line-height:1.04;letter-spacing:-.03em}
.bl-lead p{color:var(--grey-1);margin-top:16px;max-width:52ch;font-size:clamp(16px,1.3vw,18px)}
.bl-lead .go{display:inline-flex;align-items:center;gap:10px;margin-top:22px;font-size:15px;font-weight:500}
.bl-lead .go i{font-style:normal;color:var(--acc);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.bl-lead a:hover .go i{transform:translateX(6px)}

.bl-list{padding-bottom:clamp(50px,8vh,100px)}
.bl-bar{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-bottom:18px}
.bl-bar h2{font-weight:500;font-size:clamp(20px,2.2vw,30px);letter-spacing:-.025em}
.bl-filter{display:flex;gap:7px;flex-wrap:wrap}
.bl-filter button{font:inherit;font-size:13.5px;color:var(--grey-1);background:none;border:1px solid var(--line);border-radius:999px;padding:7px 15px;cursor:pointer;transition:color .25s,border-color .25s,background .25s}
.bl-filter button:hover{color:var(--ink);border-color:var(--ink)}
.bl-filter button.on{background:var(--ink);border-color:var(--ink);color:#fff}

.bl-items{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.bl-items li a{display:grid;grid-template-columns:46px minmax(0,1fr) 210px 24px;gap:clamp(14px,2vw,30px);align-items:baseline;padding:26px 10px;border-bottom:1px solid var(--line);transition:padding .35s cubic-bezier(.2,.7,.2,1),background .35s}
@media (hover:hover){.bl-items li a:hover{padding-inline:22px;background:var(--paper)}}
.bl-items .i{font-size:12px;letter-spacing:.06em;color:var(--grey-3);font-variant-numeric:tabular-nums}
.bl-items b{font-weight:500;font-size:clamp(18px,1.8vw,25px);line-height:1.2;letter-spacing:-.02em;display:block}
.bl-items em{font-style:normal;display:block;color:var(--grey-1);font-size:15.5px;line-height:1.5;margin-top:7px;max-width:62ch}
.bl-items .m{display:flex;flex-direction:column;gap:5px;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--grey-2)}
.bl-items .tp{color:var(--acc)}
.bl-items .a{color:var(--grey-2);justify-self:end}
.bl-empty{padding:40px 10px;color:var(--grey-1)}

@media (max-width:1080px){
  .ar-cols{grid-template-columns:minmax(0,1fr)}
  /* above the article rather than beside it, and no longer sticky: a rail
     pinned to the top of a phone screen eats the read */
  .ar-toc{position:static;order:1;padding-top:clamp(28px,4vh,40px);max-width:74ch}
  .ar-toc ol{max-height:none;grid-template-columns:repeat(2,minmax(0,1fr))}
  .ar-cols .ar-body{order:2;padding-top:clamp(26px,4vh,40px)}
}

@media (max-width:860px){
  .ar-hero.has-art .in{grid-template-columns:minmax(0,1fr)}
  /* the cutouts are portrait, so a wide panel would crop them to nothing */
  .ar-art{aspect-ratio:4/3;order:-1;max-width:340px}
  .ar-art img{inset:0;width:100%;height:100%}
  .ar-toc ol{grid-template-columns:minmax(0,1fr)}
  .ar-related ul{grid-template-columns:minmax(0,1fr)}
  .bl-lead a{grid-template-columns:minmax(0,1fr)}
  .bl-lead figure{aspect-ratio:16/10;max-width:420px}
  .bl-items li a{grid-template-columns:36px minmax(0,1fr);gap:14px;padding:22px 8px}
  .bl-items .m{flex-direction:row;gap:14px;grid-column:2;margin-top:10px}
  .bl-items .a{display:none}
}