/* SunStone — shared stylesheet for the stone pages.
   Extracted once so browsers cache it, instead of being re-sent inside every
   page. The palette is lifted from the original site so the new pages read as
   the same brand. */
:root{
  --gold:#c9a84c; --gold-light:#e8d08a; --gold-bright:#f5e0a0; --gold-dark:#9a7a2e;
  --purple:#6b0f3a; --purple-deep:#3a0820; --purple-mid:#8b1a50;
  --bg:#0e0508; --bg-card:#1a0a10; --line:rgba(201,168,76,.22);
  --text:#f0e9de; --text-dim:#c3b5a8; --text-faint:#93867c;
  --serif:'Cormorant Garamond',Georgia,serif;
  --display:'Cinzel',Georgia,serif;
  --sans:'Raleway',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);
  font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:var(--gold-light)}
img{max-width:100%;height:auto}

/* ---------- nav ---------- */
.ss-nav{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;
  padding:14px 26px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(58,8,32,.55),transparent)}
.ss-brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--gold);
  font-family:var(--display);font-size:1.05rem;letter-spacing:.14em;text-transform:uppercase}
.ss-brand small{display:block;font-size:.5rem;letter-spacing:.3em;color:var(--text-faint)}
.ss-mark{color:var(--gold);font-size:1.2rem}
.ss-links{display:flex;gap:1.3rem;list-style:none;margin:0;padding:0;margin-left:auto;
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase}
.ss-links a{color:var(--text-dim);text-decoration:none}
.ss-links a:hover{color:var(--gold)}
.ss-lang{display:flex;gap:6px}
.ss-lang a{font-size:.64rem;letter-spacing:.12em;padding:4px 10px;text-decoration:none;
  border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.55)}
.ss-lang a.lang-on{border-color:var(--gold);color:var(--gold);background:rgba(201,168,76,.15)}
.ss-lang a:hover{border-color:var(--gold);color:var(--gold)}

/* ---------- layout ---------- */
.ss-main{max-width:940px;margin:0 auto;padding:26px 22px 70px}
.ss-crumb{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-faint);margin-bottom:26px}
.ss-crumb a{color:var(--text-dim);text-decoration:none}
.ss-crumb a:hover{color:var(--gold)}

/* ---------- stone page ---------- */
.ss-head{display:grid;grid-template-columns:280px 1fr;gap:34px;align-items:start;
  margin-bottom:30px}
@media(max-width:720px){.ss-head{grid-template-columns:1fr;gap:20px}}
.ss-photo{width:100%;aspect-ratio:1;object-fit:cover;border:1px solid var(--line)}
.ss-head h1{font-family:var(--display);font-size:clamp(2rem,5vw,2.9rem);line-height:1.1;
  margin:0 0 .3rem;color:var(--gold-bright);font-weight:500}
.ss-type{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-faint);margin:0 0 1rem}
.ss-short{font-family:var(--serif);font-style:italic;font-size:1.3rem;line-height:1.5;
  color:var(--gold-light);margin:0 0 1rem}
.ss-chips{display:flex;flex-wrap:wrap;gap:7px;list-style:none;padding:0;margin:0}
.ss-chips li{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 10px;border:1px solid var(--line);color:var(--gold);
  background:rgba(201,168,76,.07)}
.ss-desc{font-family:var(--serif);font-size:1.22rem;line-height:1.75;color:var(--text);
  border-left:2px solid var(--gold-dark);padding-left:20px;margin:0 0 30px}
.ss-rows{margin:0;display:grid;gap:0}
.ss-row{display:grid;grid-template-columns:190px 1fr;gap:20px;padding:15px 0;
  border-top:1px solid rgba(201,168,76,.14)}
@media(max-width:720px){.ss-row{grid-template-columns:1fr;gap:4px}}
.ss-row dt{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
  font-weight:500}
.ss-row dd{margin:0;color:var(--text-dim);line-height:1.75}

/* ---------- cta + related ---------- */
.ss-cta{margin:46px 0 0;padding:26px 28px;border:1px solid var(--line);
  background:linear-gradient(135deg,rgba(107,15,58,.28),rgba(26,10,16,.5))}
.ss-cta h2{font-family:var(--display);font-size:1.3rem;color:var(--gold-bright);margin:0 0 .5rem;font-weight:500}
.ss-cta p{margin:0 0 1.1rem;color:var(--text-dim)}
.ss-btn{display:inline-block;padding:11px 26px;border:1px solid var(--gold);color:var(--gold);
  text-decoration:none;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase}
