/* =========================================================
   surfxpro.com — "What Would Iconic Rock Stars Look Like Today?"
   Editorial rebuild of the spilleddaily article layout.
   Palette sampled from images/logo.png: deep teal-black
   #0E2B2B with the magenta/violet surf mark #B02BA0.
   Type: Archivo (display) / Inter (text)
   ========================================================= */

:root{
  --ink-950:#071818;
  --ink-900:#0E2B2B;
  --ink-800:#163B3A;
  --ink-700:#22403F;

  --magenta:#B02BA0;
  --magenta-dk:#8A1F7D;
  --magenta-lt:#E14FCE;
  --blush:#F3C9EC;
  --blush-50:#FAE7F7;

  --paper:#FFFFFF;
  --shell:#F5F1F5;
  --shell-2:#EDE6EE;
  --body:#4A5555;
  --muted:#7A8585;
  --line:#E2DBE4;
  --line-2:#CFC4D2;

  --wrap:1180px;
  --measure:760px;
  --gutter:clamp(16px,4vw,32px);

  --display:"Archivo",system-ui,sans-serif;
  --text:"Inter",system-ui,-apple-system,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html,body{max-width:100%;overflow-x:hidden}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--body);
  font-family:var(--text);font-size:17px;line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--magenta-dk)}
h1,h2,h3{font-family:var(--display);color:var(--ink-900);line-height:1.14;margin:0;font-weight:800;letter-spacing:-.02em}
p{margin:0 0 1.3em}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--magenta);outline-offset:3px}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.measure{max-width:var(--measure);margin-inline:auto}

/* ============ HEADER ============ */
.site-header{position:static;background:var(--paper);border-bottom:1px solid var(--line)}
.header-inner{
  display:flex;align-items:center;justify-content:center;
  padding-block:1rem;
}
.logo-img{height:46px;width:auto}
@media (max-width:520px){
  .logo-img{height:40px}
}

/* ============ ARTICLE ============ */
.article{padding-block:clamp(26px,4vw,48px) clamp(34px,5vw,60px)}
.article h1{
  font-size:clamp(1.75rem,4.4vw,2.85rem);line-height:1.1;
  text-wrap:balance;margin:0 0 .7rem;
}
.byline{font-size:.95rem;color:var(--muted);margin:0 0 clamp(20px,3vw,30px)}
.byline a{color:var(--magenta);font-weight:600;text-decoration:none}
.byline a:hover{text-decoration:underline}

/* hero: image with the slideshow bar sitting on its lower edge */
.hero-figure{margin:0;position:relative}
.hero-figure > img{
  width:100%;border-radius:14px 14px 0 0;background:var(--ink-950);
}
.hero-bar{
  display:flex;align-items:center;justify-content:center;gap:.7rem;
  background:linear-gradient(100deg,var(--ink-900) 0%,var(--magenta-dk) 130%);
  color:#fff;text-decoration:none;text-align:center;
  font-family:var(--display);font-weight:800;font-size:clamp(1rem,2.6vw,1.35rem);
  letter-spacing:.03em;text-transform:uppercase;
  padding:1rem 1.2rem;border-radius:0 0 14px 14px;
  transition:background .18s ease;
}
.hero-bar:hover{background:linear-gradient(100deg,var(--ink-800) 0%,var(--magenta) 130%)}
.hero-bar svg{width:20px;height:20px;flex:none}
.hero-source{
  margin:.6rem 0 0;text-align:center;font-size:.72rem;color:var(--muted);
}
.hero-source a{color:var(--muted);text-decoration:none}
.hero-source a:hover{color:var(--magenta);text-decoration:underline}

/* body copy */
.article-body{margin-top:clamp(26px,4vw,40px)}
.article-body p{font-size:1.06rem;line-height:1.8;color:var(--body)}
.article-body p:first-of-type::first-letter{
  float:left;font-family:var(--display);font-weight:800;font-size:3.4em;line-height:.86;
  padding:.06em .12em 0 0;color:var(--magenta);
}

