.blog-page header nav [aria-current="page"] { color:var(--accent-soft); }
.notebook { width:min(1320px,86%); margin:auto; }
.notebook-intro { padding:170px 0 62px; }
.notebook-kicker { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:35px; }
.notebook-index { color:#708883; font-size:11px; letter-spacing:.12em; }
.notebook-intro h1 { font-size:clamp(48px,6.7vw,96px); max-width:1100px; }
.notebook-lede { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; }
.notebook-lede p { margin:0; font-size:16px; }
.notebook-scroll { display:flex; gap:30px; align-items:center; color:#9cafaa; font-size:11px; letter-spacing:.13em; padding:12px 0; }
.notebook-scroll span { color:var(--accent-soft); font-size:21px; }
.collection-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; border-top:1px solid var(--line); padding:23px 0; }
.collection-heading .eyebrow { font-size:11px; }
.collection-preview { font-size:12px; color:#839990; }
.collection-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; align-items:start; }
.collection { min-width:0; scroll-margin-top:115px; }
.collection-cover { display:block; position:relative; aspect-ratio:1; border:1px solid #bfd8cb29; background:#080e10; overflow:hidden; border-radius:3px; transition:border-color .4s,box-shadow .4s,transform .5s cubic-bezier(.2,.8,.2,1); }
.collection-cover::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,#080e1000 38%,#080e1088 65%,#080e10ed); }
.collection-cover img { width:100%; height:100%; object-fit:cover; opacity:.83; transform:translateY(-5%) scale(1.04); transition:transform 1.4s cubic-bezier(.2,.8,.2,1),opacity .6s; }
.collection-number { position:absolute; top:23px; left:24px; color:#9eb6ac; font-size:10px; letter-spacing:.17em; z-index:1; }
.collection-cover-label { position:absolute; bottom:26px; left:25px; z-index:1; }
.collection-cover h2 { font-size:clamp(28px,3vw,44px); letter-spacing:-.05em; margin:0 0 9px; }
.collection-cover-label>span { display:block; font-size:14px; line-height:1.4; color:#9fb5ab; }
.collection-arrow { position:absolute; right:25px; bottom:29px; z-index:1; font-size:22px; color:var(--accent-soft); transition:transform .4s; }
.collection-cover:hover,.collection-cover:focus-visible { border-color:#72dea984; box-shadow:0 10px 45px #0005,inset 0 0 25px #72dea908; transform:translateY(-4px); }
.collection-cover:hover img,.collection-cover:focus-visible img { opacity:1; transform:translateY(-5%) scale(1.11) rotate(2deg); }
.collection-cover:hover .collection-arrow { transform:translateY(4px); }
.collection-description { padding:22px 5px 25px; min-height:160px; }
.collection-description p { font-size:14px; line-height:1.8; margin:0 0 19px; max-width:320px; }
.collection-description>span { color:#779286; font-size:10px; letter-spacing:.14em; }
.article-thread { position:relative; list-style:none; padding:0 0 0 22px; margin:0 0 0 6px; scroll-margin-top:125px; }
.article-thread::before { content:""; position:absolute; top:-19px; left:0; bottom:0; width:1px; background:linear-gradient(#9bb5aa50,#9bb5aa30 80%,#9bb5aa08); }
.thread-item { position:relative; margin-bottom:0; }
.thread-item::before { content:""; position:absolute; top:41px; left:-25px; width:5px; height:5px; border:1px solid #a6bdb2; border-radius:50%; background:#0c1714; box-shadow:0 0 0 5px #080e10; transition:background .3s,box-shadow .3s; }
.thread-item::after { content:""; position:absolute; top:44px; left:-18px; width:18px; height:1px; background:#b7c7bd30; }
.note-card { border:0; border-bottom:1px solid #c5dbd41a; background:transparent; transition:border-color .35s,background .35s; }
.note-preview summary { position:relative; display:grid; grid-template-columns:58px minmax(0,1fr) 10px; align-items:center; gap:13px; padding:14px 0; cursor:pointer; list-style:none; }
.note-preview summary::-webkit-details-marker { display:none; }
.note-preview summary:focus-visible { outline:1px solid var(--accent-soft); outline-offset:5px; border-radius:3px; }
.note-thumb { display:block; width:58px; aspect-ratio:1; border-radius:3px; background-size:200% 200%; background-position:var(--thumb-position); opacity:.68; filter:saturate(.2); box-shadow:inset 0 0 0 1px #e8f3ef14; transition:opacity .4s,filter .4s,transform .4s; }
.thumb-personal { background-image:url('assets/notes-personal.webp'); }
.thumb-resources { background-image:url('assets/notes-resources.webp'); }
.thumb-field-notes { background-image:url('assets/notes-field-notes.webp'); }
.note-heading { min-width:0; }
.note-meta { display:flex; align-items:center; justify-content:space-between; gap:8px; color:#8ba696; font-size:11px; line-height:1.5; letter-spacing:.055em; margin-bottom:7px; }
.note-index { color:#567261; font-variant-numeric:tabular-nums; flex-shrink:0; }
.note-title { display:block; font-family:Manrope,sans-serif; font-size:15px; line-height:1.45; font-weight:400; letter-spacing:-.025em; color:#c8d6ce; transition:color .3s; }
.note-expand { color:#759e87; font-size:16px; font-weight:300; transition:transform .3s,color .3s; }
.note-preview[open] .note-expand { transform:rotate(45deg); color:var(--accent-soft); }
.note-preview[open] .note-title { color:var(--accent-soft); }
.note-excerpt { padding:0 10px 18px 71px; }
.note-excerpt p { margin:0 0 12px; color:#99ada2; font-size:14px; line-height:1.7; }
.note-state { color:#789487; font-size:11px; line-height:1.6; }
.thread-item:hover .note-card,.note-card:focus-within { border-color:#72dea947; }
.thread-item:hover .note-thumb,.note-card:focus-within .note-thumb { opacity:.95; filter:saturate(.45); transform:translateY(-1px); }
.thread-item:hover .note-title { color:#e2eee7; }
.thread-item:hover::before { background:#d3e8dd; box-shadow:0 0 0 5px #080e10,0 0 15px #d3e8dd40; }
.thread-tail { display:flex; align-items:center; gap:12px; padding:12px 0 0 6px; color:#698477; font-size:12px; }
.thread-tail span { width:5px; height:5px; border:1px solid #6b877866; border-radius:50%; }
.notebook-outro { display:flex; justify-content:space-between; gap:40px; align-items:center; margin-top:100px; padding:55px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.notebook-outro .eyebrow { font-size:11px; }
.notebook-outro h2 { font-size:clamp(35px,4vw,58px); margin:23px 0 0; }
.notebook-outro p { font-size:15px; }
.notebook-footer { display:flex; justify-content:space-between; gap:24px; padding:28px 0 110px; font-size:12px; color:#91a59a; }
.notebook-footer a:hover { color:var(--accent-soft); }
/* Articles appear along their existing branches, without shifting the layout. */
.blog-reveal .thread-item { opacity:0; transform:translateY(15px); transition:opacity .65s ease,transform .8s cubic-bezier(.2,.8,.2,1); }
.blog-reveal .thread-item.in-view { opacity:1; transform:none; }
@media(min-width:801px) and (max-width:1100px) { .collection-grid { gap:18px; } .note-preview summary { grid-template-columns:44px minmax(0,1fr) 8px; gap:9px; } .note-thumb { width:44px; } .note-title { font-size:14px; } .note-index { display:none; } .note-excerpt { padding-left:53px; } .collection-description { min-height:180px; } .collection-cover-label { left:18px; bottom:20px; } .collection-number { left:18px; } .collection-cover h2 { font-size:30px; } }
@media(max-width:800px) {
 .notebook { width:86%; }
 .notebook-intro { padding-top:123px; padding-bottom:39px; }
 .notebook-kicker { margin-bottom:24px; }
 .notebook-index { display:none; }
 .notebook-intro h1 { font-size:clamp(42px,8.5vw,66px); line-height:1.1; }
 .notebook-lede { display:block; }
 .notebook-lede p { font-size:15px; }
 .notebook-lede p br { display:none; }
 .notebook-scroll { margin-top:17px; justify-content:space-between; }
 .collection-heading { align-items:flex-start; flex-direction:column; gap:6px; }
 .collection-grid { grid-template-columns:1fr; gap:65px; }
 .collection-cover { max-height:440px; }
 .collection-cover h2 { font-size:42px; }
 .collection-description { min-height:0; padding-bottom:27px; }
 .collection-description p { max-width:100%; }
 .note-title { font-size:16px; }
 .notebook-outro { margin-top:65px; padding:40px 0; display:block; }
 .notebook-outro>div+div { margin-top:27px; }
 .notebook-footer { flex-direction:column; gap:16px; }
}
@media(prefers-reduced-motion:reduce) { .blog-reveal .thread-item { opacity:1; transform:none; } .collection-cover:hover,.collection-cover:hover img { transform:none; } }

@media(prefers-reduced-motion:reduce) { .thread-item:hover .note-thumb,.note-card:focus-within .note-thumb { transform:none; } }

/* The collections take a gentle turn in the foreground before the reading begins. */
.collection-journey { position:relative; }
.collection-stage { padding:0 0 24px; }
.collection-covers { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; perspective:1400px; }
.collection-covers .collection-cover { transform-origin:50% 55%; transform:scale(.91) rotateY(var(--card-yaw,0deg)); opacity:.47; transition:transform .85s cubic-bezier(.22,1,.36,1),opacity .7s,border-color .7s,box-shadow .7s; }
.collection-covers .collection-cover.is-current { transform:scale(1.025) rotateY(0); opacity:1; border-color:#b4dbc46e; box-shadow:0 18px 65px #0005; }
.collection-covers .collection-cover.is-current img { animation:collection-breath 7s ease-in-out infinite; }
.collection-covers .collection-cover:not(.is-current) img { opacity:.62; }
.journey-caption { min-height:90px; display:flex; align-items:center; justify-content:space-between; gap:35px; padding:22px 7px 0; }
.journey-caption p { font-size:15px; max-width:540px; margin:0; }
.journey-meter { display:flex; gap:15px; font-size:11px; color:#8fa99a; }
.journey-meter span { padding-top:10px; min-width:34px; border-top:1px solid #ffffff20; transition:color .4s,border-color .4s; }
.journey-meter .is-active { color:var(--accent-soft); border-color:var(--accent-soft); }
.journey-hint { color:#89a595; font-size:10px; letter-spacing:.1em; }
.journey-enhanced .collection-journey { height:230svh; }
.journey-enhanced .collection-stage { position:sticky; top:105px; }
.journey-enhanced .collection-covers .collection-cover { max-height:min(43svh,430px); }
.reading-library { padding-top:36px; overflow-anchor:none; }
.reading-label { margin:10px 0 34px; padding-left:6px; }
.reading-label>span { color:#799685; font-size:10px; letter-spacing:.11em; }
.reading-label h2 { font-size:29px; margin:12px 0; letter-spacing:-.04em; }
.note-summary { position:relative; width:100%; display:grid; grid-template-columns:58px minmax(0,1fr) 10px; align-items:center; gap:13px; padding:14px 0; cursor:pointer; text-align:left; }
.note-summary:focus-visible { outline:1px solid var(--accent-soft); outline-offset:5px; border-radius:3px; }
.note-excerpt { display:grid; grid-template-rows:0fr; opacity:0; padding:0 10px 0 71px; transition:grid-template-rows .55s cubic-bezier(.22,1,.36,1),opacity .4s; }
.note-excerpt-inner { min-height:0; overflow:hidden; }
.note-excerpt-copy { padding-bottom:18px; transform:translateY(-5px); transition:transform .55s cubic-bezier(.22,1,.36,1); }
.note-preview.is-open .note-excerpt { grid-template-rows:1fr; opacity:1; }
.note-preview.is-open .note-excerpt-copy { transform:translateY(0); }
.note-preview.is-open .note-expand { transform:rotate(45deg); color:var(--accent-soft); }
.note-preview.is-open .note-title { color:var(--accent-soft); }
.note-preview.is-open .note-thumb { opacity:1; }
@keyframes collection-breath { 0%,100% { transform:translateY(-5%) scale(1.05); } 50% { transform:translateY(-6%) scale(1.095); } }
@media(min-width:801px) and (max-width:1100px) { .collection-covers { gap:18px; } .note-summary { grid-template-columns:44px minmax(0,1fr) 8px; gap:9px; } .note-excerpt { padding-left:53px; } }
@media(max-width:800px) {
 .journey-enhanced .collection-stage { top:88px; }
 .journey-enhanced .collection-covers { display:grid; grid-template-columns:1fr; min-height:0; gap:0; perspective:1100px; }
 .journey-enhanced .collection-covers .collection-cover { grid-area:1/1; width:min(100%,380px,48svh); justify-self:center; max-height:none; transform:translateX(calc(var(--card-offset,0)*115%)) scale(.89) rotateY(var(--card-yaw,0deg)); opacity:0; visibility:hidden; pointer-events:none; }
 .journey-enhanced .collection-covers .collection-cover.is-current { transform:translateX(0) scale(.98); opacity:1; visibility:visible; pointer-events:auto; }
 .journey-enhanced .collection-covers { overflow:clip; padding:6px 0; }
 .journey-enhanced .collection-journey { height:235svh; }
 .journey-caption { min-height:108px; align-items:flex-start; gap:15px; padding:15px 2px 0; }
 .journey-caption p { font-size:14px; }
 .journey-meter { gap:8px; }
 .journey-meter span { min-width:22px; }
 .collection-stage>.collection-heading { flex-direction:row; align-items:center; padding:15px 0; }
 .journey-hint { max-width:110px; text-align:right; font-size:9px; }
 .collection-covers { grid-template-columns:1fr; }
 .reading-library { padding-top:15px; }
}
/* Stop decorative motion without taking away normal scrolling or keyboard control. */
.motion-quiet .collection-covers .collection-cover img { animation:none; }
.motion-quiet .collection-covers .collection-cover,.motion-quiet .note-excerpt,.motion-quiet .note-excerpt-copy { transition:none; }
@media(prefers-reduced-motion:reduce) {
 .collection-covers .collection-cover.is-current img { animation:none; }
 .collection-covers .collection-cover { transform:none; opacity:1; }
}

.thumb-courage { background-image:url('assets/article-courage-road.webp'); background-size:cover; background-position:center; }

.thumb-video { background-image:url('assets/video-open-tools.webp'); background-size:cover; background-position:center; }

/* Real article imagery follows the same compact preview treatment. */
.note-thumb>img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}

/* Compact, independent five-article collection batches. */
.thread-item[hidden],.thread-tail[hidden],.thread-more[hidden]{display:none!important}
.thread-pagination{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:20px 0 0 20px;padding-top:12px;border-top:1px solid #ffffff12}
.thread-more{font:inherit;font-size:12px;letter-spacing:.08em;color:var(--accent-soft);background:linear-gradient(135deg,#ffffff08,#ffffff02);border:1px solid #a8d8c52b;border-radius:999px;padding:12px 22px;cursor:pointer;transition:background .25s,border-color .25s,box-shadow .25s}
.thread-more:hover{background:#b5efda12;border-color:#b5efda70;box-shadow:0 0 24px #b5efda0a}
.thread-more:focus-visible{outline:2px solid var(--accent-soft);outline-offset:4px}
.thread-count{font-size:10px;letter-spacing:.08em;color:#92a8a0}
@media(prefers-reduced-motion:reduce){.thread-more{transition:none}}

/* Tiles arrive once, in a quiet sequence; their grid spaces stay stable. */
.archive-card[hidden]{display:none!important}
.archive-card.archive-awaiting{opacity:0;transform:translateY(28px) scale(.985);transition:opacity .85s cubic-bezier(.22,1,.36,1) var(--arrival-delay,0ms),transform .85s cubic-bezier(.22,1,.36,1) var(--arrival-delay,0ms),border-color .4s,box-shadow .4s}
.archive-card.archive-arrived{opacity:1;transform:translateY(0) scale(1)}
.archive-card.archive-arrived:hover,.archive-card.archive-arrived:focus-visible{transform:translateY(-5px)}
.motion-quiet .archive-card.archive-awaiting{opacity:1;transform:none;transition:none}
@media(prefers-reduced-motion:reduce){.archive-card.archive-awaiting,.archive-card.archive-arrived:hover,.archive-card.archive-arrived:focus-visible{opacity:1;transform:none;transition:none}}

/* Published DPI series: an editorial entry point between the collections and article previews. */
.notebook-series{width:min(1120px,86%);margin:30px auto 90px;display:grid;grid-template-columns:1fr 1.15fr;gap:52px;align-items:center;padding:32px 0;border-top:1px solid #bdd4c326;border-bottom:1px solid #bdd4c326}
.notebook-series-image{display:block;overflow:hidden;border-radius:3px}.notebook-series img{width:100%;height:100%;aspect-ratio:16/10;object-fit:cover;filter:saturate(.65)}
.notebook-series h2{font-size:clamp(30px,3.8vw,48px);letter-spacing:-.045em;line-height:1.14;margin:20px 0}.notebook-series p{font-size:16px;line-height:1.8;color:#aabfb1;margin:0 0 22px}.notebook-series .eyebrow{font-size:10px}
@media(max-width:800px){.notebook-series{grid-template-columns:1fr;gap:25px;margin-bottom:45px}.notebook-series-image{max-height:230px}.notebook-series h2{font-size:36px}}