/* Journal pages. Loaded next to styles.css, which owns the brand tokens. */

/* ---------- shared page chrome ---------- */
.topbar-right{display:flex;align-items:center;gap:clamp(16px,2.6vw,34px)}
.topbar-journal,.topbar-links a{font:600 .72rem "Oxanium",sans-serif;letter-spacing:.16em;color:#9aa5b0;text-decoration:none;padding:7px 0;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.topbar-journal:hover,.topbar-links a:hover,.topbar-links a.is-current{color:var(--signal);border-color:var(--signal)}
.topbar-links{display:flex;align-items:center;gap:clamp(16px,2.4vw,30px)}
.topbar-article-title{position:absolute;left:calc(4.5vw + 210px);right:calc(4.5vw + 360px);margin:0;overflow:hidden;color:var(--lane);font:600 clamp(.68rem,1vw,.82rem)/1.25 "Oxanium",sans-serif;letter-spacing:.01em;text-align:center;text-overflow:ellipsis;white-space:nowrap;opacity:0;transform:translateY(5px);transition:opacity .2s,transform .2s;pointer-events:none}
.topbar-article-title.is-visible{opacity:1;transform:translateY(0)}
body.page{overflow-x:hidden}
/* The blur sits on two masked layers, not on the bar itself.
   A backdrop-filter stops dead at the element edge, so the mask is what fades it out. */
body.page .topbar:before,body.page .topbar:after{content:"";position:absolute;z-index:-1;left:0;right:0;top:0;pointer-events:none}
body.page .topbar:before{bottom:-56px;backdrop-filter:blur(3px);background:linear-gradient(180deg,rgba(8,11,16,.94),rgba(8,11,16,.62) 44%,rgba(8,11,16,.22) 74%,transparent);-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 38%,rgba(0,0,0,.6) 68%,rgba(0,0,0,.2) 88%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 38%,rgba(0,0,0,.6) 68%,rgba(0,0,0,.2) 88%,transparent 100%)}
body.page .topbar:after{bottom:-18px;backdrop-filter:blur(12px);-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 46%,rgba(0,0,0,.45) 74%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 46%,rgba(0,0,0,.45) 74%,transparent 100%)}
.page-main{position:relative;z-index:1;min-height:100svh;padding:clamp(120px,16vh,190px) 6vw clamp(60px,9vh,110px);max-width:1500px;margin:0 auto}
.page-main>.ambient{z-index:-1}
.page-head{position:relative;max-width:1100px;margin:0 auto clamp(54px,8vh,96px)}
.page-title{margin:18px 0 26px;font:700 clamp(3.4rem,11vw,9rem)/.82 "Oxanium",sans-serif;letter-spacing:-.075em;display:flex;flex-wrap:wrap;gap:0 .25em}
.page-title .title-outline{-webkit-text-stroke:2px rgba(245,247,248,.72);transform:none}
.page-title .title-solid{transform:none;text-shadow:9px 9px 0 rgba(128,103,255,.18)}
.page-lede{margin:0;max-width:620px;color:#aeb8c1;font-size:clamp(1rem,1.3vw,1.2rem);line-height:1.65}
.page-meter{margin-top:30px;display:flex;align-items:center;gap:12px;font:600 .7rem "Oxanium",sans-serif;letter-spacing:.16em;color:#63707c}
.page-meter i{width:70px;height:1px;background:rgba(245,247,248,.28)}
.page-meter span:last-child{color:var(--signal)}
.page-foot{margin-top:clamp(60px,9vh,110px);padding-top:38px;border-top:1px solid rgba(245,247,248,.12);display:flex;flex-wrap:wrap;gap:22px;align-items:center;justify-content:space-between}
.copyright.is-static{position:static;bottom:auto}

/* ---------- journal index ---------- */
.article-list{display:flex;flex-direction:column;gap:20px;max-width:1100px;margin:0 auto}
.article-card{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:clamp(20px,3vw,44px);padding:clamp(24px,3vw,38px);text-decoration:none;color:inherit;border:1px solid rgba(245,247,248,.14);background:linear-gradient(135deg,rgba(128,103,255,.07),transparent 42%),#0c121a;clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px);transition:border-color .25s,background .25s,transform .25s}
.article-card:before{content:"";position:absolute;inset:0;opacity:0;background-image:linear-gradient(rgba(34,211,166,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(34,211,166,.055) 1px,transparent 1px);background-size:38px 38px;transition:opacity .25s;pointer-events:none}
.article-card:hover,.article-card:focus-visible{border-color:rgba(34,211,166,.55);background:linear-gradient(135deg,rgba(34,211,166,.09),transparent 46%),#0d141d;transform:translateY(-2px);outline:0}
.article-card:hover:before,.article-card:focus-visible:before{opacity:1}
.article-card>*{position:relative;z-index:2}
.card-number{font:700 clamp(1.6rem,3vw,2.6rem)/1 "Oxanium",sans-serif;color:transparent;-webkit-text-stroke:1px rgba(245,247,248,.3);transition:-webkit-text-stroke-color .25s}
.article-card:hover .card-number{-webkit-text-stroke-color:rgba(34,211,166,.7)}
.card-meta{margin:0 0 12px;display:flex;align-items:center;gap:12px;font:600 .67rem "Oxanium",sans-serif;letter-spacing:.15em;color:#77828d}
.card-meta i{width:26px;height:1px;background:rgba(245,247,248,.25)}
.card-body h2{margin:0;font:600 clamp(1.5rem,2.7vw,2.5rem)/1.08 "Oxanium",sans-serif;letter-spacing:-.03em;transition:color .25s}
.article-card:hover .card-body h2{color:var(--signal)}
.card-summary{margin:14px 0 0;max-width:64ch;color:#a4aeb8;font-size:.98rem;line-height:1.65}
.card-tags{margin:18px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.card-tags span{padding:6px 11px;border:1px solid rgba(128,103,255,.35);font:600 .6rem "Oxanium",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#b0a3ff}
.card-short{padding:3px 9px;border:1px solid rgba(34,211,166,.35);background:rgba(34,211,166,.08);color:var(--signal);font-size:.6rem;letter-spacing:.12em}
.card-go{align-self:center;font-size:1.4rem;color:#5f6b76;transition:color .25s,transform .25s}
.article-card:hover .card-go{color:var(--signal);transform:translate(4px,-4px)}
.article-empty{max-width:1100px;margin:0 auto;padding:44px;border:1px dashed rgba(245,247,248,.18);color:var(--muted);text-align:center}

/* ---------- article page ---------- */
.article-page{max-width:1400px}
.article-backdrop{position:absolute;right:1vw;top:4vh;z-index:-1;font:700 32vw/.8 "Oxanium",sans-serif;color:transparent;-webkit-text-stroke:1px rgba(245,247,248,.04);pointer-events:none}
.doc{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(30px,4vw,58px);justify-content:center}
.doc-head{max-width:820px;margin:0 auto;text-align:center}
.doc-head .card-meta{justify-content:center}
.doc-head h1{margin:0;font:600 clamp(2.4rem,6vw,5rem)/.95 "Oxanium",sans-serif;letter-spacing:-.05em}
.doc-lede{margin:24px auto 0;max-width:62ch;color:#aeb8c1;font-size:clamp(1.05rem,1.4vw,1.25rem);line-height:1.65}
.doc-head .card-tags{justify-content:center}
.doc-cover{margin-top:38px;width:100%;border:1px solid rgba(245,247,248,.16);clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)}
.doc-modes{margin:34px auto 0;display:inline-flex;gap:0;border:1px solid rgba(245,247,248,.18);background:rgba(12,18,26,.72);clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}
.doc-mode{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:168px;padding:13px 22px;border:0;background:none;color:#8f9aa5;font:600 .7rem "Oxanium",sans-serif;letter-spacing:.14em;cursor:pointer;transition:background .2s,color .2s}
.doc-mode+.doc-mode{border-left:1px solid rgba(245,247,248,.14)}
.doc-mode em{font-style:normal;font-size:.6rem;letter-spacing:.12em;color:#66717d;transition:color .2s}
.doc-mode:hover{color:var(--lane)}
.doc-mode.is-active{background:rgba(34,211,166,.12);color:var(--signal);box-shadow:inset 0 0 26px rgba(34,211,166,.14)}
.doc-mode.is-active em{color:#7fd9c0}
.doc-body-short>*:first-child{margin-top:0}
.doc-short-note{margin:44px 0 22px;padding:18px 22px;border-left:3px solid var(--violet);background:rgba(128,103,255,.07);color:#b6bfc9;font-size:.95rem;line-height:1.6}
.doc-short-more{border:1px solid var(--signal)}
.doc-short-more i{font-size:1.1rem}
.doc.is-short .doc-toc{display:none}
.doc.is-short{grid-template-columns:minmax(0,1fr)}
.doc-toc{align-self:start;padding:22px 24px;border:1px solid rgba(245,247,248,.14);background:rgba(12,18,26,.72);clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}
.doc-toc p{margin:0 0 14px}
.doc-toc ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.doc-toc a{color:#9aa5b0;text-decoration:none;font-size:.87rem;line-height:1.4;border-left:2px solid rgba(245,247,248,.16);padding-left:12px;display:block;transition:color .2s,border-color .2s}
.doc-toc a:hover{color:var(--signal);border-color:var(--signal)}
.doc-toc .toc-level-3 a{padding-left:26px;font-size:.81rem;color:#7b8691}
.doc-body{max-width:780px;margin:0 auto;width:100%;color:#c3ccd4;font-size:1.06rem;line-height:1.78}
.doc-body>*:first-child{margin-top:0}
.doc-body h1,.doc-body h2,.doc-body h3,.doc-body h4,.doc-body h5,.doc-body h6{font-family:"Oxanium",sans-serif;color:var(--lane);letter-spacing:-.02em;line-height:1.15;scroll-margin-top:120px}
.doc-body h1{margin:56px 0 20px;font-size:clamp(2rem,3.6vw,2.9rem);font-weight:700}
.doc-body h2{position:relative;margin:56px 0 18px;padding-left:18px;font-size:clamp(1.55rem,2.6vw,2.15rem);font-weight:600}
.doc-body h2:before{content:"";position:absolute;left:0;top:.16em;bottom:.16em;width:3px;background:var(--signal);box-shadow:0 0 16px rgba(34,211,166,.45)}
.doc-body h3{margin:40px 0 14px;font-size:clamp(1.2rem,1.9vw,1.5rem);font-weight:600;color:#dde4ea}
.doc-body h4{margin:32px 0 12px;font-size:1.05rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--signal)}
.doc-body h5,.doc-body h6{margin:28px 0 10px;font-size:.95rem;font-weight:600;color:#aab4be}
.doc-body p{margin:0 0 22px}
.doc-body a{color:var(--signal);text-decoration:none;border-bottom:1px solid rgba(34,211,166,.35);transition:border-color .2s,background .2s}
.doc-body a:hover{border-color:var(--signal);background:rgba(34,211,166,.1)}
.doc-body strong{color:var(--lane);font-weight:600}
.doc-body em{color:#d6dee5}
.doc-body del{color:#6f7a85}
.doc-body ul,.doc-body ol{margin:0 0 24px;padding-left:26px}
.doc-body li{margin:0 0 9px}
.doc-body li::marker{color:var(--signal)}
.doc-body ul ul,.doc-body ol ol,.doc-body ul ol,.doc-body ol ul{margin:9px 0 0}
.doc-body li.doc-task{list-style:none;position:relative;padding-left:30px;margin-left:-26px}
.doc-body li.doc-task:before{content:"";position:absolute;left:0;top:.34em;width:14px;height:14px;border:1px solid rgba(245,247,248,.35)}
.doc-body li.doc-task.is-done{color:#8b95a0}
.doc-body li.doc-task.is-done:before{background:var(--signal);border-color:var(--signal);box-shadow:0 0 14px rgba(34,211,166,.4)}
.doc-body blockquote{margin:0 0 26px;padding:20px 26px;border-left:3px solid var(--violet);background:rgba(128,103,255,.07);color:#cdd5dd}
.doc-body blockquote>*:last-child{margin-bottom:0}
.doc-body code{font-family:ui-monospace,"Cascadia Code",Consolas,monospace;font-size:.88em;padding:2px 6px;border:1px solid rgba(34,211,166,.24);background:rgba(34,211,166,.08);color:#8ff0d3}
.doc-code{position:relative;margin:0 0 28px;border:1px solid rgba(245,247,248,.16);background:#070b11;clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}
.doc-code[data-language]:before{content:attr(data-language);position:absolute;right:14px;top:10px;font:600 .6rem "Oxanium",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#56626d}
.doc-code pre{margin:0;padding:24px;overflow-x:auto}
.doc-code code{display:block;padding:0;border:0;background:none;color:#cfd8e0;font-size:.87rem;line-height:1.62;white-space:pre}
.doc-table{margin:0 0 28px;overflow-x:auto;border:1px solid rgba(245,247,248,.14)}
.doc-body table{width:100%;border-collapse:collapse;font-size:.94rem}
.doc-body th{padding:13px 16px;text-align:left;font:600 .68rem "Oxanium",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--signal);background:rgba(34,211,166,.07);border-bottom:1px solid rgba(34,211,166,.28)}
.doc-body td{padding:13px 16px;border-bottom:1px solid rgba(245,247,248,.08)}
.doc-body tbody tr:last-child td{border-bottom:0}
.doc-body tbody tr:hover{background:rgba(245,247,248,.03)}
.doc-body img{display:block;margin:0 auto 28px;max-width:100%;height:auto;border:1px solid rgba(245,247,248,.14)}
.doc-body hr{margin:44px 0;border:0;height:1px;background:linear-gradient(90deg,transparent,rgba(34,211,166,.45),transparent)}
.doc-body>*:last-child{margin-bottom:0}

.doc-nav{display:flex;flex-wrap:wrap;gap:18px;max-width:780px;width:100%;margin:0 auto;padding-top:clamp(30px,4vw,52px);border-top:1px solid rgba(245,247,248,.14)}
.doc-nav-link{position:relative;display:flex;flex-direction:column;gap:8px;flex:1 1 260px;min-width:0;padding:20px 22px;text-decoration:none;color:inherit;border:1px solid rgba(245,247,248,.14);background:linear-gradient(135deg,rgba(128,103,255,.07),transparent 44%),#0c121a;clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);transition:border-color .25s,background .25s,transform .25s}
.doc-nav-link:hover,.doc-nav-link:focus-visible{border-color:rgba(34,211,166,.55);background:linear-gradient(135deg,rgba(34,211,166,.09),transparent 46%),#0d141d;transform:translateY(-2px);outline:0}
.doc-nav-next{text-align:right;margin-left:auto}
.doc-nav-label{display:flex;align-items:center;gap:8px;font:600 .66rem "Oxanium",sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--signal)}
.doc-nav-next .doc-nav-label{justify-content:flex-end}
.doc-nav-label i{font-style:normal;transition:transform .25s}
.doc-nav-previous:hover .doc-nav-label i{transform:translateX(-4px)}
.doc-nav-next:hover .doc-nav-label i{transform:translateX(4px)}
.doc-nav-title{font:600 clamp(1.02rem,1.5vw,1.2rem)/1.3 "Oxanium",sans-serif;color:var(--lane);letter-spacing:-.02em;transition:color .25s}
.doc-nav-link:hover .doc-nav-title{color:var(--signal)}
.doc-nav-meta{font:600 .66rem "Oxanium",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#7b8691}

@media(min-width:1180px){
  .doc{grid-template-columns:minmax(0,780px) 250px;column-gap:clamp(40px,4.5vw,80px)}
  .doc.is-short{grid-template-columns:minmax(0,780px)}
  .doc-head{grid-column:1/-1}
  .doc-toc{position:sticky;top:120px;order:2}
  .doc-body{order:1;margin:0}
  .doc-nav{order:3;grid-column:1;margin:0}
}

@media(max-width:850px){
  .topbar-journal,.topbar-links a{font-size:.66rem;letter-spacing:.12em}
  .topbar-links{transition:opacity .2s}
  .topbar-article-title{left:185px;right:24px;font-size:.65rem;text-align:right}
  .topbar-article-title.is-visible~.topbar-links{opacity:0;pointer-events:none}
  .page-main{padding:112px 24px 70px}
  .article-card{grid-template-columns:auto minmax(0,1fr);gap:16px 20px}
  .card-go{grid-column:2;justify-self:end}
  .article-backdrop{font-size:52vw;right:-6vw}
  .doc-body{font-size:1rem}
  .doc-modes{width:100%;margin-top:28px}
  .doc-mode{flex:1;min-width:0;padding:12px 10px}
  .doc-short-more{min-width:0;width:100%}
  .page-foot{flex-direction:column;align-items:flex-start}
}