:root{
  --yellow:#f3d900;
  --black:#050505;
  --white:#f8f8f2;
  --gap:8px;
  --sidebar:308px;
  --ease:180ms ease;
}

*{box-sizing:border-box}

/* Prevent component display rules from overriding the HTML hidden attribute. */
[hidden]{display:none !important}

html,body{
  margin:0;
  min-height:100%;
  background:var(--yellow);
  color:var(--black);
  font-family:Arial,Helvetica,sans-serif;
}

body.viewer-open{overflow:hidden}

button,a{font:inherit}

.site-shell{
  display:grid;
  grid-template-columns:var(--sidebar) minmax(0,1fr);
  min-height:100vh;
}

.sidebar{
  position:sticky;
  top:0;
  height:100vh;
  padding:28px 22px 22px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background:var(--yellow);
  z-index:10;
}

.brand-zone{
  min-height:0;
}

.jr-mark{
  font-family:Impact,"Arial Narrow",sans-serif;
  font-stretch:condensed;
  font-size:clamp(220px,26vw,520px);
  line-height:.70;
  letter-spacing:-.115em;
  transform:scaleX(.64);
  transform-origin:left top;
  width:150%;
  margin:-8px 0 36px;
  user-select:none;

  /* rough printed/painted texture without image dependency */
  background:
    radial-gradient(circle at 18% 12%,transparent 0 1px,#000 1.5px 100%),
    repeating-linear-gradient(89deg,#000 0 7px,#090909 7px 9px,#000 9px 14px);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:contrast(1.4);
}

.brand-name{
  display:block;
  color:#000;
  text-decoration:none;
  font-family:Impact,"Arial Narrow",sans-serif;
  font-size:40px;
  line-height:.9;
  letter-spacing:-.03em;
  transform:scaleX(.76);
  transform-origin:left center;
  width:130%;
}

.main-nav{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:7px;
  margin-top:34px;
}

.nav-link{
  border:0;
  padding:0;
  background:transparent;
  color:#000;
  font-weight:800;
  font-size:13px;
  letter-spacing:.02em;
  cursor:pointer;
  text-align:left;
}

.nav-link:hover,
.nav-link.is-active{
  text-decoration:underline;
  text-underline-offset:4px;
}

.sidebar-bottom{
  display:flex;
  flex-direction:column;
  gap:24px;
}

.socials{
  display:flex;
  gap:14px;
  font-size:14px;
  font-weight:800;
}

.socials a{color:#000;text-decoration:none}
.socials a:hover{text-decoration:underline}

.join-button{
  display:inline-flex;
  width:max-content;
  min-width:142px;
  justify-content:space-between;
  gap:30px;
  border:1.5px solid #000;
  color:#000;
  text-decoration:none;
  padding:14px 16px;
  font-weight:900;
  font-size:13px;
  letter-spacing:.03em;
  transition:background var(--ease),color var(--ease);
}
.join-button:hover{background:#000;color:var(--yellow)}

.main-content{
  padding:28px 26px 32px 8px;
  min-width:0;
}

.section-kicker{
  font-size:11px;
  font-weight:900;
  letter-spacing:.04em;
  margin:0 0 8px;
}

.featured-card{
  position:relative;
  width:100%;
  display:block;
  border:0;
  padding:0;
  background:#000;
  overflow:hidden;
  cursor:pointer;
  aspect-ratio:2.55/1;
  text-align:left;
}

.featured-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.featured-hover{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.90);
  opacity:0;
  transition:opacity var(--ease);
}

.featured-info{
  position:absolute;
  inset:0;
  padding:clamp(26px,5vw,72px);
  background:transparent;
  color:var(--yellow);
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:opacity var(--ease),visibility var(--ease),transform var(--ease);
}

.featured-number{
  font-size:11px;
  font-weight:900;
  margin-bottom:4px;
}

.featured-info h1{
  margin:0 0 8px;
  font-family:Impact,"Arial Narrow",sans-serif;
  font-size:clamp(44px,6vw,92px);
  line-height:.90;
  letter-spacing:.01em;
  font-weight:900;
}

.featured-meta{
  font-size:clamp(10px,1vw,14px);
  line-height:1.3;
  font-weight:900;
  text-transform:uppercase;
}

.featured-info p{
  margin:16px 0 14px;
  color:var(--yellow);
  max-width:640px;
  font-size:clamp(12px,1.2vw,16px);
  line-height:1.45;
}

.featured-cta{
  font-size:12px;
  font-weight:900;
}

.featured-card:hover .featured-hover{opacity:1}

.featured-card:hover .featured-info{
  opacity:1;
  visibility:visible;
  transform:none;
}
.featured-card:hover .featured-info h1{max-width:850px}

.works-section{margin-top:var(--gap)}

.works-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--gap);
}

.work-card{
  position:relative;
  border:0;
  padding:0;
  background:#000;
  cursor:pointer;
  overflow:hidden;
  aspect-ratio:1.68/1;
}

.work-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform 220ms ease,opacity var(--ease);
}

