/* =========================================================
   86'd Me DESIGN KIT  (all classes start with c86)
   Only affects elements using these classes.
   Fonts (Oswald, Archivo) are loaded site-wide in header.php.
   ========================================================= */

/* ---------- COLOR THEMES ----------
   Default (no extra class) = October orange and charcoal.
   Add class "c86classic" to a card for silver and charcoal. */
.c86{--foh-bg:#FF6B1A;--foh-panel:#E85D10;--foh-text:#222428;--foh-accent:#222428;--boh-bg:#222428;--boh-panel:#34373C;--boh-text:#FF6B1A;--boh-accent:#FF6B1A}
.c86.c86classic{--foh-bg:#EDEEF0;--foh-panel:#D6D8DC;--foh-text:#222428;--foh-accent:#C24A08;--boh-bg:#222428;--boh-panel:#3A3D43;--boh-text:#EDEEF0;--boh-accent:#FF6B1A}

/* ---------- CARD BASE ---------- */
.c86{max-width:560px;margin:40px auto;position:relative;font-family:Archivo,"Helvetica Neue",Arial,sans-serif;--c:var(--foh-bg);--c2:var(--foh-panel);--t:var(--foh-text);--a:var(--foh-accent);color:var(--t)}
.c86:has(.c86sw[open]){--c:var(--boh-bg);--c2:var(--boh-panel);--t:var(--boh-text);--a:var(--boh-accent)}
.c86 *,.c86 *::before,.c86 *::after{box-sizing:border-box}
.c86 br{display:none}

/* ---------- FOH / BOH SHOW AND HIDE ---------- */
.c86 .c86boh{display:none!important}
.c86:has(.c86sw[open]) .c86boh{display:block!important}
.c86:has(.c86sw[open]) .c86foh{display:none!important}

/* ---------- PHOTO AND RANK ---------- */
.c86 .c86photo{position:relative;background:#5B6068;border-radius:14px 14px 0 0}
.c86 .c86photo img{display:block;width:100%!important;max-width:100%!important;height:auto!important;aspect-ratio:3/2;object-fit:cover;border-radius:14px 14px 0 0;margin:0!important;padding:0!important;border:0!important}
.c86 .c86photo::after{content:"";position:absolute;inset:0;border-radius:14px 14px 0 0;background:radial-gradient(ellipse at 0% 0%,rgba(0,0,0,.55),transparent 55%);pointer-events:none}
.c86 .c86rank{position:absolute;z-index:1;top:6px;left:18px;font-family:Oswald,Impact,sans-serif;font-weight:700;font-size:clamp(72px,18vw,112px);line-height:1;color:#FF6B1A;text-shadow:0 2px 12px rgba(0,0,0,.35)}

/* ---------- THE SWITCH ---------- */
.c86 details.c86sw{position:absolute;z-index:3;left:16px;right:16px;bottom:-26px;margin:0!important;padding:0!important;border:0!important}
.c86 .c86sw summary{position:relative;display:block!important;font-size:0;white-space:nowrap;list-style:none!important;cursor:pointer;background:var(--c2);border:3px solid var(--a);border-radius:999px;padding:4px!important;margin:0!important;box-shadow:0 6px 18px rgba(0,0,0,.25);transition:background .35s,border-color .35s;user-select:none;-webkit-tap-highlight-color:transparent}
.c86 .c86sw summary::-webkit-details-marker{display:none}
.c86 .c86sw summary::marker{content:""}
.c86 .c86sw summary::before{content:"";position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);background:var(--a);border-radius:999px;transition:transform .3s ease,background .35s}
.c86 .c86sw[open] summary::before{transform:translateX(100%)}
.c86 .c86sw summary span{position:relative;z-index:1;display:inline-block;width:50%;vertical-align:top;white-space:normal;text-align:center;font-family:Oswald,Impact,sans-serif;font-weight:500;font-size:15px;letter-spacing:.06em;padding:12px 4px;color:var(--t);transition:color .3s}
.c86 .c86sw:not([open]) .c86lf,.c86 .c86sw[open] .c86lb{color:var(--c)}
.c86 .c86sw summary:focus-visible{outline:3px solid #2F6FEB;outline-offset:3px}

/* ---------- PANEL ---------- */
.c86 .c86panel{background:var(--c);padding:48px 20px 24px;transition:background .35s,color .35s}
.c86 .c86role{font-family:Oswald,Impact,sans-serif;font-weight:500;font-size:14px;letter-spacing:.08em;color:var(--a)}
.c86 .c86city{font-family:Oswald,Impact,sans-serif!important;font-weight:700!important;font-size:clamp(34px,8vw,46px)!important;line-height:1.05!important;margin:2px 0 16px!important;padding:0!important;color:var(--t)!important;text-transform:none!important;letter-spacing:0!important;border:0!important;background:none!important}

/* ---------- STATS ---------- */
.c86 .c86stats{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0}
.c86 .c86stat{background:var(--c2);padding:10px 10px 9px}
.c86 .c86k{font-size:12px;font-weight:600;opacity:.85;margin:0}
.c86 .c86v{font-family:Oswald,Impact,sans-serif;font-weight:700;font-size:28px;line-height:1.1;margin:3px 0 0}
.c86 .c86v small{font-size:13px;font-weight:500;opacity:.8}
.c86 .c86wide{grid-column:1/-1}
.c86 .c86wide .c86v{font-family:Archivo,Arial,sans-serif;font-weight:600;font-size:15px;line-height:1.35}

/* ---------- ICONS ----------
   Use: <span class="c86ic c86leaf">Weed legal</span>
   Options: c86leaf, c86noleaf, c86cart, c86nocart. Add c86tbd to fade. */
.c86 .c86icons{display:flex;gap:8px;margin:14px 0 20px}
.c86 .c86ic{flex:1;display:flex;align-items:center;gap:8px;background:var(--c2);padding:8px 10px;font-size:13px;font-weight:600;line-height:1.2}
.c86 .c86ic::before{content:"";flex:none;width:26px;height:26px;background:var(--a);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center}
.c86 .c86ic.c86tbd{opacity:.5}
.c86 .c86leaf::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='black'%3E%3Cellipse cx='12' cy='8.5' rx='1.6' ry='6.5'/%3E%3Cg transform='rotate(32 12 15)'%3E%3Cellipse cx='12' cy='9.6' rx='1.5' ry='5.4'/%3E%3C/g%3E%3Cg transform='rotate(-32 12 15)'%3E%3Cellipse cx='12' cy='9.6' rx='1.5' ry='5.4'/%3E%3C/g%3E%3Cg transform='rotate(64 12 15)'%3E%3Cellipse cx='12' cy='10.8' rx='1.3' ry='4.2'/%3E%3C/g%3E%3Cg transform='rotate(-64 12 15)'%3E%3Cellipse cx='12' cy='10.8' rx='1.3' ry='4.2'/%3E%3C/g%3E%3Cg transform='rotate(96 12 15)'%3E%3Cellipse cx='12' cy='12.3' rx='1' ry='2.7'/%3E%3C/g%3E%3Cg transform='rotate(-96 12 15)'%3E%3Cellipse cx='12' cy='12.3' rx='1' ry='2.7'/%3E%3C/g%3E%3Crect x='11.4' y='15' width='1.2' height='7' rx='.6'/%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='black'%3E%3Cellipse cx='12' cy='8.5' rx='1.6' ry='6.5'/%3E%3Cg transform='rotate(32 12 15)'%3E%3Cellipse cx='12' cy='9.6' rx='1.5' ry='5.4'/%3E%3C/g%3E%3Cg transform='rotate(-32 12 15)'%3E%3Cellipse cx='12' cy='9.6' rx='1.5' ry='5.4'/%3E%3C/g%3E%3Cg transform='rotate(64 12 15)'%3E%3Cellipse cx='12' cy='10.8' rx='1.3' ry='4.2'/%3E%3C/g%3E%3Cg transform='rotate(-64 12 15)'%3E%3Cellipse cx='12' cy='10.8' rx='1.3' ry='4.2'/%3E%3C/g%3E%3Cg transform='rotate(96 12 15)'%3E%3Cellipse cx='12' cy='12.3' rx='1' ry='2.7'/%3E%3C/g%3E%3Cg transform='rotate(-96 12 15)'%3E%3Cellipse cx='12' cy='12.3' rx='1' ry='2.7'/%3E%3C/g%3E%3Crect x='11.4' y='15' width='1.2' height='7' rx='.6'/%3E%3C/g%3E%3C/svg%3E")}
.c86 .c86noleaf::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg transform='translate(12 12) scale(.72) translate(-12 -12)'%3E%3Cg fill='black'%3E%3Cellipse cx='12' cy='8.5' rx='1.6' ry='6.5'/%3E%3Cg transform='rotate(32 12 15)'%3E%3Cellipse cx='12' cy='9.6' rx='1.5' ry='5.4'/%3E%3C/g%3E%3Cg transform='rotate(-32 12 15)'%3E%3Cellipse cx='12' cy='9.6' rx='1.5' ry='5.4'/%3E%3C/g%3E%3Cg transform='rotate(64 12 15)'%3E%3Cellipse cx='12' cy='10.8' rx='1.3' ry='4.2'/%3E%3C/g%3E%3Cg transform='rotate(-64 12 15)'%3E%3Cellipse cx='12' cy='10.8' rx='1.3' ry='4.2'/%3E%3C/g%3E%3Cg transform='rotate(96 12 15)'%3E%3Cellipse cx='12' cy='12.3' rx='1' ry='2.7'/%3E%3C/g%3E%3Cg transform='rotate(-96 12 15)'%3E%3Cellipse cx='12' cy='12.3' rx='1' ry='2.7'/%3E%3C/g%3E%3Crect x='11.4' y='15' width='1.2' height='7' rx='.6'/%3E%3C/g%3E%3C/g%3E%3Ccircle cx='12' cy='12' r='10.8' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cline x1='4.4' y1='4.4' x2='19.6' y2='19.6' stroke='black' stroke-width='2'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg transform='translate(12 12) scale(.72) translate(-12 -12)'%3E%3Cg fill='black'%3E%3Cellipse cx='12' cy='8.5' rx='1.6' ry='6.5'/%3E%3Cg transform='rotate(32 12 15)'%3E%3Cellipse cx='12' cy='9.6' rx='1.5' ry='5.4'/%3E%3C/g%3E%3Cg transform='rotate(-32 12 15)'%3E%3Cellipse cx='12' cy='9.6' rx='1.5' ry='5.4'/%3E%3C/g%3E%3Cg transform='rotate(64 12 15)'%3E%3Cellipse cx='12' cy='10.8' rx='1.3' ry='4.2'/%3E%3C/g%3E%3Cg transform='rotate(-64 12 15)'%3E%3Cellipse cx='12' cy='10.8' rx='1.3' ry='4.2'/%3E%3C/g%3E%3Cg transform='rotate(96 12 15)'%3E%3Cellipse cx='12' cy='12.3' rx='1' ry='2.7'/%3E%3C/g%3E%3Cg transform='rotate(-96 12 15)'%3E%3Cellipse cx='12' cy='12.3' rx='1' ry='2.7'/%3E%3C/g%3E%3Crect x='11.4' y='15' width='1.2' height='7' rx='.6'/%3E%3C/g%3E%3C/g%3E%3Ccircle cx='12' cy='12' r='10.8' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cline x1='4.4' y1='4.4' x2='19.6' y2='19.6' stroke='black' stroke-width='2'/%3E%3C/svg%3E")}
.c86 .c86cart::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 5h3l2.2 10h10.3l2-7H6'/%3E%3Ccircle cx='9' cy='19.5' r='1.4'/%3E%3Ccircle cx='16' cy='19.5' r='1.4'/%3E%3C/g%3E%3Cpath fill='black' d='M19.5 1a3.2 3.2 0 1 0 3.5 4.6A2.6 2.6 0 0 1 19.5 1z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 5h3l2.2 10h10.3l2-7H6'/%3E%3Ccircle cx='9' cy='19.5' r='1.4'/%3E%3Ccircle cx='16' cy='19.5' r='1.4'/%3E%3C/g%3E%3Cpath fill='black' d='M19.5 1a3.2 3.2 0 1 0 3.5 4.6A2.6 2.6 0 0 1 19.5 1z'/%3E%3C/svg%3E")}
.c86 .c86nocart::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg transform='translate(12 12) scale(.72) translate(-12 -12)'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 5h3l2.2 10h10.3l2-7H6'/%3E%3Ccircle cx='9' cy='19.5' r='1.4'/%3E%3Ccircle cx='16' cy='19.5' r='1.4'/%3E%3C/g%3E%3Cpath fill='black' d='M19.5 1a3.2 3.2 0 1 0 3.5 4.6A2.6 2.6 0 0 1 19.5 1z'/%3E%3C/g%3E%3Ccircle cx='12' cy='12' r='10.8' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cline x1='4.4' y1='4.4' x2='19.6' y2='19.6' stroke='black' stroke-width='2'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg transform='translate(12 12) scale(.72) translate(-12 -12)'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 5h3l2.2 10h10.3l2-7H6'/%3E%3Ccircle cx='9' cy='19.5' r='1.4'/%3E%3Ccircle cx='16' cy='19.5' r='1.4'/%3E%3C/g%3E%3Cpath fill='black' d='M19.5 1a3.2 3.2 0 1 0 3.5 4.6A2.6 2.6 0 0 1 19.5 1z'/%3E%3C/g%3E%3Ccircle cx='12' cy='12' r='10.8' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cline x1='4.4' y1='4.4' x2='19.6' y2='19.6' stroke='black' stroke-width='2'/%3E%3C/svg%3E")}

/* ---------- STORY TEXT AND LINKS ---------- */
.c86 .c86copy p{font-size:16px!important;line-height:1.6!important;margin:0 0 14px!important;color:var(--t)!important}
.c86 .c86copy a{color:var(--t)!important;font-weight:600;text-decoration:underline!important;text-underline-offset:3px}
.c86 .c86more{display:inline-block;margin-top:6px;font-family:Oswald,Impact,sans-serif;font-weight:500;font-size:14px;letter-spacing:.06em;color:var(--t)!important;text-decoration:underline!important;text-underline-offset:3px}

/* ---------- TORN EDGE ---------- */
.c86 .c86zb{height:14px;margin-top:-1px;background:linear-gradient(135deg,var(--c) 50%,transparent 50%) 0 0/14px 14px repeat-x,linear-gradient(225deg,var(--c) 50%,transparent 50%) 0 0/14px 14px repeat-x}

/* ---------- PHONES ---------- */
@media (max-width:420px){.c86 .c86sw summary span{font-size:13px;letter-spacing:.03em}.c86 .c86icons{flex-direction:column;gap:6px}}
@media (prefers-reduced-motion:reduce){.c86 *,.c86 *::before{transition:none!important}}