/* big slideshow CTA */
.cta-slideshow{
  display:flex;align-items:center;justify-content:center;gap:.8rem;
  width:100%;margin:clamp(28px,4vw,44px) 0 0;
  background:linear-gradient(100deg,var(--ink-900) 0%,var(--magenta-dk) 140%);
  color:#fff;text-decoration:none;text-align:center;
  font-family:var(--display);font-weight:800;font-size:clamp(1.05rem,2.8vw,1.5rem);
  letter-spacing:.03em;text-transform:uppercase;
  padding:1.25rem 1.4rem;border-radius:12px;
  box-shadow:0 14px 30px -16px rgba(176,43,160,.75);
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.cta-slideshow:hover{
  transform:translateY(-2px);
  background:linear-gradient(100deg,var(--ink-800) 0%,var(--magenta) 140%);
  box-shadow:0 20px 38px -18px rgba(176,43,160,.85);
}
.cta-slideshow svg{width:24px;height:24px;flex:none}

/* ============ SIGN-UP CARD — three steps ============ */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.signup{
  margin:clamp(30px,4.5vw,52px) 0 0;
  background:var(--paper);border:1px solid var(--line);border-radius:14px;
  overflow:hidden;box-shadow:0 18px 40px -26px rgba(14,43,43,.35);
}
.su-bar{display:block;height:6px;background:linear-gradient(90deg,var(--magenta) 0%,var(--magenta-lt) 100%)}
.su-inner{padding:clamp(1.3rem,3.4vw,2.1rem)}

.signup h2{font-size:clamp(1.15rem,2.8vw,1.5rem);margin:0 0 .5rem}
.su-intro{font-size:.95rem;line-height:1.7;color:var(--body);margin:0 0 1.5rem}

/* numbered progress chips */
.su-steps{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:.45rem clamp(.8rem,2.4vw,1.6rem);margin:0 0 clamp(1.4rem,3vw,2rem);
}
.su-step{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.92rem;font-weight:500;color:var(--muted);
}
.su-num{
  display:grid;place-items:center;width:26px;height:26px;border-radius:50%;flex:none;
  border:1.5px solid var(--line-2);background:var(--paper);
  font-family:var(--display);font-weight:700;font-size:.8rem;color:var(--muted);
  transition:border-color .18s ease,color .18s ease,background .18s ease;
}
.su-step.is-on{color:var(--ink-900);font-weight:600}
.su-step.is-on .su-num{border-color:var(--magenta);color:var(--magenta)}
.su-step.is-done{color:var(--ink-800)}
.su-step.is-done .su-num{background:var(--magenta);border-color:var(--magenta);color:#fff}
.su-step.is-done .su-num svg{width:13px;height:13px}

/* panels */
.su-panel{text-align:center;max-width:26rem;margin-inline:auto}
.su-prompt{
  font-family:var(--display);font-weight:700;font-size:clamp(1rem,2.4vw,1.14rem);
  color:var(--ink-900);margin:0 0 .5rem;
}
.su-help{font-size:.86rem;line-height:1.6;color:var(--muted);margin:0 0 1.1rem}

.su-field{margin:0 0 1rem;text-align:left}
.su-field input{
  width:100%;font-family:var(--text);font-size:1rem;color:var(--ink-900);
  background:var(--paper);border:2px solid var(--ink-900);border-radius:7px;
  padding:.8rem .95rem;transition:border-color .16s ease,box-shadow .16s ease;
}
.su-field input::placeholder{color:var(--muted)}
.su-field input:focus{outline:none;border-color:var(--magenta);box-shadow:0 0 0 3px rgba(176,43,160,.16)}
.su-field.has-error input{border-color:#C42B6B;background:#FFF7FB}
.su-err{display:block;margin:.45rem 0 0;font-size:.84rem;color:#C42B6B}

.su-btn{
  display:block;width:100%;cursor:pointer;border:0;border-radius:7px;
  font-family:var(--display);font-weight:700;font-size:1rem;
  background:var(--magenta);color:#fff;padding:.85rem 1.2rem;
  transition:background .16s ease,transform .16s ease;
}
.su-btn:hover{background:var(--magenta-dk);transform:translateY(-1px)}
.su-back{
  display:block;margin:.75rem auto 0;background:none;border:0;cursor:pointer;
  font-family:var(--text);font-size:.86rem;color:var(--muted);padding:.25rem .5rem;
}
.su-back:hover{color:var(--magenta)}

/* step 3 — the done panel */
.su-done{padding-block:.4rem}
.su-tick{
  display:grid;place-items:center;width:58px;height:58px;border-radius:50%;
  margin:0 auto 1rem;background:var(--blush-50);color:var(--magenta);
}
.su-tick svg{width:30px;height:30px}
.su-done h3{font-size:clamp(1.05rem,2.6vw,1.28rem);margin:0 0 .6rem}
.su-done p{font-size:.95rem;line-height:1.7;color:var(--body);margin:0 0 .6rem}
.su-echo{font-size:.86rem !important;color:var(--muted) !important}
.su-echo b{color:var(--ink-900)}
/* ============ FOOTER ============ */
.site-footer{background:var(--ink-900);color:var(--blush);padding-block:clamp(30px,4.5vw,50px);margin-top:clamp(34px,5vw,60px)}
.footer-inner{display:grid;justify-items:center;gap:1.1rem;text-align:center}
.footer-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 2rem}
.footer-nav a{
  font-family:var(--display);font-weight:700;font-size:.82rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--blush);text-decoration:none;
}
.footer-nav a:hover{color:#fff}
.footer-rule{width:min(760px,100%);height:1px;background:rgba(243,201,236,.24)}
.footer-company{font-size:.84rem;color:rgba(243,201,236,.8);line-height:1.75}
.footer-company p{margin:0}
.footer-company a{color:var(--blush)}
.footer-copy{margin-top:.6rem !important;color:rgba(243,201,236,.6);font-size:.82rem}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none !important}}

/* ============ SLIDESHOW ============ */
.slide-progress{display:flex;align-items:center;gap:.9rem;margin:0 0 1.1rem}
.slide-count{
  margin:0;font-family:var(--display);font-weight:700;font-size:.8rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);flex:none;
}
.slide-count b{color:var(--magenta)}
.slide-track{flex:1;height:4px;border-radius:99px;background:var(--shell-2);overflow:hidden}
.slide-fill{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--magenta) 0%,var(--magenta-lt) 100%)}

