/* warm detail pages: model / guide / tool directory */
:root{--wrap-max:100rem}
.detail-page{padding:7rem 0 4rem}
.detail-crumb{font:600 .62rem/1 var(--mono);letter-spacing:.08em;color:var(--muted);display:flex;gap:.5rem;align-items:center;margin-bottom:1.4rem;flex-wrap:wrap}
.detail-crumb a{color:var(--muted)}
.detail-crumb a:hover{color:var(--ink)}
.detail-hero{display:flex;justify-content:space-between;gap:2rem;align-items:flex-start;border-bottom:1px solid var(--line);padding-bottom:1.8rem;margin-bottom:1.4rem}
.detail-kicker{font:600 .62rem/1 var(--mono);letter-spacing:.16em;color:var(--accent-text)}
.detail-hero h1{font-family:var(--serif);font-weight:700;font-size:clamp(2.4rem,4.2vw,3.8rem);line-height:1.05;letter-spacing:-.04em;margin:.7rem 0 .4rem}
.detail-hero h1 em{font-style:normal;color:var(--accent-text)}
.detail-id{font:500 .75rem/1.4 var(--mono);color:var(--muted);margin:0;overflow-wrap:anywhere}
.detail-sub{font-size:.95rem;line-height:1.85;color:var(--ink-2);max-width:52rem;margin:.6rem 0 0}
.detail-badges{display:flex;gap:.4rem;flex-wrap:wrap;margin:.9rem 0 0}
.detail-badges span{border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:.32rem .6rem;font:600 .6rem/1 var(--mono);color:var(--muted)}
.detail-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.1rem}
.detail-actions .btn{flex:0 0 auto}

/* specs */
.spec-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;margin:1.2rem 0 1.6rem}
.spec{background:var(--paper);border:1px solid var(--line);border-radius:1rem;padding:.9rem 1rem}
.spec span{display:block;font:600 .56rem/1 var(--mono);letter-spacing:.09em;color:var(--muted);text-transform:uppercase}
.spec b{display:block;font:600 1rem/1.3 var(--mono);margin-top:.45rem;overflow-wrap:anywhere}

/* blocks */
.detail-block{border-top:1px solid var(--line-2);padding-top:1.4rem;margin-top:1.4rem}
.block-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap}
.block-head h2{font-family:var(--serif);font-size:1.55rem;letter-spacing:-.02em;margin:0}
.block-head .mono{font:500 .62rem/1 var(--mono);color:var(--faint)}
.detail-note{font:500 .68rem/1.75 var(--mono);color:var(--muted);margin:.9rem 0 0}
.detail-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:1.1rem;background:var(--paper);margin-top:.8rem}
.detail-table{width:100%;border-collapse:collapse;min-width:44rem}
.detail-table th{font:600 .58rem/1.2 var(--mono);letter-spacing:.08em;color:var(--muted);text-align:left;text-transform:uppercase;padding:.7rem .8rem;border-bottom:1px solid var(--line);white-space:nowrap}
.detail-table td{padding:.68rem .8rem;border-bottom:1px solid var(--line-2);font-size:.8rem;color:var(--ink-2);vertical-align:middle}
.detail-table tr:last-child td{border-bottom:0}
.detail-table tbody tr:hover{background:var(--cream)}
.detail-table a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-2)}
.detail-table a:hover{border-bottom-color:var(--ink)}
.detail-table .mono{font-family:var(--mono);font-size:.72rem}
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-top:.8rem}
.rel-card{display:block;background:var(--paper);border:1px solid var(--line);border-radius:.9rem;padding:.75rem .85rem;min-width:0}
.rel-card:hover{border-color:var(--line-strong);background:var(--cream)}
.rel-card b{display:block;font-family:var(--serif);font-size:.92rem;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rel-card span{display:block;font:500 .6rem/1.5 var(--mono);color:var(--muted);margin-top:.2rem}
.new-badge{display:inline-block;margin-left:.35rem;font:600 .52rem/1 var(--mono);letter-spacing:.08em;color:var(--accent-text);border:1px solid currentColor;border-radius:.3rem;padding:.18rem .3rem;vertical-align:.25em}

/* article */
.article-page{max-width:72rem;margin:0 auto}
.article-head{border-bottom:1px solid var(--line);padding-bottom:1.4rem;margin-bottom:1.6rem}
.article-head h1{font-family:var(--serif);font-weight:700;font-size:clamp(2.2rem,4vw,3.4rem);line-height:1.08;letter-spacing:-.035em;margin:.7rem 0 .6rem}
.article-deck{font-size:1.02rem;line-height:1.85;color:var(--ink-2);max-width:50rem;margin:0}
.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 17rem;gap:2rem;align-items:start}
.article-main{min-width:0;font-size:1rem;line-height:1.95;color:var(--ink-2)}
.article-main p{margin:0 0 1.1rem}
.article-main h2{font-family:var(--serif);font-size:1.7rem;line-height:1.3;letter-spacing:-.02em;margin:2.2rem 0 .8rem;color:var(--ink);scroll-margin-top:6.5rem}
.article-main h3{font-family:var(--serif);font-size:1.28rem;line-height:1.35;margin:1.7rem 0 .6rem;color:var(--ink);scroll-margin-top:6.5rem}
.article-main h4{font-family:var(--serif);font-size:1.08rem;margin:1.3rem 0 .5rem;color:var(--ink)}
.article-main ul,.article-main ol{margin:0 0 1.1rem;padding-left:1.35rem}
.article-main li{margin:.4rem 0}
.article-main blockquote{margin:1.2rem 0;padding:.8rem 1rem;border-left:3px solid var(--butter);background:rgba(242,200,121,.14);border-radius:0 .6rem .6rem 0;font-family:var(--serif);font-size:1rem;line-height:1.85;color:var(--ink)}
.article-main img{max-width:100%;height:auto;border-radius:.9rem;border:1px solid var(--line);margin:1rem 0;background:var(--paper)}
.article-main a{color:var(--accent-text);border-bottom:1px solid rgba(223,90,53,.35)}
.article-main a:hover{border-bottom-color:var(--accent-text)}
.article-main strong{color:var(--ink);font-weight:700}
.article-main code{font:500 .84em/1.5 var(--mono);background:var(--paper-2);border-radius:.3rem;padding:.08rem .3rem}
.md-code{background:var(--ink);color:var(--cream);border-radius:.9rem;padding:1rem 1.1rem;overflow:auto;margin:1.1rem 0}
.md-code code{background:none;color:inherit;padding:0;font-size:.78rem;line-height:1.7}
.article-main hr{border:0;border-top:1px solid var(--line);margin:2rem 0}
.article-side{position:sticky;top:6.6rem;display:flex;flex-direction:column;gap:.8rem}
.detail-toc{background:var(--paper);border:1px solid var(--line);border-radius:1.1rem;padding:1rem;max-height:60vh;overflow:auto;display:flex;flex-direction:column;gap:.1rem}
.detail-toc b{font:600 .58rem/1 var(--mono);letter-spacing:.1em;color:var(--muted);text-transform:uppercase;margin-bottom:.4rem}
.detail-toc a{font-size:.78rem;line-height:1.5;color:var(--muted);padding:.28rem .3rem;border-radius:.35rem}
.detail-toc a:hover{background:var(--cream);color:var(--ink)}
.detail-toc .toc-l3{padding-left:1rem;font-size:.74rem}
.detail-sidecard{background:var(--paper);border:1px solid var(--line);border-radius:1.1rem;padding:1rem}
.detail-sidecard>b{display:block;font-family:var(--serif);font-size:1rem;margin-bottom:.5rem}
.detail-sidecard .rel-card{background:transparent;border:0;border-bottom:1px solid var(--line-2);border-radius:0;padding:.5rem 0}
.detail-sidecard .rel-card:last-of-type{border-bottom:0}
.detail-sidecard .btn{margin-top:.6rem}

