/* Side Channel skin for Listmonk public pages (form, opt-in, unsubscribe/manage, archive, messages).
   Assets come from https://list.sidechannel.music/sc/ (Caddy serves sidechannel.music/assets there). */
@font-face{font-family:"SC Montserrat";src:url("/sc/fonts/Montserrat-VF-latin.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
:root{
  --amber:#ffb260;--amber-core:#ffe9cf;--blue:#50aaff;--blue-core:#cfe6ff;
  --ink:#ede6da;--muted:#a9b6b8;--teal:#061418;
  --glass:rgba(8,22,27,.56);--line:rgba(255,255,255,.09);--radius:18px;
  --font:"SC Montserrat","Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color-scheme:dark;
}
html{background:var(--teal);-webkit-text-size-adjust:100%}
body{position:relative;z-index:0;min-height:100vh;min-height:100svh;background:transparent;color:var(--ink);font-family:var(--font);
  font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  display:flex;flex-direction:column;align-items:center;padding:clamp(16px,3.5vh,48px) 16px 0}
/* background plate: same photo, framing and vignette as sidechannel.music */
body::before{content:"";position:fixed;inset:-4%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(120% 70% at 50% 28%,rgba(4,12,15,.2) 0%,rgba(4,12,15,.58) 55%,rgba(3,9,11,.9) 100%),
    linear-gradient(180deg,rgba(3,9,11,.25) 0%,rgba(3,9,11,0) 30%,rgba(3,9,11,.6) 100%),
    #061418 url("/sc/img/rain_bg.jpg") center 55%/cover no-repeat;
  background-image:
    radial-gradient(120% 70% at 50% 28%,rgba(4,12,15,.2) 0%,rgba(4,12,15,.58) 55%,rgba(3,9,11,.9) 100%),
    linear-gradient(180deg,rgba(3,9,11,.25) 0%,rgba(3,9,11,0) 30%,rgba(3,9,11,.6) 100%),
    image-set(url("/sc/img/rain_bg.webp") type("image/webp"),url("/sc/img/rain_bg.jpg") type("image/jpeg"))}
canvas.rain{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:.9}

a{color:#ffd9a8;text-decoration-color:rgba(255,217,168,.35);text-underline-offset:3px;transition:color .3s,text-decoration-color .3s}
a:hover{color:#fff3e2;text-decoration-color:rgba(255,217,168,.8)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid #ffd9a8;outline-offset:3px}
label{color:var(--ink)}
h1,h2,h3,h4{color:#f6efe4;font-weight:500;letter-spacing:.04em}

/* glass card */
.container{width:100%;max-width:520px;margin:0 auto}
.wrap{position:relative;margin:auto 0;padding:clamp(24px,3.6vw,34px) clamp(22px,3.6vw,36px);border-radius:calc(var(--radius) + 4px);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.01)),var(--glass);border:1px solid var(--line);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 18px 60px rgba(0,0,0,.4)}

/* brand header: play mark, SIDE / CHANNEL neon, slogan (pure CSS, so it shows without JS) */
.header{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;text-align:center;border:0;margin:0 0 clamp(18px,2.6vh,26px);padding:0 0 clamp(16px,2.4vh,22px);position:relative}
.header::after,.header::before{font-weight:250;font-size:clamp(25px,6.6vw,34px);line-height:1;letter-spacing:.3em;white-space:nowrap}
.header .logo{display:contents}
.header .logo a{order:0;flex:0 0 100%;display:flex;justify-content:center;margin-bottom:16px;text-decoration:none}
.header .logo img{width:72px;height:72px;max-width:none;object-fit:cover;border-radius:50%;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.14),0 0 0 5px rgba(6,20,24,.55),0 10px 34px rgba(0,0,0,.55),0 0 40px rgba(255,178,96,.16),16px 0 44px -12px rgba(80,170,255,.22)}
.header::before{order:1;content:"SIDE";margin-right:.62em;color:var(--blue-core);
  text-shadow:0 0 1px #f2f8ff,0 0 .05em rgba(170,215,255,.95),0 0 .16em rgba(80,170,255,.9),0 0 .42em rgba(60,150,255,.55),0 0 1.1em rgba(50,140,255,.32)}
.header::after{order:2;content:"CHANNEL";margin-right:-.3em;color:var(--amber-core);
  text-shadow:0 0 1px #fff7ec,0 0 .05em rgba(255,214,160,.95),0 0 .16em rgba(255,178,96,.9),0 0 .42em rgba(255,160,70,.55),0 0 1.1em rgba(255,150,60,.32)}
.header .logo::after{order:3;flex:0 0 100%;content:"The other track";margin-top:14px;font-weight:500;font-size:12.5px;letter-spacing:.26em;text-indent:.26em;text-transform:uppercase;color:#f3e7d6}
/* hairline divider under the header, fading at the ends */
.header .logo::before{content:"";position:absolute;left:8%;right:8%;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent)}

/* section titles */
section>h2,.wrap>h2,.manage-form h2,.unsub-form~h2{margin:0 0 14px;font-size:21px;font-weight:500;letter-spacing:.05em}
h3{font-size:16px;font-weight:600}
section>p,.wrap>div{color:#d9d3c8}

/* form fields */
.form p,.manage-form p{margin:0 0 14px}
.form label[for=email],.form label[for=name],.manage-form>div>label,.form label[for=username],.form label[for=password]{display:block;margin:0 0 7px;font-weight:600;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:#cdbfa9}
input[type="text"],input[type="email"],input[type="password"],select{width:100%;min-height:48px;padding:12px 16px;border-radius:12px;font:inherit;font-size:16px;color:#f4eee5;
  background:rgba(4,14,17,.55);border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px 2px rgba(0,0,0,.35);transition:border-color .3s,box-shadow .3s,background-color .3s}
input::placeholder{color:rgba(169,182,184,.6)}
input[type="text"]:focus,input[type="email"]:focus,input[type="password"]:focus,select:focus{outline:none;border-color:rgba(255,178,96,.55);background:rgba(4,14,17,.7);box-shadow:0 0 0 3px rgba(255,178,96,.14),0 0 22px rgba(255,170,80,.12)}
input[type="checkbox"],input[type="radio"]{accent-color:var(--amber);width:17px;height:17px;vertical-align:-3px;margin:0 8px 0 0}

/* lists block */
.lists{margin:18px 0 4px;padding:14px 16px 4px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid var(--line)}
.lists h2{margin:0 0 10px;font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#cdbfa9}
.lists li{margin:0 0 6px}
.lists li label{font-weight:600;letter-spacing:.02em;color:#f4eee5}
.lists .description{margin:2px 0 12px 25px;font-size:13px;line-height:1.45;color:var(--muted)}
.form .captcha{margin:16px 0 18px}

/* Altcha widget, dark */
altcha-widget{--altcha-border-width:1px;--altcha-border-radius:12px;--altcha-color-base:rgba(4,14,17,.55);--altcha-color-border:rgba(255,255,255,.12);
  --altcha-color-text:#ede6da;--altcha-color-border-focus:rgba(255,178,96,.55);--altcha-color-error-text:#ff9c7a;--altcha-color-footer-bg:rgba(255,255,255,.03);--altcha-max-width:100%;
  display:block;color-scheme:dark}

/* buttons: same amber pill as the main page */
.button,button.button,input[type=submit].button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;min-width:0;width:100%;padding:0 26px;border:0;border-radius:999px;
  font:inherit;font-weight:600;font-size:15px;letter-spacing:.06em;color:#1a1206;text-decoration:none;cursor:pointer;
  background:linear-gradient(90deg,#ffc684,#f3b46a);box-shadow:0 0 22px rgba(255,170,80,.25);transition:box-shadow .35s,transform .35s,filter .35s}
.button:hover,.button:focus-visible{background:linear-gradient(90deg,#ffcf94,#f6bd78);color:#1a1206;transform:translateY(-1px);box-shadow:0 0 30px rgba(255,170,80,.45)}
.button.button-outline{color:#eaf4ff;background:rgba(80,170,255,.12);border:1px solid rgba(80,170,255,.45);box-shadow:none}
.button.button-outline:hover{color:#fff;background:rgba(80,170,255,.18);border-color:rgba(80,170,255,.7);box-shadow:0 0 24px rgba(80,170,255,.3)}
.right{text-align:center}
.form .right,.right{margin:16px 0 0;font-size:13px}
.form .right a,.right a{color:var(--muted)}
.form .right a:hover,.right a:hover{color:#f4eee5}

/* archive, home, misc */
.archive li{padding:12px 0;margin:0;border-bottom:1px solid var(--line)}
.archive .date{color:var(--muted)}
.feed{filter:invert(.85) sepia(.3);vertical-align:-3px}
.home-options a,.pagination a{color:#ffd9a8}
.unsub-all,.data-form section{border-top:1px solid var(--line)}
.data-form{margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
.row{color:#d9d3c8}
.error{color:#ff9c7a}
ul{padding-left:20px}
.optin-form ul{margin:14px 0 20px;color:#f4eee5}

/* footer */
footer.container{margin:0;padding:clamp(18px,3vh,32px) 0 calc(20px + env(safe-area-inset-bottom));max-width:520px;text-align:center;font-size:12px;letter-spacing:.06em;color:#8b989a}
footer a{color:#8b989a}
footer a:hover{color:#f4eee5}
.sc-home{display:block;margin-bottom:6px;color:#a9b6b8;text-decoration:none;letter-spacing:.08em}

@media (max-width:420px){
  body{padding-top:14px;padding-left:12px;padding-right:12px}
  .wrap{padding:24px 20px}
  .header::after,.header::before{letter-spacing:.24em}
  .header::before{margin-right:.5em}.header::after{margin-right:-.24em}
}
@media (prefers-reduced-motion:reduce){
  canvas.rain{display:none}
  .button,a,input{transition:none}
  .button:hover{transform:none}
}