:root{
      --parch:#FEF9EF; --aged:#F5EEE1; --aged2:#EFE6D6; --taupe:#D1C9BF; --ink:#2A2B2F; --char:#333;
      --graph:#515151; --terra:#B05A36; --terra-deep:#9A4C2C; --terra-soft:#C98C6E;
      --serif:'EB Garamond',Georgia,serif; --sans:'Archivo','Helvetica Neue',Arial,sans-serif;
      --ease:cubic-bezier(.16,1,.3,1);
    }
    *{box-sizing:border-box}
    body{margin:0;background:var(--parch);color:var(--char);font-family:var(--sans);font-size:16px;line-height:1.5;letter-spacing:-.01em;-webkit-font-smoothing:antialiased;text-wrap:pretty}
    a{color:inherit;text-decoration:none}
    .wrap{max-width:1200px;margin:0 auto;padding:0 40px}
    .eyebrow{font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.02em;text-transform:uppercase;color:var(--terra);display:inline-flex;align-items:center;gap:10px}
    .eyebrow .seal{width:8px;height:8px;border-radius:50%;background:var(--terra)}
    .btn{display:inline-flex;align-items:center;gap:10px;background:var(--terra);color:var(--parch);font-family:var(--sans);font-weight:600;font-size:16px;padding:13px 26px;border-radius:40px;transition:transform .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease)}
    .btn:hover{background:var(--terra-deep);transform:translateY(-2px);box-shadow:0 14px 26px -14px rgba(176,90,54,.7)}
    .btn svg{width:17px;height:17px;transition:transform .3s var(--ease)} .btn:hover svg{transform:translateX(3px)}
    .btn.out{background:transparent;border:1.5px solid var(--terra);color:var(--terra)} .btn.out:hover{background:rgba(176,90,54,.07);box-shadow:none}
    h2{font-family:var(--serif);font-weight:400;font-size:52px;line-height:1.05;margin:0}
    h2 em{font-style:italic;font-weight:500;color:var(--ink)}
    .mono{display:block;width:82%;height:82%}
    /* nav */
    .nav{position:sticky;top:0;z-index:20;background:rgba(254,249,239,.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--taupe)}
    .nav .wrap{display:flex;align-items:center;justify-content:space-between;height:70px}
    .brand{display:flex;align-items:center;gap:12px;font-family:var(--serif);font-size:24px;color:var(--ink)}
    .brand .seal{width:30px;height:30px;border-radius:50%;background:var(--terra);color:var(--parch);display:grid;place-items:center;flex:none}
    .brand em{font-style:italic}
    .brand .nm{margin-right:-.05em}
    .nav .links{display:flex;align-items:center;gap:28px}
    .nav .links a{font-size:15px;color:var(--char)} .nav .links a:hover{color:var(--terra)}
    .nav .links a.btn{color:var(--parch)} .nav .links a.btn:hover{color:var(--parch)}
    .nav .btn{padding:9px 20px;font-size:14px}
    /* hero */
    .hero{position:relative;overflow:hidden}
    .hero .wrap{padding:88px 40px 40px;display:grid;grid-template-columns:7fr 5fr;gap:64px;align-items:center}
    .hero h1{font-family:var(--serif);font-weight:400;font-size:82px;line-height:.98;margin:20px 0 0;color:var(--ink)}
    .hero h1 em{font-style:italic;font-weight:400}
    .hero p{font-family:var(--sans);font-weight:300;font-size:19px;line-height:1.5;color:var(--graph);max-width:42ch;margin:24px 0 0}
    .hero .cta{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}
    .hero .cover{justify-self:center;position:relative}
    .hero .cover img{width:340px;max-width:100%;height:auto;border-radius:8px;box-shadow:rgba(42,43,47,.14) 12px 32px 80px 0px;transform:rotate(-3deg)}
    .hero .cover .badge{position:absolute;right:-8px;bottom:24px;background:var(--parch);border:1px solid var(--taupe);border-radius:9999px;padding:8px 16px;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--terra)}
    /* marquee */
    .strip{border-top:1px solid var(--taupe);border-bottom:1px solid var(--taupe);background:var(--aged)}
    .strip .row{display:flex;align-items:center;gap:14px;padding:16px 40px}
    .strip .lbl{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--graph);white-space:nowrap;flex:none}
    .marq{position:relative;overflow:hidden;flex:1;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
    .marq .track{display:flex;gap:40px;width:max-content;animation:scroll 34s linear infinite}
    .marq .track span{font-family:var(--serif);font-size:22px;color:var(--ink);white-space:nowrap;opacity:.72}
    .marq .track span::before{content:"·";color:var(--terra);margin-right:40px}
    .strip:hover .marq .track{animation-play-state:paused}
    /* sections */
    section{padding:88px 0}
    .aged{background:var(--aged)}
    .lead{font-family:var(--sans);font-weight:300;font-size:20px;line-height:1.5;color:var(--graph);max-width:52ch;margin:18px 0 0}
    /* books */
    .books{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:56px}
    .book{background:var(--parch);border-radius:24px;padding:32px;display:grid;grid-template-columns:150px 1fr;gap:28px;align-items:center;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
    .book:hover{transform:translateY(-5px);box-shadow:rgba(42,43,47,.12) 12px 24px 60px 0px}
    .book img{width:100%;height:auto;border-radius:6px;box-shadow:rgba(42,43,47,.14) 6px 14px 34px 0px;transition:transform .5s var(--ease)}
    .book:hover img{transform:rotate(-2deg) scale(1.03)}
    .book h3{font-family:var(--serif);font-weight:400;font-size:32px;line-height:1.05;margin:0;color:var(--ink)}
    .book .sub{font-family:var(--serif);font-style:italic;font-size:20px;color:var(--graph);margin:6px 0 0}
    .book .desc{font-size:14.5px;line-height:1.55;color:var(--graph);margin:14px 0 0}
    .book .kind{font-family:var(--sans);font-size:12px;letter-spacing:.04em;color:var(--graph);margin:16px 0 0;text-transform:uppercase}
    .book .go{display:inline-flex;align-items:center;gap:8px;color:var(--terra);font-weight:600;font-size:14px;margin-top:16px;font-family:var(--sans)}
    .book .go svg{width:14px;height:14px;transition:transform .3s var(--ease)} .book:hover .go svg{transform:translateX(3px)}
    /* articles */
    .alist{margin-top:48px;border-top:1px solid var(--taupe)}
    .arow{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:baseline;padding:22px 4px;border-bottom:1px solid var(--taupe);transition:transform .3s var(--ease);position:relative}
    .arow::before{content:"";position:absolute;left:-4px;top:50%;transform:translateY(-50%) scaleY(0);width:3px;height:60%;background:var(--terra);border-radius:2px;transition:transform .3s var(--ease)}
    .arow:hover{transform:translateX(14px)} .arow:hover::before{transform:translateY(-50%) scaleY(1)}
    .arow .t{font-family:var(--serif);font-size:24px;line-height:1.2;color:var(--ink)}
    .arow .meta{font-family:var(--sans);font-size:13px;color:var(--graph);white-space:nowrap}
    .arow .meta .b{color:var(--terra);margin:0 8px}
    .afoot{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px;align-items:center}
    /* sermons */
    .sermons{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px}
    .sermon{background:var(--parch);border-radius:20px;padding:30px;display:flex;flex-direction:column;gap:12px;min-height:196px;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
    .aged .sermon{background:#fff}
    .sermon:hover{transform:translateY(-5px);box-shadow:rgba(42,43,47,.1) 10px 20px 50px 0px}
    .sermon .ref{font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.03em;color:var(--terra)}
    .sermon h3{font-family:var(--serif);font-weight:400;font-size:28px;line-height:1.06;margin:0;color:var(--ink)}
    .sermon .play{margin-top:auto;display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-weight:600;font-size:14px;color:var(--ink)}
    .sermon .play .ic{width:34px;height:34px;border-radius:50%;background:var(--terra);color:var(--parch);display:grid;place-items:center;transition:transform .3s var(--ease)}
    .sermon:hover .play .ic{transform:scale(1.08)}
    /* media (interviews & podcasts) */
    .media{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:56px}
    .mcard{display:flex;flex-direction:column;background:var(--parch);border:1px solid var(--taupe);border-radius:18px;overflow:hidden;transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease)}
    .mcard:hover{transform:translateY(-5px);border-color:var(--terra);box-shadow:rgba(42,43,47,.12) 10px 22px 54px 0px}
    .mcard .thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--aged2)}
    .mcard .thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease)}
    .mcard:hover .thumb img{transform:scale(1.04)}
    .mcard .badge{position:absolute;top:12px;left:12px;display:inline-flex;align-items:center;gap:6px;font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--parch);background:rgba(42,43,47,.72);border-radius:9999px;padding:4px 11px;backdrop-filter:blur(4px)}
    .mcard .play{position:absolute;inset:0;display:grid;place-items:center}
    .mcard .play span{width:56px;height:56px;border-radius:50%;background:rgba(176,90,54,.92);color:var(--parch);display:grid;place-items:center;box-shadow:0 8px 24px -8px rgba(0,0,0,.5);transition:transform .35s var(--ease)}
    .mcard:hover .play span{transform:scale(1.1)}
    .mcard .body{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
    .mcard h3{font-family:var(--serif);font-weight:400;font-size:23px;line-height:1.12;margin:0;color:var(--ink)}
    .mcard .src{font-family:var(--sans);font-size:13px;color:var(--graph);margin:8px 0 0}
    .mcard .go{font-family:var(--sans);font-weight:600;font-size:13px;color:var(--terra);margin-top:16px;display:inline-flex;align-items:center;gap:6px}
    .mcard .go svg{width:13px;height:13px;transition:transform .3s var(--ease)} .mcard:hover .go svg{transform:translateX(3px)}
    /* verse */
    .verse .wrap{max-width:920px;text-align:center;padding:16px 40px}
    .verse blockquote{font-family:var(--serif);font-weight:400;font-style:italic;font-size:44px;line-height:1.2;color:var(--ink);margin:0}
    .verse blockquote .hl{background:linear-gradient(120deg,rgba(176,90,54,.20),rgba(176,90,54,.20));background-repeat:no-repeat;background-size:100% 38%;background-position:0 72%;padding:0 .06em}
    .verse cite{display:block;font-style:normal;font-family:var(--sans);font-weight:600;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--terra);margin-top:24px}
    /* about */
    .about{position:relative;overflow:hidden;background:var(--ink)}
    .about > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%}
    .about .portrait{width:104px;height:104px;border-radius:50%;object-fit:cover;border:3px solid rgba(254,249,239,.92);box-shadow:0 10px 30px -8px rgba(0,0,0,.5);margin-bottom:22px;display:block}
    .about .veil{position:absolute;inset:0;background:linear-gradient(90deg, rgba(42,43,47,.93) 0%, rgba(42,43,47,.8) 44%, rgba(42,43,47,.32) 100%)}
    .about .wrap{position:relative;padding:96px 40px}
    .about .inner{max-width:52ch;color:var(--parch)}
    .about .eyebrow{color:var(--terra-soft)}
    .about h2{color:var(--parch);margin-top:14px}
    .about h2 em{color:#B05A36}
    .about p{font-family:var(--sans);font-weight:300;font-size:18px;line-height:1.55;color:rgba(254,249,239,.9);margin:20px 0 0}
    .about .roles{display:flex;gap:40px;margin-top:28px;flex-wrap:wrap}
    .about .role .eyebrow{color:var(--terra-soft);margin-bottom:6px;display:block;letter-spacing:.02em}
    .about .role a{font-family:var(--serif);font-size:19px;color:var(--parch);border-bottom:1px solid rgba(254,249,239,.35)} .about .role a:hover{border-color:var(--terra-soft)}
    /* footer */
    .foot{background:var(--parch)}
    .foot .wrap{display:grid;grid-template-columns:5fr 3fr 4fr;gap:48px;padding:72px 40px 56px}
    .foot .brand{color:var(--ink)}
    .foot p{color:var(--graph);font-size:15px;line-height:1.5;max-width:38ch;margin:16px 0 0}
    .foot .col{display:flex;flex-direction:column;gap:10px}
    .foot .col .eyebrow{margin-bottom:6px}
    .foot .col a{font-size:15px;color:var(--char)} .foot .col a:hover{color:var(--terra)}
    .foot .ph{color:var(--terra);font-weight:600}
    .foot .copy{grid-column:1/-1;border-top:1px solid var(--taupe);margin-top:8px;padding-top:20px;display:flex;justify-content:space-between;font-size:13px;color:var(--graph);flex-wrap:wrap;gap:8px}
    /* motion */
    @keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
    @keyframes slant{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
    @keyframes settle{from{opacity:0;transform:translateY(30px) rotate(1deg)}to{opacity:1;transform:rotate(-3deg)}}
    @keyframes float{0%,100%{transform:rotate(-3deg) translateY(0)}50%{transform:rotate(-3deg) translateY(-12px)}}
    @keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
    @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(176,90,54,.5)}70%{box-shadow:0 0 0 14px rgba(176,90,54,0)}100%{box-shadow:0 0 0 0 rgba(176,90,54,0)}}
    @media (prefers-reduced-motion:no-preference){
      .hero .eyebrow{animation:rise .7s var(--ease) .05s both}
      .hero h1{animation:rise .9s var(--ease) .16s both}
      .hero h1 em{display:inline-block;animation:slant 1s var(--ease) .45s both}
      .hero p,.hero .cta{animation:rise .9s var(--ease) .32s both}
      .hero .cover img{animation:settle 1.1s var(--ease) .25s both, float 7s ease-in-out 1.4s infinite}
      .hero .cover .badge{animation:rise .8s var(--ease) 1s both}
      .reveal>*{animation:rise .9s var(--ease) both;animation-timeline:view();animation-range:entry 0% entry 34%}
    }
    @media (prefers-reduced-motion:reduce){
      .marq .track{animation:none}
    }
    /* mobile */
    @media (max-width:800px){
      .wrap{padding:0 22px}
      .nav .links a:not(.btn){display:none}
      .hero .wrap{grid-template-columns:1fr;gap:36px;padding:48px 22px 32px}
      .hero .cover{order:-1} .hero .cover img{width:250px}
      .hero h1{font-size:54px}
      h2{font-size:38px}
      .strip .row{padding:14px 22px} .strip .lbl{display:none}
      .books{grid-template-columns:1fr}
      .book{grid-template-columns:110px 1fr;gap:20px;padding:24px}
      .book h3{font-size:26px}
      .sermons{grid-template-columns:1fr}
      .media{grid-template-columns:1fr}
      .mcard{gap:16px;padding:20px} .mcard .thumb{width:76px;height:76px}
      .arow{grid-template-columns:1fr;gap:4px}
      .verse blockquote{font-size:32px}
      .about .veil{background:linear-gradient(180deg, rgba(42,43,47,.86), rgba(42,43,47,.94))}
      .about .wrap{padding:72px 22px}
      .foot .wrap{grid-template-columns:1fr;gap:32px;padding:56px 22px 40px}
    }