/* ============================================================
   ServeX — serve-index.css  (the /serve landing + listing only)
   Loaded at the top of serve/tpl/index.tpl. Scoped to .sx-theme.
   ============================================================ */

/* ---------- HERO ----------
   The painting has a large empty sky, and the copy block sits on
   cream, so stacking them puts two blank regions in a row and pushes
   the bowl nearly two screens down. Instead the artwork slides UP
   behind the copy, and the edge scrim below fades its top into the
   page, so the headline rests on clean paper and the bowl lands in
   view. --hero-pull is the single tuning knob: raise it to bring the
   bowl higher, lower it to give the copy more clear air. */
.sx-theme .sx-hero{position:relative;overflow:hidden;padding:64px 0 0;background:var(--paper);
  --hero-pull:clamp(140px,21vw,340px)}
.sx-theme .sx-hero-copy{position:relative;z-index:2;text-align:center;max-width:820px}
.sx-theme .sx-hero h1{margin:.12em 0 .2em;letter-spacing:-.01em}
.sx-theme .sx-hero .field-line{font-family:var(--serif);font-style:italic;
  font-size:clamp(1.3rem,2.5vw,1.75rem);color:var(--clay-deep);max-width:42ch;
  margin:0 auto 1.15rem;line-height:1.35}
.sx-theme .sx-hero .pitch{font-size:1.05rem;color:var(--ink-dim);max-width:54ch;margin:0 auto 1.8rem}
.sx-theme .sx-hero .pitch b{color:var(--ink);font-weight:600}
.sx-theme .sx-hero-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center;justify-content:center}

/* the painting.
   The file's own cream is slightly warmer than --paper, so its
   rectangle edges show as hard lines. A scrim of page cream fading to
   transparent on all four sides dissolves them, whatever the file's
   background happens to be. The top fade is deepest because the copy
   sits over that region and wants clean paper under it. */
.sx-theme .sx-hero-art{position:relative;z-index:1;max-width:1080px;
  margin:calc(-1 * var(--hero-pull)) auto 0}
.sx-theme .sx-hero-art img{width:100%;height:auto;display:block}
.sx-theme .sx-hero-art::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to bottom, var(--paper) 0%, rgba(251,248,243,.85) 14%, rgba(251,248,243,0) 34%),
    linear-gradient(to top,    var(--paper) 0%, rgba(251,248,243,0) 10%),
    linear-gradient(to right,  var(--paper) 0%, rgba(251,248,243,0) 11%),
    linear-gradient(to left,   var(--paper) 0%, rgba(251,248,243,0) 11%)}

@media(max-width:640px){
  .sx-theme .sx-hero{padding:46px 0 0;--hero-pull:clamp(50px,14vw,110px)}
}

/* ---------- WHY : theory of change ---------- */
.sx-theme .sx-principles{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:48px}
@media(max-width:820px){.sx-theme .sx-principles{grid-template-columns:1fr;gap:30px}}
.sx-theme .sx-principle{text-align:center;padding:0 8px}
.sx-theme .sx-principle i{font-size:1.5rem;color:var(--clay);display:block;margin-bottom:.7rem}
.sx-theme .sx-principle h4{font-family:var(--serif);font-size:1.4rem;margin-bottom:.5rem}
.sx-theme .sx-principle p{font-size:.99rem;color:var(--ink-dim);margin:0;line-height:1.7}
.sx-theme .sx-principle em{color:var(--ink);font-style:italic}

/* ---------- HOW IT WORKS ---------- */
.sx-theme .sx-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:44px}
@media(max-width:820px){.sx-theme .sx-steps{grid-template-columns:1fr;gap:26px}}
.sx-theme .sx-step{border-top:2px solid var(--line);padding-top:16px}
.sx-theme .sx-step .n{font-family:var(--serif);font-size:2.3rem;color:var(--clay);line-height:1}
.sx-theme .sx-step h4{font-family:var(--serif);font-size:1.35rem;margin:.4rem 0 .35rem}
.sx-theme .sx-step p{font-size:.97rem;color:var(--ink-dim);margin:0}
.sx-theme .sx-step em{color:var(--ink);font-style:italic}

