:root{
  --bg:#fbf7f2;
  --ink:#241a14;
  --muted:#6a564a;
  --panel:#ffffff;
  --sand:#d9c3ad;
  --line:#eaded3;
  --a:#b45a2b;
  --b:#2d6a6b;
  --c:#6b4bb4;
  --r:24px;
  --sh:0 14px 34px rgba(36,26,20,.14);
  --max:1160px;
  --gap:18px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--ink);
  background:
    radial-gradient(900px 520px at 10% 0%, rgba(180,90,43,.12), transparent 60%),
    radial-gradient(820px 540px at 95% 10%, rgba(45,106,107,.12), transparent 60%),
    radial-gradient(720px 420px at 55% 100%, rgba(107,75,180,.09), transparent 60%),
    var(--bg);
  line-height:1.55;
}
a{color:var(--a); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{width:min(var(--max), calc(100% - 40px)); margin:0 auto;}
.small{font-size:12.5px;}
.muted{color:var(--muted);}

.topbar{position:sticky; top:0; z-index:60; border-bottom:1px solid var(--line); background:rgba(251,247,242,.84); backdrop-filter: blur(10px);}
.topbar__row{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0;}
.topbar__left{display:flex; gap:8px; flex-wrap:wrap;}
.topbar__right{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.chip{display:inline-flex; gap:6px; align-items:center; padding:7px 10px; border:1px solid var(--line); background:rgba(255,255,255,.7); border-radius:999px; font-size:12.5px; color:var(--muted);}
.chip strong{color:var(--ink);}
.toplink{font-size:13px; color:var(--muted);}
.badge{display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:20px; padding:0 8px; border-radius:999px; background:rgba(180,90,43,.14); border:1px solid rgba(180,90,43,.25); color:var(--a); font-weight:900;}

.layout{display:grid; grid-template-columns: 280px 1fr; min-height: calc(100vh - 52px);}
.rail{
  border-right:1px solid var(--line);
  background:rgba(255,255,255,.56);
  padding:18px 16px;
  position:sticky;
  top:52px;
  height: calc(100vh - 52px);
  overflow:auto;
}
.content{padding: 20px 0 48px;}
.pg{padding: 0 0 48px;}

.mark{display:grid; gap:6px; padding:14px; border:1px solid var(--line); border-radius:var(--r); background:var(--panel); box-shadow: var(--sh); color:var(--ink);}
.mark__dot{width:44px; height:10px; border-radius:999px; background:linear-gradient(90deg, var(--a), var(--b), var(--c));}
.mark__name{font-weight:950; letter-spacing:.2px;}
.mark__sub{font-size:12.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.12em;}

.nav{display:grid; gap:8px; margin-top:14px;}
.nav__a{padding:10px 12px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.6); color:var(--muted); font-weight:900; font-size:13px;}
.nav__a.on{background:rgba(180,90,43,.12); border-color:rgba(180,90,43,.25); color:var(--a);}
.nav__a:hover{text-decoration:none; background:rgba(45,106,107,.10); border-color:rgba(45,106,107,.22); color:var(--b);}

.rail__box{margin-top:14px; border:1px solid var(--line); border-radius:var(--r); background:var(--panel); padding:12px; box-shadow: var(--sh); display:grid; gap:10px;}
.rail__h{margin:0; font-size:14px;}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:11px 12px; border-radius:999px; border:1px solid transparent; font-weight:950; font-size:13px; cursor:pointer;}
.btn--solid{background:var(--a); color:white;}
.btn--ghost{background:rgba(255,255,255,.7); border-color:var(--line); color:var(--ink);}
.btn--line{background:transparent; border-color:rgba(180,90,43,.35); color:var(--a);}
.btn--full{width:100%;}
.btn:hover{text-decoration:none; filter:brightness(.985);}

.h1{margin:0 0 10px; font-size: clamp(30px, 3.4vw, 46px); line-height:1.06;}
.h2{margin:0 0 10px; font-size:22px;}
.lead{margin:0; color:var(--muted); font-size:16px;}

.hero{padding: 0 0 12px;}
.hero__grid{width:min(var(--max), calc(100% - 40px)); margin:0 auto; display:grid; grid-template-columns: 1.1fr .9fr; gap: var(--gap); align-items:stretch;}
.hero__copy{border:1px solid var(--line); border-radius:var(--r); background:rgba(255,255,255,.7); padding:16px; box-shadow: var(--sh);}
.hero__btns{display:flex; gap:10px; flex-wrap:wrap; margin-top: 14px;}
.hero__stats{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:10px; margin-top:16px;}
.stat{border:1px solid var(--line); border-radius:var(--r); background:rgba(255,255,255,.72); padding:10px;}
.stat strong{display:block; font-size:13px;}
.stat span{display:block; color:var(--muted); font-size:12.5px; margin-top:2px;}
.hero__art{border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow: var(--sh);}
.hero__img{width:100%; height:100%; object-fit:cover; display:block;}

