/* Shared template refinements. Source visual system remains in styles.css. */
.wordmark-suffix { margin-left: 0; }
.wordmark { white-space: normal; line-height: 1.1; }
.brand-sub { margin-top: .55rem; }
.preview-bar a { margin-left: .65rem; text-decoration-thickness: 1px; }
.process-title { font-size: 1.1rem; font-weight: 700; line-height: 1.15; margin-bottom: .5rem; letter-spacing: -.02em; }
.nav .button:hover { color: var(--accent-dark); }
.nav [aria-current="page"] { color: var(--accent); }
.menu-toggle { min-height: 44px; background: transparent; border: 1px solid var(--line); color: var(--ink); padding: .6rem 1rem; }
.menu-toggle span { margin-left: .75rem; color: var(--accent); }
.inner-page main { min-height: 65vh; }
main:focus { outline: none; }
.system-intro { max-width: 46rem; font-size: 1.2rem; }
.system-section { border-top: 1px solid var(--line); }
.swatches { display: grid; grid-template-columns: repeat(6,1fr); gap: 1rem; }
.swatch { border: 1px solid var(--line); padding: .75rem; min-width: 0; }
.swatch-color { height: 7rem; margin-bottom: 1rem; border: 1px solid var(--line); }
.swatch strong,.swatch code { display:block; overflow-wrap:anywhere; }
.swatch code { color:var(--muted); font-size:.85rem; }
.system-type { display:grid; grid-template-columns:1fr 1fr; gap:3rem; margin-top:3rem; }
.system-type h3 { font-size:2.5rem; font-weight:400; }
.system-instructions { padding-left:1.5rem; max-width:55rem; }
.system-instructions li { padding:1rem 0; color:var(--muted); }
.system-instructions strong { color:var(--ink); }
code { font-size:.9em; overflow-wrap:anywhere; }
@media(min-width:701px) { .masthead { flex-wrap:nowrap; } .nav { width:auto; } }
@media(max-width:1000px) { .masthead { gap:1rem; } .nav { gap:1rem; } .wordmark { font-size:1.3rem; } }
@media(max-width:700px) {
 .masthead { flex-wrap:wrap; } .menu-toggle:not([hidden]) { display:inline-flex; }
 .nav { flex-direction:column; flex-basis:100%; align-items:stretch; padding-top:1rem; border-top:1px solid var(--line); }
 .nav a { flex-basis:100%; } .nav .button { margin-top:.4rem; }
 .preview-bar a { display:block; margin-left:0; }
 .swatches { grid-template-columns:repeat(3,1fr); }
 .system-type { grid-template-columns:1fr; gap:1rem; }
}
@media(max-width:380px) { .wordmark { font-size:1.15rem; } .swatches {grid-template-columns:repeat(2,1fr);} }