/* gospel.to homepage, direction 1a (dark "Premiere").
   Loads on top of app.css, which provides the tokens (:root), the base body
   type, the header (.hdr/.mark/.nav), .pill, .btn-primary and the
   reduced-motion block. This sheet adds the homepage sections. */

:root{ --gold:oklch(0.85 0.12 88); --well:#0c0c0e; }

/* icon tile: image fills, monogram centers (shared by home + browse) */
.tile{display:flex;align-items:center;justify-content:center;overflow:hidden;font-family:var(--serif);font-weight:300;line-height:1}
img.tile{object-fit:cover}

/* a touch more room than the app page's content column */
.wrap{width:min(var(--max),100% - 128px);margin:0 auto}
.center{text-align:center}

/* reveal: sections rise out of a blur as they enter */
.reveal{opacity:0;translate:0 48px;filter:blur(10px);
  transition:opacity 1.4s var(--ease),translate 1.8s var(--ease),filter 1.4s var(--ease)}
.reveal.in{opacity:1;translate:0 0;filter:none}
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1;translate:0 0;filter:none} }

/* ---------------- header: sticky after the hero ---------------- */
.hdr{transition:background .4s var(--ease),border-color .4s var(--ease)}
.hdr.stuck{position:fixed;background:rgba(9,9,10,.82);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--hair);animation:hdrDrop .5s var(--ease)}
@keyframes hdrDrop{from{transform:translateY(-12px);opacity:0}to{transform:none;opacity:1}}

/* ---------------- hero ---------------- */
.hero{position:relative;min-height:700px;overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:150px 24px 90px;text-align:center}
.hero-light{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);width:1240px;height:820px;
  max-width:140vw;pointer-events:none;z-index:-2;
  background:radial-gradient(50% 50% at 50% 50%, oklch(0.38 0.04 240 / .5), oklch(0.28 0.02 240 / .16) 58%, transparent 72%);
  opacity:0;animation:lightIn 2.4s var(--ease) .1s forwards}
.hero-light.swell{animation:lightIn 2.4s var(--ease) .1s forwards, lightSwell 20s ease-in-out 2.6s infinite}
@keyframes lightIn{to{opacity:1}}
@keyframes lightSwell{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.08)}}
.hero-spot{position:absolute;width:520px;height:520px;border-radius:50%;pointer-events:none;z-index:-1;
  transform:translate(-50%,-50%);opacity:0;transition:opacity .8s var(--ease);
  background:radial-gradient(50% 50% at 50% 50%, rgba(255,255,255,.065), transparent 70%)}

/* Always exactly two lines. The longer line, "the gospel to the world", is
   8.87em wide in Newsreader 300 at this tracking, so sizing the type to the
   viewport over 9.3em (about 5% spare) keeps both lines on one row each at
   any width; capped at 120px on wide screens. */
.hl{font-family:var(--serif);font-weight:300;letter-spacing:-.04em;line-height:1;margin:0 auto;
  font-size:min(120px, calc((100vw - 48px) / 9.3));will-change:transform,filter}
.hl .ln{display:block;white-space:nowrap}
.htag{margin:34px auto 0;max-width:600px;font-family:var(--sans);font-weight:400;
  font-size:clamp(17px,1.7vw,20px);line-height:1.55;color:rgba(244,243,239,.64)}
.hsearch{margin:30px auto 0;width:min(560px,100%);position:relative}
.hsearch input{width:100%;height:60px;border-radius:16px;border:1px solid rgba(255,255,255,.10);
  background:#121214;color:var(--ink);font-family:var(--sans);font-size:17px;padding:0 20px 0 52px;
  box-shadow:0 24px 60px -24px rgba(0,0,0,.9);transition:border-color .3s,box-shadow .3s}
.hsearch input::placeholder{color:rgba(244,243,239,.45)}
.hsearch input:focus{outline:none;border-color:rgba(255,255,255,.26)}
.hsearch .si{position:absolute;left:20px;top:50%;transform:translateY(-50%);width:18px;height:18px;
  opacity:.5;pointer-events:none}