.work-card:hover img{transform:scale(1.018);opacity:.72}

.work-number{
  position:absolute;
  top:8px;
  left:8px;
  z-index:2;
  min-width:28px;
  padding:3px 6px;
  background:#000;
  color:var(--yellow);
  font-size:11px;
  font-weight:900;
}

.work-type{
  position:absolute;
  right:8px;
  bottom:8px;
  padding:5px 7px;
  background:#000;
  color:var(--yellow);
  font-size:10px;
  font-weight:900;
  letter-spacing:.03em;
  opacity:0;
  transform:translateY(4px);
  transition:opacity var(--ease),transform var(--ease);
}
.work-card:hover .work-type{opacity:1;transform:none}

.empty-state{
  background:#000;
  color:var(--yellow);
  min-height:240px;
  display:grid;
  place-items:center;
  font-weight:900;
}

.about-panel{
  position:fixed;
  inset:0 0 0 var(--sidebar);
  z-index:50;
  background:#000;
  color:var(--yellow);
  overflow:auto;
  padding:clamp(44px,7vw,110px);
}

.panel-close,.viewer-close{
  position:absolute;
  top:20px;
  right:24px;
  border:0;
  background:transparent;
  color:inherit;
  font-size:42px;
  line-height:1;
  cursor:pointer;
}

.about-inner{max-width:900px}
.about-inner h2{
  font-family:Impact,"Arial Narrow",sans-serif;
  font-size:clamp(58px,9vw,140px);
  line-height:.85;
  margin:12px 0 36px;
}
.about-inner p{
  max-width:760px;
  font-size:clamp(18px,2vw,30px);
  line-height:1.28;
}
.about-inner .about-small{font-size:14px;line-height:1.6}

.viewer{
  position:fixed;
  inset:0;
  z-index:100;
  background:#000;
  color:#fff;
}

.viewer-stage{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  padding:48px;
}

#videoPlayer{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
}

.gallery-viewer{
  width:100%;
  height:100%;
  display:grid;
  grid-template-columns:60px minmax(0,1fr) 60px;
  grid-template-rows:minmax(0,1fr) auto;
  align-items:center;
}

.gallery-viewer img{
  grid-column:2;
  width:100%;
  height:100%;
  object-fit:contain;
  min-height:0;
}

.gallery-arrow{
  border:0;
  background:transparent;
  color:#fff;
  font-size:34px;
  cursor:pointer;
}
.gallery-arrow.left{grid-column:1;grid-row:1}
.gallery-arrow.right{grid-column:3;grid-row:1}

.gallery-count{
  grid-column:2;
  grid-row:2;
  text-align:center;
  padding-top:12px;
  font-size:12px;
  letter-spacing:.08em;
}

.audio-viewer{
  width:min(1050px,90vw);
  display:grid;
  grid-template-columns:minmax(260px,1fr) minmax(260px,1fr);
  gap:40px;
  align-items:center;
}

.audio-viewer img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
}

