/* GENERATED by build/port.py - do not hand-edit.
   Layer order is declared in css/fonts.css. */

@layer proto-scoped {
html{scroll-behavior:smooth}
    section[id]{scroll-margin-top:100px}
    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)}
    @keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
    @keyframes videoFade{from{opacity:0}to{opacity:1}}
    @keyframes settle{from{transform:scale(1.03)}to{transform:scale(1)}}
    @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
    @media(max-width:860px){
      :root{--section-gap:clamp(64px,10vw,96px)}
      [data-mq-hero]{height:72vh!important;min-height:480px!important}
      [data-mq="projects"]{gap:40px 14px!important}
      [data-mq="nav-links"]{gap:18px!important;flex-wrap:wrap!important;justify-content:flex-end}
      [data-mq="projects"]{grid-template-columns:1fr 1fr!important}
      [data-mq="projects"]>a{grid-column:span 1!important}
      [data-mq="projects"]>a>div:first-of-type{height:180px!important}
      [data-mq="process"]{grid-template-columns:1fr 1fr!important}
      [data-mq="process"]>div{border-left:0!important;padding-left:0!important;padding-right:16px!important}
      [data-mq="about"]{grid-template-columns:1fr!important;gap:36px!important}
      [data-mq="about"]>div{grid-column:1/-1!important}
      [data-mq="form"]{grid-template-columns:1fr!important}
      [data-mq="footer"]{grid-template-columns:1fr!important;gap:28px!important}
      [data-mq="footer"] h3{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}
      [data-mq="modal"]{grid-template-columns:1fr!important}
    }
    @media(max-width:520px){
      [data-mq="process"]{grid-template-columns:1fr!important}
    }
}

