/* Samurai Movie Jam page (src/smj.mjs) */
*,*::before,*::after{box-sizing:border-box}
body.smj{margin:0;background:#000;color:#fff;font-family:Poppins,"Helvetica Neue",Arial,sans-serif;font-weight:200;-webkit-font-smoothing:antialiased}
.smj img{max-width:100%;height:auto}
.smj a img{display:block}
.smj .wrap{max-width:980px;margin:0 auto;padding:0 16px}
.smj-hero{position:relative;width:100%;aspect-ratio:1575/651;min-height:300px;overflow:hidden;display:grid;place-items:center;background:#111}
.smj-hero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.smj-hero h1{position:relative;margin:0;width:min(66%,1100px)}
.smj-hero .logo{display:block;width:100%;filter:drop-shadow(0 4px 18px rgba(0,0,0,.45))}
.smj-intro{background:#000;padding:56px 0 52px}
.smj-intro p{font-size:22px;line-height:1.45;margin:0}
.smj-follow{background:#000;padding:30px 0}
.follow{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px 22px;width:min(1100px,calc(100vw - 32px));position:relative;left:50%;transform:translateX(-50%)}
.follow .grp{display:flex;flex-wrap:nowrap;align-items:center;gap:14px;flex:none}
.follow .b{white-space:nowrap;font-weight:900;font-size:28px;text-transform:uppercase;letter-spacing:-.01em}
.follow .l{white-space:nowrap;font-weight:300;font-size:29px;text-transform:uppercase}
.follow a{flex:none;display:block}
.follow .pill{position:relative;top:-1px}
.follow .icons{display:flex;gap:14px;flex:none}
.follow .icons img{width:39px;height:39px;min-width:39px;flex:none;object-fit:contain;transition:transform .15s}
.smj .pill{display:block;height:var(--pill,44px);width:auto;max-width:none;filter:drop-shadow(0 7px 6px rgba(0,0,0,.38));transition:transform .15s}
.smj a:hover .pill{transform:translateY(-1px) scale(1.03)}
.follow a:hover img{transform:scale(1.06)}
.smj-latest{background:#d3d3d3;color:#000;padding:52px 0 72px}
.smj-player{display:block;width:100%;aspect-ratio:16/9;height:auto;border:0;border-radius:12px;background:#282828}
.smj-player.show{aspect-ratio:auto;height:352px}
.smj-latest .eyebrow{font-family:Caveat,cursive;font-weight:700;font-size:26px;letter-spacing:-1.2px;color:#fd8e32;margin:0;line-height:1.1}
.smj-latest .numrow{display:flex;align-items:center;gap:10px}
.smj-latest .num{font-weight:900;font-size:32px;color:#9b9b9b;margin:0;line-height:1;text-transform:uppercase}
.smj-latest .listen{display:flex;gap:8px}
.smj-latest .listen a{display:block}
.smj-latest .listen img{display:block;width:32px;height:32px;object-fit:contain;transition:transform .15s}
.smj-latest .listen a:hover img{transform:scale(1.1)}
.smj-latest h2{font-weight:900;font-size:66px;line-height:.9;margin:2px 0 8px;text-transform:uppercase;overflow-wrap:anywhere}
.smj-latest .desc{font-size:18px;line-height:1.4;margin:0 0 22px;max-width:820px}
.smj-latest .past{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.smj-latest .past-ep img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:12px}
.smj-ig{background:#000;padding:0 4px 4px;position:relative}
.smj-ig .ig-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}
.smj-ig a{position:relative;display:block;aspect-ratio:9/16;overflow:hidden;background:#111}
.smj-ig img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.smj-ig a:hover img,.smj-ig a:focus-visible img{transform:scale(1.05)}
.smj-ig .play{position:absolute;top:10px;right:10px;width:0;height:0;border-left:12px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent;filter:drop-shadow(0 0 3px rgba(0,0,0,.6));transition:opacity .2s}
.smj-ig video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .2s ease;pointer-events:none}
.smj-ig a.is-playing video{opacity:1}
.smj-ig a.is-playing .play{opacity:0}
.smj-ig .ig-sound{display:flex;justify-content:flex-end;padding:0 12px 10px;margin-top:-6px}
.smj-ig .ig-sound[hidden]{display:none}
.smj .sound-btn{border:0;background:none;padding:0;cursor:pointer;line-height:0}
.smj .sound-btn img{display:block;width:134px;height:auto}
.smj .sound-btn:hover img{opacity:.85}
.smj .sound-btn .on{display:none}
.smj .sound-btn[aria-pressed="true"] .on{display:block}
.smj .sound-btn[aria-pressed="true"] .off{display:none}
.smj-merch{background:#9b9b9b;padding:0;position:relative;z-index:1}
.smj-merch .wrap{display:grid;grid-template-columns:440fr 540fr;gap:0 8px;align-items:center;min-height:410px}
.smj-merch .shirt{width:100%;max-width:380px;justify-self:end;margin:-90px 0 -30px;filter:drop-shadow(0 8px 14px rgba(0,0,0,.35));transform:rotate(-6.4deg) scale(1.05);transform-origin:50% 50%;will-change:transform}
.smj-hero .logo{transform-origin:50% 50%;will-change:transform}
.smj-merch h2{font-weight:900;font-size:46px;line-height:.8;margin:0;text-transform:uppercase;color:#fff}
.smj-merch p{font-size:24px;margin:8px 0 6px;color:#fff;line-height:1}
.smj-merch div a{display:inline-block;margin-top:14px}
.smj-email{background:#000;text-align:center;padding:26px 16px 0}
.smj-email p{margin:0;font-weight:300;font-size:21px;line-height:1.4}
.smj-email a{color:#f49305;overflow-wrap:anywhere}
.smj-foot{background:#000;text-align:center;padding:44px 16px 56px;border-top:1px solid #1d1d1d}
.smj-foot img{width:150px}
:root{--accent:#00b4d5;--font:Poppins,"Helvetica Neue",Arial,sans-serif}
/* samuraimoviejam.com: the bar to the art site on the right; the words start clear of its tab */
body.smj.has-smj-r{padding-right:var(--smj-bar);background-image:linear-gradient(to left,#151515 calc(var(--smj-bar) - 3px),#00b4d5 calc(var(--smj-bar) - 3px),#00b4d5 var(--smj-bar),transparent var(--smj-bar));background-repeat:no-repeat;background-attachment:fixed}
body.has-smj-r .wrap{padding-right:max(16px,calc(var(--smj-out-bdm) + 10px - max(0px,(100% - 980px) / 2)))}
@media (max-width:900px){
  .smj-intro{padding:40px 0 36px}.smj-intro p{font-size:18px}
  .follow .b,.follow .l{font-size:22px}
  .smj-latest{padding:40px 0 48px}.smj-latest .desc{font-size:16px}
  .smj-latest h2{font-size:clamp(40px,11vw,66px)}
  .smj-merch .wrap{grid-template-columns:1fr;text-align:center;justify-items:center;padding-bottom:36px}
  .smj-merch{overflow-x:clip}
  .smj-merch .shirt{margin:-20px auto 0;max-width:380px}
  .smj-merch .shirt{justify-self:center}
  .smj-merch h2{font-size:clamp(34px,9vw,46px);margin:0 auto}.smj-merch h2 br{display:none}
  .smj-email p{font-size:clamp(16px,4.6vw,21px)}
}
@media (max-width:560px){
  .smj-latest .past{grid-template-columns:1fr}
  .smj-ig .ig-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .smj-hero{aspect-ratio:auto;min-height:0;height:62vw}
  .smj-hero h1{width:92%}
  .follow .grp:first-child{flex-direction:column;gap:12px}
  .smj .pill{height:auto;width:auto;max-height:var(--pill,44px);max-width:100%}
}

/* The bar between the two sites. On the art pages it sits on the left and slides Samurai Movie Jam's page in from the left;
   on samuraimoviejam.com (.mirror) it sits on the right and slides the art site in from the right. .at-right = the bar is on the right.
   Each side has a tab with its logo, at the same height on both sides, and its words under it. */
:root { --smj-bar: 50px; --smj-tab-top: 104px; --smj-tab-h: 84px; --smj-out: 26px; --smj-out-bdm: 50px; }
@media (max-width: 760px) { :root { --smj-bar: 34px; --smj-tab-h: 62px; --smj-out: 18px; --smj-out-bdm: 34px; } }
@media (max-width: 760px) { :root { --smj-tab-top: 30vh; } }
.smj-slide { position: fixed; top: 0; bottom: 0; height: 100vh; height: 100lvh; left: 0; right: 0; z-index: 1000; pointer-events: none; transform: translateX(calc(-100% + var(--smj-bar))); transition: transform .65s cubic-bezier(.65, 0, .25, 1); will-change: transform; }
.smj-slide.open { transform: none; }
.smj-slide.no-anim { transition: none; }
.smj-panel { position: absolute; top: 0; bottom: 0; left: 0; right: var(--smj-bar); background: #000; }
.smj-panel iframe { display: block; width: 100%; height: 100%; border: 0; background: #000; }
.smj-slide.open .smj-panel { pointer-events: auto; }
.smj-bar { position: absolute; top: 0; bottom: 0; right: 0; width: var(--smj-bar); margin: 0; padding: 0; border: 0; border-radius: 0; background: #151515; color: #fff; cursor: pointer; pointer-events: auto; font-family: var(--font); box-shadow: 3px 0 12px rgba(0,0,0,.28); --line: #fd8e32; }
.smj-slide.at-right .smj-bar { box-shadow: -3px 0 12px rgba(0,0,0,.28); --line: var(--accent); }
.smj-bar::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 3px; background: var(--line); z-index: 0; }
.smj-slide.at-right .smj-bar::after { right: auto; left: 0; }
.smj-bar > span { position: absolute; inset: 0; display: block; z-index: 1; }   /* above the coloured line, so the line goes round the tab, not through it */
.smj-bar .to-bdm, .smj-slide.at-right .to-smj { display: none; }
.smj-slide.at-right .to-bdm { display: block; }
.smj-bar { --lw: 3px; }
.smj-bar .tab { position: absolute; top: var(--smj-tab-top); height: var(--smj-tab-h); display: flex; align-items: center; justify-content: center; background: #151515; }
/* the outline only on the part that sticks out of the bar: it meets the bar's line, and nothing runs across the bar */
.smj-bar .tab::before { content: ""; position: absolute; top: 0; bottom: 0; border: var(--lw) solid var(--line); pointer-events: none; }
.to-smj .tab::before { left: calc(var(--smj-bar) - var(--lw)); right: 0; border-left: 0; border-radius: 0 14px 14px 0; box-shadow: 4px 3px 10px rgba(0,0,0,.3); }
.to-bdm .tab::before { right: calc(var(--smj-bar) - var(--lw)); left: 0; border-right: 0; border-radius: 14px 0 0 14px; box-shadow: -4px 3px 10px rgba(0,0,0,.3); }
.smj-bar .tab img { position: relative; transition: transform .2s; }
.to-smj .tab { left: 0; width: calc(var(--smj-bar) + var(--smj-out)); border-radius: 0 14px 14px 0; padding-right: var(--lw); }
.to-bdm .tab { right: 0; width: calc(var(--smj-bar) + var(--smj-out-bdm)); border-radius: 14px 0 0 14px; padding-left: var(--lw); }
.to-smj .tab img { width: calc(var(--smj-tab-h) - 20px); height: auto; }
.to-bdm .tab img { width: calc(100% - 14px); height: auto; }
.smj-bar:hover .tab img, .smj-bar:focus-visible .tab img { transform: scale(1.06); }
.smj-bar em { position: absolute; top: calc(var(--smj-tab-top) + var(--smj-tab-h) + 22px); left: 0; right: 0; margin: 0 auto; width: max-content; writing-mode: vertical-rl; transform: rotate(180deg); font-style: normal; font-size: 13px; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; color: #e8e8e8; }
.smj-slide.at-right .smj-bar em { left: 3px; }
.smj-slide:not(.at-right) .smj-bar em { right: 3px; }
.smj-bar:focus-visible { outline: 2px solid #fff; outline-offset: -5px; }
@media (max-width: 760px) { .smj-bar em { font-size: 10px; letter-spacing: .14em; top: calc(var(--smj-tab-top) + var(--smj-tab-h) + 14px); } .smj-bar { --lw: 2px; } }
@media (prefers-reduced-motion: reduce) { .smj-slide { transition-duration: .01s; } }

.smj-slide.mirror { transform: translateX(calc(100% - var(--smj-bar))); }
.smj-slide.mirror.open { transform: none; }
.smj-slide.mirror .smj-panel { left: var(--smj-bar); right: 0; }
.smj-slide.mirror .smj-bar { left: 0; right: auto; }
.smj-slide.mirror .smj-panel iframe { background: #fff; }