@font-face{font-family:Instrument;font-style:italic;src:url('/assets/instrument-serif-latin-ext.woff2') format('woff2');font-display:swap;unicode-range:U+0100-02FF,U+1E00-1EFF}
@font-face{font-family:Instrument;font-style:italic;src:url('/assets/instrument-serif-latin.woff2') format('woff2');font-display:swap;unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:Instrument;src:url('/assets/instrument-serif-regular-latin-ext.woff2') format('woff2');font-display:swap;unicode-range:U+0100-02FF,U+1E00-1EFF}
@font-face{font-family:Instrument;src:url('/assets/instrument-serif-regular-latin.woff2') format('woff2');font-display:swap;unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:DM;src:url('/assets/dm-sans-latin-ext.woff2') format('woff2');font-weight:400 700;font-display:swap;unicode-range:U+0100-02FF,U+1E00-1EFF}
@font-face{font-family:DM;src:url('/assets/dm-sans-latin.woff2') format('woff2');font-weight:400 700;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F}

:root {
  --paper:#f6f2eb;
  --ink:#231e1c;
  --muted:#62544d;
  --wine:#502c34;
  --wine-dark:#352127;
  --rose:#e3b7ae;
  --line:#ded4ca;
  --display:Instrument,Georgia,serif;
  --body:DM,system-ui,sans-serif;
}