.audio-copy h2{
  font-family:Impact,"Arial Narrow",sans-serif;
  font-size:clamp(46px,7vw,100px);
  line-height:.88;
  margin:8px 0 28px;
}
.audio-copy audio{width:100%}

@media (max-width:1000px){
  :root{--sidebar:220px}
  .brand-name{font-size:31px}
  .featured-card{aspect-ratio:1.9/1}
  .works-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:720px){
  .site-shell{display:block}
  .sidebar{
    position:relative;
    height:auto;
    min-height:auto;
    padding:18px 16px 16px;
  }
  .jr-mark{
    font-size:170px;
    width:190px;
    margin:0 0 18px;
  }
  .brand-name{font-size:30px;width:auto}
  .main-nav{
    flex-direction:row;
    flex-wrap:wrap;
    gap:10px 16px;
    margin-top:22px;
  }
  .sidebar-bottom{
    margin-top:30px;
    gap:18px;
  }
  .main-content{padding:0 8px 18px}
  .section-kicker{margin-top:8px}
  .featured-card{aspect-ratio:1.35/1}
  .featured-info{
    padding:22px;
  }
  .featured-info h1{font-size:clamp(36px,11vw,58px)}
  .featured-info p{
    margin:12px 0;
    max-width:92%;
    font-size:12px;
  }
  /* Touch devices have no hover. A first tap reveals info, a second opens the work. */
  .featured-card.is-touch-info .featured-hover{opacity:1}
  .featured-card.is-touch-info .featured-info{
    opacity:1;
    visibility:visible;
    transform:none;
  }
  .works-grid{grid-template-columns:1fr}
  .work-type{opacity:1;transform:none}
  .about-panel{inset:0;padding:70px 22px}
  .viewer-stage{padding:52px 12px 18px}
  .gallery-viewer{grid-template-columns:44px minmax(0,1fr) 44px}
  .audio-viewer{grid-template-columns:1fr;gap:24px;width:min(92vw,540px)}
}

/* ===== V2 REAL ASSETS ===== */
.jr-mark{
  display:block;
  width:100%;
  max-width:245px;
  height:auto;
  object-fit:contain;
  margin:0 0 24px 0;
  transform:none;
  filter:none;
  background:none;
  color:initial;
  user-select:none;
}

.mature-badge{
  position:absolute;
  right:8px;
  top:8px;
  z-index:3;
  min-width:34px;
  padding:4px 6px;
  background:var(--yellow);
  color:#000;
  font-size:10px;
  font-weight:900;
  text-align:center;
  letter-spacing:.04em;
}

.mature-gate{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  color:var(--yellow);
}

.mature-inner{
  width:min(850px,88vw);
  border-top:2px solid var(--yellow);
  border-bottom:2px solid var(--yellow);
  padding:42px 0 46px;
}

.mature-inner h2{
  margin:8px 0 18px;
  font-family:Impact,"Arial Narrow",sans-serif;
  font-size:clamp(58px,9vw,126px);
  line-height:.86;
  letter-spacing:.01em;
}

.mature-inner p{
  max-width:600px;
  font-size:16px;
  line-height:1.45;
  margin:0 0 30px;
}

.mature-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.mature-actions button{
  border:1px solid var(--yellow);
  background:transparent;
  color:var(--yellow);
  padding:13px 18px;
  font-size:12px;
  font-weight:900;
  cursor:pointer;
}

.mature-actions button:hover{
  background:var(--yellow);
  color:#000;
}

@media (max-width:720px){
  .jr-mark{
    width:170px;
    max-width:170px;
    margin:0 0 18px 0;
  }
  .mature-inner{padding:28px 0 32px}
  .mature-inner h2{font-size:clamp(48px,16vw,82px)}
}

