/* 2bias — black and white type on stainless steel.

   The page is a field of liquid chrome; everything that sits on it is a steel plate (.steel). Type is ink:
   cut into the plates, or set straight onto the chrome with a white keyline. The exception is the hero's
   words, which take the board's own colours (--board-*). Every other colour is a picture: the board, the
   carpet and the art.

   The light comes from the upper left, where it lands on the chessboard. Every steel face and edge
   is brighter on its top-left and darker on its bottom-right, and every shadow falls down and to the
   right at the same angle (x:y about 3:7) — a plate at rest sits close, a lifted plate throws it further.
   Put .steel on any surface; use the custom properties below when a rule needs the parts. */

:root{
  /* type: black and white, nothing else */
  --ink:#0b0d0e; --ink-2:#2c3237; --white:#f7f8f8;
  --void:#030604;          /* what a picture sits on before it loads */

  /* stainless: near-black at the ends, blue-grey through the middle, a warm hot band toward the light */
  --steel-face:linear-gradient(110deg,#121518 0%,#3a424b 8%,#75808c 18%,#e2cfa9 26%,#f5ead3 28.5%,#aeb8c2 32%,#6a7581 44%,#4d5660 57%,#7b8691 70%,#c3bca9 82%,#4b545e 91%,#14171a 100%);
  --steel-brush:repeating-linear-gradient(180deg,rgba(255,255,255,.045) 0 1px,rgba(0,0,0,.055) 1px 2px);
  --steel-hair:repeating-linear-gradient(94deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px);
  --steel-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 .17'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --steel-scuff:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='300'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.003 .6' numOctaves='3' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 2.2 0 0 0 -1.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
  --steel:var(--steel-grain),var(--steel-scuff),var(--steel-hair),var(--steel-brush),var(--steel-face);
  --steel-size:220px 220px,600px 300px,auto,auto,100% 100%;
  /* the page itself: the same metal as a plate, lighter, lit from the same side */
  --steel-sheet:linear-gradient(110deg,#4a525a 0%,#8d97a1 14%,#c9d0d6 26%,#eef0ee 33%,#b9c2ca 42%,#8a949e 56%,#a7b0b9 70%,#d7dcdf 80%,#7a848e 91%,#4a525a 100%);

  /* light, all from the upper left */
  --steel-bevel:inset 1px 1px 0 rgba(255,244,222,.8),inset 2px 2px 0 rgba(255,255,255,.14),inset -1px -1px 0 rgba(0,0,0,.72),inset -2px -2px 0 rgba(0,0,0,.28);
  --steel-drop:1px 2px 0 rgba(0,0,0,.6),3px 7px 16px rgba(0,0,0,.55);                  /* a plate at rest */
  --steel-lift:2px 4px 0 rgba(0,0,0,.3),6px 14px 22px -6px rgba(0,0,0,.6);            /* the same plate, lifted toward you */
  --steel-cast:3px 7px 22px rgba(0,0,0,.45);                                           /* the board and the cover, mounted */
  --steel-engrave:1px 1px 0 rgba(255,244,222,.34),-1px -1px 0 rgba(0,0,0,.38);        /* type cut into the metal: shadow on the lit side of the cut, a bright lip on the far side */

  /* focus: a hard black-and-white cut around whatever has it, visible on steel, carpet and board alike */
  --ring:0 0 0 2px var(--white);

  /* motion: heavy metal is quick off the mark and settles long; light things just move */
  --ease-metal:cubic-bezier(.2,.9,.2,1); --t-metal:.45s;
  --ease-light:cubic-bezier(.3,.7,.4,1); --t-light:.18s;
  --t-press:.1s;

  /* small capitals: one tracking for every label */
  /* the board's own colours: hues sampled from img/01.jpg (the carved red tiles and their black edges,
     the green and cream squares, the warm light across them, the wooden frame), lightness lifted to how the eye
     reads them on the board, so type in them holds up on the dark chrome */
  --board-red:#b0482c; --board-carved:#070403; --board-green:#2f5537; --board-cream:#d2c1ad; --board-light:#fac06a; --board-frame:#71695c;
  --track-label:.42em;
  /* type set straight onto the chrome carries a white keyline, so it reads over dark folds and bright ones alike.
     His chrome is dark, so the line is heavy: never thinner than 3px, so small labels cut through, and capped so big type stays crisp */
  --keyline:clamp(3px,.09em,6px) var(--white);
}

:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.steel{background:var(--steel);background-size:var(--steel-size);box-shadow:var(--steel-bevel),var(--steel-drop);color:var(--ink);text-shadow:var(--steel-engrave)}
/* the page: a field of liquid chrome, graded a fifth lighter with the shine kept. The plates sitting on it are .steel. */
.sheet{color:var(--ink)}
/* his chrome: the four textures blended into one picture, which he then enhanced himself. One square layer,
   wide enough to turn freely, fixed behind the page; as you scroll it turns a few degrees (where the browser can).
   Over it lies a calm copy of the same picture, out of focus and darker: it fades in once the board page's hero
   has scrolled away (the page drops .at-hero), and pages without a hero are calm throughout, so below the hero
   his art and the plates are the loudest things */
html::before,html::after{content:"";position:fixed;left:50%;top:50%;z-index:-1;width:120vmax;height:120vmax;margin:-60vmax 0 0 -60vmax;pointer-events:none;
  background:url(../img/chrome.jpg) 50% 50% / cover no-repeat,var(--steel-sheet);transform:rotate(-3deg)}
html::after{background:url(../img/chrome-soft.jpg) 50% 50% / cover no-repeat;transition:opacity .9s var(--ease-light)}
html.at-hero::after{opacity:0}
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){html::before,html::after{animation:chrome-turn linear both;animation-timeline:scroll(root)}}
}
@keyframes chrome-turn{from{transform:rotate(-3deg)}to{transform:rotate(5deg) scale(1.08)}}

