@import "./journal-themes.css"; /* RE:BELLE™ Journal progressive enhancement Covers legacy React journal pages and same-origin iframe articles while the explicit magazine components are rolled out. Native `.jr` pages keep their dedicated journal-system.css untouched. */ body.journal-reading-mode { /* Tokens kommen aus journal-themes.css (data-jr-theme auf ). */ --jr-auto-bg:var(--jrt-bg,#f5f4f1); --jr-auto-surface:var(--jrt-surface,#fbfaf8); --jr-auto-band:var(--jrt-band,#eae8e3); --jr-auto-fg:var(--jrt-fg,#26241f); --jr-auto-strong:var(--jrt-fg-strong,#15130f); --jr-auto-soft:var(--jrt-fg-soft,#45413a); --jr-auto-muted:var(--jrt-muted,#7a746a); --jr-auto-accent:var(--jrt-accent,#8c8478); --jr-auto-accent-deep:var(--jrt-accent-deep,#4c463c); --jr-auto-line:var(--jrt-line,#dbd7cf); --jr-auto-serif:"Cormorant Garamond",Georgia,"Times New Roman",serif; --jr-auto-sans:"Montserrat",system-ui,-apple-system,"Segoe UI",Arial,sans-serif; } body.journal-reading-mode main { --background:30 45% 96%; --foreground:22 22% 19%; --card:30 50% 98%; --card-foreground:22 22% 19%; --popover:30 50% 98%; --popover-foreground:22 22% 19%; --primary:350 26% 55%; --primary-foreground:30 60% 98%; --secondary:22 30% 91%; --secondary-foreground:22 22% 19%; --muted:22 28% 92%; --muted-foreground:20 10% 43%; --accent:350 35% 91%; --accent-foreground:22 22% 19%; --border:22 25% 86%; background:var(--jr-auto-bg)!important; color:var(--jr-auto-fg)!important; -webkit-text-size-adjust:100%; text-size-adjust:100%; overflow-x:clip; } body.journal-reading-mode main [class*="text-foreground"]{color:var(--jr-auto-fg)!important} body.journal-reading-mode main [class*="text-muted-foreground"]{color:var(--jr-auto-muted)!important} body.journal-reading-mode main [class*="text-primary"]{color:var(--jr-auto-accent-deep)!important} body.journal-reading-mode main [class*="bg-background"], body.journal-reading-mode main [class*="bg-card"]{background-color:var(--jr-auto-bg)!important} body.journal-reading-mode main [class*="bg-muted"]{background-color:var(--jr-auto-band)!important} body.journal-reading-mode main [class*="border-border"]{border-color:var(--jr-auto-line)!important} /* Legacy article typography */ body.journal-reading-mode main article:not(.jr-article), body.journal-reading-mode main .journal-content, body.journal-reading-mode main .jr-auto-scope { color:var(--jr-auto-fg); font-size:1.125rem; line-height:1.78; -webkit-font-smoothing:antialiased; } body.journal-reading-mode main article:not(.jr-article) p, body.journal-reading-mode main .journal-content p, body.journal-reading-mode main .jr-auto-scope p { line-height:1.78; } body.journal-reading-mode main article:not(.jr-article) h1, body.journal-reading-mode main article:not(.jr-article) h2, body.journal-reading-mode main article:not(.jr-article) h3, body.journal-reading-mode main .jr-auto-scope h1, body.journal-reading-mode main .jr-auto-scope h2, body.journal-reading-mode main .jr-auto-scope h3 { font-family:var(--jr-auto-serif)!important; color:var(--jr-auto-strong)!important; hyphens:auto; overflow-wrap:break-word; } body.journal-reading-mode main article:not(.jr-article) h1, body.journal-reading-mode main .jr-auto-title { font-size:clamp(2.35rem,8vw,5rem)!important; line-height:1.02!important; letter-spacing:-.02em!important; font-weight:500!important; } body.journal-reading-mode main article:not(.jr-article) h2, body.journal-reading-mode main .jr-auto-scope h2 { font-size:clamp(1.85rem,5.5vw,2.8rem)!important; line-height:1.12!important; letter-spacing:-.01em!important; margin-top:2em; } body.journal-reading-mode main article:not(.jr-article) h3, body.journal-reading-mode main .jr-auto-scope h3 { font-size:clamp(1.4rem,4vw,1.85rem)!important; line-height:1.22!important; } body.journal-reading-mode main article:not(.jr-article) blockquote, body.journal-reading-mode main .journal-content blockquote, body.journal-reading-mode main .jr-auto-scope blockquote { margin:2.1em auto!important; padding:0 0 0 22px!important; border:0!important; border-left:3px solid var(--jr-auto-accent)!important; background:transparent!important; color:var(--jr-auto-accent-deep)!important; font-family:var(--jr-auto-serif)!important; font-size:clamp(1.45rem,5vw,2.2rem)!important; line-height:1.3!important; } body.journal-reading-mode main article:not(.jr-article) img, body.journal-reading-mode main .jr-auto-scope img { max-width:100%;height:auto;border-radius:18px; } body.journal-reading-mode main article:not(.jr-article) a, body.journal-reading-mode main .jr-auto-scope a {text-underline-offset:3px} /* Keep the reading column comfortable but don't crush deliberate wide grids. */ body.journal-reading-mode main .journal-content, body.journal-reading-mode main article.container.max-w-3xl, body.journal-reading-mode main article[class*="max-w-3xl"] { max-width:700px!important; } /* Progress */ .jr-auto-progress{position:fixed;inset:0 0 auto 0;height:3px;z-index:1000;pointer-events:none;background:transparent} .jr-auto-progress i{display:block;height:100%;width:0;background:var(--jr-auto-accent,#8c8478);transition:width .08s linear} /* Inserted navigation / summary */ .jr-auto-jump{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 28px;font-family:var(--jr-auto-sans);font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase} .jr-auto-jump a{min-height:44px;display:inline-flex;align-items:center;padding:0 18px;border:1px solid var(--jr-auto-line);border-radius:999px;background:var(--jr-auto-surface);color:var(--jr-auto-fg);text-decoration:none} .jr-auto-jump a:hover{border-color:var(--jr-auto-accent);color:var(--jr-auto-accent-deep)} .jr-auto-tldr{max-width:700px;margin:34px auto 46px;padding:24px;background:var(--jr-auto-surface);border:1px solid var(--jr-auto-line);border-radius:20px;box-shadow:0 14px 40px rgba(86,60,49,.06)} .jr-auto-tldr h2{margin:0 0 14px!important;font:600 .6875rem/1 var(--jr-auto-sans)!important;letter-spacing:.24em!important;text-transform:uppercase;color:var(--jr-auto-accent-deep)!important} .jr-auto-tldr ol{margin:0;padding:0;list-style:none;counter-reset:jr-auto} .jr-auto-tldr li{counter-increment:jr-auto;position:relative;padding-left:38px;color:var(--jr-auto-soft);font-size:1.03rem;line-height:1.65} .jr-auto-tldr li+li{margin-top:13px;padding-top:13px;border-top:1px solid var(--jr-auto-line)} .jr-auto-tldr li:before{content:counter(jr-auto);position:absolute;left:0;top:.1em;width:24px;height:24px;border-radius:50%;background:#f7e8ea;color:var(--jr-auto-accent-deep);font:600 .75rem/24px var(--jr-auto-sans);text-align:center} .jr-auto-tldr li+li:before{top:calc(.1em + 13px)} /* Editorial commerce */ .jr-auto-promo{max-width:820px;margin:52px auto;padding:0 20px} .jr-auto-promo-inner{background:var(--jr-auto-surface);border:1px solid var(--jr-auto-line);border-top:3px solid var(--jr-auto-accent);border-radius:20px;padding:28px 25px;box-shadow:0 18px 46px rgba(86,60,49,.07)} .jr-auto-eyebrow{margin:0 0 12px!important;font:600 .625rem/1.4 var(--jr-auto-sans)!important;letter-spacing:.22em!important;text-transform:uppercase;color:var(--jr-auto-accent-deep)!important} .jr-auto-promo h3{margin:0 0 12px!important;font-family:var(--jr-auto-serif)!important;font-size:clamp(1.45rem,4.6vw,2.05rem)!important;line-height:1.18!important} .jr-auto-promo p{font-size:1rem!important;line-height:1.65!important;color:var(--jr-auto-soft)!important} .jr-auto-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border-radius:999px;background:var(--jr-auto-accent-deep);color:#fffaf8!important;text-decoration:none!important;font:600 .72rem/1 var(--jr-auto-sans);letter-spacing:.13em;text-transform:uppercase} .jr-auto-btn:hover{background:#7f4d58} .jr-auto-shelf{margin:60px calc(50% - 50vw) 0;padding:50px max(20px,calc((100vw - 1080px)/2));background:var(--jr-auto-band);color:var(--jr-auto-fg)} .jr-auto-shelf>h2,.jr-auto-more>h2{margin:0 0 22px!important;font:600 .6875rem/1 var(--jr-auto-sans)!important;letter-spacing:.24em!important;text-transform:uppercase;color:var(--jr-auto-accent-deep)!important} .jr-auto-cards{display:grid;grid-template-columns:1fr;gap:14px;max-width:1080px;margin:auto} .jr-auto-card{position:relative;display:flex;flex-direction:column;gap:9px;padding:22px;background:var(--jr-auto-surface);border:1px solid var(--jr-auto-line);border-radius:18px} .jr-auto-card h3{margin:0!important;font:600 .78rem/1.4 var(--jr-auto-sans)!important;letter-spacing:.12em!important;text-transform:uppercase;color:var(--jr-auto-fg)!important} .jr-auto-card p{margin:0!important;font-size:.97rem!important;line-height:1.6!important;color:var(--jr-auto-soft)!important} .jr-auto-card a{margin-top:auto;min-height:44px;display:inline-flex;align-items:center;font:600 .6875rem/1 var(--jr-auto-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--jr-auto-accent-deep)!important;text-decoration:none!important} .jr-auto-card a:after{content:"";position:absolute;inset:0;border-radius:18px} .jr-auto-card:hover{border-color:var(--jr-auto-accent)} .jr-auto-more{max-width:700px;margin:50px auto 0;padding:0 20px} .jr-auto-more ul{list-style:none!important;padding:0!important;margin:0!important} .jr-auto-more li{margin:0!important;border-bottom:1px solid var(--jr-auto-line)} .jr-auto-more a{min-height:56px;display:flex;align-items:center;gap:10px;padding:12px 0;color:var(--jr-auto-fg)!important;text-decoration:none!important;font-size:1.02rem;line-height:1.45} .jr-auto-more a:after{content:"→";margin-left:auto;color:var(--jr-auto-accent-deep);font-family:var(--jr-auto-sans)} /* LIVEHACKS keeps its identity, but stops being a black wall. */ body.journal-reading-mode .lhd-root{background:var(--jr-auto-bg)!important;color:var(--jr-auto-fg)!important} body.journal-reading-mode .lhd-wrap{background:linear-gradient(180deg,var(--jr-auto-bg) 0%,var(--jr-auto-band) 100%)!important} body.journal-reading-mode .lhd-card, body.journal-reading-mode .lhd-disclaimer{background:var(--jr-auto-surface)!important;border-color:var(--jr-auto-line)!important;box-shadow:0 12px 30px rgba(86,60,49,.05)} body.journal-reading-mode .lhd-image{border-color:var(--jr-auto-line)!important;background:var(--jr-auto-surface)!important;box-shadow:0 18px 42px rgba(86,60,49,.12)!important} body.journal-reading-mode .lhd-display, body.journal-reading-mode .lhd-h3{color:var(--jr-auto-strong)!important} body.journal-reading-mode .lhd-p, body.journal-reading-mode .lhd-ul{color:var(--jr-auto-soft)!important} body.journal-reading-mode .lhd-h2{color:#a43e45!important} body.journal-reading-mode .lhd-eyebrow{color:#a43e45!important} body.journal-reading-mode .lhd-quote{background:#f7e8ea!important;border-color:#d99aa1!important} body.journal-reading-mode .lhd-quote strong{color:var(--jr-auto-strong)!important} body.journal-reading-mode .lhd-quote small{color:var(--jr-auto-muted)!important} body.journal-reading-mode .lhd-nav{border-color:var(--jr-auto-line)!important} body.journal-reading-mode .lhd-nav a{color:var(--jr-auto-fg)!important;min-height:44px;display:inline-flex;align-items:center} /* Iframe documents enhanced from the parent use the same palette. */ body.journal-auto-document{margin:0;background:var(--jrt-bg,#f5f4f1)!important;color:var(--jrt-fg,#26241f)!important;font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:hidden} body.journal-auto-document article,body.journal-auto-document main{color:var(--jrt-fg,#26241f)!important} body.journal-auto-document p,body.journal-auto-document li{font-size:1.125rem!important;line-height:1.78!important;color:var(--jrt-fg,#26241f)!important} body.journal-auto-document h1,body.journal-auto-document h2,body.journal-auto-document h3{font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif!important;color:var(--jr-auto-strong)!important} body.journal-auto-document h1{font-size:clamp(2.35rem,8vw,5rem)!important;line-height:1.02!important} body.journal-auto-document h2{font-size:clamp(1.85rem,5.5vw,2.8rem)!important;line-height:1.12!important} body.journal-auto-document a{color:var(--jrt-accent-deep,#4c463c)} body.journal-auto-document img{max-width:100%;height:auto} body.journal-auto-document .jr-auto-tldr,body.journal-auto-document .jr-auto-more{box-sizing:border-box} body.journal-auto-document .jr-auto-shelf{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)} @media (min-width:820px){.jr-auto-cards{grid-template-columns:repeat(3,1fr)}} @media (max-width:640px){ body.journal-reading-mode main article:not(.jr-article),body.journal-reading-mode main .journal-content,body.journal-reading-mode main .jr-auto-scope{font-size:1.0625rem;line-height:1.74} .jr-auto-tldr{width:calc(100% - 32px);padding:21px 19px;margin-top:28px} .jr-auto-promo{padding:0 16px;margin:42px auto}.jr-auto-promo-inner{padding:23px 20px} .jr-auto-shelf{padding-left:16px;padding-right:16px}.jr-auto-more{padding:0 16px} } @media (prefers-reduced-motion:reduce){.jr-auto-progress i{transition:none!important}html{scroll-behavior:auto!important}}