@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 { --jgl-ink:#18201d; --jgl-paper:#f5f2e9; --jgl-red:#a73728; --jgl-muted:#6e7169; --jgl-line:#d6d1c5; --jgl-card:#ece9df; --jgl-deep:#26322d; }
html.jg-lives-active, html.jg-lives-active body { margin:0; background:var(--jgl-paper); color:var(--jgl-ink); }
html.jg-lives-active body { font-family:'DM Sans',Inter,Arial,sans-serif; }
html.jg-lives-active *, html.jg-lives-active *::before, html.jg-lives-active *::after { box-sizing:border-box; }
html.jg-lives-active a { color:inherit; text-decoration:none; }
html.jg-lives-active button { font:inherit; }
.jg-lives { min-height:100vh; overflow:hidden; }
.jg-lives-header { min-height:78px; width:min(1440px,100%); padding:0 clamp(1.25rem,4vw,4.5rem); margin:0 auto; border-bottom:1px solid var(--jgl-line); display:flex; align-items:center; justify-content:space-between; gap:2rem; background:var(--jgl-paper); }
.jg-lives-brand { display:inline-flex; align-items:center; gap:.75rem; min-width:max-content; }
.jg-lives-brand span { color:var(--jgl-ink); font:600 1.05rem/.8 'DM Sans',sans-serif; letter-spacing:-.08em; }
.jg-lives-brand em { color:var(--jgl-red); font:500 .64rem/1 'DM Mono',monospace; letter-spacing:.15em; font-style:normal; }
.jg-lives-header nav { display:flex; align-items:center; gap:clamp(.9rem,2.5vw,2.75rem); font:600 .72rem/1.2 'DM Sans',sans-serif; text-transform:uppercase; letter-spacing:.075em; }
.jg-lives-header nav a { padding:.45rem 0; border-bottom:1px solid transparent; }
.jg-lives-header nav a:hover, .jg-lives-header nav a[aria-current="page"] { color:var(--jgl-red); border-color:currentColor; }
.jg-lives-hero { width:min(1440px,100%); min-height:min(74vh,760px); margin:0 auto; display:grid; grid-template-columns:minmax(320px, .86fr) minmax(430px, 1.14fr); background:var(--jgl-deep); color:#f6f2e7; }
.jg-lives-hero__copy { align-self:end; max-width:690px; padding:clamp(2rem,7vw,7rem); }
.jg-lives-eyebrow, .jg-lives-card__eyebrow, .jg-lives-result__mode { margin:0 0 .85rem; color:var(--jgl-red); font:500 .66rem/1.3 'DM Mono',monospace; letter-spacing:.15em; text-transform:uppercase; }
.jg-lives-hero .jg-lives-eyebrow { color:#e0a39a; }
.jg-lives-hero h1 { max-width:600px; margin:0; font:600 clamp(3.25rem,7vw,7.2rem)/.91 'Playfair Display',Georgia,serif; letter-spacing:-.06em; text-wrap:balance; }
.jg-lives-hero__copy > p:not(.jg-lives-eyebrow) { max-width:520px; margin:1.5rem 0 0; color:rgba(246,242,231,.88); font-size:clamp(1rem,1.5vw,1.22rem); line-height:1.58; }
.jg-lives-hero__copy .jg-lives-hero__note { color:#e4b2ab; font:500 .75rem/1.5 'DM Mono',monospace; letter-spacing:.02em; }
.jg-lives-hero__media { min-height:480px; margin:0; position:relative; background:#151c19; }
.jg-lives-hero__media::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(38,50,45,.5),transparent 45%),linear-gradient(0deg,rgba(17,20,19,.3),transparent 45%); pointer-events:none; }
.jg-lives-hero__media img { width:100%; height:100%; display:block; object-fit:cover; object-position:center; }
.jg-lives-hero__media figcaption { position:absolute; z-index:1; right:1.5rem; bottom:1.35rem; max-width:270px; color:rgba(255,255,255,.68); text-align:right; font:.58rem/1.45 'DM Mono',monospace; letter-spacing:.06em; }
.jg-lives-intro, .jg-lives-collections, .jg-lives-directory-section, .jg-lives-method { width:min(1280px,100%); margin:0 auto; padding:clamp(4rem,9vw,8rem) clamp(1.25rem,4vw,4.5rem); }
.jg-lives-intro { display:grid; grid-template-columns:minmax(260px,.8fr) minmax(300px,1fr); align-items:start; column-gap:clamp(2rem,8vw,9rem); border-bottom:1px solid var(--jgl-line); }
.jg-lives-intro .jg-lives-eyebrow { grid-column:1/-1; }
.jg-lives-intro h2, .jg-lives-heading h2, .jg-lives-method h2 { max-width:590px; margin:0; font:600 clamp(2.2rem,4.6vw,4.4rem)/.98 'Playfair Display',Georgia,serif; letter-spacing:-.045em; text-wrap:balance; }
.jg-lives-intro > p:last-child { max-width:565px; margin:0; color:var(--jgl-muted); font-size:1.05rem; line-height:1.65; }
.jg-lives-collections { border-bottom:1px solid var(--jgl-line); }
.jg-lives-heading { display:flex; align-items:end; justify-content:space-between; gap:2rem; margin-bottom:clamp(2rem,4vw,3.5rem); }
.jg-lives-heading > p:last-child { max-width:320px; margin:0 0 .25rem; color:var(--jgl-muted); font-size:.88rem; line-height:1.55; }
.jg-lives-collection-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--jgl-line); border:1px solid var(--jgl-line); }
.jg-lives-card { min-width:0; min-height:292px; padding:1.35rem; display:flex; flex-direction:column; align-items:flex-start; background:var(--jgl-paper); }
.jg-lives-card:hover { background:#eeeadf; }
.jg-lives-card__eyebrow { color:var(--jgl-red); font-size:.57rem; }
.jg-lives-card h2 { margin:0; font:600 clamp(1.4rem,2.2vw,2.1rem)/1.02 'Playfair Display',Georgia,serif; letter-spacing:-.035em; text-wrap:balance; }
.jg-lives-card > p:not(.jg-lives-card__eyebrow):not(.jg-lives-card__count):not(.jg-lives-card__standard) { margin:.8rem 0 0; color:var(--jgl-muted); font-size:.83rem; line-height:1.52; }
.jg-lives-card__count { margin:auto 0 .7rem; padding-top:1rem; color:var(--jgl-ink); font:500 .62rem/1.2 'DM Mono',monospace; letter-spacing:.1em; text-transform:uppercase; }
.jg-lives-card__examples { display:flex; flex-wrap:wrap; gap:.35rem; min-height:29px; }
.jg-lives-card__examples a { padding:.36rem .48rem; border:1px solid var(--jgl-line); color:var(--jgl-ink); font:600 .62rem/1.1 'DM Sans',sans-serif; }
.jg-lives-card__examples a:hover { border-color:var(--jgl-red); color:var(--jgl-red); }
.jg-lives-card__standard { min-height:43px; margin:0 0 .8rem; color:var(--jgl-muted); font:.7rem/1.48 'DM Sans',sans-serif; }
.jg-lives-card button { margin-top:.9rem; padding:0; border:0; border-bottom:1px solid var(--jgl-red); cursor:pointer; background:transparent; color:var(--jgl-red); font:600 .65rem/1.4 'DM Sans',sans-serif; letter-spacing:.09em; text-transform:uppercase; }
.jg-lives-card button:disabled { border-color:var(--jgl-line); color:#99998f; cursor:not-allowed; }
.jg-lives-card button[aria-pressed="true"] { color:var(--jgl-ink); border-color:var(--jgl-ink); }
.jg-lives-directory-section { background:#e8e3d8; }
.jg-lives-directory-section::before { content:""; display:block; width:100vw; height:100%; position:absolute; left:0; z-index:-1; background:#e8e3d8; }
.jg-lives-directory-section { position:relative; z-index:0; }
.jg-lives-directory { display:grid; grid-template-columns:repeat(3,1fr); gap:1.35rem; }
.jg-lives-result { min-width:0; background:var(--jgl-paper); }
.jg-lives-result__image { display:block; aspect-ratio:4/3; overflow:hidden; background:#293a34; }
.jg-lives-result__image img { width:100%; height:100%; display:block; object-fit:cover; transition:transform .5s ease; }
.jg-lives-result__image:hover img { transform:scale(1.035); }
.jg-lives-result__fallback { width:100%; height:100%; background:linear-gradient(135deg,#26322d,#a73728); }
.jg-lives-result__copy { padding:1.2rem; }
.jg-lives-result__mode { margin-bottom:.55rem; color:var(--jgl-red); font-size:.57rem; }
.jg-lives-result h3 { margin:0; font:600 1.55rem/1.06 'Playfair Display',Georgia,serif; letter-spacing:-.03em; text-wrap:balance; }
.jg-lives-result h3 a:hover { color:var(--jgl-red); }
.jg-lives-result__copy > p:not(.jg-lives-result__mode) { margin:.75rem 0; color:var(--jgl-muted); font-size:.84rem; line-height:1.55; }
.jg-lives-result__tags { display:flex; flex-wrap:wrap; gap:.35rem; margin:1rem 0; }
.jg-lives-result__tags span { padding:.34rem .46rem; background:#ece7dc; color:#42483f; font:500 .58rem/1 'DM Mono',monospace; letter-spacing:.06em; text-transform:uppercase; }
.jg-lives-link, .jg-lives-button { display:inline-flex; gap:.55rem; align-items:center; color:var(--jgl-red); font:600 .66rem/1.3 'DM Sans',sans-serif; letter-spacing:.08em; text-transform:uppercase; }
.jg-lives-link { border-bottom:1px solid currentColor; padding-bottom:.28rem; }
.jg-lives-empty { grid-column:1/-1; padding:clamp(2rem,5vw,4rem); border:1px solid var(--jgl-line); background:var(--jgl-paper); }
.jg-lives-empty h3 { margin:0; font:600 clamp(1.7rem,3vw,2.6rem)/1.05 'Playfair Display',Georgia,serif; letter-spacing:-.04em; }
.jg-lives-empty p:last-child { max-width:540px; color:var(--jgl-muted); line-height:1.6; }
.jg-lives-load-error { grid-column:1/-1; color:var(--jgl-muted); }
.jg-lives-method { background:var(--jgl-deep); color:#f6f2e7; text-align:center; }
.jg-lives-method::before { content:""; display:block; width:100vw; height:100%; position:absolute; inset:0 0 0 calc((100vw - min(1280px, 100%))/ -2); z-index:-1; background:var(--jgl-deep); }
.jg-lives-method { position:relative; z-index:0; }
.jg-lives-method .jg-lives-eyebrow { color:#e1a198; }
.jg-lives-method h2 { max-width:740px; margin-left:auto; margin-right:auto; }
.jg-lives-method__grid { max-width:900px; margin:2.5rem auto; display:grid; grid-template-columns:1fr 1fr; gap:1px; background:rgba(246,242,231,.22); border:1px solid rgba(246,242,231,.22); text-align:left; }
.jg-lives-method__grid article { padding:1.5rem; background:#26322d; }
.jg-lives-method__grid h3 { margin:0; font:600 1.45rem/1.08 'Playfair Display',Georgia,serif; letter-spacing:-.03em; }
.jg-lives-method__grid p { margin:.8rem 0 0; color:rgba(246,242,231,.75); font-size:.9rem; line-height:1.58; }
.jg-lives-button { padding:.85rem 1rem; border:1px solid #f6f2e7; color:#f6f2e7; }
.jg-lives-button:hover { background:#f6f2e7; color:var(--jgl-deep); }
.jg-lives-footer { padding:1.7rem clamp(1.25rem,4vw,4.5rem); display:flex; justify-content:space-between; gap:1rem; background:#111715; color:#e5e0d4; font:500 .64rem/1.35 'DM Mono',monospace; letter-spacing:.08em; text-transform:uppercase; }
.jg-lives-footer a:hover { color:#e1a198; }
@media (max-width:1000px) { .jg-lives-collection-grid { grid-template-columns:repeat(2,1fr); } .jg-lives-hero { grid-template-columns:1fr 1fr; } .jg-lives-directory { grid-template-columns:repeat(2,1fr); } }
@media (max-width:680px) { .jg-lives-header { min-height:72px; padding:0 1.25rem; } .jg-lives-brand em { display:none; } .jg-lives-header nav { gap:.9rem; font-size:.61rem; overflow-x:auto; white-space:nowrap; max-width:65%; } .jg-lives-header nav a { flex:0 0 auto; } .jg-lives-header nav a:nth-child(3), .jg-lives-header nav a:nth-child(4) { display:none; } .jg-lives-hero { display:flex; flex-direction:column-reverse; min-height:0; } .jg-lives-hero__media { min-height:300px; } .jg-lives-hero__copy { padding:2.4rem 1.25rem 3rem; } .jg-lives-hero h1 { font-size:clamp(3.4rem,16vw,4.75rem); } .jg-lives-intro { display:block; } .jg-lives-intro h2 { margin-bottom:1.25rem; } .jg-lives-heading { display:block; } .jg-lives-heading h2 { margin-bottom:.75rem; } .jg-lives-collection-grid, .jg-lives-directory, .jg-lives-method__grid { grid-template-columns:1fr; } .jg-lives-card { min-height:230px; } .jg-lives-result { display:grid; grid-template-columns:128px 1fr; } .jg-lives-result__image { aspect-ratio:auto; min-height:100%; } .jg-lives-result__copy { padding:1rem; } .jg-lives-result h3 { font-size:1.32rem; } .jg-lives-result__copy > p:not(.jg-lives-result__mode) { font-size:.78rem; } .jg-lives-footer { display:grid; grid-template-columns:1fr; text-align:center; } }