/* ---------------------------------------------------------------------------
   joebressler.com — riddimBank's black house style, because this is riddimBank's
   founder and the two should look related. Not riddimBank's site chrome though:
   no shared nav, no shared footer menu. Those link to /browse and /cart, which
   do not exist on this domain.

   Self-contained: one HTML file, one stylesheet, one photograph, no build step.
   --------------------------------------------------------------------------- */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#0A0A0A; --panel:#141414; --line:#262626;
  --ink:#ffffff; --soft:#C8C8C8; --dim:#8f8f8f;
  --green:#1DB954;
}
body{
  background:var(--bg);color:var(--ink);line-height:1.65;
  font-family:HelveticaNeue,Arial,'Open Sans','Helvetica Neue',Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;
}
a{color:var(--green)}
h1,h2,h3{font-family:'Archivo Black',sans-serif;font-weight:400;font-synthesis:none;line-height:1.2}

/* Typographic masthead, no photograph. See the note in index.html: the only
   pictures of Joe in the archive are personal snapshots, and a snapshot
   stretched across the top of a services page reads as a holiday album. */
.hero{
  border-bottom:1px solid var(--line);background:#0d0d0d;
  padding:64px 24px 54px;text-align:center;
}
h1{font-size:clamp(2.1rem,7vw,3.4rem);letter-spacing:.01em}
.tagline{
  color:var(--green);margin-top:14px;
  font-size:.875rem;letter-spacing:.18em;text-transform:uppercase;
}

main{flex:1 0 auto;width:100%;max-width:720px;margin:0 auto;padding:46px 24px 52px}
section{margin-bottom:48px}

h2{font-size:1.25rem;color:var(--green);margin-bottom:16px}
h3{font-size:1.0625rem;margin-bottom:8px;font-family:HelveticaNeue,Arial,sans-serif;font-weight:700}
p{color:var(--soft);margin-bottom:16px}
.opening p:first-child{font-size:1.125rem;color:var(--ink)}
.lede-sm{color:var(--dim);font-size:.9375rem;margin-bottom:20px}
em{color:var(--ink);font-style:italic}

.cards{display:flex;gap:12px;flex-wrap:wrap}
.card{
  flex:1 1 200px;display:block;background:var(--panel);border:1px solid var(--line);
  border-radius:10px;padding:18px 20px;text-decoration:none;color:var(--ink);
  transition:border-color .15s ease,background .15s ease;
}
.card:hover{border-color:var(--green);background:#181818}
.card-title{display:block;font-size:1.0625rem;font-weight:700;margin-bottom:6px}
.card-note{display:block;color:var(--dim);font-size:.9375rem;line-height:1.5}

/* Names as chips rather than a bulleted column: thirteen bullets down the page
   reads as a CV, thirteen chips reads as a roster, and a roster is the point. */
.names{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.names li{
  background:var(--panel);border:1px solid var(--line);border-radius:60px;
  padding:8px 16px;color:var(--soft);font-size:.9375rem;
}
.names li:nth-child(-n+4){color:var(--ink);border-color:#3a3a3a}

.rec{
  border-left:2px solid var(--line);padding-left:18px;margin-bottom:26px;
}
.rec:last-child{margin-bottom:0}
.rec p:last-child{margin-bottom:0}
.rec-link{font-size:.9375rem}

.shot{margin:0 0 48px}
.shot img{
  width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
  border-radius:10px;border:1px solid var(--line);background:#161616;display:block;
}
.shot figcaption{color:var(--dim);font-size:.9375rem;margin-top:10px}

.form{display:flex;flex-direction:column;gap:14px;max-width:520px}
.form label{display:flex;flex-direction:column;gap:6px;color:var(--soft);font-size:.9375rem}
.form input,.form textarea{
  background:#181818;border:1px solid #333;border-radius:8px;color:var(--ink);
  padding:12px 14px;font-size:16px;font-family:inherit;width:100%;
}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--green)}
.form textarea{resize:vertical;min-height:120px}
/* Genuinely invisible but NOT display:none — some bots skip hidden fields, and
   screen readers are handled by aria-hidden. */
.gotcha{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.btn{
  background:var(--green);color:#fff;border:0;border-radius:60px;padding:14px 32px;
  font-size:16px;font-weight:700;font-family:inherit;cursor:pointer;align-self:flex-start;
}
.btn:hover{background:#1ed760}
.btn[disabled]{opacity:.5;cursor:default}
.form-msg{color:var(--dim);font-size:.9375rem;min-height:1.2em}
.form-msg.ok{color:var(--green)}

footer{
  flex-shrink:0;border-top:1px solid var(--line);padding:24px;text-align:center;
  color:var(--dim);font-size:.875rem;
}
.fine{margin-top:5px;font-size:.8125rem}

@media(max-width:640px){
  .hero{padding:44px 18px 38px}
  main{padding:34px 18px 40px}
  section{margin-bottom:38px}
}