/* Northlane preview: Apple clarity, tactile detail and finite, purposeful motion. */
:root{--motion-settle:cubic-bezier(.16,1,.3,1);--motion-response:220ms;--motion-arrive:700ms}
.hero-in .hero-meta{color:var(--muted)}
.lane-track{border-radius:12px}
.lanes{overflow:visible}.lane{min-width:0}.lane-tag{margin-bottom:14px}
.lane-yours{background:var(--color-accent-soft);border-radius:16px}
.hero-project strong{font-weight:600}.hero-project{text-decoration:none}
.craft-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px 64px;align-items:center}
.craft-layout>.head{grid-column:1/-1;margin-bottom:0}
.craft-image{margin:0;overflow:clip;border-radius:16px;aspect-ratio:4/5;background:var(--paper)}
.craft-image img{width:100%;height:100%;object-fit:cover}
.craft-layout>.rows{grid-template-columns:minmax(0,1fr);gap:28px}
.craft-layout>.after{grid-column:2;margin-top:0;justify-self:start}
.nav a,.nav a[aria-current]{position:relative;text-decoration:none}
.nav a::after{content:'';position:absolute;inset:auto 0 -5px;height:2px;background:currentColor;transform:scaleX(0);transform-origin:left}
.nav a[aria-current=page]::after,.nav a:hover::after,.nav a:focus-visible::after{transform:scaleX(1)}
@media(prefers-reduced-motion:no-preference){
 .hero-in{animation:none}
 .hero-in>div:first-child{animation:refine-arrive var(--motion-arrive) var(--motion-settle) both}
 .hero-in>div:last-child{animation:refine-arrive var(--motion-arrive) var(--motion-settle) 90ms both}
 .hero .lane{animation:refine-arrive 850ms var(--motion-settle) 160ms both}
 .hero .lane:nth-child(2){animation-delay:240ms}.hero .lane:nth-child(3){animation-delay:320ms}
 .hero .lane-track img:first-child{animation:refine-glimpse 3.9s var(--motion-settle) both}
 .lane-yours{animation:refine-arrive 850ms var(--motion-settle) 380ms both}
 .js [data-reveal].is-in,.js [data-words].is-in{animation:refine-arrive 650ms var(--motion-settle) var(--d,0ms) both}
 .js [data-uncover].is-in img{animation:refine-image 1100ms var(--motion-settle) both;transition:none}
 .craft-image.is-in img{animation:refine-image 3.9s var(--motion-settle) both}
 .pill,.hero-project,.concept-preview-grid>a,.text-link .arr,.next .arr{transition:transform var(--motion-response) var(--motion-settle),background-color var(--motion-response),color var(--motion-response)}
 .nav a::after,.plus::after{transition:transform var(--motion-response) var(--motion-settle)}
 .pill:active{transform:scale(.97)}
 .drawer.is-open{animation:refine-menu 300ms var(--motion-settle) both}
 .backdrop.is-open{animation:refine-backdrop 200ms ease-out both}
 .panel:not([hidden]) .panel-grid{animation:refine-arrive 400ms var(--motion-settle) both}
 @media(hover:hover) and (pointer:fine){
  .pill:hover{transform:translateY(-2px)}
  .concept-preview-grid>a:hover,.hero-project:hover{transform:translateY(-4px)}
  .text-link:hover .arr,.next:hover .arr{transform:translateX(4px)}
 }
 @keyframes refine-arrive{from{opacity:.25;transform:translateY(18px)}to{opacity:1;transform:none}}
 @keyframes refine-image{from{transform:scale(1.045);opacity:.6}to{transform:scale(1);opacity:1}}
 @keyframes refine-glimpse{from{transform:translateY(0)}to{transform:translateY(-70px)}}
 @keyframes refine-menu{from{transform:translateX(-24px);opacity:.5}to{transform:none;opacity:1}}
 @keyframes refine-backdrop{from{opacity:0}to{opacity:1}}
}
@media(max-width:899px){.craft-layout{gap:32px}.craft-layout>.rows{gap:24px}.craft-layout .rows h3{font-size:23px}}
@media(max-width:639px){
 .craft-layout{grid-template-columns:minmax(0,1fr);gap:28px}
 .craft-image{aspect-ratio:3/2}.craft-layout>.after{grid-column:1}
 .lane-track{border-radius:8px}.lane-tag{margin-bottom:10px}
}

/* Real project views explain responsive design better than abstract artwork. */
.craft-image{aspect-ratio:auto;display:grid;grid-template-columns:minmax(0,3fr) minmax(0,1fr);gap:16px;align-items:center;padding:24px;background:var(--paper)}
.craft-image img{height:auto;object-fit:contain;border-radius:8px}.craft-image figcaption{grid-column:1/-1;font-size:15px;color:var(--muted)}
@media(max-width:639px){.craft-image{padding:16px;gap:12px}}