/* storystak.com/articles: one stylesheet for every article and the index.
   Tokens mirror the home page (index.html :root). Owner-managed: a change here
   restyles every article without a rebuild. */
:root{
  --ink:#0F0F0F; --coffee:#210F07; --paper:#FAF9F7; --snow:#FCF7F5; --petal:#F7E3DA;
  --ground:#EFE8E0;
  --accent:#C45D2C; --accent-light:#E8724A; --accent-bg:#FDF0EA; --accent-ink:#A84B1F;
  --muted:#6B6560; --faint:#8A837D; --border:#E2DDD7;
  --serif:'Crimson Pro',Georgia,serif;
  --sans:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --ease:cubic-bezier(0.16,1,0.3,1);
  --shadow:0 10px 30px rgba(33,15,7,.06);
  --radius:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; font-family:var(--sans); font-size:16px; line-height:1.65; color:var(--ink);
  background:var(--ground) url('/assets/dots.svg') repeat; background-size:120px 90px;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body::before{
  content:''; position:absolute; inset:0 0 auto 0; height:340px; pointer-events:none; z-index:0;
  background:linear-gradient(180deg, rgba(196,93,44,.12), rgba(196,93,44,0));
}
h1,h2,h3{font-family:var(--serif); font-weight:550; line-height:1.12; margin:0}
a{color:inherit}
img{display:block; max-width:100%}
.wrap{max-width:1080px; margin:0 auto; padding:0 32px; position:relative; z-index:1}
.skip{position:absolute; left:-999px; top:8px; z-index:200; background:#fff; padding:10px 16px; border-radius:10px}
.skip:focus{left:16px}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}

/* NAV (same pill as the home page) */
.navbar{position:sticky; top:16px; z-index:100; padding:0 20px}
.nav-pill{
  max-width:1080px; margin:0 auto; background:#fff; border-radius:999px;
  box-shadow:0 8px 28px rgba(33,15,7,.10);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:10px 10px 10px 26px;
}
.nav-pill img{height:26px; width:auto}
.nav-links{display:flex; gap:26px; align-items:center}
.nav-links a{font-size:14px; font-weight:500; text-decoration:none; color:var(--muted); transition:color .2s var(--ease)}
.nav-links a:hover{color:var(--ink)}
.nav-links a.nav-cta{
  font-weight:600; background:var(--accent); color:#fff; padding:12px 24px; border-radius:999px;
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap; transition:background .25s var(--ease);
}
.nav-links a.nav-cta:hover{background:var(--accent-light); color:#fff}

.draft-flag{
  position:relative; z-index:1; max-width:1080px; margin:18px auto 0; padding:10px 18px; text-align:center;
  background:var(--accent-bg); color:var(--coffee); border-radius:12px; font-size:13px;
}
.draft-flag code{font-family:var(--mono); font-size:12px}

/* HEADER */
.art-head{padding-top:56px; padding-bottom:32px; z-index:5}
.crumbs{display:flex; gap:10px; font-size:13px; color:var(--muted); margin-bottom:20px}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--ink); text-decoration:underline}
.kicker{font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink); margin:0 0 12px}
/* header plate: the featured illustration sits behind the headline, like the share card */
.art-head.has-art .head-plate{
  display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:28px; align-items:center;
  background:#F4EEE8 url('/assets/dots.svg') repeat; background-size:120px 90px;
  border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:44px 40px 44px 52px; position:relative; z-index:2;
}
.head-art{display:block; width:100%; height:100%; min-height:340px; align-self:stretch}
/* the paper still (art.webp): its box is the picture's own, so the edge fade lands on its edges */
.head-paper{width:auto; max-width:100%; height:auto; max-height:460px; min-height:0; align-self:center; justify-self:center;
  -webkit-mask-image:radial-gradient(closest-side, #000 76%, transparent 100%); mask-image:radial-gradient(closest-side, #000 76%, transparent 100%)}
.art-head h1{font-size:clamp(30px,3.3vw,42px); letter-spacing:-.015em; line-height:1.1; max-width:22ch}
.dek{margin:16px 0 0; max-width:56ch; font-size:16.5px; line-height:1.6; color:var(--muted)}
.byline{margin:18px 0 0; font-size:13.5px; color:var(--muted); display:flex; align-items:center; gap:10px}
.avatar{width:32px; height:32px; border-radius:50%; object-fit:cover; flex:none; box-shadow:0 0 0 2px #fff}
.byline a{color:var(--ink); font-weight:600; text-decoration:none}
.byline a:hover{text-decoration:underline}

/* ASK YOUR AI: the home page's split button, ported */
.icon{width:1em; height:1em; display:inline-block; fill:currentColor; vertical-align:middle}
.ai-menu{position:relative; display:inline-block; margin-top:22px}
.ai-split{display:inline-flex; align-items:stretch; background:var(--snow); border:1px solid var(--border); border-radius:8px; overflow:hidden}
.ai-split button{font-family:var(--sans); color:var(--coffee); background:transparent; border:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px; transition:background .2s var(--ease)}
.ai-split-main{font-size:13.5px; font-weight:600; padding:9px 14px}
.ai-split-toggle{padding:0 10px; border-left:1px solid var(--border)}
.ai-split button:hover{background:var(--petal)}
.ai-split button:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
.ai-split .icon{font-size:16px; color:var(--accent)}
.ai-split-toggle .icon{font-size:13px; color:var(--muted); transition:transform .2s var(--ease)}
.ai-split-toggle[aria-expanded="true"] .icon{transform:rotate(180deg)}
.ai-dropdown{position:absolute; top:calc(100% + 8px); left:0; width:min(300px, calc(100vw - 40px)); background:var(--snow); border:1px solid var(--border); border-radius:12px; box-shadow:0 14px 40px rgba(33,15,7,.14); padding:6px; z-index:200}
.ai-dropdown[hidden]{display:none}
.ai-item{display:flex; align-items:flex-start; gap:12px; width:100%; padding:10px; border:none; border-radius:8px; background:transparent; color:var(--coffee); font-family:var(--sans); text-align:left; text-decoration:none; cursor:pointer; transition:background .15s var(--ease)}
.ai-item:hover, .ai-item:focus-visible{background:var(--petal); outline:none}
.ai-item-icon{display:inline-flex; padding-top:1px}
.ai-item-icon .icon{font-size:20px; color:var(--accent)}
.ai-item-text{display:flex; flex-direction:column; gap:1px}
.ai-item-title{font-size:14px; font-weight:600; line-height:1.3}
.ai-item-sub{font-size:12.5px; color:var(--muted); line-height:1.35}
.ai-item-arrow{margin-left:auto; align-self:center; font-size:14px; color:var(--muted)}

/* BODY GRID: margin rail + one white sheet */
.art-grid{display:grid; grid-template-columns:200px minmax(0,1fr); gap:44px; align-items:start}
.toc-rail{position:sticky; top:104px; padding-top:12px; font-size:13.5px; line-height:1.45; max-height:calc(100vh - 124px); overflow-y:auto; scrollbar-width:thin}
.toc-label{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin:0 0 14px}
.toc-rail ol, .toc-inline ol{list-style:none; margin:0; padding:0; counter-reset:toc; display:flex; flex-direction:column; gap:10px}
.toc-rail li, .toc-inline li{counter-increment:toc; display:grid; grid-template-columns:24px 1fr}
.toc-rail li::before, .toc-inline li::before{content:counter(toc, decimal-leading-zero); font-family:var(--mono); font-size:11px; color:var(--faint); padding-top:2px}
.toc-rail a, .toc-inline a{color:var(--muted); text-decoration:none}
.toc-rail a:hover, .toc-inline a:hover{color:var(--ink)}
.toc-inline{display:none}

.sheet{background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:44px 56px 52px; min-width:0}
.checked{margin:0 0 28px; font-family:var(--mono); font-size:12px; line-height:1.6; color:var(--faint)}

/* PROSE */
.prose{max-width:660px; font-size:16.5px; line-height:1.68; color:#2A2420}
.prose > :first-child{margin-top:0}
.prose p{margin:0 0 1.15em}
.prose h2{font-size:clamp(23px,2vw,28px); letter-spacing:-.01em; margin:2em 0 .55em; color:var(--ink); scroll-margin-top:110px}
.prose h3{font-size:20px; margin:1.6em 0 .45em; color:var(--ink); scroll-margin-top:110px}
.prose strong{color:var(--ink); font-weight:600}
.prose a{color:var(--accent-ink); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px}
.prose a:hover{color:var(--accent)}
.prose ul, .prose ol{margin:0 0 1.2em; padding-left:1.3em}
.prose li{margin:0 0 .5em}
.prose li::marker{color:var(--accent)}
.prose hr{border:0; height:1px; background:var(--border); margin:2.4em 0}
.prose code{font-family:var(--mono); font-size:.88em; background:var(--paper); padding:.1em .35em; border-radius:5px}

/* PULL QUOTE: set type, no box */
.pull{margin:2.2em 0; padding:0}
.pull blockquote{margin:0; font-family:var(--serif); font-style:italic; font-weight:550; font-size:clamp(21px,1.8vw,24px); line-height:1.32; color:var(--coffee)}
.pull blockquote p{margin:0}
.pull blockquote p::before{content:'\201C'; color:var(--accent); margin-right:.08em}
.pull blockquote p:last-child::after{content:'\201D'; color:var(--accent); margin-left:.04em}
.pull figcaption{margin-top:12px; font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--muted)}

/* SCREENSHOTS: product UI set on the ground colour, like a print plate */
.shot{margin:2.2em 0 2.4em}
.shot img{width:100%; height:auto; border-radius:14px; border:1px solid var(--border); box-shadow:0 14px 34px -18px rgba(33,15,7,.35); background:var(--ground)}
.shot figcaption{margin-top:12px; font-size:13.5px; line-height:1.55; color:var(--muted)}

/* BLUEPRINT MOTION, the art gallery only (/articles/art/): flow lines move the
   way information travels, the focal piece settles once, missing pieces
   breathe. Article pages show the paper still (art.webp), and nothing moves. */
.art-frame .iso-flow polyline{animation:iso-flow 1.4s linear infinite}
.art-frame .iso-flow-ink polyline{animation:iso-flow-ink 2.6s linear infinite}
.art-frame .iso-focus{transform-box:fill-box; animation:iso-settle 1s var(--ease) .25s both}
.art-frame .iso-ghost{animation:iso-breathe 4.5s ease-in-out infinite}
/* a piece with enter rises, lowers or slides into place once, eased */
.art-frame .iso-enter{animation:iso-enter 1.9s cubic-bezier(.22,1,.36,1) .35s both}
.art-frame .iso-flow, .art-frame .iso-flow-ink{animation:iso-appear .8s ease-out 1.1s both}
@keyframes iso-flow{to{stroke-dashoffset:-20}}
@keyframes iso-flow-ink{to{stroke-dashoffset:-16}}
@keyframes iso-settle{from{transform:translateY(-14px); opacity:0} to{transform:none; opacity:1}}
@keyframes iso-breathe{0%,100%{opacity:1} 50%{opacity:.55}}
@keyframes iso-enter{0%{transform:translate(var(--ex),var(--ey)); opacity:0} 25%{opacity:1} 100%{transform:none; opacity:1}}
@keyframes iso-appear{from{opacity:0} to{opacity:1}}
@media (prefers-reduced-motion:reduce){.art-frame .iso-flow polyline, .art-frame .iso-flow-ink polyline, .art-frame .iso-focus, .art-frame .iso-ghost, .art-frame .iso-enter, .art-frame .iso-flow, .art-frame .iso-flow-ink{animation:none}}

/* FEATURED IMAGE */
.hero-art{margin:0 auto 40px}
.hero-art svg{display:block; width:100%; height:auto; border-radius:var(--radius); box-shadow:var(--shadow)}
.card-art{display:block; margin:-30px -30px 8px; border-radius:var(--radius) var(--radius) 0 0; overflow:hidden; aspect-ratio:1200/440}
.card-art svg{display:block; width:100%; height:100%}
/* the paper still is tall and the strip is wide: scale it so the subject (the middle ~70% of the frame) nearly fills the strip's height */
.card-art:has(.card-paper){display:flex; align-items:center; justify-content:center; background:#F4EEE8 url('/assets/dots.svg') repeat; background-size:120px 90px}
.card-paper{display:block; flex:none; height:122%; width:auto;
  -webkit-mask-image:radial-gradient(closest-side, #000 80%, transparent 100%); mask-image:radial-gradient(closest-side, #000 80%, transparent 100%)}
.hero-img{margin-top:0; margin-bottom:40px}
.hero-img img{width:100%; height:auto; border-radius:var(--radius); box-shadow:var(--shadow)}

/* TABLE: scrolls sideways on phones, first column pinned */
.table-wrap{margin:1.8em 0 2em; overflow-x:auto; border-radius:14px; border:1px solid var(--border); -webkit-overflow-scrolling:touch}
.prose table{border-collapse:collapse; width:100%; min-width:760px; font-size:14px; line-height:1.45}
.prose th, .prose td{padding:12px 14px; text-align:left; vertical-align:top; border-bottom:1px solid var(--border)}
.prose thead th{background:var(--coffee); color:var(--snow); font-weight:600; font-size:13px}
.prose thead th:first-child{background:var(--coffee)}
.prose tbody th{font-weight:600; color:var(--ink); background:var(--paper); position:sticky; left:0; min-width:150px}
.prose thead th:first-child{position:sticky; left:0}
.prose tbody tr:last-child th, .prose tbody tr:last-child td{border-bottom:0}

/* FAQ, SOURCES, AUTHOR: sections of the sheet, separated by rules */
.faq, .sources, .author-box{max-width:680px; border-top:1px solid var(--border); margin-top:48px; padding-top:36px}
.faq h2, .sources h2{font-size:clamp(23px,2vw,28px); margin:0 0 22px; scroll-margin-top:110px}
.faq-item{border-bottom:1px solid var(--border)}
.faq-item:first-of-type{border-top:1px solid var(--border)}
.faq-item summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 2px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:''; flex:none; width:9px; height:9px; margin-right:6px; border-right:1.5px solid var(--muted); border-bottom:1.5px solid var(--muted); transform:rotate(45deg) translateY(-3px); transition:transform .2s var(--ease)}
.faq-item[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.faq-item summary:hover h3{color:var(--accent-ink)}
.faq-item summary:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:6px}
.faq-item h3{font-family:var(--sans); font-size:16px; font-weight:600; line-height:1.45; margin:0; transition:color .15s var(--ease)}
.faq-a{padding:0 2px 12px}
.faq-item p{margin:0 0 .8em; font-size:15.5px; line-height:1.68; color:#2A2420}
.faq-item a, .sources a, .author-box a{color:var(--accent-ink)}
.sources ol{margin:0; padding-left:1.3em; font-size:14px; line-height:1.6; color:var(--muted)}
.sources li{margin:0 0 .5em; overflow-wrap:anywhere}
.author-box.has-photo{display:grid; grid-template-columns:72px minmax(0,1fr); gap:18px; align-items:start}
.author-photo{width:72px; height:72px; border-radius:50%; object-fit:cover}
.author-name{font-family:var(--serif); font-size:22px; font-weight:550; margin:0; color:var(--ink)}
.author-role{margin:2px 0 10px; font-size:13px; color:var(--muted)}
.author-box p:last-child{margin:0; font-size:15px; line-height:1.65; color:#2A2420}

/* CTA BAND */
.cta-band{margin-top:64px}
.cta-band{
  background:var(--coffee); color:var(--snow); border-radius:var(--radius); padding:56px 48px; text-align:center;
  max-width:1016px;
}
.cta-band h2{font-size:clamp(30px,3.6vw,44px); letter-spacing:-.02em; color:var(--snow)}
.cta-band h2 em{font-style:normal}
.cta-band p{margin:16px auto 28px; max-width:52ch; color:rgba(252,247,245,.8); font-size:16.5px}
.btn-primary{
  display:inline-flex; align-items:center; gap:10px; background:var(--accent); color:#fff; text-decoration:none;
  font-size:16px; font-weight:600; padding:16px 34px; border-radius:999px;
  box-shadow:0 10px 24px rgba(196,93,44,.28); transition:background .25s var(--ease), transform .15s var(--ease);
}
.btn-primary:hover{background:var(--accent-light); transform:translateY(-1px)}

/* ABOUT */
.about{margin-top:56px; max-width:744px}
.about h2{font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin:0 0 10px}
.about p{margin:0; font-size:15px; line-height:1.65; color:var(--muted)}
.about a{color:var(--accent-ink)}

/* CARDS: the index and "Keep reading" */
.card-img{width:calc(100% + 60px); max-width:none; height:auto; aspect-ratio:1200/630; object-fit:cover; margin:-30px -30px 8px; border-radius:var(--radius) var(--radius) 0 0}
.related{margin-top:64px}
.related h2{font-size:30px; margin:0 0 22px}
.card-list{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px}
.card{
  display:flex; flex-direction:column; gap:10px; background:#fff; border-radius:var(--radius); box-shadow:var(--shadow);
  padding:30px 30px 26px; text-decoration:none; transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.card:hover{transform:translateY(-2px); box-shadow:0 16px 36px rgba(33,15,7,.09)}
.card-kicker{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink)}
.card-title{font-family:var(--serif); font-weight:550; font-size:26px; line-height:1.15; color:var(--ink)}
.card-summary{font-size:15px; line-height:1.6; color:var(--muted)}
.card-meta{margin-top:auto; padding-top:8px; font-size:13px; color:var(--faint); display:flex; align-items:center; gap:8px}
.card-meta .avatar{width:22px; height:22px; box-shadow:none}
.empty{color:var(--muted)}

/* HEADER ART GALLERY (articles/art/) */
.art-replay{margin:18px 0 0}
.art-replay button{font-family:var(--sans); font-size:13.5px; font-weight:600; color:var(--coffee); background:var(--snow); border:1px solid var(--border); border-radius:8px; padding:9px 14px; cursor:pointer}
.art-replay button:hover{background:var(--petal)}
.art-section{margin-top:28px}
.art-section h2{font-size:28px; margin:0 0 6px}
.art-note{margin:0 0 20px; color:var(--muted); font-size:15px}
.gallery-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px}
.art-tile{margin:0}
.art-frame{background:#F4EEE8 url('/assets/dots.svg') repeat; background-size:120px 90px; border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); aspect-ratio:380/430; padding:18px; display:flex}
.art-frame .head-art{width:100%; height:100%; min-height:0}
.art-frame .head-paper{width:auto; max-width:100%; margin:0 auto}
.art-tile figcaption{display:flex; flex-direction:column; gap:3px; margin-top:12px}
.art-name{font-family:var(--serif); font-weight:550; font-size:19px; line-height:1.2; text-transform:capitalize}
.art-name a{text-decoration:none; text-transform:none}
.art-name a:hover{color:var(--accent-ink)}
.art-sub{font-family:var(--mono); font-size:11px; color:var(--faint)}
.art-alt{font-size:13.5px; line-height:1.5; color:var(--muted)}
@media (max-width:980px){ .gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:600px){ .gallery-grid{grid-template-columns:minmax(0,1fr)} }

/* FOOTER */
.site-foot{padding:72px 0 64px; position:relative; z-index:1}
.foot-inner{display:flex; flex-direction:column; align-items:center; gap:16px}
.foot-mark{width:40px; height:auto; opacity:.7}
.foot-links{display:flex; flex-wrap:wrap; justify-content:center; gap:8px 22px}
.foot-links a{font-size:14px; font-weight:500; color:var(--muted); text-decoration:none}
.foot-links a:hover{color:var(--ink)}
.foot-copy{font-size:12px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}

/* RESPONSIVE */
@media (max-width:980px){
  .art-grid{grid-template-columns:minmax(0,1fr)}
  .toc-rail{display:none}
  .toc-inline{display:block; margin:0 0 26px; padding:14px 18px; background:var(--paper); border-radius:14px; font-size:14px}
  .toc-inline summary{cursor:pointer; font-weight:600; font-size:14px}
  .toc-inline ol{margin-top:14px}
}
@media (max-width:760px){
  .wrap{padding:0 16px}
  .navbar{padding:0 12px}
  .nav-links a:not(.nav-cta){display:none}
  .nav-links a.nav-cta{padding:10px 16px; font-size:13px}
  .nav-pill{padding:8px 8px 8px 18px}
  .nav-pill img{height:22px}
  .art-head{padding-top:36px; padding-bottom:24px}
  .art-head.has-art .head-plate{grid-template-columns:minmax(0,1fr); gap:8px; padding:28px 22px 18px}
  .head-art{height:240px; min-height:0; margin:0 auto; order:-1}
  .head-paper{height:auto; max-height:300px; width:auto}
  .art-head h1{font-size:28px}
  .dek{font-size:15.5px}
  .sheet{padding:30px 20px 36px; border-radius:18px}
  .prose{font-size:16px}
  .card-list{grid-template-columns:minmax(0,1fr)}
  .prose table{font-size:13.5px; min-width:680px}
  .prose th, .prose td{padding:10px 11px}
  .prose tbody th{min-width:112px}
  .card{padding:24px 22px}
  .card-img{width:calc(100% + 44px); margin:-24px -22px 8px}
  .card-art{margin:-24px -22px 8px}
  .hero-art{margin-bottom:28px}
  .hero-art svg{border-radius:18px}
  .hero-img{margin-bottom:28px}
  .shot img{border-radius:10px}
  .cta-band{padding:40px 22px; border-radius:18px; margin-left:16px; margin-right:16px}
  .draft-flag{margin:14px 16px 0}
}

@media print{
  .navbar, .toc-rail, .toc-inline, .cta-band, .site-foot, .related, .draft-flag, .skip{display:none}
  body{background:#fff}
  .sheet{box-shadow:none; padding:0}
  .art-grid{display:block}
}