@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500;1,600&display=swap');

:root {
  --jg-ink: #18201d;
  --jg-paper: #f5f2e9;
  --jg-red: #a73728;
  --jg-red-dark: #762419;
  --jg-muted: #6e7169;
  --jg-line: #d6d1c5;
  --jg-card: #ece9df;
  --jg-dark-card: #26322d;
  --jg-radius: 2px;
}

html.jg-reference-active,
html.jg-reference-active body { margin: 0; background: var(--jg-paper); color: var(--jg-ink); }
html.jg-reference-active body { font-family: 'DM Sans', Inter, Arial, sans-serif; }
html.jg-reference-active * { box-sizing: border-box; }
html.jg-reference-active a { color: inherit; text-decoration: none; }
html.jg-reference-active button,
html.jg-reference-active input { font: inherit; }

.jg-reference { min-height: 100vh; overflow: hidden; }
.jg-skip { position: absolute; top: -60px; left: 1rem; background: var(--jg-ink); color: #fff; padding: .7rem 1rem; z-index: 99; }
.jg-skip:focus { top: 1rem; }

.jg-header { width: min(1440px, 100%); height: 78px; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 4.5rem); border-bottom: 1px solid var(--jg-line); display: flex; align-items: center; justify-content: space-between; gap: 2rem; background: var(--jg-paper); }
.jg-brand { display: inline-flex; align-items: center; gap: .75rem; min-width: max-content; }
.jg-brand img { width: 96px; height: auto; object-fit: contain; filter: invert(1); }
.jg-brand span { color: var(--jg-red); font: 500 .66rem/1 'DM Mono', monospace; letter-spacing: .15em; }
.jg-nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.7rem); font-size: .78rem; text-transform: uppercase; letter-spacing: .075em; font-weight: 600; }
.jg-nav a { padding: .45rem 0; border-bottom: 1px solid transparent; }
.jg-nav a:hover, .jg-nav a:focus-visible { border-color: var(--jg-red); color: var(--jg-red); }