.hero .anim-rise{opacity:0;translate:0 40px;filter:blur(12px)}

/* ---------------- Top 10 ---------------- */
.t10{margin-top:120px;position:relative}
.t10-tabs{display:flex;justify-content:center;gap:6px;margin:0 auto 40px;width:max-content;
  padding:5px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:999px}
.t10-tab{height:46px;padding:0 24px;border:0;border-radius:999px;background:none;cursor:pointer;
  font-family:var(--sans);font-weight:500;font-size:17px;color:rgba(244,243,239,.68);
  transition:background .3s var(--ease),color .3s}
.t10-tab[aria-selected="true"]{background:var(--ink);color:#0a0a0a}

.t10-rail-wrap{position:relative}
/* scroll-padding matches the side padding: without it, snapping aligns the
   first card to the very edge of the scroller and the padding is scrolled away */
.t10-rail{display:flex;gap:16px;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;
  padding:6px max(20px,calc((100vw - var(--max)) / 2)) 10px;scroll-snap-type:x proximity;cursor:grab;
  scroll-padding-inline:max(20px,calc((100vw - var(--max)) / 2))}
.t10-rail::-webkit-scrollbar{display:none}
.t10-rail.drag{cursor:grabbing;scroll-behavior:auto}
.t10-rail[hidden]{display:none}
.t10-fade{position:absolute;top:0;right:0;bottom:0;width:12%;pointer-events:none;z-index:2;
  background:linear-gradient(90deg,transparent,var(--page))}

.tcard{flex:0 0 268px;width:268px;scroll-snap-align:start;border-radius:24px;background:var(--card);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);overflow:hidden;
  transition:transform .6s var(--ease),box-shadow .3s,background .3s}
.tcard:hover{transform:translateY(-4px);background:var(--card-hover);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.tcard-art{position:relative;aspect-ratio:1/1;overflow:hidden;background:#1c1e22}
.tcard-art img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.6s var(--ease)}
.tcard:hover .tcard-art img{transform:scale(1.06)}
.tcard-art .mono{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-weight:300;font-size:92px;color:var(--ink)}
.tcard-scrim{position:absolute;inset:0;background:linear-gradient(transparent 52%, rgba(0,0,0,.5))}
.tcard-rank{position:absolute;left:16px;bottom:8px;font-family:var(--serif);font-weight:300;
  font-size:clamp(58px,6vw,96px);line-height:1;letter-spacing:-.05em;color:#fff;
  text-shadow:0 2px 24px rgba(0,0,0,.6)}
.tcard-spon-pill{position:absolute;left:16px;top:16px;font-family:var(--sans);font-weight:600;
  font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--ink);
  background:rgba(0,0,0,.62);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:5px 10px}
.tcard.spon{box-shadow:inset 0 0 0 1px oklch(0.85 0.12 88 / .4)}
.tcard-body{padding:16px 16px 18px}
.tcard-name{font-family:var(--sans);font-weight:600;font-size:19px;line-height:1.2;letter-spacing:-.01em;margin:0}
.tcard-maker{margin:3px 0 0;font-size:14px;color:rgba(244,243,239,.56)}
.tcard-row{margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:space-between;gap:8px}
.tcard-row .pill{font-size:12px;padding:2px 9px}
.tcard-rp{display:flex;align-items:center;gap:10px;font-size:13px;color:rgba(244,243,239,.56);white-space:nowrap}
.tcard-rp .star{color:var(--gold)}
.tcard-rp b{font-weight:600;color:rgba(244,243,239,.82)}

.t10-foot{width:min(var(--max),100% - 128px);margin:26px auto 0;display:flex;align-items:center;
  justify-content:space-between;gap:16px;flex-wrap:wrap}
