@font-face { font-family:"Bebas Neue"; src:url("../fonts/bebas-neue.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"Iosevka Charon Mono"; src:url("../fonts/iosevka-charon-mono.woff2") format("woff2"); font-display:swap; }
:root { --green:#17352d; --orange:#bb5a32; --paper:#f1e5ca; --ink:#17352d; }
* { box-sizing:border-box; }
html { min-height:100%; background:var(--green); }
body { min-width:320px; min-height:100%; margin:0; color:var(--paper); background:var(--green); font-family:"Iosevka Charon Mono",monospace; }
a { color:inherit; text-decoration:none; }

.strain-page { position:relative; isolation:isolate; min-height:100dvh; padding:clamp(22px,4vw,52px) clamp(18px,5vw,72px) clamp(40px,6vw,80px); overflow:hidden; }
.strain-page::before { content:""; position:fixed; z-index:-1; right:-12vw; bottom:-19vw; width:min(70vw,850px); aspect-ratio:1; background:url("../icons/cannabis-leaf.svg") center/contain no-repeat; filter:brightness(0) invert(1); opacity:.025; transform:rotate(-14deg); }
.strain-page__grain { position:fixed; z-index:-1; inset:0; pointer-events:none; background:url("../images/textures/paper-grain.jpg") center/max(100%,1200px) auto repeat-y,url("../images/textures/grain.svg")/180px 180px repeat; background-blend-mode:multiply; mix-blend-mode:overlay; opacity:.5; filter:grayscale(1) contrast(1.5); }
.strain-header { display:flex; width:min(100%,1320px); align-items:center; justify-content:space-between; gap:24px; margin:auto; }
.strain-header img { display:block; width:clamp(175px,25vw,340px); filter:brightness(0) invert(1) sepia(.16); }
.strain-header p { display:flex; align-items:center; gap:clamp(20px,4vw,52px); margin:0; color:var(--orange); font:clamp(17px,2vw,25px)/1 "Bebas Neue",Impact,sans-serif; }
.strain-header b { display:grid; width:50px; height:50px; place-items:center; border:2px solid currentColor; border-radius:50%; font-weight:400; }

.strain-profile { display:grid; width:min(100%,1220px); grid-template-columns:minmax(300px,.82fr) minmax(0,1.18fr); gap:clamp(45px,7vw,100px); align-items:center; margin:clamp(50px,7vw,95px) auto 0; }
.strain-profile__visual { position:relative; filter:drop-shadow(12px 14px 6px rgb(0 0 0/.22)); }
.strain-profile__number { position:absolute; z-index:2; top:8%; left:0; padding:8px 12px; color:var(--paper); background:var(--orange); font:19px/1 "Bebas Neue",Impact,sans-serif; transform:rotate(-2deg); }
.strain-profile__card-copy { position:absolute; inset:65% 12% 8% 14%; display:flex; flex-direction:column; justify-content:center; gap:12px; color:#fff5e1; text-shadow:0 1px 3px #17352d; }
.strain-profile__card-copy strong { font:clamp(35px,5vw,64px)/1 "Bebas Neue",Impact,sans-serif; text-transform:uppercase; }
.strain-profile__card-copy span { font-size:12px; line-height:1.4; }
.strain-profile__card-copy small { font-size:10px; line-height:1.4; }
.strain-profile__visual img { display:block; width:100%; height:auto; }
.strain-profile__content { min-width:0; }
.strain-profile__back { display:inline-block; margin-bottom:clamp(24px,4vw,48px); color:var(--paper); font:18px/1 "Bebas Neue",Impact,sans-serif; }
.strain-profile__status { margin:0 0 10px; color:var(--orange); font:clamp(23px,3vw,38px)/1 "Bebas Neue",Impact,sans-serif; }
.strain-profile h1 { margin:0; color:var(--paper); font:clamp(82px,11vw,154px)/.76 "Bebas Neue",Impact,sans-serif; letter-spacing:-.02em; }
.strain-profile__intro { max-width:690px; margin:clamp(28px,4vw,45px) 0 0; font-size:clamp(14px,1.5vw,18px); line-height:1.55; }
.strain-facts { display:grid; grid-template-columns:1fr 1fr; margin:clamp(34px,5vw,55px) 0 0; border-top:2px solid var(--orange); }
.strain-facts div { min-width:0; padding:20px 15px 20px 0; border-bottom:2px solid var(--orange); }
.strain-facts div:nth-child(odd) { border-right:2px solid var(--orange); }
.strain-facts div:nth-child(even) { padding-left:22px; }
.strain-facts dt { color:var(--orange); font:20px/1 "Bebas Neue",Impact,sans-serif; }
.strain-facts dd { margin:8px 0 0; font-size:clamp(13px,1.4vw,17px); line-height:1.35; }
.strain-profile__note { display:grid; grid-template-columns:54px 1fr; gap:18px; align-items:center; margin-top:30px; }
.strain-profile__note img { width:50px; filter:brightness(0) invert(1); }
.strain-profile__note p { margin:0; color:rgb(241 229 202/.75); font-size:12px; line-height:1.5; }
.strain-profile__cta { display:inline-grid; min-height:52px; place-items:center; margin-top:30px; padding:10px 18px; border:3px solid var(--orange); background:var(--orange); font:24px/1 "Bebas Neue",Impact,sans-serif; box-shadow:6px 6px 0 rgb(0 0 0/.2); }
.strain-switcher { display:flex; flex-wrap:wrap; justify-content:center; gap:12px 26px; width:min(100%,1220px); margin:clamp(55px,8vw,100px) auto 0; padding-top:25px; border-top:1px solid rgb(241 229 202/.25); font:20px/1 "Bebas Neue",Impact,sans-serif; }
.strain-switcher a { color:rgb(241 229 202/.65); }
.strain-switcher a[aria-current="page"],.strain-switcher a:hover,.strain-switcher a:focus-visible { color:var(--orange); }

@media(max-width:760px) {
  .strain-header p span { display:none; }
  .strain-header b { width:42px; height:42px; }
  .strain-profile { grid-template-columns:1fr; gap:42px; margin-top:50px; }
  .strain-profile__visual { width:min(82%,430px); margin:auto; }
  .strain-profile__back { margin-bottom:28px; }
  .strain-profile h1 { font-size:clamp(82px,25vw,118px); }
}
@media(max-width:430px) { .strain-facts { grid-template-columns:1fr; } .strain-facts div:nth-child(odd) { border-right:0; } .strain-facts div:nth-child(even) { padding-left:0; } }
@media(hover:hover) and (prefers-reduced-motion:no-preference) { .strain-profile__visual { animation:strain-card-in .75s cubic-bezier(.16,1,.3,1) both; } .strain-profile__content { animation:strain-copy-in .7s .12s cubic-bezier(.16,1,.3,1) both; } .strain-profile__cta { transition:transform .2s ease,box-shadow .2s ease; } .strain-profile__cta:hover { transform:translateY(-3px); box-shadow:8px 9px 0 rgb(0 0 0/.18); } @keyframes strain-card-in { from { opacity:0; transform:translateY(28px) rotate(-1deg); } } @keyframes strain-copy-in { from { opacity:0; transform:translateX(24px); } } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; } }