@font-face{font-family:AgrandirTight;src:url('assets/agrandir-tight-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
/* Reference geometry: meliketurgut.com masthead and corner-copy transitions. */
.site-header{--corner-inset:clamp(24px,2.74vw,56px);position:absolute;z-index:5;top:var(--corner-inset);left:max(var(--corner-inset),env(safe-area-inset-left));right:max(var(--corner-inset),env(safe-area-inset-right));display:flex;justify-content:space-between;align-items:flex-start;gap:24px;pointer-events:none;color:#000;font-family:var(--font-sans);font-size:14px;line-height:20px;font-weight:400;letter-spacing:.04em;text-transform:uppercase;-webkit-font-smoothing:antialiased;animation:header-arrive 420ms cubic-bezier(.2,.7,.2,1) 40ms both}
.header-about{position:relative;display:block;padding:0;border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;white-space:nowrap;cursor:pointer;pointer-events:auto;text-align:left;-webkit-tap-highlight-color:transparent}
.header-role{text-align:right}.header-secondary{display:block;transform:translateY(-2px);color:rgb(0 0 0 / 50%)}
.header-copyright,.header-reveal,.header-role-about{font:inherit;letter-spacing:inherit;text-transform:inherit}
.header-reveal,.header-city,.header-copyright,.header-role-about{display:block;transition:transform 240ms cubic-bezier(.2,.7,.2,1),opacity 240ms cubic-bezier(.2,.7,.2,1)}
.header-reveal,.header-role-about{opacity:0;transform:translateY(8px)}
.header-role .header-secondary,.header-identity .header-secondary{display:grid}.header-secondary>span{grid-area:1/1}
.header-identity:is(:hover,:focus-visible) .header-reveal,.header-role:is(:hover,:focus-visible) .header-role-about{opacity:1;transform:translateY(0)}
.header-role:is(:hover,:focus-visible) .header-city{opacity:0;transform:translateY(-8px)}
.header-identity:is(:hover,:focus-visible) .header-copyright{opacity:0;transform:translateY(-8px)}
.header-mobile-about{display:none}
.header-about:focus-visible,.about-close:focus-visible{outline:2px solid currentColor;outline-offset:4px}
@media(pointer:fine){.header-about::before{content:"";position:absolute;inset:-60px}.header-identity::before{right:max(-60px,calc(100% + var(--corner-inset) - 50vw))}.header-role::before{left:max(-60px,calc(100% + var(--corner-inset) - 50vw));right:max(-60px,calc(-1 * var(--content-gutter,16px)))}}
@keyframes header-arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.about-dialog{--card-width:clamp(574px,calc(39.2vw + 221.2px),770px);position:fixed;inset:0;margin:0;padding:0;border:0;width:100%;max-width:none;height:100dvh;max-height:none;overflow:clip;background:transparent;color:#252525}
.about-dialog::backdrop{background:transparent}
.about-backdrop{position:absolute;inset:0;background:rgb(234 236 229 / 18%);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.about-sheet{position:absolute;inset:20px 20px 20px auto;width:var(--card-width);border-radius:clamp(32px,3.8vw,56px);background:#fff;z-index:2;outline:none}
.about-dismiss{position:absolute;inset:0 auto 0 0;width:calc(100% - var(--card-width) - 20px);border:0;padding:0;background:none;z-index:1;cursor:pointer}
.about-close{position:absolute;top:32px;left:calc((100% - var(--card-width) - 20px)/2);transform:translateX(-50%);display:grid;place-items:center;width:46px;height:46px;border:0;padding:11px;border-radius:50%;background:#fffefa;color:#464646;z-index:3;cursor:pointer;box-shadow:0 2px 10px #23281e1a,0 0 0 1px #23281e06}
.about-close svg,.about-cursor svg{width:24px;height:24px;display:block}
.about-cursor{position:fixed;left:0;top:0;width:0;height:0;pointer-events:none;z-index:4;display:none}
.about-cursor span{position:absolute;left:-23px;top:-23px;width:46px;height:46px;display:grid;place-items:center;border-radius:50%;background:#fffefa;color:#464646;opacity:0;transform:scale(.55) rotate(-35deg);transition:transform 200ms cubic-bezier(.2,1.5,.4,1),opacity 120ms ease}
.about-cursor.is-visible span{opacity:1;transform:scale(1) rotate(0)}
@media(width >= 900px) and (hover:hover) and (pointer:fine){.about-dismiss{cursor:none}.about-cursor{display:block}.about-close{display:none}html[data-keyboard] .about-close{display:grid}}
@media(width < 900px){.site-header{left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right))}.about-sheet{inset:calc(80px + env(safe-area-inset-top)) 6px 0;width:auto;border-radius:56px 56px 0 0}.about-dismiss{width:100%;height:80px}.about-close{top:calc(16px + env(safe-area-inset-top));left:50%}}
@media(width < 900px) and (pointer:coarse){.site-header{--corner-inset:24px}.header-role,.header-identity .header-secondary{display:none}.header-mobile-about{display:block;min-height:44px;margin-top:-12px}.header-identity::before{content:"";position:absolute;inset:-12px 0}}
@media(hover:none){.header-reveal{opacity:1;transform:none}.header-copyright{display:none}}
@media(prefers-reduced-motion:reduce){.site-header{animation:none}.header-reveal,.header-city,.header-copyright,.header-role-about,.about-cursor span{transition:none}}

/* Keep the hero exactly 80px below the header's layout box at every viewport. */
.site-header{position:relative;top:auto;left:auto;right:auto;margin:var(--corner-inset) max(var(--corner-inset),env(safe-area-inset-right)) 0 max(var(--corner-inset),env(safe-area-inset-left))}
.site-header + .hero{min-height:0;align-items:start;padding-top:80px;padding-bottom:60px}
@media(width < 900px){.site-header{margin-left:max(16px,env(safe-area-inset-left));margin-right:max(16px,env(safe-area-inset-right))}}

/* Match both edges of the main content container. */
.site-header{width:min(calc(100% - 2 * var(--content-gutter)),var(--content-max));margin-inline:auto}

/* A small preview in the header-to-intro gap, without moving either label. */
.header-photo-preview{position:absolute;top:calc(100% + 10px);left:8px;width:60px;height:60px;pointer-events:none;opacity:0;visibility:hidden;transform:translateY(-4px) scale(.92);transform-origin:50% 0;transition:opacity 120ms ease,transform 240ms cubic-bezier(.2,1.35,.4,1),visibility 0s 240ms}
.header-role .header-photo-preview{left:auto;right:8px}
.header-photo-preview img{position:absolute;inset:0;width:60px;height:60px;object-fit:cover;border-radius:7px;box-shadow:0 4px 9px -4px #26271e55;user-select:none;-webkit-user-drag:none}
.header-photo-preview img:nth-child(1){z-index:3;transform:rotate(-3deg)}
.header-photo-preview img:nth-child(2){z-index:2;transform:translate(10px,-2px) rotate(12deg) scale(.88)}
.header-photo-preview img:nth-child(3){z-index:1;transform:translate(-10px,-3px) rotate(-12deg) scale(.88)}
.header-photo-preview.is-landing,.header-about:focus-visible .header-photo-preview{opacity:1;visibility:visible;transform:none;transition-delay:0s}
/* Take over the visible return clone without restarting the hover fade. */
.header-photo-preview.is-landing{transition:none}
@media(hover:hover) and (pointer:fine){.header-about:hover .header-photo-preview{opacity:1;visibility:visible;transform:none;transition-delay:0s}}
html:has(dialog[open]) .header-photo-preview{opacity:0;visibility:hidden;transition:none}
@media(prefers-reduced-motion:reduce){.header-photo-preview{transform:none;transition:opacity 120ms ease,visibility 0s 120ms}}

/* Personal cards share the work view's open space, with a small, tactile fan. */
.about-dialog{--photo-stage-width:calc(100vw - var(--card-width) - 20px);--photo-size:min(400px,calc(var(--photo-stage-width)*.64),54dvh)}
.about-photos{position:absolute;inset:0 auto 0 0;width:var(--photo-stage-width);pointer-events:none;z-index:1}
.about-photo{position:absolute;left:50%;top:50%;width:var(--photo-size);height:var(--photo-size);border:0;padding:0;border-radius:24px;background:none;transform:translate(-50%,-50%);pointer-events:auto;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.about-photo[data-slot="-1"]{transform:translate(-74%,-54%) scale(.86)}
.about-photo[data-slot="1"]{transform:translate(-26%,-52%) scale(.86)}
.about-photo[data-slot="back"]{transform:translate(-50%,-50%) scale(.82);pointer-events:none}
.about-photo-art{display:block;width:100%;height:100%;overflow:hidden;border-radius:inherit;background:#e6e3db;box-shadow:0 18px 30px -16px #26271e45,0 5px 9px -4px #26271e1a;transform:rotate(var(--photo-angle));transform-origin:50% 50%}
.about-photo[data-photo="1"] .about-photo-art{background:#d8ded7}
.about-photo[data-photo="2"] .about-photo-art{background:#e9ddd3}
.about-photo img{display:block;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}
.about-photo:focus-visible{outline:2px solid var(--ink);outline-offset:8px}
.about-photo-caption{position:absolute;top:calc(50% + var(--photo-size)*.63 + 20px);left:20px;right:20px;margin:0;text-align:center;font-family:var(--font-sans);font-size:13px;letter-spacing:.01em;line-height:1.4;color:#61615b}
.about-dialog[data-phase="closing"] .about-photo{pointer-events:none}
@media(width < 900px){
 .about-dialog{--photo-stage-width:100vw;--photo-stage-height:clamp(284px,44dvh,420px);--photo-size:min(52vw,24dvh,240px)}
 .about-photos{height:var(--photo-stage-height)}
 .about-photo{top:calc(50% + 8px);border-radius:24px}
 .about-photo-caption{top:calc(50% + var(--photo-size)*.63 + 24px);font-size:12px;display:flex;justify-content:center;align-items:center;gap:12px}
 .about-dialog:has(.about-photos) .about-sheet{top:var(--photo-stage-height);border-radius:40px 40px 0 0}
 .about-dialog:has(.about-photos) .about-dismiss{height:var(--photo-stage-height)}
}

.header-role.has-copy-feedback .header-role-about{opacity:1;transform:translateY(0)}
.header-role.has-copy-feedback .header-city{opacity:0;transform:translateY(-8px)}
.email-copy-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* About detail page: personal cards first, editable biography below. */
.about-dialog{--photo-size:min(360px,54vw);background:transparent}
.about-dialog .about-backdrop{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}
.about-dialog:has(.about-photos) .about-sheet{position:absolute;inset:0;width:100%;border-radius:0;background:transparent;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:120px 24px 100px;scrollbar-width:thin}
.about-dialog .about-photos{position:relative;inset:auto;width:100%;height:calc(var(--photo-size)*1.6 + 48px);pointer-events:none}
.about-dialog .about-photo{top:46%}
.about-dialog .about-photo-caption{top:calc(46% + var(--photo-size)*.63 + 24px)}
.about-copy{max-width:640px;margin:36px auto 0;padding-bottom:32px}
.about-dialog>.site-header{position:absolute;top:0;left:0;right:0;z-index:5;animation:none}
.about-dialog .about-dismiss{display:none}
.about-dialog .about-close{display:grid;position:fixed;top:calc(clamp(24px,2.74vw,56px) + 60px);right:24px;left:auto;transform:none;background:#f5f7f8;box-shadow:none;z-index:6}
.about-dialog .about-cursor{display:none}
@media(max-width:600px){
 .about-dialog .about-sheet{padding:120px 24px 64px}
 .about-dialog .about-close{right:16px}
 .about-copy{margin-top:24px}
}

.about-dialog>.site-header .header-photo-preview{display:none}

/* Match project whitespace dismissal; retain touch and keyboard close controls. */
@media(width >= 900px) and (hover:hover) and (pointer:fine){
 .about-dialog .about-close{display:none}
 html[data-keyboard] .about-dialog .about-close{display:grid}
 .about-dialog .about-cursor{display:block;z-index:10000}
 .about-dialog:has(.about-cursor.is-visible),.about-dialog:has(.about-cursor.is-visible) *{cursor:none!important}
 .about-dialog:has(.about-cursor.is-visible) .page-cursor{visibility:hidden}
}

/* Transparent shell lets the background fade independently of the content. */
.about-surface{position:absolute;inset:0;background:transparent;isolation:isolate}