:root{
  --ink:#0f2018;
  --ink-2:#17301f;
  --ink-3:#1f3f28;
  --ivory:#ece7d8;
  --muted:#8f8a76;
  --gold:#b6904f;
  --gold-soft:#8f7343;
  --wine:#7a2331;
  --rule: rgba(182,144,79,0.24);
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--ink); color:var(--ivory);
  font-family:'Inter',sans-serif; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none;}
.mono{font-family:'IBM Plex Mono',monospace;}
.wrap{max-width:1120px; margin:0 auto; padding:0 32px;}

/* ---- header ---- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(15,32,24,0.9); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);
}
nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px;
  padding:18px 32px; max-width:1120px; margin:0 auto;
}
.logo{display:flex; align-items:center; gap:12px; flex-shrink:0;}
.logo img{height:34px; display:block;}
.logo-text{font-family:'Fraunces',serif; font-weight:500; font-size:19px; letter-spacing:0.05em; text-transform:uppercase; white-space:nowrap;}
.logo-text span{color:var(--gold);}
.navlinks{display:none; gap:32px; font-size:12.5px; letter-spacing:0.07em; text-transform:uppercase; color:var(--muted); margin-right:auto; margin-left:40px;}
.navlinks a:hover{color:var(--ivory);}
@media(min-width:760px){.navlinks{display:flex;}}
@media(max-width:520px){ nav > a.mono{display:none;} }

.mobile-menu-btn{
  display:none; background:none; border:1px solid var(--rule); color:var(--gold);
  width:38px; height:38px; align-items:center; justify-content:center; cursor:pointer;
  flex-shrink:0; padding:0;
}
.mobile-menu-btn svg{width:18px; height:18px;}
@media(max-width:759px){ .mobile-menu-btn{display:flex;} }

.mobile-menu-panel{
  display:none; position:fixed; inset:0; background:var(--ink); z-index:200;
  padding:28px 32px 40px; flex-direction:column;
}
.mobile-menu-panel.open{display:flex;}
.mobile-menu-panel .mm-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:56px; gap:16px;}
.mobile-menu-panel .mm-top .logo-text{font-size:16px;}
.mobile-menu-close{
  background:none; border:1px solid var(--rule); color:var(--gold);
  width:38px; height:38px; display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.mobile-menu-close svg{width:16px; height:16px;}
.mobile-menu-links{display:flex; flex-direction:column; gap:8px;}
.mobile-menu-links a{
  font-family:'Fraunces',serif; font-size:32px; color:var(--ivory); padding:14px 0;
  border-bottom:1px solid var(--rule);
}
.mobile-menu-links a span{color:var(--gold);}
.mobile-menu-phone{
  margin-top:auto; padding-top:30px; font-family:'IBM Plex Mono',monospace;
  font-size:16px; color:var(--gold);
}

/* ---- breadcrumbs ---- */
.breadcrumbs{
  max-width:1120px; margin:26px auto 0; padding:0 32px;
  font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.04em; color:var(--muted);
}
.breadcrumbs a:hover{color:var(--gold);}

