:root{color-scheme:dark;--bg:#121722;--panel:#202735;--ink:#F2EEE5;--muted:#BDC6D3;--line:#394254;--accent:#8578F2;--orange:#EF9175;--sans:'Geist',sans-serif;--display:'Nova Round',sans-serif;--mono:'DM Mono',monospace}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:84px}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}a{color:inherit}.wrap{width:min(1160px,calc(100% - 80px));margin-inline:auto}.skip-link{position:absolute;left:1rem;top:-5rem;z-index:20;background:var(--accent);color:#121722;padding:1rem}.skip-link:focus{top:1rem}:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.site-header{height:72px;padding:0 max(40px,calc((100% - 1160px)/2));border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.wordmark{font:600 21px var(--display);letter-spacing:-1.2px;text-decoration:none}.wordmark span{color:var(--accent)}nav{display:flex;gap:30px}nav a,.eyebrow,.project-type,.project-credit,.site-footer>span{font:10px var(--mono);letter-spacing:.08em}nav a{text-decoration:none;color:var(--muted)}nav a:hover,.row-link:hover{color:var(--accent)}.hero{padding-top:112px;padding-bottom:105px;min-height:520px}.eyebrow{color:var(--muted);margin:0}.hero h1{font:500 clamp(58px,9vw,112px)/.99 var(--display);letter-spacing:-.085em;margin:42px 0 32px;max-width:1050px}.hero h1 span{color:var(--accent)}.hero-foot{display:flex;align-items:center;justify-content:space-between;max-width:740px}.hero-foot p{font-size:16px;line-height:1.6;color:#c5c4bc;margin:0;max-width:410px}.hero-foot>a,.row-link{font:11px var(--mono);text-decoration:none;border-bottom:1px solid #566177;padding-bottom:8px}.hero-foot>a span{margin-left:25px}.work{border-top:1px solid var(--line);padding-top:22px}.section-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px}.section-head h2{font:500 22px var(--display);margin:0}.project-row{display:grid;grid-template-columns:.82fr 1.18fr;gap:70px;align-items:center;border-top:1px solid var(--line);padding:28px 0 34px}.project-copy{padding:12px 0}.project-type{color:var(--muted);margin:0 0 20px}.project-copy h3{font:500 clamp(33px,4vw,50px)/1.05 var(--display);letter-spacing:-.06em;margin:0 0 14px}.project-copy h3 a{text-decoration:none}.project-copy>p:not(.project-type):not(.project-credit){font-size:15px;line-height:1.7;color:#BDC6D3;max-width:410px;margin:0 0 16px}.project-credit{font-size:9px;color:var(--muted);margin:0 0 23px}.row-link{display:inline-block}.row-link span{margin-left:20px}.project-image{display:block;overflow:hidden;background:#202735}.project-image img{display:block;width:100%;aspect-ratio:1.7;object-fit:cover;transition:transform .35s ease;filter:saturate(.86)}.project-image:hover img{transform:scale(1.015)}.about{border-top:1px solid var(--line);margin-top:50px;padding:76px 0;display:grid;grid-template-columns:180px 1fr;gap:54px;align-items:center}.about-image img{display:block;width:150px;height:150px;object-fit:cover;border-radius:50%;background:#b9dfce}.about-copy{max-width:650px}.about-copy h2{font:500 37px var(--display);letter-spacing:-.06em;margin:13px 0}.about-copy>p:last-child{max-width:600px;color:#BDC6D3;font-size:15px;line-height:1.75;margin:0}.contact{border-top:1px solid var(--line);padding:42px 0 58px;display:flex;align-items:end;justify-content:space-between}.contact h2{font:500 28px var(--display);letter-spacing:-.04em;margin:12px 0 0}.contact-placeholder{font:10px var(--mono);color:var(--muted)}.site-footer{height:70px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.site-footer>span{color:var(--muted);font-size:9px}.site-footer .wordmark{font-size:18px}
@media(max-width:700px){.wrap{width:calc(100% - 40px)}.site-header{height:64px;padding:0 20px}nav{gap:18px}.hero{padding-top:83px;padding-bottom:76px;min-height:0}.hero h1{font-size:clamp(56px,12vw,82px);margin:35px 0 25px}.hero-foot{display:block}.hero-foot p{font-size:15px;margin-bottom:20px}.section-head{margin-bottom:12px}.project-row{grid-template-columns:1fr;gap:17px;padding:22px 0 27px}.project-copy{padding:0}.project-type{margin-bottom:13px}.project-copy h3{font-size:37px;margin-bottom:10px}.project-copy>p:not(.project-type):not(.project-credit){font-size:14px;margin-bottom:12px}.project-credit{margin-bottom:16px}.project-image{grid-row:1}.about{grid-template-columns:78px 1fr;gap:22px;padding:52px 0;margin-top:30px}.about-image img{width:76px;height:76px}.about-copy h2{font-size:30px;margin:9px 0}.about-copy>p:last-child{font-size:13px}.contact{padding:32px 0 42px;display:block}.contact h2{font-size:24px}.contact-placeholder{display:block;margin-top:22px}.site-footer{height:62px}.site-footer>span:nth-child(2){display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}

/* Somwyr guide visual language: Twilight Workshop palette, legible type, and generous form. */
:root{--bg:#121722;--panel:#202735;--ink:#F2EEE5;--muted:#BDC6D3;--line:#394254;--accent:#8578F2;--blue:#55C7DF;--orange:#EF9175;--sans:'Geist',sans-serif;--display:'Nova Round',sans-serif;--mono:'DM Mono',monospace}
body{font-size:16px;line-height:1.6}
.hero h1,.project-hero h1,.somwyr-intro h1,.project-copy h3,.section-head h2,.section-heading h2,.prose h2,.role-block h2,.status-copy h2,.somwyr-close h2,.about-copy h2,.contact h2,.next-project>a{font-family:var(--display);font-weight:400;letter-spacing:-.015em}
.wordmark span{color:var(--blue)}
nav a{color:var(--muted);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:5px}
nav a:hover,nav a:focus-visible{color:var(--blue);text-decoration-color:currentColor}
.project-image,.about-image img{border-radius:12px}

/* Typography hierarchy from the supplied guide. */
.hero h1,.project-hero h1,.project-copy h3,.section-head h2,.section-heading h2,.prose h2,.role-block h2,.status-copy h2,.about-copy h2,.contact h2,.next-project>a{font-family:var(--sans);font-weight:700;letter-spacing:-.02em}
.hero h1{font-size:clamp(36px,5vw,52px);line-height:1.05}
.project-hero h1{font-size:clamp(44px,6vw,64px);line-height:1.05}
.somwyr-intro h1,.somwyr-close h2{font-family:var(--display);font-weight:400;letter-spacing:0;line-height:.96}
.somwyr-intro h1{font-size:clamp(44px,7vw,72px)}
.somwyr-close h2{font-size:clamp(44px,7vw,72px)}
.eyebrow,nav a,.project-type,.project-credit,.site-footer>span{font-size:11px}

/* Quiet staggered wayfinding tile: a dot and a discovery star. */
body{background-color:var(--bg);background-image:url("/assets/brand/dot-star-tile.svg");background-repeat:repeat;background-size:160px 128px}

/* About-first personal homepage */
.about-home{padding-top:62px;padding-bottom:78px}
.about-masthead{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:64px;align-items:center}
.about-opening h1{font:700 clamp(40px,5vw,52px)/1.05 var(--sans);letter-spacing:-.025em;margin:24px 0 8px;max-width:760px}
.about-opening h1 span{color:var(--accent)}
.about-alias{font:13px var(--mono);color:var(--muted);margin:0 0 26px}
.about-lede{font:400 18px/1.65 var(--sans);color:var(--ink);max-width:700px;margin:0 0 14px}
.about-why{font-size:16px;line-height:1.7;color:var(--muted);max-width:690px;margin:0}
.about-portrait{margin:0}
.about-portrait img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:16px;border:1px solid var(--line)}
.about-bridge{max-width:860px;margin:42px 0 38px;padding-left:24px;border-left:2px solid var(--accent)}
.about-bridge p{font-size:16px;line-height:1.7;color:var(--ink);margin:0}
.about-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.about-tile{padding:22px;background:var(--panel);border:1px solid var(--line);border-radius:12px}
.about-tile .eyebrow{font-size:11px;line-height:1.45}
.about-tile h2{font:700 21px/1.2 var(--sans);letter-spacing:-.02em;margin:17px 0 12px}
.about-tile p:not(.eyebrow){font-size:14px;line-height:1.65;color:var(--muted);margin:0 0 14px}
.about-tile p:last-child{margin-bottom:0}
.about-signoff{font:400 16px/1.6 var(--sans);color:var(--ink);margin:30px 0 0}
.work .section-head{display:block;margin-bottom:18px}
.work .section-head .eyebrow{margin-bottom:8px}
.project-type-card{aspect-ratio:1.7;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(22px,3vw,40px);background:var(--panel);border:1px solid var(--line);text-decoration:none}
.project-type-card .eyebrow{font-size:11px;color:var(--blue)}
.project-type-card-name{font:400 clamp(34px,5vw,62px)/.98 var(--display);color:var(--ink);letter-spacing:0}
.project-type-card-note{font-size:13px;line-height:1.5;color:var(--muted)}
.project-type-card:hover{border-color:var(--accent)}
@media(max-width:900px){.about-masthead{grid-template-columns:minmax(0,1fr) 210px;gap:38px}.about-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.about-tile:first-child{grid-column:1/-1}}
@media(max-width:700px){.about-home{padding-top:45px;padding-bottom:55px}.about-masthead{grid-template-columns:1fr;gap:25px}.about-opening h1{font-size:38px;margin-top:18px}.about-alias{margin-bottom:18px}.about-lede{font-size:16px}.about-portrait{width:142px}.about-bridge{margin:30px 0;padding-left:16px}.about-bridge p{font-size:14px}.about-tiles{grid-template-columns:1fr;gap:12px}.about-tile:first-child{grid-column:auto}.about-tile{padding:19px}.about-signoff{font-size:14px;margin-top:22px}.work .section-head h2{font-size:24px}.project-type-card{aspect-ratio:1.55;padding:22px}.project-type-card-name{font-size:42px}}


/* Sitewide navigation contrast over the patterned canvas. */
.site-header{position:relative;z-index:2;background:rgba(18,23,34,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom-color:rgba(189,198,211,.18)}

/* Let the introduction flow naturally around the portrait. */
.about-masthead{display:block}
.about-portrait{float:left;width:clamp(170px,20vw,240px);margin:8px 32px 20px 0}
.about-portrait img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;border:1px solid var(--line)}
.about-opening::after{content:"";display:block;clear:both}
@media(max-width:700px){.about-masthead{display:block}.about-portrait{float:left;width:clamp(104px,32vw,138px);margin:4px 16px 14px 0}.about-opening::after{clear:both}}

/* Contact directory. */
.contact-page{padding-top:52px;padding-bottom:90px}
.contact-page h1{font:700 clamp(40px,6vw,64px)/1.05 var(--sans);letter-spacing:-.02em;margin:22px 0}
.contact-intro{max-width:700px;font-size:16px;line-height:1.7;color:var(--muted);margin:0 0 34px}
.contact-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.contact-card{display:block;padding:22px;background:rgba(32,39,53,.94);border:1px solid var(--line);border-radius:12px;color:inherit;text-decoration:none;transition:border-color .2s ease}
a.contact-card:hover{border-color:var(--accent)}
.contact-platform{font:11px var(--mono);letter-spacing:.08em;color:var(--blue);margin:0 0 12px}
.contact-handle{font:500 18px/1.35 var(--sans);overflow-wrap:anywhere;margin:0 0 8px}
.contact-detail{font:12px/1.5 var(--sans);color:var(--muted);margin:0}
@media(max-width:700px){.contact-page{padding-top:36px;padding-bottom:58px}.contact-grid{grid-template-columns:1fr}.contact-page h1{font-size:40px}}

.contact-card-email{grid-column:1/-1;padding:28px 30px;border-color:rgba(133,120,242,.55);background:rgba(32,39,53,.98)}
.contact-card-email .contact-platform{color:var(--accent)}
.contact-card-email .contact-handle{font-size:clamp(22px,3vw,30px);letter-spacing:-.02em;margin-bottom:10px}

/* Personal wordmark and introduction use the rounded display face. */
.site-header .wordmark{font:400 21px/1 var(--display);letter-spacing:0}
.about-opening h1{font-family:var(--display);font-weight:400;letter-spacing:0}

/* Anchor the project section heading against the patterned background. */
.work .section-head{padding:18px 22px;background:rgba(18,23,34,.84);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(189,198,211,.14);border-radius:12px}
.work .project-copy h3{font-family:var(--display);font-weight:400;letter-spacing:-.02em}
@media(max-width:700px){.work .section-head{padding:16px 17px}}

/* Full-width heading band sits directly between the project section rules. */
.work{padding-top:0}
.work .section-head{display:block;margin:0;padding:22px 20px;background:rgba(18,23,34,.84);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:0;border-radius:0}
.work .section-head h2{font-size:clamp(38px,4.5vw,50px);line-height:1.08}
@media(max-width:700px){.work .section-head{padding:18px 16px}.work .section-head h2{font-size:34px}}

/* Scroll controls and quick navigation drawer. */
.scroll-tools{position:fixed;right:24px;bottom:24px;z-index:10;display:flex;gap:10px;transition:opacity .18s ease,transform .18s ease}
.scroll-tools[hidden]{display:none}
.scroll-tool,.site-menu-close{font:12px var(--mono);color:var(--ink);background:rgba(18,23,34,.94);border:1px solid var(--line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);cursor:pointer}
.scroll-tool{display:flex;align-items:center;gap:8px;padding:12px 16px;border-radius:999px;box-shadow:0 8px 28px rgba(0,0,0,.24)}
.scroll-tool:hover,.site-menu-close:hover{border-color:var(--accent);color:var(--accent)}
.site-menu{position:fixed;inset:0 0 0 auto;margin:0;width:min(420px,88vw);height:100dvh;max-height:none;padding:30px 28px;background:rgba(18,23,34,.98);border:0;border-left:1px solid var(--line);color:var(--ink)}
.site-menu::backdrop{background:rgba(5,8,14,.68);backdrop-filter:blur(3px)}
.site-menu-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:30px}
.site-menu-head .eyebrow{color:var(--blue)}
.site-menu-close{width:40px;height:40px;border-radius:50%;font-size:24px;line-height:1}
.site-menu nav{display:grid;gap:0}
.site-menu nav a{padding:16px 2px;border-bottom:1px solid var(--line);font:500 20px/1.25 var(--display);letter-spacing:0;text-decoration:none;color:var(--ink)}
.site-menu nav a:hover{color:var(--accent)}
.site-menu nav a.site-menu-project{padding:11px 2px 11px 18px;font:14px/1.4 var(--sans);color:var(--muted)}
.site-menu nav a.site-menu-project:hover{color:var(--accent)}
@media(max-width:700px){.scroll-tools{right:16px;bottom:16px;gap:8px}.scroll-tool{padding:11px 13px}}

/* Build the familiar star-and-dot field at load, with occasional symbol swaps. */
body{position:relative;background-image:none}
.site-header,main,.site-footer{position:relative;z-index:2}
.generated-pattern{position:absolute;inset:0 auto auto 0;overflow:hidden;pointer-events:none;z-index:0}
.generated-pattern span{position:absolute;display:block;transform:translate(var(--dodge-x,0px),var(--dodge-y,0px));transition:transform .22s cubic-bezier(.2,.75,.3,1)}
.pattern-dot{width:10px;height:10px;border-radius:50%;background:rgba(133,120,242,.10)}
.pattern-dot::after{content:"";position:absolute;inset:2px;border-radius:50%;background:var(--bg)}
.pattern-star{width:28px;height:30px;background:rgba(133,120,242,.085);clip-path:polygon(50% 0,64% 35%,100% 50%,64% 65%,50% 100%,36% 65%,0 50%,36% 35%)}
.pattern-star::after{content:"";position:absolute;inset:5px;background:var(--bg);clip-path:inherit}
.pattern-symbol{width:28px;height:30px;background:var(--accent);opacity:.11;-webkit-mask-position:center;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;mask-position:center;mask-size:contain;mask-repeat:no-repeat}
.pattern-symbol[data-symbol="god"]{-webkit-mask-image:url("/assets/brand/symbols/god.svg");mask-image:url("/assets/brand/symbols/god.svg");transform:translate(var(--dodge-x,0px),var(--dodge-y,0px)) scaleX(1.15)}
.pattern-symbol[data-symbol="goddess"]{-webkit-mask-image:url("/assets/brand/symbols/goddess.svg");mask-image:url("/assets/brand/symbols/goddess.svg");-webkit-mask-size:100% 100%;mask-size:100% 100%;transform:translate(var(--dodge-x,0px),var(--dodge-y,0px)) scale(1.5)}
.pattern-symbol[data-symbol="triquetra"]{-webkit-mask-image:url("/assets/brand/symbols/triquetra.svg");mask-image:url("/assets/brand/symbols/triquetra.svg")}

/* Individually scattered stars slowly twinkle around every interactive target. */
.skitter-sparkle,.project-copy h3 a,.about-portrait{position:relative;isolation:isolate}
.sparkle-panel{position:relative;isolation:isolate}
.skitter-sparkle,.project-copy h3 a{display:inline-block}
.hover-sparkles{position:absolute;inset:-12px;pointer-events:none;overflow:visible;z-index:3}
.hover-sparkles .hover-sparkle{position:absolute;display:block;color:#F2D36F;font:400 var(--sparkle-size,14px)/1 var(--sans);opacity:0;transform:translate(-50%,-50%) scale(.25);text-shadow:0 0 8px rgba(242,211,111,.72);transition:opacity .4s ease-out;will-change:opacity,transform}
.sparkle-panel:hover .hover-sparkle,.skitter-sparkle:hover .hover-sparkle,.about-opening h1:hover .skitter-sparkle .hover-sparkle,.about-portrait:hover .hover-sparkle,.project-copy h3 a:hover .hover-sparkle{opacity:.85;animation:soft-drift var(--sparkle-drift-duration,6s) ease-in-out var(--sparkle-drift-delay,0s) infinite alternate}
.sparkle-panel:hover .hover-sparkle.twinkle,.skitter-sparkle:hover .hover-sparkle.twinkle,.about-opening h1:hover .skitter-sparkle .hover-sparkle.twinkle,.about-portrait:hover .hover-sparkle.twinkle,.project-copy h3 a:hover .hover-sparkle.twinkle{animation-name:soft-drift,slow-twinkle;animation-duration:var(--sparkle-drift-duration,6s),var(--sparkle-duration,7s);animation-timing-function:ease-in-out,ease-in-out;animation-delay:var(--sparkle-drift-delay,0s),var(--sparkle-delay,0s);animation-iteration-count:infinite,infinite;animation-direction:alternate,normal}
@keyframes soft-drift{from{transform:translate(-50%,-50%) scale(.92) rotate(-4deg)}to{transform:translate(calc(-50% + var(--sparkle-drift-x)),calc(-50% + var(--sparkle-drift-y))) scale(1.06) rotate(5deg)}}
@keyframes slow-twinkle{0%,100%{opacity:.85}28%{opacity:.12}58%{opacity:.9}82%{opacity:.25}}
@media(prefers-reduced-motion:reduce){.sparkle-panel:hover .hover-sparkle,.skitter-sparkle:hover .hover-sparkle,.about-opening h1:hover .skitter-sparkle .hover-sparkle,.about-portrait:hover .hover-sparkle,.project-copy h3 a:hover .hover-sparkle{animation:none;opacity:.85;transform:translate(-50%,-50%) scale(1)}}

/* Incense animation lives behind the page and occupies a reserved footer strip. */
.incense-canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.incense-smoke-canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:11}
.site-header{z-index:12}
.site-footer{height:166px;padding-top:13px;align-items:flex-start}
@media(max-width:700px){.site-footer{height:145px;padding-top:10px}}

/* Scroll-revealed antique cards */
.flip-card{position:relative;perspective:1400px;transform-style:preserve-3d}
.flip-card-inner{position:absolute;inset:0;display:block;transform-style:preserve-3d;transform:rotateY(0deg);transition:transform 1.25s cubic-bezier(.2,.72,.2,1);transition-delay:var(--flip-delay,0ms);will-change:transform}
.flip-card.is-revealed .flip-card-inner,.flip-card:focus-visible .flip-card-inner{transform:rotateY(180deg) rotateZ(var(--flip-tilt, .7deg)) translateX(var(--flip-shift, 2px))}
.flip-card-face{position:absolute;inset:0;display:block;overflow:hidden;border-radius:10px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flip-card-face img{display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
.about-tile.flip-card{grid-column:auto;aspect-ratio:948 / 1659;padding:0;overflow:visible;border:0;border-radius:10px;background:transparent}
.about-tile .flip-card-front img{object-fit:fill}
.about-tile .flip-card-back{transform:rotateY(180deg) rotateZ(-.5deg) translateX(-2px);background:url('/assets/cards/about-parchment-card.webp') center / 100% 100% no-repeat}
.about-tile-copy{height:100%;display:flex;flex-direction:column;justify-content:center;padding:clamp(20px,2.6vw,34px);color:#202735}
.about-tile .about-tile-copy .eyebrow{color:#202735;font-size:clamp(9px,1vw,11px)}
.about-tile .about-tile-copy h2{font-size:clamp(17px,1.8vw,22px);margin:12px 0 9px;color:#202735}
.about-tile .about-tile-copy p:not(.eyebrow){font-size:clamp(11px,1.13vw,13px);line-height:1.45;color:#202735;margin:0 0 10px}
.about-tile .about-tile-copy p:last-child{margin-bottom:0}
.project-flip-card{aspect-ratio:1200 / 686;overflow:visible;border:0;border-radius:10px;background:transparent;perspective:1300px}
.project-flip-card .flip-card-face{border:1px solid rgba(32,39,53,.35);border-radius:10px}
.project-flip-card .flip-card-front img{object-fit:fill}
.project-flip-card .flip-card-back{transform:rotateY(180deg) rotateZ(-.5deg) translateX(-2px)}
@media(max-width:900px){.about-tile:first-child{grid-column:auto}}
@media(prefers-reduced-motion:reduce){.flip-card-inner{transition:none;will-change:auto}}