:root { color-scheme: light; --paper: #f5f0e8; --ink: #292722; --muted: #3F3934; --accent: #a35038; --line: #d9d0c4; }
.products-section { padding: 86px 4.5% 100px; max-width: 1600px; margin: 0 auto; scroll-margin-top: 28px; }
.products-heading { text-align: center; margin-bottom: 32px; }
.products-heading { position: relative; }
.products-index { position: absolute; left: 0; top: 14px; font-family: Georgia, 'Times New Roman', serif; font-size: 13px; font-weight: 400; line-height: normal; letter-spacing: .1em; color: var(--muted); }
@media (max-width: 760px) { .products-index { top: -30px; } }
.products-heading h2 { margin: 0; font-family: Georgia, 'Times New Roman', serif; font-weight: 400; font-size: clamp(30px, 3.1vw, 48px); letter-spacing: -.035em; line-height: 1.15; }
.products-heading p { margin: 13px 0 0; color: var(--muted); font-size: 16px; line-height: 1.6; }
.products-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; }
.product-card { min-width: 0; border-top: 1px solid var(--line); padding-top: 12px; display: flex; flex-direction: column; }
.product-placeholder { flex-shrink: 0; }
.product-actions { display: flex; gap: 8px; margin-top: auto; padding-top: 24px; }
.product-action { min-width: 0; min-height: 44px; padding: 0 14px; border: 1px solid #c7bcad; border-radius: 24px; background: transparent; color: var(--ink); font-size: 9px; letter-spacing: .045em; white-space: nowrap; transition: background .2s; }
.product-action-primary { background: var(--accent); border-color: var(--accent); color: #fffaf4; }
.product-action:not(:disabled):hover { background: #e9e1d6; }
.product-action-primary:not(:disabled):hover { background: #89412e; }
.product-action:disabled { color: #8a8175; background: #eee8df; border-color: #ded6ca; cursor: default; }
@media (min-width: 951px) and (max-width: 1150px) { .product-action { padding: 0 9px; } .product-actions { gap: 5px; } .product-action:disabled { font-size: 8px; } }
@media (max-width: 480px) { .product-action { font-size: 10px; padding: 0 18px; } }
.product-placeholder { aspect-ratio: 4 / 3; background: #e8e1d7; position: relative; border-radius: 3px; }
.product-placeholder img { display: block; width: 100%; height: 100%; position: absolute; inset: 0; object-fit: contain; border-radius: inherit; }
.product-placeholder:has(img) span { background: var(--paper); padding: 4px 6px; border-radius: 2px; }
.product-placeholder span { position: absolute; top: 15px; left: 17px; color: #877b6d; font-family: Georgia, 'Times New Roman', serif; font-size: 13px; }
.product-card h3 { margin: 24px 0 12px; color: var(--accent); font-family: Georgia, 'Times New Roman', serif; font-weight: 400; font-size: clamp(17px, 1.6vw, 23px); letter-spacing: -.015em; line-height: 1.3; }
.product-card p { margin: 0; color: var(--muted); max-width: 29ch; font-size: 14px; line-height: 1.65; }
@media (max-width: 950px) { .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; } .products-section { padding: 60px 5% 72px; } }
@media (max-width: 480px) { .products-grid { grid-template-columns: 1fr; gap: 35px; } .products-heading { text-align: left; margin-bottom: 26px; } .products-heading p { font-size: 15px; } .product-card h3 { font-size: 23px; margin-top: 19px; } .product-card p { font-size: 15px; max-width: 100%; } }
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
a, button { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.header { min-height: 80px; margin: 0 4.5%; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--line); position: relative; z-index: 10; }
.brand { font-size: 13px; letter-spacing: .12em; white-space: nowrap; }
.navigation { display: flex; align-items: center; gap: clamp(14px, 1.7vw, 30px); }
.navigation a { font-size: 12px; padding: 16px 0; }
.navigation a:hover { color: var(--accent); }
.header-actions { display: flex; gap: 22px; align-items: center; }
.languages { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 11px; }
.languages button { border: 0; background: none; color: var(--muted); padding: 0 5px; min-height: 44px; }
.languages button[aria-pressed="true"] { color: var(--ink); text-decoration: underline; text-underline-offset: 5px; }
.header-cta { border: 1px solid var(--accent); background: var(--accent); color: #fffaf4; padding: 15px 20px; border-radius: 28px; font-size: 10px; letter-spacing: .08em; white-space: nowrap; }
.header-cta:hover { border-color: var(--accent); }
.menu-toggle { display: none; }
.hero { position: relative; isolation: isolate; overflow: hidden; padding: 42px 4.5%; min-height: clamp(440px, 38vw, 610px); display: flex; align-items: center; background: var(--paper); }
.hero-copy { width: 48%; padding: 20px 0; position: relative; z-index: 1; }
.eyebrow { margin: 0 0 28px; font-size: 11px; letter-spacing: .24em; color: var(--muted); }
h1 { margin: 0; font-family: Georgia, 'Times New Roman', serif; font-weight: 400; font-size: clamp(34px, 4.3vw, 69px); line-height: 1.14; letter-spacing: -.045em; }
h1 span { display: block; }
h1 .last-line { color: var(--accent); }
.subtitle { font-size: clamp(14px, 1.3vw, 18px); color: var(--muted); margin: 30px 0 43px; line-height: 1.6; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.button { display: flex; align-items: center; justify-content: space-between; gap: 26px; min-height: 56px; padding: 0 23px; font-size: 10px; letter-spacing: .09em; border-radius: 30px; border: 1px solid var(--accent); transition: background .2s, color .2s; }
.button span:last-child { font-size: 22px; font-weight: 400; }
.primary { background: var(--accent); color: #fffaf4; }
.primary:hover { background: #89412e; }
.secondary { border-color: #c7bcad; }
.secondary:hover { background: #e9e1d6; }
.portrait { position: absolute; z-index: 0; inset: 0; overflow: hidden; padding: 0; border-radius: 0; }
/* A single expanded interior spans the entire hero, including behind the copy. */
.portrait img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.portrait::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(245 240 232 / .36), rgb(245 240 232 / .15) 43%, transparent 62%); pointer-events: none; }
@media (min-width: 1600px) { .header { max-width: 1456px; margin: auto; } }
@media (max-width: 1150px) { .header { min-height: 82px; gap: 16px; } .header-actions { gap: 10px; } .navigation { gap: 13px; } .navigation a { font-size: 10px; } .header-cta { padding: 14px 12px; } .brand { font-size: 11px; } }
@media (max-width: 950px) {
  .header { min-height: 78px; margin: 0 5%; }
  .header-cta { display: none; }
  .menu-toggle { display: flex; width: 44px; height: 44px; border: 0; background: none; flex-direction: column; justify-content: center; gap: 7px; padding: 10px; }
  .menu-toggle span { height: 1px; width: 24px; background: var(--ink); transition: transform .2s; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .navigation { display: none; position: absolute; top: 77px; left: -5.55%; right: -5.55%; padding: 18px 5% 26px; background: var(--paper); border-bottom: 1px solid var(--line); }
  .navigation.is-open { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .navigation a { font-size: 15px; min-height: 48px; }
  .hero { padding-top: 32px; min-height: 400px; }
  h1 { font-size: clamp(29px, 4.25vw, 42px); }
  .eyebrow { margin-bottom: 28px; }
  .button { padding: 0 16px; gap: 14px; }
}
@media (max-width: 650px) {
  .brand { font-size: 10px; letter-spacing: .1em; }
  .header-actions { gap: 5px; }
  .hero { display: flex; flex-direction: column; align-items: stretch; padding: 39px 5% 0; min-height: auto; gap: 24px; }
  .hero-copy { width: 100%; padding: 0; }
  .eyebrow { font-size: 9px; margin-bottom: 24px; letter-spacing: .2em; }
  h1 { font-size: clamp(28px, 7.9vw, 50px); line-height: 1.17; letter-spacing: -.045em; }
  .subtitle { font-size: clamp(12px, 3.5vw, 17px); margin: 22px 0 27px; }
  .hero-actions { flex-wrap: nowrap; gap: 9px; }
  .button { flex: 1; min-width: 0; padding: 0 13px; font-size: 8px; gap: 5px; min-height: 52px; }
  .hero { background: #eee3d5; }
  .portrait { position: relative; inset: auto; width: calc(100% + 11.111%); margin-left: -5.555%; aspect-ratio: 1.25; padding: 0; border-radius: 0; }
  .portrait img { object-position: 78% center; }
  .portrait::after { background: linear-gradient(to bottom, #eee3d5, transparent 18%); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }

/* Desktop: use the untouched reference as one scene. Crop only its baked header.
   A CSS scrim covers baked copy so the existing HTML remains the live interface. */
@media (min-width: 951px) {
  .hero { min-height: 0; height: 27.1484375vw; padding: 1.4vw 12.8%; align-items: center; }
  .hero-copy { width: 54%; padding: 0; }
  .hero .eyebrow { margin-bottom: .9vw; }
  .hero .subtitle { margin: 1vw 0 1.4vw; }
  .portrait { background: url('16.png') center bottom / 100% auto no-repeat; }
  .portrait img { display: none; }
  .portrait::after { inset: 0 auto 0 10%; width: 41%; background: #faf6ef; mask-image: linear-gradient(90deg, transparent, #000 7%, #000 94%, transparent); }
  .hero::after { content: ''; position: absolute; z-index: 0; left: 3.5%; top: 8%; width: 6.5%; height: 12%; background: #f7f3ea; mask-image: radial-gradient(ellipse, #000 35%, transparent 72%); }
  .portrait::before { content: ''; position: absolute; z-index: 1; top: 0; right: 0; width: 26%; height: 6px; background: #eee3d5; }
}