/* I Am Jesus — editorial design system, inspired by contemporary premium layouts, original implementation */
:root{--cream:#f6f3ec;--brown:#292d26;--gold:#bca16b;--green:#64735d;--ink:#242a25;--line:#dadbd0;--sage:#e6e9dd;--white:#fffdf8}
html{scroll-padding-top:94px}
body{background:var(--cream);color:var(--ink);font-family:Georgia,"Times New Roman",serif;-webkit-font-smoothing:antialiased}
header{background:rgba(249,247,240,.97);color:var(--ink);border-bottom:1px solid var(--line);box-shadow:none;padding:16px clamp(18px,4vw,70px);position:sticky;top:0;z-index:10;backdrop-filter:blur(14px)}
header b{font-family:Georgia,serif;font-size:clamp(23px,2vw,31px);letter-spacing:-.055em;font-weight:600}
header b .brand-mark{font-size:.9em;color:#a8894e;margin-right:8px}
header nav{gap:clamp(12px,1.3vw,23px);align-items:center}
header nav a{color:#41493d;font:500 12px/1.3 system-ui;text-decoration:none;white-space:nowrap;letter-spacing:.01em}
header nav a:hover,header nav a:focus-visible{color:#486147;text-decoration:underline;text-underline-offset:6px}
main{overflow:hidden}
section{padding:clamp(68px,7.5vw,132px) max(5%,calc((100% - 1230px)/2));scroll-margin-top:80px}
section.panel{background:var(--sage)}
h2{font-size:clamp(39px,5.3vw,75px);letter-spacing:-.055em;line-height:1.06;color:#2c352c;margin:14px auto 24px;max-width:960px}
h3{letter-spacing:-.025em}
p.intro{max-width:720px;color:#62695f;font:clamp(15px,1.4vw,19px)/1.8 system-ui;margin:0 auto 42px}
.ref{color:#8a7653;letter-spacing:.15em;font:700 11px/1.6 system-ui}
.grid{gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,265px),1fr))}
.card,.lesson,.study-detail,.timeline-event{background:var(--white);border:1px solid #dddcd2;box-shadow:0 12px 35px #242a2509;border-radius:4px}
.card{padding:clamp(23px,2.8vw,35px);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.card:hover{transform:translateY(-3px);box-shadow:0 20px 50px #242a2513;border-color:#bfc6b4}
.card h3{font-size:clamp(22px,2vw,30px);line-height:1.15}
.card p{color:#687065;font:14px/1.75 system-ui}
.card button,.button,.study-detail button{background:#36493b;color:#fffef9;border:1px solid #36493b;border-radius:3px;padding:12px 18px;font:600 12px/1.2 system-ui;letter-spacing:.02em;transition:background .2s ease}
.card button:hover,.button:hover,.study-detail button:hover{background:#596e56}
.study-detail{border-radius:4px}
.study-detail h3{font-size:clamp(28px,3.3vw,45px)}
.lesson{border-radius:4px}
.library-tools input,.library-tools select{border-radius:3px;background:var(--white);border-color:#bfc5b9}
.timeline-event{border-radius:4px}
footer{background:#26372d;color:#e8e9dc;padding:52px 20px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #9e8553;outline-offset:3px}
.editorial-hero{min-height:min(780px,88svh);display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:0;padding:0;background:#e9ede4}
.hero-copy{padding:clamp(56px,7vw,125px) clamp(28px,5.5vw,110px);display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.hero-eyebrow{color:#6a7966;font:700 12px system-ui;letter-spacing:.2em;text-transform:uppercase}
.editorial-hero h1{font-size:clamp(62px,7.3vw,122px);letter-spacing:-.085em;line-height:.94;font-weight:400;color:#2e3e32;margin:26px 0}
.editorial-hero h1 em{font-style:italic;color:#8c7953}
.hero-copy>p{max-width:540px;color:#566254;font:clamp(16px,1.5vw,20px)/1.85 system-ui}
.hero-actions{display:flex;gap:13px;flex-wrap:wrap;margin-top:26px}
.hero-actions a{display:inline-flex;align-items:center;justify-content:center;padding:16px 24px;min-height:52px;font:600 13px system-ui;text-decoration:none;transition:transform .2s}
.hero-actions a:hover{transform:translateY(-2px)}
.hero-actions .primary{background:#36493b;color:#fffdf8}
.hero-actions .secondary{border:1px solid #667564;color:#354735}
.hero-note{margin-top:50px;padding-top:18px;border-top:1px solid #c7cfc3;font:13px/1.6 system-ui;color:#657363}
.hero-art{position:relative;min-height:520px;overflow:hidden;background:radial-gradient(ellipse at 70% 22%,#f4e3b3 0%,transparent 43%),linear-gradient(155deg,#819c85 0%,#476b59 43%,#213e34 100%)}
.hero-art:before{content:"";position:absolute;inset:-8%;background:radial-gradient(ellipse at 85% 16%,#ffe6a3 0%,transparent 25%),radial-gradient(ellipse at 12% 86%,#a7ae78 0%,transparent 40%),repeating-radial-gradient(ellipse at 85% 120%,transparent 0 40px,#b5c3a028 42px 46px,transparent 48px 95px);opacity:.92}
.hero-art:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#203d31a6,transparent 48%),radial-gradient(ellipse at 52% 65%,transparent 10%,#1d3a2c33 85%)}
.hero-arch{position:absolute;inset:12% 16% 11%;border:1px solid #e6d8ac8f;border-radius:49% 49% 0 0;z-index:1}
.hero-arch:before{content:"";position:absolute;inset:17px;border:1px solid #e6d8ac50;border-radius:49% 49% 0 0}
.hero-cross{position:absolute;top:32%;left:50%;transform:translateX(-50%);z-index:2;width:8px;height:155px;background:linear-gradient(#e5d4a6,#f6e9ca);box-shadow:0 0 45px #f8e3a988}
.hero-cross:after{content:"";position:absolute;top:40px;left:-48px;width:104px;height:8px;background:#efdfb9}
.hero-art-quote{position:absolute;bottom:11%;left:12%;right:12%;z-index:3;color:#fff8e9;text-align:center;font:italic clamp(19px,2vw,29px)/1.45 Georgia,serif}
.hero-art-quote small{display:block;font:600 11px system-ui;letter-spacing:.17em;margin-top:20px;color:#f0e1bd}
.editorial-strip{background:#293b30;color:#f6f1e5;display:flex;justify-content:center;gap:clamp(22px,5vw,90px);padding:22px;flex-wrap:wrap;font:600 11px system-ui;letter-spacing:.15em;text-transform:uppercase}
.section-lead{max-width:760px;margin:0 auto 40px;text-align:center}
.section-lead h2{font-size:clamp(36px,4.6vw,65px)}
@media(max-width:1100px){header{position:relative}header nav{gap:12px}header nav a{font-size:11px}}
@media(max-width:850px){.editorial-hero{grid-template-columns:1fr}.hero-copy{padding:76px 7% 64px}.editorial-hero h1{font-size:clamp(58px,12vw,100px)}.hero-art{min-height:440px}header{justify-content:center}header nav{justify-content:center;row-gap:12px}}
@media(max-width:650px){section{padding:65px 6%}header nav{max-height:92px;overflow-y:auto;justify-content:center}header b{font-size:27px}.hero-copy{padding:70px 7%}.hero-art{min-height:410px}.hero-note{margin-top:32px}.editorial-strip{gap:14px;padding:22px 12px}.editorial-strip span{font-size:10px}}
@media(prefers-reduced-motion:reduce){.card,.hero-actions a{transition:none}.card:hover,.hero-actions a:hover{transform:none}}