/* ---- the disciplines move the way they sound, each on its own clock so they never line up.
   Put data-move on the element and .alive on anything around it once it's on screen. ---- */
[data-move] .move__label,[data-move] .ch{display:inline-block}
[data-move] .ch{white-space:pre}
.alive [data-move="pulse"] .move__label{animation:m-pulse .64s cubic-bezier(.2,.8,.2,1) infinite}       /* percussion: on the beat */
.alive [data-move="layer"] .move__label{animation:m-layer 3.1s ease-in-out infinite}                    /* layering: copies stack and offset */
.alive [data-move="jitter"] .move__label{animation:m-jitter 2.3s steps(1,end) infinite}                 /* foley: irregular twitches */
.alive [data-move="reveal"] .ch{animation:m-reveal 4.2s ease-in-out infinite;animation-delay:calc(var(--i) * 90ms)}   /* lyrics: letter by letter */
.alive [data-move="squash"] .move__label{animation:m-squash .93s ease-in-out infinite}                  /* vocal percussion: a mouth */
.alive [data-move="wave"] .ch{animation:m-wave 1.7s ease-in-out infinite;animation-delay:calc(var(--i) * -120ms)}    /* patterns: a repeating wave */
.alive [data-move="pluck"] .move__label{animation:m-pluck 2.9s linear infinite}                         /* guitar: a plucked string */
.alive [data-move="wobble"] .move__label{animation:m-wobble 1.9s ease-in-out infinite}                  /* bass: slow and heavy */
.alive [data-move="press"] .ch{animation:m-press 2.2s ease-out infinite;animation-delay:calc(var(--i) * 120ms)}      /* keys: pressed one by one */
.alive [data-move="breathe"] .move__label{animation:m-breathe 3.7s ease-in-out infinite}
.alive [data-move] .move__label{animation-delay:calc(var(--k, 0) * -.37s)}
/* layering's copies stack down and to the right, away from the light — the way every other shadow on the site falls */
@keyframes m-pulse{0%{transform:scale(1.12)}14%{transform:scale(1)}100%{transform:scale(1)}}
@keyframes m-layer{0%,100%{text-shadow:0 0 0 rgba(11,13,14,0),0 0 0 rgba(11,13,14,0)}50%{text-shadow:2px 2px 0 rgba(11,13,14,.35),4px 4px 0 rgba(11,13,14,.16)}}
@keyframes m-jitter{0%,10%,39%,64%,90%,100%{transform:translate(0,0)}6%{transform:translate(.7px,-.5px)}8%{transform:translate(-.6px,.4px)}37%{transform:translate(.5px,.6px) rotate(.6deg)}61%{transform:translate(-.8px,-.3px)}62%{transform:translate(.4px,.2px)}88%{transform:translate(.3px,-.7px)}}
@keyframes m-reveal{0%,6%{opacity:.12}14%,78%{opacity:1}88%,100%{opacity:.12}}
@keyframes m-squash{0%,55%,100%{transform:scale(1,1)}15%{transform:scale(1.06,.84)}28%{transform:scale(.97,1.07)}40%{transform:scale(1.01,.98)}}
@keyframes m-wave{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes m-pluck{0%{transform:translateY(0)}2%{transform:translateY(1.6px)}4%{transform:translateY(-1.4px)}6%{transform:translateY(1.1px)}8%{transform:translateY(-.8px)}10%{transform:translateY(.5px)}12%{transform:translateY(-.3px)}14%,100%{transform:translateY(0)}}
@keyframes m-wobble{0%,100%{transform:translateY(0) scale(1,1)}50%{transform:translateY(1.5px) scale(1.04,.95)}}
@keyframes m-press{0%,12%,100%{transform:translateY(0)}5%{transform:translateY(2px)}}
@keyframes m-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
@media (prefers-reduced-motion:reduce){.alive [data-move] .move__label,.alive [data-move] .ch{animation:none}}

/* ---- the cursor (js/cursor.js): a red tile at the point, a cream frame that trails it like a heavy plate, the
   warm light around a board square when it's on one, green when it's on something you can press ---- */
.has-cursor.cursor-on,.has-cursor.cursor-on *{cursor:none !important}
.has-cursor.cursor-on input[type="url"],.has-cursor.cursor-on input[type="text"],.has-cursor.cursor-on textarea{cursor:text !important}
.cursor-dot,.cursor-frame{position:fixed;left:0;top:0;z-index:9999;pointer-events:none;opacity:0;transition:opacity var(--t-light) var(--ease-light);will-change:transform}
.cursor-on .cursor-dot,.cursor-on .cursor-frame{opacity:1}
.cursor-dot{width:6px;height:6px;background:var(--board-red);box-shadow:0 0 0 1.5px var(--board-carved),0 0 0 3px var(--board-cream)}
.cursor-dot.is-press{background:var(--board-green)}
.cursor-frame{width:34px;height:34px;contain:layout style;
  box-shadow:inset 0 0 0 1.5px var(--board-carved),inset 0 0 0 3.5px var(--board-cream),inset 0 0 0 5px var(--board-carved),0 0 0 1px rgba(0,0,0,.25)}
.cursor-frame.is-press{box-shadow:inset 0 0 0 1.5px var(--board-carved),inset 0 0 0 4px var(--board-green),inset 0 0 0 5.5px var(--board-carved)}
.cursor-frame.is-square{box-shadow:inset 0 0 0 2px var(--board-carved),inset 0 0 0 5px var(--board-light),inset 0 0 0 7px var(--board-carved)}
.cursor-tag{position:absolute;left:100%;top:100%;margin:5px 0 0 5px;font:800 11px/1 var(--body);letter-spacing:var(--track-label);text-transform:uppercase;
  color:var(--ink);-webkit-text-stroke:var(--keyline);paint-order:stroke fill;white-space:nowrap}
@media (prefers-reduced-motion:reduce){.cursor-dot,.cursor-frame{display:none}}

/* ---- players (js/players.js): a black play plate, the track's loudness outline to scrub, the time ---- */
.play{flex:none;display:grid;place-items:center;width:52px;height:48px;border:0;padding:0;cursor:pointer;background:var(--ink);color:var(--white);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.2),var(--steel-drop);transition:transform var(--t-metal) var(--ease-metal),box-shadow var(--t-metal) var(--ease-metal)}
.play svg{width:22px;height:22px}
.play:hover,.play:focus-visible{transform:scale(1.07);box-shadow:inset 1px 1px 0 rgba(255,255,255,.2),var(--steel-lift)}
.play:focus-visible{box-shadow:inset 1px 1px 0 rgba(255,255,255,.2),var(--ring),var(--steel-lift)}
.play:active{transform:scale(.97);transition-duration:var(--t-press)}
.wave{display:block;width:100%;height:38px;cursor:pointer;touch-action:manipulation}
.time{font:700 11px/1 var(--body);letter-spacing:.12em;font-variant-numeric:tabular-nums;white-space:nowrap}