.t10-cap{font-size:14px;color:rgba(244,243,239,.56);max-width:60ch}
.t10-cap a{color:rgba(244,243,239,.82);text-decoration:underline;text-decoration-color:rgba(244,243,239,.3)}
.t10-cap a:hover{text-decoration-color:var(--ink)}
.t10-ctrl{display:flex;align-items:center;gap:16px}
.t10-bar{width:120px;height:2px;background:rgba(255,255,255,.14);border-radius:2px;overflow:hidden}
.t10-bar i{display:block;height:100%;width:30%;background:var(--ink);border-radius:2px;transition:transform .2s linear,width .2s}
.t10-arrows{display:flex;gap:10px}

/* round control button (local copy so the homepage does not depend on app.css .rbtn) */
.rbtn{width:44px;height:44px;border-radius:999px;border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);color:var(--ink);cursor:pointer;display:flex;align-items:center;
  justify-content:center;font-size:16px;transition:background .3s}
.rbtn:hover{background:rgba(255,255,255,.14)}
.rbtn:disabled{opacity:.35;cursor:default}

/* ---------------- shared section heading ---------------- */
.sec{margin-top:150px}
.sec-h{font-family:var(--serif);font-weight:300;font-size:clamp(34px,7vw,76px);line-height:1;
  letter-spacing:-.035em;margin:0;text-align:center}
.sec-sub{margin:14px 0 0;text-align:center;font-size:16px;color:rgba(244,243,239,.56)}

