/* ===========================================================
   minnesotavikings.io — /team/uniforms/
   "Illustrated uniform field guide" — dark museum ground with
   illuminated display cases. All classes prefixed .ug-
   Sibling of /team/logo-colors/ (which owns .ps-). Nothing shared.
   Every illustration on this page is CSS/SVG drawing. No photographs.
   =========================================================== */

/* ---------- self-hosted expanded face for annotation numerals ---------- */
@font-face{
  font-family:"Archivo Expanded UG";
  src:url("/assets/fonts/archivo-expanded-600.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Archivo Expanded UG";
  src:url("/assets/fonts/archivo-expanded-700.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Archivo Expanded UG";
  src:url("/assets/fonts/archivo-expanded-900.woff2") format("woff2");
  font-weight:900;font-style:normal;font-display:swap;
}

/* ---------- tokens ---------- */
.page-fieldguide{
  /* museum ground */
  --ug-void:#0a0910;
  --ug-ground:#12111c;
  --ug-ground-2:#191727;
  --ug-case:#201d31;
  --ug-case-2:#282444;
  --ug-line:#3d3757;
  --ug-line-2:#544c76;

  /* text on the dark ground — all measured against --ug-ground */
  --ug-text:#eeecf6;        /* 15.6:1 */
  --ug-text-2:#c9c5dc;      /* 11.0:1 */
  --ug-text-3:#a8a2c2;      /*  7.4:1 */

  /* brand values are published on /team/logo-colors/ — used here as fills */
  --ug-purple:#4f2683;
  --ug-purple-deep:#3b1c63;
  --ug-purple-ink:#2a1450;
  --ug-purple-lift:#6a3cab;
  --ug-purple-text:#cdb0f5;  /* the light tint used when purple must be TEXT */
  --ug-gold:#ffc62f;
  --ug-gold-deep:#d9a825;
  --ug-gold-text:#ffd15c;
  --ug-steel:#9aa0aa;        /* metallic grey — fills and strokes only */
  --ug-steel-text:#cfd5de;   /* the light tint used when grey must be TEXT */

  /* selection accents. Re-declared per uniform on .ug-stage below. */
  --ug-a-fill:var(--ug-purple);
  --ug-a-edge:#7a4fc0;
  --ug-a-text:var(--ug-purple-text);
  --ug-a-glow:rgba(124,79,196,.34);

  --ug-head:58px;            /* the site header is sticky at 58px */
  --ug-radius:4px;
  --ug-num:"Archivo Expanded UG","Archivo Expanded",var(--display);
  --ug-shadow:0 1px 0 rgba(255,255,255,.05), 0 24px 46px -26px rgba(0,0,0,.9);

  background:var(--ug-void);
  color:var(--ug-text);
}

/* ---------- section furniture ---------- */
.ug-sec{background:var(--ug-ground);border-top:1px solid var(--ug-line)}
.ug-sec .wrap{padding-top:52px;padding-bottom:52px}
.ug-sec-alt{background:var(--ug-ground-2)}
.ug-sec-void{background:var(--ug-void)}

.ug-kicker{
  display:block;font-family:var(--display);font-weight:600;font-size:11.5px;
  letter-spacing:.19em;text-transform:uppercase;color:var(--ug-gold-text);
  margin-bottom:12px;
}
.ug-sec h2{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(23px,3vw,34px);line-height:1.08;letter-spacing:.012em;
  color:var(--ug-text);margin-bottom:14px;
}
.ug-sec h3{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(16px,1.7vw,20px);line-height:1.18;letter-spacing:.05em;
  color:var(--ug-text);margin:26px 0 10px;
}
.ug-sec h4{
  font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ug-text);margin:0 0 6px;
}
.ug-lede{font-size:clamp(16px,1.5vw,19px);line-height:1.6;color:var(--ug-text-2);max-width:70ch;margin-bottom:14px}
.ug-p{font-size:15.5px;line-height:1.68;color:var(--ug-text-2);max-width:74ch;margin-bottom:13px}
.ug-p:last-child{margin-bottom:0}
.ug-small{font-size:13.5px;line-height:1.6;color:var(--ug-text-3);max-width:74ch}

.ug-list{margin:0 0 14px;padding:0;list-style:none}
.ug-list li{
  position:relative;padding-left:22px;margin-bottom:9px;
  font-size:15.5px;line-height:1.6;color:var(--ug-text-2);max-width:74ch;
}
.ug-list li::before{
  content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;
  background:var(--ug-a-fill);border:1px solid var(--ug-a-edge);
}

.ug-rule{display:block;height:1px;border:0;margin:26px 0;background:var(--ug-line)}

/* external / internal link chips */
.ug-src{
  display:inline-flex;align-items:center;gap:9px;min-height:44px;
  padding:10px 15px;border:1px solid var(--ug-line-2);background:var(--ug-case);
  color:var(--ug-gold-text);font-family:var(--display);font-weight:600;
  font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;
  border-radius:var(--ug-radius);transition:background var(--t),border-color var(--t);
}
.ug-src:hover{background:var(--ug-case-2);border-color:var(--ug-gold-deep)}
.ug-src-i{width:15px;height:15px;flex:none}

/* ---------- breadcrumbs ---------- */
.ug-crumbs{background:var(--ug-purple-ink);border-bottom:1px solid var(--ug-line)}
.ug-crumbs .wrap{padding-top:11px;padding-bottom:11px}
.ug-crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin:0;padding:0;list-style:none}
.ug-crumbs li{
  display:flex;align-items:center;gap:9px;min-width:0;
  font-family:var(--display);font-weight:600;font-size:11.5px;
  letter-spacing:.13em;text-transform:uppercase;color:#cfc4e6;
}
.ug-crumbs li+li::before{content:"/";color:#7f6ba6}
.ug-crumbs a{color:var(--ug-gold-text);text-decoration:underline;text-underline-offset:3px}
.ug-crumbs a:hover{color:#fff}
.ug-crumbs [aria-current="page"]{color:#fff}

/* ===========================================================
   1. Separate banner — four helmet profiles, cold dark ground.
   No title, no lettering inside the artwork.
   To swap in a real image later, uncomment the single
   <img class="ug-banner-img"> line in the HTML: the :has()
   rule below then hides the drawn version automatically.
   =========================================================== */
.ug-banner{position:relative;background:#07070d;border-bottom:1px solid var(--ug-line);overflow:hidden}
.ug-banner-art{display:block;width:100%}
.ug-banner-svg{display:block;width:100%;height:clamp(150px,22vw,300px)}
.ug-banner-img{display:block;width:100%;height:clamp(150px,22vw,300px);object-fit:cover}
.ug-banner:has(.ug-banner-img) .ug-banner-art{display:none}
.ug-bannerbar{background:#0d0c15;border-bottom:1px solid var(--ug-line)}
.ug-bannerbar .wrap{padding-top:10px;padding-bottom:10px}
.ug-banner-cap{font-size:12.5px;line-height:1.5;color:var(--ug-text-3);max-width:98ch}

/* ===========================================================
   2. Title block + pending-introduction note
   =========================================================== */
.ug-top{background:var(--ug-ground)}
.ug-top .wrap{padding-top:34px;padding-bottom:26px}
.ug-top h1{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(29px,5.2vw,58px);line-height:1.02;letter-spacing:.008em;
  color:#fff;margin:0 0 14px;max-width:22ch;
}
.ug-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.ug-updated{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ug-gold-text);
  border:1px solid var(--ug-gold-deep);border-radius:var(--ug-radius);padding:7px 12px;
}
.ug-updated-i{width:14px;height:14px;flex:none}
.ug-chip{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ug-text-3);
  border:1px solid var(--ug-line);border-radius:var(--ug-radius);padding:7px 12px;
}

/* editorial note — the introduction copy has not arrived */
.ug-note{
  display:flex;gap:14px;align-items:flex-start;margin-top:22px;
  border:1px dashed var(--ug-line-2);border-left:4px solid var(--ug-gold-deep);
  background:var(--ug-case);border-radius:var(--ug-radius);padding:16px 18px;
  max-width:78ch;
}
.ug-note-i{width:22px;height:22px;flex:none;color:var(--ug-gold);margin-top:1px}
.ug-note-b{min-width:0}
.ug-note .ug-note-t{
  font-family:var(--display);font-weight:700;font-size:12.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ug-gold-text);margin-bottom:6px;
}
.ug-note p{font-size:14.5px;line-height:1.62;color:var(--ug-text-2)}

/* ===========================================================
   3. The stage — uniform selector + annotated mannequin
   =========================================================== */
.ug-stage-sec{background:var(--ug-void);border-top:1px solid var(--ug-line)}
.ug-stage-sec .wrap{padding-top:40px;padding-bottom:52px}

.ug-stage{
  position:relative;display:grid;gap:22px;align-items:start;
  grid-template-columns:86px minmax(0,1fr) minmax(0,340px);
}
.ug-stage>*{min-width:0}

/* --- the selector rail --- */
.ug-rail{border:0;margin:0;padding:0;min-width:0;min-inline-size:0}
.ug-rail-legend{
  font-family:var(--display);font-weight:600;font-size:11px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ug-text-3);padding:0;margin-bottom:10px;
}
.ug-rail-in{
  position:sticky;top:calc(var(--ug-head) + 12px);
  display:flex;flex-direction:column;gap:10px;min-width:0;
}
.ug-opt{position:relative;min-width:0}
.ug-opt input{
  position:absolute;top:0;left:0;width:100%;height:100%;margin:0;
  opacity:0;cursor:pointer;
}
.ug-opt label{
  display:flex;flex-direction:column;align-items:center;gap:7px;
  min-height:96px;padding:10px 6px;cursor:pointer;
  border:1px solid var(--ug-line);border-radius:var(--ug-radius);
  background:var(--ug-ground);color:var(--ug-text-3);
  transition:border-color var(--t),background var(--t),color var(--t);
}
.ug-opt-sw{
  width:34px;height:34px;flex:none;border-radius:50%;
  border:2px solid rgba(255,255,255,.32);
}
.ug-opt-n{
  font-family:var(--display);font-weight:700;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;text-align:center;line-height:1.25;
}
.ug-opt input:hover+label{background:var(--ug-ground-2);color:var(--ug-text-2)}
.ug-opt input:focus-visible+label{outline:3px solid var(--ug-gold);outline-offset:2px}
.ug-opt input:checked+label{
  border-color:var(--ug-a-edge);background:var(--ug-case);color:#fff;
  box-shadow:inset 0 0 0 1px var(--ug-a-edge),0 0 22px -6px var(--ug-a-glow);
}
/* a text mark, so selection is never colour-only */
.ug-opt input:checked+label .ug-opt-n::after{content:" — selected";color:var(--ug-a-text)}

/* per-uniform accent tokens, driven by the real radio state (works without JS) */
.ug-stage:has(#ug-u-purple:checked){
  --ug-a-fill:#4f2683;--ug-a-edge:#7a4fc0;--ug-a-text:#cdb0f5;--ug-a-glow:rgba(124,79,196,.4);
}
.ug-stage:has(#ug-u-white:checked){
  --ug-a-fill:#f1f1f6;--ug-a-edge:#cfcfdd;--ug-a-text:#f4f2fb;--ug-a-glow:rgba(220,220,238,.3);
}
.ug-stage:has(#ug-u-classic:checked){
  --ug-a-fill:#3b1c63;--ug-a-edge:#d9a825;--ug-a-text:#ffd97a;--ug-a-glow:rgba(217,168,37,.34);
}
.ug-stage:has(#ug-u-winter:checked){
  --ug-a-fill:#f5f8fb;--ug-a-edge:#9aa0aa;--ug-a-text:#dfe5ec;--ug-a-glow:rgba(154,160,170,.34);
}

/* --- the display case holding the mannequin --- */
.ug-case{
  position:relative;min-width:0;
  border:1px solid var(--ug-line);border-radius:var(--ug-radius);
  background:
    radial-gradient(120% 62% at 50% -6%,var(--ug-a-glow) 0%,rgba(0,0,0,0) 62%),
    linear-gradient(180deg,var(--ug-case) 0%,var(--ug-ground) 78%);
  box-shadow:var(--ug-shadow);
  padding:18px 14px 20px;
  transition:background var(--t);
}
.ug-case-head{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;
  margin-bottom:10px;min-width:0;
}
.ug-case-name{
  font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.1em;
  text-transform:uppercase;color:#fff;
}
.ug-case-sub{font-size:12.5px;color:var(--ug-text-3);letter-spacing:.04em}

.ug-figwrap{position:relative;margin:0 auto;max-width:380px;min-width:0}
.ug-fig{display:none;position:relative}
.ug-fig-on{display:block}
/* default when :has() is unavailable: the purple uniform is shown */
.ug-stage:has(#ug-u-purple:checked) .ug-fig-purple,
.ug-stage:has(#ug-u-white:checked) .ug-fig-white,
.ug-stage:has(#ug-u-classic:checked) .ug-fig-classic,
.ug-stage:has(#ug-u-winter:checked) .ug-fig-winter{display:block}
.ug-stage:has(#ug-u-white:checked) .ug-fig-purple,
.ug-stage:has(#ug-u-classic:checked) .ug-fig-purple,
.ug-stage:has(#ug-u-winter:checked) .ug-fig-purple{display:none}

/* the white uniform sits against a purple-lit backdrop so its shape reads */
.ug-stage:has(#ug-u-white:checked) .ug-case{
  background:
    radial-gradient(120% 66% at 50% -4%,rgba(106,60,171,.55) 0%,rgba(0,0,0,0) 64%),
    linear-gradient(180deg,#241a3c 0%,var(--ug-ground) 80%);
}

/* front / back rotating model */
.ug-flip{position:relative;perspective:1400px;min-width:0}
.ug-flip-in{
  position:relative;transform-style:preserve-3d;
  transition:transform 620ms cubic-bezier(.22,.72,.24,1);
}
.ug-fig[data-face="back"] .ug-flip-in{transform:rotateY(180deg)}
.ug-face{backface-visibility:hidden}
.ug-face-b{position:absolute;inset:0;transform:rotateY(180deg)}
.ug-fig[data-face="back"] .ug-face-f{visibility:hidden}
.ug-fig:not([data-face="back"]) .ug-face-b{visibility:hidden}
.ug-fig-svg{display:block;width:100%;height:auto;aspect-ratio:260/520}

.ug-flipbar{display:flex;justify-content:center;margin-top:12px}
.ug-flipbtn{
  display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:10px 16px;
  border:1px solid var(--ug-line-2);background:var(--ug-case);color:var(--ug-text);
  border-radius:var(--ug-radius);font-family:var(--display);font-weight:600;
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;
}
.ug-flipbtn:hover{background:var(--ug-case-2)}
.ug-flipbtn-i{width:15px;height:15px;flex:none}

/* --- annotation hotspots --- */
.ug-hots{position:absolute;inset:0}
.ug-hot{
  position:absolute;width:44px;height:44px;transform:translate(-50%,-50%);
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:transparent;padding:0;
}
.ug-hot::after{
  content:attr(data-n);
  display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;
  background:#0f0d18;border:2px solid var(--ug-a-edge);color:#fff;
  font-family:var(--ug-num);font-weight:700;font-size:12px;letter-spacing:0;
  transition:transform var(--t),background var(--t),box-shadow var(--t);
}
.ug-hot:hover::after{transform:scale(1.14);background:var(--ug-a-fill)}
.ug-hot[aria-pressed="true"]::after{
  background:var(--ug-gold);border-color:#fff;color:#231800;transform:scale(1.14);
  box-shadow:0 0 0 5px rgba(255,198,47,.24);
}
.ug-hot:focus-visible{outline:3px solid var(--ug-gold);outline-offset:1px}
/* white and Winter Warrior fills need a dark numeral */
.ug-stage:has(#ug-u-white:checked) .ug-hot:hover::after,
.ug-stage:has(#ug-u-winter:checked) .ug-hot:hover::after{color:#1a1a22}

.ug-h1{left:46%;top:9%}    /* 1  helmet    */
.ug-h2{left:72%;top:12%}   /* 2  horn      */
.ug-h3{left:34%;top:17%}   /* 3  facemask  */
.ug-h4{left:34%;top:26%}   /* 4  shoulder  */
.ug-h5{left:22%;top:34%}   /* 5  sleeve    */
.ug-h6{left:50%;top:38%}   /* 6  number    */
.ug-h7{left:72%;top:28%}   /* 7  nameplate */
.ug-h8{left:50%;top:60%}   /* 8  pants     */
.ug-h9{left:41%;top:84%}   /* 9  socks     */
.ug-h10{left:52%;top:24%}  /* 10 neckline  */

/* --- the annotation panel beside the mannequin --- */
.ug-panel{
  position:sticky;top:calc(var(--ug-head) + 12px);min-width:0;
  border:1px solid var(--ug-line);border-top:3px solid var(--ug-a-edge);
  border-radius:var(--ug-radius);background:var(--ug-ground-2);padding:18px;
}
.ug-panel-k{
  font-family:var(--display);font-weight:600;font-size:11px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ug-text-3);margin-bottom:8px;
}
.ug-panel-h{
  font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:.06em;
  text-transform:uppercase;color:#fff;margin-bottom:8px;
}
.ug-panel-h .ug-panel-num{
  font-family:var(--ug-num);font-weight:900;font-size:26px;color:var(--ug-a-text);
  margin-right:9px;vertical-align:-2px;
}
.ug-panel p{font-size:14.5px;line-height:1.62;color:var(--ug-text-2)}
.ug-panel-hint{margin-top:12px;font-size:13px;color:var(--ug-text-3)}
.ug-panel-jump{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:6px;
  color:var(--ug-gold-text);font-family:var(--display);font-weight:600;
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:underline;text-underline-offset:4px;
}
.ug-panel-jump-i{width:14px;height:14px;flex:none}

.ug-live{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* ===========================================================
   4. Full annotation reference (always visible, no script needed)
   =========================================================== */
.ug-ref{display:grid;gap:20px;grid-template-columns:repeat(2,minmax(0,1fr))}
.ug-ref>*{min-width:0}
.ug-refcard{
  border:1px solid var(--ug-line);border-radius:var(--ug-radius);
  background:var(--ug-ground-2);padding:18px;min-width:0;
}
.ug-refcard h3{margin-top:0}
.ug-refcard-bar{display:block;height:6px;border-radius:3px;margin-bottom:14px}
.ug-bar-purple{background:linear-gradient(90deg,#4f2683 0 60%,#ffc62f 60% 80%,#fff 80% 100%)}
.ug-bar-white{background:linear-gradient(90deg,#f1f1f6 0 60%,#4f2683 60% 80%,#ffc62f 80% 100%)}
.ug-bar-classic{background:linear-gradient(90deg,#3b1c63 0 60%,#d9a825 60% 80%,#fff 80% 100%)}
.ug-bar-winter{background:linear-gradient(90deg,#f5f8fb 0 60%,#9aa0aa 60% 82%,#4f2683 82% 100%)}
.ug-dl{margin:0}
.ug-dl dt{
  display:flex;align-items:baseline;gap:9px;margin-top:14px;
  font-family:var(--display);font-weight:700;font-size:13.5px;letter-spacing:.09em;
  text-transform:uppercase;color:#fff;
}
.ug-dl dt:first-child{margin-top:0}
.ug-dl dt .ug-dn{
  font-family:var(--ug-num);font-weight:700;font-size:12px;color:var(--ug-a-text);
  flex:none;min-width:2.2em;
}
.ug-dl dd{margin:5px 0 0 0;font-size:14.5px;line-height:1.6;color:var(--ug-text-2)}
.ug-unknown{color:var(--ug-text-3);font-style:italic}

/* ===========================================================
   5. Tables
   =========================================================== */
.ug-tablewrap{overflow-x:auto;border:1px solid var(--ug-line-2);border-radius:var(--ug-radius);margin-bottom:16px}
.ug-table{width:100%;border-collapse:collapse;min-width:500px;background:var(--ug-ground-2)}
.ug-table caption{
  text-align:left;padding:13px 15px;background:var(--ug-case);
  border-bottom:1px solid var(--ug-line-2);
  font-family:var(--display);font-weight:700;font-size:12.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ug-gold-text);
}
.ug-table th,.ug-table td{
  padding:12px 15px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--ug-line-2);border-right:1px solid var(--ug-line);
  font-size:14.5px;line-height:1.5;color:var(--ug-text-2);
}
.ug-table th:last-child,.ug-table td:last-child{border-right:0}
.ug-table thead th{
  background:var(--ug-case-2);color:#fff;
  font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.11em;
  text-transform:uppercase;white-space:nowrap;
}
.ug-table tbody th{color:#fff;font-weight:600;white-space:nowrap}
.ug-table tbody tr:last-child th,.ug-table tbody tr:last-child td{border-bottom:0}
.ug-tr-alt th,.ug-tr-alt td{background:rgba(255,255,255,.035)}

/* ===========================================================
   6. Helmet display + comparison slider
   =========================================================== */
.ug-helmet-stage{
  border:1px solid var(--ug-line-2);border-radius:var(--ug-radius);
  background:linear-gradient(180deg,#1c1930 0%,#0f0e17 100%);
  padding:22px 18px;box-shadow:var(--ug-shadow);
}
.ug-helmet-svg{display:block;width:100%;height:auto;max-width:820px;margin:0 auto;aspect-ratio:820/460}

.ug-marks{
  display:grid;gap:16px;margin-top:24px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
}
.ug-marks>*{min-width:0}
.ug-mark{
  display:flex;gap:14px;align-items:flex-start;min-width:0;
  border-left:2px solid var(--ug-line-2);padding-left:14px;
}
.ug-mark-n{
  font-family:var(--ug-num);font-weight:900;font-size:34px;line-height:.9;
  color:var(--ug-gold);flex:none;
}
.ug-mark-b{min-width:0}

/* comparison slider */
.ug-cmp{margin-top:26px}
.ug-cmp-view{
  position:relative;overflow:hidden;border:1px solid var(--ug-line-2);
  border-radius:var(--ug-radius);background:#0d0c15;
  --ug-split:50%;
}
.ug-cmp-lay{position:relative;display:block;width:100%}
.ug-cmp-svg{display:block;width:100%;height:auto;aspect-ratio:640/380}
.ug-cmp-b{
  position:absolute;inset:0;
  clip-path:inset(0 0 0 var(--ug-split));
}
.ug-cmp-line{
  position:absolute;top:0;bottom:0;left:var(--ug-split);width:2px;
  background:var(--ug-gold);pointer-events:none;
}
.ug-cmp-line::after{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:34px;height:34px;border-radius:50%;
  background:var(--ug-gold);box-shadow:0 0 0 4px rgba(255,198,47,.25);
}
.ug-cmp-tag{
  position:absolute;top:10px;padding:5px 10px;border-radius:2px;
  font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;pointer-events:none;
}
.ug-cmp-tag-l{left:10px;background:var(--ug-purple);color:#fff}
.ug-cmp-tag-r{right:10px;background:#eef2f6;color:#1a1a22}
.ug-cmp-ctl{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.ug-cmp-ctl label{
  font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ug-text-2);
}
.ug-range{
  -webkit-appearance:none;appearance:none;width:100%;height:44px;
  background:transparent;margin:0;cursor:pointer;
}
.ug-range::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:var(--ug-line-2)}
.ug-range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:28px;height:28px;border-radius:50%;
  background:var(--ug-gold);border:2px solid #231800;margin-top:-11px;
}
.ug-range::-moz-range-track{height:6px;border-radius:3px;background:var(--ug-line-2)}
.ug-range::-moz-range-thumb{
  width:28px;height:28px;border-radius:50%;background:var(--ug-gold);border:2px solid #231800;
}
.ug-range:focus-visible{outline:3px solid var(--ug-gold);outline-offset:3px}

/* ===========================================================
   7. Winter Warrior — inverted bright white ground
   =========================================================== */
.ug-winter{
  --ug-w-ink:#171a20;      /* 15.2:1 on the white ground */
  --ug-w-ink-2:#3f4650;    /*  9.1:1 */
  --ug-w-ink-3:#565e6a;    /*  6.4:1 — smallest text used here is 15.5px */
  --ug-w-rule:#b9c1cb;
  --ug-w-purple:#4f2683;   /*  9.3:1 on white */
  background:
    linear-gradient(180deg,#ffffff 0%,#eef3f8 100%);
  border-top:3px solid var(--ug-steel);
  color:var(--ug-w-ink);
}
/* faint ice texture — pure CSS, decorative only */
.ug-winter-ice{position:relative}
.ug-winter-ice::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    repeating-linear-gradient(62deg,rgba(154,160,170,.16) 0 1px,rgba(0,0,0,0) 1px 34px),
    repeating-linear-gradient(-58deg,rgba(154,160,170,.13) 0 1px,rgba(0,0,0,0) 1px 47px),
    repeating-linear-gradient(8deg,rgba(154,160,170,.10) 0 1px,rgba(0,0,0,0) 1px 89px);
}
.ug-winter .wrap{position:relative}
.ug-winter .ug-kicker{color:#4a525d}
.ug-winter h2,.ug-winter h3,.ug-winter h4{color:var(--ug-w-ink)}
.ug-winter .ug-lede,.ug-winter .ug-p{color:var(--ug-w-ink-2)}
.ug-winter .ug-small{color:var(--ug-w-ink-3)}
.ug-winter .ug-list li{color:var(--ug-w-ink-2)}
.ug-winter .ug-list li::before{background:var(--ug-steel);border-color:#6f7885}
.ug-winter .ug-rule{background:var(--ug-w-rule);height:2px}
.ug-winter .ug-src{
  background:#fff;border-color:#8e97a3;color:#3c1d66;
}
.ug-winter .ug-src:hover{background:#f2f6fa;border-color:var(--ug-w-purple)}
.ug-winter .ug-tablewrap{border-color:#96a0ad}
.ug-winter .ug-table{background:#fff}
.ug-winter .ug-table caption{background:#e6ecf3;border-bottom-color:#96a0ad;color:#3c1d66}
.ug-winter .ug-table th,.ug-winter .ug-table td{
  border-bottom-color:#c4ccd6;border-right-color:#d5dbe3;color:var(--ug-w-ink-2);
}
.ug-winter .ug-table thead th{background:#d9e1ea;color:var(--ug-w-ink)}
.ug-winter .ug-table tbody th{color:var(--ug-w-ink)}
.ug-winter .ug-tr-alt th,.ug-winter .ug-tr-alt td{background:#f4f7fa}

.ug-winter-grid{display:grid;gap:26px;grid-template-columns:minmax(0,1fr) minmax(0,360px);align-items:start}
.ug-winter-grid>*{min-width:0}
.ug-wh-svg{display:block;width:100%;height:auto;aspect-ratio:360/300;background:#fff;border:1px solid #96a0ad;border-radius:var(--ug-radius)}

/* dated schedule panel */
.ug-sched{
  border:2px solid var(--ug-w-purple);border-radius:var(--ug-radius);
  background:#fff;padding:18px;margin-top:8px;
}
.ug-sched-h{
  font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.12em;
  text-transform:uppercase;color:#fff;background:var(--ug-w-purple);
  display:inline-block;padding:6px 12px;border-radius:2px;margin-bottom:12px;
}
.ug-sched dl{margin:12px 0 0;display:grid;gap:8px 16px;grid-template-columns:auto minmax(0,1fr)}
.ug-sched dt{
  font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ug-w-ink-3);min-width:0;
}
.ug-sched dd{margin:0;font-size:14.5px;line-height:1.5;color:var(--ug-w-ink);min-width:0;overflow-wrap:anywhere}
.ug-sched dd a{color:#3c1d66;text-decoration:underline;text-underline-offset:3px}

/* ===========================================================
   8. Vikings Classic — textured paper, deeper purple
   =========================================================== */
.ug-classic{
  --ug-c-paper:#efe6d3;
  --ug-c-ink:#241d14;      /* 13.4:1 on the paper */
  --ug-c-ink-2:#463a28;    /*  8.1:1 */
  --ug-c-ink-3:#5c4c34;    /*  5.9:1 */
  --ug-c-purple:#33174f;   /* 12.0:1 on the paper */
  --ug-c-rule:#c0b295;
  background:var(--ug-c-paper);
  border-top:3px solid var(--ug-c-purple);
  color:var(--ug-c-ink);
  position:relative;
}
.ug-classic::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:
    repeating-linear-gradient(0deg,rgba(90,72,44,.09) 0 1px,rgba(0,0,0,0) 1px 4px),
    repeating-linear-gradient(90deg,rgba(90,72,44,.07) 0 1px,rgba(0,0,0,0) 1px 5px);
}
.ug-classic .wrap{position:relative}
.ug-classic .ug-kicker{color:#6b4d12}
.ug-classic h2,.ug-classic h3,.ug-classic h4{color:var(--ug-c-purple)}
.ug-classic .ug-lede,.ug-classic .ug-p{color:var(--ug-c-ink-2)}
.ug-classic .ug-small{color:var(--ug-c-ink-3)}
.ug-classic .ug-list li{color:var(--ug-c-ink-2)}
.ug-classic .ug-list li::before{background:var(--ug-c-purple);border-color:#6b4d12}
.ug-classic .ug-rule{background:var(--ug-c-rule);height:2px}
.ug-classic .ug-src{background:#fdfaf2;border-color:#8a7551;color:#4a3405}
.ug-classic .ug-src:hover{background:#fff;border-color:var(--ug-c-purple)}
.ug-classic .ug-tablewrap{border-color:#8a7551}
.ug-classic .ug-table{background:#f8f2e4}
.ug-classic .ug-table caption{background:#e3d6ba;border-bottom-color:#8a7551;color:#3d2a06}
.ug-classic .ug-table th,.ug-classic .ug-table td{
  border-bottom-color:#c9bb9d;border-right-color:#d8ccb2;color:var(--ug-c-ink-2);
}
.ug-classic .ug-table thead th{background:var(--ug-c-purple);color:#fff}
.ug-classic .ug-table tbody th{color:var(--ug-c-ink)}
.ug-classic .ug-tr-alt th,.ug-classic .ug-tr-alt td{background:#efe6d0}

.ug-museum{
  display:grid;gap:24px;grid-template-columns:minmax(0,340px) minmax(0,1fr);align-items:start;
}
.ug-museum>*{min-width:0}
.ug-plate{
  border:1px solid #8a7551;background:#fdfaf2;border-radius:var(--ug-radius);
  padding:16px;box-shadow:0 2px 0 rgba(60,45,20,.08),0 18px 34px -22px rgba(60,45,20,.55);
}
.ug-plate-svg{display:block;width:100%;height:auto;aspect-ratio:300/440}
.ug-plate-cap{
  margin-top:12px;padding-top:12px;border-top:1px solid #d8ccb2;
  font-size:13px;line-height:1.55;color:#5c4c34;
}
.ug-plate-cap strong{display:block;font-family:var(--display);font-weight:700;
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#33174f;margin-bottom:4px}

/* ===========================================================
   9. Split Classic / current mannequin
   =========================================================== */
.ug-split{
  position:relative;overflow:hidden;border:1px solid var(--ug-line-2);
  border-radius:var(--ug-radius);background:linear-gradient(90deg,#1a1428 0%,#131120 100%);
  --ug-split-x:50%;
}
.ug-split-lay{position:relative;display:block;width:100%}
.ug-split-svg{display:block;width:100%;height:auto;max-width:640px;margin:0 auto;aspect-ratio:640/640}
.ug-split-b{position:absolute;inset:0;clip-path:inset(0 0 0 var(--ug-split-x))}
.ug-split-line{position:absolute;top:0;bottom:0;left:var(--ug-split-x);width:2px;background:var(--ug-gold);pointer-events:none}
.ug-split-line::after{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:34px;height:34px;border-radius:50%;background:var(--ug-gold);
  box-shadow:0 0 0 4px rgba(255,198,47,.25);
}

/* ===========================================================
   10. Equipment tags
   =========================================================== */
.ug-tags{display:flex;flex-direction:column;gap:26px;max-width:760px}
.ug-tag{
  position:relative;display:grid;gap:18px;align-items:start;
  grid-template-columns:104px minmax(0,1fr);
  border:1px solid var(--ug-line-2);border-radius:var(--ug-radius);
  background:linear-gradient(180deg,var(--ug-case) 0%,var(--ug-ground-2) 100%);
  padding:18px;box-shadow:var(--ug-shadow);
}
.ug-tag>*{min-width:0}
.ug-tag::before{
  content:"";position:absolute;left:50px;top:-26px;width:2px;height:26px;
  background:var(--ug-line-2);
}
.ug-tag:first-child::before{display:none}
.ug-tag-svg{display:block;width:104px;height:132px}
.ug-tag-n{
  font-family:var(--ug-num);font-weight:900;font-size:13px;letter-spacing:.06em;
  color:var(--ug-gold);margin-bottom:6px;
}
.ug-tag h3{margin-top:0}

/* ===========================================================
   11. Combination board
   =========================================================== */
.ug-board{
  border:1px solid var(--ug-line-2);border-radius:var(--ug-radius);
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,rgba(0,0,0,0) 1px 30px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,rgba(0,0,0,0) 1px 30px),
    #14121f;
  padding:20px;
}
.ug-fams{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.ug-fams>*{min-width:0}
.ug-fam{
  border:1px solid var(--ug-line-2);border-radius:var(--ug-radius);
  background:var(--ug-ground);padding:16px;min-width:0;
}
.ug-fam h3{margin:0 0 12px;font-size:15px}
.ug-fam-icons{display:flex;gap:10px;margin-bottom:12px}
.ug-fam-svg{display:block;width:100%;height:auto;aspect-ratio:1/1;flex:1 1 0;min-width:0}
.ug-fam-parts{margin:0}
.ug-fam-parts dt{
  font-family:var(--display);font-weight:600;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ug-text-3);margin-top:9px;
}
.ug-fam-parts dt:first-child{margin-top:0}
.ug-fam-parts dd{margin:2px 0 0;font-size:14px;line-height:1.45;color:var(--ug-text)}

/* ===========================================================
   12. Horns explainer
   =========================================================== */
.ug-horns{
  display:grid;gap:24px;align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,420px) minmax(0,1fr);
}
.ug-horns>*{min-width:0}
.ug-horn-svg{display:block;width:100%;height:auto;aspect-ratio:420/300}

/* ===========================================================
   13. Close-ups
   =========================================================== */
.ug-closeups{display:flex;flex-direction:column;gap:22px}
.ug-closeup{
  display:grid;gap:18px;align-items:center;
  grid-template-columns:minmax(0,168px) minmax(0,1fr);
  border-top:1px solid var(--ug-line);padding-top:22px;
}
.ug-closeup>*{min-width:0}
.ug-closeup:first-child{border-top:0;padding-top:0}
.ug-close-svg{display:block;width:100%;height:auto;aspect-ratio:168/120;border:1px solid var(--ug-line-2);border-radius:var(--ug-radius)}
.ug-close-n{
  font-family:var(--ug-num);font-weight:900;font-size:15px;color:var(--ug-gold);
  margin-bottom:5px;
}

/* ===========================================================
   14. FAQ
   =========================================================== */
.ug-faq{max-width:820px}
.ug-q{
  border:1px solid var(--ug-line);border-radius:var(--ug-radius);
  background:var(--ug-ground-2);padding:16px 18px;margin-bottom:12px;
}
.ug-q h3{margin:0 0 8px;font-size:16px;letter-spacing:.03em;text-transform:none}
.ug-q p{font-size:15px;line-height:1.62;color:var(--ug-text-2)}

/* ===========================================================
   15. Closing display room + links
   =========================================================== */
.ug-room{
  border:1px solid var(--ug-line-2);border-radius:var(--ug-radius);
  background:radial-gradient(120% 80% at 50% 0%,#211d38 0%,#0a0910 74%);
  padding:22px 18px;box-shadow:var(--ug-shadow);
}
.ug-room-svg{display:block;width:100%;height:auto;max-width:960px;margin:0 auto;aspect-ratio:960/420}
.ug-room-key{
  display:grid;gap:12px;margin-top:20px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
}
.ug-room-key>*{min-width:0}
.ug-room-key div{
  display:flex;gap:10px;align-items:center;min-width:0;
  border:1px solid var(--ug-line);border-radius:var(--ug-radius);padding:10px 12px;
  background:rgba(255,255,255,.03);
}
.ug-room-key b{
  font-family:var(--ug-num);font-weight:700;font-size:12px;color:var(--ug-gold);flex:none;
}
.ug-room-key span{font-size:13.5px;line-height:1.4;color:var(--ug-text-2);min-width:0}

.ug-links{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));margin-top:8px}
.ug-links>*{min-width:0}
.ug-link{
  display:flex;align-items:center;gap:12px;min-width:0;min-height:64px;
  border:1px solid var(--ug-line-2);border-radius:var(--ug-radius);
  background:var(--ug-case);padding:14px 16px;
  transition:background var(--t),border-color var(--t),transform var(--t);
}
.ug-link:hover{background:var(--ug-case-2);border-color:var(--ug-gold-deep);transform:translateY(-2px)}
.ug-link-b{min-width:0}
.ug-link-t{
  display:block;font-family:var(--display);font-weight:700;font-size:14px;
  letter-spacing:.07em;text-transform:uppercase;color:#fff;
}
.ug-link-d{display:block;font-size:13px;line-height:1.45;color:var(--ug-text-3);margin-top:3px}
.ug-link-i{width:17px;height:17px;flex:none;color:var(--ug-gold)}

/* ===========================================================
   Responsive
   =========================================================== */
@media (max-width:1080px){
  .ug-stage{grid-template-columns:80px minmax(0,1fr)}
  .ug-panel{grid-column:1 / -1;position:static}
  .ug-winter-grid{grid-template-columns:minmax(0,1fr)}
  .ug-museum{grid-template-columns:minmax(0,1fr)}
  .ug-horns{grid-template-columns:minmax(0,1fr)}
  .ug-ref{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  /* the rail becomes a horizontal control directly below the title */
  .ug-stage{grid-template-columns:minmax(0,1fr)}
  .ug-rail{order:-1}
  .ug-rail-in{
    position:sticky;top:var(--ug-head);z-index:20;
    flex-direction:row;gap:8px;overflow-x:auto;padding:8px 0;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    background:var(--ug-void);border-bottom:1px solid var(--ug-line);
  }
  .ug-opt{flex:0 0 auto;scroll-snap-align:start}
  .ug-opt label{
    flex-direction:row;min-height:56px;min-width:150px;padding:8px 14px;gap:10px;
    align-items:center;justify-content:flex-start;
  }
  .ug-opt-sw{width:26px;height:26px}
  .ug-opt-n{text-align:left;font-size:11px}
}
@media (max-width:760px){
  .ug-sec .wrap{padding-top:38px;padding-bottom:38px}
  .ug-closeup{grid-template-columns:minmax(0,1fr)}
  .ug-close-svg{max-width:220px}
  .ug-tag{grid-template-columns:minmax(0,1fr)}
  .ug-tag::before{left:24px}
  .ug-sched dl{grid-template-columns:minmax(0,1fr)}
  .ug-sched dd{margin-bottom:6px}
}
@media (max-width:560px){
  .ug-top .wrap{padding-top:26px}
  .ug-case{padding:14px 8px 16px}
  .ug-figwrap{max-width:300px}
  .ug-board{padding:12px}
  .ug-note{flex-direction:column;gap:10px}
  .ug-table{min-width:420px}
}

/* ===========================================================
   Reduced motion — selector transition, mannequin rotation,
   slider handle movement and every hover lift.
   =========================================================== */
@media (prefers-reduced-motion:reduce){
  .page-fieldguide *,
  .page-fieldguide *::before,
  .page-fieldguide *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .ug-flip-in{transition:none !important;transform:none !important}
  .ug-fig[data-face="back"] .ug-flip-in{transform:none !important}
  .ug-face-b{position:static;transform:none !important}
  .ug-face{backface-visibility:visible}
  .ug-fig[data-face="back"] .ug-face-f{display:none;visibility:visible}
  .ug-fig:not([data-face="back"]) .ug-face-b{display:none;visibility:visible}
  .ug-opt label,.ug-case,.ug-hot::after,.ug-link,.ug-src{transition:none !important}
  .ug-link:hover{transform:none}
  .ug-hot:hover::after,.ug-hot[aria-pressed="true"]::after{transform:none}
}

/* print — keep the field guide readable on paper */
@media print{
  .page-fieldguide{background:#fff;color:#111}
  .ug-fig{display:block !important}
  .ug-panel,.ug-rail,.ug-cmp-ctl,.ug-flipbar{display:none}
}

/* ===========================================================
   Type used inside the drawn illustrations
   =========================================================== */
.ug-svgnum{font-family:var(--ug-num);font-weight:900;letter-spacing:-.02em;paint-order:stroke fill}
.ug-svgnum-classic{
  font-family:Rockwell,"Roboto Slab",Georgia,"Times New Roman",serif;
  font-weight:700;letter-spacing:.01em;paint-order:stroke fill;
}
.ug-svgtx{
  font-family:var(--display);font-weight:700;letter-spacing:.16em;
}
.ug-svglab{font-family:var(--body);font-weight:600;letter-spacing:.03em}