@font-face{font-family:"ABC Areal";src:url("/assets/fonts/ABCAreal-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"ABC Areal";src:url("/assets/fonts/ABCAreal-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
:root{--font-sans:"ABC Areal",Arial,sans-serif;--font-mono:"Courier New",monospace;--headline-weight:700;--headline-tracking:-.03em;--sans-body-weight:400;--ui-stroke:1px;--split:50%;--ink:#111111;--paper:#fff;--line:#111111;--page-margin:16px;--grid-gutter:16px;--project-gutter:0px;--divider-track-width:0px;--divider-line-width:1px;--divider-line-gap:0px;--divider-hit-area:24px;--handle-width:28px;--handle-height:56px;font-family:var(--font-sans);font-weight:var(--sans-body-weight);font-size:14px;color:var(--ink);background:var(--paper)}
*{box-sizing:border-box}html{overflow-y:scroll;scrollbar-gutter:stable}body{margin:0}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline;text-decoration-thickness:auto;text-underline-offset:.18em}a:focus-visible{outline:var(--ui-stroke) solid #3028ed;outline-offset:4px}
::selection{background:#ccc;color:var(--ink);text-shadow:none}
.portfolio{display:grid;grid-template-columns:minmax(0,var(--split)) minmax(0,1fr);align-items:start;padding:48px 16px 16px}
.intro,.projects,.project-header>*,.project-summary>*,dl>*{min-width:0}
.intro{position:sticky;top:48px;height:calc(100dvh - 64px);overflow:auto;scrollbar-width:none;padding:16px var(--page-margin) 0}.intro::-webkit-scrollbar{display:none}
h1,h2{font-family:var(--font-sans);font-weight:var(--headline-weight);letter-spacing:var(--headline-tracking);margin:0}h1{font-size:clamp(32px,3.89vw,56px);line-height:1;color:#ccc;overflow-wrap:break-word}
.intro-diagram{position:relative;margin-top:clamp(32px,3.2vw,46px);margin-left:calc(-1 * var(--page-margin));width:calc(100% + 2 * var(--page-margin));aspect-ratio:714/378}.intro-diagram img{position:absolute;top:0;width:50%;height:auto}.intro-diagram img:nth-child(1){left:0}.intro-diagram img:nth-child(2){left:25%}.intro-diagram img:nth-child(3){left:50%}
.project-header{display:flex;align-items:center;gap:16px;padding:16px 16px 16px var(--page-margin);margin-bottom:7px}.project-header h2{font-size:clamp(24px,3.89vw,56px);line-height:1.2;white-space:nowrap}.project-dots{display:flex;gap:16px;flex:1}.project-dots img{width:clamp(18px,3.4vw,49px);height:auto;min-width:0}
.project-summary{display:grid;grid-template-columns:1fr 1fr;gap:var(--project-gutter);padding:16px 0 16px var(--page-margin);margin-bottom:19px;color:var(--ink)}.project-summary p{margin:0;font-size:14px;line-height:1.25}.project-facts{display:flex;flex-direction:column;justify-content:space-between;padding-right:16px;gap:24px}dl{display:grid;grid-template-columns:97px minmax(0,1fr);gap:0;margin:0;font:var(--mono-study-weight,400) 12px/19.399px var(--font-mono);letter-spacing:1px;text-transform:uppercase}dd{margin:0;overflow-wrap:anywhere}
.media-placeholder{min-width:0;background:#f5f5f5;aspect-ratio:1}.media-placeholder.hero{aspect-ratio:697/465}.media-pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--grid-gutter);margin-top:var(--grid-gutter)}
.credits{display:grid;grid-template-columns:1fr 1fr;gap:var(--project-gutter);padding-top:16px;margin-top:7px;font-size:14px;line-height:19.399px}.credits h3{font:inherit;margin:0}.credits p{margin:0}
.divider{position:fixed;left:var(--split);transform:translateX(-50%);inset-block:0;width:var(--divider-hit-area);cursor:col-resize;touch-action:none;z-index:5;outline:none}.divider::before{content:"";position:absolute;left:50%;top:0;width:var(--ui-stroke);height:100%;background:var(--line)}.divider span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;width:var(--handle-width);height:var(--handle-height);border:var(--ui-stroke) solid #292929;background:#fff;opacity:0;pointer-events:none}.divider span::after{content:"";width:10px;height:26px;border-inline:var(--ui-stroke) solid #292929}.divider[data-handle-state="tracking"] span,.divider:focus-visible:not([data-handle-state="hidden"]) span,body.resizing .divider span{opacity:1}.divider:focus-visible::before{background:var(--line)}body.resizing{cursor:col-resize;user-select:none}
.registration-frame{position:fixed;inset:0;z-index:4;pointer-events:none}.registration-mark{position:absolute;display:block}.registration-mark img{display:block}.registration-mark.right{right:0}.registration-mark.left{left:0}.registration-mark.center{left:var(--split);transform:translateX(-50%)}.registration-mark.quarter{left:calc((var(--split) - 16px) / 2);transform:translateX(-50%)}.registration-mark.three-quarter{left:calc(var(--split) + (100% - var(--split) - 16px) / 2);transform:translateX(-50%)}
[data-figma-src]:not([src]){visibility:hidden}

@media(max-width:1100px) and (min-width:761px){.project-summary p{font-size:12px}dl{font-size:10px;grid-template-columns:64px minmax(0,1fr);letter-spacing:.6px}.project-header{gap:12px}.project-dots{gap:12px}}
@media(max-width:760px){.portfolio{display:block;padding:32px 16px 16px}.intro{position:relative;top:auto;height:auto;padding-bottom:32px;overflow:visible}.intro h1{font-size:clamp(32px,7.4vw,56px)}.intro-diagram{max-width:560px}.divider,.registration-frame{display:none}.projects{border-top:1px solid #ddd}.project-header{padding-top:24px;flex-wrap:wrap}.project-header h2{font-size:clamp(26px,6.5vw,48px);white-space:normal}.project-dots{flex:0}.project-dots img{width:20px}.project-summary{gap:16px;padding-left:0}.project-summary p{font-size:14px}dl{font-size:10px;grid-template-columns:64px minmax(0,1fr);letter-spacing:.5px}.project-facts{padding-right:0}.credits{gap:16px;font-size:12px}}
@media(max-width:400px){.project-summary{grid-template-columns:1fr}.project-facts{gap:16px}.credits{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Temporary grid inspector retained from v1. */
.grid-overlay{position:fixed;inset:0;pointer-events:none;z-index:20;overflow:hidden}
.grid-overlay[hidden],.grid-tools[hidden]{display:none}
.grid-guide{position:absolute;border:1px solid #e6297c;background:rgb(230 41 124 / 7%)}
.grid-guide.pane{border-color:#1979e6;background:rgb(25 121 230 / 4%)}
.grid-guide-label{position:absolute;top:0;left:0;background:#e6297c;color:white;font:10px/1.4 Arial,sans-serif;padding:1px 4px;white-space:nowrap}
.grid-guide.pane .grid-guide-label{background:#1979e6}
.grid-tools{position:fixed;right:20px;bottom:20px;z-index:30;width:min(310px,calc(100vw - 32px));padding:16px;background:#fff;color:#292929;border:1px solid #292929;box-shadow:0 4px 24px #0002;font:13px/1.4 Arial,sans-serif}
.grid-tools header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.grid-tools h2{font:600 14px Arial,sans-serif;margin:0}.grid-tools p{margin:10px 0;font-size:12px}.grid-tools label{display:grid;grid-template-columns:1fr 70px;align-items:center;gap:10px;margin:10px 0}.grid-tools input{width:70px;padding:5px;font:inherit}.grid-tools button{font:inherit;cursor:pointer;padding:5px 8px;background:white;color:inherit;border:1px solid #aaa}.grid-tools output{display:block;font:11px/1.6 monospace;white-space:pre-wrap;margin:12px 0;user-select:all}

/* Registration exports sit outside layout, following the viewport and split. */
.registration-mark img{transform-origin:center}
.registration-mark img[data-figma-src="side-tick.svg"]{transform-origin:0 0}
.registration-rule{position:absolute;top:39px;bottom:40px;width:1px}
.registration-rule img{display:block;width:1px;height:100%}

/* Original CSS registration geometry: no image downloads required. */
.registration-shape{display:block;position:relative;color:#d5d5d5;transform-origin:center}
.registration-shape::before,.registration-shape::after{content:"";position:absolute;background:currentColor}
.registration-shape.cross::before,.registration-shape.cross-center::before{left:0;right:0;top:16px;height:1px}
.registration-shape.cross::after,.registration-shape.cross-center::after{top:0;bottom:0;left:16px;width:1px}
.registration-shape.cross-center{color:#555}
.registration-shape.horizontal-tick::before{left:0;right:0;top:0;height:1px}
.registration-shape.horizontal-tick::after{left:16px;top:0;bottom:0;width:1px}
.registration-shape.side-tick{transform-origin:0 0}
.registration-shape.side-tick::before{left:0;right:0;top:0;height:1px}
.registration-shape.side-tick::after{left:16px;top:0;bottom:0;width:1px}
.registration-shape.corner-a::before,.registration-shape.corner-b::before{left:0;top:0;width:16px;height:1px}
.registration-shape.corner-a::after,.registration-shape.corner-b::after{left:0;top:0;height:16px;width:1px}
.registration-rule.css-rule{background:linear-gradient(to bottom,#ddd 0, #ddd calc(50% - 27px),transparent calc(50% - 27px),transparent calc(50% + 27px),#ddd calc(50% + 27px),#ddd 100%)}

/* Three equal overlapping ellipses, centred on the same registration axis. */
.intro-diagram{position:absolute;top:calc((100dvh - 1px) / 2 - 48px);left:0;margin:0;width:calc(100% + 1px);aspect-ratio:714/378;pointer-events:none}
.intro-diagram>span{position:absolute;top:0;display:block;width:50%;height:100%;border:1px dotted #d5d5d5;border-radius:50%}
.intro-diagram>span:nth-child(1){left:0}
.intro-diagram>span:nth-child(2){left:25%}
.intro-diagram>span:nth-child(3){left:50%}
.registration-shape.diagram-cross::before{left:0;top:16px;width:32px;height:1px}
.registration-shape.diagram-cross::after{left:16px;top:0;width:1px;height:32px}
@media(max-width:760px){.intro-diagram{position:relative;top:auto;left:auto;margin-top:32px;margin-left:calc(-1 * var(--page-margin));width:calc(100% + 2 * var(--page-margin))}}

/* Each panel owns twelve real columns. Nested project rows share their tracks. */
:root{--left-padding:16px;--right-padding:16px;--left-gutter:16px;--right-gutter:16px}
.portfolio{grid-template-columns:minmax(0,calc(var(--split) - 16px)) minmax(0,1fr)}
.intro,.projects{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-content:start}
.intro{--panel-gutter:var(--left-gutter);padding-inline:var(--left-padding);column-gap:var(--panel-gutter)}
.projects{--panel-gutter:var(--right-gutter);padding-inline:var(--right-padding);column-gap:var(--panel-gutter);container:projects / inline-size}
.intro-copy{grid-column:1 / 13;min-width:0}
.projects>article,.project-header,.project-summary,.media-pair,.credits{display:grid;grid-template-columns:subgrid;grid-column:1 / 13;column-gap:var(--panel-gutter)}
.project-header{padding-inline:0;align-items:center}
.project-header h2{grid-column:1 / 10;white-space:normal;overflow-wrap:anywhere;font-size:clamp(24px,8cqw,56px)}
.project-dots{grid-column:10 / 13;min-width:0;justify-content:space-between;gap:4px}
.project-dots img{width:calc((100% - 8px) / 3);max-width:49px}
.project-summary{padding-inline:0}
.project-facts{grid-column:1 / 7;padding-right:0}
.project-description{grid-column:7 / 13;min-width:0;overflow-wrap:anywhere}
.projects .hero{grid-column:1 / 13}
.media-pair>:first-child,.credits>h3{grid-column:1 / 7}
.media-pair>:last-child,.credits>p{grid-column:7 / 13;min-width:0;overflow-wrap:anywhere}
.intro-diagram{grid-column:1 / 13}
@container projects (max-width:340px){
  .project-header h2{grid-column:1 / 13}
  .project-dots{grid-column:1 / 4;margin-top:8px}
  .project-summary{row-gap:16px}
  .project-facts,.project-description{grid-column:1 / 13}
  .credits{row-gap:8px}
  .credits>h3,.credits>p{grid-column:1 / 13}
}
@media(max-width:760px){
  .portfolio{display:block}
  .intro-diagram{margin-left:calc(-1 * var(--left-padding));width:calc(100% + 2 * var(--left-padding))}
}
.grid-column{position:absolute;border-inline:1px solid rgb(25 121 230 / 35%);background:rgb(25 121 230 / 9%)}
.grid-column.right-panel{border-color:rgb(230 41 124 / 35%);background:rgb(230 41 124 / 9%)}
.grid-column-label{display:block;text-align:center;background:#1979e6;color:#fff;font:10px/18px Arial,sans-serif;overflow:hidden}
.grid-column.right-panel .grid-column-label{background:#e6297c}

/* Panel edges are registration edges. Insets belong to text, never media. */
.portfolio{padding-inline:0;grid-template-columns:minmax(0,var(--split)) minmax(0,1fr);column-gap:0}
.intro{margin-left:16px;padding:0}
.projects{margin-right:16px;padding:0}
.intro-copy>h1{padding:var(--left-padding)}
.project-header{padding:0}
.project-header h2{padding:var(--right-padding)}
.project-summary{padding:0}
.project-facts,.project-description{padding:var(--right-padding)}
.credits{padding:0}
.credits>h3,.credits>p{padding:var(--right-padding)}
.projects .media-placeholder,.projects .media-pair{padding:0}
.intro-diagram{left:0;width:100%;margin:0}
@media(max-width:760px){
  .portfolio{padding-inline:16px}
  .intro{margin:0;padding:0 0 32px}
  .projects{margin:0;padding:0}
  .intro-diagram{left:0;width:100%;margin:32px 0 0}
}

/* Symmetrical middle edge marks, sharing the same vertical centre. */
.registration-shape.edge-tick-left::before,.registration-shape.edge-tick-right::before{top:0;width:1px;height:32px}
.registration-shape.edge-tick-left::before{left:16px}
.registration-shape.edge-tick-right::before{left:0}
.registration-shape.edge-tick-left::after,.registration-shape.edge-tick-right::after{left:0;top:16px;width:16px;height:1px}

/* Only text scrolls: decorations must not be clipped by the panel's bottom. */
.intro{overflow:visible}
.intro-copy{max-height:calc(100dvh - 64px);overflow:auto;scrollbar-width:none}
.intro-copy::-webkit-scrollbar{display:none}
@media(max-width:760px){.intro-copy{max-height:none;overflow:visible}}

/* Stretch the ellipses between the shared middle and bottom registration axes. */
@media(min-width:761px){
  .intro-diagram{top:calc((100dvh - 1px) / 2 - 48px);bottom:0;height:auto;aspect-ratio:auto}
}

/* All added controls and keylines share a single CSS-pixel stroke. */
.grid-tools input{border:var(--ui-stroke) solid #aaa;border-radius:0}
.grid-tools :is(button,input):focus-visible{outline:var(--ui-stroke) solid #3028ed;outline-offset:2px}

/* Independent shadow layers crossfade when drag direction reverses. */
:root{--drag-shade-width:clamp(80px,12vw,180px);--drag-shade-color:rgb(0 0 0 / 10%);--drag-shade-fade:360ms;--drag-grain-spacing:3px;--drag-grain-ink:rgb(0 0 0 / 30%)}
.divider-shade{position:fixed;inset-block:0;left:var(--split);width:0;z-index:3;pointer-events:none}
.divider-shade::before,.divider-shade::after{content:"";position:absolute;inset-block:0;width:var(--drag-shade-width);opacity:0;transition:opacity var(--drag-shade-fade) cubic-bezier(.22,.61,.36,1)}
.divider-shade::before{right:0;--shade-direction:to left}
.divider-shade::after{left:0;--shade-direction:to right}
body:is(.resizing,.divider-demo)[data-resize-direction="left"] .divider-shade::before{opacity:1}
body:is(.resizing,.divider-demo)[data-resize-direction="right"] .divider-shade::after{opacity:1}
@media(prefers-reduced-motion:reduce){.divider-shade::before,.divider-shade::after{transition:none}}
.divider:focus-visible span{outline:var(--ui-stroke) solid var(--ink);outline-offset:3px}
@media(max-width:760px){.divider-shade{display:none}}

/* Fine print dots fade with the shadow; static texture avoids visual shimmer. */
.divider-shade::before,.divider-shade::after{
  background-image:radial-gradient(circle,var(--drag-grain-ink) .5px,transparent .8px),linear-gradient(var(--shade-direction),var(--drag-shade-color),transparent);
  background-size:var(--drag-grain-spacing) var(--drag-grain-spacing),100% 100%;
  background-position:0 0;
  -webkit-mask-image:linear-gradient(var(--shade-direction),#000,transparent);
  mask-image:linear-gradient(var(--shade-direction),#000,transparent);
}

/* Cursor-following grip, clamped so its full height stays inside the viewport. */
.divider span{top:clamp(calc(var(--handle-height) / 2),var(--handle-y,50%),calc(100% - var(--handle-height) / 2))}

/* Project copy and assets are populated from content/projects/<slug>/. */
.project-description p+p{margin-top:1em}
.project-media{margin:0;min-width:0}
.project-media img,.project-media video{display:block;width:100%;height:auto}
:root{--media-radius:10px}
.media-inset{position:relative;width:100%;aspect-ratio:697 / 465;background:#f5f5f5}
.project-media .media-inset>img,.project-media .media-inset>video{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:82.8125%;height:72.043%;object-fit:contain;border-radius:var(--media-radius)}
/* Reusable browser chrome: decorative controls, flush media, shared corner radius. */
.media-inset:has(>.browser-frame){display:grid;grid-template-columns:minmax(0,1fr);aspect-ratio:auto}
.media-inset:has(>.browser-frame)::before{content:"";grid-area:1/1;aspect-ratio:697 / 465;pointer-events:none}
.media-inset>.browser-frame{position:relative;grid-area:1/1;align-self:center;justify-self:center;min-width:0;width:82.8125%;max-width:82.8125%;margin-block:10%}
.browser-frame{overflow:hidden;border-radius:var(--media-radius);background:#e1e1e1}
.browser-header{display:flex;align-items:center;gap:0.75%;padding-inline:1.5%;box-sizing:border-box;aspect-ratio:856 / 26;background:#e1e1e1}
.browser-dot{display:block;flex:0 0 1.2%;aspect-ratio:1;border-radius:50%;background:#c6c6c6}
.browser-dot:nth-child(2){background:#aaa}
.browser-dot:nth-child(3){background:#8d8d8d}
.project-media .browser-frame>img,.project-media .browser-frame>video{display:block;width:100%;height:auto;border-radius:0}
.project-media figcaption{padding:var(--right-padding);font-size:12px;line-height:1.4}
.projects>article>.project-media+.project-media,.projects>article>.media-pair+.project-media{margin-top:var(--grid-gutter)}
.projects>article+article{margin-top:240px}
.projects .credits{padding-block:16px;margin-top:0;row-gap:20px;color:rgb(17 17 17 / 80%);font:var(--mono-study-weight,400) 12px/19.399px var(--font-mono);letter-spacing:1px;text-transform:uppercase}
.projects .credits>h3{grid-column:1 / 13;padding:0 var(--right-padding);font:inherit;letter-spacing:inherit}
.credit-rows{display:grid;grid-template-columns:subgrid;grid-column:1 / 13;column-gap:var(--panel-gutter);font:inherit;letter-spacing:inherit}
.credit-rows>dt{grid-column:1 / 7;padding-left:var(--right-padding);overflow-wrap:break-word}
.credit-rows>dd{grid-column:7 / 13;padding-right:var(--right-padding);overflow-wrap:break-word}
@container projects (max-width:340px){
  .credit-rows>dt,.credit-rows>dd{grid-column:1 / 13;padding-inline:var(--right-padding)}
  .credit-rows>dd+dt{margin-top:8px}
}
.content-error{grid-column:1 / 13;padding:16px;font:14px/1.4 monospace}

/* Follow directly while active; hide immediately at the last pointer position. */
.divider span{transition:opacity 180ms ease-out}
.divider[data-handle-state="hidden"] span{opacity:0;transition:none}

/* In-progress projects may have only facts or only a description. */
.project-summary>:only-child{grid-column:1 / 13}

/* The disclosure glyph and extra copy share the introduction's typography. */
.intro-copy{position:relative;z-index:1}
.intro-copy h1{text-wrap:pretty;orphans:2;widows:2}
.intro-ending{white-space:nowrap;overflow-wrap:normal}
.intro-fin-link{color:inherit}
.intro-toggle{display:inline-block;min-width:24px;min-height:24px;padding:0;border:0;border-radius:0;background:transparent;color:inherit;font:inherit;letter-spacing:inherit;vertical-align:baseline;cursor:pointer}
.intro-toggle span{display:inline-block;position:relative;top:.08em;transform:rotate(0deg) scale(1.2);transform-origin:center;transition:transform 300ms cubic-bezier(.22,.61,.36,1)}
.intro-toggle[aria-expanded="true"] span{transform:rotate(45deg) scale(1.2)}
.intro-toggle:focus-visible{outline:var(--ui-stroke) solid var(--ink);outline-offset:3px}
.intro-more{font:inherit;color:inherit;letter-spacing:inherit}
.intro-more[hidden]{display:none}
.intro:has(.intro-toggle[aria-expanded="true"]) .intro-diagram{display:none}
body:has(.intro-toggle[aria-expanded="true"]) .registration-mark:has(.diagram-cross){display:none}
.intro-more span+span::before{content:" "}
@media(prefers-reduced-motion:reduce){.intro-toggle span{transition:none}}

/* Project palette slots share the title row and resize with its grid tracks. */
.project-dots{padding-right:var(--right-padding);gap:8px;justify-content:flex-end;align-items:center}
.project-swatch{display:block;flex:0 1 49px;width:49px;min-width:0;aspect-ratio:1;border-radius:50%}
.project-header:has(.project-swatch:nth-child(4)) h2{grid-column:1 / 8}
.project-header:has(.project-swatch:nth-child(4)) .project-dots{grid-column:8 / 13;padding-right:var(--right-padding)}
@container projects (max-width:340px){.project-dots{padding:0 var(--right-padding) var(--right-padding);grid-column:1 / 13}}
@container projects (max-width:340px){
  .project-header:has(.project-swatch:nth-child(4)) h2{grid-column:1 / 13}
  .project-header:has(.project-swatch:nth-child(4)) .project-dots{grid-column:1 / 13;padding-inline:var(--right-padding)}
}

/* Selected palette treatment: fifteen ink rays separated by white paper. */
.project-swatch{border:0;background-image:repeating-conic-gradient(from -90deg,currentColor 0deg 12deg,#fff 12deg 24deg)}

/* Bottom navigation follows the same split variable as the divider. */
.site-nav{position:fixed;left:var(--split);bottom:calc(15px + env(safe-area-inset-bottom,0px));width:0;height:0;z-index:6;display:block;color:var(--ink);font-family:var(--font-sans);font-weight:var(--headline-weight);font-size:32px;line-height:1.2;letter-spacing:var(--headline-tracking);white-space:nowrap}
.site-nav a,.site-nav button{color:rgb(17 17 17 / 20%);text-decoration:none}
.site-nav a[aria-current="page"]{color:var(--ink)}
.site-nav a:hover{text-decoration:none}
.site-nav-about{position:absolute;right:0;bottom:0;padding-inline:4px;border:var(--ui-stroke) solid var(--ink);border-right:0;background:var(--paper)}
.site-nav-views{position:absolute;left:0;bottom:0;display:flex;align-items:baseline;padding-inline:4px;border:var(--ui-stroke) solid var(--ink);background:var(--paper)}
.site-nav-slash{color:rgb(17 17 17 / 20%);white-space:pre}
.site-nav button{padding:0;border:0;border-radius:0;background:transparent;font:inherit;letter-spacing:inherit;cursor:default}
.site-nav :is(a,button):focus-visible{outline:var(--ui-stroke) solid var(--ink);outline-offset:3px}
.portfolio{padding-bottom:16px}
.projects{padding-bottom:80px}
.intro-copy{max-height:calc(100dvh - 128px - env(safe-area-inset-bottom,0px));overscroll-behavior-y:contain;scroll-padding-block:var(--left-padding)}
.intro-copy[data-more-below="true"]{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 24px),transparent)}
.about-copy{grid-column:1 / 9;padding:var(--right-padding);font-weight:var(--sans-body-weight);font-size:14px;line-height:1.25;letter-spacing:0;color:rgb(17 17 17 / 85%);text-wrap:pretty;overflow-wrap:break-word}
.about-copy p{margin:0;text-wrap:pretty;orphans:2;widows:2;hyphens:manual}
.about-copy a{white-space:nowrap}
.about-copy .about-acquisition-link{white-space:normal;text-wrap:pretty}
.about-copy p+p{margin-top:24px}
.page-about .intro-copy h1{color:var(--ink)}
.about-contact{grid-column:1 / 9;grid-template-columns:97px minmax(0,1fr);padding:8px var(--right-padding) 0;text-align:left;font:var(--mono-study-weight,400) 12px/19.399px var(--font-mono);letter-spacing:1px;text-transform:uppercase;color:rgb(17 17 17 / 85%);overflow-wrap:anywhere}
.about-contact dd{white-space:nowrap;overflow-wrap:normal}
@container projects (max-width:340px){
  .about-contact{grid-template-columns:minmax(0,1fr)}
  .about-contact dd+dt{margin-top:8px}
}
.page-about .projects{position:relative;align-content:start;min-height:calc(100dvh - 64px);padding-top:248px}
.about-copy-tick{position:absolute;top:208px;left:50%;width:32px;height:16px;transform:translateX(-50%);color:#d5d5d5;pointer-events:none}
.about-copy-tick::before,.about-copy-tick::after{content:"";position:absolute;background:currentColor}
.about-copy-tick::before{left:0;bottom:0;width:32px;height:var(--ui-stroke)}
.about-copy-tick::after{left:16px;top:0;width:var(--ui-stroke);height:16px}
@container projects (max-width:480px){.about-copy,.about-contact{grid-column:1 / 13}}
/* About uses the document's right scrollbar, like Scroll view; left stays independent. */
.page-about :is(.intro-copy,.projects):focus-visible{outline:var(--ui-stroke) solid var(--ink);outline-offset:-1px}

/* Fade page content while the divider, marks and bottom nav stay visible. */
.projects{transition:opacity 180ms ease-out}
.page-leaving .projects{opacity:0;pointer-events:none}
.page-entering .projects{animation:portfolio-page-in 360ms cubic-bezier(.22,.61,.36,1) both}
@keyframes portfolio-page-in{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){
  .projects{transition:none}
  .page-entering .projects{animation:none}
  .page-leaving .projects{opacity:1}
}
@media(max-width:760px){
  .site-nav{left:50%;font-size:clamp(24px,5vw,32px)}
  .portfolio{padding-bottom:96px}
  .projects{padding-bottom:0}
  .intro-copy{max-height:none}
  .intro-copy[data-more-below="true"]{-webkit-mask-image:none;mask-image:none}
  .page-about .projects{min-height:0;padding-block:32px}
  .page-about .about-copy,.page-about .about-contact{grid-column:1 / 13}
  .about-copy-tick{display:none}
}

/* Native scrollbars: square geometry and the same one-pixel black keylines. */
@supports selector(::-webkit-scrollbar){
  html,.projects{scrollbar-color:auto;scrollbar-width:auto}
  html::-webkit-scrollbar,.projects::-webkit-scrollbar{width:16px;height:16px;background:var(--paper)}
  html::-webkit-scrollbar-track,.projects::-webkit-scrollbar-track{background:var(--paper);border-left:var(--ui-stroke) solid var(--ink);border-radius:0}
  html::-webkit-scrollbar-thumb,.projects::-webkit-scrollbar-thumb{background:var(--ink);border:var(--ui-stroke) solid var(--ink);border-radius:0;min-height:40px}
  html::-webkit-scrollbar-thumb:active,.projects::-webkit-scrollbar-thumb:active{background:var(--ink)}
  html::-webkit-scrollbar-button,.projects::-webkit-scrollbar-button{display:none;width:0;height:0}
  html::-webkit-scrollbar-corner,.projects::-webkit-scrollbar-corner{background:var(--paper)}
}
@supports not selector(::-webkit-scrollbar){
  html,.projects{scrollbar-color:var(--ink) var(--paper)}
}

/* Keep decoration geometry measurable while hiding it beneath overlapping copy. */
.intro[data-circles-overlap="true"] .intro-diagram{visibility:hidden}

body:has(.intro[data-circles-overlap="true"]) .registration-mark:has(.diagram-cross){visibility:hidden}

/* Square crops are opt-in and preserve the source file. */
.project-media.media-square>video,.project-media.media-square>img{width:100%;aspect-ratio:1;object-fit:cover}
/* Canvas is the image-derived print rendition; the accessible source stays intact. */
.media-print-reveal{position:relative;isolation:isolate;overflow:hidden}
.halftone-render{position:absolute;z-index:1;pointer-events:none}
.halftone-render[hidden]{display:none}

/* Temporary reveal study controls. Remove after choosing the treatment. */
.reveal-tools{position:fixed;right:28px;bottom:76px;z-index:30;width:270px;max-width:calc(100vw - 48px);max-height:calc(100dvh - 120px);overflow:auto;border:1px solid #000;background:#fff;color:#000;font:11px/1.4 "Courier New",monospace}
.reveal-tools summary{padding:10px;cursor:pointer;text-transform:uppercase}
.reveal-tools-body{padding:0 10px 10px;border-top:1px solid #000}
.reveal-tools p{margin:10px 0}
.reveal-tools label{display:grid;grid-template-columns:1fr auto;gap:4px;margin:10px 0}
.reveal-tools input[type="range"]{grid-column:1 / -1;width:100%;margin:0;accent-color:#000}
.reveal-tools button{border:1px solid #000;background:#fff;color:#000;padding:5px 7px;font:inherit;cursor:pointer}
.reveal-tools button:focus-visible,.reveal-tools input:focus-visible,.reveal-tools summary:focus-visible{outline:1px solid #000;outline-offset:3px}
.reveal-tools-actions{display:flex;gap:6px;flex-wrap:wrap}

.reveal-mode-picker{display:flex;gap:4px;padding:8px}
.reveal-mode-picker button{flex:1}
.reveal-mode-picker button[aria-pressed="true"]{background:#000;color:#fff}
.reveal-quick-actions{padding:0 8px 8px}
.reveal-quick-actions button{width:100%}
.reveal-tools button:disabled{opacity:.3;cursor:default}
.reveal-tools label[hidden]{display:none}

.project-media.media-zoom{overflow:hidden;aspect-ratio:1}
.project-media.media-zoom>img{transform:scale(1.8);transform-origin:center}

/* Fin CX Models: miniature ink-control strips with opposed line screens and tints. */
#fin-cx-models .project-swatch{position:relative;aspect-ratio:1;border-radius:0;background-image:none;overflow:hidden}
#fin-cx-models .project-swatch::before{content:"";position:absolute;inset:0 0 50%;background:repeating-linear-gradient(90deg,transparent 0 1px,#fff 1px 2px) left / 50% 100% no-repeat,repeating-linear-gradient(0deg,transparent 0 1px,#fff 1px 2px) right / 50% 100% no-repeat}
#fin-cx-models .project-swatch::after{content:"";position:absolute;inset:50% 0 0;background:linear-gradient(90deg,transparent 0 25%,#ffffff40 25% 50%,#ffffff80 50% 75%,#ffffffbf 75%);border-top:1px solid #fff}

/* Tall project separators reuse the fixed frame registration geometry. */
.projects>article{position:relative}
.project-boundary{position:absolute;left:0;right:0;top:-192px;height:144px;pointer-events:none}
.project-boundary>.registration-shape{position:absolute;width:32px;height:32px}
.project-boundary>.boundary-left{left:-16px}
.project-boundary>.boundary-right{right:-16px}
.project-boundary>.boundary-top{top:-16px}
.project-boundary>.boundary-bottom{top:128px}
.project-boundary>.boundary-middle{left:calc(50% - 16px);height:16px}
.project-boundary>.boundary-middle.boundary-top{top:0}
.project-boundary>.boundary-middle.boundary-bottom{top:128px}
.project-boundary>.boundary-middle.boundary-bottom::before{top:16px}

.project-boundary>.boundary-centre-cross{left:calc(50% - 16px);top:calc(50% - 16px)}

/* Saved swatch library: assign data-swatch-study="a" through "e" to a project. */
[data-swatch-study] .project-swatch,.fin3-preview{position:relative;border:0;border-radius:0;aspect-ratio:1;background-image:none;overflow:hidden}
:is([data-swatch-study="a"] .project-swatch,.fin3-preview[data-swatch-study="a"]){background-image:conic-gradient(currentColor 25%,#fff 0 50%,currentColor 0 75%,#fff 0);background-size:12px 12px}
:is([data-swatch-study="b"] .project-swatch,.fin3-preview[data-swatch-study="b"]){background-image:linear-gradient(135deg,transparent 0 50%,currentColor 50%),repeating-linear-gradient(135deg,currentColor 0 1px,#fff 1px 3px)}
:is([data-swatch-study="c"] .project-swatch,.fin3-preview[data-swatch-study="c"]){background-image:linear-gradient(to top,transparent 0 20%,#fff3 20% 40%,#fff6 40% 60%,#fff9 60% 80%,#fffc 80%)}
:is([data-swatch-study="d"] .project-swatch,.fin3-preview[data-swatch-study="d"]){border-radius:50%;background-image:linear-gradient(90deg,transparent calc(50% - .5px),#fff calc(50% - .5px) calc(50% + .5px),transparent calc(50% + .5px)),linear-gradient(0deg,transparent calc(50% - .5px),#fff calc(50% - .5px) calc(50% + .5px),transparent calc(50% + .5px))}
:is([data-swatch-study="d"] .project-swatch,.fin3-preview[data-swatch-study="d"])::after{content:"";position:absolute;inset:20%;border:1px solid color-mix(in srgb,currentColor 45%,white);border-radius:50%}
:is([data-swatch-study="e"] .project-swatch,.fin3-preview[data-swatch-study="e"]){background-image:linear-gradient(90deg,transparent,#fff),repeating-linear-gradient(90deg,currentColor 0 1px,#fff 1px 3px)}

/* Fill the original full-width placeholder proportions, cropping the source. */
.project-media.media-fill{position:relative;aspect-ratio:697 / 465;overflow:hidden}
.project-media.media-fill>img,.project-media.media-fill>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}

/* Fin 3 opening animation: closer crop, with the form shifted down slightly. */
#fin-3>.media-fill:first-of-type{--fin3-hero-zoom:1.15;--fin3-hero-shift:20%}
#fin-3>.media-fill:first-of-type>video{object-position:center calc(50% - var(--fin3-hero-shift) * 1.743);transform:scale(var(--fin3-hero-zoom));transform-origin:center}

/* Leave room above a project heading when opening a shared anchor link. */
#projects>article[id]{scroll-margin-top:64px}

/* Tall page captures keep the entire image and expand their surrounding stage. */
.media-inset.media-inset-tall::before{display:none}

/* Scarf pairs share the original photographs’ portrait proportions. */
#headless-horse-scarves .media-pair .project-media>img{width:100%;aspect-ratio:3 / 4;object-fit:cover;object-position:center}

/* Mobile navigation: persistent view switcher and a project strip past the hero. */
.mobile-project-nav{display:none}
@media(max-width:760px){
  .site-nav{font-size:clamp(40px,10vw,52px)}
  .portfolio{padding-bottom:112px}
  .site-nav-about,.site-nav-views{min-height:48px}
  .mobile-project-nav:not([hidden]){display:flex}
  .mobile-project-nav{position:fixed;inset:0 0 auto;z-index:7;align-items:center;gap:24px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;background:var(--paper);border-bottom:var(--ui-stroke) solid var(--ink);padding:calc(10px + env(safe-area-inset-top,0px)) 16px 10px;font-family:var(--font-sans);font-size:20px;font-weight:var(--headline-weight);line-height:1.2;white-space:nowrap}
  .mobile-project-nav::-webkit-scrollbar{display:none}
  .mobile-project-nav a{flex:none;display:flex;align-items:center;min-height:44px;color:rgb(17 17 17 / .2)}
  .mobile-project-nav a[aria-current="location"]{color:var(--ink)}
  .mobile-project-nav a:hover{text-decoration:none}
  #projects>article[id]{scroll-margin-top:96px}
}

/* Small screens: facts first, then a full-width project description. */
@media(max-width:744px){
  .project-summary>.project-facts,.project-summary>.project-description{grid-column:1 / 13}
}

/* Subtle print grain across the @pizza photography; originals stay untouched. */
#pizza{--photo-grain-opacity:.28}
#pizza .project-media:has(>img){position:relative;isolation:isolate}
#pizza .project-media:has(>img)::after{content:"";position:absolute;inset:0;z-index:1;background-image:url('/assets/photo-grain.svg');background-size:180px 180px;opacity:var(--photo-grain-opacity);mix-blend-mode:soft-light;pointer-events:none}

/* Bio expansion is parked until additional copy is ready. */
.intro-toggle[hidden]{display:none}

/* Prefer balanced endings at every viewport and draggable panel width. */
.project-description p,.about-copy p,.project-media figcaption{ text-wrap:pretty;orphans:2;widows:2;hyphens:manual;overflow-wrap:break-word }
.project-header h2{text-wrap:balance;overflow-wrap:break-word}

/* Entrance reveals each layer separately so fixed navigation stays viewport-bound. */
.site-enter .portfolio,.site-enter .registration-frame,.site-enter .site-nav{animation:site-soft-enter 1300ms ease-in-out both}
.site-enter .divider{animation:site-divider-enter 1300ms ease-in-out both}
@keyframes site-divider-enter{from{opacity:0}to{opacity:1}}
.site-enter .divider span{top:50%;opacity:1;transition:none}
@keyframes site-soft-enter{0%{opacity:0;filter:blur(14px)}35%{opacity:.45;filter:blur(9px)}100%{opacity:1;filter:blur(0)}}
@media(prefers-reduced-motion:reduce){.site-enter .portfolio,.site-enter .registration-frame,.site-enter .divider,.site-enter .site-nav{animation:none}}

/* A very small tracking adjustment only in narrow desktop project panels. */
@media(min-width:761px){
  @container projects (max-width:420px){
    .project-facts dl{letter-spacing:clamp(.55px,calc(.166667cqw - .1px),.6px)}
  }
  @media(min-width:1101px){
    @container projects (max-width:420px){
      .project-facts dl{letter-spacing:clamp(.85px,calc(.5cqw - 1.1px),1px)}
    }
  }
}

/* Temporary local-only sans comparison; mono rules remain independent. */
.typeface-study{position:fixed;left:20px;bottom:20px;z-index:40;display:grid;gap:6px;max-width:calc(100vw - 32px);padding:10px 12px;border:var(--ui-stroke) solid var(--ink);background:var(--paper);color:var(--ink);font:12px/1.3 Arial,sans-serif}
.typeface-study select{min-height:32px;padding:4px 24px 4px 6px;border:var(--ui-stroke) solid var(--ink);border-radius:0;background:var(--paper);color:var(--ink);font:14px Arial,sans-serif}
.typeface-study select:focus-visible{outline:var(--ui-stroke) solid var(--ink);outline-offset:3px}
.typeface-study-status:empty{display:none}
@media(max-width:760px){.typeface-study{left:16px;bottom:calc(88px + env(safe-area-inset-bottom,0px))}}

.typeface-study{grid-template-columns:minmax(0,1fr) auto;align-items:end}
.typeface-study-field{display:grid;gap:6px;min-width:0}
.typeface-study-field select{width:100%;min-width:0}
.typeface-study-status{grid-column:1 / -1}
.intro-copy h1{font-weight:var(--intro-study-weight,var(--headline-weight))}

/* Arial comparison uses its real Bold cut for the introduction and project titles. */
:root[data-typeface-study="arial"] .project-header h2,:root[data-typeface-study="arial"] .site-nav{font-weight:700}

/* Slightly tighter Arial Bold spacing for comparison with Monument. */
:root[data-typeface-study="arial"] :is(.intro-copy h1,.project-header h2,.site-nav){letter-spacing:-.045em}

/* Mobile text aligns with the media edges inside the single outer page margin. */
@media(max-width:760px){
  .intro-copy>h1,.project-header h2,.project-facts,.project-description,.projects .credits>h3,.credits>p,.credit-rows>dt,.credit-rows>dd,.about-copy,.about-contact,.project-media figcaption{padding-inline:0}
  #projects .project-header .project-dots{padding-inline:0}
}

/* Compact mobile project strip with one-pixel separators. */
@media(max-width:760px){
  .mobile-project-nav{gap:0;padding:calc(2px + env(safe-area-inset-top,0px)) 0 2px;align-items:stretch}
  .mobile-project-nav a{min-height:0;padding:0 12px;line-height:1.2}
  .mobile-project-nav a+a{border-left:var(--ui-stroke) solid var(--ink)}
}

/* Mobile navigation and project headings share one responsive type scale. */
@media(max-width:760px){
  .project-header h2,.mobile-project-nav,.site-nav{font-size:clamp(24px,calc((100vw - 32px) * .08),56px)}
}

@media(max-width:760px){
  .site-nav-about,.site-nav-views{min-height:0;padding-block:2px}
}

/* Titles claim their natural width first; palettes use the remaining space. */
.projects .project-header{display:flex;flex-wrap:nowrap;gap:16px}
.projects .project-header h2{flex:0 0 auto;width:max-content;max-width:100%}
.projects .project-header .project-dots{flex:1 1 0;min-width:0;margin-top:0;gap:clamp(2px,1cqw,8px);overflow:hidden}
.projects .project-header .project-swatch{flex:1 1 0;width:0;max-width:49px;min-width:0}
@container projects (max-width:340px){
  .projects .project-header{flex-wrap:wrap}
  .projects .project-header .project-dots{flex-basis:100%;justify-content:flex-end}
  .projects .project-header .project-swatch{flex:0 1 24px;width:24px}
}
/* Readable mono details at all screen and panel sizes. */
.project-facts dl{font-size:12px}
@media(max-width:760px){
  .credit-rows,.about-contact{font-size:12px}
}

/* SuperHi Plus: coarser checker screen beside a solid ink block. */
#superhi-plus .project-swatch{background-image:linear-gradient(currentColor,currentColor),conic-gradient(currentColor 25%,#fff 0 50%,currentColor 0 75%,#fff 0);background-size:50% 100%,24px 24px;background-position:right top,left top;background-repeat:no-repeat,repeat}

/* Compact stepped-tint palette for SuperHi Rebrand. */
#superhi-rebrand .project-dots{gap:4px}
#superhi-rebrand .project-swatch{flex:0 1 24px;width:24px;max-width:24px;height:49px;aspect-ratio:auto}

/* Keep the tall tint strips below the heading’s visible capital height. */
#superhi-rebrand .project-dots{font-size:clamp(24px,8cqw,56px)}
#superhi-rebrand .project-swatch{height:.68em;max-height:49px}
@media(max-width:760px){
  #superhi-rebrand .project-dots{font-size:clamp(24px,calc((100vw - 32px) * .08),56px)}
}

.project-media:has(.video-retry){position:relative}
.video-retry{position:absolute;z-index:3;right:12px;bottom:12px;padding:6px 8px;border:var(--ui-stroke) solid #000;border-radius:0;background:#fff;color:#000;font:12px Arial,sans-serif;cursor:pointer}
.video-retry[hidden]{display:none}

.project-media.video-load-failed{filter:none!important}

/* Description ink stays selectable at full contrast without fading its layer. */
.project-description{color:rgb(17 17 17 / 80%)}

/* About: full-width bold Areal, scaled below the shared left introduction. */
.page-about .about-copy,.page-about .about-contact{grid-column:1 / 13;font-family:var(--font-sans);font-size:clamp(28px,2.78vw,40px);font-weight:700;line-height:1.1;letter-spacing:-.03em;color:rgb(17 17 17 / 50%)}
.page-about .about-copy a{white-space:normal}
.page-about .about-contact{grid-template-columns:minmax(0,1fr) minmax(0,3fr);text-transform:none;row-gap:0}
.page-about .about-contact dd{white-space:normal;overflow-wrap:anywhere}
@container projects (max-width:480px){.page-about .about-contact{grid-template-columns:minmax(0,1fr)}.page-about .about-contact dd+dt{margin-top:16px}}
.page-about .projects{padding-top:0}
.page-about .about-copy-tick{display:none}

/* Contact details read as normal lines in the same style as the About copy. */
.page-about .about-copy,.page-about .about-contact{font-size:clamp(28px,2.78vw,40px);line-height:1.15}
.page-about .about-contact{display:block;text-transform:none}
.page-about .about-contact dt,.page-about .about-contact dd{display:inline;white-space:normal;overflow-wrap:break-word;margin:0}
.page-about .about-contact dt::after{content:" "}
.page-about .about-contact dd::after{content:"";display:block;height:16px}
.page-about .about-contact dd+dt{margin-top:0}
.page-about .about-contact dd:last-child::after{display:none}

/* These palettes keep a visible footprint, wrapping below long titles. */
:is(#headless-horse-website,#headless-horse-scarves,#pizza) .project-header{flex-wrap:wrap}
:is(#headless-horse-website,#headless-horse-scarves,#pizza) .project-header h2{flex:1 1 auto}
:is(#headless-horse-website,#headless-horse-scarves,#pizza) .project-header .project-dots{flex:0 0 auto;width:auto;max-width:100%;margin-left:auto;justify-content:flex-end;overflow:visible;font-size:clamp(24px,8cqw,56px);gap:8px}
:is(#headless-horse-website,#headless-horse-scarves,#pizza) .project-header .project-swatch{flex:0 0 .68em;width:.68em;height:.68em;max-width:38px;max-height:38px}
/* Concentric calibration rings, a woven screen, and split line-density bars. */
#headless-horse-website .project-swatch{border-radius:50%;background-image:repeating-radial-gradient(circle,currentColor 0 3px,#fff 3px 4px)}
#headless-horse-scarves .project-swatch{border-radius:0;background-image:repeating-linear-gradient(45deg,transparent 0 3px,#fff 3px 4px),repeating-linear-gradient(-45deg,transparent 0 3px,#fff 3px 4px)}
#pizza .project-swatch{border-radius:0;background-image:linear-gradient(currentColor,currentColor),repeating-linear-gradient(90deg,currentColor 0 2px,#fff 2px 3px);background-size:100% 45%,100% 100%;background-position:top; background-repeat:no-repeat}

/* Tighter underline placement for large editorial links. */
.intro-copy a:hover,.about-copy a:hover,.about-contact a:hover{text-underline-offset:.1em}