.mosaic{margin-top: 6px;}
.mosaic__grid{display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:10px;}
.tile{border:1px solid var(--line); border-radius:var(--r); background:rgba(255,255,255,.72); padding:14px; box-shadow: var(--sh);}
.tile--tint{background:linear-gradient(180deg, rgba(255,255,255,.76), rgba(217,195,173,.18));}
.tile h3{margin:0 0 6px; font-size:15px;}
.tile p{margin:0 0 10px; color:var(--muted);}
.soft{font-weight:950; color:var(--b);}

.prose{margin-top: 22px;}
.prose p{margin:0 0 12px; color:var(--muted);}

.head{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.filters{display:flex; gap:8px; flex-wrap:wrap;}
.pill{padding:10px 12px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.7); color:var(--muted); font-weight:950; cursor:pointer;}
.pill.is{background:rgba(45,106,107,.12); border-color:rgba(45,106,107,.25); color:var(--b);}

.cards{display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:10px; margin-top: 14px;}
.card{border:1px solid var(--line); border-radius:var(--r); background:rgba(255,255,255,.72); overflow:hidden; box-shadow: var(--sh);}
.card__img{width:100%; height:120px; object-fit:cover; display:block;}
.card__in{padding:12px;}
.card__top{display:flex; justify-content:space-between; gap:10px; align-items:flex-start;}
.card__t{margin:0; font-size:15px;}
.price{font-weight:980; color:var(--a);}
.card__p{margin:8px 0 0; color:var(--muted); font-size:13px;}
.card__btns{display:flex; gap:8px; flex-wrap:wrap; margin-top: 12px;}

.spotlight__grid{display:grid; grid-template-columns: 1.05fr .95fr; gap: var(--gap); align-items:start;}
.spotlight__panel{border:1px solid var(--line); border-radius:var(--r); background:rgba(255,255,255,.72); padding:16px; box-shadow: var(--sh);}
.kicker{display:inline-flex; padding:7px 10px; border-radius:999px; background:rgba(107,75,180,.12); border:1px solid rgba(107,75,180,.22); color:var(--c); font-weight:950; letter-spacing:.08em; text-transform:uppercase; font-size:11.5px; margin:0 0 10px;}
.row{display:flex; gap:12px; align-items:baseline; margin: 10px 0 12px;}
.row--stack{flex-wrap:wrap; align-items:flex-end;}
.field span{display:block; font-size:12px; color:var(--muted); margin-bottom:6px;}
.input{width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.75); color:var(--ink);}
.input:focus{outline:2px solid rgba(45,106,107,.22); outline-offset:2px;}
.facts{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:10px; margin-top: 14px;}
.fact{border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.78); padding:10px;}
.fact strong{display:block; margin-bottom:4px;}
.fact span{color:var(--muted); font-size:12.5px;}
.spotlight__media{display:grid; gap:10px;}
.media{width:100%; border:1px solid var(--line); border-radius:var(--r); display:block; box-shadow: var(--sh);}
.media--short{height:190px; object-fit:cover;}

.cart__grid{display:grid; grid-template-columns: 1.1fr .9fr; gap:10px; margin-top: 12px;}
.panel{border:1px solid var(--line); border-radius:var(--r); background:rgba(255,255,255,.72); padding:14px; box-shadow: var(--sh);}
.panel--tint{background:linear-gradient(180deg, rgba(255,255,255,.74), rgba(217,195,173,.18));}
.lines{display:grid; gap:10px; margin-top: 10px;}
.line{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.7);}
.line__l{display:flex; gap:10px; align-items:center;}
.thumb{width:46px; height:46px; border-radius:14px; border:1px solid var(--line);}
.line__name{font-weight:980;}
.line__meta{color:var(--muted); font-size:12.5px;}
.ctrl{display:flex; gap:6px; align-items:center;}
.icon{border:1px solid var(--line); background:rgba(255,255,255,.85); border-radius:999px; padding:8px 10px; font-weight:980; cursor:pointer;}
.total{margin-top: 12px; border-top:1px dashed var(--line); padding-top: 12px;}
.total__row{display:flex; justify-content:space-between; align-items:center; font-size:14px;}

.about__grid, .contact__grid, .success__grid{display:grid; grid-template-columns: 1.05fr .95fr; gap:10px;}
.tags{display:flex; gap:8px; flex-wrap:wrap; margin-top: 10px;}
.tag{border:1px solid var(--line); background:rgba(45,106,107,.10); color:var(--b); padding:7px 10px; border-radius:999px; font-weight:950; font-size:12px;}
.list{margin:0; padding-left:18px; color:var(--muted);}
.list li{margin:8px 0;}

