/* ===========================================================
   LOCKER No. 9 — bespoke design for /players/jj-mccarthy/
   This file dresses ONE page. It is not a reusable player-page
   pattern and must not be linked from another profile.
   Every selector is scoped to body.page-locker9 and prefixed .lk-.

   Rebuilt from scratch: new composition, new shapes (chamfered
   steel plates instead of rounded cards), new spacing rhythm,
   new heading scale, one-point-perspective locker interior.
   =========================================================== */

/* ---------- self-hosted wide athletic numeral face ---------- */
@font-face{
  font-family:"Archivo Expanded";
  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";
  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";
  src:url("/assets/fonts/archivo-expanded-900.woff2") format("woff2");
  font-weight:900;font-style:normal;font-display:swap;
}

.page-locker9{
  /* ---- the room ---- */
  --k-room:#08090B;
  --k-panel:#15181D;
  --k-panel-2:#1C2027;
  --k-panel-3:#252A32;
  --k-hair:rgba(255,255,255,.10);
  --k-hair-2:rgba(255,255,255,.055);
  --k-hi:rgba(255,255,255,.26);

  /* ---- steel ---- */
  --k-steel-1:#EAEDF2;
  --k-steel-2:#BCC2CB;
  --k-steel-3:#848B95;
  --k-steel-4:#4C525B;

  /* ---- brand: purple is a FILL only, never text on charcoal ---- */
  --k-purple:#4F2683;
  --k-purple-hi:#7440BC;
  --k-purple-lo:#2C1449;
  --k-gold:#FFC62F;

  /* ---- ink ---- */
  --k-bone:#F5F2EA;
  --k-mute:#BCC0C8;
  --k-faint:#9AA0A9;

  /* ---- type ---- */
  --k-num:"Archivo Expanded","Archivo",var(--display),"Arial Narrow",Impact,sans-serif;

  /* ---- motion ---- */
  --k-flip:520ms;
  --k-ease:cubic-bezier(.22,.72,.24,1);

  background:var(--k-room);
  color:var(--k-bone);
}

/* the ground has to sit behind the sticky sitewide header too */
.page-locker9 .lk-doc{
  position:relative;
  background:
    radial-gradient(122% 54% at 62% -6%, rgba(79,38,131,.30), transparent 62%),
    radial-gradient(70% 34% at 6% 2%, rgba(255,198,47,.055), transparent 64%),
    linear-gradient(180deg,#0F1216 0,#0A0C0F 34%,#08090B 100%);
}

/* =========================================================
   Primitives
   ========================================================= */
.page-locker9 .lk-sec{
  position:relative;
  padding-top:clamp(46px,5vw,80px);
  padding-bottom:clamp(34px,3.4vw,52px);
}
.page-locker9 .lk-sec--tight{padding-top:clamp(30px,2.8vw,44px)}
.page-locker9 .lk-sec,
.page-locker9 .lk-outro{scroll-margin-top:78px}
.page-locker9 .lk-sec > .wrap > *{min-width:0}

/* section head: stencilled index + engraved rule. No icon chips. */
.page-locker9 .lk-head{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  align-items:end;gap:0 20px;margin-bottom:clamp(22px,2.6vw,38px);
}
.page-locker9 .lk-head > *{min-width:0}
.page-locker9 .lk-head__ix{
  font-family:var(--k-num);font-weight:900;font-size:clamp(30px,4.4vw,58px);
  line-height:.82;letter-spacing:-.01em;color:transparent;
  -webkit-text-stroke:1.5px rgba(255,255,255,.22);
  text-shadow:0 1px 0 rgba(0,0,0,.7);
}
.page-locker9 .lk-head__b{min-width:0}
.page-locker9 .lk-head__eye{
  display:block;font-family:var(--k-num);font-weight:600;font-size:10.5px;
  letter-spacing:.30em;text-transform:uppercase;color:var(--k-gold);margin-bottom:9px;
}
.page-locker9 .lk-head::after{
  content:"";grid-column:1 / -1;height:2px;margin-top:16px;
  background:linear-gradient(90deg,rgba(255,255,255,.24),rgba(255,255,255,.05) 42%,transparent);
  box-shadow:0 1px 0 rgba(0,0,0,.7);
}

.page-locker9 .lk-h1{
  font-family:var(--k-num);font-weight:700;text-transform:uppercase;
  font-size:clamp(17px,1.95vw,28px);line-height:1.16;letter-spacing:.005em;
  color:#16191E;
  text-shadow:0 1px 0 rgba(255,255,255,.55), 0 -1px 0 rgba(0,0,0,.25);
}
.page-locker9 .lk-h2{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(25px,3.3vw,42px);line-height:1.02;letter-spacing:.005em;
  color:var(--k-bone);
  text-shadow:0 -1px 0 rgba(0,0,0,.85), 0 1px 0 rgba(255,255,255,.13);
}
.page-locker9 .lk-h3{
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:clamp(16px,1.7vw,21px);line-height:1.14;letter-spacing:.045em;
  color:var(--k-bone);
}
.page-locker9 .lk-p{
  font-family:var(--body);font-size:17px;line-height:1.76;color:var(--k-bone);
  max-width:72ch;
}
.page-locker9 .lk-p + .lk-p{margin-top:15px}
.page-locker9 .lk-p--mute{color:var(--k-mute);font-size:16px}
.page-locker9 .lk-p a,
.page-locker9 .lk-src a{
  color:var(--k-gold);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
}
.page-locker9 .lk-p a:hover,
.page-locker9 .lk-src a:hover{text-decoration-thickness:2px}
.page-locker9 .lk-src{
  font-family:var(--body);font-size:14.5px;line-height:1.7;color:var(--k-mute);
  max-width:78ch;margin-top:20px;padding-left:15px;
  border-left:3px solid rgba(255,255,255,.16);
}
.page-locker9 .lk-mt{margin-top:clamp(28px,3vw,44px)}
.page-locker9 .lk-mt-s{margin-top:20px}
.page-locker9 .lk-mb-s{margin-bottom:18px}

/* engraved-on-steel label, in the wide numeral face */
.page-locker9 .lk-eng{
  font-family:var(--k-num);font-weight:600;text-transform:uppercase;
  letter-spacing:.17em;font-size:11px;color:#23282E;
  text-shadow:0 1px 0 rgba(255,255,255,.55);
}
/* the same label engraved into a dark surface instead of a bright one */
.page-locker9 .lk-eng--dark{
  color:#A7ADB6;text-shadow:0 -1px 0 rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.10);
}
/* statistics + jersey numerals */
.page-locker9 .lk-fig{
  font-family:var(--k-num);font-weight:900;line-height:.9;
  font-variant-numeric:lining-nums;letter-spacing:-.005em;
}

/* rivet */
.page-locker9 .lk-rvt{
  display:block;width:11px;height:11px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 33% 28%,#F2F5F9 0,#B4BAC3 34%,#6C737D 66%,#2A2E34 100%);
  box-shadow:0 1px 1px rgba(0,0,0,.85), inset 0 -1px 1px rgba(0,0,0,.45);
}

/* focus must read on charcoal, on bright steel and on purple */
.page-locker9 a:focus-visible,
.page-locker9 button:focus-visible,
.page-locker9 summary:focus-visible,
.page-locker9 [tabindex]:focus-visible{
  outline:3px solid var(--k-gold);
  outline-offset:3px;
  box-shadow:0 0 0 6px rgba(6,7,9,.94);
  border-radius:2px;
  position:relative;z-index:20;
}

/* =========================================================
   Breadcrumb — a stamped strip across the top of the room
   ========================================================= */
.page-locker9 .lk-trail{
  border-bottom:1px solid rgba(255,255,255,.07);
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(0,0,0,.3));
}
.page-locker9 .lk-trail ol{
  display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;margin:0;padding:0;list-style:none;
  font-family:var(--k-num);font-weight:600;font-size:10.5px;letter-spacing:.19em;text-transform:uppercase;
}
.page-locker9 .lk-trail li{min-width:0}
.page-locker9 .lk-trail li + li::before{content:"\203A";margin-right:8px;color:rgba(255,255,255,.34)}
.page-locker9 .lk-trail a,
.page-locker9 .lk-trail [aria-current]{
  display:inline-flex;align-items:center;min-height:44px;color:var(--k-mute);
}
.page-locker9 .lk-trail a:hover{color:var(--k-gold)}
.page-locker9 .lk-trail [aria-current]{color:var(--k-bone)}

