/* PJM: self-hosted fonts (latin subsets, swap) */ @font-face{font-family:’Archivo’;font-style:normal;font-weight:400;font-display:swap;src:url(/wp-content/uploads/fonts/archivo-400-latin.woff2) format(‘woff2′);unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:’Archivo’;font-style:normal;font-weight:500;font-display:swap;src:url(/wp-content/uploads/fonts/archivo-500-latin.woff2) format(‘woff2′);unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:’Archivo’;font-style:normal;font-weight:600;font-display:swap;src:url(/wp-content/uploads/fonts/archivo-600-latin.woff2) format(‘woff2′);unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:’IBM Plex Mono’;font-style:normal;font-weight:400;font-display:swap;src:url(/wp-content/uploads/fonts/ibmplexmono-400-latin.woff2) format(‘woff2′);unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:’IBM Plex Mono’;font-style:normal;font-weight:500;font-display:swap;src:url(/wp-content/uploads/fonts/ibmplexmono-500-latin.woff2) format(‘woff2′);unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:’Spectral’;font-style:italic;font-weight:400;font-display:swap;src:url(/wp-content/uploads/fonts/spectral-400i-latin.woff2) format(‘woff2′);unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:’Spectral’;font-style:normal;font-weight:300;font-display:swap;src:url(/wp-content/uploads/fonts/spectral-300-latin.woff2) format(‘woff2′);unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:’Spectral’;font-style:normal;font-weight:400;font-display:swap;src:url(/wp-content/uploads/fonts/spectral-400-latin.woff2) format(‘woff2′);unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:’Spectral’;font-style:normal;font-weight:500;font-display:swap;src:url(/wp-content/uploads/fonts/spectral-500-latin.woff2) format(‘woff2′);unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:’Spectral’;font-style:normal;font-weight:600;font-display:swap;src:url(/wp-content/uploads/fonts/spectral-600-latin.woff2) format(‘woff2’);unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} {“prerender”:[{“where”:{“and”:[{“href_matches”:”/*”},{“not”:{“href_matches”:”/wp-admin/*”}}]},”eagerness”:”moderate”}]} /* PJM: neutralize Hello Elementor reset.css form-control chrome */ [type=button],[type=submit],button{background-color:transparent;border:0;border-radius:0;color:inherit;padding:0;font:inherit;text-align:inherit;transition:none;white-space:normal} [type=button]:focus,[type=button]:hover,[type=submit]:focus,[type=submit]:hover,button:focus,button:hover{background-color:transparent;color:inherit;text-decoration:none} input[type=date],input[type=email],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],select,textarea{border:0;border-radius:0;padding:0;transition:none;background:transparent} input[type=date]:focus,input[type=email]:focus,input[type=number]:focus,input[type=password]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=time]:focus,input[type=url]:focus,select:focus,textarea:focus{border-color:transparent} select{display:inline-block} :root{ –paper:#EDEEEA;–paper-2:#E3E4DE;–ink:#16181A;–ink-2:#3B3F42;–muted:#5D6265; –line:rgba(22,24,26,.16);–line-soft:rgba(22,24,26,.08); –accent:#7F5F36;–on-dark:#F3F2EE;–on-dark-soft:rgba(243,242,238,.66); –serif:”Spectral”,Georgia,”Times New Roman”,serif; –sans:”Archivo”,system-ui,-apple-system,”Segoe UI”,Helvetica,Arial,sans-serif; –mono:”IBM Plex Mono”,ui-monospace,”SF Mono”,Menlo,Consolas,monospace; –maxw:1340px;–gutter:clamp(20px,5.2vw,68px);–section:clamp(76px,11vw,176px); –ease:cubic-bezier(.22,.61,.36,1);–d-fast:.45s;–d-mid:.7s;–header-h:64px; }*,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(–header-h) + 24px)} body{background:var(–paper);color:var(–ink);font-family:var(–sans);font-weight:400;font-size:clamp(15px,1.02vw,16.5px);line-height:1.62;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-feature-settings:”kern” 1,”liga” 1,”calt” 1} img{display:block;max-width:100%}a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;border:0;background:none;cursor:pointer} ul{list-style:none}::selection{background:var(–ink);color:var(–paper)} :focus-visible{outline:2px solid var(–accent);outline-offset:3px} .wrap{max-width:var(–maxw);margin:0 auto;padding-inline:var(–gutter)} p{text-wrap:pretty} @view-transition{navigation:auto} ::view-transition-old(root){animation:vt-fade-out .25s var(–ease) both} ::view-transition-new(root){animation:vt-fade-in .35s var(–ease) both} @keyframes vt-fade-out{from{opacity:1}to{opacity:0}} @keyframes vt-fade-in{from{opacity:0}to{opacity:1}} .eyebrow{font-family:var(–mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(–muted);display:inline-flex;align-items:center;gap:.7em} .eyebrow::before{content:””;width:18px;height:1px;background:var(–accent);display:inline-block} .display{font-family:var(–serif);font-weight:300;line-height:1.06;letter-spacing:-.012em;color:var(–ink);text-wrap:balance} .lead{font-family:var(–serif);font-weight:300;font-size:clamp(23px,2.9vw,40px);line-height:1.22;letter-spacing:-.01em;text-wrap:balance}.hb-site-header{position:sticky;top:0;z-index:60;background:var(–paper);border-bottom:1px solid var(–line)} .header__inner{max-width:var(–maxw);margin:0 auto;padding:clamp(16px,1.9vw,24px) var(–gutter);display:flex;align-items:center;justify-content:space-between;gap:24px} .brand{display:flex;align-items:center;line-height:1;flex:0 0 auto;color:inherit} .brand__lockup{display:flex;flex-direction:column;gap:2px;align-items:flex-start} .brand__line1{display:flex;align-items:baseline;gap:.5em;line-height:1} .brand__name{font-family:var(–serif);font-weight:600;font-size:clamp(20px,2vw,26px);letter-spacing:.18em;text-transform:uppercase} .brand__mark{font-family:var(–mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;opacity:.7} .brand__est{font-family:var(–mono);font-size:9px;letter-spacing:.3em;text-transform:uppercase;opacity:.6} .nav{display:flex;align-items:center;gap:clamp(20px,2.4vw,40px)} .nav__link{font-size:12px;letter-spacing:.13em;text-transform:uppercase;position:relative;padding-block:6px;transition:color var(–d-fast) var(–ease)} .nav__link::after{content:””;position:absolute;left:0;right:100%;bottom:0;height:1px;background:currentColor;transition:right var(–d-fast) var(–ease)} .nav__link:hover::after,.nav__link.active::after{right:0} .nav__link.active{color:var(–accent)} .header__cta{font-family:var(–mono);font-size:12px;letter-spacing:.13em;text-transform:uppercase} .nav-toggle{display:none;width:30px;height:18px;position:relative} .nav-toggle span{position:absolute;left:0;right:0;height:2px;background:currentColor;transition:transform var(–d-fast) var(–ease),opacity var(–d-fast) var(–ease)} .nav-toggle span:nth-child(1){top:0}.nav-toggle span:nth-child(2){top:8px}.nav-toggle span:nth-child(3){top:16px} body.menu-open .nav-toggle span:nth-child(1){transform:translateY(8px) rotate(45deg)} body.menu-open .nav-toggle span:nth-child(2){opacity:0} body.menu-open .nav-toggle span:nth-child(3){transform:translateY(-8px) rotate(-45deg)} body.menu-open{overflow:hidden} .nav-overlay{position:fixed;inset:0;z-index:55;background:var(–paper);display:flex;flex-direction:column;justify-content:center;padding:calc(var(–header-h) + clamp(24px,4vw,44px)) var(–gutter) clamp(30px,5vw,60px);opacity:0;pointer-events:none;overflow-y:auto;transition:opacity var(–d-fast) var(–ease)} body.menu-open .nav-overlay{opacity:1;pointer-events:auto} .ov-item{border-bottom:1px solid var(–line);padding:.14em 0 .28em} .ov-item:last-child{border-bottom:0} .ov-primary{display:block;font-family:var(–serif);font-weight:300;font-size:clamp(30px,8vw,52px);color:var(–ink);transition:color var(–d-fast) var(–ease);line-height:1.1} .ov-primary:hover{color:var(–accent)} .ov-meta{margin-top:auto;padding-top:32px;font-family:var(–mono);font-size:11px;letter-spacing:.14em;color:var(–muted);text-transform:uppercase}@media (max-height:560px){.nav-overlay{justify-content:flex-start;padding-top:64px}.nav-overlay .ov-primary,.ov-primary{font-size:clamp(20px,6.4vh,34px);line-height:1.12}.nav-overlay .ov-item,.ov-item{padding:.05em 0 .12em}.nav-overlay .ov-meta,.ov-meta{margin-top:24px;padding-top:16px}}.hb-site-footer{background:var(–ink);color:var(–on-dark);padding-block:clamp(54px,7vw,96px);margin-top:clamp(72px,10vw,140px)} .footer__top{max-width:var(–maxw);margin:0 auto;padding:0 var(–gutter);display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;align-items:start} .footer__brand .brand__name,.footer__brand .brand__est{color:var(–on-dark)} .footer__brand .brand__mark{opacity:.5} .footer__tag{color:var(–on-dark-soft);font-family:var(–serif);font-weight:300;font-size:clamp(18px,2vw,24px);max-width:20ch;margin-top:22px;line-height:1.3} .footer__col h3{font-family:var(–mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(–on-dark-soft);margin-bottom:18px} .footer__col ul{display:flex;flex-direction:column;gap:11px} .footer__col a{font-size:13.5px;color:var(–on-dark);letter-spacing:.02em;transition:color var(–d-fast) var(–ease)} .footer__col a:hover{color:var(–accent)} .foot-sub{display:flex;flex-direction:column;gap:7px;margin-top:6px;padding-left:12px;border-left:1px solid rgba(243,242,238,.14)} .foot-sub a{font-size:12px;color:rgba(243,242,238,.5)} .foot-sub a:hover{color:var(–accent)} .footer__bottom{max-width:var(–maxw);margin:clamp(48px,6vw,80px) auto 0;padding:26px var(–gutter) 0;border-top:1px solid rgba(243,242,238,.16);display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap} .footer__meta{font-family:var(–mono);font-size:11px;letter-spacing:.08em;color:var(–on-dark-soft)} .footer__legal{display:flex;align-items:center;gap:6px 22px;flex-wrap:wrap} .footer__legal-links{display:inline-flex;align-items:center;gap:22px;flex-wrap:wrap} .footer__legal-links a{font-family:var(–mono);font-size:11px;letter-spacing:.08em;color:var(–on-dark-soft);transition:color var(–d-fast) var(–ease)} .footer__legal-links a:hover,.footer__legal-links a:focus-visible{color:var(–accent)} .footer__social{display:inline-flex;align-items:center;gap:16px} .footer__social a{display:inline-flex;color:var(–on-dark-soft);transition:color var(–d-fast) var(–ease)} .footer__social a:hover{color:var(–accent)} .footer__social svg{width:17px;height:17px;display:block;fill:currentColor} .to-top{font-family:var(–mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(–on-dark);display:inline-flex;align-items:center;gap:.6em} .to-top:hover{color:var(–accent)}.page-shell{padding-block:clamp(56px,9vw,112px);min-height:50vh} .shell-eyebrow{font-family:var(–mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(–muted);display:inline-flex;align-items:center;gap:.7em;margin-bottom:20px} .shell-eyebrow::before{content:””;width:18px;height:1px;background:var(–accent);display:inline-block} .shell-title{font-family:var(–serif);font-weight:300;font-size:clamp(32px,5vw,56px);letter-spacing:-.015em;line-height:1.06;margin-bottom:clamp(28px,4vw,48px)} .shell-body{font-size:clamp(15px,1.1vw,17px);color:var(–ink-2);max-width:60ch;line-height:1.74} .shell-body p+p{margin-top:1.2em} .shell-body strong{font-weight:500;color:var(–ink)} /* lazy media */ .media{position:relative;overflow:hidden;background:var(–paper)} .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .55s var(–ease)} .media img.loaded{opacity:1} /* work grid */ .work-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.6vw,44px);margin-top:clamp(40px,6vw,72px)} .plate–feature{grid-column:1/-1} .plate__media{position:relative;overflow:hidden;aspect-ratio:4/5;background:var(–paper)} .plate–feature .plate__media{aspect-ratio:16/9} .plate__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .55s var(–ease),transform var(–d-mid) var(–ease)} .plate__media img.loaded{opacity:1} .plate:hover .plate__media img.loaded{transform:scale(1.045)} .plate__cap{display:flex;justify-content:space-between;gap:18px;align-items:baseline;border-top:1px solid var(–line);padding-top:14px;margin-top:14px} .plate__name{font-family:var(–serif);font-weight:400;font-size:clamp(19px,1.9vw,25px);letter-spacing:-.005em} .plate__no{font-family:var(–mono);font-size:11px;letter-spacing:.14em;color:var(–accent)} .plate__meta{font-family:var(–mono);font-size:11px;letter-spacing:.05em;color:var(–muted);text-align:right;line-height:1.85;white-space:nowrap} /* ── work: section divider between featured and full portfolio ── */ .work-divider{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap; margin-top:clamp(80px,11vw,150px);padding-bottom:clamp(20px,2.4vw,32px);border-bottom:1px solid var(–line)} .work-divider__title{font-family:var(–serif);font-weight:300;font-size:clamp(24px,3.4vw,40px);letter-spacing:-.012em;line-height:1.05} .work-divider__count{font-family:var(–mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(–muted)} /* ── work: alternating editorial portfolio (F&S-style staggered) ── CSS columns flow items in source order and collapse to one column on mobile automatically. Landscape & portrait cells create the rhythm. */ .portfolio{columns:2;column-gap:clamp(24px,3.4vw,60px);margin-top:clamp(40px,6vw,72px)} .pf-item{display:inline-block;width:100%;margin-bottom:clamp(28px,4vw,64px);break-inside:avoid} .pf-item__media{position:relative;overflow:hidden;background:var(–paper)} .pf-item__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0; transition:opacity .55s var(–ease),transform var(–d-mid) var(–ease)} .pf-item__media img.loaded{opacity:1} .pf-item:hover .pf-item__media img.loaded{transform:scale(1.04)} .pf-item–land .pf-item__media{aspect-ratio:4/3} .pf-item–port .pf-item__media{aspect-ratio:3/4} .pf-item__cap{display:flex;justify-content:space-between;gap:16px;align-items:baseline; border-top:1px solid var(–line);padding-top:12px;margin-top:13px} .pf-item__name{font-family:var(–serif);font-weight:400;font-size:clamp(16px,1.5vw,21px);letter-spacing:-.005em} .pf-item__meta{font-family:var(–mono);font-size:10.5px;letter-spacing:.05em;color:var(–muted); text-align:right;line-height:1.8;white-space:nowrap} /* project page */ .project-hero{width:100%;aspect-ratio:16/9;position:relative;overflow:hidden;background:var(–paper)} .project-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s var(–ease)} .project-hero img.loaded{opacity:1} .project-header{display:flex;justify-content:space-between;align-items:baseline;gap:32px;flex-wrap:wrap;margin-bottom:clamp(40px,6vw,72px)} .project-facts{font-family:var(–mono);font-size:11px;letter-spacing:.06em;color:var(–muted);text-align:right;line-height:2.05;flex-shrink:0} .project-facts a{color:var(–muted);border-bottom:1px solid transparent;transition:color var(–d-fast),border-color var(–d-fast)} .project-facts a:hover{color:var(–accent);border-color:var(–accent)} .project-facts .award{color:var(–accent)} .project-tagline{font-family:var(–serif);font-style:italic;font-weight:300;font-size:clamp(16px,1.5vw,21px);color:var(–ink-2);margin-top:6px} .project-narrative{font-size:clamp(15px,1.1vw,17px);color:var(–ink-2);max-width:62ch;line-height:1.8} .project-narrative p+p{margin-top:1.4em} .project-gallery{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.4vw,20px);margin:clamp(40px,6vw,72px) 0} .project-gallery .media{aspect-ratio:4/3} .project-nav{display:flex;justify-content:space-between;align-items:center;gap:18px;padding-top:clamp(32px,5vw,56px);border-top:1px solid var(–line)} .project-nav a{font-family:var(–mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;transition:color var(–d-fast)} .project-nav a:hover{color:var(–accent)} /* about/team/how */ .process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(–line);margin-top:clamp(40px,6vw,72px)} .cap{padding:clamp(26px,2.6vw,38px) clamp(22px,2vw,34px) clamp(30px,3vw,44px);border-bottom:1px solid var(–line);border-right:1px solid var(–line)} .cap:nth-child(3n){border-right:0} .cap__no{font-family:var(–mono);font-size:11px;letter-spacing:.12em;color:var(–accent);margin-bottom:18px;display:block} .cap__name{font-family:var(–serif);font-weight:400;font-size:clamp(20px,2vw,26px);margin-bottom:12px;letter-spacing:-.005em} .cap__desc{color:var(–ink-2);font-size:14.5px;max-width:32ch} .history{margin-top:clamp(48px,7vw,88px);max-width:760px} .history__marker{display:grid;grid-template-columns:90px 1fr;gap:24px;padding:20px 0;border-bottom:1px solid var(–line-soft)} .history__marker:first-child{border-top:1px solid var(–line-soft)} .history__year{font-family:var(–mono);font-size:12px;letter-spacing:.1em;color:var(–muted)} .history__label{font-family:var(–serif);font-weight:400;font-size:19px;margin-bottom:5px} .history__desc{font-size:14px;color:var(–ink-2)} .process-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,20px);margin-top:clamp(40px,6vw,72px)} .process-photos .media{aspect-ratio:3/4} .team-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.6vw,40px);margin-top:clamp(40px,6vw,72px)} .member{padding:clamp(24px,2.4vw,36px);border:1px solid var(–line);display:flex;flex-direction:column;gap:14px} .member__name{font-family:var(–serif);font-weight:400;font-size:clamp(20px,1.9vw,26px);letter-spacing:-.005em} .member__title{font-family:var(–mono);font-size:11px;letter-spacing:.1em;color:var(–accent);text-transform:uppercase} .member__bio{color:var(–ink-2);font-size:14.5px;max-width:36ch} .steps{margin-top:clamp(40px,6vw,72px);max-width:760px} .step-row{display:grid;grid-template-columns:40px 1fr;gap:24px;padding:22px 0;border-bottom:1px solid var(–line-soft)} .step-row:first-child{border-top:1px solid var(–line-soft)} .step-row__no{font-family:var(–mono);font-size:clamp(22px,2.4vw,32px);color:var(–ink);line-height:1} .step-row__name{font-family:var(–serif);font-weight:400;font-size:clamp(18px,1.6vw,23px);margin-bottom:6px} .step-row__desc{font-size:14px;color:var(–ink-2);line-height:1.7} /* press */ .press-quote{font-family:var(–serif);font-style:italic;font-weight:300;font-size:clamp(22px,3vw,38px);line-height:1.32;max-width:24ch;margin:clamp(28px,4vw,48px) 0 16px;border-left:2px solid var(–accent);padding-left:clamp(20px,3vw,36px)} .press-attr{font-family:var(–mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(–muted);padding-left:clamp(22px,3vw,38px)} .press-outlets{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,56px);align-items:center;margin-top:clamp(48px,7vw,80px);padding-top:clamp(40px,5vw,60px);border-top:1px solid var(–line)} .press-outlet{font-family:var(–serif);font-style:italic;font-size:clamp(15px,1.4vw,19px);color:var(–muted)} .press-awards{font-family:var(–mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(–muted);margin-top:clamp(32px,4vw,56px);padding-top:24px;border-top:1px solid var(–line)} /* blog */ .blog-list{display:flex;flex-direction:column;gap:clamp(40px,6vw,64px);margin-top:clamp(40px,6vw,72px)} .blog-item{max-width:760px} .blog-date{font-family:var(–mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(–muted);margin-bottom:12px} .blog-title{font-family:var(–serif);font-weight:300;font-size:clamp(24px,3vw,38px);line-height:1.12;letter-spacing:-.01em;margin-bottom:14px} .blog-excerpt{color:var(–ink-2);font-size:clamp(14.5px,1.05vw,16.5px);max-width:52ch;line-height:1.72;margin-bottom:16px} .blog-more{font-family:var(–mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;display:inline-flex;gap:.6em;transition:color var(–d-fast)} .blog-more:hover{color:var(–accent)} .blog-more::after{content:”→”;transition:transform var(–d-fast)} .blog-more:hover::after{transform:translateX(4px)} /* location */ .loc-blurb{font-size:clamp(16px,1.3vw,19px);color:var(–ink-2);max-width:58ch;line-height:1.74} .loc-meta{font-family:var(–mono);font-size:11px;letter-spacing:.08em;color:var(–muted);line-height:2;margin-top:24px} .loc-meta a{color:var(–accent)} /* contact */ .contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(40px,6vw,96px);margin-top:clamp(40px,6vw,72px)} .form{display:grid;border-top:1px solid var(–line)} .field{position:relative;border-bottom:1px solid var(–line)} .field label{position:absolute;left:0;top:13px;font-family:var(–mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(–muted);pointer-events:none;transition:top var(–d-fast),font-size var(–d-fast),color var(–d-fast)} .field input,.field textarea,.field select{width:100%;background:transparent;border:0;color:var(–ink);font-family:var(–sans);font-size:16px;padding:22px 0 11px;resize:none} .field select{cursor:pointer;-webkit-appearance:none;appearance:none} .field textarea{min-height:64px} .field input:focus,.field textarea:focus,.field select:focus{outline:none} .field input:focus~label,.field textarea:focus~label,.field.filled label,.field select~label{top:8px;font-size:9.5px;color:var(–accent)} .field .chev{position:absolute;right:0;top:22px;font-family:var(–mono);font-size:12px;color:var(–muted);pointer-events:none} .form__submit{margin-top:24px;font-family:var(–mono);font-size:12px;letter-spacing:.13em;text-transform:uppercase;background:var(–ink);color:var(–on-dark);padding:16px 32px;justify-self:start;display:inline-flex;gap:.6em;transition:background var(–d-fast)} .form__submit:hover{background:var(–accent)} .contact-locs{display:flex;flex-direction:column;border-top:1px solid var(–line)} .loc{padding:24px 0;border-bottom:1px solid var(–line)} .loc__city{font-family:var(–serif);font-weight:400;font-size:clamp(18px,1.7vw,22px);margin-bottom:8px} .loc__addr{color:var(–ink-2);font-size:14px;line-height:1.6} .loc__coords{font-family:var(–mono);font-size:11px;letter-spacing:.06em;color:var(–accent);margin-top:8px} .contact-direct{margin-top:26px;display:flex;flex-direction:column;gap:6px;font-family:var(–mono);font-size:12px;color:var(–ink-2)} .contact-direct a:hover{color:var(–accent)} @media (max-width:860px){.work-grid,.project-gallery,.process-grid,.team-grid,.contact-grid,.process-photos{grid-template-columns:1fr}.cap{border-right:0}.project-header{flex-direction:column}.project-facts{text-align:left} .portfolio{columns:1} .pf-item–land .pf-item__media,.pf-item–port .pf-item__media{aspect-ratio:4/3}} /* ════════ WORK PAGE — featured tier + frosted mosaic + filter + lightbox ════════ */ /* filter banner */ .work-filter{display:flex;justify-content:space-between;align-items:baseline;gap:24px;flex-wrap:wrap; margin-top:clamp(28px,4vw,44px);padding:clamp(16px,2vw,22px) 0;border-top:1px solid var(–line);border-bottom:1px solid var(–line)} .work-filter__by{display:flex;align-items:baseline;gap:.6em;flex-wrap:wrap} .work-filter__label{font-family:var(–mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(–muted)} .work-filter__firm{font-family:var(–serif);font-weight:400;font-size:clamp(18px,2vw,26px);letter-spacing:-.005em} .work-filter__count{font-family:var(–mono);font-size:11px;letter-spacing:.1em;color:var(–accent)} .work-filter__clear{font-family:var(–mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(–ink); border-bottom:1px solid var(–line);padding-bottom:2px;transition:color var(–d-fast,.45s) var(–ease),border-color var(–d-fast,.45s) var(–ease)} .work-filter__clear:hover{color:var(–accent);border-color:var(–accent)} /* featured tier */ .feat-tier{margin-top:clamp(40px,6vw,72px)} .feat-lead{display:grid;grid-template-columns:1.55fr 1fr;gap:clamp(24px,3vw,48px);align-items:end;text-decoration:none;color:inherit} .feat-lead__media{position:relative;overflow:hidden;aspect-ratio:16/10;background:var(–paper)} .feat-lead__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .55s var(–ease),transform var(–d-mid) var(–ease)} .feat-lead__media img.loaded{opacity:1} .feat-lead:hover .feat-lead__media img.loaded{transform:scale(1.03)} .feat-lead__cap{padding-bottom:6px} .feat-lead__name{font-family:var(–serif);font-weight:300;font-size:clamp(26px,3.4vw,44px);letter-spacing:-.015em;line-height:1.06;margin:12px 0 10px} .feat-lead__tag{font-family:var(–serif);font-style:italic;font-weight:300;font-size:clamp(15px,1.4vw,19px);color:var(–ink-2);line-height:1.4;margin-bottom:14px;max-width:34ch} .feat-lead__meta{font-family:var(–mono);font-size:11px;letter-spacing:.06em;color:var(–muted);text-transform:uppercase} .feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,40px);margin-top:clamp(32px,4.5vw,60px)} .feat-item{text-decoration:none;color:inherit;display:block} .feat-item__media{position:relative;overflow:hidden;aspect-ratio:4/5;background:var(–paper)} .feat-item__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .55s var(–ease),transform var(–d-mid) var(–ease)} .feat-item__media img.loaded{opacity:1} .feat-item:hover .feat-item__media img.loaded{transform:scale(1.04)} .feat-item__cap{display:flex;flex-direction:column;gap:5px;border-top:1px solid var(–line);padding-top:12px;margin-top:13px} .feat-item__name{font-family:var(–serif);font-weight:400;font-size:clamp(17px,1.6vw,22px);letter-spacing:-.005em} .feat-item__tag{font-family:var(–serif);font-style:italic;font-weight:300;font-size:13.5px;color:var(–muted);line-height:1.4} .feat-item__meta{font-family:var(–mono);font-size:10.5px;letter-spacing:.06em;color:var(–muted);text-transform:uppercase} /* full portfolio — frosted mosaic */ .work-divider{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap; margin-top:clamp(80px,11vw,150px);padding-bottom:clamp(20px,2.4vw,32px);border-bottom:1px solid var(–line)} .work-divider__title{font-family:var(–serif);font-weight:300;font-size:clamp(24px,3.4vw,40px);letter-spacing:-.012em;line-height:1.05} .work-divider__count{font-family:var(–mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(–muted)} .mosaic{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(14px,1.8vw,28px);margin-top:clamp(36px,5vw,64px)} .tile{position:relative;cursor:pointer;display:block;border:0;padding:0;background:none;text-align:left;width:100%;font:inherit;color:inherit} .tile__media{position:relative;width:100%;height:100%;overflow:hidden;background:var(–paper)} .tile__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .55s var(–ease),transform var(–d-mid) var(–ease)} .tile__media img.loaded{opacity:1} .tile:hover .tile__media img.loaded{transform:scale(1.03)} .m-a{grid-column:span 4}.m-a .tile__media{aspect-ratio:16/9} .m-b{grid-column:span 2}.m-b .tile__media{aspect-ratio:3/4} .m-c{grid-column:span 2}.m-c .tile__media{aspect-ratio:3/4} .m-d{grid-column:span 2}.m-d .tile__media{aspect-ratio:1/1} .m-e{grid-column:span 2}.m-e .tile__media{aspect-ratio:1/1} .m-f{grid-column:span 3}.m-f .tile__media{aspect-ratio:4/3} .m-g{grid-column:span 3}.m-g .tile__media{aspect-ratio:4/3} /* dim hover — image darkens, name/meta fade in centered in light ink */ .frost{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center;gap:7px;padding:18px;opacity:0; transition:opacity var(–d-mid) var(–ease)} .tile__media::after{content:””;position:absolute;inset:0;z-index:1;background:rgba(22,24,26,0);transition:background var(–d-mid) var(–ease);pointer-events:none} .tile:hover .tile__media::after,.tile:focus-visible .tile__media::after{background:rgba(22,24,26,.5)} .tile:hover .frost,.tile:focus-visible .frost{opacity:1} .frost__name{font-family:var(–serif);font-weight:300;font-size:clamp(18px,1.9vw,27px);color:var(–on-dark);letter-spacing:-.01em;line-height:1.12} .frost__meta{font-family:var(–mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(–on-dark-soft)} .tile[hidden]{display:none} .feat-item[hidden],.feat-lead[hidden]{display:none} /* empty state */ .work-empty{margin-top:clamp(48px,7vw,88px);padding:clamp(32px,5vw,56px);border:1px dashed var(–line);text-align:center} .work-empty p{font-family:var(–mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(–muted);margin-bottom:14px} .work-empty a{font-family:var(–mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(–accent)} /* lightbox */ .lb{position:fixed;inset:0;z-index:100;background:rgba(16,18,18,.94);display:none;opacity:0;transition:opacity .4s var(–ease);overflow-y:auto} .lb.open{display:block;opacity:1} .lb__inner{max-width:1100px;margin:0 auto;padding:clamp(40px,7vw,90px) clamp(20px,5vw,48px)} .lb__close{position:fixed;top:22px;right:26px;background:none;border:0;color:var(–on-dark);cursor:pointer;font-family:var(–mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;display:flex;align-items:center;gap:8px;z-index:2} .lb__close::after{content:”✕”;font-size:15px} .lb__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;border-bottom:1px solid rgba(243,242,238,.18);padding-bottom:20px;margin-bottom:clamp(24px,4vw,40px)} .lb__title{font-family:var(–serif);font-weight:300;font-size:clamp(26px,3.6vw,44px);color:var(–on-dark);letter-spacing:-.015em;line-height:1.05} .lb__tag{font-family:var(–serif);font-style:italic;font-weight:300;font-size:clamp(14px,1.3vw,17px);color:var(–on-dark-soft);margin-top:8px;max-width:46ch} .lb__meta{font-family:var(–mono);font-size:11px;letter-spacing:.06em;color:var(–on-dark-soft);text-align:right;line-height:2} .lb__gallery{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.5vw,18px)} .lb__gallery img{width:100%;display:block;background:rgba(243,242,238,.06)} .lb__gallery .g-wide{grid-column:1/-1} @media (max-width:860px){ .feat-lead{grid-template-columns:1fr;gap:18px} .feat-grid{grid-template-columns:1fr 1fr} .mosaic{grid-template-columns:1fr 1fr;gap:12px} .m-a{grid-column:1/-1}.m-a .tile__media{aspect-ratio:16/10} .m-f,.m-g{grid-column:1/-1} .lb__gallery{grid-template-columns:1fr} } @media (max-width:520px){ .feat-grid{grid-template-columns:1fr} } @media (max-width:860px){ .nav,.header__cta{display:none}.nav-toggle{display:block} .footer__top{grid-template-columns:1fr 1fr}.footer__brand{grid-column:1/-1} } @media (max-width:560px){.footer__top{grid-template-columns:1fr}} /* ===== Who We Are — editorial long-read (Option A, image-rich) ===== */ .ed-prose{max-width:62ch;font-size:clamp(15px,1.15vw,17.5px);line-height:1.8;color:var(–ink-2)} .ed-prose p+p{margin-top:1.35em} .ed-prose–drop p:first-of-type::first-letter{float:left;font-family:var(–serif);font-weight:400;font-size:3.4em;line-height:.72;margin:.06em .12em 0 0;color:var(–ink)} .plate-lead{position:relative;margin-top:clamp(24px,3vw,40px)} .plate-lead .media{aspect-ratio:3/2} .plate-wide{position:relative;margin:clamp(44px,6vw,88px) 0} .plate-wide .media{aspect-ratio:16/9} .plate-cap{font-family:var(–mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(–muted);margin-top:12px} .pullquote{font-family:var(–serif);font-weight:300;font-size:clamp(28px,4.4vw,58px);line-height:1.05;letter-spacing:-.018em;color:var(–ink);max-width:20ch;margin:clamp(44px,6vw,92px) 0} .ed-split{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(24px,3.5vw,56px);align-items:center;margin:clamp(40px,6vw,80px) 0} .ed-split–flip .ed-split__media{order:2} .ed-split__media{position:relative;max-width:460px} .ed-split__media .media{aspect-ratio:3/2} .ed-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.4vw,18px);margin:clamp(40px,6vw,80px) 0} .ed-pair .media{aspect-ratio:3/2} .ed-firm{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,4.5vw,64px);align-items:start;margin:clamp(40px,6vw,80px) 0} .ed-firm__text .pullquote{margin:0 0 clamp(20px,2.4vw,32px)} .ed-firm__media .media{aspect-ratio:1/1} .statement{margin-top:clamp(44px,6vw,80px);max-width:880px} .statement__q{font-family:var(–serif);font-weight:300;font-style:italic;font-size:clamp(21px,2.7vw,33px);line-height:1.34;letter-spacing:-.01em;color:var(–ink)} .statement__by{display:flex;align-items:center;gap:16px;margin-top:clamp(24px,3vw,36px)} .statement__faces{display:flex} .statement__faces .media{width:clamp(44px,5vw,56px);aspect-ratio:1;border-radius:50%;overflow:hidden;border:1px solid var(–line);background:var(–paper)} .statement__faces .media:nth-child(2){margin-left:-12px} .statement__name{font-family:var(–mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(–muted)} .lead-sec{margin-top:clamp(56px,8vw,104px);padding-top:clamp(32px,4vw,52px);border-top:1px solid var(–line)} .ed-offices__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px);margin-top:clamp(22px,2.5vw,34px)} .ed-office{display:block;text-decoration:none;color:inherit} .ed-office h3{font-family:var(–serif);font-weight:400;font-size:clamp(19px,1.7vw,23px);margin:0 0 6px;letter-spacing:-.01em} .ed-office__addr{font-family:var(–mono);font-size:11px;letter-spacing:.04em;color:var(–muted);line-height:1.6} .ed-office__go{display:inline-block;margin-top:14px;font-size:13px;color:var(–accent);border-bottom:1px solid var(–accent);padding-bottom:1px} @media(max-width:720px){.ed-offices__grid{grid-template-columns:1fr;gap:20px}} .block-title{font-family:var(–serif);font-weight:300;font-size:clamp(26px,3.6vw,44px);letter-spacing:-.014em;line-height:1.08;margin-bottom:clamp(28px,3.5vw,44px)} .ed-portraits{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,28px)} .ed-portrait__media{position:relative;margin-bottom:14px} .ed-portrait__media .media{aspect-ratio:1/1;max-width:180px} .ed-portrait__name{font-family:var(–serif);font-weight:400;font-size:clamp(15px,1.3vw,18px);letter-spacing:-.005em} .ed-portrait__title{font-family:var(–mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(–accent);margin-top:5px;line-height:1.4} .ed-portrait__bio{font-size:14px;color:var(–ink-2);line-height:1.62;margin-top:10px;max-width:34ch} .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:14px;font-family:var(–mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(–muted);line-height:1.7;border:1px dashed var(–line)} @media (max-width:860px){.ed-split{grid-template-columns:1fr;gap:20px}.ed-firm{grid-template-columns:1fr;gap:24px}.ed-split–flip .ed-split__media{order:0}.ed-portraits{grid-template-columns:repeat(3,1fr)}} @media (max-width:560px){.ed-portraits{grid-template-columns:1fr 1fr}} .footer__col–studios ul{gap:16px} .foot-loc__city{display:block;font-size:13.5px;color:var(–on-dark);letter-spacing:.02em} .foot-loc__addr{display:block;font-family:var(–mono);font-size:11px;letter-spacing:.03em;color:var(–on-dark-soft);margin-top:3px} .footer__col–studios a:hover .foot-loc__city{color:var(–accent)} /* ===== Inquire modal (shared site-wide) ===== */ body.hb-modal-open{overflow:hidden} .hb-modal{position:fixed;inset:0;z-index:200;display:none} .hb-modal.open{display:block} .hb-modal__scrim{position:absolute;inset:0;background:rgba(16,18,18,.45)} .hb-modal__panel{position:absolute;inset:0;background:var(–paper);overflow-y:auto;animation:modalIn .45s var(–ease) both} @keyframes modalIn{from{opacity:0}to{opacity:1}} .hb-modal__close{position:fixed;top:clamp(16px,2.4vw,28px);right:clamp(16px,3vw,40px);z-index:2;font-family:var(–mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(–ink);display:inline-flex;align-items:center;gap:.6em;background:none;border:0;cursor:pointer;transition:color var(–d-fast) var(–ease)} .hb-modal__close:hover{color:var(–accent)} .hb-modal__inner{max-width:600px;margin:0 auto;padding:clamp(64px,9vh,92px) var(–gutter) clamp(40px,6vh,64px);min-height:100vh;display:flex;flex-direction:column;justify-content:center} .hb-modal__inner .eyebrow{display:inline-flex;margin-bottom:12px} .hb-modal__title{font-family:var(–serif);font-weight:300;font-size:clamp(26px,3.6vw,40px);letter-spacing:-.015em;line-height:1.05;margin-bottom:12px;color:var(–ink)} .hb-modal__lead{color:var(–ink-2);font-size:clamp(14px,1vw,16px);line-height:1.6;max-width:46ch;margin-bottom:clamp(18px,2.4vw,28px)} .hb-modal .form{margin:0} .hb-modal__offices{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:clamp(14px,2vw,26px);margin-top:clamp(22px,3vw,32px);padding-top:clamp(18px,2.2vw,24px);border-top:1px solid var(–line)} .hb-modal__office h4{font-family:var(–serif);font-weight:400;font-size:15px;color:var(–ink);margin:0 0 6px} .hb-modal__office p{font-family:var(–mono);font-size:11px;letter-spacing:.03em;line-height:1.7;color:var(–muted);margin:0} @media(max-width:640px){.hb-modal__offices{grid-template-columns:1fr;gap:18px}} /* header parity with the homepage — see unifyHeader() in build-all.js */ .header__inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;justify-content:normal} .brand{grid-column:1} .nav{grid-column:2;justify-content:center} .header__cta{grid-column:3;justify-self:end;display:inline-flex;align-items:center} @media (max-width:860px){ .header__inner{grid-template-columns:1fr auto;gap:16px} .brand{grid-column:1} .nav-toggle{display:block;justify-self:end;grid-column:2} } .jr-eyebrow{font-family:var(–mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(–accent)} .jr-title{font-family:var(–serif);font-weight:300;font-size:clamp(34px,5.5vw,64px);line-height:1;letter-spacing:-.02em;margin:.16em 0 0} .jr-lead{font-size:clamp(15px,1.2vw,18px);line-height:1.7;color:var(–ink-2);max-width:52ch;margin:20px 0 0} .jr-list{margin-top:clamp(36px,5vw,64px);display:grid;gap:clamp(30px,4vw,56px)} .jr-item{border-top:1px solid var(–line);padding-top:clamp(28px,3.5vw,48px)} .jr-item:first-child{border-top:0;padding-top:0} .jr-item a{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(20px,3vw,44px);align-items:center;text-decoration:none;color:inherit} .jr-item__media{aspect-ratio:3/2;overflow:hidden;background:var(–paper-2)} .jr-item__media img{width:100%;height:100%;object-fit:cover;display:block} .jr-item__meta{font-family:var(–mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(–muted);margin-bottom:10px} .jr-item__title{font-family:var(–serif);font-weight:400;font-size:clamp(22px,2.4vw,32px);line-height:1.12;letter-spacing:-.01em;margin:0 0 12px} .jr-item__excerpt{font-size:15px;line-height:1.7;color:var(–ink-2);max-width:48ch;margin:0} .jr-item__go{display:inline-block;margin-top:16px;font-size:13px;color:var(–accent);border-bottom:1px solid var(–accent);padding-bottom:1px} .jr-empty{color:var(–muted);font-size:15px} .jr-post{max-width:720px;margin:0 auto} .jr-post__eyebrow{font-family:var(–mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:18px} .jr-post__eyebrow a{color:var(–accent);text-decoration:none} .jr-post__title{font-family:var(–serif);font-weight:300;font-size:clamp(30px,5vw,54px);line-height:1.05;letter-spacing:-.02em;margin:0} .jr-post__meta{font-family:var(–mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(–muted);margin-top:16px} .jr-post__hero{aspect-ratio:16/9;overflow:hidden;background:var(–paper-2);margin:clamp(28px,4vw,48px) 0} .jr-post__hero img{width:100%;height:100%;object-fit:cover;display:block} .jr-post__body p{font-size:clamp(16px,1.15vw,18px);line-height:1.85;color:var(–ink-2);margin:0 0 1.3em} .jr-post__body p:first-child{font-size:clamp(18px,1.4vw,21px);color:var(–ink)} .jr-post__back{margin-top:clamp(36px,5vw,64px);padding-top:24px;border-top:1px solid var(–line)} .jr-post__back a{font-size:13px;color:var(–accent);text-decoration:none} @media(max-width:720px){.jr-item a{grid-template-columns:1fr;gap:14px}.jr-post{max-width:none}}
Journal

Notes from the field.

Occasional writing on how we build: process, craft, and the projects that test them.

.footer__actions{display:inline-flex;align-items:center;gap:clamp(18px,3vw,32px)} .footer__brand-link{display:inline-block;color:inherit;text-decoration:none} .footer__col–areas ul{gap:13px} .hb-site-footer .footer__col h2{font-family:var(–mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(–on-dark-soft);margin:0 0 18px} (function(){ var btn=document.getElementById(‘navToggle’),ov=document.getElementById(‘navOverlay’); if(!btn)return; var root=document.documentElement,h=document.getElementById(‘header’); var setH=function(){root.style.setProperty(‘–header-h’,h.offsetHeight+’px’)}; setH();addEventListener(‘resize’,setH,{passive:true}); var close=function(){document.body.classList.remove(‘menu-open’);btn.setAttribute(‘aria-expanded’,’false’)}; btn.addEventListener(‘click’,function(){var o=document.body.classList.toggle(‘menu-open’);btn.setAttribute(‘aria-expanded’,String(o))}); if(ov)ov.querySelectorAll(‘a’).forEach(function(a){a.addEventListener(‘click’,close)}); document.addEventListener(‘keydown’,function(e){if(e.key===’Escape’)close()}); })(); (function(){ document.querySelectorAll(‘img[data-src]’).forEach(function(img){ var show=function(){img.src=img.dataset.src;img.onload=function(){img.classList.add(‘loaded’)}}; if(‘IntersectionObserver’ in window){var io=new IntersectionObserver(function(e){if(e[0].isIntersecting){show();io.disconnect()}},{rootMargin:’200px’});io.observe(img)}else show(); }); })(); (function(){ var modal=document.getElementById(‘hbInquireModal’); if(!modal) return; var last=null, SEL=’a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex=”-1″])’; function vis(el){return !!(el.offsetWidth||el.offsetHeight||el.getClientRects().length);} function open(e){ if(e){if(e.preventDefault)e.preventDefault();} last=document.activeElement; var t=e?e.currentTarget:null; var loc=null; if(t){if(t.getAttribute){loc=t.getAttribute(‘data-loc’);}} if(loc){ var sel=document.getElementById(‘f-loc’); if(sel){ sel.value=loc; var fw=sel.closest(‘.field’); if(fw)fw.classList.add(‘filled’); } } modal.classList.add(‘open’); modal.setAttribute(‘aria-hidden’,’false’); document.body.classList.add(‘hb-modal-open’); document.addEventListener(‘keydown’,onkey); var f=modal.querySelector(‘.hb-modal__panel’); if(f)setTimeout(function(){f.focus();},60); } function close(){ modal.classList.remove(‘open’); modal.setAttribute(‘aria-hidden’,’true’); document.body.classList.remove(‘hb-modal-open’); document.removeEventListener(‘keydown’,onkey); if(last){if(last.focus)last.focus();} } function onkey(e){ if(e.key===’Escape’){close();return;} if(e.key===’Tab’){ var f=Array.prototype.filter.call(modal.querySelectorAll(SEL),vis); if(!f.length)return; var a=f[0], z=f[f.length-1]; if(e.shiftKey){if(document.activeElement===a){e.preventDefault();z.focus();}} else{if(document.activeElement===z){e.preventDefault();a.focus();}} } } document.querySelectorAll(‘[data-inquire]’).forEach(function(b){b.addEventListener(‘click’,open);}); modal.querySelectorAll(‘[data-close]’).forEach(function(b){b.addEventListener(‘click’,close);}); })(); {“@context”:”https://schema.org”,”@graph”:[{“@type”:”Blog”,”@id”:”https://hobbsinc.com/journal/#webpage”,”url”:”https://hobbsinc.com/journal”,”name”:”The Journal u2014 Hobbs, Inc.”,”description”:”Notes on building u2014 process, craft, and coordination from Hobbs, Inc.”,”publisher”:{“@id”:”https://hobbsinc.com/#organization”},”inLanguage”:”en-US”,”breadcrumb”:{“@type”:”BreadcrumbList”,”itemListElement”:[{“@type”:”ListItem”,”position”:1,”name”:”Home”,”item”:”https://hobbsinc.com/”},{“@type”:”ListItem”,”position”:2,”name”:”Journal”,”item”:”https://hobbsinc.com/journal”}]}}]} (function(){ var f=document.getElementById(‘contactForm’); if(!f){ return; } if(f.getAttribute(‘data-inquire-wired’)){ return; } f.setAttribute(‘data-inquire-wired’,’1′); f.addEventListener(‘input’, function(e){ var w=e.target.closest(‘.field’); if(w){ w.classList.toggle(‘filled’, !!e.target.value); } }); f.addEventListener(‘submit’, function(e){ e.preventDefault(); var name=document.getElementById(‘f-name’), email=document.getElementById(‘f-email’), msg=document.getElementById(‘f-msg’), loc=document.getElementById(‘f-loc’); var nv=name?name.value.trim():”; var ev=email?email.value.trim():”; var mv=msg?msg.value.trim():”; if(!nv){ name.focus(); return; } if(!/^S+@S+.S+$/.test(ev)){ email.focus(); return; } if(!mv){ msg.focus(); return; } var btn=f.querySelector(‘.form__submit’); if(btn){ btn.disabled=true; btn.style.opacity=’.55′; } fetch(‘/wp-json/pjm/v1/inquire’,{method:’POST’,headers:{‘Content-Type’:’application/json’},body:JSON.stringify({name:nv,email:ev,location:loc?loc.value:”,message:mv,company:”})}) .then(function(r){ if(!r.ok){ throw new Error(‘inquire failed’); } f.innerHTML=’

Thank you. A principal will be in touch shortly.

‘; }) .catch(function(){ if(btn){ btn.disabled=false; btn.style.opacity=”; } var err=f.querySelector(‘.form__err’); if(!err){ err=document.createElement(‘p’); err.className=’form__err’; err.style.cssText=’color:var(–accent);font-size:13px;margin-top:12px’; f.appendChild(err); } err.textContent=’Something went wrong sending your note. Please email info@hobbsinc.com directly.’; }); }); })(); .hb-site-header{transition:transform .45s cubic-bezier(.22,.61,.36,1),background var(–d-fast,.45s) var(–ease,ease)} .hb-site-header.nav-hidden{transform:translateY(-100%)} /* a11y: skip link (SC 2.4.1) – invisible until keyboard focus */.skip-link{position:absolute;left:-9999px;top:0;z-index:9999;background:var(–ink);color:var(–on-dark);padding:12px 18px;font-family:var(–mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none}.skip-link:focus{left:8px;top:8px}/* a11y: restore a visible focus indicator (SC 2.4.7) */.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{outline:2px solid var(–accent);outline-offset:3px;border-bottom-color:var(–accent)}.collab-search:focus-visible{outline:2px solid var(–accent);outline-offset:3px}.skip-link:focus-visible{outline:3px solid var(–accent);outline-offset:2px}/* a11y SC 1.4.3: accent needs to lighten on dark grounds to clear 4.5:1 */.hb-site-footer,.we-lb,.wk-lb{–accent:#A87F48}/* a11y SC 2.4.1: skip target must be focusable or focus never moves; no ring on the wrapper itself, the scroll jump is the affordance */main:focus{outline:none}/* dialog receives focus on open so the title is announced; a text input always matches :focus-visible, which drew a ring on a mouse click */.hb-modal__panel:focus{outline:none} (function(){ var header=document.getElementById(‘header’); if(!header){ return; } if(header.getAttribute(‘data-autohide’)){ return; } header.setAttribute(‘data-autohide’,’1′); var lastY=window.scrollY; var ticking=false; function apply(){ ticking=false; if(document.body.classList.contains(‘menu-open’)){ header.classList.remove(‘nav-hidden’); lastY=window.scrollY; return; } var y=window.scrollY; var dy=y-lastY; lastY=y; if(y6){ header.classList.add(‘nav-hidden’); return; } if(dy<-6){ header.classList.remove('nav-hidden'); } } addEventListener('scroll', function(){ if(!ticking){ ticking=true; requestAnimationFrame(apply); } }, {passive:true}); addEventListener('mousemove', function(e){ if(e.clientY<90){ header.classList.remove('nav-hidden'); } }, {passive:true}); })();