/* tools directory */
.detail-search{display:flex;align-items:center;gap:.7rem;margin-top:1rem}
.detail-search input{flex:1 1 auto;max-width:34rem;height:2.8rem;border:1px solid var(--line-strong);border-radius:.8rem;background:var(--paper);padding:0 .9rem;font:500 .9rem/1 var(--sans);color:var(--ink);outline:none}
.detail-search input:focus{border-color:var(--accent-text);box-shadow:0 0 0 4px rgba(223,90,53,.12)}
.detail-search .mono{font:600 .65rem/1 var(--mono);color:var(--muted)}
.chip-row{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:.8rem}
.chip{border:1px solid var(--line);background:var(--cream);border-radius:999px;padding:.35rem .6rem;font:600 .65rem/1 var(--sans);color:var(--muted)}
.chip.on{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.tool-list{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-top:1.2rem}
.tool-item{display:flex;gap:.8rem;background:var(--paper);border:1px solid var(--line);border-radius:1rem;padding:.9rem 1rem;min-width:0}
.tool-item:hover{border-color:var(--line-strong);background:var(--cream)}
.tool-ico{width:2.2rem;height:2.2rem;border-radius:.6rem;background:var(--cream);border:1px solid var(--line-2);display:grid;place-items:center;font:600 .8rem/1 var(--mono);color:var(--muted);flex:0 0 auto;overflow:hidden}
.tool-ico img{width:100%;height:100%;object-fit:contain}
.tool-body{min-width:0}
.tool-body b{display:block;font-family:var(--serif);font-size:1rem;line-height:1.25}
.tool-body p{font-size:.75rem;line-height:1.6;color:var(--muted);margin:.25rem 0 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tool-cat{font:600 .56rem/1 var(--mono);letter-spacing:.06em;color:var(--accent-text);margin-top:.35rem;display:inline-block}
.tool-pager{display:flex;justify-content:center;margin-top:1.2rem}

@media(max-width:1100px){.spec-grid{grid-template-columns:repeat(2,1fr)}.rel-grid{grid-template-columns:repeat(2,1fr)}.article-layout{grid-template-columns:1fr}.article-side{position:static;flex-direction:row;flex-wrap:wrap}.article-side>*{flex:1 1 16rem}.detail-toc{max-height:none}}
@media(max-width:900px){.detail-page{padding:5rem 0 2.5rem}.tool-list{grid-template-columns:1fr}.detail-hero{flex-direction:column;gap:1rem}}
@media(max-width:600px){.spec-grid{grid-template-columns:1fr 1fr}.rel-grid{grid-template-columns:1fr}.detail-table{min-width:38rem}.article-main{font-size:.95rem}}
@media(prefers-reduced-motion:reduce){.article-main *{scroll-behavior:auto}}