*,*::before,*::after { box-sizing:border-box }
[hidden] { display:none!important }
html { scroll-behavior:smooth }
body { margin:0; background:var(--paper); color:var(--ink); font:1rem/1.55 var(--body) }
button,input,select { font:inherit }
button { cursor:pointer }
a { color:inherit }
img,canvas { display:block; width:100% }
figure,h1,h2,h3,p { margin:0 }
section[id] { scroll-margin-top:1.5rem }
:focus-visible { outline:2px solid #a34b62; outline-offset:4px }
.studio :focus-visible { outline-color:var(--rose) }
.wrap { width:min(90%,1280px); margin-inline:auto }
.sr-only,.skip-link:not(:focus) { position:absolute; width:1px; height:1px; clip-path:inset(50%); overflow:hidden; white-space:nowrap }
.skip-link:focus { position:absolute; inset:.5rem auto auto .5rem; z-index:10; background:white; padding:.5rem 1rem }

.site-header { min-height:82px; display:flex; align-items:center; justify-content:space-between; gap:1rem; border-bottom:1px solid var(--line) }
.wordmark { display:inline-flex; align-items:center; gap:.7rem; text-decoration:none; font-size:.73rem; letter-spacing:.14em; line-height:1.15; white-space:nowrap }
.wordmark small { display:block; margin-top:.28rem; font-size:.59rem; letter-spacing:.29em; color:var(--muted) }
.monogram { display:grid; place-content:center; width:38px; height:38px; border:1px solid #b9989b; border-radius:50%; color:var(--wine); font:1.65rem/1 var(--display); letter-spacing:-.12em; position:relative; padding-right:3px }
.monogram span { position:absolute; bottom:.15rem; right:.42rem; color:#9d5363 }
.site-header nav { display:flex; align-items:center; gap:clamp(.65rem,4vw,3.25rem); font-size:.88rem; font-weight:600 }
.site-header nav a { display:inline-flex; align-items:center; min-height:44px; gap:.25rem; text-decoration:none; white-space:nowrap }
.site-header nav a:hover,.text-link:hover { color:#914656 }
.site-header nav a:last-child { color:var(--wine) }

.hero { display:grid; grid-template-columns:1fr 1.02fr; min-height:clamp(510px,48vw,660px); padding-block:clamp(1.5rem,5vw,4rem) 0; position:relative; isolation:isolate }
.hero-copy { align-self:center; z-index:1; padding-block:1.7rem 3rem; padding-right:1.5rem; animation:appear .6s ease-out both }
.eyebrow { display:flex; align-items:center; gap:.7rem; text-transform:uppercase; letter-spacing:.16em; font-weight:700; font-size:.7rem; color:var(--wine) }
.eyebrow>span { width:1.65rem; height:1px; background:currentColor }
h1,h2,h3 { font-family:var(--display); font-weight:400 }
h1 { font-size:clamp(4rem,7.3vw,7.25rem); line-height:.86; letter-spacing:-.035em; margin-block:1.55rem 1.4rem }
h1 em,h2 em { color:var(--wine); font-weight:400 }
.hero-intro { color:var(--muted); max-width:34ch; line-height:1.65 }
.hero-actions,.photo-actions { display:flex; align-items:center; gap:.75rem 1.15rem; flex-wrap:wrap; margin-top:1.65rem }
.button,.text-link,.filter,.icon-button { min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:.6rem; font-size:.84rem; font-weight:650 }
.button { padding:.75rem 1.02rem; text-decoration:none; border:1px solid transparent; border-radius:4px; transition:background .2s,color .2s,transform .2s }
.button:hover { transform:translateY(-2px) }
.button-dark { background:var(--wine); color:#fff6f0 }
.button-dark:hover { background:#6a3946 }
.button-cream { background:#f5e7df; color:var(--wine-dark) }
.button-cream:hover { background:#fff3eb }
.text-link { padding:.25rem .1rem; border:0; background:transparent; color:inherit; text-underline-offset:.35rem; text-decoration:underline }
.hero-image { min-height:100%; position:relative; overflow:hidden; background:#dac1a8; animation:image-arrive .85s cubic-bezier(.2,.65,.3,1) both }
.hero-image img { position:absolute; height:100%; object-fit:cover; object-position:54% 47% }
.hero-image figcaption { position:absolute; inset:auto 0 0; display:flex; justify-content:space-between; align-items:end; padding:3.5rem clamp(.85rem,2vw,1.75rem) 1rem; background:linear-gradient(transparent,#211b19bb); color:#fff8ed; font-size:.63rem; letter-spacing:.13em }
.hero-image figcaption em { font:italic 2rem/1 var(--display); letter-spacing:0 }
.hero-index { grid-column:1/-1; display:flex; align-items:center; gap:1rem; padding-block:1.15rem; color:var(--muted); letter-spacing:.18em; font-size:.63rem }
.hero-index i { flex:1; height:1px; background:var(--line) }

.collection { padding-block:clamp(3rem,8vw,7rem) clamp(3.2rem,7vw,6.25rem) }
.section-head { display:flex; justify-content:space-between; align-items:end; gap:1rem; margin-bottom:1.65rem }
h2 { font-size:clamp(3.35rem,6.1vw,6rem); line-height:.88; letter-spacing:-.025em; margin-top:.8rem }
.section-head>p { color:var(--muted); max-width:36ch }
.filter-row { display:flex; gap:.5rem; flex-wrap:wrap }
.filter { padding:.5rem .95rem; border:1px solid #bfb0a7; border-radius:99px; color:var(--ink); background:transparent; transition:color .2s,background .2s }
.filter:hover { border-color:var(--wine) }
.filter[aria-pressed=true] { background:var(--wine); color:#fff6f0; border-color:var(--wine) }
.demo-note { margin:.65rem 0 1rem; color:var(--muted); font-size:.83rem }
.product-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(.7rem,2vw,1.5rem) }
.product-card { min-width:0; border-bottom:1px solid var(--line); padding-bottom:.65rem; animation:appear .38s ease-out both }
.product-image { position:relative; overflow:hidden; display:block; background:#e5d7cb; border:0; padding:0; width:100%; aspect-ratio:4/4.5; text-align:left; isolation:isolate }
.product-image::after { content:''; position:absolute; inset:auto 0 0; height:20%; background:linear-gradient(transparent,#1e171548); pointer-events:none }
.product-image img { height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.2,.65,.3,1) }
.product-image:hover img { transform:scale(1.05) }
.product-index { position:absolute; z-index:1; inset:auto auto .65rem .75rem; color:#fffaf3; font-size:.72rem; letter-spacing:.12em; pointer-events:none }
.product-text { padding:.75rem .05rem .35rem }
.product-name,.product-price { display:flex; align-items:center; gap:.45rem; justify-content:space-between }
.product-name h3,.compare h3 { font-size:2.1rem; line-height:1 }
.product-type,.product-spec,.compare-type { color:var(--muted); margin-top:.27rem; font-size:.8rem }
.product-spec { font-size:.76rem }
.product-price { margin-top:.35rem; font-size:.86rem; font-weight:700; white-space:nowrap }
.swatch { width:1.05rem; height:1.05rem; border-radius:50%; box-shadow:0 0 0 1px #4e3b3466; background:#4b3229; flex:none }
.swatch-rosa { background:#8a4b31 }
.swatch-luna { background:#c3a376 }
.swatch-ines { background:#796b63 }
.product-actions { display:flex; justify-content:space-between; align-items:center; gap:.2rem }
.icon-button { width:44px; height:44px; border:1px solid #cbbcb2; background:transparent; color:var(--wine); border-radius:50%; font-size:1.3rem; line-height:1; padding:0; flex:none }
.icon-button:hover,.icon-button[aria-pressed=true] { background:var(--wine); color:#fff6f0; border-color:var(--wine) }
.compare { background:#ede5da; padding:clamp(1rem,3vw,1.8rem); margin-top:2rem }
.compare-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.8rem }
.compare h3 span { color:var(--muted); font:.8rem var(--body) }
.compare-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem }
.compare-item { border-top:1px solid #c7b6aa; padding-top:.6rem; min-width:0 }
.compare-item strong { display:block }
.compare-item .text-link { text-align:left }

.studio { background:var(--wine-dark); color:#faf2e9; padding-block:clamp(2.8rem,7vw,6rem) }
.studio-inner { display:grid; grid-template-columns:minmax(0,.84fr) minmax(0,1fr); align-items:start; gap:clamp(1.5rem,6vw,6rem) }
.studio .eyebrow,.studio h2 em { color:var(--rose) }
.studio-intro>p:not(.eyebrow) { margin-top:.95rem; color:#e7d6d1; max-width:42ch }
.photo-actions { margin-top:1.25rem }
.file-button { position:relative; cursor:pointer }
.file-button input { position:absolute; inset:0; opacity:0; width:100%; cursor:pointer }
.file-button:focus-within { outline:2px solid var(--rose); outline-offset:4px }
.studio .text-link:hover { color:var(--rose) }
.studio-intro .studio-status { font-size:.86rem; min-height:1.25rem; margin-top:.4rem }
.style-picker { margin:1rem 0 0; border:0; padding:0; min-width:0 }
.style-picker legend,.control-heading span { font-size:.77rem; letter-spacing:.09em; text-transform:uppercase; color:#f3d9d1 }
#try-styles { display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.6rem }
.style-chip { min-height:44px; display:inline-flex; align-items:center; gap:.45rem; border:1px solid #b29397; border-radius:99px; padding:.45rem .72rem; color:#fff3ec; background:transparent; font-size:.83rem }
.style-chip[aria-pressed=true],.style-chip:hover { background:#f4e3db; color:var(--wine-dark) }
.style-chip .swatch { width:.78rem; height:.78rem; box-shadow:0 0 0 1px #d9b6ac }
#adjustments { margin-top:1rem; border-top:1px solid #896970; padding-top:.35rem }
.control-heading { display:flex; align-items:center; justify-content:space-between }
#adjustments label { display:grid; grid-template-columns:7rem 1fr; align-items:center; gap:.6rem; font-size:.84rem; min-height:37px }
#adjustments input { width:100%; accent-color:var(--rose); cursor:pointer }
.preview-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.3rem .75rem; padding-top:.4rem }
.comparison-control { display:flex; align-items:center; gap:.45rem; font-size:.78rem; flex-wrap:wrap }
.comparison-control select { min-height:44px; color:var(--wine-dark); background:#f5e7df; border:1px solid #b29397; border-radius:3px; padding:.4rem; max-width:100% }
.photo-reveal { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:.65rem; color:#f3d9d1; font-size:.85rem }
.photo-reveal input { width:100%; min-height:44px; accent-color:var(--rose); cursor:ew-resize }
.preview-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:.6rem }
.preview-grid.is-comparing { grid-template-columns:repeat(2,minmax(0,1fr)) }
.preview { min-width:0; position:relative; border:1px solid #92777a; background:#483238; overflow:hidden }
.preview canvas { height:auto }
.preview-empty { aspect-ratio:1 }
.preview-empty { display:grid; place-content:center; justify-items:center; gap:.7rem; background:radial-gradient(ellipse at 50% 44%,#674850,#473137 67%); color:#f4e1d7; font-size:.8rem }
.preview-empty svg { width:clamp(64px,11vw,120px); stroke:#e5b7ae; stroke-width:1.05; stroke-linecap:round }
.preview figcaption { padding:.45rem .65rem; text-align:center; color:#fff4ed; font-size:.86rem }
.preview-note { margin-top:.6rem; color:#e6d0cc; font-size:.78rem }
.site-footer { min-height:100px; display:flex; justify-content:space-between; align-items:center; gap:1rem; color:var(--muted); font-size:.75rem }

dialog { width:min(92vw,850px); max-height:90dvh; padding:clamp(.8rem,3vw,1.6rem); color:var(--ink); background:var(--paper); border:1px solid var(--line); overflow:auto }
dialog::backdrop { background:#26191dc7 }
.dialog-top { display:flex; align-items:center; justify-content:space-between; gap:.7rem; margin-bottom:.65rem }
.dialog-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(1rem,3vw,2rem) }
.detail-image { width:100%; aspect-ratio:4/4.1; object-fit:cover; background:#e5d7cb }
.detail-image.is-detail { object-fit:contain; background:radial-gradient(#efe1d3,#ddc7b6) }
.view-buttons { display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.55rem }
.view-buttons button { font-size:.75rem; padding:.35rem .6rem }
.dialog-grid h3 { font-size:clamp(3rem,6vw,4.7rem); line-height:1 }
.dialog-grid dl { margin:.75rem 0 1rem }
.dialog-grid dl div { display:grid; grid-template-columns:1fr 1.3fr; gap:.55rem; padding:.4rem 0; border-top:1px solid var(--line); font-size:.82rem }
.dialog-grid dt { color:var(--muted) }
.dialog-grid dd { margin:0 }
.dialog-grid p { color:var(--muted); font-size:.9rem; margin:.4rem 0 }

@keyframes appear { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
@keyframes image-arrive { from{clip-path:inset(0 0 7% 0);opacity:.65} to{clip-path:inset(0);opacity:1} }
@media(prefers-reduced-motion:no-preference) {
  @supports(animation-timeline:view()) {
    .product-image img { animation:catalog-reveal linear both; animation-timeline:view(); animation-range:entry 0% cover 27% }
    @keyframes catalog-reveal { from{clip-path:inset(4% 0 5% 0);opacity:.7} to{clip-path:inset(0);opacity:1} }
  }
}
@media(max-width:950px) {
  .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .hero { min-height:480px }
}
@media(max-width:670px) {
  .wrap { width:calc(100% - 32px) }
  .site-header { min-height:64px }
  .site-header nav { font-size:.72rem }
  .site-header nav a:last-child span { display:none }
  .wordmark { gap:.4rem; font-size:.63rem }
  .monogram { width:30px; height:30px; font-size:1.35rem }
  .hero { grid-template-columns:1fr; padding-top:1.5rem; min-height:0 }
  .hero-copy { padding:0 0 1.5rem }
  h1 { font-size:clamp(3.5rem,11.75vw,5.35rem); margin:1rem 0 .8rem }
  .hero-actions { margin-top:1rem }
  .hero-image { min-height:0; aspect-ratio:5/4 }
  .hero-image img { object-position:50% 41% }
  .hero-index { padding-block:.75rem }
  .section-head { flex-direction:column; align-items:start; gap:.7rem }
  .studio-inner,.dialog-grid { grid-template-columns:1fr }
  .studio-copy { display:contents }
  .studio-intro { grid-row:1 }
  .style-picker { grid-row:2; margin:0 }
  .studio-visual { grid-row:3 }
  #adjustments { grid-row:4; margin:0 }
  .studio-inner { gap:1rem }
  .preview-empty { aspect-ratio:2/1 }
  .preview-actions { gap:.3rem .65rem }
  .compare-grid { gap:.55rem }
  .compare-type { overflow-wrap:anywhere }
}
@media(max-width:365px) {
  .wrap { width:calc(100% - 24px) }
  .site-header nav { gap:.5rem }
  .product-actions .text-link { font-size:.75rem }
  .product-name h3 { font-size:1.75rem }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto }
  *,*::before,*::after { animation:none!important; transition:none!important }
}