.jg-cover { width: min(1440px, 100%); min-height: min(74vh, 840px); margin: 0 auto; position: relative; background: #303832; color: #fff; display: grid; align-items: end; isolation: isolate; }
.jg-cover-media, .jg-cover-media > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.jg-cover-image { object-fit: cover; object-position: center; }
.jg-cover-skeleton, .jg-image-fallback { background: linear-gradient(125deg, #293a34 0%, #6f4b31 46%, #151c19 100%); }
.jg-cover-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(14,20,17,.92) 0%, rgba(14,20,17,.64) 39%, rgba(14,20,17,.05) 75%), linear-gradient(0deg, rgba(14,20,17,.45), transparent 48%); }
.jg-cover-content { position: relative; z-index: 2; padding: clamp(2rem, 7vw, 7rem); max-width: 790px; }
.jg-cover-eyebrow, .jg-eyebrow, .jg-kicker { margin: 0 0 .8rem; color: var(--jg-red); font: 500 .67rem/1.3 'DM Mono', monospace; letter-spacing: .15em; text-transform: uppercase; }
.jg-cover-eyebrow { color: rgba(255,255,255,.72); }
.jg-cover-section { display: inline-block; margin: 0 0 1.1rem; padding: .35rem .5rem .3rem; background: var(--jg-red); color: #fff; font: 500 .65rem/1 'DM Mono', monospace; letter-spacing: .12em; }
.jg-cover h1 { font: 600 clamp(3.1rem, 8vw, 7.4rem)/.91 'Playfair Display', Georgia, serif; letter-spacing: -.055em; margin: 0; text-wrap: balance; }
.jg-cover-content > p:not(.jg-cover-eyebrow):not(.jg-cover-section) { max-width: 620px; margin: 1.4rem 0 2rem; color: rgba(255,255,255,.9); font: 400 clamp(1rem, 1.5vw, 1.26rem)/1.5 'DM Sans', sans-serif; text-wrap: pretty; }
.jg-cover-action { display: inline-flex; gap: .6rem; color: #fff; border-bottom: 1px solid var(--jg-red); padding-bottom: .38rem; font-size: .78rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.jg-cover-action:hover { color: #f3b4a9; }
.jg-cover-mark { position: absolute; z-index: 2; top: clamp(1.5rem, 4vw, 4rem); right: clamp(1.5rem, 4vw, 4.5rem); margin: 0; color: rgba(255,255,255,.9); font: 500 clamp(1.25rem, 2.2vw, 2rem)/.82 'DM Sans', sans-serif; letter-spacing: -.08em; text-align: right; }
.jg-cover-mark span { display: block; padding-top: .8rem; color: #e6ada2; font: .64rem/1 'DM Mono', monospace; letter-spacing: .12em; }

.jg-search-section, .jg-stories-section, .jg-partnership { width: min(1280px, 100%); margin: 0 auto; padding: clamp(4rem, 9vw, 8rem) clamp(1.25rem, 4vw, 4.5rem); }
.jg-search-section { display: grid; grid-template-columns: minmax(200px, .9fr) minmax(320px, 1.1fr); column-gap: clamp(2.5rem, 8vw, 9rem); row-gap: 1.25rem; border-bottom: 1px solid var(--jg-line); }
.jg-section-intro h2, .jg-section-heading h2, .jg-desk-callout h2, .jg-partnership h2 { margin: 0; font: 600 clamp(2.1rem, 4.3vw, 4.2rem)/.98 'Playfair Display', Georgia, serif; letter-spacing: -.045em; text-wrap: balance; }
.jg-section-intro > p:last-child { max-width: 390px; margin: 1.3rem 0 0; color: var(--jg-muted); font-size: 1rem; line-height: 1.6; }
.jg-search-form { align-self: end; position: relative; display: flex; border-bottom: 2px solid var(--jg-ink); }
.jg-search-form input { width: 100%; min-width: 0; padding: .9rem 0; border: 0; outline: 0; background: transparent; color: var(--jg-ink); font: 500 clamp(1.1rem, 1.8vw, 1.45rem)/1.3 'DM Sans', sans-serif; }
.jg-search-form input::placeholder { color: #8d8d84; opacity: 1; }
.jg-search-form button { border: 0; margin: .55rem 0 .55rem 1rem; padding: .6rem .9rem; cursor: pointer; background: var(--jg-ink); color: white; font: 600 .7rem/1 'DM Sans', sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.jg-search-form button:hover { background: var(--jg-red); }
.jg-search-chips { grid-column: 2; display: flex; flex-wrap: wrap; gap: .55rem; }
.jg-search-chips button { padding: .45rem .68rem; border: 1px solid var(--jg-line); border-radius: 999px; cursor: pointer; background: transparent; color: var(--jg-ink); font-size: .78rem; }
.jg-search-chips button:hover, .jg-search-chips button:focus-visible { border-color: var(--jg-red); color: var(--jg-red); }
.jg-search-status { grid-column: 2; min-height: 1.2rem; color: var(--jg-muted); font: .72rem/1.5 'DM Mono', monospace; }
.jg-search-results { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 1rem; }
.jg-search-results:empty { display: none; }

.jg-stories-section { border-bottom: 1px solid var(--jg-line); }
.jg-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.jg-section-heading h2 { max-width: 720px; }
.jg-text-link, .jg-inline-link { color: var(--jg-red); font: 600 .72rem/1.3 'DM Sans', sans-serif; text-transform: uppercase; letter-spacing: .08em; }
.jg-text-link { white-space: nowrap; border-bottom: 1px solid currentColor; padding-bottom: .3rem; }
.jg-story-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.35rem; }
.jg-story-card { min-width: 0; }
.jg-story-image-link { display: block; background: #d8d2c4; aspect-ratio: 4/3; overflow: hidden; }
.jg-story-image { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.jg-story-image-link:hover .jg-story-image { transform: scale(1.035); }
.jg-story-copy { padding-top: 1rem; }
.jg-story-copy .jg-kicker { margin-bottom: .55rem; color: var(--jg-red); }
.jg-story-copy h3 { margin: 0; font: 600 1.36rem/1.08 'Playfair Display', Georgia, serif; letter-spacing: -.025em; text-wrap: balance; }
.jg-story-copy h3 a:hover { color: var(--jg-red); }
.jg-story-copy > p:not(.jg-kicker) { min-height: 3.9em; margin: .8rem 0; color: var(--jg-muted); font-size: .87rem; line-height: 1.5; }
.jg-inline-link { display: inline-block; margin-top: .25rem; }
.jg-inline-link:hover { color: var(--jg-ink); }
.jg-story-card--compact { border-top: 1px solid var(--jg-line); padding-top: .9rem; }
.jg-story-card--compact .jg-story-image-link { aspect-ratio: 16/8; }
.jg-story-card--compact .jg-story-copy h3 { font-size: 1.15rem; }
.jg-card-skeleton { min-height: 280px; background: linear-gradient(120deg,#e9e5da,#efede7,#e9e5da); background-size: 300% 100%; animation: jg-shimmer 1.5s infinite; }
.jg-load-error { grid-column: 1/-1; color: var(--jg-muted); }
@keyframes jg-shimmer { 0% {background-position: 100% 0;} 100% {background-position: -100% 0;} }

.jg-desk-grid { width: min(1440px, 100%); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; }
.jg-desk-callout { min-height: 440px; padding: clamp(2rem, 6vw, 6rem) clamp(1.5rem, 6vw, 6rem); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.jg-desk-callout h2 { max-width: 600px; }
.jg-desk-callout p:not(.jg-eyebrow) { max-width: 490px; margin: 1.35rem 0 1.8rem; font-size: 1rem; line-height: 1.6; }
.jg-desk-callout--dark { background: var(--jg-dark-card); color: #f6f2e7; }
.jg-desk-callout--dark .jg-eyebrow { color: #dda39b; }
.jg-desk-callout--paper { background: #ddcab0; color: var(--jg-ink); }
.jg-button { display: inline-flex; gap: .6rem; align-items: center; padding: .85rem 1rem; border: 1px solid var(--jg-ink); font: 600 .7rem/1 'DM Sans', sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.jg-button:hover { background: var(--jg-ink); color: #fff; }
.jg-button--light { border-color: #f6f2e7; color: #f6f2e7; }
.jg-button--light:hover { background: #f6f2e7; color: var(--jg-dark-card); }
.jg-button--red { border-color: var(--jg-red); background: var(--jg-red); color: #fff; }
.jg-button--red:hover { background: var(--jg-red-dark); border-color: var(--jg-red-dark); }

.jg-partnership { text-align: center; }
.jg-partnership h2 { max-width: 840px; margin: 0 auto; }
.jg-partnership > p:not(.jg-eyebrow) { max-width: 600px; margin: 1.35rem auto 1.9rem; color: var(--jg-muted); font-size: 1rem; line-height: 1.6; }
.jg-footer { display: grid; grid-template-columns: 1fr 1.3fr 1fr; align-items: center; gap: 1.5rem; padding: 2rem clamp(1.25rem, 4vw, 4.5rem); background: var(--jg-ink); color: #f5f2e9; }
.jg-brand--footer img { filter: none; }
.jg-brand--footer span { color: #d99d94; }
.jg-footer > p { margin: 0; color: #d3d1c8; font: italic 1.1rem/1.4 'Playfair Display', Georgia, serif; text-align: center; }
.jg-footer > div { display: flex; justify-content: flex-end; gap: 1rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
.jg-footer a:hover { color: #e7a39b; }
.jg-visually-hidden { position: absolute; width: 1px; height: 1px; clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap; }

@media (max-width: 900px) {
  .jg-header { height: auto; min-height: 72px; padding-top: 1rem; padding-bottom: 1rem; }
  .jg-nav { gap: .8rem; font-size: .68rem; }
  .jg-search-results { grid-template-columns: repeat(2,1fr); }
  .jg-story-grid { grid-template-columns: repeat(2,1fr); }
  .jg-desk-grid { grid-template-columns: 1fr; }
  .jg-desk-callout { min-height: 350px; }
  .jg-footer { grid-template-columns: 1fr; text-align: center; }
  .jg-brand--footer, .jg-footer > div { justify-content: center; }
}

@media (max-width: 620px) {
  .jg-header { align-items: flex-start; flex-direction: column; gap: .8rem; }
  .jg-nav { width: 100%; justify-content: space-between; gap: .5rem; font-size: .61rem; }
  .jg-nav a:nth-child(3) { display: none; }
  .jg-cover { min-height: 640px; }
  .jg-cover-scrim { background: linear-gradient(0deg, rgba(14,20,17,.94), rgba(14,20,17,.06) 75%); }
  .jg-cover-content { padding: 2rem 1.25rem; }
  .jg-cover h1 { font-size: clamp(3.1rem, 16vw, 4.5rem); }
  .jg-cover-mark { top: 1.5rem; right: 1.25rem; }
  .jg-search-section { grid-template-columns: 1fr; }
  .jg-search-chips, .jg-search-status { grid-column: 1; }
  .jg-search-form { margin-top: 1rem; }
  .jg-section-heading { align-items: flex-start; flex-direction: column; }
  .jg-story-grid, .jg-search-results { grid-template-columns: 1fr; }
  .jg-story-card--compact { display: grid; grid-template-columns: 120px 1fr; gap: .9rem; }
  .jg-story-card--compact .jg-story-copy { padding-top: 0; }
  .jg-story-card--compact .jg-story-image-link { aspect-ratio: 1/1; }
  .jg-footer > div { flex-wrap: wrap; }
}