:root{color-scheme:dark;--background:#232424;--text:#efede6;--muted:#aeada7;--accent:#d7a4b0;--line:#444543;font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;font-size:16px}
*{box-sizing:border-box}body{margin:0;background:var(--background);color:var(--text);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}a:hover{color:var(--accent)}a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:6px}button{font:inherit}.site-header,.site-footer,.portrait-layout,.legal{width:calc(100% - 144px);max-width:1440px;margin-inline:auto}.site-header{display:flex;justify-content:space-between;align-items:center;padding-block:36px}.wordmark{font-weight:700;letter-spacing:-.05em;font-size:18px}.portrait-layout{display:grid;grid-template-columns:45fr 55fr;grid-template-rows:auto auto auto;column-gap:56px;position:relative;padding-top:62px;padding-bottom:70px}.identity{grid-column:1;grid-row:1;position:relative;z-index:1}h1{font-family:Arial,Helvetica,sans-serif;font-size:clamp(90px,10.8vw,162px);font-weight:900;letter-spacing:-.065em;line-height:.85;margin:0 0 29px -.065em}.location{font-size:14px;letter-spacing:.58em;margin:0;padding-left:3px}.portrait{grid-column:2;grid-row:1 / 3;margin:40px 0 0;align-self:start;padding:9px;border:1px solid #565650;position:relative}.portrait:before,.portrait:after{content:"";position:absolute;width:18px;height:1px;background:var(--muted);top:-1px;left:-8px}.portrait:after{top:auto;left:auto;bottom:-1px;right:-8px}.portrait-placeholder{aspect-ratio:4/5;background:#303130;display:flex;align-items:center;justify-content:center;position:relative;text-align:center;color:#999a94;font-size:16px;line-height:1.65}.placeholder-label{position:absolute;bottom:25px;font-size:12px;letter-spacing:.2em;color:#898b84}.portrait img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;filter:grayscale(1);display:block}.introduction{grid-column:1;grid-row:2;margin-top:40px;max-width:48ch;font-size:16px;line-height:1.95;text-wrap:pretty}.introduction:before{content:"";display:block;width:44px;height:1px;background:var(--muted);margin-bottom:30px}.introduction p{margin:0 0 32px}.introduction p:last-child{margin-bottom:0}.introduction em{font-style:normal;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:1px;text-underline-offset:5px}.note{font-family:"Bradley Hand","Segoe Print","Comic Sans MS",cursive;font-weight:400;line-height:1.2;color:var(--accent);margin:0}.note-one{position:absolute;top:30px;left:38%;font-size:clamp(23px,2.5vw,35px);transform:rotate(-9deg);z-index:2}.note-three{grid-column:1 / -1;grid-row:3;justify-self:center;text-align:center;font-size:clamp(24px,2.3vw,32px);line-height:1.35;transform:rotate(-3deg);margin:60px 0 10px;max-width:100%}.site-footer{border-top:1px solid var(--line);padding:28px 0 38px;display:flex;gap:13px;justify-content:center;font-size:13px;color:var(--muted)}.skip-link{position:absolute;top:-100px;left:20px;background:var(--text);color:var(--background);padding:12px;z-index:10}.skip-link:focus{top:15px}.legal{max-width:800px;padding-block:60px 90px;line-height:1.8}.legal h1{font-size:clamp(34px,6vw,64px);line-height:1.1;letter-spacing:-.045em;overflow-wrap:anywhere;margin:0 0 40px}.legal h2{font-family:Arial,Helvetica,sans-serif;font-size:24px;line-height:1.25;margin-top:42px}.legal a{text-decoration:underline;text-underline-offset:4px}.legal address{font-style:normal}.draft-notice{border-left:2px solid var(--accent);padding-left:20px;color:var(--accent)}
@media(max-width:1099px){.site-header,.site-footer,.portrait-layout,.legal{width:calc(100% - 80px)}.portrait-layout{grid-template-columns:1fr;gap:0;padding-top:40px;max-width:760px}.identity{grid-column:1;grid-row:1}h1{font-size:clamp(100px,18vw,170px)}.note-one{position:static;grid-column:1;grid-row:2;justify-self:end;margin:24px 30px 35px;font-size:32px}.portrait{grid-column:1;grid-row:3;margin:0 0 0 50px}.introduction{grid-column:1;grid-row:4;max-width:54ch;margin-top:35px}.note-three{grid-column:1;grid-row:5;margin:48px 0 20px;font-size:28px}}
@media(max-width:699px){.site-header,.site-footer,.portrait-layout,.legal{width:calc(100% - 48px)}.site-header{padding-block:26px;position:relative;flex-wrap:wrap}.wordmark{font-size:16px}.portrait-layout{padding-top:45px;padding-bottom:52px}h1{font-size:clamp(78px,22vw,145px);margin-bottom:25px}.location{font-size:12px;letter-spacing:.5em}.note-one{font-size:27px;justify-self:end;margin:34px 10px 37px;transform:rotate(-6deg)}.portrait{margin:0;padding:6px}.portrait-placeholder{font-size:15px}.introduction{line-height:1.9;margin-top:32px}.introduction:before{margin-bottom:27px}.note-three{font-size:22px;margin:43px 0 10px;transform:rotate(-2deg)}.site-footer{font-size:12px;gap:10px;padding-block:24px 30px}.legal{padding-block:35px 65px}.legal h2{font-size:22px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.email-contact{padding-top:12px}.email-contact a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}.email-contact a:hover{color:var(--text)}

/* Original handwriting in cropped SVG viewports, without redrawing the strokes. */
.note img{display:block;width:100%;height:auto}
.note-one{width:clamp(230px,23vw,325px);left:37%;top:-20px;transform:rotate(-7deg)}
.note-three{width:min(620px,85%);margin-top:60px;transform:rotate(-2deg)}
.portrait img{object-position:60% center}
@media(max-width:1099px){.note-one{width:330px;max-width:80%;margin:25px 15px 40px}.note-three{width:min(620px,94%);margin-top:48px}}
@media(max-width:699px){.note-one{width:260px;max-width:86%;margin:34px 5px 36px}.note-three{width:100%;margin-top:40px;transform:none}.portrait img{aspect-ratio:4/5}}

/* Revised composition: handwritten notes belong to the portrait. */
.home .site-header{padding-block:30px 12px}
.home .wordmark{font-size:18px;letter-spacing:-.05em}
.home .portrait-layout{padding-top:85px;padding-bottom:48px;grid-template-rows:auto 1fr;align-items:start}
.visual{grid-column:2;grid-row:1 / 3;min-width:0;margin-top:40px}
.visual .portrait{margin:0;padding:9px;border:1px solid #565650}
.portrait:before{display:none}
.visual .portrait:after{display:none}
.introduction:before{display:block}
.identity h1{margin-bottom:23px}
.location{font-size:20px;letter-spacing:.16em;color:var(--muted)}
.introduction{margin-top:36px;line-height:1.95}
.note-one{left:37%;right:auto;top:0;width:290px;transform:rotate(-5deg)}
.visual .note-three{width:88%;max-width:500px;margin:36px auto 0;transform:rotate(-3deg)}
@media(max-width:1099px){
 .home .portrait-layout{padding-top:36px;grid-template-rows:auto}
 .visual{display:contents}
 .note-one{width:300px;justify-self:center;margin:24px 0 30px}
 .visual .portrait{grid-column:1;grid-row:3;margin:0 12px 0 38px}
 .visual .note-three{grid-column:1;grid-row:5;justify-self:center;width:85%;margin:24px auto 0}
}
@media(max-width:699px){
 .home .site-header{padding-block:25px 6px}
 .home .wordmark{font-size:16px}
 .home .portrait-layout{padding-top:40px;padding-bottom:34px}
 .location{font-size:17px;letter-spacing:.14em}
 .note-one{width:250px;max-width:86%;margin:30px 0 30px}
 .visual .portrait{margin:0;padding:6px}
 .introduction{margin-top:38px;line-height:1.9}
 .visual .note-three{width:94%;margin-top:24px;transform:rotate(-2deg)}
}

@font-face{font-family:"IBM Plex Mono";src:url("../fonts/IBMPlexMono-Medium.ttf") format("truetype");font-style:normal;font-weight:500;font-display:swap}
.wordmark,.home .wordmark{font-family:"IBM Plex Mono",monospace;font-size:22px;font-weight:500;letter-spacing:.06em;line-height:1.2}
@media(max-width:699px){.wordmark,.home .wordmark{font-size:20px}}

/* Film border and paper notes; original portrait and handwriting retained. */
.visual{position:relative;padding-bottom:52px}
.visual .portrait{border:0;padding:15px 25px 22px 31px;background:#141513 url("../effects/paper-grain.svg") repeat;background-size:250px;box-shadow:0 2px 5px #0004}
.visual .portrait>img{clip-path:polygon(.4% .3%,18% 0,38% .4%,60% .1%,80% .3%,99.7% 0,100% 24%,99.6% 45%,100% 68%,99.8% 99.7%,78% 100%,56% 99.6%,30% 100%,.2% 99.7%,0 72%,.3% 48%,0 23%)}
.visual .portrait:before{display:block;content:"";position:absolute;top:-17px;left:46%;width:88px;height:33px;background:#ae958077 url("../effects/paper-grain.svg");transform:rotate(-9deg);z-index:3;clip-path:polygon(2% 3%,98% 0,100% 95%,0 100%)}
.film-label,.film-count{position:absolute;font:10px/1 "IBM Plex Mono",monospace;color:#d7a4b0;opacity:.7;writing-mode:vertical-rl;letter-spacing:.12em;z-index:1}
.film-label{left:10px;top:44%;transform:rotate(180deg)}
.film-count{right:7px;bottom:24%}
.visual .note{background:#171815 url("../effects/paper-grain.svg") repeat;background-size:230px;padding:23px 19px;box-shadow:2px 5px 12px #0005;isolation:isolate;z-index:4;clip-path:polygon(0 1%,21% 0,47% 1%,78% 0,100% 1%,99.5% 30%,100% 63%,99% 100%,73% 99%,43% 100%,17% 99%,0 100%)}
.visual .note-one{position:absolute;left:-36px;right:auto;top:30px;width:290px;max-width:59%;margin:0;transform:rotate(-9deg)}
.visual .note-three{position:relative;width:85%;max-width:465px;margin:-37px -9px 0 auto;transform:rotate(-6deg)}
@media(max-width:1099px){
 .visual{display:block;grid-column:1;grid-row:3;margin:65px 0 0;padding-bottom:10px}
 .visual .portrait{margin:0 12px 0 38px}
 .visual .note-one{top:-30px;left:0;max-width:57%}
 .visual .note-three{width:80%;margin:-32px 0 0 auto}
}
@media(max-width:699px){
 .visual{margin-top:65px}
 .visual .portrait{margin:0;padding:12px 18px 17px 22px}
 .film-label{left:6px;font-size:8px}.film-count{right:4px;font-size:8px}
 .visual .portrait:before{width:65px;height:25px;top:-13px;left:64%}
 .visual .note{padding:17px 12px}
 .visual .note-one{left:-7px;top:-34px;width:225px;max-width:76%;transform:rotate(-7deg)}
 .visual .note-three{width:94%;margin:-17px -3px 0 auto;transform:rotate(-4deg)}
}

/* Scanned material replaces procedural scratches and jagged polygons. */
.visual .portrait{padding:15px 26px 25px 30px;background:#141411 url("../images/collage-material.png") center/cover;box-shadow:0 3px 7px #0005;transform:none}
.visual .portrait>img{clip-path:polygon(.2% .1%,22% 0,49% .2%,75% 0,99.8% .2%,100% 37%,99.8% 72%,100% 99.8%,66% 100%,33% 99.8%,.1% 100%,0 63%,.2% 31%)}
.visual .portrait:after{display:none}
.visual .portrait:before{width:104px;height:40px;top:-19px;left:47%;background:linear-gradient(#b9a08888,#b9a08888),url("../images/collage-material.png") center/210px;opacity:.85;transform:rotate(-10deg);clip-path:polygon(1% 1%,99% 0,100% 98%,0 100%);box-shadow:0 1px 2px #0004}
.visual .note{background:#141411 url("../images/collage-material.png") 20% 60%/cover;clip-path:polygon(0 1%,35% 0,67% .4%,100% 0,99.6% 49%,100% 100%,60% 99.7%,24% 100%,0 99%);padding:25px 20px;filter:none;box-shadow:1px 4px 6px #0004}
.visual .note-one{left:-35px;top:35px;transform:rotate(-10deg)}
.visual .note-three{margin:-42px -10px 0 auto;transform:rotate(-7deg);background-position:80% 10%;padding:25px 23px}
@media(max-width:1099px){.visual .note-one{left:0;top:-28px}}
@media(max-width:699px){
 .visual .portrait{padding:12px 19px 20px 22px}
 .visual .portrait:before{width:76px;height:29px;left:65%;top:-14px}
 .visual .note{padding:19px 13px}
 .visual .note-one{left:-6px;top:-30px;transform:rotate(-8deg)}
 .visual .note-three{margin-top:-24px;margin-right:-2px;transform:rotate(-5deg)}
}