/* Compact continuation of the existing charcoal and amber portfolio. */
.method-gallery { padding-top: clamp(3rem, 6vw, 5rem); }
.method-group > h2 { margin: 0 0 1.75rem; font-size: clamp(1.75rem, 3.25vw, 2.5rem); line-height: 1.15; }
.method-group + .method-group { margin-top: clamp(2.5rem, 5vw, 4rem); }
.method-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.5rem; align-items: start; }
.method-figure { margin: 0; min-width: 0; }
.method-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; margin-bottom: .75rem; }
.method-heading h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.2; letter-spacing: -.025em; font-weight: 500; margin: 0; }
.method-full { color: var(--amber); font-size: .9375rem; padding-block: .625rem; min-height: 44px; }
.method-full:hover { color: var(--paper); }
.method-preview { display: block; cursor: zoom-in; border-radius: 7px; }
.method-image { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: inherit; background: var(--ink); }
.method-figure figcaption { margin-top: .875rem; color: var(--muted); font-size: 1rem; line-height: 1.65; }
.method-figure figcaption p { margin: 0; }
.method-notes { border: 0; padding: .5rem 0 0; font-size: 1rem; }
.method-notes summary { width: fit-content; padding-block: .5rem; min-height: 44px; color: var(--paper); font-weight: 400; text-underline-offset: 4px; }
.method-notes summary:hover { color: var(--amber); }
.method-notes p { margin: .5rem 0 0; }
.method-gallery ::selection { background: var(--amber); color: var(--ink); }
.method-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.method-gallery a:focus-visible, .method-gallery button:focus-visible, .method-viewer-stage:focus-visible { outline: 3px solid var(--amber); outline-offset: 4px; }
html.method-viewer-open { overflow: hidden; }
.method-viewer { width: min(1760px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); margin: auto; padding: clamp(.875rem, 2vw, 1.5rem); border: 1px solid var(--line); border-radius: 9px; color: var(--paper); background: var(--ink); }
.method-viewer[open] { display: flex; flex-direction: column; gap: 1rem; }
.method-viewer::backdrop { background: rgba(0, 0, 0, .86); }
.method-viewer-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; flex-shrink: 0; }
.method-viewer-heading h2 { margin: 0; font-size: clamp(1.25rem, 2vw, 1.75rem); line-height: 1.2; }
.method-viewer-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.method-viewer-control { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .5rem .875rem; border: 1px solid var(--line); border-radius: 5px; color: var(--paper); background: transparent; font: inherit; font-size: .9375rem; cursor: pointer; text-decoration: none; }
.method-viewer-control:hover, .method-viewer-control[aria-pressed="true"] { color: var(--ink); background: var(--amber); }
.method-viewer-stage { min-height: 0; max-height: 70vh; overflow: auto; overscroll-behavior: contain; border: 1px solid var(--line); border-radius: 5px; }
.method-viewer-image { display: block; width: auto; height: auto; max-width: 100%; max-height: min(65vh, calc(100dvh - 15rem)); margin: auto; }
.method-viewer.is-actual-size .method-viewer-image { max-width: none; max-height: none; margin: 0; }
.method-viewer-caption { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.5; flex-shrink: 0; }
@media (max-width: 760px) {
  .method-grid { grid-template-columns: minmax(0, 1fr); }
  .method-heading { margin-bottom: .75rem; }
  .method-preview { border-radius: 4px; }
  .method-viewer-heading { align-items: flex-start; }
}
@media print { #framework { display: none; } }