.people-page{--preview-width:62vw}
.people-page .site-shell{max-width:1440px}
.people-page .page-heading{padding:34px 0 32px}
.people-page .page-heading h1{font-size:32px}
.people-page .page-heading p{font-size:14px;max-width:620px}
.directory{display:block}
#profiles section{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 24px}
.people-list h2{grid-column:1/-1;font-size:12px;color:var(--muted);font-weight:400;margin:0 12px 2px}
.people-list section+section{margin-top:40px}
.person-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:20px 12px;border-radius:8px;position:relative}
.person-row:hover{text-decoration:none;background:var(--surface)}
.person-row[aria-current=true]{background:var(--surface)}
.person-row[aria-current=true]:after{content:'↗';margin-left:auto;color:var(--muted)}
.person-avatar{width:48px;height:48px;border-radius:50%;background:var(--line);flex-shrink:0;display:grid;place-items:center;font-size:12px;color:var(--muted);overflow:hidden;position:relative}
.person-avatar img{position:absolute;width:100%;height:100%;object-fit:cover}
.person-copy{min-width:0}.person-name{display:block;font-size:14px;font-weight:500}
.person-title{display:block;font-size:12px;color:var(--muted);margin-top:1px;line-height:1.5}
/* The whole original site reflows beside the full-height browser. */
.has-preview{overflow:hidden}
.has-preview .site-shell{width:calc(100% - var(--preview-width));max-width:none;margin:0;padding:0 24px;height:100dvh;overflow-y:auto;overscroll-behavior:contain}
.has-preview .site-header{flex-wrap:wrap;gap:16px;padding:24px 0 12px}
.has-preview .site-header nav{order:3;width:100%;margin:0;gap:16px;flex-wrap:wrap}
.has-preview #theme{margin-left:auto}
.has-preview .page-heading{padding:28px 0}
.has-preview .page-heading h1{font-size:28px}
.has-preview #profiles section{grid-template-columns:1fr;gap:4px}
.has-preview .person-row{padding:12px}
.has-preview .people-list section+section{margin-top:28px}
.site-preview{position:fixed;inset:0 0 0 auto;width:var(--preview-width);height:100dvh;z-index:20;background:var(--bg);border-left:1px solid var(--line)}
#preview-body{position:absolute;inset:0}
#preview-body iframe{width:100%;height:100%;border:0;display:block;background:white}
/* One floating control group, no reserved header/footer or extra blur surfaces. */
.preview-toolbar{position:absolute;z-index:2;bottom:20px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;max-width:calc(100% - 32px);padding:6px;border:1px solid var(--line);border-radius:14px;background:var(--bg);box-shadow:0 4px 20px #00000018;color:var(--fg)}
#preview-domain{font-size:12px;color:var(--muted);padding:0 6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.preview-actions{display:flex;align-items:center;gap:2px}
.tool{display:grid;place-items:center;width:32px;height:32px;flex-shrink:0;border-radius:8px;line-height:1;font-size:20px}
.tool:hover{background:var(--surface);text-decoration:none}.tool svg{width:16px;height:16px}
.tool:disabled{opacity:.35;cursor:default}
.preview-empty{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 32px 100px;gap:12px}
.preview-empty h2{font-size:18px;font-weight:400}.preview-empty p{font-size:14px;color:var(--muted);max-width:300px}
.empty-symbol{font-size:32px;color:var(--muted);margin-bottom:8px}
.visit-link{border:1px solid var(--line);border-radius:6px;padding:8px 16px;font-size:14px;margin-top:8px}
.preview-maximized .site-preview{width:100%;border:0}
.preview-maximized .site-header,.preview-maximized .page-heading,.preview-maximized .people-list{visibility:hidden}
.people-page main{padding-bottom:32px}
.people-page [hidden]{display:none!important}
@media(max-width:1000px){.people-page{--preview-width:58vw}.people-page:not(.has-preview) #profiles section{grid-template-columns:repeat(2,minmax(0,1fr))}.people-page .site-shell{padding:0 24px}}
@media(max-width:760px){.people-page .site-header{flex-wrap:wrap;gap:14px;padding:24px 0 10px}.people-page .site-header nav{order:3;width:100%;margin:0;gap:14px;flex-wrap:wrap}.people-page #theme{margin-left:auto}.people-page .page-heading{padding:30px 0}.people-page .page-heading h1{font-size:26px}.has-preview .site-shell{width:100%}.site-preview{width:100%;border:0}.has-preview .site-header,.has-preview .page-heading,.has-preview .people-list{visibility:hidden}#maximize{display:none}.preview-toolbar{bottom:calc(16px + env(safe-area-inset-bottom))}}
@media(max-width:480px){.people-page:not(.has-preview) #profiles section{grid-template-columns:1fr;gap:4px}.person-row{padding:14px 12px}}
/* Inset floating browser, with a single owner for rounded content clipping. */
.people-page{overflow-x:hidden}
.people-page .site-shell{width:min(100%,1440px);transition:width 360ms cubic-bezier(.22,.8,.25,1)}
.has-preview .site-shell{width:calc(100% - var(--preview-width))}
.site-preview{inset:12px 12px 12px auto;width:calc(var(--preview-width) - 24px);height:calc(100dvh - 24px);border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 12px 40px #00000012,0 2px 6px #00000008;transition:width 360ms cubic-bezier(.22,.8,.25,1)}
.preview-maximized .site-preview{width:calc(100% - 24px);border:1px solid var(--line)}
.preview-toolbar{transition:transform 240ms ease,opacity 180ms ease}
.controls-collapsed .preview-toolbar{transform:translate(-50%,calc(100% + 28px));opacity:0;pointer-events:none}
.controls-peek{position:absolute;z-index:3;bottom:0;left:50%;transform:translateX(-50%);width:48px;height:24px;display:grid;place-items:center;border:1px solid var(--line);border-bottom:0;border-radius:12px 12px 0 0;background:var(--bg);box-shadow:0 -2px 12px #0000000d;color:var(--muted);font-size:22px;line-height:1;transition:height 160ms ease,color 160ms ease}
.controls-peek:hover,.controls-peek:focus-visible{height:32px;color:var(--fg)}
@media(max-width:760px){.site-preview,.preview-maximized .site-preview{inset:8px;width:calc(100% - 16px);height:calc(100dvh - 16px);border-radius:16px}.has-preview .site-shell{width:100%}}
@media(prefers-reduced-motion:reduce){.people-page .site-shell,.site-preview,.preview-toolbar,.controls-peek{transition:none}}

/* Align section headings and portraits with the page heading. */
.people-page .people-list h2{margin-left:0}
.people-page .person-row{padding-left:12px;padding-right:12px;margin-left:-12px;width:calc(100% + 24px)}

/* Shared SVG geometry keeps every toolbar icon optically centered. */
.preview-toolbar .tool{padding:0;box-sizing:border-box;align-self:center}
.preview-toolbar .tool svg,.controls-peek svg{display:block;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* Embedded documents can inherit this preference via prefers-color-scheme. */
:root[data-theme=light]{color-scheme:light}
:root[data-theme=dark]{color-scheme:dark}
#resize-preview{position:absolute;left:0;top:0;bottom:0;width:8px;z-index:4;cursor:col-resize;touch-action:none}
#resize-preview:focus-visible{outline:2px solid var(--muted);outline-offset:-2px}
.resizing-preview .site-shell,.resizing-preview .site-preview{transition:none}
.resizing-preview #preview-body{pointer-events:none}
.resizing-preview{cursor:col-resize;user-select:none}
@media(max-width:760px){#resize-preview{display:none}}
.preview-maximized #resize-preview{display:none}

.site-preview{corner-shape:squircle;border-radius:28px}
@media(max-width:760px){.site-preview{border-radius:22px}}
.preview-outgoing{position:absolute;inset:0;pointer-events:none;z-index:1;background:var(--bg)}

/* Keep the shell anchored to the left throughout the reverse slide. */
.closing-preview .site-shell{width:100%;margin-left:0;margin-right:0}

.has-preview .people-list{padding-bottom:0}

/* Match the main site's page geometry; one rounded owner clips iframe pixels. */
.people-page:not(.has-preview) .site-shell{width:100%;max-width:1120px;padding:0 44px}
.people-page:not(.has-preview) .page-heading{padding:56px 0 40px}
.people-page:not(.has-preview) .page-heading h1{font-size:var(--heading)}
.people-page:not(.has-preview) .page-heading p{font-size:var(--body)}
.site-preview{corner-shape:round;border-radius:20px;border:0;box-shadow:0 0 0 1px var(--line),0 12px 40px #00000012}
.preview-maximized .site-preview{border:0}
.opening-layout .site-shell{transition:none}
[data-person=tony] .person-avatar img{transform:scale(1.18)}
@media(max-width:800px){.people-page:not(.has-preview) .site-shell{padding:0 28px}}
@media(max-width:520px){.people-page:not(.has-preview) .site-shell{padding:0 22px}.people-page:not(.has-preview) .page-heading{padding:32px 0}}

.people-page:not(.has-preview) .site-header{flex-wrap:nowrap;gap:28px;padding:32px 0}
.people-page:not(.has-preview) .site-header nav{order:initial;width:auto;gap:24px;flex-wrap:nowrap;margin-left:auto}
@media(max-width:800px){.people-page:not(.has-preview) .site-header,.people-page:not(.has-preview) .site-header nav{gap:20px}}
@media(max-width:520px){.people-page:not(.has-preview) .site-header{flex-wrap:wrap;gap:16px;padding:24px 0}.people-page:not(.has-preview) .site-header nav{order:3;flex-basis:100%;margin:0;gap:24px}}
.has-preview .site-shell{overflow-anchor:none}
@media(min-width:801px) and (min-height:650px){.people-page:not(.has-preview) .site-header{padding:clamp(18px,3vh,32px) 0}}

/* Border outside the content clip: avoid a white iframe backing at curved edges. */
.site-preview,.preview-maximized .site-preview{--preview-radius:20px;overflow:visible;border:1px solid var(--line);border-radius:var(--preview-radius);background:var(--bg);box-shadow:0 12px 40px #00000012}
#preview-body{border-radius:calc(var(--preview-radius) - 1px);overflow:hidden;background:var(--bg)}
#preview-body iframe{background:transparent}
@media(max-width:760px){.site-preview,.preview-maximized .site-preview{--preview-radius:16px}}

/* Match continuous geometry on the border and its inset content clip. */
.site-preview,.preview-maximized .site-preview{--preview-radius:28px;corner-shape:squircle}
#preview-body{corner-shape:squircle}
@media(max-width:760px){.site-preview,.preview-maximized .site-preview{--preview-radius:22px}}

/* One small glass surface, owned by the toolbar itself. */
.preview-toolbar{
 border-radius:18px;
 corner-shape:squircle;
 background:color-mix(in srgb,var(--bg) 58%,transparent);
 -webkit-backdrop-filter:blur(20px) saturate(140%);
 backdrop-filter:blur(20px) saturate(140%);
 border-color:color-mix(in srgb,var(--fg) 14%,transparent);
 box-shadow:0 4px 20px #00000018;
}
.preview-toolbar #preview-domain{color:var(--fg);opacity:.78}
@supports not (backdrop-filter:blur(1px)){
 .preview-toolbar{background:color-mix(in srgb,var(--bg) 94%,transparent)}
}
@media(prefers-reduced-transparency:reduce){
 .preview-toolbar{background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* Compact control group with matching continuous button corners. */
.preview-toolbar{padding:5px;gap:6px;border-radius:22px}
.preview-toolbar .tool{width:28px;height:28px;border-radius:9px;corner-shape:squircle}
.preview-toolbar .tool svg{width:14px;height:14px}
.preview-toolbar #preview-domain{font-size:11px;padding:0 5px}
.preview-actions{gap:1px}
.preview-toolbar .tool:hover{background:color-mix(in srgb,var(--fg) 8%,transparent)}

/* Continuous corners on People cards and controls; portraits remain circular. */
.person-row{border-radius:16px;corner-shape:squircle}
.tool,.people-page .theme-toggle{border-radius:12px;corner-shape:squircle}
.preview-toolbar .tool{border-radius:12px}
.visit-link{border-radius:12px;corner-shape:squircle}
.controls-peek{border-radius:16px 16px 0 0;corner-shape:squircle}