:root {
  --j3-black: #050505;
  --j3-paper: #eeeae2;
  --j3-orange: #ff4b00;
  --j3-blue: #5e9dd0;
  --j3-red: #b6142b;
  --j3-line: rgba(255,255,255,.14);
  --j3-muted: rgba(255,255,255,.61);
}

* { box-sizing: border-box; }
html { background: var(--j3-black); scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; background: var(--j3-black); color: #f7f5ef; font-family: Arial, Helvetica, sans-serif; }
body::before { position: fixed; inset: 0; z-index: 9999; content: ""; pointer-events: none; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; }
a { color: inherit; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }

.j3-bar { position: fixed; top: 0; right: 0; left: 0; z-index: 105; display: flex; justify-content: space-between; align-items: center; padding: max(18px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) 18px max(24px, env(safe-area-inset-left)); pointer-events: none; }
.j3-bar > * { pointer-events: auto; }
.j3-language { display: flex; gap: 9px; align-items: center; padding: 10px 15px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; background: rgba(5,5,5,.68); box-shadow: 0 12px 38px rgba(0,0,0,.24); backdrop-filter: blur(15px); }
.j3-language button { min-width: 34px; height: 30px; padding: 0 8px; border: 0; border-radius: 999px; background: transparent; color: rgba(255,255,255,.45); font: 700 9px/1 Arial, sans-serif; letter-spacing: .12em; cursor: pointer; transition: color .18s ease, background .18s ease; }
.j3-language button:hover, .j3-language button:focus-visible { color: #fff; outline: none; }
.j3-language button.is-active { background: var(--j3-orange); color: #090909; box-shadow: 0 0 22px rgba(255,75,0,.2); }
.j3-language span { color: rgba(255,255,255,.16); font-size: 9px; }

.j3-hero { position: relative; min-height: 100svh; overflow: hidden; padding: clamp(124px,14vh,180px) clamp(26px,7vw,118px) clamp(60px,8vh,100px); background: #050505; isolation: isolate; }
.j3-hero::before { position: absolute; inset: 0; z-index: -2; content: ""; background: radial-gradient(circle at 18% 110%, rgba(69,132,184,.18), transparent 37%), radial-gradient(circle at 82% 108%, rgba(185,23,49,.16), transparent 36%); }
.j3-hero::after { position: absolute; inset: 0; z-index: -1; content: ""; background: linear-gradient(90deg, transparent 0 12%, rgba(255,255,255,.018) 12% 12.08%, transparent 12.08% 50%, rgba(255,255,255,.018) 50% 50.08%, transparent 50.08% 88%, rgba(255,255,255,.018) 88% 88.08%, transparent 88.08%); }
.j3-hero-lines { position: absolute; inset: 0; z-index: -1; display: grid; grid-template-columns: repeat(3,1fr); opacity: .45; }
.j3-hero-lines i { position: relative; }
.j3-hero-lines i::after { position: absolute; right: 0; bottom: -20vh; left: 0; height: 38vh; content: ""; filter: blur(70px); opacity: .13; }
.j3-hero-lines i:nth-child(1)::after { background: var(--j3-blue); }
.j3-hero-lines i:nth-child(2)::after { background: #c4b9a4; }
.j3-hero-lines i:nth-child(3)::after { background: var(--j3-red); }
.j3-meta { display: flex; justify-content: space-between; gap: 30px; max-width: 1460px; margin: 0 auto clamp(70px,12vh,142px); color: rgba(255,255,255,.45); font: 700 9px/1 Arial, sans-serif; letter-spacing: .24em; }
.j3-hero-copy { max-width: 1460px; margin: 0 auto; }
.j3-kicker, .j3-section-number { margin: 0 0 26px; color: var(--j3-orange); font: 750 9px/1.2 Arial, sans-serif; letter-spacing: .28em; text-transform: uppercase; }
.j3-hero h1 { max-width: 1180px; margin: 0; font: 230 clamp(54px,9.4vw,146px)/.89 Arial, Helvetica, sans-serif; letter-spacing: -.072em; text-wrap: balance; }
.j3-lede { max-width: 670px; margin: clamp(38px,6vh,70px) 0 0 auto; color: rgba(255,255,255,.68); font: 400 clamp(17px,1.55vw,23px)/1.55 Georgia, "Times New Roman", serif; }
.j3-down { position: absolute; right: clamp(26px,7vw,118px); bottom: 34px; display: grid; width: 50px; height: 50px; place-items: center; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; text-decoration: none; }
.j3-down span { width: 1px; height: 15px; background: rgba(255,255,255,.8); box-shadow: 0 5px 0 -2px #fff; }

.j3-triptych { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(8px,1.25vw,22px); padding: clamp(12px,2vw,30px) clamp(12px,2vw,30px) clamp(42px,6vw,86px); background: #050505; }
.j3-photo { min-width: 0; margin: 0; }
.j3-photo-sound { margin-top: clamp(34px,5vw,80px); }
.j3-photo-frame { position: relative; overflow: hidden; aspect-ratio: 9/16; background: #111; }
.j3-photo-frame::after { position: absolute; inset: 0; content: ""; border: 1px solid rgba(255,255,255,.12); box-shadow: inset 0 0 80px rgba(0,0,0,.08); pointer-events: none; }
.j3-photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.006); transition: transform 1.25s cubic-bezier(.2,.7,.2,1), filter 1.25s ease; }
.j3-photo:hover img { transform: scale(1.026); }
.j3-photo figcaption { display: flex; justify-content: space-between; gap: 20px; margin-top: 16px; padding: 0 3px; color: #fff; font: 450 clamp(19px,2vw,31px)/1 Arial, sans-serif; letter-spacing: -.03em; }
.j3-photo figcaption span { color: rgba(255,255,255,.36); font: 700 9px/1 Arial, sans-serif; letter-spacing: .2em; }
.j3-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(3px,.45vw,8px); padding: 0 clamp(12px,2vw,30px) clamp(90px,12vw,180px); background: #050505; }
.j3-summary figure { position: relative; min-width: 0; height: clamp(220px,30vw,470px); overflow: hidden; margin: 0; background: #111; }
.j3-summary figure::after { position: absolute; inset: 0; content: ""; border: 1px solid rgba(255,255,255,.1); box-shadow: inset 0 0 55px rgba(0,0,0,.12); pointer-events: none; }
.j3-summary button { display: block; width: 100%; height: 100%; overflow: hidden; padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.j3-summary img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.72,.2,1), filter .8s ease; }
.j3-summary button:hover img, .j3-summary button:focus-visible img { transform: scale(1.025); filter: brightness(1.06); }
.j3-summary button:focus-visible { outline: 2px solid var(--j3-orange); outline-offset: -3px; }
.j3-summary span { position: absolute; right: 13px; bottom: 12px; color: rgba(255,255,255,.65); font: 750 8px/1 Arial, sans-serif; letter-spacing: .18em; }

body.j3-lightbox-open { overflow: hidden; }
.j3-lightbox { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: clamp(18px,4vw,64px); background: rgba(2,2,2,.9); opacity: 0; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); transition: opacity .35s ease; }
.j3-lightbox.is-open { opacity: 1; }
.j3-lightbox figure { position: relative; max-width: min(92vw,960px); max-height: 91svh; margin: 0; transform: translateY(18px) scale(.985); transition: transform .48s cubic-bezier(.2,.72,.2,1); }
.j3-lightbox.is-open figure { transform: translateY(0) scale(1); }
.j3-lightbox figure::after { position: absolute; inset: 0; content: ""; border: 1px solid rgba(255,255,255,.16); box-shadow: 0 32px 110px rgba(0,0,0,.65), inset 0 0 90px rgba(0,0,0,.08); pointer-events: none; }
.j3-lightbox img { width: auto; max-width: 92vw; height: auto; max-height: 86svh; object-fit: contain; }
.j3-lightbox figcaption { position: absolute; right: 0; bottom: 0; left: 0; padding: 34px 22px 18px; background: linear-gradient(transparent,rgba(0,0,0,.72)); color: rgba(255,255,255,.88); font: 700 9px/1 Arial,sans-serif; letter-spacing: .26em; text-transform: uppercase; }
.j3-lightbox-close { position: fixed; top: max(18px,env(safe-area-inset-top)); right: max(18px,env(safe-area-inset-right)); z-index: 1; display: grid; width: 48px; height: 48px; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; background: rgba(0,0,0,.45); color: #fff; font: 300 29px/1 Arial,sans-serif; cursor: pointer; transition: border-color .2s ease, transform .2s ease; }
.j3-lightbox-close:hover, .j3-lightbox-close:focus-visible { border-color: var(--j3-orange); outline: none; transform: rotate(5deg); }

.j3-identity { position: relative; overflow: hidden; padding: clamp(92px,13vw,190px) clamp(26px,8vw,132px); background: var(--j3-paper); color: #090909; }
.j3-identity-mark { position: absolute; right: -9vw; bottom: -13vw; width: min(58vw,820px); opacity: .045; filter: grayscale(1); transform: rotate(-4deg); }
.j3-identity-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(160px,.62fr) minmax(0,2.1fr); gap: clamp(40px,8vw,150px); max-width: 1440px; margin: 0 auto; }
.j3-identity .j3-section-number { color: rgba(0,0,0,.46); }
.j3-identity h2 { max-width: 1080px; margin: 0; font: 330 clamp(42px,6.8vw,104px)/.95 Arial, Helvetica, sans-serif; letter-spacing: -.065em; }
.j3-identity h2 em { color: var(--j3-orange); font-family: Georgia, "Times New Roman", serif; font-weight: 400; }
.j3-identity-grid > div > p { max-width: 800px; margin: clamp(46px,6vw,84px) 0 0; font: 400 clamp(20px,2.25vw,34px)/1.4 Georgia, "Times New Roman", serif; }
.j3-witness { position: relative; z-index: 1; max-width: 870px; margin: clamp(90px,13vw,180px) 0 0 auto; padding-top: 28px; border-top: 1px solid rgba(0,0,0,.3); }
.j3-witness p { margin: 0; font: 600 clamp(13px,1.4vw,19px)/1.6 Arial, sans-serif; letter-spacing: .02em; }

.j3-press { padding: clamp(100px,14vw,200px) clamp(22px,6vw,105px); background: #080808; }
.j3-press-head { display: grid; grid-template-columns: minmax(0,1.8fr) minmax(250px,.72fr); gap: clamp(42px,8vw,130px); align-items: end; max-width: 1450px; margin: 0 auto clamp(80px,10vw,150px); }
.j3-press-head > div { display: contents; }
.j3-press-head .j3-section-number { grid-column: 1 / -1; margin-bottom: 0; }
.j3-press-head h2 { margin: 0; font: 290 clamp(66px,10vw,154px)/.78 Arial, sans-serif; letter-spacing: -.075em; text-transform: uppercase; }
.j3-press-head > div > p:last-child { max-width: 440px; margin: 0 0 8px; color: var(--j3-muted); font: 400 clamp(17px,1.6vw,22px)/1.55 Georgia, "Times New Roman", serif; }
.j3-press-ledger { max-width: 1450px; margin: 0 auto; border-bottom: 1px solid var(--j3-line); }
.j3-press-entry { display: grid; grid-template-columns: minmax(150px,.72fr) minmax(0,2.4fr) minmax(150px,.62fr); gap: clamp(28px,5vw,85px); align-items: center; padding: clamp(34px,4vw,60px) clamp(4px,1vw,14px); border-top: 1px solid var(--j3-line); color: #f4f1eb; text-decoration: none; transition: background .35s ease, padding .35s ease; }
.j3-press-entry:hover, .j3-press-entry:focus-visible { padding-right: clamp(14px,2vw,30px); padding-left: clamp(14px,2vw,30px); background: rgba(255,255,255,.035); outline: none; }
.j3-media { align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.j3-media img { width: min(165px,100%); height: 52px; object-fit: contain; object-position: left center; filter: grayscale(1) invert(1); mix-blend-mode: screen; opacity: .68; }
.j3-media img[alt="Como Las Grecas"] { filter: none; }
.j3-media time { color: rgba(255,255,255,.35); font: 700 9px/1 Arial, sans-serif; letter-spacing: .2em; }
.j3-article h3 { max-width: 860px; margin: 0; font: 430 clamp(24px,2.9vw,44px)/1.03 Arial, sans-serif; letter-spacing: -.045em; }
.j3-article p { max-width: 780px; margin: 20px 0 0; color: var(--j3-muted); font: 400 clamp(15px,1.35vw,18px)/1.58 Georgia, "Times New Roman", serif; }
.j3-read { max-width: 190px; color: var(--j3-orange); font: 750 9px/1.55 Arial, sans-serif; letter-spacing: .16em; text-align: right; text-transform: uppercase; }

.j3-closing { display: grid; min-height: min(88svh,900px); padding: clamp(80px,10vw,150px) clamp(26px,8vw,130px); place-items: center; align-content: center; background: var(--j3-orange); color: #080808; text-align: center; }
.j3-closing img { width: clamp(84px,9vw,132px); height: auto; aspect-ratio: 1 / 1; margin-bottom: 42px; object-fit: contain; }
.j3-closing p { margin: 0 0 clamp(36px,5vw,70px); font: 800 10px/1 Arial, sans-serif; letter-spacing: .34em; }
.j3-closing h2 { margin: 0; font: 750 clamp(42px,7.6vw,118px)/.88 Arial, sans-serif; letter-spacing: -.065em; }
.j3-footer { display: flex; justify-content: space-between; gap: 24px; padding: 32px clamp(22px,5vw,80px); background: #050505; color: rgba(255,255,255,.45); font: 700 9px/1.4 Arial, sans-serif; letter-spacing: .16em; }
.j3-footer a { text-decoration: none; }

.j3-reveal { opacity: 0; transform: translateY(34px); transition: opacity .9s ease, transform 1.05s cubic-bezier(.2,.72,.2,1); }
.j3-reveal.is-visible { opacity: 1; transform: translateY(0); }
.j3-photo:nth-child(2) { transition-delay: .08s; }
.j3-photo:nth-child(3) { transition-delay: .16s; }

@media (max-width: 900px) {
  .j3-hero { min-height: 92svh; padding-right: 24px; padding-left: 24px; }
  .j3-meta { margin-bottom: 90px; }
  .j3-hero h1 { font-size: clamp(54px,9.4vw,146px); }
  .j3-lede { margin-left: 18vw; }
  .j3-triptych { grid-template-columns: 1fr; gap: 74px; padding: 18px 18px 110px; }
  .j3-photo, .j3-photo-sound { width: min(100%,680px); margin: 0 auto; }
  .j3-photo:nth-child(even) { margin-right: 0; }
  .j3-photo:nth-child(odd) { margin-left: 0; }
  .j3-summary { padding-right: 18px; padding-left: 18px; }
  .j3-identity-grid { grid-template-columns: 1fr; }
  .j3-identity h2 { font-size: clamp(44px,9.5vw,78px); }
  .j3-press-head { grid-template-columns: 1fr; }
  .j3-press-head > div { display: block; min-width: 0; width: 100%; }
  .j3-press-head .j3-section-number { grid-column: auto; }
  .j3-press-head h2 { margin-bottom: 44px; }
  .j3-press-entry { grid-template-columns: 132px 1fr; }
  .j3-read { grid-column: 2; max-width: none; text-align: left; }
}

@media (max-width: 620px) {
  .j3-bar { padding-right: 12px; padding-left: 12px; }
  .j3-language { gap: 7px; padding: 9px 11px; }
  .j3-hero { min-height: 100svh; padding: 114px 20px 74px; }
  .j3-meta { margin-bottom: 80px; }
  .j3-kicker { margin-bottom: 22px; }
  .j3-hero h1 { font-size: clamp(49px,16vw,78px); letter-spacing: -.066em; line-height: .91; }
  .j3-lede { margin: 46px 0 0 12vw; font-size: 17px; }
  .j3-down { right: 20px; bottom: 24px; }
  .j3-triptych { padding-right: 12px; padding-left: 12px; }
  .j3-photo:nth-child(n) { width: 91%; }
  .j3-photo:nth-child(2) { margin-right: 0; margin-left: auto; }
  .j3-photo:nth-child(1), .j3-photo:nth-child(3) { margin-right: auto; margin-left: 0; }
  .j3-summary { gap: 3px; padding: 0 12px 100px; }
  .j3-summary figure { height: clamp(176px,57vw,250px); }
  .j3-summary span { right: 8px; bottom: 8px; }
  .j3-identity { padding: 90px 22px 110px; }
  .j3-identity-mark { right: 0; transform: none; }
  .j3-identity-grid { gap: 30px; }
  .j3-identity h2 { font-size: clamp(40px,12.4vw,61px); }
  .j3-identity-grid > div > p { margin-top: 40px; font-size: 21px; }
  .j3-witness { margin-top: 84px; }
  .j3-press { padding: 96px 18px 110px; }
  .j3-press-head { margin-bottom: 74px; }
  .j3-press-head h2 { font-size: clamp(60px,18vw,90px); }
  .j3-press-entry { grid-template-columns: 1fr; gap: 24px; padding: 36px 4px; }
  .j3-media { flex-direction: row; align-items: center; }
  .j3-media img { width: 132px; height: 42px; }
  .j3-read { grid-column: auto; margin-top: 4px; }
  .j3-closing { min-height: 82svh; padding: 84px 20px; }
  .j3-closing h2 { font-size: clamp(41px,13vw,66px); }
  .j3-footer { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .j3-reveal { opacity: 1; transform: none; transition: none; }
  .j3-photo img, .j3-press-entry { transition: none; }
  .j3-lightbox, .j3-lightbox figure, .j3-summary img { transition: none; }
}