:root{--site-axis:61.111vw;--axis-local:calc(var(--site-axis) - var(--container-padding));--story-vh:100svh}
.site-cursor{display:none!important}
.hero-story{position:relative;height:200svh;background:var(--bg)}
.signal{position:sticky;top:0;height:100svh;min-height:0;padding:0;overflow:hidden;isolation:isolate}
.signal__base,.signal__reveal{position:absolute;inset:0;padding:calc(var(--header-h) + 48px) var(--container-padding) 48px;display:grid;grid-template-columns:1.65fr 1fr;grid-template-rows:auto 1fr auto;column-gap:5vw}
.signal__base:after,.signal__reveal:after{content:"";position:absolute;top:var(--header-h);bottom:0;left:var(--reveal-x,60%);width:1px;background:var(--line);transition:opacity .18s ease}
.signal.is-pointer-active .signal__base:after,.signal.is-scroll-reveal .signal__base:after{opacity:0}
.signal__reveal{z-index:2;background:var(--accent);color:var(--accent-text);pointer-events:none;clip-path:inset(0 calc(100% - var(--reveal-x,60%) - var(--reveal-width,1px)/2) 0 calc(var(--reveal-x,60%) - var(--reveal-width,1px)/2));will-change:clip-path}
.signal__reveal:after{display:block;left:var(--site-axis);background:#ffffff4d;opacity:var(--reveal-axis-opacity,0);transition:none}.signal__reveal .section-index b,.signal__reveal .bracket-link i{color:#fff}.signal__reveal .section-index i,.signal__reveal .signal__intro,.signal__reveal .signal__meta time{color:#ffffffb3}
.signal .section-index{grid-column:1/-1}.hero-title{grid-column:1/-1;align-self:center;margin:20px 0 0;max-width:1500px;font-size:var(--font-xl);font-weight:700;letter-spacing:-.055em;line-height:.92}.hero-title span,.section-copy h2 span,.about h2 span,.contact h2 span{display:block}.signal__intro{align-self:end;max-width:760px;margin:20px 0 86px;color:var(--secondary);font-size:clamp(14px,1vw,18px);line-height:1.65}.signal__meta{align-self:end;display:flex;gap:18px;align-items:center;font-family:"DM Mono",monospace;font-size:11px;text-transform:uppercase}.signal__meta i{width:7px;height:7px;background:var(--accent)}.signal__reveal .signal__meta i{background:#fff}.signal__meta time{margin-left:18px;color:var(--secondary)}.signal__cta{position:absolute;right:var(--container-padding);bottom:48px}

.work-practice-story{position:relative;height:470svh;margin-top:-100svh;background:var(--bg)}.work-practice-sticky{position:sticky;top:0;height:100svh;overflow:hidden}.story-layer{position:absolute;inset:0;height:100svh;min-height:0;overflow:hidden}.story-layer--practice{z-index:1;will-change:transform}.story-layer--work{z-index:2;clip-path:inset(var(--work-clip-top,0%) 0 0);will-change:clip-path}.story-layer--about{z-index:3;will-change:transform}.axis-line,.contact-axis{position:absolute;top:0;bottom:0;left:var(--site-axis);width:0;border-left:1px solid var(--line);pointer-events:none}.work .axis-line{border-color:#ffffff4d}
.section-copy{display:grid;grid-template-columns:var(--axis-local) 1fr;gap:0;margin-top:clamp(28px,5vh,60px)}.section-copy h2{grid-column:1/2;margin:0;padding-right:4vw;font-size:clamp(42px,3.2vw,62px);line-height:.94;letter-spacing:-.05em}.section-copy p{grid-column:2/3;align-self:end;justify-self:end;max-width:410px;margin:0;color:#ffffffb3;font-size:16px;text-align:right}.practice .section-copy p{color:var(--secondary)}
.work{background:var(--bg);color:var(--text);padding-bottom:0;isolation:isolate}.work:before{content:"";position:absolute;inset:0;z-index:0;background:var(--accent);clip-path:inset(0 calc(100% - var(--work-reveal-x,60%) - var(--work-reveal-width,0px)/2) 0 calc(var(--work-reveal-x,60%) - var(--work-reveal-width,0px)/2));will-change:clip-path}.work>.section-head,.work>.section-copy,.work>.work-list-wrap{position:relative;z-index:1}.work>.axis-line{z-index:1}.work:not(.is-painted) .axis-line{border-color:var(--line)}.work:not(.is-painted) .section-index b{color:var(--accent)}.work:not(.is-painted) .section-status,.work:not(.is-painted) .section-copy p{color:var(--secondary)}.work__paint-content{position:absolute;inset:0;z-index:2;padding:inherit;color:var(--accent-text);pointer-events:none;clip-path:inset(0 calc(100% - var(--work-reveal-x,60%) - var(--work-reveal-width,0px)/2) 0 calc(var(--work-reveal-x,60%) - var(--work-reveal-width,0px)/2));will-change:clip-path}.work .work__paint-content .section-index b{color:#fff}.work .work__paint-content .section-status,.work .work__paint-content .section-copy p{color:#ffffffb3}.work .work__paint-content .axis-line{border-color:#ffffff4d}.work .work__paint-content .project-row__no{background:var(--accent)}.work-list-wrap{margin-top:clamp(24px,4vh,48px)}.portfolio-latest{position:relative;border-top:1px solid currentColor}.project-row{position:relative;display:grid;grid-template-columns:var(--axis-local) 1fr;align-items:center;min-height:clamp(66px,11.5vh,104px);border-bottom:1px solid currentColor;color:color-mix(in srgb,currentColor 60%,transparent);transition:color .26s var(--ease)}.project-row__no{position:absolute;left:var(--axis-local);top:50%;z-index:3;transform:translate(-50%,-50%);border:1px solid currentColor;background:var(--bg);padding:4px 9px;font-family:"DM Mono",monospace;font-size:11px}.project-row__title{grid-column:1;padding-right:48px;text-align:right;font-size:clamp(28px,3.1vw,58px);font-weight:600;letter-spacing:-.045em;line-height:1}.project-row__category{grid-column:2;padding-left:46px;font-family:"DM Mono",monospace;font-size:12px;text-transform:uppercase}.project-row__year{position:absolute;left:0;top:50%;transform:translateY(-50%);font-family:"DM Mono",monospace;font-size:10px;opacity:0}.project-row.is-active{color:currentColor}.work__paint-content .project-row.is-active{color:#fff}.project-row.is-active .project-row__category:after{content:"\A" attr(data-description);white-space:pre}.project-row.is-active:before{content:"";position:absolute;left:var(--axis-local);right:0;bottom:20%;height:1px;background:currentColor;opacity:.55;transform-origin:left;animation:rowLine .35s var(--ease) both}@keyframes rowLine{from{transform:scaleX(0)}to{transform:scaleX(1)}}.project-preview{position:fixed;z-index:80;width:min(30vw,480px);aspect-ratio:4/3;overflow:hidden;pointer-events:none;opacity:0;clip-path:inset(50% 0);transform:translate(-50%,-50%)}.project-preview img{width:100%;height:100%;object-fit:cover}.portfolio-empty{padding:70px 0;border-bottom:1px solid currentColor}
.practice{background:var(--bg);padding-bottom:0}.practice-list{list-style:none;padding:0;margin:clamp(24px,4vh,48px) 0 0;border-top:1px solid var(--line)}.practice-list li{position:relative;display:grid;grid-template-columns:var(--axis-local) 1fr;align-items:center;min-height:clamp(66px,12vh,108px);border-bottom:1px solid var(--line);color:rgba(18,18,16,.42);transition:color .28s var(--ease)}.practice-list li>b{position:absolute;left:var(--axis-local);top:50%;transform:translate(-50%,-50%);border:1px solid currentColor;background:var(--bg);padding:4px 9px;font-family:"DM Mono",monospace;font-size:11px}.practice-list h3{grid-column:1;padding-right:48px;margin:0;text-align:right;font-size:clamp(28px,3.1vw,58px);letter-spacing:-.045em}.practice-list p{grid-column:2;padding-left:46px;margin:0;color:inherit;font-family:"DM Mono",monospace;font-size:12px;text-transform:uppercase}.practice-list li.is-active{color:var(--text)}

.about{min-height:110svh}.about:before{content:"";position:absolute;z-index:0;top:0;bottom:0;left:var(--site-axis);border-left:1px solid var(--line);pointer-events:none}.about h2,.contact h2{margin:clamp(65px,9vh,110px) 0 0;font-size:var(--font-lg);line-height:.92;letter-spacing:-.055em}.about__lead{max-width:580px;color:var(--secondary);font-size:18px}.about-measure{position:relative;height:46svh;margin-top:6svh}.about-measure:before{content:"";position:absolute;top:0;bottom:0;left:var(--axis-local);border-left:1px solid rgba(29,57,245,.5);transform:scaleY(var(--about-line-scale,0));transform-origin:top}.about-measure>strong{position:absolute;left:var(--axis-local);top:50%;transform:translate(-50%,-50%);padding:10px;background:var(--bg);color:var(--accent)}.about-node{position:absolute;left:var(--axis-local);transform:translateX(-50%);display:flex;align-items:center;gap:20px;white-space:nowrap}.about-node:before{content:"";width:10px;height:10px;background:var(--accent)}.about-node--idea{top:0}.about-node--form{bottom:0}.about-node span{color:var(--secondary);font-size:12px}.about__statement{width:36%;margin:30px 0 0 auto;font-size:clamp(22px,2.1vw,38px);font-weight:600;letter-spacing:-.035em}
.contact{min-height:100svh;display:flex;flex-direction:column;background:var(--text);color:#fff}.contact-axis{border-color:#ffffff42}.contact .section-index b{color:#fff}.contact__intro{max-width:580px;color:#ffffff99;font-size:18px}.contact-form{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:60px}.contact-form label{display:flex;flex-direction:column;gap:10px;font-family:"DM Mono",monospace;font-size:11px;text-transform:uppercase}.contact-form label.full{grid-column:1/-1}.contact-form input,.contact-form textarea{border:0;border-bottom:1px solid #ffffff55;background:none;padding:10px 0;font-size:18px;outline:none}.contact-form .bracket-link{justify-self:start;color:#fff;padding:16px 0}.form-status{margin:0}.site-footer{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;margin-top:auto;padding-top:45px;border-top:1px solid #ffffff44;font-family:"DM Mono",monospace;font-size:11px;text-transform:uppercase}.site-footer>div{display:flex;gap:20px}.site-footer>div:last-child{justify-self:end}.site-footer time{color:#ffffff88}

/* Selected Work: scroll activation and pointer hover share the same visual state. */
.project-row.is-active{z-index:2;box-shadow:inset 0 1px 0 currentColor,inset 0 -1px 0 currentColor}
.project-row.is-active .project-row__year{opacity:1;transition:opacity .25s var(--ease)}
.project-row.is-active .project-row__category:after{content:attr(data-description);display:block;margin-top:7px;font-family:var(--font-body);font-size:14px;font-weight:400;line-height:1.25;text-transform:none;white-space:normal}
.project-row.is-active:after{content:"↗";position:absolute;right:2px;top:50%;font-family:Arial,sans-serif;font-size:28px;font-weight:400;line-height:1;animation:rowArrow .3s var(--ease) both}
@keyframes rowArrow{from{opacity:0;transform:translate(-8px,-50%)}to{opacity:1;transform:translate(0,-50%)}}

/* Keep hover details mounted so both entering and leaving can interpolate. */
.project-row{transition:color .34s var(--ease),box-shadow .34s var(--ease)}
.project-row__title,.project-row__category,.project-row__no{transition:color .34s var(--ease),border-color .34s var(--ease),opacity .34s var(--ease)}
.project-row__year{transition:opacity .32s var(--ease),transform .32s var(--ease);transform:translate(-10px,-50%)}
.project-row.is-active .project-row__year{transform:translate(0,-50%)}
.project-row .project-row__category:after{content:attr(data-description);display:block;overflow:hidden;max-height:0;margin-top:0;opacity:0;transform:translateY(8px);font-family:var(--font-body);font-size:14px;font-weight:400;line-height:1.25;text-transform:none;white-space:normal;transition:max-height .38s var(--ease),margin-top .38s var(--ease),opacity .28s var(--ease),transform .38s var(--ease)}
.project-row.is-active .project-row__category:after{max-height:44px;margin-top:7px;opacity:1;transform:translateY(0)}
.project-row:after{content:"↗";position:absolute;right:2px;top:50%;opacity:0;font-family:Arial,sans-serif;font-size:28px;font-weight:400;line-height:1;transform:translate(-10px,-50%);transition:opacity .28s var(--ease),transform .36s var(--ease)}
.project-row.is-active:after{opacity:1;transform:translate(0,-50%);animation:none}
.project-row:before{content:"";position:absolute;left:var(--axis-local);right:0;bottom:20%;height:1px;background:currentColor;opacity:0;transform:scaleX(0);transform-origin:left;transition:transform .38s var(--ease),opacity .28s var(--ease)}
.project-row.is-active:before{opacity:.55;transform:scaleX(1);animation:none}

/* Full-height work stage and reference-style active number fill. */
@media (min-width:901px){
    .work{--work-pad:clamp(26px,3.35vw,58px);--axis-local:calc(var(--site-axis) - var(--work-pad));padding:clamp(42px,5.5vh,54px) var(--work-pad) 0}
    .work-list-wrap{margin-top:clamp(28px,4vh,44px)}
    .project-row{min-height:clamp(78px,12.6vh,118px)}
}
.project-row__no{overflow:hidden;isolation:isolate;background-image:linear-gradient(var(--accent),var(--accent));background-position:center bottom;background-repeat:no-repeat;background-size:100% 0;transition:color .34s var(--ease),border-color .34s var(--ease),background-size .42s var(--ease)}
.project-row.is-active .project-row__no{background-size:100% 100%}
.project-row.is-active .project-row__no{color:#fff;border-color:currentColor}
.work__paint-content .project-row__no{background-image:linear-gradient(#fff,#fff)}
.work__paint-content .project-row.is-active .project-row__no{color:var(--accent);border-color:#fff}
.project-row.is-active{box-shadow:inset 0 1.5px 0 currentColor,inset 0 -1.5px 0 currentColor}
.site-header{will-change:transform}

/* Work row refinements. */
.work .section-copy{margin-top:clamp(16px,2.4vh,28px)}
.project-row:before,.project-row.is-active:before{display:none}
.project-row__year{transform:translateY(-50%);transition:none}
.project-row.is-active .project-row__year{transform:translateY(-50%)}
.project-row__no,.work__paint-content .project-row__no{background-color:transparent;background-image:linear-gradient(#fff,#fff);background-position:center bottom;background-repeat:no-repeat;background-size:100% 0}
.project-row.is-active .project-row__no,.work__paint-content .project-row.is-active .project-row__no{color:var(--accent);border-color:#fff;background-size:100% 100%}
.work .project-row.is-active .project-row__no,.work .work__paint-content .project-row.is-active .project-row__no{background:#fff;color:var(--accent);border-color:#fff}
.project-row__title,.project-row__category{clip-path:inset(calc(var(--row-close,0) * 50%) 0);opacity:calc(1 - var(--row-close,0));will-change:clip-path,opacity}
.project-row.is-hovered .project-row__title,.project-row.is-hovered .project-row__category{clip-path:inset(0)!important;opacity:1!important}
.work .project-row.is-closed .project-row__no,.work .work__paint-content .project-row.is-closed .project-row__no{background:#fff;color:var(--accent);border-color:#fff}
.project-row.is-closed .project-row__title,.project-row.is-closed .project-row__category{clip-path:inset(50% 0)!important;opacity:0!important}.project-row.is-closed .project-row__year,.project-row.is-closed:after{opacity:0!important}
.project-row.is-active:before{content:"";display:block;position:absolute;z-index:1;top:0;bottom:0;left:var(--axis-local);width:2px;height:auto;background:currentColor;opacity:.75;transform:translateX(-50%);animation:none}
.project-row.is-active{box-shadow:none}
.project-row.is-hovered{z-index:2;box-shadow:inset 0 1.5px 0 currentColor,inset 0 -1.5px 0 currentColor}
.project-row.is-active:before{display:none}
.portfolio-latest:after{content:"";position:absolute;z-index:2;top:var(--active-axis-y,0);left:var(--axis-local);width:2px;height:var(--active-axis-h,0);background:currentColor;opacity:.75;transform:translateX(-50%);pointer-events:none;transition:top .48s var(--ease),height .35s var(--ease);will-change:top,height}
.portfolio-latest{isolation:isolate}.portfolio-latest:after{z-index:1}.portfolio-latest .project-row{z-index:2}.portfolio-latest .project-row__no{z-index:4}

/* Practice uses scroll activation only, with one flowing blue axis segment. */
.practice-list{position:relative;isolation:isolate}
.practice-list:after{content:"";position:absolute;z-index:1;top:var(--practice-axis-y,0);left:var(--axis-local);width:1px;height:var(--practice-axis-h,0);background:var(--accent);opacity:calc(1 - var(--practice-axis-exit,0));transform:translateX(-50%) scaleY(calc(1 - var(--practice-axis-exit,0)));transform-origin:center;pointer-events:none;transition:top .48s var(--ease),height .35s var(--ease);will-change:top,height,transform,opacity}
.practice-list li{z-index:2}.practice-list li>b{z-index:4;transition:color .32s var(--ease),background-color .32s var(--ease),border-color .32s var(--ease)}
.practice-list li.is-active>b{color:#fff;border-color:var(--accent);background:var(--accent)}
.practice-summary{position:relative;display:grid;grid-template-columns:var(--axis-local) 1fr;align-items:center;min-height:clamp(92px,14vh,126px);border-bottom:1px solid var(--line)}
.practice-summary__side{font-size:14px;line-height:1.55;color:var(--secondary)}
.practice-summary__side>b{display:block;margin-bottom:8px;color:var(--accent);font-family:"DM Mono",monospace;font-size:10px;font-weight:400;letter-spacing:.14em}
.practice-summary__side p{margin:0}
.practice-summary__side--surface{padding-right:48px;text-align:right}
.practice-summary__side--system{padding-left:48px;text-align:left}
.practice-summary__marker{position:absolute;z-index:4;left:var(--axis-local);top:50%;display:flex;align-items:center;gap:10px;transform:translate(-50%,-50%);color:rgba(18,18,16,.28);font-family:"DM Mono",monospace;font-size:13px}
.practice-summary__marker i{font-style:normal}
.practice-summary__marker b{width:9px;height:9px;background:#c7c7c1;transition:background-color .35s var(--ease)}
.practice-summary.is-active .practice-summary__marker b{background:var(--accent)}

/* About: the active summary marker continues down the shared axis. */
.about{--about-runner-y:0%;height:100svh;min-height:0;overflow:hidden;isolation:isolate}
.about>.section-index,.about>h2,.about>.about__lead,.about>.about-measure{z-index:2}
.about>h2{width:52%;margin:clamp(28px,4vh,44px) 0 0;font-size:clamp(42px,3.35vw,62px);line-height:.96}
.about>.about__lead{position:absolute;top:clamp(142px,19vh,188px);right:var(--container-padding);width:min(34vw,440px);margin:0;text-align:right;font-size:16px;line-height:1.55}
.about-measure{position:absolute;top:31%;right:var(--container-padding);bottom:17%;left:var(--container-padding);height:auto;margin:0}
.about-measure:before{top:var(--about-axis-top,50%);bottom:auto;left:var(--axis-local);height:var(--about-axis-height,0px);border-left:1px solid var(--accent);transform:none;opacity:.7;will-change:top,height}
.about-node{left:var(--axis-local);gap:27px;transform:translateX(-5px);font-family:"DM Mono",monospace;font-size:11px;font-weight:400;letter-spacing:.16em}
.about-node:before{width:10px;height:1px;background:var(--accent)}
.about-node span{display:none}
.about-node--idea{top:0}.about-node--form{bottom:0}
.about-runner{position:absolute;top:var(--about-runner-y);right:0;left:0;display:grid;grid-template-columns:var(--axis-local) 1fr;grid-template-rows:auto auto;align-items:center;transform:translateY(-50%);will-change:top}
.about-runner>strong{grid-column:1;grid-row:1;padding-right:48px;text-align:right;font-size:clamp(26px,2vw,36px);letter-spacing:-.04em;white-space:nowrap}
.about-runner>small{grid-column:1;grid-row:2;margin-top:8px;padding-right:48px;color:var(--secondary);font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.05em;text-align:right;white-space:nowrap}
.about-runner>p{grid-column:2;grid-row:1/3;align-self:center;margin:0;padding-left:48px;font-size:16px;line-height:1.65;word-break:keep-all}
.about-runner__marker{position:absolute;z-index:4;left:var(--axis-local);top:50%;display:flex;align-items:center;gap:10px;transform:translate(-50%,-50%);color:rgba(18,18,16,.28);font-family:"DM Mono",monospace;font-size:13px}
.about-runner__marker i{font-style:normal}
.about-runner__marker b{width:9px;height:9px;background:var(--accent)}
.practice-summary__marker.is-axis-bridge{position:fixed;z-index:120;left:var(--site-axis);top:var(--bridge-marker-y);transform:translate(-50%,-50%);color:rgba(18,18,16,.28);pointer-events:none;will-change:top}
.practice-summary__marker.is-axis-bridge b{background:var(--accent)}
.section-axis-bridge{position:fixed;z-index:119;top:var(--bridge-line-top,0);left:var(--site-axis);width:1px;height:var(--bridge-line-height,72px);background:var(--accent);opacity:var(--bridge-opacity,0);transform:translateX(-50%) scaleY(var(--bridge-scale,0));transform-origin:bottom center;pointer-events:none;will-change:top,height,opacity,transform}

/* Clash Display needs slightly more breathing room than the previous title face. */
.hero-title,.section-copy h2,.project-row__title,.practice-list h3,.about>h2,.contact>h2,.global-menu nav span,.about-runner>strong{letter-spacing:-.02em}
.signal__intro{word-break:keep-all}

/* overflow:hidden makes body a scroll container and breaks the work sticky stage. */
html,body{overflow-x:clip}

/* Signal scrolls normally; Work pins only after reaching the viewport top. */
.signal-work-flow{position:relative;background:var(--bg)}
.hero-story{z-index:1;height:100svh}
.signal{position:relative;top:auto}
.work-practice-story{z-index:2;margin-top:0}
.work-practice-sticky{z-index:2}

/* Contact remains inside the shared pinned story. The About marker becomes its CTA card. */
.work-practice-story{height:650svh}
.story-layer--contact{z-index:4;background:transparent;color:var(--text);will-change:transform;isolation:isolate}
.story-layer--contact .section-index b{color:var(--accent)}
.story-layer--contact .contact-axis{display:block;border-color:var(--line)}
.story-layer--contact>h2{width:52%;margin:clamp(28px,4vh,44px) 0 0;font-size:clamp(42px,3.35vw,62px);line-height:.96}
.story-layer--contact>.contact__intro{position:absolute;top:clamp(142px,19vh,188px);right:var(--container-padding);width:min(34vw,440px);margin:0;color:var(--text);font-size:16px;line-height:1.55;text-align:right}
.contact__intro>p{margin:0}
.contact__quick-links{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}
.contact__quick-links a{display:inline-flex;align-items:center;gap:14px;border:1px solid var(--line);padding:9px 12px;color:var(--text);font-family:"DM Mono",monospace;font-size:10px;line-height:1;letter-spacing:.04em;text-transform:uppercase;transition:border-color .28s var(--ease),background-color .28s var(--ease),color .28s var(--ease),transform .28s var(--ease)}
.contact__quick-links a:hover,.contact__quick-links a:focus-visible{border-color:var(--accent);background:var(--accent);color:#fff;transform:translateY(-2px)}
.contact__quick-links b{font-family:Arial,sans-serif;font-size:14px;font-weight:400;line-height:.7;transition:transform .28s var(--ease)}
.contact__quick-links a:hover b,.contact__quick-links a:focus-visible b{transform:translate(2px,-2px)}
.contact-card{position:absolute;z-index:3;left:var(--site-axis);top:61%;display:flex;flex-direction:column;align-items:center;justify-content:center;width:min(34vw,560px);height:clamp(190px,23vh,230px);overflow:visible;border:0;background:transparent;padding:38px 42px;color:#fff;transform:translate(-50%,-50%);cursor:pointer;appearance:none}
.contact-card>strong,.contact-card>.contact-card__line,.contact-card>small{position:relative;z-index:2}
.contact-card strong{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:clamp(26px,2vw,36px);font-weight:600;line-height:1;white-space:nowrap;transform-origin:center;will-change:transform}
.contact-card:hover strong,.contact-card:focus-visible strong{animation:contact-title-vibrate .48s ease-in-out infinite}
@keyframes contact-title-vibrate{
    0%,100%{transform:translate(0,0) rotate(0) scale(1.045)}
    20%{transform:translate(-1px,1px) rotate(-.25deg) scale(1.045)}
    40%{transform:translate(1px,-1px) rotate(.2deg) scale(1.045)}
    60%{transform:translate(-.5px,-1px) rotate(-.15deg) scale(1.045)}
    80%{transform:translate(1px,.5px) rotate(.2deg) scale(1.045)}
}
.contact-card strong i{color:#ffffff85;font-style:normal}
.contact-card__line{display:block;width:100%;height:1px;margin:34px 0 24px;background:#ffffff25;transform-origin:center}
.contact-card small{font-family:"DM Mono",monospace;font-size:12px;white-space:nowrap}.contact-card u{text-underline-offset:4px}
.contact-card__marker{position:absolute;z-index:1;top:50%;left:50%;display:flex;align-items:center;justify-content:center;gap:10px;width:0;height:0;transform:translate(-50%,-50%);color:rgba(255,255,255,.55);pointer-events:none}
.contact-card__marker b{position:absolute;top:50%;left:50%;width:var(--marker-card-width,9px);height:var(--marker-card-height,9px);background:var(--accent);transform:translate(-50%,-50%);will-change:width,height}
.contact-card__marker i{position:relative;z-index:1;font-style:normal}
.story-layer--contact .site-footer{position:absolute;right:var(--container-padding);bottom:28px;left:var(--container-padding);z-index:2;margin:0;padding-top:24px;border-color:var(--line);color:var(--text)}
.story-layer--contact .site-footer a{color:inherit}.story-layer--contact .site-footer time{color:var(--secondary)}

.contact-drawer-shell{position:fixed;inset:0;z-index:300;visibility:hidden;overscroll-behavior:contain;pointer-events:none;transition:visibility 0s linear .55s}
.contact-drawer-shell.is-open{visibility:visible;pointer-events:auto;transition-delay:0s}
.contact-drawer-overlay{position:absolute;inset:0;border:0;background:rgba(246,245,239,.78);opacity:0;cursor:pointer;transition:opacity .45s var(--ease)}
.contact-drawer-shell.is-open .contact-drawer-overlay{opacity:1}
.contact-drawer{position:absolute;top:0;right:0;bottom:0;display:flex;flex-direction:column;width:clamp(390px,26vw,500px);overflow:auto;-ms-overflow-style:none;scrollbar-width:none;background:var(--accent);padding:28px 36px 30px;color:#fff;transform:translateX(101%);transition:transform .55s var(--ease);will-change:transform}
.contact-drawer::-webkit-scrollbar{display:none}
.contact-drawer-shell.is-open .contact-drawer{transform:translateX(0)}
.contact-drawer__top{display:flex;align-items:center;justify-content:space-between;font-family:"DM Mono",monospace;font-size:11px;text-transform:uppercase}.contact-drawer__top>span{display:flex;align-items:center;gap:10px}.contact-drawer__top>span i{width:8px;height:8px;background:#fff}.contact-drawer__top button{border:0;background:none;padding:0;color:#fff;font:inherit;text-transform:none;cursor:pointer}.contact-drawer__top button b{display:inline-block;margin-left:10px;font-size:26px;font-weight:300;line-height:.5;vertical-align:-3px}
.contact-drawer>h2{margin:50px 0 10px;font-size:clamp(34px,2.4vw,48px);line-height:1;letter-spacing:-.02em}.contact-drawer>p{margin:0;color:#ffffffb5;font-size:16px}
.contact-drawer .contact-form{display:flex;flex-direction:column;gap:0;margin:42px 0 0}.contact-drawer .contact-form label{position:relative;display:block;border-bottom:1px solid #ffffff2f;padding:20px 0 14px;font-family:var(--font-body);font-size:15px;text-transform:none;transition:border-color .28s var(--ease),color .28s var(--ease)}.contact-drawer .contact-form label:after{content:"";position:absolute;right:0;bottom:-1px;left:0;height:1px;background:#fff;transform:scaleX(0);transform-origin:left;transition:transform .38s var(--ease)}.contact-drawer .contact-form label:focus-within:after{transform:scaleX(1)}.contact-drawer .contact-form label.is-invalid{border-color:#ffb1b1;color:#ffd1d1}.contact-drawer .contact-form label.is-invalid:after{background:#ffd1d1;transform:scaleX(1)}.contact-drawer .contact-form label span{display:block}.contact-drawer .contact-form input,.contact-drawer .contact-form textarea{width:100%;border:0;background:transparent;padding:8px 0 0;color:#fff;font:inherit;resize:none;outline:none}.contact-drawer .contact-form>small{margin:42px 0 0;font-family:"DM Mono",monospace;font-size:10px;line-height:1.6}.contact-drawer .contact-form .bracket-link{margin-top:26px;color:#fff;font-size:28px;transition:opacity .25s var(--ease)}.contact-drawer .contact-form .bracket-link:disabled{opacity:.42;cursor:wait}.contact-drawer .form-status{min-height:1.4em;margin-top:12px;font-size:13px}.contact-drawer .form-status.is-error{color:#ffd1d1}.contact-drawer .form-status.is-success{color:#d8ffdf}
.contact-drawer .contact-form .contact-form__trap{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important;border:0!important;padding:0!important;opacity:0!important;pointer-events:none!important}
.contact-drawer__mail{margin-top:auto;padding-top:24px;border-top:1px solid #ffffff30;color:#fff;font-family:"DM Mono",monospace;font-size:11px}.contact-drawer__mail u{text-underline-offset:4px}
body.contact-drawer-open{overflow-x:clip}

/* Work preview: active rows anchor the image; pointer hover temporarily takes over. */
.project-preview{width:min(24vw,380px);border:1px solid rgba(255,255,255,.34);background:#1429d8;box-shadow:0 20px 55px rgba(0,0,0,.18);will-change:transform,opacity,clip-path}
.project-preview img{will-change:transform,opacity}
.project-preview{top:0;left:0}

/* Three.js particle field: one body morphing from an orb into a Mobius loop. */
.system-terrain{display:none;position:absolute;inset:0;z-index:2;width:100%;height:100%;overflow:hidden;opacity:0;pointer-events:none;mix-blend-mode:normal;will-change:opacity}
.system-terrain:before{content:"CORE × FIELD / INTERACTION";position:absolute;z-index:2;bottom:78px;left:var(--container-padding);color:var(--accent);font-family:"DM Mono",monospace;font-size:9px;letter-spacing:.12em;opacity:var(--terrain-label-opacity,0);transition:opacity .25s}
.system-terrain canvas{display:block;width:100%!important;height:100%!important;filter:saturate(1.08) drop-shadow(0 0 5px rgba(255,74,181,.2))}