@font-face{font-family:'Marker';src:url(marker.4884fec2c7.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Shoulders';src:url(shoulders.4d97fd4730.woff2) format('woff2');font-weight:800 900;font-display:swap}
@font-face{font-family:'Body';src:url(body.94593e69fa.woff2) format('woff2');font-weight:400 700;font-display:swap}
:root{
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:20px;--s-6:24px;--s-8:32px;
  --room:#120f0e;--chalk:#ece6dc;--chalk-2:#a99f92;--chalk-3:#7c7369;
  --lamp:#ffb100;--paint-red:#c8102e;--paint-blue:#0a53a8;
  --sheet:#f2eee6;--ink:#17130f;--ink-2:#554d44;--ink-3:#847b70;
  --display:'Shoulders','Big Shoulders Display','Arial Narrow',sans-serif;
  --marker:'Marker','Permanent Marker',cursive;
  --body:'Body','Public Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  /* the whiteboard, measured off the photograph */
  --bx:28.4%;--by:28.9%;--bw:40.9%;--bh:31.4%;
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--room);color:var(--chalk);
  font:400 16px/1.5 var(--body);font-variant-numeric:tabular-nums;overflow:hidden}
h1,h2,h3{font-family:var(--display);font-weight:900;line-height:.94;text-transform:uppercase;letter-spacing:-.005em;margin:0}

/* The stage. One screen: the room is the page, and nothing scrolls but the
   board itself, the way a board is what gets rewritten while the room stays. */
.stage{position:fixed;inset:0;display:grid;place-items:center;overflow:hidden;background:#0b0908}
/* The room is a photograph and the board is a rectangle inside it, so the
   picture is never cropped: cover would slide the board out from under the
   panel written on top of it. It is fitted whole and the screen letterboxes. */
.room{position:relative;aspect-ratio:1536/1024;width:min(100vw, calc(100dvh * 1536 / 1024));
  height:auto;background:#0b0908 center/100% 100% no-repeat}

.board{position:absolute;left:var(--bx);top:var(--by);width:var(--bw);height:var(--bh);background:var(--sheet);z-index:2;
  display:flex;flex-direction:column;color:var(--ink);padding:1.4% 1.6%;
  container-type:size}
.board .inner{overflow-y:auto;overflow-x:hidden;flex:1;scrollbar-width:thin;
  scrollbar-color:#0003 #0000;padding-right:.4em}
.board h2{font-size:clamp(13px,2.2cqw,30px);margin:0 0 .35em;color:var(--ink)}
.board p{margin:0 0 .6em;font-size:clamp(9px,1.35cqw,17px);line-height:1.42;color:var(--ink-2);max-width:60ch}
.board .fig{font-family:var(--display);font-weight:900;font-size:1.18em;color:var(--ink)}
.board .note{font-size:clamp(8px,1.05cqw,13px);color:var(--ink-3)}
.k{font-family:var(--display);font-weight:800;font-size:clamp(7px,.95cqw,12px);
  letter-spacing:.14em;text-transform:uppercase;color:#a8321f;margin:0 0 .3em}


/* Dry-erase marker. A marker line is never level, never the same weight twice,
   and the ink sits slightly proud of the surface — so each line is nudged a
   fraction of a degree, and the colours are the three markers that are actually
   in the tray. Big, because a board is read across a room and not at arm's
   length. */
.board .mk{font-family:var(--marker);font-weight:400;color:#211c17;margin:0 0 .46em;
  font-size:clamp(15px,5.6cqw,52px);line-height:1.2;letter-spacing:.004em;
  text-shadow:0 .012em .02em #21181033;max-width:none}
.board .mk-0{transform:rotate(-.45deg)}.board .mk-1{transform:rotate(.3deg)}
.board .mk-2{transform:rotate(-.2deg)}.board .mk-3{transform:rotate(.5deg)}
.board .mk em{font-style:normal}
.board .mk .red{color:#a8281a}.board .mk .blue{color:#1d4f86}
.points{display:flex;flex-direction:column;justify-content:center;flex:1;min-height:0}
.detail{display:none}
.board.open .points{display:none}
.board.open .detail{display:block}
/* the ghost of what was rubbed out last time */
.board::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(112deg,#0000 0 14px,#2118100a 14px 15px,#0000 15px 44px),
             repeating-linear-gradient(67deg,#0000 0 21px,#21181008 21px 22px,#0000 22px 58px)}
/* THE REST: the marker note in the corner that says there is more */
.more{position:absolute;right:1.4%;bottom:1.2%;z-index:3;
  font-family:var(--marker);font-size:clamp(8px,1.25cqw,16px);color:#1d4f86;
  background:none;border:0;cursor:pointer;padding:.2em .3em;transform:rotate(-1.1deg)}
.more::after{content:'';display:block;height:.1em;background:#1d4f86;opacity:.6;margin-top:.1em}
.more:hover{color:#a8281a}.more:hover::after{background:#a8281a}
.more:focus-visible{outline:2px solid #1d4f86;outline-offset:2px}

/* what is written on the board */
table{width:100%;border-collapse:collapse;font-size:clamp(8px,1.1cqw,14px)}
th,td{text-align:right;padding:.28em .35em;border-bottom:1px solid #0000001f}
th:first-child,td:first-child{text-align:left}
thead th{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(7px,.95cqw,12px);letter-spacing:.04em;border-bottom:1.5px solid var(--ink);position:sticky;top:0;background:var(--sheet)}
td.move{font-family:var(--display);font-weight:900;font-size:1.25em}
.lib{box-shadow:inset 3px 0 0 var(--paint-red)}.con{box-shadow:inset 3px 0 0 var(--paint-blue)}
svg{display:block;width:100%;height:auto}
.grid{stroke:#0000001f;stroke-width:1}.zero{stroke:var(--ink);stroke-width:2}
.sep{stroke:var(--paint-red);stroke-width:1.25;opacity:.55}
.gapline{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linejoin:round}
.ytick,.xtick{fill:#6d675e;font-family:var(--body);font-size:11.5px}
.stalls{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:.35em}
.stall{border-top:2px solid #0000002e;padding:.3em .1em .35em;min-width:0}
.stall .nm{display:block;font-family:var(--display);font-weight:800;
  font-size:clamp(7px,.92cqw,12px);text-transform:uppercase;line-height:1.05;color:var(--ink-2);overflow-wrap:anywhere}
.stall .gp{display:block;font-family:var(--display);font-weight:900;font-size:clamp(10px,1.5cqw,19px)}
.stall.hot .gp{color:#a8321f}.stall.hot{border-top-color:#a8321f}
.stall.warm .gp{color:#a86a1f}.stall.mid .gp{color:var(--ink-3)}
.stall.cool .gp{color:#3d6b8c}.stall.cold .gp{color:#1d4f86}.stall.cold{border-top-color:#1d4f86}
ul.src{list-style:none;padding:0;margin:0;font-size:clamp(8px,1.05cqw,13px);color:var(--ink-2)}
ul.src li{padding:.4em 0;border-bottom:1px solid #0000001a}
ul.src a{color:#8a2a17}
.callout{background:var(--ink);color:var(--sheet);padding:.6em .7em;border-left:3px solid var(--lamp);margin:0 0 .6em}
.callout .fig{color:var(--lamp)}


/* The two lights in the room. The hanging lamp over the board breathes; the
   fluorescent tube in the top right does what a tired tube does. Positions are
   measured off the photograph. Both are decorative and both stop dead for
   anyone who has asked for less motion. */
.lights{position:absolute;inset:0;pointer-events:none;z-index:1;mix-blend-mode:screen}
.lamp{position:absolute;left:47.4%;top:20.5%;width:34%;height:34%;transform:translate(-50%,-50%);
  background:radial-gradient(circle,#ffcf8a4d 0%,#ffb1001f 38%,#0000 70%);
  animation:breathe 6.5s ease-in-out infinite}
.tube{position:absolute;left:83.5%;top:6.5%;width:17%;height:9%;transform:translate(-50%,-50%);
  background:radial-gradient(ellipse,#cfe6ff54 0%,#9dc6ff1c 45%,#0000 72%);
  animation:stutter 9s steps(1,end) infinite}
@keyframes breathe{0%,100%{opacity:.78}44%{opacity:1}72%{opacity:.86}}
@keyframes stutter{
  0%,84%{opacity:.85}
  85%{opacity:.25}86%{opacity:.95}87%{opacity:.3}
  88.5%{opacity:1}89.5%{opacity:.45}91%{opacity:.92}100%{opacity:.85}}
@media (prefers-reduced-motion:reduce){
  .lamp,.tube{animation:none}
  .tabs button::after{animation:none;opacity:0}
}


/* The narration control. It sits with the tabs because it is the same kind of
   thing: a way to move through the boards. It reads as a lamp rather than a
   button, which is the only warm object in the room. */
.listen{display:inline-flex;align-items:center;gap:.6em;cursor:pointer;
  background:#120f0ee6;color:var(--lamp);border:1px solid #ffb10066;
  padding:.5em .95em;font-family:var(--display);font-weight:800;text-transform:uppercase;
  letter-spacing:.08em;font-size:clamp(8px,.8vw,13px);line-height:1;
  box-shadow:0 0 22px #ffb10026;transition:box-shadow .2s,border-color .2s,color .2s}
.listen .ico{font-size:1.1em}
.listen .len{color:var(--chalk-3);letter-spacing:.04em;font-weight:800}
.listen:hover{border-color:var(--lamp);color:#fff;box-shadow:0 0 30px #ffb10059}
.listen:focus-visible{outline:2px solid var(--lamp);outline-offset:3px}
.listen[data-on="true"]{background:var(--lamp);color:#17130f;border-color:#ffd98a}
.listen[data-on="true"] .len{color:#17130fb3}
@media (max-width:900px), (max-aspect-ratio:1/1){
  .listen{top:auto;bottom:calc(58px + env(safe-area-inset-bottom));font-size:11px;z-index:3}
}


/* one row, so the two controls cannot be nudged into each other */
.controls{position:absolute;left:50%;transform:translateX(-50%);
  top:calc(var(--by) + var(--bh) + 5.6%);display:flex;align-items:stretch;gap:8px;z-index:3}
.share-open{background:#120f0ee6;color:var(--chalk-2);border:1px solid #ffffff2e;cursor:pointer;
  padding:.5em .95em;font-family:var(--display);font-weight:800;text-transform:uppercase;
  letter-spacing:.08em;font-size:clamp(8px,.8vw,13px);line-height:1;transition:.2s}
.share-open:hover{color:#fff;border-color:var(--lamp);box-shadow:0 0 18px #ffb10038}
.share-open:focus-visible{outline:2px solid var(--lamp);outline-offset:3px}
.sharesheet{border:0;padding:0;background:#151110;color:var(--chalk);max-width:min(940px,94vw);
  width:100%;max-height:88dvh;box-shadow:0 30px 80px #000000d1}
.sharesheet::backdrop{background:#000000cc}
.sharesheet-x{position:absolute;right:8px;top:6px;background:none;border:0;color:var(--chalk-2);
  font-size:20px;cursor:pointer;line-height:1;padding:6px}
.sharesheet-x:hover{color:var(--lamp)}
/* display:grid outranks the hidden attribute, so the picker stayed on
   screen underneath the card it had just opened */
[hidden]{display:none!important}
.sharesheet-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;padding:20px}
.pick{background:none;border:1px solid #ffffff1f;padding:0;cursor:pointer;text-align:left;color:var(--chalk-2)}
.pick img{display:block;width:100%;height:auto}
.pick span{display:block;padding:8px 10px 10px;font-family:var(--display);font-weight:800;
  text-transform:uppercase;font-size:12px;letter-spacing:.04em;line-height:1.15}
.pick:hover{border-color:var(--lamp);color:var(--chalk)}
.sharesheet-one{padding:20px}
.sharesheet-one img{display:block;width:100%;height:auto;margin-bottom:14px}
.sharesheet-one p{font-size:15px;color:var(--chalk-2);margin:0 0 14px;max-width:62ch}
.sharesheet-one .row{display:flex;flex-wrap:wrap;gap:8px}
.sharesheet-one a,.sharesheet-one button{font-family:var(--display);font-weight:800;text-transform:uppercase;
  letter-spacing:.06em;font-size:12px;padding:.7em 1em;border:1px solid #ffffff2e;background:#0000;
  color:var(--chalk);text-decoration:none;cursor:pointer;line-height:1}
.sharesheet-one a:hover,.sharesheet-one button:hover{border-color:var(--lamp);color:var(--lamp)}
.sharesheet-one .pri{background:var(--lamp);color:#17130f;border-color:var(--lamp)}
.sharesheet-one .pri:hover{color:#17130f;background:#ffc63d}
@media (max-width:900px), (max-aspect-ratio:1/1){
  /* one row of controls under the tabs, not stacked on top of them */
  .controls{top:auto;bottom:calc(8px + env(safe-area-inset-bottom));z-index:4}
  .share-open,.listen{font-size:11px}
  .listen .len{display:none}
}


/* The league bar. The two properties are one building — this is the rink and
   the dressing room off it — and nothing on either page said so. It is hidden
   on the wide layout, where the photograph carries the crest and the signage
   itself, and it is the whole identity on a phone, where it does not. */
.league{display:none}
@media (max-width:900px), (max-aspect-ratio:1/1){
  .league{position:absolute;top:0;left:0;right:0;z-index:4;
    display:flex;align-items:center;gap:var(--s-3);
    padding:calc(var(--s-2) + env(safe-area-inset-top)) var(--s-3) var(--s-2);
    background:linear-gradient(180deg,#0b0908f2 0%,#0b0908d1 70%,#0b09080a 100%)}
  .league .crest{flex:none;display:block;width:38px;height:38px}
  .league .crest img{width:100%;height:auto;display:block;filter:drop-shadow(0 2px 5px #000)}
  .league .here{font-family:var(--display);font-weight:900;text-transform:uppercase;
    font-size:17px;letter-spacing:.02em;color:var(--chalk);line-height:1}
  .league .sister{margin-left:auto;text-align:right;text-decoration:none;line-height:1.1;
    border:1px solid #ffb1004d;padding:.4em .6em;background:#120f0ea6}
  .league .sister b{display:block;font-family:var(--display);font-weight:800;
    text-transform:uppercase;font-size:12px;letter-spacing:.05em;color:var(--lamp)}
  .league .sister small{display:block;font-size:9.5px;color:var(--chalk-3)}
  /* the board drops below the bar */
  .board{top:calc(56px + env(safe-area-inset-top))}
}


/* The pro shop, arriving. Packs and cards cross the room and go out the door,
   which is the only bit of this property that is purely a poster — it is an
   advertisement for the rink next door and it does not pretend otherwise. It
   runs once, when the reader lands on that board. */
.flight{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1;
  opacity:0;visibility:hidden}
.flight.on{opacity:1;visibility:visible}
.fly{position:absolute;left:-26%;width:clamp(44px,6.4vw,104px);height:auto;
  filter:drop-shadow(0 14px 22px #000000a6);opacity:0}
/* The packs come in from the left and stop — they land on the floor along
   the bottom of the room and stay there for as long as the reader is on this
   board. A shipment that crosses the screen and exits leaves nothing behind;
   a shipment that lands is still there to be looked at.
   Travel is animated on left/top rather than on a transform, because the
   resting places have to be positions inside the room, and the room is
   letterbased against the viewport — a transform in vw lands a pack outside
   the photograph on any window that is not exactly 3:2.
   Each has its own duration: a shared curve on a shared duration bunches the
   whole set into a column no matter how the delays are set. */
.flight.on .fly{animation:arrive var(--dur,2.6s) cubic-bezier(.22,.62,.3,1) forwards}
@keyframes arrive{
  0%{left:-26%;top:var(--y0);opacity:0;transform:rotate(var(--r0,-18deg)) scale(.72)}
  8%{opacity:1}
  100%{left:var(--lx);top:var(--ly);opacity:1;transform:rotate(var(--rl,-4deg)) scale(1)}
}
/* start height, landing spot, resting tilt, travel time, when it is thrown */
.f0{--y0: 8%;--lx: 4.5%;--ly:75.5%;--r0:-22deg;--rl: -7deg;--dur:2.9s;animation-delay:0s}
.f1{--y0:58%;--lx:15.0%;--ly:78.5%;--r0: 12deg;--rl:  4deg;--dur:2.4s;animation-delay:.28s}
.f2{--y0:30%;--lx:25.5%;--ly:75.0%;--r0: -8deg;--rl: -3deg;--dur:3.3s;animation-delay:.52s}
.f3{--y0:74%;--lx:36.0%;--ly:79.5%;--r0: 24deg;--rl:  8deg;--dur:2.6s;animation-delay:.80s}
.f4{--y0:18%;--lx:47.0%;--ly:75.5%;--r0:-31deg;--rl: -5deg;--dur:3.1s;animation-delay:1.04s}
.f5{--y0:46%;--lx:57.5%;--ly:78.0%;--r0: 16deg;--rl:  6deg;--dur:2.3s;animation-delay:1.32s}
.f6{--y0:66%;--lx:68.0%;--ly:75.0%;--r0:-14deg;--rl: -6deg;--dur:2.8s;animation-delay:1.58s}
.f7{--y0:38%;--lx:79.5%;--ly:78.5%;--r0: 28deg;--rl:  3deg;--dur:2.5s;animation-delay:1.84s}
.shopgo{display:inline-block;font-family:var(--display);font-weight:800;text-transform:uppercase;
  letter-spacing:.07em;font-size:clamp(9px,1.2cqw,15px);background:#a8281a;color:#fff;
  padding:.65em 1.1em;text-decoration:none}
.shopgo:hover{background:#c8102e}
@media (prefers-reduced-motion:reduce){
  .flight.on .fly{animation:none;opacity:1;left:var(--lx);top:var(--ly);
    transform:rotate(var(--rl)) scale(1)}
}

/* the tabs, taped along the bottom of the board */
.tabs{position:absolute;left:50%;transform:translateX(-50%);
  top:calc(var(--by) + var(--bh) + 1.6%);
  display:flex;gap:4px;justify-content:center;flex-wrap:nowrap;white-space:nowrap}
.tabs button{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(7px,.72vw,12px);letter-spacing:.06em;cursor:pointer;position:relative;overflow:hidden;
  background:#120f0ecc;color:#d6cdc0;border:1px solid #ffb1004d;padding:.42em .7em;line-height:1;
  transition:color .18s, border-color .18s, background .18s, box-shadow .18s}
/* a light running along the tape, so the row reads as something you can press */
.tabs button::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,#0000 0 42%,#ffd98a5e 50%,#0000 58% 100%);
  transform:translateX(-120%);animation:sweep 5.5s linear infinite}
.tabs button:nth-child(2n)::after{animation-delay:.8s}
.tabs button:nth-child(3n)::after{animation-delay:1.9s}
@keyframes sweep{0%{transform:translateX(-120%)}18%{transform:translateX(120%)}100%{transform:translateX(120%)}}
.tabs button:hover{color:#fff;border-color:var(--lamp);background:#1e1712e6;
  box-shadow:0 0 0 1px #ffb10038, 0 0 16px #ffb10040}
.tabs button[aria-current="true"]{background:var(--lamp);color:#17130f;border-color:#ffd98a;
  box-shadow:0 0 18px #ffb10066, 0 0 44px #ffb10026}
.tabs button[aria-current="true"]::after{animation:none;opacity:0}
.tabs button:focus-visible{outline:2px solid var(--lamp);outline-offset:3px}


/* narrow and portrait: the room becomes the backdrop, the board takes the screen */
/* Portrait and narrow: the photograph stops being a stage and becomes a
   backdrop. Fitting it whole here leaves a 260-pixel strip with the board
   hanging out of it, so it fills the screen, crops, and dims. */
@media (max-width:900px), (max-aspect-ratio:1/1){
  .stage{display:block}
  /* Portrait used to black the photograph out to 80 per cent, which left a
     grey panel on a dark field and no way to tell this was the same league as
     the rink. The room stays visible: the wall texture is the ground, the
     photograph sits over it at the stalls, and the board is a board on a wall
     rather than a modal. */
  .room{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;
    background-image:var(--roomshot), url(wall.812010343c.png);
    background-size:cover, 190px 190px;
    background-position:center 30%, top left;
    background-repeat:no-repeat, repeat}
  /* the veil sits under the board, not over it: ::after paints after its
     siblings, so without a z-index it dims the thing it is supposed to back */
  .room::after{content:'';position:absolute;inset:0;z-index:0;
    background:linear-gradient(180deg,#0b090847 0%,#0b0908c4 38%,#0b0908e0 100%)}
  .board{position:absolute;left:var(--s-3);right:var(--s-3);
    top:max(var(--s-3), env(safe-area-inset-top));
    width:auto;height:auto;bottom:calc(112px + env(safe-area-inset-bottom));padding:var(--s-4);
    box-shadow:0 20px 50px #000000a8;border:1px solid #00000047;z-index:2;
    bottom:calc(104px + env(safe-area-inset-bottom))}
  .tabs{left:var(--s-3);right:var(--s-3);transform:none;width:auto;top:auto;
    bottom:calc(46px + env(safe-area-inset-bottom));gap:4px;flex-wrap:wrap;white-space:normal;z-index:3}
  /* On a phone the board is the screen, so packs flying behind it are packs
     nobody sees. They come forward instead, smaller, and are re-stacked into
     a band above the writing and a band below it — the pro shop board is
     three short lines in the middle and the rest of the sheet is empty. */
  .flight{z-index:4}
  .fly{width:clamp(40px,14vw,76px)}
  /* the vertical drift is expressed in vh, which on a tall phone is a much
     bigger number than it is on a desk — left alone it carries a pack out of
     its band and straight through the writing */
  /* Portrait has no floor to land on — the board is the screen. They stack
     instead, two shelves across the bottom of the sheet, under the writing. */
  .f0{--y0: 6%;--lx: 3%;--ly:56%}   .f1{--y0:40%;--lx:27%;--ly:56%}
  .f2{--y0:14%;--lx:51%;--ly:56%}   .f3{--y0:66%;--lx:75%;--ly:56%}
  .f4{--y0:22%;--lx: 3%;--ly:71%}   .f5{--y0:52%;--lx:27%;--ly:71%}
  .f6{--y0:30%;--lx:51%;--ly:71%}   .f7{--y0:72%;--lx:75%;--ly:71%}
  .tabs button{font-size:10.5px;padding:.42em .5em;letter-spacing:.04em}
  .board h2{font-size:clamp(20px,5.4vw,30px)}
  .board .mk{font-size:clamp(19px,5.6vw,34px);margin-bottom:.5em}
  .board p{font-size:clamp(13px,3.4vw,16px)}
  .stalls{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
  .stall .nm{font-size:11px}.stall .gp{font-size:17px}
  table{font-size:12.5px}
}