/* quiet further-reading line: the people who click are the ones we want */
.sx-theme .sx-reading{text-align:center;margin-top:44px;font-size:.92rem;color:var(--muted)}
.sx-theme .sx-reading a{color:var(--teal);border-bottom:1px solid rgba(9,117,122,.25);padding-bottom:1px}
.sx-theme .sx-reading a:hover{border-bottom-color:var(--teal)}

/* ---------- GIFT TILES ---------- */
.sx-theme .sx-gifts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-bottom:12px}
.sx-theme .sx-gift{display:flex;flex-direction:column;align-items:flex-start;gap:.3rem;
  background:var(--paper-2);border:1px solid var(--line-2);border-radius:var(--r);
  padding:22px 22px 20px;box-shadow:var(--shadow-sm);transition:.22s}
.sx-theme .sx-gift:hover{transform:translateY(-3px);border-color:rgba(9,117,122,.28);box-shadow:var(--shadow)}
.sx-theme .sx-gift i{font-size:1.15rem;color:var(--clay);margin-bottom:.35rem}
.sx-theme .sx-gift-name{font-family:var(--serif);font-size:1.28rem;font-weight:600;color:var(--ink);line-height:1.25}
.sx-theme .sx-gift-ct{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* ---------- CLUSTER SECTIONS ---------- */
.sx-theme .sx-section{margin-top:56px;scroll-margin-top:calc(var(--nav-h) + 20px)}
.sx-theme .sx-seclabel{display:flex;align-items:center;gap:.7rem;margin-bottom:14px;
  font-family:var(--sans);font-size:.74rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--teal)}
.sx-theme .sx-seclabel i{font-size:.95rem;color:var(--clay)}
.sx-theme .sx-seclabel .rule{flex:1;height:1px;background:var(--line)}

/* ---------- QUIET LIST ROWS ---------- */
.sx-theme .sx-list{background:var(--paper-2);border:1px solid var(--line-2);border-radius:var(--r);
  box-shadow:var(--shadow-sm);overflow:hidden}
.sx-theme .sx-row{display:flex;align-items:center;gap:18px;padding:20px 24px;
  border-bottom:1px solid var(--line-2);transition:background .18s}
.sx-theme .sx-row:last-child{border-bottom:0}
.sx-theme .sx-row:hover{background:var(--teal-soft)}
.sx-theme .sx-row-main{flex:1;min-width:0}
.sx-theme .sx-row-title{display:block;font-family:var(--serif);font-size:1.35rem;font-weight:600;color:var(--ink);line-height:1.25}
.sx-theme .sx-row:hover .sx-row-title{color:var(--teal-deep)}
.sx-theme .sx-row-oneliner{display:block;margin-top:.2rem;font-size:.97rem;color:var(--ink-dim);line-height:1.55}
.sx-theme .sx-row-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.1rem;margin-top:.55rem;
  font-size:.82rem;color:var(--muted)}
.sx-theme .sx-row-meta i{margin-right:.3rem;opacity:.8}
.sx-theme .sx-row-chev{color:var(--muted);font-size:.85rem;flex-shrink:0;transition:transform .2s,color .2s}
.sx-theme .sx-row:hover .sx-row-chev{color:var(--teal);transform:translateX(3px)}
@media(max-width:560px){
  .sx-theme .sx-row{padding:18px 18px;gap:12px}
  .sx-theme .sx-row-title{font-size:1.2rem}
}

/* ---------- EMPTY STATE ---------- */
.sx-theme .sx-empty{text-align:center;background:var(--paper-2);border:1px solid var(--line-2);
  border-radius:var(--r);padding:52px 30px;box-shadow:var(--shadow-sm)}
.sx-theme .sx-empty i{font-size:1.7rem;color:var(--clay);margin-bottom:.8rem;display:block}

/* ---------- CLOSING NOTE ---------- */
.sx-theme .sx-closing{text-align:center;padding:80px 0}
.sx-theme .sx-closing .quote{font-family:var(--serif);font-style:italic;font-size:clamp(1.35rem,2.6vw,1.75rem);
  color:var(--ink);max-width:38ch;margin:0 auto 1.2rem;line-height:1.5}
.sx-theme .sx-closing .src{display:block;font-family:var(--sans);font-style:normal;font-size:.82rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.sx-theme .sx-closing .footnote{margin-top:2.4rem;font-size:.98rem;color:var(--ink-dim)}