:root { --ink:#080a09; --paper:#eeeae2; --acid:#b8ff34; --line:rgba(238,234,226,.2); --muted:#aaaead; --journal-index-accent:#b8ff34; }
* { box-sizing:border-box; }
html { background:var(--ink); color:var(--paper); scroll-behavior:smooth; scroll-padding-top:110px; }
body { margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif; }
img { display:block; max-width:100%; height:auto; }
a { color:inherit; text-decoration:none; }
a:focus-visible { outline:2px solid var(--acid); outline-offset:6px; }
.j4-wrap { width:min(1240px,calc(100% - 176px)); margin-inline:auto; }
.j4-skip { position:fixed; left:16px; top:-100px; z-index:20000; padding:16px; background:var(--acid); color:var(--ink); }
.j4-skip:focus { top:16px; }
.j4-bar { position:fixed; inset:0 0 auto; z-index:105; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:max(16px,env(safe-area-inset-top)) 22px 16px; pointer-events:none; }
.j4-bar > * { pointer-events:auto; }
.j4-language { display:flex; padding:3px; background:rgba(8,10,9,.92); border:1px solid var(--line); border-radius:40px; backdrop-filter:blur(16px); }
.j4-language a { display:grid; place-items:center; width:44px; min-height:44px; font-size:11px; font-weight:650; border-radius:50%; }
.j4-language a[aria-current="true"] { color:var(--ink); background:var(--acid); }
.j4-language a:hover { box-shadow:inset 0 0 0 1px var(--acid); }
.j4-hero { padding-block:120px 60px; }
.j4-meta { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; padding-bottom:18px; margin-bottom:36px; border-bottom:1px solid var(--line); color:var(--muted); font-size:11px; letter-spacing:.13em; text-transform:uppercase; }
.j4-hero-grid { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); align-items:start; gap:clamp(28px,4vw,66px); }
.j4-hero-copy { min-width:0; }
.j4-masthead { display:block; width:min(265px,70%); margin-bottom:34px; }
.j4-premiere { display:block; color:var(--acid); font-size:11px; font-weight:700; letter-spacing:.29em; margin-bottom:12px; }
.j4-masthead img { width:100%; filter:brightness(0) invert(1); }
.j4-kicker { margin:0 0 17px; color:var(--acid); font-size:10px; font-weight:650; letter-spacing:.17em; line-height:1.5; text-transform:uppercase; }
h1 { margin:0; font-size:clamp(28px,4.65vw,69px); line-height:1; letter-spacing:-.055em; font-weight:750; }
h1 span { display:block; margin-top:14px; font-size:clamp(19px,2.2vw,29px); line-height:1.2; font-weight:400; letter-spacing:-.025em; }
.j4-intro { max-width:490px; margin:28px 0; color:#c5c9c5; font-size:clamp(17px,1.55vw,20px); line-height:1.65; }
.j4-action { display:inline-flex; align-items:center; justify-content:space-between; gap:28px; padding:17px 22px; background:var(--acid); color:var(--ink); font-size:14px; font-weight:650; line-height:1.4; border:1px solid var(--acid); transition:background .2s,color .2s; }
.j4-action b { font-size:23px; font-weight:400; line-height:1; }
.j4-action:hover { background:var(--paper); border-color:var(--paper); }
.j4-fine { color:var(--muted); font-size:11px; line-height:1.65; margin:12px 0 0; }
.j4-cover { margin:0; padding-top:2px; }
.j4-cover > img { width:100%; aspect-ratio:1; object-fit:contain; border:1px solid var(--line); box-shadow:0 26px 50px rgba(0,0,0,.3); }
.j4-cover figcaption { display:flex; justify-content:space-between; gap:14px; padding-top:15px; color:var(--muted); font-size:9px; line-height:1.5; letter-spacing:.12em; }
.j4-cover figcaption > span:last-child { color:var(--acid); white-space:nowrap; }
.j4-editorial { background:var(--paper); color:var(--ink); padding-block:48px; }
.j4-editorial-grid { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(28px,6vw,84px); }
h2 { margin:0; font-weight:500; font-size:clamp(30px,3.65vw,52px); letter-spacing:-.045em; line-height:1.08; text-wrap:balance; }
.j4-editorial .j4-kicker { color:#47513b; }
.j4-summary { margin:0; font:400 clamp(21px,2.1vw,29px)/1.48 Georgia,"Times New Roman",serif; }
.j4-attribution { margin:22px 0 0; font-size:12px; line-height:1.6; color:#53594e; }
.j4-identity { display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); align-items:center; gap:clamp(32px,7vw,110px); padding-block:58px; }
.j4-portrait { margin:0; width:min(100%,350px); }
.j4-portrait img { width:100%; aspect-ratio:1737 / 3088; object-fit:contain; border:1px solid var(--line); }
.j4-portrait figcaption { margin-top:14px; font-size:10px; line-height:1.5; letter-spacing:.15em; color:var(--muted); }
.j4-identity-copy > p:not(.j4-kicker), .j4-vinyl > div > p:not(.j4-kicker) { max-width:620px; margin:24px 0 0; font-size:17px; line-height:1.75; color:#bfc4be; }
.j4-text-link { display:inline-flex; align-items:center; gap:28px; padding-block:14px; border-bottom:1px solid var(--line); margin-top:20px; color:var(--acid); font-size:13px; line-height:1.5; font-weight:600; }
.j4-text-link:hover { border-color:var(--acid); }
.j4-note { position:relative; border-block:1px solid var(--line); padding-block:34px; padding-right:clamp(60px,12vw,165px); }
.j4-note .j4-kicker { color:var(--muted); }
.j4-statement { max-width:910px; margin:0; font:400 clamp(27px,3.7vw,48px)/1.25 Georgia,"Times New Roman",serif; letter-spacing:-.025em; }
.j4-note img { position:absolute; right:0; top:50%; transform:translateY(-50%); width:clamp(40px,8vw,90px); opacity:.28; }
.j4-vinyl { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr); gap:clamp(36px,7vw,100px); align-items:center; padding-block:54px; }
.j4-salp { display:block; width:min(100%,280px); justify-self:end; }
.j4-salp > img { width:100%; aspect-ratio:1; object-fit:contain; border:1px solid var(--line); }
.j4-salp > span { display:flex; justify-content:space-between; padding-top:12px; font-size:11px; letter-spacing:.15em; }
.j4-salp b { color:var(--acid); }
.j4-source { padding-block:42px 28px; background:#172017; border-block:1px solid rgba(184,255,52,.23); }
.j4-source-grid { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:28px 45px; align-items:center; }
.j4-source-grid > div > p:not(.j4-kicker) { max-width:570px; margin:20px 0 0; color:#c7cdc1; font-size:17px; line-height:1.65; }
.j4-action-light { background:transparent; color:var(--paper); border-color:rgba(238,234,226,.5); }
.j4-action-light:hover { color:var(--ink); }
.j4-source-credit { grid-column:1/-1; max-width:880px; padding-top:22px; border-top:1px solid var(--line); margin:0; font-size:11px; line-height:1.7; color:#adb7a7; }
.j4-continue { display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:26px; border-bottom:1px solid var(--line); font-size:12px; line-height:1.6; }
.j4-continue a { display:flex; gap:18px; align-items:center; min-height:44px; }
.j4-continue a:hover { color:var(--acid); }
.j4-footer { display:flex; flex-wrap:wrap; gap:18px 30px; color:var(--muted); padding-block:26px 38px; font-size:10px; line-height:1.5; letter-spacing:.12em; text-transform:uppercase; }
.j4-footer > span { margin-right:auto; }
@media (max-width:960px) {
  .j4-wrap { width:calc(100% - 176px); }
  .j4-hero-grid { gap:28px; }
  h1 { font-size:4.05vw; }
  .j4-masthead { width:210px; }
  .j4-intro { font-size:17px; }
  .j4-identity { gap:38px; grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); }
  .j4-identity-copy > p:not(.j4-kicker) { font-size:16px; }
  .j4-source-grid { grid-template-columns:1fr; }
  .j4-source-grid .j4-action { justify-self:start; }
}
@media (max-width:820px) { .j4-wrap { width:calc(100% - 64px); } }
@media (max-width:700px) {
  html { scroll-padding-top:90px; }
  .j4-wrap { width:calc(100% - 40px); }
  .j4-bar { padding-inline:12px; }
  .j4-hero { padding-block:100px 32px; }
  .j4-meta { font-size:9px; letter-spacing:.07em; margin-bottom:28px; }
  .j4-hero-grid, .j4-editorial-grid, .j4-identity, .j4-vinyl { grid-template-columns:minmax(0,1fr); gap:28px; }
  .j4-masthead { width:220px; margin-bottom:28px; }
  h1 { font-size:clamp(28px,8.45vw,57px); letter-spacing:-.055em; }
  h1 span { font-size:23px; }
  .j4-intro { margin:22px 0; }
  .j4-cover { width:min(100%,400px); margin-inline:auto; }
  .j4-cover figcaption { font-size:8px; }
  .j4-editorial { padding-block:32px; }
  h2 { font-size:clamp(30px,8.5vw,45px); }
  .j4-summary { font-size:23px; }
  .j4-identity { padding-block:34px; }
  .j4-identity-copy { grid-row:1; }
  .j4-portrait { width:min(70%,270px); justify-self:center; }
  .j4-identity-copy > p:not(.j4-kicker), .j4-vinyl > div > p:not(.j4-kicker) { margin-top:20px; font-size:16px; }
  .j4-note { padding-block:28px; padding-right:54px; }
  .j4-statement { font-size:27px; }
  .j4-note img { width:34px; }
  .j4-vinyl { padding-block:32px; }
  .j4-salp { justify-self:start; width:190px; }
  .j4-source { padding-block:32px 24px; }
  .j4-source-credit { font-size:11px; }
  .j4-continue { align-items:start; flex-direction:column; gap:10px; padding-block:20px; }
  .j4-footer { padding-bottom:30px; }
  .j4-footer > span { flex-basis:100%; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none !important; } }

/* Full authorised FAZE article: a continuous reading column, not an editorial summary. */
.j4-full { padding-block:44px 46px; background:var(--paper); color:var(--ink); }
.j4-reading { max-width:790px; margin-inline:auto; }
.j4-article-heading { margin-bottom:28px; padding-bottom:23px; border-bottom:1px solid #b7bbb0; }
.j4-article-heading .j4-kicker { color:#47513b; font-size:12px; }
.j4-article-heading h2 { max-width:760px; font-size:clamp(29px,3.5vw,45px); line-height:1.14; }
.j4-byline { font-size:14px; font-weight:600; margin:22px 0 0; line-height:1.6; }
.j4-translation { font-size:13px; color:#515a4d; margin:5px 0 0; line-height:1.6; }
.j4-article-photo { margin:28px 0; }
.j4-article-photo img { width:100%; height:auto; object-fit:contain; }
.j4-article-photo figcaption { margin-top:9px; color:#52594f; font-size:13px; line-height:1.5; }
.j4-article-body { font-size:19px; line-height:1.8; }
.j4-article-body > p { margin:0 0 22px; }
.j4-article-body .j4-article-opening { font-size:21px; line-height:1.7; font-weight:500; }
.j4-article-body h3 { margin:38px 0 20px; font-size:clamp(26px,3vw,36px); font-weight:650; letter-spacing:-.035em; line-height:1.2; }
.j4-article-body a { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; }
.j4-full a:focus-visible { outline-color:#354d14; }
.j4-original-tracks { margin:20px 0 26px; padding-left:22px; font-size:17px; font-weight:550; line-height:1.65; }
.j4-original-tracks li { padding-left:5px; margin-bottom:12px; }
.j4-original-home { font-size:14px; }
.j4-faze-player { display:block; width:100%; height:400px; margin:28px 0 22px; border:0; background:#101311; }
@media (max-width:700px) {
  .j4-full { padding-block:30px; }
  .j4-article-body { font-size:17px; line-height:1.75; }
  .j4-article-body .j4-article-opening { font-size:19px; }
  .j4-article-body h3 { margin-top:30px; font-size:28px; }
  .j4-article-heading h2 { font-size:30px; }
  .j4-original-tracks { font-size:16px; }
  .j4-faze-player { height:340px; }
}