/* ============================================================
   Wall of Love — /wall-of-love/
   Page-scoped so nothing here can touch the rest of the site.
   Everything is prefixed .wol-; shared tokens come from styles.css.
   Because this file is only linked from one page, adding it does NOT
   require the site-wide ?v= bump that a styles.css edit would.
   ============================================================ */

.wol-page{background:var(--navy);color:#fff}

/* ---------- hero (dark) ---------- */
.wol-hero{position:relative;overflow:hidden;padding:clamp(40px,5.4vw,72px) 0 clamp(58px,7vw,92px)}
.wol-stars{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:0}
.wol-hero__grid{position:relative;z-index:2;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);gap:clamp(28px,5vw,72px);align-items:center}
.wol-hero h1{font-size:clamp(32px,4.3vw,54px);line-height:1.05;letter-spacing:-.032em;
  font-weight:800;margin:0;text-wrap:balance}
.wol-hero h1 em{font-style:normal;
  background:linear-gradient(100deg,var(--purple-4),var(--purple-1) 58%,var(--pink-light));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.wol-hero__lead{margin:20px 0 0;font-size:17px;line-height:1.62;color:rgba(255,255,255,.78);max-width:46ch}
.wol-hero__cta{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap}
.wol-btn-ghost{display:inline-flex;align-items:center;justify-content:center;
  padding:13px 26px;border-radius:var(--radius-pill);border:1px solid rgba(255,255,255,.26);
  font-size:15px;font-weight:500;color:#fff;text-decoration:none;transition:border-color .18s,background .18s}
.wol-btn-ghost:hover{border-color:var(--purple-4);background:rgba(166,64,255,.10)}

/* ---------- the Slack ticker: three rows, scrolling up ---------- */
.wol-slack{position:relative;height:342px;overflow:hidden;
  -webkit-mask:linear-gradient(180deg,transparent,#000 13%,#000 87%,transparent);
  mask:linear-gradient(180deg,transparent,#000 13%,#000 87%,transparent)}
.wol-slack__list{display:block;will-change:transform}
.wol-msg{display:flex;gap:13px;height:114px;padding:8px 4px;box-sizing:border-box;
  transition:opacity .55s ease}
.wol-msg:nth-child(even){margin-left:auto;margin-right:0;max-width:454px}
.wol-msg:nth-child(odd){max-width:454px}
.wol-msg__av{flex:0 0 38px;width:38px;height:38px;border-radius:10px;object-fit:cover;
  display:grid;place-items:center;font-size:13px;font-weight:700;color:#fff;
  box-shadow:0 6px 20px rgba(0,0,0,.4)}
.wol-msg__b{min-width:0}
.wol-msg__top{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:3px}
.wol-msg__name{font-size:14.5px;font-weight:700;letter-spacing:-.01em}
.wol-msg__role{font-size:12px;color:rgba(255,255,255,.55)}
.wol-msg__time{font-size:11.5px;color:rgba(255,255,255,.35)}
.wol-msg__txt{font-size:15px;line-height:1.5;color:rgba(255,255,255,.92);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.wol-msg__ch{margin-top:6px;font-size:11.5px;color:var(--purple-4);opacity:.75;font-weight:500}

/* ---------- horizon: the sky crests a planet limb into the light wall ---------- */
/* No overflow:hidden here. Clipping this element crops the atmosphere glow and
   leaves a hard band across the curve. The ::before is inset to 0 instead, which
   is what actually stops the sideways scroll. */
.wol-horizon{position:relative;z-index:2;height:clamp(84px,10vw,158px);margin-bottom:-1px}
.wol-horizon::before{content:"";position:absolute;left:0;right:0;bottom:0;height:340%;z-index:1;
  background:radial-gradient(58% 100% at 50% 100%,rgba(233,153,255,.30),rgba(120,0,224,.13) 42%,transparent 72%);
  pointer-events:none}
.wol-horizon svg{position:relative;z-index:2;display:block;width:100%;height:100%}
.wol-horizon__fill{fill:var(--wol-paper)}
.wol-horizon__edge{stroke:url(#wolLimb);stroke-width:1.6;
  filter:drop-shadow(0 0 10px rgba(233,153,255,.7)) drop-shadow(0 0 26px rgba(166,64,255,.42))}

/* ---------- the wall (light) ---------- */
:root{--wol-paper:#F7F5FC}
.wol-wall{background:var(--wol-paper);color:var(--ink);
  padding:clamp(20px,2.8vw,44px) 0 clamp(56px,6vw,88px)}
.wol-head{max-width:660px;margin:0 auto clamp(30px,4vw,48px);text-align:center}
.wol-head h2{font-size:clamp(28px,4vw,44px);line-height:1.1;letter-spacing:-.028em;
  font-weight:800;color:var(--ink);margin:0}
.wol-head p{margin:14px 0 0;font-size:16px;line-height:1.6;color:var(--muted)}
.wol-grid{columns:3;column-gap:20px}
.wol-card{break-inside:avoid;margin:0 0 20px;background:#fff;border:1px solid var(--hairline);
  border-radius:var(--radius-card);padding:24px;
  box-shadow:0 2px 10px rgba(12,14,38,.05);
  transition:box-shadow .22s,transform .22s,border-color .22s}
.wol-card:hover{transform:translateY(-3px);border-color:rgba(166,64,255,.4);
  box-shadow:0 16px 40px rgba(76,0,143,.16)}
.wol-card--lead{background:linear-gradient(160deg,#fff,var(--tint));border-color:rgba(166,64,255,.3)}
.wol-mark{display:block;font-size:34px;line-height:.6;color:var(--purple-1);opacity:.32;
  font-weight:800;margin-bottom:10px}
.wol-q{font-size:16px;line-height:1.6;color:var(--muted);margin:0}
.wol-q--lead{font-size:20.5px;line-height:1.45;font-weight:600;letter-spacing:-.014em;color:var(--ink)}
.wol-who{display:flex;align-items:center;gap:11px;margin-top:16px}
.wol-av{flex:0 0 38px;width:38px;height:38px;border-radius:50%;object-fit:cover;
  display:grid;place-items:center;font-size:13px;font-weight:700;color:#fff;letter-spacing:-.02em}
.wol-n{display:block;font-size:14px;font-weight:650;letter-spacing:-.01em;line-height:1.3;color:var(--ink)}
.wol-r{display:block;font-size:12.5px;line-height:1.35;color:var(--muted);opacity:.86}
/* Provenance, and only provenance. The company is already in the role line, so
   this says where the words were actually said and nothing else. */
.wol-src{margin-top:14px;display:flex;align-items:center;gap:8px;
  font-size:12px;letter-spacing:.02em;color:var(--purple-2)}
.wol-src i{width:5px;height:5px;border-radius:50%;background:currentColor;flex:0 0 auto}
.wol-more{min-height:56px;display:flex;align-items:center;justify-content:center;margin-top:6px}
.wol-more button{background:none;border:1px solid rgba(166,64,255,.4);border-radius:var(--radius-pill);
  padding:10px 22px;font-family:inherit;font-size:14px;color:var(--purple-2);cursor:pointer}
.wol-more button:hover{border-color:var(--purple-1);background:#fff}

@media (max-width:1080px){
  .wol-grid{columns:2}
}
@media (max-width:860px){
  .wol-hero__grid{grid-template-columns:1fr;gap:34px}
  .wol-msg:nth-child(even){margin-left:0}
  .wol-slack{height:330px}
}
@media (max-width:640px){
  .wol-grid{columns:1}
  .wol-hero h1{font-size:31px}
  .wol-msg{height:126px}
  .wol-slack{height:366px}
}
@media (prefers-reduced-motion:reduce){
  .wol-slack{height:auto;-webkit-mask:none;mask:none}
  .wol-slack__list{transform:none!important;transition:none!important}
  .wol-msg{opacity:1!important}
}