

/* ============ Superieur Genetix — shared production styles ============
   Source of truth: design_handoff_superieurgenetix/README.md (Design Tokens)
   and the .dc.html artboards. Do not add border-radius or box-shadow. */

:root{
  --bg:#0B0B09;
  --band:#12110E;
  --gold:#C9A45B;
  --gold-hover:#D8B36A;
  --btn-text:#14120C;
  --cream:#F4EFE3;
  --body:#B9B5AA;
  --secondary:#8F8B80;
  --faint:#6E6A62;
  --pillar:#C6C2B6;
  --nav-idle:#A19C90;
  --micro:#7E7A70;
  --hairline:rgba(201,164,91,.22);
  --hairline-soft:rgba(201,164,91,.16);
  --slot-border:rgba(201,164,91,.4);
  --slot-text:rgba(201,164,91,.65);
  --input-idle:#3A372E;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--body);font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.6}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
button,input,textarea,select{font-family:inherit;border-radius:0}
.serif{font-family:'Playfair Display',serif}

/* ---- layout ---- */
.wrap{max-width:1440px;margin:0 auto;padding-left:100px;padding-right:100px}
@media (max-width:767px){
  .wrap{padding-left:24px;padding-right:24px}
}

/* ---- header ---- */
.site-header{border-bottom:1px solid var(--hairline-soft)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;padding:20px 64px}
.brand{display:flex;align-items:center;gap:16px}
.brand img{width:46px;height:50px;object-fit:cover}
.brand span{font-family:'Playfair Display',serif;font-size:19px;letter-spacing:.05em;color:var(--cream)}
.nav{display:flex;align-items:center;gap:34px;font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.nav a{color:var(--nav-idle)}
.nav a:hover{color:var(--gold)}
body[data-page="home"] a[data-nav="home"],
body[data-page="strain-library"] a[data-nav="strain-library"],
body[data-page="strain-detail"] a[data-nav="strain-library"],
body[data-page="cultivation"] a[data-nav="cultivation"],
body[data-page="journal"] a[data-nav="journal"],
body[data-page="about"] a[data-nav="about"],
body[data-page="contact"] a[data-nav="contact"]{color:var(--gold);border-bottom:1px solid var(--gold);padding-bottom:3px}
.hamburger{display:none}
.menu-toggle{display:none}
.mobile-nav{display:none}
@media (max-width:767px){
  .site-header .wrap{padding:14px 20px}
  .brand{gap:10px}
  .brand img{width:34px;height:37px}
  .brand span{font-size:15px;letter-spacing:.04em}
  .nav{display:none}
  .hamburger{display:flex;flex-direction:column;gap:5px;padding:6px 0;cursor:pointer}
  .hamburger span{display:block;height:1.5px;background:#CFCBC0}
  .hamburger span:nth-child(1){width:22px}
  .hamburger span:nth-child(2){width:22px}
  .hamburger span:nth-child(3){width:14px}
  .menu-toggle:checked + .mobile-nav{display:flex;flex-direction:column;border-top:1px solid var(--hairline-soft)}
  .mobile-nav a{padding:16px 20px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--nav-idle);border-bottom:1px solid var(--hairline-soft)}
  .mobile-nav a:last-child{border-bottom:none}
  body[data-page="home"] .mobile-nav a[data-nav="home"],
  body[data-page="strain-library"] .mobile-nav a[data-nav="strain-library"],
  body[data-page="strain-detail"] .mobile-nav a[data-nav="strain-library"],
  body[data-page="cultivation"] .mobile-nav a[data-nav="cultivation"],
  body[data-page="journal"] .mobile-nav a[data-nav="journal"],
  body[data-page="about"] .mobile-nav a[data-nav="about"],
  body[data-page="contact"] .mobile-nav a[data-nav="contact"]{color:var(--gold);border-bottom:1px solid var(--hairline-soft)}
}

/* ---- footer ---- */
.site-footer{border-top:1px solid var(--hairline-soft)}
.site-footer .wrap{padding-top:36px;padding-bottom:44px;display:flex;flex-direction:column;gap:26px}
.footer-top{display:flex;align-items:center;justify-content:space-between}
.footer-top img{width:38px;height:41px;object-fit:cover}
.footer-links{display:flex;gap:28px;font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.footer-links a{color:var(--faint)}
.footer-links a:hover{color:var(--gold)}
.footer-bottom{display:flex;justify-content:space-between;gap:80px;align-items:flex-start}
.compliance{font-size:11.5px;line-height:1.7;color:var(--faint);max-width:680px;text-wrap:pretty}
.copyright{font-size:11.5px;color:var(--faint);white-space:nowrap}
@media (max-width:767px){
  .site-footer .wrap{padding-top:24px;padding-bottom:30px;gap:14px}
  .footer-top{display:none}
  .footer-bottom{flex-direction:column;gap:14px}
  .compliance{font-size:11px}
  .copyright{font-size:11px}
}

/* ---- shared components ---- */
.kicker{font-size:11.5px;letter-spacing:.3em;color:var(--gold)}
@media (max-width:767px){
  .kicker{font-size:10.5px;letter-spacing:.28em}
}

.btn-gold{display:inline-block;background:var(--gold);color:var(--btn-text);padding:19px 40px;font-size:13px;letter-spacing:.24em;text-transform:uppercase;font-weight:700;text-align:center;border:none;cursor:pointer}
.btn-gold:hover{background:var(--gold-hover)}
.btn-outline{display:inline-block;background:transparent;color:var(--body);border:1px solid var(--input-idle);padding:19px 44px;font-size:13px;letter-spacing:.24em;text-transform:uppercase;text-align:center;cursor:pointer}
.btn-outline:hover{border-color:var(--gold);color:var(--cream)}
@media (max-width:767px){
  .btn-gold{display:block;width:100%;padding:17px 0;font-size:12px;letter-spacing:.22em;min-height:48px}
  .btn-outline{display:block;width:100%;padding:16px 0;font-size:12px;letter-spacing:.22em;min-height:48px}
}

.link-gold{display:inline-block;color:var(--gold);font-size:12px;letter-spacing:.2em;text-transform:uppercase;border-bottom:1px solid rgba(201,164,91,.5);padding-bottom:5px}
.link-gold:hover{color:var(--gold-hover)}
.link-cream{display:inline-block;color:var(--cream);font-size:13px;letter-spacing:.2em;text-transform:uppercase;border-bottom:1px solid rgba(201,164,91,.5);padding-bottom:5px}
.link-cream:hover{color:var(--gold)}
@media (max-width:767px){
  .link-gold{font-size:11px;padding-bottom:4px}
}

.band{background:var(--band);border-top:1px solid var(--hairline-soft);border-bottom:1px solid var(--hairline-soft)}

.img-slot{display:flex;align-items:center;justify-content:center;text-align:center;border:1px dashed var(--slot-border);color:var(--slot-text);padding:16px}
.img-slot span{font-size:11.5px;letter-spacing:.08em;line-height:1.5}

.input-box{background:transparent;border:1px solid var(--input-idle);color:var(--cream);font-size:15px;outline:none}
.input-box:focus{border-color:var(--gold)}
.input-box::placeholder{color:var(--secondary)}
.input-underline{background:transparent;border:none;border-bottom:1px solid var(--input-idle);color:var(--cream);font-size:15px;outline:none}
.input-underline:focus{border-bottom-color:var(--gold)}
.input-underline::placeholder{color:var(--secondary)}

/* ---- 21+ age gate overlay (implements the handoff lightbox; shown until verified) ---- */
#age-gate{position:fixed;inset:0;z-index:1000;background:var(--bg);display:flex;align-items:center;justify-content:center;text-align:center}
html.age-ok #age-gate{display:none}
html:not(.age-ok) body{overflow:hidden}
.ag-inner{display:flex;flex-direction:column;align-items:center;max-width:560px;padding:0 40px}
.ag-inner img{width:84px;height:91px;object-fit:cover;margin-bottom:22px}
.ag-wordmark{font-family:'Playfair Display',serif;font-size:22px;letter-spacing:.06em;color:var(--cream);margin-bottom:40px}
.ag-rule{width:48px;height:1px;background:rgba(201,164,91,.6);margin-bottom:40px}
.ag-headline{font-family:'Playfair Display',serif;font-size:52px;line-height:1.1;font-weight:500;color:var(--cream);margin-bottom:20px}
.ag-sub{font-size:15px;line-height:1.65;color:var(--body);margin:0 0 44px;text-wrap:pretty}
.ag-actions{display:flex;gap:16px;margin-bottom:40px}
.ag-actions .btn-gold{padding:19px 44px}
.ag-legal{font-size:11.5px;line-height:1.7;color:var(--faint);max-width:460px;text-wrap:pretty}
@media (max-width:767px){
  .ag-inner{padding:0 32px}
  .ag-inner img{width:64px;height:70px;margin-bottom:16px}
  .ag-wordmark{font-size:18px;letter-spacing:.05em;margin-bottom:32px}
  .ag-rule{width:40px;margin-bottom:32px}
  .ag-headline{font-size:36px;line-height:1.12;margin-bottom:16px}
  .ag-sub{font-size:14px;line-height:1.6;margin-bottom:32px}
  .ag-actions{flex-direction:column;gap:12px;width:100%;margin-bottom:32px}
  .ag-actions .btn-gold{padding:17px 0}
  .ag-legal{font-size:11px;line-height:1.65}
  .ag-legal .ag-legal-ext{display:none}
}
/* journal post pages */
.post-hero{padding-top:64px;padding-bottom:44px;border-bottom:1px solid var(--hairline)}
.post-back{color:var(--secondary);font-size:12px;letter-spacing:.18em;text-transform:uppercase}
.post-back:hover{color:var(--gold)}
.post-meta-line{font-size:10.5px;letter-spacing:.2em;color:var(--secondary);margin:36px 0 18px}
.post-h1{font-family:'Playfair Display',serif;font-size:46px;line-height:1.15;font-weight:500;color:var(--cream);max-width:820px;text-wrap:pretty}
.post-body{max-width:720px;padding-top:48px;padding-bottom:88px}
.post-body p{font-size:16px;line-height:1.8;color:var(--body);margin:0 0 22px;text-wrap:pretty}
.post-body strong{color:var(--cream);font-weight:700}
.post-body ul{margin:0 0 22px;padding-left:22px}
.post-body li{font-size:16px;line-height:1.8;color:var(--body);margin-bottom:10px}
.post-body video{width:100%;margin:10px 0 22px;border:1px solid var(--hairline-soft);display:block}
.m-only-meta{display:none}
@media (max-width:767px){
  .post-hero{padding-top:40px;padding-bottom:32px}
  .post-h1{font-size:30px}
  .post-body{padding-top:32px;padding-bottom:52px}
  .post-body p,.post-body li{font-size:15px;line-height:1.75}
  .d-only-meta{display:none}
  .m-only-meta{display:block}
}
/* 404 */
.nf-main{min-height:70vh;display:flex;align-items:center;justify-content:center;text-align:center}
.nf-inner{display:flex;flex-direction:column;align-items:center;padding:40px 24px}
.nf-code{font-size:11.5px;letter-spacing:.3em;color:var(--gold);margin-bottom:18px}
.nf-title{font-family:'Playfair Display',serif;font-size:44px;font-weight:500;color:var(--cream);margin-bottom:16px}
.nf-sub{color:var(--body);margin:0 0 36px}

/* real photo filling an .img-slot (removes the dashed placeholder look) */
.img-slot.has-photo{border:none;padding:0;overflow:hidden}
.img-slot.has-photo img{width:100%;height:100%;object-fit:cover;display:block}

/* strain library (generated — matches the design schema) */
.lib-hero{padding-top:88px;padding-bottom:0}
.lib-kicker{font-size:12px;letter-spacing:.3em;margin-bottom:22px}
.lib-title{font-size:66px;line-height:1.04;font-weight:500;color:var(--cream);margin:0 0 24px;max-width:800px;text-wrap:balance}
.lib-sub{font-size:16.5px;line-height:1.65;color:var(--body);max-width:520px;margin:0;text-wrap:pretty}
.lib-filter{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--hairline);padding-top:28px;margin-top:48px}
.lib-chips{display:flex;gap:10px}
.chip{padding:11px 20px;border:1px solid var(--input-idle);background:transparent;color:var(--pillar);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;font-family:inherit}
.chip.active{background:var(--gold);border-color:var(--gold);color:var(--btn-text);font-weight:700}
.lib-count{font-size:12px;letter-spacing:.18em;color:var(--secondary);white-space:nowrap}
.lib-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:56px 40px;padding:52px 0 96px}
.lib-card{display:flex;flex-direction:column;gap:9px}
.lib-card.hide{display:none}
.lib-card-img{width:100%;height:360px;overflow:hidden;background:var(--band);margin-bottom:9px}
.lib-card-img img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .2s}
.lib-card:hover .lib-card-img img{opacity:.88}
.lib-type{font-size:10.5px;letter-spacing:.24em;color:var(--gold)}
.lib-card-name{font-size:26px;color:var(--cream)}
.lib-card:hover .lib-card-name{color:var(--gold)}
.lib-lineage{font-size:13px;letter-spacing:.04em;color:var(--secondary)}
@media (max-width:767px){
  .lib-hero{padding-top:52px}
  .lib-title{font-size:42px;line-height:1.05}
  .lib-sub{font-size:14.5px}
  .lib-filter{flex-direction:column;align-items:flex-start;gap:16px;padding-top:20px;margin-top:32px}
  .lib-chips{flex-wrap:wrap;gap:8px}
  .chip{padding:0 16px;min-height:44px;font-size:11.5px}
  .lib-grid{grid-template-columns:1fr;gap:40px;padding:36px 0 56px}
  .lib-card-img{height:300px}
  .lib-card-name{font-size:23px}
}

