@font-face{
  font-family:'Fraunces';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('fonts/fraunces-400.woff2') format('woff2');
}
@font-face{
  font-family:'Fraunces';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('fonts/fraunces-500.woff2') format('woff2');
}
@font-face{
  font-family:'Fraunces';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('fonts/fraunces-600.woff2') format('woff2');
}
@font-face{
  font-family:'Work Sans';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('fonts/work-sans-400.woff2') format('woff2');
}
@font-face{
  font-family:'Work Sans';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('fonts/work-sans-500.woff2') format('woff2');
}
@font-face{
  font-family:'Work Sans';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('fonts/work-sans-600.woff2') format('woff2');
}

:root{
  --cream:#FAF6EC;
  --cream-deep:#F1E9D8;
  --ink:#4B3821;
  --ink-soft:#7C6642;
  --gold:#B6862E;
  --gold-deep:#8C6A1F;
  --gold-line: rgba(182,134,46,0.35);
  --amethyst:#9B7FC4;
  --rosequartz:#E3A6AC;
  --tigereye:#A9762F;
  --jade:#7E9A72;
  --aventurin:#7FAE94;
  --pyrit:#8C8560;
  --lavastein:#2E2A26;
  --panel:#FFFDF8;
  box-sizing:border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
*{box-sizing:inherit;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --cream:#211A12; --cream-deep:#2A2117; --ink:#F1E7D6; --ink-soft:#C9B99B; --panel:#2A2117;
    --gold-line: rgba(201,162,93,0.35);
  }
}
:root[data-theme="dark"]{
  --cream:#211A12; --cream-deep:#2A2117; --ink:#F1E7D6; --ink-soft:#C9B99B; --panel:#2A2117;
  --gold-line: rgba(201,162,93,0.35);
}
html{scroll-behavior:smooth; scroll-padding-top: calc(64px + env(safe-area-inset-top, 0px)); height:100%; overflow-x:hidden;}
body{margin:0; background:var(--cream); color:var(--ink); font-family:'Work Sans', sans-serif; font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;}
h1,h2,h3{font-family:'Fraunces', serif; font-weight:500; margin:0; color:var(--ink);}
a{color:inherit;}
img,svg{max-width:100%; display:block;}
button{font-family:inherit;}
.wrap{max-width:1100px; margin:0 auto; padding:0 24px;}

header{position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--cream) 92%, transparent); backdrop-filter: blur(8px); border-bottom:1px solid var(--gold-line); padding-top: env(safe-area-inset-top, 0px);}
.nav{display:flex; align-items:center; justify-content:space-between; padding:16px 24px; max-width:1100px; margin:0 auto;}
.brand{margin-right:auto;}
.menu-btn{margin-left:auto;}
.brand{display:flex; align-items:center; gap:10px; font-family:'Fraunces', serif; font-size:1.15rem; letter-spacing:0.01em; text-decoration:none;}
.brand img{width:34px; height:34px; border-radius:50%; object-fit:cover; flex:0 0 auto;}
.brand svg{width:26px; height:26px;}
.brand small{display:block; font-family:'Work Sans',sans-serif; font-size:0.62rem; letter-spacing:0.14em; color:var(--gold-deep); text-transform:uppercase; margin-top:2px;}
nav ul{list-style:none; display:flex; gap:28px; margin:0; padding:0;}
nav a{text-decoration:none; font-size:0.94rem; color:var(--ink-soft); border-bottom:1px solid transparent; padding-bottom:2px; transition:color .2s, border-color .2s;}
nav a:hover, nav a:focus-visible{color:var(--gold-deep); border-color:var(--gold);}
.menu-toggle{display:none;}
.menu-btn{display:none;}
@media (max-width:760px){
  .nav{padding:14px 16px;}
  nav ul{position:fixed; inset:0 0 auto 0; top:64px; flex-direction:column; gap:0; background:var(--cream); border-bottom:1px solid var(--gold-line); padding:8px 24px 20px; transform:translateY(-8px); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;}
  nav ul li{padding:12px 0; border-bottom:1px solid var(--gold-line);}
  nav ul li:last-child{border-bottom:none;}
  .menu-toggle:checked ~ nav ul{opacity:1; transform:translateY(0); pointer-events:auto;}
  .menu-btn{display:flex; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px;}
  .menu-btn span{width:22px; height:1.5px; background:var(--ink);}
}

