@charset "UTF-8"; @font-face { font-family: "Geist"; src: local("SF Pro"), url("../fonts/Geist[wght].woff2") format("woff2-variations"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Geist"; src: local("SF Pro"), url("../fonts/Geist-Italic[wght].woff2") format("woff2-variations"); font-weight: 100 900; font-style: italic; font-display: swap; } @font-face { font-family: "Geist Mono"; src: local("SF Mono"), url("../fonts/GeistMono-VariableFont_wght.ttf") format("truetype-variations"); font-weight: 100 900; font-style: normal; font-display: swap; } /*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */ html { line-height: 1.15; -webkit-text-size-adjust: 100%; } body { margin: 0; } h1 { font-size: 2em; margin: 0.67em 0; } hr { box-sizing: content-box; height: 0; overflow: visible; } pre { font-family: monospace, monospace; font-size: 1em; } a { background-color: transparent; } abbr[title] { border-bottom: none; text-decoration: underline; -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } b, strong { font-weight: bolder; } code, kbd, samp { font-family: monospace, monospace; font-size: 1em; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } img { border-style: none; } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; } button, input { overflow: visible; } button, select { text-transform: none; } [type=button], [type=reset], [type=submit], button { -webkit-appearance: button; } [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner { border-style: none; padding: 0; } [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring, button:-moz-focusring { outline: 1px dotted ButtonText; } fieldset { padding: 0.35em 0.75em 0.625em; } legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; } progress { vertical-align: baseline; } textarea { overflow: auto; } [type=checkbox], [type=radio] { box-sizing: border-box; padding: 0; } [type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button { height: auto; } [type=search] { -webkit-appearance: textfield; outline-offset: -2px; } [type=search]::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } details { display: block; } summary { display: list-item; } template { display: none; } [hidden] { display: none; } a, article, aside, blockquote, body, code, dd, div, dl, dt, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, html, input[type=email], input[type=number], input[type=password], input[type=tel], input[type=text], input[type=url], legend, li, main, nav, ol, p, pre, section, table, td, textarea, th, tr, ul { box-sizing: border-box; } img { max-width: 100%; } html, body, div, article, aside, section, main, nav, footer, header, form, fieldset, legend, pre, code, a, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, blockquote, figcaption, figure, textarea, table, td, th, tr, input[type=email], input[type=number], input[type=password], input[type=tel], input[type=text], input[type=url], .border-box { box-sizing: border-box; } .cta-bar, .figma-file-link, .file-link, figure.gallery-full, .gallery-figure, details summary, details { border-style: solid; border-width: 1px; } main.side-projects-index search { border-bottom-style: solid; border-bottom-width: 1px; } .skip-link { top: 0; } .skip-link { left: 2rem; } .figma-file-link .figma-file-thumb .figma-file-icon, .figma-file-link .figma-file-thumb .figma-file-thumb-img, .file-link .file-link-thumb .file-link-icon, .file-link .file-link-thumb .file-link-thumb-img, .gallery img, .gallery a, .writing-individual h1 .thin, .portfolio-individual .portfolio-individual-header h1 .thin, .nav-modal img, .masthead img { display: block; } .content-page .section-contents .external-link-inline span[aria-hidden=true] { display: inline-block; } body { font-family: -apple-system, BlinkMacSystemFont, "SF Pro", "Geist", "avenir next", avenir, helvetica, "helvetica neue", ubuntu, roboto, noto, "segoe ui", arial, sans-serif; } body code[class*=language-], body pre[class*=language-], var { font-family: "SF Mono", "Geist Mono", ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace; } .embed-caption, .content-page figure:not([class]) figcaption, .subsection section:has(> h4:first-child) h4 { font-style: italic; } .content-page .section-contents .external-link-inline span[aria-hidden=true] { font-weight: 100; } .writing-individual h1 .thin, .portfolio-individual .portfolio-individual-header h1 .thin { font-weight: 200; } .home-header .clause, .nav-modal-content li, .fw3 { font-weight: 300; } #page > footer .authorship strong { font-weight: 400; } .subsection section:has(> h4:first-child) h4 { font-weight: 500; } .writing-item dl dt, .portfolio-item dl dt, .nav-modal-content a { font-weight: 700; } main.side-projects-index > header h1, .writing-header h1, .portfolio-header h1, .work-header h1, .home .section li, .nav-modal-content a, .nav-modal-content li, .nav-modal button, .masthead button { line-height: 1; } .figma-file-link .figma-file-text p, .file-link .file-link-text p, .home-header h1 { line-height: 1.25; } .nav-modal-content ul, .breadcrumbs ol { list-style-type: none; } .home-header h1 { max-width: 48rem; } .writing-item.unpublished, .portfolio-item.unpublished { opacity: 0.5; } .embed-figure.full, .figma-file-link .figma-file-thumb .figma-file-icon, .figma-file-link .figma-file-thumb, .file-link .file-link-thumb .file-link-icon, .file-link .file-link-thumb, .gallery-full, body { position: relative; } .figma-file-link .figma-file-thumb .figma-file-thumb-img, .file-link .file-link-thumb .file-link-thumb-img { position: absolute; } .embed-figure, main.side-projects-index ul.side-projects-list > li:not([hidden]) h3, main.side-projects-index ul.side-projects-list > li:not([hidden]) p, main.side-projects-index ul.side-projects-list > li:not([hidden]) ul, main.side-projects-index ul.side-projects-list, .home .section ul, .nav-modal-content ul, .breadcrumbs ol { padding: 0; } .nav-modal button, .masthead button { padding: 0.25rem; } .cta-bar, .figma-file-link, .file-link, .section .section-contents > aside { padding: 0.5rem; } .gallery-figure { padding: 1rem; } .nav-modal-content, body { padding: 2rem; } details[open] { padding-bottom: 0.5rem; } main.side-projects-index search { padding-bottom: 1rem; } .writing-item, .portfolio-item { padding-top: 2rem; } details summary, details { padding-top: 0.25rem; padding-bottom: 0.25rem; } math { padding-top: 1rem; padding-bottom: 1rem; } details summary, details { padding-left: 0.5rem; padding-right: 0.5rem; } main.side-projects-index ul.side-projects-list > li:not([hidden]) h3, main.side-projects-index ul.side-projects-list > li:not([hidden]) p, main.side-projects-index ul.side-projects-list > li:not([hidden]) ul, main.side-projects-index > header h1, .figma-file-link .figma-file-text p, .file-link .file-link-text p, .writing-item h2, .writing-header h1, .portfolio-item h2, .portfolio-header h1, .note p, .work-header h1, .section h2, .section h3, .nav-modal-content ul, .nav-modal button, .breadcrumbs ol, .masthead button { margin: 0; } .embed-figure, .writing-item dl dd, .portfolio-item dl dd { margin-left: 0; } .embed-caption, .content-page figure:not([class]) figcaption { margin-left: 1rem; } .embed-figure { margin-right: 0; } .cta-bar > div > :last-child, .section-contents figure.embed-figure menu.embed-controls li, figure.gallery-full:last-child, .content-page .section ul:last-child, .section > *:last-child, details[open] > :last-child, .mb0 { margin-bottom: 0; } .section .card dt { margin-bottom: 0.25rem; } .content-page .section li:not(.mb0), .subsection section:has(> h4:first-child) h4, .section .card, .section h3, .section p, .section ul, .section dl, .home .section li, details[open] summary { margin-bottom: 0.5rem; } .side-project > header h1, .writing-item dl div, .portfolio-item dl div { margin-bottom: 1rem; } main.side-projects-index > header, .home-header h1 { margin-bottom: 2rem; } .side-project > header { margin-bottom: 4rem; } .cta-bar > div > :first-child, .section-contents .embed-figure:first-child, .side-project > header p, .file-link:first-child, .gallery:first-child, .content-page .section-contents figure:first-child:not([class]), .section h2, .section h3, .section p, .section ul, .section dl, .home-header h1 { margin-top: 0; } .content-page .section ul ul { margin-top: 0.5rem; } .cta-bar + .cta-bar, .work-header + .work-intro, .subsection section:has(> h4:first-child) h4 { margin-top: 1rem; } .writing-header + .writing-item, .portfolio-header + .portfolio-item, #page > footer { margin-top: 2rem; } main.side-projects-index > header { margin-top: 4rem; } .side-project > header h1, .writing-header, .portfolio-individual .portfolio-individual-header, .portfolio-header, .contact-header, .work-header, .home-header { margin-top: 8rem; } .portfolio-individual .portfolio-individual-header h1, details[open] > pre[class*=language-]:last-child { margin-top: 0; margin-bottom: 0; } .embed-caption, .img-loose { margin-top: 0.5rem; margin-bottom: 0.5rem; } math, .content-page pre[class*=language-], main.side-projects-index ul.side-projects-list, .figma-file-link, .file-link, .gallery, .content-page .section ul, .section .section-contents > aside, details { margin-top: 1rem; margin-bottom: 1rem; } .embed-figure.full, .side-project .section, figure.gallery-full, .writing-individual .section, .content-page figure:not([class]), .section .subsection, .section .sidecar { margin-top: 2rem; margin-bottom: 2rem; } .writing-item, .portfolio-item, .section { margin-top: 4rem; margin-bottom: 4rem; } main.side-projects-index ul.side-projects-list, .content-page figure:not([class]) { margin-left: 0; margin-right: 0; } .subsection-workindex > header p { text-transform: uppercase; } .work-header h1 { font-size: 5rem; } main.side-projects-index > header h1, .writing-individual h1, .portfolio-individual .portfolio-individual-header h1 { font-size: 3rem; } .writing-header h1, .portfolio-header h1 { font-size: 2.25rem; } .home-header h1 { font-size: 1.5rem; } main.side-projects-index ul.side-projects-list > li:not([hidden]) h3, main.side-projects-index ul.side-projects-list > li:not([hidden]) p, main.side-projects-index ul.side-projects-list > li:not([hidden]) ul, .section h2, .section h3 { font-size: 1rem; } body pre[class*=language-], body pre[class*=language-] > code[class*=language-], .cta-bar, .section-contents figure.embed-figure menu.embed-controls button, .figma-file-link, .file-link { font-size: 0.875rem; } #page > footer .authorship, #page > footer .authorship small { font-size: 0.75rem; } .figma-file-link, .file-link { max-width: 30em; } #page > footer .authorship, #page > footer .authorship small { max-width: 34em; } .embed-figure.full, .gallery-full { z-index: 5; } .sr-only, .content-page .hidden-h3 h3, .skip-link { position: absolute; padding: 0; border-width: 0; overflow: hidden; clip: rect(0, 0, 0, 0); width: 1px; height: 1px; margin: -1px; } .sr-only-focusable:focus, .skip-link:focus { position: relative; width: auto; height: auto; clip: initial; margin: inherit; border: initial; } .cta-bar, main.side-projects-index ul.side-projects-list, .figma-file-link, .file-link, .note, .subsection-workindex > header div, .subsection-workindex > header, .nav-modal-content, .breadcrumbs .breadcrumb-past, .breadcrumbs ol, .masthead { display: flex; } .gallery { display: grid; } body h1, body h2, body h3, body h4, body h5, body h6, body p, body li, body dt, body dd, body span, body a { max-width: 46em; } body h1, body h2, body h3, body h4, body h5, body h6 { text-wrap: balance; } .home .section-contents p { text-wrap: pretty; } .writing-item dl dt, .portfolio-item dl dt, .section h2, .section h3 { text-transform: lowercase; } a { color: black; } .breadcrumbs .breadcrumb-past a:hover, body { color: #222222; } .nav-modal-content { background: white; } .writing-individual h1, .portfolio-individual .portfolio-individual-header h1 { line-height: 0.92; } .cta-bar, .side-project > header h1, #page > footer .authorship, #page > footer .authorship small { line-height: 1.25; } body pre[class*=language-], body pre[class*=language-] > code[class*=language-], .section h2, .section h3, .section h4, .section p, .section dt, .section dd { line-height: 1.35; } body { line-height: 1.45; } .sr-only, .content-page .hidden-h3 h3, .skip-link { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); border: 0; } .sr-only-focusable:active, .sr-only-focusable:focus, .skip-link:active, .skip-link:focus { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; clip-path: none; } .skip-link:active, .skip-link:focus { position: absolute; } @media screen and (max-width: 767px) { .sr-only-mo { position: absolute; padding: 0; border-width: 0; overflow: hidden; clip: rect(0, 0, 0, 0); width: 1px; height: 1px; margin: -1px; } .sr-only-focusable-mo:focus { position: relative; width: auto; height: auto; clip: initial; margin: inherit; border: initial; } .sr-only-mo { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); border: 0; } .sr-only-focusable-mo:active, .sr-only-focusable-mo:focus { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; clip-path: none; } } @media screen and (min-width: 768px) { .subsection-workindex > header { display: block; } .home-header h1 { line-height: 1; } .nav-modal-content, body { padding: 4rem; } .writing-header, .portfolio-header { padding-bottom: 2rem; } .portfolio-individual .portfolio-individual-header { padding-top: 1rem; } .writing-header, .portfolio-header, .contact-header, .work-header, .section, .home-header { padding-top: 2rem; } .writing-item dl, .portfolio-item dl { margin: 0; } .embed-caption, .content-page figure:not([class]) figcaption { margin-left: 2rem; } .section .section-contents > aside > p:last-child, .section .section-contents > p:last-child, .section > *:last-child, .section h3, .home-header h1 { margin-bottom: 0; } .section .subsection, .section .sidecar { margin-bottom: 0.5rem; } .portfolio-attribution div { margin-bottom: 1rem; } main.side-projects-index > header { margin-bottom: 4rem; } .file-link:first-child, .section .section-contents p, .section .subsection, .section .sidecar { margin-top: 0; } .work-header + .work-intro { margin-top: 2rem; } main.side-projects-index > header, #page > footer { margin-top: 8rem; } .writing-header, .portfolio-individual .portfolio-individual-header, .portfolio-header, .work-header, .home-header { margin-top: 16rem; } .side-project .section, .writing-individual .section { margin-top: 0; margin-bottom: 0; } main.side-projects-index ul.side-projects-list, .figma-file-link, .file-link, .air { margin-top: 2rem; margin-bottom: 2rem; } .embed-figure.full { margin-top: 4rem; margin-bottom: 4rem; } .section { margin-top: 8rem; margin-bottom: 8rem; } main.side-projects-index > header h1, .writing-header h1, .portfolio-header h1, .work-header h1 { font-size: 6rem; } .nav-modal-content li { font-size: 3rem; } .home-header h1 { font-size: 2.25rem; } .section h2, .section h3 { font-size: 1rem; } .sr-only-ns { position: absolute; padding: 0; border-width: 0; overflow: hidden; clip: rect(0, 0, 0, 0); width: 1px; height: 1px; margin: -1px; } .sr-only-focusable-ns:focus { position: relative; width: auto; height: auto; clip: initial; margin: inherit; border: initial; } .section, .section h2, .section h3, .section h4, .section p, .section dt, .section dd { line-height: 1.45; } .sr-only-ns { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); border: 0; } .sr-only-focusable-ns:active, .sr-only-focusable-ns:focus { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; clip-path: none; } } @media screen and (min-width: 1024px) { .home-header .clause { font-weight: 200; } .writing-header, .portfolio-header, .contact-header, .work-header, .home-header { padding-top: 4rem; } figure.gallery-full:last-child, .section > *:last-child { margin-bottom: 0; } .writing-item dl, .portfolio-item dl { margin-top: 0.25rem; } .writing-item p, .portfolio-item p { margin-top: 0.5rem; } .writing-header + .writing-item, .portfolio-header + .portfolio-item { margin-top: 4rem; } figure.gallery-full:last-child, figure.gallery-full { margin-top: 4rem; margin-bottom: 4rem; } .writing-item, .portfolio-item { margin-top: 8rem; margin-bottom: 8rem; } .nav-modal-content a[href], .nav-modal-content li, .writing-individual h1, .portfolio-individual .portfolio-individual-header h1 { font-size: 6rem; } .home-header h1 { font-size: 3rem; } .sr-only-l { position: absolute; padding: 0; border-width: 0; overflow: hidden; clip: rect(0, 0, 0, 0); width: 1px; height: 1px; margin: -1px; } .sr-only-focusable-l:focus { position: relative; width: auto; height: auto; clip: initial; margin: inherit; border: initial; } .subsection-workindex > header { display: flex; } .section h2, .section h3, .section h4, .section p, .section dt, .section dd, body { line-height: 1.55; } .sr-only-l { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); border: 0; } .sr-only-focusable-l:active, .sr-only-focusable-l:focus { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; clip-path: none; } } @media screen and (min-width: 1350px) { .sr-only-xl { position: absolute; padding: 0; border-width: 0; overflow: hidden; clip: rect(0, 0, 0, 0); width: 1px; height: 1px; margin: -1px; } .sr-only-focusable-xl:focus { position: relative; width: auto; height: auto; clip: initial; margin: inherit; border: initial; } .sr-only-xl { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); border: 0; } .sr-only-focusable-xl:active, .sr-only-focusable-xl:focus { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; clip-path: none; } } .subsection-workindex > header p, .section h2, abbr:not(.uc), .sc { font-feature-settings: "c2sc"; } :root { scrollbar-gutter: stable; } body h1, body h2, body h3, body h4, body h5, body h6, body p, body li, body dt, body dd, body span, body a { letter-spacing: clamp(-1.75px, calc(0.583333px - 0.0364583em), 0px); } a:hover, a:focus { background: #e3e3ff; } a:focus { outline-offset: 0.1em; } abbr { text-transform: uppercase; } abbr[title]:not(.abbr-normal) { text-decoration: none; } .img-loose { max-width: 100%; } details:not([open]) { max-width: 46em; } details summary { margin: calc(-0.25rem - 1px) calc(-0.5rem - 1px); cursor: pointer; } .masthead { flex-direction: row-reverse; justify-content: space-between; gap: 2rem; } .masthead button { border: none; background: none; cursor: pointer; } .masthead button:hover, .masthead button:focus { background: #e3e3ff; } #page > footer { border-top: 1px solid black; } #page > footer .authorship { max-width: 56em; color: #333; } #page > footer .authorship, #page > footer .authorship small { font-variant-numeric: oldstyle-nums; } .breadcrumbs ol { gap: 0 1ch; flex-wrap: wrap; } .breadcrumbs ol li:not(:last-child):not(:has(+ .sr-only))::after { content: "/"/""; } .breadcrumbs .breadcrumb-past { gap: 1ch; } .breadcrumbs .breadcrumb-past a { color: #999; } .breadcrumbs .breadcrumb-current a { text-decoration: none; } .nav-modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; z-index: 1000; transition: opacity 0.2s; opacity: 1; } @starting-style { .nav-modal { opacity: 0; } } .nav-modal button { border: none; background: none; cursor: pointer; } .nav-modal button:hover, .nav-modal button:focus { background: #e3e3ff; } .nav-modal.hidden { display: none; } .nav-modal.fade-out { opacity: 0; } .nav-modal-content { flex-direction: row-reverse; justify-content: space-between; align-items: flex-start; width: 100%; height: 100%; box-sizing: border-box; overflow-y: auto; padding-top: max(2rem, env(safe-area-inset-top)); padding-bottom: max(2rem, env(safe-area-inset-bottom)); } @media screen and (min-width: 768px) { .nav-modal-content { padding-top: max(4rem, env(safe-area-inset-top)); padding-bottom: max(4rem, env(safe-area-inset-bottom)); } } .nav-modal-content li { font-size: max(2rem, min(10vw, 10vh)); max-width: none; } .nav-modal-content ul ul li { padding-left: 1em; } .nav-modal-content a { mix-blend-mode: multiply; text-decoration: none; } .home-header img { -o-object-fit: cover; object-fit: cover; -o-object-position: top right; object-position: top right; width: 100%; height: calc(50vw - 4rem); } @media screen and (min-width: 768px) { .home-header { display: grid; grid-template-columns: repeat(5, 1fr); grid-template-areas: "text text text image image"; gap: 2rem; } .home-header h1 { grid-area: text; } .home-header div { position: relative; grid-area: image; } .home-header img { position: absolute; inset: 0; width: 100%; height: 100%; } } @media screen and (min-width: 768px) { .home .section ul { margin-top: 0.18rem; } } @media screen and (min-width: 1024px) { .home .section ul { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 2rem; } } .home .section li { list-style: none; } .section h2 { text-transform: uppercase; } @media screen and (max-width: 767px) { .section > header { display: grid; gap: 0.5rem; grid-template-columns: auto 1fr; align-items: center; } .section > header::after { content: ""; display: block; border-top: 1px solid black; width: 100%; } } @media screen and (min-width: 768px) { .section { border-top: 1px solid black; display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(var(--subsections, 1), auto); grid-template-areas: "heading subheading contents contents contents"; gap: 2rem; padding-top: 3rem; } .section header { position: relative; grid-row: 1/-1; } .section header h2, .section header h3 { position: sticky; top: 2rem; } .section .section-contents { grid-area: contents; } .section .subsection, .section .sidecar { position: relative; grid-column: 2/-1; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; } .section .sidecar-text > div { position: sticky; top: 2rem; } } .section .section-contents > aside { background: rgba(0, 0, 0, 0.05); } .subsection a .fw3 { text-decoration: none; } .work .section > .section-contents { grid-area: unset; grid-column: 2/-1; } @media screen and (min-width: 1024px) { .work .section > .section-contents { grid-area: contents; grid-columns: unset; } } .subsection-workindex > header { flex-wrap: wrap; gap: 1ch; } .subsection-workindex > header div { gap: 1ch; } .subsection-workindex > header h3 { text-transform: none; } .subsection-workindex > header img { height: 1.438em; position: relative; top: 0.5px; } @media screen and (max-width: 767px) { .section > header:first-child + div.section-contents { margin-top: 2rem; } } .sidecar-text { text-wrap: balance; } .content-page figure:not([class]) figcaption { color: gray; } .content-page .section-contents .external-link-inline span[aria-hidden=true] { text-decoration: none; } .content-page .section-contents .external-link-inline span[aria-hidden=true]::before { content: " "; display: inline-block; } @media screen and (min-width: 768px) { .work-header { padding-left: calc((100% - 8rem) / 5 + 2rem); } } .contact-iframe { margin: -2rem; } .note { gap: 1ch; opacity: 0.8; } @media screen and (min-width: 768px) { .portfolio-header { padding-left: calc((100% - 8rem) / 5 + 2rem); } } @media screen and (min-width: 1024px) { .portfolio-header { padding-left: calc((100% - 8rem) / 5 * 2 + 4rem); } } .portfolio-item { border-top: 1px solid black; } @media screen and (min-width: 768px) { .portfolio-item { display: grid; gap: 0 2rem; grid-template-columns: repeat(5, 1fr); grid-template-areas: ". main main main main" ". meta meta meta meta"; } } @media screen and (min-width: 1024px) { .portfolio-item { grid-template-areas: "meta meta main main main"; } } .portfolio-item .portfolio-item-main { grid-area: main; } .portfolio-item dl { grid-area: meta; } @media screen and (min-width: 768px) { .portfolio-item dl { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; } } @media screen and (min-width: 768px) { .portfolio-individual .portfolio-individual-header { padding-left: calc((100% - 8rem) / 5 + 2rem); } } @media screen and (min-width: 1024px) { .portfolio-individual .portfolio-individual-header { padding-left: calc((100% - 8rem) / 5 * 2 + 4rem); } } @media screen and (min-width: 768px) { .portfolio-attribution div { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 1rem; } .portfolio-attribution div dt { grid-column: 1; } .portfolio-attribution div dd { margin: 0; grid-column: 2/4; } } .writing-header p { text-wrap: pretty; } .writing-item { border-top: 1px solid black; } @media screen and (min-width: 768px) { .writing-item { display: grid; gap: 0 2rem; grid-template-columns: repeat(5, 1fr); grid-template-areas: "main main main meta meta"; } } .writing-item .writing-item-main { grid-area: main; } .writing-item dl { grid-area: meta; } @media screen and (min-width: 768px) { .writing-item dl { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; } } .writing-individual .section { border-top: 0; } .gallery-figure { margin-left: 0; } .gallery-figure figcaption { font-style: italic; } .gallery { align-items: start; gap: 1rem; } .gallery a { cursor: zoom-in; max-width: none; } .gallery a.stroked { border: 1px solid black; } .gallery a:hover img { mix-blend-mode: multiply; } .gallery img { height: auto; } @media screen and (min-width: 768px) { .gallery-full { margin-left: calc(-1 * ((100vw - 8rem - 8rem) / 5 * 2 + 4rem)); } } .gallery-full:last-child { margin-bottom: 0; } figure.gallery-full { background: white; } figure.gallery-full:last-child { margin-bottom: 0; } .gallery-two { grid-template-columns: 1fr 1fr; } .gallery-three { grid-template-columns: 1fr 1fr; } @media screen and (min-width: 1024px) { .gallery-three { grid-template-columns: 1fr 1fr 1fr; } } .gallery-five { grid-template-columns: 1fr 1fr 1fr; } @media screen and (min-width: 1024px) { .gallery-five { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; } } .file-link { gap: 0.5rem; text-decoration: none; align-items: center; } .file-link .file-link-thumb { background: whitesmoke; border: 1px solid #e6e6e6; width: 84px; height: 48px; border-radius: 3px; } .file-link .file-link-thumb .file-link-thumb-img { inset: 0; -o-object-fit: contain; object-fit: contain; } .file-link .file-link-thumb .file-link-icon { top: 3px; left: 3px; } .file-link .file-link-text p { text-overflow: ellipsis; } .file-link .file-link-text .file-link-cta { opacity: 0.5; } .figma-file-link { gap: 0.5rem; text-decoration: none; align-items: center; } .figma-file-link .figma-file-thumb { background: whitesmoke; border: 1px solid #e6e6e6; width: 84px; height: 48px; border-radius: 3px; } .figma-file-link .figma-file-thumb .figma-file-thumb-img { top: 3px; left: 3px; right: 3px; bottom: 3px; width: calc(100% - 6px); height: calc(100% - 6px); -o-object-fit: contain; object-fit: contain; } .figma-file-link .figma-file-thumb .figma-file-icon { top: 3px; left: 3px; } .figma-file-link .figma-file-text p { text-overflow: ellipsis; } .figma-file-link .figma-file-text .figma-file-cta { opacity: 0.5; } main.side-projects-index ul.side-projects-list { list-style: none; min-height: 100vh; flex-direction: column; gap: 1rem; } main.side-projects-index ul.side-projects-list > li:not([hidden]) { max-width: none; } @media screen and (min-width: 768px) { main.side-projects-index ul.side-projects-list > li:not([hidden]) { display: grid; gap: 0 1rem; grid-template-columns: 20% 1fr; grid-template-rows: auto auto; grid-template-areas: "c a" "c b"; justify-items: start; align-items: baseline; } } main.side-projects-index ul.side-projects-list > li:not([hidden]) > :nth-child(1) { grid-area: a; } main.side-projects-index ul.side-projects-list > li:not([hidden]) > :nth-child(2) { grid-area: b; } main.side-projects-index ul.side-projects-list > li:not([hidden]) > :nth-child(3) { grid-area: c; } main.side-projects-index ul.side-projects-list > li:not([hidden]).draft { color: gray; } main.side-projects-index ul.side-projects-list > li:not([hidden]) ul { list-style: none; color: gray; font-size: 14px; line-height: 1.25; text-transform: lowercase; } @media screen and (max-width: 767px) { main.side-projects-index ul.side-projects-list > li:not([hidden]) ul::before { content: "tags: "; } } @media screen and (max-width: 767px) { main.side-projects-index ul.side-projects-list > li:not([hidden]) ul li { display: inline; -moz-column-break-inside: avoid; break-inside: avoid; } main.side-projects-index ul.side-projects-list > li:not([hidden]) ul li:not(:last-child)::after { content: ", "; } } .side-project .section { border-top: 0; } @media screen and (min-width: 768px) { .embed-figure.full { margin-left: calc(-1 * ((100vw - 8rem - 8rem) / 5 * 2 + 4rem)); } } .embed-placeholder { background: #eee; border: 1px solid black; aspect-ratio: 16/9; display: flex; justify-content: center; align-items: center; box-sizing: border-box; } .embed-placeholder, .embed-placeholder button { cursor: pointer; } .embed-placeholder button { background: white; border: 1px solid black; border-radius: 3px; } .embed-placeholder:hover, .embed-placeholder:focus-within { background: #ddd; } .embed-iframe { width: 100%; box-sizing: border-box; border: 1px solid black; display: block; } .section-contents figure.embed-figure menu.embed-controls { margin: 0; padding: 0.5rem; list-style: none; display: flex; gap: 0.5ch; justify-content: flex-end; background: #eee; border-radius: 5px 5px 0 0; border-top: 1px solid black; border-right: 1px solid black; border-left: 1px solid black; } .section-contents figure.embed-figure menu.embed-controls button { cursor: pointer; } /* .embed-caption { background: #eee; border-bottom: 1px solid black; border-right: 1px solid black; border-left: 1px solid black; border-radius: 0 0 5px 5px; @extend %ph3; @extend %pv2; } */ .embed-caption { color: gray; } [data-ratio="1/1"] { aspect-ratio: 1/1; } @media screen and (max-width: 767px) { [class][data-ratio-mo="1/1"] { aspect-ratio: 1/1; } } [data-ratio="4/3"] { aspect-ratio: 4/3; } @media screen and (max-width: 767px) { [class][data-ratio-mo="4/3"] { aspect-ratio: 4/3; } } [data-ratio="3/2"] { aspect-ratio: 3/2; } @media screen and (max-width: 767px) { [class][data-ratio-mo="3/2"] { aspect-ratio: 3/2; } } [data-ratio="16/9"] { aspect-ratio: 16/9; } @media screen and (max-width: 767px) { [class][data-ratio-mo="16/9"] { aspect-ratio: 16/9; } } [data-ratio="16/10"] { aspect-ratio: 16/10; } @media screen and (max-width: 767px) { [class][data-ratio-mo="16/10"] { aspect-ratio: 16/10; } } [data-ratio="21/9"] { aspect-ratio: 21/9; } @media screen and (max-width: 767px) { [class][data-ratio-mo="21/9"] { aspect-ratio: 21/9; } } [data-ratio="2/1"] { aspect-ratio: 2/1; } @media screen and (max-width: 767px) { [class][data-ratio-mo="2/1"] { aspect-ratio: 2/1; } } [data-ratio="5/4"] { aspect-ratio: 5/4; } @media screen and (max-width: 767px) { [class][data-ratio-mo="5/4"] { aspect-ratio: 5/4; } } [data-ratio="5/3"] { aspect-ratio: 5/3; } @media screen and (max-width: 767px) { [class][data-ratio-mo="5/3"] { aspect-ratio: 5/3; } } [data-ratio="3/1"] { aspect-ratio: 3/1; } @media screen and (max-width: 767px) { [class][data-ratio-mo="3/1"] { aspect-ratio: 3/1; } } .cta-bar { flex-direction: column; gap: 0.5rem; } @media screen and (min-width: 768px) { .cta-bar { flex-direction: row; justify-content: space-between; } } .cta-bar p { max-width: none; } var { background: rgba(50, 0, 0, 0.05); border-radius: 2px; padding: 0 0.5ch 0 0.25ch; color: #8a2424; } code.no-language { background: rgba(50, 0, 0, 0.05); border-radius: 2px; padding: 0 0.5ch 0 0.25ch; font-style: normal; } math { background: rgba(50, 0, 0, 0.05); overflow-x: scroll; } body pre.language-pug { background: #292C33; } body pre.language-pug .tag { color: #D27378; } body pre.language-pug .attr-class { color: #6196cc; } body pre.language-pug .attr-id { color: #74ADEA; } body pre.language-pug .attr-name, body pre.language-pug .class { color: #C99C6E; } body pre.language-pug .string { color: #A1C281; }