.nav-search { display: inline-flex; align-items: center; justify-content: center;  min-inline-size: 44px; min-block-size: 44px; padding: 0; border: 0; border-radius: var(--r); background: transparent; color: rgba(255, 255, 255, .84); cursor: pointer; transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); } .nav-search:is(:hover, :focus-visible) { color: var(--brand-white); background: rgba(255, 255, 255, .12); }  #hd.scrolled .nav-search { color: var(--muted); }  #hd.scrolled .nav-search:is(:hover, :focus-visible) { color: var(--accent-strong); background: var(--accent-wash); } .nav-search:focus-visible {  outline: 3px solid var(--accent); outline-offset: 2px; }  .site-search { position: fixed; inset: 0; margin: 0; border: 0; max-inline-size: none; max-block-size: none; inline-size: auto; block-size: auto; color: inherit; display: grid; justify-items: center; align-content: start; padding: clamp(72px, 12vh, 140px) clamp(16px, 4vw, 40px) 40px; background: rgba(var(--image-overlay-rgb), .86); opacity: 0; transition: opacity var(--dur-base) var(--ease-out); }  .site-search[hidden] { display: none; }  .site-search::backdrop { background: transparent; } .site-search.is-open { opacity: 1; }  .site-search-sheet { inline-size: min(100%, 720px); max-block-size: calc(100dvh - clamp(112px, 16vh, 180px)); display: flex; flex-direction: column; min-block-size: 0; padding: clamp(18px, 2vw, 26px); border-radius: var(--r); background: var(--surface-raised); overflow-y: auto; overscroll-behavior: contain; transform: translate3d(0, -12px, 0); transition: transform var(--dur-base) var(--ease-out); } .site-search.is-open .site-search-sheet { transform: none; }  .site-search-field, .search-field { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; padding: 10px 14px; border-radius: var(--r); background: var(--surface-sunken); transition: background-color var(--dur-fast) var(--ease-out); } .site-search-field:focus-within, .search-field:focus-within { background: var(--surface-sunken-strong); outline: 2px solid var(--accent); outline-offset: 2px; } .site-search-field > i.ph, .search-field > i.ph { color: var(--icon); } .site-search-field input, .search-field input { flex: 1 1 auto; min-inline-size: 0; padding: 8px 0; border: 0; outline: none; background: transparent; color: var(--ink); caret-color: var(--accent); font: inherit; font-size: var(--type-action); }  .site-search-field input::-webkit-search-decoration, .site-search-field input::-webkit-search-cancel-button, .search-field input::-webkit-search-decoration, .search-field input::-webkit-search-cancel-button { appearance: none; } .site-search-close { display: grid; place-items: center; flex: 0 0 auto; inline-size: 32px; block-size: 32px; padding: 0; border: 0; border-radius: var(--r); background: transparent; color: var(--icon); cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .site-search-close:is(:hover, :focus-visible) { background: var(--surface-raised); color: var(--ink); } .site-search-close:focus-visible {  outline: 3px solid var(--accent); outline-offset: 2px; }  .site-search-count, .search-count { margin: 14px 0 0; color: var(--label); font-size: var(--type-meta); }  .site-search-start { margin-block-start: 10px; } .site-search-start .row-item { background: var(--surface-sunken); }  .site-search-results { flex: 1 1 auto; min-block-size: 0; margin-block-start: 12px; overflow-y: auto; overscroll-behavior: contain;  align-content: start; grid-auto-rows: min-content; } .site-search-empty, .search-empty { margin: 18px 0 0; color: var(--muted); font-size: var(--type-body); }  .search-panel { display: grid; } .search-panel .search-field { max-inline-size: 720px; } .search-results { margin-block-start: clamp(20px, 2.4vw, 32px); }  .search-suggestions { margin-block-start: clamp(20px, 2.4vw, 32px); } @media (max-width: 720px) { .site-search { padding-block-start: 64px; } .site-search-sheet { max-block-size: calc(100dvh - 96px); } } @media (prefers-reduced-motion: reduce) { .site-search, .site-search-sheet { transition: none; } .site-search-sheet { transform: none; } }  .site-search-results .row-item { background: var(--surface-sunken); } .site-search-results .row-item::before { --wipe-fill: var(--surface-sunken-strong); }  .site-search-results .row-item-meta, .search-results .row-item-meta { order: -1; color: var(--accent-text); }