/* ---------------- browse by category ---------------- */
.cats{margin-top:56px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.catc{display:block;min-width:0;border-radius:28px;padding:32px;background:var(--card);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);transition:transform .6s var(--ease),background .3s,box-shadow .3s}
.catc:hover{transform:translateY(-4px);background:var(--card-hover);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.catc-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.catc-h h3{font-family:var(--sans);font-weight:600;font-size:22px;letter-spacing:-.01em;margin:0}
.catc-h .arw{color:rgba(244,243,239,.5);transition:transform .4s var(--ease),color .3s}
.catc:hover .catc-h .arw{transform:translateX(4px);color:var(--ink)}
.catc-desc{margin:10px 0 0;font-size:15px;line-height:1.5;color:rgba(244,243,239,.64)}
.catc-well{margin:20px 0 0;background:var(--well);border-radius:16px;padding:8px 14px}
.cwrow{display:flex;align-items:center;gap:11px;padding:9px 0;border-top:1px solid rgba(255,255,255,.06)}
.cwrow:first-child{border-top:0}
.cwrow .tile{width:36px;height:36px;border-radius:9px;flex:none}
.cwrow .nm{flex:1;min-width:0;font-size:15px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cwrow .pr{font-size:13px;color:rgba(244,243,239,.52);white-space:nowrap}
.catc-n{margin:16px 0 0;font-family:var(--mono);font-size:12px;color:rgba(244,243,239,.52)}
/* a lone card on the last row sits centered instead of hanging off the left */
@media(min-width:1001px){ .cats > :last-child:nth-child(3n+1){grid-column:2} }
@media(min-width:721px) and (max-width:1000px){ .cats > :last-child:nth-child(2n+1){grid-column:1 / -1;justify-self:center;width:calc(50% - 10px)} }
.cats-more{margin:40px auto 0;text-align:center;font-size:16px;color:rgba(244,243,239,.56)}
.cats-more a{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(244,243,239,.3)}
.cats-more a:hover{text-decoration-color:var(--ink)}

/* ---------------- recent reviews ---------------- */
.rvs{margin-top:52px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.rvc{display:flex;flex-direction:column;min-width:0;border-radius:24px;padding:32px;background:var(--card);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);transition:transform .6s var(--ease),background .3s,box-shadow .3s}
.rvc:hover{transform:translateY(-4px);background:var(--card-hover);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.stars{letter-spacing:.14em;font-size:14px}
.stars .on{color:var(--gold)}
.stars .off{color:rgba(255,255,255,.18)}
.rvc-quote{margin:18px 0 0;font-family:var(--serif);font-weight:300;font-size:25px;line-height:1.36;
  letter-spacing:-.01em;color:var(--ink)}
.rvc-by{margin:16px 0 0;font-family:var(--sans);font-weight:600;font-size:11px;text-transform:uppercase;
  letter-spacing:.16em;color:rgba(244,243,239,.52)}
.rvc-app{margin-top:auto;padding-top:22px;display:flex;align-items:center;gap:12px}
.rvc-app .divider{position:absolute}
.rvc-app-in{margin-top:22px;padding-top:22px;border-top:1px solid rgba(255,255,255,.08);
  display:flex;align-items:center;gap:12px;width:100%}
.rvc-app .tile{width:44px;height:44px;border-radius:11px;flex:none}
.rvc-app .meta{min-width:0}
.rvc-app .nm{font-family:var(--sans);font-weight:600;font-size:16px;color:var(--ink)}
.rvc-app .cat{font-size:13px;color:rgba(244,243,239,.56)}

/* ---------------- submit ---------------- */
.submit{position:relative;margin-top:160px;padding:0 24px 128px;text-align:center;isolation:isolate;overflow:hidden}
.submit-light{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);width:900px;height:560px;
  max-width:130vw;pointer-events:none;z-index:-1;
  background:radial-gradient(50% 50% at 50% 50%, oklch(0.34 0.03 240 / .42), transparent 70%)}
.submit-h{font-family:var(--serif);font-weight:300;font-size:clamp(40px,9vw,104px);line-height:1;
  letter-spacing:-.045em;margin:0;text-wrap:balance}
.submit-p{margin:24px auto 0;max-width:520px;font-size:19px;line-height:1.55;color:rgba(244,243,239,.64)}
.submit .btn-primary{margin-top:36px}
.btn-primary:hover{background:#fff}

/* ---------------- footer ---------------- */
.hf{border-top:1px solid rgba(255,255,255,.08)}
.hf-in{width:min(var(--max),100% - 128px);margin:0 auto;padding:64px 0 48px;
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px}
.hf-brand .mark{font-size:22px}
.hf-blurb{margin:16px 0 0;max-width:280px;font-size:15px;line-height:1.55;color:rgba(244,243,239,.56)}
.hf h4{margin:0 0 16px;font-family:var(--sans);font-weight:600;font-size:12px;text-transform:uppercase;
  letter-spacing:.16em;color:rgba(244,243,239,.52)}
.hf a.fl{display:block;margin:0 0 11px;font-size:15px;color:rgba(244,243,239,.68);transition:color .2s}
.hf a.fl:hover{color:var(--ink)}
.hf-copy{width:min(var(--max),100% - 128px);margin:0 auto;padding:0 0 48px;
  font-family:var(--mono);font-size:12px;color:rgba(244,243,239,.52)}

/* ---------------- responsive ---------------- */
@media(max-width:1000px){
  .cats,.rvs{grid-template-columns:repeat(2,1fr)}
  .hf-in{grid-template-columns:1fr 1fr;gap:32px}
  .hf-brand{grid-column:1 / -1}
}
@media(max-width:720px){
  .hero{min-height:88vh;padding:132px 20px 72px}
  .sec{margin-top:104px}
  .t10{margin-top:104px}
  .cats,.rvs{grid-template-columns:1fr}
  .t10-rail{gap:14px;padding-left:20px;padding-right:20px;scroll-padding-inline:20px}
  .tcard{flex-basis:78vw;width:78vw}
  .t10-foot{width:min(var(--max),100% - 40px)}
  .t10-cap{order:2}
  .submit{margin-top:120px;padding-bottom:96px}
  .hf-in{grid-template-columns:1fr;gap:28px;padding:48px 0 32px}
  .hf-brand{grid-column:auto}
  .wrap{width:min(var(--max),100% - 40px)}
}

/* the search box's clear button: a soft x instead of the browser's blue one */
.hsearch input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;height:18px;width:18px;margin-left:8px;cursor:pointer;opacity:.5;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f4f3ef' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center/14px no-repeat}
.hsearch input::-webkit-search-cancel-button:hover{opacity:.85}