.timeline{display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:10px; margin-top: 14px;}
.step{border:1px solid var(--line); border-radius:var(--r); background:rgba(255,255,255,.72); padding:12px; box-shadow: var(--sh); display:grid; grid-template-columns: 38px 1fr; gap:10px;}
.step span{width:38px; height:38px; border-radius:16px; background:rgba(180,90,43,.14); border:1px solid rgba(180,90,43,.22); display:flex; align-items:center; justify-content:center; font-weight:980; color:var(--a);}
.step p{margin:4px 0 0;}

.contact__cards{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:10px; margin: 12px 0;}
.miniCard{border:1px solid var(--line); border-radius:var(--r); background:rgba(255,255,255,.72); padding:12px; box-shadow: var(--sh); display:grid; gap:4px;}
.form{display:grid; gap:10px; margin-top: 10px;}

.policy__box{margin-top:16px; display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:10px;}
.policy__box div{border:1px solid var(--line); border-radius:var(--r); background:rgba(255,255,255,.72); padding:10px; box-shadow: var(--sh); display:grid; gap:4px;}
.policy__box strong{font-size:12.5px;}
.policy__box span{color:var(--muted); font-size:12.5px;}

.pre{margin:0; white-space:pre-wrap; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size:12.5px; border:1px solid var(--line); border-radius:var(--r); background:rgba(255,255,255,.72); padding:12px;}
.btnrow{display:flex; gap:10px; flex-wrap:wrap; margin-top: 10px;}

.drawer{position:fixed; right:16px; bottom:16px; width:min(420px, calc(100% - 32px)); background:rgba(255,255,255,.92); border:1px solid var(--line); border-radius:var(--r); box-shadow: var(--sh); transform: translateY(18px); opacity:0; pointer-events:none; transition:.18s ease; z-index:80;}
.drawer.open{transform:none; opacity:1; pointer-events:auto;}
.drawer__top{display:flex; align-items:center; justify-content:space-between; padding:12px; border-bottom:1px solid var(--line);}
.drawer__body{padding:12px; display:grid; gap:10px; max-height: 42vh; overflow:auto;}
.drawer__foot{display:flex; gap:10px; padding:12px; border-top:1px solid var(--line);}
.x{border:1px solid var(--line); background:rgba(255,255,255,.9); border-radius:999px; padding:6px 10px; cursor:pointer; font-weight:980;}
.shade{position:fixed; inset:0; background:rgba(36,26,20,.18); opacity:0; pointer-events:none; transition:.18s ease; z-index:70;}
.shade.on{opacity:1; pointer-events:auto;}

.ft{border-top:1px solid var(--line); background:rgba(255,255,255,.66);}
.ft__grid{width:min(var(--max), calc(100% - 40px)); margin:0 auto; display:grid; grid-template-columns: 1.2fr .8fr 1fr; gap:10px; padding:18px 0;}
.ft__h{margin:0 0 10px; font-size:14px;}
.dl{margin:0; display:grid; gap:8px;}
.dl div{display:grid; grid-template-columns: 150px 1fr; gap:12px; border-bottom:1px dashed var(--line); padding-bottom:6px;}
.dl dt{color:var(--muted); font-size:12.5px;}
.dl dd{margin:0; font-size:12.5px;}
.links{margin:0; padding-left:18px; color:var(--muted);}
.links li{margin:6px 0;}
.ft__bar{width:min(var(--max), calc(100% - 40px)); margin:0 auto; display:flex; justify-content:space-between; gap:10px; padding:12px 0 18px; border-top:1px solid var(--line); color:var(--muted);}

@media (max-width: 1080px){
  .layout{grid-template-columns: 1fr;}
  .rail{position:relative; top:0; height:auto; border-right:none; border-bottom:1px solid var(--line);}
  .hero__grid{grid-template-columns: 1fr;}
  .mosaic__grid{grid-template-columns: repeat(2, minmax(0,1fr));}
  .cards{grid-template-columns: repeat(2, minmax(0,1fr));}
  .spotlight__grid, .cart__grid, .about__grid, .contact__grid, .success__grid{grid-template-columns: 1fr;}
  .facts{grid-template-columns: 1fr;}
  .timeline{grid-template-columns: repeat(2, minmax(0,1fr));}
  .ft__grid{grid-template-columns: 1fr;}
  .policy__box{grid-template-columns: 1fr;}
  .hero__stats{grid-template-columns: 1fr;}
  .dl div{grid-template-columns: 1fr;}
}
@media (max-width: 560px){
  .wrap{width: calc(100% - 26px);}
  .mosaic__grid, .cards{grid-template-columns: 1fr;}
  .timeline{grid-template-columns: 1fr;}
}