/* Hallmark · theme: zzz light exhibition · genre: editorial · scope: component · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V3 · weakest: V; kept the user's bicycle-first order while replacing generic rounded image tiles with a photographic edit. */
/* Hallmark · waive 29 · user requests liquid glass and a pointer gradient · Glass is restricted to small portfolio controls, and the ambient field stays faint so photographs retain their original color. */
@import url('./tokens.css');
*{box-sizing:border-box}
html,body{margin:0;overflow-x:clip}
html{scroll-behavior:smooth;scroll-padding-top:var(--space-lg)}
body{background:var(--paper);color:var(--ink);font-family:var(--font-main);font-size:var(--type-body);line-height:1.65;-webkit-font-smoothing:antialiased;font-synthesis:none}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(ellipse 460px 340px at var(--pointer-x) var(--pointer-y),var(--ambient-a),var(--transparent) 100%),radial-gradient(ellipse 620px 460px at 80% 30%,var(--ambient-b),var(--transparent) 100%)}
a{color:inherit;text-underline-offset:.3em}
button{font:inherit;cursor:pointer}
a,button{-webkit-tap-highlight-color:var(--transparent)}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
button:disabled{cursor:default}
[hidden]{display:none!important}
h1,h2,h3,h4{overflow-wrap:break-word;min-width:0;text-wrap:balance}
p{margin:0;text-wrap:pretty}
figure{margin:0;min-width:0}
.container{width:min(90%,1120px);margin-inline:auto}
.header-inner{height:84px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.wordmark{font-size:26px;font-weight:700;letter-spacing:-1.2px;text-decoration:none}
.wordmark span{color:var(--accent)}
.nav-contact{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:var(--space-xs) var(--space-lg);text-decoration:none;font-size:var(--type-ui);border:1px solid var(--glass-edge);border-radius:999px;background:var(--glass);box-shadow:inset 0 1px 0 var(--glass-edge)}
.intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.38fr);align-items:end;gap:var(--space-2xl);padding-block:var(--space-2xl) var(--space-xl)}
.intro-small{font-size:var(--type-ui);color:var(--muted);margin-bottom:var(--space-lg)}
.intro h1{font-size:var(--type-display);font-weight:400;line-height:1.28;letter-spacing:-.04em;margin:0}
.intro-copy{font-size:var(--type-body);color:var(--muted);line-height:1.8;margin-top:var(--space-lg)}
.intro-aside{font-size:var(--type-ui);line-height:1.85;color:var(--muted);max-width:240px;justify-self:end}
.aside-line{display:block;width:32px;height:1px;background:var(--line);margin-block:var(--space-md)}
.section-navigation{display:flex;justify-content:center;gap:var(--space-xl);padding-block:var(--space-sm) var(--space-lg);border-bottom:1px solid var(--line)}
.section-navigation a{position:relative;padding-block:var(--space-xs);text-decoration:none;font-size:var(--type-ui);color:var(--muted)}
.section-navigation a::after{content:'';position:absolute;inset:auto 0 0;height:1px;background:var(--accent);transform:scaleX(0);transition:transform var(--dur-short) var(--interaction-ease)}
.section-navigation a:hover::after,.section-navigation a:focus-visible::after{transform:scaleX(1)}
.about{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--space-3xl);padding-block:var(--space-3xl)}
.about h2{font-size:var(--type-section);font-weight:400;line-height:1.35;letter-spacing:-.035em;margin:0 0 var(--space-lg)}
.about-introduction p{color:var(--muted);line-height:1.9;max-width:40ch}
.about-introduction p+p{margin-top:var(--space-md)}
.selected-experience{margin:0;min-width:0}
.selected-experience>div{padding-block:var(--space-lg);border-top:1px solid var(--line)}
.selected-experience>div:first-child{padding-top:var(--space-2xs)}
.selected-experience dt{font-size:var(--type-work);margin-bottom:var(--space-xs)}
.selected-experience dd{font-size:var(--type-caption);line-height:1.9;color:var(--muted);margin:0}
.footer{background:var(--footer-paper);color:var(--footer-ink);padding-block:var(--space-2xl) var(--space-lg)}
.footer-main{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,.5fr);gap:var(--space-xl)}
.footer h2{font-size:var(--type-section);font-weight:400;line-height:1.4;letter-spacing:-.035em;margin:0 0 var(--space-md)}
.footer-introduction p{font-size:var(--type-caption);color:var(--footer-muted);line-height:1.9;max-width:32ch}
.footer-wordmark{display:inline-block;margin-top:var(--space-lg);font-size:30px;font-weight:700;letter-spacing:-1.5px;text-decoration:none}
.footer h3{font-size:var(--type-ui);font-weight:400;margin:var(--space-xs) 0 var(--space-lg);color:var(--footer-muted)}
.email-link{display:block;font-size:var(--type-work);text-decoration:none;overflow-wrap:break-word;width:fit-content}
.email-link:hover{text-decoration:underline}
.copy-email{display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin-top:var(--space-lg);padding:var(--space-xs) var(--space-lg);border-radius:999px;border:1px solid var(--accent);background:var(--accent);color:var(--accent-ink);font-size:var(--type-ui)}
.copy-status{font-size:var(--type-caption);line-height:1.7;min-height:24px;margin-top:var(--space-xs);color:var(--footer-muted)}
.footer-explore a{display:block;width:fit-content;font-size:var(--type-ui);color:var(--footer-ink);text-decoration:none;padding-block:var(--space-2xs);margin-bottom:var(--space-xs)}
.footer-explore a:hover{text-decoration:underline}
.footer-bottom{display:flex;justify-content:space-between;gap:var(--space-lg);margin-top:var(--space-xl);padding-top:var(--space-lg);border-top:1px solid var(--footer-line);font-size:var(--type-caption);color:var(--footer-muted)}
.footer a:focus-visible,.footer button:focus-visible{outline-color:var(--footer-ink)}
.glass-action{position:relative;isolation:isolate;overflow:hidden;transition:transform var(--dur-long) var(--interaction-ease),box-shadow var(--dur-long) var(--interaction-ease)}
.glass-action::before{content:'';position:absolute;z-index:-1;inset:-100% -40%;border-radius:43%;background:var(--glass-wave);opacity:0;transform:translate(-55%,80%) rotate(-35deg);transition:transform 1000ms var(--interaction-ease),opacity var(--dur-short) var(--interaction-ease);pointer-events:none}
.footer .glass-action::before{background:var(--glass-dark-wave)}
.glass-action:active{transform:scale(.96)}
.button-ripple{position:absolute;pointer-events:none;border:1px solid var(--glass-edge);border-radius:50%;background:radial-gradient(circle,var(--ripple-clear) 35%,var(--ripple-light) 70%,var(--ripple-clear) 74%);z-index:1}
@media(hover:hover) and (pointer:fine){.glass-action:hover{box-shadow:inset 0 1px 0 var(--glass-edge),0 8px 24px var(--shadow)}.glass-action:hover::before{opacity:1;transform:translate(15%,-5%) rotate(20deg)}}
@media(max-width:700px){
  :root{--type-display:38px;--type-section:28px;--type-category:26px;--type-work:17px;--screen-height:clamp(300px,46svh,380px);--stack-offset:76px}
  .header-inner{height:72px}.nav-contact{padding-inline:var(--space-md)}
  .intro{grid-template-columns:minmax(0,1fr);gap:var(--space-lg);padding-block:var(--space-xl) var(--space-lg)}
  .intro-aside{display:none}.section-navigation{gap:var(--space-xl);padding-block:var(--space-sm) var(--space-lg)}
  .about{grid-template-columns:minmax(0,1fr);gap:var(--space-xl);padding-block:var(--space-2xl)}
  .about-introduction p{max-width:unset}
  .footer-main{grid-template-columns:minmax(0,1fr) minmax(0,.6fr);gap:var(--space-xl) var(--space-lg)}
  .footer-introduction{grid-column:1/-1}.footer-bottom{display:block;margin-top:var(--space-xl)}
  .footer-bottom span{display:block;margin-top:var(--space-xs)}.email-link{font-size:var(--type-body)}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.glass-action,.glass-action::before,.section-navigation a::after{transition:none}.glass-action:hover::before{transform:none;opacity:0}.glass-action:active{transform:none}body::before{display:none}}