/* ===== V2.1 — SIDEBAR COLLISION FIX + TRUE VIDEO FULLSCREEN ===== */
@media (min-width:721px){
  .sidebar{
    display:grid;
    grid-template-rows:auto auto minmax(10px,1fr) auto;
    align-content:stretch;
    justify-content:initial;
    gap:0;
    overflow:hidden;
  }

  .brand-zone{
    min-height:0;
  }

  .jr-mark{
    width:auto;
    max-width:100%;
    height:clamp(300px,50vh,540px);
    max-height:50vh;
    object-fit:contain;
    object-position:left top;
    margin:0 0 18px 0;
  }

  .brand-name{
    margin:0;
  }

  .main-nav{
    margin-top:24px;
    position:relative;
    z-index:2;
  }

  .sidebar-bottom{
    grid-row:4;
    align-self:end;
  }
}

/* The web viewer itself always fills the whole viewport, even when the
   browser does not grant native Fullscreen API access. */
.viewer-stage.video-mode{
  padding:0;
}

.viewer-stage.video-mode #videoPlayer{
  width:100vw;
  height:100vh;
  max-width:none;
  max-height:none;
  object-fit:contain;
  background:#000;
}

.viewer.video-native-fullscreen .viewer-close{
  opacity:0;
  pointer-events:none;
}