.slide-name{font-size:clamp(1.35rem,3.4vw,2rem);margin:0 0 1rem}

.slide-figure{margin:0 0 1.4rem}
.slide-figure img{width:100%;border-radius:14px;background:var(--ink-950)}
.slide-credit{margin:.6rem 0 0;font-size:.72rem;color:var(--muted);text-align:center}
.slide-credit a{color:var(--muted);text-decoration:none}
.slide-credit a:hover{color:var(--magenta);text-decoration:underline}

/* shown until the image file is dropped in */
.slide-placeholder{
  display:grid;place-items:center;gap:.7rem;aspect-ratio:16/10;
  border:2px dashed var(--line-2);border-radius:14px;background:var(--shell);
  color:var(--muted);text-align:center;padding:1.2rem;
}
.slide-placeholder svg{width:40px;height:40px;opacity:.55}
.slide-placeholder p{margin:0;font-size:.85rem}
.slide-placeholder code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85em;
  background:var(--paper);border:1px solid var(--line);border-radius:5px;padding:.15rem .4rem;
}

.slide-body p{font-size:1.04rem;line-height:1.8;color:var(--body);margin:0 0 1.4rem}

.slide-nav{display:flex;align-items:stretch;gap:.7rem;margin:0 0 1.2rem}
.slide-prev,.slide-next{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--display);font-weight:700;font-size:.92rem;
  text-decoration:none;border-radius:9px;padding:.85rem 1.1rem;
  transition:background .16s ease,color .16s ease,transform .16s ease;
}
.slide-prev{flex:none;background:var(--shell);color:var(--ink-800);border:1px solid var(--line-2)}
.slide-prev:hover{background:var(--shell-2);transform:translateY(-1px)}
.slide-next{
  flex:1;background:linear-gradient(100deg,var(--ink-900) 0%,var(--magenta-dk) 150%);color:#fff;
  box-shadow:0 10px 24px -14px rgba(176,43,160,.8);
}
.slide-next:hover{background:linear-gradient(100deg,var(--ink-800) 0%,var(--magenta) 150%);transform:translateY(-1px)}
.slide-prev svg,.slide-next svg{width:17px;height:17px;flex:none}
.slide-next-name{
  font-weight:500;font-size:.85rem;opacity:.8;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:14ch;
}
@media (max-width:520px){
  .slide-nav{flex-direction:column}
  .slide-prev,.slide-next{width:100%}
  .slide-next-name{display:none}
}