.ss-btn:hover{background:var(--gold);color:#1a0a10}
.ss-rel{margin-top:42px;border-top:1px solid var(--line);padding-top:22px}
.ss-rel h2{font-family:var(--display);font-size:1rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);margin:0 0 .8rem;font-weight:500}
.ss-rel ul{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:0}
.ss-rel a{font-size:.85rem;padding:6px 14px;border:1px solid var(--line);text-decoration:none;
  color:var(--text-dim)}
.ss-rel a:hover{border-color:var(--gold);color:var(--gold)}

/* ---------- hub ---------- */
.ss-hubh1{font-family:var(--display);font-size:clamp(1.8rem,4.5vw,2.7rem);line-height:1.15;
  color:var(--gold-bright);margin:0 0 .6rem;font-weight:500}
.ss-hubsub{font-family:var(--serif);font-size:1.2rem;color:var(--text-dim);max-width:60ch;
  margin:0 0 26px}
.ss-searchwrap{position:relative;max-width:460px;margin-bottom:10px}
.ss-mag{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;
  fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round;pointer-events:none;opacity:.85}
.ss-search{width:100%;padding:13px 16px 13px 44px;background:var(--bg-card);
  border:1px solid var(--line);color:var(--text);font-family:var(--sans);font-size:.95rem}
.ss-search::placeholder{color:var(--text-faint)}
.ss-search:focus{outline:none;border-color:var(--gold)}
.ss-count{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint);
  margin:0 0 22px}
.ss-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:16px}
.ss-card{display:flex;flex-direction:column;text-decoration:none;border:1px solid var(--line);
  background:var(--bg-card);padding:0 0 13px;transition:border-color .15s}
.ss-card:hover{border-color:var(--gold)}
.ss-card img{width:100%;aspect-ratio:1;object-fit:cover;display:block;margin-bottom:11px}
.ss-noimg{display:flex;align-items:center;justify-content:center;aspect-ratio:1;
  font-size:2rem;color:var(--gold-dark);background:rgba(107,15,58,.2);margin-bottom:11px}
.ss-cname{font-family:var(--display);font-size:.95rem;color:var(--gold-light);padding:0 13px;
  margin-bottom:4px}
.ss-cshort{font-size:.78rem;line-height:1.5;color:var(--text-faint);padding:0 13px}
.ss-none{color:var(--text-faint);font-style:italic;margin-top:22px}
[hidden]{display:none !important}

/* ---------- footer ---------- */
.ss-foot{border-top:1px solid var(--line);padding:26px 22px;text-align:center;
  font-size:.8rem;color:var(--text-faint)}
.ss-foot a{color:var(--text-dim);text-decoration:none}
.ss-foot a:hover{color:var(--gold)}

/* ---------- phones ----------
   The hub grid used minmax(168px,1fr): at 375px that computes to a single
   column, which turned 51 cards into 28 screens of scrolling — the exact
   problem these pages exist to solve. Two up, with the blurb dropped so the
   cards stay short. */
@media (max-width:640px){
  .ss-grid{grid-template-columns:1fr 1fr;gap:10px}
  .ss-cshort{display:none}
  .ss-cname{font-size:.85rem;padding:0 10px 10px}
  .ss-card img,.ss-noimg{margin-bottom:8px}
  .ss-main{padding:18px 14px 50px}
  .ss-nav{padding:11px 14px;gap:.8rem}
  .ss-links{gap:.85rem;font-size:.7rem;order:3;width:100%;margin-left:0;
    justify-content:center;padding-top:8px;border-top:1px solid rgba(201,168,76,.14)}
  .ss-lang{margin-left:auto}
  .ss-head h1{font-size:1.9rem}
  .ss-short{font-size:1.12rem}
  .ss-desc{font-size:1.05rem;padding-left:14px}
  .ss-row{padding:12px 0}
  .ss-cta{padding:20px 18px}
  .ss-hubsub{font-size:1.05rem}
}
/* very small phones */
@media (max-width:360px){
  .ss-grid{gap:8px}
  .ss-cname{font-size:.78rem}
}

/* the real logo mark in the nav, replacing the placeholder glyph */
.ss-logo{width:42px;height:42px;border-radius:50%;display:block;flex:0 0 auto}
.ss-brand{transition:color .15s}
.ss-brand:hover{color:var(--gold-bright)}
.ss-brand:hover .ss-logo{filter:brightness(1.15)}
@media(max-width:640px){ .ss-logo{width:34px;height:34px} }