/* Hallmark · macrostructure: Marquee Hero · theme: studied-DNA · tone: refined technical
 * pre-emit critique (self-assessment): P4 H4 E4 S3 R4 V4 */
:root{--space-panel:32px;--radius-atelier:24px;--atelier-border:color-mix(in srgb,var(--text) 12%,transparent);--atelier-wash:color-mix(in srgb,var(--accent) 5%,var(--bg));--atelier-shadow:0 24px 70px color-mix(in srgb,var(--text) 7%,transparent)}
header{background:color-mix(in srgb,var(--surface) 92%,transparent);border-color:var(--atelier-border);box-shadow:0 8px 32px var(--shadow)}.hero-copy h1{font-weight:760;letter-spacing:-.065em}.hero-copy .intro{max-width:560px;line-height:1.8}.hero-profile{background:color-mix(in srgb,var(--surface) 90%,transparent);border:1px solid var(--atelier-border);border-radius:var(--radius-atelier);box-shadow:var(--atelier-shadow);backdrop-filter:blur(18px);position:relative}.hero-profile:before{content:'';display:block;width:32px;height:3px;background:var(--accent);margin-bottom:24px}.hero-profile .eyebrow{font-size:10px;letter-spacing:.15em}.details{background:transparent;box-shadow:none;border:0;border-top:1px solid var(--atelier-border);border-radius:0}.details>div{padding-left:0}.details dt{letter-spacing:.12em}.button{border-radius:28px;min-height:48px;align-items:center;white-space:nowrap}.primary{box-shadow:0 8px 24px color-mix(in srgb,var(--accent) 16%,transparent)}
.design-code{min-height:760px;overflow:clip;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:48px}.design-code article{z-index:3}.design-code article p{max-width:230px}.design-code h2{font-weight:700;letter-spacing:-.065em}.design-code .identity-art{opacity:0!important;display:none!important}.atelier-object{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:1}.atelier-object img{width:min(640px,66vw);height:auto;filter:saturate(.65);transition:transform 650ms var(--ease-out),opacity 400ms var(--ease-out)}.design-code[data-mode=code] .atelier-object img{transform:rotate(32deg) scale(.92);opacity:.17}.atelier-code{position:absolute;inset:0;display:grid;place-content:center;opacity:0;transform:translateY(12px);transition:opacity 300ms var(--ease-out),transform 400ms var(--ease-out);font-size:clamp(16px,2vw,23px);line-height:2;color:var(--text);letter-spacing:-.04em}.atelier-code span{display:block}.atelier-code b{color:var(--accent);font-weight:500}.design-code[data-mode=code] .atelier-code{opacity:1;transform:none}.design-code .role-switch{top:32px;box-shadow:none}.design-code article{max-width:260px}.design-code[data-mode=design] article:last-child,.design-code[data-mode=code] article:first-of-type{opacity:.35}
.about{padding-block:120px}.about h2{font-size:clamp(34px,4vw,52px);font-weight:650}.work-grid{column-gap:40px;row-gap:24px}.work-grid article h3:before{display:none}.work-grid article{padding:32px 0 24px}.work-grid article h3{font-size:21px;margin-bottom:16px}.work-grid p{font-size:15px;line-height:1.9}.feature-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--atelier-wash);border-radius:var(--radius-atelier);overflow:clip}.feature-strip article{padding:36px 28px}.feature-strip h3{margin-bottom:16px}.skills-track{padding-top:8px;padding-bottom:36px}.skill-card{box-shadow:none;border:1px solid var(--atelier-border);border-radius:var(--radius-atelier);background:var(--surface);min-height:330px}.skill-card:first-child{border-color:var(--atelier-border)}.skill-card h3{font-size:26px;font-weight:650}.skill-card p{line-height:1.85}.skill-explore{width:100%;text-align:left;padding-block:14px;border-top:1px solid var(--line);border-bottom:0}.skill-dialog{border-radius:var(--radius-atelier)}.journey ol{border-left-color:var(--atelier-border)}.contact{border-top:1px solid var(--line);padding-top:100px}.contact h2{font-weight:650}.contact .actions{margin-top:32px}footer{border-top:1px solid var(--line)}
@media(min-width:1001px){.hero-inner{padding-top:220px;padding-bottom:88px}.hero-profile{transform:translateY(92px)}.design-code article:first-of-type{align-self:center}.design-code article:last-child{align-self:center}.section-head h2{font-weight:650}}
@media(max-width:800px){.atelier-object img{width:540px;max-width:100%}.design-code{min-height:680px}.design-code article{max-width:210px}.design-code h2{font-size:44px}.hero-profile{transform:none}.about{padding-block:80px}.feature-strip article{padding:28px 20px}}
@media(max-width:560px){.hero-inner{padding-top:145px;padding-bottom:40px}.hero-copy h1{font-size:clamp(64px,18vw,84px)}.hero-copy .intro{font-size:15px}.hero-profile{padding:24px;margin-top:8px}.hero-profile h3{font-size:22px}.design-code{min-height:740px;margin-top:16px;justify-content:space-between;padding-top:135px;padding-bottom:44px;gap:220px}.design-code article{max-width:230px}.design-code article p{font-size:13px;max-width:210px}.design-code h2{font-size:42px}.atelier-object{inset:120px -45px 120px}.atelier-object img{width:410px;max-width:none;justify-self:center}.atelier-code{font-size:17px}.design-code[data-mode=design] article:last-child,.design-code[data-mode=code] article:first-of-type{opacity:.55}.role-switch button{padding:8px 18px}.about{padding-block:64px}.section-head h2{font-weight:650;line-height:1.15}.feature-strip{display:block}.feature-strip article{padding:24px;border-bottom:1px solid var(--line)}.feature-strip article:last-child{border:0}.skill-card{min-height:310px}.skill-card h3{font-size:24px}.contact{padding-top:64px}.contact h2{font-size:clamp(29px,8vw,40px)}.work-grid{gap:16px}.work-grid article h3{font-size:19px}}
:is(.design-code) article:last-of-type{grid-column:2;justify-self:end;text-align:right}.design-code article:last-of-type p{margin-left:auto}.design-code[data-mode=design] article:last-of-type{opacity:.4}.design-code[data-mode=code] article:last-of-type{opacity:1}
@media(min-width:801px){.design-code{padding-inline:24px}.atelier-object img{width:520px;max-width:47vw}.design-code article{max-width:245px}.design-code h2{font-size:clamp(40px,4.4vw,62px)}}
@media(max-width:560px){.design-code{padding-inline:16px}.atelier-object img{width:340px}.atelier-object{inset:190px -16px 130px}.design-code article:last-of-type{align-self:flex-end}.design-code[data-mode=design] article:last-of-type{opacity:.6}}
@media(prefers-reduced-motion:reduce){.atelier-object img,.atelier-code{transition:none!important}}