/* strain detail (generated) */
.crumb{padding-top:36px}
.crumb-link{color:var(--secondary);font-size:12px;letter-spacing:.18em;text-transform:uppercase}
.crumb-link:hover{color:var(--gold)}
.detail-grid{display:grid;grid-template-columns:minmax(0,50%) minmax(0,1fr);gap:88px;padding-top:36px;padding-bottom:96px;align-items:start}
.detail-photo{width:100%;aspect-ratio:1/1;overflow:hidden;background:var(--band)}
.detail-photo img{width:100%;height:100%;object-fit:cover;display:block}
.detail-badge{display:inline-block;border:1px solid rgba(201,164,91,.5);color:var(--gold);font-size:10.5px;letter-spacing:.26em;padding:8px 14px;margin-bottom:26px}
.detail-lineage{font-style:italic;font-size:20px;color:var(--body);margin:0 0 30px}
.detail-name{font-size:60px;line-height:1.04;font-weight:500;color:var(--cream);margin-bottom:18px;text-wrap:balance}
.detail-note{font-size:15.5px;line-height:1.75;color:var(--body);margin:0 0 40px;max-width:480px;text-wrap:pretty}
.d-spec{border-top:1px solid var(--hairline);padding:18px 0;display:grid;grid-template-columns:150px 1fr;gap:24px;align-items:baseline}
.d-spec.last{border-bottom:1px solid var(--hairline)}
.d-spec-label{font-size:10.5px;letter-spacing:.26em;color:var(--gold)}
.d-spec-value{font-size:15px;color:var(--cream)}
.d-cta{display:flex;align-items:center;gap:24px;margin-top:44px}
.d-cta .btn-gold{padding:18px 36px;font-size:12.5px}
.d-wholesale{font-size:12.5px}
.d-micro{margin-top:18px;font-size:12px;color:var(--micro)}
.more-band{border-bottom:none}
.more-band .wrap{padding-top:80px;padding-bottom:88px}
.more-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:44px}
.more-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:40px}
.more-card{display:flex;flex-direction:column;gap:12px}
.more-card-img{width:100%;aspect-ratio:4/5;overflow:hidden;background:var(--band)}
.more-card-img img{width:100%;height:100%;object-fit:cover;display:block}
.more-card:hover .more-card-img img{opacity:.86}
.more-card-name{font-size:22px;color:var(--cream)}
.more-card:hover .more-card-name{color:var(--gold)}
@media (max-width:767px){
  .crumb{padding-top:28px}
  .detail-grid{display:block;padding-bottom:56px}
  .detail-photo{aspect-ratio:4/5;margin-bottom:28px}
  .detail-name{font-size:38px;margin-bottom:16px}
  .detail-note{font-size:14.5px;max-width:none}
  .d-spec{grid-template-columns:1fr;gap:5px;padding:14px 0}
  .d-cta{display:block;margin-top:32px}
  .d-wholesale{display:none}
  .d-micro{text-align:center}
  .more-band{display:none}
}
