/* Model guides share the portfolio's type and palette, with a readable single column. */
.model-page { --pane: 0px; }
.model-flow { max-width: 1040px; margin-inline: auto; padding: 112px var(--gutter) 0; }
.model-breadcrumb { font: 400 11px/1.6 var(--mono); color: var(--fg-3); }
.model-breadcrumb a:hover { color: var(--signal); }
.model-hero { padding-block: 42px 36px; }
.model-hero h1 { margin-block: 22px; font-size: clamp(38px, 6.2vw, 72px); line-height: 1.06; letter-spacing: -0.04em; font-weight: 500; }
.model-hero h1 em { font-family: var(--serif); color: var(--signal); font-weight: 400; }
.model-hero .lede { max-width: 58ch; }
.model-intro { margin-top: 20px; max-width: 68ch; color: var(--fg-2); }
.model-facts { margin-top: 38px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); gap: 0 24px; }
.model-facts > div { padding-block: 18px; border-bottom: 1px solid var(--line); }
.model-facts dt { font: 400 10px/1.6 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--fg-3); }
.model-facts dd { margin: 8px 0 0; font: 500 25px/1.25 var(--sans); }
.model-facts small { display: block; margin-top: 4px; font: 400 11px/1.5 var(--mono); color: var(--fg-3); }
.model-toc { display: flex; flex-wrap: wrap; gap: 12px 24px; padding-block: 20px; border-bottom: 1px solid var(--line); font: 500 12px/1.5 var(--mono); }
.model-toc a:hover { color: var(--signal); }
.model-section { padding-block: 48px; border-bottom: 1px solid var(--line); }
.model-section h2 { margin: 14px 0 22px; font: 500 clamp(27px, 3.5vw, 38px)/1.15 var(--sans); letter-spacing: -.025em; }
.model-section > p { margin-block: 18px; color: var(--fg-2); max-width: 76ch; }
.model-section a:not(.btn):not(.link) { color: var(--signal-2); text-decoration: underline; text-underline-offset: 3px; }
.model-section p code { font-size: .83em; overflow-wrap: anywhere; }
.model-section .terminal { margin-block: 24px; }
.model-section .terminal pre { font-size: 12px; line-height: 1.75; }
.model-list { display: grid; gap: 14px; margin-block: 24px; }
.model-list li { padding-left: 20px; position: relative; color: var(--fg-2); }
.model-list li::before { content: '+'; position: absolute; left: 0; color: var(--signal); }
.model-table-wrap { overflow-x: auto; margin-block: 24px; }
.model-table-wrap table { width: 100%; border-collapse: collapse; font-size: 14px; }
.model-table-wrap caption { text-align: left; padding-bottom: 14px; font: 400 11px/1.5 var(--mono); color: var(--fg-3); }
.model-table-wrap th, .model-table-wrap td { padding: 13px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.model-table-wrap th { font-weight: 500; }
.model-table-wrap thead { background: var(--ink-1); }
.model-table-wrap td { font-family: var(--mono); }
.model-page .faq { max-width: none; }
.model-page .faq details > p { padding-left: 0; }
.model-resources { border-bottom: 0; }
.model-footer { max-width: 1040px; margin-inline: auto; padding: 28px var(--gutter) 40px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 18px 28px; font: 400 11px/1.5 var(--mono); color: var(--fg-3); }
@media (max-width: 620px) { .model-flow { padding-top: 96px; } .model-hero { padding-top: 30px; } .model-facts { gap: 0 18px; } .model-page .topmeta { display: none; } .model-page .topnav { display: flex; gap: 12px; font-size: 10px; } .model-table-wrap th, .model-table-wrap td { padding: 12px 8px; } }
@media (max-width: 400px) { .model-page .topnav a:nth-child(2), .model-page .topnav a:nth-child(3) { display: none; } }