/* =========================================================
   1. THE OPEN LOCKER  (hero)
   ========================================================= */
.page-locker9 .lk-open{
  position:relative;overflow:hidden;
  padding-top:clamp(26px,3.4vw,52px);
  padding-bottom:clamp(40px,5vw,78px);
}
/* the room floor falling away behind the unit */
.page-locker9 .lk-open::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:46%;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.62));
  pointer-events:none;
}
.page-locker9 .lk-open__eye{
  display:block;text-align:center;margin-bottom:clamp(14px,1.8vw,24px);
  font-family:var(--k-num);font-weight:600;font-size:11px;letter-spacing:.42em;
  text-transform:uppercase;color:var(--k-gold);
  text-shadow:0 0 22px rgba(255,198,47,.35);
}
.page-locker9 .lk-stage{position:relative;width:100%;max-width:880px;margin:0 auto}

/* --- the locker unit --- */
.page-locker9 .lk-bay{position:relative;aspect-ratio:640 / 780;isolation:isolate}
/* the shadow the unit casts on the room floor */
.page-locker9 .lk-bay::after{
  content:"";position:absolute;left:2%;right:2%;bottom:-3.2%;height:9%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.88) 0,rgba(0,0,0,.42) 46%,transparent 74%);
  filter:blur(7px);z-index:0;
}
.page-locker9 .lk-bay__art{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1}
/* soft body shadow thrown onto the back panel */
.page-locker9 .lk-bay__cast{
  position:absolute;z-index:2;left:51%;width:33%;top:59%;height:29%;
  background:radial-gradient(50% 50% at 46% 42%,rgba(0,0,0,.74) 0,rgba(0,0,0,.34) 52%,transparent 76%);
  filter:blur(15px);pointer-events:none;
}
.page-locker9 .lk-bay__man{
  position:absolute;z-index:3;
  left:52.5%;width:30%;height:auto;bottom:11.5%;
  filter:drop-shadow(-15px 16px 15px rgba(0,0,0,.6)) contrast(1.04) saturate(1.03);
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 84%,rgba(0,0,0,.4) 95%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0,#000 84%,rgba(0,0,0,.4) 95%,transparent 100%);
}
/* the bench, drawn over the portrait so he stands behind it */
.page-locker9 .lk-bay__bench{
  position:absolute;z-index:4;left:7.2%;right:7.2%;bottom:9.5%;height:5.7%;
  background:linear-gradient(180deg,#6B4F2B 0,#4A3520 30%,#2C1F0D 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,226,172,.45),
    inset 0 -2px 3px rgba(0,0,0,.7),
    0 8px 14px rgba(0,0,0,.7);
  pointer-events:none;
}
.page-locker9 .lk-bay__bench::before{
  content:"";position:absolute;inset:0;
  background-image:url("/assets/img/lk-brush.webp");
  background-size:180px 46px;opacity:.4;mix-blend-mode:overlay;
}

/* --- the nameplate carrying the H1 --- */
.page-locker9 .lk-name{
  position:relative;z-index:6;
  margin:-6.5% 5% 0;
  padding:20px 26px 21px;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:0 22px;
  background:linear-gradient(178deg,#F3F5F8 0,#CFD4DB 14%,#AEB5BE 50%,#C7CCD4 76%,#8F959E 100%);
  clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%,0 14px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -2px 0 rgba(0,0,0,.30),
    0 20px 32px rgba(0,0,0,.7),
    0 3px 0 rgba(0,0,0,.45);
}
.page-locker9 .lk-name::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url("/assets/img/lk-brush.webp");
  background-size:240px 60px;opacity:.55;mix-blend-mode:multiply;
}
.page-locker9 .lk-name::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(104deg,transparent 22%,rgba(255,255,255,.55) 38%,transparent 52%);
}
.page-locker9 .lk-name__rvts{display:flex;flex-direction:column;gap:18px;position:relative;z-index:2}
.page-locker9 .lk-name__b{position:relative;z-index:2;min-width:0}
.page-locker9 .lk-name__no{
  position:relative;z-index:2;
  font-family:var(--k-num);font-weight:900;font-size:clamp(34px,5vw,64px);line-height:.84;
  color:#242930;text-shadow:0 1px 0 rgba(255,255,255,.7),0 -1px 0 rgba(0,0,0,.3);
}
.page-locker9 .lk-name__pre{
  display:block;margin-bottom:9px;
  font-family:var(--k-num);font-weight:600;font-size:10px;letter-spacing:.30em;
  text-transform:uppercase;color:#2A3037;text-shadow:0 1px 0 rgba(255,255,255,.6);
}

