/* ==========================================================================
   Innate Artist Group — innateartistgroup.com
   Direction B, "The Roster". Hand-written CSS, no framework, no build step.
   Upload this folder as-is. Nothing here needs compiling.
   ========================================================================== */

:root{
  /* --- brand ------------------------------------------------------------- */
  --ink:#1C1D1A;          /* graphite  — text, masthead                      */
  --iron:#3C3E3A;         /* body copy                                       */
  --steel:#6B6E68;        /* secondary                                       */
  --concrete:#A9A79C;     /* tertiary, placeholders                          */
  --rule:#CFCCC3;
  --rule-soft:#DFDCD4;
  --bone:#E9E8E4;
  --paper:#F5F4F0;
  --claret:#5F2028;       /* the card colour                                 */
  --claret-lift:#733039;  /* hover only                                      */

  --gutter:clamp(20px, 5vw, 56px);
  --dur:150ms;
  --ease:cubic-bezier(.2,.7,.3,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--iron);
  font-family:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  font-weight:300;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--claret);outline-offset:3px}

/* claret hairline across the very top — the painted card edge, on screen */
.edge{height:4px;background:var(--claret)}

/* --- masthead ------------------------------------------------------------ */
.mast{
  display:flex;align-items:center;gap:28px;
  padding:20px var(--gutter);border-bottom:1px solid var(--rule);
}
.mast .logo{height:24px;width:auto;color:var(--ink)}
.mast .logo path{fill:currentColor}
.mast .desc{
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:9px;
  letter-spacing:.3em;text-transform:uppercase;color:var(--steel);
  border-left:1px solid var(--rule);padding-left:14px;line-height:1.7;
}
.mast nav{margin-left:auto;display:flex;align-items:center;gap:26px}
.mast nav a{font-size:14px;text-decoration:none;color:var(--iron)}
.mast nav a:hover{color:var(--ink)}
.mast .btn{
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;border:1px solid var(--ink);padding:9px 16px;
  color:var(--ink);text-decoration:none;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.mast .btn:hover{background:var(--ink);color:var(--paper)}
.mast .burger{display:none;margin-left:auto;background:none;border:0;padding:6px;cursor:pointer}
.mast .burger i{display:block;width:20px;height:1.5px;background:var(--ink);margin:4px 0}

/* --- hero ---------------------------------------------------------------- */
.hero{position:relative;height:clamp(340px,58vh,560px);overflow:hidden;background:var(--concrete)}
.hero .shot{position:absolute;inset:0;background:var(--concrete) center/cover no-repeat}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(transparent 42%, rgba(20,18,16,.68));
}
.hero .cap{position:absolute;left:var(--gutter);bottom:34px;z-index:2}
.hero .kicker{
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:#E9B9B9;margin-bottom:12px;   /* claret, lifted for contrast */
}
.hero h1{
  font-family:"IBM Plex Sans Condensed","IBM Plex Sans",sans-serif;font-weight:600;
  font-size:clamp(38px,9vw,84px);line-height:1;text-transform:uppercase;
  color:#fff;margin:0;letter-spacing:-.005em;
}

/* --- roster -------------------------------------------------------------- */
.roster{display:grid;gap:1px;background:var(--rule)}
@media (min-width:760px){ .roster{grid-template-columns:1fr 1fr} }
/* When you sign a third artist, uncomment this and the grid becomes three-up.
   Leave it commented until then — an empty column reads as a vacancy. */
/* @media (min-width:1180px){ .roster{grid-template-columns:repeat(3,1fr)} } */

.artist{background:var(--paper);padding-bottom:22px}
.artist .shot{
  aspect-ratio:4/3;background:var(--concrete) center/cover no-repeat;
  display:grid;place-items:center;
}
.artist .shot span{
  font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(28,29,26,.42);
}
.artist .body{padding:18px var(--gutter) 0}
@media (min-width:760px){ .artist .body{padding:18px 26px 0} }
.artist h2{
  font-family:"IBM Plex Sans Condensed","IBM Plex Sans",sans-serif;font-weight:600;
  font-size:26px;line-height:1;text-transform:uppercase;color:var(--ink);margin:0;
}
.artist .genre{font-size:13px;color:var(--steel);margin-top:5px}