/* ---- mola: panels of his "urabá colombia" poster laid into the steel by js/mola.js, a random panel for each plate
   every visit. Soft light keeps them part of the metal; plates you read from (.mola-quiet) get a quieter share. ---- */
.has-mola{isolation:isolate}
.has-mola::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--mola) var(--mola-at,50% 50%) / cover no-repeat;mix-blend-mode:soft-light;filter:saturate(1.35);opacity:.8}
.mola-quiet::before{opacity:.45}
.cat.has-mola::before{-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.3) 0 34%,#000 72%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.3) 0 34%,#000 72%)}   /* a pack square's name sits on quiet steel; the pattern rises below it */

/* ---- titles: every section title (the hero keeps its own words) is the same thing on every page: its own steel
   plate with a mola laid in, lettered like the board's squares: the board's green, a carved black edge, a cream outline ---- */
.title{justify-self:start;align-self:start;width:max-content;max-width:100%;margin:0;padding:.16em .32em .12em;
  background:var(--steel);background-size:var(--steel-size);box-shadow:var(--steel-bevel),var(--steel-drop);
  font:900 clamp(52px,7.6vw,128px)/.9 var(--display);letter-spacing:.005em;text-transform:uppercase;text-wrap:balance;overflow-wrap:anywhere;
  color:var(--board-green);-webkit-text-stroke:max(2px,.045em) var(--board-carved);paint-order:stroke fill;
  text-shadow:1.6px 0 0 var(--board-cream),-1.6px 0 0 var(--board-cream),0 1.6px 0 var(--board-cream),0 -1.6px 0 var(--board-cream)}
.mola-tag::before{opacity:.35}   /* the small name tags */