<x-dc> <helmet> <link rel="stylesheet" href="_ds/trh-furniture-design-system-7b7af6a9-5a44-4cd9-a7e1-794a5b0d3e6e/tokens/fonts.css"> <link rel="stylesheet" href="_ds/trh-furniture-design-system-7b7af6a9-5a44-4cd9-a7e1-794a5b0d3e6e/tokens/colors.css"> <link rel="stylesheet" href="_ds/trh-furniture-design-system-7b7af6a9-5a44-4cd9-a7e1-794a5b0d3e6e/tokens/typography.css"> <link rel="stylesheet" href="_ds/trh-furniture-design-system-7b7af6a9-5a44-4cd9-a7e1-794a5b0d3e6e/tokens/spacing.css"> <link rel="stylesheet" href="_ds/trh-furniture-design-system-7b7af6a9-5a44-4cd9-a7e1-794a5b0d3e6e/styles.css"> <script src="_ds/trh-furniture-design-system-7b7af6a9-5a44-4cd9-a7e1-794a5b0d3e6e/_ds_bundle.js"></script> <script src="image-slot.js"></script> <style> html{scroll-behavior:smooth} body{margin:0;background:#161311} a{color:#8A6F45;text-decoration:none} a:hover{color:#141210} @keyframes navMenuIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}} @keyframes navRowIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}} @keyframes veilIn{from{opacity:0}to{opacity:1}} @keyframes emberFadeIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}} @keyframes drawerIn{from{transform:translateX(24px);opacity:0}to{transform:translateX(0);opacity:1}} [data-screen-label="Mobile menu"]>*{flex-shrink:0} @media (max-width:980px){[data-m~="desk"]{display:none!important}[data-m~="mob"]{display:flex!important}} @media (min-width:761px) and (max-width:1023px){[data-m~="sable-img"]{top:28px!important;bottom:auto!important;right:clamp(24px,5vw,64px)!important;height:calc(100% - 56px)!important;width:auto!important;max-width:54%!important;object-position:center!important}[data-m~="sable-sp"]{min-height:clamp(420px,50vw,620px)!important}} @media (min-width:1024px) and (max-width:1366px) and (hover:none) and (pointer:coarse){[data-m~="sable-img"]{top:28px!important;bottom:auto!important;right:clamp(24px,5vw,64px)!important;height:calc(100% - 56px)!important;width:auto!important;max-width:54%!important;object-position:center!important}[data-m~="sable-sp"]{min-height:clamp(420px,50vw,620px)!important}} @media (max-width:760px){ [data-m~="stack"]{grid-template-columns:minmax(0,1fr)!important;row-gap:clamp(24px,7vw,40px)!important} [data-m~="nogap"]{row-gap:0!important} [data-m~="colm"]{flex-direction:column!important;align-items:flex-start!important;gap:6px!important} [data-m~="img-m"]{height:58vh!important;min-height:320px!important} [data-m~="m-imgbox"]{min-height:0!important;padding:8px 0 40px!important;display:block!important} [data-m~="m-img"]{position:relative!important;left:auto!important;top:auto!important;transform:none!important;margin:0 auto!important;width:84%!important;max-width:84%!important;display:block!important} [data-m~="dusk-img"]{width:100%!important;height:56%!important;object-position:30% 50%!important;-webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent)!important;mask-image:linear-gradient(to bottom,#000 70%,transparent)!important} [data-m~="dusk-ov"]{background:linear-gradient(to bottom,rgba(19,17,22,0) 30%,rgba(19,17,22,.7) 56%,rgba(19,17,22,.92) 100%)!important} [data-m~="dusk-sp"]{min-height:44vh!important} [data-m~="sable-img"]{height:320px!important;width:auto!important;max-width:none!important;right:-12%!important;top:auto!important;bottom:-60px!important} [data-m~="stone-img"]{height:320px!important;width:auto!important;max-width:none!important;right:-12%!important;bottom:-60px!important} [data-m~="stone-sp"]{min-height:260px!important} [data-m~="span1"]{grid-column:auto!important} [style*="position: sticky"]{position:relative!important;top:auto!important} } </style> </helmet> <div style="min-height:100vh;background:var(--surface-sheet);font-family:var(--font-sans)"> <a href="#main" style="position:absolute;left:-9999px;top:12px;z-index:300;padding:12px 18px;background:#161311;color:#F4F1EC;font-size:11px;font-weight:500;letter-spacing:.22em" style-focus="left:12px;color:#F4F1EC">SKIP TO CONTENT</a> <div aria-hidden="true" style="position:fixed;inset:0;z-index:200;pointer-events:none;background-image:url(assets/texture/grain.png);background-repeat:repeat;background-size:180px 180px;opacity:.12"></div> <svg style="display:none" aria-hidden="true"><symbol id="rohn-icon" viewBox="0 0 144 225"><path fill="currentColor" d="M90.45,144h24.55c16.01,0,29,12.99,29,29v52h-53.55v-81h0Z"></path><rect fill="currentColor" x="62.59" y="-33.11" width="45" height="111.21" transform="translate(62.59 107.59) rotate(-90)"></rect><rect fill="currentColor" x="41.44" y="68.44" width="54.6" height="78.52" transform="translate(-38.96 176.44) rotate(-90)"></rect><path fill="currentColor" d="M29,0h25v196c0,16.01-12.99,29-29,29H0V29C0,12.99,12.99,0,29,0Z"></path><path fill="currentColor" d="M93.57,0h50.43v106c0,16.01-12.99,29-29,29h-21.43c-1.72,0-3.12-1.4-3.12-3.12V3.12c0-1.72,1.4-3.12,3.12-3.12Z"></path></symbol></svg> <header ref="{{ headerRef }}" data-screen-label="Header" style="position:fixed;top:0;left:0;right:0;z-index:80;display:flex;align-items:center;justify-content:space-between;gap:32px;padding:18px clamp(20px,5vw,56px);background:transparent;border-bottom:1px solid transparent;transition:background .18s linear,border-color .18s linear"> <a href="/" aria-label="ROHN Studio home" style="display:flex;align-items:center;gap:13px"> <svg viewBox="0 0 144 225" style="width:15px;height:23px;color:var(--logo-accent,var(--trh-ivory));transition:color .18s linear"><use href="#rohn-icon"></use></svg> <span style="font-family:var(--font-mark);font-size:19px;line-height:1;letter-spacing:.06em;color:var(--trh-ivory)">ROHN</span> <span style="font-weight:500;font-size:10px;line-height:1;letter-spacing:.42em;color:var(--logo-accent,var(--trh-ivory));padding-top:3px;transition:color .18s linear">STUDIO</span> </a> <nav data-m="desk" style="display:flex;align-items:center;gap:32px"> <a href="/about/" style="font-size:11px;font-weight:500;letter-spacing:var(--track-label);color:var(--trh-ivory)" style-hover="color:var(--trh-bronze)">ABOUT</a> <a href="/for-designers/" style="font-size:11px;font-weight:500;letter-spacing:var(--track-label);color:var(--trh-ivory)" style-hover="color:var(--trh-bronze)">FOR DESIGNERS</a> <div ref="{{ menuRef }}" style="position:relative;display:flex;align-items:center"> <a href="#collections" style="display:flex;align-items:center;gap:7px;font-size:11px;font-weight:500;letter-spacing:var(--track-label);color:var(--trh-ivory)" style-hover="color:var(--trh-bronze)">COLLECTIONS<span style="display:block;width:4px;height:4px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg);margin-bottom:2px"></span></a> <sc-if value="{{ menuOpen }}" hint-placeholder-val="{{ false }}"> <div style="position:absolute;top:100%;left:50%;transform:translateX(-50%);padding-top:20px;z-index:90"> <div style="min-width:272px;background:rgba(22,19,17,.97);border:1px solid rgba(200,168,120,.3);overflow:hidden;animation:navMenuIn .34s cubic-bezier(.22,.68,.24,1) both;box-shadow:0 18px 44px rgba(13,11,10,.45)"> <sc-for list="{{ collections }}" as="col" hint-placeholder-count="6"> <a href="{{ col.href }}" style="display:flex;align-items:center;justify-content:space-between;gap:20px;padding:13px 22px;color:var(--trh-ivory);background-image:{{ col.rowBg }};background-size:cover;background-position:center;border-bottom:1px solid rgba(13,11,10,.5);text-shadow:0 1px 7px rgba(13,11,10,.9);transition:filter .35s ease;animation:navRowIn .34s cubic-bezier(.22,.68,.24,1) both;animation-delay:{{ col.delay }}" style-hover="background-image:{{ col.rowBgHover }};filter:brightness(1.16) saturate(1.06)"> <span style="font-size:11px;font-weight:500;letter-spacing:var(--track-label);line-height:1">{{ col.name }}</span> <span style="font-size:10px;font-weight:300;letter-spacing:.08em;line-height:1;color:rgba(244,241,236,.74)">{{ col.note }}</span> </a> </sc-for> <a href="#collections" style="display:block;padding:13px 22px;font-size:10px;font-weight:500;letter-spacing:var(--track-label);color:var(--trh-bronze)" style-hover="color:var(--trh-ivory)">ALL COLLECTIONS</a> </div> </div> </sc-if> </div> <a href="/blog/" style="font-size:11px;font-weight:500;letter-spacing:var(--track-label);color:var(--trh-ivory)" style-hover="color:var(--trh-bronze)">BLOG</a> <button type="button" onClick="{{ openCart }}" aria-label="Open cart" style="display:flex;align-items:center;gap:9px;padding:0;background:transparent;border:0;cursor:pointer;font-family:var(--font-sans);font-size:11px;font-weight:500;letter-spacing:var(--track-label);color:var(--trh-ivory)" style-hover="color:var(--trh-bronze)"> <svg width="16" height="16" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.3"><path d="M3.6 5.8h12.8l-1.1 9.7a1.7 1.7 0 0 1-1.7 1.5H6.4a1.7 1.7 0 0 1-1.7-1.5z"></path><path d="M7.3 8.2V5.6a2.7 2.7 0 0 1 5.4 0v2.6"></path></svg> <span>CART</span> <sc-if value="{{ hasCart }}" hint-placeholder-val="{{ false }}"> <span style="min-width:19px;height:19px;padding:0 6px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:var(--trh-bronze);color:#161311;font-size:10px;font-weight:600;letter-spacing:0">{{ cartCount }}</span> </sc-if> </button> <span style="width:1px;height:16px;background:rgba(244,241,236,.25)"></span> <div style="display:flex;align-items:center;gap:16px"> <a href="https://www.facebook.com/ROHN.Studio" target="_blank" rel="noopener" aria-label="Facebook" style="display:flex;color:rgba(244,241,236,.7)" style-hover="color:var(--trh-bronze)"><svg width="17" height="17" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.3"><path d="M13.5 2.5h-2.6a3.4 3.4 0 0 0-3.4 3.4v2.6H5v3h2.5v6h3v-6h2.6l.4-3h-3V6.1c0-.6.4-1 1-1h2z"></path></svg></a> <a href="https://www.instagram.com/rohn.studio/" target="_blank" rel="noopener" aria-label="Instagram" style="display:flex;color:rgba(244,241,236,.7)" style-hover="color:var(--trh-bronze)"><svg width="17" height="17" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.3"><rect x="2.8" y="2.8" width="14.4" height="14.4" rx="4"></rect><circle cx="10" cy="10" r="3.4"></circle><circle cx="14.6" cy="5.4" r="0.6" fill="currentColor" stroke="none"></circle></svg></a> <a href="https://www.youtube.com/@ROHN.Studio" target="_blank" rel="noopener" aria-label="YouTube" style="display:flex;color:rgba(244,241,236,.7)" style-hover="color:var(--trh-bronze)"><svg width="18" height="17" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.3"><rect x="1.8" y="4.5" width="16.4" height="11" rx="2.6"></rect><path d="M8.4 7.6l4 2.4-4 2.4z" fill="currentColor" stroke="none"></path></svg></a> </div> </nav> <div data-m="mob" style="display:none;align-items:center;gap:4px;margin-right:-10px"> <button type="button" onClick="{{ openCart }}" aria-label="Open cart" style="display:flex;align-items:center;justify-content:center;gap:6px;min-width:44px;height:44px;padding:0 4px;background:transparent;border:0;cursor:pointer;color:var(--trh-ivory)"><svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.3"><path d="M3.6 5.8h12.8l-1.1 9.7a1.7 1.7 0 0 1-1.7 1.5H6.4a1.7 1.7 0 0 1-1.7-1.5z"></path><path d="M7.3 8.2V5.6a2.7 2.7 0 0 1 5.4 0v2.6"></path></svg><sc-if value="{{ hasCart }}" hint-placeholder-val="{{ false }}"><span style="min-width:18px;height:18px;padding:0 5px;display:flex;align-items:center;justify-content:center;border-radius:9px;background:var(--trh-bronze);color:#161311;font-size:10px;font-weight:600;letter-spacing:0">{{ cartCount }}</span></sc-if></button> <button type="button" onClick="{{ toggleMobileNav }}" aria-label="{{ menuLabel }}" style="width:44px;height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:0;background:transparent;border:0;cursor:pointer"> <span style="display:block;width:22px;height:1px;background:var(--trh-ivory);transition:transform .25s ease;transform:{{ burgerTop }}"></span> <span style="display:block;width:22px;height:1px;background:var(--trh-ivory);transition:transform .25s ease;transform:{{ burgerBot }}"></span> </button> </div> </header> <sc-if value="{{ mobileNavOpen }}" hint-placeholder-val="{{ false }}"> <div data-screen-label="Mobile menu" style="position:fixed;inset:0;z-index:79;background:#161311;padding:92px clamp(20px,5vw,56px) 40px;display:flex;flex-direction:column;overflow-y:auto"> <div style="padding:0 0 10px;font-size:10px;font-weight:500;letter-spacing:var(--track-label);color:var(--trh-bronze)">COLLECTIONS</div> <div style="border:1px solid rgba(200,168,120,.3);overflow:hidden"> <sc-for list="{{ collections }}" as="col" hint-placeholder-count="6"> <a href="{{ col.href }}" onClick="{{ closeMobileNav }}" style="display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;padding:0 18px;color:var(--trh-ivory);background-image:{{ col.rowBg }};background-size:cover;background-position:center;border-bottom:1px solid rgba(13,11,10,.5);text-shadow:0 1px 7px rgba(13,11,10,.9);transition:filter .35s ease;animation:navRowIn .34s cubic-bezier(.22,.68,.24,1) both;animation-delay:{{ col.delay }}" style-active="background-image:{{ col.rowBgHover }};filter:brightness(1.16) saturate(1.06)"> <span style="font-size:12px;font-weight:500;letter-spacing:var(--track-label);line-height:1">{{ col.name }}</span> <span style="font-size:11px;font-weight:300;letter-spacing:.08em;line-height:1;color:rgba(244,241,236,.74)">{{ col.note }}</span> </a> </sc-for> </div> <a href="#collections" onClick="{{ closeMobileNav }}" style="display:block;padding:14px 0 28px;font-size:10px;font-weight:500;letter-spacing:var(--track-label);color:var(--trh-bronze)">ALL COLLECTIONS</a> <a href="/about/" onClick="{{ closeMobileNav }}" style="display:block;padding:18px 0;border-bottom:1px solid rgba(200,168,120,.2);font-size:12px;font-weight:500;letter-spacing:var(--track-label);color:var(--trh-ivory);border-top:1px solid rgba(200,168,120,.2)">ABOUT</a> <a href="/for-designers/" onClick="{{ closeMobileNav }}" style="display:block;padding:18px 0;border-bottom:1px solid rgba(200,168,120,.2);font-size:12px;font-weight:500;letter-spacing:var(--track-label);color:var(--trh-ivory)">FOR DESIGNERS</a> <a href="/blog/" onClick="{{ closeMobileNav }}" style="display:block;padding:18px 0;border-bottom:1px solid rgba(200,168,120,.2);font-size:12px;font-weight:500;letter-spacing:var(--track-label);color:var(--trh-ivory)">BLOG</a> <div style="margin-top:28px;display:flex"><div style="display:flex;align-items:center;gap:24px"> <a href="https://www.facebook.com/ROHN.Studio" target="_blank" rel="noopener" aria-label="Facebook" style="display:flex;color:rgba(244,241,236,.7)" style-hover="color:var(--trh-bronze)"><svg width="17" height="17" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.3"><path d="M13.5 2.5h-2.6a3.4 3.4 0 0 0-3.4 3.4v2.6H5v3h2.5v6h3v-6h2.6l.4-3h-3V6.1c0-.6.4-1 1-1h2z"></path></svg></a> <a href="https://www.instagram.com/rohn.studio/" target="_blank" rel="noopener" aria-label="Instagram" style="display:flex;color:rgba(244,241,236,.7)" style-hover="color:var(--trh-bronze)"><svg width="17" height="17" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.3"><rect x="2.8" y="2.8" width="14.4" height="14.4" rx="4"></rect><circle cx="10" cy="10" r="3.4"></circle><circle cx="14.6" cy="5.4" r="0.6" fill="currentColor" stroke="none"></circle></svg></a> <a href="https://www.youtube.com/@ROHN.Studio" target="_blank" rel="noopener" aria-label="YouTube" style="display:flex;color:rgba(244,241,236,.7)" style-hover="color:var(--trh-bronze)"><svg width="18" height="17" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.3"><rect x="1.8" y="4.5" width="16.4" height="11" rx="2.6"></rect><path d="M8.4 7.6l4 2.4-4 2.4z" fill="currentColor" stroke="none"></path></svg></a> </div></div> </div> </sc-if> <sc-if value="{{ cartOpen }}" hint-placeholder-val="{{ false }}"> <div data-screen-label="Cart drawer" style="position:fixed;inset:0;z-index:190;display:flex;justify-content:flex-end"> <div onClick="{{ closeCart }}" style="position:absolute;inset:0;background:rgba(13,11,10,.58);animation:veilIn .28s ease both"></div> <aside style="position:relative;display:flex;flex-direction:column;width:min(452px,100%);height:100%;background:var(--surface-sheet);box-shadow:-20px 0 56px rgba(13,11,10,.34);animation:drawerIn .4s cubic-bezier(.22,.68,.24,1) both"> <div style="display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 28px;border-bottom:1px solid var(--border-default)"> <div style="font-size:11px;font-weight:500;letter-spacing:var(--track-wide);color:var(--trh-ink)">YOUR CART</div> <button type="button" onClick="{{ closeCart }}" aria-label="Close cart" style="width:44px;height:44px;margin:-11px -14px -11px 0;display:flex;align-items:center;justify-content:center;background:transparent;border:0;cursor:pointer;color:var(--trh-umber)" style-hover="color:var(--trh-ink)"> <svg width="16" height="16" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.3"><path d="M5 5l10 10M15 5L5 15"></path></svg> </button> </div> <sc-if value="{{ cartEmpty }}" hint-placeholder-val="{{ true }}"> <div style="flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:40px 34px;text-align:center"> <div style="font-family:var(--font-display);font-weight:600;font-size:22px;line-height:1.2;color:var(--trh-ink)">Nothing here yet</div> <div style="font-weight:300;font-size:13px;line-height:1.7;color:var(--text-body);max-width:290px">Every piece is cut and finished to order in Brighton. Start with a collection.</div> <a href="#collections" onClick="{{ closeCart }}" style="margin-top:8px;min-height:46px;display:inline-flex;align-items:center;padding:0 24px;border:1px solid var(--trh-ink);color:var(--trh-ink);font-size:11px;font-weight:500;letter-spacing:var(--track-label)" style-hover="background:var(--trh-ink);color:var(--trh-ivory)">BROWSE COLLECTIONS</a> </div> </sc-if> <sc-if value="{{ hasCart }}" hint-placeholder-val="{{ false }}"> <div style="flex:1;min-height:0;display:flex;flex-direction:column"> <div style="flex:1;min-height:0;overflow-y:auto;padding:4px 28px 18px"> <sc-for list="{{ cartItems }}" as="it" hint-placeholder-count="0"> <div style="display:flex;gap:16px;padding:20px 0;border-bottom:1px solid var(--border-subtle)"> <a href="{{ it.href }}" onClick="{{ closeCart }}" style="flex:0 0 82px"> <img src="{{ it.img }}" alt="{{ it.name }}" style="width:82px;height:96px;object-fit:cover;display:block;background:var(--surface-inset)"> </a> <div style="flex:1;min-width:0;display:flex;flex-direction:column;gap:5px"> <div style="display:flex;align-items:baseline;justify-content:space-between;gap:12px"> <div style="font-family:var(--font-display);font-weight:600;font-size:16px;line-height:1.25;color:var(--trh-ink)">{{ it.name }}</div> <div style="font-size:13px;color:var(--trh-ink);white-space:nowrap">{{ it.priceLabel }}</div> </div> <div style="font-size:10px;font-weight:500;letter-spacing:var(--track-wide);color:var(--text-label)">{{ it.collection }} · {{ it.variant }}</div> <sc-if value="{{ it.hasOpts }}" hint-placeholder-val="{{ false }}"> <div style="font-weight:300;font-size:12px;line-height:1.5;color:var(--text-body)">{{ it.opts }}</div> </sc-if> <div style="display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px"> <div style="display:flex;align-items:center;border:1px solid var(--border-default)"> <button type="button" aria-label="Decrease quantity" onClick="{{ it.dec }}" style="width:38px;height:40px;border:0;background:transparent;color:var(--trh-ink);font-size:15px;cursor:pointer;font-family:var(--font-sans)">−</button> <span style="min-width:26px;text-align:center;font-size:13px;color:var(--trh-ink)">{{ it.qty }}</span> <button type="button" aria-label="Increase quantity" onClick="{{ it.inc }}" style="width:38px;height:40px;border:0;background:transparent;color:var(--trh-ink);font-size:15px;cursor:pointer;font-family:var(--font-sans)">+</button> </div> <button type="button" onClick="{{ it.remove }}" style="min-height:40px;padding:0;background:transparent;border:0;cursor:pointer;font-family:var(--font-sans);font-size:10px;font-weight:500;letter-spacing:var(--track-label);color:var(--text-label)" style-hover="color:var(--trh-ink)">REMOVE</button> </div> </div> </div> </sc-for> </div> <div style="border-top:1px solid var(--border-default);background:var(--surface-inset);padding:22px 28px 26px;display:flex;flex-direction:column;gap:11px"> <div style="display:flex;align-items:baseline;justify-content:space-between;gap:16px"> <span style="font-size:10px;font-weight:500;letter-spacing:var(--track-wide);color:var(--text-label)">SUBTOTAL</span> <span style="font-size:14px;color:var(--trh-ink)">{{ subtotalLabel }}</span> </div> <div style="display:flex;align-items:baseline;justify-content:space-between;gap:16px"> <span style="font-size:10px;font-weight:500;letter-spacing:var(--track-wide);color:var(--text-label)">{{ shipTierLabel }}</span> <span style="font-size:14px;color:var(--trh-ink)">{{ shipLabel }}</span> </div> <div style="font-weight:300;font-size:11px;line-height:1.65;color:var(--text-label)">Shipping is free nationwide; remote locations are quoted and invoiced before shipping.</div> <a href="/checkout/" onClick="{{ closeCart }}" style="margin-top:4px;min-height:50px;display:flex;align-items:center;justify-content:center;gap:10px;background:var(--trh-char);color:var(--trh-ivory);font-size:11px;font-weight:500;letter-spacing:var(--track-label)" style-hover="background:var(--trh-bronze-deep);color:var(--trh-ivory)">CHECKOUT · {{ totalLabel }}</a> </div> </div> </sc-if> </aside> </div> </sc-if> <main id="main"> <sc-if value="{{ isHome }}" hint-placeholder-val="{{ true }}"> <div> <section data-screen-label="Hero" style="position:relative;height:100vh;min-height:640px;overflow:hidden;background:#161311"> <div style="position:absolute;top:-48px;bottom:-48px;left:0;right:0"> <div data-parallax="44" style="position:relative;width:100%;height:100%;overflow:hidden"> <iframe ref="{{ heroVideoRef }}" src="https://player.vimeo.com/video/1234262931?h=31cbd36b44&amp;background=1&amp;autoplay=1&amp;loop=1&amp;muted=1&amp;autopause=0&amp;dnt=1" title="ROHN Studio hero film" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" tabindex="-1" aria-hidden="true" style="position:absolute;top:50%;left:50%;width:100vw;height:56.25vw;min-width:calc((100vh + 96px) * 1.7778);min-height:calc(100vh + 96px);transform:translate(-50%,-50%);border:0;pointer-events:none;opacity:0;transition:opacity 900ms ease"></iframe> </div> </div> <div ref="{{ scrimRef }}" style="position:absolute;inset:0;background:linear-gradient(to top, rgba(22,19,17,.9) 0%, rgba(22,19,17,.66) 30%, rgba(22,19,17,.34) 60%, rgba(22,19,17,.42) 100%);pointer-events:none"></div> <div style="position:absolute;left:clamp(22px,5vw,56px);right:clamp(22px,5vw,56px);bottom:clamp(40px,8vw,64px);display:flex;flex-direction:column;gap:24px;pointer-events:none"> <div data-hero=""> <x-import component-from-global-scope="TRHFurnitureDesignSystem_7b7af6.Eyebrow" on="dark" rules="{{ false }}" hint-size="auto,20px">HANDCRAFTED · BRIGHTON, MICHIGAN</x-import> </div> <h1 data-hero="" style="margin:0;font-family:var(--font-display);font-weight:600;font-size:clamp(40px,6.4vw,92px);line-height:1.05;color:var(--trh-ivory);max-width:900px;text-wrap:pretty">Timeless pieces for the moments that matter</h1> <div data-hero="" style="display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;pointer-events:auto"> <div style="font-weight:300;font-size:15px;line-height:1.7;color:rgba(244,241,236,.85);max-width:440px">Custom hardwood furniture, built in our Michigan workshop from salvaged and responsibly sourced hardwoods.</div> <a href="#collections" style="display:inline-flex;align-items:center;gap:14px;font-size:11px;font-weight:500;letter-spacing:var(--track-label);color:var(--trh-bronze);transition:gap .45s cubic-bezier(.22,1,.36,1),color .3s ease" style-hover="color:var(--trh-ivory);gap:22px">SHOP THE COLLECTIONS</a> </div> </div> </section> <section data-screen-label="Manifesto" style="padding:clamp(100px,14vh,180px) clamp(20px,5vw,56px);display:flex;justify-content:center;background:var(--surface-sheet)"> <div style="max-width:880px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:36px"> <div data-reveal=""> <x-import component-from-global-scope="TRHFurnitureDesignSystem_7b7af6.Eyebrow" rules="{{ true }}" hint-size="auto,20px">THE MAKING</x-import> </div> <div data-reveal="120" style="font-family:var(--font-display);font-weight:500;font-size:clamp(30px,3.4vw,44px);line-height:1.4;color:var(--trh-ink);text-wrap:pretty">We are makers of ethically produced wood furniture, <span style="font-style:italic;color:var(--trh-bronze-deep)">preserving the character</span> of every board we touch.</div> </div> </section> <section data-m="stack" data-screen-label="What we build" style="display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,6vw,72px);padding:24px clamp(20px,5vw,56px) clamp(56px,12vw,96px);background:var(--surface-sheet);align-items:stretch"> <div data-reveal="" style="display:flex;flex-direction:column;justify-content:center"> <sc-for list="{{ wwbItems }}" as="it" hint-placeholder-count="3"> <div onMouseEnter="{{ it.hover }}" style="position:relative;padding:34px 0 34px 32px;border-bottom:1px solid var(--border-default);cursor:default"> <div style="position:absolute;left:0;top:34px;width:1px;height:{{ it.barH }};background:var(--trh-bronze);transition:height .55s cubic-bezier(.22,1,.36,1)"></div> <div style="display:flex;align-items:baseline;gap:20px"> <span style="font-family:var(--font-display);font-style:italic;font-weight:400;font-size:15px;letter-spacing:.04em;color:{{ it.numColor }};transition:color .4s ease;min-width:22px">{{ it.num }}</span> <span style="font-family:var(--font-display);font-weight:500;font-size:clamp(22px,2vw,28px);line-height:1.1;color:{{ it.labelColor }};transition:color .4s ease;letter-spacing:.005em">{{ it.title }}</span> </div> <div style="font-weight:300;font-size:14px;line-height:1.75;color:var(--text-body);max-width:340px;margin-left:42px;margin-top:{{ it.descMt }};max-height:{{ it.descMaxH }};opacity:{{ it.descOp }};overflow:hidden;transition:opacity .5s ease .1s,max-height .55s cubic-bezier(.22,1,.36,1),margin-top .55s cubic-bezier(.22,1,.36,1)">{{ it.desc }}</div> </div> </sc-for> </div> <div style="display:flex;flex-direction:column;gap:14px"> <div data-img="" style="position:relative;overflow:hidden;min-height:360px;height:68vh;background:#d8d4cc"> <img src="assets/collection/Dusk_Collateral_01-hero.webp" alt="Ebonized dining table" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .7s ease,transform 1.6s cubic-bezier(.22,1,.36,1);opacity:{{ wwbOp0 }};transform:{{ wwbSc0 }}"> <img src="assets/collection/Dusk_Grand-Pedestal_02.webp" alt="Ebonized round table on a bronze pedestal" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .7s ease,transform 1.6s cubic-bezier(.22,1,.36,1);opacity:{{ wwbOp1 }};transform:{{ wwbSc1 }}"> <img src="assets/collection/Ember_Knob_01-hero.webp" alt="Yakisugi round pedestal table" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 85%;transition:opacity .7s ease,transform 1.6s cubic-bezier(.22,1,.36,1);opacity:{{ wwbOp2 }};transform:{{ wwbSc2 }}"> <div style="position:absolute;inset:16px;border:1px solid rgba(244,241,236,.28);pointer-events:none"></div> </div> <div style="display:flex;justify-content:space-between;align-items:baseline;gap:24px;font-size:10px;font-weight:500;letter-spacing:var(--track-label);color:var(--trh-umber)"> <span style="transition:opacity .4s ease">{{ wwbCaption }}</span> <span style="color:var(--trh-bronze)">{{ wwbCount }}</span> </div> </div> </section> <section id="collections" data-screen-label="Collections label" style="padding:clamp(64px,14vw,110px) clamp(20px,5vw,56px) clamp(22px,5.5vw,64px);display:flex;justify-content:center;background:var(--surface-sheet)"> <div data-reveal=""> <x-import component-from-global-scope="TRHFurnitureDesignSystem_7b7af6.Eyebrow" rules="{{ true }}" hint-size="auto,20px">THE COLLECTIONS</x-import> </div> </section> <section data-screen-label="Ember collection" style="position:relative;height:96vh;min-height:640px;overflow:hidden;background:#0d0b0a"> <div style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding-top:23vh"> <img src="assets/collection/Ember_section-web.webp" alt="EMBER charred round pedestal table" data-parallax="60" style="width:clamp(300px,58vw,820px);object-fit:contain;filter:brightness(.8) contrast(1.04);display:block"></div> <div style="position:absolute;inset:0;background:linear-gradient(to bottom,rgba(13,11,10,.72) 0%,rgba(13,11,10,.18) 44%,rgba(13,11,10,.66) 100%);pointer-events:none"></div> <div style="position:absolute;inset:28px;border:1px solid rgba(200,168,120,.38);pointer-events:none"></div> <div style="position:absolute;top:16px;left:50%;transform:translateX(-50%);background:#0d0b0a;border:1px solid rgba(200,168,120,.55);padding:6px 20px;font-size:10px;font-weight:500;letter-spacing:var(--track-label);text-indent:var(--track-label);color:var(--trh-bronze);white-space:nowrap">FEATURED COLLECTION</div> <div style="position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:13vh;gap:18px;text-align:center;pointer-events:none"> <div data-reveal="" style="font-family:var(--font-mark);font-size:clamp(64px,8vw,110px);line-height:1;letter-spacing:.06em;color:var(--trh-ivory)">EMBER</div> <div data-reveal="100" style="font-weight:500;font-size:13px;letter-spacing:var(--track-collection);text-indent:var(--track-collection);color:var(--trh-bronze)">COLLECTION</div> <div data-reveal="180" style="display:flex;align-items:flex-end;gap:9px"> <span style="font-family:var(--font-display);font-style:italic;font-weight:500;font-size:12px;line-height:1;letter-spacing:.08em;color:var(--trh-smoke)">by</span> <span style="font-family:var(--font-mark);font-size:15px;line-height:1;color:var(--trh-smoke)">ROHN</span> <span style="font-weight:500;font-size:8px;line-height:1;letter-spacing:var(--track-mark);margin-right:calc(-1 * var(--track-mark));color:var(--trh-smoke);padding-bottom:2px">STUDIO</span> </div> </div> <div style="position:absolute;left:0;right:0;bottom:72px;display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center;pointer-events:none"> <div data-reveal="120" style="font-weight:300;font-size:14px;line-height:1.7;color:rgba(244,241,236,.75);max-width:420px">Charred in the Yakisugi tradition: brushed, oiled, and glowing from within.</div> <a data-reveal="200" href="/collections/ember/" style="display:inline-flex;white-space:nowrap;align-items:center;gap:14px;font-size:11px;font-weight:500;letter-spacing:var(--track-label);color:var(--trh-bronze);pointer-events:auto;transition:gap .45s cubic-bezier(.22,1,.36,1),color .3s ease" style-hover="color:var(--trh-ivory);gap:22px">EXPLORE EMBER <svg width="22" height="8" viewBox="0 0 22 8" fill="none" style="display:inline-block"><path d="M0 4 H20 M16 1 L20 4 L16 7" stroke="currentColor" stroke-width="1"></path></svg></a> </div> </section> <section data-m="stack nogap" data-screen-label="Sable collection" style="position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);background:var(--surface-inset);border-top:1px solid var(--border-default)"> <img data-m="sable-img" src="assets/collection/Sable_texture-web.webp" alt="Sable walnut table top" aria-hidden="true" style="position:absolute;right:0;top:-90%;height:205%;width:auto;max-width:58%;object-fit:contain;object-position:right center;pointer-events:none"> <div style="position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:22px;padding:clamp(20px,5vw,56px) clamp(22px,5.5vw,64px);text-align:center"> <div data-reveal="" style="display:flex;flex-direction:column;align-items:center;gap:12px"> <div style="font-family:var(--font-mark);font-size:46px;line-height:1;letter-spacing:.06em;color:var(--trh-ink)">SABLE</div> <div style="font-weight:500;font-size:11px;letter-spacing:var(--track-collection);text-indent:var(--track-collection);color:var(--trh-bronze-deep)">COLLECTION</div> <div style="font-family:var(--font-display);font-style:italic;font-weight:500;font-size:14px;letter-spacing:.04em;color:var(--trh-umber)">Walnut, exclusively</div> </div> <div data-reveal="120" style="font-weight:300;font-size:14px;line-height:1.75;color:var(--text-body);max-width:340px">Our signature line: figured grain and quiet, deliberate forms.</div> <a data-reveal="200" href="/collections/sable/" style="display:inline-flex;white-space:nowrap;align-items:center;gap:14px;font-size:11px;font-weight:500;letter-spacing:var(--track-label);color:var(--trh-bronze-deep);transition:gap .45s cubic-bezier(.22,1,.36,1),color .3s ease" style-hover="color:var(--trh-ink);gap:22px">EXPLORE SABLE <svg width="22" height="8" viewBox="0 0 22 8" fill="none" style="display:inline-block"><path d="M0 4 H20 M16 1 L20 4 L16 7" stroke="currentColor" stroke-width="1"></path></svg></a> </div> <div data-m="stone-sp sable-sp" aria-hidden="true" style="align-self:stretch;min-height:42vh"></div> </section> <section data-m="stack nogap" data-screen-label="Dusk collection" style="position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);min-height:78vh;background:#131116;border-top:1px solid rgba(200,168,120,.18)"> <img data-m="dusk-img" data-img="" src="assets/collection/Dusk_section-v2-web.webp" alt="Dusk ebonized oval table on a cast bronze pedestal" style="position:absolute;top:0;left:0;width:90%;height:100%;object-fit:cover;object-position:0% 44%;display:block;-webkit-mask-image:linear-gradient(to right,#000 80%,transparent);mask-image:linear-gradient(to right,#000 80%,transparent)"> <div data-m="dusk-ov" style="position:absolute;inset:0;background:linear-gradient(to right,rgba(19,17,22,0) 35%,rgba(19,17,22,.55) 62%,rgba(19,17,22,.8) 100%);pointer-events:none"></div> <div data-m="dusk-sp"></div> <div style="position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:22px;padding:clamp(20px,5vw,56px) clamp(22px,5.5vw,64px);text-align:center"> <div data-reveal="" style="display:flex;flex-direction:column;align-items:center;gap:12px"> <div style="font-family:var(--font-mark);font-size:46px;line-height:1;letter-spacing:.06em;color:var(--trh-ivory)">DUSK</div> <div style="font-weight:500;font-size:11px;letter-spacing:var(--track-collection);text-indent:var(--track-collection);color:#9A94A6">COLLECTION</div> <div style="font-family:var(--font-display);font-style:italic;font-weight:500;font-size:14px;letter-spacing:.04em;color:#736D7C">Ebonized <span style="font-style:normal">-or-</span> deep black</div> </div> <div data-reveal="120" style="font-weight:300;font-size:14px;line-height:1.75;color:rgba(244,241,236,.72);max-width:340px">Hardwoods finished ebonized or a deep, intense black: grain you read by touch as much as by eye.</div> <a data-reveal="200" href="/collections/dusk/" style="display:inline-flex;white-space:nowrap;align-items:center;gap:14px;font-size:11px;font-weight:500;letter-spacing:var(--track-label);color:#9A94A6;transition:gap .45s cubic-bezier(.22,1,.36,1),color .3s ease" style-hover="color:var(--trh-ivory);gap:22px">EXPLORE DUSK <svg width="22" height="8" viewBox="0 0 22 8" fill="none" style="display:inline-block"><path d="M0 4 H20 M16 1 L20 4 L16 7" stroke="currentColor" stroke-width="1"></path></svg></a> </div> </section> <section data-m="stack nogap" data-screen-label="Stone collection" style="position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);background:#EDE5D6;border-top:1px solid var(--border-default)"> <img data-m="stone-img" src="assets/collection/Stone_texture-web.webp" alt="Stone spalted maple table top" aria-hidden="true" style="position:absolute;right:0;bottom:-15%;height:205%;width:auto;max-width:58%;object-fit:contain;object-position:right bottom;pointer-events:none"> <div style="position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:22px;padding:clamp(20px,5vw,56px) clamp(22px,5.5vw,64px);text-align:center"> <div data-reveal="" style="display:flex;flex-direction:column;align-items:center;gap:12px"> <div style="font-family:var(--font-mark);font-size:46px;line-height:1;letter-spacing:.06em;color:var(--trh-ink)">STONE</div> <div style="font-weight:500;font-size:11px;letter-spacing:var(--track-collection);text-indent:var(--track-collection);color:#A98B58">COLLECTION</div> <div style="font-family:var(--font-display);font-style:italic;font-weight:500;font-size:14px;letter-spacing:.04em;color:var(--trh-umber)">Natural: the wood as it is</div> </div> <div data-reveal="120" style="font-weight:300;font-size:14px;line-height:1.75;color:var(--text-body);max-width:340px">All of our natural furniture: hardwoods finished to enhance their natural tone and the character already in the board.</div> <a data-reveal="200" href="/collections/stone/" style="display:inline-flex;white-space:nowrap;align-items:center;gap:14px;font-size:11px;font-weight:500;letter-spacing:var(--track-label);color:#A98B58;transition:gap .45s cubic-bezier(.22,1,.36,1),color .3s ease" style-hover="color:var(--trh-ink);gap:22px">EXPLORE STONE <svg width="22" height="8" viewBox="0 0 22 8" fill="none" style="display:inline-block"><path d="M0 4 H20 M16 1 L20 4 L16 7" stroke="currentColor" stroke-width="1"></path></svg></a> </div> <div data-m="stone-sp" aria-hidden="true" style="align-self:stretch;min-height:42vh"></div> </section> <section data-m="stack nogap" data-screen-label="Dune collection" style="display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);background:#E9E8E4;border-top:1px solid var(--border-default)"> <div data-img="" data-m="m-imgbox" style="display:flex;align-items:center;justify-content:flex-start;align-self:stretch;min-height:42vh;overflow:hidden"> <img data-m="m-img" src="assets/collection/Dune_section-web.webp" alt="Dune oval oak dining table with fluted pedestal" data-parallax="38" style="width:96%;flex-shrink:0;object-fit:contain"> </div> <div style="display:flex;flex-direction:column;justify-content:center;align-items:center;gap:22px;padding:clamp(20px,5vw,56px) clamp(22px,5.5vw,64px);text-align:center"> <div data-reveal="" style="display:flex;flex-direction:column;align-items:center;gap:12px"> <div style="font-family:var(--font-mark);font-size:46px;line-height:1;letter-spacing:.06em;color:var(--trh-ink)">DUNE</div> <div style="font-weight:500;font-size:11px;letter-spacing:var(--track-collection);text-indent:var(--track-collection);color:#85827A">COLLECTION</div> <div style="font-family:var(--font-display);font-style:italic;font-weight:500;font-size:14px;letter-spacing:.04em;color:#8F8B82">White &amp; grey finishes</div> </div> <div data-reveal="120" style="font-weight:300;font-size:14px;line-height:1.75;color:var(--text-body);max-width:340px">Our white and grey work, finishes that quiet the colour of the wood so the form reads first.</div> <a data-reveal="200" href="/collections/dune/" style="display:inline-flex;white-space:nowrap;align-items:center;gap:14px;font-size:11px;font-weight:500;letter-spacing:var(--track-label);color:#85827A;transition:gap .45s cubic-bezier(.22,1,.36,1),color .3s ease" style-hover="color:var(--trh-ink);gap:22px">EXPLORE DUNE <svg width="22" height="8" viewBox="0 0 22 8" fill="none" style="display:inline-block"><path d="M0 4 H20 M16 1 L20 4 L16 7" stroke="currentColor" stroke-width="1"></path></svg></a> </div> </section> <section data-m="stack nogap" data-screen-label="Cedar collection" style="display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);background:#384130;border-top:1px solid rgba(200,168,120,.18)"> <div style="display:flex;flex-direction:column;justify-content:center;align-items:center;gap:22px;padding:clamp(20px,5vw,56px) clamp(22px,5.5vw,64px);text-align:center"> <div data-reveal="" style="display:flex;flex-direction:column;align-items:center;gap:12px"> <div style="font-family:var(--font-mark);font-size:46px;line-height:1;letter-spacing:.06em;color:var(--trh-ivory)">CEDAR</div> <div style="font-weight:500;font-size:11px;letter-spacing:var(--track-collection);text-indent:var(--track-collection);color:#ABB694">COLLECTION</div> <div style="font-family:var(--font-display);font-style:italic;font-weight:500;font-size:14px;letter-spacing:.04em;color:#8C967C">Outdoor furniture</div> </div> <div data-reveal="120" style="font-weight:300;font-size:14px;line-height:1.75;color:rgba(244,241,236,.75);max-width:340px">Everything we build for outdoors - sized, joined, and finished to thrive in all 4 seasons.</div> <a data-reveal="200" href="/collections/cedar/" style="display:inline-flex;white-space:nowrap;align-items:center;gap:14px;font-size:11px;font-weight:500;letter-spacing:var(--track-label);color:#ABB694;transition:gap .45s cubic-bezier(.22,1,.36,1),color .3s ease" style-hover="color:var(--trh-ivory);gap:22px">EXPLORE CEDAR <svg width="22" height="8" viewBox="0 0 22 8" fill="none" style="display:inline-block"><path d="M0 4 H20 M16 1 L20 4 L16 7" stroke="currentColor" stroke-width="1"></path></svg></a> </div> <div data-img="" data-m="m-imgbox" style="position:relative;align-self:stretch;min-height:42vh;overflow:hidden"> <img data-m="m-img" src="assets/collection/Cedar_Grove_cutout-web.webp" alt="Cedar Grove live-edge table detail" data-parallax="38" data-parallax-base="-58%" style="position:absolute;left:50%;top:50%;width:105%;max-width:none;object-fit:contain;margin-left:-52.5%;transform:translateY(-58%)"> </div> </section> <section id="workshop" data-screen-label="Workshop" style="display:flex;justify-content:center;padding:clamp(88px,13vw,150px) clamp(20px,5vw,56px);background:var(--surface-inset);border-top:1px solid var(--border-default);border-bottom:1px solid var(--border-default)"> <div style="max-width:640px;display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center"> <div data-reveal="" style="font-size:11px;letter-spacing:var(--track-wide);color:var(--text-label)">THE WORKSHOP · BRIGHTON, MICHIGAN</div> <div data-reveal="100" style="font-family:var(--font-display);font-weight:600;font-size:clamp(30px,2.8vw,40px);line-height:1.2;color:var(--text-heading);text-wrap:balance">Every board, understood before it is touched</div> <div data-reveal="180" style="font-weight:300;font-size:14px;line-height:1.8;color:var(--text-body);max-width:460px;text-wrap:pretty">Our sole focus is detail and respect for the material, preserving the natural character within each piece. From a single slab mantel to a twelve foot dining table.</div> <div data-reveal="240" style="margin-top:10px"><x-import component-from-global-scope="TRHFurnitureDesignSystem_7b7af6.Button" variant="outline" on-click="{{ goCustom }}" hint-size="auto,46px">Work with us</x-import></div> </div> </section> <section id="journal" data-screen-label="Journal" style="padding:clamp(64px,14vw,110px) clamp(20px,5vw,56px) clamp(64px,14vw,110px);background:var(--surface-sheet)"> <div style="max-width:880px;margin:0 auto"> <div data-reveal="" style="margin-bottom:28px;display:flex;align-items:center;justify-content:space-between;gap:24px"> <x-import component-from-global-scope="TRHFurnitureDesignSystem_7b7af6.Eyebrow" rules="{{ false }}" hint-size="auto,20px">BLOG</x-import> <a href="/blog/" style="font-size:10px;font-weight:500;letter-spacing:var(--track-label);color:var(--trh-bronze-deep)" style-hover="color:var(--trh-ink)">ALL POSTS</a> </div> <a data-m="colm" data-reveal="0" href="/blog/rohn-studio/" style="display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding:22px 0;border-top:1px solid var(--border-default);color:var(--trh-ink)" style-hover="color:var(--trh-bronze-deep)"> <span style="font-family:var(--font-display);font-weight:600;font-size:21px;line-height:1.3">TRH Furniture is now ROHN Studio</span> <span style="font-size:10px;font-weight:500;letter-spacing:var(--track-label);color:var(--text-label);white-space:nowrap">NEWS · OCTOBER 2026</span> </a> <a data-m="colm" data-reveal="80" href="/blog/yakisugi/" style="display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding:22px 0;border-top:1px solid var(--border-default);color:var(--trh-ink)" style-hover="color:var(--trh-bronze-deep)"> <span style="font-family:var(--font-display);font-weight:600;font-size:21px;line-height:1.3">Charring hardwood: notes on our Yakisugi process</span> <span style="font-size:10px;font-weight:500;letter-spacing:var(--track-label);color:var(--text-label);white-space:nowrap">PROCESS · JUNE 2026</span> </a> <a data-m="colm" data-reveal="160" href="/blog/fluted-extension-table/" style="display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding:22px 0;border-top:1px solid var(--border-default);color:var(--trh-ink)" style-hover="color:var(--trh-bronze-deep)"> <span style="font-family:var(--font-display);font-weight:600;font-size:21px;line-height:1.3">A fluted extension table for a modern interior</span> <span style="font-size:10px;font-weight:500;letter-spacing:var(--track-label);color:var(--text-label);white-space:nowrap">WORKSHOP · MAY 2026</span> </a> <a data-m="colm" data-reveal="240" href="/blog/salvaged-hardwoods/" style="display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding:22px 0;border-top:1px solid var(--border-default);border-bottom:1px solid var(--border-default);color:var(--trh-ink)" style-hover="color:var(--trh-bronze-deep)"> <span style="font-family:var(--font-display);font-weight:600;font-size:21px;line-height:1.3">Why we build with salvaged hardwoods</span> <span style="font-size:10px;font-weight:500;letter-spacing:var(--track-label);color:var(--text-label);white-space:nowrap">MATERIALS · APRIL 2026</span> </a> <sc-if value="{{ showNewsletter }}" hint-placeholder-val="{{ true }}"> <div data-reveal="" style="margin-top:64px;display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center"> <div style="font-size:12px;font-weight:500;letter-spacing:var(--track-label);color:var(--text-heading)">LETTERS FROM THE WORKSHOP</div> <div style="font-weight:300;font-size:13px;line-height:1.6;color:var(--text-body);max-width:420px">Occasional notes on new builds, process, and pieces for sale. No noise.</div> <sc-if value="{{ notSubscribed }}" hint-placeholder-val="{{ true }}"> <form onSubmit="{{ onSubscribe }}" style="display:flex;gap:12px;width:420px;max-width:100%;margin-top:6px"> <div style="flex:1"><x-import component-from-global-scope="TRHFurnitureDesignSystem_7b7af6.Input" type="email" required="{{ true }}" placeholder="Your email address" hint-size="100%,44px"></x-import></div> <x-import component-from-global-scope="TRHFurnitureDesignSystem_7b7af6.Button" type="submit" hint-size="auto,44px">Subscribe</x-import> </form> </sc-if> <sc-if value="{{ subscribed }}" hint-placeholder-val="{{ false }}"> <div style="font-family:var(--font-display);font-style:italic;font-size:16px;color:var(--trh-bronze-deep)">Thank you. You are on the list.</div> </sc-if> </div> </sc-if> </div> </section> <section id="reviews" data-screen-label="Reviews" style="padding:clamp(56px,12vw,96px) 0 clamp(64px,14vw,110px);background:var(--surface-inset);border-top:1px solid var(--border-default)"> <div style="display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:0 clamp(20px,5vw,56px);margin-bottom:40px"> <div style="display:flex;flex-direction:column;gap:18px"> <x-import component-from-global-scope="TRHFurnitureDesignSystem_7b7af6.Eyebrow" rules="{{ false }}" hint-size="auto,20px">CLIENT REVIEWS</x-import> <div style="font-family:var(--font-display);font-weight:600;font-size:clamp(28px,2.8vw,38px);line-height:1.2;color:var(--text-heading)">Our furniture in their homes</div> <div style="display:flex;align-items:baseline;gap:12px;flex-wrap:wrap"> <span style="font-size:14px;letter-spacing:.12em;color:var(--trh-bronze-deep)">★★★★★</span> <span style="font-weight:300;font-size:13px;color:var(--text-body)">4.7 average from 79 reviews</span> </div> </div> <div style="display:flex;gap:10px"> <button type="button" onClick="{{ reviewsPrev }}" aria-label="Previous reviews" style="width:46px;height:46px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--border-strong);color:var(--trh-ink);cursor:pointer;font-size:16px" style-hover="border-color:var(--trh-bronze);color:var(--trh-bronze-deep)">←</button> <button type="button" onClick="{{ reviewsNext }}" aria-label="Next reviews" style="width:46px;height:46px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--border-strong);color:var(--trh-ink);cursor:pointer;font-size:16px" style-hover="border-color:var(--trh-bronze);color:var(--trh-bronze-deep)">→</button> </div> </div> <div ref="{{ reviewsRef }}" style="display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 56px;padding:0 clamp(20px,5vw,56px) 8px;scrollbar-width:none"> <sc-for list="{{ homeReviews }}" as="r" hint-placeholder-count="4"> <article style="flex:0 0 min(400px,82vw);scroll-snap-align:start;display:flex;flex-direction:column;gap:20px;padding:32px 30px;background:var(--surface-sheet);border:1px solid var(--border-default)"> <div style="font-size:13px;letter-spacing:.12em;color:var(--trh-bronze-deep)">★★★★★</div> <div style="flex:1;font-family:var(--font-display);font-weight:500;font-size:17px;line-height:1.65;color:var(--trh-ink);text-wrap:pretty">“{{ r.text }}”</div> <div style="display:flex;flex-direction:column;gap:6px;padding-top:18px;border-top:1px solid var(--border-default)"> <div style="font-size:11px;font-weight:500;letter-spacing:var(--track-label);color:var(--trh-ink)">{{ r.name }}</div> <div style="font-weight:300;font-size:12px;color:var(--text-label)">{{ r.piece }} · {{ r.date }}</div> </div> </article> </sc-for> </div> </section> </div> </sc-if> <sc-if value="{{ showCustomCta }}" hint-placeholder-val="{{ true }}"> <section id="custom" data-screen-label="Custom order CTA" style="background:var(--surface-dark);padding:clamp(64px,14vw,110px) clamp(20px,5vw,56px);display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center"> <div data-reveal=""> <svg viewBox="0 0 144 225" style="width:26px;height:41px;color:var(--trh-bronze)"><use href="#rohn-icon"></use></svg> </div> <div data-reveal="80" style="font-family:var(--font-display);font-weight:600;font-size:clamp(34px,3.4vw,48px);line-height:1.2;color:var(--trh-ivory);max-width:640px;text-wrap:pretty">Have a piece in mind?</div> <div data-reveal="160" style="font-weight:300;font-size:15px;line-height:1.7;color:var(--trh-smoke);max-width:540px">Tell us what you are imagining, and we will build it to last generations.</div> <div data-reveal="240" style="display:flex;flex-wrap:wrap;justify-content:center;gap:12px 16px;margin-top:12px"> <x-import component-from-global-scope="TRHFurnitureDesignSystem_7b7af6.Button" variant="bronze" on-click="{{ emailShop }}" hint-size="auto,46px">Request a quote</x-import> <x-import component-from-global-scope="TRHFurnitureDesignSystem_7b7af6.Button" variant="outline-dark" on-click="{{ callShop }}" hint-size="auto,46px">(810) 887 9950</x-import> </div> </section> </sc-if> </main> <footer data-screen-label="Footer" style="background:var(--surface-dark);border-top:1px solid rgba(200,168,120,.25);padding:44px clamp(20px,5vw,56px) 48px"> <div style="display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap"> <div style="display:flex;align-items:center;gap:12px"> <svg viewBox="0 0 144 225" style="width:13px;height:20px;color:var(--trh-bronze)"><use href="#rohn-icon"></use></svg> <span style="font-family:var(--font-mark);font-size:16px;line-height:1;letter-spacing:.06em;color:var(--trh-ivory)">ROHN</span> <span style="font-weight:400;font-size:11px;letter-spacing:.3em;color:var(--trh-smoke)">STUDIO</span> </div> <nav style="display:flex;align-items:center;gap:14px 26px;flex-wrap:wrap"> <a href="/about/" style="font-size:10px;font-weight:500;letter-spacing:var(--track-label);color:var(--trh-smoke)" style-hover="color:var(--trh-bronze)">ABOUT</a> <a href="/for-designers/" style="font-size:10px;font-weight:500;letter-spacing:var(--track-label);color:var(--trh-smoke)" style-hover="color:var(--trh-bronze)">FOR DESIGNERS</a> <a href="#collections" style="font-size:10px;font-weight:500;letter-spacing:var(--track-label);color:var(--trh-smoke)" style-hover="color:var(--trh-bronze)">SHOP</a> <a href="#collections" style="font-size:10px;font-weight:500;letter-spacing:var(--track-label);color:var(--trh-smoke)" style-hover="color:var(--trh-bronze)">COLLECTIONS</a> <a href="/blog/" style="font-size:10px;font-weight:500;letter-spacing:var(--track-label);color:var(--trh-smoke)" style-hover="color:var(--trh-bronze)">BLOG</a> <a href="/contact/" style="font-size:10px;font-weight:500;letter-spacing:var(--track-label);color:var(--trh-smoke)" style-hover="color:var(--trh-bronze)">CONTACT</a> </nav> <div style="display:flex;align-items:center;gap:18px"> <a href="https://www.facebook.com/ROHN.Studio" target="_blank" rel="noopener" aria-label="Facebook" style="display:flex;color:var(--trh-bronze)" style-hover="color:var(--trh-ivory)"><svg width="17" height="17" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.3"><path d="M13.5 2.5h-2.6a3.4 3.4 0 0 0-3.4 3.4v2.6H5v3h2.5v6h3v-6h2.6l.4-3h-3V6.1c0-.6.4-1 1-1h2z"></path></svg></a> <a href="https://www.instagram.com/rohn.studio/" target="_blank" rel="noopener" aria-label="Instagram" style="display:flex;color:var(--trh-bronze)" style-hover="color:var(--trh-ivory)"><svg width="17" height="17" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.3"><rect x="2.8" y="2.8" width="14.4" height="14.4" rx="4"></rect><circle cx="10" cy="10" r="3.4"></circle><circle cx="14.6" cy="5.4" r="0.6" fill="currentColor" stroke="none"></circle></svg></a> <a href="https://www.youtube.com/@ROHN.Studio" target="_blank" rel="noopener" aria-label="YouTube" style="display:flex;color:var(--trh-bronze)" style-hover="color:var(--trh-ivory)"><svg width="18" height="17" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.3"><rect x="1.8" y="4.5" width="16.4" height="11" rx="2.6"></rect><path d="M8.4 7.6l4 2.4-4 2.4z" fill="currentColor" stroke="none"></path></svg></a> </div> </div> <div style="margin-top:30px;display:flex;align-items:center;justify-content:space-between;gap:14px 28px;flex-wrap:wrap;font-size:11px;font-weight:300;letter-spacing:.08em;color:var(--trh-smoke)"> <div>© 2026 ROHN Studio · Based in Brighton, Michigan · <span style="font-family: var(--font-display); font-style: italic;">Where rustic meets modern design</span></div> <div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap"> <span>Site design by</span> <a href="https://leveretdrive.com" target="_blank" rel="noopener" style="display:flex;align-items:center;gap:7px;color:var(--trh-smoke)" style-hover="color:var(--trh-bronze)"><img src="assets/img/LD-Icon-white-web.webp" alt="" width="16" height="16" style="display:block;width:16px;height:16px">Leveret Drive</a> </div> </div> </footer> </div> </x-dc>