/* The name uses the monospaced scramble treatment from the supplied component. */
.site-header .wordmark { font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; }
.site-header .wordmark > span:last-child,.site-header .wordmark span.special-text,.site-header .wordmark .special-text > span { font:500 16px/1.2 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; letter-spacing:-.5px; color:var(--header-text); }
.special-text { display:inline-grid; position:relative; white-space:pre; font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; }
.special-text > span { grid-area:1/1; font:inherit; letter-spacing:inherit; }
.special-text-measure { visibility:hidden; }

/* Separate sections with space. Keep borders that identify controls and cards. */
.page main > section,.page .about,.page .stack-section,.page .credentials,.page .work-section,.page .writeups,.page .journal,.page .contact,.page .page-intro,.hero-foot,.site-footer,.home-index,.home-index > a,.credentials-column,.credential-source,.stack-grid,.stack-group + .stack-group,.contact-aside,.contact-aside > a,.page-intro-index,.page-intro-index > a { border:0; }
main > section::before,main > section::after { border:0; }
.stack-grid::before,.journal .note::after,.writeups .note::after { display:none; }
.journal .note,.journal .note:last-child,.writeups .note,.writeups .note:last-child,.report-preview-list > span { border-top:0; border-bottom:0; }
main > section > hr { display:none; }

.site-footer { --footer-ink:#bbb9c9; --footer-surface:rgb(255 255 255 / .055); --footer-border:rgb(255 255 255 / .085); --footer-hover:rgb(255 255 255 / .11); display:flex; flex-direction:column; justify-content:center; align-items:center; gap:22px; padding:36px 0 42px; }
:root[data-theme="light"] .site-footer { --footer-ink:#625b72; --footer-surface:rgb(255 255 255 / .48); --footer-border:rgb(62 44 89 / .11); --footer-hover:rgb(255 255 255 / .8); }
.site-footer .footer-socials { display:flex; justify-content:center; align-items:center; gap:24px; margin:0; padding:0; }
.site-footer .footer-social-link { display:grid; place-items:center; width:56px; height:56px; border:1px solid var(--footer-border); border-radius:13px; background:var(--footer-surface); color:var(--footer-ink); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); transition:transform .2s ease,background-color .2s ease,color .2s ease; }
.site-footer .footer-social-link:hover,.site-footer .footer-social-link:focus-visible { background:var(--footer-hover); color:var(--text); transform:translateY(-3px); }
.footer-social-link:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }
.footer-social-link img { display:block; width:27px; height:27px; }
.footer-social-icon { display:block; width:27px; height:27px; background:currentColor; -webkit-mask:var(--footer-icon) center/contain no-repeat; mask:var(--footer-icon) center/contain no-repeat; }
.site-footer .footer-meta { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px 26px; color:var(--muted); font-size:11px; line-height:1.6; }
.site-footer .footer-meta a { color:var(--muted); transition:color .2s ease; }
.site-footer .footer-meta a:hover { color:var(--text); }
@media(max-width:720px) { .site-header .wordmark > span:last-child,.site-header .wordmark span.special-text,.site-header .wordmark .special-text > span { font-size:14px; }.site-footer { padding:30px 0 34px; gap:20px; }.site-footer .footer-socials { gap:20px; } }
@media(max-width:480px) { .site-footer .footer-socials { gap:10px; }.site-footer .footer-social-link { width:44px; height:44px; border-radius:11px; }.site-footer .footer-social-icon { width:24px; height:24px; } }
@media(prefers-reduced-motion:reduce) { .site-footer .footer-social-link { transition:none; }.site-footer .footer-social-link:hover,.site-footer .footer-social-link:focus-visible { transform:none; } }

