/* GENERATED by build/port_captured.py - do not hand-edit.
   Every rule is a verbatim port of an inline style, style-hover or
   style-focus from the Claude Design prototype.
   Layer order is declared in css/fonts.css; it reproduces the
   prototype's real precedence, where inline styles beat the page's own
   stylesheet and JS-applied hover beats both. */

@layer proto-scoped {
html{scroll-behavior:smooth}
    body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:var(--body);line-height:1.7;-webkit-font-smoothing:antialiased}
    a{color:var(--ink)}
    a:hover{color:var(--brown)}
    @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
    @media(max-width:860px){
      [data-mq="nav-links"]{gap:18px!important;flex-wrap:wrap!important;justify-content:flex-end}
      [data-mq="projects"]{grid-template-columns:1fr 1fr!important;gap:32px 14px!important}
      [data-mq="projects"]>a{grid-column:span 1!important}
      [data-mq="projects"]>a>div:first-of-type{height:180px!important}
      [data-mq="footer"]{grid-template-columns:1fr!important;gap:28px!important}
      [data-mq="footer"] h2{margin-bottom:12px!important}
      [data-mq="footer"]>div{transform:none!important}
      [data-mq="footer-bottom"]{flex-direction:column!important;gap:6px!important;align-items:flex-start!important}
    }
}

@layer proto-inline {
.pj-s1{position: fixed; top: 0px; left: 0px; right: 0px; z-index: 20; background: rgba(244, 240, 232, 0.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line)}
.pj-s2{margin: 0px auto; padding: 0 0 0 0; height: 76px; display: flex; align-items: center; justify-content: space-between}
.pj-s3{height: 26px; display: block}
.pj-s4{display: flex; gap: 40px; align-items: center}
.pj-s5{font-size: var(--small); letter-spacing: 0.06em; text-decoration: none; color: var(--brown)}
.pj-s6{padding: calc(76px + var(--section-gap)) 0 var(--section-gap) 0}
.pj-s7{margin: 0px auto}
.pj-s8{font-size: var(--eyebrow); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gray); margin: 0px 0px 14px}
.pj-s9{font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; font-size: var(--h2); line-height: 1.15; margin: 0px 0px 64px}
.pj-s10{display: grid; grid-template-columns: repeat(24, 1fr); gap: 72px 20px}
.pj-s11{grid-column: span 10; text-decoration: none; color: var(--ink); display: flex; flex-direction: column; cursor: pointer}
.pj-s12{overflow: hidden; position: relative; background: var(--cream); height: clamp(240px, 26vw, 380px)}
.pj-s13{position: absolute; inset: 0px; background: var(--paper); opacity: 0.3; pointer-events: none; z-index: 1}
.pj-s14{position: absolute; inset: 0px; z-index: 2; display: flex; align-items: center; justify-content: center; background: rgba(20, 17, 14, 0); opacity: 0; transition: opacity 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94)}
.pj-s15{font-size: var(--eyebrow); letter-spacing: 0.18em; text-transform: uppercase; color: rgb(244, 240, 232)}
.pj-s16{width: 100%; height: 100%; object-fit: cover; display: block}
.pj-s17{font-family: var(--serif); font-weight: 400; font-size: var(--h4); line-height: 1.3; margin: 18px 0px 0px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis}
.pj-s18{font-size: var(--eyebrow); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray); margin: 8px 0px 0px}
.pj-s19{grid-column: span 7; text-decoration: none; color: var(--ink); display: flex; flex-direction: column; cursor: pointer}
.pj-s20{background: var(--ink); color: var(--cream); padding: 0px}
.pj-s21{margin: 0px auto; padding: var(--space-5) 0 var(--space-4) 0; display: grid; grid-template-columns: 1.9fr 1fr 1fr 1fr; gap: 24px; align-items: start}
.pj-s22{height: 22px; width: auto; filter: invert(93%) sepia(8%) saturate(300%) hue-rotate(340deg) brightness(103%)}
.pj-s23{font-size: var(--eyebrow); font-family: var(--sans); font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(234, 227, 214, 0.65); margin: 0px 0px 30px}
.pj-s24{display: flex; flex-direction: column; gap: 12px; font-size: var(--small)}
.pj-s25{color: var(--cream); text-decoration: none}
.pj-s26{transform: translateX(-18px)}
.pj-s27{color: rgba(234, 227, 214, 0.85)}
.pj-s28{margin: 0px auto; padding: var(--space-4) 0 var(--space-4) 0; display: flex; justify-content: space-between; gap: 16px; font-size: var(--small); letter-spacing: 0.02em; color: rgba(234, 227, 214, 0.55)}
}

@layer proto-state {
.pj-h1:hover,a:hover .pj-h1,a:focus-visible .pj-h1{color:var(--ink)}
.pj-h2:hover,a:hover .pj-h2,a:focus-visible .pj-h2{opacity:1;background:rgba(20,17,14,.58)}
.pj-h3:hover,a:hover .pj-h3,a:focus-visible .pj-h3{text-decoration:underline;text-underline-offset:3px}
}