.method-breadcrumb { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-bottom: 28px; font-size: .85rem; color: #e0d4e1; }
.method-breadcrumb a { color: #f6dfb7; text-underline-offset: 4px; }
.method-layout { display: grid; grid-template-columns: 245px minmax(0, 1fr); gap: 55px; align-items: start; padding-block: 52px 72px; }
.method-toc { position: sticky; top: 105px; max-height: calc(100vh - 125px); overflow-y: auto; padding: 22px 18px; background: #eee4d5; border: 1px solid #d7c6a7; border-radius: 8px; }
.resource-toc-image { aspect-ratio: 16 / 9; margin: -10px -6px 20px; overflow: hidden; border: 1px solid #d7c6a7; border-radius: 7px; background: #fffcf5; }
.resource-toc-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.method-toc a { display: block; padding: 9px 0; color: #503756; font-size: .87rem; line-height: 1.45; text-decoration: none; }
.method-toc a:hover { text-decoration: underline; text-underline-offset: 3px; }
.method-toc a span { color: #896322; font-weight: 700; }
.method-body { min-width: 0; max-width: 830px; }
.method-body h2 { font-size: clamp(1.65rem, 2.5vw, 2.2rem); line-height: 1.2; margin: 0 0 20px; }
.method-body p, .method-body li { line-height: 1.8; }
.method-body section { scroll-margin-top: 115px; }
.method-goal { font-size: 1.13rem; color: #503756; }
.method-map { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 0; margin: 28px 0; list-style: none; counter-reset: none; }
.method-map li { display: flex; gap: 14px; align-items: flex-start; padding: 18px; background: #fffcf5; border: 1px solid #d6c6a8; border-top: 3px solid #b79b61; border-radius: 4px 14px 4px 4px; }
.method-map-number { font-family: Georgia, serif; color: #896322; font-size: 1.4rem; }
.method-map h3 { font-size: 1.15rem; margin: 0 0 5px; }
.method-map p { font-size: .88rem; margin: 0; color: #615166; }
.method-body .written-note { margin-block: 28px 44px; }
.method-body .written-note p { margin-block: 10px; }
.method-body .written-note small { display: block; line-height: 1.6; }
.method-step { padding-block: 28px; border-top: 1px solid #d7c8ab; }
.method-step p:last-child { margin-bottom: 0; }
.method-example { padding: 28px; margin-block: 24px 40px; background: #eee4d5; border: 1px solid #d7c6a7; border-radius: 8px; }
.method-example h3 { font-size: 1.1rem; margin: 0; }
.method-example-before, .method-example-after { padding: 20px; margin-block: 18px; background: #fffcf5; border-left: 4px solid #ac805c; }
.method-example-after { border-color: #704678; }
.method-example-before p:last-child, .method-example-after p:last-child { margin-bottom: 0; }
.method-pitfalls { padding-left: 22px; }
.method-pitfalls li { padding-left: 5px; margin-block: 12px; }
.method-checklist { margin-block: 24px 40px; padding: 28px; background: #30203d; color: #fff7e8; border-radius: 8px; }
.fantasy-theme .method-checklist .eyebrow { color: #e2c68f; }
.method-checklist label { display: flex; align-items: flex-start; gap: 12px; padding-block: 12px; border-top: 1px solid #ffffff25; line-height: 1.6; cursor: pointer; }
.method-checklist input { width: 20px; height: 20px; flex: 0 0 20px; margin-top: 3px; accent-color: #dfc28d; }
.method-checklist input:focus-visible { outline: 3px solid #dfc28d; outline-offset: 4px; }
.method-checklist input:checked + span { text-decoration: line-through; color: #e2c68f; }
.method-source { margin-block: 35px; font-size: .9rem; }
.method-body .method-source h2 { font-size: 1.35rem; }
.method-related { border-top: 1px solid #d7c8ab; padding-top: 32px; }
.method-related > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.method-related > div a { padding: 16px; color: #452a54; background: #fffcf5; border: 1px solid #d6c6a8; border-radius: 5px; font-weight: 600; text-decoration: none; }
.method-related a:hover { text-decoration: underline; text-underline-offset: 3px; }
.method-related small { display: block; margin-top: 6px; font-weight: 400; color: #716474; }
.method-back { display: inline-block; margin-top: 24px; color: #503756; }
.method-entry { display: inline-block; margin-top: 12px; padding: 12px 16px; background: #704678; color: #fffaf0; border-radius: 4px; font-weight: 600; text-decoration: none; }
.method-entry:hover { background: #452a54; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 1000px) { .method-layout { grid-template-columns: 1fr; gap: 30px; } .method-toc { position: static; max-height: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; } .method-toc > .resource-toc-image, .method-toc > p { grid-column: 1 / -1; } .resource-toc-image { width: min(320px, 100%); margin: -8px 0 20px; } .method-body { max-width: none; } }
@media (max-width: 600px) { .method-layout { padding-block: 28px 44px; } .method-toc, .method-map, .method-related > div { grid-template-columns: 1fr; } .method-example, .method-checklist { padding: 20px; } .method-body section { scroll-margin-top: 135px; } .method-map li { padding: 14px; } }
@media print { .method-toc, .method-related, .site-header, .site-footer, .method-breadcrumb, .sf-toolbar { display: none !important; } .method-layout { display: block; padding: 0; } .method-body { max-width: none; } .method-page .written-hero { background: white; color: black; padding: 20px 0; } .method-page .written-intro, .method-page .eyebrow { color: #333; } .method-checklist { color: black; background: white; border: 1px solid #777; } .method-map li, .method-example-before, .method-example-after, .method-checklist label { break-inside: avoid; } }