/* The members site's look on the private readings page: night-sea blue, gold and pearl ivory, Cinzel / Cormorant /
   Montserrat, rounded panels with a thin gold line, and molten-gold buttons. Loaded after style.css and overrides it. */
body.ss {
  --bg: #032235; --bg2: #063B59; --sea: #0a4f6e; --teal: #087F91;
  --panel: rgba(4, 38, 58, 0.78); --panel-solid: #052d44; --line: rgba(214, 173, 85, 0.42); --line-soft: rgba(232, 225, 206, 0.14);
  --ink: #EFE9D8; --ink-2: #B7C7C6; --muted: #8FA6A8; --card: var(--panel);
  --gold: #D6AD55; --gold-hi: #F2D48C; --aqua: #F2D48C; --glow: rgba(0, 0, 0, 0);
  --display: "Cormorant Garamond", Georgia, serif; --brand: "Cinzel", Georgia, serif; --sans: "Montserrat", system-ui, sans-serif;
  --shadow: 0 0 0 1px var(--line), 0 18px 50px -20px rgba(0, 0, 0, 0.7);
  --molten: linear-gradient(180deg, #FFF4CF 0%, #FBDD8C 18%, #F2C25E 48%, #DFA43A 52%, #E9B44D 78%, #FCDB8A 100%);
  margin: 0; min-height: 100vh; color: var(--ink); font: 400 16px/1.6 var(--sans);
  background: var(--bg) radial-gradient(1200px 700px at 80% -10%, rgba(8, 127, 145, 0.28), transparent 60%) fixed;
}
html { background: #032235; background-image: none; }
body.ss h1, body.ss h2, body.ss h3, body.ss .link b, body.ss .sub b, body.ss .video b, body.ss .note-block b { font-family: var(--display); font-weight: 600; letter-spacing: 0; }

/* the bar along the top, as on the members site */
.ss-top { position: sticky; top: 0; z-index: 30; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  background: rgba(3, 34, 53, 0.8); border-bottom: 1px solid var(--line-soft); }
.ss-bar { width: min(1200px, 100% - 32px); margin-inline: auto; min-height: 72px; display: flex; align-items: center; gap: 14px; }
.ss-brand { display: flex; align-items: center; gap: 10px; margin-right: auto; text-decoration: none; color: var(--gold); }
.ss-brand img { width: 62px; height: auto; }
.ss-brand span { font: 600 17px/1.05 var(--brand); letter-spacing: 0.04em; }
.ss-nav { display: flex; gap: 4px; }
.ss-nav a { color: var(--ink); text-decoration: none; font-weight: 500; font-size: 14px; padding: 8px 14px; border-radius: 999px; }
.ss-nav a:hover { box-shadow: inset 0 0 0 1px var(--line); }
body.ss .share { position: static; width: 40px; height: 40px; flex: none; background: transparent; color: var(--gold-hi); border: 1px solid var(--line); box-shadow: none; }
body.ss .share:hover, body.ss .share:focus-visible { box-shadow: inset 0 0 0 1px var(--gold); color: var(--gold-hi); }
body.ss .share.done::after { background: var(--gold); color: #1d1405; box-shadow: none; }

/* one centred column, the width of the members feed */
.ss-col { width: min(640px, 100% - 32px); margin: 28px auto 0; padding-bottom: max(64px, calc(env(safe-area-inset-bottom) + 40px)); }

/* the profile card: banner, gold-ringed emblem, name, handle and words */
.ss-profile { background: var(--panel); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; margin-bottom: 22px; }
.ss-cover { height: clamp(150px, 30vw, 210px); background: url(/hero-clear.jpg) 78% 62% / cover no-repeat; }
.ss-pbody { padding: 0 22px 22px; display: grid; gap: 6px; }
.ss-avatar { width: 104px; height: 104px; margin-top: -52px; border-radius: 50%; border: 3px solid var(--panel-solid); box-shadow: 0 0 0 2px var(--gold); background: var(--panel-solid); }
.ss-profile h1 { font-size: clamp(28px, 6vw, 34px); line-height: 1.1; margin: 6px 0 0; color: var(--ink); }
.ss-handle { margin: 0; color: var(--muted); font-size: 14px; }
.ss-handle .tag { color: #8fe0b8; font-size: inherit; margin: 0; }
.ss-pbody .bio { margin: 4px 0 0; color: var(--ink-2); font-size: 15px; max-width: 60ch; }
body.ss .social { justify-content: flex-start; margin-top: 10px; }
body.ss .soc { width: 40px; height: 40px; color: var(--gold-hi); background: transparent; border: 1px solid var(--line); box-shadow: none; }
body.ss .soc:hover, body.ss .soc:focus-visible { transform: none; box-shadow: inset 0 0 0 1px var(--gold); color: var(--gold-hi); }

/* section titles between gold rules */
body.ss .sec, body.ss .grp-btn { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 26px 0 6px; color: var(--gold-hi);
  font: 600 15px/1.3 var(--brand); letter-spacing: 0.08em; text-transform: uppercase; text-align: center; }
body.ss .sec::before, body.ss .sec::after { content: ""; flex: 1; min-width: 24px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
body.ss .sec::after { background: linear-gradient(270deg, transparent, var(--gold)); }

/* every reading and link is a panel card; its price is in gold */
body.ss .links { gap: 12px; }
body.ss .link { border-radius: 18px; padding: 16px 20px; border: 0; background: var(--panel); box-shadow: var(--shadow); backdrop-filter: none; text-align: left; gap: 14px;
  transition: transform 0.15s ease, box-shadow 0.15s ease; }
body.ss .link:hover, body.ss .link:focus-visible { transform: translateY(-1px); background: var(--panel); box-shadow: 0 0 0 1px var(--gold), 0 18px 50px -20px rgba(0, 0, 0, 0.7); }
body.ss .link:active { transform: scale(0.99); box-shadow: var(--shadow); }
body.ss .link .txt b { font-size: 22px; line-height: 1.2; color: var(--ink); display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
body.ss .link .price { color: var(--gold-hi); font: 700 20px var(--display); white-space: nowrap; margin: 0; }
body.ss .link .txt small { color: var(--ink-2); font-size: 14px; margin: 4px 0 0; max-width: none; }
body.ss .link .ico { color: var(--gold-hi); }
body.ss .link .thumb { border-radius: 12px; }
/* the highlighted reading wears the gold */
body.ss .link.glow { background: linear-gradient(180deg, rgba(242, 212, 140, 0.16), rgba(4, 38, 58, 0.78)); box-shadow: 0 0 0 1.5px var(--gold), 0 18px 50px -20px rgba(0, 0, 0, 0.7); }
body.ss .link .badge { background: var(--molten); color: #1d1405; box-shadow: 0 0 0 1px #F7D98F; font: 700 12px var(--sans); }
body.ss .link.soft { box-shadow: inset 0 0 0 1px var(--line); background: transparent; }

/* the player, notes and sign-up blocks are panels too */
body.ss .video, body.ss .sub, body.ss .note-block { border: 0; border-radius: 18px; background: var(--panel); box-shadow: var(--shadow); backdrop-filter: none; padding: 18px 20px; }
body.ss .video b, body.ss .sub > b { font-size: 22px; color: var(--ink); }
body.ss .video-frame, body.ss .embed-frame { border-radius: 12px; }
body.ss .note-block p { color: var(--ink-2); }

/* fields and the molten-gold buttons, as on the members site */
body.ss .sub input, body.ss .req input, body.ss .req select, body.ss .req textarea {
  border-radius: 12px; border: 1px solid var(--line); background: rgba(2, 20, 32, 0.6); color: var(--ink); font: 400 16px var(--sans); padding: 12px 14px; }
body.ss .sub input:focus, body.ss .req input:focus, body.ss .req select:focus, body.ss .req textarea:focus { outline: 2px solid var(--gold-hi); outline-offset: 1px; }
body.ss .sub button, body.ss .req-btn { border: 0; border-radius: 999px; min-height: 48px; padding: 0 22px; cursor: pointer; color: #1d1405;
  font: 700 18px/1 var(--display); background: var(--molten);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -2px 5px rgba(140, 82, 8, 0.35), 0 0 0 1px #F7D98F, 0 0 0 2px rgba(120, 78, 16, 0.55), 0 6px 14px -6px rgba(0, 0, 0, 0.6); }
body.ss .sub button:hover, body.ss .req-btn:hover { filter: brightness(1.08); transform: none; }
body.ss .sub-msg { color: var(--gold-hi); }
body.ss .req-note { color: var(--ink-2); }

/* the request form opens as a panel over the page */
body.ss .req-pop { border-radius: 18px; }
body.ss .req-pop::backdrop { background: rgba(2, 18, 29, 0.78); }
body.ss .req-pop .sub { background: var(--panel-solid); box-shadow: 0 0 0 1px var(--line); padding: 24px 22px; }
body.ss .req-pop .req > b { font-size: 26px; }
body.ss .pop-x:hover, body.ss .pop-x:focus-visible { color: var(--gold-hi); }
body.ss .req option { background: var(--panel-solid); }

body.ss .foot { color: var(--muted); font: italic 500 17px var(--display); margin-top: 32px; text-align: center; }
body.ss :focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; }
@media (max-width: 520px) {
  .ss-brand img { width: 50px; } .ss-brand span { font-size: 14px; }
  .ss-nav a { padding: 8px 10px; }
  body.ss .link .txt b { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) { body.ss .link { transition: none; } }