/* tags hanging under the unit */
.page-locker9 .lk-tags{
  display:flex;flex-wrap:wrap;justify-content:center;gap:12px;
  margin:clamp(26px,3vw,40px) auto 0;max-width:820px;
}
.page-locker9 .lk-tags li{min-width:0}
.page-locker9 .lk-tag{
  display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 16px 0 13px;
  clip-path:polygon(10px 0,100% 0,100% 100%,0 100%,0 10px);
  background:linear-gradient(168deg,#2E333B,#1A1E24);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.13),inset 0 2px 0 rgba(255,255,255,.2),0 6px 12px rgba(0,0,0,.5);
  font-family:var(--k-num);font-weight:600;font-size:11.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--k-bone);
}
.page-locker9 .lk-tag__dot{
  width:9px;height:9px;flex:none;border-radius:50%;
  background:var(--k-gold);box-shadow:0 0 9px rgba(255,198,47,.75);
}
.page-locker9 .lk-tag--p .lk-tag__dot{background:var(--k-purple-hi);box-shadow:0 0 9px rgba(116,64,188,.9)}
.page-locker9 .lk-tag--s .lk-tag__dot{background:var(--k-steel-2);box-shadow:0 0 9px rgba(188,194,203,.6)}

.page-locker9 .lk-stamp{
  display:flex;justify-content:center;align-items:center;gap:10px;margin-top:22px;
  font-family:var(--k-num);font-weight:600;font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--k-faint);
}
.page-locker9 .lk-stamp svg{width:15px;height:15px;flex:none;color:var(--k-steel-3)}

/* =========================================================
   Hook rail — jump links on hanging equipment tags
   ========================================================= */