/* ---- hero ---- */
.hero{
  position:relative;
  padding:100px 32px 80px;
  text-align:center;
  background:
    radial-gradient(ellipse 700px 400px at 50% -10%, rgba(182,144,79,0.16), transparent 60%),
    var(--ink);
  border-bottom:1px solid var(--rule);
}
.eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--gold); margin-bottom:24px;
}
.hero h1, .page-title{
  font-family:'Fraunces',serif;
  font-weight:400;
  font-size:clamp(34px, 6vw, 68px);
  line-height:1.06;
  letter-spacing:-0.01em;
  max-width:780px; margin:0 auto 22px;
}
.hero h1 em{font-style:italic; color:var(--gold); font-weight:300;}
.hero p.lede{
  max-width:520px; margin:0 auto 36px;
  color:var(--muted); font-size:16.5px; line-height:1.65;
}
.cta-row{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}
.btn{
  padding:14px 28px; font-size:13px; letter-spacing:0.1em; text-transform:uppercase;
  border-radius:2px; border:1px solid var(--gold); transition:all 0.25s ease;
  display:inline-block; cursor:pointer; background:none; color:var(--ivory);
  font-family:'Inter',sans-serif;
}
.btn-solid{background:var(--gold); color:var(--ink); font-weight:600; border-color:var(--gold);}
.btn-solid:hover{background:#c9a35f;}
.btn-ghost{border-color:var(--rule);}
.btn-ghost:hover{border-color:var(--gold); color:var(--gold);}

/* ---- generic section ---- */
.section{padding:80px 32px;}
.section-narrow{max-width:820px; margin:0 auto; padding:80px 32px;}
.section-head{text-align:center; margin-bottom:56px;}
.section-head h2{font-family:'Fraunces',serif; font-weight:400; font-size:clamp(26px,4vw,40px); margin-top:12px;}
.section-head p{color:var(--muted); max-width:460px; margin:14px auto 0; font-size:14.5px; line-height:1.6;}
h2.simple{font-family:'Fraunces',serif; font-weight:400; font-size:28px; margin-bottom:20px;}
p.body-text{color:#c9c4b3; line-height:1.75; font-size:15px; max-width:760px; margin-bottom:16px;}

/* ---- roster / brand grid ---- */
.brand-hero{
  display:flex; gap:44px; align-items:flex-start;
}
.brand-hero-logo{
  flex:0 0 200px;
  aspect-ratio:1/1;
  border:1px solid var(--rule);
  background:var(--ink-2);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.brand-hero-logo img{width:100%; height:100%; object-fit:contain;}
.brand-hero-body{flex:1; min-width:0;}
@media(max-width:700px){
  .brand-hero{flex-direction:column;}
  .brand-hero-logo{flex-basis:auto; width:140px;}
}

.roll{border-top:1px solid var(--rule);}
.roll-item{
  display:grid; grid-template-columns:56px 44px 1fr auto; align-items:center; gap:20px;
  padding:24px 8px; border-bottom:1px solid var(--rule);
  transition:background 0.3s ease;
}
.roll-logo{width:44px; height:44px; object-fit:contain; opacity:0.92;}
.roll-item:hover{background:var(--ink-2);}
.roll-num{font-family:'IBM Plex Mono',monospace; color:var(--gold-soft); font-size:13px;}
.roll-name{font-family:'Fraunces',serif; font-weight:400; font-size:clamp(19px,3vw,27px);}
.roll-note{color:var(--muted); font-size:12.5px; text-align:right; max-width:260px; font-family:'IBM Plex Mono',monospace; line-height:1.5;}
@media(max-width:700px){
  .roll-item{grid-template-columns:24px 36px 1fr; row-gap:6px;}
  .roll-note{grid-column:3; text-align:left; max-width:100%;}
}

/* ---- product grid (brand page) ---- */
.product-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:20px;
}
@media(max-width:820px){.product-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.product-grid{grid-template-columns:1fr;}}
.product-card{
  border:1px solid var(--rule); padding:26px 20px; text-align:center;
  transition:border-color 0.25s ease, transform 0.25s ease;
}
.product-card:hover{border-color:var(--gold); transform:translateY(-3px);}
.product-card .ph-box{
  aspect-ratio:1/1; background:var(--ink-2); margin-bottom:16px;
  display:flex; align-items:center; justify-content:center; color:var(--gold-soft); font-size:26px;
  overflow:hidden;
}
.product-card h3{font-family:'Fraunces',serif; font-weight:400; font-size:19px; margin-bottom:6px;}
.product-card .pc-meta{font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:0.05em;}

/* ---- formats / seals ---- */
.seal-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:820px; margin:0 auto;}
@media(max-width:700px){.seal-grid{grid-template-columns:1fr; max-width:320px;}}
.seal{background:var(--ink); border:1px solid var(--rule); border-radius:4px; padding:34px 22px; text-align:center;}
.seal-vol{font-family:'Fraunces',serif; font-size:40px; color:var(--gold); line-height:1; margin-bottom:6px;}
.seal-unit{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--muted); letter-spacing:0.1em; text-transform:uppercase; margin-bottom:14px;}
.seal-label{font-size:13.5px; color:var(--ivory); font-weight:500;}
.seal-desc{font-size:12px; color:var(--muted); margin-top:6px; line-height:1.5;}