section{padding:76px 0;}
.kicker{font-size:0.72rem; letter-spacing:0.12em; color:var(--gold-deep); margin:0 0 10px;}

.hero{padding-top:56px; padding-bottom:56px;}
.hero-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:48px; align-items:center;}
.hero h1{font-size:clamp(2.1rem, 4.2vw, 3.4rem); line-height:1.12; max-width:14ch;}
.hero p{max-width:42ch; color:var(--ink-soft); font-size:1.05rem; margin:20px 0 30px;}
.btn{display:inline-block; background:var(--ink); color:var(--cream); text-decoration:none; padding:13px 26px; font-size:0.95rem; border:1px solid var(--ink); cursor:pointer; transition:background .2s,color .2s;}
.btn:hover{background:transparent; color:var(--ink);}
.btn.ghost{background:transparent; color:var(--ink); border:1px solid var(--gold-line);}
.btn.ghost:hover{border-color:var(--gold);}

.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:40px;}
.card{background:var(--panel); border:1px solid var(--gold-line); display:flex; flex-direction:column;}
.card-photo-btn{border:none; padding:0; margin:0; background:var(--cream-deep); cursor:zoom-in; display:block; width:100%; aspect-ratio:4/5; overflow:hidden; position:relative;}
.card-photo-btn img{width:100%; height:100%; object-fit:contain;}
.card-photo-btn.illustration{display:flex; align-items:center; justify-content:center; padding:18px;}
.card-photo-btn.illustration svg{width:100%;}
.card-photo-btn .zoom-hint{position:absolute; right:10px; bottom:10px; background:rgba(58,46,32,0.72); color:var(--cream); font-size:0.68rem; padding:4px 8px; letter-spacing:.03em;}
.card-body{padding:20px 22px 24px;}
.card h3{font-size:1.2rem; margin-bottom:4px;}
.card .avail{font-size:0.82rem; color:var(--ink-soft); margin:2px 0 14px;}
.stone-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px;}
.stone-row{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:none; border:none;
  border-top:1px solid var(--gold-line); padding:9px 2px; cursor:pointer; color:var(--ink);
}
.stone-row:first-child{border-top:none;}
.stone-row .ic{flex:0 0 auto; width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--cream); overflow:hidden;}
.stone-row .ic img{width:100%; height:100%; object-fit:cover; border-radius:50%;}
.stone-card .ring img{width:100%; height:100%; object-fit:cover; border-radius:50%;}
.stone-row .ic svg{width:14px; height:14px;}
.stone-row span.name{font-size:0.92rem;}
.stone-row .chev{margin-left:5px; font-size:0.95rem; color:var(--gold-deep); vertical-align:middle; font-weight:600;}
.stone-row:hover .name, .stone-row:focus-visible .name{color:var(--gold-deep);}

.grid5{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:20px; margin-top:40px; justify-items:stretch;}
.stone-card{border:1px solid var(--gold-line); padding:20px 16px; text-align:center; background:var(--panel); cursor:pointer; width:100%; box-sizing:border-box; -webkit-appearance:none; appearance:none; margin:0; display:block; min-width:0;}
.stone-card .ring{width:52px; height:52px; border-radius:50%; margin:0 auto 14px; display:flex; align-items:center; justify-content:center; border:1px solid var(--gold-line); overflow:hidden;}
.stone-card .ring svg{width:24px; height:24px;}
.stone-card h3{font-size:1rem; margin-bottom:6px; overflow-wrap:break-word; word-break:break-word; hyphens:auto;}
.stone-card p{font-size:0.85rem; color:var(--ink-soft); margin:0;}

.about-grid{display:grid; grid-template-columns:1.15fr 0.85fr; gap:48px; align-items:center;}
.portrait{aspect-ratio:4/5; background:linear-gradient(160deg, var(--cream-deep), var(--panel)); border:1px solid var(--gold-line); display:flex; align-items:center; justify-content:center;}
.portrait svg{width:38%;}
.about h2{font-size:clamp(1.6rem,2.6vw,2.1rem); max-width:14ch;}
.about p{color:var(--ink-soft); margin-top:16px; max-width:52ch;}

