:root {
  color-scheme: light;
  --paper: #f5f1e9;
  --paper-deep: #ece5d9;
  --ink: #292820;
  --muted: #777469;
  --clay: #b96549;
  --olive: #74765a;
  --line: rgba(41, 40, 32, .16);
  --sans: 'DM Sans', 'Segoe UI', sans-serif;
  --serif: 'Playfair Display', Georgia, serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button { font: inherit; }
.sr-only, .skip-link:not(:focus) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link:focus { position: fixed; z-index: 20; top: 12px; left: 12px; padding: 12px 16px; color: white; background: var(--ink); }

.site-header { height: 84px; display: flex; justify-content: space-between; align-items: center; padding: 0 7.2%; border-bottom: 1px solid var(--line); position: relative; z-index: 10; }
.wordmark { text-decoration: none; display: inline-flex; align-items: center; gap: 11px; }
.wordmark-mark { font: 600 24px/1 var(--serif); letter-spacing: -4px; }
.wordmark-mark span { color: var(--clay); }
.wordmark-name { font-size: 10px; letter-spacing: .18em; font-weight: 700; }
.wordmark-name span { color: var(--muted); font-weight: 400; }
.site-nav { display: flex; align-items: center; gap: clamp(22px, 3.3vw, 52px); }
.site-nav a { font-size: 12px; text-decoration: none; transition: color .2s ease; }
.site-nav a:hover, .site-nav a:focus-visible { color: var(--clay); }
.site-nav .nav-contact { border: 1px solid var(--ink); padding: 11px 16px; }
.nav-contact span { margin-left: 12px; }
.menu-toggle { display: none; }

.hero { min-height: 620px; padding: 70px 9.5% 78px 12%; display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; gap: 4%; position: relative; overflow: hidden; }
.hero-copy { position: relative; z-index: 2; padding: 30px 0; }
.eyebrow { margin: 0 0 24px; color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.eyebrow-line { display: inline-block; width: 28px; height: 1px; margin: 0 9px 3px 0; background: var(--clay); }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: var(--serif); font-weight: 500; letter-spacing: -.045em; }
.hero h1 { font-size: clamp(54px, 6.2vw, 87px); line-height: .99; margin: 0 0 26px; }
h1 em, h2 em { color: var(--clay); font-weight: 500; }
.hero-intro { max-width: 365px; color: var(--muted); font-size: 14px; line-height: 1.85; margin-bottom: 29px; }
.button { min-height: 50px; display: inline-flex; align-items: center; justify-content: space-between; gap: 32px; padding: 0 18px; text-decoration: none; font-size: 11px; font-weight: 600; letter-spacing: .02em; transition: transform .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-dark { background: var(--ink); color: var(--paper); }
.button-dark:hover { background: #454338; }
.button span { font-size: 17px; }
.hero-note { display: flex; align-items: center; gap: 10px; margin-top: 55px; color: var(--muted); font: italic 14px var(--serif); }
.note-star { color: var(--clay); font-size: 22px; font-style: normal; }
.hero-art { height: 460px; max-width: 560px; width: 100%; justify-self: end; position: relative; isolation: isolate; overflow: hidden; background: #e8dfd1; }
.art-sun { width: 150px; height: 150px; position: absolute; top: 51px; right: 81px; border-radius: 50%; background: #d5a477; opacity: .68; }
.art-arch { position: absolute; width: 270px; height: 360px; top: 42px; left: 50%; transform: translateX(-50%); border-radius: 150px 150px 0 0; background: #d9cabb; }
.art-table { position: absolute; height: 88px; bottom: 0; left: 0; right: 0; background: #b98f70; }
.art-vase { position: absolute; z-index: 2; width: 154px; height: 250px; bottom: 45px; left: 44%; transform: translateX(-50%); }
.vase-body { position: absolute; width: 154px; height: 190px; bottom: 0; border-radius: 44% 45% 22% 22% / 23% 23% 17% 17%; background: linear-gradient(115deg, #b7684e 4%, #ce8566 48%, #a95743 100%); box-shadow: inset 10px 0 16px #e0a08355, inset -13px -4px 20px #763c3244, 12px 13px 20px #58433522; }
.vase-neck { position: absolute; z-index: 1; top: 0; left: 52px; width: 50px; height: 76px; border-radius: 16px 16px 3px 3px; background: linear-gradient(90deg, #a95743, #cb7b5e 48%, #a95743); }
.vase-shadow { position: absolute; z-index: 2; bottom: 3px; left: 38px; width: 82px; height: 22px; border-radius: 50%; background: #7d483c; opacity: .25; }
.art-bowl { position: absolute; z-index: 3; bottom: 53px; right: 33px; width: 115px; height: 62px; border-radius: 9px 9px 60px 60px; background: #72755c; transform: rotate(-5deg); box-shadow: inset -6px -8px 12px #484a3b55; }
.bowl-inside { position: absolute; top: 5px; left: 10px; width: 95px; height: 17px; border-radius: 50%; background: #afb092; }
.art-stem { position: absolute; z-index: 3; width: 2px; height: 114px; bottom: 260px; background: #77765d; transform-origin: bottom; }
.stem-one { left: 48%; transform: rotate(-25deg); }
.stem-two { left: 52%; height: 128px; transform: rotate(17deg); }
.stem-one::before, .stem-two::before { content: ''; position: absolute; width: 39px; height: 17px; top: 23px; left: -35px; border-radius: 100% 0; background: #8c8d69; transform: rotate(-22deg); }
.stem-two::before { top: 42px; left: 0; transform: rotate(35deg) scaleX(-1); }
.art-caption { position: absolute; z-index: 4; right: 14px; top: 15px; color: #736a5d; font-size: 8px; line-height: 1.7; letter-spacing: .13em; text-align: right; }
.art-sparkle { position: absolute; z-index: 2; top: 70px; left: 72px; color: #f5f1e9; font-size: 28px; }
.hero-side-label { position: absolute; right: 22px; top: 50%; transform: rotate(90deg) translateX(50%); transform-origin: right; color: var(--muted); font-size: 8px; letter-spacing: .18em; }

.intro-strip { min-height: 90px; padding: 18px 8%; background: var(--ink); color: var(--paper); display: flex; align-items: center; justify-content: space-around; gap: 18px; }
.intro-strip p { margin: 0; font: 500 clamp(14px, 1.6vw, 20px) var(--serif); }
.intro-strip p span { color: #c58b70; font-style: italic; }
.strip-flower { color: #c58b70; font-size: 17px; }
.section-pad { padding: 105px 12% 112px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 43px; }
.section-heading .eyebrow { margin-bottom: 17px; }
.section-heading h2, .approach h2 { font-size: clamp(38px, 4.5vw, 58px); line-height: 1.12; margin-bottom: 0; }
.section-aside { max-width: 290px; margin: 0 0 5px; color: var(--muted); font-size: 12px; line-height: 1.9; }
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.product-image { height: clamp(245px, 28vw, 360px); display: block; position: relative; overflow: hidden; text-decoration: none; }
.product-image::before { content: ''; width: 140px; height: 140px; position: absolute; top: 34px; right: 26px; border-radius: 50%; background: #e5c4a0; opacity: .7; }
.product-image-vase { background: #dcd3c4; }
.product-image-candle { background: #dfd5c7; }
.product-image-tray { background: #dadbcb; }
.product-number { position: absolute; z-index: 2; top: 17px; left: 17px; color: #6d695f; font-size: 8px; letter-spacing: .15em; }
.product-link { position: absolute; z-index: 2; bottom: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--paper); background: var(--ink); opacity: 0; transform: translateY(5px); transition: .2s ease; }
.product-image:hover .product-link, .product-image:focus-visible .product-link { opacity: 1; transform: translateY(0); }
.shape-vase { position: absolute; width: 100px; height: 155px; left: 50%; bottom: 35px; transform: translateX(-50%); border-radius: 43% 43% 23% 23% / 23% 23% 15% 15%; background: linear-gradient(110deg, #a65d47, #cd8060 56%, #aa5944); box-shadow: inset 9px 1px 13px #e1a08466, 12px 18px 23px #59453625; }
.shape-vase::before { content: ''; position: absolute; top: -43px; left: 33px; width: 34px; height: 56px; border-radius: 10px 10px 2px 2px; background: #b56c51; }
.shape-leaf { position: absolute; z-index: 2; width: 43px; height: 19px; left: 50%; bottom: 220px; border-radius: 100% 0; background: #818468; transform: rotate(-30deg); }
.leaf-a { margin-left: -21px; }
.leaf-b { margin-left: 5px; bottom: 236px; transform: rotate(72deg) scale(.8); }
.product-image-candle::before { background: #e8bc7f; }
.shape-candle { position: absolute; width: 132px; height: 104px; left: 50%; bottom: 38px; transform: translateX(-50%); border-radius: 18px 18px 37px 37px; background: linear-gradient(130deg, #85856a, #656950); box-shadow: inset -10px -8px 15px #4b4e3c66, 10px 15px 20px #51473b22; }
.shape-candle span { position: absolute; width: 3px; height: 42px; top: -41px; left: 50%; background: #5e5747; }
.candle-flame { position: absolute; width: 17px; height: 26px; left: 50%; bottom: 185px; border-radius: 80% 10% 80% 40%; background: #c87845; transform: translateX(-50%) rotate(45deg); }
.product-image-tray::before { background: #e7d4b5; }
.shape-tray { position: absolute; width: 196px; height: 83px; left: 50%; bottom: 50px; transform: translateX(-50%) rotate(-8deg); border-radius: 30px 30px 48px 48px; background: linear-gradient(145deg, #bd8e6c, #a9795c); box-shadow: inset 8px 6px 15px #dfb59666, 12px 17px 22px #51473b24; }
.shape-tray span { position: absolute; inset: 11px 17px 19px; border-radius: 50%; border: 1px solid #ecc4a055; }
.shape-stone { position: absolute; left: 56%; bottom: 120px; width: 28px; height: 22px; border-radius: 40% 55% 35% 50%; background: #eee4d4; box-shadow: 5px 4px 8px #51473b25; }
.product-info { padding: 16px 1px 0; }
.product-info h3 { margin: 0 0 6px; font: 500 19px var(--serif); }
.product-info p { margin: 0; color: var(--muted); font-size: 11px; }
.collection-footnote { margin: 39px 0 0; text-align: center; color: var(--muted); font-size: 11px; }
.collection-footnote span { color: var(--clay); margin-right: 7px; }

.approach { display: grid; grid-template-columns: 1fr 1fr; min-height: 570px; background: var(--paper-deep); }
.approach-art { min-height: 570px; position: relative; overflow: hidden; background: #c8b7a3; }
.approach-orbit { position: absolute; width: min(38vw, 470px); height: min(38vw, 470px); border: 1px solid #f5f1e966; border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.approach-form { position: absolute; width: 200px; height: 275px; left: 50%; top: 51%; transform: translate(-50%, -50%) rotate(-8deg); border-radius: 45% 43% 30% 24% / 33% 27% 18% 17%; background: linear-gradient(115deg, #aa654c 4%, #c78261 50%, #9e5d49 100%); box-shadow: inset 14px 4px 23px #e7aa8566, inset -17px -15px 30px #733d3344, 23px 31px 30px #58433532; }
.approach-form::before { content: ''; position: absolute; top: -75px; left: 72px; width: 57px; height: 95px; border-radius: 17px 17px 4px 4px; background: linear-gradient(90deg, #a75e47, #c77a5c 55%, #a35b46); }
.approach-form span { position: absolute; width: 128px; height: 14px; left: 36px; top: 17px; border-radius: 50%; background: #8f4d3d; opacity: .6; }
.approach-label, .approach-number { position: absolute; color: #f5f1e9; font-size: 8px; letter-spacing: .16em; line-height: 1.7; }
.approach-label { left: 9%; bottom: 9%; }
.approach-number { right: 8%; top: 8%; }
.approach-copy { align-self: center; padding: 75px clamp(45px, 9vw, 130px); }
.approach-copy > .eyebrow { margin-bottom: 18px; }
.approach-copy > p:not(.eyebrow) { max-width: 430px; margin: 22px 0 31px; color: var(--muted); font-size: 12px; line-height: 1.95; }
.approach-points { border-top: 1px solid var(--line); }
.approach-points > div { display: flex; gap: 22px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--line); }
.approach-points span { color: var(--clay); font-size: 9px; letter-spacing: .08em; padding-top: 3px; }
.approach-points p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.7; }
.approach-points strong { color: var(--ink); font-size: 11px; font-weight: 600; }

.story { position: relative; text-align: center; padding-top: 104px; padding-bottom: 104px; }
.story .eyebrow { margin-bottom: 10px; }
.story-mark { display: block; color: #c98769; font: 100px/.9 var(--serif); }
.story h2 { max-width: 850px; margin: 0 auto 36px; font-size: clamp(34px, 4.5vw, 56px); line-height: 1.26; }
.story-signoff { display: flex; justify-content: center; align-items: center; gap: 14px; text-align: left; }
.signoff-line { width: 34px; height: 1px; background: var(--clay); }
.story-signoff p { margin: 0; color: var(--muted); font: italic 13px/1.5 var(--serif); }
.story-signoff strong { color: var(--ink); font-style: normal; font-weight: 500; }

.contact { position: relative; overflow: hidden; min-height: 405px; padding: 76px 20px 81px; display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--paper); background: var(--olive); }
.contact .eyebrow { margin-bottom: 15px; color: #e1dfd1; }
.contact h2 { position: relative; z-index: 1; margin: 0 0 14px; font-size: clamp(47px, 6vw, 70px); line-height: 1.04; }
.contact h2 em { color: #dfaa8e; }
.contact > p:not(.eyebrow) { max-width: 350px; margin: 0 0 24px; color: #e2dfd1; font-size: 12px; line-height: 1.8; }
.button-light { background: var(--paper); color: var(--ink); }
.button-light:hover { background: white; }
.contact-sun { position: absolute; width: 340px; height: 340px; top: 34px; left: calc(50% - 170px); border: 1px solid #f5f1e922; border-radius: 50%; }
.contact-flower { position: absolute; right: 13%; bottom: 22%; color: #d8aa83; font-size: 38px; }

.site-footer { min-height: 126px; padding: 26px 7.2%; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; gap: 20px; }
.site-footer > p { margin: 0; color: var(--muted); text-align: center; font: italic 13px var(--serif); }
.footer-meta { display: flex; justify-content: flex-end; gap: 25px; color: var(--muted); font-size: 9px; }
.footer-meta a { text-decoration: none; }
.footer-meta a:hover { color: var(--clay); }

@media (max-width: 800px) {
  .site-header { height: 72px; padding: 0 6%; }
  .menu-toggle { width: 42px; height: 42px; border: 0; background: none; display: flex; flex-direction: column; justify-content: center; gap: 6px; align-items: center; cursor: pointer; }
  .menu-toggle > span:not(.sr-only) { width: 21px; height: 1px; background: var(--ink); transition: transform .2s ease; }
  .menu-toggle[aria-expanded="true"] > span:nth-last-child(2) { transform: translateY(3.5px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] > span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .site-nav { position: absolute; top: 71px; left: 0; right: 0; display: none; align-items: stretch; gap: 0; padding: 12px 6% 22px; background: var(--paper); border-bottom: 1px solid var(--line); }
  .site-nav.is-open { display: flex; flex-direction: column; }
  .site-nav a { padding: 14px 0; }
  .site-nav .nav-contact { align-self: flex-start; margin-top: 5px; padding: 11px 15px; }
  .hero { min-height: auto; padding: 55px 8% 65px; grid-template-columns: 1fr 1fr; gap: 25px; }
  .hero-art { height: 390px; }
  .hero h1 { font-size: clamp(48px, 7.2vw, 68px); }
  .hero-side-label { display: none; }
  .section-pad { padding: 82px 8%; }
  .approach-copy { padding: 55px 8%; }
  .approach-art { min-height: 500px; }
  .approach { min-height: 500px; }
  .approach-form { transform: translate(-50%, -50%) scale(.82) rotate(-8deg); }
  .site-footer { padding: 25px 6%; }
}
@media (max-width: 560px) {
  .hero { grid-template-columns: 1fr; padding: 43px 7% 54px; gap: 33px; }
  .hero-copy { padding: 10px 0 0; }
  .hero h1 { font-size: clamp(54px, 14vw, 74px); }
  .hero-intro { max-width: 330px; font-size: 13px; }
  .hero-note { margin-top: 30px; }
  .hero-art { height: 340px; justify-self: stretch; }
  .art-arch { height: 290px; width: 220px; }
  .art-vase { transform: translateX(-50%) scale(.82); transform-origin: bottom center; }
  .art-sun { width: 120px; height: 120px; right: 50px; }
  .art-stem { bottom: 230px; }
  .intro-strip { flex-wrap: wrap; min-height: 102px; padding: 20px 7%; justify-content: center; gap: 9px 13px; }
  .intro-strip p { font-size: 14px; }
  .strip-flower { font-size: 13px; }
  .section-pad { padding: 69px 7%; }
  .section-heading { display: block; margin-bottom: 30px; }
  .section-heading h2, .approach h2 { font-size: 42px; }
  .section-aside { margin-top: 17px; }
  .product-grid { grid-template-columns: 1fr; gap: 29px; }
  .product-image { height: min(92vw, 380px); }
  .product-link { opacity: 1; transform: none; }
  .product-info h3 { font-size: 20px; }
  .collection-footnote { line-height: 1.7; }
  .approach { grid-template-columns: 1fr; }
  .approach-art { min-height: 380px; }
  .approach-orbit { width: 310px; height: 310px; }
  .approach-form { transform: translate(-50%, -50%) scale(.72) rotate(-8deg); }
  .approach-copy { padding: 60px 8% 69px; }
  .story { padding-top: 77px; padding-bottom: 77px; }
  .story-mark { font-size: 82px; }
  .story h2 { font-size: 37px; }
  .contact { min-height: 380px; padding-top: 69px; }
  .contact h2 { font-size: 55px; }
  .contact-flower { right: 7%; bottom: 12%; font-size: 27px; }
  .site-footer { grid-template-columns: 1fr; justify-items: center; gap: 14px; padding: 28px 6%; }
  .footer-meta { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}