/* ===== FINAL V2 ===== */
.featured-card,.work-card{background:#000}
.featured-image,.work-card img{object-fit:contain !important;object-position:center;background:#000}
.socials a{width:22px;height:22px;display:grid;place-items:center;text-decoration:none}
.socials svg{width:20px;height:20px;display:block}
.socials svg rect,.socials svg circle{fill:none;stroke:#000;stroke-width:1.8}
.socials svg path{fill:#000;stroke:none}
.socials svg .yt-cut{fill:var(--yellow);stroke:none}
.socials svg .mail-line{fill:none;stroke:var(--yellow);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.text-viewer{width:100%;height:100%;overflow:auto;background:#000;color:var(--yellow)}
.text-viewer-inner{width:min(1100px,88vw);margin:0 auto;padding:clamp(70px,10vw,150px) 0 90px}
.text-viewer h2{margin:8px 0 42px;font-family:Impact,"Arial Narrow",sans-serif;font-size:clamp(72px,12vw,180px);line-height:.82;letter-spacing:-.03em;font-weight:900}
.text-viewer-body{max-width:900px}
.text-viewer-body p{margin:0 0 22px;font-size:clamp(22px,3vw,44px);line-height:1.08;font-weight:800}
.work-card img[src=""],.featured-image[src=""]{visibility:hidden}
.work-card:has(img[src=""]){background:#000}
.work-card:has(img[src=""])::after{content:"MAKE A WORK";position:absolute;inset:0;display:grid;place-items:center;padding:18px;color:var(--yellow);font-family:Impact,"Arial Narrow",sans-serif;font-size:clamp(28px,4vw,54px);line-height:.9;text-align:center}
.viewer-stage:has(.gallery-viewer:not([hidden])){padding:0}
.gallery-viewer{width:100vw;height:100vh;background:#000}
.gallery-viewer img{object-fit:contain !important;background:#000}
\n\n/* ===== RESPONSIVE PASS 2026-09-04 =====\n   Desktop remains unchanged. Mobile gets a compact identity header and the\n   selected Featured work is omitted from the grid by app.js. */\n@media (max-width:720px){\n  .sidebar{\n    display:grid;\n    grid-template-columns:96px minmax(0,1fr);\n    grid-template-rows:auto auto auto;\n    column-gap:16px;\n    row-gap:14px;\n    align-items:start;\n    padding:16px 16px 18px;\n  }\n  .brand-zone{display:contents}\n  .jr-mark{\n    grid-column:1;\n    grid-row:1 / span 2;\n    width:96px !important;\n    max-width:96px !important;\n    height:128px !important;\n    max-height:none !important;\n    object-fit:contain;\n    object-position:left top;\n    margin:0 !important;\n  }\n  .brand-name{\n    grid-column:2;\n    grid-row:1;\n    width:auto;\n    transform:none;\n    font-size:29px;\n    line-height:.92;\n    align-self:end;\n  }\n  .main-nav{\n    grid-column:2;\n    grid-row:2;\n    margin:0;\n    gap:7px 14px;\n    align-self:start;\n  }\n  .nav-link{font-size:11px}\n  .sidebar-bottom{\n    grid-column:1 / -1;\n    grid-row:3;\n    margin:0;\n    flex-direction:row;\n    align-items:center;\n    justify-content:space-between;\n    gap:14px;\n  }\n  .socials{gap:12px}\n  .join-button{\n    min-width:124px;\n    padding:11px 13px;\n    gap:20px;\n    font-size:12px;\n  }\n  .main-content{padding:0 8px 18px}\n  .section-kicker{margin:12px 0 8px}\n  .featured-card{aspect-ratio:1.68/1}\n  .featured-info{\n    padding:16px;\n    justify-content:flex-end;\n    opacity:1;\n    visibility:visible;\n    transform:none;\n    pointer-events:none;\n    background:linear-gradient(to top,rgba(0,0,0,.88) 0,rgba(0,0,0,.28) 38%,transparent 62%);\n  }\n  .featured-hover{display:none}\n  .featured-number,.featured-info p,.featured-cta{display:none}\n  .featured-info h1{\n    margin:0 0 3px;\n    font-size:clamp(25px,7.5vw,40px);\n    line-height:.9;\n  }\n  .featured-meta{font-size:9px}\n  .works-section{margin-top:14px}\n}\n\n/* Phone / small-tablet landscape: never fall back to the tall desktop sidebar. */\n@media (max-height:600px) and (max-width:1200px) and (orientation:landscape){\n  :root{--sidebar:0px}\n  .site-shell{display:block}\n  .sidebar{\n    position:relative;\n    width:100%;\n    height:auto;\n    min-height:0;\n    overflow:visible;\n    padding:10px 14px;\n    display:grid;\n    grid-template-columns:74px auto minmax(0,1fr) auto;\n    grid-template-rows:auto auto;\n    gap:7px 16px;\n    align-items:center;\n  }\n  .brand-zone{display:contents}\n  .jr-mark{\n    grid-column:1; grid-row:1 / span 2;\n    width:68px !important; max-width:68px !important;\n    height:78px !important; max-height:78px !important;\n    object-fit:contain; object-position:left center; margin:0 !important;\n  }\n  .brand-name{\n    grid-column:2; grid-row:1; width:auto; transform:none;\n    font-size:25px; line-height:.9; white-space:nowrap;\n  }\n  .main-nav{\n    grid-column:3; grid-row:1; margin:0; flex-direction:row; flex-wrap:wrap;\n    gap:6px 13px; align-items:center;\n  }\n  .nav-link{font-size:10px;white-space:nowrap}\n  .sidebar-bottom{\n    grid-column:2 / -1; grid-row:2; margin:0;\n    flex-direction:row; align-items:center; justify-content:space-between; gap:16px;\n  }\n  .socials{gap:11px}\n  .socials a{width:18px;height:18px}\n  .socials svg{width:18px;height:18px}\n  .join-button{min-width:112px;padding:8px 11px;gap:18px;font-size:10px}\n  .main-content{padding:10px 14px 20px}\n  .section-kicker{margin:0 0 7px}\n  .featured-card{aspect-ratio:2.35/1}\n  .featured-info{\n    padding:14px 18px; justify-content:flex-end; opacity:1; visibility:visible; transform:none;\n    pointer-events:none; background:linear-gradient(to top,rgba(0,0,0,.86),transparent 58%);\n  }\n  .featured-hover{display:none}\n  .featured-number,.featured-info p,.featured-cta{display:none}\n  .featured-info h1{font-size:clamp(28px,5vw,54px);margin:0 0 2px}\n  .featured-meta{font-size:9px}\n  .works-grid{grid-template-columns:repeat(2,minmax(0,1fr))}\n  .works-section{margin-top:10px}\n  .work-type{opacity:1;transform:none}\n  .about-panel{inset:0;padding:55px 22px}\n}\n