:root{--surface-page:#f1f3f5;--surface-panel:#fff;--surface-navigation:#e6e9ec;--surface-placeholder:#f5f6f7;--surface-hover:#e4e8ec;--surface-input:#fff;--text-primary:#1a1918;--text-secondary:#51575e;--link-text:#1a1918;--selection-bg:#f1ff66;--selection-text:#1a1918;--button-bg:#1a1918;--button-text:#fff;--button-edge:#f1ff66;--focus-ring:#1a1918;--focus-selected:#1a1918;--rule-decorative:#cbd0d6;--rule-control:#707780;--color-selected:var(--selection-bg);--shadow-color:#000;color-scheme:light;--color-paper:var(--surface-page);--color-white:var(--surface-panel);--color-ink:var(--text-primary);--color-muted:var(--text-secondary);--color-rule:var(--rule-decorative);--color-wash:var(--surface-navigation);--color-accent:var(--link-text);--font-body:system-ui,sans-serif;--font-display:Georgia,serif;--font-detail:ui-monospace,monospace;--space-xs:8px;--space-sm:12px;--space-md:16px;--space-lg:24px;--space-xl:32px;--text-label:13px;--text-body:14px;--text-intro:15px;--text-title:18px;--text-display:34px;--radius-portrait:8px;--radius-panel:12px;--radius-rail:24px;--panel-padding:24px;--section-gap:24px;--portrait-wide:192px;--portrait-small:160px;--portrait-phone:112px;--radius-pill:999px;--dock-width:360px;--dock-height:56px;--control-clearance:calc(var(--dock-height) + 3 * var(--space-sm));--row-inset:var(--space-sm);--color-dock:color-mix(in oklch,var(--color-wash) 88%,transparent);--shadow-floating:0 4px 16px color-mix(in srgb,var(--shadow-color) 12%,transparent)}*{box-sizing:border-box}html,body{margin:0;overflow-x:clip}body{background:var(--color-paper);color:var(--color-ink);font-family:var(--font-body);height:100dvh;padding:24px}h1,h2,h3,p,dl,dd{margin:0}h1{letter-spacing:-.4px;font-size:23px}h2,h3{overflow-wrap:anywhere;font-style:normal}header,.controls,.stage,.note{max-width:1040px;margin-inline:auto}header p,.note{color:var(--color-muted);font-size:14px;line-height:1.6}header p{max-width:700px;margin-top:8px}.controls{gap:8px;padding:20px 0;display:flex}.controls input{clip-path:inset(50%);width:1px;height:1px;position:absolute}.controls label{white-space:nowrap;border:1px solid var(--color-rule);cursor:pointer;min-height:44px;padding:10px 14px;font-size:14px}.controls label:hover{outline:1px solid var(--color-ink)}input:focus-visible+label{outline:3px solid var(--focus-ring);outline-offset:4px}body:has(#phone:checked) .stage{max-width:375px}.stage{background:var(--color-paper);container:stage/inline-size}.layout{grid-template-columns:132px minmax(0,1fr);gap:36px;padding:32px;display:grid}.rail{overscroll-behavior:contain;background:var(--color-wash);border:1px solid var(--color-rule);border-radius:var(--radius-rail);flex-direction:column;align-self:start;gap:28px;width:132px;height:calc(100dvh - 48px);padding:20px 16px;scroll-padding:8px;display:flex;position:fixed;top:24px;bottom:24px;overflow-y:auto}.rail .name{padding-inline:6px}.rail>.name,.rail>.rail-group{flex-shrink:0}.rail :is(a,button){border-radius:var(--radius-pill);min-width:44px;min-height:44px;color:inherit;font:inherit;text-align:left;white-space:nowrap;cursor:pointer;background:0 0;border:0;align-self:flex-start;align-items:center;padding:8px 6px;text-decoration:none;display:flex}.rail a[aria-current=location]{background:var(--selection-bg);color:var(--selection-text);box-shadow:var(--shadow-floating);font-weight:650}.rail button[aria-busy=true]{opacity:.55;cursor:wait}.rail :is(a,button,input):focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}.rail :is(a,button):active{background:var(--color-paper)}@media (hover:hover){.rail :is(a,button):not(:disabled):not([aria-current]):hover{background:var(--color-paper)}}.name{font-size:var(--text-intro);letter-spacing:-.2px;font-weight:650;line-height:1.5}.rail-group{flex-direction:column;gap:4px;font-size:14px;display:flex}.secondary{color:var(--color-muted);font-size:13px}.rail-group.secondary{gap:0}.content{gap:var(--section-gap);grid-column:2;min-width:0;display:grid;container:content/inline-size}.panel{min-width:0;padding:var(--panel-padding);background:var(--color-white);border:1px solid var(--color-rule);border-radius:var(--radius-panel)}.mobile-head{display:none}.intro{grid-template-columns:minmax(0,1fr) clamp(var(--portrait-small),24cqw,var(--portrait-wide));gap:var(--space-lg);align-items:center;display:grid}.portrait{aspect-ratio:1;border-radius:var(--radius-portrait);object-fit:cover;grid-area:1/2;width:100%;height:auto;display:block}.intro-copy{grid-area:1/1;min-width:0}.intro h2{font-family:var(--font-display);font-weight:400;font-size:var(--text-display);letter-spacing:-.6px;max-width:640px;line-height:1.2}.intro p{font-size:var(--text-intro);color:var(--color-muted);margin-top:var(--space-sm);line-height:1.6}.intro .positioning{color:var(--color-ink);margin-top:var(--space-xs);font-weight:600}.section-head{margin:0 0 16px;font-size:18px;font-weight:600}.project:last-child{padding-bottom:0}.project{padding:24px var(--row-inset);margin-inline:calc(-1 * var(--row-inset));border-top:1px solid #0000;position:relative}.project:before{content:"";top:-1px;left:var(--row-inset);right:var(--row-inset);border-top:1px solid var(--color-rule);pointer-events:none;position:absolute}.project h3{font-size:var(--text-title);letter-spacing:-.3px;margin-bottom:var(--space-md);font-weight:600;line-height:1.4}.project h3 .title-end{white-space:nowrap}.project h3 .arrow{margin-left:var(--space-xs);font-size:var(--text-body);color:var(--color-accent);display:inline-block}.project-body{grid-template-columns:minmax(0,1fr) 144px;align-items:stretch;gap:24px;display:grid}.facts{grid-template-columns:104px minmax(0,1fr);align-self:start;align-items:baseline;gap:12px 16px;margin:8px 0;font-size:14px;line-height:1.5;display:grid}.facts dt{color:var(--color-muted);white-space:nowrap;font-size:13px}.facts dd{min-width:0}.facts strong{font-weight:600}.thumbnail{aspect-ratio:auto;text-align:center;border:1px dashed var(--color-rule);background:var(--color-wash);width:144px;min-height:96px;color:var(--color-muted);font:12px/1.5 var(--font-detail);place-items:center;padding:12px;display:grid}.writing{margin:0}.writing-head{justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:16px;display:flex}.writing-head h2{font-size:18px}.writing-head span{white-space:nowrap;font-size:13px}.writing-row{border-top:1px solid var(--color-rule);grid-template-columns:70px minmax(0,1fr);gap:12px;padding:12px 0;font-size:14px;line-height:1.5;display:grid}.kind{font:12px/1.7 var(--font-detail);color:var(--color-muted)}footer{border-top:1px solid var(--color-rule);color:var(--color-muted);flex-wrap:wrap;justify-content:space-between;gap:16px;margin-top:0;padding-top:16px;font-size:13px;display:flex}.footer-links{flex-wrap:wrap;gap:16px;display:flex}.footer-links span{white-space:nowrap}.note{padding:16px 0;font-size:13px}@container stage (width<=850px){.stage .preview-chrome{padding-inline:160px 24px}.rail{width:112px;padding-inline:8px}.layout{grid-template-columns:112px minmax(0,1fr);gap:24px;padding:24px}.project-body{grid-template-columns:minmax(0,1fr) 140px;gap:16px}.thumbnail{width:140px}.intro h2{font-size:30px}}@container stage (width<=683px){.stage .preview-chrome{padding-inline:24px}.stage .phone-dock{display:flex}.stage .note{padding-bottom:calc(var(--space-md) + var(--control-clearance) + env(safe-area-inset-bottom,0px))}.layout{padding:24px;display:block}.rail{display:none}.mobile-head{border-bottom:1px solid var(--color-rule);flex-direction:column;gap:12px;margin-bottom:0;padding-bottom:12px;display:flex}.facts{grid-template-columns:104px minmax(0,1fr);gap:12px 16px}.facts dd{margin:0}footer{flex-direction:column}}@container content (width<=500px){.intro{gap:var(--space-md);grid-template-columns:minmax(0,1fr)}.portrait{width:var(--portrait-phone);grid-area:1/1;justify-self:start}.intro-copy{grid-row:2}.project-body{grid-template-columns:minmax(0,1fr);gap:16px}.thumbnail{aspect-ratio:3/2;grid-row:1;justify-self:center;width:min(80%,240px);min-height:0;padding:12px;font-size:12px}}@container stage (width<=500px){.stage .preview-chrome{padding-inline:16px}.project{--row-inset:var(--space-xs)}.content{--panel-padding:16px}.layout{padding:16px}.intro h2{font-size:28px}.intro p{font-size:14px}.project h3{font-size:18px}.facts{grid-template-columns:96px minmax(0,1fr);gap:12px;margin:0;font-size:14px}.facts dt{font-size:12px}.facts dd{margin:0}.writing-row{grid-template-columns:60px minmax(0,1fr);gap:8px}}@media (width<=500px){body{padding:12px}h1{font-size:21px}.controls{padding:16px 0}.controls label{padding:10px 12px}}.intro-contact{flex-wrap:wrap;gap:20px;margin-top:12px;font-size:14px;display:flex}.intro-contact :is(a,button){min-height:44px;color:var(--color-accent);text-underline-offset:4px;white-space:nowrap;align-items:center;text-decoration:underline;display:inline-flex}.intro-contact button{font:inherit;background:0 0;border:0;padding:0}:is(.intro-contact,.contact-menu,.rail) .link-pending:disabled{color:var(--color-muted);cursor:not-allowed;opacity:.65}.intro-contact a:hover{text-decoration-thickness:2px}.intro-contact a:focus-visible{outline:3px solid var(--focus-ring);outline-offset:4px}.preview-chrome{max-width:1040px;margin-inline:auto;padding-inline:200px 32px}@media (height<=600px){.rail{gap:16px;padding-block:12px}}.page-scroll{height:100%;scroll-padding-block-end:calc(var(--control-clearance) + env(safe-area-inset-bottom,0px));overflow-y:auto}.page-scroll:focus-visible{outline:3px solid var(--focus-ring);outline-offset:-3px}.phone-dock{z-index:20;bottom:calc(var(--space-sm) + env(safe-area-inset-bottom,0px));width:min(calc(100% - 24px),var(--dock-width));gap:var(--space-xs);align-items:center;display:none;position:fixed;left:50%;transform:translate(-50%)}.phone-dock nav{border:1px solid var(--color-rule);border-radius:var(--radius-pill);background:var(--color-dock);backdrop-filter:blur(12px);min-width:0;box-shadow:var(--shadow-floating);flex:1;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;padding:4px;display:grid}.phone-dock a,.say-hi{min-width:44px;min-height:44px;color:var(--color-ink);font:12px/1.2 var(--font-body);white-space:nowrap;border-radius:var(--radius-pill);flex-direction:column;justify-content:center;align-items:center;gap:4px;padding:4px;text-decoration:none;display:flex}.phone-dock svg{fill:none;stroke:currentColor;stroke-width:1.6px;stroke-linecap:round;stroke-linejoin:round;width:18px;height:18px}.phone-dock a[aria-current=location]{background:var(--selection-bg);color:var(--selection-text);font-weight:650}.say-hi{flex:0 0 var(--dock-height);min-height:var(--dock-height);border:1px solid var(--color-ink);background:var(--color-ink);color:var(--color-white);cursor:pointer;box-shadow:var(--shadow-floating)}.contact-menu{inset:auto;bottom:calc(var(--space-sm) + var(--dock-height) + var(--space-xs) + env(safe-area-inset-bottom,0px));right:max(var(--space-sm),calc((100vw - var(--dock-width))/2),env(safe-area-inset-right,0px));width:220px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 112px - env(safe-area-inset-bottom,0px));padding:var(--space-sm);border:1px solid var(--color-rule);border-radius:var(--radius-panel);background:var(--color-white);color:var(--color-ink);box-shadow:var(--shadow-floating);font:var(--text-body)/1.5 var(--font-body);margin:0;position:fixed;overflow-y:auto}.contact-menu a,.contact-menu button{width:100%;min-height:44px;padding:var(--space-xs);border-radius:var(--radius-portrait);background:var(--color-white);color:var(--color-ink);font:inherit;text-align:left;cursor:pointer;border:0;align-items:center;text-decoration:none;display:flex}.contact-menu button:disabled{opacity:.55;cursor:wait}.copy-status{margin-top:var(--space-xs);overflow-wrap:anywhere;font-size:12px}.copy-status:empty{display:none}.email-fallback{margin-top:var(--space-xs);font-size:12px;display:block}.email-fallback[hidden]{display:none}.email-fallback input{border:1px solid var(--color-rule);border-radius:var(--radius-portrait);background:var(--color-paper);width:100%;min-width:0;min-height:44px;color:var(--color-ink);font:12px var(--font-body);margin-top:4px;padding:4px}.phone-dock a:focus-visible,.say-hi:focus-visible,.contact-menu :is(a,button,input):focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}.phone-dock a:active,.contact-menu :is(a,button):active{background:var(--color-wash)}.say-hi:active{border-color:var(--color-white)}@media (hover:hover){.phone-dock a:hover,.contact-menu :is(a,button):hover{background:var(--color-wash)}.say-hi:hover{border-color:var(--color-white)}}.project-link{color:inherit;cursor:pointer;border-radius:var(--radius-panel);text-decoration:none;display:block}.project-link:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;background:var(--color-paper)}.project-link:active{background:var(--color-paper)}@media (hover:hover){.project-link:hover{background:var(--color-paper)}}.controls label,.phone-dock nav,.contact-menu,.email-fallback input{border-color:var(--rule-control)}.controls input:checked+label{background:var(--button-bg);color:var(--button-text);border-color:var(--button-bg)}.thumbnail,.cover{background:var(--surface-placeholder)}.email-fallback input{background:var(--surface-input);color:var(--text-primary)}.say-hi{background:var(--button-bg);color:var(--button-text);border-color:var(--button-bg)}.say-hi:hover,.say-hi:active{border-color:var(--button-edge)}.project-link:active,.project-link:focus-visible,.phone-dock a:active,.contact-menu :is(a,button):active,.rail :is(a,button):active,.sections a:active,.contact-resources :is(a,button):active,.detail-sidebar>.back:active{background:var(--surface-hover)}.phone-dock a[aria-current]:active,.rail a[aria-current]:active,.sections a[aria-current]:active{background:var(--selection-bg);color:var(--selection-text)}@media (hover:hover){.project-link:hover,.phone-dock a:not([aria-current]):hover,.contact-menu :is(a,button):not(:disabled):hover,.rail :is(a,button):not(:disabled):not([aria-current]):hover,.sections a:not([aria-current]):hover,.contact-resources :is(a,button):not(:disabled):hover,.detail-sidebar>.back:hover{background:var(--surface-hover)}.phone-dock a[aria-current]:hover{background:var(--selection-bg);color:var(--selection-text)}}
