/* Portfolio: the personal site's monochrome architecture, with the work in color. */
.work-page { --shell: 1500px; --gutter: clamp(20px, 4.6vw, 80px); }
.work-page button,.work-page input { font:inherit; }
.work-page button { cursor:pointer; }
.work-page [hidden] { display:none !important; }
.work-page .small-label { font:400 10px/1.7 var(--font-mono); letter-spacing:.1em; color:#a6a6a8; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.work-nav { background:rgba(10,10,11,.95); border-bottom:1px solid var(--hairline); }
.work-nav .nav__links a[aria-current] { color:#fff; }
.work-nav .nav__links>a { display:block !important; }
.work-nav .nav__links a[aria-current]::after { content:""; display:block; height:1px; margin-top:3px; background:#fff; }
.work-hero { padding-top:136px; padding-bottom:0; }
.hero-topline { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:56px; }
.hero-topline .small-label { display:flex; align-items:center; gap:10px; }
.live-dot { width:5px; height:5px; display:inline-block; border-radius:50%; background:#ddd; box-shadow:0 0 0 4px #ffffff0c; }
.hero-layout { display:grid; grid-template-columns:1.03fr 1fr; gap:5%; align-items:center; padding-bottom:60px; }
.hero-statement h1 { font:500 clamp(58px,6.1vw,90px)/1.03 var(--font-display); letter-spacing:-.07em; margin-bottom:32px; }
.hero-statement h1 span { color:#99999e; }
.hero-description { color:#b1b1b7; font-size:clamp(15px,1.2vw,18px); line-height:1.8; }
.browse-link { margin-top:38px; display:inline-flex; align-items:center; gap:32px; font-size:13px; border-bottom:1px solid #777; padding-bottom:9px; transition:gap .2s; }
.browse-link:hover { gap:48px; }
.browse-link span { font-size:22px; }
.hero-window { display:block; border:1px solid #3b3b3d; background:#131314; position:relative; transform:rotate(-2deg); transition:transform .5s; box-shadow:0 24px 80px #0008; }
.hero-window:hover { transform:rotate(0); }
.window-bar { padding:13px 17px; display:flex; justify-content:space-between; gap:16px; font:9px/1.4 var(--font-mono); color:#c1c1c5; letter-spacing:.06em; }
.hero-window>img { width:100%; aspect-ratio:1.3; object-fit:cover; object-position:50% 71%; }
.window-caption { padding:22px 20px; display:flex; justify-content:space-between; align-items:flex-end; gap:15px; }
.window-caption>span:first-child { font:400 clamp(17px,1.8vw,24px)/1.25 var(--font-display); letter-spacing:-.035em; }
.window-caption-small { font:8px/1.7 var(--font-mono); text-align:right; color:#99999f; }
.hero-foot { padding:25px 0; border-top:1px solid var(--hairline); display:flex; justify-content:space-between; gap:20px; font-size:11px; color:#99999f; }
.hero-foot a { color:#ccc; }
.spotlight-strip { background:#111112; border-block:1px solid var(--hairline); }
.spotlight-grid { display:grid; grid-template-columns:.7fr 1fr 1fr 1fr; }
.spotlight-label { padding:30px 15px 30px 0; align-self:center; }
.spotlight-grid>a { display:flex; align-items:center; gap:14px; padding:30px 22px; border-left:1px solid var(--hairline); transition:background .2s; }
.spotlight-grid>a:hover { background:#1c1c1e; }
.spotlight-num { font:10px var(--font-mono); color:#999; align-self:flex-start; margin-top:5px; }
.spotlight-grid strong { display:block; font-size:13px; font-weight:500; }
.spotlight-grid small { display:block; font-size:10px; color:#99999e; margin-top:4px; }
.spotlight-grid>a>span:last-child { margin-left:auto; color:#b2b2b5; }
.collection { padding-top:104px; padding-bottom:96px; scroll-margin-top:90px; }
.collection-head { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:44px; }
.collection-head h2 { font:400 clamp(30px,3.5vw,48px)/1.1 var(--font-display); letter-spacing:-.05em; margin-top:18px; }
.collection-head>p { color:#99999f; font-size:13px; line-height:1.8; }
.collection-controls { display:flex; justify-content:space-between; gap:25px; align-items:center; border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); padding:17px 0; }
.filter-list { display:flex; gap:5px; flex-wrap:wrap; }
.filter { background:transparent; color:#aaaab0; border:1px solid transparent; border-radius:0; padding:9px 12px; font-size:11px !important; transition:background .2s,color .2s; white-space:nowrap; }
.filter span { font:8px var(--font-mono); margin-left:6px; color:#8b8b91; vertical-align:super; }
.filter.is-active { color:#111; background:#efefed; }
.filter.is-active span { color:#555; }
.filter:hover:not(.is-active) { color:#fff; border-color:#444; }
.project-search { display:flex; align-items:center; gap:9px; color:#aaa; }
.project-search input { width:140px; background:transparent; color:#eee; border:0; border-bottom:1px solid transparent; padding:7px 0; font-size:11px; border-radius:0; }
.project-search input:focus { outline:0; border-bottom-color:#aaa; }
.project-search input::placeholder { color:#99999e; }
.filter-status { margin-top:20px; margin-bottom:25px; font-size:9px !important; }
.project-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:44px 26px; }
.project { min-width:0; scroll-margin-top:100px; }
.project summary { cursor:pointer; list-style:none; }
.project summary::-webkit-details-marker { display:none; }
.project summary:focus-visible { outline-offset:8px; }
.project-visual { position:relative; overflow:hidden; background:#121214; border:1px solid #ffffff12; aspect-ratio:1.5; }
.project-visual>img { width:100%; height:100%; object-fit:cover; transition:transform .65s var(--ease); }
.project:hover .project-visual>img { transform:scale(1.035); }
.project-visual--ghosthands>img { object-position:50% 76%; }
.project-visual--crank>img { object-fit:contain; background:#000; }
.project-visual--wieman-os>img { object-fit:contain; background:#090a0a; padding:14px; }
.project-visual--stark>img { object-position:50% 56%; }
.project-visual--interface>img { object-fit:contain; background:#080809; padding:0; }
.project-visual--crank>img { object-fit:cover; }
.visual-label { position:absolute; bottom:10px; left:10px; max-width:calc(100% - 20px); padding:4px 7px; background:#0a0a0be8; border:1px solid #ffffff25; font:8px/1.5 var(--font-mono); color:#ddd; letter-spacing:.02em; }
.project-copy { padding:18px 0 0; }
.project-meta { display:flex; justify-content:space-between; gap:10px; color:#929298; font:8px/1.5 var(--font-mono); text-transform:uppercase; letter-spacing:.055em; }
.project-heading { display:flex; align-items:center; gap:14px; margin-top:11px; }
.project-heading h3 { font:400 clamp(19px,1.6vw,23px)/1.2 var(--font-display); letter-spacing:-.045em; }
.project-arrow { margin-left:auto; color:#bbb; transform:translate(0,0); transition:transform .25s; }
.project:hover .project-arrow { transform:translate(3px,-3px); }
.project-short { margin-top:9px; font-size:12px; color:#b0b0b6; line-height:1.7; max-width:95%; }
.project-type { display:block; font-size:9px; margin-top:14px; color:#898990; }
.project-visual--diagram { background-color:#121214; background-image:linear-gradient(#ffffff03 1px,transparent 1px),linear-gradient(90deg,#ffffff03 1px,transparent 1px); background-size:24px 24px; display:flex; align-items:center; padding:32px 22px; }
.diagram-index { position:absolute; top:15px; left:16px; font:8px var(--font-mono); letter-spacing:.12em; color:#8e8e95; }
.workflow { display:grid; grid-template-columns:1fr 1fr; gap:18px 24px; width:100%; position:relative; }
.workflow::before { content:""; position:absolute; top:25%; bottom:25%; width:1px; background:#434348; left:50%; }
.workflow>span { font:11px/1.5 var(--font-display); background:#19191c; border:1px solid #3c3c42; min-height:46px; padding:10px; display:flex; align-items:center; gap:9px; position:relative; }
.workflow i { font:8px var(--font-mono); font-style:normal; color:#95959d; }
.project:nth-child(4n) .project-visual--diagram { background-color:#171719; }
.no-results { text-align:center; padding:90px 20px; border-bottom:1px solid var(--hairline); }
.no-results h3 { font:400 30px var(--font-display); }
.no-results p { color:#aaa; font-size:14px; margin:12px; }
.no-results button { margin-top:10px; background:none; border:0; color:#fff; border-bottom:1px solid #aaa; padding:8px; font-size:13px; }
.archive { background:#e9e8e3; color:#171717; padding:90px 0 50px; scroll-margin-top:76px; }
.archive .small-label { color:#555; }
.archive-head { display:grid; grid-template-columns:1.25fr .75fr; gap:10%; margin-bottom:44px; }
.archive h2 { font:400 clamp(32px,3.6vw,50px)/1.15 var(--font-display); letter-spacing:-.05em; margin-top:18px; }
.archive h2 span { color:#757571; }
.archive-intro { padding-top:34px; }
.archive-intro p { font-size:13px; color:#555552; line-height:1.8; }
.archive-intro p+p { margin-top:12px; }
.legacy-row { display:grid; grid-template-columns:44px 1fr 1fr 70px; gap:20px; align-items:center; padding:18px 0; border-top:1px solid #0003; }
.legacy-index { font:9px var(--font-mono); color:#555; }
.legacy-row h3 { font:400 19px var(--font-display); letter-spacing:-.03em; }
.legacy-row p { font-size:12px; color:#5f5f5a; }
.legacy-state { text-align:right; font:9px var(--font-mono); color:#5f5f5a; }
.archive-footnote { font-size:10px; line-height:1.8; color:#64645f; border-top:1px solid #0003; padding-top:22px; max-width:100%; }
.work-outro { padding-top:100px; padding-bottom:90px; }
.outro-layout { display:flex; justify-content:space-between; align-items:flex-end; gap:30px; margin-top:28px; }
.outro-layout h2 { font:400 clamp(42px,6.2vw,88px)/1.03 var(--font-display); letter-spacing:-.06em; }
.outro-layout p { font-size:14px; color:#a6a6ae; line-height:1.8; margin-bottom:24px; }
.work-footer { border-top:1px solid var(--hairline); padding-top:30px; padding-bottom:32px; display:flex; gap:30px; justify-content:space-between; align-items:center; font-size:10px; color:#aaaab0; }
.work-footer .brand { color:#ddd; font-size:13px; }
.work-footer nav { display:flex; gap:20px; }
.work-footer p { font:8px var(--font-mono); }
.project-detail { padding:20px; border:1px solid var(--hairline); margin-top:20px; }
.case-dialog { position:fixed; inset:0; margin:auto; width:min(1040px,calc(100% - 48px)); max-height:calc(100dvh - 48px); padding:0; border:1px solid #56565c; background:#101012; color:#eee; overscroll-behavior:contain; }
.case-dialog::backdrop { background:#000c; backdrop-filter:blur(7px); }
.case-toolbar { position:sticky; top:0; z-index:2; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:15px 25px; background:#101012f5; border-bottom:1px solid var(--hairline); }
.case-toolbar>div { display:flex; gap:20px; }
.case-toolbar button,.case-navigation button { border:0; background:none; color:#ddd; font-size:11px; padding:8px 0; }
.case-toolbar button span { margin-left:8px; font-size:18px; vertical-align:middle; }
.case-inner { padding:42px 48px; }
.case-kicker { font:9px/1.7 var(--font-mono); color:#a2a2aa; text-transform:uppercase; letter-spacing:.08em; }
.case-kicker span { float:right; }
.case-title { font:400 clamp(34px,5vw,64px)/1.1 var(--font-display); letter-spacing:-.06em; margin-top:22px; }
.case-intro { color:#c2c2c9; font-size:17px; line-height:1.8; margin-top:22px; margin-bottom:32px; max-width:800px; }
.case-figure { margin:28px 0 36px; }
.case-figure img { width:100%; height:auto; max-height:580px; object-fit:contain; background:#080809; border:1px solid var(--hairline); }
.case-figure figcaption { color:#9999a2; font:9px/1.6 var(--font-mono); margin-top:9px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px 18px; }
.case-figure figcaption>a { color:#dedee3; white-space:nowrap; border-bottom:1px solid #666; }
.case-image-link { display:block; cursor:zoom-in; }
.case-image-link:focus-visible { outline:1px solid #fff; outline-offset:3px; }
.case-columns { display:grid; grid-template-columns:1fr 1fr; gap:50px; margin-top:28px; }
.case-columns h3 { font:400 21px var(--font-display); margin-bottom:16px; letter-spacing:-.025em; }
.case-columns p { color:#aaaab3; font-size:13px; line-height:1.9; }
.case-columns p+h3 { margin-top:28px; }
.case-columns li { padding:13px 0 13px 20px; border-top:1px solid var(--hairline); color:#b5b5bd; font-size:13px; line-height:1.8; position:relative; }
.case-columns li::before { content:"+"; position:absolute; left:0; color:#92929a; font-family:var(--font-mono); }
.case-note { border-left:2px solid #75757c; padding:5px 0 5px 20px; margin:36px 0; }
.case-note p { color:#a6a6af; font-size:12px; line-height:1.9; margin-top:8px; }
.case-tags { display:flex; flex-wrap:wrap; gap:7px; }
.case-tags span { padding:6px 10px; border:1px solid #ffffff26; color:#b7b7c0; font:9px var(--font-mono); }
.case-links { margin-top:30px; display:flex; flex-wrap:wrap; gap:22px; }
.case-link { font-size:12px; border-bottom:1px solid #777; padding:8px 0; }
.case-link span { margin-left:15px; }
.case-navigation { display:flex; justify-content:space-between; gap:20px; align-items:center; border-top:1px solid var(--hairline); padding:15px 30px; }
.copy-status { font:10px/1.6 var(--font-mono); text-align:center; color:#ccc; padding:0 20px; }
.copy-status:not(:empty) { padding-bottom:15px; }
body.case-open { overflow:hidden; }
@media(min-width:1500px) { .hero-window>img { aspect-ratio:1.55; } }
@media(max-width:1100px) { .hero-topline { margin-bottom:40px; }.hero-statement h1 { font-size:7.8vw; }.hero-layout { gap:4%; }.spotlight-grid { grid-template-columns:1fr 1fr 1fr; }.spotlight-label { display:none; }.spotlight-grid>a:first-of-type { border-left:0; padding-left:0; }.spotlight-grid>a { padding:25px 18px; }.collection-controls { align-items:flex-start; }.filter { padding:9px 8px; }.project-grid { gap:35px 20px; }.project-heading h3 { font-size:20px; }.workflow { gap:12px 16px; }.workflow>span { font-size:10px; padding:7px; gap:5px; }.work-footer { flex-wrap:wrap; }.work-footer p { margin-left:auto; } }
@media(max-width:800px) { .work-page { --nav-h:68px; }.work-hero { padding-top:108px; }.hero-topline>.small-label:last-child { display:none; }.hero-layout { grid-template-columns:1fr; gap:44px; padding-bottom:40px; }.hero-statement h1 { font-size:clamp(60px,12vw,94px); }.hero-statement h1 br { display:none; }.hero-description br { display:none; }.hero-description { max-width:400px; font-size:15px; }.browse-link { margin-top:24px; }.hero-window { transform:rotate(-1deg); max-width:600px; margin:0 4px; }.hero-window>img { aspect-ratio:1.8; object-position:50% 75%; }.window-caption { padding:17px; }.hero-foot { font-size:10px; flex-direction:column; gap:8px; }.spotlight-grid>a { padding:22px 12px; gap:8px; }.spotlight-num { display:none; }.spotlight-grid strong { font-size:11px; }.spotlight-grid small { font-size:9px; }.spotlight-grid>a>span:last-child { display:none; }.collection { padding-top:64px; padding-bottom:64px; }.collection-head { margin-bottom:30px; }.collection-head>p { font-size:11px; }.collection-controls { flex-direction:column; gap:12px; padding:12px 0; }.project-search { width:100%; padding:0 10px; }.project-search input { width:100%; }.project-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px 18px; }.project-heading h3 { font-size:20px; }.archive { padding-top:60px; }.archive-head { gap:30px; grid-template-columns:1fr; margin-bottom:25px; }.archive-intro { padding-top:0; max-width:550px; }.legacy-row { grid-template-columns:25px 1fr 65px; gap:12px; }.legacy-row p { display:none; }.legacy-row h3 { font-size:17px; }.work-outro { padding-block:70px; }.outro-layout { align-items:flex-start; }.outro-layout p { font-size:12px; }.outro-layout h2 { font-size:52px; }.work-footer { gap:20px; }.work-footer p { width:100%; margin:0; }.case-inner { padding:30px; }.case-columns { gap:30px; }.case-dialog { width:calc(100% - 24px); max-height:calc(100dvh - 24px); } }
@media(max-width:520px) { .work-nav .brand__word { font-size:9px; letter-spacing:.16em; }.work-nav .brand { gap:7px; }.work-nav .brand__mark { width:21px; height:21px; }.work-nav .nav__links { gap:17px; }.work-nav .nav__links>a { font-size:10px; }.work-nav .nav__cta { display:none; }.hero-topline { margin-bottom:30px; }.hero-statement h1 { font-size:65px; }.hero-statement h1 br { display:initial; }.hero-layout { gap:34px; }.window-bar { font-size:7px; padding:11px; }.window-caption-small { font-size:7px; }.window-caption>span:first-child { font-size:20px; }.hero-foot { margin-top:3px; }.spotlight-grid { grid-template-columns:1fr; }.spotlight-grid>a { padding:15px 0; border-left:0; border-top:1px solid #ffffff10; }.spotlight-grid strong { font-size:12px; }.spotlight-grid small { font-size:10px; }.spotlight-grid>a>span:last-child { display:block; }.spotlight-num { display:block; margin-right:9px; }.spotlight-grid>a:first-of-type { border-top:0; }.collection-head { display:block; }.collection-head>p { margin-top:16px; font-size:12px; }.collection-head>p br { display:none; }.filter-list { gap:3px; }.filter { padding:9px; font-size:10px !important; }.filter span { font-size:7px; }.project-grid { grid-template-columns:1fr; gap:34px; }.project-visual { aspect-ratio:1.55; }.project-meta { font-size:9px; }.project-heading h3 { font-size:25px; }.project-short { font-size:13px; }.project-type { font-size:10px; }.project-copy { padding-top:16px; }.workflow { padding:10px; gap:20px 28px; }.workflow>span { font-size:12px; padding:12px; }.diagram-index { font-size:9px; }.visual-label { font-size:8px; }.outro-layout { flex-direction:column; gap:28px; }.outro-layout h2 { font-size:54px; }.outro-layout p { font-size:14px; }.work-footer nav { flex-wrap:wrap; gap:18px; }.case-toolbar { padding:10px 16px; gap:10px; }.case-toolbar>.small-label { font-size:8px; }.case-toolbar>div { gap:14px; }.case-toolbar button { font-size:10px; }.case-toolbar button span { margin-left:3px; }.case-inner { padding:28px 22px; }.case-kicker { font-size:8px; }.case-kicker span { float:none; margin-left:6px; }.case-intro { font-size:15px; }.case-columns { grid-template-columns:1fr; gap:30px; }.case-navigation { gap:10px; padding:15px; }.case-navigation button { font-size:10px; }.case-navigation .small-label { font-size:8px; } }
@media(prefers-reduced-motion:reduce) { .work-page *, .work-page *::before, .work-page *::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; }.hero-window { transform:none; } }
@media print { .nav,.grain,.collection-controls,.spotlight-strip,.work-outro,.work-footer,.case-dialog,.project-visual,.hero-window { display:none!important; }.work-page { background:white;color:black; }.work-hero { padding-top:20px; }.project-grid { display:block; }.project { break-inside:avoid; margin-bottom:25px; }.project-short,.project-type { color:#444; }.archive { background:white; }.project-detail { display:none; } }