/* latest release */
.release{
  display:flex;align-items:center;gap:12px;margin-top:18px;padding:11px 0;
  border-top:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft);
  text-decoration:none;
}
.release img,.release .art{width:44px;height:44px;flex:none;background:var(--concrete)}
.release b{display:block;font-size:14px;font-weight:600;color:var(--ink)}
.release i{
  font-style:normal;display:block;font-family:"IBM Plex Mono",monospace;
  font-size:10px;letter-spacing:.09em;color:var(--claret);margin-top:2px;
}
.release:hover b{color:var(--claret)}

/* dates */
.date{
  display:grid;grid-template-columns:62px 1fr auto;gap:10px;align-items:baseline;
  padding:10px 0;border-bottom:1px solid var(--rule-soft);
  text-decoration:none;transition:background var(--dur) var(--ease);
}
.date:hover{background:var(--bone)}
.date .d{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--claret);letter-spacing:.06em}
.date .v{font-size:13.5px;color:var(--ink);font-weight:500}
.date .v em{font-style:normal;display:block;font-size:12px;color:var(--steel);font-weight:300}
.date .s{
  font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--steel);
}
.date .s.out{color:var(--claret)}
.nodates{font-size:13px;color:var(--concrete);padding:12px 0 0}

/* --- statement ----------------------------------------------------------- */
.statement{padding:clamp(48px,8vw,78px) var(--gutter);border-top:1px solid var(--rule);background:var(--bone)}
.statement h2{
  font-family:"IBM Plex Sans Condensed","IBM Plex Sans",sans-serif;font-weight:600;
  font-size:clamp(26px,4.4vw,36px);line-height:1.1;text-transform:uppercase;
  color:var(--ink);margin:0 0 16px;max-width:22ch;
}
.statement h2 span{color:var(--claret)}
.statement p{font-size:17px;color:var(--steel);max-width:56ch;margin:0}

/* --- contact — the claret block ------------------------------------------ */
.contact{background:var(--claret);color:#EFDCDC;padding:clamp(52px,9vw,88px) var(--gutter)}
.contact h2{
  font-family:"IBM Plex Sans Condensed","IBM Plex Sans",sans-serif;font-weight:600;
  font-size:clamp(30px,5.6vw,50px);line-height:1.05;text-transform:uppercase;
  color:#fff;margin:0 0 18px;max-width:18ch;
}
.contact p{font-size:17px;color:rgba(255,255,255,.78);max-width:46ch;margin:0 0 30px}
.contact .mail{
  font-family:"IBM Plex Mono",monospace;font-size:clamp(15px,2.6vw,19px);color:#fff;
  text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:5px;
  transition:border-color var(--dur) var(--ease);
}
.contact .mail:hover{border-bottom-color:#fff}

/* --- footer -------------------------------------------------------------- */
.foot{
  background:var(--ink);color:#7C7F76;padding:26px var(--gutter);
  display:flex;flex-wrap:wrap;gap:10px 28px;align-items:center;
  font-family:"IBM Plex Mono",monospace;font-size:10px;
  letter-spacing:.15em;text-transform:uppercase;
}
.foot .beam{height:15px;width:auto;color:#8B8E85;flex:none}
.foot .beam path{fill:currentColor}
.foot .right{margin-left:auto}
.foot a{color:#9DA096}

@media (max-width:759px){
  .mast nav{display:none}
  .mast .burger{display:block}
  .mast nav.open{
    display:flex;flex-direction:column;align-items:flex-start;gap:14px;
    position:absolute;left:0;right:0;top:100%;background:var(--paper);
    padding:20px var(--gutter);border-bottom:1px solid var(--rule);z-index:20;
  }
  .mast{position:relative}
}
@media (prefers-reduced-motion:reduce){ *{transition-duration:.01ms !important} }