/* Octave · articles · 9 Sep 2026
   The article page in the tribe.ai register: a centred title block, one image on
   top, a sticky chapter list on the left with a reading ring, the prose at 720px,
   the author at the bottom. Paper ground and the site's own faces; the cyan is
   the one accent the statement sections already brought in. Loads after site.css,
   which carries the nav, the footer and the tokens. */
:root{
  --font-serif:ui-serif,"New York","Iowan Old Style",Palatino,Georgia,serif;
  --font-caption:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Inter,Roboto,sans-serif;
  --cyan:#65D9EE;
  --teal:#0A99C3;
  --header-offset:140px;
}
html.article{background:var(--page)}
.article-main{width:100%;background:var(--page);color:var(--ink);text-wrap:pretty}
.article-head,.article-media-wrap,.article-body-wrap,.article-author-wrap{max-width:1440px;margin:0 auto;padding-left:20px;padding-right:20px}
@media (min-width:1024px){.article-head,.article-media-wrap,.article-body-wrap,.article-author-wrap{padding-left:40px;padding-right:40px}}
.article-head{padding-top:160px;padding-bottom:64px;container-type:inline-size}
.article-head-inner{position:relative}
.article-back{position:absolute;left:calc(50% - 50cqw);top:0;display:none;width:48px;height:48px;align-items:center;justify-content:center;border-radius:999px;border:1px solid rgba(34,35,35,.15);color:rgba(34,35,35,.7);transition:color .2s,border-color .2s}
.article-back svg{width:18px;height:18px}
.article-back:hover{border-color:var(--cyan);color:var(--teal)}
@media (min-width:1024px){.article-back{display:flex}}
.article-title-block{max-width:920px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:32px;text-align:center}
@media (min-width:1024px){.article-title-block{padding-top:16px}}
.article-tag,.article-meta,.article-author-role,.article-author-link,.article-chapters-label{font-family:var(--font-caption);font-size:12px;line-height:1.35;letter-spacing:.05em;text-transform:uppercase}
.article-tag{margin:0}
.article-tag a{color:inherit;text-decoration:none;transition:opacity .2s}
.article-tag a:hover{opacity:.6}
.article-head h1{font-family:var(--font-serif);font-weight:400;font-size:clamp(2.25rem,5vw,3.75rem);line-height:1.15;letter-spacing:-.01em;text-wrap:balance;margin:0;color:var(--ink)}
.article-dek{max-width:740px;font-size:clamp(1.125rem,1.8vw,1.375rem);font-weight:300;line-height:1.5;color:rgba(34,35,35,.7);text-wrap:balance;margin:0}
.article-meta{display:flex;align-items:center;gap:12px;color:rgba(34,35,35,.6);margin:8px 0 0}
.article-meta a{color:rgba(34,35,35,.9);text-decoration:none;transition:opacity .2s}
.article-meta a:hover{opacity:.6}
.article-media-wrap{padding-bottom:80px}
.article-media{max-width:1100px;margin:0 auto;position:relative;overflow:hidden;border-radius:8px;background:var(--surface);aspect-ratio:16/9}
.article-media img,.article-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.article-body-wrap{padding-bottom:80px}
.article-body{position:relative}
.article-aside{position:absolute;top:0;left:calc(50% - 50vw + 1rem);width:210px;height:100%;display:none}
@media (min-width:1280px){.article-aside{display:block}}
@media (min-width:1536px){.article-aside{left:calc(50% - 50vw + 2rem)}}
.article-aside-sticky{position:sticky;top:max(var(--header-offset),24px);padding-bottom:40px}
/* the chapter list */
.article-chapters{transition:opacity .5s ease-out}
.article-chapters[data-hidden]{opacity:0;pointer-events:none}
.article-chapters .ring{width:24px;height:24px;transform:rotate(-90deg);display:block}
.article-chapters .ring .track{stroke:rgba(34,35,35,.15)}
.article-chapters .ring .bar{stroke:var(--cyan)}
.article-chapters-title{margin:16px 0 24px;font-size:15px;font-weight:500;line-height:1.375;color:var(--ink)}
.article-chapters ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.article-chapters li{margin:0}
.article-chapters a{display:block;border-radius:6px;padding:6px 12px;font-size:14px;line-height:1.375;color:rgba(34,35,35,.4);text-decoration:none;transition:background-color .2s,color .2s}
.article-chapters a:hover{background:rgba(34,35,35,.03);color:rgba(34,35,35,.7)}
.article-chapters a[aria-current="true"]{background:rgba(34,35,35,.06);color:var(--ink)}
.article-chapters a.lvl3{padding-left:1.5rem}
.article-chapters a.lvl4{padding-left:2.25rem}
.article-summarize{margin-top:32px;border-top:1px solid rgba(34,35,35,.1);padding-top:24px}
.article-chapters-label{margin:0 0 12px;font-size:10px;color:rgba(34,35,35,.4)}
.article-summarize-row{display:flex;align-items:center;gap:8px}
.article-summarize-row a{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;border:1px solid rgba(34,35,35,.15);color:rgba(34,35,35,.5);transition:border-color .3s,color .3s}
.article-summarize-row a:hover{border-color:var(--cyan);color:var(--teal)}
.article-summarize-row svg{width:16px;height:16px;display:block}
/* the prose */
.article-prose{max-width:720px;margin:0 auto;width:100%}
.article-prose p{font-size:16px;line-height:1.75;color:rgba(34,35,35,.9);margin:0 0 20px}
.article-prose h2{font-family:var(--font-serif);font-weight:400;font-size:clamp(1.5rem,5vw,2.5rem);line-height:1.25;letter-spacing:-.01em;margin:clamp(2.5rem,6vw,4.5rem) 0 16px;color:var(--ink);scroll-margin-top:140px}
.article-prose h3{font-size:1.25rem;font-weight:600;line-height:1.3;margin:clamp(2rem,4vw,3rem) 0 12px;scroll-margin-top:140px}
.article-prose>:first-child{margin-top:0}
.article-prose a{color:var(--teal);text-decoration:underline;text-underline-offset:.15em}
.article-prose strong{font-weight:600;color:var(--ink)}
.article-prose em{font-style:italic}
.article-prose blockquote{margin:24px 0;border-left:2px solid var(--cyan);padding-left:24px;font-family:var(--font-serif);font-size:clamp(1.125rem,1.8vw,1.5rem);line-height:1.4;color:var(--ink);font-style:normal}
.article-prose blockquote p{font:inherit;color:inherit;margin:0 0 1em}
.article-prose blockquote p:last-child{margin-bottom:0}
.article-prose ol{counter-reset:article-ol;list-style:none;padding:0;margin:0 0 20px}
.article-prose ol>li{counter-increment:article-ol;display:flex;align-items:baseline;gap:1em;font-size:16px;line-height:1.7;color:rgba(34,35,35,.9);margin:0 0 8px}
.article-prose ol>li::before{content:counter(article-ol,decimal-leading-zero);color:var(--teal);font-variant-numeric:tabular-nums;flex-shrink:0;font-size:.75em;line-height:1;font-family:var(--font-caption)}
.article-prose ul{list-style:none;padding:0;margin:0 0 20px;display:flex;flex-direction:column;gap:12px}
.article-prose ul>li{border-left:2px solid var(--cyan);padding-left:20px;margin:0;font-size:16px;line-height:1.6;color:rgba(34,35,35,.8)}
.article-prose ul>li strong,.article-prose ol>li strong{color:var(--ink)}
@media (min-width:1024px){.article-prose p,.article-prose ol>li,.article-prose ul>li{font-size:18px}.article-prose h3{font-size:1.375rem}}
/* the author */
.article-author-wrap{padding-bottom:128px}
.article-author{max-width:720px;margin:0 auto;display:flex;gap:24px;border-top:1px solid rgba(34,35,35,.1);padding-top:40px}
.article-author img{width:72px;height:72px;border-radius:999px;object-fit:cover;flex-shrink:0;display:block}
.article-author>div{display:flex;flex-direction:column;gap:8px}
.article-author-name{font-family:var(--font-serif);font-size:18px;line-height:1.4;margin:0;color:var(--ink)}
.article-author-name a{color:inherit;text-decoration:none;transition:opacity .2s}
.article-author-name a:hover{opacity:.6}
.article-author-role{margin:0;color:rgba(34,35,35,.5)}
.article-author-link{color:var(--teal);text-decoration:none;width:fit-content}
.article-author-link:hover{text-decoration:underline}
@media (max-width:639px){.article-author{flex-direction:column}}
/* the site nav sits on paper here; keep the page under it, not the film */
.article-main .site-nav{position:fixed}
@media (prefers-reduced-motion:reduce){.article-chapters,.article-chapters a,.article-back,.article-summarize-row a{transition:none}}