:root {
  color-scheme: dark;
  --jm-ink: #03070c;
  --jm-blue: #52c9ff;
  --jm-paper: #f0f5fa;
  --jm-muted: #b9c8d6;
}
.jm { margin: 0; background: var(--jm-ink); color: var(--jm-paper); font: 1rem/1.6 system-ui, sans-serif; }
.jm *, .jm *::before, .jm *::after { box-sizing: border-box; }
.jm a { color: inherit; text-underline-offset: .25em; }
.jm a:hover { color: var(--jm-blue); }
.jm :focus-visible { outline: 2px solid var(--jm-blue); outline-offset: 5px; }
.jm img { display: block; max-width: 100%; height: auto; }
.jm h1, .jm h2, .jm p, .jm figure { margin: 0; }
.jm-wrap { width: min(100% - 8vw, 1320px); margin-inline: auto; }
.jm-skip { position: absolute; z-index: 5; top: .5rem; left: 1rem; padding: .5rem; background: #021421; transform: translateY(-200%); }
.jm-skip:focus { transform: none; }
.jm-header { position: relative; z-index: 2; background: #030509; border-bottom: 1px solid #17364b; }
.jm-header-inner { min-height: 62px; display: flex; align-items: center; justify-content: center; }
.jm-nav a, .jm-mobile a { text-decoration: none; text-transform: uppercase; }
.jm-nav { display: flex; justify-content: center; align-items: center; gap: clamp(1rem, 3vw, 3rem); }
.jm-nav a, .jm-mobile a { font-size: .74rem; font-weight: 650; letter-spacing: .05em; }
.jm-nav [aria-current], .jm-mobile [aria-current] { color: var(--jm-blue); }
.jm-mobile { display: none; }
.jm-beam { border-bottom: 1px solid #26506b; }
.jm-hero, .jm-feature, .jm-galactic, .jm-studio, .jm-writing, .jm-armor { position: relative; isolation: isolate; overflow: hidden; }
.jm-hero { min-height: clamp(420px, 46vw, 700px); display: grid; align-items: center; background: #02060b; }
.jm-hero-art { position: absolute; z-index: -2; inset: 0 0 0 auto; width: 76%; height: 100% !important; object-fit: cover; object-position: 62% 22%; }
.jm-hero::before, .jm-feature::before, .jm-writing::before, .jm-armor::before, .jm-galactic::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg,#02060b 0%,rgba(2,6,11,.9) 26%,transparent 71%); pointer-events: none; }
.jm-hero-copy { padding-block: 3.5rem; width: max-content; max-width: 100%; }
.jm-roles { text-transform: uppercase; letter-spacing: .29em; font-size: clamp(.63rem,1.1vw,.9rem); font-weight: 650; }
.jm-silver { color: #e7edf3; font-family: Georgia, serif; font-weight: 500; text-transform: uppercase; letter-spacing: .025em; line-height: .96; }
@supports (background-clip: text) {
  .jm-silver { background: linear-gradient(#fff 12%,#c7d4df 39%,#6b7d8c 52%,#f2f7ff 67%,#a3b1be 93%); background-clip: text; color: transparent; }
}
.jm-hero h1 { margin-block: .24em; font-size: clamp(3.6rem,8.15vw,8.45rem); }
.jm-hero-desc { font-size: clamp(1rem,2.05vw,1.85rem); line-height: 1.15; }
.jm-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.55rem; }
.jm-button { --edge: #66d5ff; --fill: #06121e; display: inline-grid; position: relative; isolation: isolate; min-height: 46px; min-width: 185px; place-items: center; padding: .75rem 1.35rem; color: white; text-decoration: none; text-transform: uppercase; font-size: .8rem; font-weight: 700; letter-spacing: .09em; filter: drop-shadow(0 0 6px #168cce80); transition: transform 240ms cubic-bezier(.22,1,.36,1), filter 240ms; }
.jm-button::before, .jm-button::after { content: ""; position: absolute; z-index: -1; inset: 0; background: var(--edge); clip-path: polygon(6px 0, calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px); }
.jm-button::after { inset: 1px; background: linear-gradient(#16374b,var(--fill) 45%,#07131e); }
.jm-button:hover { --edge: #c8f3ff; --fill: #0b283a; color: white; filter: drop-shadow(0 0 10px #16b5fbba); transform: translateY(-2px); }
.jm-button:active { transform: translateY(1px); }
.jm-secondary { --edge: #a2b0bc; filter: none; }
.jm-feature { min-height: clamp(220px,24.7vw,365px); display: grid; align-items: center; }
.jm-feature img, .jm-writing img, .jm-galactic img, .jm-studio img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.jm-feature .jm-wrap { padding-block: 2rem; }
.jm-feature h2 { font-size: clamp(3.3rem,7vw,7.6rem); margin-block: .16em; }
.jm-more { display: inline-flex; align-items: center; gap: .55rem; padding-bottom: .2em; border-bottom: 1px solid #3d7798; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .2em; text-decoration: none; }
.jm-nightmares { background: #010103; }
.jm-nightmares img { width: 100%; }
.jm-nightmares .jm-wrap { padding-block: .45rem .65rem; }
.jm-craft, .jm-ventures { display: grid; grid-template-columns: 1fr 1fr; }
.jm-craft { background: #02060a; }
.jm-craft a { display: block; min-height: clamp(180px,21vw,320px); text-decoration: none; }
.jm-craft h2 { padding: clamp(1rem,3vw,3rem); font: 500 clamp(1.15rem,2.3vw,2.5rem)/1.04 Georgia,serif; letter-spacing: .13em; text-transform: uppercase; text-shadow: 0 2px 8px #000; }
.jm-writing { width: 109%; clip-path: polygon(0 0,100% 0,83.5% 100%,0 100%); }
.jm-writing img { object-position: center 56%; }
.jm-writing::before { background: linear-gradient(140deg,#02070dd9,transparent 70%); }
.jm-armor { margin-left: -9%; clip-path: polygon(16.5% 0,100% 0,100% 100%,0 100%); }
.jm-armor img { position: absolute; inset: 0 auto 0 0; width: 61%; height: 100%; object-fit: cover; object-position: 63% 21%; z-index: -2; }
.jm-armor img + img { inset: 0 0 0 auto; width: 48%; clip-path: polygon(24% 0,100% 0,100% 100%,0 100%); object-position: 46% 18%; }
.jm-armor h2 { margin-left: 16%; padding-left: 1rem; }
.jm-armor::before { background: linear-gradient(145deg,#02070dcb,transparent 58%); }
.jm-galactic, .jm-studio { min-height: clamp(185px,23vw,335px); display: grid; align-items: center; }
.jm-galactic { border-right: 1px solid #274559; background: #030407 url(galactic.jpg) right center / cover no-repeat; }
.jm-galactic::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 8% 4% 8% auto;
  width: 43%;
  background: url(galactic-underground-emblem.png) center / contain no-repeat;
  pointer-events: none;
}
.jm-galactic img { opacity: 0; }
.jm-galactic::before { background: linear-gradient(90deg,#030407 15%,transparent 73%); }
.jm-galactic > div { padding: 1.5rem 0 1.5rem 4vw; }
.jm-galactic h2 { font-size: clamp(1.3rem,3vw,3.2rem); }
.jm-galactic p { margin: .55rem 0 .8rem; font-size: clamp(.75rem,1.13vw,1rem); }
.jm-galactic .jm-more { font-size: .65rem; }
.jm-studio { text-align: center; align-items: start; text-decoration: none; background: #030407 url(studio.jpg) center / contain no-repeat; }
.jm-studio img { object-fit: contain; opacity: 0; }
.jm-studio span { margin: 1rem .75rem 0; }
.jm-cta { text-align: center; padding: clamp(2rem,4vw,4.5rem) 1rem; background: linear-gradient(#02060b86,#02060bbd), url(fog.jpg) center 72% / cover; }
.jm-cta h2 { margin-bottom: .52em; font-size: clamp(1.9rem,5.2vw,5.2rem); letter-spacing: .07em; }
.jm-footer { position: relative; background: linear-gradient(110deg,#02070be8,#02060be0 56%,#030c17c7), url(fog.jpg) center 35% / cover; }
.jm-footer::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg,#102130,#63caff 50%,#102130); box-shadow: 0 0 14px #1997ff; }
.jm-footer-grid { display: grid; grid-template-columns: 1.2fr 1fr .9fr; padding-block: clamp(2rem,5vw,5rem); }
.jm-footer-name { display: inline-block; margin-bottom: .32em; font-size: clamp(2.6rem,5.15vw,5.5rem); text-decoration: none; }
.jm-footer-grid nav { border-left: 1px solid #234556; padding-left: clamp(1rem,5vw,5rem); }
.jm-footer-grid nav h2 { text-transform: uppercase; letter-spacing: .33em; font-size: .95rem; padding-bottom: .65rem; margin-bottom: .9rem; border-bottom: 1px solid #255473; }
.jm-footer-grid nav a { display: block; width: fit-content; text-decoration: none; padding-block: .2rem; }
.jm-footer-base { border-top: 1px solid #325e76; padding-block: 1rem; display: flex; justify-content: space-between; gap: 1rem; color: var(--jm-muted); font-size: .9rem; }
.jm-footer-base small { font-size: inherit; }
.jm-footer-base a { text-decoration: none; }
.jm-intro { background: linear-gradient(90deg,#03070be0,#03070b9e), url(fog.jpg) center 24% / cover; padding-block: clamp(2.8rem,6vw,6rem); border-bottom: 1px solid #26506b; }
.jm-intro .jm-wrap { display: grid; gap: 2rem; align-items: center; }
.jm-intro.with-photo .jm-wrap { grid-template-columns: 1fr 1fr; }
.jm-intro img { width: 100%; max-height: 360px; object-fit: cover; object-position: center 32%; }
.jm-intro img[src*="living-nightmares"] { object-fit: contain; }
.jm-intro h1 { font-size: clamp(2.5rem,6.5vw,6rem); }
.jm-intro p { margin-top: 1rem; max-width: 45ch; font-size: clamp(1rem,2vw,1.4rem); color: var(--jm-muted); }
.jm-prose { max-width: 76ch; margin: auto; padding-block: 2.6rem 3.2rem; }
.jm-prose h2, .jm-row h2 { font: 500 clamp(1.35rem,2.8vw,2rem)/1.2 Georgia,serif; }
.jm-prose p { margin: .65rem 0 1.35rem; }
.jm-prose a:not(.jm-button), .jm-row a:not(.jm-button) { color: #8cdcff; }
.jm-chapters, .jm-projects { padding-block: 2rem; }
.jm-row { display: grid; grid-template-columns: 1fr 1.5fr; align-items: center; gap: 1.5rem; padding-block: 1.4rem; border-bottom: 1px solid #244251; }
.jm-row p { margin-block: .55rem; }
.jm-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; max-width: 920px; margin-inline: auto; }
.jm-gallery img { width: 100%; }
.jm-gallery figcaption { color: var(--jm-muted); font-size: .86rem; padding: .5rem 0; }
@media (max-width: 830px) {
  .jm-nav { display: none; }
  .jm-mobile { display: block; }
  .jm-mobile summary { cursor: pointer; text-transform: uppercase; letter-spacing: .1em; padding: .6rem; }
  .jm-mobile nav { display: grid; position: absolute; inset: 100% 0 auto; padding: .7rem 4vw; text-align: center; background: #051019; border-bottom: 1px solid #325e76; }
  .jm-mobile a { padding: .7rem 0; }
}
@media (max-width: 600px) {
  .jm-wrap { width: calc(100% - 2rem); }
  .jm-hero { min-height: 0; padding-top: 63vw; }
  .jm-hero-art { width: 100%; height: 68vw !important; object-position: center 20%; }
  .jm-hero::before { background: linear-gradient(0deg,#02060b 0%,#02060b 39%,transparent 79%); }
  .jm-hero-copy { padding: .5rem 0 1.7rem; }
  .jm-hero h1 { font-size: clamp(3rem,12vw,4.6rem); }
  .jm-button { min-height: 48px; min-width: 0; padding-inline: 1rem; font-size: .73rem; }
  .jm-craft, .jm-ventures, .jm-intro.with-photo .jm-wrap, .jm-row { grid-template-columns: 1fr; }
  .jm-writing, .jm-armor { width: 100%; margin-left: 0; clip-path: none; }
  .jm-armor h2 { margin-left: 0; }
  .jm-galactic { border-right: 0; border-bottom: 1px solid #26506b; }
  .jm-galactic > div { padding-left: 1rem; }
  .jm-galactic::after { right: 2%; width: 32%; }
  .jm-footer-grid { grid-template-columns: 1fr 1fr; gap: 1.4rem 1rem; }
  .jm-footer-grid > div { grid-column: 1/-1; }
  .jm-footer-name br { display: none; }
  .jm-footer-name { font-size: 2rem; }
  .jm-footer-grid nav { border: 0; padding-left: 0; }
  .jm-footer-grid nav a { padding-block: .38rem; font-size: .92rem; }
}
@media (prefers-reduced-motion: reduce) {
  .jm-button { transition: none; }
  .jm-button:hover, .jm-button:active { transform: none; }
}