@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --indigo:#211951; --indigo-dk:#1a1445; --purple:#836FFF; --mint:#15F5BA;
  --lav:#F0F3FF; --lav-dim:#e0e3ef;
  --maroon:#211951; --rust:#836FFF; --bone:#F0F3FF; --paper:#F7F8FF;
  --parchment:#e6e9f7; --char:#1a1445; --mid:#5a5580; --fat:#c9cbe6;
  --verified:#0f9e8a; --note:#6f5fd6;
}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{font-family:'Sora',sans-serif;background:var(--lav);color:var(--char);line-height:1.5}
button{font:inherit;cursor:pointer}
:focus-visible{outline:2.5px solid var(--rust);outline-offset:2px}

/* ===== HEADER ===== */
header{background:linear-gradient(135deg,#000000 0%,var(--indigo-dk) 50%,var(--indigo) 100%);padding:1.9rem 1.2rem 1.6rem;text-align:center;border-bottom:1px solid var(--purple)}
.eyebrow{font-family:'Sora',sans-serif;font-size:.58rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--mint);margin-bottom:.5rem}
h1{font-family:'Sora',sans-serif;font-size:clamp(1.7rem,5vw,2.9rem);font-weight:800;color:#fff;line-height:1.08;letter-spacing:-.01em}
h1 em{font-style:normal;font-weight:800;background:linear-gradient(135deg,var(--purple),var(--mint));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
header p{margin-top:.45rem;font-size:.8rem;color:var(--lav);font-weight:300;opacity:.85}

main{max-width:960px;margin:0 auto;padding:1.2rem .9rem 3rem}

/* ===== PANEL base ===== */
.panel{background:white;border:1px solid var(--parchment);border-radius:3px;margin-bottom:1rem;overflow:hidden}
.panel-head{width:100%;padding:.85rem 1rem;display:flex;justify-content:space-between;align-items:center;background:var(--paper);border:none;text-align:left}
.panel-head:hover{background:var(--lav-dim)}
.panel-title{font-family:'Sora',sans-serif;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--maroon);font-weight:500}
.panel-caret{font-size:.65rem;color:var(--mid);transition:transform .2s}
.panel.open .panel-caret{transform:rotate(180deg)}
.panel-body{display:none;padding:1rem}
.panel.open .panel-body{display:block}

/* ===== COW DIAGRAM ===== */
.cow-wrap{max-width:640px;margin:0 auto}
.cow-wrap img{width:100%;display:block}
.legend{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.8rem;justify-content:center}
.legend-btn{display:flex;align-items:center;gap:.45rem;font-family:'Sora',sans-serif;font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;padding:.42rem .7rem;border-radius:3px;border:2px solid transparent;background:var(--paper);color:var(--mid);transition:all .15s;box-shadow:0 1px 2px rgba(0,0,0,.07)}
.legend-btn:hover{transform:translateY(-1px);box-shadow:0 2px 6px rgba(0,0,0,.13);color:var(--char)}
.legend-btn.active{border-color:var(--char);color:var(--char);background:white}
.legend-swatch{width:13px;height:13px;border-radius:3px;flex-shrink:0}
.cow-wrap svg{width:100%;height:auto;display:block}
.map-zone{fill:transparent;stroke:transparent;stroke-width:3;cursor:pointer;transition:fill .15s,stroke .15s}
.map-zone:hover{fill:rgba(131,111,255,.16);stroke:rgba(131,111,255,.6)}
.map-zone.selected{fill:rgba(33,25,81,.20);stroke:var(--purple);stroke-width:4}
.map-zone:focus-visible{stroke:var(--rust);stroke-width:4;outline:none}

/* ===== COUNTRY PICKER ===== */
.country-picker{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin-bottom:.8rem}
.picker-label{font-family:'Sora',sans-serif;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mid);margin-right:.2rem}
.country-btn{font-size:.75rem;padding:.32rem .6rem;border-radius:20px;border:1.5px solid var(--fat);background:white;color:var(--mid);transition:all .15s;font-weight:500}
.country-btn:hover{border-color:var(--rust)}
.country-btn.on{background:var(--maroon);border-color:var(--maroon);color:white}

/* ===== SEARCH (sticky) ===== */
.controls{position:sticky;top:0;z-index:20;background:var(--lav);padding:.6rem 0;margin-bottom:.4rem}
.search-bar{position:relative}
.search-bar input{width:100%;padding:.68rem .9rem .68rem 2.3rem;background:white;border:1.5px solid var(--fat);border-radius:3px;font:inherit;font-size:.88rem;color:var(--char);outline:none;transition:border-color .2s}
.search-bar input:focus{border-color:var(--rust)}
.search-bar::before{content:'\1F50D';position:absolute;left:.7rem;top:50%;transform:translateY(-50%);font-size:.78rem;pointer-events:none}
.active-filter{display:none;margin-top:.45rem;align-items:center;gap:.5rem}
.active-filter.show{display:flex}
.filter-chip{display:inline-flex;align-items:center;gap:.4rem;font-family:'Sora',sans-serif;font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;padding:.3rem .6rem;background:var(--maroon);color:white;border-radius:3px;border:none}
.filter-chip:hover{background:var(--rust)}

.section-label{font-family:'Sora',sans-serif;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mid);margin:.6rem 0 .7rem;padding-bottom:.35rem;border-bottom:1px solid var(--fat)}

