@font-face{font-family:OverusedGrotesk;src:url('assets/overused-grotesk/OverusedGrotesk-Light.woff2') format('woff2');font-weight:300;font-display:swap}@font-face{font-family:OverusedGrotesk;src:url('assets/overused-grotesk/OverusedGrotesk-SemiBold.woff2') format('woff2');font-weight:600;font-display:swap}@font-face{font-family:OverusedGrotesk;src:url('assets/overused-grotesk/OverusedGrotesk-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
:root{--blue:#1f61a9;--paper:#f9f6f1;--pink:#eeb5bc}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--paper);color:var(--blue);font:300 20px/1.2 OverusedGrotesk,Arial,sans-serif}p,h1,h2,h3,dl,dd{margin:0}a{color:inherit;text-decoration:none}a[href]{cursor:pointer}a[href]:hover{text-decoration:underline;text-underline-offset:5px}a:focus-visible{outline:2px solid var(--blue);outline-offset:6px}img{display:block}main{max-width:1440px;margin:auto;overflow:hidden}.sr,.skip:not(:focus){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.skip:focus{position:fixed;z-index:20;background:var(--paper);padding:15px}.landing,.textured{position:relative;isolation:isolate}.landing:before,.textured:before{content:'';position:absolute;inset:0;background:url('assets/imgFooter.avif') center/cover;opacity:.2;z-index:-1;pointer-events:none}.landing{height:1080px}nav{position:absolute;top:32px;left:5.4%;right:5.4%;display:flex;justify-content:space-between;font-weight:600;z-index:4}nav>div{display:flex;gap:69px}.star{position:absolute;pointer-events:none}.back{left:639px;top:-41px;width:561px;height:726px}.front{left:220px;top:118px;width:758px;height:964px;z-index:2}.portfolio{position:absolute;left:0;top:220px;width:100%;height:248px;z-index:1}.vector-art{display:block;transform-origin:top left}.portfolio img{width:1431.59px;height:247.81px}.scroll{position:absolute;top:827px;left:101px;z-index:3}.scroll:after{content:'';position:absolute;left:24px;top:34px;width:1px;height:219px;background:url('assets/imgLine4.svg');background-size:1px 219px;z-index:-1}.scroll>span{position:absolute;top:95px;left:49px;letter-spacing:.6px}.identity{position:absolute;left:859px;top:786px;width:504px;z-index:3;text-align:right}.name{width:452px;height:auto;margin-left:auto}.nickname{letter-spacing:.6px;margin-top:0}.identity .rule{margin-top:39px;margin-bottom:27px}.rule{height:1px;overflow:visible}.rule img{max-width:none}.location{display:flex;gap:13px;justify-content:flex-end;align-items:center;font-weight:600}.location>span:nth-child(2){font-size:24px;font-weight:300}.about{height:546px}.section-content{margin-left:203px;width:1039px;padding-top:65px}.about .section-content{display:grid;grid-template-columns:440px 532px;gap:71px}h2{font-size:32px;line-height:1}h2>img{max-width:100%;height:auto}.about-title h2 img{width:404px}.hello{margin-top:29px}.bio{padding-top:73px;letter-spacing:.6px}.bio>p{line-height:1.2;min-height:95px}.bio>.rule{margin-top:5px}.bio dl{margin-top:32px}.bio dl>div{display:grid;grid-template-columns:149px 1fr;margin-bottom:29px;align-items:start}.bio dt{font-weight:600;letter-spacing:0}.bio dd{display:flex;align-items:center;gap:12px;white-space:nowrap}.bio dl>div:nth-child(2) dd{gap:46px}.tools{justify-content:space-between;width:323.5px}.tools span{width:64px;height:64px;border-radius:10px;background:var(--blue);color:white;display:grid;place-items:center;font-size:40px;font-weight:700}.rail{position:absolute;left:125px;top:0;width:1px}.rail img{transform:rotate(90deg);transform-origin:0 0}.work{height:1007px}.work h2 img{width:auto;height:38px}.projects{margin-top:54px}.project-body{display:flex;justify-content:space-between;align-items:center;min-height:152px;padding:39px 0}.project:nth-child(2) .project-body{min-height:176px}.project h3{display:flex;align-items:center;gap:20px;font-size:32px;font-weight:600;letter-spacing:.96px;line-height:1.15}.project p{font-size:20px;line-height:1.2;letter-spacing:.6px;max-width:653px;margin-top:10px}.project:nth-child(1) p{max-width:491px}.project:nth-child(2) p{max-width:585px}.project:nth-child(3) p{max-width:531px}.project:nth-child(4) p{max-width:632px}.tag{font-size:20px;font-weight:300;letter-spacing:.6px;border-radius:3px;background:rgba(227,204,204,.7);padding:1px 8px 2px;white-space:nowrap}.project-icon{display:flex;gap:10px;align-items:center;flex-shrink:0}.tablet{width:80px;height:64px;position:relative}.tablet img{position:absolute;top:-8px;left:8px;transform:rotate(-90deg)}.card{position:relative;width:41px;height:64px;border:2.5px solid var(--blue);border-radius:2px;display:block}.card b{position:absolute;font:700 8px Arial;top:1.5px;left:2.5px}.card b:last-child{top:47.5px;left:28.5px}.card img{position:absolute;left:9.5px;top:16.5px}footer{height:249px}.contact-content{padding:75px 0 0;margin:0 207px;display:flex;justify-content:space-between;align-items:center}.contact-content h2{display:flex;align-items:center;gap:22px}.contact-content h2>img:first-child{width:auto;height:38px}.socials{display:flex;align-items:center;justify-content:space-between;width:296.8px}.linkedin{display:block;width:41px;height:41px;border-radius:2px;background:var(--blue);color:var(--paper);font-weight:700;font-size:28px;text-align:center;padding-top:3px}.resume{width:36px;height:49px;display:block;background:var(--blue);border-radius:2px;position:relative}.resume>img{position:absolute;left:4px;top:8px}.resume i{position:absolute;height:3px;border-radius:2px;background:var(--paper);left:18px;top:11px;width:14px}.resume i:nth-of-type(2){top:18px}.resume i:nth-of-type(3){top:29px;left:4px;width:28px}.resume i:nth-of-type(4){top:36px;left:4px;width:28px}.copyright{position:absolute;bottom:0;width:100%;height:75px;background:#e3cccc;text-align:right;padding:25px 7.3%;letter-spacing:.6px}[aria-disabled=true]{cursor:default}
@media(min-width:1024px){main{width:1440px;zoom:var(--desktop-scale,1)}}
@media(max-width:1023px){html{scroll-padding-top:20px}body{font-size:16px}.landing{height:780px}nav{left:6%;right:6%;top:25px;font-size:12px}nav>div{gap:18px}nav>a{display:none}.portfolio{top:150px;height:80px}.vector-art{transform:scale(var(--title-scale,.28))}.back{width:280.5px;height:363px;left:37%;top:58px}.front{width:454.8px;height:578.4px;left:-6%;top:146px}.identity{top:580px;left:auto;right:7%;width:75%;max-width:380px}.name{width:85%}.nickname{font-size:16px}.identity .rule{margin:23px 0 20px;overflow:hidden}.identity .rule img{transform:scaleX(.7);transform-origin:left}.location{font-size:13px;gap:9px}.scroll{top:662px;left:5%;transform:scale(.65);transform-origin:top left}.scroll>span{display:none}.scroll:after{height:125px}.about{height:auto;padding-bottom:75px}.section-content{margin:0 7% 0 14%;width:auto;padding-top:40px}.about .section-content{display:block}.about-title h2 img{width:303px;max-width:100%}.hello{margin-top:17px;transform:scale(.8);transform-origin:left top}.bio{padding-top:30px;letter-spacing:.25px}.bio>p{min-height:0;line-height:1.5}.bio>.rule{margin-top:20px;overflow:hidden}.bio dl{margin-top:25px}.bio dl>div{grid-template-columns:90px 1fr;gap:5px;margin-bottom:23px;font-size:14px}.bio dd{flex-wrap:wrap;white-space:normal;gap:8px}.bio dd>img:not(.tools>img){transform:scale(.7)}.bio dl>div:nth-child(2) dd{gap:9px}.tools{width:100%;max-width:240px;gap:8px!important}.tools>img{width:25px;height:auto}.tools>span{width:40px;height:40px;font-size:26px;border-radius:6px}.rail{left:8.7%;height:100%;background:var(--blue);opacity:.55}.rail img{display:none}.work{height:auto;padding-bottom:65px}.work h2 img{height:26px;max-width:100%;object-fit:contain;object-position:left}.projects{margin-top:35px}.project{position:relative}.project>.rule{overflow:hidden}.project .project-body{min-height:155px!important;padding:25px 0;gap:14px}.project h3{gap:9px;font-size:23px;flex-wrap:wrap;line-height:1.25}.project h3>img{transform:scale(.65)}.tag{font-size:13px;padding:2px 5px}.project p{font-size:15px;line-height:1.45;letter-spacing:.2px;margin-top:8px}.project-icon{position:absolute;right:0;bottom:22px;transform:scale(.45);transform-origin:right bottom;opacity:.8}.project-body>div:first-child{padding-bottom:32px}.contact-content{margin:0 8% 0 14%;padding-top:35px;display:block}.contact-content h2{gap:14px}.contact-content h2>img:first-child{height:26px}.contact-content h2>img:last-child{transform:scale(.6);transform-origin:left;width:124px;margin-right:-49px}.socials{width:220px;margin-top:30px;transform:scale(.8);transform-origin:left top}footer{height:230px}.copyright{height:55px;padding:18px 8%;font-size:15px}}
.about-title h2{height:38px;padding-top:7px}.about-title h2 img{width:204px;height:24px}.work h2{height:38px;padding-top:7px}.work h2 img{width:332px;height:24px}.contact-content h2>img:first-child{width:296px;height:24px}.portfolio{top:185px}.name{width:447px;height:88px}.hello{margin-top:25px}
@media(max-width:1023px){.portfolio{top:150px}.name{width:85%;height:auto}.about-title h2 img{width:173.4px;height:20.4px}.work h2 img{width:282.2px;height:20.4px;max-width:100%;object-fit:contain}.contact-content h2>img:first-child{width:222px;height:18px}.contact-content h2>img:last-child{display:none}.hello{margin-top:17px}}
/* Source image has a true alpha channel; preserve Figma's 20% image fill. */
.back{opacity:.2}
@font-face{font-family:Magiel;src:url('assets/magiel-black.ttf') format('truetype');font-weight:900;font-display:swap}
/* One continuous rule avoids seams and inconsistent rasterization at joins. */
main{position:relative;--rail-x:125px}
main::after{content:'';position:absolute;left:var(--rail-x);top:861px;bottom:var(--rail-bottom,314px);width:1px;background:var(--blue);pointer-events:none;z-index:4}
.scroll{left:calc(var(--rail-x) - 24.65px);cursor:default}
.scroll::after{display:none}
.portfolio{font-family:Magiel,sans-serif;font-weight:900;font-size:301px;line-height:1.2;color:rgba(238,181,188,.95);top:118px;height:auto;white-space:nowrap;overflow:visible}
.name{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;font-size:96px;line-height:1.2;width:auto;height:auto;white-space:nowrap}
.hello{font-family:Magiel,sans-serif;font-weight:900;font-size:64px;line-height:1.2;color:var(--pink);margin-top:4px;transform:none}
.about-title h2,.work h2,.contact-content h2{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;font-size:32px;line-height:1.2;padding-top:0;height:auto}
.contact-content h2>img{width:124px!important;height:15px!important}
@media(max-width:1023px){main{--rail-x:8.7%}main::after{top:684px;bottom:295px}.scroll{left:calc(var(--rail-x) - 16.0225px)}.portfolio{top:128px;font-size:20.9vw;line-height:1.2}.name{font-size:clamp(30px,7.6vw,58px);width:auto;line-height:1.2}.hello{font-size:51.2px;margin-top:4px}.about-title h2,.work h2{font-size:27.2px}.contact-content h2{font-size:24px}.contact-content h2>img{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Preserve the source design's grain on editable Magiel text. */
.effect-defs{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.portfolio{filter:url(#rough-type)}.hello{filter:url(#soft-rough-type)}
/* This export already includes the shader and 20% fill; do not fade twice.
   Figma clips the original node's first 41px at the landing frame boundary. */
.back{top:0;height:682px;opacity:1;mix-blend-mode:darken}
.language-button{position:absolute;right:-7px;top:-37px;width:44px;height:44px;display:grid;place-items:center;border:0;padding:0;background:transparent;color:var(--blue);cursor:pointer}
.language-button img{width:29px;height:29px}
.name.is-chinese{font-family:"Microsoft YaHei","PingFang SC","Noto Sans CJK SC",sans-serif;font-weight:700;letter-spacing:.01em}
.glass-star>img{width:100%;height:100%;opacity:.92}
.language-button:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:3px}
@media(max-width:1023px){.back{top:78.5px;height:341px}.language-button{right:-7px;top:-44px}}

/* Keep the 1440px composition fluid on desktop; reflow before text gets tiny. */
@media(min-width:1024px){main{max-width:none}}
@media(max-width:1023px){
  main{width:100%;max-width:none}
  .portfolio{font-size:19.8vw}
  .identity{width:79%}
  .location{flex-wrap:wrap;row-gap:4px}
  .rule{overflow:hidden}
  .rule img{width:100%;height:1px}
  .identity .rule img{transform:none}
  .bio dl>div{grid-template-columns:minmax(65px,90px) minmax(0,1fr)}
  .tools>span{flex-shrink:0}
  .work h2{font-size:clamp(21px,4vw,27.2px)}
}
@media(min-width:600px) and (max-width:1023px){
  .landing{height:880px}
  nav{font-size:16px}nav>div{gap:32px}nav>a{display:block}
  .front{width:606px;height:771px;left:2%;top:90px}
  .back{width:365px;height:auto;left:45%;top:45px}
  .identity{top:665px;max-width:460px}
  .name{font-size:58px}
  .scroll{top:752px}
  main::after{top:774px}
  .project h3{font-size:27px}
  .project p{font-size:18px}
}
@media(max-width:359px){
  nav>div{gap:14px}
  .bio dl>div{grid-template-columns:65px minmax(0,1fr)}
  .tools{gap:5px!important}.tools>span{width:34px;height:34px;font-size:23px}
  .contact-content h2{font-size:21px}
}

@media(max-width:599px){.front{width:min(454.8px,116vw);height:auto}.back{width:min(280.5px,72vw);height:auto}}


/* Give the final project line and footer heading their own breathing room. */
@media(min-width:1024px){.work{height:1087px}}
@media(max-width:1023px){.work{padding-bottom:145px}}

/* Align the rail's 1px centre with the SVG's actual lower tip (x=24.5298). */
.scroll{left:calc(var(--rail-x) - 24.0298px)}
@media(max-width:1023px){
  .scroll{left:calc(var(--rail-x) - 15.44437px)}
  main::after{bottom:var(--rail-bottom,295px)}
}

/* Project previews expand in document flow so later projects and the footer move down. */
.work{height:auto;min-height:1087px;padding-bottom:110px}
.agenda-trigger{appearance:none;border:0;background:none;padding:0;color:inherit;font:inherit;letter-spacing:inherit;line-height:inherit;cursor:pointer}
.agenda-trigger{transition:color 220ms ease}
.agenda-trigger[href]:hover{color:#e3cccc;text-decoration:none}
.agenda-trigger:focus-visible{outline:2px solid var(--blue);outline-offset:5px}
.project-preview{display:grid;grid-template-rows:0fr;opacity:0;visibility:hidden;transition:grid-template-rows 420ms cubic-bezier(.22,1,.36,1),opacity 250ms ease,visibility 0s linear 420ms}
.project-preview-inner{min-height:0;overflow:hidden}
.agenda-gallery,.tidebound-gallery,.xds-gallery{display:grid;gap:24px;padding-bottom:40px;transform:translateY(-16px);transition:transform 420ms cubic-bezier(.22,1,.36,1)}
.agenda-gallery{grid-template-columns:minmax(0,625fr) minmax(0,370fr)}
.tidebound-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
.xds-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
.agenda-gallery img,.tidebound-gallery img,.xds-gallery img{display:block;width:100%;min-width:0;height:auto;object-fit:cover}
.tidebound-gallery img{aspect-ratio:3/2}
.xds-gallery img{aspect-ratio:3/2}
.xds-gallery img:first-child{object-position:center center}
.xds-mockup-crop{aspect-ratio:3/2;overflow:hidden}
.xds-mockup-crop img{width:100%;height:100%;object-fit:cover;transform:scale(1.25)}
.yami-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;padding-bottom:18px;transform:translateY(-16px);transition:transform 420ms cubic-bezier(.22,1,.36,1)}
.yami-gallery img{display:block;width:100%;min-width:0;height:auto;aspect-ratio:3/2;object-fit:cover}
.yami-gallery img:first-child{object-position:center 68%}
.festal-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;padding-bottom:18px;transform:translateY(-16px);transition:transform 420ms cubic-bezier(.22,1,.36,1)}
.festal-gallery img{display:block;width:100%;min-width:0;height:auto;aspect-ratio:3/2;object-fit:cover}
.agenda-gallery img:first-child{aspect-ratio:3209/2186}
.agenda-gallery img:last-child{aspect-ratio:370/426}
.preview-project.is-open .project-preview{grid-template-rows:1fr;opacity:1;visibility:visible;transition:grid-template-rows 420ms cubic-bezier(.22,1,.36,1),opacity 300ms ease,visibility 0s}
.preview-project.is-open .agenda-gallery,.preview-project.is-open .tidebound-gallery,.preview-project.is-open .xds-gallery{transform:translateY(0)}
.preview-project.is-open .yami-gallery{transform:translateY(0)}
.preview-project.is-open .festal-gallery{transform:translateY(0)}
@media(max-width:1023px){.work{min-height:0;padding-bottom:145px}.agenda-gallery,.tidebound-gallery,.xds-gallery{gap:16px;padding-bottom:28px}}
@media(max-width:599px){.agenda-gallery,.tidebound-gallery,.xds-gallery{grid-template-columns:minmax(0,1fr)}.agenda-gallery img:last-child{aspect-ratio:4/3}}
@media(max-width:1023px){.yami-gallery{gap:16px;padding-bottom:16px}}
@media(max-width:599px){.yami-gallery{grid-template-columns:minmax(0,1fr)}}
@media(max-width:1023px){.festal-gallery{gap:16px;padding-bottom:16px}}
@media(max-width:599px){.festal-gallery{grid-template-columns:minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){.festal-gallery{transition:none;transform:none}}
@media(prefers-reduced-motion:reduce){.yami-gallery{transition:none;transform:none}}
@media(prefers-reduced-motion:reduce){.project-preview,.agenda-gallery,.tidebound-gallery,.xds-gallery,.preview-project.is-open .project-preview{transition:none}.agenda-gallery,.tidebound-gallery,.xds-gallery{transform:none}}

/* Keep every project icon on the same right edge as its divider. */
.project>.rule img{width:100%;height:1px}
@media(min-width:1024px){.project>.rule img{width:1039px}.project:first-child>.rule:first-child img{height:.8px}}
/* Match the last divider's perceived stroke to the other project hairlines. */
.festal-project>.rule:last-child img{height:.8px}
.festal-project>.rule:first-child img{height:.8px}
.xds-project>.rule:first-child img{height:.8px}
/* Restore the original left edge while keeping the right edge at the landing location. */
@media(min-width:1024px){
  main{--content-left:calc((1440px - var(--reading-width,1039px))/2);--content-width:calc(1363px - var(--content-left))}
  .section-content{width:var(--content-width);margin-left:var(--content-left)}
  .about .section-content{grid-template-columns:minmax(0,1fr) 489.44px;gap:6.8%}
  .project>.rule img{width:100%}
  .contact-content,.contact-reveal{margin-left:var(--content-left);margin-right:77px}
  .contact-reveal{width:var(--content-width)}
  footer#contact .copyright{padding-right:77px}
}
@media(max-width:1023px){
  /* The expanded preview must not become the icon's positioning context. */
  .preview-project .project-body{position:relative}
  .preview-project .project-icon{top:auto;bottom:22px;transform-origin:right bottom}
}
.agenda-gallery,.tidebound-gallery,.xds-gallery{padding-bottom:18px}
@media(max-width:1023px){.agenda-gallery,.tidebound-gallery,.xds-gallery{padding-bottom:16px}}
.agenda-case-link{display:flex;align-items:center;justify-content:space-between;border:0;padding:0 0 30px;font-size:18px;font-weight:600;letter-spacing:.05em}
.agenda-case-link[href]:hover{text-decoration:none}
.agenda-case-link:hover span:first-child{text-decoration:underline;text-underline-offset:5px}
.agenda-case-link span:last-child{font-size:25px;line-height:1}
@media(prefers-reduced-motion:reduce){.agenda-trigger{transition:none}}

/* Let descriptions use the space gained by extending the project rows. */
@media(min-width:1024px){
  .project-body>div:first-child{flex:1 1 auto;min-width:0;margin-right:24px}
  .projects .project p{max-width:100%}
}

/* Leave a longer visual pause after the landing composition before About Me. */
@media(min-width:1024px){.landing{height:1180px}}
@media(min-width:600px) and (max-width:1023px){.landing{height:960px}}
@media(max-width:599px){.landing{height:850px}}

/* Contact options unfold inside the footer, keeping following content in flow. */
footer#contact{height:auto;min-height:249px;display:flex;flex-direction:column}
footer#contact .copyright{position:relative;bottom:auto;flex:none;margin-top:auto}
footer#contact .copyright{font-size:16px}
.contact-content{flex:none}
.contact-toggle{appearance:none;border:0;padding:0;background:transparent;color:var(--blue);font:inherit;cursor:pointer;position:relative;transition:transform 260ms ease,filter 260ms ease}
.contact-toggle:hover,.contact-toggle[aria-expanded="true"]{transform:translateY(-4px);filter:drop-shadow(0 5px 0 rgba(238,181,188,.65))}
.contact-toggle:focus-visible{outline:2px solid var(--blue);outline-offset:7px}
.contact-toggle.linkedin{border:0;width:41px;height:41px;background:var(--blue);color:var(--paper);font-family:OverusedGrotesk,Arial,sans-serif;font-size:28px;font-weight:700;line-height:normal;text-align:left;padding:3px 0 0 9px}
.contact-toggle.resume{border:0;background:var(--blue)}
.contact-reveal{width:calc(100% - 414px);margin:0 207px;display:grid;grid-template-rows:0fr;opacity:0;visibility:hidden;transition:grid-template-rows 430ms cubic-bezier(.22,1,.36,1),opacity 270ms ease,visibility 0s linear 430ms}
.contact-reveal.is-open{grid-template-rows:1fr;opacity:1;visibility:visible;transition:grid-template-rows 430ms cubic-bezier(.22,1,.36,1),opacity 270ms ease,visibility 0s}
.contact-reveal-inner{min-height:0;overflow:hidden}
.contact-detail{display:grid;grid-template-columns:210px minmax(0,1fr);column-gap:24px;border-top:1px solid var(--blue);margin-top:49px;padding:40px 0 43px;align-items:start}
.contact-detail[hidden]{display:none}
.contact-index{font-size:15px;font-weight:600;letter-spacing:.04em;padding-top:9px}
.contact-value{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:clamp(25px,2.7vw,39px);font-weight:700;line-height:1.2;letter-spacing:-.025em;overflow-wrap:anywhere}
.contact-value span{display:inline-block;margin-left:10px;color:var(--pink);font-family:OverusedGrotesk,Arial,sans-serif;font-weight:300;transition:transform 240ms ease}
.email-copy{appearance:none;border:0;padding:0;background:transparent;color:var(--blue);text-align:left;cursor:pointer}
.email-copy .copy-label{font-size:13px;font-weight:600;letter-spacing:.04em;vertical-align:middle}
.email-copy:hover{color:var(--pink)}
.email-copy:focus-visible{outline:2px solid var(--blue);outline-offset:5px}
.contact-value[href]:hover{text-decoration:none;color:var(--pink)}
.contact-value[href]:hover span{transform:translate(3px,-3px)}
.resume-download[href]:hover span{transform:translateY(3px)}
.contact-detail p{grid-column:2;margin-top:8px;font-size:16px;letter-spacing:.02em}
@media(max-width:1023px){
  footer#contact{min-height:230px}
  .contact-reveal{width:auto;margin:0 8% 0 14%}
  .contact-detail{grid-template-columns:120px minmax(0,1fr);column-gap:14px;margin-top:31px;padding:30px 0 32px}
  .contact-value{font-size:clamp(22px,3.6vw,34px)}
}
@media(max-width:599px){
  .contact-reveal{margin-right:7%}
  .contact-detail{grid-template-columns:1fr;row-gap:10px}
  .contact-index{padding-top:0}
  .contact-value{font-size:clamp(21px,6vw,30px)}
  .contact-detail p{grid-column:1;margin-top:0;font-size:14px}
}
@media(prefers-reduced-motion:reduce){.contact-toggle,.contact-reveal,.contact-reveal.is-open,.contact-value span{transition:none}}

/* Keep the landing stars on compositor-friendly transforms and stop them offscreen. */
@keyframes star-float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-12px,0)}}
@media(prefers-reduced-motion:no-preference){
  .landing.is-visible .star{animation:star-float 8s ease-in-out infinite}
  .landing.is-visible .star.back{animation-delay:-4s;animation-duration:10s}
}
@media(min-width:1024px){
  .about .bio{width:532px;padding-top:0;transform:scale(.92);transform-origin:top left}
  .about .bio>.rule img{width:calc(100% + 4px)}
  .about .bio dl>div:first-child dd{gap:6px}
  .about .tools{width:100%}
}

/* Surface colors fill the viewport; the page composition stays centered. */
body{background-color:var(--paper);background-image:linear-gradient(rgba(249,246,241,.8),rgba(249,246,241,.8)),url('assets/imgFooter.avif');background-position:center center;background-size:cover;background-attachment:fixed}
.landing:before,.textured:before{display:none}
.landing .star.back{mix-blend-mode:normal;opacity:1;-webkit-mask:url('assets/star-back-transparent.avif') center/100% 100% no-repeat;mask:url('assets/star-back-transparent.avif') center/100% 100% no-repeat}
@media(min-width:1024px){
  main{overflow:visible}
  footer#contact .copyright{isolation:isolate}
  footer#contact .copyright::before{content:'';position:absolute;z-index:-1;top:0;bottom:0;left:50%;width:var(--viewport-design-width,1440px);transform:translateX(-50%);background:#e3cccc;pointer-events:none}
}