/* BigJoe species guide v3 (2026-10-06): clean, readable field-guide layout */
.sp3{--n:#052c39;--o:#006d77;--l:#e0f18a;--line:#d5e4e4;--mut:#4a6670;--pap:#f3f8f8;background:var(--pap);color:var(--n);font-family:Arial,Helvetica,sans-serif;padding-bottom:40px}
.sp3 *{box-sizing:border-box}
.sp3 a{color:var(--o)}
/* hero */
.sp3-hero{position:relative;background:radial-gradient(120% 140% at 85% 10%,#0b5d68 0%,#073d4b 45%,#052c39 100%);color:#fff;border-bottom:6px solid var(--o);overflow:hidden}
.sp3-hero:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:70px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 70' preserveAspectRatio='none'%3E%3Cpath d='M0 40 C150 10 300 70 450 40 S750 10 900 40 S1100 60 1200 35 V70 H0Z' fill='%23ffffff' fill-opacity='.05'/%3E%3C/svg%3E") bottom/100% 100% no-repeat;pointer-events:none}
.sp3-hero-in{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:34px clamp(16px,4vw,40px) 44px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:36px;align-items:center}
.sp3-back{display:inline-block;color:#bfe3e6!important;text-decoration:none;font-weight:700;font-size:14px;margin-bottom:14px}
.sp3-back:hover{color:#fff!important}
.sp3-eyebrow{margin:0 0 6px;color:var(--l);font-weight:900;font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.sp3 h1{margin:0;font:900 clamp(38px,5.6vw,64px)/1.02 Arial,Helvetica,sans-serif;color:#fff;letter-spacing:-.01em}
.sp3-alt{margin:12px 0 2px;font:400 20px/1.3 Georgia,serif;color:#e6f2f3}
.sp3-sci{margin:0;color:#a9cdd2;font:italic 17px Georgia,serif}
.sp3-chips{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0}
.sp3-chip{padding:6px 13px;border-radius:999px;border:1px solid rgba(255,255,255,.35);font-size:13px;font-weight:700;color:#fff;background:rgba(255,255,255,.06)}
.sp3-chip--good{background:var(--l);border-color:var(--l);color:var(--n)}
.sp3-chip--bad{background:#ffb4a2;border-color:#ffb4a2;color:#5a1300}
.sp3-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.sp3-btn{display:inline-block;padding:12px 18px;border-radius:6px;font-weight:900;font-size:15px;text-decoration:none}
.sp3-btn--lime{background:var(--l);color:var(--n)!important}
.sp3-btn--lime:hover{background:#eef7b6}
.sp3-btn--ghost{border:2px solid rgba(255,255,255,.75);color:#fff!important}
.sp3-btn--ghost:hover{background:rgba(255,255,255,.1)}
.sp3-photo figure{margin:0!important;border-radius:14px;overflow:hidden;border:4px solid rgba(224,241,138,.85);box-shadow:0 18px 40px rgba(0,0,0,.35);background:#0a4553;aspect-ratio:4/3}
.sp3-photo figure img{display:block;width:100%!important;height:100%!important;object-fit:contain!important;max-height:none!important;border-radius:0!important}
.sp3-photo figure figcaption{display:none}
/* body */
.sp3-wrap{max-width:1180px;margin:0 auto;padding:0 clamp(16px,4vw,40px)}
.sp3-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.sp3-glance{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:-28px 0 0;position:relative;z-index:2}
.sp3-tile{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:10px;padding:16px;box-shadow:0 8px 22px rgba(5,44,57,.08)}
.sp3-tico{flex:0 0 42px;height:42px;border-radius:10px;background:var(--n);color:var(--l);display:grid;place-items:center}
.sp3-tico svg{width:22px;height:22px}
.sp3-tlab{display:block;font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--o);margin:2px 0 4px}
.sp3-tile p{margin:0;font-size:15px;line-height:1.4;color:var(--n)}
.sp3-nav{position:sticky;top:0;z-index:20;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:26px 0 6px;padding:10px 0;background:var(--pap)}
.sp3-nav a{display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 8px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--n)!important;text-decoration:none;font-weight:700;font-size:14.5px}
.sp3-nav a b{width:24px;height:24px;border-radius:50%;background:var(--n);color:var(--l);display:grid;place-items:center;font-size:12px}
.sp3-nav a:hover{border-color:var(--o);background:#eaf5f5}
.sp3-sec{padding-top:30px;scroll-margin-top:60px}
.sp3-sh{display:flex;align-items:center;gap:14px;margin:0 0 14px}
.sp3-num{flex:0 0 46px;height:46px;border-radius:50%;background:var(--n);color:#fff;border:3px solid var(--l);display:grid;place-items:center;font:900 19px Arial,sans-serif}
.sp3-sh h2{margin:0;font:900 clamp(24px,2.8vw,30px)/1.1 Arial,Helvetica,sans-serif;color:var(--n)}
.sp3-sh p{margin:3px 0 0;color:var(--mut);font-size:16px}
.sp3-card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:6px 24px;margin:0 0 16px;box-shadow:0 4px 16px rgba(5,44,57,.05)}
.sp3-rows{margin:0}
.sp3-row{display:grid;grid-template-columns:220px minmax(0,1fr);gap:20px;padding:16px 0;border-top:1px solid #e6efef}
.sp3-row:first-child{border-top:0}
.sp3-row dt{font:700 18px/1.3 Georgia,serif;color:var(--n)}
.sp3-row dd{margin:0;font-size:16.5px;line-height:1.6;color:#173b46}
.sp3-row dd p{margin:0 0 8px}.sp3-row dd p:last-child{margin:0}
.sp3-row dd ul,.sp3-row dd ol{margin:4px 0;padding-left:20px}
.sp3-ct{margin:16px 0 4px;font:700 20px Georgia,serif;color:var(--n)}
.sp3-ctsub{margin:0 0 12px;color:var(--mut);font-size:15px}
/* steps */
.sp3-stepcard{padding:6px 24px 18px}
.sp3-steps{list-style:none;margin:10px 0 0;padding:0;counter-reset:s;display:grid;gap:4px}
.sp3-steps li{counter-increment:s;position:relative;padding:12px 0 12px 58px;font-size:16.5px;line-height:1.6;color:#173b46;min-height:52px}
.sp3-steps li:before{content:counter(s);position:absolute;left:0;top:10px;width:38px;height:38px;border-radius:50%;background:var(--l);color:var(--n);display:grid;place-items:center;font:900 17px Arial,sans-serif;border:2px solid var(--n)}
.sp3-steps li:not(:last-child):after{content:"";position:absolute;left:19px;top:50px;bottom:-12px;width:2px;background:#cfe0e0}
/* shop */
.sp3-shop{background:#fff;border:1px solid var(--line);border-top:5px solid #ff9900;border-radius:10px;padding:20px 24px;margin:0 0 16px}
.sp3-shop-h h3{margin:0;font:700 21px Georgia,serif;color:var(--n)}
.sp3-shop-h p{margin:4px 0 14px;color:var(--mut)}
.sp3-shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.sp3-item{display:flex;flex-direction:column;gap:4px;padding:14px;border:1px solid var(--line);border-radius:8px;background:#fffdf6;text-decoration:none;color:var(--n)!important;transition:transform .15s,box-shadow .15s}
.sp3-item:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(5,44,57,.12);border-color:#ffb84d}
.sp3-item small{font-size:11.5px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#9a5200}
.sp3-item strong{font-size:15.5px;line-height:1.3}
.sp3-item span{margin-top:auto;padding-top:6px;font-size:13.5px;font-weight:700;color:var(--o)}
.sp3-more{display:inline-block;margin-top:14px;font-weight:900}
.sp3-note{margin:8px 0 0;font-size:13px;color:var(--mut)}
/* areas */
.sp3-areas{padding:6px 24px 20px}
.sp3-pills{display:flex;flex-wrap:wrap;gap:8px}
.sp3-pills a{padding:8px 14px;border-radius:999px;background:#eaf3f3;border:1px solid var(--line);color:var(--n)!important;text-decoration:none;font-weight:700;font-size:14.5px}
.sp3-pills a:hover{background:var(--n);color:#fff!important}
/* recipes & cleaning extras */
.sp3 .irl{background:#fff;border-color:var(--line);border-radius:10px;padding:20px 24px;margin:0 0 16px}
.sp3 .irl h3,.sp3 .clean-cut-panel h3,.sp3 .species-recipe-panel h3,.sp3 .sushi-panel h3{font:700 21px Georgia,serif;color:var(--n);margin:0 0 4px}
.sp3 .clean-cut-panel,.sp3 .species-recipe-panel,.sp3 .sushi-panel{background:#fff;border:1px solid var(--line);border-radius:10px;padding:20px 24px;margin:0 0 16px;font-size:16px;line-height:1.55;color:#173b46}
.sp3 .clean-cut-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:24px;margin:12px 0}
.sp3 .clean-cut-grid h4{margin:0 0 6px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--o)}
.sp3 .clean-cut-grid ul,.sp3 .clean-cut-grid ol{margin:0;padding-left:20px}
.sp3 .clean-cut-grid li{margin:0 0 6px}
.sp3 .clean-cut-panel em{color:var(--mut);font-size:14px}
.sp3 .recipe-choice-subtitle{margin:0 0 14px;color:var(--mut)}
.sp3 .recipe-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.sp3 .recipe-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:8px;overflow:hidden;text-decoration:none;color:var(--n)!important;background:#fff;transition:transform .15s,box-shadow .15s}
.sp3 .recipe-card:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(5,44,57,.12)}
.sp3 .recipe-card-visual{display:block;padding:14px;background:linear-gradient(135deg,#052c39,#0b5d68);color:#fff}
.sp3 .recipe-card-visual span{display:block;font-size:10.5px;letter-spacing:.14em;color:var(--l);font-weight:900}
.sp3 .recipe-card-visual strong{display:block;font:700 20px Georgia,serif;margin-top:2px}
.sp3 .recipe-card-copy{display:flex;flex-direction:column;gap:4px;padding:12px 14px;flex:1}
.sp3 .recipe-card-copy strong{font-size:15px;line-height:1.3}
.sp3 .recipe-card-copy small{color:var(--mut);font-size:13px}
.sp3 .recipe-side-preview{font-size:13px;color:#2d5260}
.sp3 .recipe-card-copy b{margin-top:auto;padding-top:6px;color:var(--o);font-size:14px}
.sp3 .sushi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:10px}
.sp3 .sushi-option{border:1px solid var(--line);border-radius:8px;padding:14px;background:#f7fbfb}
.sp3 .sushi-option small{font-size:11px;font-weight:900;letter-spacing:.1em;color:var(--o)}
.sp3 .raw-option{background:#fff7f2;border-color:#f3d2bd}.sp3 .raw-option small{color:#b04a00}
.sp3 .sushi-option strong{display:block;margin:4px 0;font-size:15.5px}
.sp3 .sushi-option p{margin:0;font-size:14.5px;line-height:1.5}
/* sources */
.sp3 .sp2-sources{margin:30px 0 0;background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px 22px}
.sp3 .sp2-sources summary{cursor:pointer;font-weight:900;color:var(--n)}
.sp3 .guide-sources h2{font-size:18px;margin:14px 0 6px}
.sp3 .guide-sources{font-size:14px;line-height:1.55;color:#2d5260}
/* responsive */
@media (max-width:900px){
 .sp3-hero-in{grid-template-columns:1fr;gap:22px;padding-bottom:50px}

 .sp3-glance{grid-template-columns:repeat(2,minmax(0,1fr))}
 .sp3-row{grid-template-columns:1fr;gap:4px}
 .sp3 .clean-cut-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
 .sp3-glance{grid-template-columns:1fr}
 .sp3-card,.sp3-shop,.sp3 .irl,.sp3 .clean-cut-panel,.sp3 .species-recipe-panel,.sp3 .sushi-panel{padding-left:16px;padding-right:16px}
 .sp3-nav{gap:6px}.sp3-nav a{font-size:13px;padding:6px 10px 6px 6px}
 .sp3-row dd,.sp3-steps li{font-size:16px}
}
.sp3-tile p{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}