@layer motion {
  :root {--ease-fluid:cubic-bezier(.22,1,.36,1)}
  .site-header {transition:background .5s,box-shadow .5s}
  .site-header.is-scrolled {background:#fafafbe8;box-shadow:0 8px 30px #171c2906}
  .site-header::after {content:"";position:absolute;bottom:-1px;left:0;right:0;height:1px;background:linear-gradient(90deg,#a1bded,#0068df);transform-origin:left;transform:scaleX(var(--scroll-progress,0));opacity:.65}
  .project-grid {grid-template-columns:1fr;gap:22px}
  .project-story {display:grid;grid-template-columns:1.12fr .88fr;min-height:360px;overflow:hidden;isolation:isolate;transition:box-shadow .6s var(--ease-fluid)}
  .project-story:hover {box-shadow:0 14px 38px #172a3e0a}
  .project-story-copy {padding:36px 40px;min-width:0;position:relative;z-index:2}
  .project-story-meta {display:flex;gap:14px;align-items:center;font-size:9px;color:#65736b;letter-spacing:.025em;margin-bottom:12px}
  .project-story-meta>span:first-child {font-variant-numeric:tabular-nums;color:#788c80}
  .project-story h3 {font-size:42px;line-height:1.06;font-weight:600;letter-spacing:-.06em}
  .project-story h3>a {display:inline-flex;align-items:center;gap:20px}
  .project-story h3 .icon {width:19px;height:19px;opacity:0;transform:translate(-6px,6px);transition:opacity .4s,transform .5s var(--ease-fluid)}
  .project-story:hover h3 .icon,.project-story h3>a:focus-visible .icon {opacity:1;transform:translate(0,0)}
  .project-story-list {margin:24px 0 0;display:grid;gap:12px}
  .project-story-list>div {display:grid;grid-template-columns:68px 1fr;gap:14px}
  .project-story-list dt {padding-top:3px;font-size:9px;font-weight:550;letter-spacing:.06em;text-transform:uppercase;color:#67726b}
  .project-story-list dd {margin:0;font-size:13px;line-height:1.6;letter-spacing:-.015em;color:#404c44;max-width:460px}
  .project-story-links {display:flex;flex-wrap:wrap;gap:12px 26px;margin-top:24px;font-size:11px;line-height:1.5}
  .project-story-links>a {display:inline-flex;align-items:center;gap:8px;position:relative;min-height:28px}
  .project-story-links>a::after {content:"";height:1px;position:absolute;bottom:0;left:0;right:0;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease-fluid);opacity:.45}
  .project-story-links>a:hover::after {transform:scaleX(1)}
  .project-story-links .icon {width:12px;height:12px;transition:transform .4s var(--ease-fluid)}
  .project-story-links>a:hover .icon {transform:translate(2px,-2px)}
  .project-story-links .story-detail-link {color:#68746d}
  .project-story-visual {position:relative;display:grid;place-items:center;min-width:0;overflow:hidden;padding:36px 24px 43px;min-height:330px}
  .project-story-visual::before {content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,#ffffff5c,transparent 70%);z-index:-1}
  .project-story-visual>a {width:100%;height:270px;display:grid;place-items:center;min-width:0}
  .project-story-visual .app-gallery {height:270px;gap:22px;transition:transform .7s var(--ease-fluid)}
  .project-story:hover .project-story-visual .app-gallery {transform:translateY(-5px)}
  .project-story-visual .website-capture {max-width:390px;transition:transform .7s var(--ease-fluid)}
  .project-story:hover .website-capture {transform:translateY(-5px)}
  .project-story .preview-source {left:auto;right:22px;bottom:16px;font-size:8px}
  .project-story.theme-dark .project-story-meta {color:#b6c8bd}
  .project-story.theme-dark .project-story-meta>span:first-child {color:#9cb4a5}
  .project-story.theme-dark .project-story-list dt {color:#a6bfaf}
  .project-story.theme-dark .project-story-list dd {color:#d3dfd7}
  .project-story.theme-dark .story-detail-link {color:#b6c8bd}
  .project-story.theme-dark .project-story-visual::before {background:radial-gradient(ellipse,#345b4440,transparent 70%)}
  .project-case-study {display:grid;grid-template-columns:repeat(3,1fr);gap:50px;padding-block:80px 95px}
  .project-case-study article {border-top:1px solid var(--line);padding-top:24px}
  .project-case-study .eyebrow {font-size:10px;letter-spacing:.1em}
  .project-case-study h2 {font-size:23px;line-height:1.5;letter-spacing:-.035em;font-weight:450;margin-top:20px}
  .reveal-ready [data-reveal] {transform:translateY(28px);filter:blur(3px);transition:opacity .8s var(--ease-fluid),transform 1s var(--ease-fluid),filter .9s var(--ease-fluid)}
  .reveal-ready [data-reveal].is-visible {transform:translateY(0);filter:blur(0)}
  .button .icon {transition:transform .5s var(--ease-fluid)}
  .button:hover .icon {transform:translateX(3px)}
  .filter-button {transition:background .4s,color .4s,box-shadow .4s}
  .filter-button.active {box-shadow:0 3px 10px #1822370b}
  @keyframes hero-enter {from {opacity:0;transform:translateY(22px)}to {opacity:1;transform:translateY(0)}}
  @media(max-width:1100px) {
    .project-story-copy {padding:32px}
    .project-story-list>div {grid-template-columns:62px 1fr;gap:10px}
    .project-story-visual .app-gallery,.project-story-visual>a {height:245px}
    .project-story-visual .app-gallery {gap:16px}
    .project-story h3 {font-size:37px}
    .project-case-study {gap:30px}
  }
  @media(max-width:850px) {
    .project-story {grid-template-columns:1.25fr .75fr}
    .project-story-copy {padding:30px}
    .project-story-visual {padding-inline:12px}
    .project-story-visual .app-gallery {gap:10px}
    .project-story-visual .app-gallery,.project-story-visual>a {height:210px}
    .project-story-list dd {font-size:12px}
    .project-story h3 {font-size:35px}
    .project-case-study h2 {font-size:19px}
  }
  @media(max-width:650px) {
    .project-story {grid-template-columns:1fr;min-height:0}
    .project-story-copy {padding:28px 26px 10px}
    .project-story-meta {font-size:8px;margin-bottom:12px}
    .project-story h3 {font-size:35px}
    .project-story h3 .icon {width:15px;height:15px;opacity:1;transform:none}
    .project-story-list {margin-top:23px;gap:12px}
    .project-story-list>div {grid-template-columns:57px 1fr;gap:10px}
    .project-story-list dt {font-size:8px;letter-spacing:.02em;padding-top:3px}
    .project-story-list dd {font-size:12px;line-height:1.65}
    .project-story-links {margin-top:18px;font-size:10px;gap:10px 22px}
    .project-story-visual {min-height:220px;height:220px;padding:16px 24px 29px}
    .project-story-visual .app-gallery,.project-story-visual>a {height:170px}
    .project-story-visual .app-gallery {gap:22px}
    .project-story-visual .website-capture {max-width:240px}
    .project-story .preview-source {bottom:12px;right:17px;font-size:7px}
    .project-case-study {grid-template-columns:1fr;gap:30px;padding-block:55px 65px}
    .project-case-study article {padding-top:20px}
    .project-case-study .eyebrow {font-size:9px}
    .project-case-study h2 {font-size:22px;line-height:1.5;margin-top:16px}
  }
  @media(max-width:380px) {
    .project-story-copy {padding-inline:22px}
    .project-story h3 {font-size:31px}
    .project-story-list>div {grid-template-columns:52px 1fr}
    .project-story-list dd {font-size:11px}
  }
  @media(prefers-reduced-motion:reduce) {
    .reveal-ready [data-reveal] {filter:none;transform:none;opacity:1;transition:none}
    .project-story:hover .app-gallery,.project-story:hover .website-capture {transform:none}
    .button:hover .icon,.hero-motion-toggle:hover {transform:none}
  }
  @media print {.project-story {break-inside:avoid}}
}