.page-locker9 .lk-rail{
  border-top:1px solid var(--k-hair-2);border-bottom:1px solid var(--k-hair-2);
  background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(0,0,0,.4));
}
.page-locker9 .lk-rail .wrap{padding-top:16px;padding-bottom:20px}
.page-locker9 .lk-rail__bar{
  position:relative;height:9px;margin-bottom:0;
  background:linear-gradient(180deg,#8E959F 0,#E6E9EE 22%,#9AA1AB 52%,#43484F 78%,#22252A 100%);
  box-shadow:0 3px 7px rgba(0,0,0,.7);
}
.page-locker9 .lk-rail ul{display:flex;flex-wrap:wrap;gap:0 4px;margin:0;padding:0;list-style:none}
.page-locker9 .lk-rail li{min-width:0}
.page-locker9 .lk-hook{
  display:flex;flex-direction:column;justify-content:flex-end;
  min-height:66px;padding:12px 14px 11px;position:relative;
  background:linear-gradient(180deg,#262B33,#171A20);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
  transition:background 180ms var(--k-ease),transform 180ms var(--k-ease);
}
.page-locker9 .lk-hook::before{
  content:"";position:absolute;top:-15px;left:50%;width:2px;height:17px;margin-left:-1px;
  background:linear-gradient(180deg,#C9CFD7,#5C636C);
}
.page-locker9 .lk-hook__k{
  font-family:var(--k-num);font-weight:700;font-size:12.5px;letter-spacing:.10em;
  text-transform:uppercase;color:var(--k-bone);
}
.page-locker9 .lk-hook__s{
  display:block;margin-top:4px;font-family:var(--body);font-size:12.5px;color:var(--k-mute);
}
.page-locker9 .lk-hook:hover{background:linear-gradient(180deg,#333943,#1F242B);transform:translateY(2px)}
.page-locker9 .lk-hook.is-here{
  background:linear-gradient(180deg,#4F2683,#2C1449);
  box-shadow:inset 0 0 0 1px rgba(255,198,47,.55);
}
.page-locker9 .lk-hook.is-here .lk-hook__s{color:#E6DAF7}

/* =========================================================
   Lede
   ========================================================= */
.page-locker9 .lk-lede .lk-p:first-child{
  font-size:clamp(18px,1.9vw,22px);line-height:1.6;color:#FFFFFF;
}

/* =========================================================
   3. LOCKER SHELVES — role, starts, touchdowns
   ========================================================= */
.page-locker9 .lk-unit{
  position:relative;max-width:880px;
  padding:28px 30px 34px;
  background:linear-gradient(180deg,#22262D 0,#14171C 100%);
  clip-path:polygon(20px 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%,0 20px);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.11),
    inset 0 2px 0 rgba(255,255,255,.20),
    inset 0 -2px 0 rgba(0,0,0,.7);
}
.page-locker9 .lk-unit::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url("/assets/img/lk-grain.webp");background-size:160px 160px;
  opacity:.28;mix-blend-mode:overlay;
}
.page-locker9 .lk-shelves{display:flex;flex-direction:column;gap:38px;position:relative;z-index:2}
.page-locker9 .lk-shelves > li{min-width:0}

.page-locker9 .lk-shelf{position:relative;padding-bottom:20px}
/* the board: top face, front edge, and the shadow it throws below */
.page-locker9 .lk-shelf::before{
  content:"";position:absolute;left:-14px;right:-14px;bottom:0;height:13px;
  background:linear-gradient(180deg,#E4E8ED 0,#B2B8C1 24%,#787E88 56%,#383D45 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(0,0,0,.6),
    0 3px 0 rgba(0,0,0,.5);
}
.page-locker9 .lk-shelf::after{
  content:"";position:absolute;left:-14px;right:-14px;bottom:-32px;height:32px;
  background:linear-gradient(180deg,rgba(0,0,0,.72),transparent 84%);
  pointer-events:none;
}
.page-locker9 .lk-shelf__row{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:18px 28px;
  padding:0 4px 20px;
}
.page-locker9 .lk-shelf__row > *{min-width:0}
.page-locker9 .lk-shelf__lab{
  display:inline-flex;align-items:center;gap:10px;padding:7px 13px;
  background:linear-gradient(180deg,#EDF0F4,#B7BDC6 62%,#949BA4);
  clip-path:polygon(8px 0,100% 0,100% 100%,0 100%,0 8px);
  box-shadow:0 2px 4px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.9);
}
.page-locker9 .lk-shelf__val{
  margin-top:13px;
  font-family:var(--k-num);font-weight:900;font-size:clamp(30px,4.2vw,54px);line-height:.92;
  color:var(--k-bone);
  text-shadow:0 -1px 0 rgba(0,0,0,.85),0 2px 0 rgba(255,255,255,.10),0 14px 26px rgba(0,0,0,.65);
}
.page-locker9 .lk-shelf__val--t{font-size:clamp(21px,2.5vw,33px);letter-spacing:.01em}
.page-locker9 .lk-shelf__note{
  margin-top:11px;font-family:var(--body);font-size:15.5px;line-height:1.65;color:var(--k-mute);
  max-width:62ch;
}
/* the amber status lamp — its meaning is written out beside it */
.page-locker9 .lk-lamp{
  display:flex;align-items:flex-start;gap:12px;
  padding:13px 16px;max-width:340px;
  background:linear-gradient(160deg,#2E2218,#1A1410);
  clip-path:polygon(10px 0,100% 0,100% 100%,0 100%,0 10px);
  box-shadow:inset 0 0 0 1px rgba(255,198,47,.32);
}
.page-locker9 .lk-lamp__b{
  width:16px;height:16px;flex:none;margin-top:3px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#FFF0BF 0,#FFC62F 40%,#B87F00 78%,#5E4100 100%);
  box-shadow:0 0 14px 3px rgba(255,198,47,.6),inset 0 -2px 3px rgba(0,0,0,.45);
}
.page-locker9 .lk-lamp__t{
  font-family:var(--body);font-size:14px;line-height:1.55;color:#F2E7CD;min-width:0;
}
.page-locker9 .lk-lamp__t b{
  display:block;font-family:var(--k-num);font-weight:600;font-size:10.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--k-gold);margin-bottom:4px;
}

/* =========================================================
   4. QUARTERBACK WRISTBAND — 2025 statistics
   ========================================================= */
.page-locker9 .lk-wrist{
  position:relative;max-width:880px;margin-bottom:clamp(30px,3.4vw,46px);
  padding:16px 18px 18px;
  background:linear-gradient(178deg,#7746BE 0,#4F2683 32%,#331956 100%);
  clip-path:polygon(0 22px,22px 0,calc(100% - 22px) 0,100% 22px,100% calc(100% - 22px),calc(100% - 22px) 100%,22px 100%,0 calc(100% - 22px));
  box-shadow:0 24px 36px rgba(0,0,0,.66);
}
/* woven strap texture */
.page-locker9 .lk-wrist::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,transparent 1px 4px),
    repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 4px);
}
/* stitching */
.page-locker9 .lk-wrist::after{
  content:"";position:absolute;inset:7px;pointer-events:none;
  border:2px dashed rgba(255,198,47,.45);
}
.page-locker9 .lk-wrist__hd{
  position:relative;z-index:2;display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:10px 16px;padding:5px 9px 14px;
}
.page-locker9 .lk-wrist__hd > *{min-width:0}
.page-locker9 .lk-wrist__ttl{
  font-family:var(--k-num);font-weight:700;font-size:12px;letter-spacing:.24em;
  text-transform:uppercase;color:#FFF;text-shadow:0 1px 2px rgba(0,0,0,.6);
}
.page-locker9 .lk-wrist__no{
  font-family:var(--k-num);font-weight:900;font-size:26px;line-height:1;
  color:rgba(255,255,255,.38);text-shadow:0 1px 0 rgba(0,0,0,.5);
}
/* the clear window over the play sheet */
.page-locker9 .lk-wrist__win{
  position:relative;z-index:2;padding:16px;
  background:linear-gradient(170deg,#F7F6F1 0,#E4E2D8 60%,#CFCDC2 100%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.3),0 4px 10px rgba(0,0,0,.5);
}
.page-locker9 .lk-wrist__win::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(118deg,rgba(255,255,255,.72) 0,rgba(255,255,255,.16) 26%,transparent 44%,rgba(255,255,255,.32) 82%,transparent 96%);
  mix-blend-mode:screen;opacity:.55;
}
.page-locker9 .lk-cells{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;
  background:#8E8C82;padding:2px;position:relative;z-index:2;
}
.page-locker9 .lk-cells > li{min-width:0}
.page-locker9 .lk-cell{
  background:linear-gradient(180deg,#FBFAF6,#E8E6DC);
  padding:12px 12px 13px;height:100%;
}
.page-locker9 .lk-cell__k{
  font-family:var(--k-num);font-weight:600;font-size:9.5px;letter-spacing:.17em;
  text-transform:uppercase;color:#55524A;
}
.page-locker9 .lk-cell__v{
  margin-top:7px;font-family:var(--k-num);font-weight:900;
  font-size:clamp(22px,2.6vw,34px);line-height:.94;color:#1B1D22;
}

/* play-sheet panel holding the real tables */
.page-locker9 .lk-sheet{
  position:relative;max-width:880px;padding:24px 26px 26px;
  background:linear-gradient(172deg,#1E232A,#111419);
  clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10),inset 0 2px 0 rgba(255,255,255,.2),0 18px 28px rgba(0,0,0,.5);
}
.page-locker9 .lk-sheet + .lk-sheet{margin-top:22px}
.page-locker9 .lk-sheet__lab{display:flex;align-items:center;gap:11px;margin-bottom:16px}
.page-locker9 .lk-sheet__lab::after{content:"";flex:1 1 auto;height:1px;background:rgba(255,255,255,.13)}
.page-locker9 .lk-tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
.page-locker9 .lk-tbl{width:100%;border-collapse:collapse;font-family:var(--body);font-size:15.5px}
.page-locker9 .lk-tbl caption{
  text-align:left;padding-bottom:12px;
  font-family:var(--k-num);font-weight:600;font-size:10.5px;letter-spacing:.19em;
  text-transform:uppercase;color:var(--k-gold);
}
.page-locker9 .lk-tbl th,
.page-locker9 .lk-tbl td{padding:11px 14px;text-align:left;border-bottom:1px solid rgba(255,255,255,.08)}
.page-locker9 .lk-tbl thead th{
  font-family:var(--k-num);font-weight:600;font-size:10px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--k-mute);
  background:rgba(255,255,255,.045);border-bottom:1px solid rgba(255,255,255,.16);
}
.page-locker9 .lk-tbl tbody th{font-weight:400;color:var(--k-bone)}
.page-locker9 .lk-tbl td{
  font-family:var(--k-num);font-weight:700;font-size:16px;color:#FFF;
  text-align:right;white-space:nowrap;
}
.page-locker9 .lk-tbl thead th:last-child{text-align:right}
.page-locker9 .lk-tbl tbody tr:nth-child(odd) th,
.page-locker9 .lk-tbl tbody tr:nth-child(odd) td{background:rgba(255,255,255,.022)}
.page-locker9 .lk-tbl tbody tr:last-child th,
.page-locker9 .lk-tbl tbody tr:last-child td{border-bottom:0}

/* =========================================================
   2. LAMINATED TWO-SIDED CREDENTIAL
   ========================================================= */
.page-locker9 .lk-credgrid{
  display:grid;grid-template-columns:minmax(0,330px) minmax(0,1fr);
  gap:clamp(28px,4vw,60px);align-items:start;
}
.page-locker9 .lk-credgrid > *{min-width:0}

.page-locker9 .lk-hang{position:relative;padding-top:74px}
.page-locker9 .lk-hang__strap{
  position:absolute;top:0;left:50%;width:34px;height:62px;margin-left:-17px;
  background:linear-gradient(90deg,#2C1449 0,#4F2683 32%,#7440BC 52%,#3A1B62 100%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.5);
}
.page-locker9 .lk-hang__strap::after{
  content:"";position:absolute;left:6px;right:6px;top:8px;bottom:8px;
  background:repeating-linear-gradient(0deg,rgba(255,198,47,.42) 0 3px,transparent 3px 9px);
}
.page-locker9 .lk-hang__clip{
  position:absolute;top:54px;left:50%;width:52px;height:22px;margin-left:-26px;z-index:3;
  background:linear-gradient(180deg,#EEF1F5 0,#B6BCC5 38%,#71787F 72%,#31353B 100%);
  clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 100%,0 100%);
  box-shadow:0 3px 6px rgba(0,0,0,.7);
}

.page-locker9 .lk-cred{position:relative;perspective:1500px}
.page-locker9 .lk-cred__stage{position:relative}
.page-locker9 .lk-cred__inner{position:relative;transform-style:preserve-3d;transition:transform var(--k-flip) var(--k-ease)}
/* in flip mode the inner must fill the stage, otherwise the absolutely
   positioned faces collapse to zero height and their laminate disappears */
.page-locker9 .lk-cred--js .lk-cred__inner{position:absolute;inset:0}
.page-locker9 .lk-cred--js .lk-cred__face{
  position:absolute;inset:0;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  /* deliberately NOT scrollable: a hidden scroll container becomes a
     keyboard tab stop on an element nobody can see. */
  overflow:visible;
  visibility:hidden;transition:visibility 0s linear var(--k-flip);
}
.page-locker9 .lk-cred--js .lk-cred__face--front{visibility:visible;transition-delay:0s}
.page-locker9 .lk-cred--js .lk-cred__face--back{transform:rotateY(180deg)}
.page-locker9 .lk-cred--js.is-flipped .lk-cred__inner{transform:rotateY(180deg)}
.page-locker9 .lk-cred--js.is-flipped .lk-cred__face--front{visibility:hidden;transition-delay:var(--k-flip)}
.page-locker9 .lk-cred--js.is-flipped .lk-cred__face--back{visibility:visible;transition-delay:0s}

/* the laminate itself */
.page-locker9 .lk-cred__face{
  position:relative;padding:18px 18px 20px;
  display:flex;flex-direction:column;
  background:linear-gradient(168deg,#FCFBF7 0,#EFEDE5 46%,#DAD8CE 100%);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.24),
    inset 0 0 0 7px rgba(255,255,255,.72),
    0 22px 32px rgba(0,0,0,.62);
  color:#1C1F24;
}
.page-locker9 .lk-cred__face + .lk-cred__face{margin-top:18px}
.page-locker9 .lk-cred__face::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(122deg,rgba(255,255,255,.85) 0,rgba(255,255,255,.12) 22%,transparent 40%,rgba(255,255,255,.34) 76%,transparent 92%);
  mix-blend-mode:screen;opacity:.5;
}
/* punched slot at the head of the card */
.page-locker9 .lk-cred__face::before{
  content:"";position:absolute;top:11px;left:50%;width:56px;height:9px;margin-left:-28px;
  background:#0F1114;border-radius:5px;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.75);
}
.page-locker9 .lk-cred__cap{
  display:block;margin:16px 0 14px;text-align:center;
  font-family:var(--k-num);font-weight:600;font-size:9.5px;letter-spacing:.22em;
  text-transform:uppercase;color:#585E66;
}
.page-locker9 .lk-cred__top{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center;margin-bottom:18px}
.page-locker9 .lk-cred__top > *{min-width:0}
.page-locker9 .lk-cred__shot{
  width:96px;height:96px;flex:none;
  background:linear-gradient(180deg,#4F2683,#241039);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.4),0 3px 6px rgba(0,0,0,.4);
}
.page-locker9 .lk-cred__no{font-family:var(--k-num);font-weight:900;font-size:40px;line-height:1.02;color:#4F2683}
.page-locker9 .lk-cred__nm{
  margin-top:7px;font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:22px;line-height:1.05;letter-spacing:.01em;color:#15181C;
}
.page-locker9 .lk-cred__ro{
  margin-top:3px;font-family:var(--k-num);font-weight:600;font-size:10.5px;
  letter-spacing:.19em;text-transform:uppercase;color:#585E66;
}
.page-locker9 .lk-cred__mark{
  display:block;margin:6px 0 4px;text-align:center;
  font-family:var(--k-num);font-weight:900;font-size:118px;line-height:.86;
  color:transparent;-webkit-text-stroke:2px rgba(79,38,131,.24);
}
.page-locker9 .lk-cred__band{
  margin-top:auto;padding:12px 12px;
  background:linear-gradient(180deg,#4F2683,#2C1449);
  font-family:var(--k-num);font-weight:600;font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:#FFF;text-align:center;
}
.page-locker9 .lk-cred__facts{margin:0;display:grid;gap:0;align-content:space-between;flex:1 1 auto}
.page-locker9 .lk-cred__facts > div{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:baseline;
  padding:7px 2px;border-bottom:1px dotted rgba(0,0,0,.26);
}
.page-locker9 .lk-cred__facts > div:last-child{border-bottom:0}
.page-locker9 .lk-cred__facts dt{
  font-family:var(--k-num);font-weight:600;font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:#585E66;min-width:0;
}
.page-locker9 .lk-cred__facts dd{
  margin:0;font-family:var(--k-num);font-weight:700;font-size:14px;color:#15181C;
  text-align:right;min-width:0;
}
.page-locker9 .lk-flip{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;min-height:48px;margin-top:16px;padding:12px 18px;
  background:linear-gradient(180deg,#2E333B,#171A20);
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),inset 0 2px 0 rgba(255,255,255,.22),0 6px 12px rgba(0,0,0,.5);
  font-family:var(--k-num);font-weight:600;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--k-bone);
}
.page-locker9 .lk-flip:hover{background:linear-gradient(180deg,#3A414B,#1E232A)}
.page-locker9 .lk-flip svg{width:17px;height:17px;flex:none;color:var(--k-gold)}
.page-locker9 .lk-flip__t{min-width:0}

/* =========================================================
   5. THREE GAME BALLS
   ========================================================= */
.page-locker9 .lk-table{
  position:relative;padding:34px 24px 30px;
  background:linear-gradient(180deg,#2A2016 0,#1A1410 58%,#0E0B08 100%);
  clip-path:polygon(24px 0,100% 0,100% calc(100% - 24px),calc(100% - 24px) 100%,0 100%,0 24px);
  box-shadow:inset 0 2px 0 rgba(255,214,150,.26),inset 0 0 0 1px rgba(255,255,255,.07);
}
.page-locker9 .lk-table::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url("/assets/img/lk-brush.webp");background-size:300px 76px;
  opacity:.4;mix-blend-mode:overlay;
}
.page-locker9 .lk-balls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;position:relative;z-index:2}
.page-locker9 .lk-balls > li{min-width:0}
.page-locker9 .lk-ball{
  height:100%;
  background:linear-gradient(172deg,rgba(255,255,255,.06),rgba(0,0,0,.36));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
}
.page-locker9 .lk-ball > summary{display:block;list-style:none;cursor:pointer;padding:20px 18px 22px;min-height:44px}
.page-locker9 .lk-ball > summary::-webkit-details-marker{display:none}
.page-locker9 .lk-ball__fig{
  display:block;width:100%;max-width:190px;height:auto;margin:0 auto 16px;
  filter:drop-shadow(0 14px 12px rgba(0,0,0,.75));
  transition:transform 260ms var(--k-ease);
}
.page-locker9 .lk-ball > summary:hover .lk-ball__fig{transform:translateY(-4px) rotate(-2deg)}
.page-locker9 .lk-ball__t{
  display:block;text-align:center;
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:19px;line-height:1.1;letter-spacing:.02em;color:var(--k-bone);
}
.page-locker9 .lk-ball__d{
  display:block;margin:9px auto 0;width:max-content;max-width:100%;padding:4px 11px;
  background:linear-gradient(180deg,#EFECE3,#CFCBBF);
  font-family:var(--k-num);font-weight:600;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:#2A2E34;transform:rotate(-1.4deg);
  box-shadow:0 2px 4px rgba(0,0,0,.5);
}
.page-locker9 .lk-ball__more{
  display:flex;align-items:center;justify-content:center;gap:8px;margin-top:15px;
  font-family:var(--k-num);font-weight:600;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--k-gold);
}
.page-locker9 .lk-ball__more svg{width:14px;height:14px;transition:transform 200ms var(--k-ease)}
.page-locker9 .lk-ball[open] .lk-ball__more svg{transform:rotate(180deg)}
.page-locker9 .lk-ball__body{padding:16px 18px 20px;border-top:1px solid rgba(255,255,255,.10)}
.page-locker9 .lk-ball__body .lk-p{font-size:15.5px;line-height:1.68}
.page-locker9 .lk-line{margin-top:14px;display:grid;gap:0}
.page-locker9 .lk-line li{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:baseline;
  padding:8px 0;border-bottom:1px solid rgba(255,255,255,.08);
}
.page-locker9 .lk-line li:last-child{border-bottom:0}
.page-locker9 .lk-line span{
  font-family:var(--k-num);font-weight:600;font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--k-mute);min-width:0;
}
.page-locker9 .lk-line b{font-family:var(--k-num);font-weight:900;font-size:16px;color:#FFF;min-width:0;text-align:right}

/* =========================================================
   6. TWO LOCKER DOORS
   ========================================================= */
.page-locker9 .lk-doors{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,44px);
  perspective:1800px;
}
.page-locker9 .lk-doors > *{min-width:0}
.page-locker9 .lk-door{
  position:relative;padding:0 0 26px;
  background:linear-gradient(178deg,#262B33 0,#1A1E24 40%,#0F1216 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.11),
    inset 0 2px 0 rgba(255,255,255,.22),
    0 28px 42px rgba(0,0,0,.66);
  transform-origin:left center;transform:rotateY(6deg);
  transition:transform 420ms var(--k-ease);
}
.page-locker9 .lk-door--r{transform-origin:right center;transform:rotateY(-6deg)}
.page-locker9 .lk-door:hover{transform:rotateY(3deg)}
.page-locker9 .lk-door--r:hover{transform:rotateY(-3deg)}
.page-locker9 .lk-door::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url("/assets/img/lk-grain.webp");background-size:160px 160px;
  opacity:.26;mix-blend-mode:overlay;
}
/* the hinged edge reads as real thickness */
.page-locker9 .lk-door::after{
  content:"";position:absolute;top:0;bottom:0;width:10px;
  background:linear-gradient(90deg,#666D77,#1E2228);
  box-shadow:inset 1px 0 0 rgba(255,255,255,.3);
}
.page-locker9 .lk-door--l::after{left:0}
.page-locker9 .lk-door--r::after{right:0;background:linear-gradient(270deg,#666D77,#1E2228);box-shadow:inset -1px 0 0 rgba(255,255,255,.3)}
/* louvres at the head of each door */
.page-locker9 .lk-door__lv{
  position:relative;height:36px;margin:16px 24px 0;
  background:repeating-linear-gradient(180deg,
    #07090B 0 3px,#3E444C 3px 4px,#171B21 4px 8px,rgba(255,255,255,.11) 8px 9px,transparent 9px 11px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),inset 0 0 10px rgba(0,0,0,.8);
}
.page-locker9 .lk-door__hd{display:flex;align-items:center;gap:13px;padding:18px 24px 16px}
.page-locker9 .lk-door__hd > *{min-width:0}
.page-locker9 .lk-door__ic{
  width:36px;height:36px;flex:none;padding:8px;
  background:linear-gradient(160deg,#EDF0F4,#9AA1AB);
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
  color:#2C1449;box-shadow:0 2px 4px rgba(0,0,0,.6);
}
.page-locker9 .lk-door--r .lk-door__ic{color:#5A3A00}
.page-locker9 .lk-door__sub{display:block;margin-top:4px;font-family:var(--body);font-size:13.5px;color:var(--k-mute)}
.page-locker9 .lk-notes{display:grid;gap:14px;padding:6px 24px 0}
.page-locker9 .lk-notes > li{min-width:0}
.page-locker9 .lk-note{
  position:relative;padding:16px 16px 16px;
  background:linear-gradient(170deg,#FAF8F0 0,#EDE9DB 100%);
  color:#1B1E23;
  box-shadow:0 9px 15px rgba(0,0,0,.55),inset 0 0 0 1px rgba(0,0,0,.14);
  transform:rotate(-.5deg);
}
.page-locker9 .lk-notes > li:nth-child(2n) .lk-note{transform:rotate(.6deg)}
/* the magnet */
.page-locker9 .lk-note::before{
  content:"";position:absolute;top:-7px;left:50%;width:20px;height:20px;margin-left:-10px;
  border-radius:50%;
  background:radial-gradient(circle at 34% 28%,#FFF 0,#FFC62F 34%,#C08800 72%,#5E4100 100%);
  box-shadow:0 3px 6px rgba(0,0,0,.65);
}
.page-locker9 .lk-note h4{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:15.5px;letter-spacing:.03em;color:#2C1449;margin-bottom:7px;padding-top:7px;
}
.page-locker9 .lk-note p{font-family:var(--body);font-size:15px;line-height:1.62;color:#31363D}
/* plain paper slip (the draft reasons) */
.page-locker9 .lk-slips{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:13px}
.page-locker9 .lk-slips > li{min-width:0}
.page-locker9 .lk-slip{
  display:block;height:100%;padding:14px 16px;
  background:linear-gradient(170deg,#FAF8F0,#E9E5D7);
  color:#2A2E34;font-family:var(--body);font-size:15px;line-height:1.55;
  box-shadow:0 8px 13px rgba(0,0,0,.48),inset 0 0 0 1px rgba(0,0,0,.13);
  border-left:5px solid var(--k-purple);
}

/* =========================================================
   7. ATHLETIC-TAPE CAREER MILESTONES
   ========================================================= */
.page-locker9 .lk-frame{position:relative;padding:30px 0 34px 74px}
/* the upright locker post the tape is wrapped around */
.page-locker9 .lk-frame::before{
  content:"";position:absolute;left:26px;top:0;bottom:0;width:26px;
  background:linear-gradient(90deg,#15181C 0,#4E555F 20%,#A2A9B3 46%,#5C636C 70%,#13161A 100%);
  box-shadow:0 0 22px rgba(0,0,0,.75);
}
.page-locker9 .lk-frame::after{
  content:"";position:absolute;left:52px;top:0;bottom:0;width:24px;
  background:linear-gradient(90deg,rgba(0,0,0,.75),transparent);
  pointer-events:none;
}
.page-locker9 .lk-key{
  display:flex;flex-wrap:wrap;gap:10px 20px;margin-bottom:14px;
  font-family:var(--body);font-size:14.5px;color:var(--k-mute);
}
.page-locker9 .lk-key li{display:flex;align-items:center;gap:9px;min-width:0}
.page-locker9 .lk-key i{width:26px;height:11px;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.45),0 1px 2px rgba(0,0,0,.6)}
.page-locker9 .lk-key .lk-k-m{background:linear-gradient(180deg,#FFDB4D,#E0AC00)}
.page-locker9 .lk-key .lk-k-v{background:linear-gradient(180deg,#7440BC,#3C1D66)}
.page-locker9 .lk-key .lk-k-i{background:linear-gradient(180deg,#FFFFFF,#CFCBBF)}

.page-locker9 .lk-strips{display:flex;flex-direction:column;gap:16px;position:relative;z-index:2}
.page-locker9 .lk-strips > li{min-width:0}
.page-locker9 .lk-strip{
  position:relative;margin-left:-62px;padding:15px 20px 16px 76px;
  clip-path:polygon(
    0 4%,2% 0,5% 6%,8% 1%,11% 7%,100% 5%,
    100% 94%,11% 96%,8% 100%,5% 93%,2% 99%,0 95%);
  box-shadow:0 9px 15px rgba(0,0,0,.6);
  transform:rotate(-.4deg);
}
.page-locker9 .lk-strips > li:nth-child(2n) .lk-strip{transform:rotate(.45deg)}
.page-locker9 .lk-strips > li:nth-child(3n) .lk-strip{transform:rotate(-.7deg)}
.page-locker9 .lk-strip::before{
  content:"";position:absolute;left:14px;width:26px;top:0;bottom:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.34) 0,rgba(255,255,255,.18) 46%,rgba(0,0,0,.38) 100%);
}
.page-locker9 .lk-strip::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(0,0,0,.055) 0 1px,transparent 1px 3px);
}
.page-locker9 .lk-strip--m{background:linear-gradient(180deg,#FFE477 0,#FFCB05 34%,#D8A400 100%)}
.page-locker9 .lk-strip--v{background:linear-gradient(180deg,#8551CC 0,#4F2683 40%,#2C1449 100%)}
.page-locker9 .lk-strip--i{background:linear-gradient(180deg,#FFFFFF 0,#EFECE3 40%,#C9C5B8 100%)}
.page-locker9 .lk-strip__yr{display:block;font-family:var(--k-num);font-weight:900;font-size:15px;letter-spacing:.02em;line-height:1}
.page-locker9 .lk-strip__tag{
  display:inline-block;margin-top:7px;padding:3px 9px;
  font-family:var(--k-num);font-weight:600;font-size:9px;letter-spacing:.16em;text-transform:uppercase;
}
.page-locker9 .lk-strip__tx{margin-top:10px;font-family:var(--body);font-size:15.5px;line-height:1.6;max-width:64ch}
/* ink colours per tape, each ≥ 4.5:1 against its own strip */
.page-locker9 .lk-strip--m .lk-strip__yr,
.page-locker9 .lk-strip--m .lk-strip__tx,
.page-locker9 .lk-strip--i .lk-strip__yr,
.page-locker9 .lk-strip--i .lk-strip__tx{color:#1E1804}
.page-locker9 .lk-strip--m .lk-strip__tag,
.page-locker9 .lk-strip--i .lk-strip__tag{background:rgba(0,0,0,.82);color:#FFF}
.page-locker9 .lk-strip--v .lk-strip__yr,
.page-locker9 .lk-strip--v .lk-strip__tx{color:#F7F2FF}
.page-locker9 .lk-strip--v .lk-strip__tag{background:#FFC62F;color:#241000}

/* =========================================================
   8. METAL LOCKER-VENT FAQ DRAWERS
   ========================================================= */
.page-locker9 .lk-vents{display:grid;gap:12px;max-width:940px}
.page-locker9 .lk-vents > li{min-width:0}
.page-locker9 .lk-vent{
  position:relative;
  background:linear-gradient(178deg,#282D35 0,#191D23 46%,#0E1115 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.11),
    inset 0 2px 0 rgba(255,255,255,.22),
    inset 0 -2px 0 rgba(0,0,0,.7),
    0 12px 20px rgba(0,0,0,.55);
}
.page-locker9 .lk-vent > summary{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;
  list-style:none;cursor:pointer;min-height:64px;padding:12px 18px;
}
.page-locker9 .lk-vent > summary::-webkit-details-marker{display:none}
.page-locker9 .lk-vent > summary > *{min-width:0}
.page-locker9 .lk-vent__lv{
  width:44px;height:34px;flex:none;
  background:repeating-linear-gradient(180deg,
    #07090B 0 2px,#4A5058 2px 3px,#171B21 3px 6px,rgba(255,255,255,.14) 6px 7px,transparent 7px 9px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),inset 0 0 8px rgba(0,0,0,.85);
}
.page-locker9 .lk-vent__q{
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:clamp(15px,1.55vw,18px);line-height:1.24;letter-spacing:.025em;color:var(--k-bone);
}
.page-locker9 .lk-vent__pull{
  width:44px;height:44px;flex:none;display:grid;place-items:center;
  background:linear-gradient(180deg,#D8DDE4,#8A9099 52%,#3E434A);
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
  box-shadow:0 3px 6px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.9);
  color:#15181C;
}
.page-locker9 .lk-vent__pull svg{width:20px;height:20px;transition:transform 220ms var(--k-ease)}
.page-locker9 .lk-vent[open] .lk-vent__pull svg{transform:rotate(180deg)}
.page-locker9 .lk-vent > summary:hover .lk-vent__pull{background:linear-gradient(180deg,#EDF1F6,#979DA6 52%,#4A5058)}
/* the drawer that slides out */
.page-locker9 .lk-vent__dr{
  margin:0 14px 14px;padding:16px 18px 17px;
  background:linear-gradient(178deg,#0A0C10,#12161B);
  box-shadow:inset 0 3px 10px rgba(0,0,0,.85),inset 0 0 0 1px rgba(255,255,255,.07);
  border-left:4px solid var(--k-purple-hi);
}
.page-locker9 .lk-vent[open] .lk-vent__dr{animation:lk-slide 300ms var(--k-ease) both}
@keyframes lk-slide{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* =========================================================
   Closing slab
   ========================================================= */
.page-locker9 .lk-outro{
  position:relative;padding-top:clamp(46px,5.4vw,80px);padding-bottom:clamp(52px,6vw,90px);
  background:linear-gradient(180deg,rgba(79,38,131,.24),rgba(0,0,0,.55));
  border-top:1px solid var(--k-hair-2);
}
.page-locker9 .lk-slab{
  position:relative;padding:clamp(26px,3vw,42px);
  background:linear-gradient(166deg,#242931 0,#171B21 46%,#0D1014 100%);
  clip-path:polygon(26px 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%,0 26px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.11),inset 0 2px 0 rgba(255,255,255,.2),0 28px 46px rgba(0,0,0,.62);
}
.page-locker9 .lk-slab::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url("/assets/img/lk-grain.webp");background-size:160px 160px;
  opacity:.26;mix-blend-mode:overlay;
}
.page-locker9 .lk-slab > *{position:relative;z-index:2}
.page-locker9 .lk-links{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:13px;
  margin-top:clamp(20px,2.4vw,32px);
}
.page-locker9 .lk-links > li{min-width:0}
.page-locker9 .lk-link{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  min-height:56px;padding:14px 18px;height:100%;
  background:linear-gradient(180deg,#2E333B,#171A20);
  clip-path:polygon(11px 0,100% 0,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%,0 11px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.13),inset 0 2px 0 rgba(255,255,255,.2);
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:14px;letter-spacing:.05em;color:var(--k-bone);
}
.page-locker9 .lk-link > span{min-width:0}
.page-locker9 .lk-link svg{width:20px;height:20px;flex:none;color:var(--k-gold)}
.page-locker9 .lk-link:hover{background:linear-gradient(180deg,#4F2683,#2C1449)}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:1000px){
  .page-locker9 .lk-credgrid{grid-template-columns:minmax(0,1fr)}
  .page-locker9 .lk-hang{max-width:340px;margin-left:auto;margin-right:auto}
  .page-locker9 .lk-balls{grid-template-columns:minmax(0,1fr)}
  .page-locker9 .lk-doors{grid-template-columns:minmax(0,1fr);perspective:none}
  .page-locker9 .lk-door,
  .page-locker9 .lk-door--r,
  .page-locker9 .lk-door:hover,
  .page-locker9 .lk-door--r:hover{transform:none}
}
@media (max-width:760px){
  .page-locker9 .lk-name{margin:16px 0 0;padding:34px 18px 17px;grid-template-columns:minmax(0,1fr) auto;gap:0 16px}
  .page-locker9 .lk-name__rvts{
    flex-direction:row;gap:0;position:absolute;top:11px;left:15px;right:15px;justify-content:space-between;
  }
  .page-locker9 .lk-shelf__row{grid-template-columns:minmax(0,1fr)}
  .page-locker9 .lk-cells{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-locker9 .lk-frame{padding-left:52px}
  .page-locker9 .lk-frame::before{left:14px;width:18px}
  .page-locker9 .lk-frame::after{left:32px;width:16px}
  .page-locker9 .lk-strip{margin-left:-44px;padding-left:58px}
  .page-locker9 .lk-vent > summary{grid-template-columns:minmax(0,1fr) auto;gap:12px}
  .page-locker9 .lk-vent__lv{display:none}
}
@media (max-width:520px){
  .page-locker9 .lk-cells{grid-template-columns:minmax(0,1fr)}
  .page-locker9 .lk-unit{padding-left:18px;padding-right:18px}
  .page-locker9 .lk-sheet{padding-left:16px;padding-right:16px}
  .page-locker9 .lk-table{padding-left:14px;padding-right:14px}
  .page-locker9 .lk-notes,
  .page-locker9 .lk-door__hd{padding-left:16px;padding-right:16px}
  .page-locker9 .lk-door__lv{margin-left:16px;margin-right:16px}
  .page-locker9 .lk-tbl th,
  .page-locker9 .lk-tbl td{padding-left:9px;padding-right:9px}
  .page-locker9 .lk-head{grid-template-columns:minmax(0,1fr);gap:10px}
}

/* =========================================================
   Reduced motion — flip, doors, drawers and hero all settle
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  .page-locker9 *,
  .page-locker9 *::before,
  .page-locker9 *::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .page-locker9{--k-flip:.001ms}
  .page-locker9 .lk-cred--js .lk-cred__inner{transition:none}
  .page-locker9 .lk-vent[open] .lk-vent__dr{animation:none}
  .page-locker9 .lk-door,
  .page-locker9 .lk-door--r,
  .page-locker9 .lk-door:hover,
  .page-locker9 .lk-door--r:hover{transform:none}
  .page-locker9 .lk-ball > summary:hover .lk-ball__fig{transform:none}
  .page-locker9 .lk-hook:hover{transform:none}
}

/* =========================================================
   Jersey lettering inside the hero artwork
   ========================================================= */
.page-locker9 .lk-kitno{
  font-family:var(--k-num);font-weight:900;font-size:132px;
  fill:#F1EAFC;stroke:#FFC62F;stroke-width:2.6;paint-order:stroke fill;
}
.page-locker9 .lk-kitname{
  font-family:var(--k-num);font-weight:600;font-size:13px;letter-spacing:1.1px;
  fill:#E2D5F7;
}