:root {
  --ink: #171714;
  --paper: #f0eee8;
  --warm: #d8d1c5;
  --stone: #b4aa9b;
  --white: #fbfaf7;
  --line: rgba(23, 23, 20, .18);
  --serif: Georgia, 'Times New Roman', serif;
  --sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 15px; overflow-x: hidden; }
body.no-scroll { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
.demo-ribbon { height: 30px; background: #171714; color: #f4f1e9; display: flex; align-items: center; justify-content: space-between; padding: 0 2vw; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; }
.site-header { height: 86px; padding: 0 3.1vw; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid var(--line); position: relative; z-index: 20; background: rgba(240,238,232,.94); backdrop-filter: blur(18px); }
.brand { display: inline-flex; width: fit-content; flex-direction: column; line-height: .75; letter-spacing: -.06em; }
.brand span { font: 700 28px/1 var(--sans); }
.brand small { font-size: 7px; letter-spacing: .46em; padding-left: 2px; margin-top: 7px; }
.desktop-nav { display: flex; gap: 34px; font-size: 12px; }
.desktop-nav a, .text-button { position: relative; }
.desktop-nav a:after, .text-button:after { content: ''; position: absolute; left: 0; right: 100%; bottom: -5px; height: 1px; background: currentColor; transition: right .35s; }
.desktop-nav a:hover:after, .text-button:hover:after { right: 0; }
.header-actions { justify-self: end; display: flex; align-items: center; gap: 24px; }
.text-button, .menu-button { border: 0; background: none; cursor: pointer; padding: 0; font-size: 12px; }
.menu-button { display: none; width: 29px; height: 18px; position: relative; }
.menu-button span { position: absolute; left: 0; width: 100%; height: 1px; background: var(--ink); }
.menu-button span:first-child { top: 4px; }.menu-button span:last-child { top: 13px; }
.mobile-menu { position: fixed; inset: 0; z-index: 100; background: var(--ink); color: white; padding: 30px; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .5s cubic-bezier(.77,0,.18,1); }
.mobile-menu.open { transform: translateX(0); }
.mobile-menu .mobile-close { align-self: flex-end; border: 0; background: none; color: white; }
.mobile-menu a { font: 48px/1.25 var(--serif); border-bottom: 1px solid rgba(255,255,255,.18); padding: 18px 0; }
.mobile-menu p { margin-top: auto; color: #aaa; }
.hero { height: calc(100vh - 116px); min-height: 650px; position: relative; color: white; overflow: hidden; }
.hero-image { position: absolute; inset: 0; background-color: #756f66; background-image: url('https://images.unsplash.com/photo-1616486338812-3dadae4b4ace?auto=format&fit=crop&w=2200&q=90'); background-size: cover; background-position: center; transform: scale(1.03); animation: heroScale 16s ease-out forwards; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(16,15,13,.58) 0%, rgba(16,15,13,.16) 54%, rgba(16,15,13,.05) 100%), linear-gradient(0deg, rgba(0,0,0,.3), transparent 42%); }
@keyframes heroScale { to { transform: scale(1); } }
.hero-copy { position: absolute; left: 6vw; bottom: 10vh; max-width: 760px; }
.eyebrow { text-transform: uppercase; letter-spacing: .17em; font-size: 10px; margin: 0 0 24px; }.eyebrow.dark { color: #5d584f; }
.hero h1 { font: 400 clamp(64px, 9vw, 145px)/.8 var(--serif); letter-spacing: -.07em; margin: 0; }
.hero h1 em { font-weight: 400; }
.hero-note { width: 390px; max-width: 100%; font-size: 14px; line-height: 1.65; margin: 34px 0 30px; color: rgba(255,255,255,.82); }
.arrow-link { display: inline-flex; align-items: center; gap: 34px; border-bottom: 1px solid currentColor; padding-bottom: 8px; font-size: 12px; }
.arrow-link span { transition: transform .3s; }.arrow-link:hover span { transform: translate(4px,-4px); }.arrow-link.light { color: white; }
.hero-index { position: absolute; right: 4vw; bottom: 7vh; display: flex; align-items: center; gap: 12px; font-size: 9px; letter-spacing: .12em; }
.hero-index .line { width: 70px; height: 1px; background: rgba(255,255,255,.6); }
.section-pad { padding: 130px 5vw; }
.section-label { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.manifesto { display: grid; grid-template-columns: 1fr 3fr; border-bottom: 1px solid var(--line); }
.manifesto-copy { max-width: 1060px; }
.manifesto-copy p { font: 400 clamp(36px, 5vw, 74px)/1.05 var(--serif); letter-spacing: -.045em; margin: 0; }
.manifesto-copy .muted { color: #aaa297; margin-top: 12px; }
.section-head { display: flex; justify-content: space-between; gap: 30px; align-items: end; margin-bottom: 60px; }
h2 { font: 400 clamp(48px, 6vw, 90px)/.95 var(--serif); letter-spacing: -.055em; margin: 0; }
.filters { display: flex; gap: 7px; flex-wrap: wrap; }
.filter { border: 1px solid var(--line); border-radius: 50px; background: transparent; padding: 10px 17px; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; cursor: pointer; transition: .25s; }
.filter.active, .filter:hover { background: var(--ink); color: white; }
.product-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 85px 22px; }
.product-card { transition: opacity .35s, transform .35s; }
.product-card.hidden { opacity: 0; transform: scale(.97); pointer-events: none; display: none; }
.product-image { width: 100%; height: 660px; border: 0; cursor: zoom-in; background-color: #d4cec2; background-size: cover; background-position: center; display: block; transition: filter .5s, transform .5s; }
.product-card:hover .product-image { filter: saturate(.8); }
.product-one { background-image: url('https://images.unsplash.com/photo-1555041469-a586c61ea9bc?auto=format&fit=crop&w=1400&q=88'); }
.product-two { background-image: url('https://images.unsplash.com/photo-1567016432779-094069958ea5?auto=format&fit=crop&w=1400&q=88'); }
.product-three { background-image: url('https://images.unsplash.com/photo-1586023492125-27b2c045efd7?auto=format&fit=crop&w=1400&q=88'); }
.product-four { background-image: url('https://images.unsplash.com/photo-1618221195710-dd6b41faaea6?auto=format&fit=crop&w=1400&q=88'); }
.product-info { display: flex; justify-content: space-between; align-items: start; gap: 20px; padding-top: 18px; }
.product-info h3 { margin: 0 0 5px; font: 400 20px/1.2 var(--serif); }.product-info p { margin: 0; color: #746e66; font-size: 11px; }.product-info strong { font-size: 12px; font-weight: 500; }
.add-link { margin-top: 17px; width: 100%; border: 0; border-top: 1px solid var(--line); background: none; padding: 12px 0; display: flex; justify-content: space-between; cursor: pointer; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.editorial { background: var(--warm); display: grid; grid-template-columns: 1.45fr 1fr; min-height: 850px; }
.editorial-image { background: #8d847a url('https://images.unsplash.com/photo-1616627561950-9f746e330187?auto=format&fit=crop&w=1800&q=88') center/cover no-repeat; }
.editorial-copy { padding: 12vw 6vw; align-self: center; }
.editorial-copy h2 { max-width: 500px; }.editorial-copy > p:not(.eyebrow) { max-width: 410px; line-height: 1.8; color: #625d55; margin: 35px 0; }
.craft { position: relative; display: grid; grid-template-columns: 1fr 2fr; column-gap: 50px; }
.craft-number { font: 350px/.7 var(--serif); color: rgba(23,23,20,.06); position: absolute; right: 2vw; top: 45px; }
.craft-copy { grid-column: 2; position: relative; z-index: 1; }.craft-copy h2 { max-width: 820px; }
.craft-notes { grid-column: 2; display: grid; grid-template-columns: repeat(3,1fr); gap: 40px; margin-top: 100px; border-top: 1px solid var(--line); padding-top: 25px; position: relative; z-index: 1; }
.craft-notes span { font-size: 9px; }.craft-notes h3 { font: 400 22px var(--serif); margin: 55px 0 14px; }.craft-notes p { color: #716b62; line-height: 1.65; font-size: 12px; }
.journal { background: var(--white); }
.journal-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 22px; align-items: start; }
.story-image { height: 470px; background-color: #c7c0b6; background-size: cover; background-position: center; }.story.large .story-image { height: 650px; }
.story-one { background-image: url('https://images.unsplash.com/photo-1586023492125-27b2c045efd7?auto=format&fit=crop&w=1400&q=88'); }.story-two { background-image: url('https://images.unsplash.com/photo-1618221195710-dd6b41faaea6?auto=format&fit=crop&w=1200&q=88'); }.story-three { background-image: url('https://images.unsplash.com/photo-1616486338812-3dadae4b4ace?auto=format&fit=crop&w=1200&q=88'); }
.story > p { font-size: 9px; text-transform: uppercase; letter-spacing: .12em; color: #756f66; margin: 17px 0 10px; }.story h3 { font: 400 24px/1.15 var(--serif); margin: 0; max-width: 420px; }
.trade { background: var(--ink); color: white; padding: 130px 6vw; display: grid; grid-template-columns: 1.3fr .7fr; gap: 100px; align-items: end; }
.trade h2 { font-size: clamp(58px,7vw,110px); }.trade > div:last-child p { color: #aaa79f; line-height: 1.75; max-width: 410px; margin: 0 0 36px; }
.outline-button { border: 1px solid currentColor; padding: 15px 22px; background: transparent; cursor: pointer; font-size: 11px; text-transform: uppercase; letter-spacing: .09em; }.outline-button.light { color: white; }
.newsletter { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: end; }.newsletter h2 { font-size: clamp(42px,5vw,74px); }
.newsletter-form { display: flex; border-bottom: 1px solid var(--ink); }.newsletter-form input { flex: 1; border: 0; background: transparent; padding: 18px 0; outline: none; font-size: 18px; }.newsletter-form button { border: 0; background: transparent; cursor: pointer; }.form-message { grid-column: 2; margin: -60px 0 0; font-size: 11px; }
footer { background: #d7d1c7; padding: 100px 5vw 25px; }
.footer-main { display: grid; grid-template-columns: 2fr repeat(3,1fr); gap: 50px; min-height: 260px; }.footer-main h4 { font-size: 9px; text-transform: uppercase; letter-spacing: .13em; margin: 0 0 27px; }.footer-main > div { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; font-size: 12px; }.footer-main button { border: 0; background: none; padding: 0; cursor: pointer; }
.footer-brand span { font-size: 56px; }.footer-bottom { border-top: 1px solid rgba(23,23,20,.2); padding-top: 22px; display: flex; justify-content: space-between; gap: 20px; font-size: 9px; text-transform: uppercase; letter-spacing: .1em; }
.drawer-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.38); z-index: 80; opacity: 0; pointer-events: none; transition: opacity .35s; }.drawer-backdrop.show { opacity: 1; pointer-events: auto; }
.cart-drawer { position: fixed; right: 0; top: 0; bottom: 0; width: min(520px,100%); background: var(--white); z-index: 90; transform: translateX(100%); transition: transform .45s cubic-bezier(.77,0,.18,1); padding: 38px; display: flex; flex-direction: column; }.cart-drawer.open { transform: translateX(0); }
.drawer-head { display: flex; justify-content: space-between; align-items: start; border-bottom: 1px solid var(--line); padding-bottom: 25px; }.drawer-head h2 { font-size: 48px; }.drawer-head button { border: 0; background: none; cursor: pointer; }
.cart-items { flex: 1; overflow: auto; padding: 20px 0; }.empty-state { color: #817b72; }.cart-item { display: grid; grid-template-columns: 90px 1fr auto; gap: 14px; border-bottom: 1px solid var(--line); padding: 15px 0; }.cart-thumb { background-size: cover; background-position: center; }.cart-item h4 { margin: 8px 0; font: 400 17px var(--serif); }.cart-item button { border: 0; background: none; padding: 0; color: #777; cursor: pointer; font-size: 10px; }.cart-item strong { font-size: 11px; margin-top: 8px; }
.cart-footer { border-top: 1px solid var(--line); padding-top: 22px; }.cart-footer > div { display: flex; justify-content: space-between; margin-bottom: 20px; }.cart-footer small { display: block; text-align: center; margin-top: 12px; color: #777; }
.solid-button { width: 100%; background: var(--ink); color: white; border: 1px solid var(--ink); padding: 16px 20px; cursor: pointer; text-transform: uppercase; letter-spacing: .1em; font-size: 10px; }
dialog { border: 0; padding: 0; background: var(--white); color: var(--ink); box-shadow: 0 40px 120px rgba(0,0,0,.25); } dialog::backdrop { background: rgba(0,0,0,.5); backdrop-filter: blur(6px); }
.product-modal { width: min(980px,92vw); grid-template-columns: 1.15fr .85fr; }.product-modal[open] { display: grid; }.modal-image { min-height: 600px; background-size: cover; background-position: center; }.modal-content { padding: 70px 55px; align-self: center; }.modal-content h2 { font-size: 54px; }.modal-content > p:not(.eyebrow,.modal-price) { line-height: 1.7; color: #6d675e; margin: 25px 0; }.modal-price { font-size: 16px; }
.modal-close { position: absolute; right: 17px; top: 13px; border: 0; background: none; font-size: 30px; cursor: pointer; z-index: 2; }
.form-modal { width: min(720px,92vw); padding: 60px; }.form-modal h2 { font-size: 54px; }.modal-intro { color: #746f67; line-height: 1.6; }.form-modal form { display: grid; gap: 17px; margin-top: 30px; }.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }.form-modal label { display: grid; gap: 8px; font-size: 10px; text-transform: uppercase; letter-spacing: .09em; }.form-modal input,.form-modal textarea,.form-modal select { border: 1px solid var(--line); background: transparent; padding: 13px; outline: none; text-transform: none; letter-spacing: normal; }
.search-panel { position: fixed; inset: 0 0 auto; min-height: 380px; background: var(--white); z-index: 95; padding: 50px 8vw; transform: translateY(-105%); transition: transform .45s cubic-bezier(.77,0,.18,1); box-shadow: 0 30px 60px rgba(0,0,0,.12); }.search-panel.open { transform: translateY(0); }.search-panel > button { float: right; border: 0; background: none; cursor: pointer; }.search-panel input { width: 100%; font: 400 clamp(40px,7vw,90px) var(--serif); border: 0; border-bottom: 1px solid var(--ink); background: transparent; outline: none; padding: 15px 0; }.search-panel > p:last-child { color: #777; }
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform .9s ease; }.reveal.visible { opacity: 1; transform: translateY(0); }.delay-1 { transition-delay: .12s; }.delay-2 { transition-delay: .24s; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
@media (max-width: 1000px) {
  .desktop-nav { display: none; }.menu-button { display: block; }.site-header { grid-template-columns: 1fr 1fr; }.header-actions { gap: 18px; }
  .section-pad { padding: 95px 5vw; }.manifesto { grid-template-columns: 1fr; gap: 50px; }.product-image { height: 500px; }
  .editorial { grid-template-columns: 1fr; }.editorial-image { min-height: 650px; }.editorial-copy { padding: 100px 6vw; }
  .craft { grid-template-columns: 1fr; }.craft-copy,.craft-notes { grid-column: 1; }.craft-notes { grid-template-columns: 1fr 1fr; }
  .journal-grid { grid-template-columns: 1fr 1fr; }.story.large { grid-column: 1 / -1; }.story.large .story-image { height: 600px; }
  .trade { grid-template-columns: 1fr; }.newsletter { grid-template-columns: 1fr; }.form-message { grid-column: 1; margin: 0; }.footer-main { grid-template-columns: 1.5fr 1fr 1fr; }.footer-main > div:last-child { grid-column: 2; }
}
@media (max-width: 680px) {
  .demo-ribbon span:last-child { display: none; }.demo-ribbon { justify-content: center; }
  .site-header { height: 72px; padding: 0 20px; }.header-actions .text-button:first-child { display: none; }.brand span { font-size: 24px; }
  .hero { height: calc(100svh - 102px); min-height: 570px; }.hero-copy { left: 24px; right: 24px; bottom: 70px; }.hero h1 { font-size: clamp(54px,18vw,82px); }.hero-note { margin: 27px 0; }.hero-index { display: none; }
  .section-pad { padding: 78px 22px; }.manifesto-copy p { font-size: 38px; }.section-head { align-items: start; flex-direction: column; margin-bottom: 40px; } h2 { font-size: 50px; }
  .product-grid { grid-template-columns: 1fr; gap: 58px; }.product-image { height: 115vw; max-height: 620px; }
  .editorial-image { min-height: 520px; }.editorial-copy { padding: 75px 24px; }
  .craft-number { font-size: 210px; }.craft-notes { grid-template-columns: 1fr; gap: 5px; margin-top: 60px; }.craft-notes h3 { margin-top: 24px; }
  .journal-grid { grid-template-columns: 1fr; }.story.large { grid-column: auto; }.story-image,.story.large .story-image { height: 120vw; max-height: 600px; }
  .trade { padding: 80px 24px; gap: 50px; }.trade h2 { font-size: 58px; }.newsletter { gap: 45px; }.newsletter-form input { min-width: 0; font-size: 15px; }
  footer { padding: 70px 24px 20px; }.footer-main { grid-template-columns: 1fr 1fr; }.footer-brand { grid-column: 1 / -1; margin-bottom: 40px; }.footer-main > div:last-child { grid-column: 1 / -1; }.footer-bottom { flex-direction: column; }
  .product-modal[open] { display: block; }.modal-image { min-height: 380px; }.modal-content { padding: 40px 25px; }.modal-content h2 { font-size: 42px; }.form-modal { padding: 50px 22px 28px; }.form-modal h2 { font-size: 42px; }.field-row { grid-template-columns: 1fr; }.cart-drawer { padding: 25px; }
}

/* Consistent non-emoji directional arrow */
.ui-arrow{display:inline-block;position:relative;width:.72em;height:.72em;flex:0 0 .72em;margin-left:.42em;vertical-align:.02em;color:currentColor;font-size:1em;line-height:1}.ui-arrow::before{content:"";position:absolute;left:7%;top:49%;width:92%;height:1.5px;border-radius:99px;background:currentColor;transform:rotate(-45deg);transform-origin:center}.ui-arrow::after{content:"";position:absolute;top:3%;right:2%;width:52%;height:52%;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;border-radius:1px}

/* V23 mobile refinement — preserve desktop art direction */
@media (max-width: 680px) {
  html, body { width: 100%; max-width: 100%; overflow-x: clip; }
  .demo-ribbon { min-height: 34px; height: auto; padding: 9px 14px; gap: 12px; line-height: 1.35; }
  .demo-ribbon span:last-child { display: none; }
  .site-header { height: 72px; padding-inline: 18px; }
  .brand span { font-size: 24px; }
  .header-actions { gap: 16px; }

  .hero { height: auto; min-height: 680px; }
  .hero-image { background-position: 58% center; }
  .hero-overlay { background: linear-gradient(0deg, rgba(15,14,12,.68), rgba(15,14,12,.08) 70%); }
  .hero-copy { left: 20px; right: 20px; bottom: 72px; max-width: none; }
  .hero h1 { font-size: clamp(52px, 16vw, 72px); line-height: .86; letter-spacing: -.065em; }
  .hero-note { width: 100%; margin: 25px 0 24px; font-size: 13px; line-height: 1.6; }
  .hero-index { right: 20px; bottom: 22px; }
  .hero-index .line { width: 42px; }

  .section-pad { padding: 82px 20px; }
  .manifesto { grid-template-columns: 1fr; gap: 28px; }
  .manifesto-copy p { font-size: clamp(34px, 10.6vw, 48px); line-height: 1.02; }
  .section-head { align-items: flex-start; flex-direction: column; margin-bottom: 38px; }
  h2 { font-size: clamp(43px, 13vw, 62px); line-height: .96; }

  .product-grid { grid-template-columns: 1fr; gap: 52px; }
  .product-image { height: min(112vw, 530px); }
  .product-info h3 { font-size: 22px; }

  .editorial { grid-template-columns: 1fr; min-height: auto; }
  .editorial-image { min-height: 70vh; }
  .editorial-copy { padding: 76px 20px; }

  .craft { grid-template-columns: 1fr; }
  .craft-copy, .craft-notes { grid-column: 1; }
  .craft-number { font-size: 180px; top: 30px; right: 4px; }
  .craft-notes { grid-template-columns: 1fr; gap: 0; margin-top: 55px; }
  .craft-notes article { padding: 25px 0; border-top: 1px solid var(--line); }
  .craft-notes h3 { margin: 22px 0 10px; }

  .journal-grid { grid-template-columns: 1fr; gap: 48px; }
  .story-image, .story.large .story-image { height: min(112vw, 540px); }
  .story h3 { font-size: 25px; }

  .trade { grid-template-columns: 1fr; gap: 36px; padding: 82px 20px; }
  .trade h2 { font-size: clamp(47px, 14vw, 66px); }
  .newsletter { grid-template-columns: 1fr; gap: 35px; }
  .newsletter-form input { min-width: 0; font-size: 16px; }
  .form-message { grid-column: 1; margin: 0; }

  footer { padding: 72px 20px 24px; }
  .footer-main { grid-template-columns: 1fr 1fr; min-height: auto; gap: 40px 24px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; gap: 8px; align-items: flex-start; }

  .cart-drawer { width: 100%; max-width: 100%; }
  .product-modal, .form-modal { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); }
  .product-modal { grid-template-columns: 1fr; overflow-y: auto; }
  .modal-image { min-height: 44vh; }
  .modal-content { padding: 38px 22px; }
  .field-row { grid-template-columns: 1fr; }
}