/* Sketch003: native enhancements on a complete static portfolio. */
:root{--accent:#f86c39;--muted:#56594f;--line:#bfc0b4}
html{scroll-padding-top:30px}
.rail{border-right-color:var(--ink)}
.rail-logo{font-weight:700}.logo-mark{background:var(--accent)}
.rail-nav a{font-weight:500;font-size:14px;padding:14px 0}
.rail-nav a.is-active:before{width:5px;height:16px;left:-12px}
.rail-spark{font-size:52px}.rail-note p{font-weight:500}
.topline{border-bottom-color:var(--ink)}
.section-head{border-top-width:2px;padding-top:24px}
.section-head h2{font-weight:600}.heading-arrow{width:34px;height:34px;clip-path:polygon(0 0,100% 0,100% 73%,73% 100%,0 100%)}
.project-info{container-type:inline-size}
.project-info h3{font-weight:600}.project-info>p{color:var(--muted)}
.tag{font-size:10px;border-color:#a9ab9e;padding:6px 9px}
.project-link{font-size:13px;font-weight:600;border-color:var(--ink)}
.media-open{width:42px;height:42px;clip-path:polygon(0 0,100% 0,100% 72%,72% 100%,0 100%)}
.experience-row>span:first-child{font-weight:600}
.experience-row:hover{background:var(--accent);color:var(--ink)}
.experience-row:hover .role-pending,.experience-row:hover i{color:var(--ink)}
.experiments-strip{background:var(--accent);border:2px solid var(--ink);clip-path:polygon(0 0,100% 0,100% calc(100% - 24px),calc(100% - 24px) 100%,0 100%)}
.experiments-strip h2{font-weight:700;font-size:clamp(48px,5.4vw,84px)}
.experiment-link{font-weight:600;border-bottom:2px solid var(--ink)}
.experiment-shape{font-size:285px;top:-60px;right:140px;color:#20221f22}
.site-footer{padding-top:45px;position:relative;border-top:10px solid var(--accent)}
.footer-intro>p{font-weight:700;font-size:clamp(62px,7.2vw,110px)}
.footer-mail{font-weight:500}.review-tools{border-radius:0}
.review-tools button[aria-pressed=true]{color:var(--ink)}
.leaving .page{opacity:1;transform:none}
.enhanced .arrival{display:none}
.first-arrival .arrival{display:flex;position:fixed;inset:0;z-index:40;align-items:center;justify-content:center;flex-direction:column;gap:20px;pointer-events:none;background:var(--accent);animation:stage-arrival 800ms var(--ease) both}
.first-arrival .arrival-mark{font-weight:700;font-size:clamp(100px,18vw,220px);letter-spacing:-.12em;color:var(--ink)}
.first-arrival .arrival-mark>span{color:var(--ink)}
@keyframes stage-arrival{0%,40%{clip-path:inset(0);visibility:visible}100%{clip-path:inset(0 0 100% 0);visibility:hidden}}
/* Browser owns page navigation, snapshots and geometry interpolation. */
@view-transition{navigation:auto}
.rail{view-transition-name:site-rail}
::view-transition-group(*){animation-duration:340ms;animation-timing-function:cubic-bezier(.22,1,.36,1)}
::view-transition-group(magic-art){animation-duration:480ms}
::view-transition-old(site-rail),::view-transition-new(site-rail){animation:none;mix-blend-mode:normal}
::view-transition-group(site-rail){z-index:15}
::view-transition-old(root){animation:page-fade-out 160ms ease both}
::view-transition-new(root){animation:page-fade-in 260ms ease both}
@keyframes page-fade-out{to{opacity:0}}
@keyframes page-fade-in{from{opacity:0}}
/* Decorative marks move with scroll; all content stays readable without this API. */
@media(prefers-reduced-motion:no-preference){
  @supports(animation-timeline:view()){
    .play-sigil,.scene-emblem{animation:sign-drift linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
  }
}
@keyframes sign-drift{from{transform:translateY(16px) rotate(-8deg)}to{transform:translateY(-16px) rotate(8deg)}}
/* Native dialog remains immediate to close; no browser-specific exit delay. */
dialog.art-dialog{opacity:0;transform:translateY(12px) scale(.98);transition:opacity 200ms ease,transform 240ms var(--ease);border:1px solid #ffffff40}
dialog.art-dialog[open]{opacity:1;transform:none}
@starting-style{dialog.art-dialog[open]{opacity:0;transform:translateY(12px) scale(.98)}}
.dialog-close{font-weight:600;clip-path:polygon(0 0,100% 0,100% 78%,84% 100%,0 100%)}
@container(max-width:280px){.project-info h3{font-size:43px}.project-meta{font-size:8px}.tag{font-size:9px}}
@media(max-width:850px){.rail{border-right:0;background:var(--paper)}.rail-nav a{font-size:12px;padding:11px 0}.rail-nav a.is-active:before{width:100%;height:3px;left:0;top:auto;bottom:0;transform:none}.experiment-shape{right:20px}.site-footer{padding-top:36px}html{scroll-padding-top:110px}}
@media(max-width:600px){.section-head h2{font-size:24px}.heading-arrow{width:26px;height:26px}.section-head>.eyebrow{max-width:98px}.tag{font-size:9px}.site-footer{padding-top:30px}.footer-mail{font-size:20px}.footer-intro>p{font-size:58px}.experiments-strip h2{font-size:49px}.experiment-shape{font-size:210px;right:-30px}.dialog-bar{font-size:10px;gap:12px;padding:12px}.review-tools{font-size:9px}}
@media(max-width:360px){.rail{padding-left:16px;padding-right:16px}.rail-nav{gap:8px}.rail-nav a{font-size:11px;gap:4px}.rail-nav a span{font-size:7px}}
@media(prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  html{scroll-behavior:auto}.arrival,.first-arrival .arrival{display:none!important}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .play-sigil,.scene-emblem{animation:none;transform:none}
  .enhanced .reveal.is-waiting{opacity:1;transform:none}
}

/* Temporary live type comparison tools requested by the owner. */
.font-controls[open]{width:224px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 30px);overflow:auto;padding:14px}
.font-controls fieldset{border:0;margin:14px 0 0;padding:0;min-width:0}
.font-controls legend{font:10px/1.4 Space,Arial,sans-serif;color:#d8d9d0;margin-bottom:9px}
.font-controls .font-options{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.font-options button{font:11px/1.35 Space,Arial,sans-serif;padding:8px 5px;min-height:34px}
.font-options button:last-child{grid-column:1/-1}
.font-controls .font-sample{color:var(--paper);margin:16px 0;line-height:1.6;min-height:30px;overflow-wrap:anywhere}
.font-controls .saved-index-link{font:11px/1.4 Space,Arial,sans-serif;margin-top:12px}
.font-controls .saved-index-link a:hover{text-decoration:underline}