@layer proto-inline {
.hp-s1{position:relative;height:88vh;min-height:560px;overflow:hidden;background:var(--ink)}
.hp-s2{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:videoFade 1800ms cubic-bezier(.25,.46,.45,.94) both}
.hp-s3{position:absolute;inset:0;background:linear-gradient(to top, rgba(59,49,40,.45), rgba(59,49,40,0) 55%)}
.hp-s4{position:absolute;left:var(--margin-page);right:var(--margin-page);bottom:72px;color:#F4F0E8;animation:fadeUp 700ms cubic-bezier(.25,.46,.45,.94) 200ms both}
.hp-s5{font-size:var(--eyebrow);letter-spacing:.18em;text-transform:uppercase;margin:0 0 18px;color:rgba(244,240,232,.85)}
.hp-s6{font-family:var(--serif);font-weight:400;letter-spacing:-0.01em;font-size:var(--h1);line-height:1.08;margin:0;max-width:14em}
.hp-s7{padding: var(--section-gap) 0 var(--section-gap) 0}
.hp-s8{max-width:760px;margin:0 auto;text-align:center}
.hp-s9{font-size:var(--eyebrow);letter-spacing:.18em;text-transform:uppercase;color:var(--gray);margin:0 0 28px}
.hp-s10{font-family:var(--serif);font-size:var(--h2);line-height:1.45;color:var(--brown);margin:0}
.hp-s11{font-size:var(--small);letter-spacing:.06em;color:var(--gray);margin:18px 0 0}
.hp-s12{padding: 0 0 var(--section-gap) 0}
.hp-s13{margin:0 auto}
.hp-s14{font-size:var(--eyebrow);letter-spacing:.18em;text-transform:uppercase;color:var(--gray);margin:0 0 44px}
.hp-s15{display:grid;grid-template-columns:repeat(12,1fr);gap:72px 20px}
.hp-s16{grid-column:span 6;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;cursor:pointer}
.hp-s17{overflow:hidden;position:relative;background:var(--cream);height:clamp(260px,32vw,420px)}
.hp-s18{position:absolute;inset:0;background:var(--paper);opacity:.30;pointer-events:none;transition:opacity 350ms cubic-bezier(.25,.46,.45,.94)}
.hp-s19{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(20,17,14,0);opacity:0;transition:opacity 350ms cubic-bezier(.25,.46,.45,.94),background 350ms cubic-bezier(.25,.46,.45,.94)}
.hp-s20{font-size:var(--eyebrow);letter-spacing:.18em;text-transform:uppercase;color:#F4F0E8}
.hp-s21{width:100%;height:100%;object-fit:cover;display:block}
.hp-s22{font-family:var(--serif);font-weight:400;font-size:var(--h3);line-height:1.3;margin:18px 0 0}
.hp-s23{font-size:var(--small);color:var(--brown);margin:6px 0 0;max-width:52ch}
.hp-s24{font-size:var(--small);color:var(--brown);margin:4px 0 0;max-width:52ch;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hp-s25{font-size:var(--eyebrow);letter-spacing:.14em;text-transform:uppercase;color:var(--gray);margin:auto 0 0;padding-top:10px}
.hp-s26{grid-column:span 3;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;cursor:pointer}
.hp-s27{font-size:var(--small);color:var(--brown);margin:6px 0 0;max-width:52ch;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hp-s28{width:100%;height:100%;object-fit:cover;object-position:center bottom;display:block}
.hp-s29{background:var(--cream);border-top:1px solid var(--line);padding: var(--space-6) 0 var(--space-6) 0}
.hp-s30{margin:0 auto;display:grid;grid-template-columns:repeat(12,1fr);gap:44px 20px;align-items:start}
.hp-s31{grid-column:span 4}
.hp-s32{aspect-ratio:3/4;overflow:hidden;background:var(--paper)}
.hp-s33{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;transition:transform 1400ms cubic-bezier(.25,.46,.45,.94)}
.hp-s34{grid-column:6/span 7;padding-top:8px}
.hp-s35{font-size:var(--eyebrow);letter-spacing:.18em;text-transform:uppercase;color:var(--gray);margin:0 0 24px}
.hp-s36{font-family:var(--serif);font-weight:400;letter-spacing:-0.01em;font-size:var(--h2);line-height:1.15;margin:0 0 26px}
.hp-s37{margin:0 0 18px;max-width:var(--measure);color:var(--brown)}
.hp-s38{font-family:var(--serif);font-style:italic;font-size:var(--h4);line-height:1.55;color:var(--ink);margin:0 0 18px;max-width:none}
.hp-s39{margin:0;max-width:var(--measure);color:var(--brown)}
.hp-s40{margin:0;position:relative}
.hp-s41{height:82vh;min-height:520px;overflow:hidden}
.hp-s42{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1400ms cubic-bezier(.25,.46,.45,.94)}
.hp-s43{position:absolute;inset:0;background:linear-gradient(to bottom, rgba(43,29,19,.55), rgba(43,29,19,.12) 55%, rgba(43,29,19,0))}
.hp-s44{position:absolute;left:0;right:0;top:0;margin:0;padding: 88px 0 0 0}
.hp-s45{max-width:820px;margin:0 auto}
.hp-s46{font-family:var(--serif);font-size:var(--h2);line-height:1.45;font-weight:400;margin:0;color:#F4F0E8}
.hp-s47{display:block;margin-top:24px;font-style:normal;font-size:var(--small);color:rgba(244,240,232,.75);letter-spacing:.06em}
.hp-s48{display:block;font-family:var(--sans);font-weight:500;color:#F4F0E8;text-transform:uppercase;font-size:var(--eyebrow);letter-spacing:.18em;margin-bottom:4px}
.hp-s49{max-width:720px;margin:0 auto}
.hp-s50{font-size:var(--eyebrow);letter-spacing:.18em;text-transform:uppercase;color:var(--gray);margin:0 0 14px}
.hp-s51{font-family:var(--serif);font-weight:400;letter-spacing:-0.01em;font-size:var(--h2);line-height:1.15;margin:0}
.hp-s52{margin:18px 0 0;max-width:var(--measure);color:var(--gray)}
.hp-s53{margin-top:32px;display:grid;grid-template-columns:1fr 1fr;gap:16px 40px;align-items:end}
.hp-s54{display:block;font-size:var(--eyebrow);letter-spacing:.18em;text-transform:uppercase;color:var(--gray);margin-bottom:8px}
.hp-s55{color:#A34B3A}
.hp-s56{width:100%;box-sizing:border-box;height:40px;border:0;border-bottom:1px solid var(--line);background:transparent;font-family:var(--sans);font-size:var(--body);line-height:1.4;color:var(--ink);padding:10px 0;border-radius:0}
.hp-s57{width:100%;box-sizing:border-box;height:40px;border:0;border-bottom:1px solid var(--line);background:transparent;font-family:var(--sans);font-size:var(--body);line-height:1.4;color:var(--ink);padding:10px 0;border-radius:0;appearance:none;padding-right:26px;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSI2Ij48cGF0aCBkPSJNMCAwbDUgNiA1LTZ6IiBmaWxsPSIjOEE3QTZBIi8+PC9zdmc+);background-repeat:no-repeat;background-position:right center;cursor:pointer}
.hp-s58{grid-column:1/-1}
.hp-s59{display:block;font-size:var(--eyebrow);letter-spacing:.18em;text-transform:uppercase;color:var(--gray);margin-bottom:4px}
.hp-s60{margin:0 0 6px;font-size:var(--eyebrow);letter-spacing:.02em;color:var(--gray);text-transform:none}
.hp-s61{width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;font-family:var(--sans);font-size:var(--body);color:var(--ink);padding:10px 0;border-radius:0;resize:vertical;min-height:110px;line-height:1.6}
.hp-s62{margin:6px 0 0;font-size:var(--eyebrow);letter-spacing:.06em;color:var(--gray)}
.hp-s63{grid-column:1/-1;justify-self:start;font-family:var(--sans);font-size:var(--small);letter-spacing:.06em;background:var(--ink);color:var(--paper);border:1px solid var(--ink);padding:15px 34px;cursor:pointer;transition:transform 250ms cubic-bezier(.25,.46,.45,.94),background 250ms cubic-bezier(.25,.46,.45,.94)}
.hp-s64{grid-column:1/-1;margin:6px 0 0;font-size:var(--small);color:var(--gray)}
.hp-s65{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
}

@layer proto-state {
.hp-h1:hover,a:hover .hp-h1,a:focus-visible .hp-h1{opacity:1;background:rgba(20,17,14,.58)}
.hp-h2:hover,a:hover .hp-h2,a:focus-visible .hp-h2{transform:scale(1.04)}
.hp-h3:hover,a:hover .hp-h3,a:focus-visible .hp-h3{transform:translateY(-2px);background:var(--brown);border-color:var(--brown)}
.hp-h4:hover,a:hover .hp-h4,a:focus-visible .hp-h4{color:var(--brown)}
.hp-f1:focus{outline:none;border-bottom-color:var(--ink)}
}

/* --- chrome, ported from the export --- */
/* 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 {

}

@layer proto-inline {
.hc-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)}
.hc-s2{margin: 0px auto; padding: 0 0 0 0; height: 76px; display: flex; align-items: center; justify-content: space-between}
.hc-s3{height: 26px; display: block}
.hc-s4{display: flex; gap: 40px; align-items: center}
.hc-s5{font-size: var(--small); letter-spacing: 0.06em; text-decoration: none; color: var(--brown)}
.hc-s6{background: var(--ink); color: var(--cream); padding: 0px}
.hc-s7{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}
.hc-s8{height: 22px; width: auto; filter: invert(93%) sepia(8%) saturate(300%) hue-rotate(340deg) brightness(103%)}
.hc-s9{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}
.hc-s10{display: flex; flex-direction: column; gap: 12px; font-size: var(--small)}
.hc-s11{color: var(--cream); text-decoration: none}
.hc-s12{transform: translateX(-18px)}
.hc-s13{color: rgba(234, 227, 214, 0.85)}
.hc-s14{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 {
.hc-h1:hover,a:hover .hc-h1,a:focus-visible .hc-h1{color:var(--ink)}
.hc-h2:hover,a:hover .hc-h2,a:focus-visible .hc-h2{text-decoration:underline;text-underline-offset:3px}
}