*{box-sizing:border-box}body{margin:0;background:#fbfaf6;color:#242121}a{color:inherit}header{display:flex;justify-content:space-between;padding:clamp(20px,1.4vw,36px) var(--page-gutter);font:var(--nav-size)/1.4 Arial,sans-serif}header a{text-decoration:none}header a:hover{text-decoration:underline}main{padding:28px var(--page-gutter) 100px}.intro{max-width:none;margin:0 auto;font-family:"Times New Roman",Times,serif;font-size:clamp(34px,4.55vw,116px);font-weight:400;line-height:.99;letter-spacing:-.045em;text-align:center}.phrase{display:inline}.marker{display:inline-flex;vertical-align:super;align-items:center;justify-content:center;background:#2b2525;color:white;width:1.5em;height:1.5em;border-radius:50%;font:normal max(11px,.23em)/1 Arial,sans-serif;letter-spacing:0;text-decoration:none;margin-left:3px;position:relative;top:-.12em}.marker:before{content:"";position:absolute;inset:-9px}.marker:hover,.marker:focus-visible{background:#645959;outline:2px solid #645959;outline-offset:4px}#preview{position:fixed;z-index:4;width:min(340px,80vw);background:#fff;box-shadow:0 8px 35px #0002;pointer-events:none;padding:8px}#preview img{display:block;width:100%;height:220px;object-fit:cover}#preview p{font:13px Arial;margin:10px 4px 5px}.empty-preview{height:220px;background:#f1efef;display:flex;align-items:center;justify-content:center;font:14px Arial;color:#706767}.empty-preview[hidden],img[hidden],[hidden]{display:none!important}.index-list{max-width:1440px;margin:20px auto}.index-list .index-row{display:flex;gap:20px;align-items:baseline;border-bottom:1px solid #ddd;padding:17px 0;text-decoration:none;font:clamp(25px,2.6vw,64px)/1.15 "Times New Roman",serif;letter-spacing:-.035em}.index-list .index-row:hover .project-name{text-decoration:underline}.index-list small{font:clamp(12px,.65vw,17px)/1.4 "Manrope Variable",Arial,sans-serif;letter-spacing:0;color:#706767}.index-list .number{width:28px;flex-shrink:0}.index-list .tag{margin-left:auto}.project{max-width:1100px;margin:auto}.project h1{font:400 clamp(44px,7vw,90px)/1 "Times New Roman",serif;letter-spacing:-.04em;margin:45px 0 25px}.project .summary{font:22px/1.4 "Times New Roman",serif}.gallery img{display:block;width:100%;height:auto;margin:30px 0}.status{font:15px/1.5 Arial;color:#777;margin:50px 0}.restricted{font:16px Arial}.gallery{margin-top:40px}@media(max-width:600px){main{padding-top:42px}.intro{line-height:1.09;letter-spacing:-.04em}.marker{margin-left:4px}.index-list .tag{font-size:11px}.index-list .index-row{gap:12px}.index-list .number{width:20px}}
/* Bare image previews, without card styling or cropping. */
#preview{width:auto;max-width:min(420px,72vw);padding:0;background:transparent;box-shadow:none;border:0}
#preview img{display:block;width:auto;height:auto;max-width:min(420px,72vw);max-height:52vh;object-fit:contain}
#preview p{display:none}
#preview .empty-preview{width:auto;height:auto;background:none;color:#242121;font:italic 25px/1.15 "Times New Roman",serif;letter-spacing:-.025em;max-width:300px}
.marker:hover{outline:none;background:#242121;transform:translateY(-2px)}
.marker{transition:transform .18s ease,background .18s ease}
.marker:focus-visible{outline:1px solid currentColor;outline-offset:5px}
.refresh-wrap{display:flex;justify-content:center;margin-top:46px}
.refresh{display:grid;place-items:center;width:44px;height:44px;border:0;padding:10px;background:transparent;color:#6b6565;cursor:pointer;border-radius:50%}
.refresh svg{width:24px;height:24px;transition:transform .5s ease}
.refresh:hover{color:#242121}.refresh:hover svg{transform:rotate(65deg)}
.refresh:focus-visible{outline:1px solid #242121;outline-offset:3px}
.refresh.is-refreshing svg{transform:rotate(360deg)}
.intro{transition:opacity .16s ease,transform .16s ease}
.intro.is-changing{opacity:0;transform:translateY(5px)}
.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}
@media(prefers-reduced-motion:reduce){.intro,.marker,.refresh svg{transition:none}.marker:hover,.refresh:hover svg,.intro.is-changing{transform:none}}

@font-face{font-family:"Instrument Serif";src:url("fonts/instrument-serif-regular.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap}
.intro{font-family:var(--preview-typeface,"Times New Roman"),Times,serif}
.font-editor{position:fixed;bottom:18px;right:22px;z-index:20;font:13px/1.5 Arial,sans-serif;color:#292525}
.editor-toggle{font:inherit;color:inherit;cursor:pointer;background:#fff;border:1px solid #ddd;border-radius:30px;padding:8px 15px}
.editor-panel{width:min(320px,calc(100vw - 44px));margin-bottom:10px;padding:18px;background:#fff;box-shadow:0 4px 30px #0001;border:1px solid #eee;border-radius:8px}
.editor-panel label{display:block;margin:0 0 7px}.editor-panel select{width:100%;font:14px Arial;padding:9px;background:white;border:1px solid #ddd;border-radius:3px}.editor-note{color:#746b6b;font-size:12px;margin:12px 0 0}.editor-actions{display:flex;justify-content:space-between;margin-top:14px;gap:10px}.editor-actions button{font:12px Arial;border:0;background:none;text-decoration:underline;cursor:pointer;padding:4px 0}.editor-status{font-size:12px;margin-top:10px}.editor-panel input[type=file]{width:100%;font:12px Arial;margin-top:10px}

.mind-gallery video{display:block;width:100%;height:auto;max-height:85vh;margin:36px 0;background:#f5f5f5}.project-meta{font:14px/1.7 Arial,sans-serif;margin:32px 0;color:#666}

.marker{font-family:var(--preview-typeface,"Times New Roman"),Times,serif;font-weight:400}
#preview video{display:block;width:auto;height:auto;max-width:min(420px,72vw);max-height:52vh;object-fit:contain;background:transparent}
@font-face{font-family:"DM Sans";src:url("fonts/dmsans.ttf");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("fonts/spacegrotesk.ttf");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Manrope";src:url("fonts/manrope.ttf");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/inter.ttf");font-weight:400;font-style:normal;font-display:swap}

.editor-panel{max-height:calc(100dvh - 100px);overflow:auto}.editor-panel .style-label{margin-top:15px}.editor-specimen{font-family:var(--preview-typeface,"Times New Roman"),serif;font-size:36px;line-height:1.2;font-weight:400;font-style:normal;font-synthesis:none;margin-top:20px;overflow-wrap:anywhere}.intro,.marker{font-synthesis:none}.editor-actions button:disabled{opacity:.35;cursor:default;text-decoration:none}

@font-face{font-family:"Manrope Variable";src:url("fonts/manrope-variable.ttf") format("truetype");font-weight:200 800;font-style:normal;font-display:swap}
.intro,.marker,.editor-specimen{font-weight:var(--preview-weight,400)}

:root{--preview-typeface:"Manrope Variable";--preview-weight:400}

.visibility-control{padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid #eee}.visibility-control label{display:flex;align-items:center;gap:8px}.visibility-control input{accent-color:#242121}.visibility-control a{font-size:12px;color:#777}.hidden-project{opacity:.55}.index-list .project-name{font-family:var(--preview-typeface,"Manrope Variable"),sans-serif;font-weight:var(--preview-weight,400)}

/* The editor overlay and homepage share the same responsive grid. */
:root{--page-gutter:clamp(22px,3vw,96px);--nav-size:clamp(16px,.5vw + 10px,24px);--home-max:2200px;--grid-columns:12;--grid-gap:24px;--intro-space:12svh;--intro-space-mobile:6svh}

.homepage-main{display:grid;grid-template-columns:repeat(var(--grid-columns),minmax(0,1fr));column-gap:var(--grid-gap);width:min(var(--home-max),calc(100% - 2 * var(--page-gutter)));margin-inline:auto;padding:clamp(48px,var(--intro-space),200px) 0 100px}
.homepage-main .intro,.homepage-main .refresh-wrap{grid-column:1 / -1;min-width:0}
.homepage-main .intro{width:100%;overflow-wrap:break-word;line-height:1.07}
.layout-grid{position:fixed;inset-block:0;left:50%;transform:translateX(-50%);width:min(var(--home-max),calc(100% - 2 * var(--page-gutter)));display:grid;grid-template-columns:repeat(var(--grid-columns),minmax(0,1fr));gap:var(--grid-gap);pointer-events:none;z-index:10}
.layout-grid span{background:rgba(104,118,205,.055);border-inline:1px solid rgba(104,118,205,.19)}
body:not(.page-home) .layout-grid{max-width:1440px}
.layout-controls{border:0;border-bottom:1px solid #eee;margin:0 0 18px;padding:0 0 16px;min-width:0}
.layout-controls legend{font-size:12px;color:#777;margin-bottom:10px}
.layout-controls label{display:flex;align-items:center;gap:8px}.layout-controls input[type=checkbox]{accent-color:#242121}
.layout-controls .editor-note{margin:4px 0 10px}.paragraph-position{margin-top:16px}.paragraph-position output{margin-left:auto;font-variant-numeric:tabular-nums}.paragraph-position input[type=range]{width:100%;accent-color:#242121;margin:0}.reset-layout{background:none;border:0;padding:4px 0;text-decoration:underline;cursor:pointer;font:12px Arial}
@media(max-width:1000px){:root{--grid-columns:8;--grid-gap:20px}}
@media(max-width:600px){:root{--page-gutter:22px;--grid-columns:4;--grid-gap:12px}.homepage-main{padding-top:clamp(24px,var(--intro-space-mobile),64px)}.homepage-main .intro{font-size:clamp(30px,8vw,46px);line-height:1.12;letter-spacing:-.035em}}

.source-image{margin:40px 0}.source-image img{display:block;width:100%;height:auto}.source-image figcaption{margin-top:10px;font:12px/1.5 Arial,sans-serif;color:#706767}.source-image figcaption a{text-underline-offset:3px}

.media-gallery .project-media{margin:36px 0}.media-gallery .project-media img,.media-gallery .project-media video{display:block;width:100%;height:auto;margin:0}.media-gallery .project-media video{max-height:85vh;background:#f5f5f5}.project-media figcaption{margin-top:10px;font:12px/1.5 Arial,sans-serif;color:#706767}.project-media figcaption a{text-underline-offset:3px}

.dream-motion{margin-top:48px}.motion-toolbar{display:flex;justify-content:flex-end;margin-bottom:16px}.motion-toolbar button{padding:8px 0;border:0;background:transparent;font:12px Arial,sans-serif;color:#706767;text-decoration:underline;text-underline-offset:3px;cursor:pointer}.dream-video-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:start}.media-gallery .dream-video-grid .project-media{margin:0}.media-gallery .dream-video-grid video{width:100%;height:auto;max-height:none;background:transparent;border:0;box-shadow:none;object-fit:contain}@media(max-width:900px){.dream-video-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}}@media(max-width:540px){.dream-video-grid{grid-template-columns:1fr;gap:22px}}

/* Horizontal guides stay aligned to the document while scrolling. */
.layout-grid.with-rows::before{content:"";position:absolute;inset:0;background-image:linear-gradient(to bottom,rgba(104,118,205,.25) 1px,transparent 1px);background-size:100% var(--grid-row-size,32px);background-position:0 var(--row-offset,0px);pointer-events:none}
.homepage-main .intro{width:var(--intro-width,100%);justify-self:center}
.layout-controls .grid-control-label{margin-top:14px}.layout-controls output{margin-left:auto;font-variant-numeric:tabular-nums}.layout-controls input[type=range]{width:100%;accent-color:#242121}.reset-grid{border:0;background:none;font:12px Arial,sans-serif;text-decoration:underline;padding:4px 0;cursor:pointer}

/* Preserve each film's own proportions without player frames or letterboxing. */
.media-gallery .project-media video.project-loop{display:block;width:auto;max-width:100%;height:auto;max-height:none;object-fit:contain;margin-inline:auto;background:transparent;border:0;box-shadow:none;border-radius:0}
.media-gallery .dream-video-grid video.project-loop{width:100%}

header,.editor-toggle{font-family:"Manrope Variable",Arial,sans-serif;font-weight:400}.site-nav{display:flex;align-items:center;gap:clamp(18px,1.4vw,36px)}.site-nav a[aria-current=page]{text-decoration:underline;text-underline-offset:4px}.about-page{width:min(1600px,calc(100% - 2 * var(--page-gutter)));max-width:none;margin:0 auto;padding:clamp(48px,8svh,130px) 0 100px}.about-page h1{font:400 14px/1.5 "Manrope Variable",Arial,sans-serif;margin:0 0 32px;color:#706767}.about-copy{max-width:none;font:400 clamp(22px,1.8vw,48px)/1.5 "Manrope Variable",Arial,sans-serif;letter-spacing:-.025em}.about-copy p{margin:0 0 1.4em}.about-copy a{text-underline-offset:5px;text-decoration-thickness:1px}

.info-image-marker{display:inline-flex;vertical-align:super;align-items:center;justify-content:center;width:1.85em;height:1.85em;margin-left:.3em;border-radius:50%;background:#2b2525;color:#fff;font:400 12px/1 "Manrope Variable",Arial,sans-serif;letter-spacing:-.035em;white-space:nowrap;position:relative;top:-.12em}

.info-image-marker{padding:0;border:0;cursor:pointer;flex-shrink:0}.info-image-marker:focus-visible{outline:1px solid #2b2525;outline-offset:4px}
#info-preview{position:fixed;z-index:15;width:max-content;max-width:min(420px,72vw);padding:0;border:0;background:transparent;box-shadow:none;pointer-events:none}
#info-preview img{display:block;width:auto;height:auto;max-width:min(420px,72vw);max-height:52vh;object-fit:contain}

/* Light, compact image references and full-page Info / Index views. */
.info-image-marker{width:1.8em;height:1.8em;font-size:max(10px,.42em);font-weight:600;line-height:1;background:transparent;color:#454040;border:max(1.25px,.065em) solid #454040;top:-.12em;margin-left:4px}
.info-image-marker::before{content:"";position:absolute;inset:-5px;border-radius:50%}.info-image-marker:hover{border-color:#242121;color:#242121}
.panel-close{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;margin-left:2px;font:300 1.6em/1 "Manrope Variable",Arial,sans-serif;text-decoration:none!important}.panel-close:focus-visible{outline:1px solid currentColor;outline-offset:3px}


@media(max-width:600px){.site-nav{gap:18px}.panel-close{margin-left:0}}

.info-image-marker.pending-image{cursor:default}

/* Keep each reference with the word it annotates at every viewport size. */
.reference-tail{white-space:nowrap}
.site-nav a,header>a{display:inline-flex;align-items:center;min-height:44px}
.index-list .project-name{min-width:0;overflow-wrap:anywhere}
.index-list .tag:empty{display:none}
@media(max-width:600px){.about-copy{font-size:clamp(21px,5.4vw,30px)}.about-page{padding-top:40px}.index-list .index-row{flex-wrap:wrap}.index-list .project-name{flex:1}.index-list .tag:not(:empty){flex-basis:100%;margin-left:32px}}

/* Preview release: project names are a list, numbers only reveal media. */
.marker{border:0;padding:0;cursor:pointer}.index-list .index-row:hover .project-name{text-decoration:none}

/* Square, quiet thumbnails aligned at the right of each index row. */
.index-list > :is(a,.index-row){display:grid;grid-template-columns:clamp(20px,2vw,32px) minmax(0,1fr) clamp(64px,7vw,100px);column-gap:clamp(12px,2vw,28px);row-gap:6px;align-items:center}
.index-list > :is(a,.index-row) .number{grid-column:1;grid-row:1;width:auto}
.index-list > :is(a,.index-row) .project-name{grid-column:2;grid-row:1}
.index-list > :is(a,.index-row) .tag:not(:empty){grid-column:2;grid-row:2;margin:0}
.index-thumbnail{grid-column:3;grid-row:1 / span 2;display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border:0;border-radius:0}

/* Keep mobile video rendered while its still frame carries the preview. */
#preview.video-pending video{position:absolute;inset:0;opacity:0;width:100%;height:100%}