.visit{background:var(--cream-deep); color:var(--ink); border-top:1px solid var(--gold-line);}
.visit .kicker{color:var(--gold-deep);}
.visit-grid{display:grid; grid-template-columns:minmax(0,1fr); gap:48px;}
.visit h2{color:var(--ink); font-size:clamp(1.6rem,2.6vw,2.1rem);}
.visit dl{margin:26px 0 0; display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px 18px; font-size:0.95rem;}
.visit dt{color:var(--gold-deep); font-weight:500;}
.visit dd{margin:0; color:var(--ink-soft); overflow-wrap:anywhere; word-break:break-word;}

footer{padding:34px 24px; text-align:center; font-size:0.82rem; color:var(--ink-soft); border-top:1px solid var(--gold-line);}
.footer-links{display:flex; justify-content:center; flex-wrap:wrap; gap:8px 26px; margin-bottom:14px;}
.footer-links a{text-decoration:none; border-bottom:1px solid transparent; padding-bottom:2px; transition:color .2s, border-color .2s;}
.footer-links a:hover, .footer-links a:focus-visible{color:var(--gold-deep); border-color:var(--gold);}
.footer-copy{margin:0;}
.footer-credits{margin-top:8px; font-size:0.75rem; opacity:0.8;}
.footer-credits a{text-decoration:none; color:var(--gold-deep);}
.footer-credits a:hover{text-decoration:underline;}

.legal{max-width:760px; margin:0 auto; padding:56px 24px 72px;}
.legal h1{font-size:clamp(1.9rem,4vw,2.5rem); margin-bottom:28px;}
.legal h2{font-size:1.3rem; margin:38px 0 10px;}
.legal h3{font-size:1.05rem; margin:24px 0 8px;}
.legal p, .legal li{color:var(--ink-soft); font-size:0.97rem;}
.legal p{margin:0 0 14px;}
.legal ul{margin:0 0 14px; padding-left:22px;}
.legal a{text-decoration:underline; text-decoration-color:var(--gold-line); overflow-wrap:anywhere;}
.legal strong{color:var(--ink); font-weight:600;}
.back-link{display:inline-block; margin-top:32px; color:var(--gold-deep); text-decoration:none !important;}
.back-link:hover{text-decoration:underline !important;}

.modal-overlay{
  position:fixed; inset:0; background:rgba(30,22,14,0.72); display:none; align-items:center; justify-content:center;
  padding:24px; z-index:100;
}
.modal-overlay.open{display:flex;}
.modal-box{background:var(--panel); max-width:480px; width:100%; max-height:86vh; overflow:auto; position:relative; border:1px solid var(--gold-line);}
.modal-box.image-box{max-width:600px; background:none; border:none; overflow:visible;}
.modal-close{
  position:absolute; top:10px; right:10px; width:34px; height:34px; border-radius:50%; border:1px solid var(--gold-line);
  background:var(--panel); cursor:pointer; font-size:1.1rem; line-height:1; color:var(--ink); z-index:2;
}
.image-box .modal-close{background:var(--cream); top:-14px; right:-14px;}
.image-box .modal-body img, .image-box .modal-body svg{width:100%; border:1px solid var(--gold-line); background:var(--cream);}
.stone-modal-content{padding:30px 26px 26px;}
.stone-modal-head{display:flex; align-items:center; gap:14px; margin-bottom:18px;}
.stone-modal-head .sm-photo{width:64px; height:64px; border-radius:50%; object-fit:cover; border:1px solid var(--gold-line); flex:0 0 auto; background:var(--cream-deep);}
.stone-modal-head .stone-color{font-size:0.8rem; color:var(--ink-soft); margin-top:2px;}
.stone-modal-content h4{font-size:0.78rem; letter-spacing:0.06em; color:var(--gold-deep); margin:18px 0 6px;}
.stone-modal-content p{margin:0; color:var(--ink-soft); font-size:0.94rem;}
.stone-modal-content .disclaimer{margin-top:20px; padding-top:14px; border-top:1px solid var(--gold-line); font-size:0.75rem; color:var(--ink-soft); font-style:italic;}

@media (max-width:900px){
  .hero-grid, .about-grid, .visit-grid{grid-template-columns:1fr;}
  .grid3{grid-template-columns:1fr 1fr;}
  .grid5{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:600px){
  .grid3{grid-template-columns:1fr;}
  .grid5{grid-template-columns:repeat(2,minmax(0,1fr));}
  section{padding:56px 0;}
  .menu-btn{display:flex;}
}