/* ===== CUT CARDS ===== */
.cuts-grid{display:grid;gap:.75rem}
.cut-card{background:white;border:1px solid var(--parchment);border-radius:3px;overflow:hidden;transition:border-color .2s,box-shadow .2s}
.cut-card:hover{border-color:var(--rust);box-shadow:0 2px 10px rgba(92,26,26,.09)}
.cut-head{width:100%;padding:.8rem 1rem;display:flex;align-items:center;justify-content:space-between;gap:.6rem;background:none;border:none;text-align:left}
.cut-head-left{display:flex;align-items:center;gap:.6rem;min-width:0}
.cut-avatar{width:44px;height:44px;border-radius:10px;flex-shrink:0;background:var(--indigo);object-fit:cover;box-shadow:0 1px 3px rgba(33,25,81,.2)}
.zone-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.cut-name{font-family:'Sora',sans-serif;font-size:1.08rem;font-weight:700;color:var(--maroon);line-height:1.2}
.cut-sub{font-family:'Sora',sans-serif;font-size:.57rem;color:var(--mid);letter-spacing:.09em;text-transform:uppercase;margin-top:.1rem}
.cut-caret{font-size:.6rem;color:var(--mid);flex-shrink:0;transition:transform .2s}
.cut-card.open .cut-caret{transform:rotate(180deg)}
.cut-head-right{display:flex;align-items:center;gap:.6rem;flex-shrink:0}
.zone-chip{font-family:'Sora',sans-serif;font-size:.55rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#fff;padding:.22rem .55rem;border-radius:4px;white-space:nowrap;text-shadow:0 1px 1px rgba(0,0,0,.18)}
.cut-body{display:none;padding:0 1rem 1rem;border-top:1px solid var(--parchment)}
.cut-card.open .cut-body{display:block}

/* ===== SPEC-SHEET card body (Option B) ===== */
.spec-layout{margin:.9rem 0 .2rem}
.spec-left{min-width:0}
.spec-right{min-width:0}
.spec-table{border:1px solid var(--parchment);border-radius:6px;overflow:hidden;margin-top:.7rem;background:#fff}
.spec-row{display:flex;justify-content:space-between;align-items:center;gap:.6rem;padding:.5rem .7rem;border-bottom:1px solid var(--parchment);font-size:.78rem}
.spec-row:last-child{border-bottom:none}
.spec-row .k{color:var(--mid);font-weight:500;flex-shrink:0}
.spec-row .v{color:var(--indigo);font-weight:700;text-align:right}
.spec-workv{display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.spec-workv small{font-weight:500;color:var(--mid);font-size:.6rem;letter-spacing:.02em}
.spec-meter{display:inline-flex;gap:3px}
.spec-meter .wl-dot{width:8px;height:8px}
.spec-muscle-about{font-size:.72rem;font-style:italic;color:var(--mid);line-height:1.5;margin-top:.55rem}
.spec-muscle-about em{color:var(--purple);font-style:italic;font-weight:600}
.related-cuts{margin:.2rem 0 .9rem}
.related-cuts .muscle-shared:first-child{border-top:none;padding-top:0;margin-top:0}
.also-sold{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem;margin:.2rem 0 .9rem;padding:.5rem .7rem;background:var(--paper);border:1px solid var(--parchment);border-radius:6px}
.also-sold .as-label{font-family:'Sora',sans-serif;font-size:.54rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--purple);flex-shrink:0}
.also-sold .as-items{font-size:.78rem;color:var(--char);font-weight:500;line-height:1.4}
.presentations{margin:.2rem 0 .9rem;padding:.55rem .7rem;background:var(--paper);border:1px solid var(--parchment);border-radius:6px}
.presentations .pres-label{display:block;font-family:'Sora',sans-serif;font-size:.54rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--purple);margin-bottom:.4rem}
.presentations .pres-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.3rem}
.presentations .pres-list li{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem;font-size:.78rem;line-height:1.4}
.presentations .pres-name{font-weight:700;color:var(--char);flex-shrink:0}
.presentations .pres-how{color:var(--mid)}
.cut-desc{font-size:.83rem;color:var(--mid);line-height:1.6;margin:.9rem 0}
.work-rule{font-size:.8rem;color:var(--mid);line-height:1.6;margin-top:.9rem;padding-top:.8rem;border-top:1px solid var(--parchment)}
.work-rule strong{color:var(--char)}
.work-rule em{font-style:normal;font-weight:600;color:var(--maroon)}
.wl-inline{display:inline-flex;gap:2px;vertical-align:middle;margin:0 .15em}
.wl-inline .wl-dot{width:8px;height:8px}
.model-note{margin-top:.9rem;padding:.7rem .85rem;background:#f7f6ff;border:1px solid #e3ddf7;border-radius:6px;font-size:.78rem;color:var(--mid);line-height:1.55}
.model-note strong{color:var(--indigo)}
.ml-muscle{font-weight:600;color:var(--purple)}
.ml-cut{font-weight:600;color:#0f9e8a}
.muscle-block{margin:.8rem 0;padding:.75rem .85rem;background:linear-gradient(135deg,#f3f1ff,#eef6ff);border:1px solid #ddd6f5;border-radius:6px}
.muscle-head{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;margin-bottom:.35rem}
.muscle-tag{font-family:'Sora',sans-serif;font-size:.54rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--purple);padding:.16rem .45rem;border-radius:20px}
.muscle-name{font-family:'Sora',sans-serif;font-weight:700;font-size:.92rem;color:var(--indigo)}
.muscle-latin{font-style:italic;font-size:.72rem;color:var(--mid)}
.muscle-about{font-size:.78rem;color:var(--mid);line-height:1.5}
.ms-tag{font-family:'Sora',sans-serif;font-size:.52rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.14rem .42rem;border-radius:20px;margin-right:.15rem}
.ms-same{background:#e3f5ee;color:#0f7a5f}
.ms-adj{background:#fdf3e0;color:#9a6a11}
.muscle-link-adj{border-color:#f0dcb0;color:#9a6a11}
.muscle-link-adj:hover{background:#9a6a11;color:#fff}
.muscle-shared{margin-top:.5rem;padding-top:.5rem;border-top:1px dashed #ccc3ee;font-size:.72rem;color:var(--mid);display:flex;flex-wrap:wrap;align-items:center;gap:.3rem}
.muscle-link{font-family:'Sora',sans-serif;font-size:.72rem;font-weight:600;color:var(--purple);background:#fff;border:1px solid #d9d3ff;border-radius:20px;padding:.15rem .55rem;cursor:pointer;transition:all .15s}
.muscle-link:hover{background:var(--purple);color:#fff}
.prep-block{margin:.8rem 0}
.prep-chips{display:grid;grid-template-columns:repeat(2,1fr);gap:.4rem;margin-top:.4rem}
.prep-chip{display:flex;flex-direction:column;gap:.1rem;padding:.45rem .6rem;background:var(--paper);border:1px solid var(--parchment);border-radius:5px}
.prep-k{font-family:'Sora',sans-serif;font-size:.56rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mid)}
.prep-v{font-size:.8rem;font-weight:600;color:var(--indigo)}
@media(min-width:720px){.prep-chips{grid-template-columns:repeat(4,1fr)}}
.cut-note{margin:.7rem 0;padding:.65rem .8rem;background:#f7f6ff;border:1px solid #d9d3ff;border-left:3px solid var(--purple);border-radius:0 4px 4px 0;font-size:.8rem;color:var(--char);line-height:1.55}
.cut-note strong{color:var(--purple)}
.work-level{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin:.9rem 0 .2rem;padding:.5rem .65rem;background:var(--paper);border-radius:3px}
.wl-label{font-family:'Sora',sans-serif;font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mid)}
.wl-dots{display:inline-flex;gap:3px}
.wl-dot{width:9px;height:9px;border-radius:50%;background:var(--fat);border:1px solid rgba(0,0,0,.08)}
.wl-dot.on{background:var(--purple)}
.wl-verdict{font-family:'Sora',sans-serif;font-size:.58rem;letter-spacing:.06em;text-transform:uppercase;color:var(--maroon);font-weight:500;margin-left:auto}
.cut-details{margin:.9rem 0 1rem}
.detail{margin-bottom:.7rem}
.detail:last-child{margin-bottom:0}
.detail-h{display:block;font-family:'Sora',sans-serif;font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--maroon);margin-bottom:.2rem;font-weight:500}
.detail p{font-size:.83rem;color:var(--mid);line-height:1.6}
.names-heading{margin:.2rem 0 .5rem}
.names-heading-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex-wrap:wrap;margin:.2rem 0 .5rem}
.names-heading-row .names-heading{margin:0}
.conf-badge{font-family:'Sora',sans-serif;font-size:.56rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:.22rem .5rem;border-radius:20px;white-space:nowrap}
.conf-high{background:#e3f5ee;color:#0f7a5f}
.conf-medium{background:#fdf3e0;color:#9a6a11}
.conf-mixed{background:#fdeef0;color:#b23a4a}
.detail .nt-note,.detail em{color:var(--note);font-style:italic}

/* names table */
.names-table{width:100%;border-collapse:collapse;font-size:.8rem;margin-bottom:.8rem}
.names-table td{padding:.42rem .5rem;border-bottom:1px solid var(--parchment);vertical-align:top}
.names-table tr:last-child td{border-bottom:none}
.names-table .nt-country{font-family:'Sora',sans-serif;font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mid);white-space:nowrap;width:1%}
.names-table .nt-term{font-weight:600;color:var(--char)}
.nt-note{font-weight:400;font-style:italic;color:var(--note);font-size:.75rem}
.nt-absent{color:var(--fat);font-weight:400}
.names-table tr.nt-primary{background:rgba(131,111,255,.08)}
.names-table tr.nt-primary .nt-country{color:var(--maroon)}
.cut-name .name-fallback{color:var(--mid);font-weight:600}

.cut-tags{display:flex;flex-wrap:wrap;gap:.3rem;margin-bottom:.8rem}
.tag{font-family:'Sora',sans-serif;font-size:.56rem;letter-spacing:.06em;text-transform:uppercase;padding:.2rem .45rem;border-radius:2px;background:var(--parchment);color:var(--mid)}

/* card footer: sources + photo */
.cut-foot{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;padding-top:.7rem;border-top:1px dashed var(--fat)}
.src-links{display:flex;flex-wrap:wrap;gap:.4rem;flex:1;min-width:0}
.src-link{font-family:'Sora',sans-serif;font-size:.58rem;letter-spacing:.04em;color:var(--rust);text-decoration:none;border-bottom:1px dotted var(--rust)}
.src-link:hover{color:var(--maroon)}
.photo-btn{font-family:'Sora',sans-serif;font-size:.58rem;letter-spacing:.06em;text-transform:uppercase;padding:.32rem .6rem;border:1.5px solid var(--fat);background:white;color:var(--mid);border-radius:3px}
.photo-btn:hover{border-color:var(--rust);color:var(--rust)}
.photo-wrap{width:100%;aspect-ratio:16/9;background:var(--parchment);border-radius:3px;overflow:hidden;position:relative;margin-top:.7rem;display:none}
.photo-wrap.show{display:block}
.photo-wrap img{width:100%;height:100%;object-fit:cover}
.photo-status{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Sora',sans-serif;font-size:.6rem;color:var(--mid);letter-spacing:.08em}

/* saved cut photo + attribution */
.cut-photo{margin:.7rem 0 0;border:1px solid var(--parchment);border-radius:6px;overflow:hidden;background:var(--paper)}
.cut-photo img{width:100%;max-height:300px;object-fit:cover;display:block}
.photo-credit{font-family:'Sora',sans-serif;font-size:.58rem;letter-spacing:.02em;color:var(--mid);padding:.4rem .6rem;line-height:1.4}
.photo-credit a{color:var(--rust);text-decoration:none;border-bottom:1px dotted var(--rust)}
.photo-credit a:hover{color:var(--maroon)}

.empty{text-align:center;padding:2.6rem;color:var(--mid);font-family:'Sora',sans-serif;font-style:italic}

/* ===== DIFFERENCES ===== */
.diff-grid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin:.9rem 0}
.diff-card{background:var(--paper);border-radius:3px;padding:.85rem;font-size:.8rem;color:var(--mid);line-height:1.6}
.diff-card strong{color:var(--char)}
.diff-flag{font-size:.86rem;margin-bottom:.4rem;color:var(--char)}
.diff-tldr{font-size:.82rem;color:var(--mid);line-height:1.6;padding:.75rem .85rem;background:#f9f4ee;border-left:3px solid var(--rust);border-radius:2px}
.diff-intro{font-size:.85rem;color:var(--mid);margin-bottom:.5rem;line-height:1.6}

/* ===== METHODOLOGY & SOURCES footer ===== */
.sources-section{margin-top:1.6rem}
.method-note{font-size:.8rem;color:var(--mid);line-height:1.65;margin-bottom:1rem}
.method-note .verified-mark{color:var(--verified);font-weight:600}
.method-note .note-mark{color:var(--note);font-weight:600}
.src-list{list-style:none;display:grid;gap:.45rem}
.src-list li{font-size:.78rem;color:var(--mid);padding-left:1rem;position:relative;line-height:1.5}
.src-list li::before{content:'\2192';position:absolute;left:0;color:var(--rust)}
.src-list a{color:var(--rust);text-decoration:none;border-bottom:1px dotted var(--rust)}
.src-list a:hover{color:var(--maroon)}
.src-cat{font-family:'Sora',sans-serif;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--char);margin:.9rem 0 .4rem;font-weight:500}
.src-cat:first-child{margin-top:0}

footer{text-align:center;padding:1.6rem;font-family:'Sora',sans-serif;font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mid)}

/* ===== DESKTOP ===== */
@media(min-width:720px){
  .cut-body{display:block}          /* cards always open on desktop */
  .cut-caret{display:none}
  .cut-head{cursor:default}
  .spec-layout{display:grid;grid-template-columns:210px 1fr;gap:1.3rem;align-items:start}
  .detail{margin-bottom:.85rem}
  .names-table{display:grid;grid-template-columns:1fr 1fr;column-gap:1.2rem}
  .names-table tbody{display:contents}
  .names-table tr{display:flex;border-bottom:1px solid var(--parchment)}
  .names-table td{border-bottom:none;flex:1}
  .names-table td.nt-country{flex:0 0 84px}
}
@media(max-width:719px){
  .diff-grid{grid-template-columns:1fr}
  .cut-head{cursor:pointer}
  .spec-right{margin-top:.7rem}
}