/* clntv.eBooks.style */


  :root{
    --bg: #F7F4EF;
    --surface: #FFFFFF;
    --line: #E9E4DA;
    --ink: #201D1A;
    --ink-soft: #726B62;
    --brand: #E3A72A;
    --brand-ink: #6B4E10;

    --og: #E2662E;   --og-l: #FBE7DA;
    --nt: #1F7A6C;   --nt-l: #DFF0EB;
    --sh: #8C5A3C;   --sh-l: #F1E4DB;
    --lf: #E2567C;   --lf-l: #FBE1E9;
    --wh: #7B5FE0;   --wh-l: #EAE4FB;
    --pl: #2A4A8C;   --pl-l: #E0E7F5;
    --ls: #2A4A8C;   --ls-l: #E0E7F5;

    --mag: #2B2E4A;  --mag-l: #E4E5EE;
  }

  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:'Gothic A1', sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  .display{ font-family:'Do Hyeon', sans-serif; font-weight:400; letter-spacing:-0.01em; }

  /* ---------- top nav ---------- */
  .nav{
    position:sticky; top:0; z-index:30;
    /* display:flex; align-items:center; justify-content:space-between; */
	display: flex; justify-content: center;
    gap:27%; padding:14px 10px;
    /*gap:16px; padding:14px 15%;
    background:rgba(247,244,239,0.86); */
    background:rgba(92,44,44,0.86);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .brandmark{ display:flex; align-items:center; gap:9px; }
  .brandmark .dot{ width:30px; height:30px; border-radius:50%; /*background:var(--brand); */
	   background-image: url('/church_logo.png');
	   background-image: no-repeat; 
	   background-size: 100% 100%;
  } 
  
  .brandmark span{ font-size:22px; font-weight:700; color: #fff }
  .brandmark small{ color:var(--ink-soft); font-weight:500; font-size:13px; }

  .searchwrap{ position:relative; width:min(300px, 46vw); }
  .searchwrap input{
    width:100%; padding:9px 14px 9px 36px; border-radius:999px;
    border:1px solid var(--line); background:var(--surface);
    font-family:inherit; font-size:14px; color:var(--ink);
    outline:none; transition:border-color .15s ease, box-shadow .15s ease;
  }
  .searchwrap input:focus{ border-color:var(--brand); box-shadow:0 0 0 3px rgba(227,167,42,0.18); }
  .searchwrap svg{ position:absolute; left:12px; top:50%; transform:translateY(-50%); opacity:.45; }

  /* ---------- hero ---------- */
  .hero{ padding:56px 24px 28px; max-width:1060px; margin:0 auto; }
  .hero h1{
    font-size:clamp(32px, 5.4vw, 54px); line-height:1.18; margin:0 0 14px;
  }
  .hero h1 .u{
    position:relative; display:inline-block; color:var(--brand-ink);
  }
  .hero h1 .u::after{
    content:""; position:absolute; left:-2%; right:-2%; bottom:2px; height:.32em;
    background:var(--brand); opacity:.35; z-index:-1; border-radius:3px;
  }
  .hero p{ font-size:16px; color:var(--ink-soft); max-width:80ch; line-height:1.6; margin:0 0 26px; }

  .stats{ display:flex; gap:28px; }
  .stat b{ font-size:30px; display:block; line-height:1; opacity:0; transform:translateY(6px); animation:rise .5s ease forwards; }
  .stat:nth-child(2) b{ animation-delay:.08s; }
  .stat span{ font-size:13px; color:var(--ink-soft); }
  @keyframes rise{ to{ opacity:1; transform:translateY(0); } }

  /* ---------- filter pills ---------- */
  .filters{
    position:sticky; top:103px; z-index:20;
    display:flex; gap:8px; padding:14px 24px; max-width:1060px; margin:0 auto;
    overflow-x:auto; scrollbar-width:none; background:linear-gradient(var(--bg) 70%, transparent);
  }
  .filters::-webkit-scrollbar{ display:none; }
  #yearFilters{ flex-wrap:wrap; overflow-x:visible; row-gap:8px; }
  @media (max-width:640px){
    #yearFilters{ flex-wrap:nowrap; overflow-x:auto; }
  }
  .pill{
    flex:0 0 auto; padding:8px 16px; border-radius:999px; border:1px solid var(--line);
    background:var(--surface); color:var(--ink-soft); font-size:14px; font-weight:600;
    cursor:pointer; white-space:nowrap; transition:all .15s ease;
  }
  .pill:hover{ background:var(--brand-l); border-color:var(--brand); color:var(--brand-ink); }
  .pill.active:hover{ background:var(--ink); border-color:var(--ink); color:#fff; }
  .pill.active{ background:var(--ink); border-color:var(--ink); color:#fff; }
  .pill em{ font-style:normal; opacity:.6; margin-left:4px; font-weight:500; }
  .pill.active em{ opacity:.75; }

  /* ---------- view switch ---------- */
  .viewswitch{
    position:sticky; top:57px; z-index:25; display:flex; gap:6px;
    padding:10px 24px 0; max-width:1060px; margin:0 auto; background:var(--bg);
  }
  .viewswitch button {font-size:18px; font-weight:700; }
  .viewswitch button:hover{ background-color: #F2EFFF; }


  .vtab{
    border:none; background:transparent; font-family:inherit; font-size:14.5px; font-weight:700;
    color:var(--ink-soft); padding:8px 4px 12px; cursor:pointer; position:relative;
  }
  .vtab + .vtab{ margin-left:14px; }
  .vtab.active{ color:var(--ink); }
  .vtab.active::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:3px; border-radius:3px;
    background:var(--brand);
  }
  .view{ display:none; }
  .view.active{ display:block; }

  /* ---------- grid ---------- */
  .gridwrap{ max-width:1080px; margin:0 auto; padding:10px 24px 90px; }
  .grid{
    display:grid; gap:22px;
    grid-template-columns:repeat(2, 1fr);
  }
  @media (min-width:620px){ .grid{ grid-template-columns:repeat(3, 1fr); } }
  @media (min-width:900px){ .grid{ grid-template-columns:repeat(4, 1fr); } }

  .card{ cursor:pointer; }
  .cover{
    position:relative; aspect-ratio:3/4; border-radius:6px; overflow:hidden;
    padding:16px; display:flex; align-items:flex-end;
    transition:transform .18s ease, box-shadow .18s ease;
  }
  .card:hover .cover{ transform:translateY(-4px); box-shadow:0 14px 28px -10px rgba(32,29,26,.35); }
  .cover::before{
    content:""; position:absolute; inset:0;
    background-image:radial-gradient(rgba(255,255,255,.5) 1px, transparent 1.4px);
    background-size:14px 14px; mix-blend-mode:soft-light; opacity:.7;
  }
  .ribbon{
    position:absolute; top:0; right:18px; width:20px; height:34px;
    clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%);
  }
  .cover-title{
    position:relative; z-index:1; color:#fff; font-weight:800; font-size:15px;
    line-height:1.35; text-shadow:0 1px 10px rgba(0,0,0,.18);
  }
  .cover-img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:2;
  }

  /* ---------- magazine month tiles ---------- */
  .mag-grid{ grid-template-columns:repeat(3, 1fr); }
  @media (min-width:620px){ .mag-grid{ grid-template-columns:repeat(4, 1fr); } }
  @media (min-width:900px){ .mag-grid{ grid-template-columns:repeat(6, 1fr); } }
  .mag-cover{ aspect-ratio:3/3.6; align-items:center; justify-content:center; }
  .mag-cover .mag-month{
    position:relative; z-index:1; color:#fff; font-weight:800; text-align:center;
  }
  .mag-cover .mag-month b{ font-size:26px; display:block; line-height:1; }
  .mag-cover .mag-month span{ font-size:12px; opacity:.85; font-weight:600; }
  .mag-cover .mag-spine{
    position:absolute; left:0; top:0; bottom:0; width:6px; background:rgba(255,255,255,.35);
  }
  .mag-card .meta .title{ text-align:center; }
  .meta{ padding:10px 2px 0; }
  .meta .tag{
    display:inline-block; font-size:11.5px; font-weight:700; padding:3px 9px;
    border-radius:7px; margin-bottom:6px;
  }
  .meta .title{ font-size:14.5px; font-weight:600; line-height:1.4; margin:0 0 8px; }
  .meta .preview{
    display:inline-flex; align-items:center; gap:4px; font-size:12.5px; font-weight:600;
    color:var(--ink-soft);
  }
  .meta .preview svg{ width:13px; height:13px; }

  .empty{ text-align:center; padding:70px 20px; color:var(--ink-soft); display:none; }
  .empty.show{ display:block; }

  footer{ text-align:center; padding:30px 20px 46px; color:var(--ink-soft); font-size:12.5px; }

  /* ---------- modal ---------- */
  .modal-bg{
    position:fixed; inset:0; background:rgba(32,29,26,.5); backdrop-filter:blur(2px);
    display:flex; align-items:center; justify-content:center; z-index:50;
    opacity:0; pointer-events:none; transition:opacity .18s ease; padding:20px;
  }
  .modal-bg.open{ opacity:1; pointer-events:auto; }
  .modal{
    background:var(--surface); border-radius:20px; max-width:360px; width:100%;
    padding:26px; text-align:center; transform:translateY(8px); transition:transform .18s ease;
  }
  .modal-bg.open .modal{ transform:translateY(0); }
  .modal .swatch{ width:56px; height:74px; border-radius:9px; margin:0 auto 16px; }
  .modal h3{ font-size:17px; margin:0 0 8px; }
  .modal p{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; margin:0 0 20px; }
  .modal button{
    border:none; background:var(--ink); color:#fff; font-family:inherit; font-weight:700;
    font-size:14px; padding:11px 20px; border-radius:999px; cursor:pointer; width:100%;
  }