/* Give the introduction a deliberate two-line shape and quieter portrait frame. */
:root { --motion-ease:cubic-bezier(.22,1,.36,1); }
.page-about .page-intro { padding-top:64px; padding-bottom:36px; }
.page-about .page-intro h1 { font-size:clamp(58px,7vw,98px); line-height:1.04; letter-spacing:-4px; animation:none; }
.intro-line { display:block; animation:intro-settle .65s var(--motion-ease) both; }
.intro-line + .intro-line { animation-delay:.08s; }
.page-home .hero h1 { animation:none; }
.page-about .page-intro h1 em { display:block; font-size:1.12em; }
.page-intro p { text-wrap:pretty; }
.page-about .page-intro p { max-width:480px; font-size:16px; }
.page-about .about { margin-top:0; padding-top:48px; }
.profile-visual {
  --frame-edge:rgb(245 235 255 / .7);
  --frame-accent:rgb(210 186 255 / .42);
  --frame-shade:#30263f;
  aspect-ratio:auto; padding:6px; border:1px solid transparent; border-radius:34px;
  background:linear-gradient(145deg,#645471,var(--frame-shade) 48%,#44334f) padding-box,
    linear-gradient(145deg,var(--frame-edge),var(--frame-accent) 34%,rgb(255 255 255 / .12) 66%,var(--frame-edge)) border-box;
  box-shadow:0 12px 30px rgb(12 5 24 / .24),inset 0 1px 0 rgb(255 255 255 / .22);
  transition:transform .42s var(--motion-ease),box-shadow .22s ease;
}
.profile-visual img { height:auto; aspect-ratio:770/1010; border-radius:27px; }
.profile-visual::before {
  inset:0; z-index:2; border-radius:inherit; padding:2px;
  background:radial-gradient(ellipse 190px 230px at var(--light-x) var(--light-y),rgb(245 235 255 / .85),rgb(210 186 255 / .28) 45%,transparent 75%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .25s ease;
}
.profile-visual::after {
  inset:6px; width:auto; border-radius:27px; border:1px solid rgb(255 255 255 / .24);
  background:none; transform:none; opacity:1; animation:none; z-index:4;
}
.profile-portrait.is-visible .profile-visual::after { animation:none; }
.profile-visual.is-active { border:1px solid transparent; box-shadow:0 16px 34px rgb(12 5 24 / .28),inset 0 1px 0 rgb(255 255 255 / .22); }
:root[data-theme="light"] .profile-visual {
  --frame-edge:rgb(255 255 255 / .95); --frame-accent:rgb(212 193 233 / .65); --frame-shade:#e8def1;
  background:linear-gradient(145deg,#fff,var(--frame-shade) 48%,#f1eaf7) padding-box,
    linear-gradient(145deg,var(--frame-edge),var(--frame-accent) 34%,rgb(255 255 255 / .35) 66%,var(--frame-edge)) border-box;
  box-shadow:0 12px 28px rgb(55 31 79 / .13),inset 0 1px 0 #fff;
}
:root[data-theme="light"] .profile-visual::before { background:radial-gradient(ellipse 190px 230px at var(--light-x) var(--light-y),rgb(105 66 156 / .8),rgb(105 66 156 / .23) 45%,transparent 75%); }
.profile-card-copy { position:absolute; inset:auto 6px 6px; z-index:3; isolation:isolate; padding:60px 22px 25px; border-radius:0 0 27px 27px; overflow:hidden; background:linear-gradient(180deg,transparent,rgb(28 20 43 / .72) 42%,rgb(28 20 43 / .96)); }
.profile-card-copy::before { content:""; position:absolute; inset:0; z-index:-1; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); -webkit-mask-image:linear-gradient(180deg,transparent,#000 45%); mask-image:linear-gradient(180deg,transparent,#000 45%); pointer-events:none; }
.profile-card-copy h3 { margin:0 0 8px; color:#f5f2ff; font:600 27px/1.2 -apple-system,BlinkMacSystemFont,"Helvetica Neue",Inter,Arial,sans-serif; letter-spacing:-.8px; }
.page-about .profile-card-copy p { margin:0; max-width:28ch; color:#e2d9ee; font-size:14px; line-height:1.55; letter-spacing:0; text-wrap:pretty; }
:root[data-theme="light"] .profile-card-copy { background:linear-gradient(180deg,transparent,rgb(241 234 248 / .8) 42%,rgb(241 234 248 / .98)); }
:root[data-theme="light"] .profile-card-copy h3 { color:#241b38; }
:root[data-theme="light"] .profile-card-copy p { color:#514261; }
@media(max-width:850px) and (min-width:601px) { .profile-card-copy { padding:48px 15px 20px; }.profile-card-copy h3 { font-size:23px; }.page-about .profile-card-copy p { font-size:13px; } }

/* A small, sticky section directory keeps the longer About page easy to browse. */
.about-directory { position:sticky; top:16px; z-index:12; isolation:isolate; display:flex; align-items:center; gap:2px; width:max-content; max-width:calc(100% - 40px); margin:0 auto 12px; padding:4px; border-radius:12px; background:color-mix(in srgb,var(--bg) 88%,transparent); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
.about-directory > span:first-child { padding:0 16px 0 12px; font-size:11px; color:var(--muted); }
.about-directory a { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; min-height:44px; padding:8px 16px 12px; font-size:12px; color:var(--muted); border-radius:8px; transition:color .18s ease,background-color .18s ease; }
.about-directory a::after { display:none; }
.about-directory a:hover { background:color-mix(in srgb,var(--text) 5%,transparent); color:var(--text); }
.about-directory a[aria-current="location"] { color:var(--accent); }
.about-directory a:focus-visible { outline-offset:1px; }
.directory-marker { position:absolute; left:0; bottom:8px; width:4px; height:4px; border-radius:50%; background:var(--accent); opacity:0; transition:transform .24s var(--motion-ease),opacity .18s ease; pointer-events:none; }
.about-directory[data-ready="true"] .directory-marker { opacity:1; }
.page-about main > section[id] { scroll-margin-top:44px; }

/* Keep real previews visible when an action appears. The card itself stays put. */
.glass-selected,.glass-blog-card > div { transition:background-color .2s ease,box-shadow .2s ease; }
.glass-selected:hover,.glass-selected:focus-visible,.glass-blog-card > div:hover,.glass-blog-card:focus-within > div { border-color:transparent; box-shadow:0 10px 24px rgb(0 0 0 / .15); background:color-mix(in srgb,var(--surface) 88%,transparent); }
.glass-selected .project-open { border-radius:8px; transition:opacity .18s ease,transform .22s var(--motion-ease); }
.glass-selected .project-image img { transition:transform .5s var(--motion-ease); }
.glass-selected:hover .project-image img,.glass-selected:focus-visible .project-image img { transform:scale(1.025); }
.home-index { gap:28px; }
.home-index > a,.home-index > a + a { padding:0; }
.home-index-visual { border:0; border-radius:12px; }
.home-index-link { border:0; }
.home-index h2 { font-size:clamp(27px,2.6vw,36px); }
.home-index > a:hover .home-index-visual img,.home-index > a:focus-visible .home-index-visual img { transform:scale(1.025); }
#more .blog-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
@media(max-width:600px) { #more .blog-grid { grid-template-columns:1fr; } }
@keyframes intro-settle { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@media(max-width:1000px) { .page-about .page-intro h1 { font-size:clamp(56px,8vw,78px); letter-spacing:-3px; }.about-directory > span:first-child { display:none; } }
@media(max-width:720px) { .page-about .page-intro { padding-top:44px; padding-bottom:24px; gap:12px; }.page-about .page-intro h1 { font-size:clamp(50px,11vw,72px); letter-spacing:-2.4px; }.page-about .page-intro p { font-size:15px; }.about-directory { top:10px; width:calc(100% - 40px); }.about-directory a { flex:1; padding:8px 6px 12px; font-size:11px; }.page-about .about { padding-top:30px; }.home-index { gap:30px; }.home-index > a,.home-index > a + a { padding:0; } }
@media(prefers-reduced-motion:reduce) { .intro-line { animation:none; }.directory-marker { transition:none; }.glass-selected:hover .project-image img,.glass-selected:focus-visible .project-image img { transform:none; } }