/* ---- product page ---- */
.product{
  max-width:1120px; margin:0 auto; padding:28px 32px 70px;
  display:grid; grid-template-columns:1fr 1fr; gap:56px;
}
@media(max-width:820px){.product{grid-template-columns:1fr; gap:32px;}}
.gallery-main{
  aspect-ratio:1/1.1; border:1px solid var(--rule); background:var(--ink-2);
  display:flex; align-items:center; justify-content:center; margin-bottom:14px;
}
.ph{text-align:center; color:var(--muted); font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:0.06em; text-transform:uppercase; padding:16px;}
.ph .icon{font-size:30px; display:block; margin-bottom:8px; color:var(--gold-soft);}
.thumbs{display:flex; gap:10px;}
.thumb{
  flex:1; aspect-ratio:1/1; border:1px solid var(--rule); background:var(--ink-2);
  display:flex; align-items:center; justify-content:center; font-family:'IBM Plex Mono',monospace;
  font-size:9.5px; letter-spacing:0.03em; text-align:center; color:var(--muted);
  overflow:hidden; cursor:pointer; transition:border-color 0.2s ease;
}
.thumb:hover{border-color:var(--gold-soft);}
.thumb.active{border-color:var(--gold);}
.brand-link{font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:0.13em; text-transform:uppercase; color:var(--gold); margin-bottom:8px; display:inline-block;}
.brand-link:hover{color:#c9a35f;}
h1.product-name{font-family:'Fraunces',serif; font-weight:400; font-size:clamp(28px,4vw,42px); line-height:1.08; margin-bottom:8px;}
.tagline{color:var(--muted); font-size:14px; margin-bottom:24px; line-height:1.6;}
.specs{border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:20px 0; margin-bottom:26px;}
.spec-row{display:grid; grid-template-columns:140px 1fr; gap:12px; padding:8px 0; font-size:13.5px;}
.spec-label{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--muted); letter-spacing:0.04em; text-transform:uppercase; padding-top:2px;}
.spec-value{color:var(--ivory); line-height:1.5;}
.section-label{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--muted); letter-spacing:0.07em; text-transform:uppercase; margin-bottom:10px;}
.vol-options{display:flex; gap:10px; margin-bottom:22px;}
.vol-btn{flex:1; border:1px solid var(--rule); background:transparent; color:var(--ivory); padding:12px 6px; text-align:center;}
.vol-btn .v{font-family:'Fraunces',serif; font-size:18px; display:block;}
.vol-btn .u{font-family:'IBM Plex Mono',monospace; font-size:9.5px; color:var(--muted); text-transform:uppercase;}
.vol-btn.active{border-color:var(--gold); background:rgba(182,144,79,0.08);}
.vol-btn.active .v{color:var(--gold);}
.buy-row{display:flex; align-items:center; gap:20px;}
.price{font-family:'Fraunces',serif; font-size:32px; color:var(--ivory);}
.btn-order{flex:1; background:var(--gold); color:var(--ink); border:none; padding:16px 24px; font-size:12.5px; letter-spacing:0.09em; text-transform:uppercase; font-weight:600; cursor:pointer;}
.stock-note{margin-top:12px; font-family:'IBM Plex Mono',monospace; font-size:11px; color:#7fae86; display:flex; align-items:center; gap:6px;}
.stock-dot{width:6px; height:6px; border-radius:50%; background:#7fae86; display:inline-block;}
.order-form{display:flex; flex-direction:column; gap:10px; margin-top:16px;}
.order-input{
  background:var(--ink-2); border:1px solid var(--rule); color:var(--ivory);
  padding:12px 14px; font-family:'Inter',sans-serif; font-size:14px; resize:vertical;
}
.order-input::placeholder{color:var(--muted);}
.order-input:focus{outline:none; border-color:var(--gold);}
.description{max-width:1120px; margin:0 auto; padding:0 32px 90px; border-top:1px solid var(--rule); padding-top:50px;}
.notes-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:30px; max-width:760px;}
@media(max-width:600px){.notes-grid{grid-template-columns:1fr;}}
.note-card{border:1px solid var(--rule); padding:18px;}
.note-card p{font-size:13px; color:var(--ivory); margin:0; line-height:1.6;}

/* ---- simple content blocks (about / delivery / contacts) ---- */
.info-block{max-width:760px; margin:0 auto; padding:70px 32px 90px;}
.info-block h1{font-family:'Fraunces',serif; font-weight:400; font-size:clamp(30px,5vw,48px); margin-bottom:30px;}
.info-block p{color:#c9c4b3; line-height:1.75; font-size:15px; margin-bottom:18px;}
.why-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:30px;}
@media(max-width:700px){.why-grid{grid-template-columns:1fr;}}
.why-card{border:1px solid var(--rule); padding:20px;}
.why-card .num{font-family:'IBM Plex Mono',monospace; color:var(--gold); font-size:12px; margin-bottom:8px;}
.why-card p{font-size:13px; margin:0; color:var(--ivory);}
dl.def-list{margin-top:10px;}
dl.def-list dt{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:0.05em; margin-top:20px;}
dl.def-list dd{color:var(--ivory); margin-top:4px; font-size:14.5px;}

/* ---- footer ---- */
footer{border-top:1px solid var(--rule); padding:40px 32px; margin-top:0;}
.foot-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; max-width:1120px; margin:0 auto;}
.foot-logo{font-family:'Fraunces',serif; font-size:17px;}
.foot-links{display:flex; gap:24px; font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:0.07em; flex-wrap:wrap;}
.foot-links a:hover{color:var(--gold);}